letmecode 0.1.24 → 0.1.25

package/ink-app/dist/cli-options.js

@@ -58,12 +58,12 @@ export function buildHelpText() {
         "  --no-usage         Disable anonymous usage reporting",
         "",
         "Controls:",
-        "  [ ] / Tab          Switch providers",
-        "  Shift+Tab          Switch providers backward",
-        "  j / k              Switch dashboard sections",
-        "  Up / Down          Switch dashboard sections",
-        "  Left / Right       Select the previous or next row",
-        "  1, h / l, Enter    Run Copilot setup actions",
+        "  Up / Down          Select Provider, View, or table rows",
+        "  Left / Right       Change the selected Provider or View",
+        "  Left / Right       Do nothing when table rows are selected",
+        "  Tab / Shift+Tab    Switch providers without leaving the table",
+        "  [ / ]              Switch views without leaving the table",
+        "  1, Enter           Run Copilot setup actions",
         "  q or Esc           Quit",
         "",
         "Trace logging:",

package/ink-app/dist/index.js

@@ -7,18 +7,19 @@ import { reportAnonymousUsage } from "./reporting.js";
 import { estimateLimitFullValue } from "./providers/limits.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
+// This makes the controls 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 DETAIL_TABS = [
+const DETAIL_VIEWS = [
     { id: "limit-windows", label: "Limits" },
     { id: "summary", label: "Summary" },
     { id: "day-to-day-analyses", label: "Daily" },
     { id: "usage-by-model", label: "Models" }
 ];
+const CONTROL_SECTIONS = ["provider", "view", "table"];
 const CODEX_CREDIT_COST_USD = 0.01;
 const LIMIT_TABLE_HEADERS = ["Scope", "Plan", "Models", "Window", "Used", "Start", "End", "API eq.", "Full"];
 const DAILY_TABLE_HEADERS = ["Day", "Ev", "Input", "Output", "C read", "C write", "API eq."];
@@ -39,26 +40,29 @@ 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 [selectedDetailTabIndex, setSelectedDetailTabIndex] = useState(0);
-    const [selectedLimitRowIndex, setSelectedLimitRowIndex] = useState(0);
-    const [selectedDayRowIndex, setSelectedDayRowIndex] = useState(0);
-    const [selectedModelRowIndex, setSelectedModelRowIndex] = useState(0);
+    const [selectedDetailViewIndex, setSelectedDetailViewIndex] = useState(0);
+    const [selectedControlSectionIndex, setSelectedControlSectionIndex] = useState(0);
+    const [selectedLimitRowIndex, setSelectedLimitRowIndex] = useState();
+    const [selectedDayRowIndex, setSelectedDayRowIndex] = useState();
+    const [selectedModelRowIndex, setSelectedModelRowIndex] = useState();
     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];
-    const selectedDetailTab = DETAIL_TABS[selectedDetailTabIndex];
+    const selectedDetailView = DETAIL_VIEWS[selectedDetailViewIndex];
+    const selectedControlSection = CONTROL_SECTIONS[selectedControlSectionIndex];
+    const isTableControlSelected = selectedControlSection === "table";
     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;
+    const activeLimitRowIndex = clampOptionalSelectionIndex(selectedLimitRowIndex, limitRows.length);
+    const activeDayRowIndex = clampOptionalSelectionIndex(selectedDayRowIndex, dayRows.length);
+    const activeModelRowIndex = clampOptionalSelectionIndex(selectedModelRowIndex, modelRows.length);
+    const selectedLimitRow = isTableControlSelected && activeLimitRowIndex >= 0 ? limitRows[activeLimitRowIndex] : undefined;
+    const selectedDayRow = isTableControlSelected && activeDayRowIndex >= 0 ? dayRows[activeDayRowIndex] : undefined;
+    const selectedModelRow = isTableControlSelected && activeModelRowIndex >= 0 ? modelRows[activeModelRowIndex] : undefined;
     useEffect(() => {
         let cancelled = false;
         for (const provider of providers) {
@@ -110,6 +114,11 @@ function App(props) {
             // Anonymous usage reporting is best-effort and must never disturb the TUI.
         });
     }, [props.usageReportingEnabled, providerStates]);
+    const clearSelectedTableRows = useCallback(() => {
+        setSelectedLimitRowIndex(undefined);
+        setSelectedDayRowIndex(undefined);
+        setSelectedModelRowIndex(undefined);
+    }, []);
     useMouseClick((click) => {
         const regionId = resolveClick(click);
         if (!regionId) {
@@ -118,23 +127,36 @@ function App(props) {
         if (regionId.startsWith("provider:")) {
             setSelectedProviderId(regionId.slice("provider:".length));
             setHasUserSelectedProvider(true);
+            setSelectedControlSectionIndex(CONTROL_SECTIONS.indexOf("provider"));
+            clearSelectedTableRows();
             return;
         }
-        if (regionId.startsWith("vtab:")) {
-            setSelectedDetailTabIndex(Number(regionId.slice("vtab:".length)));
+        if (regionId.startsWith("view:")) {
+            setSelectedDetailViewIndex(Number(regionId.slice("view:".length)));
+            setSelectedControlSectionIndex(CONTROL_SECTIONS.indexOf("view"));
+            clearSelectedTableRows();
         }
     });
     const moveSelectedTableRow = useCallback((delta) => {
-        if (selectedDetailTab.id === "limit-windows") {
-            setSelectedLimitRowIndex(clampSelectionIndex(activeLimitRowIndex + delta, limitRows.length));
+        if (selectedDetailView.id === "limit-windows") {
+            if (limitRows.length === 0) {
+                return;
+            }
+            setSelectedLimitRowIndex(clampSelectionIndex(activeLimitRowIndex < 0 ? 0 : activeLimitRowIndex + delta, limitRows.length));
             return;
         }
-        if (selectedDetailTab.id === "usage-by-model") {
-            setSelectedModelRowIndex(clampSelectionIndex(activeModelRowIndex + delta, modelRows.length));
+        if (selectedDetailView.id === "usage-by-model") {
+            if (modelRows.length === 0) {
+                return;
+            }
+            setSelectedModelRowIndex(clampSelectionIndex(activeModelRowIndex < 0 ? 0 : activeModelRowIndex + delta, modelRows.length));
             return;
         }
-        if (selectedDetailTab.id === "day-to-day-analyses") {
-            setSelectedDayRowIndex(clampSelectionIndex(activeDayRowIndex + delta, dayRows.length));
+        if (selectedDetailView.id === "day-to-day-analyses") {
+            if (dayRows.length === 0) {
+                return;
+            }
+            setSelectedDayRowIndex(clampSelectionIndex(activeDayRowIndex < 0 ? 0 : activeDayRowIndex + delta, dayRows.length));
         }
     }, [
         activeDayRowIndex,
@@ -143,8 +165,59 @@ function App(props) {
         dayRows.length,
         limitRows.length,
         modelRows.length,
-        selectedDetailTab.id
+        selectedDetailView.id
     ]);
+    const canMoveTableRowUp = useCallback(() => {
+        if (selectedDetailView.id === "limit-windows") {
+            return activeLimitRowIndex > 0;
+        }
+        if (selectedDetailView.id === "usage-by-model") {
+            return activeModelRowIndex > 0;
+        }
+        if (selectedDetailView.id === "day-to-day-analyses") {
+            return activeDayRowIndex > 0;
+        }
+        return false;
+    }, [activeDayRowIndex, activeLimitRowIndex, activeModelRowIndex, selectedDetailView.id]);
+    const moveSelectionDown = useCallback(() => {
+        if (selectedControlSection === "table") {
+            moveSelectedTableRow(1);
+            return;
+        }
+        setSelectedControlSectionIndex((current) => {
+            const next = Math.min(current + 1, CONTROL_SECTIONS.length - 1);
+            if (CONTROL_SECTIONS[next] === "table") {
+                moveSelectedTableRow(1);
+            }
+            return next;
+        });
+    }, [moveSelectedTableRow, selectedControlSection]);
+    const moveSelectionUp = useCallback(() => {
+        if (selectedControlSection === "table" && canMoveTableRowUp()) {
+            moveSelectedTableRow(-1);
+            return;
+        }
+        if (selectedControlSection === "table") {
+            clearSelectedTableRows();
+        }
+        setSelectedControlSectionIndex((current) => Math.max(current - 1, 0));
+    }, [canMoveTableRowUp, clearSelectedTableRows, moveSelectedTableRow, selectedControlSection]);
+    const changeSelectedProvider = useCallback((delta) => {
+        setSelectedProviderId(sortedProviderStates[(selectedProviderIndex + delta + sortedProviderStates.length) % sortedProviderStates.length].provider.id);
+        setHasUserSelectedProvider(true);
+    }, [selectedProviderIndex, sortedProviderStates]);
+    const changeSelectedDetailView = useCallback((delta) => {
+        setSelectedDetailViewIndex((current) => (current + delta + DETAIL_VIEWS.length) % DETAIL_VIEWS.length);
+    }, []);
+    const changeSelectedSectionValue = useCallback((delta) => {
+        if (selectedControlSection === "provider") {
+            changeSelectedProvider(delta);
+            return;
+        }
+        if (selectedControlSection === "view") {
+            changeSelectedDetailView(delta);
+        }
+    }, [changeSelectedDetailView, changeSelectedProvider, selectedControlSection]);
     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.
@@ -160,45 +233,42 @@ function App(props) {
             return;
         }
         if (selectedProvider.provider.id === "copilot" && key.return) {
-            runCopilotAction(COPILOT_ACTIONS[selectedCopilotActionIndex].id, setCopilotActionMessage);
+            runCopilotAction(setCopilotActionMessage);
             return;
         }
-        if (selectedProvider.provider.id === "copilot" && input === "l") {
-            setSelectedCopilotActionIndex((current) => (current + 1) % COPILOT_ACTIONS.length);
+        if (key.tab && !key.shift) {
+            changeSelectedProvider(1);
             return;
         }
-        if (selectedProvider.provider.id === "copilot" && input === "h") {
-            setSelectedCopilotActionIndex((current) => (current - 1 + COPILOT_ACTIONS.length) % COPILOT_ACTIONS.length);
+        if (key.tab && key.shift) {
+            changeSelectedProvider(-1);
             return;
         }
-        if (key.rightArrow) {
-            setSelectedDetailTabIndex((current) => (current + 1) % DETAIL_TABS.length);
+        if (input === "]") {
+            changeSelectedDetailView(1);
             return;
         }
-        if (key.leftArrow) {
-            setSelectedDetailTabIndex((current) => (current - 1 + DETAIL_TABS.length) % DETAIL_TABS.length);
+        if (input === "[") {
+            changeSelectedDetailView(-1);
             return;
         }
-        if ((key.tab && !key.shift) || input === "]") {
-            setSelectedProviderId(sortedProviderStates[(selectedProviderIndex + 1) % sortedProviderStates.length].provider.id);
-            setHasUserSelectedProvider(true);
+        if (key.rightArrow) {
+            changeSelectedSectionValue(1);
             return;
         }
-        if ((key.tab && key.shift) || input === "[") {
-            setSelectedProviderId(sortedProviderStates[(selectedProviderIndex - 1 + sortedProviderStates.length) % sortedProviderStates.length]
-                .provider.id);
-            setHasUserSelectedProvider(true);
+        if (key.leftArrow) {
+            changeSelectedSectionValue(-1);
             return;
         }
-        if (key.downArrow || input === "j") {
-            moveSelectedTableRow(1);
+        if (key.downArrow) {
+            moveSelectionDown();
             return;
         }
-        if (key.upArrow || input === "k") {
-            moveSelectedTableRow(-1);
+        if (key.upArrow) {
+            moveSelectionUp();
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: viewportHeight, overflow: "hidden", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "LetMeCode Usage Dashboard" }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: "white", backgroundColor: "green", children: " beta " })] }), _jsxs(Box, { 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, { 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, { 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" })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: viewportHeight, overflow: "hidden", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "LetMeCode Usage Dashboard" }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: "white", backgroundColor: "green", children: " beta " })] }), _jsxs(Box, { children: [_jsx(ControlSectionLabel, { label: "Provider", active: selectedControlSection === "provider" }), sortedProviderStates.map((state) => (_jsx(ProviderOption, { 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(ControlSectionLabel, { label: "View", active: selectedControlSection === "view" }), DETAIL_VIEWS.map((view, index) => (_jsx(ViewOption, { label: view.label, active: index === selectedDetailViewIndex, regionRef: getRegionRef(`view:${index}`) }, view.id)))] }), _jsxs(Box, { 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, viewId: selectedDetailView.id, selectedLimitRowKey: selectedLimitRow ? getLimitRowKey(selectedLimitRow) : undefined, selectedDayKey: selectedDayRow?.dayKey, selectedModelId: selectedModelRow?.modelId, availableHeight: contentPanelHeight }) }) }), _jsx(SelectionDetailsPanel, { providerState: selectedProvider, viewId: selectedDetailView.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, { 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: "\u2191/\u2193 move \u00B7 \u2190/\u2192 selected \u00B7 Tab provider \u00B7 [/] view \u00B7 q quit" })] }));
 }
 function CopilotActionsPanel(props) {
     if (props.providerState.provider.id !== "copilot") {
@@ -206,9 +276,9 @@ function CopilotActionsPanel(props) {
     }
     const hasNoUsage = props.providerState.status === "ready" && props.providerState.stats.summary.tokenEvents === 0;
     const accentColor = hasNoUsage ? "red" : "cyan";
-    return (_jsxs(Box, { 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] }));
+    return (_jsxs(Box, { 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 to select an action, enter to run selected." }), props.actionMessage ? _jsx(Text, { children: props.actionMessage }) : null] }));
 }
-function runCopilotAction(actionId, setCopilotActionMessage) {
+function runCopilotAction(setCopilotActionMessage) {
     setCopilotActionMessage("Updating VS Code settings...");
     void configureCopilotVsCodeLogging()
         .then((result) => {
@@ -232,14 +302,17 @@ function formatCopilotLoggingResult(result) {
         `"github.copilot.chat.otel.outfile": "${result.outfile}"`
     ].join("\n");
 }
-function ProviderTab(props) {
+function ProviderOption(props) {
     const statusColor = props.status === "error" ? "red" : props.status === "loading" ? "yellow" : "green";
-    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 }) }));
+    const optionLabel = props.active ? `[${props.label}]` : ` ${props.label} `;
+    return (_jsx(Box, { marginRight: 2, ref: props.regionRef, children: _jsx(Text, { color: statusColor, bold: props.active, children: optionLabel }) }));
+}
+function ControlSectionLabel(props) {
+    return (_jsxs(Text, { color: props.active ? "cyan" : "gray", bold: props.active, children: [props.active ? "› " : "  ", pad(props.label, 10)] }));
 }
-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 ViewOption(props) {
+    const optionLabel = props.active ? `[${props.label}]` : ` ${props.label} `;
+    return (_jsx(Box, { marginRight: 2, ref: props.regionRef, children: _jsx(Text, { wrap: "truncate-end", bold: props.active, children: optionLabel }) }));
 }
 function SummaryPanel(props) {
     const { summary } = props.stats;
@@ -262,13 +335,13 @@ function ContentPanel(props) {
     if (props.providerState.status === "error") {
         return _jsxs(Text, { color: "red", children: ["Provider error: ", props.providerState.errorMessage] });
     }
-    if (props.tabId === "limit-windows") {
+    if (props.viewId === "limit-windows") {
         return (_jsx(LimitWindowsPanel, { stats: props.providerState.stats, selectedRowKey: props.selectedLimitRowKey, availableHeight: props.availableHeight }));
     }
-    if (props.tabId === "summary") {
+    if (props.viewId === "summary") {
         return _jsx(SummaryPanel, { stats: props.providerState.stats });
     }
-    if (props.tabId === "day-to-day-analyses") {
+    if (props.viewId === "day-to-day-analyses") {
         return (_jsx(DayToDayPanel, { stats: props.providerState.stats, selectedDayKey: props.selectedDayKey, availableHeight: props.availableHeight }));
     }
     return (_jsx(UsageByModelPanel, { stats: props.providerState.stats, selectedModelId: props.selectedModelId, availableHeight: props.availableHeight }));
@@ -463,15 +536,15 @@ function SelectionDetailsPanel(props) {
     if (props.providerState.status !== "ready") {
         return null;
     }
-    if (props.tabId === "limit-windows" && props.selectedLimitRow) {
+    if (props.viewId === "limit-windows" && props.selectedLimitRow) {
         const row = props.selectedLimitRow;
         return (_jsxs(DetailsPanelFrame, { children: [_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", width: 25, children: [_jsx(DetailRow, { label: "Plan", value: row.planType }), _jsx(DetailRow, { label: "Models", value: formatLimitWindowModels(row) }), _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) })] }), _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.cacheReadStatus, row.totals.cacheReadInputTokens) }), _jsx(DetailRow, { label: "Cache write", value: formatCacheTokens(row.totals.cacheWriteStatus, row.totals.cacheWriteInputTokens) }), _jsx(DetailRow, { label: "Output", value: formatInteger(row.totals.outputTokens) }), _jsx(DetailRow, { label: "Total", value: formatInteger(row.totals.totalTokens) })] })] }), _jsx(DetailRow, { label: "API eq.", value: formatUsageUsd(row.totals), note: "API equivalent cost" }), _jsx(DetailRow, { label: "Full value", value: formatLimitFullValueRange(row.totals, row.maxUsedPercent), note: "API equivalent cost if 100% will be used" })] }));
     }
-    if (props.tabId === "day-to-day-analyses" && props.selectedDayRow) {
+    if (props.viewId === "day-to-day-analyses" && props.selectedDayRow) {
         const row = props.selectedDayRow;
         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) {
+    if (props.viewId === "usage-by-model" && props.selectedModelRow) {
         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;
@@ -534,21 +607,6 @@ function formatCompactNumber(value) {
         minimumFractionDigits: 0
     });
 }
-function formatCredits(value) {
-    if (value > 0 && value < 0.01) {
-        return "<0.01";
-    }
-    return value.toLocaleString("en-US", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    });
-}
-function formatUsageCredits(totals, modelId) {
-    if (isInternalUsageModel(modelId)) {
-        return "N/A";
-    }
-    return totals.estimatedCreditsStatus === "unavailable" ? "-" : formatCredits(totals.estimatedCredits);
-}
 function formatUsageUsd(totals, modelId) {
     if (isInternalUsageModel(modelId)) {
         return "N/A";
@@ -664,13 +722,6 @@ function formatUsedPercentRange(minUsedPercent, maxUsedPercent) {
         ? fmt(minUsedPercent)
         : `${fmt(minUsedPercent)}–${fmt(maxUsedPercent)}`;
 }
-function formatWindowMinutes(value) {
-    const hours = value / 60;
-    if (hours >= 24) {
-        return `${(hours / 24).toFixed(2)}d`;
-    }
-    return `${hours.toFixed(2)}h`;
-}
 function formatCompactWindowMinutes(value) {
     const hours = value / 60;
     if (hours >= 24) {
@@ -843,7 +894,7 @@ function parseMouseClicks(chunk) {
     }
     return clicks;
 }
-// Tracks the on-screen rectangle of named clickable regions (the tabs) via Ink
+// Tracks the on-screen rectangle of named clickable regions via Ink
 // refs and resolves a click coordinate back to a region id.
 function useClickRegions() {
     const nodesRef = useRef(new Map());
@@ -966,6 +1017,12 @@ function clampSelectionIndex(value, rowCount) {
     }
     return Math.max(0, Math.min(value, rowCount - 1));
 }
+function clampOptionalSelectionIndex(value, rowCount) {
+    if (value === undefined) {
+        return -1;
+    }
+    return clampSelectionIndex(value, rowCount);
+}
 function sortProviderStatesByUsage(states) {
     return states
         .map((state, index) => ({ state, index }))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "letmecode",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Terminal AI usage dashboard for Codex, Claude, Copilot, and Antigravity.",
   "author": "Devforth (https://devforth.io)",
   "license": "MIT",