@timo972/cc-router 0.11.0 → 0.12.0-rc.1

package/dist/ui/Dashboard.js

@@ -4,7 +4,11 @@ import { Box, Text, useInput, useApp, useStdout, measureElement } from "ink";
 import { createAccountsApi } from "./accountsApi.js";
 import { createModelsApi } from "./modelsApi.js";
 import { getCurrentVersion } from "../utils/self-update.js";
+import { readClaudeRouting, readCodexRouting, setClaudeRouting, setCodexRouting, } from "../utils/cli-routing.js";
+import { mergeGrokIntoHealth, loadGrokHealthSnapshotsWithSubscription } from "../providers/xai/overview.js";
 const POLL_INTERVAL_MS = 2_000;
+/** Grok's plan/code-access rarely change; refresh far slower than the 2s poll. */
+const GROK_SUBSCRIPTION_INTERVAL_MS = 60_000;
 /** Most activity rows the dashboard will show — the list shrinks below this
  *  (down to MIN_LOG_VISIBLE) when the terminal is too short for the full
  *  frame. Ink can only erase as many lines as the viewport holds, so a frame
@@ -223,6 +227,123 @@ export function isCodexLimited(codex) {
         return false;
     return (defaultBucket.primary?.utilization ?? 0) >= 1 || (defaultBucket.secondary?.utilization ?? 0) >= 1;
 }
+export function isOpenAIAccount(account) {
+    return account.provider === "openai_subscription";
+}
+export function isXaiAccount(account) {
+    return account.provider === "xai_subscription";
+}
+export function isClaudeAccount(account) {
+    return !isOpenAIAccount(account) && !isXaiAccount(account);
+}
+/** Compact `rst` column: banked Codex usage-limit resets. Claude is an em dash. */
+export function resetCreditsColumnLabel(account) {
+    if (!isOpenAIAccount(account))
+        return "—";
+    return String(account.codexRateLimits?.resetCredits?.available ?? 0);
+}
+export function isLimitedAccount(account) {
+    if (isXaiAccount(account))
+        return false;
+    if (isOpenAIAccount(account))
+        return isCodexLimited(account.codexRateLimits);
+    if (account.rateLimits?.status === "rate_limited")
+        return true;
+    if (!account.rateLimits)
+        return false;
+    const view = getGlobalCapacityView(account.rateLimits);
+    return view.fiveHour.utilization >= 1 || view.sevenDay.utilization >= 1;
+}
+/** Claude, then ChatGPT, then Grok; within each group, accounts at limit last. */
+export function orderAccountsForDashboard(accounts) {
+    const usableThenLimited = (list) => [
+        ...list.filter(account => !isLimitedAccount(account)),
+        ...list.filter(account => isLimitedAccount(account)),
+    ];
+    return [
+        ...usableThenLimited(accounts.filter(isClaudeAccount)),
+        ...usableThenLimited(accounts.filter(isOpenAIAccount)),
+        ...usableThenLimited(accounts.filter(isXaiAccount)),
+    ];
+}
+/** Compact view hides healthy/inactive model rows; selection shows the full set. */
+export function visibleCapacityRows(rows, selected) {
+    if (selected)
+        return rows;
+    return rows.filter(row => row.color === "red" || row.color === "yellow");
+}
+export function noteModelLimit(account) {
+    const limits = account.rateLimits?.usage?.modelLimits ?? [];
+    if (limits.length === 0)
+        return undefined;
+    const fable = limits.find(limit => limit.modelFamily === "fable" || /fable/i.test(limit.displayName));
+    const limit = fable ?? limits.find(entry => entry.active) ?? limits[0];
+    if (!limit)
+        return undefined;
+    const utilization = limit.utilization;
+    const color = utilization >= 1 || limit.severity === "critical"
+        ? "red"
+        : utilization >= 0.7 || limit.severity === "warning"
+            ? "yellow"
+            : "green";
+    return {
+        label: limit.displayName.replace(/^Claude\s+/i, ""),
+        utilization,
+        color,
+    };
+}
+/**
+ * Grok has no usage windows, so the note carries the plan instead. Prefer the
+ * live plan name from `/v1/user` ("GrokPro"); fall back to the coarse
+ * access-token `tier` when the live lookup has not landed (offline / first
+ * render), and to "cli" when neither is known.
+ */
+export function grokQuotaNote(account) {
+    if (!isXaiAccount(account))
+        return undefined;
+    if (account.healthy === false)
+        return "expired";
+    const plan = account.xai?.subscriptionTier?.trim();
+    if (plan)
+        return plan;
+    const tier = account.xai?.tier;
+    return typeof tier === "number" && Number.isFinite(tier) ? `tier ${tier}` : "cli";
+}
+export function openaiQuotaGapNote(account) {
+    if (!isOpenAIAccount(account))
+        return undefined;
+    if (getCodexDefaultWindows(account.codexRateLimits).length > 0)
+        return undefined;
+    const plan = account.codexRateLimits?.plan?.trim();
+    return plan ? `${plan} · no quota` : "no quota";
+}
+export function isWeeklyLimited(account) {
+    if (isOpenAIAccount(account)) {
+        return getCodexDefaultWindows(account.codexRateLimits).some(window => window.kind === "weekly" && window.utilization >= 1);
+    }
+    if (!account.rateLimits)
+        return false;
+    return getGlobalCapacityView(account.rateLimits).sevenDay.utilization >= 1;
+}
+export function earliestWeeklyReset(accounts) {
+    let earliest;
+    for (const account of accounts) {
+        if (isOpenAIAccount(account)) {
+            for (const window of getCodexDefaultWindows(account.codexRateLimits)) {
+                if (window.kind !== "weekly" || window.resetAt <= 0)
+                    continue;
+                if (earliest === undefined || window.resetAt < earliest)
+                    earliest = window.resetAt;
+            }
+        }
+        else if (account.rateLimits) {
+            const resetAt = getGlobalCapacityView(account.rateLimits).sevenDay.resetAt;
+            if (resetAt > 0 && (earliest === undefined || resetAt < earliest))
+                earliest = resetAt;
+        }
+    }
+    return earliest;
+}
 /**
  * First visible row of a scrolling list window that follows its selection.
  *
@@ -417,6 +538,27 @@ export function Dashboard({ port, baseUrl, authToken, onIntent }) {
         if (!data && (input === "q" || key.escape))
             exit();
     });
+    // Live Grok plan name / code-access, refreshed on a slow cadence and merged
+    // synchronously into each 2s health poll — so the plan shows without a
+    // /v1/user round-trip every tick. Undefined until the first fetch lands, at
+    // which point `mergeGrokIntoHealth` falls back to its access-token tier.
+    const grokSnapshotsRef = useRef(undefined);
+    useEffect(() => {
+        let cancelled = false;
+        const refresh = async () => {
+            try {
+                const snapshots = await loadGrokHealthSnapshotsWithSubscription();
+                if (!cancelled)
+                    grokSnapshotsRef.current = snapshots;
+            }
+            catch {
+                // Keep the last known snapshots; the poll degrades to the tier fallback.
+            }
+        };
+        refresh();
+        const timer = setInterval(refresh, GROK_SUBSCRIPTION_INTERVAL_MS);
+        return () => { cancelled = true; clearInterval(timer); };
+    }, []);
     useEffect(() => {
         let cancelled = false;
         const healthUrl = `${resolvedBase}/cc-router/health`;
@@ -432,7 +574,7 @@ export function Dashboard({ port, baseUrl, authToken, onIntent }) {
                 if (cancelled)
                     return;
                 if (res.ok) {
-                    setData(await res.json());
+                    setData(mergeGrokIntoHealth(await res.json(), grokSnapshotsRef.current));
                     setConnectError(null);
                     setLastUpdate(Date.now());
                     setRetryCount(0);
@@ -466,13 +608,36 @@ function ErrorScreen({ error, port, retries }) {
 }
 // ─── Live dashboard ───────────────────────────────────────────────────────────
 function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onIntent, }) {
+    const [cliRouting, setCliRouting] = useState(() => ({
+        claude: readClaudeRouting(),
+        codex: readCodexRouting(),
+    }));
+    const refreshCliRouting = useCallback(() => {
+        setCliRouting({
+            claude: readClaudeRouting(),
+            codex: readCodexRouting(),
+        });
+    }, []);
+    useEffect(() => {
+        const timer = setInterval(refreshCliRouting, POLL_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [refreshCliRouting]);
     const { exit } = useApp();
-    const healthyCount = data.accounts.filter(a => a.healthy).length;
-    const updatedAgo = Math.round((Date.now() - lastUpdate) / 1000);
+    const orderedAccounts = orderAccountsForDashboard(data.accounts);
+    const healthyCount = orderedAccounts.filter(a => a.healthy).length;
+    // Fleet-wide weekly-cap rollup surfaced in the always-visible ACCOUNTS title,
+    // so the "N 7d full" signal is legible at a glance even when a provider group
+    // is scrolled out of the account window (or TOTALS is hidden in compact view).
+    const weeklyFullCount = orderedAccounts.filter(isWeeklyLimited).length;
     const logs = data.recentLogs;
     // ── Focus / mode ──────────────────────────────────────────────────────────
     const [focus, setFocus] = useState("logs");
     const [mode, setMode] = useState("view");
+    // Compact ("zen") view: hides TOTALS + RECENT ACTIVITY so the account list
+    // gets the whole vertical budget — the fix for a short terminal starving a
+    // long fleet (e.g. showing 1 of 11 accounts). Toggled with [z], view-only,
+    // never touches the default layout's carefully-tuned fit.
+    const [compact, setCompact] = useState(false);
     // Selected log by timestamp (existing)
     const [selectedTs, setSelectedTs] = useState(null);
     const selectedLogIndex = selectedTs !== null
@@ -497,7 +662,8 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     const [logVisible, setLogVisible] = useState(MIN_LOG_VISIBLE);
     const [accountsVisible, setAccountsVisible] = useState(Number.MAX_SAFE_INTEGER);
     const [modelsVisible, setModelsVisible] = useState(MODEL_VISIBLE_ROWS);
-    const shownAccounts = Math.max(1, Math.min(accountsVisible, data.accounts.length));
+    const [selectedAccountId, setSelectedAccountId] = useState(null);
+    const shownAccounts = Math.max(1, Math.min(accountsVisible, orderedAccounts.length || 1));
     const contentRef = useRef(null);
     const accountRowsRef = useRef(null);
     const logRowsRef = useRef(null);
@@ -523,7 +689,7 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
         // denial, re-enabling the grow/shrink oscillation. Geometry drift from
         // scrolling (like every other content mutation the key cannot see) is
         // covered by the denial TTL instead.
-        const fitKey = `${terminalRows}:${terminalColumns}:${data.accounts.length}:${modelsStatus?.models.length ?? 0}:${logs[0]?.ts ?? 0}`;
+        const fitKey = `${terminalRows}:${terminalColumns}:${orderedAccounts.length}:${modelsStatus?.models.length ?? 0}:${logs[0]?.ts ?? 0}:${compact}`;
         if (fitKeyRef.current !== fitKey) {
             fitKeyRef.current = fitKey;
             fitMemoryRef.current = { attempts: {}, denials: {} };
@@ -550,12 +716,14 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
         // mechanics — each list got its own oscillation bug while the paths were
         // separate (tall accounts, wrapped activity details, wrapped model ids).
         const lists = [
+            // In compact view the activity list is not rendered, so it must not
+            // compete for rows — dropping it here hands the whole budget to accounts.
+            ...(compact ? [] : [{
+                    key: "logs", current: logVisible, min: MIN_LOG_VISIBLE, max: LOG_VISIBLE,
+                    avgRow: shownLogs > 0 ? Math.max(1, logsH / shownLogs) : 1,
+                }]),
             {
-                key: "logs", current: logVisible, min: MIN_LOG_VISIBLE, max: LOG_VISIBLE,
-                avgRow: shownLogs > 0 ? Math.max(1, logsH / shownLogs) : 1,
-            },
-            {
-                key: "accounts", current: shownAccounts, min: 1, max: data.accounts.length, growOne: true,
+                key: "accounts", current: shownAccounts, min: 1, max: Math.max(1, orderedAccounts.length), growOne: true,
                 avgRow: shownAccounts > 0 ? Math.max(1, accountsH / shownAccounts) : 2,
             },
             ...(modelsPanelOpen ? [{
@@ -577,18 +745,16 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     // selected row out of the stored window, and it must stay visible anyway.
     const [logScrollTop, setLogScrollTop] = useState(0);
     const logWindowTop = followScrollWindow(logScrollTop, selectedLogIndex, logs.length, logVisible);
-    // Selected account by id
-    const [selectedAccountId, setSelectedAccountId] = useState(null);
     const selectedAccountIndex = selectedAccountId !== null
-        ? Math.max(0, data.accounts.findIndex(a => a.id === selectedAccountId))
+        ? Math.max(0, orderedAccounts.findIndex(a => a.id === selectedAccountId))
         : 0;
-    const selectedAccount = data.accounts[selectedAccountIndex] ?? null;
+    const selectedAccount = orderedAccounts[selectedAccountIndex] ?? null;
     // Same follow-scroll for the accounts window: when the fitting controller
     // shrinks the list below the fleet size, the selected account must stay on
     // screen — account actions (caps, toggle, delete confirmation) target the
     // selection, and acting on an invisible account is how a wrong one dies.
     const [accountScrollTop, setAccountScrollTop] = useState(0);
-    const accountWindowTop = followScrollWindow(accountScrollTop, selectedAccountIndex, data.accounts.length, shownAccounts);
+    const accountWindowTop = followScrollWindow(accountScrollTop, selectedAccountIndex, orderedAccounts.length, shownAccounts);
     const [modelsStatus, setModelsStatus] = useState(null);
     const [selectedModelId, setSelectedModelId] = useState(null);
     const modelRows = modelsStatus?.models ?? [];
@@ -635,6 +801,10 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     const doToggleEnabled = useCallback(async () => {
         if (!selectedAccount)
             return;
+        if (isXaiAccount(selectedAccount)) {
+            showBanner("Grok is read-only here — use grok login / grok logout", "yellow");
+            return;
+        }
         const newValue = !(selectedAccount.enabled !== false);
         try {
             await api.patch(selectedAccount.id, { enabled: newValue });
@@ -647,8 +817,12 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     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";
+            : provider === "openai_subscription"
+                ? data.operational?.providers.openai
+                : data.operational?.providers.xai;
+        const label = provider === "anthropic_subscription" ? "Claude"
+            : provider === "openai_subscription" ? "OpenAI"
+                : "Grok";
         if (!providerStatus?.configured || providerStatus.accounts === 0) {
             showBanner(`${label} accounts are not configured`, "yellow");
             return;
@@ -698,6 +872,19 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
             showBanner(`Models error: ${errMsg(err)}`, "red");
         }
     }, [modelsApi, showBanner]);
+    const doToggleCli = useCallback((target) => {
+        const current = target === "claude" ? cliRouting.claude.enabled : cliRouting.codex.enabled;
+        const result = target === "claude"
+            ? setClaudeRouting(!current)
+            : setCodexRouting(!current);
+        refreshCliRouting();
+        const label = target === "claude" ? "Claude CLI" : "Codex CLI";
+        if (!result.changed) {
+            showBanner(`${label} already ${result.enabled ? "on" : "off"}`, "gray");
+            return;
+        }
+        showBanner(`${label} → ${result.enabled ? "proxy" : "native"}  (restart the CLI to pick up)`, result.enabled ? "green" : "yellow");
+    }, [cliRouting, refreshCliRouting, showBanner]);
     const doSetSelectedModel = useCallback(async (provider) => {
         if (!selectedModel)
             return;
@@ -784,6 +971,11 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
             return;
         }
         if (key.tab) {
+            // Compact view hides the activity list, so skip "logs" in the cycle.
+            if (compact) {
+                setFocus(f => f === "models" ? "accounts" : "models");
+                return;
+            }
             setFocus(f => f === "logs" ? "accounts" : f === "accounts" ? "models" : "logs");
             return;
         }
@@ -803,13 +995,13 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
         if (focus === "accounts") {
             if (key.upArrow) {
                 const next = Math.max(0, selectedAccountIndex - 1);
-                setSelectedAccountId(data.accounts[next]?.id ?? null);
-                setAccountScrollTop(followScrollWindow(accountWindowTop, next, data.accounts.length, shownAccounts));
+                setSelectedAccountId(orderedAccounts[next]?.id ?? null);
+                setAccountScrollTop(followScrollWindow(accountWindowTop, next, orderedAccounts.length, shownAccounts));
             }
             if (key.downArrow) {
-                const next = Math.min(data.accounts.length - 1, selectedAccountIndex + 1);
-                setSelectedAccountId(data.accounts[next]?.id ?? null);
-                setAccountScrollTop(followScrollWindow(accountWindowTop, next, data.accounts.length, shownAccounts));
+                const next = Math.min(orderedAccounts.length - 1, selectedAccountIndex + 1);
+                setSelectedAccountId(orderedAccounts[next]?.id ?? null);
+                setAccountScrollTop(followScrollWindow(accountWindowTop, next, orderedAccounts.length, shownAccounts));
             }
             // Account actions (only when focus = accounts)
             if (input === "e") {
@@ -824,12 +1016,24 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
                 void doToggleProvider("openai_subscription");
                 return;
             }
+            if (input === "g") {
+                void doToggleProvider("xai_subscription");
+                return;
+            }
             if (input === "w") {
+                if (selectedAccount && isXaiAccount(selectedAccount)) {
+                    showBanner("Grok has no 7d cap in cc-router", "yellow");
+                    return;
+                }
                 setMode("editWeekly");
                 setEditBuffer("");
                 return;
             }
             if (input === "s") {
+                if (selectedAccount && isXaiAccount(selectedAccount)) {
+                    showBanner("Grok has no 5h cap in cc-router", "yellow");
+                    return;
+                }
                 setMode("editSession");
                 setEditBuffer("");
                 return;
@@ -840,6 +1044,10 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
             // the CLI for something the dashboard can do was left over from before
             // that existed.
             if (input === "d") {
+                if (selectedAccount && isXaiAccount(selectedAccount)) {
+                    showBanner("Grok accounts live in ~/.grok — run grok logout", "yellow");
+                    return;
+                }
                 setMode("confirmDelete");
                 return;
             }
@@ -866,10 +1074,30 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
                 return;
             }
         }
+        // CLI routing toggles — [c] is model-default only while MODELS is focused.
+        if (input === "c" && focus !== "models") {
+            doToggleCli("claude");
+            return;
+        }
+        if (input === "x") {
+            doToggleCli("codex");
+            return;
+        }
         if (input === "m") {
             void doLoadModels();
             return;
         }
+        // z = compact view — hide TOTALS + RECENT ACTIVITY so the account list
+        // gets the freed rows. On small terminals this is the difference between
+        // "showing 1–1" and the full fleet. Move focus off the (now hidden) logs.
+        if (input === "z") {
+            const next = !compact;
+            setCompact(next);
+            if (next && focus === "logs")
+                setFocus("accounts");
+            showBanner(next ? "Compact on — activity & totals hidden" : "Compact off", "cyan");
+            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.
@@ -883,23 +1111,26 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     });
     const selectedLog = logs[selectedLogIndex] ?? null;
     const visibleLogs = logs.slice(logWindowTop, logWindowTop + logVisible);
-    return (_jsx(Box, { flexDirection: "column", height: frameBound, overflowY: "hidden", children: _jsxs(Box, { flexDirection: "column", flexShrink: 0, ref: contentRef, children: [_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"] })] }), mode === "editWeekly" && selectedAccount && (_jsxs(Box, { 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, { 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, { paddingLeft: 2, children: _jsxs(Text, { color: "red", bold: true, children: ["Delete \"", selectedAccount.id, "\"?  [y] yes  [n/Esc] cancel"] }) })), data.version !== DASHBOARD_VERSION && (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "yellow", children: " \u26A0 VERSION MISMATCH  " }), _jsxs(Text, { color: "yellow", children: [data.version !== undefined
+    return (_jsx(Box, { flexDirection: "column", height: frameBound, overflowY: "hidden", children: _jsxs(Box, { flexDirection: "column", flexShrink: 0, ref: contentRef, children: [_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 }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsxs(Text, { children: ["up ", formatUptime(data.uptime)] }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { color: "cyan", children: data.totalRequests }), _jsx(Text, { color: "gray", children: " req  " }), _jsx(Text, { color: data.totalErrors > 0 ? "red" : "green", children: data.totalErrors }), _jsx(Text, { color: "gray", children: " err" }), _jsx(CacheHealthBadge, { read: data.totalCacheReadTokens, created: data.totalCacheCreationTokens, input: data.totalInputTokens }), _jsx(Text, { color: "gray", children: "  \u00B7  [q] quit" })] }), mode === "editWeekly" && selectedAccount && (_jsxs(Box, { 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, { 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, { paddingLeft: 2, children: _jsxs(Text, { color: "red", bold: true, children: ["Delete \"", selectedAccount.id, "\"?  [y] yes  [n/Esc] cancel"] }) })), data.version !== DASHBOARD_VERSION && (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "yellow", children: " \u26A0 VERSION MISMATCH  " }), _jsxs(Text, { color: "yellow", children: [data.version !== undefined
                                             ? `daemon v${data.version}`
                                             : "daemon version unreported (older build)", ` · dashboard v${DASHBOARD_VERSION}`] }), LOCAL_TARGET_RE.test(baseUrl) ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "  \u2014  restart: " }), _jsx(Text, { color: "cyan", children: "cc-router stop --keep-config && cc-router start" })] })) : (
                                 // A remote router can only be restarted where it runs; printing a
                                 // local restart command here would never clear the banner.
-                                _jsxs(Text, { color: "gray", children: ["  \u2014  update and restart the daemon on ", baseUrl] }))] })), _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", visibleRows: modelsVisible, rowsRef: modelRowsRef }), _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"] })] }), shownAccounts < data.accounts.length && (_jsxs(Text, { color: "gray", children: ["  ·  showing ", accountWindowTop + 1, "\u2013", accountWindowTop + shownAccounts] })), _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", ref: accountRowsRef, children: data.accounts.slice(accountWindowTop, accountWindowTop + shownAccounts).map((a, i) => (_jsx(AccountRow, { account: a, selected: focus === "accounts" && accountWindowTop + i === selectedAccountIndex }, a.id))) })] }), 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 }), _jsx(Text, { bold: true, children: " RECENT ACTIVITY" }), _jsx(Box, { marginTop: 1 })] }), _jsx(Box, { flexDirection: "column", ref: logRowsRef, children: visibleLogs.length === 0
+                                _jsxs(Text, { color: "gray", children: ["  \u2014  update and restart the daemon on ", baseUrl] }))] })), _jsx(Box, { marginTop: 1 }), data.operational && (_jsxs(_Fragment, { children: [_jsx(OperationsPanel, { operational: data.operational, baseUrl: baseUrl, focus: focus, cliRouting: cliRouting }), _jsx(Box, { marginTop: 1 })] })), (focus === "models" || modelsStatus) && (_jsxs(_Fragment, { children: [_jsx(ModelsPanel, { status: modelsStatus, selectedIndex: selectedModelIndex, focused: focus === "models", visibleRows: modelsVisible, rowsRef: modelRowsRef }), _jsx(Box, { marginTop: 1 })] })), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, children: [" ACCOUNTS  ", _jsxs(Text, { color: healthyCount === orderedAccounts.length ? "green" : "yellow", children: [healthyCount, "/", orderedAccounts.length, " healthy"] }), weeklyFullCount > 0 && _jsx(Text, { color: "red", children: `  ·  ${weeklyFullCount} 7d full` })] }), shownAccounts < orderedAccounts.length && (_jsxs(Text, { color: "gray", children: ["  ·  showing ", accountWindowTop + 1, "\u2013", accountWindowTop + shownAccounts] })), compact && _jsx(Text, { color: "cyan", children: "  ·  compact" })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", ref: accountRowsRef, children: _jsx(AccountGroups, { visible: orderedAccounts.slice(accountWindowTop, accountWindowTop + shownAccounts), fleet: orderedAccounts, windowTop: accountWindowTop, selectedIndex: selectedAccountIndex, focused: focus === "accounts" }) })] }), banner && (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsxs(Text, { color: banner.color, children: [" ", banner.text] }) })), !compact && (_jsxs(_Fragment, { children: [_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 }), _jsx(Text, { bold: true, children: " RECENT ACTIVITY" }), _jsx(Box, { marginTop: 1 })] }))] }), !compact && (_jsx(Box, { flexDirection: "column", ref: logRowsRef, children: visibleLogs.length === 0
                         ? _jsx(Text, { color: "gray", children: "  No activity yet" })
-                        : visibleLogs.map((log, i) => (_jsx(LogRow, { log: log, selected: focus === "logs" && logWindowTop + i === selectedLogIndex }, `${log.ts}-${i}`))) }), focus === "logs" && selectedLog && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginTop: 1 }), _jsx(DetailPanel, { log: selectedLog })] }))] }) }));
+                        : visibleLogs.map((log, i) => (_jsx(LogRow, { log: log, selected: focus === "logs" && logWindowTop + i === selectedLogIndex }, `${log.ts}-${i}`))) })), !compact && focus === "logs" && selectedLog && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginTop: 1 }), _jsx(DetailPanel, { log: selectedLog })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: focus === "accounts"
+                            ? " [Tab]  [e] toggle  [a]/[o]/[g] provider  [n] add  [d] delete  [w] 7d  [s] 5h  [z] compact  [q]"
+                            : focus === "models"
+                                ? " [Tab]  [m/r] refresh  [c]/[o] default  [Esc] logs  [z] compact  [q]"
+                                : " [Tab]  [m] models  [z] compact  [q] quit" }) })] }) }));
 }
-function OperationsPanel({ operational, baseUrl, focus }) {
+function OperationsPanel({ operational, baseUrl, focus, cliRouting }) {
     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" })] })] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: " OPERATIONS  " }), _jsx(Text, { color: "cyan", children: baseUrl.replace(/^https?:\/\//, "") }), _jsx(Text, { color: "gray", children: "  \u00B7  auth " }), _jsx(Text, { color: authColor, children: authLabel }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(ProviderBadge, { label: "Claude", status: operational.providers.anthropic, ready: claudeReady }), _jsx(Text, { color: "gray", children: "  " }), _jsx(ProviderBadge, { label: "ChatGPT", status: operational.providers.openai, ready: openAIReady }), _jsx(Text, { color: "gray", children: "  " }), _jsx(ProviderBadge, { label: "Grok", status: operational.providers.xai ?? { configured: false, accounts: 0, healthy: 0, enabled: 0 }, ready: (operational.providers.xai?.healthy ?? 0) > 0 }), crossReady && _jsx(Text, { color: "gray", children: "  \u00B7  cross-route" }), _jsx(Text, { color: "gray", children: "  \u00B7  cli " }), _jsx(Text, { color: cliRouting.claude.enabled ? "green" : "gray", children: "C" }), _jsx(Text, { color: "gray", children: "/" }), _jsx(Text, { color: cliRouting.codex.enabled ? "green" : "gray", children: "X" }), _jsx(Text, { color: focus === "models" ? "gray" : "cyan", children: " [c]/[x]" }), _jsx(Text, { color: "gray", children: "  \u00B7  " }), _jsx(Text, { color: focus === "models" ? "white" : "cyan", children: "[m]" })] }));
 }
 function ModelsPanel({ status, selectedIndex, focused, visibleRows = MODEL_VISIBLE_ROWS, rowsRef, }) {
     const models = status?.models ?? [];
@@ -935,66 +1166,134 @@ function ModelRow({ model, selected, currentClaude, currentOpenAI, }) {
 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`;
+        ? `${label} ${status.healthy}/${status.accounts}`
+        : `${label} off`;
     return _jsx(Text, { color: color, children: text });
 }
-// ─── Account row (two-line: status + utilization bars) ───────────────────────
+function AccountGroups({ visible, fleet, windowTop, selectedIndex, focused, }) {
+    const claudeVisible = visible.filter(isClaudeAccount);
+    const chatgptVisible = visible.filter(isOpenAIAccount);
+    const grokVisible = visible.filter(isXaiAccount);
+    const claudeFleet = fleet.filter(isClaudeAccount);
+    const chatgptFleet = fleet.filter(isOpenAIAccount);
+    const grokFleet = fleet.filter(isXaiAccount);
+    if (visible.length === 0) {
+        return _jsx(Text, { color: "gray", children: "  No accounts" });
+    }
+    const renderRows = (accounts, offsetInVisible) => accounts.map((account, i) => (_jsx(AccountRow, { account: account, selected: focused && windowTop + offsetInVisible + i === selectedIndex }, account.id)));
+    // Render a group whenever its provider has ANY account — even when the scroll
+    // window currently shows none of its rows. A fully-clipped group still emits
+    // its header + count so a tail provider (e.g. a single Grok account behind
+    // many Claude/ChatGPT ones on a short terminal) never vanishes without a
+    // trace. `offset` advances by VISIBLE rows only, so selection indexing is
+    // unaffected by header-only groups.
+    const groups = [];
+    let offset = 0;
+    if (claudeFleet.length > 0) {
+        groups.push({ key: "CLAUDE", visible: claudeVisible, fleet: claudeFleet, offset });
+        offset += claudeVisible.length;
+    }
+    if (chatgptFleet.length > 0) {
+        groups.push({ key: "CHATGPT", visible: chatgptVisible, fleet: chatgptFleet, offset });
+        offset += chatgptVisible.length;
+    }
+    if (grokFleet.length > 0) {
+        groups.push({ key: "GROK", visible: grokVisible, fleet: grokFleet, offset });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: groups.map((group, index) => (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsx(GroupHeader, { label: group.key, accounts: group.fleet }), group.visible.length > 0 && _jsx(ColumnLegend, {}), renderRows(group.visible, group.offset)] }, group.key))) }));
+}
+function GroupHeader({ label, accounts }) {
+    const healthy = accounts.filter(account => account.healthy).length;
+    const weeklyFull = accounts.filter(isWeeklyLimited);
+    const color = healthy === accounts.length && weeklyFull.length === 0 ? "green" : "yellow";
+    const fableHint = label === "CLAUDE" ? exhaustedModelHint(accounts) : undefined;
+    // Grok has no usage windows, so surface its plan ("GrokPro") in the header —
+    // this is the one signal a clipped-out Grok row would otherwise hide.
+    const grokPlan = label === "GROK" && accounts[0] ? grokQuotaNote(accounts[0]) : undefined;
+    return (_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: "gray", children: [" ", label, "  "] }), _jsxs(Text, { color: color, children: [healthy, "/", accounts.length, " ok"] }), weeklyFull.length > 0 && _jsx(Text, { color: "red", children: `  ·  ${weeklyFull.length} 7d full` }), fableHint && _jsx(Text, { color: "red", children: `  ·  ${fableHint}` }), grokPlan && _jsx(Text, { color: "gray", children: `  ·  ${grokPlan}` })] }));
+}
+const COL = {
+    name: 22,
+    req: 5,
+    sess: 6,
+    pct: 4,
+    note: 22,
+    reset: 8,
+    rst: 5,
+};
+function ColumnLegend() {
+    return (_jsx(Text, { color: "gray", children: `  ${"".padEnd(COL.name)} ${"req".padStart(COL.req)}${"s·n".padStart(COL.sess)}  ${"5h".padStart(COL.pct)} ${"7d".padStart(COL.pct)}  ${"note".padEnd(COL.note)} ${"↻5h".padEnd(COL.reset)} ${"↻7d".padEnd(COL.reset)} ${"rst".padStart(COL.rst)}` }));
+}
+function exhaustedModelHint(accounts) {
+    const hits = [];
+    for (const account of accounts) {
+        for (const row of getAccountCapacityRows(account)) {
+            if ((row.utilization ?? 0) < 1 || row.color !== "red")
+                continue;
+            hits.push(`${row.label} full`);
+        }
+    }
+    return hits[0];
+}
+// ─── Account row (one aligned line, no bars) ─────────────────────────────────
 function AccountRow({ account: a, selected }) {
     const rl = a.rateLimits ?? EMPTY_RL;
     const usage = rl.usage;
     const globalCapacity = getGlobalCapacityView(rl);
-    const isOpenAI = a.provider === "openai_subscription";
-    const codex = a.codexRateLimits;
-    const codexDefaultWindows = getCodexDefaultWindows(codex);
-    const capacityRows = isOpenAI
-        ? getCodexCapacityRows(a.codexRateLimits, a.globalCooldownUntilMs)
-        : getAccountCapacityRows(a);
-    const isLimited = isOpenAI ? isCodexLimited(a.codexRateLimits) : rl.status === "rate_limited";
+    const isOpenAI = isOpenAIAccount(a);
+    const isXai = isXaiAccount(a);
+    const isLimited = isLimitedAccount(a);
     const isDisabled = a.enabled === false;
+    const modelNote = isOpenAI || isXai ? undefined : noteModelLimit(a);
+    const extraCap = usage?.extraUsage;
+    const extraOff = extraCap !== undefined && extraCap.usable !== true
+        && (extraCap.spendLimitReached
+            || (modelNote !== undefined && modelNote.utilization >= 1 && extraCap.enabled === false));
+    const gapNote = openaiQuotaGapNote(a);
+    const grokNote = grokQuotaNote(a);
+    const note = [
+        modelNote
+            ? `${modelNote.label} ${Math.round(modelNote.utilization * 100)}%`
+            : "",
+        extraOff ? "extra off" : "",
+        gapNote ?? "",
+        grokNote ?? "",
+    ].filter(Boolean).join(" · ");
+    const codexWindows = getCodexDefaultWindows(a.codexRateLimits);
+    const sessionWindow = codexWindows.find(window => window.kind === "session");
+    const weeklyWindow = codexWindows.find(window => window.kind === "weekly");
+    const hasClaudeQuota = !isOpenAI && !isXai && (rl.lastUpdated > 0 || usage);
+    const fiveHour = isOpenAI
+        ? sessionWindow
+        : hasClaudeQuota ? globalCapacity.fiveHour : undefined;
+    const sevenDay = isOpenAI
+        ? weeklyWindow
+        : hasClaudeQuota ? globalCapacity.sevenDay : undefined;
+    const creditsLabel = resetCreditsColumnLabel(a);
     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 = isOpenAI
-        ? ` [OpenAI${codex?.plan ? ` ${codex.plan}` : ""}]`
-        : 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;
-    const creditsLabel = codex?.credits
-        ? codex.credits.unlimited
-            ? "∞"
-            : codex.credits.balance !== undefined
-                ? codex.credits.balance
-                : codex.credits.hasCredits ? "yes" : "no"
-        : 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(21) }), _jsx(Text, { color: statusColor, children: statusLabel }), providerTag && _jsx(Text, { color: isOpenAI ? "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) }), _jsxs(Text, { color: "gray", children: ["  ", a.activeSessions ?? 0, " active / ", a.inFlightRequests ?? 0, " streams"] }), capsHint && _jsx(Text, { color: "yellow", children: capsHint }), a.credentialsPendingWrite && (
-                    // The account still works — its rotated token is live in memory — but a
-                    // restart before the pending write lands would need a re-login.
-                    _jsx(Text, { color: "yellow", children: "  creds unsaved" }))] }), (rl.lastUpdated > 0 || usage) && (_jsxs(Box, { paddingLeft: 4, children: [_jsx(UtilBar, { label: "5h", util: globalCapacity.fiveHour.utilization, resetTs: globalCapacity.fiveHour.resetAt, isActive: rl.claim === "five_hour", cap: s5 }), _jsx(Text, { children: "   " }), _jsx(UtilBar, { label: "7d all-model", util: globalCapacity.sevenDay.utilization, resetTs: globalCapacity.sevenDay.resetAt, isActive: rl.claim === "seven_day", cap: w7 }), usage && _jsx(Text, { color: globalCapacity.usageFetchStatus === "fresh" ? "gray" : "yellow", children: `  usage ${globalCapacity.usageFetchStatus} ${usage.fetchedAt > 0 ? formatAgo(usage.fetchedAt) : ""}` })] })), isOpenAI && codexDefaultWindows.length > 0 && (_jsxs(Box, { paddingLeft: 4, children: [codexDefaultWindows.map((window, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { children: "   " }), _jsx(UtilBar, { label: window.label, util: window.utilization, resetTs: window.resetAt, isActive: false, cap: window.kind === "weekly" ? w7 : s5 })] }, window.label))), creditsLabel !== undefined && _jsx(Text, { color: "gray", children: `  credits ${creditsLabel}` })] })), capacityRows.map((row, index) => (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: row.color, children: [" ", row.label] }), _jsxs(Text, { color: "gray", children: [" \u00B7 ", row.state] }), row.utilization !== undefined && _jsx(Text, { color: row.color, children: ` ${Math.round(row.utilization * 100)}%` }), row.resetAt !== undefined && row.resetAt > 0 && (_jsxs(Text, { color: "gray", children: [" ", `↻${formatResetIn(row.resetAt)}`] }))] }, `${row.label}-${index}`)))] }));
+    const sessions = a.activeSessions ?? 0;
+    const inflight = a.inFlightRequests ?? 0;
+    const load = sessions <= 0 && inflight <= 0
+        ? ""
+        : inflight > 0
+            ? `${sessions}·${inflight}`
+            : String(sessions);
+    return (_jsxs(Box, { children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶" : " " }), _jsx(Text, { color: dotColor, children: dot }), _jsx(Text, { color: selected ? "white" : isDisabled ? "gray" : undefined, dimColor: isDisabled, children: ` ${a.id.slice(0, COL.name).padEnd(COL.name)}` }), _jsx(Text, { color: "white", children: String(a.requestCount).padStart(COL.req) }), _jsx(Text, { color: "gray", children: load.padStart(COL.sess) }), _jsx(Text, { children: "  " }), _jsx(QuotaCell, { util: fiveHour?.utilization }), _jsx(Text, { children: " " }), _jsx(QuotaCell, { util: sevenDay?.utilization }), _jsx(Text, { color: extraOff || gapNote ? "yellow" : modelNote?.color ?? "gray", children: `  ${note.padEnd(COL.note)}` }), _jsx(Text, { children: " " }), _jsx(ResetCell, { resetTs: fiveHour?.resetAt }), _jsx(Text, { children: " " }), _jsx(ResetCell, { resetTs: sevenDay?.resetAt }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: creditsLabel.padStart(COL.rst) }), a.credentialsPendingWrite && _jsx(Text, { color: "yellow", children: "  unsaved" })] }));
 }
-// ─── Utilization bar ─────────────────────────────────────────────────────────
-function UtilBar({ label, util, resetTs, isActive, cap }) {
+function QuotaCell({ util }) {
+    if (util === undefined) {
+        return _jsx(Text, { color: "gray", children: "—".padStart(COL.pct) });
+    }
     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] })] }));
+    const color = pct >= 90 ? "red" : pct >= 70 ? "yellow" : "green";
+    return _jsx(Text, { color: color, children: `${pct}%`.padStart(COL.pct) });
+}
+function ResetCell({ resetTs }) {
+    if (!resetTs || resetTs <= 0) {
+        return _jsx(Text, { color: "gray", children: "—".padEnd(COL.reset) });
+    }
+    return _jsx(Text, { color: "gray", children: `↻${formatResetIn(resetTs)}`.padEnd(COL.reset) });
 }
 function formatResetIn(unixSeconds) {
     const diff = unixSeconds - Date.now() / 1000;
@@ -1047,28 +1346,21 @@ function LogRow({ log, selected }) {
 }
 // ─── 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 time = new Date(log.ts).toLocaleTimeString("en-GB", { hour12: false });
     const isError = log.type === "error";
     const isWarn = log.type === "warn";
-    const statusLabel = log.statusCode === undefined ? "—"
+    const statusLabel = log.statusCode === undefined ? ""
         : log.statusCode === 0 ? "connection error"
-            : `${log.statusCode} ${httpStatusText(log.statusCode)}`;
+            : String(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" : isWarn ? "yellow" : "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 })] }));
+    const inputTok = (log.cacheReadTokens ?? 0) + (log.cacheCreationTokens ?? 0) + (log.inputTokens ?? 0);
+    const outputTok = log.outputTokens ?? 0;
+    const hitPct = inputTok > 0 ? Math.round(((log.cacheReadTokens ?? 0) / inputTok) * 100) : null;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, color: isError ? "red" : isWarn ? "yellow" : "cyan", children: " DETAILS " }), _jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [time, "  ", log.accountId] }), log.method && log.path && _jsx(Text, { color: "white", children: `  ${log.method} ${log.path}` }), statusLabel !== "" && _jsx(Text, { color: statusColor, children: `  ${statusLabel}` }), log.durationMs !== undefined && _jsx(Text, { color: "gray", children: `  ${log.durationMs}ms` }), _jsx(Text, { color: "gray", children: `  ${sourceFullLabel(log.source)}` }), log.details && _jsx(Text, { color: "gray", children: `  ${log.details}` })] }), (inputTok > 0 || outputTok > 0) && (_jsxs(Text, { color: "gray", children: [`${fmtTok(inputTok)} in · ${fmtTok(outputTok)} out`, hitPct !== null ? ` · cache ${hitPct}%` : ""] }))] }));
 }
 // ─── Cache health badge (aggregated) ─────────────────────────────────────────
 function CacheHealthBadge({ read, created, input }) {
@@ -1080,13 +1372,6 @@ function CacheHealthBadge({ read, created, input }) {
     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;
@@ -1114,17 +1399,6 @@ function sourceFullLabel(source) {
         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);
@@ -1136,18 +1410,3 @@ function formatUptime(seconds) {
         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`;
-}