letmecode 0.1.0 → 0.1.2

package/README.md

@@ -1,18 +1,44 @@
-# letmecode
+# letmecode - Discover your detailed agent ussage Codex | Claude
 
-Minimal `npx`-first CLI package.
-
-## Local development
+Ussage:
 
 ```bash
-pnpm install
-pnpm start
+npx -y letmecode
 ```
 
-The Ink app source lives in `ink-app/`.
+<img width="2308" height="1491" alt="image" src="https://github.com/user-attachments/assets/f3f52d79-00e3-4ff5-bf2f-65f8be632aaa" />
+
+## Controls
+
+| Key | Action |
+| --- | --- |
+| `[` / `]` | Switch providers |
+| `Tab` / `Shift+Tab` | Switch providers when supported by the terminal |
+| `Up` / `Down` or `k` / `j` | Switch dashboard sections |
+| `Left` / `Right` | Select the previous or next table row |
+| `Enter` | Run the selected provider action |
+| `1` | Select the Copilot VS Code setup action |
+| `h` / `l` | Select a Copilot setup action |
+| `q` or `Esc` | Quit |
+
+## Copilot
 
-## Usage
+Copilot CLI usage is read from `~/.copilot/session-state`.
+
+VS Code extension usage needs file OTEL logging first. Select the `Copilot` provider, choose `Start logging VS Code` with `1` or `h` / `l`, then press `Enter`; letmecode will update the current user's VS Code settings with:
+
+```json
+{
+  "github.copilot.chat.otel.enabled": true,
+  "github.copilot.chat.otel.exporterType": "file",
+  "github.copilot.chat.otel.outfile": "~/.copilot/otel/vscode.jsonl",
+  "github.copilot.chat.otel.captureContent": false
+}
+```
+
+## Local development
 
 ```bash
-npx letmecode
+pnpm install
+pnpm start
 ```

package/ink-app/dist/index.js

@@ -1,22 +1,71 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { createProviders } from "./providers/index.js";
+import { configureCopilotVsCodeLogging, createProviders } from "./providers/index.js";
 const VERTICAL_TABS = [
-    { id: "limit-windows", label: "Limit windows" },
-    { id: "usage-by-model", label: "Usage by model" }
+    { id: "limit-windows", label: "Limits" },
+    { id: "summary", label: "Summary" },
+    { id: "day-to-day-analyses", label: "day to day" },
+    { id: "usage-by-model", label: "by model" }
 ];
-function App() {
+const CODEX_CREDIT_COST_USD = 0.01;
+const VERTICAL_TAB_WIDTH = 12;
+const LIMIT_WINDOW_COLUMNS = {
+    plan: 8,
+    window: 8,
+    used: 10,
+    date: 17,
+    value: 10
+};
+const MODEL_USAGE_COLUMNS = {
+    model: 17,
+    input: 12,
+    cached: 12,
+    nonCached: 12,
+    output: 11,
+    credits: 12,
+    value: 12
+};
+const DAY_USAGE_COLUMNS = {
+    day: 11,
+    events: 6,
+    input: 11,
+    output: 10,
+    value: 10
+};
+const COPILOT_ACTIONS = [
+    { id: "vscode", label: "Start logging VS Code", enabled: true }
+];
+function App(props) {
     const { exit } = useApp();
     const providers = React.useState(() => createProviders())[0];
     const [providerStates, setProviderStates] = useState(providers.map((provider) => ({ provider, status: "loading" })));
-    const [selectedProviderIndex, setSelectedProviderIndex] = useState(0);
+    const [selectedProviderId, setSelectedProviderId] = useState(providers[0]?.id ?? "");
+    const [hasUserSelectedProvider, setHasUserSelectedProvider] = useState(false);
     const [selectedVerticalTabIndex, setSelectedVerticalTabIndex] = useState(0);
+    const [selectedLimitRowIndex, setSelectedLimitRowIndex] = useState(0);
+    const [selectedDayRowIndex, setSelectedDayRowIndex] = useState(0);
+    const [selectedModelRowIndex, setSelectedModelRowIndex] = useState(0);
+    const [selectedCopilotActionIndex, setSelectedCopilotActionIndex] = useState(0);
+    const [copilotActionMessage, setCopilotActionMessage] = useState();
+    const sortedProviderStates = React.useMemo(() => sortProviderStatesByUsage(providerStates), [providerStates]);
+    const selectedProviderIndex = Math.max(0, sortedProviderStates.findIndex((state) => state.provider.id === selectedProviderId));
+    const selectedProvider = sortedProviderStates[selectedProviderIndex];
+    const selectedVerticalTab = VERTICAL_TABS[selectedVerticalTabIndex];
+    const limitRows = getLimitRows(selectedProvider);
+    const dayRows = getDayRows(selectedProvider);
+    const modelRows = getModelRows(selectedProvider);
+    const activeLimitRowIndex = clampSelectionIndex(selectedLimitRowIndex, limitRows.length);
+    const activeDayRowIndex = clampSelectionIndex(selectedDayRowIndex, dayRows.length);
+    const activeModelRowIndex = clampSelectionIndex(selectedModelRowIndex, modelRows.length);
+    const selectedLimitRow = activeLimitRowIndex >= 0 ? limitRows[activeLimitRowIndex] : undefined;
+    const selectedDayRow = activeDayRowIndex >= 0 ? dayRows[activeDayRowIndex] : undefined;
+    const selectedModelRow = activeModelRowIndex >= 0 ? modelRows[activeModelRowIndex] : undefined;
     useEffect(() => {
         let cancelled = false;
         for (const provider of providers) {
             void provider
-                .getStats()
+                .getStats(props.statsOptions)
                 .then((stats) => {
                 if (cancelled) {
                     return;
@@ -38,18 +87,75 @@ function App() {
         return () => {
             cancelled = true;
         };
-    }, [providers]);
+    }, [props.statsOptions, providers]);
+    useEffect(() => {
+        if (hasUserSelectedProvider || providerStates.some((state) => state.status === "loading")) {
+            return;
+        }
+        const topProvider = sortedProviderStates[0];
+        if (providerUsageScore(topProvider) <= 0) {
+            return;
+        }
+        setSelectedProviderId(topProvider.provider.id);
+    }, [hasUserSelectedProvider, providerStates, sortedProviderStates]);
     useInput((input, key) => {
         if (input === "q" || key.escape) {
             exit();
             return;
         }
-        if ((input === "\t" && !key.shift) || key.rightArrow) {
-            setSelectedProviderIndex((current) => (current + 1) % providerStates.length);
+        if (selectedProvider.provider.id === "copilot" && input >= "1" && input <= String(COPILOT_ACTIONS.length)) {
+            setSelectedCopilotActionIndex(Number(input) - 1);
+            return;
+        }
+        if (selectedProvider.provider.id === "copilot" && key.return) {
+            runCopilotAction(COPILOT_ACTIONS[selectedCopilotActionIndex].id, setCopilotActionMessage);
+            return;
+        }
+        if (selectedProvider.provider.id === "copilot" && input === "l") {
+            setSelectedCopilotActionIndex((current) => (current + 1) % COPILOT_ACTIONS.length);
+            return;
+        }
+        if (selectedProvider.provider.id === "copilot" && input === "h") {
+            setSelectedCopilotActionIndex((current) => (current - 1 + COPILOT_ACTIONS.length) % COPILOT_ACTIONS.length);
+            return;
+        }
+        if (key.rightArrow) {
+            if (selectedVerticalTab.id === "limit-windows") {
+                setSelectedLimitRowIndex(clampSelectionIndex(activeLimitRowIndex + 1, limitRows.length));
+                return;
+            }
+            if (selectedVerticalTab.id === "usage-by-model") {
+                setSelectedModelRowIndex(clampSelectionIndex(activeModelRowIndex + 1, modelRows.length));
+                return;
+            }
+            if (selectedVerticalTab.id === "day-to-day-analyses") {
+                setSelectedDayRowIndex(clampSelectionIndex(activeDayRowIndex + 1, dayRows.length));
+                return;
+            }
+        }
+        if (key.leftArrow) {
+            if (selectedVerticalTab.id === "limit-windows") {
+                setSelectedLimitRowIndex(clampSelectionIndex(activeLimitRowIndex - 1, limitRows.length));
+                return;
+            }
+            if (selectedVerticalTab.id === "usage-by-model") {
+                setSelectedModelRowIndex(clampSelectionIndex(activeModelRowIndex - 1, modelRows.length));
+                return;
+            }
+            if (selectedVerticalTab.id === "day-to-day-analyses") {
+                setSelectedDayRowIndex(clampSelectionIndex(activeDayRowIndex - 1, dayRows.length));
+                return;
+            }
+        }
+        if ((key.tab && !key.shift) || input === "]") {
+            setSelectedProviderId(sortedProviderStates[(selectedProviderIndex + 1) % sortedProviderStates.length].provider.id);
+            setHasUserSelectedProvider(true);
             return;
         }
-        if ((input === "\t" && key.shift) || key.leftArrow) {
-            setSelectedProviderIndex((current) => (current - 1 + providerStates.length) % providerStates.length);
+        if ((key.tab && key.shift) || input === "[") {
+            setSelectedProviderId(sortedProviderStates[(selectedProviderIndex - 1 + sortedProviderStates.length) % sortedProviderStates.length]
+                .provider.id);
+            setHasUserSelectedProvider(true);
             return;
         }
         if (key.downArrow || input === "j") {
@@ -60,9 +166,39 @@ function App() {
             setSelectedVerticalTabIndex((current) => (current - 1 + VERTICAL_TABS.length) % VERTICAL_TABS.length);
         }
     });
-    const selectedProvider = providerStates[selectedProviderIndex];
-    const selectedVerticalTab = VERTICAL_TABS[selectedVerticalTabIndex];
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "letmecode usage dashboard" }), _jsx(Text, { color: "gray", children: "tab/shift+tab or left/right to switch providers, j/k or up/down for details, q to quit" }), _jsx(Box, { marginTop: 1, children: providerStates.map((state, index) => (_jsx(ProviderTab, { label: state.provider.label, active: index === selectedProviderIndex, status: state.status }, state.provider.id))) }), _jsx(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, paddingY: 0, flexDirection: "column", children: _jsx(SummarySection, { providerState: selectedProvider }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Box, { flexDirection: "column", width: 22, 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 }) })] }), 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, 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] }));
+}
+function CopilotActionsPanel(props) {
+    if (props.providerState.provider.id !== "copilot") {
+        return null;
+    }
+    const hasNoUsage = props.providerState.status === "ready" && props.providerState.stats.summary.tokenEvents === 0;
+    const accentColor = hasNoUsage ? "red" : "cyan";
+    return (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: accentColor, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: accentColor, children: "Copilot setup" }), _jsx(Box, { children: COPILOT_ACTIONS.map((action, index) => (_jsx(Box, { marginRight: 1, children: _jsx(Text, { inverse: index === (props.selectedActionIndex ?? 0), bold: hasNoUsage && action.id === "vscode", color: action.enabled ? (hasNoUsage && action.id === "vscode" ? accentColor : undefined) : "gray", children: `${index + 1} ${action.label}` }) }, action.id))) }), _jsx(Text, { color: hasNoUsage ? accentColor : "gray", children: "Press 1 or h/l to select an action, enter to run selected." }), props.actionMessage ? _jsx(Text, { children: props.actionMessage }) : null] }));
+}
+function runCopilotAction(actionId, setCopilotActionMessage) {
+    setCopilotActionMessage("Updating VS Code settings...");
+    void configureCopilotVsCodeLogging()
+        .then((result) => {
+        setCopilotActionMessage(formatCopilotLoggingResult(result));
+    })
+        .catch((error) => {
+        const message = error instanceof Error ? error.message : String(error);
+        setCopilotActionMessage(`Failed to update VS Code settings: ${message}`);
+    });
+}
+function formatCopilotLoggingResult(result) {
+    const status = result.changed ? "VS Code logging enabled" : "VS Code logging already enabled";
+    return [
+        `${status}: ${result.outfile}`,
+        `Settings written to: ${result.settingsPath}`,
+        'Open "Preferences: Open User Settings (JSON)" in VS Code and verify that this is the active file.',
+        "Expected settings:",
+        '"github.copilot.chat.otel.enabled": true',
+        '"github.copilot.chat.otel.exporterType": "file"',
+        '"github.copilot.chat.otel.captureContent": false',
+        `"github.copilot.chat.otel.outfile": "${result.outfile}"`
+    ].join("\n");
 }
 function ProviderTab(props) {
     const statusColor = props.status === "error" ? "red" : props.status === "loading" ? "yellow" : "green";
@@ -70,17 +206,12 @@ function ProviderTab(props) {
     return (_jsx(Box, { marginRight: 1, children: _jsx(Text, { inverse: props.active, color: statusColor, children: tabLabel }) }));
 }
 function VerticalTab(props) {
-    return (_jsx(Text, { inverse: props.active, children: props.active ? ` ${props.label} ` : ` ${props.label}` }));
+    return (_jsx(Box, { width: VERTICAL_TAB_WIDTH, children: _jsx(Text, { wrap: "truncate-end", inverse: props.active, children: props.active ? ` ${props.label} ` : ` ${props.label}` }) }));
 }
-function SummarySection(props) {
-    if (props.providerState.status === "loading") {
-        return (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: props.providerState.provider.label }), _jsx(Text, { color: "yellow", children: "Loading stats from local sessions..." })] }));
-    }
-    if (props.providerState.status === "error") {
-        return (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: props.providerState.provider.label }), _jsxs(Text, { color: "red", children: ["Failed to load provider stats: ", props.providerState.errorMessage] })] }));
-    }
-    const { summary } = props.providerState.stats;
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: props.providerState.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)] }), _jsxs(Text, { children: ["input: ", formatInteger(summary.totals.inputTokens), "  cached: ", formatInteger(summary.totals.cachedInputTokens), "  non-cached: ", formatInteger(summary.totals.nonCachedInputTokens)] }), _jsxs(Text, { children: ["output: ", formatInteger(summary.totals.outputTokens), "  reasoning: ", formatInteger(summary.totals.reasoningOutputTokens), "  total: ", formatInteger(summary.totals.totalTokens)] }), _jsxs(Text, { children: ["estimated credits: ", formatCredits(summary.totals.estimatedCredits), "  models: ", summary.distinctModels.join(", ") || "none", "  plans: ", summary.distinctPlanTypes.join(", ") || "none"] })] }));
+function SummaryPanel(props) {
+    const { summary } = props.stats;
+    const inputPerOutput = formatInputPerOutput(summary.totals);
+    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)] }), _jsxs(Text, { children: ["input: ", formatInteger(summary.totals.inputTokens), "  cached: ", formatCacheTokens(summary.totals, "cached"), "  non-cached: ", formatCacheTokens(summary.totals, "non-cached")] }), _jsxs(Text, { children: ["output: ", formatInteger(summary.totals.outputTokens), "  reasoning: ", formatInteger(summary.totals.reasoningOutputTokens), "  total: ", formatInteger(summary.totals.totalTokens)] }), _jsxs(Text, { children: ["estimated credits: ", formatUsageCredits(summary.totals)] }), _jsxs(Text, { children: ["IpO: ", inputPerOutput.cached, ":", inputPerOutput.nonCached, ":", inputPerOutput.output] }), _jsxs(Text, { children: ["models: ", summary.distinctModels.join(", ") || "none"] }), _jsxs(Text, { children: ["plans: ", summary.distinctPlanTypes.join(", ") || "none"] })] }));
 }
 function ContentPanel(props) {
     if (props.providerState.status === "loading") {
@@ -90,21 +221,28 @@ 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 });
+        return _jsx(LimitWindowsPanel, { stats: props.providerState.stats, selectedRowKey: props.selectedLimitRowKey });
+    }
+    if (props.tabId === "summary") {
+        return _jsx(SummaryPanel, { stats: props.providerState.stats });
     }
-    return _jsx(UsageByModelPanel, { stats: props.providerState.stats });
+    if (props.tabId === "day-to-day-analyses") {
+        return _jsx(DayToDayPanel, { stats: props.providerState.stats, selectedDayKey: props.selectedDayKey });
+    }
+    return _jsx(UsageByModelPanel, { stats: props.providerState.stats, selectedModelId: props.selectedModelId });
 }
 function LimitWindowsPanel(props) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Primary" }), _jsx(LimitWindowSection, { windows: props.stats.primaryLimitWindows }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { bold: true, children: "Secondary" }), _jsx(LimitWindowSection, { windows: props.stats.secondaryLimitWindows })] }));
+    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: [_jsx(Text, { color: "gray", children: "plan       limit      window    used          start                end                  events" }), props.windows.map((window) => {
+    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}%`;
-                return (_jsxs(Text, { children: [pad(window.planType, 10), " ", pad(window.limitId, 10), " ", pad(windowLabel, 8), " ", pad(usedLabel, 12), " ", pad(shortIso(window.startTimeIso), 20), " ", pad(shortIso(window.endTimeIso), 20), " ", formatInteger(window.eventCount)] }, `${window.scope}-${window.planType}-${window.limitId}-${window.endTimeIso}`));
+                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)));
             })] }));
 }
 function UsageByModelPanel(props) {
@@ -112,17 +250,79 @@ function UsageByModelPanel(props) {
         return _jsx(Text, { color: "gray", children: "No model usage found." });
     }
     const totals = props.stats.summary.totals;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "model            input        cached       non-cached   output       credits      events" }), props.stats.modelUsage.map((row) => (_jsxs(Text, { children: [pad(row.modelId, 16), " ", pad(formatInteger(row.totals.inputTokens), 12), " ", pad(formatInteger(row.totals.cachedInputTokens), 12), " ", pad(formatInteger(row.totals.nonCachedInputTokens), 12), " ", pad(formatInteger(row.totals.outputTokens), 12), " ", pad(formatCredits(row.totals.estimatedCredits), 12), " ", pad(formatInteger(row.totals.eventCount), 8)] }, row.modelId))), _jsxs(Text, { color: "cyan", children: [pad("TOTAL", 16), " ", pad(formatInteger(totals.inputTokens), 12), " ", pad(formatInteger(totals.cachedInputTokens), 12), " ", pad(formatInteger(totals.nonCachedInputTokens), 12), " ", pad(formatInteger(totals.outputTokens), 12), " ", pad(formatCredits(totals.estimatedCredits), 12), " ", pad(formatInteger(totals.eventCount), 8)] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("model", MODEL_USAGE_COLUMNS.model), " ", pad("input", MODEL_USAGE_COLUMNS.input), " ", pad("cached", MODEL_USAGE_COLUMNS.cached), " ", pad("non-cached", MODEL_USAGE_COLUMNS.nonCached), " ", pad("output", MODEL_USAGE_COLUMNS.output), " ", pad("credits", MODEL_USAGE_COLUMNS.credits), " value"] }), props.stats.modelUsage.map((row) => {
+                const isSelected = props.selectedModelId === row.modelId;
+                return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(row.modelId, MODEL_USAGE_COLUMNS.model), " ", pad(formatInteger(row.totals.inputTokens), MODEL_USAGE_COLUMNS.input), " ", pad(formatCacheTokens(row.totals, "cached"), MODEL_USAGE_COLUMNS.cached), " ", pad(formatCacheTokens(row.totals, "non-cached"), MODEL_USAGE_COLUMNS.nonCached), " ", pad(formatInteger(row.totals.outputTokens), MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(row.totals), MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(row.totals), MODEL_USAGE_COLUMNS.value)] }, row.modelId));
+            }), _jsxs(Text, { color: "cyan", children: [pad("TOTAL", MODEL_USAGE_COLUMNS.model), " ", pad(formatInteger(totals.inputTokens), MODEL_USAGE_COLUMNS.input), " ", pad(formatCacheTokens(totals, "cached"), MODEL_USAGE_COLUMNS.cached), " ", pad(formatCacheTokens(totals, "non-cached"), MODEL_USAGE_COLUMNS.nonCached), " ", pad(formatInteger(totals.outputTokens), MODEL_USAGE_COLUMNS.output), " ", pad(formatUsageCredits(totals), MODEL_USAGE_COLUMNS.credits), " ", pad(formatUsageUsd(totals), MODEL_USAGE_COLUMNS.value)] })] }));
+}
+function DayToDayPanel(props) {
+    if (props.stats.dayUsage.length === 0) {
+        return _jsx(Text, { color: "gray", children: "No day-by-day usage found." });
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: [pad("day", DAY_USAGE_COLUMNS.day), " ", pad("events", DAY_USAGE_COLUMNS.events), " ", pad("input", DAY_USAGE_COLUMNS.input), " ", pad("output", DAY_USAGE_COLUMNS.output), " value"] }), props.stats.dayUsage.map((row) => {
+                const isSelected = props.selectedDayKey === row.dayKey;
+                return (_jsxs(Text, { inverse: isSelected, color: isSelected ? "cyan" : undefined, children: [pad(formatUtcDay(row.dayKey), DAY_USAGE_COLUMNS.day), " ", pad(formatInteger(row.totals.eventCount), DAY_USAGE_COLUMNS.events), " ", pad(formatInteger(row.totals.inputTokens), DAY_USAGE_COLUMNS.input), " ", pad(formatInteger(row.totals.outputTokens), DAY_USAGE_COLUMNS.output), " ", pad(formatUsageUsd(row.totals), DAY_USAGE_COLUMNS.value)] }, row.dayKey));
+            })] }));
+}
+function SelectionDetailsPanel(props) {
+    if (props.providerState.status !== "ready") {
+        return null;
+    }
+    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 })] }));
+    }
+    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: ["input: ", formatInteger(row.totals.inputTokens), "  cached: ", formatCacheTokens(row.totals, "cached")] }), _jsxs(Text, { children: ["non-cached: ", formatCacheTokens(row.totals, "non-cached"), "  output: ", formatInteger(row.totals.outputTokens)] }), _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 null;
+}
+function UsageTotalsDetails(props) {
+    const { totals } = props;
+    const inputPerOutput = formatInputPerOutput(totals);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Total credits burned: ", formatUsageCredits(totals)] }), _jsxs(Text, { children: ["Credits Value (@ $0.01/credit): ", formatUsageUsd(totals)] }), _jsxs(Text, { children: ["IpO: ", inputPerOutput.cached, ":", inputPerOutput.nonCached, ":", inputPerOutput.output] })] }));
 }
 function formatInteger(value) {
     return Math.round(value).toLocaleString("en-US");
 }
 function formatCredits(value) {
+    if (value > 0 && value < 0.01) {
+        return "<0.01";
+    }
     return value.toLocaleString("en-US", {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
     });
 }
+function formatUsageCredits(totals) {
+    return totals.estimatedCreditsStatus === "unavailable" ? "unknown" : formatCredits(totals.estimatedCredits);
+}
+function formatUsageUsd(totals) {
+    return totals.estimatedCreditsStatus === "unavailable"
+        ? "unknown"
+        : formatUsd(totals.estimatedCredits * CODEX_CREDIT_COST_USD);
+}
+function formatCacheTokens(totals, kind) {
+    if (totals.cacheStatus === "unavailable") {
+        return "unknown";
+    }
+    return formatInteger(kind === "cached" ? totals.cachedInputTokens : totals.nonCachedInputTokens);
+}
+function formatUsd(value) {
+    if (value > 0 && value < 0.0001) {
+        return "<$0.0001";
+    }
+    return value.toLocaleString("en-US", {
+        currency: "USD",
+        style: "currency",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 4
+    });
+}
 function formatWindowMinutes(value) {
     const hours = value / 60;
     if (hours >= 24) {
@@ -130,13 +330,101 @@ function formatWindowMinutes(value) {
     }
     return `${hours.toFixed(2)}h`;
 }
-function shortIso(value) {
-    return value.replace(".000Z", "Z").slice(0, 19) + "Z";
+function formatLocalDateTime(value) {
+    const parts = new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "2-digit",
+        year: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        hourCycle: "h23"
+    }).formatToParts(new Date(value));
+    const lookup = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+    return `${lookup.day} ${lookup.month} ${lookup.year} ${lookup.hour}:${lookup.minute}`;
+}
+function formatUtcDay(value) {
+    if (value === "unknown") {
+        return "unknown";
+    }
+    const parts = new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "2-digit",
+        year: "2-digit",
+        timeZone: "UTC"
+    }).formatToParts(new Date(`${value}T00:00:00.000Z`));
+    const lookup = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+    return `${lookup.day} ${lookup.month} ${lookup.year}`;
+}
+function formatEventRange(firstEventUtcIso, lastEventUtcIso) {
+    if (!firstEventUtcIso || !lastEventUtcIso) {
+        return "unknown";
+    }
+    return `${formatLocalDateTime(firstEventUtcIso)} -> ${formatLocalDateTime(lastEventUtcIso)}`;
 }
 function pad(value, length) {
     return value.length >= length ? value.slice(0, length) : value.padEnd(length);
 }
-export function main() {
-    render(_jsx(App, {}));
+function formatInputPerOutput(totals) {
+    if (totals.cacheStatus === "unavailable") {
+        return { cached: "unknown", nonCached: "unknown", output: "1" };
+    }
+    if (totals.outputTokens <= 0) {
+        return { cached: "0", nonCached: "0", output: "0" };
+    }
+    return {
+        cached: formatInteger(Math.round(totals.cachedInputTokens / totals.outputTokens)),
+        nonCached: formatInteger(Math.round(totals.nonCachedInputTokens / totals.outputTokens)),
+        output: "1"
+    };
+}
+function clampSelectionIndex(value, rowCount) {
+    if (rowCount === 0) {
+        return -1;
+    }
+    return Math.max(0, Math.min(value, rowCount - 1));
+}
+function sortProviderStatesByUsage(states) {
+    return states
+        .map((state, index) => ({ state, index }))
+        .sort((left, right) => providerUsageScore(right.state) - providerUsageScore(left.state) ||
+        left.index - right.index)
+        .map((entry) => entry.state);
+}
+function providerUsageScore(state) {
+    if (state.status !== "ready") {
+        return 0;
+    }
+    const totals = state.stats.summary.totals;
+    return totals.inputTokens + totals.cachedInputTokens + totals.outputTokens;
+}
+function getLimitRows(providerState) {
+    if (providerState.status !== "ready") {
+        return [];
+    }
+    return [...providerState.stats.primaryLimitWindows, ...providerState.stats.secondaryLimitWindows];
+}
+function getModelRows(providerState) {
+    if (providerState.status !== "ready") {
+        return [];
+    }
+    return providerState.stats.modelUsage;
+}
+function getDayRows(providerState) {
+    if (providerState.status !== "ready") {
+        return [];
+    }
+    return providerState.stats.dayUsage;
+}
+function getLimitRowKey(row) {
+    return `${row.scope}-${row.planType}-${row.limitId}-${row.startTimeUtcIso}-${row.endTimeUtcIso}`;
+}
+function parseStatsOptions(argv) {
+    return {
+        verbose: argv.includes("-v") || argv.includes("--verbose")
+    };
+}
+export function main(argv = process.argv.slice(2)) {
+    render(_jsx(App, { statsOptions: parseStatsOptions(argv) }));
 }
 main();