dev setup

apps/website/components/dev/sections/APIStatusSection.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
+import { useState } from 'react';
+import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
+import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
+import { useNotifications } from '@/components/notifications/NotificationProvider';
+
+interface APIStatusSectionProps {
+  apiStatus: string;
+  apiHealth: any;
+  circuitBreakers: Record<string, any>;
+  checkingHealth: boolean;
+  onHealthCheck: () => void;
+  onResetStats: () => void;
+  onTestError: () => void;
+}
+
+export function APIStatusSection({ 
+  apiStatus, 
+  apiHealth, 
+  circuitBreakers, 
+  checkingHealth,
+  onHealthCheck,
+  onResetStats,
+  onTestError
+}: APIStatusSectionProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <Activity className="w-4 h-4 text-gray-400" />
+        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+          API Status
+        </span>
+      </div>
+
+      {/* Status Indicator */}
+      <div className={`flex items-center justify-between p-2 rounded-lg mb-2 ${
+        apiStatus === 'connected' ? 'bg-green-500/10 border border-green-500/30' :
+        apiStatus === 'degraded' ? 'bg-yellow-500/10 border border-yellow-500/30' :
+        'bg-red-500/10 border border-red-500/30'
+      }`}>
+        <div className="flex items-center gap-2">
+          <Wifi className={`w-4 h-4 ${
+            apiStatus === 'connected' ? 'text-green-400' :
+            apiStatus === 'degraded' ? 'text-yellow-400' :
+            'text-red-400'
+          }`} />
+          <span className="text-sm font-semibold text-white">{apiStatus.toUpperCase()}</span>
+        </div>
+        <span className="text-xs text-gray-400">
+          {apiHealth.successfulRequests}/{apiHealth.totalRequests} req
+        </span>
+      </div>
+
+      {/* Reliability */}
+      <div className="flex items-center justify-between text-xs mb-2">
+        <span className="text-gray-500">Reliability</span>
+        <span className={`font-bold ${
+          apiHealth.totalRequests === 0 ? 'text-gray-500' :
+          (apiHealth.successfulRequests / apiHealth.totalRequests) >= 0.95 ? 'text-green-400' :
+          (apiHealth.successfulRequests / apiHealth.totalRequests) >= 0.8 ? 'text-yellow-400' :
+          'text-red-400'
+        }`}>
+          {apiHealth.totalRequests === 0 ? 'N/A' :
+           ((apiHealth.successfulRequests / apiHealth.totalRequests) * 100).toFixed(1) + '%'}
+        </span>
+      </div>
+
+      {/* Response Time */}
+      <div className="flex items-center justify-between text-xs mb-2">
+        <span className="text-gray-500">Avg Response</span>
+        <span className="text-blue-400 font-mono">
+          {apiHealth.averageResponseTime.toFixed(0)}ms
+        </span>
+      </div>
+
+      {/* Consecutive Failures */}
+      {apiHealth.consecutiveFailures > 0 && (
+        <div className="flex items-center justify-between text-xs mb-2 bg-red-500/10 rounded px-2 py-1">
+          <span className="text-red-400">Consecutive Failures</span>
+          <span className="text-red-400 font-bold">{apiHealth.consecutiveFailures}</span>
+        </div>
+      )}
+
+      {/* Circuit Breakers */}
+      <div className="mt-2">
+        <div className="text-[10px] text-gray-500 mb-1">Circuit Breakers:</div>
+        {Object.keys(circuitBreakers).length === 0 ? (
+          <div className="text-[10px] text-gray-500 italic">None active</div>
+        ) : (
+          <div className="space-y-1 max-h-16 overflow-auto">
+            {Object.entries(circuitBreakers).map(([endpoint, status]: [string, any]) => (
+              <div key={endpoint} className="flex items-center justify-between text-[10px]">
+                <span className="text-gray-400 truncate flex-1">{endpoint.split('/').pop() || endpoint}</span>
+                <span className={`px-1 rounded ${
+                  status.state === 'CLOSED' ? 'bg-green-500/20 text-green-400' :
+                  status.state === 'OPEN' ? 'bg-red-500/20 text-red-400' :
+                  'bg-yellow-500/20 text-yellow-400'
+                }`}>
+                  {status.state}
+                </span>
+                {status.failures > 0 && (
+                  <span className="text-red-400 ml-1">({status.failures})</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* API Actions */}
+      <div className="grid grid-cols-2 gap-2 mt-3">
+        <button
+          onClick={onHealthCheck}
+          disabled={checkingHealth}
+          className="px-2 py-1.5 bg-primary-blue hover:bg-primary-blue/80 text-white text-xs rounded transition-colors disabled:opacity-50 flex items-center justify-center gap-1"
+        >
+          <RefreshCw className={`w-3 h-3 ${checkingHealth ? 'animate-spin' : ''}`} />
+          Health Check
+        </button>
+        <button
+          onClick={onResetStats}
+          className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 text-xs rounded transition-colors border border-charcoal-outline"
+        >
+          Reset Stats
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-2 mt-2">
+        <button
+          onClick={onTestError}
+          className="px-2 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs rounded transition-colors flex items-center justify-center gap-1"
+        >
+          <Terminal className="w-3 h-3" />
+          Test Error Handler
+        </button>
+      </div>
+
+      <div className="text-[10px] text-gray-600 mt-2">
+        Last Check: {apiHealth.lastCheck ? new Date(apiHealth.lastCheck).toLocaleTimeString() : 'Never'}
+      </div>
+    </div>
+  );
+}