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 (
- {failedLabels.length ? (
-
- {failedLabels.join(", ")} could not refresh limits. Showing the last known values.
-
- ) : null}
- {pools.length === 0 ? (
+ {pools.length === 0 && notices.length === 0 && failedLabels.length === 0 ? (
{selected.size === 0
? "Select an environment to see limits."
@@ -243,11 +238,32 @@ export function UsageLimitsSection({
))}
))}
- {notices.map((notice) => (
-
- {notice}
-
- ))}
+ {notices.length > 0 || failedLabels.length > 0 ? (
+
+
+
+ {notices.map((notice) => (
+
+ {notice}
+
+ ))}
+ {failedLabels.length > 0 ? (
+
+ {failedLabels.join(", ")} could not refresh limits. Showing the last known values.
+
+ ) : null}
+
+
+ ) : null}
);
}
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 (
- {pools.length === 0 ? (
+ {pools.length === 0 && notices.length === 0 ? (
No provider on the selected environments reports subscription limits.
@@ -562,10 +563,13 @@ export function UsageLimitsPooled({
function LimitNotices({ notices }: { readonly notices: readonly string[] }) {
if (notices.length === 0) return null;
return (
-
+
+
{notices.map((notice) => (
- - {notice}
+
+ {notice}
+
))}
-
+
);
}