letmecode 0.1.12 → 0.1.13

package/ink-app/dist/index.js

@@ -12,43 +12,38 @@ 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 = [
+const DETAIL_TABS = [
     { 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" }
+    { id: "day-to-day-analyses", label: "Daily" },
+    { id: "usage-by-model", label: "Models" }
 ];
 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: 11,
-    output: 10,
-    cacheRead: 11,
-    cacheWrite: 11,
-    cacheWrite5m: 10,
-    cacheWrite1h: 10,
-    credits: 12,
-    value: 12
-};
-const DAY_USAGE_COLUMNS = {
-    day: 11,
-    events: 6,
-    input: 11,
-    output: 10,
-    cacheRead: 11,
-    cacheWrite: 11,
-    cacheWrite5m: 10,
-    cacheWrite1h: 10,
-    value: 10
-};
+const LIMIT_TABLE_COLUMNS = [
+    { header: "Plan", width: 5 },
+    { header: "Window", width: 6 },
+    { header: "Used", width: 8 },
+    { header: "Start", width: 14 },
+    { header: "End", width: 14 },
+    { header: "API eq.", width: 8 }
+];
+const DAILY_TABLE_COLUMNS = [
+    { header: "Day", width: 9 },
+    { header: "Ev", width: 5 },
+    { header: "Input", width: 8 },
+    { header: "Output", width: 7 },
+    { header: "C read", width: 8 },
+    { header: "C write", width: 7 },
+    { header: "API eq.", width: 7 }
+];
+const MODEL_TABLE_COLUMNS = [
+    { header: "Model", width: 16 },
+    { header: "Input", width: 7 },
+    { header: "Output", width: 7 },
+    { header: "C read", width: 7 },
+    { header: "C write", width: 7 },
+    { header: "API eq.", width: 7 }
+];
 const COPILOT_ACTIONS = [
     { id: "vscode", label: "Start logging VS Code", enabled: true }
 ];
@@ -65,7 +60,7 @@ function App(props) {
     const [providerStates, setProviderStates] = useState(providers.map((provider) => ({ provider, status: "loading" })));
     const [selectedProviderId, setSelectedProviderId] = useState(providers[0]?.id ?? "");
     const [hasUserSelectedProvider, setHasUserSelectedProvider] = useState(false);
-    const [selectedVerticalTabIndex, setSelectedVerticalTabIndex] = useState(0);
+    const [selectedDetailTabIndex, setSelectedDetailTabIndex] = useState(0);
     const [selectedLimitRowIndex, setSelectedLimitRowIndex] = useState(0);
     const [selectedDayRowIndex, setSelectedDayRowIndex] = useState(0);
     const [selectedModelRowIndex, setSelectedModelRowIndex] = useState(0);
@@ -75,7 +70,7 @@ function App(props) {
     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 selectedDetailTab = DETAIL_TABS[selectedDetailTabIndex];
     const limitRows = getLimitRows(selectedProvider);
     const dayRows = getDayRows(selectedProvider);
     const modelRows = getModelRows(selectedProvider);
@@ -145,9 +140,30 @@ function App(props) {
             return;
         }
         if (regionId.startsWith("vtab:")) {
-            setSelectedVerticalTabIndex(Number(regionId.slice("vtab:".length)));
+            setSelectedDetailTabIndex(Number(regionId.slice("vtab:".length)));
         }
     });
+    const moveSelectedTableRow = useCallback((delta) => {
+        if (selectedDetailTab.id === "limit-windows") {
+            setSelectedLimitRowIndex(clampSelectionIndex(activeLimitRowIndex + delta, limitRows.length));
+            return;
+        }
+        if (selectedDetailTab.id === "usage-by-model") {
+            setSelectedModelRowIndex(clampSelectionIndex(activeModelRowIndex + delta, modelRows.length));
+            return;
+        }
+        if (selectedDetailTab.id === "day-to-day-analyses") {
+            setSelectedDayRowIndex(clampSelectionIndex(activeDayRowIndex + delta, dayRows.length));
+        }
+    }, [
+        activeDayRowIndex,
+        activeLimitRowIndex,
+        activeModelRowIndex,
+        dayRows.length,
+        limitRows.length,
+        modelRows.length,
+        selectedDetailTab.id
+    ]);
     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.
@@ -175,32 +191,12 @@ function App(props) {
             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;
-            }
+            setSelectedDetailTabIndex((current) => (current + 1) % DETAIL_TABS.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;
-            }
+            setSelectedDetailTabIndex((current) => (current - 1 + DETAIL_TABS.length) % DETAIL_TABS.length);
+            return;
         }
         if ((key.tab && !key.shift) || input === "]") {
             setSelectedProviderId(sortedProviderStates[(selectedProviderIndex + 1) % sortedProviderStates.length].provider.id);
@@ -214,14 +210,14 @@ function App(props) {
             return;
         }
         if (key.downArrow || input === "j") {
-            setSelectedVerticalTabIndex((current) => (current + 1) % VERTICAL_TABS.length);
+            moveSelectedTableRow(1);
             return;
         }
         if (key.upArrow || input === "k") {
-            setSelectedVerticalTabIndex((current) => (current - 1 + VERTICAL_TABS.length) % VERTICAL_TABS.length);
+            moveSelectedTableRow(-1);
         }
     });
-    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] })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: viewportHeight, overflow: "hidden", children: [_jsx(Text, { bold: true, color: "cyan", children: "letmecode usage dashboard" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Provider  " }), 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, { children: [_jsx(Text, { color: "gray", children: "View      " }), DETAIL_TABS.map((tab, index) => (_jsx(DetailTab, { label: tab.label, active: index === selectedDetailTabIndex, regionRef: getRegionRef(`vtab:${index}`) }, tab.id)))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [_jsx(Box, { flexGrow: 1, overflow: "hidden", children: _jsx(Box, { ref: contentPanelRef, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: _jsx(ContentPanel, { providerState: selectedProvider, tabId: selectedDetailTab.id, selectedLimitRowKey: selectedLimitRow ? getLimitRowKey(selectedLimitRow) : undefined, selectedDayKey: selectedDayRow?.dayKey, selectedModelId: selectedModelRow?.modelId, availableHeight: contentPanelHeight }) }) }), _jsx(SelectionDetailsPanel, { providerState: selectedProvider, tabId: selectedDetailTab.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] }), _jsx(Text, { color: "gray", children: "Tab provider \u00B7 \u2190/\u2192 view \u00B7 \u2191/\u2193 row \u00B7 q quit" })] }));
 }
 function CopilotActionsPanel(props) {
     if (props.providerState.provider.id !== "copilot") {
@@ -257,16 +253,23 @@ 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, ref: props.regionRef, children: _jsx(Text, { inverse: props.active, color: statusColor, children: tabLabel }) }));
+    const tabLabel = props.active ? `[${props.label}]` : ` ${props.label} `;
+    return (_jsx(Box, { marginRight: 2, ref: props.regionRef, children: _jsx(Text, { color: statusColor, bold: props.active, children: tabLabel }) }));
 }
-function VerticalTab(props) {
-    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 DetailTab(props) {
+    const tabLabel = props.active ? `[${props.label}]` : ` ${props.label} `;
+    return (_jsx(Box, { marginRight: 2, ref: props.regionRef, children: _jsx(Text, { wrap: "truncate-end", bold: props.active, children: tabLabel }) }));
 }
 function SummaryPanel(props) {
     const { summary } = props.stats;
-    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"] })] }));
+    const totals = summary.totals;
+    const period = resolveSummaryPeriod(props.stats.dayUsage);
+    const cacheRatio = resolveCacheRatio(totals);
+    const averageTokensPerEvent = totals.eventCount > 0 ? totals.totalTokens / totals.eventCount : 0;
+    const costPerEvent = totals.eventCount > 0
+        ? (totals.estimatedCredits * CODEX_CREDIT_COST_USD) / totals.eventCount
+        : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: [props.stats.providerLabel, " overview"] }), _jsx(Text, { children: " " }), _jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", width: 45, children: [_jsx(DetailRow, { label: "Plan", value: summary.distinctPlanTypes.join(", ") || "none" }), _jsx(DetailRow, { label: "Models", value: summary.distinctModels.join(", ") || "none" }), _jsx(DetailRow, { label: "Period", value: period }), _jsx(Text, { children: " " }), _jsx(Text, { color: "cyan", children: "Usage" }), _jsx(DetailRow, { label: "Events", value: formatInteger(totals.eventCount) }), _jsx(DetailRow, { label: "Input", value: formatOverviewTokenCount(totals.inputTokens) }), _jsx(DetailRow, { label: "Output", value: formatOverviewTokenCount(totals.outputTokens) }), _jsx(DetailRow, { label: "Cache read", value: formatCacheOverviewTokenCount(totals, totals.cacheReadInputTokens) }), _jsx(DetailRow, { label: "Reasoning", value: formatOverviewTokenCount(totals.reasoningOutputTokens) }), _jsx(DetailRow, { label: "Total", value: formatOverviewTokenCount(totals.totalTokens) }), _jsx(DetailRow, { label: "API equiv.", value: formatUsageUsd(totals) })] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Efficiency" }), _jsx(DetailRow, { label: "Cache ratio", value: formatPercent(cacheRatio) }), _jsx(DetailRow, { label: "Input/output", value: formatInputOutputRatio(totals) }), _jsx(DetailRow, { label: "Avg/event", value: `${formatOverviewTokenCount(averageTokensPerEvent)} tokens` }), _jsx(DetailRow, { label: "Cost/event", value: formatUnitUsd(costPerEvent) }), _jsx(Text, { children: " " }), _jsx(Text, { color: "cyan", children: "Data source" }), _jsx(DetailRow, { label: "Files", value: formatInteger(summary.filesScanned) }), _jsx(DetailRow, { label: "Lines", value: formatInteger(summary.linesRead) }), _jsx(DetailRow, { label: "Path", value: summary.rootPath })] })] })] }));
 }
 function ContentPanel(props) {
     if (props.providerState.status === "loading") {
@@ -287,62 +290,27 @@ 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),
-        ...(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)
+        ...buildLimitWindowTableLines("primary", "Primary limits", props.stats.primaryLimitWindows, props.selectedRowKey),
+        { key: "section-gap", text: "" },
+        ...buildLimitWindowTableLines("secondary", "Secondary limits", props.stats.secondaryLimitWindows, props.selectedRowKey)
     ];
-    return (_jsx(ScrollableLineViewport, { bodyLines: bodyLines, selectedBodyLineKey: props.selectedRowKey ? `limit-row:${props.selectedRowKey}` : undefined, availableHeight: props.availableHeight }));
+    return (_jsx(ScrollableLineViewport, { bodyLines: bodyLines, 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;
-    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 }));
+    const bodyLines = buildModelUsageTableLines(props.stats.modelUsage, totals, props.selectedModelId);
+    return (_jsx(ScrollableLineViewport, { bodyLines: bodyLines, 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;
-    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 }));
+    const bodyLines = buildDailyUsageTableLines(props.stats.dayUsage, props.selectedDayKey);
+    return (_jsx(ScrollableLineViewport, { bodyLines: bodyLines, selectedBodyLineKey: props.selectedDayKey ? `day-row:${props.selectedDayKey}` : undefined, availableHeight: props.availableHeight }));
 }
 function ScrollableLineViewport(props) {
     const headerLines = props.headerLines ?? [];
@@ -362,28 +330,146 @@ function ScrollableLineViewport(props) {
 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) {
+function buildTableBorder(columns, left, middle, right) {
+    return `${left}${columns.map((column) => "─".repeat(column.width + 2)).join(middle)}${right}`;
+}
+function buildTableRow(columns, cells) {
+    return `│${columns.map((column, index) => ` ${pad(cells[index] ?? "", column.width)} `).join("│")}│`;
+}
+function buildLimitWindowTableLines(scope, title, windows, selectedRowKey) {
     if (windows.length === 0) {
-        return [{ key: `${scope}-empty`, text: "No windows found.", color: "gray" }];
+        return [
+            { key: `${scope}-title`, text: title, bold: true },
+            { key: `${scope}-empty`, text: "No windows found.", color: "gray" }
+        ];
     }
     return [
+        { key: `${scope}-title`, text: title, bold: true },
+        {
+            key: `${scope}-top-border`,
+            text: buildTableBorder(LIMIT_TABLE_COLUMNS, "┌", "┬", "┐"),
+            color: "gray"
+        },
         {
             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`,
+            text: buildTableRow(LIMIT_TABLE_COLUMNS, LIMIT_TABLE_COLUMNS.map((column) => column.header)),
+            color: "gray"
+        },
+        {
+            key: `${scope}-header-border`,
+            text: buildTableBorder(LIMIT_TABLE_COLUMNS, "├", "┼", "┤"),
             color: "gray"
         },
         ...windows.map((window) => {
             const lineKey = getLimitRowKey(window);
-            const windowLabel = formatWindowMinutes(window.windowMinutes);
+            const windowLabel = formatCompactWindowMinutes(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)}`,
+                text: buildTableRow(LIMIT_TABLE_COLUMNS, [
+                    window.planType,
+                    windowLabel,
+                    usedLabel,
+                    formatCompactLocalDateTime(window.startTimeUtcIso),
+                    formatCompactLocalDateTime(window.endTimeUtcIso),
+                    formatUsd(window.totals.estimatedCredits * CODEX_CREDIT_COST_USD)
+                ]),
+                inverse: isSelected,
+                color: isSelected ? "cyan" : undefined
+            };
+        }),
+        {
+            key: `${scope}-bottom-border`,
+            text: buildTableBorder(LIMIT_TABLE_COLUMNS, "└", "┴", "┘"),
+            color: "gray"
+        }
+    ];
+}
+function buildDailyUsageTableLines(rows, selectedDayKey) {
+    return [
+        { key: "daily-title", text: "Daily usage", bold: true },
+        {
+            key: "daily-top-border",
+            text: buildTableBorder(DAILY_TABLE_COLUMNS, "┌", "┬", "┐"),
+            color: "gray"
+        },
+        {
+            key: "daily-header",
+            text: buildTableRow(DAILY_TABLE_COLUMNS, DAILY_TABLE_COLUMNS.map((column) => column.header)),
+            color: "gray"
+        },
+        {
+            key: "daily-header-border",
+            text: buildTableBorder(DAILY_TABLE_COLUMNS, "├", "┼", "┤"),
+            color: "gray"
+        },
+        ...rows.map((row) => {
+            const isSelected = selectedDayKey === row.dayKey;
+            return {
+                key: `day-row:${row.dayKey}`,
+                text: buildTableRow(DAILY_TABLE_COLUMNS, [
+                    formatUtcDay(row.dayKey),
+                    formatCompactTokenCount(row.totals.eventCount),
+                    formatCompactTokenCount(row.totals.inputTokens),
+                    formatCompactTokenCount(row.totals.outputTokens),
+                    formatCompactCacheTokens(row.totals, row.totals.cacheReadInputTokens),
+                    formatCompactCacheTokens(row.totals, row.totals.cacheWriteInputTokens),
+                    formatUsageUsd(row.totals)
+                ]),
                 inverse: isSelected,
                 color: isSelected ? "cyan" : undefined
             };
-        })
+        }),
+        {
+            key: "daily-bottom-border",
+            text: buildTableBorder(DAILY_TABLE_COLUMNS, "└", "┴", "┘"),
+            color: "gray"
+        }
+    ];
+}
+function buildModelUsageTableLines(rows, totals, selectedModelId) {
+    return [
+        { key: "model-title", text: "Model usage", bold: true },
+        {
+            key: "model-top-border",
+            text: buildTableBorder(MODEL_TABLE_COLUMNS, "┌", "┬", "┐"),
+            color: "gray"
+        },
+        {
+            key: "model-header",
+            text: buildTableRow(MODEL_TABLE_COLUMNS, MODEL_TABLE_COLUMNS.map((column) => column.header)),
+            color: "gray"
+        },
+        {
+            key: "model-header-border",
+            text: buildTableBorder(MODEL_TABLE_COLUMNS, "├", "┼", "┤"),
+            color: "gray"
+        },
+        ...rows.map((row) => {
+            const isSelected = selectedModelId === row.modelId;
+            return {
+                key: `model-row:${row.modelId}`,
+                text: formatModelUsageTableRow(row.modelId, row.totals),
+                inverse: isSelected,
+                color: isSelected ? "cyan" : undefined
+            };
+        }),
+        {
+            key: "model-total-border",
+            text: buildTableBorder(MODEL_TABLE_COLUMNS, "├", "┼", "┤"),
+            color: "gray"
+        },
+        {
+            key: "model-total",
+            text: formatModelUsageTableRow("TOTAL", totals),
+            color: "cyan"
+        },
+        {
+            key: "model-bottom-border",
+            text: buildTableBorder(MODEL_TABLE_COLUMNS, "└", "┴", "┘"),
+            color: "gray"
+        }
     ];
 }
 function SelectionDetailsPanel(props) {
@@ -392,17 +478,23 @@ 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: ", 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 })] }));
+        return (_jsx(DetailsPanelFrame, { children: _jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", width: 25, children: [_jsx(DetailRow, { label: "Plan", value: row.planType }), _jsx(DetailRow, { label: "Window", value: formatCompactWindowMinutes(row.windowMinutes) }), _jsx(DetailRow, { label: "Usage", value: formatUsedPercentRange(row.minUsedPercent, row.maxUsedPercent) }), _jsx(DetailRow, { label: "Events", value: formatInteger(row.eventCount) }), _jsx(DetailRow, { label: "API eq.", value: formatUsageUsd(row.totals) })] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(DetailRow, { label: "Period", value: `${formatCompactLocalDateTime(row.startTimeUtcIso)} → ${formatCompactLocalDateTime(row.endTimeUtcIso)}` }), _jsx(DetailRow, { label: "Input", value: formatInteger(row.totals.inputTokens) }), _jsx(DetailRow, { label: "Cache read", value: formatCacheTokens(row.totals, row.totals.cacheReadInputTokens) }), _jsx(DetailRow, { label: "Cache write", value: formatCacheTokens(row.totals, row.totals.cacheWriteInputTokens) }), _jsx(DetailRow, { label: "Output", value: formatInteger(row.totals.outputTokens) }), _jsx(DetailRow, { label: "Total", value: formatInteger(row.totals.totalTokens) })] })] }) }));
     }
     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 })] }));
+        return (_jsxs(DetailsPanelFrame, { children: [_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, modelId: props.selectedModelRow.modelId })] }));
+        return (_jsxs(DetailsPanelFrame, { children: [_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 DetailsPanelFrame(props) {
+    return (_jsxs(Box, { marginTop: 1, borderStyle: "round", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Details" }), props.children] }));
+}
+function DetailRow(props) {
+    return (_jsxs(Text, { children: [pad(props.label, 14), props.value] }));
+}
 function UsageTotalsDetails(props) {
     const { totals } = props;
     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)] })] }));
@@ -410,6 +502,28 @@ function UsageTotalsDetails(props) {
 function formatInteger(value) {
     return Math.round(value).toLocaleString("en-US");
 }
+function formatOverviewTokenCount(value) {
+    const roundedValue = Math.round(value);
+    if (roundedValue >= 1000000000) {
+        return `${formatFixedCompactNumber(roundedValue / 1000000000)}B`;
+    }
+    if (roundedValue >= 1000000) {
+        return `${formatFixedCompactNumber(roundedValue / 1000000)}M`;
+    }
+    if (roundedValue >= 1000) {
+        return `${formatFixedCompactNumber(roundedValue / 1000)}K`;
+    }
+    return formatInteger(roundedValue);
+}
+function formatCacheOverviewTokenCount(totals, value) {
+    return totals.cacheStatus === "unavailable" ? "-" : formatOverviewTokenCount(value);
+}
+function formatFixedCompactNumber(value) {
+    return value.toLocaleString("en-US", {
+        maximumFractionDigits: value < 10 ? 2 : 1,
+        minimumFractionDigits: 0
+    });
+}
 function formatCompactTokenCount(value) {
     const roundedValue = Math.round(value);
     if (roundedValue < 1000) {
@@ -465,18 +579,51 @@ function formatUsd(value) {
         maximumFractionDigits: 2
     });
 }
+function formatUnitUsd(value) {
+    if (!Number.isFinite(value)) {
+        return "-";
+    }
+    return value.toLocaleString("en-US", {
+        currency: "USD",
+        style: "currency",
+        minimumFractionDigits: value < 0.01 && value > 0 ? 4 : 3,
+        maximumFractionDigits: value < 0.01 && value > 0 ? 4 : 3
+    });
+}
+function formatPercent(value) {
+    if (!Number.isFinite(value)) {
+        return "-";
+    }
+    return `${value.toLocaleString("en-US", {
+        maximumFractionDigits: 1,
+        minimumFractionDigits: 0
+    })}%`;
+}
+function resolveCacheRatio(totals) {
+    if (totals.cacheStatus === "unavailable") {
+        return NaN;
+    }
+    const inputPool = totals.inputTokens +
+        totals.cacheReadInputTokens +
+        totals.cacheWriteInputTokens;
+    return inputPool > 0
+        ? (totals.cacheReadInputTokens / inputPool) * 100
+        : 0;
+}
+function formatInputOutputRatio(totals) {
+    if (totals.outputTokens <= 0) {
+        return "-";
+    }
+    return `${(totals.inputTokens / totals.outputTokens).toLocaleString("en-US", {
+        maximumFractionDigits: 1,
+        minimumFractionDigits: 0
+    })} : 1`;
+}
 function formatUsedPercentRange(minUsedPercent, maxUsedPercent) {
+    const fmt = (v) => `${Math.round(v)}%`;
     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);
+        ? fmt(minUsedPercent)
+        : `${fmt(minUsedPercent)}–${fmt(maxUsedPercent)}`;
 }
 function formatWindowMinutes(value) {
     const hours = value / 60;
@@ -485,6 +632,13 @@ function formatWindowMinutes(value) {
     }
     return `${hours.toFixed(2)}h`;
 }
+function formatCompactWindowMinutes(value) {
+    const hours = value / 60;
+    if (hours >= 24) {
+        return `${formatCompactNumber(hours / 24)}d`;
+    }
+    return `${formatCompactNumber(hours)}h`;
+}
 function formatLocalDateTime(value) {
     const parts = new Intl.DateTimeFormat("en-US", {
         month: "short",
@@ -498,6 +652,29 @@ function formatLocalDateTime(value) {
     const lookup = Object.fromEntries(parts.map((part) => [part.type, part.value]));
     return `${lookup.day} ${lookup.month} ${lookup.year} ${lookup.hour}:${lookup.minute}`;
 }
+function formatCompactLocalDateTime(value) {
+    const parts = new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "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.hour}:${lookup.minute}`;
+}
+function resolveSummaryPeriod(dayUsage) {
+    const timestamps = dayUsage.flatMap((row) => [
+        row.firstEventUtcIso,
+        row.lastEventUtcIso
+    ]).filter((value) => Boolean(value));
+    if (timestamps.length === 0) {
+        return "-";
+    }
+    const sortedTimestamps = timestamps.sort();
+    return `${formatCompactLocalDateTime(sortedTimestamps[0])} → ${formatCompactLocalDateTime(sortedTimestamps[sortedTimestamps.length - 1])}`;
+}
 function formatUtcDay(value) {
     if (value === "unknown") {
         return "-";
@@ -520,12 +697,16 @@ function formatEventRange(firstEventUtcIso, lastEventUtcIso) {
 function pad(value, length) {
     return value.length >= length ? value.slice(0, length) : value.padEnd(length);
 }
-function formatModelUsageRow(modelId, totals, isCodexProvider) {
+function formatModelUsageTableRow(modelId, totals) {
     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)}`;
+    return buildTableRow(MODEL_TABLE_COLUMNS, [
+        displayModelId,
+        formatCompactTokenCount(totals.inputTokens),
+        formatCompactTokenCount(totals.outputTokens),
+        formatCompactCacheTokens(totals, totals.cacheReadInputTokens),
+        formatCompactCacheTokens(totals, totals.cacheWriteInputTokens),
+        formatUsageUsd(totals, modelId)
+    ]);
 }
 function UsageBreakdownLines(props) {
     const { totals } = props;