From fcbe45796aea99e9e2a9ce19dd9409fbd7e720e4 Mon Sep 17 00:00:00 2001
From: Dominic Roy <dominic@sdko.org>
Date: Sat, 12 Sep 2026 19:30:05 -0400
Subject: [PATCH] fix(usage): make unavailable account limits more visible
 (#10601)

---
 .../src/features/usage/UsageLimitsPooled.tsx  | 38 +++++++++++++------
 .../components/usage/UsageLimitsPooled.tsx    | 14 ++++---
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/src/features/usage/UsageLimitsPooled.tsx b/apps/mobile/src/features/usage/UsageLimitsPooled.tsx
index 7c20f802477df165c3bc981a6df115158b8a0b70..23d9ac3b9a04f5d0f66da234531350eabf697f2b 100644
--- a/apps/mobile/src/features/usage/UsageLimitsPooled.tsx
+++ b/apps/mobile/src/features/usage/UsageLimitsPooled.tsx
@@ -212,12 +212,7 @@ export function UsageLimitsSection({
   const colors = useProviderColors();
   return (
     <View className="gap-6">
-      {failedLabels.length ? (
-        <Text className="text-sm text-foreground-muted">
-          {failedLabels.join(", ")} could not refresh limits. Showing the last known values.
-        </Text>
-      ) : null}
-      {pools.length === 0 ? (
+      {pools.length === 0 && notices.length === 0 && failedLabels.length === 0 ? (
         <Text className="py-12 text-center text-base text-foreground-muted">
           {selected.size === 0
             ? "Select an environment to see limits."
@@ -243,11 +238,32 @@ export function UsageLimitsSection({
           ))}
         </View>
       ))}
-      {notices.map((notice) => (
-        <Text key={notice} className="text-sm text-foreground-muted">
-          {notice}
-        </Text>
-      ))}
+      {notices.length > 0 || failedLabels.length > 0 ? (
+        <View
+          accessible
+          accessibilityRole="alert"
+          accessibilityLiveRegion="polite"
+          className="flex-row items-start gap-2 rounded-xl border border-warning-border bg-warning px-3.5 py-3"
+        >
+          <SymbolView
+            name="exclamationmark.triangle"
+            size={16}
+            tintColorClassName="accent-warning-foreground"
+          />
+          <View className="min-w-0 flex-1 gap-0.5">
+            {notices.map((notice) => (
+              <Text key={notice} className="text-sm font-t3-medium text-warning-foreground">
+                {notice}
+              </Text>
+            ))}
+            {failedLabels.length > 0 ? (
+              <Text className="text-sm font-t3-medium text-warning-foreground">
+                {failedLabels.join(", ")} could not refresh limits. Showing the last known values.
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
     </View>
   );
 }
diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx
index 37654140c2829b191291aa161bef3cadfedd4baa..1317cef898392975f6a61a100029ab37ef8f5402 100644
--- a/apps/web/src/components/usage/UsageLimitsPooled.tsx
+++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx
@@ -10,7 +10,7 @@ import {
   type LimitPoolWindow,
   remainingPercent,
 } from "@t3tools/shared/usageLimits";
-import { TicketIcon } from "lucide-react";
+import { AlertTriangleIcon, TicketIcon } from "lucide-react";
 import { type ReactNode, useState } from "react";
 
 import { usePrimarySettings } from "../../hooks/useSettings";
@@ -20,6 +20,7 @@ import { ProviderInstanceIcon } from "../chat/ProviderInstanceIcon";
 import { getDriverOption } from "../settings/providerDriverMeta";
 import { RedactedSensitiveText } from "../settings/RedactedSensitiveText";
 import { Button } from "../ui/button";
+import { Alert, AlertTitle } from "../ui/alert";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import {
   PaceIcon,
@@ -545,7 +546,7 @@ export function UsageLimitsPooled({
   const notices = collectLimitNotices(presentations);
   return (
     <div className="flex flex-col gap-8">
-      {pools.length === 0 ? (
+      {pools.length === 0 && notices.length === 0 ? (
         <p className="text-sm text-muted-foreground">
           No provider on the selected environments reports subscription limits.
         </p>
@@ -562,10 +563,13 @@ export function UsageLimitsPooled({
 function LimitNotices({ notices }: { readonly notices: readonly string[] }) {
   if (notices.length === 0) return null;
   return (
-    <ul className="flex flex-col gap-1 text-xs text-muted-foreground">
+    <Alert variant="warning" controlAlignment="first-line">
+      <AlertTriangleIcon />
       {notices.map((notice) => (
-        <li key={notice}>{notice}</li>
+        <AlertTitle key={notice} className="break-words">
+          {notice}
+        </AlertTitle>
       ))}
-    </ul>
+    </Alert>
   );
 }
-- 
2.54.0