letmecode 0.1.4 → 0.1.6

package/README.md

@@ -20,6 +20,7 @@ npx -y letmecode
 | `1` | Select the Copilot VS Code setup action |
 | `h` / `l` | Select a Copilot setup action |
 | `q` or `Esc` | Quit |
+| Mouse click | Click a provider tab or a section tab to switch to it. Hold `Shift` while dragging to select/copy text anywhere else. |
 
 ## Copilot
 

package/ink-app/dist/index.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
-import { Box, Text, measureElement, useApp, useInput, useStdout, 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,39 +26,26 @@ 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 = [
@@ -63,6 +59,7 @@ 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 ?? "");
@@ -73,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];
@@ -123,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;
@@ -191,7 +220,7 @@ function App(props) {
             setSelectedVerticalTabIndex((current) => (current - 1 + VERTICAL_TABS.length) % VERTICAL_TABS.length);
         }
     });
-    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, 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, 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 }, 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] })] }));
+    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") {
@@ -228,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") {
@@ -256,10 +286,13 @@ function ContentPanel(props) {
     return (_jsx(UsageByModelPanel, { stats: props.providerState.stats, selectedModelId: props.selectedModelId, availableHeight: props.availableHeight }));
 }
 function LimitWindowsPanel(props) {
+    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),
-        { key: "section-gap", text: "" },
+        ...(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)
     ];
@@ -270,55 +303,24 @@ function UsageByModelPanel(props) {
         return _jsx(Text, { color: "gray", children: "No model usage found." });
     }
     const totals = props.stats.summary.totals;
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return (_jsx(ScrollableLineViewport, { headerLines: [
-                {
-                    key: "anthropic-model-header",
-                    text: `${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`,
-                    color: "gray"
-                }
-            ], bodyLines: props.stats.modelUsage.flatMap((row) => {
-                if (row.totals.tokenBreakdown.schema !== "anthropic") {
-                    return [];
-                }
-                return [
-                    {
-                        key: `model-row:${row.modelId}`,
-                        text: `${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, row.modelId), ANTHROPIC_MODEL_USAGE_COLUMNS.credits)} ${pad(formatUsageUsd(row.totals, row.modelId), ANTHROPIC_MODEL_USAGE_COLUMNS.value)}`,
-                        inverse: props.selectedModelId === row.modelId,
-                        color: props.selectedModelId === row.modelId ? "cyan" : undefined
-                    }
-                ];
-            }), footerLines: [
-                {
-                    key: "anthropic-model-total",
-                    text: `${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)}`,
-                    color: "cyan"
-                }
-            ], selectedBodyLineKey: props.selectedModelId ? `model-row:${props.selectedModelId}` : undefined, availableHeight: props.availableHeight }));
-    }
+    const isCodexProvider = props.stats.providerId === "codex";
     return (_jsx(ScrollableLineViewport, { headerLines: [
             {
-                key: "openai-model-header",
-                text: `${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`,
+                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.flatMap((row) => {
-            if (row.totals.tokenBreakdown.schema !== "openai") {
-                return [];
-            }
-            return [
-                {
-                    key: `model-row:${row.modelId}`,
-                    text: `${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, row.modelId), OPENAI_MODEL_USAGE_COLUMNS.credits)} ${pad(formatUsageUsd(row.totals, row.modelId), OPENAI_MODEL_USAGE_COLUMNS.value)}`,
-                    inverse: props.selectedModelId === row.modelId,
-                    color: props.selectedModelId === row.modelId ? "cyan" : undefined
-                }
-            ];
-        }), footerLines: [
+        ], 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: "openai-model-total",
-                text: `${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)}`,
+                key: "model-total",
+                text: formatModelUsageRow("TOTAL", totals, isCodexProvider),
                 color: "cyan"
             }
         ], selectedBodyLineKey: props.selectedModelId ? `model-row:${props.selectedModelId}` : undefined, availableHeight: props.availableHeight }));
@@ -328,46 +330,18 @@ function DayToDayPanel(props) {
         return _jsx(Text, { color: "gray", children: "No day-by-day usage found." });
     }
     const totals = props.stats.summary.totals;
-    if (totals.tokenBreakdown.schema === "anthropic") {
-        return (_jsx(ScrollableLineViewport, { headerLines: [
-                {
-                    key: "anthropic-day-header",
-                    text: `${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`,
-                    color: "gray"
-                }
-            ], bodyLines: props.stats.dayUsage.flatMap((row) => {
-                if (row.totals.tokenBreakdown.schema !== "anthropic") {
-                    return [];
-                }
-                return [
-                    {
-                        key: `day-row:${row.dayKey}`,
-                        text: `${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)}`,
-                        inverse: props.selectedDayKey === row.dayKey,
-                        color: props.selectedDayKey === row.dayKey ? "cyan" : undefined
-                    }
-                ];
-            }), selectedBodyLineKey: props.selectedDayKey ? `day-row:${props.selectedDayKey}` : undefined, availableHeight: props.availableHeight }));
-    }
     return (_jsx(ScrollableLineViewport, { headerLines: [
             {
-                key: "openai-day-header",
-                text: `${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`,
+                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.flatMap((row) => {
-            if (row.totals.tokenBreakdown.schema !== "openai") {
-                return [];
-            }
-            return [
-                {
-                    key: `day-row:${row.dayKey}`,
-                    text: `${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)}`,
-                    inverse: props.selectedDayKey === row.dayKey,
-                    color: props.selectedDayKey === row.dayKey ? "cyan" : undefined
-                }
-            ];
-        }), selectedBodyLineKey: props.selectedDayKey ? `day-row:${props.selectedDayKey}` : undefined, availableHeight: props.availableHeight }));
+        ], 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 ?? [];
@@ -400,7 +374,7 @@ function buildLimitWindowSectionLines(scope, windows, selectedRowKey) {
         ...windows.map((window) => {
             const lineKey = getLimitRowKey(window);
             const windowLabel = formatWindowMinutes(window.windowMinutes);
-            const usedLabel = `${window.minUsedPercent}%->${window.maxUsedPercent}%`;
+            const usedLabel = formatUsedPercentRange(window.minUsedPercent, window.maxUsedPercent);
             const isSelected = selectedRowKey === lineKey;
             return {
                 key: `limit-row:${lineKey}`,
@@ -417,7 +391,7 @@ 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;
@@ -435,6 +409,26 @@ function UsageTotalsDetails(props) {
 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";
@@ -448,30 +442,41 @@ function formatUsageCredits(totals, modelId) {
     if (isInternalUsageModel(modelId)) {
         return "N/A";
     }
-    return totals.estimatedCreditsStatus === "unavailable" ? "unknown" : formatCredits(totals.estimatedCredits);
+    return totals.estimatedCreditsStatus === "unavailable" ? "-" : formatCredits(totals.estimatedCredits);
 }
 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) {
@@ -494,7 +499,7 @@ function formatLocalDateTime(value) {
 }
 function formatUtcDay(value) {
     if (value === "unknown") {
-        return "unknown";
+        return "-";
     }
     const parts = new Intl.DateTimeFormat("en-US", {
         month: "short",
@@ -507,37 +512,50 @@ 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 `uncached:cached:output = ${formatInteger(Math.round(totals.tokenBreakdown.nonCachedInputTokens / totals.outputTokens))}:${formatInteger(Math.round(totals.tokenBreakdown.cachedInputTokens / 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);
@@ -555,6 +573,101 @@ function useMeasuredElementSize() {
         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(() => {
@@ -633,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") {
@@ -687,7 +800,9 @@ function resolveViewportHeight(rows) {
 }
 export function main(argv = process.argv.slice(2)) {
     const restoreFullscreen = enterFullscreenMode(process.stdout);
+    const disableMouse = enableMouseReporting(process.stdout);
     const exitHandler = () => {
+        disableMouse();
         restoreFullscreen();
     };
     process.once("exit", exitHandler);
@@ -699,6 +814,7 @@ export function main(argv = process.argv.slice(2)) {
     void instance.waitUntilExit().finally(() => {
         process.off("exit", exitHandler);
         instance.cleanup();
+        disableMouse();
         restoreFullscreen();
     });
 }
@@ -716,4 +832,18 @@ function enterFullscreenMode(stdout) {
         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();