@timo972/cc-router 0.7.0

package/dist/ui/Dashboard.js

@@ -0,0 +1,640 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import { createAccountsApi } from "./accountsApi.js";
+import { createModelsApi } from "./modelsApi.js";
+const POLL_INTERVAL_MS = 2_000;
+const LOG_VISIBLE = 20;
+const MODEL_VISIBLE_ROWS = 16;
+const EMPTY_RL = {
+    status: "unknown", fiveHourUtil: 0, fiveHourReset: 0,
+    sevenDayUtil: 0, sevenDayReset: 0, claim: "", plan: "",
+    requestsLimit: 0, lastUpdated: 0,
+};
+export function Dashboard({ port, baseUrl, authToken, onIntent }) {
+    const { exit } = useApp();
+    const [data, setData] = useState(null);
+    const [connectError, setConnectError] = useState(null);
+    const [lastUpdate, setLastUpdate] = useState(0);
+    const [retryCount, setRetryCount] = useState(0);
+    const resolvedBase = baseUrl
+        ? baseUrl.replace(/\/+$/, "")
+        : `http://localhost:${port}`;
+    const api = React.useMemo(() => createAccountsApi(resolvedBase, authToken), [resolvedBase, authToken]);
+    const modelsApi = React.useMemo(() => createModelsApi(resolvedBase, authToken), [resolvedBase, authToken]);
+    // Only q to quit when no live data yet (no mode to cancel)
+    useInput((input, key) => {
+        if (!data && (input === "q" || key.escape))
+            exit();
+    });
+    useEffect(() => {
+        let cancelled = false;
+        const healthUrl = `${resolvedBase}/cc-router/health`;
+        const headers = authToken
+            ? { authorization: `Bearer ${authToken}` }
+            : {};
+        const poll = async () => {
+            try {
+                const res = await fetch(healthUrl, {
+                    headers,
+                    signal: AbortSignal.timeout(1_500),
+                });
+                if (cancelled)
+                    return;
+                if (res.ok) {
+                    setData(await res.json());
+                    setConnectError(null);
+                    setLastUpdate(Date.now());
+                    setRetryCount(0);
+                }
+                else {
+                    setConnectError(`Proxy returned HTTP ${res.status}`);
+                }
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setConnectError(`Cannot connect to ${resolvedBase}`);
+                setRetryCount(n => n + 1);
+            }
+        };
+        poll();
+        const timer = setInterval(poll, POLL_INTERVAL_MS);
+        return () => { cancelled = true; clearInterval(timer); };
+    }, [resolvedBase, authToken]);
+    if (connectError) {
+        return _jsx(ErrorScreen, { error: connectError, port: port, retries: retryCount });
+    }
+    if (!data) {
+        return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["\u280B Connecting to ", resolvedBase, "..."] }) }));
+    }
+    return (_jsx(LiveDashboard, { data: data, port: port, baseUrl: resolvedBase, lastUpdate: lastUpdate, api: api, modelsApi: modelsApi, onIntent: onIntent }));
+}
+// ─── Error screen ─────────────────────────────────────────────────────────────
+function ErrorScreen({ error, port, retries }) {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, marginX: 2, children: [_jsxs(Text, { color: "red", bold: true, children: ["\u2717 ", error] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "Is the proxy running? Start it with:" }), _jsx(Text, { color: "cyan", children: "  cc-router start" })] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "gray", children: ["Retrying every ", POLL_INTERVAL_MS / 1000, "s"] }), retries > 0 && _jsxs(Text, { color: "gray", children: ["  (attempt ", retries, ")"] }), _jsx(Text, { color: "gray", children: "  \u00B7  [q] quit" })] })] }));
+}
+// ─── Live dashboard ───────────────────────────────────────────────────────────
+function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onIntent, }) {
+    const { exit } = useApp();
+    const healthyCount = data.accounts.filter(a => a.healthy).length;
+    const updatedAgo = Math.round((Date.now() - lastUpdate) / 1000);
+    const logs = data.recentLogs;
+    // ── Focus / mode ──────────────────────────────────────────────────────────
+    const [focus, setFocus] = useState("logs");
+    const [mode, setMode] = useState("view");
+    // Selected log by timestamp (existing)
+    const [selectedTs, setSelectedTs] = useState(null);
+    const selectedLogIndex = selectedTs !== null
+        ? Math.max(0, logs.findIndex(l => l.ts === selectedTs))
+        : 0;
+    // Selected account by id
+    const [selectedAccountId, setSelectedAccountId] = useState(null);
+    const selectedAccountIndex = selectedAccountId !== null
+        ? Math.max(0, data.accounts.findIndex(a => a.id === selectedAccountId))
+        : 0;
+    const selectedAccount = data.accounts[selectedAccountIndex] ?? null;
+    const selectedAccountIsAnthropic = selectedAccount?.provider !== "openai_subscription";
+    const [modelsStatus, setModelsStatus] = useState(null);
+    const [selectedModelId, setSelectedModelId] = useState(null);
+    const modelRows = modelsStatus?.models ?? [];
+    const selectedModelIndex = selectedModelId !== null
+        ? Math.max(0, modelRows.findIndex(m => m.id === selectedModelId))
+        : 0;
+    const selectedModel = modelRows[selectedModelIndex] ?? null;
+    // Inline text input state (for w / s keys)
+    const [editBuffer, setEditBuffer] = useState("");
+    // Transient banner (error or success, cleared after 4s).
+    // The timer handle is stored in a ref so new banners cancel the previous
+    // timeout and component unmount also clears it — otherwise a deferred
+    // setBanner can fire on an unmounted component after `n` exits Ink.
+    const [banner, setBanner] = useState(null);
+    const bannerTimerRef = useRef(null);
+    const showBanner = useCallback((text, color) => {
+        if (bannerTimerRef.current)
+            clearTimeout(bannerTimerRef.current);
+        setBanner({ text, color });
+        bannerTimerRef.current = setTimeout(() => {
+            setBanner(null);
+            bannerTimerRef.current = null;
+        }, 4_000);
+    }, []);
+    useEffect(() => () => {
+        if (bannerTimerRef.current)
+            clearTimeout(bannerTimerRef.current);
+    }, []);
+    // Normalize any thrown value to a displayable string — rejections from
+    // fetch/AbortSignal can be DOMException without .message, strings, or
+    // even undefined.
+    const errMsg = (err) => {
+        if (err instanceof Error && err.message)
+            return err.message;
+        const s = String(err ?? "");
+        return s || "unknown error";
+    };
+    // ── Async helpers (fire-and-forget with error → banner) ──────────────────
+    const doToggleEnabled = useCallback(async () => {
+        if (!selectedAccount)
+            return;
+        if (selectedAccount.provider === "openai_subscription") {
+            showBanner("OpenAI accounts are managed from the CLI", "yellow");
+            return;
+        }
+        const newValue = !(selectedAccount.enabled !== false);
+        try {
+            await api.patch(selectedAccount.id, { enabled: newValue });
+            showBanner(`${selectedAccount.id} → ${newValue ? "enabled" : "disabled"}`, newValue ? "green" : "yellow");
+        }
+        catch (err) {
+            showBanner(`Error: ${errMsg(err)}`, "red");
+        }
+    }, [selectedAccount, api, showBanner]);
+    const doToggleProvider = useCallback(async (provider) => {
+        const providerStatus = provider === "anthropic_subscription"
+            ? data.operational?.providers.anthropic
+            : data.operational?.providers.openai;
+        const label = provider === "anthropic_subscription" ? "Claude" : "OpenAI";
+        if (!providerStatus?.configured || providerStatus.accounts === 0) {
+            showBanner(`${label} accounts are not configured`, "yellow");
+            return;
+        }
+        const enabled = providerStatus.enabled < providerStatus.accounts;
+        try {
+            await api.setProviderEnabled(provider, enabled);
+            showBanner(`${label} accounts → ${enabled ? "enabled" : "disabled"}`, enabled ? "green" : "yellow");
+        }
+        catch (err) {
+            showBanner(`Error: ${errMsg(err)}`, "red");
+        }
+    }, [api, data.operational, showBanner]);
+    const doSetLimit = useCallback(async (field, value) => {
+        if (!selectedAccount)
+            return;
+        if (selectedAccount.provider === "openai_subscription") {
+            showBanner("OpenAI accounts do not use Anthropic caps", "yellow");
+            return;
+        }
+        try {
+            await api.patch(selectedAccount.id, { [field]: value });
+            const label = field === "sessionLimitPercent" ? "5h cap" : "7d cap";
+            showBanner(`${selectedAccount.id} → ${label} = ${value}%`, "green");
+        }
+        catch (err) {
+            showBanner(`Error: ${errMsg(err)}`, "red");
+        }
+    }, [selectedAccount, api, showBanner]);
+    const doDelete = useCallback(async () => {
+        if (!selectedAccount)
+            return;
+        if (selectedAccount.provider === "openai_subscription") {
+            showBanner("Use cc-router accounts remove for OpenAI accounts", "yellow");
+            return;
+        }
+        try {
+            await api.remove(selectedAccount.id);
+            showBanner(`Removed ${selectedAccount.id}`, "yellow");
+            setSelectedAccountId(null);
+        }
+        catch (err) {
+            showBanner(`Error: ${errMsg(err)}`, "red");
+        }
+    }, [selectedAccount, api, showBanner]);
+    const doLoadModels = useCallback(async () => {
+        try {
+            const status = await modelsApi.list();
+            setModelsStatus(status);
+            setSelectedModelId(status.models[0]?.id ?? null);
+            setFocus("models");
+            showBanner(`Loaded ${status.models.length} models`, "green");
+        }
+        catch (err) {
+            showBanner(`Models error: ${errMsg(err)}`, "red");
+        }
+    }, [modelsApi, showBanner]);
+    const doSetSelectedModel = useCallback(async (provider) => {
+        if (!selectedModel)
+            return;
+        if (provider === "claude" && !selectedModel.id.startsWith("anthropic/")) {
+            showBanner("Select an anthropic/* model for Claude", "yellow");
+            return;
+        }
+        if (provider === "openai" && !selectedModel.id.startsWith("openai/")) {
+            showBanner("Select an openai/* model for OpenAI", "yellow");
+            return;
+        }
+        try {
+            const status = await modelsApi.setDefaults(provider === "claude"
+                ? { claudeModel: selectedModel.id }
+                : { openAIModel: selectedModel.id });
+            setModelsStatus(previous => ({
+                routing: status.routing,
+                models: status.models.length > 0 ? status.models : previous?.models ?? [],
+            }));
+            showBanner(`${provider === "claude" ? "Claude" : "OpenAI"} default → ${selectedModel.id}`, "green");
+        }
+        catch (err) {
+            showBanner(`Models error: ${errMsg(err)}`, "red");
+        }
+    }, [modelsApi, selectedModel, showBanner]);
+    // ── Keyboard handler ──────────────────────────────────────────────────────
+    useInput((input, key) => {
+        // ── Text editing mode (w / s) ───────────────────────────────────────
+        if (mode === "editSession" || mode === "editWeekly") {
+            if (key.escape) {
+                setMode("view");
+                setEditBuffer("");
+                return;
+            }
+            if (key.return) {
+                const parsed = parseInt(editBuffer, 10);
+                if (!Number.isNaN(parsed) && parsed >= 0 && parsed <= 100) {
+                    const field = mode === "editSession" ? "sessionLimitPercent" : "weeklyLimitPercent";
+                    void doSetLimit(field, parsed);
+                }
+                else {
+                    showBanner("Invalid: enter a number 0–100", "red");
+                }
+                setMode("view");
+                setEditBuffer("");
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setEditBuffer(b => b.slice(0, -1));
+                return;
+            }
+            if (/^[0-9]$/.test(input) && editBuffer.length < 3) {
+                setEditBuffer(b => b + input);
+            }
+            return;
+        }
+        // ── Confirm delete (y/n) ────────────────────────────────────────────
+        if (mode === "confirmDelete") {
+            if (input === "y" || input === "Y") {
+                void doDelete();
+                setMode("view");
+            }
+            else {
+                setMode("view");
+                showBanner("Delete cancelled", "gray");
+            }
+            return;
+        }
+        // ── Normal view mode ────────────────────────────────────────────────
+        // Always call exit() so Ink fully unmounts and releases stdin.
+        // The outer dashboardLoop reads `pendingIntent` after waitUntilExit().
+        if (input === "q") {
+            onIntent?.("quit");
+            exit();
+            return;
+        }
+        if (key.escape) {
+            if (focus === "accounts" || focus === "models") {
+                setFocus("logs");
+                return;
+            }
+            onIntent?.("quit");
+            exit();
+            return;
+        }
+        if (key.tab) {
+            setFocus(f => f === "logs" ? "accounts" : f === "accounts" ? "models" : "logs");
+            return;
+        }
+        // Navigation: ↑↓ move within the focused panel
+        if (focus === "logs") {
+            if (key.upArrow) {
+                const next = Math.max(0, selectedLogIndex - 1);
+                setSelectedTs(logs[next]?.ts ?? null);
+            }
+            if (key.downArrow) {
+                const next = Math.min(logs.length - 1, selectedLogIndex + 1);
+                setSelectedTs(logs[next]?.ts ?? null);
+            }
+        }
+        if (focus === "accounts") {
+            if (key.upArrow) {
+                const next = Math.max(0, selectedAccountIndex - 1);
+                setSelectedAccountId(data.accounts[next]?.id ?? null);
+            }
+            if (key.downArrow) {
+                const next = Math.min(data.accounts.length - 1, selectedAccountIndex + 1);
+                setSelectedAccountId(data.accounts[next]?.id ?? null);
+            }
+            // Account actions (only when focus = accounts)
+            if (input === "e") {
+                void doToggleEnabled();
+                return;
+            }
+            if (input === "a") {
+                void doToggleProvider("anthropic_subscription");
+                return;
+            }
+            if (input === "o") {
+                void doToggleProvider("openai_subscription");
+                return;
+            }
+            if (input === "w") {
+                if (!selectedAccountIsAnthropic) {
+                    showBanner("OpenAI accounts do not use Anthropic caps", "yellow");
+                    return;
+                }
+                setMode("editWeekly");
+                setEditBuffer("");
+                return;
+            }
+            if (input === "s") {
+                if (!selectedAccountIsAnthropic) {
+                    showBanner("OpenAI accounts do not use Anthropic caps", "yellow");
+                    return;
+                }
+                setMode("editSession");
+                setEditBuffer("");
+                return;
+            }
+            if (input === "d") {
+                if (!selectedAccountIsAnthropic) {
+                    showBanner("Use cc-router accounts remove for OpenAI accounts", "yellow");
+                    return;
+                }
+                setMode("confirmDelete");
+                return;
+            }
+        }
+        if (focus === "models") {
+            if (key.upArrow) {
+                const next = Math.max(0, selectedModelIndex - 1);
+                setSelectedModelId(modelRows[next]?.id ?? null);
+            }
+            if (key.downArrow) {
+                const next = Math.min(modelRows.length - 1, selectedModelIndex + 1);
+                setSelectedModelId(modelRows[next]?.id ?? null);
+            }
+            if (input === "r") {
+                void doLoadModels();
+                return;
+            }
+            if (input === "c") {
+                void doSetSelectedModel("claude");
+                return;
+            }
+            if (input === "o") {
+                void doSetSelectedModel("openai");
+                return;
+            }
+        }
+        if (input === "m") {
+            void doLoadModels();
+            return;
+        }
+        // n = add account — works regardless of focus.
+        // Requires an onIntent handler because the outer loop runs the OAuth
+        // flow after Ink unmounts; if none is wired, this key is a no-op.
+        if (input === "n") {
+            if (onIntent) {
+                onIntent("addAccount");
+                exit();
+            }
+            return;
+        }
+    });
+    const selectedLog = logs[selectedLogIndex] ?? 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  [q] quit"] })] }), _jsx(Box, { marginTop: 1 }), data.operational && (_jsxs(_Fragment, { children: [_jsx(OperationsPanel, { operational: data.operational, baseUrl: baseUrl, focus: focus }), _jsx(Box, { marginTop: 1 })] })), (focus === "models" || modelsStatus) && (_jsxs(_Fragment, { children: [_jsx(ModelsPanel, { status: modelsStatus, selectedIndex: selectedModelIndex, focused: focus === "models" }), _jsx(Box, { marginTop: 1 })] })), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, children: [" ACCOUNTS  ", _jsxs(Text, { color: healthyCount === data.accounts.length ? "green" : "yellow", children: [healthyCount, "/", data.accounts.length, " healthy"] })] }), _jsx(Text, { color: "gray", children: "   " }), _jsx(Text, { color: focus === "accounts" ? "white" : "gray", children: "[Tab] focus  [e] toggle  [a] Claude all  [o] OpenAI all  [w] 7d cap  [s] 5h cap  [n] add  [d] delete" })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: data.accounts.map((a, i) => (_jsx(AccountRow, { account: a, selected: focus === "accounts" && i === selectedAccountIndex }, a.id))) })] }), mode === "editWeekly" && selectedAccount && (_jsxs(Box, { marginTop: 1, paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: "Set 7d cap for " }), _jsx(Text, { color: "white", bold: true, children: selectedAccount.id }), _jsx(Text, { color: "cyan", children: " (0\u2013100%): " }), _jsx(Text, { color: "white", bold: true, children: editBuffer }), _jsx(Text, { color: "gray", children: "\u2588  [Enter] save  [Esc] cancel" })] })), mode === "editSession" && selectedAccount && (_jsxs(Box, { marginTop: 1, paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: "Set 5h cap for " }), _jsx(Text, { color: "white", bold: true, children: selectedAccount.id }), _jsx(Text, { color: "cyan", children: " (0\u2013100%): " }), _jsx(Text, { color: "white", bold: true, children: editBuffer }), _jsx(Text, { color: "gray", children: "\u2588  [Enter] save  [Esc] cancel" })] })), mode === "confirmDelete" && selectedAccount && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsxs(Text, { color: "red", bold: true, children: ["Delete \"", selectedAccount.id, "\"?  [y] yes  [n/Esc] cancel"] }) })), banner && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsxs(Text, { color: banner.color, children: [" ", banner.text] }) })), _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 ?? 0 })] }), _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: focus === "logs" && i === selectedLogIndex }, `${log.ts}-${i}`))) })] }), focus === "logs" && selectedLog && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1 }), _jsx(DetailPanel, { log: selectedLog })] }))] }));
+}
+function OperationsPanel({ operational, baseUrl, focus }) {
+    const authLabel = operational.auth.required ? "protected" : "open";
+    const authColor = operational.auth.required ? "green" : "yellow";
+    const claudeReady = operational.capabilities.anthropicMessages;
+    const openAIReady = operational.capabilities.openAIResponses;
+    const crossReady = operational.capabilities.crossProviderMessages;
+    const modelsReady = operational.capabilities.dynamicModels;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: " OPERATIONS  " }), _jsx(Text, { color: "gray", children: "base " }), _jsx(Text, { color: "cyan", children: baseUrl }), _jsx(Text, { color: "gray", children: "  \u00B7  auth " }), _jsx(Text, { color: authColor, children: authLabel }), _jsx(Text, { color: "gray", children: "  \u00B7  models " }), _jsx(Text, { color: modelsReady ? "green" : "red", children: modelsReady ? "dynamic" : "off" })] }), _jsxs(Box, { paddingLeft: 2, children: [_jsx(ProviderBadge, { label: "Claude", status: operational.providers.anthropic, ready: claudeReady }), _jsx(Text, { color: "gray", children: "  " }), _jsx(ProviderBadge, { label: "OpenAI", status: operational.providers.openai, ready: openAIReady }), _jsx(Text, { color: "gray", children: "  \u00B7  cross-route " }), _jsx(Text, { color: crossReady ? "green" : "gray", children: crossReady ? "ready" : "needs OpenAI" })] }), _jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "endpoints " }), _jsx(Text, { color: "white", children: operational.endpoints.messages }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: "white", children: operational.endpoints.responses }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: "white", children: operational.endpoints.models }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: "white", children: operational.endpoints.accounts })] }), _jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "routing " }), _jsxs(Text, { color: "white", children: ["claude=", operational.routing.anthropicDefaultModel ?? "default"] }), _jsxs(Text, { color: "gray", children: [" aliases[", operational.routing.anthropicAliases.join(",") || "-", "]"] }), _jsx(Text, { color: "gray", children: "  " }), _jsxs(Text, { color: "white", children: ["openai=", operational.routing.openAIDefaultModel ?? "default"] }), _jsxs(Text, { color: "gray", children: [" aliases[", operational.routing.openAIAliases.join(",") || "-", "]"] })] }), _jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "models " }), _jsx(Text, { color: focus === "models" ? "white" : "cyan", children: "[m] list/select" }), _jsx(Text, { color: "gray", children: "  change " }), _jsx(Text, { color: focus === "models" ? "white" : "cyan", children: "[c] Claude [o] OpenAI" })] })] }));
+}
+function ModelsPanel({ status, selectedIndex, focused, }) {
+    const models = status?.models ?? [];
+    const visible = getVisibleModelWindow(models, selectedIndex, MODEL_VISIBLE_ROWS);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: " MODELS  " }), _jsx(Text, { color: "gray", children: "[m/r] refresh  [\u2191/\u2193] select  [c] Claude default  [o] OpenAI default  [Esc] logs" })] }), _jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "current " }), _jsxs(Text, { color: "white", children: ["claude=", status?.routing.anthropicDefaultModel ?? "default"] }), _jsx(Text, { color: "gray", children: "  " }), _jsxs(Text, { color: "white", children: ["openai=", status?.routing.openAIDefaultModel ?? "default"] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: status === null
+                    ? _jsx(Text, { color: "gray", children: "  Press [m] to load models from provider APIs" })
+                    : models.length === 0
+                        ? _jsx(Text, { color: "gray", children: "  No models discovered" })
+                        : (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["  showing ", visible.start + 1, "-", visible.end, " of ", models.length] }), visible.rows.map((model, i) => (_jsx(ModelRow, { model: model, selected: focused && visible.start + i === selectedIndex, currentClaude: status.routing.anthropicDefaultModel, currentOpenAI: status.routing.openAIDefaultModel }, model.id)))] })) })] }));
+}
+export function getVisibleModelWindow(models, selectedIndex, maxRows = MODEL_VISIBLE_ROWS) {
+    if (models.length <= maxRows) {
+        return { rows: models, start: 0, end: models.length };
+    }
+    const selected = Math.max(0, Math.min(selectedIndex, models.length - 1));
+    const start = Math.max(0, Math.min(selected - maxRows + 1, models.length - maxRows));
+    const end = Math.min(models.length, start + maxRows);
+    return {
+        rows: models.slice(start, end),
+        start,
+        end,
+    };
+}
+function ModelRow({ model, selected, currentClaude, currentOpenAI, }) {
+    const id = model.id;
+    const upstream = id.replace(/^anthropic\//, "").replace(/^openai\//, "");
+    const isClaudeDefault = currentClaude === upstream || id === "claude/default";
+    const isOpenAIDefault = currentOpenAI === upstream || id === "openai/default";
+    const providerColor = id.startsWith("openai/") ? "cyan" : id.startsWith("anthropic/") ? "magenta" : "gray";
+    const marker = isClaudeDefault ? " Claude" : isOpenAIDefault ? " OpenAI" : "";
+    return (_jsxs(Box, { children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶" : " " }), _jsxs(Text, { color: providerColor, children: [" ", id] }), marker && _jsx(Text, { color: "green", children: marker })] }));
+}
+function ProviderBadge({ label, status, ready, }) {
+    const color = !status.configured ? "gray" : ready ? "green" : "yellow";
+    const text = status.configured
+        ? `${label} ${status.healthy}/${status.accounts} healthy`
+        : `${label} not configured`;
+    return _jsx(Text, { color: color, children: text });
+}
+// ─── Account row (two-line: status + utilization bars) ───────────────────────
+function AccountRow({ account: a, selected }) {
+    const rl = a.rateLimits ?? EMPTY_RL;
+    const isLimited = rl.status === "rate_limited";
+    const isDisabled = a.enabled === false;
+    const dot = isDisabled ? "⊘" : isLimited ? "⊘" : a.busy ? "◌" : a.healthy ? "●" : "●";
+    const dotColor = isDisabled ? "gray" : isLimited ? "red" : a.busy ? "yellow" : a.healthy ? "green" : "red";
+    const statusLabel = isDisabled ? "OFF    " : isLimited ? "LIMITED" : a.busy ? "busy   " : a.healthy ? "ok     " : "ERROR  ";
+    const statusColor = isDisabled ? "gray" : isLimited ? "red" : a.busy ? "yellow" : a.healthy ? "green" : "red";
+    const expiryLabel = a.expiresInMs > 0 ? formatMs(a.expiresInMs) : "EXPIRED";
+    const expiryColor = a.expiresInMs < 10 * 60 * 1000 ? "red"
+        : a.expiresInMs < 30 * 60 * 1000 ? "yellow"
+            : "white";
+    const providerTag = a.provider === "openai_subscription"
+        ? " [OpenAI]"
+        : rl.plan ? ` [${rl.plan}]` : "";
+    // User-defined caps hint
+    const s5 = a.sessionLimitPercent ?? 100;
+    const w7 = a.weeklyLimitPercent ?? 100;
+    const hasCaps = s5 < 100 || w7 < 100;
+    const capsHint = hasCaps
+        ? ` cap${s5 < 100 ? ` 5h≤${s5}%` : ""}${w7 < 100 ? ` 7d≤${w7}%` : ""}`
+        : "";
+    const pointer = selected ? "▶" : " ";
+    const nameColor = isDisabled ? "gray" : undefined;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: pointer }), _jsxs(Text, { color: dotColor, children: [" ", dot, " "] }), _jsx(Text, { color: nameColor, dimColor: isDisabled, children: a.id.slice(0, 20).padEnd(20) }), _jsx(Text, { color: statusColor, children: statusLabel }), providerTag && _jsx(Text, { color: a.provider === "openai_subscription" ? "cyan" : "magenta", children: providerTag.padEnd(10) }), !providerTag && _jsx(Text, { children: "".padEnd(10) }), _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: "  tok " }), _jsx(Text, { color: expiryColor, children: expiryLabel.padEnd(8) }), _jsx(Text, { color: "gray", children: "  last " }), _jsx(Text, { color: "gray", children: formatAgo(a.lastUsedMs) }), a.provider !== "openai_subscription" && (_jsxs(Text, { color: "gray", children: ["  ", a.activeSessions ?? 0, " active / ", a.inFlightRequests ?? 0, " streams"] })), capsHint && _jsx(Text, { color: "yellow", children: capsHint })] }), rl.lastUpdated > 0 && (_jsxs(Box, { paddingLeft: 4, children: [_jsx(UtilBar, { label: "5h", util: rl.fiveHourUtil, resetTs: rl.fiveHourReset, isActive: rl.claim === "five_hour", cap: s5 }), _jsx(Text, { children: "   " }), _jsx(UtilBar, { label: "7d", util: rl.sevenDayUtil, resetTs: rl.sevenDayReset, isActive: rl.claim === "seven_day", cap: w7 })] }))] }));
+}
+// ─── Utilization bar ─────────────────────────────────────────────────────────
+function UtilBar({ label, util, resetTs, isActive, cap }) {
+    const pct = Math.round(util * 100);
+    const BAR_W = 12;
+    const filled = Math.round(util * BAR_W);
+    const capPos = Math.round((cap / 100) * BAR_W);
+    const bar = "█".repeat(Math.min(filled, BAR_W)) + "░".repeat(Math.max(BAR_W - filled, 0));
+    const color = pct >= cap ? "red" : pct >= 90 ? "red" : pct >= 70 ? "yellow" : "green";
+    const resetLabel = resetTs > 0 ? formatResetIn(resetTs) : "";
+    const capLabel = cap < 100 ? ` cap ${cap}%` : "";
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? "white" : "gray", bold: isActive, children: [label, " "] }), _jsx(Text, { color: color, children: bar }), _jsxs(Text, { color: color, children: [String(pct).padStart(4), "%"] }), capLabel && _jsx(Text, { color: "yellow", children: capLabel }), resetLabel && _jsxs(Text, { color: "gray", children: [" \u21BB", resetLabel] })] }));
+}
+function formatResetIn(unixSeconds) {
+    const diff = unixSeconds - Date.now() / 1000;
+    if (diff <= 0)
+        return "now";
+    const d = Math.floor(diff / 86400);
+    const h = Math.floor((diff % 86400) / 3600);
+    const m = Math.floor((diff % 3600) / 60);
+    if (d > 0)
+        return `${d}d${h}h`;
+    if (h > 0)
+        return `${h}h${m}m`;
+    return `${m}m`;
+}
+// ─── Log row ──────────────────────────────────────────────────────────────────
+function LogRow({ log, selected }) {
+    const time = new Date(log.ts).toLocaleTimeString("en-GB", { hour12: false });
+    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;
+    const sourceLabel = log.source === "cli" ? "cli"
+        : log.source === "desktop" ? "dsk"
+            : log.source === "api" ? "api"
+                : "   ";
+    const sourceColor = log.source === "cli" ? "blue"
+        : log.source === "desktop" ? "magenta"
+            : "gray";
+    // 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, " "] }), _jsxs(Text, { backgroundColor: bg, color: fg(sourceColor), children: [sourceLabel, " "] }), _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, "%"] })), (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 }) {
+    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 }), _jsx(Field, { label: "Source", value: sourceFullLabel(log.source) })] }), 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 })] }));
+}
+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;
+    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);
+}
+// ─── Source label ─────────────────────────────────────────────────────────────
+function sourceFullLabel(source) {
+    if (source === "cli")
+        return "Claude Code";
+    if (source === "desktop")
+        return "Claude Desktop";
+    if (source === "api")
+        return "API";
+    return "—";
+}
+// ─── 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) {
+    const h = Math.floor(seconds / 3_600);
+    const m = Math.floor((seconds % 3_600) / 60);
+    const s = seconds % 60;
+    if (h > 0)
+        return `${h}h ${m}m`;
+    if (m > 0)
+        return `${m}m ${s}s`;
+    return `${s}s`;
+}
+function formatMs(ms) {
+    const totalMin = Math.round(ms / 60_000);
+    if (totalMin >= 60)
+        return `${Math.floor(totalMin / 60)}h ${totalMin % 60}m`;
+    return `${totalMin}m`;
+}
+function formatAgo(ts) {
+    if (!ts)
+        return "never";
+    const s = Math.round((Date.now() - ts) / 1_000);
+    if (s < 60)
+        return `${s}s ago`;
+    const m = Math.floor(s / 60);
+    return `${m}m ago`;
+}