fix(quota): guard remaining usage percent (#1242)

* fix(quota): guard remaining usage percent

* test(quota): cover non-finite usage percents

* fix(ui): clean up virtual scroll frame

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/web/server/lib/quota/utils/formatters.js

@@ -40,9 +40,10 @@ export const calculateResetAfterSeconds = (resetAt) => {
 export const toUsageWindow = ({ usedPercent, windowSeconds, resetAt, valueLabel }) => {
   const resetAfterSeconds = calculateResetAfterSeconds(resetAt);
   const resetFormatted = hasResetTimestamp(resetAt) ? formatResetTime(resetAt) : null;
+  const hasFiniteUsedPercent = typeof usedPercent === 'number' && Number.isFinite(usedPercent);
   return {
     usedPercent,
-    remainingPercent: usedPercent !== null ? Math.max(0, 100 - usedPercent) : null,
+    remainingPercent: hasFiniteUsedPercent ? Math.max(0, 100 - usedPercent) : null,
     windowSeconds: windowSeconds ?? null,
     resetAfterSeconds,
     resetAt,

packages/web/server/lib/quota/utils/formatters.test.js

@@ -32,4 +32,23 @@ describe('toUsageWindow', () => {
     expect(usageWindow.resetAtFormatted).toBe(formatResetTime(0));
     expect(usageWindow.resetAfterFormatted).toBe(formatResetTime(0));
   });
+
+  it('does not derive remaining percent from missing usage', () => {
+    expect(toUsageWindow({ usedPercent: undefined }).remainingPercent).toBeNull();
+  });
+
+  it('does not derive remaining percent from non-finite usage', () => {
+    expect(toUsageWindow({ usedPercent: NaN }).remainingPercent).toBeNull();
+    expect(toUsageWindow({ usedPercent: Infinity }).remainingPercent).toBeNull();
+    expect(toUsageWindow({ usedPercent: -Infinity }).remainingPercent).toBeNull();
+    expect(toUsageWindow({ usedPercent: null }).remainingPercent).toBeNull();
+  });
+
+  it('derives remaining percent from a valid usage value', () => {
+    expect(toUsageWindow({ usedPercent: 60 }).remainingPercent).toBe(40);
+  });
+
+  it('clamps remaining percent to zero when usage exceeds 100', () => {
+    expect(toUsageWindow({ usedPercent: 110 }).remainingPercent).toBe(0);
+  });
 });