FN-5919: restore hidden usage toggle counts

Keep the usage indicator's Show hidden action available when persisted hidden rows no longer render.

- count hidden usage rows from both rendered windows and orphaned persisted labels
- preserve Show hidden visibility on mobile modal and desktop popover surfaces
- add regression coverage for orphaned hidden labels across both UI surfaces

Files changed:
 packages/dashboard/app/components/UsageIndicator.tsx  | 22 ++++++-
 packages/dashboard/app/components/__tests__/UsageIndicator.test.tsx | 75 ++++++++++++++++++++++
 2 files changed, 96 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-5919

Fusion-Task-Lineage: 6e4827a6-0d6f-424d-a4df-ec7185adf841
This commit is contained in:
gsxdsm
2026-06-02 22:07:32 -07:00
parent ee00d9f1b7
commit 3a5a3f2035
2 changed files with 96 additions and 1 deletions

View File

@@ -180,6 +180,26 @@ function getRenderedHiddenWindowCount(
}, 0);
}
function getRestorableHiddenWindowCount(
providerName: string,
windows: UsageWindow[],
hidden: Record<string, string[]>
): number {
const renderedHiddenCount = getRenderedHiddenWindowCount(providerName, windows, hidden);
const persistedHiddenLabels = hidden[providerName] ?? [];
if (persistedHiddenLabels.length === 0) {
return renderedHiddenCount;
}
const liveWindowLabels = new Set(windows.map((window) => window.label));
const orphanedHiddenCount = persistedHiddenLabels.reduce((count, label) => {
return count + (liveWindowLabels.has(label) ? 0 : 1);
}, 0);
return renderedHiddenCount + orphanedHiddenCount;
}
interface UsageWindowRowProps {
window: UsageWindow;
viewMode: 'used' | 'remaining';
@@ -414,7 +434,7 @@ function ProviderCard({
onMoveUp,
onMoveDown,
}: ProviderCardProps) {
const hiddenCount = getRenderedHiddenWindowCount(provider.name, provider.windows, hiddenWindows);
const hiddenCount = getRestorableHiddenWindowCount(provider.name, provider.windows, hiddenWindows);
const getStatusBadge = () => {
switch (provider.status) {
case "ok":

View File

@@ -953,6 +953,81 @@ describe("UsageIndicator", () => {
expect(screen.getByTestId("usage-show-hidden-btn")).toHaveTextContent("Show hidden (1)");
});
it("shows restorable hidden count for orphaned persisted labels on mobile/modal surfaces", () => {
localStorage.setItem(
USAGE_HIDDEN_WINDOWS_KEY,
JSON.stringify({ minimax: ["WindowGone"] })
);
mockUseUsageData.mockReturnValue(createUsageDataState({
providers: [
{
name: "minimax",
icon: "🧠",
status: "ok",
windows: [
{
label: "Live Window",
percentUsed: 25,
percentLeft: 75,
resetText: "resets in 2h",
resetMs: 7200000,
},
],
},
],
loading: false,
error: null,
lastUpdated: new Date(),
refresh: mockRefresh,
}));
render(
<UsageIndicator
isOpen={true}
onClose={mockOnClose}
projectId={TEST_PROJECT_ID}
anchorRect={null}
/>
);
const showHiddenButton = screen.getByTestId("usage-show-hidden-btn");
expect(showHiddenButton).toHaveTextContent("Show hidden (1)");
expect(document.querySelectorAll(".usage-window--hidden")).toHaveLength(0);
fireEvent.click(showHiddenButton);
expect(localStorage.getItem(USAGE_HIDDEN_WINDOWS_KEY)).toBe(JSON.stringify({}));
expect(screen.queryByTestId("usage-show-hidden-btn")).not.toBeInTheDocument();
});
it("adds orphaned persisted labels to rendered hidden counts on desktop popover surfaces", () => {
localStorage.setItem(
USAGE_HIDDEN_WINDOWS_KEY,
JSON.stringify({ Anthropic: ["Session (5h)", "WindowGone"] })
);
mockUseUsageData.mockReturnValue(createUsageDataState({
providers: mockProviders,
loading: false,
error: null,
lastUpdated: new Date(),
refresh: mockRefresh,
}));
render(
<UsageIndicator
isOpen={true}
onClose={mockOnClose}
projectId={TEST_PROJECT_ID}
anchorRect={createAnchorRect()}
/>
);
expect(document.querySelectorAll(".usage-window--hidden")).toHaveLength(1);
expect(screen.getByTestId("usage-show-hidden-btn")).toHaveTextContent("Show hidden (2)");
});
it("counts currently rendered hidden rows when persisted labels match duplicate live windows", () => {
localStorage.setItem(
USAGE_HIDDEN_WINDOWS_KEY,