letmecode 0.1.3 → 0.1.5

package/ink-app/dist/index.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import { Box, Text, useApp, useInput, render } from "ink";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Text, measureElement, useApp, useInput, useStdin, useStdout, render } from "ink";
 import { configureCopilotVsCodeLogging, createProviders } from "./providers/index.js";
+import { reportAnonymousUsage } from "./reporting.js";
+const ESC = String.fromCharCode(0x1b);
+// Normal mouse tracking (button press/release only) + SGR extended coordinates.
+// This makes the tabs clickable while leaving Shift+drag native text selection
+// available everywhere else, exactly like Midnight Commander.
+const ENABLE_MOUSE_TRACKING = `${ESC}[?1000h${ESC}[?1006h`;
+const DISABLE_MOUSE_TRACKING = `${ESC}[?1006l${ESC}[?1000l`;
+// SGR mouse report: ESC [ < button ; column ; row, ending in M (press) or m (release).
+const SGR_MOUSE_SEQUENCE = new RegExp(`${ESC}\\[<(\\d+);(\\d+);(\\d+)([Mm])`, "g");
 const VERTICAL_TABS = [
     { id: "limit-windows", label: "Limits" },
     { id: "summary", label: "Summary" },
@@ -17,46 +26,40 @@ const LIMIT_WINDOW_COLUMNS = {
     date: 17,
     value: 10
 };
-const OPENAI_MODEL_USAGE_COLUMNS = {
+const MODEL_USAGE_COLUMNS = {
     model: 17,
-    input: 12,
-    cached: 12,
-    output: 11,
-    credits: 12,
-    value: 12
-};
-const ANTHROPIC_MODEL_USAGE_COLUMNS = {
-    model: 17,
-    input: 10,
+    input: 11,
+    output: 10,
+    cacheRead: 11,
+    cacheWrite: 11,
     cacheWrite5m: 10,
     cacheWrite1h: 10,
-    cacheRead: 10,
-    output: 10,
     credits: 12,
     value: 12
 };
-const OPENAI_DAY_USAGE_COLUMNS = {
+const DAY_USAGE_COLUMNS = {
     day: 11,
     events: 6,
     input: 11,
     output: 10,
-    value: 10
-};
-const ANTHROPIC_DAY_USAGE_COLUMNS = {
-    day: 11,
-    events: 6,
-    input: 10,
+    cacheRead: 11,
+    cacheWrite: 11,
     cacheWrite5m: 10,
     cacheWrite1h: 10,
-    cacheRead: 10,
-    output: 10,
     value: 10
 };
 const COPILOT_ACTIONS = [
     { id: "vscode", label: "Start logging VS Code", enabled: true }
 ];
+const ENTER_FULLSCREEN_MODE = "\u001B[?1049h\u001B[2J\u001B[H";
+const EXIT_FULLSCREEN_MODE = "\u001B[?1049l";
+const SCROLLBAR_TRACK_GLYPH = "│";
+const SCROLLBAR_THUMB_GLYPH = "█";
 function App(props) {
     const { exit } = useApp();
+    const viewportHeight = useViewportHeight();
+    const { ref: contentPanelRef, height: contentPanelHeight } = useMeasuredElementSize();
+    const { getRegionRef, resolveClick } = useClickRegions();
     const providers = React.useState(() => createProviders())[0];
     const [providerStates, setProviderStates] = useState(providers.map((provider) => ({ provider, status: "loading" })));
     const [selectedProviderId, setSelectedProviderId] = useState(providers[0]?.id ?? "");
@@ -67,6 +70,7 @@ function App(props) {
     const [selectedModelRowIndex, setSelectedModelRowIndex] = useState(0);
     const [selectedCopilotActionIndex, setSelectedCopilotActionIndex] = useState(0);
     const [copilotActionMessage, setCopilotActionMessage] = useState();
+    const hasReportedAnonymousUsageRef = useRef(false);
     const sortedProviderStates = React.useMemo(() => sortProviderStatesByUsage(providerStates), [providerStates]);
     const selectedProviderIndex = Math.max(0, sortedProviderStates.findIndex((state) => state.provider.id === selectedProviderId));
     const selectedProvider = sortedProviderStates[selectedProviderIndex];
@@ -117,7 +121,38 @@ function App(props) {
         }
         setSelectedProviderId(topProvider.provider.id);
     }, [hasUserSelectedProvider, providerStates, sortedProviderStates]);
+    useEffect(() => {
+        if (hasReportedAnonymousUsageRef.current || providerStates.some((state) => state.status === "loading")) {
+            return;
+        }
+        hasReportedAnonymousUsageRef.current = true;
+        const readyStats = providerStates
+            .filter((state) => state.status === "ready")
+            .map((state) => state.stats);
+        void reportAnonymousUsage(readyStats).catch(() => {
+            // Anonymous usage reporting is best-effort and must never disturb the TUI.
+        });
+    }, [providerStates]);
+    useMouseClick((click) => {
+        const regionId = resolveClick(click);
+        if (!regionId) {
+            return;
+        }
+        if (regionId.startsWith("provider:")) {
+            setSelectedProviderId(regionId.slice("provider:".length));
+            setHasUserSelectedProvider(true);
+            return;
+        }
+        if (regionId.startsWith("vtab:")) {
+            setSelectedVerticalTabIndex(Number(regionId.slice("vtab:".length)));
+        }
+    });
     useInput((input, key) => {
+        // Mouse reports arrive as SGR escape sequences and are handled by useMouseClick.
+        // Ink strips the leading ESC, leaving e.g. "[<0;10;5M" — never treat that as a key.
+        if (input.startsWith("[<")) {
+            return;
+        }
         if (input === "q" || key.escape) {
             exit();
             return;
@@ -185,7 +220,7 @@ function App(props) {
             setSelectedVerticalTabIndex((current) => (current - 1 + VERTICAL_TABS.length) % VERTICAL_TABS.length);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "letmecode usage dashboard" }), _jsx(Text, { color: "gray", children: "[/]/tab to switch providers, j/k or up/down for details, left/right to select a row, enter for actions, q to quit" }), _jsx(Box, { marginTop: 1, children: sortedProviderStates.map((state) => (_jsx(ProviderTab, { label: state.provider.label, active: state.provider.id === selectedProvider.provider.id, status: state.status }, state.provider.id))) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Box, { flexDirection: "column", width: VERTICAL_TAB_WIDTH, marginRight: 2, children: VERTICAL_TABS.map((tab, index) => (_jsx(VerticalTab, { label: tab.label, active: index === selectedVerticalTabIndex }, tab.id))) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(ContentPanel, { providerState: selectedProvider, tabId: selectedVerticalTab.id, selectedLimitRowKey: selectedLimitRow ? getLimitRowKey(selectedLimitRow) : undefined, selectedDayKey: selectedDayRow?.dayKey, selectedModelId: selectedModelRow?.modelId }) })] }), _jsx(SelectionDetailsPanel, { providerState: selectedProvider, tabId: selectedVerticalTab.id, selectedLimitRow: selectedLimitRow, selectedDayRow: selectedDayRow, selectedModelRow: selectedModelRow }), _jsx(CopilotActionsPanel, { providerState: selectedProvider, actionMessage: copilotActionMessage, selectedActionIndex: selectedCopilotActionIndex }), selectedProvider.status === "ready" && selectedProvider.stats.warnings.length > 0 ? (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "Warnings" }), selectedProvider.stats.warnings.map((warning) => (_jsx(Text, { children: warning }, warning)))] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: viewportHeight, overflow: "hidden", children: [_jsx(Text, { bold: true, color: "cyan", children: "letmecode usage dashboard" }), _jsx(Text, { color: "gray", children: "[/]/tab to switch providers, j/k or up/down for details, left/right to select a row, enter for actions, click tabs to switch, q to quit" }), _jsx(Box, { marginTop: 1, children: sortedProviderStates.map((state) => (_jsx(ProviderTab, { label: state.provider.label, active: state.provider.id === selectedProvider.provider.id, status: state.status, regionRef: getRegionRef(`provider:${state.provider.id}`) }, state.provider.id))) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [_jsxs(Box, { flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { flexDirection: "column", width: VERTICAL_TAB_WIDTH, marginRight: 2, overflow: "hidden", children: VERTICAL_TABS.map((tab, index) => (_jsx(VerticalTab, { label: tab.label, active: index === selectedVerticalTabIndex, regionRef: getRegionRef(`vtab:${index}`) }, tab.id))) }), _jsx(Box, { ref: contentPanelRef, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: _jsx(ContentPanel, { providerState: selectedProvider, tabId: selectedVerticalTab.id, selectedLimitRowKey: selectedLimitRow ? getLimitRowKey(selectedLimitRow) : undefined, selectedDayKey: selectedDayRow?.dayKey, selectedModelId: selectedModelRow?.modelId, availableHeight: contentPanelHeight }) })] }), _jsx(SelectionDetailsPanel, { providerState: selectedProvider, tabId: selectedVerticalTab.id, selectedLimitRow: selectedLimitRow, selectedDayRow: selectedDayRow, selectedModelRow: selectedModelRow }), _jsx(CopilotActionsPanel, { providerState: selectedProvider, actionMessage: copilotActionMessage, selectedActionIndex: selectedCopilotActionIndex }), selectedProvider.status === "ready" && selectedProvider.stats.warnings.length > 0 ? (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, flexDirection: "column", overflow: "hidden", children: [_jsx(Text, { color: "yellow", children: "Warnings" }), selectedProvider.stats.warnings.map((warning) => (_jsx(Text, { children: warning }, warning)))] })) : null] })] }));
 }
 function CopilotActionsPanel(props) {
     if (props.providerState.provider.id !== "copilot") {
@@ -222,14 +257,15 @@ function formatCopilotLoggingResult(result) {
 function ProviderTab(props) {
     const statusColor = props.status === "error" ? "red" : props.status === "loading" ? "yellow" : "green";
     const tabLabel = props.active ? ` ${props.label} ` : `[${props.label}]`;
-    return (_jsx(Box, { marginRight: 1, children: _jsx(Text, { inverse: props.active, color: statusColor, children: tabLabel }) }));
+    return (_jsx(Box, { marginRight: 1, ref: props.regionRef, children: _jsx(Text, { inverse: props.active, color: statusColor, children: tabLabel }) }));
 }
 function VerticalTab(props) {
-    return (_jsx(Box, { width: VERTICAL_TAB_WIDTH, children: _jsx(Text, { wrap: "truncate-end", inverse: props.active, children: props.active ? ` ${props.label} ` : ` ${props.label}` }) }));
+    return (_jsx(Box, { width: VERTICAL_TAB_WIDTH, ref: props.regionRef, children: _jsx(Text, { wrap: "truncate-end", inverse: props.active, children: props.active ? ` ${props.label} ` : ` ${props.label}` }) }));
 }
 function SummaryPanel(props) {
     const { summary } = props.stats;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: props.stats.providerLabel }), _jsxs(Text, { children: ["root: ", summary.rootLabel, " (", summary.rootPath, ")"] }), _jsxs(Text, { children: ["files: ", formatInteger(summary.filesScanned), "  lines: ", formatInteger(summary.linesRead), "  token events: ", formatInteger(summary.tokenEvents)] }), _jsx(UsageBreakdownLines, { totals: summary.totals }), _jsxs(Text, { children: ["estimated credits: ", formatUsageCredits(summary.totals)] }), _jsxs(Text, { children: ["IpO: ", formatInputPerOutput(summary.totals)] }), _jsxs(Text, { children: ["models: ", summary.distinctModels.join(", ") || "none"] }), _jsxs(Text, { children: ["plans: ", summary.distinctPlanTypes.join(", ") || "none"] })] }));
+    const isCodexProvider = props.stats.providerId === "codex";
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: props.stats.providerLabel }), _jsxs(Text, { children: ["root: ", summary.rootLabel, " (", summary.rootPath, ")"] }), _jsxs(Text, { children: ["files: ", formatInteger(summary.filesScanned), "  lines: ", formatInteger(summary.linesRead), "  token events: ", formatInteger(summary.tokenEvents)] }), _jsx(UsageBreakdownLines, { totals: summary.totals }), isCodexProvider ? (_jsxs(Text, { children: ["Burned tokens for: ", formatUsageUsd(summary.totals)] })) : (_jsxs(Text, { children: ["estimated credits: ", formatUsageCredits(summary.totals)] })), _jsxs(Text, { children: ["IpO: ", formatInputPerOutput(summary.totals)] }), _jsxs(Text, { children: ["models: ", summary.distinctModels.join(", ") || "none"] }), _jsxs(Text, { children: ["plans: ", summary.distinctPlanTypes.join(", ") || "none"] })] }));
 }
 function ContentPanel(props) {
     if (props.providerState.status === "loading") {
@@ -239,73 +275,115 @@ function ContentPanel(props) {
         return _jsxs(Text, { color: "red", children: ["Provider error: ", props.providerState.errorMessage] });
     }
     if (props.tabId === "limit-windows") {
-        return _jsx(LimitWindowsPanel, { stats: props.providerState.stats, selectedRowKey: props.selectedLimitRowKey });
+        return (_jsx(LimitWindowsPanel, { stats: props.providerState.stats, selectedRowKey: props.selectedLimitRowKey, availableHeight: props.availableHeight }));
     }
     if (props.tabId === "summary") {
         return _jsx(SummaryPanel, { stats: props.providerState.stats });
     }
     if (props.tabId === "day-to-day-analyses") {
-        return _jsx(DayToDayPanel, { stats: props.providerState.stats, selectedDayKey: props.selectedDayKey });
+        return (_jsx(DayToDayPanel, { stats: props.providerState.stats, selectedDayKey: props.selectedDayKey, availableHeight: props.availableHeight }));
     }
-    return _jsx(UsageByModelPanel, { stats: props.providerState.stats, selectedModelId: props.selectedModelId });
+    return (_jsx(UsageByModelPanel, { stats: props.providerState.stats, selectedModelId: props.selectedModelId, availableHeight: props.availableHeight }));
 }
 function LimitWindowsPanel(props) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Primary Limit Windows" }), _jsx(LimitWindowSection, { windows: props.stats.primaryLimitWindows, selectedRowKey: props.selectedRowKey }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { bold: true, children: "Secondary Limit Windows" }), _jsx(LimitWindowSection, { windows: props.stats.secondaryLimitWindows, selectedRowKey: props.selectedRowKey })] }));
-}
-function LimitWindowSection(props) {
-    if (props.windows.length === 0) {
-        return _jsx(Text, { color: "gray", children: "No windows found." });
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("plan", LIMIT_WINDOW_COLUMNS.plan), " ", pad("window", LIMIT_WINDOW_COLUMNS.window), " ", pad("used", LIMIT_WINDOW_COLUMNS.used), " ", pad("start", LIMIT_WINDOW_COLUMNS.date), " ", pad("end", LIMIT_WINDOW_COLUMNS.date), " value"] }), props.windows.map((window) => {
-                const windowLabel = formatWindowMinutes(window.windowMinutes);
-                const usedLabel = `${window.minUsedPercent}%->${window.maxUsedPercent}%`;
-                const isSelected = props.selectedRowKey === getLimitRowKey(window);
-                return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(window.planType, LIMIT_WINDOW_COLUMNS.plan), " ", pad(windowLabel, LIMIT_WINDOW_COLUMNS.window), " ", pad(usedLabel, LIMIT_WINDOW_COLUMNS.used), " ", pad(formatLocalDateTime(window.startTimeUtcIso), LIMIT_WINDOW_COLUMNS.date), " ", pad(formatLocalDateTime(window.endTimeUtcIso), LIMIT_WINDOW_COLUMNS.date), " ", pad(formatUsd(window.totals.estimatedCredits * CODEX_CREDIT_COST_USD), LIMIT_WINDOW_COLUMNS.value)] }, getLimitRowKey(window)));
-            })] }));
+    const hasPrimaryWindows = props.stats.primaryLimitWindows.length > 0;
+    const bodyLines = [
+        { key: "primary-title", text: "Primary Limit Windows", bold: true },
+        ...buildLimitWindowSectionLines("primary", props.stats.primaryLimitWindows, props.selectedRowKey),
+        ...(hasPrimaryWindows
+            ? [{ key: "section-separator", text: buildLimitSectionSeparatorLine(), color: "gray" }]
+            : [{ key: "section-gap", text: "" }]),
+        { key: "secondary-title", text: "Secondary Limit Windows", bold: true },
+        ...buildLimitWindowSectionLines("secondary", props.stats.secondaryLimitWindows, props.selectedRowKey)
+    ];
+    return (_jsx(ScrollableLineViewport, { bodyLines: bodyLines, selectedBodyLineKey: props.selectedRowKey ? `limit-row:${props.selectedRowKey}` : undefined, availableHeight: props.availableHeight }));
 }
 function UsageByModelPanel(props) {
     if (props.stats.modelUsage.length === 0) {
         return _jsx(Text, { color: "gray", children: "No model usage found." });
     }
     const totals = props.stats.summary.totals;
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("model", ANTHROPIC_MODEL_USAGE_COLUMNS.model), " ", pad("input", ANTHROPIC_MODEL_USAGE_COLUMNS.input), " ", pad("cacheW5m", ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite5m), " ", pad("cacheW1h", ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite1h), " ", pad("cacheRead", ANTHROPIC_MODEL_USAGE_COLUMNS.cacheRead), " ", pad("output", ANTHROPIC_MODEL_USAGE_COLUMNS.output), " ", pad("credits", ANTHROPIC_MODEL_USAGE_COLUMNS.credits), " value"] }), props.stats.modelUsage.map((row) => {
-                    const isSelected = props.selectedModelId === row.modelId;
-                    if (row.totals.tokenBreakdown.schema !== "anthropic") {
-                        return null;
-                    }
-                    return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(row.modelId, ANTHROPIC_MODEL_USAGE_COLUMNS.model), " ", pad(formatInteger(row.totals.tokenBreakdown.inputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.input), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheWrite5mInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite5m), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheWrite1hInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite1h), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheReadInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheRead), " ", pad(formatInteger(row.totals.outputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(row.totals), ANTHROPIC_MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(row.totals), ANTHROPIC_MODEL_USAGE_COLUMNS.value)] }, row.modelId));
-                }), _jsxs(Text, { color: "cyan", children: [pad("TOTAL", ANTHROPIC_MODEL_USAGE_COLUMNS.model), " ", pad(formatInteger(totals.tokenBreakdown.inputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.input), " ", pad(formatInteger(totals.tokenBreakdown.cacheWrite5mInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite5m), " ", pad(formatInteger(totals.tokenBreakdown.cacheWrite1hInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheWrite1h), " ", pad(formatInteger(totals.tokenBreakdown.cacheReadInputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.cacheRead), " ", pad(formatInteger(totals.outputTokens), ANTHROPIC_MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(totals), ANTHROPIC_MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(totals), ANTHROPIC_MODEL_USAGE_COLUMNS.value)] })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("model", OPENAI_MODEL_USAGE_COLUMNS.model), " ", pad("uncached", OPENAI_MODEL_USAGE_COLUMNS.input), " ", pad("cached", OPENAI_MODEL_USAGE_COLUMNS.cached), " ", pad("output", OPENAI_MODEL_USAGE_COLUMNS.output), " ", pad("credits", OPENAI_MODEL_USAGE_COLUMNS.credits), " value"] }), props.stats.modelUsage.map((row) => {
-                const isSelected = props.selectedModelId === row.modelId;
-                if (row.totals.tokenBreakdown.schema !== "openai") {
-                    return null;
-                }
-                return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(row.modelId, OPENAI_MODEL_USAGE_COLUMNS.model), " ", pad(formatOpenAiTokens(row.totals, "non-cached"), OPENAI_MODEL_USAGE_COLUMNS.input), " ", pad(formatOpenAiTokens(row.totals, "cached"), OPENAI_MODEL_USAGE_COLUMNS.cached), " ", pad(formatInteger(row.totals.outputTokens), OPENAI_MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(row.totals), OPENAI_MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(row.totals), OPENAI_MODEL_USAGE_COLUMNS.value)] }, row.modelId));
-            }), _jsxs(Text, { color: "cyan", children: [pad("TOTAL", OPENAI_MODEL_USAGE_COLUMNS.model), " ", pad(formatOpenAiTokens(totals, "non-cached"), OPENAI_MODEL_USAGE_COLUMNS.input), " ", pad(formatOpenAiTokens(totals, "cached"), OPENAI_MODEL_USAGE_COLUMNS.cached), " ", pad(formatInteger(totals.outputTokens), OPENAI_MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(totals), OPENAI_MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(totals), OPENAI_MODEL_USAGE_COLUMNS.value)] })] }));
+    const isCodexProvider = props.stats.providerId === "codex";
+    return (_jsx(ScrollableLineViewport, { headerLines: [
+            {
+                key: "model-header",
+                text: isCodexProvider
+                    ? `${pad("model", MODEL_USAGE_COLUMNS.model)} ${pad("input", MODEL_USAGE_COLUMNS.input)} ${pad("output", MODEL_USAGE_COLUMNS.output)} ${pad("cacheRead", MODEL_USAGE_COLUMNS.cacheRead)} ${pad("cacheWrite", MODEL_USAGE_COLUMNS.cacheWrite)} ${pad("cacheW5m", MODEL_USAGE_COLUMNS.cacheWrite5m)} ${pad("cacheW1h", MODEL_USAGE_COLUMNS.cacheWrite1h)} value`
+                    : `${pad("model", MODEL_USAGE_COLUMNS.model)} ${pad("input", MODEL_USAGE_COLUMNS.input)} ${pad("output", MODEL_USAGE_COLUMNS.output)} ${pad("cacheRead", MODEL_USAGE_COLUMNS.cacheRead)} ${pad("cacheWrite", MODEL_USAGE_COLUMNS.cacheWrite)} ${pad("cacheW5m", MODEL_USAGE_COLUMNS.cacheWrite5m)} ${pad("cacheW1h", MODEL_USAGE_COLUMNS.cacheWrite1h)} ${pad("credits", MODEL_USAGE_COLUMNS.credits)} value`,
+                color: "gray"
+            }
+        ], bodyLines: props.stats.modelUsage.map((row) => ({
+            key: `model-row:${row.modelId}`,
+            text: formatModelUsageRow(row.modelId, row.totals, isCodexProvider),
+            inverse: props.selectedModelId === row.modelId,
+            color: props.selectedModelId === row.modelId ? "cyan" : undefined
+        })), footerLines: [
+            {
+                key: "model-total",
+                text: formatModelUsageRow("TOTAL", totals, isCodexProvider),
+                color: "cyan"
+            }
+        ], selectedBodyLineKey: props.selectedModelId ? `model-row:${props.selectedModelId}` : undefined, availableHeight: props.availableHeight }));
 }
 function DayToDayPanel(props) {
     if (props.stats.dayUsage.length === 0) {
         return _jsx(Text, { color: "gray", children: "No day-by-day usage found." });
     }
     const totals = props.stats.summary.totals;
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("day", ANTHROPIC_DAY_USAGE_COLUMNS.day), " ", pad("events", ANTHROPIC_DAY_USAGE_COLUMNS.events), " ", pad("input", ANTHROPIC_DAY_USAGE_COLUMNS.input), " ", pad("cacheW5m", ANTHROPIC_DAY_USAGE_COLUMNS.cacheWrite5m), " ", pad("cacheW1h", ANTHROPIC_DAY_USAGE_COLUMNS.cacheWrite1h), " ", pad("cacheRead", ANTHROPIC_DAY_USAGE_COLUMNS.cacheRead), " ", pad("output", ANTHROPIC_DAY_USAGE_COLUMNS.output), " value"] }), props.stats.dayUsage.map((row) => {
-                    const isSelected = props.selectedDayKey === row.dayKey;
-                    if (row.totals.tokenBreakdown.schema !== "anthropic") {
-                        return null;
-                    }
-                    return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(formatUtcDay(row.dayKey), ANTHROPIC_DAY_USAGE_COLUMNS.day), " ", pad(formatInteger(row.totals.eventCount), ANTHROPIC_DAY_USAGE_COLUMNS.events), " ", pad(formatInteger(row.totals.tokenBreakdown.inputTokens), ANTHROPIC_DAY_USAGE_COLUMNS.input), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheWrite5mInputTokens), ANTHROPIC_DAY_USAGE_COLUMNS.cacheWrite5m), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheWrite1hInputTokens), ANTHROPIC_DAY_USAGE_COLUMNS.cacheWrite1h), " ", pad(formatInteger(row.totals.tokenBreakdown.cacheReadInputTokens), ANTHROPIC_DAY_USAGE_COLUMNS.cacheRead), " ", pad(formatInteger(row.totals.outputTokens), ANTHROPIC_DAY_USAGE_COLUMNS.output), " ", pad(formatUsageUsd(row.totals), ANTHROPIC_DAY_USAGE_COLUMNS.value)] }, row.dayKey));
-                })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("day", OPENAI_DAY_USAGE_COLUMNS.day), " ", pad("events", OPENAI_DAY_USAGE_COLUMNS.events), " ", pad("input", OPENAI_DAY_USAGE_COLUMNS.input), " ", pad("output", OPENAI_DAY_USAGE_COLUMNS.output), " value"] }), props.stats.dayUsage.map((row) => {
-                const isSelected = props.selectedDayKey === row.dayKey;
-                if (row.totals.tokenBreakdown.schema !== "openai") {
-                    return null;
-                }
-                return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(formatUtcDay(row.dayKey), OPENAI_DAY_USAGE_COLUMNS.day), " ", pad(formatInteger(row.totals.eventCount), OPENAI_DAY_USAGE_COLUMNS.events), " ", pad(formatInteger(row.totals.inputTotalTokens), OPENAI_DAY_USAGE_COLUMNS.input), " ", pad(formatInteger(row.totals.outputTokens), OPENAI_DAY_USAGE_COLUMNS.output), " ", pad(formatUsageUsd(row.totals), OPENAI_DAY_USAGE_COLUMNS.value)] }, row.dayKey));
-            })] }));
+    return (_jsx(ScrollableLineViewport, { headerLines: [
+            {
+                key: "day-header",
+                text: `${pad("day", DAY_USAGE_COLUMNS.day)} ${pad("events", DAY_USAGE_COLUMNS.events)} ${pad("input", DAY_USAGE_COLUMNS.input)} ${pad("output", DAY_USAGE_COLUMNS.output)} ${pad("cacheRead", DAY_USAGE_COLUMNS.cacheRead)} ${pad("cacheWrite", DAY_USAGE_COLUMNS.cacheWrite)} ${pad("cacheW5m", DAY_USAGE_COLUMNS.cacheWrite5m)} ${pad("cacheW1h", DAY_USAGE_COLUMNS.cacheWrite1h)} value`,
+                color: "gray"
+            }
+        ], bodyLines: props.stats.dayUsage.map((row) => ({
+            key: `day-row:${row.dayKey}`,
+            text: `${pad(formatUtcDay(row.dayKey), DAY_USAGE_COLUMNS.day)} ${pad(formatCompactTokenCount(row.totals.eventCount), DAY_USAGE_COLUMNS.events)} ${pad(formatCompactTokenCount(row.totals.inputTokens), DAY_USAGE_COLUMNS.input)} ${pad(formatCompactTokenCount(row.totals.outputTokens), DAY_USAGE_COLUMNS.output)} ${pad(formatCompactCacheTokens(row.totals, row.totals.cacheReadInputTokens), DAY_USAGE_COLUMNS.cacheRead)} ${pad(formatCompactCacheTokens(row.totals, row.totals.cacheWriteInputTokens), DAY_USAGE_COLUMNS.cacheWrite)} ${pad(formatOptionalCompactTokens(row.totals.cacheWrite5mInputTokens), DAY_USAGE_COLUMNS.cacheWrite5m)} ${pad(formatOptionalCompactTokens(row.totals.cacheWrite1hInputTokens), DAY_USAGE_COLUMNS.cacheWrite1h)} ${pad(formatUsageUsd(row.totals), DAY_USAGE_COLUMNS.value)}`,
+            inverse: props.selectedDayKey === row.dayKey,
+            color: props.selectedDayKey === row.dayKey ? "cyan" : undefined
+        })), selectedBodyLineKey: props.selectedDayKey ? `day-row:${props.selectedDayKey}` : undefined, availableHeight: props.availableHeight }));
+}
+function ScrollableLineViewport(props) {
+    const headerLines = props.headerLines ?? [];
+    const footerLines = props.footerLines ?? [];
+    const layout = resolveScrollableViewportLayout(props.availableHeight, headerLines.length, props.bodyLines.length, footerLines.length);
+    const selectedBodyLineIndex = props.selectedBodyLineKey
+        ? props.bodyLines.findIndex((line) => line.key === props.selectedBodyLineKey)
+        : -1;
+    const scrollOffset = useAutoScrollOffset(selectedBodyLineIndex, props.bodyLines.length, layout.bodyVisibleCount);
+    const visibleHeaderLines = headerLines.slice(0, layout.headerVisibleCount);
+    const visibleBodyLines = props.bodyLines.slice(scrollOffset, scrollOffset + layout.bodyVisibleCount);
+    const visibleFooterLines = footerLines.slice(Math.max(0, footerLines.length - layout.footerVisibleCount));
+    const bodyScrollbarLines = buildScrollbarLines(layout.bodyVisibleCount, props.bodyLines.length, scrollOffset);
+    const showScrollbar = bodyScrollbarLines.length > 0;
+    return (_jsxs(Box, { flexDirection: "row", overflow: "hidden", children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [visibleHeaderLines.map((line) => (_jsx(ScrollableViewportLine, { line: line }, line.key))), visibleBodyLines.map((line) => (_jsx(ScrollableViewportLine, { line: line }, line.key))), visibleFooterLines.map((line) => (_jsx(ScrollableViewportLine, { line: line }, line.key)))] }), showScrollbar ? (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [visibleHeaderLines.map((line) => (_jsx(Text, { color: "gray", children: " " }, `${line.key}-scrollbar`))), bodyScrollbarLines.map((line, index) => (_jsx(Text, { color: line === "#" ? "cyan" : "gray", children: line }, `scrollbar-${index}`))), visibleFooterLines.map((line) => (_jsx(Text, { color: "gray", children: " " }, `${line.key}-scrollbar`)))] })) : null] }));
+}
+function ScrollableViewportLine(props) {
+    return (_jsx(Text, { bold: props.line.bold, color: props.line.color, inverse: props.line.inverse, wrap: "truncate-end", children: props.line.text }));
+}
+function buildLimitWindowSectionLines(scope, windows, selectedRowKey) {
+    if (windows.length === 0) {
+        return [{ key: `${scope}-empty`, text: "No windows found.", color: "gray" }];
+    }
+    return [
+        {
+            key: `${scope}-header`,
+            text: `${pad("plan", LIMIT_WINDOW_COLUMNS.plan)} ${pad("window", LIMIT_WINDOW_COLUMNS.window)} ${pad("used", LIMIT_WINDOW_COLUMNS.used)} ${pad("start", LIMIT_WINDOW_COLUMNS.date)} ${pad("end", LIMIT_WINDOW_COLUMNS.date)} value`,
+            color: "gray"
+        },
+        ...windows.map((window) => {
+            const lineKey = getLimitRowKey(window);
+            const windowLabel = formatWindowMinutes(window.windowMinutes);
+            const usedLabel = formatUsedPercentRange(window.minUsedPercent, window.maxUsedPercent);
+            const isSelected = selectedRowKey === lineKey;
+            return {
+                key: `limit-row:${lineKey}`,
+                text: `${pad(window.planType, LIMIT_WINDOW_COLUMNS.plan)} ${pad(windowLabel, LIMIT_WINDOW_COLUMNS.window)} ${pad(usedLabel, LIMIT_WINDOW_COLUMNS.used)} ${pad(formatLocalDateTime(window.startTimeUtcIso), LIMIT_WINDOW_COLUMNS.date)} ${pad(formatLocalDateTime(window.endTimeUtcIso), LIMIT_WINDOW_COLUMNS.date)} ${pad(formatUsd(window.totals.estimatedCredits * CODEX_CREDIT_COST_USD), LIMIT_WINDOW_COLUMNS.value)}`,
+                inverse: isSelected,
+                color: isSelected ? "cyan" : undefined
+            };
+        })
+    ];
 }
 function SelectionDetailsPanel(props) {
     if (props.providerState.status !== "ready") {
@@ -313,24 +391,44 @@ function SelectionDetailsPanel(props) {
     }
     if (props.tabId === "limit-windows" && props.selectedLimitRow) {
         const row = props.selectedLimitRow;
-        return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Limit details" }), _jsxs(Text, { children: [row.scope, "  plan: ", row.planType, "  window: ", formatWindowMinutes(row.windowMinutes), "  used: ", row.minUsedPercent, "%", "->", row.maxUsedPercent, "%  limit: ", row.limitId] }), _jsxs(Text, { children: ["range: ", formatLocalDateTime(row.startTimeUtcIso), " ", "->", " ", formatLocalDateTime(row.endTimeUtcIso), "  events: ", formatInteger(row.eventCount)] }), _jsx(UsageTotalsDetails, { totals: row.totals })] }));
+        return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Limit details" }), _jsxs(Text, { children: [row.scope, "  plan: ", row.planType, "  window: ", formatWindowMinutes(row.windowMinutes), "  used: ", formatUsedPercentRange(row.minUsedPercent, row.maxUsedPercent), "  limit: ", row.limitId] }), _jsxs(Text, { children: ["range: ", formatLocalDateTime(row.startTimeUtcIso), " ", "->", " ", formatLocalDateTime(row.endTimeUtcIso), "  events: ", formatInteger(row.eventCount)] }), _jsx(UsageTotalsDetails, { totals: row.totals })] }));
     }
     if (props.tabId === "day-to-day-analyses" && props.selectedDayRow) {
         const row = props.selectedDayRow;
         return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Day details" }), _jsxs(Text, { children: ["day: ", formatUtcDay(row.dayKey), "  events: ", formatInteger(row.totals.eventCount), "  models: ", formatInteger(row.distinctModels.length), "  plans: ", formatInteger(row.distinctPlanTypes.length)] }), _jsxs(Text, { children: ["range: ", formatEventRange(row.firstEventUtcIso, row.lastEventUtcIso)] }), _jsxs(Text, { children: ["models: ", row.distinctModels.join(", ") || "none"] }), _jsxs(Text, { children: ["plans: ", row.distinctPlanTypes.join(", ") || "none"] }), _jsx(UsageTotalsDetails, { totals: row.totals })] }));
     }
     if (props.tabId === "usage-by-model" && props.selectedModelRow) {
-        return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Model details" }), _jsxs(Text, { children: ["model: ", props.selectedModelRow.modelId, "  events: ", formatInteger(props.selectedModelRow.totals.eventCount)] }), _jsx(UsageTotalsDetails, { totals: props.selectedModelRow.totals })] }));
+        return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Model details" }), _jsxs(Text, { children: ["model: ", props.selectedModelRow.modelId, "  events: ", formatInteger(props.selectedModelRow.totals.eventCount)] }), _jsx(UsageTotalsDetails, { totals: props.selectedModelRow.totals, modelId: props.selectedModelRow.modelId })] }));
     }
     return null;
 }
 function UsageTotalsDetails(props) {
     const { totals } = props;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(UsageBreakdownLines, { totals: totals }), _jsxs(Text, { children: ["Total credits burned: ", formatUsageCredits(totals)] }), _jsxs(Text, { children: ["Credits Value (@ $0.01/credit): ", formatUsageUsd(totals)] }), _jsxs(Text, { children: ["IpO: ", formatInputPerOutput(totals)] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(UsageBreakdownLines, { totals: totals }), _jsxs(Text, { children: ["Burned tokens for: ", formatUsageUsd(totals, props.modelId)] }), _jsxs(Text, { children: ["IpO: ", formatInputPerOutput(totals)] })] }));
 }
 function formatInteger(value) {
     return Math.round(value).toLocaleString("en-US");
 }
+function formatCompactTokenCount(value) {
+    const roundedValue = Math.round(value);
+    if (roundedValue < 1000) {
+        return formatInteger(roundedValue);
+    }
+    if (roundedValue < 100000) {
+        return `${formatCompactNumber(roundedValue / 1000)}K`;
+    }
+    if (roundedValue < 1000000) {
+        return `${formatInteger(Math.round(roundedValue / 1000))}K`;
+    }
+    return `${formatCompactNumber(roundedValue / 1000000)}M`;
+}
+function formatCompactNumber(value) {
+    const maximumFractionDigits = value < 10 ? 2 : value < 100 ? 1 : 0;
+    return value.toLocaleString("en-US", {
+        maximumFractionDigits,
+        minimumFractionDigits: 0
+    });
+}
 function formatCredits(value) {
     if (value > 0 && value < 0.01) {
         return "<0.01";
@@ -340,25 +438,45 @@ function formatCredits(value) {
         maximumFractionDigits: 2
     });
 }
-function formatUsageCredits(totals) {
-    return totals.estimatedCreditsStatus === "unavailable" ? "unknown" : formatCredits(totals.estimatedCredits);
+function formatUsageCredits(totals, modelId) {
+    if (isInternalUsageModel(modelId)) {
+        return "N/A";
+    }
+    return totals.estimatedCreditsStatus === "unavailable" ? "-" : formatCredits(totals.estimatedCredits);
 }
-function formatUsageUsd(totals) {
+function formatUsageUsd(totals, modelId) {
+    if (isInternalUsageModel(modelId)) {
+        return "N/A";
+    }
     return totals.estimatedCreditsStatus === "unavailable"
-        ? "unknown"
+        ? "-"
         : formatUsd(totals.estimatedCredits * CODEX_CREDIT_COST_USD);
 }
+function isInternalUsageModel(modelId) {
+    return modelId === "codex-auto-review" || modelId === "<synthetic>";
+}
 function formatUsd(value) {
-    if (value > 0 && value < 0.0001) {
-        return "<$0.0001";
-    }
-    return value.toLocaleString("en-US", {
+    const roundedUpValue = value > 0 ? Math.ceil(value * 100) / 100 : value;
+    return roundedUpValue.toLocaleString("en-US", {
         currency: "USD",
         style: "currency",
         minimumFractionDigits: 2,
-        maximumFractionDigits: 4
+        maximumFractionDigits: 2
     });
 }
+function formatUsedPercentRange(minUsedPercent, maxUsedPercent) {
+    return minUsedPercent === maxUsedPercent
+        ? `${minUsedPercent}%`
+        : `${minUsedPercent}%->${maxUsedPercent}%`;
+}
+function buildLimitSectionSeparatorLine() {
+    return "─".repeat(LIMIT_WINDOW_COLUMNS.plan +
+        LIMIT_WINDOW_COLUMNS.window +
+        LIMIT_WINDOW_COLUMNS.used +
+        LIMIT_WINDOW_COLUMNS.date * 2 +
+        LIMIT_WINDOW_COLUMNS.value +
+        5);
+}
 function formatWindowMinutes(value) {
     const hours = value / 60;
     if (hours >= 24) {
@@ -381,7 +499,7 @@ function formatLocalDateTime(value) {
 }
 function formatUtcDay(value) {
     if (value === "unknown") {
-        return "unknown";
+        return "-";
     }
     const parts = new Intl.DateTimeFormat("en-US", {
         month: "short",
@@ -394,37 +512,221 @@ function formatUtcDay(value) {
 }
 function formatEventRange(firstEventUtcIso, lastEventUtcIso) {
     if (!firstEventUtcIso || !lastEventUtcIso) {
-        return "unknown";
+        return "-";
     }
     return `${formatLocalDateTime(firstEventUtcIso)} -> ${formatLocalDateTime(lastEventUtcIso)}`;
 }
 function pad(value, length) {
     return value.length >= length ? value.slice(0, length) : value.padEnd(length);
 }
+function formatModelUsageRow(modelId, totals, isCodexProvider) {
+    const displayModelId = modelId === "unknown" ? "-" : modelId;
+    const prefix = `${pad(displayModelId, MODEL_USAGE_COLUMNS.model)} ${pad(formatCompactTokenCount(totals.inputTokens), MODEL_USAGE_COLUMNS.input)} ${pad(formatCompactTokenCount(totals.outputTokens), MODEL_USAGE_COLUMNS.output)} ${pad(formatCompactCacheTokens(totals, totals.cacheReadInputTokens), MODEL_USAGE_COLUMNS.cacheRead)} ${pad(formatCompactCacheTokens(totals, totals.cacheWriteInputTokens), MODEL_USAGE_COLUMNS.cacheWrite)} ${pad(formatOptionalCompactTokens(totals.cacheWrite5mInputTokens), MODEL_USAGE_COLUMNS.cacheWrite5m)} ${pad(formatOptionalCompactTokens(totals.cacheWrite1hInputTokens), MODEL_USAGE_COLUMNS.cacheWrite1h)}`;
+    return isCodexProvider
+        ? `${prefix} ${pad(formatUsageUsd(totals, modelId), MODEL_USAGE_COLUMNS.value)}`
+        : `${prefix} ${pad(formatUsageCredits(totals, modelId), MODEL_USAGE_COLUMNS.credits)} ${pad(formatUsageUsd(totals, modelId), MODEL_USAGE_COLUMNS.value)}`;
+}
 function UsageBreakdownLines(props) {
     const { totals } = props;
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["input total: ", formatInteger(totals.inputTotalTokens), "  input: ", formatInteger(totals.tokenBreakdown.inputTokens), "  cacheW5m: ", formatInteger(totals.tokenBreakdown.cacheWrite5mInputTokens)] }), _jsxs(Text, { children: ["cacheW1h: ", formatInteger(totals.tokenBreakdown.cacheWrite1hInputTokens), "  cacheRead: ", formatInteger(totals.tokenBreakdown.cacheReadInputTokens), "  output: ", formatInteger(totals.outputTokens), "  reasoning: ", formatInteger(totals.reasoningOutputTokens), "  total: ", formatInteger(totals.totalTokens)] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["input: ", formatInteger(totals.inputTokens), "  output: ", formatInteger(totals.outputTokens), "  cacheRead: ", formatCacheTokens(totals, totals.cacheReadInputTokens)] }), _jsxs(Text, { children: ["cacheWrite: ", formatCacheTokens(totals, totals.cacheWriteInputTokens), "  cacheW5m: ", formatOptionalTokens(totals.cacheWrite5mInputTokens), "  cacheW1h: ", formatOptionalTokens(totals.cacheWrite1hInputTokens), "  reasoning: ", formatInteger(totals.reasoningOutputTokens), "  total: ", formatInteger(totals.totalTokens)] })] }));
+}
+function formatCacheTokens(totals, value) {
+    if (totals.cacheStatus === "unavailable") {
+        return "-";
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["input total: ", formatInteger(totals.inputTotalTokens), "  uncached: ", formatOpenAiTokens(totals, "non-cached"), "  cached: ", formatOpenAiTokens(totals, "cached")] }), _jsxs(Text, { children: ["output: ", formatInteger(totals.outputTokens), "  reasoning: ", formatInteger(totals.reasoningOutputTokens), "  total: ", formatInteger(totals.totalTokens)] })] }));
+    return formatOptionalTokens(value);
 }
-function formatOpenAiTokens(totals, kind) {
-    if (totals.tokenBreakdown.schema !== "openai" || totals.cacheStatus === "unavailable") {
-        return "unknown";
+function formatCompactCacheTokens(totals, value) {
+    if (totals.cacheStatus === "unavailable") {
+        return "-";
     }
-    return formatInteger(kind === "non-cached" ? totals.tokenBreakdown.nonCachedInputTokens : totals.tokenBreakdown.cachedInputTokens);
+    return formatOptionalCompactTokens(value);
+}
+function formatOptionalTokens(value) {
+    return value > 0 ? formatInteger(value) : "-";
+}
+function formatOptionalCompactTokens(value) {
+    return value > 0 ? formatCompactTokenCount(value) : "-";
 }
 function formatInputPerOutput(totals) {
     if (totals.outputTokens <= 0) {
-        return totals.tokenBreakdown.schema === "anthropic" ? "input:cacheW5m:cacheW1h:cacheRead:output = 0:0:0:0:0" : "uncached:cached:output = 0:0:0";
-    }
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return `input:cacheW5m:cacheW1h:cacheRead:output = ${formatInteger(Math.round(totals.tokenBreakdown.inputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.tokenBreakdown.cacheWrite5mInputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.tokenBreakdown.cacheWrite1hInputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.tokenBreakdown.cacheReadInputTokens / totals.outputTokens))}:1`;
+        return "input:cacheRead:cacheWrite:output = 0:0:0:0";
     }
     if (totals.cacheStatus === "unavailable") {
-        return "uncached:cached:output = unknown:unknown:1";
+        return `input:cacheRead:cacheWrite:output = ${formatInteger(Math.round(totals.inputTokens / totals.outputTokens))}:-:-:1`;
+    }
+    return `input:cacheRead:cacheWrite:output = ${formatInteger(Math.round(totals.inputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.cacheReadInputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.cacheWriteInputTokens / totals.outputTokens))}:1`;
+}
+function useMeasuredElementSize() {
+    const ref = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const nextSize = measureElement(ref.current);
+        setSize((current) => current.width === nextSize.width && current.height === nextSize.height ? current : nextSize);
+    });
+    return {
+        ref,
+        width: size.width,
+        height: size.height
+    };
+}
+// Walks the Yoga layout tree to get a node's absolute position/size (in terminal
+// cells). Reading it live at click time keeps hit-testing correct across resizes,
+// wrapping, and re-layouts without tracking coordinates by hand.
+function getAbsoluteRect(node) {
+    const yogaNode = node?.yogaNode;
+    if (!node || !yogaNode) {
+        return undefined;
+    }
+    let left = 0;
+    let top = 0;
+    let current = node;
+    while (current?.yogaNode) {
+        left += current.yogaNode.getComputedLeft();
+        top += current.yogaNode.getComputedTop();
+        current = current.parentNode;
+    }
+    return {
+        left,
+        top,
+        width: yogaNode.getComputedWidth(),
+        height: yogaNode.getComputedHeight()
+    };
+}
+function parseMouseClicks(chunk) {
+    const clicks = [];
+    for (const match of chunk.matchAll(SGR_MOUSE_SEQUENCE)) {
+        const buttonCode = Number(match[1]);
+        const isPress = match[4] === "M";
+        // Only react to a plain left-button press (button 0, no modifier bits). Any
+        // press carrying Shift/Ctrl/Alt or motion/wheel bits is left alone so the
+        // terminal can still use it for native text selection.
+        if (!isPress || buttonCode !== 0) {
+            continue;
+        }
+        clicks.push({ column: Number(match[2]), row: Number(match[3]) });
+    }
+    return clicks;
+}
+// Tracks the on-screen rectangle of named clickable regions (the tabs) via Ink
+// refs and resolves a click coordinate back to a region id.
+function useClickRegions() {
+    const nodesRef = useRef(new Map());
+    const refCallbacksRef = useRef(new Map());
+    const getRegionRef = useCallback((id) => {
+        const cached = refCallbacksRef.current.get(id);
+        if (cached) {
+            return cached;
+        }
+        const callback = (node) => {
+            if (node) {
+                nodesRef.current.set(id, node);
+            }
+            else {
+                nodesRef.current.delete(id);
+            }
+        };
+        refCallbacksRef.current.set(id, callback);
+        return callback;
+    }, []);
+    const resolveClick = useCallback((click) => {
+        // SGR mouse coordinates are 1-based; Ink layout coordinates are 0-based.
+        const column = click.column - 1;
+        const row = click.row - 1;
+        for (const [id, node] of nodesRef.current) {
+            const rect = getAbsoluteRect(node);
+            if (rect &&
+                column >= rect.left &&
+                column < rect.left + rect.width &&
+                row >= rect.top &&
+                row < rect.top + rect.height) {
+                return id;
+            }
+        }
+        return undefined;
+    }, []);
+    return { getRegionRef, resolveClick };
+}
+// Parses left-clicks out of Ink's raw input stream and forwards them to onClick.
+// Keyboard handling stays in useInput; this only consumes mouse reports.
+function useMouseClick(onClick) {
+    const { internal_eventEmitter } = useStdin();
+    const handlerRef = useRef(onClick);
+    handlerRef.current = onClick;
+    useEffect(() => {
+        const handleInput = (chunk) => {
+            for (const click of parseMouseClicks(chunk)) {
+                handlerRef.current(click);
+            }
+        };
+        internal_eventEmitter.on("input", handleInput);
+        return () => {
+            internal_eventEmitter.off("input", handleInput);
+        };
+    }, [internal_eventEmitter]);
+}
+function useAutoScrollOffset(selectedIndex, rowCount, viewportSize) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useEffect(() => {
+        const maxOffset = Math.max(0, rowCount - Math.max(0, viewportSize));
+        setScrollOffset((current) => {
+            let next = Math.max(0, Math.min(current, maxOffset));
+            if (selectedIndex < 0 || viewportSize <= 0) {
+                return next;
+            }
+            if (selectedIndex < next) {
+                next = selectedIndex;
+            }
+            else if (selectedIndex >= next + viewportSize) {
+                next = selectedIndex - viewportSize + 1;
+            }
+            return Math.max(0, Math.min(next, maxOffset));
+        });
+    }, [rowCount, selectedIndex, viewportSize]);
+    return scrollOffset;
+}
+function resolveScrollableViewportLayout(availableHeight, headerCount, bodyCount, footerCount) {
+    const totalHeight = Math.max(1, availableHeight || 1);
+    if (bodyCount === 0) {
+        const headerVisibleCount = Math.min(headerCount, totalHeight);
+        return {
+            headerVisibleCount,
+            bodyVisibleCount: 0,
+            footerVisibleCount: Math.min(footerCount, Math.max(0, totalHeight - headerVisibleCount))
+        };
+    }
+    let headerVisibleCount = Math.min(headerCount, totalHeight);
+    let footerVisibleCount = Math.min(footerCount, Math.max(0, totalHeight - headerVisibleCount - 1));
+    let bodyVisibleCount = Math.min(bodyCount, Math.max(0, totalHeight - headerVisibleCount - footerVisibleCount));
+    if (bodyVisibleCount === 0 && footerVisibleCount > 0) {
+        footerVisibleCount -= 1;
+        bodyVisibleCount = Math.min(bodyCount, Math.max(0, totalHeight - headerVisibleCount - footerVisibleCount));
+    }
+    if (bodyVisibleCount === 0 && headerVisibleCount > 0) {
+        headerVisibleCount -= 1;
+        bodyVisibleCount = Math.min(bodyCount, Math.max(0, totalHeight - headerVisibleCount - footerVisibleCount));
+    }
+    if (bodyVisibleCount === 0) {
+        return {
+            headerVisibleCount: 0,
+            bodyVisibleCount: Math.min(bodyCount, totalHeight),
+            footerVisibleCount: 0
+        };
+    }
+    return { headerVisibleCount, bodyVisibleCount, footerVisibleCount };
+}
+function buildScrollbarLines(viewportSize, rowCount, scrollOffset) {
+    if (viewportSize <= 0 || rowCount <= viewportSize) {
+        return [];
     }
-    return `uncached:cached:output = ${formatInteger(Math.round(totals.tokenBreakdown.nonCachedInputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.tokenBreakdown.cachedInputTokens / totals.outputTokens))}:1`;
+    const thumbSize = Math.max(1, Math.round((viewportSize * viewportSize) / rowCount));
+    const maxThumbOffset = Math.max(0, viewportSize - thumbSize);
+    const maxScrollOffset = Math.max(1, rowCount - viewportSize);
+    const thumbOffset = Math.round((Math.max(0, Math.min(scrollOffset, maxScrollOffset)) / maxScrollOffset) * maxThumbOffset);
+    return Array.from({ length: viewportSize }, (_, index) => index >= thumbOffset && index < thumbOffset + thumbSize ? SCROLLBAR_THUMB_GLYPH : SCROLLBAR_TRACK_GLYPH);
 }
 function clampSelectionIndex(value, rowCount) {
     if (rowCount === 0) {
@@ -444,7 +746,7 @@ function providerUsageScore(state) {
         return 0;
     }
     const totals = state.stats.summary.totals;
-    return totals.inputTotalTokens + totals.outputTokens;
+    return totals.inputTokens + totals.outputTokens + totals.cacheReadInputTokens + totals.cacheWriteInputTokens;
 }
 function getLimitRows(providerState) {
     if (providerState.status !== "ready") {
@@ -472,7 +774,76 @@ function parseStatsOptions(argv) {
         verbose: argv.includes("-v") || argv.includes("--verbose")
     };
 }
+function useViewportHeight() {
+    const { stdout } = useStdout();
+    const [viewportHeight, setViewportHeight] = useState(() => resolveViewportHeight(stdout.rows));
+    useEffect(() => {
+        const updateViewportHeight = () => {
+            setViewportHeight(resolveViewportHeight(stdout.rows));
+        };
+        updateViewportHeight();
+        if (!stdout.isTTY) {
+            return;
+        }
+        stdout.on("resize", updateViewportHeight);
+        return () => {
+            stdout.off("resize", updateViewportHeight);
+        };
+    }, [stdout]);
+    return viewportHeight;
+}
+function resolveViewportHeight(rows) {
+    const terminalRows = typeof rows === "number" && rows > 0 ? rows : 24;
+    // Keep Ink below the terminal height so it stays on its incremental redraw path
+    // instead of the full-screen print path that can leave the viewport scrolled.
+    return Math.max(1, terminalRows - 1);
+}
 export function main(argv = process.argv.slice(2)) {
-    render(_jsx(App, { statsOptions: parseStatsOptions(argv) }));
+    const restoreFullscreen = enterFullscreenMode(process.stdout);
+    const disableMouse = enableMouseReporting(process.stdout);
+    const exitHandler = () => {
+        disableMouse();
+        restoreFullscreen();
+    };
+    process.once("exit", exitHandler);
+    const instance = render(_jsx(App, { statsOptions: parseStatsOptions(argv) }), {
+        stdout: process.stdout,
+        stdin: process.stdin,
+        stderr: process.stderr
+    });
+    void instance.waitUntilExit().finally(() => {
+        process.off("exit", exitHandler);
+        instance.cleanup();
+        disableMouse();
+        restoreFullscreen();
+    });
+}
+function enterFullscreenMode(stdout) {
+    if (!stdout.isTTY) {
+        return () => { };
+    }
+    let restored = false;
+    stdout.write(ENTER_FULLSCREEN_MODE);
+    return () => {
+        if (restored) {
+            return;
+        }
+        restored = true;
+        stdout.write(EXIT_FULLSCREEN_MODE);
+    };
+}
+function enableMouseReporting(stdout) {
+    if (!stdout.isTTY) {
+        return () => { };
+    }
+    let disabled = false;
+    stdout.write(ENABLE_MOUSE_TRACKING);
+    return () => {
+        if (disabled) {
+            return;
+        }
+        disabled = true;
+        stdout.write(DISABLE_MOUSE_TRACKING);
+    };
 }
 main();