-1 values

Signed-off-by: ale <ale@manalejandro.com>

next.config.mjs

@@ -15,10 +15,8 @@ const nextConfig = {
     ];
   },
   
-  // Configuración experimental para mejorar el manejo de headers
-  experimental: {
-    serverComponentsExternalPackages: ['ping'],
-  },
+  // Configuración de paquetes externos para server components
+  serverExternalPackages: ['ping'],
   
   // Configuración de red
   env: {

src/app/api/ping/route.js

@@ -136,13 +136,13 @@ export async function POST(request) {
       statistics: stats,
       rateLimit: {
         limit: rateLimitResult.limit,
-        remaining: rateLimitResult.remaining - 1,
+        remaining: rateLimitResult.remaining,
         resetTime: rateLimitResult.resetTime
       }
     }, {
       headers: {
         'X-RateLimit-Limit': rateLimitResult.limit.toString(),
-        'X-RateLimit-Remaining': (rateLimitResult.remaining - 1).toString(),
+        'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
         'X-RateLimit-Reset': rateLimitResult.resetTime.toString()
       }
     });

src/app/components/RateLimitInfo.js

@@ -23,7 +23,7 @@ export default function RateLimitInfo({ rateLimitInfo }) {
   };
 
   const getStatusColor = () => {
-    const percentage = (remaining / limit) * 100;
+    const percentage = Math.max(0, (remaining / limit) * 100);
     
     if (percentage > 50) {
       return 'bg-green-500';
@@ -35,7 +35,7 @@ export default function RateLimitInfo({ rateLimitInfo }) {
   };
 
   const getTextColor = () => {
-    const percentage = (remaining / limit) * 100;
+    const percentage = Math.max(0, (remaining / limit) * 100);
     
     if (percentage > 50) {
       return 'text-green-700 dark:text-green-300';
@@ -47,7 +47,7 @@ export default function RateLimitInfo({ rateLimitInfo }) {
   };
 
   const getBorderColor = () => {
-    const percentage = (remaining / limit) * 100;
+    const percentage = Math.max(0, (remaining / limit) * 100);
     
     if (percentage > 50) {
       return 'border-green-200 dark:border-green-800';
@@ -59,7 +59,7 @@ export default function RateLimitInfo({ rateLimitInfo }) {
   };
 
   const getBgColor = () => {
-    const percentage = (remaining / limit) * 100;
+    const percentage = Math.max(0, (remaining / limit) * 100);
     
     if (percentage > 50) {
       return 'bg-green-50 dark:bg-green-900/20';
@@ -85,20 +85,20 @@ export default function RateLimitInfo({ rateLimitInfo }) {
         <div className="flex-1">
           <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
             <span>Requests remaining</span>
-            <span>{remaining} / {limit}</span>
+            <span>{Math.max(0, remaining)} / {limit}</span>
           </div>
           
           <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
             <div
               className={`h-2 rounded-full transition-all duration-300 ${getStatusColor()}`}
-              style={{ width: `${(remaining / limit) * 100}%` }}
+              style={{ width: `${Math.max(0, Math.min(100, (remaining / limit) * 100))}%` }}
             />
           </div>
         </div>
         
         <div className="text-right">
           <div className={`text-lg font-bold ${getTextColor()}`}>
-            {remaining}
+            {Math.max(0, remaining)}
           </div>
           <div className="text-xs text-gray-500 dark:text-gray-400">
             left

src/lib/rate-limiter.js

@@ -48,7 +48,7 @@ export class RateLimiter {
     return {
       allowed,
       limit: this.limit,
-      remaining: Math.max(0, this.limit - requestCount - (allowed ? 1 : 0)),
+      remaining: Math.max(0, this.limit - (requestCount + (allowed ? 1 : 0))),
       resetTime: data.resetTime,
       requestCount: requestCount + (allowed ? 1 : 0)
     };