@timo972/cc-router 0.10.0-rc.5 → 0.10.0

package/CHANGELOG.md

@@ -55,6 +55,17 @@ This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- The dashboard fits the terminal. The frame had a fixed shape — 20 activity
+  rows, a detail panel, and every account expanded — which with a real fleet
+  of accounts rendered ~70 lines. Ink can only erase as many lines as the
+  viewport holds, so on any shorter terminal every 2-second poll re-appended
+  the frame and scrolled the header and OPERATIONS panel permanently out of
+  view (the "jumps back down" effect, especially in split panes). The layout
+  is now height-aware: the activity list absorbs the deficit first (down to 3
+  rows), and if the chrome alone still exceeds the viewport the frame is
+  clipped at the bottom — the header always wins over the detail panel. The
+  fit tracks terminal resizes.
+
 - Anthropic activity rows show their cache rate and token counts. The proxy
   captures usage by passively parsing the response body, but skipped any
   compressed response — and since the proxy is byte-transparent, the client's

package/dist/ui/Dashboard.js

@@ -1,11 +1,21 @@
 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 { 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";
 const POLL_INTERVAL_MS = 2_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
+ *  taller than the terminal makes every poll re-append it — scrolling the
+ *  header and OPERATIONS panel permanently out of view. */
 const LOG_VISIBLE = 20;
+const MIN_LOG_VISIBLE = 3;
+/** The model window may shrink to a single row: it follows its selection, so
+ *  one visible row IS the selected row — while a larger minimum rendered
+ *  rows below the clip that the selection could land on invisibly. */
+const MIN_MODELS_VISIBLE = 1;
 const MODEL_VISIBLE_ROWS = 16;
 const DASHBOARD_VERSION = getCurrentVersion();
 // Distinguishes "this machine's daemon" (restartable from this shell) from a
@@ -231,6 +241,166 @@ export function followScrollWindow(scrollTop, selectedIndex, total, visible) {
         top = selectedIndex - visible + 1;
     return Math.min(Math.max(0, top), maxTop);
 }
+/**
+ * How long a denied growth stays denied. A denial is measured against
+ * concrete rendered row heights, and those can change through ordinary data
+ * updates the reset key cannot enumerate (an account gaining or losing
+ * capacity rows, a scrolled window showing different entries). Expiry is the
+ * general cure: a stale denial costs at most one clipped grow/shrink pair
+ * per TTL — invisible under the frame bound — instead of a list that stays
+ * collapsed until an unrelated resize.
+ */
+export const FIT_DENIAL_TTL_MS = 2_500;
+/**
+ * One reallocation step for the height-fitting controller. `excess` is the
+ * measured content height minus the viewport budget: positive shrinks lists
+ * in array order until covered; negative (slack) grows exactly ONE list —
+ * the last eligible in the array — so a single mispredicted growth can be
+ * attributed, denied, and refined rather than compounding.
+ *
+ * Denial rule: a growth whose commit overflows is remembered with the slack
+ * it actually needs (the slack it had plus the overflow it caused) and is
+ * not retried below that; the next attempt steps DOWN from the denied
+ * target. Targets only ever decrease under denial, so refinement
+ * terminates. Callers reset the memory whenever row heights may have
+ * changed (viewport, fleet, or data identity).
+ */
+export function planViewportFit(excess, lists, memory, now = 0) {
+    const targets = {};
+    // An expired denial stops CLAMPING but is not forgotten: its retry count
+    // must survive the lapse, or the escalating backoff restarts at the base
+    // TTL on every re-denial and a permanently tall hidden row gets probed
+    // every few seconds forever. The record is deleted only when a retried
+    // growth finally fits (geometry improved) or the caller resets the memory.
+    const activeDenial = (key) => {
+        const denied = memory.denials[key];
+        return denied && (denied.expiresAt === undefined || denied.expiresAt > now) ? denied : undefined;
+    };
+    if (excess > 0) {
+        for (const list of lists) {
+            const attempt = memory.attempts[list.key];
+            if (attempt && attempt.to === list.current) {
+                // Re-denials escalate the TTL (capped at a minute): a hidden row that
+                // stays tall would otherwise be probed every TTL forever, while one
+                // that changed shape is picked up on the next expiry. The count
+                // continues from ANY prior denial of this list — including a lapsed
+                // one, and regardless of the target (the frontier is monotone while
+                // active, so a different target means a lapse happened in between).
+                const count = (memory.denials[list.key]?.count ?? 0) + 1;
+                memory.denials[list.key] = {
+                    to: attempt.to,
+                    slack: attempt.slack + excess,
+                    count,
+                    expiresAt: now + Math.min(60_000, FIT_DENIAL_TTL_MS * 2 ** (count - 1)),
+                };
+            }
+            delete memory.attempts[list.key];
+        }
+        let remaining = excess;
+        for (const list of lists) {
+            if (remaining <= 0)
+                break;
+            const drop = Math.min(list.current - list.min, Math.ceil(remaining / list.avgRow));
+            if (drop > 0) {
+                targets[list.key] = list.current - drop;
+                remaining = Math.max(0, remaining - drop * list.avgRow);
+            }
+        }
+        return targets;
+    }
+    for (const list of lists) {
+        // A standing attempt in the fitting branch means last commit's growth
+        // fit. That disproves a denial only when the growth reached the denied
+        // target — a smaller growth fitting says nothing about the larger one,
+        // and resetting on it would let the denied target be retried in a loop.
+        const attempt = memory.attempts[list.key];
+        const denied = memory.denials[list.key];
+        if (attempt && denied && attempt.to >= denied.to)
+            delete memory.denials[list.key];
+        delete memory.attempts[list.key];
+    }
+    const slack = -excess;
+    for (let i = lists.length - 1; i >= 0; i--) {
+        const list = lists[i];
+        if (list.current >= list.max)
+            continue;
+        // The slack alone may not cover this list's growth gate after a
+        // lower-priority list absorbed it (e.g. logs grew while an account
+        // growth was denied). A higher-priority growth may RECLAIM budget by
+        // shrinking lower-priority lists in the same step — without this, an
+        // expired denial finds no slack left and the list stays collapsed.
+        const unitCost = Math.max(1, Math.ceil(list.avgRow));
+        const gate = list.growOne ? unitCost + 1 : 2;
+        let usable = slack;
+        const funding = [];
+        if (usable < gate) {
+            if (i === 0)
+                continue; // no lower-priority lists to fund from — the gate stands
+            // Fund one row's ACTUAL cost, not the gate: the +1 hysteresis margin
+            // applies only to free-slack growth — a funded growth is protected
+            // from flapping by the denial memory, and demanding the margin here
+            // made a growth permanently unfundable when lower-priority lists
+            // could yield exactly the row's height and nothing more.
+            let deficit = unitCost - usable;
+            for (let j = 0; j < i && deficit > 0; j++) {
+                const funder = lists[j];
+                const dropMax = funder.current - funder.min;
+                if (dropMax <= 0)
+                    continue;
+                const drop = Math.min(dropMax, Math.ceil(deficit / funder.avgRow));
+                funding.push({ key: funder.key, to: funder.current - drop });
+                deficit -= drop * funder.avgRow;
+            }
+            if (deficit > 0)
+                continue; // cannot fund this growth — try lower priority
+            usable = Math.max(usable, unitCost);
+        }
+        let target = list.growOne
+            ? list.current + 1
+            : Math.min(list.max, list.current + Math.max(1, Math.floor((usable - 1) / list.avgRow)));
+        const denied = activeDenial(list.key);
+        if (denied && usable < denied.slack)
+            target = Math.min(target, denied.to - 1);
+        if (target <= list.current)
+            continue; // denied or no room — funding is discarded
+        for (const fund of funding)
+            targets[fund.key] = fund.to;
+        memory.attempts[list.key] = { to: target, slack: usable };
+        targets[list.key] = target;
+        break;
+    }
+    return targets;
+}
+/**
+ * Current terminal size, tracking resizes. rows/columns are 0 when unknown.
+ *
+ * Columns matter even where only rows is consumed: a width-only resize
+ * re-wraps text and changes the RENDERED height without changing the row
+ * count, and the fitting effect only runs on a React commit. Bailing out
+ * when rows is unchanged would leave the freshly wrapped, taller frame
+ * unmeasured until the next poll — reintroducing the scroll jump this hook
+ * exists to prevent.
+ */
+function useTerminalViewport() {
+    const { stdout } = useStdout();
+    const [viewport, setViewport] = useState({
+        rows: stdout?.rows ?? 0,
+        columns: stdout?.columns ?? 0,
+    });
+    useEffect(() => {
+        if (!stdout)
+            return;
+        const onResize = () => setViewport(prev => {
+            const rows = stdout.rows ?? 0;
+            const columns = stdout.columns ?? 0;
+            return prev.rows === rows && prev.columns === columns ? prev : { rows, columns };
+        });
+        stdout.on("resize", onResize);
+        onResize();
+        return () => { stdout.off("resize", onResize); };
+    }, [stdout]);
+    return viewport;
+}
 export function Dashboard({ port, baseUrl, authToken, onIntent }) {
     const { exit } = useApp();
     const [data, setData] = useState(null);
@@ -308,18 +478,117 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
     const selectedLogIndex = selectedTs !== null
         ? Math.max(0, logs.findIndex(l => l.ts === selectedTs))
         : 0;
+    // ── Viewport fitting ──────────────────────────────────────────────────────
+    // The frame must fit the terminal or Ink cannot erase it between polls (see
+    // LOG_VISIBLE above). Two mechanisms cooperate:
+    //
+    // 1. A HARD bound applied synchronously from the terminal height on the
+    //    outer box — every commit is clipped at the bottom, so no settling
+    //    step, resize, or content growth can ever emit an oversized frame.
+    //    (One row of slack: a frame of exactly `rows` lines still scrolls by
+    //    one when the cursor advances past the last line.)
+    // 2. A post-render controller that measures the natural content height and
+    //    reallocates the two windowed lists so the clip normally has nothing to
+    //    cut: the activity list shrinks first (to MIN_LOG_VISIBLE), then the
+    //    accounts window (to one account). Growth is stepped and hysteretic so
+    //    variable-height rows cannot oscillate the layout.
+    const { rows: terminalRows, columns: terminalColumns } = useTerminalViewport();
+    const frameBound = terminalRows > 0 ? terminalRows - 1 : undefined;
+    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 contentRef = useRef(null);
+    const accountRowsRef = useRef(null);
+    const logRowsRef = useRef(null);
+    const modelRowsRef = useRef(null);
+    // Growing the accounts window estimates the NEXT (hidden, unmeasurable)
+    // row's height from the average of the visible ones. When that account is
+    // much taller than average, the growth overflows and is removed again —
+    // and without memory the same growth is retried every commit, forever
+    // (hundreds of repaints per second). A denied growth is remembered with
+    // the slack it would actually need (the slack it had plus the overflow it
+    // caused) and not retried below that; the memory resets when the
+    // viewport or the fleet changes, since either can change row heights.
+    const fitMemoryRef = useRef({ attempts: {}, denials: {} });
+    const fitKeyRef = useRef("");
+    useEffect(() => {
+        // Denials are measured against concrete row heights, so the memory
+        // resets whenever those visibly change: viewport size, fleet size, model
+        // count, or the newest activity entry (new rows wrap differently).
+        // Deliberately NOT part of the key: the window offsets. They derive from
+        // the visible counts, so with a selection at the end of a list a
+        // controller-driven grow/shrink shifts them — keying on them wiped the
+        // pending attempt on the very commit that should have recorded the
+        // 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}`;
+        if (fitKeyRef.current !== fitKey) {
+            fitKeyRef.current = fitKey;
+            fitMemoryRef.current = { attempts: {}, denials: {} };
+        }
+        if (frameBound === undefined) {
+            if (logVisible !== LOG_VISIBLE)
+                setLogVisible(LOG_VISIBLE);
+            if (accountsVisible !== Number.MAX_SAFE_INTEGER)
+                setAccountsVisible(Number.MAX_SAFE_INTEGER);
+            if (modelsVisible !== MODEL_VISIBLE_ROWS)
+                setModelsVisible(MODEL_VISIBLE_ROWS);
+            return;
+        }
+        const modelsPanelOpen = focus === "models" || modelsStatus !== null;
+        const contentH = contentRef.current ? measureElement(contentRef.current).height : 0;
+        const accountsH = accountRowsRef.current ? measureElement(accountRowsRef.current).height : 0;
+        const logsH = logRowsRef.current ? measureElement(logRowsRef.current).height : 0;
+        const modelsH = modelRowsRef.current ? measureElement(modelRowsRef.current).height : 0;
+        const shownLogs = Math.min(logVisible, logs.length);
+        const shownModels = Math.min(modelsVisible, modelsStatus?.models.length ?? 0);
+        // Shrink priority order; growth walks it in reverse, so the models panel
+        // (the active surface while open) regrows first and the activity list
+        // last. Every list goes through the same measured-average + denial
+        // mechanics — each list got its own oscillation bug while the paths were
+        // separate (tall accounts, wrapped activity details, wrapped model ids).
+        const lists = [
+            {
+                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,
+                avgRow: shownAccounts > 0 ? Math.max(1, accountsH / shownAccounts) : 2,
+            },
+            ...(modelsPanelOpen ? [{
+                    key: "models", current: modelsVisible, min: MIN_MODELS_VISIBLE, max: MODEL_VISIBLE_ROWS,
+                    avgRow: shownModels > 0 ? Math.max(1, modelsH / shownModels) : 1,
+                }] : []),
+        ];
+        const targets = planViewportFit(contentH - frameBound, lists, fitMemoryRef.current, Date.now());
+        if (targets["logs"] !== undefined)
+            setLogVisible(targets["logs"]);
+        if (targets["accounts"] !== undefined)
+            setAccountsVisible(targets["accounts"]);
+        if (targets["models"] !== undefined)
+            setModelsVisible(targets["models"]);
+    });
     // First visible activity row. The stored position only moves on navigation;
     // the derived value re-clamps every render because the selection is
     // timestamp-anchored — new entries arriving between keypresses can push the
     // 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, LOG_VISIBLE);
+    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))
         : 0;
     const selectedAccount = data.accounts[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 [modelsStatus, setModelsStatus] = useState(null);
     const [selectedModelId, setSelectedModelId] = useState(null);
     const modelRows = modelsStatus?.models ?? [];
@@ -523,22 +792,24 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
             if (key.upArrow) {
                 const next = Math.max(0, selectedLogIndex - 1);
                 setSelectedTs(logs[next]?.ts ?? null);
-                setLogScrollTop(followScrollWindow(logWindowTop, next, logs.length, LOG_VISIBLE));
+                setLogScrollTop(followScrollWindow(logWindowTop, next, logs.length, logVisible));
             }
             if (key.downArrow) {
                 const next = Math.min(logs.length - 1, selectedLogIndex + 1);
                 setSelectedTs(logs[next]?.ts ?? null);
-                setLogScrollTop(followScrollWindow(logWindowTop, next, logs.length, LOG_VISIBLE));
+                setLogScrollTop(followScrollWindow(logWindowTop, next, logs.length, logVisible));
             }
         }
         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));
             }
             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));
             }
             // Account actions (only when focus = accounts)
             if (input === "e") {
@@ -611,15 +882,15 @@ function LiveDashboard({ data, port, baseUrl, lastUpdate, api, modelsApi, onInte
         }
     });
     const selectedLog = logs[selectedLogIndex] ?? null;
-    const visibleLogs = logs.slice(logWindowTop, logWindowTop + 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"] })] }), 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" }), _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" && logWindowTop + i === selectedLogIndex }, `${log.ts}-${i}`))) })] }), focus === "logs" && selectedLog && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1 }), _jsx(DetailPanel, { log: selectedLog })] }))] }));
+    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
+                                            ? `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
+                        ? _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 })] }))] }) }));
 }
 function OperationsPanel({ operational, baseUrl, focus }) {
     const authLabel = operational.auth.required ? "protected" : "open";
@@ -630,14 +901,14 @@ function OperationsPanel({ operational, baseUrl, focus }) {
     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, }) {
+function ModelsPanel({ status, selectedIndex, focused, visibleRows = MODEL_VISIBLE_ROWS, rowsRef, }) {
     const models = status?.models ?? [];
-    const visible = getVisibleModelWindow(models, selectedIndex, MODEL_VISIBLE_ROWS);
+    const visible = getVisibleModelWindow(models, selectedIndex, Math.max(1, visibleRows));
     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)))] })) })] }));
+                        : (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["  showing ", visible.start + 1, "-", visible.end, " of ", models.length] }), _jsx(Box, { flexDirection: "column", ref: rowsRef, children: 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timo972/cc-router",
-  "version": "0.10.0-rc.5",
+  "version": "0.10.0",
   "description": "Cache-aware session router for Claude Max OAuth tokens — use multiple Claude Max accounts with Claude Code",
   "type": "module",
   "bin": {