ai-cc-router 0.1.5 → 0.1.7

package/dist/proxy/server.js

@@ -9,6 +9,21 @@ import { logRoute, logError, logStartup } from "./logger.js";
 import { stats } from "./stats.js";
 import { PROXY_PORT, LITELLM_URL } from "../config/paths.js";
 import chalk from "chalk";
+// Mutates entry and updates aggregate counters with token usage from Anthropic's
+// response. Called asynchronously after the log entry is already stored,
+// so the dashboard picks up the values on the next poll.
+function applyInputUsage(entry, usage) {
+    entry.cacheReadTokens = usage["cache_read_input_tokens"] ?? 0;
+    entry.cacheCreationTokens = usage["cache_creation_input_tokens"] ?? 0;
+    entry.inputTokens = usage["input_tokens"] ?? 0;
+    stats.totalCacheReadTokens += entry.cacheReadTokens;
+    stats.totalCacheCreationTokens += entry.cacheCreationTokens;
+    stats.totalInputTokens += entry.inputTokens;
+}
+function applyOutputUsage(entry, usage) {
+    entry.outputTokens = usage["output_tokens"] ?? 0;
+    stats.totalOutputTokens += entry.outputTokens;
+}
 export async function startServer(opts = {}) {
     const port = opts.port ?? PROXY_PORT;
     // Direct-to-Anthropic (standalone) or via LiteLLM (full mode).
@@ -65,6 +80,10 @@ export async function startServer(opts = {}) {
             totalRequests: stats.totalRequests,
             totalErrors: stats.totalErrors,
             totalRefreshes: stats.totalRefreshes,
+            totalCacheReadTokens: stats.totalCacheReadTokens,
+            totalCacheCreationTokens: stats.totalCacheCreationTokens,
+            totalInputTokens: stats.totalInputTokens,
+            totalOutputTokens: stats.totalOutputTokens,
             accounts: pool.getStats(),
             recentLogs: stats.getRecentLogs(50),
         });
@@ -163,7 +182,64 @@ export async function startServer(opts = {}) {
                     account.busy = true;
                     setTimeout(() => { account.busy = false; }, 30_000);
                 }
-                stats.addLog(pendingLog);
+                const entry = pendingLog;
+                stats.addLog(entry);
+                // ── Capture token usage from Anthropic response body ─────────────────
+                // SSE streams carry usage across two events:
+                //   message_start  → input_tokens, cache_read/creation_input_tokens
+                //   message_delta   → output_tokens
+                // Non-streaming JSON carries all fields in a single usage object.
+                // We use incremental line parsing (not buffering) so we can capture
+                // both events without holding the full stream in memory.
+                const contentType = String(proxyRes.headers["content-type"] ?? "");
+                const encoding = String(proxyRes.headers["content-encoding"] ?? "");
+                const isCompressed = /gzip|br|deflate/.test(encoding);
+                if (!isCompressed && (contentType.includes("text/event-stream") || contentType.includes("application/json"))) {
+                    const isSSE = contentType.includes("text/event-stream");
+                    if (isSSE) {
+                        let lineBuf = "";
+                        let gotInput = false;
+                        let gotOutput = false;
+                        proxyRes.on("data", (chunk) => {
+                            if (gotInput && gotOutput)
+                                return;
+                            lineBuf += chunk.toString("utf8");
+                            const lines = lineBuf.split("\n");
+                            lineBuf = lines.pop() ?? ""; // keep incomplete last line
+                            for (const line of lines) {
+                                if (!line.startsWith("data: "))
+                                    continue;
+                                try {
+                                    const evt = JSON.parse(line.slice(6));
+                                    if (!gotInput && evt.type === "message_start" && evt.message?.usage) {
+                                        applyInputUsage(entry, evt.message.usage);
+                                        gotInput = true;
+                                    }
+                                    if (!gotOutput && evt.type === "message_delta" && evt.usage) {
+                                        applyOutputUsage(entry, evt.usage);
+                                        gotOutput = true;
+                                    }
+                                }
+                                catch { /* partial JSON across chunk boundary — next chunk will complete it */ }
+                            }
+                        });
+                    }
+                    else {
+                        // Non-streaming JSON: buffer full body then parse once
+                        let buf = "";
+                        proxyRes.on("data", (chunk) => { buf += chunk.toString("utf8"); });
+                        proxyRes.on("end", () => {
+                            try {
+                                const body = JSON.parse(buf);
+                                if (body.usage) {
+                                    applyInputUsage(entry, body.usage);
+                                    applyOutputUsage(entry, body.usage);
+                                }
+                            }
+                            catch { /* ignore */ }
+                        });
+                    }
+                }
             },
             error: (err, _req, res) => {
                 stats.totalErrors++;

package/dist/proxy/stats.js

@@ -3,6 +3,10 @@ class ProxyStats {
     totalRequests = 0;
     totalErrors = 0;
     totalRefreshes = 0;
+    totalCacheReadTokens = 0;
+    totalCacheCreationTokens = 0;
+    totalInputTokens = 0;
+    totalOutputTokens = 0;
     startTime = Date.now();
     logs = [];
     addLog(entry) {

package/dist/ui/Dashboard.js

@@ -79,7 +79,7 @@ function LiveDashboard({ data, port, lastUpdate }) {
     });
     const selectedLog = logs[selectedIndex] ?? null;
     const visibleLogs = logs.slice(0, LOG_VISIBLE);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: " CC-Router " }), _jsx(Text, { color: "gray", children: "\u00B7 " }), _jsx(Text, { color: "green", children: data.mode }), _jsxs(Text, { color: "gray", children: [" \u2192 ", data.target, "  \u00B7 "] }), _jsxs(Text, { children: ["up ", formatUptime(data.uptime)] }), _jsxs(Text, { color: "gray", children: ["  \u00B7  updated ", updatedAgo, "s ago  \u00B7  [\u2191\u2193] navigate  \u00B7  [q] quit"] })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: [" ACCOUNTS  ", _jsxs(Text, { color: healthyCount === data.accounts.length ? "green" : "yellow", children: [healthyCount, "/", data.accounts.length, " healthy"] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: data.accounts.map(a => (_jsx(AccountRow, { account: a }, a.id))) })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { children: [_jsx(Text, { bold: true, children: " TOTALS  " }), _jsx(Text, { children: "requests " }), _jsx(Text, { color: "cyan", children: data.totalRequests }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { children: "errors " }), _jsx(Text, { color: data.totalErrors > 0 ? "red" : "green", children: data.totalErrors }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { children: "refreshes " }), _jsx(Text, { color: "yellow", children: data.totalRefreshes })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: " RECENT ACTIVITY" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: visibleLogs.length === 0
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: " CC-Router " }), _jsx(Text, { color: "gray", children: "\u00B7 " }), _jsx(Text, { color: "green", children: data.mode }), _jsxs(Text, { color: "gray", children: [" \u2192 ", data.target, "  \u00B7 "] }), _jsxs(Text, { children: ["up ", formatUptime(data.uptime)] }), _jsxs(Text, { color: "gray", children: ["  \u00B7  updated ", updatedAgo, "s ago  \u00B7  [\u2191\u2193] navigate  \u00B7  [q] quit"] })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: [" ACCOUNTS  ", _jsxs(Text, { color: healthyCount === data.accounts.length ? "green" : "yellow", children: [healthyCount, "/", data.accounts.length, " healthy"] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: data.accounts.map(a => (_jsx(AccountRow, { account: a }, a.id))) })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: " TOTALS  " }), _jsx(Text, { children: "requests " }), _jsx(Text, { color: "cyan", children: data.totalRequests }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { children: "errors " }), _jsx(Text, { color: data.totalErrors > 0 ? "red" : "green", children: data.totalErrors }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { children: "refreshes " }), _jsx(Text, { color: "yellow", children: data.totalRefreshes }), _jsx(CacheHealthBadge, { read: data.totalCacheReadTokens, created: data.totalCacheCreationTokens, input: data.totalInputTokens })] }), _jsx(TokenSummary, { cacheRead: data.totalCacheReadTokens, cacheCreated: data.totalCacheCreationTokens, uncached: data.totalInputTokens, output: data.totalOutputTokens })] }), _jsx(Box, { marginTop: 1 }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: " RECENT ACTIVITY" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: visibleLogs.length === 0
                             ? _jsx(Text, { color: "gray", children: "  No activity yet" })
                             : visibleLogs.map((log, i) => (_jsx(LogRow, { log: log, selected: i === selectedIndex }, log.ts))) })] }), selectedLog && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1 }), _jsx(DetailPanel, { log: selectedLog })] }))] }));
 }
@@ -109,9 +109,17 @@ function LogRow({ log, selected }) {
                     : "gray";
     const bg = selected ? "white" : undefined;
     const fg = (c) => selected ? "black" : c;
+    // Per-request token stats
+    const inputTok = (log.cacheReadTokens ?? 0) + (log.cacheCreationTokens ?? 0) + (log.inputTokens ?? 0);
+    const outputTok = log.outputTokens ?? 0;
+    const cacheHitPct = inputTok > 0 ? Math.round(((log.cacheReadTokens ?? 0) / inputTok) * 100) : null;
+    const cacheColor = cacheHitPct === null ? undefined
+        : cacheHitPct >= 70 ? "green"
+            : cacheHitPct >= 30 ? "yellow"
+                : "red";
     return (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: bg, color: fg(undefined), children: [selected ? "▶" : " ", " ", time, "  "] }), _jsxs(Text, { backgroundColor: bg, color: fg(typeColor), children: [typeIcon, " "] }), _jsx(Text, { backgroundColor: bg, color: fg("cyan"), children: log.accountId.slice(0, 22).padEnd(22) }), log.method && log.path
                 ? _jsxs(Text, { backgroundColor: bg, color: fg("white"), children: [" ", log.method, " ", log.path.padEnd(14)] })
-                : _jsxs(Text, { backgroundColor: bg, color: fg(typeColor), children: [" ", log.type.padEnd(9)] }), log.statusCode !== undefined && (_jsxs(Text, { backgroundColor: bg, color: fg(statusColor), children: [" ", log.statusCode] })), log.durationMs !== undefined && (_jsxs(Text, { backgroundColor: bg, color: fg("gray"), children: [" ", log.durationMs, "ms"] })), log.details && (_jsxs(Text, { backgroundColor: bg, color: fg("gray"), children: ["  ", log.details] }))] }));
+                : _jsxs(Text, { backgroundColor: bg, color: fg(typeColor), children: [" ", log.type.padEnd(9)] }), log.statusCode !== undefined && (_jsxs(Text, { backgroundColor: bg, color: fg(statusColor), children: [" ", log.statusCode] })), log.durationMs !== undefined && (_jsxs(Text, { backgroundColor: bg, color: fg("gray"), children: [" ", log.durationMs, "ms"] })), cacheHitPct !== null && (_jsxs(Text, { backgroundColor: bg, color: fg(cacheColor), children: [" \u2191", cacheHitPct, "%"] })), (inputTok > 0 || outputTok > 0) && (_jsxs(Text, { backgroundColor: bg, color: fg("gray"), children: [" ", fmtTok(inputTok), "\u2191 ", fmtTok(outputTok), "\u2193"] })), log.details && (_jsxs(Text, { backgroundColor: bg, color: fg("gray"), children: ["  ", log.details] }))] }));
 }
 // ─── Detail panel ─────────────────────────────────────────────────────────────
 function DetailPanel({ log }) {
@@ -129,7 +137,7 @@ function DetailPanel({ log }) {
             : log.statusCode >= 500 ? "red"
                 : log.statusCode >= 400 ? "yellow"
                     : "green";
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, color: isError ? "red" : "cyan", children: " DETAILS " }), _jsxs(Box, { marginTop: 1, flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Field, { label: "Time", value: time }), _jsx(Field, { label: "Account", value: log.accountId })] }), _jsxs(Box, { gap: 2, children: [_jsx(Field, { label: "Method", value: log.method ?? "—" }), _jsx(Field, { label: "Path", value: log.path ?? "—" })] }), _jsxs(Box, { gap: 2, children: [_jsx(FieldColored, { label: "Status", value: statusLabel, color: statusColor }), _jsx(Field, { label: "Duration", value: log.durationMs !== undefined ? `${log.durationMs}ms` : "—" }), _jsx(Field, { label: "Type", value: log.type })] }), log.details && (_jsx(Box, { children: _jsx(Field, { label: "Details", value: log.details }) }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, color: isError ? "red" : "cyan", children: " DETAILS " }), _jsxs(Box, { marginTop: 1, flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Field, { label: "Time", value: time }), _jsx(Field, { label: "Account", value: log.accountId })] }), _jsxs(Box, { gap: 2, children: [_jsx(Field, { label: "Method", value: log.method ?? "—" }), _jsx(Field, { label: "Path", value: log.path ?? "—" })] }), _jsxs(Box, { gap: 2, children: [_jsx(FieldColored, { label: "Status", value: statusLabel, color: statusColor }), _jsx(Field, { label: "Duration", value: log.durationMs !== undefined ? `${log.durationMs}ms` : "—" }), _jsx(Field, { label: "Type", value: log.type })] }), log.details && (_jsx(Box, { children: _jsx(Field, { label: "Details", value: log.details }) })), log.cacheReadTokens !== undefined && (_jsx(Box, { gap: 2, children: _jsx(CacheBreakdown, { read: log.cacheReadTokens, created: log.cacheCreationTokens ?? 0, input: log.inputTokens ?? 0, output: log.outputTokens ?? 0 }) }))] })] }));
 }
 function Field({ label, value }) {
     return (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [label, ": "] }), _jsx(Text, { color: "white", children: value })] }));
@@ -137,6 +145,39 @@ function Field({ label, value }) {
 function FieldColored({ label, value, color }) {
     return (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [label, ": "] }), _jsx(Text, { color: color, children: value })] }));
 }
+// ─── Cache health badge (aggregated) ─────────────────────────────────────────
+function CacheHealthBadge({ read, created, input }) {
+    const total = read + created + input;
+    if (total === 0)
+        return null;
+    const hitPct = Math.round((read / total) * 100);
+    const color = hitPct >= 70 ? "green" : hitPct >= 30 ? "yellow" : "red";
+    const label = hitPct >= 70 ? "healthy" : hitPct >= 30 ? "fair" : "poor";
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { children: "cache " }), _jsxs(Text, { color: color, children: [hitPct, "% hit "] }), _jsxs(Text, { color: "gray", children: ["(", label, ")"] })] }));
+}
+// ─── Cache breakdown (per-request detail) ────────────────────────────────────
+function CacheBreakdown({ read, created, input, output }) {
+    const totalInput = read + created + input;
+    const hitPct = totalInput > 0 ? (read / totalInput) * 100 : 0;
+    const color = totalInput === 0 ? "gray" : hitPct >= 70 ? "green" : hitPct >= 30 ? "yellow" : "red";
+    return (_jsxs(_Fragment, { children: [_jsx(FieldColored, { label: "Cache hit", value: totalInput > 0 ? `${fmtTok(read)} tok  (${hitPct.toFixed(1)}%)` : "—", color: color }), _jsx(Field, { label: "Cache created", value: fmtTok(created) + " tok" }), _jsx(Field, { label: "Uncached", value: fmtTok(input) + " tok" }), _jsx(Field, { label: "Total input", value: fmtTok(totalInput) + " tok" }), _jsx(Field, { label: "Output", value: fmtTok(output) + " tok" }), _jsx(Field, { label: "Total", value: fmtTok(totalInput + output) + " tok" })] }));
+}
+// ─── Token summary (aggregated totals) ──────────────────────────────────────
+function TokenSummary({ cacheRead, cacheCreated, uncached, output }) {
+    const totalInput = cacheRead + cacheCreated + uncached;
+    const totalAll = totalInput + output;
+    if (totalAll === 0)
+        return null;
+    const hitPct = totalInput > 0 ? (cacheRead / totalInput) * 100 : 0;
+    return (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "input " }), _jsx(Text, { color: "white", children: fmtTok(totalInput) }), _jsx(Text, { color: "gray", children: " (cached " }), _jsx(Text, { color: "green", children: fmtTok(cacheRead) }), _jsx(Text, { color: "gray", children: " + new " }), _jsx(Text, { color: "yellow", children: fmtTok(cacheCreated) }), _jsx(Text, { color: "gray", children: " + uncached " }), _jsx(Text, { color: "white", children: fmtTok(uncached) }), _jsx(Text, { color: "gray", children: ")  \u00B7  output " }), _jsx(Text, { color: "white", children: fmtTok(output) }), _jsx(Text, { color: "gray", children: "  \u00B7  total " }), _jsx(Text, { color: "cyan", bold: true, children: fmtTok(totalAll) })] }));
+}
+function fmtTok(n) {
+    if (n >= 1_000_000)
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000)
+        return `${(n / 1_000).toFixed(1)}k`;
+    return String(n);
+}
 // ─── HTTP status text ─────────────────────────────────────────────────────────
 function httpStatusText(code) {
     const map = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-cc-router",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Round-robin proxy for Claude Max OAuth tokens — use multiple Claude Max accounts with Claude Code",
   "type": "module",
   "bin": {