From d5be235b6fedd2c2f8e3d1d1e2b9a5ea0de33ed8 Mon Sep 17 00:00:00 2001
From: Michael Wu <michaelmwu@gmail.com>
Date: Sun, 16 Aug 2026 09:13:33 +0900
Subject: [PATCH] fix(app): truncate provider balance reset values

---
 .../app/e2e/browser/usage-settings.spec.ts    | 41 +++++++++++++++++++
 packages/app/src/usage/balance-bar.tsx        |  7 +++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/packages/app/e2e/browser/usage-settings.spec.ts b/packages/app/e2e/browser/usage-settings.spec.ts
index 04bfe649b1..bd9d7ffc29 100644
--- a/packages/app/e2e/browser/usage-settings.spec.ts
+++ b/packages/app/e2e/browser/usage-settings.spec.ts
@@ -133,6 +133,47 @@ test.describe("usage settings", () => {
     await expect(card.getByText("64%")).toBeVisible();
   });
 
+  test("keeps a localized balance reset within its usage card", async ({ page }) => {
+    test.setTimeout(120_000);
+    await page.setViewportSize({ width: 320, height: 844 });
+    const serverId = getServerId();
+    await installUsageReportsFixture(page, {
+      lists: [
+        [
+          report({
+            sourceId: "fixture",
+            sourceLabel: "Fixture plan",
+            report: {
+              balances: [
+                {
+                  id: "credits",
+                  label: "Credits available for additional usage",
+                  remaining: 999_999_999_999_999,
+                  unit: "credits",
+                  resetsAt: "2026-12-31T23:59:00.000Z",
+                },
+              ],
+            },
+          }),
+        ],
+      ],
+    });
+
+    await gotoAppShell(page);
+    await openSettings(page);
+    await openSettingsHostSection(page, serverId, "usage");
+
+    const card = page.getByTestId("usage-card");
+    const value = page.getByTestId("provider-usage-balance-credits-value");
+    await expect(value).toBeVisible({ timeout: 10_000 });
+    const [cardBox, valueBox] = await Promise.all([card.boundingBox(), value.boundingBox()]);
+    expect(cardBox).not.toBeNull();
+    expect(valueBox).not.toBeNull();
+    expect((valueBox?.x ?? 0) + (valueBox?.width ?? 0)).toBeLessThanOrEqual(
+      (cardBox?.x ?? 0) + (cardBox?.width ?? 0),
+    );
+  });
+
   test("asks to update a host without usage support and never calls it", async ({ page }) => {
     test.setTimeout(120_000);
     const serverId = getServerId();
diff --git a/packages/app/src/usage/balance-bar.tsx b/packages/app/src/usage/balance-bar.tsx
index e25448f0d3..7bfcbbd902 100644
--- a/packages/app/src/usage/balance-bar.tsx
+++ b/packages/app/src/usage/balance-bar.tsx
@@ -66,7 +66,12 @@ export function UsageBalanceBar({ balance }: { balance: UsageBalance }) {
         <Text style={styles.label} numberOfLines={1}>
           {balance.label}
         </Text>
-        <Text style={styles.value} numberOfLines={1} ellipsizeMode="tail">
+        <Text
+          style={styles.value}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          testID={`provider-usage-balance-${balance.id}-value`}
+        >
           {amountText}
           {resetLabel ? <Text style={styles.reset}>{` · ${resetLabel}`}</Text> : null}
         </Text>