From a95e8ad318ed20ff7dae54846e0172494938a963 Mon Sep 17 00:00:00 2001
From: Koushik <koushikyemula@gmail.com>
Date: Wed, 11 Nov 2026 20:37:08 +0530
Subject: [PATCH 1/2] feat(mobile): redesign the Android usage limits widget

Port the Usage > Limits card to the home-screen widget: per-account
segments, pace ticks, and refill hatching, with thin bars when the
widget is too short for full rows.
---
 .../drawable-xxhdpi/t3_widget_hatch_tile.png  | Bin 0 -> 151 bytes
 .../src/main/res/drawable/t3_widget_hatch.xml |   4 +
 .../src/features/usage/providerColors.ts      |  14 +
 .../src/features/usage/usageProviders.ts      |  13 +-
 .../src/widgets/SubscriptionUsage.android.tsx | 346 ++++++++++++++----
 .../widgets/subscriptionUsageSnapshot.test.ts |  43 +++
 .../src/widgets/subscriptionUsageSnapshot.ts  |  70 +++-
 apps/mobile/src/widgets/widgetTheme.ts        |   5 +
 patches/expo-widgets@58.0.27.patch            |  88 ++++-
 pnpm-lock.yaml                                |   8 +-
 10 files changed, 489 insertions(+), 102 deletions(-)
 create mode 100644 apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable-xxhdpi/t3_widget_hatch_tile.png
 create mode 100644 apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable/t3_widget_hatch.xml
 create mode 100644 apps/mobile/src/features/usage/providerColors.ts

diff --git a/apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable-xxhdpi/t3_widget_hatch_tile.png b/apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable-xxhdpi/t3_widget_hatch_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e55bbd87a57ff9ecd17fffc9f72799562e4d87e
GIT binary patch
literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@RheI8PVHkcwMtuXuAYC~&YIc(?!k
zo@rAAr#|zq;ATx<&gyn`-Xo8>zgKfAK48&f`7OfoT(d(oNswDbDe6UchJxs)<|`d6
zGX?mJl=V-v&Y2*6bD@A!fP|t(&xNnf$BMJJN(<|+d}EOfw28sf)z4*}Q$iB}Z*Ve?

literal 0
HcmV?d00001

diff --git a/apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable/t3_widget_hatch.xml b/apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable/t3_widget_hatch.xml
new file mode 100644
index 000000000000..8125e99ad560
--- /dev/null
+++ b/apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable/t3_widget_hatch.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+  android:src="@drawable/t3_widget_hatch_tile"
+  android:tileMode="repeat" />
diff --git a/apps/mobile/src/features/usage/providerColors.ts b/apps/mobile/src/features/usage/providerColors.ts
new file mode 100644
index 000000000000..683601e20815
--- /dev/null
+++ b/apps/mobile/src/features/usage/providerColors.ts
@@ -0,0 +1,14 @@
+import type { UsageProviderKind } from "@t3tools/contracts";
+
+export function providerColors(scheme: "light" | "dark"): Record<UsageProviderKind, string> {
+  return {
+    claude: "#d97757",
+    codex: scheme === "dark" ? "#e6e6e6" : "#3c3c43",
+    grok: scheme === "dark" ? "#a1a1aa" : "#52525b",
+    cursor: "#8b8b8b",
+    opencode: "#5b9bbd",
+    antigravity: "#8c7bd1",
+    pi: "#4d9f8a",
+    muse: "#0866ff",
+  };
+}
diff --git a/apps/mobile/src/features/usage/usageProviders.ts b/apps/mobile/src/features/usage/usageProviders.ts
index ce9c778a7776..93825830f66b 100644
--- a/apps/mobile/src/features/usage/usageProviders.ts
+++ b/apps/mobile/src/features/usage/usageProviders.ts
@@ -1,5 +1,6 @@
 import type { UsageProviderKind } from "@t3tools/contracts";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
+import { providerColors } from "./providerColors";
 
 export const PROVIDER_ORDER: readonly UsageProviderKind[] = [
   "codex",
@@ -29,17 +30,7 @@ export const PROVIDER_LABEL: Record<UsageProviderKind, string> = {
 };
 
 export function useProviderColors(): Record<UsageProviderKind, string> {
-  const { themeAppearance: scheme } = useAppearancePreferences();
-  return {
-    claude: "#d97757",
-    codex: scheme === "dark" ? "#e6e6e6" : "#3c3c43",
-    grok: scheme === "dark" ? "#a1a1aa" : "#52525b",
-    cursor: "#8b8b8b",
-    opencode: "#5b9bbd",
-    antigravity: "#8c7bd1",
-    pi: "#4d9f8a",
-    muse: "#0866ff",
-  };
+  return providerColors(useAppearancePreferences().themeAppearance);
 }
 
 export function useUsageMixColors() {
diff --git a/apps/mobile/src/widgets/SubscriptionUsage.android.tsx b/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
index 9e9fcbe3e6ef..3e5097fff017 100644
--- a/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
+++ b/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
@@ -1,26 +1,35 @@
 import {
+  Box,
   Button,
   Column,
   getMaterialColors,
-  LinearProgressIndicator,
+  Image,
+  Row,
+  Spacer,
   Text,
 } from "@expo/ui/jetpack-compose";
 import {
+  background,
+  cornerRadius,
   fillMaxSize,
   fillMaxWidth,
   height,
   padding,
   paddingAll,
+  size,
+  width,
 } from "@expo/ui/jetpack-compose/modifiers";
 import { createWidget, type WidgetEnvironment } from "expo-widgets";
 
-import type { SubscriptionUsageSnapshot as SubscriptionUsageProps } from "./subscriptionUsageSnapshot";
+import type {
+  SubscriptionUsageSnapshot as SubscriptionUsageProps,
+  WidgetLimitAccount,
+} from "./subscriptionUsageSnapshot";
 
 export function SubscriptionUsage(props: SubscriptionUsageProps, environment: WidgetEnvironment) {
   "widget";
   // The widget runtime evaluates this function without the app's module scope.
   const now = Date.now();
-  const limit = 2;
   const mode = props.theme?.mode;
   const appearance =
     mode === "light" || mode === "dark"
@@ -29,21 +38,273 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
         ? "dark"
         : "light";
   const palette = props.theme?.[appearance];
+  const material = getMaterialColors({ scheme: appearance });
   const colors = palette
     ? {
         surface: palette.background,
         onSurface: palette.foreground,
-        onSurfaceVariant: palette.secondary,
-        surfaceVariant: palette.track,
-        primary: palette.accent,
+        muted: palette.secondary,
+        track: palette.subtle ?? palette.track,
         error: palette.danger,
       }
-    : getMaterialColors({ scheme: appearance });
-  const muted = colors.onSurfaceVariant;
+    : {
+        surface: material.surface,
+        onSurface: material.onSurface,
+        muted: material.onSurfaceVariant,
+        track: material.surfaceVariant,
+        error: material.error,
+      };
   const providers = props.providers ?? [
     { name: "Codex", detail: "Open T3 to connect", windows: [], expiresAt: 0, totalWindows: 0 },
     { name: "Claude", detail: "Open T3 to connect", windows: [], expiresAt: 0, totalWindows: 0 },
   ];
+
+  const pad = 14;
+  const labelWidth = 92;
+  const footer = 16;
+  const widgetWidth = environment.width ?? 320;
+  const contentWidth = widgetWidth - pad * 2;
+  const contentHeight = (environment.height ?? 200) - pad * 2 - footer;
+  const kindOrder: Record<string, number> = { session: 0, weekly: 1 };
+
+  type Line =
+    | {
+        type: "window";
+        provider: string;
+        color: string;
+        window: SubscriptionUsageProps["providers"][number]["windows"][number];
+      }
+    | { type: "note"; provider: string; text: string };
+  const lines: Line[] = providers.flatMap((provider): Line[] => {
+    const stale =
+      provider.windows.length > 0 && provider.expiresAt > 0 && now >= provider.expiresAt;
+    if (stale || provider.windows.length === 0)
+      return [
+        {
+          type: "note",
+          provider: provider.name,
+          text: stale ? "Open T3 to refresh" : provider.detail,
+        },
+      ];
+    return [...provider.windows]
+      .sort((a, b) => (kindOrder[a.kind ?? ""] ?? 2) - (kindOrder[b.kind ?? ""] ?? 2))
+      .map((window) => ({
+        type: "window",
+        provider: provider.name,
+        color: provider.colors?.[appearance] ?? colors.onSurface,
+        window,
+      }));
+  });
+
+  // Roomy rows when every limit fits, thin bars when they would not.
+  const fullRow = 34;
+  const compactRow = 20;
+  const full = lines.length * fullRow <= contentHeight;
+  // Glance columns hold at most ten children, the overflow note included.
+  const capacity = Math.max(
+    1,
+    Math.min(9, Math.floor(contentHeight / (full ? fullRow : compactRow))),
+  );
+  const shown = lines.length > capacity ? lines.slice(0, capacity - 1) : lines;
+  const hidden = lines.length - shown.length;
+
+  const low = (remaining: number) => remaining <= 10;
+  const timeLeft = (account: WidgetLimitAccount) =>
+    account.resetsAt && account.durationMs
+      ? Math.max(0, Math.min(1, (account.resetsAt - now) / account.durationMs))
+      : null;
+  const paceArrow = (accounts: WidgetLimitAccount[]) => {
+    const timed = accounts.flatMap((account) => {
+      const left = timeLeft(account);
+      return left === null || account.remaining === undefined
+        ? []
+        : [{ used: 100 - account.remaining, elapsed: 1 - left }];
+    });
+    if (timed.length === 0) return "";
+    const gap = timed.reduce((sum, t) => sum + t.used - t.elapsed * 100, 0) / timed.length;
+    return gap > 5 ? " ↗" : gap < -5 ? " ↘" : " →";
+  };
+
+  const segment = (
+    account: WidgetLimitAccount,
+    color: string,
+    segmentWidth: number,
+    barHeight: number,
+    labels: { name: boolean; percent: boolean; reset: boolean },
+  ) => {
+    if (account.remaining === undefined)
+      return <Spacer key={account.name} modifiers={[size(segmentWidth, barHeight)]} />;
+    const fill = (segmentWidth * account.remaining) / 100;
+    const refill = (segmentWidth * Math.min(100 - account.remaining, account.refill ?? 0)) / 100;
+    const left = timeLeft(account);
+    const tick =
+      left === null ? null : Math.max(0, Math.min(segmentWidth - 5, segmentWidth * left - 2.5));
+    return (
+      <Box
+        key={account.name}
+        modifiers={[size(segmentWidth, barHeight), background(colors.track), cornerRadius(6)]}
+      >
+        {fill > 0 ? (
+          <Box modifiers={[size(fill, barHeight), background(`${color}59`), cornerRadius(6)]} />
+        ) : null}
+        {refill > 0 ? (
+          <Row modifiers={[size(segmentWidth, barHeight)]}>
+            <Spacer modifiers={[width(segmentWidth - refill)]} />
+            <Image
+              source={{ uri: "t3_widget_hatch" }}
+              tint={color}
+              alpha={0.22}
+              contentScale="fillBounds"
+              modifiers={[size(refill, barHeight)]}
+            />
+          </Row>
+        ) : null}
+        {tick === null ? null : (
+          <Row modifiers={[size(segmentWidth, barHeight)]}>
+            <Spacer modifiers={[width(tick)]} />
+            <Box
+              contentAlignment="center"
+              modifiers={[size(5, barHeight), background(colors.surface)]}
+            >
+              <Box
+                modifiers={[
+                  size(2, Math.max(2, barHeight - 4)),
+                  background(colors.onSurface),
+                  cornerRadius(1),
+                ]}
+              />
+            </Box>
+          </Row>
+        )}
+        {labels.percent ? (
+          <Row
+            verticalAlignment="center"
+            modifiers={[size(segmentWidth, barHeight), padding(6, 0, 6, 0)]}
+          >
+            {labels.name ? (
+              <Text color={colors.onSurface} maxLines={1} style={{ fontSize: 10 }}>
+                {`${account.name} `}
+              </Text>
+            ) : null}
+            <Text
+              color={low(account.remaining) ? colors.error : colors.onSurface}
+              maxLines={1}
+              style={{ fontSize: 10, fontWeight: "bold" }}
+            >
+              {`${account.remaining}%`}
+            </Text>
+          </Row>
+        ) : null}
+        {labels.reset && account.reset ? (
+          <Box
+            contentAlignment="centerEnd"
+            modifiers={[size(segmentWidth, barHeight), padding(0, 0, 3, 0)]}
+          >
+            <Box modifiers={[background(colors.surface), cornerRadius(4), padding(4, 1, 4, 1)]}>
+              <Text color={colors.onSurface} maxLines={1} style={{ fontSize: 9 }}>
+                {`↻ ${account.reset}`}
+              </Text>
+            </Box>
+          </Box>
+        ) : null}
+      </Box>
+    );
+  };
+
+  const bar = (line: Extract<Line, { type: "window" }>, barWidth: number, barHeight: number) => {
+    const fallback: WidgetLimitAccount = { name: line.provider, remaining: line.window.remaining };
+    const listed = line.window.accounts ?? [];
+    // Glance rows hold at most ten children: five segments and their gaps.
+    const accounts = listed.length > 0 && listed.length <= 5 ? listed : [fallback];
+    const gap = 3;
+    const segmentWidth = (barWidth - gap * (accounts.length - 1)) / accounts.length;
+    const multi = accounts.length > 1;
+    return (
+      <Row modifiers={[size(barWidth, barHeight)]}>
+        {accounts.flatMap((account, index) => [
+          index > 0 ? <Spacer key={`gap-${account.name}`} modifiers={[width(gap)]} /> : null,
+          segment(account, account.color ?? line.color, segmentWidth, barHeight, {
+            percent: barHeight >= 16 && multi && segmentWidth >= 34,
+            name: multi && segmentWidth >= 76,
+            reset: barHeight >= 16 && !multi && segmentWidth >= 120,
+          }),
+        ])}
+      </Row>
+    );
+  };
+
+  const percentText = (remaining: number, fontSize: number) => (
+    <Text
+      color={low(remaining) ? colors.error : colors.onSurface}
+      maxLines={1}
+      style={{ fontSize, fontWeight: "bold" }}
+    >
+      {`${remaining}%`}
+    </Text>
+  );
+
+  const row = (line: Line) => {
+    const label = `${line.provider} ${line.type === "window" ? line.window.label : ""}`.trim();
+    if (line.type === "note")
+      return (
+        <Row
+          key={`${line.provider}-note`}
+          verticalAlignment="center"
+          modifiers={[fillMaxWidth(), height(full ? fullRow : compactRow)]}
+        >
+          <Text color={colors.onSurface} maxLines={1} style={{ fontSize: 11 }}>
+            {`${line.provider}  `}
+          </Text>
+          <Text color={colors.muted} maxLines={1} style={{ fontSize: 11 }}>
+            {line.text}
+          </Text>
+        </Row>
+      );
+    if (!full)
+      return (
+        <Row
+          key={label}
+          verticalAlignment="center"
+          modifiers={[fillMaxWidth(), height(compactRow)]}
+        >
+          <Text
+            color={colors.muted}
+            maxLines={1}
+            style={{ fontSize: 10 }}
+            modifiers={[width(labelWidth)]}
+          >
+            {label}
+          </Text>
+          {bar(line, contentWidth - labelWidth - 40, 6)}
+          <Box contentAlignment="centerEnd" modifiers={[width(40)]}>
+            {percentText(line.window.remaining, 10)}
+          </Box>
+        </Row>
+      );
+    return (
+      <Row key={label} verticalAlignment="center" modifiers={[fillMaxWidth(), height(fullRow)]}>
+        <Column modifiers={[width(labelWidth)]}>
+          <Text color={colors.muted} maxLines={1} style={{ fontSize: 10 }}>
+            {label}
+          </Text>
+          <Row verticalAlignment="bottom">
+            {percentText(line.window.remaining, 18)}
+            <Text
+              color={colors.muted}
+              maxLines={1}
+              style={{ fontSize: 10 }}
+              modifiers={[padding(3, 0, 0, 3)]}
+            >
+              {`left${paceArrow(line.window.accounts ?? [])}`}
+            </Text>
+          </Row>
+        </Column>
+        <Spacer modifiers={[width(8)]} />
+        {bar(line, contentWidth - labelWidth - 8, 20)}
+      </Row>
+    );
+  };
+
   return (
     // Android lacks widgetURL; one card Button routes taps to the app listener opening props.url.
     <Button
@@ -51,67 +312,20 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
       modifiers={[fillMaxSize()]}
       onClick={() => {}}
     >
-      <Column modifiers={[fillMaxSize(), paddingAll(16)]}>
-        {providers.map((provider, index) => {
-          const stale =
-            provider.windows.length > 0 && provider.expiresAt > 0 && now >= provider.expiresAt;
-          const shown = stale ? [] : provider.windows.slice(0, limit);
-          const hidden = stale ? 0 : (provider.totalWindows ?? provider.windows.length) - limit;
-          return (
-            <Column
-              key={provider.name}
-              modifiers={[fillMaxWidth(), padding(0, index === 0 ? 0 : 10, 0, 0)]}
-            >
-              <Text
-                color={colors.onSurface}
-                maxLines={1}
-                style={{ fontSize: 13, fontWeight: "bold" }}
-              >
-                {provider.name}
-              </Text>
-              {shown.length === 0 ? (
-                <Text color={muted} maxLines={1} style={{ fontSize: 11 }}>
-                  {stale ? "Open T3 to refresh" : provider.detail}
-                </Text>
-              ) : null}
-              {shown.map((window) => {
-                const low = window.remaining <= 10;
-                return (
-                  <Column key={window.label} modifiers={[fillMaxWidth(), padding(0, 4, 0, 0)]}>
-                    <Text
-                      color={low ? colors.error : colors.onSurface}
-                      maxLines={1}
-                      style={{ fontSize: 11 }}
-                    >
-                      {`${window.label} · ${window.remaining}% left`}
-                    </Text>
-                    <Column modifiers={[fillMaxWidth(), padding(0, 3, 0, 3)]}>
-                      <LinearProgressIndicator
-                        progress={window.remaining / 100}
-                        color={low ? colors.error : colors.primary}
-                        trackColor={colors.surfaceVariant}
-                        modifiers={[fillMaxWidth(), height(6)]}
-                      />
-                    </Column>
-                    <Text color={muted} maxLines={1} style={{ fontSize: 10 }}>
-                      {window.reset}
-                    </Text>
-                  </Column>
-                );
-              })}
-              {hidden > 0 ? (
-                <Text color={muted} maxLines={1} style={{ fontSize: 10 }}>
-                  {`${hidden} more in T3`}
-                </Text>
-              ) : null}
-            </Column>
-          );
-        })}
+      <Column modifiers={[fillMaxSize(), paddingAll(pad)]}>
+        <Column modifiers={[fillMaxWidth(), height(contentHeight)]}>
+          {shown.map(row)}
+          {hidden > 0 ? (
+            <Text color={colors.muted} maxLines={1} style={{ fontSize: 10 }}>
+              {`${hidden} more in T3`}
+            </Text>
+          ) : null}
+        </Column>
         <Text
-          color={muted}
+          color={colors.muted}
           maxLines={1}
           style={{ fontSize: 10 }}
-          modifiers={[padding(0, 10, 0, 0)]}
+          modifiers={[height(footer)]}
         >
           {props.checkedAt
             ? `As of ${new Date(props.checkedAt).toLocaleString(undefined, { hour: "numeric", minute: "2-digit", month: "short", day: "numeric" })}`
diff --git a/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts b/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
index 2b88a45db8ff..50a579524d0a 100644
--- a/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
+++ b/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
@@ -64,6 +64,49 @@ describe("subscription widget snapshots", () => {
     expect(snapshot.url).toBe(deepLink);
     expect(JSON.stringify(snapshot)).not.toContain("private@example.com");
   });
+  it("splits a pooled window by account without exposing emails", () => {
+    const claude = (id: string, overrides: Partial<ServerProvider>) =>
+      provider({
+        instanceId: ProviderInstanceId.make(id),
+        driver: ProviderDriverKind.make("claudeAgent"),
+        auth: { status: "authenticated", email: `${id}@example.com` },
+        ...overrides,
+      });
+    const snapshot = buildSubscriptionUsageSnapshot(
+      presentations([
+        claude("smol", {
+          displayName: "smol",
+          accentColor: "#4c6ef5",
+          usageLimits: {
+            checkedAt,
+            windows: [{ ...window, usedPercent: 29, windowDurationMins: 300 }],
+          },
+        }),
+        claude("relay", {
+          displayName: "relay@example.com",
+          usageLimits: {
+            checkedAt,
+            windows: [{ ...window, id: "seven_day", kind: "weekly", label: "Weekly" }],
+          },
+        }),
+      ]),
+      deepLink,
+    );
+    const session = snapshot.providers[0]?.windows.find((w) => w.kind === "session");
+    expect(session?.accounts).toEqual([
+      {
+        name: "smol",
+        color: "#4c6ef5",
+        remaining: 71,
+        refill: 29,
+        resetsAt: Date.parse(window.resetsAt),
+        reset: expect.any(String),
+        durationMs: 300 * 60_000,
+      },
+      { name: "RE" },
+    ]);
+    expect(JSON.stringify(snapshot)).not.toContain("example.com");
+  });
   it("uses upstream deduplication for a native account also present in a proxy hub", () => {
     const input = new Map([
       [
diff --git a/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts b/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
index db99110c5d35..7c30a9e45e4d 100644
--- a/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
+++ b/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
@@ -1,21 +1,42 @@
+import { normalizeProviderAccentColor } from "@t3tools/client-runtime/state/provider-instance-display";
 import {
   collectLimitAccounts,
   collectLimitPools,
+  remainingPercent,
   type LimitAccount,
   type LimitPoolWindow,
   type LimitPresentations,
 } from "@t3tools/shared/usageLimits";
 
+import { providerColors } from "../features/usage/providerColors";
 import type { WidgetTheme } from "./widgetTheme";
 
+export interface WidgetLimitAccount {
+  name: string;
+  color?: string | undefined;
+  /** Absent when this account does not report the window. */
+  remaining?: number;
+  refill?: number;
+  resetsAt?: number;
+  reset?: string;
+  durationMs?: number;
+}
+
 export interface SubscriptionUsageSnapshot {
   theme?: WidgetTheme;
   url?: string;
   checkedAt: number;
   providers: Array<{
     name: string;
+    colors?: { light: string; dark: string };
     detail: string;
-    windows: Array<{ kind?: string; label: string; remaining: number; reset: string }>;
+    windows: Array<{
+      kind?: string;
+      label: string;
+      remaining: number;
+      reset: string;
+      accounts?: WidgetLimitAccount[];
+    }>;
     expiresAt: number;
     totalWindows: number;
   }>;
@@ -45,6 +66,48 @@ export function createWidgetRefresher<Id>(refresh: (id: Id) => Promise<unknown>)
   };
 }
 
+// Widget snapshots must not persist account emails.
+function accountName(account: LimitAccount) {
+  if (account.displayName && !account.displayName.includes("@")) return account.displayName;
+  const email = account.email ?? account.displayName;
+  if (!email?.includes("@")) return "Account";
+  const [local = "", domain = ""] = email.split("@");
+  return `${local[0] ?? ""}${domain[0] ?? ""}`.toUpperCase();
+}
+
+function clockLabel(at: number, from: number) {
+  const time = { hour: "numeric", minute: "2-digit" } as const;
+  if (new Date(at).toDateString() === new Date(from).toDateString())
+    return new Date(at).toLocaleTimeString(undefined, time);
+  return new Date(at).toLocaleString(
+    undefined,
+    at - from < 6 * 86_400_000 ? { weekday: "short", ...time } : { month: "short", day: "numeric" },
+  );
+}
+
+function widgetAccounts(window: LimitPoolWindow): WidgetLimitAccount[] {
+  return window.columns.map((column) => {
+    const name = accountName(column.account);
+    const color = normalizeProviderAccentColor(column.account.accentColor);
+    if (column.window === null) return { name, color };
+    const resetsAt = column.window.resetsAt ? Date.parse(column.window.resetsAt) : NaN;
+    const reset = Number.isFinite(resetsAt);
+    return {
+      name,
+      color,
+      remaining: remainingPercent(column.window),
+      refill: reset ? column.refillPercent : 0,
+      ...(reset && {
+        resetsAt,
+        reset: clockLabel(resetsAt, Date.parse(column.account.limits.checkedAt)),
+      }),
+      ...(column.window.windowDurationMins && {
+        durationMs: column.window.windowDurationMins * 60_000,
+      }),
+    };
+  });
+}
+
 // A reset at or before its account's observation already happened, so it cannot expire the snapshot.
 const isUpcoming = (reset: LimitPoolWindow["resets"][number]) =>
   reset.at > Date.parse(reset.member.account.limits.checkedAt);
@@ -69,9 +132,12 @@ function subscriptionUsageProps(
       .map((driver) => {
         const pool = pools.find((candidate) => candidate.driver === driver);
         const name = driver === "codex" ? "Codex" : "Claude";
+        const kind = driver === "codex" ? "codex" : "claude";
+        const colors = { light: providerColors("light")[kind], dark: providerColors("dark")[kind] };
         if (!pool)
           return {
             name,
+            colors,
             detail: "No limits available",
             windows: [],
             expiresAt: 0,
@@ -100,6 +166,7 @@ function subscriptionUsageProps(
           .sort((a, b) => a.remainingPercent - b.remainingPercent);
         return {
           name,
+          colors,
           detail: !fresh
             ? "Open T3 to refresh"
             : pool.accounts.length > 1
@@ -122,6 +189,7 @@ function subscriptionUsageProps(
                       minute: "2-digit",
                     })}`
                   : "Reset time unavailable",
+                accounts: widgetAccounts(window),
               }))
             : [],
         };
diff --git a/apps/mobile/src/widgets/widgetTheme.ts b/apps/mobile/src/widgets/widgetTheme.ts
index e240dbc54458..99f1d62d4c1a 100644
--- a/apps/mobile/src/widgets/widgetTheme.ts
+++ b/apps/mobile/src/widgets/widgetTheme.ts
@@ -11,6 +11,7 @@ export interface WidgetPalette {
   secondary: string;
   accent: string;
   track: string;
+  subtle: string;
   danger: string;
 }
 
@@ -34,6 +35,10 @@ export function createWidgetTheme(
       themeColorWithAlpha(variables["--color-foreground"], 0.16),
       variables["--color-card"],
     ),
+    subtle: flattenThemeColor(
+      themeColorWithAlpha(variables["--color-foreground"], 0.07),
+      variables["--color-card"],
+    ),
     danger: variables["--color-danger-foreground"],
   });
   return { mode, light: palette(palettes.light), dark: palette(palettes.dark) };
diff --git a/patches/expo-widgets@58.0.27.patch b/patches/expo-widgets@58.0.27.patch
index 21252dcd848a..3c3b6b0d8357 100644
--- a/patches/expo-widgets@58.0.27.patch
+++ b/patches/expo-widgets@58.0.27.patch
@@ -1,5 +1,19 @@
+diff --git a/android/src/main/java/expo/modules/widgets/ExpoWidgetsPeekWidget.kt b/android/src/main/java/expo/modules/widgets/ExpoWidgetsPeekWidget.kt
+index edabde8f51b3bd9162b634e46f2f09686c3a3b8a..1a17f3b12972bff9849d39dc257cf1b63a80c5a9 100644
+--- a/android/src/main/java/expo/modules/widgets/ExpoWidgetsPeekWidget.kt
++++ b/android/src/main/java/expo/modules/widgets/ExpoWidgetsPeekWidget.kt
+@@ -25,7 +25,8 @@ internal class ExpoWidgetsPeekWidget(
+     val layout = WidgetsLayoutRegistry.layout(appContext, widgetName)
+       ?: return createErrorRoot("No layout found for $widgetName")
+     val props = WidgetsLayoutRegistry.props(appContext, widgetName)
+-    val environment = getWidgetEnvironment(appContext)
++    val environment = getWidgetEnvironment(appContext) +
++      mapOf("width" to size.width.value.toDouble(), "height" to size.height.value.toDouble())
+     val node = evaluateLayout(appContext, layout, props, environment)
+ 
+     return node.toPeekRoot(appContext, InteractionSource.Widget(widgetName), size)
 diff --git a/build/ExpoWidgets.js b/build/ExpoWidgets.js
-index 85f3fbd..05b8dd8 100644
+index 85f3fbdddade637ed6a96fd0c532a22c675d45c5..05b8dd87f58bfc4acf66652ea04cec777f9be7ca 100644
 --- a/build/ExpoWidgets.js
 +++ b/build/ExpoWidgets.js
 @@ -34,6 +34,7 @@ class LiveActivityFactoryStub {
@@ -11,7 +25,7 @@ index 85f3fbd..05b8dd8 100644
  class CustomNotificationStub {
      getId() {
 diff --git a/build/Widgets.d.ts b/build/Widgets.d.ts
-index fb37d5d..47a97af 100644
+index fb37d5dd61d34768907ac397d4a6ddfce675bccb..47a97af1b8138caa10ca6f67bad6798ef1ea4a72 100644
 --- a/build/Widgets.d.ts
 +++ b/build/Widgets.d.ts
 @@ -100,6 +100,8 @@ export declare class LiveActivityFactory<T extends object = object> {
@@ -24,7 +38,7 @@ index fb37d5d..47a97af 100644
  /**
   * Creates a dismissal policy that removes the Live Activity at the specified time within a four-hour window.
 diff --git a/build/Widgets.js b/build/Widgets.js
-index cc1efce..3ce8897 100644
+index cc1efce0ce87337ac55d41a66659048c26698870..3ce8897445a1f4d4be3d4ae69ef6231f1ed604f4 100644
 --- a/build/Widgets.js
 +++ b/build/Widgets.js
 @@ -134,6 +134,9 @@ import ExpoWidgetsModule from './ExpoWidgets';
@@ -38,10 +52,23 @@ index cc1efce..3ce8897 100644
  /**
   * Creates a dismissal policy that removes the Live Activity at the specified time within a four-hour window.
 diff --git a/build/Widgets.types.d.ts b/build/Widgets.types.d.ts
-index 4c474bb..dbfb8b1 100644
+index 4c474bb2730376c8e182159c096a6031da4864de..f4e2464de5fe0583cd0e893ee4639648fd779033 100644
 --- a/build/Widgets.types.d.ts
 +++ b/build/Widgets.types.d.ts
-@@ -98,6 +98,10 @@ export type LiveActivityEnvironment = {
+@@ -50,6 +50,12 @@ export type WidgetEnvironment<T extends object | undefined = undefined> = {
+      * The color scheme of the widget's environment.
+      */
+     colorScheme?: 'light' | 'dark';
++    /**
++     * The widget's current size in dp.
++     * @platform android
++     */
++    width?: number;
++    height?: number;
+     /**
+      * A Boolean value that indicates whether the display or environment currently requires reduced luminance.
+      *
+@@ -98,6 +104,10 @@ export type LiveActivityEnvironment = {
       * @platform ios
       */
      colorScheme: 'light' | 'dark';
@@ -52,7 +79,7 @@ index 4c474bb..dbfb8b1 100644
      /**
       * Whether the activity is displayed in a context with reduced luminance.
       * @platform iOS 16+
-@@ -307,6 +311,7 @@ export declare class NativeLiveActivityFactory extends SharedObject {
+@@ -307,6 +317,7 @@ export declare class NativeLiveActivityFactory extends SharedObject {
      constructor(name: string, layout: string);
      start(props?: string, url?: string, staleDate?: number): NativeLiveActivity;
      getInstances(): NativeLiveActivity[];
@@ -61,10 +88,10 @@ index 4c474bb..dbfb8b1 100644
  export declare class NativeLiveActivity extends SharedObject<LiveActivityEvents> {
      getId(): string;
 diff --git a/ios/LiveActivityFactory.swift b/ios/LiveActivityFactory.swift
-index 29e4f15..629e547 100644
+index 29e4f1566d188665e301d32bc1ad85640f83e68c..629e547d8604757e89dd571eab7ad43f7c649cdb 100644
 --- a/ios/LiveActivityFactory.swift
 +++ b/ios/LiveActivityFactory.swift
-@@ -14,7 +14,16 @@ final class LiveActivityFactory: SharedObject {
+@@ -14,11 +14,23 @@ final class LiveActivityFactory: SharedObject {
      WidgetsStorage.set(layout, forKey: "__expo_widgets_live_activity_\(name)_layout")
    }
  
@@ -81,7 +108,7 @@ index 29e4f15..629e547 100644
      guard ActivityAuthorizationInfo().areActivitiesEnabled else {
        throw LiveActivitiesNotSupportedException()
      }
-@@ -22,3 +31,6 @@ final class LiveActivityFactory: SharedObject {
+ 
 +    // A replacement started beside an ended card would leave both visible.
 +    dismissEnded()
 +
@@ -89,7 +116,7 @@ index 29e4f15..629e547 100644
        let initialState = LiveActivityAttributes.ContentState(name: name, props: props)
        let activity = try Activity.request(
 diff --git a/ios/Widgets/Utils.swift b/ios/Widgets/Utils.swift
-index 76b2199..6cb52c3 100644
+index 76b2199c2d3f879463fed5d2bd49038b0428a2e7..6cb52c3de4ad9696bc0c51ad62401cce96f405e7 100644
 --- a/ios/Widgets/Utils.swift
 +++ b/ios/Widgets/Utils.swift
 @@ -125,6 +125,10 @@ func getLiveActivityEnvironment(for environment: EnvironmentValues, in context:
@@ -104,7 +131,7 @@ index 76b2199..6cb52c3 100644
      env["isActivityUpdateReduced"] = environment.isActivityUpdateReduced
      env["activityFamily"] = "\(environment.activityFamily)"
 diff --git a/ios/Widgets/WidgetLiveActivity.swift b/ios/Widgets/WidgetLiveActivity.swift
-index 4d135c4..dae4744 100644
+index 4d135c4e4eb1f846315654ed9d835a935d120d42..dae47445b27516fa2464a25b68bddc8f6dec3e1e 100644
 --- a/ios/Widgets/WidgetLiveActivity.swift
 +++ b/ios/Widgets/WidgetLiveActivity.swift
 @@ -19,53 +19,41 @@ struct LiveActivityAttributes: ActivityAttributes {
@@ -207,10 +234,10 @@ index 4d135c4..dae4744 100644
        LiveActivityBanner(context: context, nodes: nodes)
      } else if let node = nodes["banner"] as? [String: Any] {
 diff --git a/ios/WidgetsModule.swift b/ios/WidgetsModule.swift
-index 285136b..d36eac4 100644
+index 285136b3774e531b35c1a3e832506f93f61654be..d36eac46f435a78afda1724d92d685f3fb19406b 100644
 --- a/ios/WidgetsModule.swift
 +++ b/ios/WidgetsModule.swift
-@@ -97,4 +97,8 @@ public final class WidgetsModule: Module {
+@@ -97,6 +97,10 @@ public final class WidgetsModule: Module {
        Function("getInstances") { (liveActivity: LiveActivityFactory) in
          try liveActivity.getInstances()
        }
@@ -219,21 +246,25 @@ index 285136b..d36eac4 100644
 +        liveActivity.dismissEnded()
 +      }
      }
+ 
+     Class("LiveActivity", LiveActivity.self) {
 diff --git a/src/ExpoWidgets.ts b/src/ExpoWidgets.ts
-index db15000..6863dc9 100644
+index db1500090738cca841ded2967078b8c594bac738..6863dc94a3bb61196920489e3f10f21b77c0cce9 100644
 --- a/src/ExpoWidgets.ts
 +++ b/src/ExpoWidgets.ts
-@@ -59,4 +59,5 @@ class LiveActivityFactoryStub {
+@@ -59,6 +59,7 @@ class LiveActivityFactoryStub {
    getInstances(): NativeLiveActivity[] {
      return [];
    }
 +  dismissEnded(): void {}
  }
+ 
+ class CustomNotificationStub {
 diff --git a/src/Widgets.ts b/src/Widgets.ts
-index 814b312..9818907 100644
+index 814b3120b254aaea5ccefab0ab52804ca48ecaf8..98189070a124481a0f366c86116552ca0945fcd7 100644
 --- a/src/Widgets.ts
 +++ b/src/Widgets.ts
-@@ -213,4 +213,9 @@ export class LiveActivityFactory<T extends object = object> {
+@@ -213,6 +213,11 @@ export class LiveActivityFactory<T extends object = object> {
        .getInstances()
        .map((instance) => new LiveActivity<T>(instance));
    }
@@ -243,11 +274,26 @@ index 814b312..9818907 100644
 +    this.nativeLiveActivityFactory.dismissEnded();
 +  }
  }
+ 
+ /**
 diff --git a/src/Widgets.types.ts b/src/Widgets.types.ts
-index 690d069..c60dd79 100644
+index 690d0695c726dd4f260ba3aeb4edb82b9a72cd39..dc700b6f9320406ae567da5f25f88358a5816a8f 100644
 --- a/src/Widgets.types.ts
 +++ b/src/Widgets.types.ts
-@@ -112,6 +112,10 @@ export type LiveActivityEnvironment = {
+@@ -63,6 +63,12 @@ export type WidgetEnvironment<T extends object | undefined = undefined> = {
+    * The color scheme of the widget's environment.
+    */
+   colorScheme?: 'light' | 'dark';
++  /**
++   * The widget's current size in dp.
++   * @platform android
++   */
++  width?: number;
++  height?: number;
+   /**
+    * A Boolean value that indicates whether the display or environment currently requires reduced luminance.
+    *
+@@ -112,6 +118,10 @@ export type LiveActivityEnvironment = {
     * @platform ios
     */
    colorScheme: 'light' | 'dark';
@@ -258,9 +304,11 @@ index 690d069..c60dd79 100644
    /**
     * Whether the activity is displayed in a context with reduced luminance.
     * @platform iOS 16+
-@@ -337,4 +341,5 @@ export declare class NativeLiveActivityFactory extends SharedObject {
+@@ -337,6 +347,7 @@ export declare class NativeLiveActivityFactory extends SharedObject {
    constructor(name: string, layout: string);
    start(props?: string, url?: string, staleDate?: number): NativeLiveActivity;
    getInstances(): NativeLiveActivity[];
 +  dismissEnded(): void;
  }
+ 
+ export declare class NativeLiveActivity extends SharedObject<LiveActivityEvents> {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6451f3f97cb2..5f200cee7393 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -373,7 +373,7 @@ patchedDependencies:
   expo-network@58.0.4: 159c2d760d1cd5102e95df51c20600111e7a72096ef0daea8215d50cae48bd98
   expo-sharing@58.0.22: 321a86e1471e34c53f1f2937fbb4304ea3f7b7a78ad9e4d35febc2b9e73e9688
   expo-video@58.0.13: e80ec3ef8c4af50a607beea1c0917e71ba679844efdb702b45d17a5f03cf466c
-  expo-widgets@58.0.27: 8bf49067f93742855e15f29559ac75c8b50230b47069060993c9ea01dac11171
+  expo-widgets@58.0.27: 0e26817ca487a5156bcc9499f7db2e99a7d102f4a53b6b738f00552958774c86
   mdast-util-math@3.0.0: afe6b2c89e1eaddfd3c90cf2723f12c9a17d513e65beff51653781486013251c
   mdast-util-to-hast@13.2.1: 57ea46c73aea3c876ab8d351fe0482ddd081dcb4a0610576e399dbe5eb59d2b1
   micromark-extension-gfm-table@2.1.1: 9ad23a530e45d9f83cba1da8654fe16d5af8b59d5c73d5c7a7c91fd25b9be1d8
@@ -714,7 +714,7 @@ importers:
         version: 58.0.7(expo@58.0.23)(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))
       expo-widgets:
         specifier: 58.0.27
-        version: 58.0.27(patch_hash=8bf49067f93742855e15f29559ac75c8b50230b47069060993c9ea01dac11171)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
+        version: 58.0.27(patch_hash=0e26817ca487a5156bcc9499f7db2e99a7d102f4a53b6b738f00552958774c86)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
       pele:
         specifier: 'catalog:'
         version: 1.8.0
@@ -17711,7 +17711,7 @@ snapshots:
     optionalDependencies:
       '@babel/runtime': 7.29.7
       expo: 58.0.23(d226faf1ca90e630d8c56a2108dee32d)
-      expo-widgets: 58.0.27(patch_hash=8bf49067f93742855e15f29559ac75c8b50230b47069060993c9ea01dac11171)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
+      expo-widgets: 58.0.27(patch_hash=0e26817ca487a5156bcc9499f7db2e99a7d102f4a53b6b738f00552958774c86)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -18970,7 +18970,7 @@ snapshots:
       expo: 58.0.23(d226faf1ca90e630d8c56a2108dee32d)
       react-native: 0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6)
 
-  ? expo-widgets@58.0.27(patch_hash=8bf49067f93742855e15f29559ac75c8b50230b47069060993c9ea01dac11171)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
+  ? expo-widgets@58.0.27(patch_hash=0e26817ca487a5156bcc9499f7db2e99a7d102f4a53b6b738f00552958774c86)(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)
   : dependencies:
       '@expo/plist': 0.10.1
       '@expo/ui': 58.0.27(@babel/core@7.29.7(supports-color@8.1.1))(expo@58.0.23)(react-dom@19.3.0(react@19.3.0))(react-native-worklets@0.13.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)(supports-color@8.1.1))(react-native@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.1(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0)

From 41d38295157b8448afc957b511bfb543e071d6ec Mon Sep 17 00:00:00 2001
From: Koushik <koushikyemula@gmail.com>
Date: Wed, 11 Nov 2026 21:18:27 +0530
Subject: [PATCH 2/2] fix(mobile): publish Android widget accounts without
 undefined colors

expo-widgets rejects explicit undefined props, so an account without an
accent color stopped every widget update. Rows now share spare height,
and the widget reuses the track color instead of a second subtle one.
---
 .../src/widgets/SubscriptionUsage.android.tsx      | 14 ++++++--------
 .../src/widgets/subscriptionUsageSnapshot.test.ts  |  2 +-
 .../src/widgets/subscriptionUsageSnapshot.ts       | 10 +++++-----
 apps/mobile/src/widgets/widgetTheme.ts             |  7 -------
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/apps/mobile/src/widgets/SubscriptionUsage.android.tsx b/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
index 3e5097fff017..d705f6033bbe 100644
--- a/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
+++ b/apps/mobile/src/widgets/SubscriptionUsage.android.tsx
@@ -44,7 +44,7 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
         surface: palette.background,
         onSurface: palette.foreground,
         muted: palette.secondary,
-        track: palette.subtle ?? palette.track,
+        track: palette.track,
         error: palette.danger,
       }
     : {
@@ -105,6 +105,8 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
     1,
     Math.min(9, Math.floor(contentHeight / (full ? fullRow : compactRow))),
   );
+  // Rows share any spare height so short lists do not bunch at the top.
+  const rowHeight = Math.min(full ? 52 : 28, contentHeight / Math.min(lines.length, capacity));
   const shown = lines.length > capacity ? lines.slice(0, capacity - 1) : lines;
   const hidden = lines.length - shown.length;
 
@@ -250,7 +252,7 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
         <Row
           key={`${line.provider}-note`}
           verticalAlignment="center"
-          modifiers={[fillMaxWidth(), height(full ? fullRow : compactRow)]}
+          modifiers={[fillMaxWidth(), height(rowHeight)]}
         >
           <Text color={colors.onSurface} maxLines={1} style={{ fontSize: 11 }}>
             {`${line.provider}  `}
@@ -262,11 +264,7 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
       );
     if (!full)
       return (
-        <Row
-          key={label}
-          verticalAlignment="center"
-          modifiers={[fillMaxWidth(), height(compactRow)]}
-        >
+        <Row key={label} verticalAlignment="center" modifiers={[fillMaxWidth(), height(rowHeight)]}>
           <Text
             color={colors.muted}
             maxLines={1}
@@ -282,7 +280,7 @@ export function SubscriptionUsage(props: SubscriptionUsageProps, environment: Wi
         </Row>
       );
     return (
-      <Row key={label} verticalAlignment="center" modifiers={[fillMaxWidth(), height(fullRow)]}>
+      <Row key={label} verticalAlignment="center" modifiers={[fillMaxWidth(), height(rowHeight)]}>
         <Column modifiers={[width(labelWidth)]}>
           <Text color={colors.muted} maxLines={1} style={{ fontSize: 10 }}>
             {label}
diff --git a/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts b/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
index 50a579524d0a..ac7a5c96f347 100644
--- a/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
+++ b/apps/mobile/src/widgets/subscriptionUsageSnapshot.test.ts
@@ -93,7 +93,7 @@ describe("subscription widget snapshots", () => {
       deepLink,
     );
     const session = snapshot.providers[0]?.windows.find((w) => w.kind === "session");
-    expect(session?.accounts).toEqual([
+    expect(session?.accounts).toStrictEqual([
       {
         name: "smol",
         color: "#4c6ef5",
diff --git a/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts b/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
index 7c30a9e45e4d..631e627c88d3 100644
--- a/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
+++ b/apps/mobile/src/widgets/subscriptionUsageSnapshot.ts
@@ -13,7 +13,7 @@ import type { WidgetTheme } from "./widgetTheme";
 
 export interface WidgetLimitAccount {
   name: string;
-  color?: string | undefined;
+  color?: string;
   /** Absent when this account does not report the window. */
   remaining?: number;
   refill?: number;
@@ -87,14 +87,14 @@ function clockLabel(at: number, from: number) {
 
 function widgetAccounts(window: LimitPoolWindow): WidgetLimitAccount[] {
   return window.columns.map((column) => {
-    const name = accountName(column.account);
     const color = normalizeProviderAccentColor(column.account.accentColor);
-    if (column.window === null) return { name, color };
+    // expo-widgets cannot convert an explicit undefined into a Kotlin value.
+    const account = { name: accountName(column.account), ...(color && { color }) };
+    if (column.window === null) return account;
     const resetsAt = column.window.resetsAt ? Date.parse(column.window.resetsAt) : NaN;
     const reset = Number.isFinite(resetsAt);
     return {
-      name,
-      color,
+      ...account,
       remaining: remainingPercent(column.window),
       refill: reset ? column.refillPercent : 0,
       ...(reset && {
diff --git a/apps/mobile/src/widgets/widgetTheme.ts b/apps/mobile/src/widgets/widgetTheme.ts
index 99f1d62d4c1a..93831941b631 100644
--- a/apps/mobile/src/widgets/widgetTheme.ts
+++ b/apps/mobile/src/widgets/widgetTheme.ts
@@ -9,9 +9,7 @@ export interface WidgetPalette {
   background: string;
   foreground: string;
   secondary: string;
-  accent: string;
   track: string;
-  subtle: string;
   danger: string;
 }
 
@@ -29,13 +27,8 @@ export function createWidgetTheme(
     background: variables["--color-card"],
     foreground: variables["--color-foreground"],
     secondary: variables["--color-foreground-secondary"],
-    accent: variables["--color-primary"],
     // Surface tokens can coincide; a foreground blend keeps the unfilled track visible.
     track: flattenThemeColor(
-      themeColorWithAlpha(variables["--color-foreground"], 0.16),
-      variables["--color-card"],
-    ),
-    subtle: flattenThemeColor(
       themeColorWithAlpha(variables["--color-foreground"], 0.07),
       variables["--color-card"],
     ),