fix(frontend): Add comprehensive debugging for API connection issues

Enhanced error handling and debugging to diagnose API connection problems.

Changes:
- Added detailed console logging in API client (client.ts)
- Enhanced error display in projects page with troubleshooting steps
- Added logging in useProjects hook for better debugging
- Display API URL and error details on error screen
- Added retry button for easy error recovery

This will help diagnose why the backend API (localhost:5167) is not connecting.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(dashboard)/projects/page.tsx

@@ -12,6 +12,14 @@ export default function ProjectsPage() {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const { data: projects, isLoading, error } = useProjects();
 
+  // Log state for debugging
+  console.log('[ProjectsPage] State:', {
+    isLoading,
+    error,
+    projects,
+    apiUrl: process.env.NEXT_PUBLIC_API_URL,
+  });
+
   if (isLoading) {
     return (
       <div className="flex h-[50vh] items-center justify-center">
@@ -21,11 +29,44 @@ export default function ProjectsPage() {
   }
 
   if (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api/v1';
+
+    console.error('[ProjectsPage] Error loading projects:', error);
+
     return (
       <div className="flex h-[50vh] items-center justify-center">
-        <p className="text-sm text-muted-foreground">
-          Failed to load projects. Please try again later.
-        </p>
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-red-600">Failed to Load Projects</CardTitle>
+            <CardDescription>Unable to connect to the backend API</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <p className="text-sm font-medium">Error Details:</p>
+              <p className="text-sm text-muted-foreground">{errorMessage}</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">API URL:</p>
+              <p className="text-sm font-mono text-muted-foreground">{apiUrl}</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">Troubleshooting Steps:</p>
+              <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
+                <li>Check if the backend server is running</li>
+                <li>Verify the API URL in .env.local</li>
+                <li>Check browser console (F12) for detailed errors</li>
+                <li>Check network tab (F12) for failed requests</li>
+              </ul>
+            </div>
+            <Button
+              onClick={() => window.location.reload()}
+              className="w-full"
+            >
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
       </div>
     );
   }