fix(ui): restore provider assets and model availability endpoint (#367)

* fix(usage): track lifetime request total beyond history cap

* fix(ui): restore provider assets and model availability endpoint

src/app/(dashboard)/dashboard/usage/components/ProviderLimits/ProviderLimitCard.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import Image from "next/image";
 import Card from "@/shared/components/Card";
+import ProviderIcon from "@/shared/components/ProviderIcon";
 import Badge from "@/shared/components/Badge";
 import QuotaProgressBar from "./QuotaProgressBar";
 import { calculatePercentage } from "./utils";
@@ -25,11 +25,10 @@ export default function ProviderLimitCard({
   onRefresh,
 }) {
   const [refreshing, setRefreshing] = useState(false);
-  const [imgError, setImgError] = useState(false);
 
   const handleRefresh = async () => {
     if (!onRefresh || refreshing) return;
-    
+
     setRefreshing(true);
     try {
       await onRefresh();
@@ -63,28 +62,20 @@ export default function ProviderLimitCard({
             className="size-10 rounded-lg flex items-center justify-center p-1.5"
             style={{ backgroundColor: `${providerColor}15` }}
           >
-            {imgError ? (
-              <span
-                className="text-sm font-bold"
-                style={{ color: providerColor }}
-              >
-                {provider?.slice(0, 2).toUpperCase() || "PR"}
-              </span>
-            ) : (
-              <Image
-                src={`/providers/${provider}.png`}
-                alt={provider || "Provider"}
-                width={40}
-                height={40}
-                className="object-contain rounded-lg"
-                sizes="40px"
-                onError={() => setImgError(true)}
-              />
-            )}
+            <ProviderIcon
+              src={`/providers/${provider}.png`}
+              alt={provider || "Provider"}
+              size={40}
+              className="object-contain rounded-lg"
+              fallbackText={provider?.slice(0, 2).toUpperCase() || "PR"}
+              fallbackColor={providerColor}
+            />
           </div>
-          
+
           <div>
-            <h3 className="font-semibold text-text-primary">{name || provider}</h3>
+            <h3 className="font-semibold text-text-primary">
+              {name || provider}
+            </h3>
             {plan && (
               <Badge
                 variant={planVariants[plan?.toLowerCase()] || "default"}
@@ -146,7 +137,9 @@ export default function ProviderLimitCard({
             <span className="material-symbols-outlined text-blue-500 text-[20px]">
               info
             </span>
-            <p className="text-sm text-blue-600 dark:text-blue-400">{message}</p>
+            <p className="text-sm text-blue-600 dark:text-blue-400">
+              {message}
+            </p>
           </div>
         </div>
       )}
@@ -156,11 +149,12 @@ export default function ProviderLimitCard({
         <div className="space-y-4">
           {quotas.map((quota, index) => {
             // For Antigravity, use remainingPercentage if available, otherwise calculate
-            const percentage = quota.remainingPercentage !== undefined
-              ? Math.round((quota.total - quota.used) / quota.total * 100)
-              : calculatePercentage(quota.used, quota.total);
+            const percentage =
+              quota.remainingPercentage !== undefined
+                ? Math.round(((quota.total - quota.used) / quota.total) * 100)
+                : calculatePercentage(quota.used, quota.total);
             const unlimited = quota.total === 0 || quota.total === null;
-            
+
             return (
               <QuotaProgressBar
                 key={`${quota.name}-${index}`}