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>

lib/api/client.ts

@@ -1,5 +1,11 @@
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api/v1';
 
+// Log API URL for debugging
+if (typeof window !== 'undefined') {
+  console.log('[API Client] API_URL:', API_URL);
+  console.log('[API Client] NEXT_PUBLIC_API_URL:', process.env.NEXT_PUBLIC_API_URL);
+}
+
 export class ApiError extends Error {
   constructor(
     public status: number,
@@ -14,11 +20,18 @@ export class ApiError extends Error {
 async function handleResponse<T>(response: Response): Promise<T> {
   if (!response.ok) {
     const errorData = await response.json().catch(() => ({}));
-    throw new ApiError(
+    const error = new ApiError(
       response.status,
       errorData.message || response.statusText,
       errorData
     );
+    console.error('[API Client] Request failed:', {
+      url: response.url,
+      status: response.status,
+      statusText: response.statusText,
+      errorData,
+    });
+    throw error;
   }
 
   if (response.status === 204) {
@@ -34,6 +47,12 @@ export async function apiRequest<T>(
 ): Promise<T> {
   const url = `${API_URL}${endpoint}`;
 
+  console.log('[API Client] Request:', {
+    method: options.method || 'GET',
+    url,
+    endpoint,
+  });
+
   const headers: Record<string, string> = {
     'Content-Type': 'application/json',
   };
@@ -56,8 +75,23 @@ export async function apiRequest<T>(
     headers,
   };
 
-  const response = await fetch(url, config);
-  return handleResponse<T>(response);
+  try {
+    const response = await fetch(url, config);
+    const result = await handleResponse<T>(response);
+    console.log('[API Client] Response:', {
+      url,
+      status: response.status,
+      data: result,
+    });
+    return result;
+  } catch (error) {
+    console.error('[API Client] Network error:', {
+      url,
+      error: error instanceof Error ? error.message : String(error),
+      errorObject: error,
+    });
+    throw error;
+  }
 }
 
 export const api = {