tokviz 0.1.0 → 0.3.0

package/dist/client/assets/index-YQMK5nkl.css

@@ -0,0 +1 @@
+:root{--bg:#fff;--bg-secondary:#f5f5f5;--text:#1a1a1a;--text-secondary:#666;--border:#e0e0e0;--accent:#2563eb;--accent-hover:#1d4ed8;--card-bg:#fff;--card-shadow:0 1px 3px #0000001a;--chart-input:#3b82f6;--chart-output:#f59e0b;--chart-cost:#8b5cf6}@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--bg-secondary:#1a1a1a;--text:#e5e5e5;--text-secondary:#999;--border:#333;--accent:#3b82f6;--accent-hover:#60a5fa;--card-bg:#1a1a1a;--card-shadow:0 1px 3px #0000004d;--chart-input:#60a5fa;--chart-output:#fbbf24;--chart-cost:#a78bfa}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.app{max-width:1200px;margin:0 auto;padding:24px}.header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.header h1{align-items:center;gap:8px;font-size:24px;font-weight:600;display:flex}.logo{width:28px;height:28px}.connection-status{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;display:flex}.status-dot{background:#ef4444;border-radius:50%;width:8px;height:8px}.status-dot.connected{background:#22c55e}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-bottom:24px;display:flex}.tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 16px;font-size:14px;font-weight:500;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;display:grid}.card{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--card-shadow);border-radius:8px;padding:16px}.card-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:4px;font-size:12px}.card-value{font-size:24px;font-weight:600}.chart-container{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--card-shadow);border-radius:8px;margin-bottom:24px;padding:20px}.chart-title{color:var(--text-secondary);margin-bottom:16px;font-size:14px;font-weight:500}.chart-controls{justify-content:flex-end;margin-bottom:12px;display:flex}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.toggle-label{color:var(--text-secondary);font-size:13px}.toggle input{display:none}.toggle-track{background:var(--border);border-radius:10px;width:36px;height:20px;transition:background .2s;position:relative}.toggle-track:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track:after{transform:translate(16px)}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;border-bottom:2px solid var(--border);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;font-size:12px;font-weight:600}td{border-bottom:1px solid var(--border);padding:10px 12px}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--bg-secondary)}.empty-state{text-align:center;min-height:400px;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state h2{color:var(--text);margin-bottom:12px;font-size:20px}.empty-state p{max-width:500px;margin-bottom:8px}.empty-state code{background:var(--bg-secondary);border-radius:4px;padding:2px 6px;font-size:13px}.detail-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.detail-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;width:90%;max-width:900px;max-height:80vh;padding:24px;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.detail-panel h3{margin-bottom:16px;font-size:16px}.detail-panel .close-btn{float:right;cursor:pointer;color:var(--text-secondary);background:0 0;border:none;padding:4px 8px;font-size:20px}.detail-panel .close-btn:hover{color:var(--text)}.attr-table{width:100%}.attr-table td{vertical-align:top;padding:6px 8px}.attr-table td:first-child{white-space:nowrap;width:40%;color:var(--text-secondary);font-weight:500}.attr-table td:last-child{word-break:break-all}.mono{font-family:SF Mono,Fira Code,monospace;font-size:12px}

package/dist/client/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect x="2" y="18" width="6" height="12" rx="1.5" fill="#6366f1"/>
+  <rect x="10" y="10" width="6" height="20" rx="1.5" fill="#8b5cf6"/>
+  <rect x="18" y="4" width="6" height="26" rx="1.5" fill="#a78bfa"/>
+  <rect x="26" y="14" width="4" height="16" rx="1.5" fill="#c4b5fd"/>
+  <circle cx="5" cy="14" r="2" fill="#6366f1"/>
+  <circle cx="13" cy="6" r="2" fill="#8b5cf6"/>
+  <circle cx="21" cy="2" r="2" fill="#a78bfa"/>
+  <circle cx="28" cy="10" r="2" fill="#c4b5fd"/>
+  <line x1="5" y1="14" x2="13" y2="6" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="13" y1="6" x2="21" y2="2" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="21" y1="2" x2="28" y2="10" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/dist/client/index.html

@@ -3,9 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>tokviz</title>
-    <script type="module" crossorigin src="/assets/index-SNGqhtM5.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-R0O4p4a7.css">
+    <script type="module" crossorigin src="/assets/index-DjPze0rR.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-YQMK5nkl.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/server/index.js

@@ -343,17 +343,87 @@ function toFloat(value) {
   return isNaN(n) ? 0 : n;
 }
 
+// src/server/demo.ts
+import { randomBytes } from "crypto";
+var models = [
+  { name: "gpt-4o", inputCostPer1k: 25e-4, outputCostPer1k: 0.01 },
+  { name: "gpt-4o-mini", inputCostPer1k: 15e-5, outputCostPer1k: 6e-4 },
+  { name: "claude-sonnet-4-20250514", inputCostPer1k: 3e-3, outputCostPer1k: 0.015 },
+  { name: "claude-3-5-haiku-20241022", inputCostPer1k: 8e-4, outputCostPer1k: 4e-3 },
+  { name: "gemini-2.0-flash", inputCostPer1k: 1e-4, outputCostPer1k: 4e-4 }
+];
+var operations = ["chat", "chat", "chat", "embeddings", "completions"];
+function hexId(bytes) {
+  return randomBytes(bytes).toString("hex");
+}
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+function generateSpan(baseTime) {
+  const model = pick(models);
+  const operation = pick(operations);
+  const now = baseTime ?? Date.now();
+  const duration = randomInt(200, 8e3);
+  const startTime = now - duration;
+  const inputTokens = randomInt(50, 12e3);
+  const outputTokens = operation === "embeddings" ? 0 : randomInt(20, 4e3);
+  const totalTokens = inputTokens + outputTokens;
+  const cost = inputTokens / 1e3 * model.inputCostPer1k + outputTokens / 1e3 * model.outputCostPer1k;
+  const spanId = hexId(8);
+  const traceId = hexId(16);
+  return {
+    id: spanId,
+    traceId,
+    name: `${operation} ${model.name}`,
+    startTime,
+    endTime: now,
+    duration,
+    model: model.name,
+    requestModel: model.name,
+    responseModel: model.name,
+    inputTokens,
+    outputTokens,
+    totalTokens,
+    cost,
+    operationName: operation,
+    attributes: {
+      "gen_ai.operation.name": operation,
+      "gen_ai.request.model": model.name,
+      "gen_ai.response.model": model.name,
+      "gen_ai.usage.input_tokens": inputTokens,
+      "gen_ai.usage.output_tokens": outputTokens,
+      "gen_ai.usage.total_tokens": totalTokens,
+      "gen_ai.usage.cost": parseFloat(cost.toFixed(6)),
+      "gen_ai.system": model.name.startsWith("gpt") ? "openai" : model.name.startsWith("claude") ? "anthropic" : "google_genai"
+    }
+  };
+}
+function generateInitialSpans(count = 25) {
+  const spans = [];
+  const now = Date.now();
+  for (let i = 0; i < count; i++) {
+    const time = now - randomInt(0, 10 * 6e4);
+    spans.push(generateSpan(time));
+  }
+  return spans.sort((a, b) => a.startTime - b.startTime);
+}
+
 // src/server/index.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
 var { values } = parseArgs({
   options: {
     port: { type: "string", default: "4318" },
-    "no-open": { type: "boolean", default: false }
+    "no-open": { type: "boolean", default: false },
+    demo: { type: "boolean", default: false }
   },
   strict: false
 });
 var port = parseInt(values.port || "4318", 10);
+var isDemo = values.demo ?? false;
 var app = express();
 var server = createServer(app);
 var wss = new WebSocketServer({ server, path: "/ws" });
@@ -410,6 +480,24 @@ server.listen(port, () => {
   console.log(`  OTLP endpoint: http://localhost:${port}/v1/traces`);
   console.log(`  Set OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:${port}
 `);
+  if (isDemo) {
+    let scheduleNext2 = function() {
+      const delay = 3e3 + Math.random() * 5e3;
+      setTimeout(() => {
+        const span = generateSpan();
+        store.add(span);
+        broadcast({ type: "spans", data: [span] });
+        scheduleNext2();
+      }, delay);
+    };
+    var scheduleNext = scheduleNext2;
+    console.log("  Demo mode: generating synthetic data\n");
+    const initialSpans = generateInitialSpans(25);
+    for (const span of initialSpans) {
+      store.add(span);
+    }
+    scheduleNext2();
+  }
   if (!values["no-open"]) {
     open(`http://localhost:${port}`);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokviz",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Real-time, local-only web dashboard that visualizes LLM token usage and costs from standard OpenTelemetry data",
   "type": "module",
   "bin": {
@@ -11,6 +11,7 @@
   ],
   "scripts": {
     "dev": "concurrently -n server,client \"tsx watch src/server/index.ts --no-open\" \"vite\"",
+    "demo": "concurrently -n server,client \"tsx watch src/server/index.ts --no-open --demo\" \"vite\"",
     "dev:server": "tsx watch src/server/index.ts --no-open",
     "dev:client": "vite",
     "build": "npm run build:client && npm run build:server",
@@ -33,14 +34,14 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/waldekmastykarz/tokviz.git"
+    "url": "git+https://github.com/waldekmastykarz/tokviz.git"
   },
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
     "express": "^4.21.2",
-    "open": "^10.1.0",
+    "open": "^11.0.0",
     "protobufjs": "^7.4.0",
     "ws": "^8.18.0"
   },
@@ -49,14 +50,14 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/ws": "^8.5.13",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "concurrently": "^9.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "recharts": "^2.15.0",
+    "recharts": "^3.8.1",
     "tsup": "^8.4.0",
     "tsx": "^4.19.0",
-    "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0"
   }
 }

package/dist/client/assets/index-R0O4p4a7.css

@@ -1 +0,0 @@
-:root{--bg: #ffffff;--bg-secondary: #f5f5f5;--text: #1a1a1a;--text-secondary: #666666;--border: #e0e0e0;--accent: #2563eb;--accent-hover: #1d4ed8;--card-bg: #ffffff;--card-shadow: 0 1px 3px rgba(0, 0, 0, .1);--chart-input: #3b82f6;--chart-output: #f59e0b;--chart-cost: #8b5cf6}@media(prefers-color-scheme:dark){:root{--bg: #0a0a0a;--bg-secondary: #1a1a1a;--text: #e5e5e5;--text-secondary: #999999;--border: #333333;--accent: #3b82f6;--accent-hover: #60a5fa;--card-bg: #1a1a1a;--card-shadow: 0 1px 3px rgba(0, 0, 0, .3);--chart-input: #60a5fa;--chart-output: #fbbf24;--chart-cost: #a78bfa}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{max-width:1200px;margin:0 auto;padding:24px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.header h1{font-size:24px;font-weight:600}.connection-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.status-dot.connected{background:#22c55e}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}.tab{padding:8px 16px;border:none;background:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:var(--card-shadow)}.card-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:4px}.card-value{font-size:24px;font-weight:600}.chart-container{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:24px;box-shadow:var(--card-shadow)}.chart-title{font-size:14px;font-weight:500;margin-bottom:16px;color:var(--text-secondary)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.5px}td{padding:10px 12px;border-bottom:1px solid var(--border)}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--bg-secondary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-secondary)}.empty-state h2{font-size:20px;margin-bottom:12px;color:var(--text)}.empty-state p{max-width:500px;margin-bottom:8px}.empty-state code{background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px}.detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.detail-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.detail-panel h3{margin-bottom:16px;font-size:16px}.detail-panel .close-btn{float:right;border:none;background:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px}.detail-panel .close-btn:hover{color:var(--text)}.attr-table{width:100%}.attr-table td{padding:6px 8px;vertical-align:top}.attr-table td:first-child{font-weight:500;white-space:nowrap;width:40%;color:var(--text-secondary)}.attr-table td:last-child{word-break:break-all}.mono{font-family:SF Mono,Fira Code,monospace;font-size:12px}