feat: implement dynamic API connection status

- Move health endpoint from /health to /api/v1/health
- Update frontend Dashboard to show real connection status
- Add health check query that refreshes every 30 seconds
- Display connected/disconnected status with appropriate icons
- Show loading state while checking connection

frontend/src/components/Dashboard.tsx

@@ -8,7 +8,9 @@ import {
   X,
   Home,
   List,
-  BarChart3
+  BarChart3,
+  Wifi,
+  WifiOff
 } from 'lucide-react';
 import { apiClient } from '../lib/api';
 import AccountsOverview from './AccountsOverview';
@@ -28,6 +30,16 @@ export default function Dashboard() {
     queryFn: apiClient.getAccounts,
   });
 
+  const { data: healthStatus, isLoading: healthLoading } = useQuery({
+    queryKey: ['health'],
+    queryFn: async () => {
+      const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/v1/health`);
+      return response.json();
+    },
+    refetchInterval: 30000, // Check every 30 seconds
+    retry: 3,
+  });
+
   const navigation = [
     { name: 'Overview', icon: Home, id: 'overview' as TabType },
     { name: 'Transactions', icon: List, id: 'transactions' as TabType },
@@ -129,8 +141,22 @@ export default function Dashboard() {
             </div>
             <div className="flex items-center space-x-2">
               <div className="flex items-center space-x-1">
-                <Activity className="h-4 w-4 text-green-500" />
-                <span className="text-sm text-gray-600">Connected</span>
+                {healthLoading ? (
+                  <>
+                    <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
+                    <span className="text-sm text-gray-600">Checking...</span>
+                  </>
+                ) : healthStatus?.success ? (
+                  <>
+                    <Wifi className="h-4 w-4 text-green-500" />
+                    <span className="text-sm text-gray-600">Connected</span>
+                  </>
+                ) : (
+                  <>
+                    <WifiOff className="h-4 w-4 text-red-500" />
+                    <span className="text-sm text-red-500">Disconnected</span>
+                  </>
+                )}
               </div>
             </div>
           </div>