Final UI V3

# UI V3 Changelog

Major updates and improvements in this release:

## Core Changes
- Complete NEW REWRITTEN UI system overhaul (V3) with semantic design tokens
- New settings management system with drag-and-drop capabilities
- Enhanced provider system supporting multiple AI services
- Improved theme system with better dark mode support
- New component library with consistent design patterns

## Technical Updates
- Reorganized project architecture for better maintainability
- Performance optimizations and bundle size improvements
- Enhanced security features and access controls
- Improved developer experience with better tooling
- Comprehensive testing infrastructure

## New Features
- Background rays effect for improved visual feedback
- Advanced tab management system
- Automatic and manual update support
- Enhanced error handling and visualization
- Improved accessibility across all components

For detailed information about all changes and improvements, please see the full changelog.

app/lib/api/connection.ts

@@ -5,14 +5,59 @@ export interface ConnectionStatus {
 }
 
 export const checkConnection = async (): Promise<ConnectionStatus> => {
-  /*
-   * TODO: Implement actual connection check logic
-   * This is a mock implementation
-   */
-  const connected = Math.random() > 0.1; // 90% chance of being connected
-  return {
-    connected,
-    latency: connected ? Math.floor(Math.random() * 1500) : 0, // Random latency between 0-1500ms
-    lastChecked: new Date().toISOString(),
-  };
+  try {
+    // Check if we have network connectivity
+    const online = navigator.onLine;
+
+    if (!online) {
+      return {
+        connected: false,
+        latency: 0,
+        lastChecked: new Date().toISOString(),
+      };
+    }
+
+    // Try multiple endpoints in case one fails
+    const endpoints = [
+      '/api/health',
+      '/', // Fallback to root route
+      '/favicon.ico', // Another common fallback
+    ];
+
+    let latency = 0;
+    let connected = false;
+
+    for (const endpoint of endpoints) {
+      try {
+        const start = performance.now();
+        const response = await fetch(endpoint, {
+          method: 'HEAD',
+          cache: 'no-cache',
+        });
+        const end = performance.now();
+
+        if (response.ok) {
+          latency = Math.round(end - start);
+          connected = true;
+          break;
+        }
+      } catch (endpointError) {
+        console.debug(`Failed to connect to ${endpoint}:`, endpointError);
+        continue;
+      }
+    }
+
+    return {
+      connected,
+      latency,
+      lastChecked: new Date().toISOString(),
+    };
+  } catch (error) {
+    console.error('Connection check failed:', error);
+    return {
+      connected: false,
+      latency: 0,
+      lastChecked: new Date().toISOString(),
+    };
+  }
 };