Initial: JSONL→SQLite Exporter + Cost Analytics Web UI

2026-02-20 22:09:05 +01:00
commit 9803f8c727
@@ -0,0 +1,21 @@
+# Node
+node_modules/
+
+# .NET
+bin/
+obj/
+*.user
+
+# Data
+sessions.db
+state.json
+
+# IDE
+.vs/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
@@ -0,0 +1,13 @@
+# JSONL Exporter
+
+## Projektbeschreibung
+
+Exportiert OpenClaw Session-JSONL-Dateien als einzelne JSON-Files nach `workspace/logs/`. Inkrementell via `state.json`.
+
+## Pfad
+
+`/home/node/.openclaw/workspace/projects/jsonl-exporter`
+
+## Notizen
+
+- 
@@ -0,0 +1,29 @@
+# JSONL Exporter
+
+Liest alle Session-JSONL-Dateien aus dem OpenClaw Sessions-Verzeichnis und exportiert jeden Eintrag als einzelne JSON-Datei nach `workspace/logs/`.
+
+## Funktionsweise
+
+- Scannt `/home/node/.openclaw/agents/main/sessions/*.jsonl`
+- Pro Eintrag wird eine Datei mit lesbarem Namen angelegt:  
+  `YYYY-MM-DD HH-mm-ss ms - <shortId> (type).json`
+- Speichert den Fortschritt in `state.json` (nur neue Einträge werden exportiert)
+- Überspringt gelöschte Sessions (`.deleted`) und fehlerhafte Zeilen
+
+## Dateien
+
+| Datei | Zweck |
+|-------|-------|
+| `export.mjs` | Hauptskript (ESM) |
+| `export.js` | Gleiche Logik als CommonJS |
+| `state.json` | Fortschritts-State (verarbeitete Zeilenzahl pro JSONL) |
+
+## Ausführen
+
+```bash
+node export.mjs
+# oder
+node export.js
+```
+
+Output landet in: `workspace/logs/`
@@ -0,0 +1,81 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import Database from 'better-sqlite3';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SESSIONS_DIR = '/home/node/.openclaw/agents/main/sessions';
+const DB_FILE = path.join(__dirname, 'sessions.db');
+
+// DB öffnen + Schema anlegen
+const db = new Database(DB_FILE);
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS entries (
+    id        TEXT PRIMARY KEY,
+    session   TEXT NOT NULL,
+    type      TEXT,
+    timestamp TEXT,
+    data      TEXT NOT NULL
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_session   ON entries (session);
+  CREATE INDEX IF NOT EXISTS idx_type      ON entries (type);
+  CREATE INDEX IF NOT EXISTS idx_timestamp ON entries (timestamp);
+
+  CREATE TABLE IF NOT EXISTS state (
+    file  TEXT PRIMARY KEY,
+    lines INTEGER NOT NULL DEFAULT 0
+  );
+`);
+
+const getState  = db.prepare('SELECT lines FROM state WHERE file = ?');
+const setState  = db.prepare('INSERT OR REPLACE INTO state (file, lines) VALUES (?, ?)');
+const insertEntry = db.prepare(`
+  INSERT OR IGNORE INTO entries (id, session, type, timestamp, data)
+  VALUES (@id, @session, @type, @timestamp, @data)
+`);
+
+// Find all JSONL files
+const jsonlFiles = fs.readdirSync(SESSIONS_DIR)
+  .filter(f => f.endsWith('.jsonl') && !f.includes('.deleted'));
+
+let exported = 0;
+
+const runImport = db.transaction(() => {
+  for (const file of jsonlFiles) {
+    const filePath = path.join(SESSIONS_DIR, file);
+    const sessionName = file.replace('.jsonl', '');
+    const lines = fs.readFileSync(filePath, 'utf-8').split('\n').filter(l => l.trim());
+
+    const lastProcessed = getState.get(file)?.lines ?? 0;
+
+    for (let i = lastProcessed; i < lines.length; i++) {
+      try {
+        const entry = JSON.parse(lines[i]);
+        if (!entry.timestamp) continue;
+
+        const id = entry.id || `${sessionName}-${i}`;
+
+        insertEntry.run({
+          id,
+          session:   sessionName,
+          type:      entry.type ?? 'unknown',
+          timestamp: entry.timestamp,
+          data:      JSON.stringify(entry),
+        });
+
+        exported++;
+      } catch {
+        // skip malformed lines
+      }
+    }
+
+    setState.run(file, lines.length);
+  }
+});
+
+runImport();
+db.close();
+
+console.log(`Exportiert: ${exported} neue Einträge → ${DB_FILE}`);
@@ -0,0 +1,468 @@
+{
+  "name": "jsonl-exporter",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "jsonl-exporter",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "better-sqlite3": "^12.6.2"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/better-sqlite3": {
+      "version": "12.6.2",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.6.2.tgz",
+      "integrity": "sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "prebuild-install": "^7.1.1"
+      },
+      "engines": {
+        "node": "20.x || 22.x || 23.x || 24.x || 25.x"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC"
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT"
+    },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT"
+    },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT"
+    },
+    "node_modules/node-abi": {
+      "version": "3.87.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
+      "integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tar-fs": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
+      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    }
+  }
+}
@@ -0,0 +1,15 @@
+{
+  "name": "jsonl-exporter",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "better-sqlite3": "^12.6.2"
+  }
+}
@@ -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();
@@ -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"
+      }
+    }
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "DetailedErrors": true,
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "Urls": "http://0.0.0.0:18684",
+  "DbPath": "../sessions.db"
+}
@@ -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>
@@ -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;');
+}
@@ -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>
@@ -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; }