feat: Add Overview dashboard page and fix UI layout issues

backend/src/api/admin/index.ts

@@ -7,6 +7,7 @@ import { adminEmbeddings } from "./embeddings";
 import { adminModels } from "./models";
 import { adminProviders } from "./providers";
 import { adminRateLimits } from "./rateLimits";
+import { adminStats } from "./stats";
 import { adminUpstream } from "./upstream";
 import { adminUsage } from "./usage";
 
@@ -27,6 +28,7 @@ export const routes = new Elysia({
         .use(adminProviders)
         .use(adminModels)
         .use(adminEmbeddings)
+        .use(adminStats)
         .get("/", () => true, {
           detail: { description: "Check whether the admin secret is valid." },
         })

backend/src/api/admin/providers.ts

@@ -8,6 +8,170 @@ import {
   updateProvider,
   listModelsByProvider,
 } from "@/db";
+import type { ProviderTypeEnumType } from "@/db/schema";
+
+// ============================================
+// Provider Test Strategy Pattern
+// ============================================
+
+export interface ProviderTestResult {
+  success: boolean;
+  message?: string;
+  models: { id: string; owned_by?: string }[];
+}
+
+interface Provider {
+  id: number;
+  name: string;
+  type: ProviderTypeEnumType;
+  baseUrl: string;
+  apiKey: string | null;
+  apiVersion: string | null;
+}
+
+type ProviderTestFn = (provider: Provider) => Promise<ProviderTestResult>;
+
+/**
+ * Check if an error indicates that the OpenAI models endpoint is unavailable.
+ * This helper detects 404/405 errors which indicate the endpoint doesn't exist
+ * but the connection itself may be working.
+ */
+function isModelEndpointUnavailable(error: Error & { status?: number }): boolean {
+  const errorMessage = error.message || "";
+  return (
+    error.status === 404 ||
+    error.status === 405 ||
+    errorMessage.includes("404") ||
+    errorMessage.includes("405") ||
+    errorMessage.includes("Not Found") ||
+    errorMessage.includes("Method Not Allowed")
+  );
+}
+
+/**
+ * Test Anthropic provider connection by sending a minimal messages request.
+ * Anthropic doesn't have a /models endpoint, so we test auth via messages API.
+ */
+async function testAnthropicConnection(
+  provider: Provider,
+): Promise<ProviderTestResult> {
+  const baseUrl = provider.baseUrl.endsWith("/")
+    ? provider.baseUrl.slice(0, -1)
+    : provider.baseUrl;
+
+  const response = await fetch(`${baseUrl}/messages`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "anthropic-version": provider.apiVersion || "2023-06-01",
+      ...(provider.apiKey && { "x-api-key": provider.apiKey }),
+    },
+    body: JSON.stringify({
+      model: "claude-3-haiku-20240307", // Use a common model for testing
+      messages: [{ role: "user", content: "Hi" }],
+      max_tokens: 1,
+    }),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    // Check if the error is just about invalid model (which means auth is working)
+    if (response.status === 400 && text.includes("model")) {
+      return {
+        success: true,
+        message: "Connection successful (API key valid)",
+        models: [],
+      };
+    }
+    throw new Error(`API error: ${response.status} ${text}`);
+  }
+
+  return {
+    success: true,
+    message: "Connection successful",
+    models: [],
+  };
+}
+
+/**
+ * Test OpenAI Responses provider connection.
+ * The /models endpoint might not be available for all deployments.
+ */
+async function testOpenAIResponsesConnection(
+  provider: Provider,
+): Promise<ProviderTestResult> {
+  const client = new OpenAI({
+    baseURL: provider.baseUrl,
+    apiKey: provider.apiKey || "not-required",
+  });
+
+  try {
+    const models = await client.models.list();
+    return {
+      success: true,
+      models: models.data.map((m) => ({
+        id: m.id,
+        owned_by: m.owned_by,
+      })),
+    };
+  } catch (e) {
+    // Check if it's a 404/405 (endpoint not available) vs real connection error
+    const error = e as Error & { status?: number };
+
+    if (isModelEndpointUnavailable(error)) {
+      return {
+        success: true,
+        message: "Connection configured (models endpoint not available)",
+        models: [],
+      };
+    }
+
+    // Re-throw actual connection errors to be handled by outer catch
+    throw e;
+  }
+}
+
+/**
+ * Test standard OpenAI-compatible provider connection (openai, azure, ollama).
+ * Uses the /models endpoint to verify connection and list available models.
+ */
+async function testDefaultOpenAIConnection(
+  provider: Provider,
+): Promise<ProviderTestResult> {
+  const client = new OpenAI({
+    baseURL: provider.baseUrl,
+    apiKey: provider.apiKey || "not-required",
+  });
+
+  const models = await client.models.list();
+  return {
+    success: true,
+    models: models.data.map((m) => ({
+      id: m.id,
+      owned_by: m.owned_by,
+    })),
+  };
+}
+
+/**
+ * Map provider types to their specific test functions.
+ * Providers not in this map will use the default OpenAI test.
+ */
+const providerTestHandlers: Partial<Record<ProviderTypeEnumType, ProviderTestFn>> = {
+  anthropic: testAnthropicConnection,
+  "openai-responses": testOpenAIResponsesConnection,
+};
+
+/**
+ * Get the appropriate test function for a provider type.
+ */
+function getProviderTestFn(type: ProviderTypeEnumType): ProviderTestFn {
+  return providerTestHandlers[type] ?? testDefaultOpenAIConnection;
+}
+
+// ============================================
+// Provider Routes
+// ============================================
 
 export const adminProviders = new Elysia({ prefix: "/providers" })
   // List all providers
@@ -144,87 +308,8 @@ export const adminProviders = new Elysia({ prefix: "/providers" })
       }
 
       try {
-        // For Anthropic, send a minimal messages request to test the connection
-        if (provider.type === "anthropic") {
-          const baseUrl = provider.baseUrl.endsWith("/")
-            ? provider.baseUrl.slice(0, -1)
-            : provider.baseUrl;
-
-          const response = await fetch(`${baseUrl}/messages`, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              "anthropic-version": provider.apiVersion || "2023-06-01",
-              ...(provider.apiKey && { "x-api-key": provider.apiKey }),
-            },
-            body: JSON.stringify({
-              model: "claude-3-haiku-20240307", // Use a common model for testing
-              messages: [{ role: "user", content: "Hi" }],
-              max_tokens: 1,
-            }),
-          });
-
-          if (!response.ok) {
-            const text = await response.text();
-            // Check if the error is just about invalid model (which means auth is working)
-            if (response.status === 400 && text.includes("model")) {
-              return {
-                success: true,
-                message: "Connection successful (API key valid)",
-                models: [],
-              };
-            }
-            throw new Error(`API error: ${response.status} ${text}`);
-          }
-
-          return {
-            success: true,
-            message: "Connection successful",
-            models: [],
-          };
-        }
-
-        // For openai-responses, try the standard /models endpoint first
-        // since most deployments share the same OpenAI account
-        if (provider.type === "openai-responses") {
-          const client = new OpenAI({
-            baseURL: provider.baseUrl,
-            apiKey: provider.apiKey || "not-required",
-          });
-
-          try {
-            const models = await client.models.list();
-            return {
-              success: true,
-              models: models.data.map((m) => ({
-                id: m.id,
-                owned_by: m.owned_by,
-              })),
-            };
-          } catch {
-            // If /models doesn't work, just report success for connection test
-            return {
-              success: true,
-              message: "Connection configured (models endpoint not available)",
-              models: [],
-            };
-          }
-        }
-
-        // For other types (openai, azure, ollama), use the standard approach
-        const client = new OpenAI({
-          baseURL: provider.baseUrl,
-          apiKey: provider.apiKey || "not-required",
-        });
-
-        const models = await client.models.list();
-        return {
-          success: true,
-          models: models.data.map((m) => ({
-            id: m.id,
-            owned_by: m.owned_by,
-          })),
-        };
+        const testFn = getProviderTestFn(provider.type);
+        return await testFn(provider);
       } catch (e) {
         return status(502, {
           success: false,
@@ -274,13 +359,19 @@ export const adminProviders = new Elysia({ prefix: "/providers" })
           })),
         };
       } catch (e) {
+        const error = e as Error & { status?: number };
+
         // For openai-responses, the /models endpoint might not be available
-        if (provider.type === "openai-responses") {
+        if (
+          provider.type === "openai-responses" &&
+          isModelEndpointUnavailable(error)
+        ) {
           return status(400, {
             error: "Models list endpoint not available for this provider. Please configure models manually.",
             unsupported: true,
           });
         }
+
         return status(502, {
           error: e instanceof Error ? e.message : "Unknown error",
         });