ai-cc-router 0.1.4 → 0.1.6

package/dist/cli/cmd-configure.js

@@ -1,5 +1,6 @@
 import chalk from "chalk";
 import { writeClaudeSettings, removeClaudeSettings, readClaudeProxySettings } from "../utils/claude-config.js";
+import { readConfig, writeConfig, generateProxySecret } from "../config/manager.js";
 import { PROXY_PORT, CLAUDE_SETTINGS_PATH } from "../config/paths.js";
 export function registerConfigure(program) {
     program
@@ -8,6 +9,9 @@ export function registerConfigure(program) {
         .option("--remove", "Remove cc-router settings from ~/.claude/settings.json")
         .option("--port <port>", "Proxy port to configure", String(PROXY_PORT))
         .option("--show", "Show current Claude Code proxy settings")
+        .option("--generate-password", "Generate a new proxy secret and sync Claude Code settings")
+        .option("--set-password <secret>", "Set a specific proxy secret and sync Claude Code settings")
+        .option("--remove-password", "Remove proxy password protection (open access)")
         .action((opts) => {
         if (opts.show) {
             const current = readClaudeProxySettings();
@@ -20,6 +24,9 @@ export function registerConfigure(program) {
                 console.log(chalk.yellow("  Claude Code is NOT configured to use cc-router."));
                 console.log(chalk.gray(`  Run: cc-router configure`));
             }
+            const { proxySecret } = readConfig();
+            const pwStatus = proxySecret ? chalk.green("yes") : chalk.gray("no");
+            console.log(`    Password protected:  ${pwStatus}`);
             return;
         }
         if (opts.remove) {
@@ -28,10 +35,45 @@ export function registerConfigure(program) {
             console.log(chalk.gray("  Claude Code will use its default authentication on next launch."));
             return;
         }
+        if (opts.generatePassword) {
+            const secret = generateProxySecret();
+            writeConfig({ ...readConfig(), proxySecret: secret });
+            const { baseUrl } = readClaudeProxySettings();
+            writeClaudeSettings(parseInt(opts.port, 10), baseUrl);
+            console.log(chalk.green("✓ Proxy password set."));
+            console.log("  " + chalk.bold.yellow("Save this — it will not be shown again:"));
+            console.log("  " + chalk.bold(secret));
+            console.log(chalk.gray("  Restart cc-router for the change to take effect."));
+            return;
+        }
+        if (opts.setPassword !== undefined) {
+            const secret = opts.setPassword.trim();
+            if (!secret) {
+                console.error(chalk.red("Secret cannot be empty."));
+                process.exit(1);
+            }
+            writeConfig({ ...readConfig(), proxySecret: secret });
+            const { baseUrl } = readClaudeProxySettings();
+            writeClaudeSettings(parseInt(opts.port, 10), baseUrl);
+            console.log(chalk.green("✓ Proxy password updated."));
+            console.log(chalk.gray("  Restart cc-router for the change to take effect."));
+            return;
+        }
+        if (opts.removePassword) {
+            const cfg = readConfig();
+            delete cfg.proxySecret;
+            writeConfig(cfg);
+            const { baseUrl } = readClaudeProxySettings();
+            writeClaudeSettings(parseInt(opts.port, 10), baseUrl);
+            console.log(chalk.green("✓ Proxy password removed. Access is now open."));
+            console.log(chalk.gray("  Restart cc-router for the change to take effect."));
+            return;
+        }
         const port = parseInt(opts.port, 10);
         writeClaudeSettings(port);
+        const { proxySecret } = readConfig();
         console.log(chalk.green(`✓ Updated ${CLAUDE_SETTINGS_PATH}`));
         console.log(chalk.gray(`  ANTHROPIC_BASE_URL  = http://localhost:${port}`));
-        console.log(chalk.gray(`  ANTHROPIC_AUTH_TOKEN = proxy-managed`));
+        console.log(chalk.gray(`  ANTHROPIC_AUTH_TOKEN = ${proxySecret ? chalk.green("(secret configured)") : "proxy-managed"}`));
     });
 }

package/dist/cli/cmd-setup.js

@@ -7,7 +7,7 @@ import { extractFromKeychain, extractFromCredentialsFile, formatExpiry, redactTo
 import { validateToken } from "../utils/token-validator.js";
 import { writeClaudeSettings, readClaudeProxySettings } from "../utils/claude-config.js";
 import { saveAccounts } from "../proxy/token-refresher.js";
-import { loadAccounts, accountsFileExists } from "../config/manager.js";
+import { loadAccounts, accountsFileExists, readConfig, writeConfig, generateProxySecret } from "../config/manager.js";
 import { PROXY_PORT } from "../config/paths.js";
 const execFileAsync = promisify(execFile);
 // ─── Public registration ──────────────────────────────────────────────────────
@@ -226,11 +226,41 @@ async function runPostSetupFlow(accountCount) {
         const port = proxyLocation === "local"
             ? PROXY_PORT
             : parseInt(new URL(proxyHost).port || "80", 10);
-        writeClaudeSettings(port, proxyHost);
-        console.log(chalk.green(`\n  ✓ ~/.claude/settings.json updated`));
-        console.log(chalk.gray(`      ANTHROPIC_BASE_URL  = ${proxyHost}`));
-        console.log(chalk.gray(`      ANTHROPIC_AUTH_TOKEN = proxy-managed`));
+        // ── Password setup for remote proxy ───────────────────────────────────────
         if (proxyLocation === "remote") {
+            const pwChoice = await select({
+                message: "Set a proxy password? (strongly recommended for internet-exposed proxies)",
+                choices: [
+                    { name: "Generate automatically  (recommended)", value: "generate" },
+                    { name: "Enter my own password", value: "manual" },
+                    { name: "Skip — no password protection", value: "skip" },
+                ],
+            });
+            let chosenSecret;
+            if (pwChoice === "generate") {
+                chosenSecret = generateProxySecret();
+                writeConfig({ ...readConfig(), proxySecret: chosenSecret });
+            }
+            else if (pwChoice === "manual") {
+                const raw = await password({
+                    message: "Enter proxy password:",
+                    validate: (v) => v.trim().length >= 8 || "Minimum 8 characters",
+                });
+                chosenSecret = raw.trim();
+                writeConfig({ ...readConfig(), proxySecret: chosenSecret });
+            }
+            writeClaudeSettings(port, proxyHost);
+            if (chosenSecret) {
+                console.log(chalk.yellow("\n  *** Save this password — you cannot recover it later ***"));
+                console.log("      " + chalk.bold(chosenSecret));
+                console.log(chalk.gray("  Claude Code has been configured to use it automatically."));
+                console.log(chalk.gray("  Other machines: cc-router configure --set-password <value>"));
+            }
+            else {
+                console.log(chalk.green(`\n  ✓ ~/.claude/settings.json updated`));
+                console.log(chalk.gray(`      ANTHROPIC_BASE_URL  = ${proxyHost}`));
+                console.log(chalk.gray(`      ANTHROPIC_AUTH_TOKEN = proxy-managed`));
+            }
             console.log(chalk.cyan(`\n  On the remote machine, start cc-router with:`));
             console.log(chalk.white(`    HOST=0.0.0.0 cc-router start`));
             console.log(chalk.cyan(`  Or as a service:`));
@@ -239,6 +269,10 @@ async function runPostSetupFlow(accountCount) {
             printDone(accountCount);
             return;
         }
+        writeClaudeSettings(port, proxyHost);
+        console.log(chalk.green(`\n  ✓ ~/.claude/settings.json updated`));
+        console.log(chalk.gray(`      ANTHROPIC_BASE_URL  = ${proxyHost}`));
+        console.log(chalk.gray(`      ANTHROPIC_AUTH_TOKEN = proxy-managed`));
     }
     // 2. Only ask about starting the proxy if it's local
     console.log(chalk.bold(`\n${"━".repeat(40)}\n  Start the proxy\n${"━".repeat(40)}\n`));

package/dist/config/manager.js

@@ -1,5 +1,6 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync, renameSync } from "fs";
-import { CONFIG_DIR, ACCOUNTS_PATH } from "./paths.js";
+import { randomBytes } from "crypto";
+import { CONFIG_DIR, ACCOUNTS_PATH, CONFIG_PATH } from "./paths.js";
 export function ensureConfigDir() {
     if (!existsSync(CONFIG_DIR)) {
         mkdirSync(CONFIG_DIR, { recursive: true });
@@ -36,6 +37,26 @@ export function writeAccountsAtomic(data) {
 export function loadAccounts() {
     return deserialize(readAccountsRaw());
 }
+export function readConfig() {
+    if (!existsSync(CONFIG_PATH))
+        return {};
+    try {
+        return JSON.parse(readFileSync(CONFIG_PATH, "utf-8"));
+    }
+    catch {
+        return {};
+    }
+}
+export function writeConfig(cfg) {
+    ensureConfigDir();
+    const tmp = CONFIG_PATH + ".tmp";
+    writeFileSync(tmp, JSON.stringify(cfg, null, 2), "utf-8");
+    renameSync(tmp, CONFIG_PATH);
+}
+export function generateProxySecret() {
+    return "cc-rtr-" + randomBytes(16).toString("hex");
+}
+// ─── Accounts ─────────────────────────────────────────────────────────────────
 function deserialize(records) {
     return records.map(a => ({
         id: a.id,

package/dist/config/paths.js

@@ -9,3 +9,6 @@ export const PROXY_PORT = parseInt(process.env["PORT"] ?? "3456", 10);
 export const LITELLM_PORT = 4000;
 // When set, the server forwards to LiteLLM instead of Anthropic directly
 export const LITELLM_URL = process.env["LITELLM_URL"];
+// Proxy-level config (password, future settings) — separate from accounts.json
+export const CONFIG_PATH = process.env["CONFIG_PATH"] ??
+    path.join(CONFIG_DIR, "config.json");

package/dist/proxy/server.js

@@ -1,13 +1,25 @@
 import express from "express";
 import { createProxyMiddleware } from "http-proxy-middleware";
 import { ServerResponse } from "http";
+import { timingSafeEqual } from "crypto";
 import { TokenPool } from "./token-pool.js";
 import { needsRefresh, refreshAccountToken, saveAccounts, startRefreshLoop } from "./token-refresher.js";
-import { loadAccounts, accountsFileExists, readAccountsFromPath } from "../config/manager.js";
+import { loadAccounts, accountsFileExists, readAccountsFromPath, readConfig } from "../config/manager.js";
 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,
+// so the dashboard picks up the values on the next poll.
+function applyCacheUsage(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;
+}
 export async function startServer(opts = {}) {
     const port = opts.port ?? PROXY_PORT;
     // Direct-to-Anthropic (standalone) or via LiteLLM (full mode).
@@ -30,6 +42,30 @@ export async function startServer(opts = {}) {
     const pool = new TokenPool(accounts);
     startRefreshLoop(accounts);
     const app = express();
+    // ─── Proxy auth middleware ─────────────────────────────────────────────────
+    // If a proxySecret is configured, all requests must present it as
+    // "Authorization: Bearer <secret>". The /cc-router/health endpoint is
+    // always exempt so monitoring and PM2 healthchecks keep working.
+    const { proxySecret } = readConfig();
+    if (proxySecret) {
+        const secretBuf = Buffer.from(proxySecret, "utf-8");
+        app.use((req, res, next) => {
+            if (req.path === "/cc-router/health")
+                return next();
+            const auth = req.headers["authorization"] ?? "";
+            const token = auth.startsWith("Bearer ") ? auth.slice(7) : "";
+            const tokenBuf = Buffer.from(token, "utf-8");
+            if (tokenBuf.length !== secretBuf.length ||
+                !timingSafeEqual(tokenBuf, secretBuf)) {
+                res.status(401).json({
+                    type: "error",
+                    error: { type: "authentication_error", message: "Invalid or missing proxy authentication token" },
+                });
+                return;
+            }
+            next();
+        });
+    }
     // ─── Health endpoint (cc-router internal, NOT proxied) ────────────────────
     app.get("/cc-router/health", (_req, res) => {
         res.json({
@@ -40,8 +76,11 @@ export async function startServer(opts = {}) {
             totalRequests: stats.totalRequests,
             totalErrors: stats.totalErrors,
             totalRefreshes: stats.totalRefreshes,
+            totalCacheReadTokens: stats.totalCacheReadTokens,
+            totalCacheCreationTokens: stats.totalCacheCreationTokens,
+            totalInputTokens: stats.totalInputTokens,
             accounts: pool.getStats(),
-            recentLogs: stats.getRecentLogs(),
+            recentLogs: stats.getRecentLogs(50),
         });
     });
     // ─── Proxy middleware ──────────────────────────────────────────────────────
@@ -90,42 +129,120 @@ export async function startServer(opts = {}) {
                 if (!account)
                     return;
                 const status = proxyRes.statusCode ?? 0;
+                const durationMs = req._startTime
+                    ? Date.now() - req._startTime
+                    : undefined;
+                // Complete the pending log entry with response info
+                const pendingLog = req._pendingLog ?? {
+                    ts: Date.now(),
+                    accountId: account.id,
+                    model: "-",
+                    type: "route",
+                };
+                pendingLog.statusCode = status;
+                if (durationMs !== undefined)
+                    pendingLog.durationMs = durationMs;
                 if (status === 401) {
                     // Token invalid or expired mid-request.
                     // Forward the 401 to the client (Claude Code will retry on 401).
                     // Schedule a background refresh so the next request succeeds.
                     stats.totalErrors++;
                     account.errorCount++;
+                    pendingLog.type = "error";
+                    pendingLog.details = "token invalid";
                     logError(account.id, 401, "Token invalid — scheduling background refresh");
-                    stats.addLog({ ts: Date.now(), accountId: account.id, model: "-", type: "error", details: "401" });
                     refreshAccountToken(account).then(ok => {
                         if (ok)
                             saveAccounts(pool.getAll());
                     }).catch(console.error);
                 }
-                if (status === 429) {
+                else if (status === 429) {
                     // Rate limited — put account on cooldown for Retry-After seconds.
                     stats.totalErrors++;
                     account.errorCount++;
                     const retryAfter = Number(proxyRes.headers["retry-after"] ?? 60);
+                    pendingLog.type = "error";
+                    pendingLog.details = `rate limited — cooldown ${retryAfter}s`;
                     logError(account.id, 429, `Rate limited — cooldown ${retryAfter}s`);
-                    stats.addLog({ ts: Date.now(), accountId: account.id, model: "-", type: "error", details: "429" });
                     account.busy = true;
                     setTimeout(() => { account.busy = false; }, retryAfter * 1_000);
                 }
-                if (status === 529) {
+                else if (status === 529) {
                     // Anthropic service overloaded — short cooldown on this account.
                     stats.totalErrors++;
                     account.errorCount++;
+                    pendingLog.type = "error";
+                    pendingLog.details = "service overloaded — cooldown 30s";
                     logError(account.id, 529, "Service overloaded — cooldown 30s");
-                    stats.addLog({ ts: Date.now(), accountId: account.id, model: "-", type: "error", details: "529" });
                     account.busy = true;
                     setTimeout(() => { account.busy = false; }, 30_000);
                 }
+                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.
+                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");
+                            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;
+                                    }
+                                }
+                                catch { /* partial JSON, wait for next chunk */ }
+                            }
+                        }
+                    });
+                    if (!isSSE) {
+                        // Non-streaming: parse full JSON body on 'end'
+                        proxyRes.on("end", () => {
+                            if (captured)
+                                return;
+                            try {
+                                const body = JSON.parse(buf);
+                                if (body.usage)
+                                    applyCacheUsage(entry, body.usage);
+                            }
+                            catch { /* ignore */ }
+                        });
+                    }
+                }
             },
             error: (err, _req, res) => {
                 stats.totalErrors++;
                 logError("proxy", 0, err.message);
+                // Complete the pending log entry for connection-level errors
+                const pendingLog = _req._pendingLog;
+                if (pendingLog) {
+                    pendingLog.type = "error";
+                    pendingLog.statusCode = 0;
+                    pendingLog.details = err.message;
+                    if (_req._startTime) {
+                        pendingLog.durationMs = Date.now() - _req._startTime;
+                    }
+                    stats.addLog(pendingLog);
+                }
                 // res may be a Socket (WebSocket upgrade) — only respond on HTTP ServerResponse
                 if (res instanceof ServerResponse && !res.headersSent) {
                     // Match Anthropic's error response format so Claude Code handles it gracefully
@@ -150,8 +267,16 @@ export async function startServer(opts = {}) {
                 saveAccounts(pool.getAll());
         }
         req._ccAccount = account;
+        req._startTime = Date.now();
+        req._pendingLog = {
+            ts: Date.now(),
+            accountId: account.id,
+            model: "-",
+            type: "route",
+            method: req.method,
+            path: req.path,
+        };
         stats.totalRequests++;
-        stats.addLog({ ts: Date.now(), accountId: account.id, model: "?", type: "route" });
         logRoute(account.id, account.requestCount, Math.round((account.tokens.expiresAt - Date.now()) / 60_000));
         next();
     }, proxy);

package/dist/proxy/stats.js

@@ -1,8 +1,11 @@
-const MAX_LOG_ENTRIES = 50;
+const MAX_LOG_ENTRIES = 100;
 class ProxyStats {
     totalRequests = 0;
     totalErrors = 0;
     totalRefreshes = 0;
+    totalCacheReadTokens = 0;
+    totalCacheCreationTokens = 0;
+    totalInputTokens = 0;
     startTime = Date.now();
     logs = [];
     addLog(entry) {

package/dist/ui/Dashboard.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Box, Text, useInput, useApp } from "ink";
 const POLL_INTERVAL_MS = 2_000;
+const LOG_VISIBLE = 20;
 // ─── Dashboard component ──────────────────────────────────────────────────────
 export function Dashboard({ port }) {
     const { exit } = useApp();
@@ -59,9 +60,28 @@ function ErrorScreen({ error, port, retries }) {
 function LiveDashboard({ data, port, lastUpdate }) {
     const healthyCount = data.accounts.filter(a => a.healthy).length;
     const updatedAgo = Math.round((Date.now() - lastUpdate) / 1000);
-    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  [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: data.recentLogs.length === 0
+    const logs = data.recentLogs;
+    // Stable selection: track by timestamp so it survives log rotations
+    const [selectedTs, setSelectedTs] = useState(null);
+    // Derive index from timestamp; default to 0 (newest)
+    const selectedIndex = selectedTs !== null
+        ? Math.max(0, logs.findIndex(l => l.ts === selectedTs))
+        : 0;
+    useInput((_input, key) => {
+        if (key.upArrow) {
+            const next = Math.max(0, selectedIndex - 1);
+            setSelectedTs(logs[next]?.ts ?? null);
+        }
+        if (key.downArrow) {
+            const next = Math.min(logs.length - 1, selectedIndex + 1);
+            setSelectedTs(logs[next]?.ts ?? null);
+        }
+    });
+    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
                             ? _jsx(Text, { color: "gray", children: "  No activity yet" })
-                            : data.recentLogs.slice(0, 10).map((log, i) => (_jsx(LogRow, { log: log }, i))) })] })] }));
+                            : 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 })] }))] }));
 }
 // ─── Account row ──────────────────────────────────────────────────────────────
 function AccountRow({ account: a }) {
@@ -76,11 +96,88 @@ function AccountRow({ account: a }) {
     return (_jsxs(Box, { children: [_jsxs(Text, { color: dotColor, children: [" ", dot, " "] }), _jsx(Text, { children: a.id.slice(0, 22).padEnd(22) }), _jsx(Text, { color: statusColor, children: statusLabel }), _jsx(Text, { color: "gray", children: " req " }), _jsx(Text, { color: "white", children: String(a.requestCount).padStart(5) }), _jsx(Text, { color: "gray", children: "  err " }), _jsx(Text, { color: a.errorCount > 0 ? "red" : "gray", children: String(a.errorCount).padStart(3) }), _jsx(Text, { color: "gray", children: "  expires " }), _jsx(Text, { color: expiryColor, children: expiryLabel.padEnd(10) }), _jsx(Text, { color: "gray", children: "  last " }), _jsx(Text, { color: "gray", children: formatAgo(a.lastUsedMs) })] }));
 }
 // ─── Log row ──────────────────────────────────────────────────────────────────
-function LogRow({ log }) {
+function LogRow({ log, selected }) {
     const time = new Date(log.ts).toLocaleTimeString("en-GB", { hour12: false });
-    const typeColor = log.type === "error" ? "red" : log.type === "refresh" ? "yellow" : "gray";
-    const typeIcon = log.type === "error" ? "✗" : log.type === "refresh" ? "↻" : "→";
-    return (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: ["  ", time, "  "] }), _jsxs(Text, { color: typeColor, children: [typeIcon, " "] }), _jsx(Text, { color: "cyan", children: log.accountId.slice(0, 22).padEnd(22) }), _jsxs(Text, { color: typeColor, children: [" ", log.type] }), log.details && _jsxs(Text, { color: "gray", children: ["  ", log.details] })] }));
+    const isError = log.type === "error";
+    const isRefresh = log.type === "refresh";
+    const typeColor = isError ? "red" : isRefresh ? "yellow" : "gray";
+    const typeIcon = isError ? "✗" : isRefresh ? "↻" : "→";
+    const statusColor = log.statusCode === undefined ? undefined
+        : log.statusCode >= 500 ? "red"
+            : log.statusCode >= 400 ? "yellow"
+                : log.statusCode >= 200 ? "green"
+                    : "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;
+    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] }))] }));
+}
+// ─── Detail panel ─────────────────────────────────────────────────────────────
+function DetailPanel({ log }) {
+    const time = new Date(log.ts).toLocaleString("en-GB", {
+        hour12: false,
+        year: "numeric", month: "2-digit", day: "2-digit",
+        hour: "2-digit", minute: "2-digit", second: "2-digit",
+    });
+    const isError = log.type === "error";
+    const statusLabel = log.statusCode === undefined ? "—"
+        : log.statusCode === 0 ? "connection error"
+            : `${log.statusCode} ${httpStatusText(log.statusCode)}`;
+    const statusColor = log.statusCode === undefined ? "gray"
+        : log.statusCode === 0 ? "red"
+            : 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 }) }))] })] }));
+}
+function Field({ label, value }) {
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [label, ": "] }), _jsx(Text, { color: "white", children: 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 }) {
+    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 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 = {
+        200: "OK", 201: "Created", 204: "No Content",
+        400: "Bad Request", 401: "Unauthorized", 403: "Forbidden",
+        404: "Not Found", 429: "Too Many Requests",
+        500: "Internal Server Error", 502: "Bad Gateway",
+        503: "Service Unavailable", 529: "Overloaded",
+    };
+    return map[code] ?? "";
 }
 // ─── Formatters ───────────────────────────────────────────────────────────────
 function formatUptime(seconds) {

package/dist/utils/claude-config.js

@@ -1,6 +1,7 @@
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
 import { dirname } from "path";
 import { CLAUDE_SETTINGS_PATH } from "../config/paths.js";
+import { readConfig } from "../config/manager.js";
 /**
  * Write ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN into ~/.claude/settings.json.
  *
@@ -36,8 +37,8 @@ export function writeClaudeSettings(port, baseUrl) {
             ...existingEnv,
             ANTHROPIC_BASE_URL: resolvedUrl,
             // ANTHROPIC_AUTH_TOKEN has higher precedence than ANTHROPIC_API_KEY in Claude Code.
-            // The proxy replaces this placeholder with the real OAuth token per request.
-            ANTHROPIC_AUTH_TOKEN: "proxy-managed",
+            // Uses the configured proxy secret if set, otherwise falls back to the open placeholder.
+            ANTHROPIC_AUTH_TOKEN: readConfig().proxySecret ?? "proxy-managed",
         },
     };
     writeFileSync(CLAUDE_SETTINGS_PATH, JSON.stringify(updated, null, 2), "utf-8");

package/package.json

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