ai-cc-router 0.1.6 → 0.1.7

package/dist/proxy/server.js

@@ -9,10 +9,10 @@ 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 cache usage from Anthropic's
-// message_start event. Called asynchronously after the log entry is already stored,
+// 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 applyCacheUsage(entry, usage) {
+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;
@@ -20,6 +20,10 @@ function applyCacheUsage(entry, usage) {
     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).
@@ -79,6 +83,7 @@ export async function startServer(opts = {}) {
             totalCacheReadTokens: stats.totalCacheReadTokens,
             totalCacheCreationTokens: stats.totalCacheCreationTokens,
             totalInputTokens: stats.totalInputTokens,
+            totalOutputTokens: stats.totalOutputTokens,
             accounts: pool.getStats(),
             recentLogs: stats.getRecentLogs(50),
         });
@@ -179,50 +184,57 @@ export async function startServer(opts = {}) {
                 }
                 const entry = pendingLog;
                 stats.addLog(entry);
-                // ── Capture cache usage from Anthropic response body ──────────────────
-                // The message_start SSE event (or JSON body) carries usage fields:
-                //   cache_read_input_tokens, cache_creation_input_tokens, input_tokens
-                // We add a passive data listener to capture these without breaking the
-                // streaming passthrough — all data listeners share the same chunks.
+                // ── 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");
-                    const MAX_BUF = 8 * 1024;
-                    let buf = "";
-                    let captured = false;
-                    proxyRes.on("data", (chunk) => {
-                        if (captured || buf.length >= MAX_BUF)
-                            return;
-                        buf += chunk.toString("utf8");
-                        if (isSSE) {
-                            // message_start is always the first SSE event — parse as soon as we have it
-                            const lines = buf.split("\n");
+                    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 (evt.type === "message_start" && evt.message?.usage) {
-                                        applyCacheUsage(entry, evt.message.usage);
-                                        captured = true;
-                                        break;
+                                    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, wait for next chunk */ }
+                                catch { /* partial JSON across chunk boundary — next chunk will complete it */ }
                             }
-                        }
-                    });
-                    if (!isSSE) {
-                        // Non-streaming: parse full JSON body on 'end'
+                        });
+                    }
+                    else {
+                        // Non-streaming JSON: buffer full body then parse once
+                        let buf = "";
+                        proxyRes.on("data", (chunk) => { buf += chunk.toString("utf8"); });
                         proxyRes.on("end", () => {
-                            if (captured)
-                                return;
                             try {
                                 const body = JSON.parse(buf);
-                                if (body.usage)
-                                    applyCacheUsage(entry, body.usage);
+                                if (body.usage) {
+                                    applyInputUsage(entry, body.usage);
+                                    applyOutputUsage(entry, body.usage);
+                                }
                             }
                             catch { /* ignore */ }
                         });

package/dist/proxy/stats.js

@@ -6,6 +6,7 @@ class ProxyStats {
     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(CacheHealthBadge, { read: data.totalCacheReadTokens, created: data.totalCacheCreationTokens, input: data.totalInputTokens })] }), _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,16 +109,17 @@ function LogRow({ log, selected }) {
                     : "gray";
     const bg = selected ? "white" : undefined;
     const fg = (c) => selected ? "black" : c;
-    // Per-request cache hit rate
-    const totalTok = (log.cacheReadTokens ?? 0) + (log.cacheCreationTokens ?? 0) + (log.inputTokens ?? 0);
-    const cacheHitPct = totalTok > 0 ? Math.round(((log.cacheReadTokens ?? 0) / totalTok) * 100) : null;
+    // 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"] })), cacheHitPct !== null && (_jsxs(Text, { backgroundColor: bg, color: fg(cacheColor), children: [" \u2191", cacheHitPct, "%"] })), 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 }) {
@@ -136,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 }) })), log.cacheReadTokens !== undefined && (_jsx(Box, { gap: 2, children: _jsx(CacheBreakdown, { read: log.cacheReadTokens, created: log.cacheCreationTokens ?? 0, input: log.inputTokens ?? 0 }) }))] })] }));
+    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 })] }));
@@ -155,11 +156,20 @@ function CacheHealthBadge({ read, created, input }) {
     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 }) {
-    const total = read + created + input;
-    const hitPct = total > 0 ? (read / total) * 100 : 0;
-    const color = total === 0 ? "gray" : hitPct >= 70 ? "green" : hitPct >= 30 ? "yellow" : "red";
-    return (_jsxs(_Fragment, { children: [_jsx(FieldColored, { label: "Cache hit", value: total > 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(total) + " tok" })] }));
+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)

package/package.json

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