From 797b0b4746ac05abf429cb43a955d8c7755ba275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 17:13:57 +0800
Subject: [PATCH 01/12] feat(dashboard): add optional Grafana dashboard
 embedding on overview page

Add an admin settings API and allow users to configure a Grafana dashboard
URL. When configured, a toggle appears on the overview page to switch between
built-in Recharts charts and an embedded Grafana iframe. Includes a pre-built
Grafana dashboard JSON for easy import.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/api/admin/index.ts                |   2 +
 backend/src/api/admin/settings.ts             |  58 +++
 frontend/src/hooks/use-settings.ts            |  21 +
 frontend/src/i18n/locales/en-US.json          |   5 +-
 frontend/src/i18n/locales/zh-CN.json          |   5 +-
 frontend/src/pages/overview/grafana-embed.tsx |  30 ++
 frontend/src/pages/overview/index.tsx         | 112 +++---
 .../src/pages/overview/view-mode-toggle.tsx   |  36 ++
 frontend/src/routeTree.gen.ts                 |  51 +--
 frontend/src/routes/_dashboard/index.tsx      |   1 +
 frontend/src/routes/_dashboard/route.tsx      |  22 +-
 grafana/nexusgate-overview.json               | 367 ++++++++++++++++++
 12 files changed, 617 insertions(+), 93 deletions(-)
 create mode 100644 backend/src/api/admin/settings.ts
 create mode 100644 frontend/src/hooks/use-settings.ts
 create mode 100644 frontend/src/pages/overview/grafana-embed.tsx
 create mode 100644 frontend/src/pages/overview/view-mode-toggle.tsx
 create mode 100644 grafana/nexusgate-overview.json

diff --git a/backend/src/api/admin/index.ts b/backend/src/api/admin/index.ts
index 47b41de..78a5ed3 100644
--- a/backend/src/api/admin/index.ts
+++ b/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 { adminSettings } from "./settings";
 import { adminStats } from "./stats";
 import { adminUpstream } from "./upstream";
 import { adminUsage } from "./usage";
@@ -29,6 +30,7 @@ export const routes = new Elysia({
         .use(adminModels)
         .use(adminEmbeddings)
         .use(adminStats)
+        .use(adminSettings)
         .get("/", () => true, {
           detail: { description: "Check whether the admin secret is valid." },
         })
diff --git a/backend/src/api/admin/settings.ts b/backend/src/api/admin/settings.ts
new file mode 100644
index 0000000..7199b1a
--- /dev/null
+++ b/backend/src/api/admin/settings.ts
@@ -0,0 +1,58 @@
+import { Elysia, t } from "elysia";
+import { deleteSetting, getAllSettings, getSetting, upsertSetting } from "@/db";
+
+export const adminSettings = new Elysia().group("/settings", (app) =>
+  app
+    .get(
+      "/",
+      async () => {
+        return await getAllSettings();
+      },
+      {
+        detail: { description: "List all settings" },
+      },
+    )
+    .get(
+      "/:key",
+      async ({ params, status }) => {
+        const setting = await getSetting(params.key);
+        if (!setting) {
+          return status(404, "Setting not found");
+        }
+        return setting;
+      },
+      {
+        params: t.Object({ key: t.String() }),
+        detail: { description: "Get a setting by key" },
+      },
+    )
+    .put(
+      "/:key",
+      async ({ params, body }) => {
+        const result = await upsertSetting({
+          key: params.key,
+          value: body.value,
+        });
+        return result;
+      },
+      {
+        params: t.Object({ key: t.String() }),
+        body: t.Object({ value: t.Any() }),
+        detail: { description: "Create or update a setting" },
+      },
+    )
+    .delete(
+      "/:key",
+      async ({ params, status }) => {
+        const result = await deleteSetting(params.key);
+        if (!result) {
+          return status(404, "Setting not found");
+        }
+        return result;
+      },
+      {
+        params: t.Object({ key: t.String() }),
+        detail: { description: "Delete a setting" },
+      },
+    ),
+);
diff --git a/frontend/src/hooks/use-settings.ts b/frontend/src/hooks/use-settings.ts
new file mode 100644
index 0000000..be91655
--- /dev/null
+++ b/frontend/src/hooks/use-settings.ts
@@ -0,0 +1,21 @@
+import { queryOptions, useQuery } from '@tanstack/react-query'
+
+import { api } from '@/lib/api'
+
+const GRAFANA_DASHBOARD_URL_KEY = 'grafana_dashboard_url'
+
+const grafanaDashboardUrlQueryOptions = queryOptions({
+  queryKey: ['settings', GRAFANA_DASHBOARD_URL_KEY],
+  queryFn: async () => {
+    const { data, error } = await api.admin.settings[GRAFANA_DASHBOARD_URL_KEY].get()
+    if (error) return null
+    return (data as { value: unknown } | null)?.value as string | undefined
+  },
+  staleTime: 5 * 60 * 1000, // 5 minutes
+  retry: false,
+})
+
+export function useGrafanaDashboardUrl() {
+  const { data } = useQuery(grafanaDashboardUrlQueryOptions)
+  return data ?? undefined
+}
diff --git a/frontend/src/i18n/locales/en-US.json b/frontend/src/i18n/locales/en-US.json
index 6a3d98a..a8261cf 100644
--- a/frontend/src/i18n/locales/en-US.json
+++ b/frontend/src/i18n/locales/en-US.json
@@ -394,5 +394,8 @@
   "pages.overview.charts.successRateTrend": "Success Rate Trend",
   "pages.overview.tokens.prompt": "Prompt",
   "pages.overview.tokens.completion": "Completion",
-  "pages.overview.tokens.embedding": "Embedding"
+  "pages.overview.tokens.embedding": "Embedding",
+  "pages.overview.viewMode.builtin": "Built-in",
+  "pages.overview.viewMode.grafana": "Grafana",
+  "pages.overview.grafana.title": "Grafana Dashboard"
 }
diff --git a/frontend/src/i18n/locales/zh-CN.json b/frontend/src/i18n/locales/zh-CN.json
index d2b3064..40ddfc9 100644
--- a/frontend/src/i18n/locales/zh-CN.json
+++ b/frontend/src/i18n/locales/zh-CN.json
@@ -395,5 +395,8 @@
   "pages.overview.charts.successRateTrend": "成功率趋势",
   "pages.overview.tokens.prompt": "输入",
   "pages.overview.tokens.completion": "输出",
-  "pages.overview.tokens.embedding": "向量化"
+  "pages.overview.tokens.embedding": "向量化",
+  "pages.overview.viewMode.builtin": "内置",
+  "pages.overview.viewMode.grafana": "Grafana",
+  "pages.overview.grafana.title": "Grafana 仪表盘"
 }
diff --git a/frontend/src/pages/overview/grafana-embed.tsx b/frontend/src/pages/overview/grafana-embed.tsx
new file mode 100644
index 0000000..acda4fa
--- /dev/null
+++ b/frontend/src/pages/overview/grafana-embed.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function GrafanaEmbed({ url }: { url: string }) {
+  const { t } = useTranslation()
+
+  // Append kiosk param to hide Grafana navigation chrome
+  const embedUrl = new URL(url)
+  if (!embedUrl.searchParams.has('kiosk')) {
+    embedUrl.searchParams.set('kiosk', '')
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('pages.overview.grafana.title')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <iframe
+          src={embedUrl.toString()}
+          className="h-[800px] w-full rounded border-0"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+          loading="lazy"
+          title="Grafana Dashboard"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontend/src/pages/overview/index.tsx b/frontend/src/pages/overview/index.tsx
index 352ae3a..21b1834 100644
--- a/frontend/src/pages/overview/index.tsx
+++ b/frontend/src/pages/overview/index.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useIsMobile } from '@/hooks/use-mobile'
+import { useGrafanaDashboardUrl } from '@/hooks/use-settings'
 import { Route as DashboardIndexRoute } from '@/routes/_dashboard/index'
 
 import { LatencyChart } from './charts/latency-chart'
@@ -12,6 +13,7 @@ import { ModelDistributionChart } from './charts/model-distribution'
 import { RequestsTrendChart } from './charts/requests-trend-chart'
 import { SuccessRateChart } from './charts/success-rate-chart'
 import { TokenUsageChart } from './charts/token-usage-chart'
+import { GrafanaEmbed } from './grafana-embed'
 import { SummaryCards } from './summary-cards'
 import { TimeRangeSelect } from './time-range-select'
 import { useOverviewStats, type TimeRange } from './use-overview-stats'
@@ -57,15 +59,17 @@ function LoadingSkeleton() {
 export function OverviewPage() {
   const { t } = useTranslation()
   const isMobile = useIsMobile()
-  const { range } = DashboardIndexRoute.useSearch()
+  const { range, view } = DashboardIndexRoute.useSearch()
   const navigate = useNavigate()
+  const grafanaUrl = useGrafanaDashboardUrl()
 
   const timeRange = range as TimeRange
+  const showGrafana = view === 'grafana' && !!grafanaUrl
 
   const handleTimeRangeChange = (value: TimeRange) => {
     navigate({
       to: '/',
-      search: { range: value },
+      search: (prev) => ({ ...prev, range: value }),
       replace: true,
     })
   }
@@ -88,8 +92,8 @@ export function OverviewPage() {
 
   return (
     <div className="space-y-6 p-6">
-      {/* Time range selector - only show on mobile */}
-      {isMobile && (
+      {/* Time range selector - only show on mobile in builtin mode */}
+      {isMobile && !showGrafana && (
         <div className="flex items-center justify-end">
           <TimeRangeSelect value={timeRange} onChange={handleTimeRangeChange} />
         </div>
@@ -99,58 +103,62 @@ export function OverviewPage() {
         <LoadingSkeleton />
       ) : (
         <>
-          {/* Summary Cards */}
+          {/* Summary Cards - always visible */}
           <SummaryCards data={data} />
 
-          {/* Row 2: Request Trend + Token Usage */}
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <Card className="md:col-span-2">
-              <CardHeader>
-                <CardTitle>{t('pages.overview.charts.requestsTrend')}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <RequestsTrendChart data={stableTimeSeries} />
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>{t('pages.overview.charts.tokenUsage')}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {stableTokenUsage && <TokenUsageChart data={stableTokenUsage} />}
-              </CardContent>
-            </Card>
-          </div>
+          {showGrafana ? (
+            <GrafanaEmbed url={grafanaUrl} />
+          ) : (
+            <>
+              {/* Row 2: Request Trend + Token Usage */}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                <Card className="md:col-span-2">
+                  <CardHeader>
+                    <CardTitle>{t('pages.overview.charts.requestsTrend')}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <RequestsTrendChart data={stableTimeSeries} />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('pages.overview.charts.tokenUsage')}</CardTitle>
+                  </CardHeader>
+                  <CardContent>{stableTokenUsage && <TokenUsageChart data={stableTokenUsage} />}</CardContent>
+                </Card>
+              </div>
 
-          {/* Row 3: Latency Trend + Model Distribution */}
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle>{t('pages.overview.charts.latencyTrend')}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <LatencyChart data={stableTimeSeries} />
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>{t('pages.overview.charts.modelDistribution')}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ModelDistributionChart data={stableModelDistribution} />
-              </CardContent>
-            </Card>
-          </div>
+              {/* Row 3: Latency Trend + Model Distribution */}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('pages.overview.charts.latencyTrend')}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <LatencyChart data={stableTimeSeries} />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('pages.overview.charts.modelDistribution')}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <ModelDistributionChart data={stableModelDistribution} />
+                  </CardContent>
+                </Card>
+              </div>
 
-          {/* Row 4: Success Rate Trend */}
-          <Card>
-            <CardHeader>
-              <CardTitle>{t('pages.overview.charts.successRateTrend')}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <SuccessRateChart data={stableTimeSeries} />
-            </CardContent>
-          </Card>
+              {/* Row 4: Success Rate Trend */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>{t('pages.overview.charts.successRateTrend')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <SuccessRateChart data={stableTimeSeries} />
+                </CardContent>
+              </Card>
+            </>
+          )}
         </>
       )}
     </div>
diff --git a/frontend/src/pages/overview/view-mode-toggle.tsx b/frontend/src/pages/overview/view-mode-toggle.tsx
new file mode 100644
index 0000000..fd2089c
--- /dev/null
+++ b/frontend/src/pages/overview/view-mode-toggle.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+export type ViewMode = 'builtin' | 'grafana'
+
+interface ViewModeToggleProps {
+  value: ViewMode
+  onChange: (mode: ViewMode) => void
+}
+
+export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="inline-flex items-center rounded-md border p-0.5">
+      <Button
+        variant="ghost"
+        size="xs"
+        className={cn(value === 'builtin' && 'bg-accent')}
+        onClick={() => onChange('builtin')}
+      >
+        {t('pages.overview.viewMode.builtin')}
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
+        className={cn(value === 'grafana' && 'bg-accent')}
+        onClick={() => onChange('grafana')}
+      >
+        {t('pages.overview.viewMode.grafana')}
+      </Button>
+    </div>
+  )
+}
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 416e293..41a350c 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -9,18 +9,18 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as SettingsRouteRouteImport } from './routes/settings/route'
-import { Route as RequestsRouteRouteImport } from './routes/requests/route'
-import { Route as EmbeddingsRouteRouteImport } from './routes/embeddings/route'
-import { Route as AppsRouteRouteImport } from './routes/apps/route'
+import { Route as DashboardIndexRouteImport } from './routes/_dashboard/index'
 import { Route as DashboardRouteRouteImport } from './routes/_dashboard/route'
-import { Route as SettingsIndexRouteImport } from './routes/settings/index'
-import { Route as RequestsIndexRouteImport } from './routes/requests/index'
-import { Route as EmbeddingsIndexRouteImport } from './routes/embeddings/index'
 import { Route as AppsIndexRouteImport } from './routes/apps/index'
-import { Route as DashboardIndexRouteImport } from './routes/_dashboard/index'
-import { Route as SettingsProvidersRouteImport } from './routes/settings/providers'
+import { Route as AppsRouteRouteImport } from './routes/apps/route'
+import { Route as EmbeddingsIndexRouteImport } from './routes/embeddings/index'
+import { Route as EmbeddingsRouteRouteImport } from './routes/embeddings/route'
+import { Route as RequestsIndexRouteImport } from './routes/requests/index'
+import { Route as RequestsRouteRouteImport } from './routes/requests/route'
+import { Route as SettingsIndexRouteImport } from './routes/settings/index'
 import { Route as SettingsModelsRouteImport } from './routes/settings/models'
+import { Route as SettingsProvidersRouteImport } from './routes/settings/providers'
+import { Route as SettingsRouteRouteImport } from './routes/settings/route'
 
 const SettingsRouteRoute = SettingsRouteRouteImport.update({
   id: '/settings',
@@ -134,14 +134,7 @@ export interface FileRouteTypes {
     | '/requests/'
     | '/settings/'
   fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/settings/models'
-    | '/settings/providers'
-    | '/'
-    | '/apps'
-    | '/embeddings'
-    | '/requests'
-    | '/settings'
+  to: '/settings/models' | '/settings/providers' | '/' | '/apps' | '/embeddings' | '/requests' | '/settings'
   id:
     | '__root__'
     | '/_dashboard'
@@ -263,9 +256,7 @@ const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
   DashboardIndexRoute: DashboardIndexRoute,
 }
 
-const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
-  DashboardRouteRouteChildren,
-)
+const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(DashboardRouteRouteChildren)
 
 interface AppsRouteRouteChildren {
   AppsIndexRoute: typeof AppsIndexRoute
@@ -275,9 +266,7 @@ const AppsRouteRouteChildren: AppsRouteRouteChildren = {
   AppsIndexRoute: AppsIndexRoute,
 }
 
-const AppsRouteRouteWithChildren = AppsRouteRoute._addFileChildren(
-  AppsRouteRouteChildren,
-)
+const AppsRouteRouteWithChildren = AppsRouteRoute._addFileChildren(AppsRouteRouteChildren)
 
 interface EmbeddingsRouteRouteChildren {
   EmbeddingsIndexRoute: typeof EmbeddingsIndexRoute
@@ -287,9 +276,7 @@ const EmbeddingsRouteRouteChildren: EmbeddingsRouteRouteChildren = {
   EmbeddingsIndexRoute: EmbeddingsIndexRoute,
 }
 
-const EmbeddingsRouteRouteWithChildren = EmbeddingsRouteRoute._addFileChildren(
-  EmbeddingsRouteRouteChildren,
-)
+const EmbeddingsRouteRouteWithChildren = EmbeddingsRouteRoute._addFileChildren(EmbeddingsRouteRouteChildren)
 
 interface RequestsRouteRouteChildren {
   RequestsIndexRoute: typeof RequestsIndexRoute
@@ -299,9 +286,7 @@ const RequestsRouteRouteChildren: RequestsRouteRouteChildren = {
   RequestsIndexRoute: RequestsIndexRoute,
 }
 
-const RequestsRouteRouteWithChildren = RequestsRouteRoute._addFileChildren(
-  RequestsRouteRouteChildren,
-)
+const RequestsRouteRouteWithChildren = RequestsRouteRoute._addFileChildren(RequestsRouteRouteChildren)
 
 interface SettingsRouteRouteChildren {
   SettingsModelsRoute: typeof SettingsModelsRoute
@@ -315,9 +300,7 @@ const SettingsRouteRouteChildren: SettingsRouteRouteChildren = {
   SettingsIndexRoute: SettingsIndexRoute,
 }
 
-const SettingsRouteRouteWithChildren = SettingsRouteRoute._addFileChildren(
-  SettingsRouteRouteChildren,
-)
+const SettingsRouteRouteWithChildren = SettingsRouteRoute._addFileChildren(SettingsRouteRouteChildren)
 
 const rootRouteChildren: RootRouteChildren = {
   DashboardRouteRoute: DashboardRouteRouteWithChildren,
@@ -326,6 +309,4 @@ const rootRouteChildren: RootRouteChildren = {
   RequestsRouteRoute: RequestsRouteRouteWithChildren,
   SettingsRouteRoute: SettingsRouteRouteWithChildren,
 }
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
diff --git a/frontend/src/routes/_dashboard/index.tsx b/frontend/src/routes/_dashboard/index.tsx
index ae48739..a5c4e8c 100644
--- a/frontend/src/routes/_dashboard/index.tsx
+++ b/frontend/src/routes/_dashboard/index.tsx
@@ -7,6 +7,7 @@ import { OverviewPage } from '@/pages/overview'
 
 export const overviewSearchSchema = z.object({
   range: z.enum(['1m', '5m', '10m', '30m', '1h', '4h', '12h']).catch('1h'),
+  view: z.enum(['builtin', 'grafana']).catch('builtin'),
 })
 
 export type OverviewSearchSchema = z.infer<typeof overviewSearchSchema>
diff --git a/frontend/src/routes/_dashboard/route.tsx b/frontend/src/routes/_dashboard/route.tsx
index bd8e2ca..b3c0658 100644
--- a/frontend/src/routes/_dashboard/route.tsx
+++ b/frontend/src/routes/_dashboard/route.tsx
@@ -10,8 +10,11 @@ import {
   AppSidebarTrigger,
 } from '@/components/app/app-header'
 import { useIsMobile } from '@/hooks/use-mobile'
+import { useGrafanaDashboardUrl } from '@/hooks/use-settings'
 import { TimeRangeSelect } from '@/pages/overview/time-range-select'
 import type { TimeRange } from '@/pages/overview/use-overview-stats'
+import { ViewModeToggle, type ViewMode } from '@/pages/overview/view-mode-toggle'
+
 import { Route as DashboardIndexRoute } from './index'
 
 export const Route = createFileRoute('/_dashboard')({
@@ -21,15 +24,25 @@ export const Route = createFileRoute('/_dashboard')({
 function RouteComponent() {
   const { t } = useTranslation()
   const isMobile = useIsMobile()
-  const { range } = DashboardIndexRoute.useSearch()
+  const { range, view } = DashboardIndexRoute.useSearch()
   const navigate = useNavigate()
+  const grafanaUrl = useGrafanaDashboardUrl()
 
   const timeRange = range as TimeRange
+  const viewMode = view as ViewMode
 
   const handleTimeRangeChange = (value: TimeRange) => {
     navigate({
       to: '/',
-      search: { range: value },
+      search: (prev) => ({ ...prev, range: value }),
+      replace: true,
+    })
+  }
+
+  const handleViewModeChange = (value: ViewMode) => {
+    navigate({
+      to: '/',
+      search: (prev) => ({ ...prev, view: value }),
       replace: true,
     })
   }
@@ -45,8 +58,9 @@ function RouteComponent() {
         {!isMobile && (
           <>
             <AppHeaderSpacer />
-            <AppHeaderPart>
-              <TimeRangeSelect value={timeRange} onChange={handleTimeRangeChange} />
+            <AppHeaderPart className="gap-2">
+              {grafanaUrl && <ViewModeToggle value={viewMode} onChange={handleViewModeChange} />}
+              {viewMode !== 'grafana' && <TimeRangeSelect value={timeRange} onChange={handleTimeRangeChange} />}
             </AppHeaderPart>
           </>
         )}
diff --git a/grafana/nexusgate-overview.json b/grafana/nexusgate-overview.json
new file mode 100644
index 0000000..0fc7d26
--- /dev/null
+++ b/grafana/nexusgate-overview.json
@@ -0,0 +1,367 @@
+{
+  "__inputs": [
+    {
+      "name": "DS_PROMETHEUS",
+      "label": "Prometheus",
+      "description": "",
+      "type": "datasource",
+      "pluginId": "prometheus",
+      "pluginName": "Prometheus"
+    }
+  ],
+  "__requires": [
+    {
+      "type": "grafana",
+      "id": "grafana",
+      "name": "Grafana",
+      "version": "10.0.0"
+    },
+    {
+      "type": "datasource",
+      "id": "prometheus",
+      "name": "Prometheus",
+      "version": "1.0.0"
+    },
+    {
+      "type": "panel",
+      "id": "timeseries",
+      "name": "Time series",
+      "version": ""
+    },
+    {
+      "type": "panel",
+      "id": "piechart",
+      "name": "Pie chart",
+      "version": ""
+    },
+    {
+      "type": "panel",
+      "id": "stat",
+      "name": "Stat",
+      "version": ""
+    },
+    {
+      "type": "panel",
+      "id": "gauge",
+      "name": "Gauge",
+      "version": ""
+    }
+  ],
+  "annotations": {
+    "list": []
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 1,
+  "id": null,
+  "links": [],
+  "panels": [
+    {
+      "title": "Total Completions",
+      "type": "stat",
+      "gridPos": { "h": 4, "w": 6, "x": 0, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "targets": [
+        {
+          "expr": "sum(nexusgate_completions_total)",
+          "legendFormat": "Total",
+          "refId": "A"
+        }
+      ]
+    },
+    {
+      "title": "Total Embeddings",
+      "type": "stat",
+      "gridPos": { "h": 4, "w": 6, "x": 6, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "blue", "value": null }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "targets": [
+        {
+          "expr": "sum(nexusgate_embeddings_total)",
+          "legendFormat": "Total",
+          "refId": "A"
+        }
+      ]
+    },
+    {
+      "title": "Active API Keys",
+      "type": "stat",
+      "gridPos": { "h": 4, "w": 6, "x": 12, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "purple", "value": null }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "targets": [
+        {
+          "expr": "nexusgate_active_api_keys",
+          "legendFormat": "Keys",
+          "refId": "A"
+        }
+      ]
+    },
+    {
+      "title": "Success Rate",
+      "type": "gauge",
+      "gridPos": { "h": 4, "w": 6, "x": 18, "y": 0 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "red", "value": null },
+              { "color": "yellow", "value": 0.9 },
+              { "color": "green", "value": 0.95 }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "targets": [
+        {
+          "expr": "sum(nexusgate_completions_total{status=\"completed\"}) / sum(nexusgate_completions_total)",
+          "legendFormat": "Success Rate",
+          "refId": "A"
+        }
+      ]
+    },
+    {
+      "title": "Request Trend",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 16, "x": 0, "y": 4 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth",
+            "fillOpacity": 10,
+            "pointSize": 5,
+            "showPoints": "auto"
+          }
+        },
+        "overrides": []
+      },
+      "options": {
+        "tooltip": { "mode": "multi", "sort": "desc" },
+        "legend": { "displayMode": "list", "placement": "bottom" }
+      },
+      "targets": [
+        {
+          "expr": "sum(rate(nexusgate_completions_total[5m])) by (status)",
+          "legendFormat": "Completions ({{status}})",
+          "refId": "A"
+        },
+        {
+          "expr": "sum(rate(nexusgate_embeddings_total[5m])) by (status)",
+          "legendFormat": "Embeddings ({{status}})",
+          "refId": "B"
+        }
+      ]
+    },
+    {
+      "title": "Model Distribution",
+      "type": "piechart",
+      "gridPos": { "h": 8, "w": 8, "x": 16, "y": 4 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {},
+        "overrides": []
+      },
+      "options": {
+        "legend": { "displayMode": "table", "placement": "right" },
+        "pieType": "donut",
+        "tooltip": { "mode": "single" }
+      },
+      "targets": [
+        {
+          "expr": "sum by (model)(nexusgate_completions_total)",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ]
+    },
+    {
+      "title": "Token Usage",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 12 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth",
+            "fillOpacity": 10,
+            "stacking": { "mode": "normal" }
+          }
+        },
+        "overrides": []
+      },
+      "options": {
+        "tooltip": { "mode": "multi", "sort": "desc" },
+        "legend": { "displayMode": "list", "placement": "bottom" }
+      },
+      "targets": [
+        {
+          "expr": "sum(rate(nexusgate_tokens_prompt_total[5m]))",
+          "legendFormat": "Prompt Tokens/s",
+          "refId": "A"
+        },
+        {
+          "expr": "sum(rate(nexusgate_tokens_completion_total[5m]))",
+          "legendFormat": "Completion Tokens/s",
+          "refId": "B"
+        },
+        {
+          "expr": "sum(rate(nexusgate_tokens_embedding_total[5m]))",
+          "legendFormat": "Embedding Tokens/s",
+          "refId": "C"
+        }
+      ]
+    },
+    {
+      "title": "Latency (P50 / P95 / P99)",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 12 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s",
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth",
+            "fillOpacity": 5
+          }
+        },
+        "overrides": []
+      },
+      "options": {
+        "tooltip": { "mode": "multi", "sort": "desc" },
+        "legend": { "displayMode": "list", "placement": "bottom" }
+      },
+      "targets": [
+        {
+          "expr": "histogram_quantile(0.50, sum(rate(nexusgate_completion_duration_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P50 Duration",
+          "refId": "A"
+        },
+        {
+          "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_duration_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P95 Duration",
+          "refId": "B"
+        },
+        {
+          "expr": "histogram_quantile(0.99, sum(rate(nexusgate_completion_duration_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P99 Duration",
+          "refId": "C"
+        }
+      ]
+    },
+    {
+      "title": "Time to First Token (P50 / P95 / P99)",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 20 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s",
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth",
+            "fillOpacity": 5
+          }
+        },
+        "overrides": []
+      },
+      "options": {
+        "tooltip": { "mode": "multi", "sort": "desc" },
+        "legend": { "displayMode": "list", "placement": "bottom" }
+      },
+      "targets": [
+        {
+          "expr": "histogram_quantile(0.50, sum(rate(nexusgate_completion_ttft_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P50 TTFT",
+          "refId": "A"
+        },
+        {
+          "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_ttft_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P95 TTFT",
+          "refId": "B"
+        },
+        {
+          "expr": "histogram_quantile(0.99, sum(rate(nexusgate_completion_ttft_seconds_bucket[5m])) by (le))",
+          "legendFormat": "P99 TTFT",
+          "refId": "C"
+        }
+      ]
+    },
+    {
+      "title": "Rate Limit Rejections",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 20 },
+      "datasource": { "type": "prometheus", "uid": "${DS_PROMETHEUS}" },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "bars",
+            "fillOpacity": 50
+          },
+          "color": { "mode": "palette-classic" }
+        },
+        "overrides": []
+      },
+      "options": {
+        "tooltip": { "mode": "multi", "sort": "desc" },
+        "legend": { "displayMode": "list", "placement": "bottom" }
+      },
+      "targets": [
+        {
+          "expr": "sum(rate(nexusgate_rate_limit_rejections_total[5m])) by (type)",
+          "legendFormat": "{{type}}",
+          "refId": "A"
+        }
+      ]
+    }
+  ],
+  "schemaVersion": 39,
+  "tags": ["nexusgate", "llm", "ai"],
+  "templating": { "list": [] },
+  "time": { "from": "now-1h", "to": "now" },
+  "timepicker": {},
+  "timezone": "",
+  "title": "NexusGate Overview",
+  "uid": "nexusgate-overview",
+  "version": 1
+}

From 334db75a402a0cf36ac591faa37f4f45d2c3f233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 20:35:45 +0800
Subject: [PATCH 02/12] feat(dashboard): add multi-dashboard support with env
 var override

Add support for multiple Grafana dashboards with environment variable
override. When GRAFANA_DASHBOARDS env var is set, it takes precedence
over database settings.

Backend changes:
- Add GRAFANA_DASHBOARDS env var schema in config.ts
- Create dashboard utility (backend/src/utils/dashboards.ts) with
  env override detection and legacy migration
- Add /api/admin/dashboards endpoints (GET/PUT/DELETE)
- Return 409 Conflict when trying to modify while env override active

Frontend changes:
- Update use-settings hook with useGrafanaDashboards()
- Convert ViewModeToggle to multi-option selector
- Support dynamic dashboard list from API
- Change URL param from enum to string for dashboard IDs

Also updates quick-start.sh to auto-configure GRAFANA_DASHBOARDS
when monitoring is enabled.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/api/admin/dashboards.ts           | 100 ++++++++++++++++++
 backend/src/api/admin/index.ts                |   2 +
 backend/src/utils/config.ts                   |  15 +++
 backend/src/utils/dashboards.ts               |  86 +++++++++++++++
 frontend/src/hooks/use-settings.ts            |  34 ++++--
 frontend/src/pages/overview/index.tsx         |  10 +-
 .../src/pages/overview/view-mode-toggle.tsx   |  29 ++---
 frontend/src/routes/_dashboard/index.tsx      |   2 +-
 frontend/src/routes/_dashboard/route.tsx      |  17 +--
 scripts/quick-start.sh                        |   6 ++
 10 files changed, 267 insertions(+), 34 deletions(-)
 create mode 100644 backend/src/api/admin/dashboards.ts
 create mode 100644 backend/src/utils/dashboards.ts

diff --git a/backend/src/api/admin/dashboards.ts b/backend/src/api/admin/dashboards.ts
new file mode 100644
index 0000000..49f4d64
--- /dev/null
+++ b/backend/src/api/admin/dashboards.ts
@@ -0,0 +1,100 @@
+import { Elysia, t } from "elysia";
+import { grafanaDashboardsSchema } from "@/utils/config";
+import {
+  isEnvOverrideActive,
+  getGrafanaDashboards,
+  setGrafanaDashboards,
+  clearGrafanaDashboards,
+} from "@/utils/dashboards";
+
+const dashboardSchema = t.Object({
+  id: t.String(),
+  label: t.String(),
+  url: t.String({ format: "uri" }),
+});
+
+const dashboardsArraySchema = t.Array(dashboardSchema);
+
+export const adminDashboards = new Elysia().group("/dashboards", (app) =>
+  app
+    .get(
+      "/",
+      async () => {
+        const dashboards = await getGrafanaDashboards();
+        return {
+          dashboards,
+          envOverride: isEnvOverrideActive(),
+        };
+      },
+      {
+        detail: {
+          description:
+            "Get Grafana dashboards configuration. Returns envOverride=true if GRAFANA_DASHBOARDS env var is set.",
+        },
+      },
+    )
+    .put(
+      "/",
+      async ({ body, status }) => {
+        // Validate with Zod for extra safety
+        const parsed = grafanaDashboardsSchema.safeParse(body.dashboards);
+        if (!parsed.success) {
+          return status(400, { error: "Invalid dashboards format" });
+        }
+
+        try {
+          await setGrafanaDashboards(parsed.data);
+          return {
+            dashboards: parsed.data,
+            envOverride: false,
+          };
+        } catch (error) {
+          if (
+            error instanceof Error &&
+            error.message.includes("GRAFANA_DASHBOARDS")
+          ) {
+            return status(409, {
+              error:
+                "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
+            });
+          }
+          throw error;
+        }
+      },
+      {
+        body: t.Object({
+          dashboards: dashboardsArraySchema,
+        }),
+        detail: {
+          description:
+            "Update Grafana dashboards configuration. Returns 409 if GRAFANA_DASHBOARDS env var is set.",
+        },
+      },
+    )
+    .delete(
+      "/",
+      async ({ status }) => {
+        try {
+          await clearGrafanaDashboards();
+          return { success: true };
+        } catch (error) {
+          if (
+            error instanceof Error &&
+            error.message.includes("GRAFANA_DASHBOARDS")
+          ) {
+            return status(409, {
+              error:
+                "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
+            });
+          }
+          throw error;
+        }
+      },
+      {
+        detail: {
+          description:
+            "Clear Grafana dashboards configuration. Returns 409 if GRAFANA_DASHBOARDS env var is set.",
+        },
+      },
+    ),
+);
diff --git a/backend/src/api/admin/index.ts b/backend/src/api/admin/index.ts
index 78a5ed3..f67300b 100644
--- a/backend/src/api/admin/index.ts
+++ b/backend/src/api/admin/index.ts
@@ -3,6 +3,7 @@ import { apiKeyPlugin } from "@/plugins/apiKeyPlugin";
 import { COMMIT_SHA } from "@/utils/config";
 import { adminApiKey } from "./apiKey";
 import { adminCompletions } from "./completions";
+import { adminDashboards } from "./dashboards";
 import { adminEmbeddings } from "./embeddings";
 import { adminModels } from "./models";
 import { adminProviders } from "./providers";
@@ -31,6 +32,7 @@ export const routes = new Elysia({
         .use(adminEmbeddings)
         .use(adminStats)
         .use(adminSettings)
+        .use(adminDashboards)
         .get("/", () => true, {
           detail: { description: "Check whether the admin secret is valid." },
         })
diff --git a/backend/src/utils/config.ts b/backend/src/utils/config.ts
index 6ff379b..65de15f 100644
--- a/backend/src/utils/config.ts
+++ b/backend/src/utils/config.ts
@@ -150,3 +150,18 @@ export const METRICS_CACHE_TTL_SECONDS = env(
   z.coerce.number().int().positive(),
   "30",
 );
+
+// Grafana dashboards configuration
+export const grafanaDashboardSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  url: z.string().url(),
+});
+
+export const grafanaDashboardsSchema = z.array(grafanaDashboardSchema);
+export type GrafanaDashboard = z.infer<typeof grafanaDashboardSchema>;
+
+export const GRAFANA_DASHBOARDS = env(
+  "grafana dashboards",
+  zObject(grafanaDashboardsSchema.optional()),
+);
diff --git a/backend/src/utils/dashboards.ts b/backend/src/utils/dashboards.ts
new file mode 100644
index 0000000..75a8749
--- /dev/null
+++ b/backend/src/utils/dashboards.ts
@@ -0,0 +1,86 @@
+import { getSetting, upsertSetting, deleteSetting } from "@/db";
+import {
+  GRAFANA_DASHBOARDS,
+  grafanaDashboardsSchema,
+  type GrafanaDashboard,
+} from "./config";
+
+const DASHBOARDS_KEY = "grafana_dashboards";
+const LEGACY_KEY = "grafana_dashboard_url";
+
+/**
+ * Check if the GRAFANA_DASHBOARDS environment variable is set
+ * When set, it overrides database settings
+ */
+export function isEnvOverrideActive(): boolean {
+  return GRAFANA_DASHBOARDS !== undefined && GRAFANA_DASHBOARDS.length > 0;
+}
+
+/**
+ * Get Grafana dashboards from environment variable or database
+ * Environment variable takes precedence over database settings
+ */
+export async function getGrafanaDashboards(): Promise<GrafanaDashboard[]> {
+  // Environment variable takes precedence
+  if (isEnvOverrideActive()) {
+    return GRAFANA_DASHBOARDS!;
+  }
+
+  // Try to get from database (new format)
+  const setting = await getSetting(DASHBOARDS_KEY);
+  if (setting?.value) {
+    const parsed = grafanaDashboardsSchema.safeParse(setting.value);
+    if (parsed.success) {
+      return parsed.data;
+    }
+  }
+
+  // Try legacy format and migrate if found
+  const legacySetting = await getSetting(LEGACY_KEY);
+  if (legacySetting?.value && typeof legacySetting.value === "string") {
+    const migrated: GrafanaDashboard[] = [
+      {
+        id: "grafana",
+        label: "Grafana",
+        url: legacySetting.value,
+      },
+    ];
+    // Migrate to new format
+    await upsertSetting({ key: DASHBOARDS_KEY, value: migrated });
+    // Remove legacy key
+    await deleteSetting(LEGACY_KEY);
+    return migrated;
+  }
+
+  return [];
+}
+
+/**
+ * Set Grafana dashboards in database
+ * Throws error if environment variable override is active
+ */
+export async function setGrafanaDashboards(
+  dashboards: GrafanaDashboard[],
+): Promise<void> {
+  if (isEnvOverrideActive()) {
+    throw new Error(
+      "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
+    );
+  }
+
+  await upsertSetting({ key: DASHBOARDS_KEY, value: dashboards });
+}
+
+/**
+ * Clear Grafana dashboards from database
+ * Throws error if environment variable override is active
+ */
+export async function clearGrafanaDashboards(): Promise<void> {
+  if (isEnvOverrideActive()) {
+    throw new Error(
+      "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
+    );
+  }
+
+  await deleteSetting(DASHBOARDS_KEY);
+}
diff --git a/frontend/src/hooks/use-settings.ts b/frontend/src/hooks/use-settings.ts
index be91655..0ca0505 100644
--- a/frontend/src/hooks/use-settings.ts
+++ b/frontend/src/hooks/use-settings.ts
@@ -2,20 +2,36 @@ import { queryOptions, useQuery } from '@tanstack/react-query'
 
 import { api } from '@/lib/api'
 
-const GRAFANA_DASHBOARD_URL_KEY = 'grafana_dashboard_url'
+export interface GrafanaDashboard {
+  id: string
+  label: string
+  url: string
+}
+
+export interface DashboardsResponse {
+  dashboards: GrafanaDashboard[]
+  envOverride: boolean
+}
 
-const grafanaDashboardUrlQueryOptions = queryOptions({
-  queryKey: ['settings', GRAFANA_DASHBOARD_URL_KEY],
-  queryFn: async () => {
-    const { data, error } = await api.admin.settings[GRAFANA_DASHBOARD_URL_KEY].get()
-    if (error) return null
-    return (data as { value: unknown } | null)?.value as string | undefined
+const dashboardsQueryOptions = queryOptions({
+  queryKey: ['dashboards'],
+  queryFn: async (): Promise<DashboardsResponse> => {
+    const { data, error } = await api.admin.dashboards.get()
+    if (error) {
+      return { dashboards: [], envOverride: false }
+    }
+    return data as DashboardsResponse
   },
   staleTime: 5 * 60 * 1000, // 5 minutes
   retry: false,
 })
 
+export function useGrafanaDashboards() {
+  return useQuery(dashboardsQueryOptions)
+}
+
+// Backward compatibility - returns first dashboard URL if available
 export function useGrafanaDashboardUrl() {
-  const { data } = useQuery(grafanaDashboardUrlQueryOptions)
-  return data ?? undefined
+  const { data } = useGrafanaDashboards()
+  return data?.dashboards?.[0]?.url
 }
diff --git a/frontend/src/pages/overview/index.tsx b/frontend/src/pages/overview/index.tsx
index 21b1834..1fc71e6 100644
--- a/frontend/src/pages/overview/index.tsx
+++ b/frontend/src/pages/overview/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { useGrafanaDashboardUrl } from '@/hooks/use-settings'
+import { useGrafanaDashboards } from '@/hooks/use-settings'
 import { Route as DashboardIndexRoute } from '@/routes/_dashboard/index'
 
 import { LatencyChart } from './charts/latency-chart'
@@ -61,10 +61,12 @@ export function OverviewPage() {
   const isMobile = useIsMobile()
   const { range, view } = DashboardIndexRoute.useSearch()
   const navigate = useNavigate()
-  const grafanaUrl = useGrafanaDashboardUrl()
+  const { data: dashboardsData } = useGrafanaDashboards()
 
+  const dashboards = dashboardsData?.dashboards ?? []
+  const selectedDashboard = dashboards.find((d) => d.id === view)
   const timeRange = range as TimeRange
-  const showGrafana = view === 'grafana' && !!grafanaUrl
+  const showGrafana = !!selectedDashboard
 
   const handleTimeRangeChange = (value: TimeRange) => {
     navigate({
@@ -107,7 +109,7 @@ export function OverviewPage() {
           <SummaryCards data={data} />
 
           {showGrafana ? (
-            <GrafanaEmbed url={grafanaUrl} />
+            <GrafanaEmbed url={selectedDashboard.url} />
           ) : (
             <>
               {/* Row 2: Request Trend + Token Usage */}
diff --git a/frontend/src/pages/overview/view-mode-toggle.tsx b/frontend/src/pages/overview/view-mode-toggle.tsx
index fd2089c..24b9df2 100644
--- a/frontend/src/pages/overview/view-mode-toggle.tsx
+++ b/frontend/src/pages/overview/view-mode-toggle.tsx
@@ -2,15 +2,15 @@ import { useTranslation } from 'react-i18next'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-
-export type ViewMode = 'builtin' | 'grafana'
+import type { GrafanaDashboard } from '@/hooks/use-settings'
 
 interface ViewModeToggleProps {
-  value: ViewMode
-  onChange: (mode: ViewMode) => void
+  value: string // 'builtin' or dashboard id
+  onChange: (mode: string) => void
+  dashboards: GrafanaDashboard[]
 }
 
-export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
+export function ViewModeToggle({ value, onChange, dashboards }: ViewModeToggleProps) {
   const { t } = useTranslation()
 
   return (
@@ -23,14 +23,17 @@ export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
       >
         {t('pages.overview.viewMode.builtin')}
       </Button>
-      <Button
-        variant="ghost"
-        size="xs"
-        className={cn(value === 'grafana' && 'bg-accent')}
-        onClick={() => onChange('grafana')}
-      >
-        {t('pages.overview.viewMode.grafana')}
-      </Button>
+      {dashboards.map((dashboard) => (
+        <Button
+          key={dashboard.id}
+          variant="ghost"
+          size="xs"
+          className={cn(value === dashboard.id && 'bg-accent')}
+          onClick={() => onChange(dashboard.id)}
+        >
+          {dashboard.label}
+        </Button>
+      ))}
     </div>
   )
 }
diff --git a/frontend/src/routes/_dashboard/index.tsx b/frontend/src/routes/_dashboard/index.tsx
index a5c4e8c..67bb841 100644
--- a/frontend/src/routes/_dashboard/index.tsx
+++ b/frontend/src/routes/_dashboard/index.tsx
@@ -7,7 +7,7 @@ import { OverviewPage } from '@/pages/overview'
 
 export const overviewSearchSchema = z.object({
   range: z.enum(['1m', '5m', '10m', '30m', '1h', '4h', '12h']).catch('1h'),
-  view: z.enum(['builtin', 'grafana']).catch('builtin'),
+  view: z.string().catch('builtin'), // 'builtin' or dashboard id
 })
 
 export type OverviewSearchSchema = z.infer<typeof overviewSearchSchema>
diff --git a/frontend/src/routes/_dashboard/route.tsx b/frontend/src/routes/_dashboard/route.tsx
index b3c0658..8124c83 100644
--- a/frontend/src/routes/_dashboard/route.tsx
+++ b/frontend/src/routes/_dashboard/route.tsx
@@ -10,10 +10,10 @@ import {
   AppSidebarTrigger,
 } from '@/components/app/app-header'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { useGrafanaDashboardUrl } from '@/hooks/use-settings'
+import { useGrafanaDashboards } from '@/hooks/use-settings'
 import { TimeRangeSelect } from '@/pages/overview/time-range-select'
 import type { TimeRange } from '@/pages/overview/use-overview-stats'
-import { ViewModeToggle, type ViewMode } from '@/pages/overview/view-mode-toggle'
+import { ViewModeToggle } from '@/pages/overview/view-mode-toggle'
 
 import { Route as DashboardIndexRoute } from './index'
 
@@ -26,10 +26,11 @@ function RouteComponent() {
   const isMobile = useIsMobile()
   const { range, view } = DashboardIndexRoute.useSearch()
   const navigate = useNavigate()
-  const grafanaUrl = useGrafanaDashboardUrl()
+  const { data: dashboardsData } = useGrafanaDashboards()
 
+  const dashboards = dashboardsData?.dashboards ?? []
   const timeRange = range as TimeRange
-  const viewMode = view as ViewMode
+  const viewMode = view
 
   const handleTimeRangeChange = (value: TimeRange) => {
     navigate({
@@ -39,7 +40,7 @@ function RouteComponent() {
     })
   }
 
-  const handleViewModeChange = (value: ViewMode) => {
+  const handleViewModeChange = (value: string) => {
     navigate({
       to: '/',
       search: (prev) => ({ ...prev, view: value }),
@@ -59,8 +60,10 @@ function RouteComponent() {
           <>
             <AppHeaderSpacer />
             <AppHeaderPart className="gap-2">
-              {grafanaUrl && <ViewModeToggle value={viewMode} onChange={handleViewModeChange} />}
-              {viewMode !== 'grafana' && <TimeRangeSelect value={timeRange} onChange={handleTimeRangeChange} />}
+              {dashboards.length > 0 && (
+                <ViewModeToggle value={viewMode} onChange={handleViewModeChange} dashboards={dashboards} />
+              )}
+              {viewMode === 'builtin' && <TimeRangeSelect value={timeRange} onChange={handleTimeRangeChange} />}
             </AppHeaderPart>
           </>
         )}
diff --git a/scripts/quick-start.sh b/scripts/quick-start.sh
index 35070a3..ad6fc77 100755
--- a/scripts/quick-start.sh
+++ b/scripts/quick-start.sh
@@ -405,6 +405,9 @@ EOF
 
         # 如果启用了监控，添加监控相关配置
         if [ "$ENABLE_MONITORING" = "true" ]; then
+            # Build the Grafana dashboard embed URL
+            GRAFANA_DASHBOARD_EMBED_URL="http://localhost:${GRAFANA_PORT}/d/nexusgate-overview/nexusgate-llm-gateway?orgId=1&refresh=30s&kiosk"
+
             cat >> .env << EOF
 
 # ======================
@@ -420,6 +423,9 @@ PROMETHEUS_PORT=${PROMETHEUS_PORT}
 GRAFANA_PORT=${GRAFANA_PORT}
 GRAFANA_USER=admin
 GRAFANA_PASSWORD=${GRAFANA_PASSWORD}
+
+# Grafana 仪表板嵌入配置 (NexusGate Overview 页面中嵌入 Grafana)
+GRAFANA_DASHBOARDS=[{"id":"overview","label":"Grafana","url":"${GRAFANA_DASHBOARD_EMBED_URL}"}]
 EOF
         else
             cat >> .env << EOF

From 3d4963780e38a58cdcbffa6b1fce8d42c41a61c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 20:46:40 +0800
Subject: [PATCH 03/12] fix(dashboard): address PR review comments

Address code review feedback from CodeRabbit and Gemini:

- Add error handling for invalid URLs in GrafanaEmbed component
  with graceful fallback UI when URL parsing fails
- Add accessibility attributes (aria-pressed, role, aria-label)
  to ViewModeToggle for screen reader support
- Add runtime validation in useGrafanaDashboards hook to handle
  unexpected API response formats
- Fix divide-by-zero in Grafana dashboard PromQL queries for
  Success Rate metric using clamp_min()
- Add missing i18n translations for new UI strings
- Add comment in quick-start.sh noting localhost limitation for
  remote access

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/hooks/use-settings.ts            |  7 +++-
 frontend/src/i18n/locales/en-US.json          |  4 ++-
 frontend/src/i18n/locales/zh-CN.json          |  4 ++-
 frontend/src/pages/overview/grafana-embed.tsx | 35 +++++++++++++++----
 .../src/pages/overview/view-mode-toggle.tsx   |  4 ++-
 grafana/nexusgate-overview.json               |  2 +-
 .../dashboards/json/nexusgate-dashboard.json  |  2 +-
 scripts/quick-start.sh                        |  2 ++
 8 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/src/hooks/use-settings.ts b/frontend/src/hooks/use-settings.ts
index 0ca0505..a75c7c2 100644
--- a/frontend/src/hooks/use-settings.ts
+++ b/frontend/src/hooks/use-settings.ts
@@ -20,7 +20,12 @@ const dashboardsQueryOptions = queryOptions({
     if (error) {
       return { dashboards: [], envOverride: false }
     }
-    return data as DashboardsResponse
+    // Runtime validation to handle unexpected API responses
+    const response = data as DashboardsResponse
+    if (!Array.isArray(response?.dashboards)) {
+      return { dashboards: [], envOverride: false }
+    }
+    return response
   },
   staleTime: 5 * 60 * 1000, // 5 minutes
   retry: false,
diff --git a/frontend/src/i18n/locales/en-US.json b/frontend/src/i18n/locales/en-US.json
index a8261cf..73ab97e 100644
--- a/frontend/src/i18n/locales/en-US.json
+++ b/frontend/src/i18n/locales/en-US.json
@@ -397,5 +397,7 @@
   "pages.overview.tokens.embedding": "Embedding",
   "pages.overview.viewMode.builtin": "Built-in",
   "pages.overview.viewMode.grafana": "Grafana",
-  "pages.overview.grafana.title": "Grafana Dashboard"
+  "pages.overview.viewMode.label": "View mode",
+  "pages.overview.grafana.title": "Grafana Dashboard",
+  "pages.overview.grafana.invalidUrl": "Invalid Grafana dashboard URL configured"
 }
diff --git a/frontend/src/i18n/locales/zh-CN.json b/frontend/src/i18n/locales/zh-CN.json
index 40ddfc9..2d8c2d8 100644
--- a/frontend/src/i18n/locales/zh-CN.json
+++ b/frontend/src/i18n/locales/zh-CN.json
@@ -398,5 +398,7 @@
   "pages.overview.tokens.embedding": "向量化",
   "pages.overview.viewMode.builtin": "内置",
   "pages.overview.viewMode.grafana": "Grafana",
-  "pages.overview.grafana.title": "Grafana 仪表盘"
+  "pages.overview.viewMode.label": "视图模式",
+  "pages.overview.grafana.title": "Grafana 仪表盘",
+  "pages.overview.grafana.invalidUrl": "配置的 Grafana 仪表盘 URL 无效"
 }
diff --git a/frontend/src/pages/overview/grafana-embed.tsx b/frontend/src/pages/overview/grafana-embed.tsx
index acda4fa..343fef7 100644
--- a/frontend/src/pages/overview/grafana-embed.tsx
+++ b/frontend/src/pages/overview/grafana-embed.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -5,10 +6,32 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 export function GrafanaEmbed({ url }: { url: string }) {
   const { t } = useTranslation()
 
-  // Append kiosk param to hide Grafana navigation chrome
-  const embedUrl = new URL(url)
-  if (!embedUrl.searchParams.has('kiosk')) {
-    embedUrl.searchParams.set('kiosk', '')
+  // Parse and modify URL safely, handling invalid URLs gracefully
+  const embedUrl = useMemo(() => {
+    try {
+      const parsed = new URL(url)
+      if (!parsed.searchParams.has('kiosk')) {
+        parsed.searchParams.set('kiosk', '')
+      }
+      return parsed.toString()
+    } catch {
+      return null
+    }
+  }, [url])
+
+  if (!embedUrl) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('pages.overview.grafana.title')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-[200px] items-center justify-center text-muted-foreground">
+            {t('pages.overview.grafana.invalidUrl')}
+          </div>
+        </CardContent>
+      </Card>
+    )
   }
 
   return (
@@ -18,11 +41,11 @@ export function GrafanaEmbed({ url }: { url: string }) {
       </CardHeader>
       <CardContent>
         <iframe
-          src={embedUrl.toString()}
+          src={embedUrl}
           className="h-[800px] w-full rounded border-0"
           sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
           loading="lazy"
-          title="Grafana Dashboard"
+          title={t('pages.overview.grafana.title')}
         />
       </CardContent>
     </Card>
diff --git a/frontend/src/pages/overview/view-mode-toggle.tsx b/frontend/src/pages/overview/view-mode-toggle.tsx
index 24b9df2..f31ce58 100644
--- a/frontend/src/pages/overview/view-mode-toggle.tsx
+++ b/frontend/src/pages/overview/view-mode-toggle.tsx
@@ -14,12 +14,13 @@ export function ViewModeToggle({ value, onChange, dashboards }: ViewModeTogglePr
   const { t } = useTranslation()
 
   return (
-    <div className="inline-flex items-center rounded-md border p-0.5">
+    <div className="inline-flex items-center rounded-md border p-0.5" role="group" aria-label={t('pages.overview.viewMode.label')}>
       <Button
         variant="ghost"
         size="xs"
         className={cn(value === 'builtin' && 'bg-accent')}
         onClick={() => onChange('builtin')}
+        aria-pressed={value === 'builtin'}
       >
         {t('pages.overview.viewMode.builtin')}
       </Button>
@@ -30,6 +31,7 @@ export function ViewModeToggle({ value, onChange, dashboards }: ViewModeTogglePr
           size="xs"
           className={cn(value === dashboard.id && 'bg-accent')}
           onClick={() => onChange(dashboard.id)}
+          aria-pressed={value === dashboard.id}
         >
           {dashboard.label}
         </Button>
diff --git a/grafana/nexusgate-overview.json b/grafana/nexusgate-overview.json
index 0fc7d26..a2d92c5 100644
--- a/grafana/nexusgate-overview.json
+++ b/grafana/nexusgate-overview.json
@@ -151,7 +151,7 @@
       },
       "targets": [
         {
-          "expr": "sum(nexusgate_completions_total{status=\"completed\"}) / sum(nexusgate_completions_total)",
+          "expr": "sum(nexusgate_completions_total{status=\"completed\"}) / clamp_min(sum(nexusgate_completions_total), 1)",
           "legendFormat": "Success Rate",
           "refId": "A"
         }
diff --git a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
index 4a109fe..275120f 100644
--- a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
+++ b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
@@ -211,7 +211,7 @@
             "type": "prometheus",
             "uid": "${datasource}"
           },
-          "expr": "100 * sum(increase(nexusgate_completions_total{status=\"completed\"}[$__range])) / sum(increase(nexusgate_completions_total[$__range]))",
+          "expr": "100 * sum(increase(nexusgate_completions_total{status=\"completed\"}[$__range])) / clamp_min(sum(increase(nexusgate_completions_total[$__range])), 1)",
           "legendFormat": "Success Rate",
           "refId": "A"
         }
diff --git a/scripts/quick-start.sh b/scripts/quick-start.sh
index ad6fc77..2b8ddb5 100755
--- a/scripts/quick-start.sh
+++ b/scripts/quick-start.sh
@@ -406,6 +406,8 @@ EOF
         # 如果启用了监控，添加监控相关配置
         if [ "$ENABLE_MONITORING" = "true" ]; then
             # Build the Grafana dashboard embed URL
+            # NOTE: Uses localhost by default. For remote access, manually edit GRAFANA_DASHBOARDS
+            # in .env to use your server's IP or domain instead of localhost
             GRAFANA_DASHBOARD_EMBED_URL="http://localhost:${GRAFANA_PORT}/d/nexusgate-overview/nexusgate-llm-gateway?orgId=1&refresh=30s&kiosk"
 
             cat >> .env << EOF

From 99871d1ffa0adda9798627e90348558ba06e7a95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 20:54:41 +0800
Subject: [PATCH 04/12] fix(grafana): enable anonymous auth for iframe
 embedding

Add Grafana environment variables to enable iframe embedding:
- GF_AUTH_ANONYMOUS_ENABLED=true - Allow unauthenticated access
- GF_AUTH_ANONYMOUS_ORG_ROLE=Viewer - Read-only access for anonymous users
- GF_SECURITY_ALLOW_EMBEDDING=true - Allow Grafana to be embedded in iframes

Without these settings, the embedded Grafana dashboard would show a
login page instead of the dashboard content.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docker-compose.monitoring.yaml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docker-compose.monitoring.yaml b/docker-compose.monitoring.yaml
index 9d4926a..a4aa614 100644
--- a/docker-compose.monitoring.yaml
+++ b/docker-compose.monitoring.yaml
@@ -27,6 +27,11 @@ services:
       - "GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_PASSWORD:-admin}"
       - "GF_USERS_ALLOW_SIGN_UP=false"
       - "GF_SERVER_ROOT_URL=http://localhost:${GRAFANA_PORT:-3001}"
+      # Enable anonymous access for iframe embedding (read-only Viewer role)
+      - "GF_AUTH_ANONYMOUS_ENABLED=true"
+      - "GF_AUTH_ANONYMOUS_ORG_ROLE=Viewer"
+      # Allow embedding in iframes
+      - "GF_SECURITY_ALLOW_EMBEDDING=true"
     volumes:
       - "grafana_data:/var/lib/grafana"
       - "./grafana/provisioning:/etc/grafana/provisioning:ro"

From bf2856b5626c8d00ab51f8d8eebbd9962cb1bfac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 21:08:38 +0800
Subject: [PATCH 05/12] chore: update auto-generated routeTree.gen.ts

TanStack Router auto-generated file updated after route changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/routeTree.gen.ts | 51 ++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 41a350c..416e293 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -9,18 +9,18 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as DashboardIndexRouteImport } from './routes/_dashboard/index'
-import { Route as DashboardRouteRouteImport } from './routes/_dashboard/route'
-import { Route as AppsIndexRouteImport } from './routes/apps/index'
-import { Route as AppsRouteRouteImport } from './routes/apps/route'
-import { Route as EmbeddingsIndexRouteImport } from './routes/embeddings/index'
-import { Route as EmbeddingsRouteRouteImport } from './routes/embeddings/route'
-import { Route as RequestsIndexRouteImport } from './routes/requests/index'
+import { Route as SettingsRouteRouteImport } from './routes/settings/route'
 import { Route as RequestsRouteRouteImport } from './routes/requests/route'
+import { Route as EmbeddingsRouteRouteImport } from './routes/embeddings/route'
+import { Route as AppsRouteRouteImport } from './routes/apps/route'
+import { Route as DashboardRouteRouteImport } from './routes/_dashboard/route'
 import { Route as SettingsIndexRouteImport } from './routes/settings/index'
-import { Route as SettingsModelsRouteImport } from './routes/settings/models'
+import { Route as RequestsIndexRouteImport } from './routes/requests/index'
+import { Route as EmbeddingsIndexRouteImport } from './routes/embeddings/index'
+import { Route as AppsIndexRouteImport } from './routes/apps/index'
+import { Route as DashboardIndexRouteImport } from './routes/_dashboard/index'
 import { Route as SettingsProvidersRouteImport } from './routes/settings/providers'
-import { Route as SettingsRouteRouteImport } from './routes/settings/route'
+import { Route as SettingsModelsRouteImport } from './routes/settings/models'
 
 const SettingsRouteRoute = SettingsRouteRouteImport.update({
   id: '/settings',
@@ -134,7 +134,14 @@ export interface FileRouteTypes {
     | '/requests/'
     | '/settings/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/settings/models' | '/settings/providers' | '/' | '/apps' | '/embeddings' | '/requests' | '/settings'
+  to:
+    | '/settings/models'
+    | '/settings/providers'
+    | '/'
+    | '/apps'
+    | '/embeddings'
+    | '/requests'
+    | '/settings'
   id:
     | '__root__'
     | '/_dashboard'
@@ -256,7 +263,9 @@ const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
   DashboardIndexRoute: DashboardIndexRoute,
 }
 
-const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(DashboardRouteRouteChildren)
+const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
+  DashboardRouteRouteChildren,
+)
 
 interface AppsRouteRouteChildren {
   AppsIndexRoute: typeof AppsIndexRoute
@@ -266,7 +275,9 @@ const AppsRouteRouteChildren: AppsRouteRouteChildren = {
   AppsIndexRoute: AppsIndexRoute,
 }
 
-const AppsRouteRouteWithChildren = AppsRouteRoute._addFileChildren(AppsRouteRouteChildren)
+const AppsRouteRouteWithChildren = AppsRouteRoute._addFileChildren(
+  AppsRouteRouteChildren,
+)
 
 interface EmbeddingsRouteRouteChildren {
   EmbeddingsIndexRoute: typeof EmbeddingsIndexRoute
@@ -276,7 +287,9 @@ const EmbeddingsRouteRouteChildren: EmbeddingsRouteRouteChildren = {
   EmbeddingsIndexRoute: EmbeddingsIndexRoute,
 }
 
-const EmbeddingsRouteRouteWithChildren = EmbeddingsRouteRoute._addFileChildren(EmbeddingsRouteRouteChildren)
+const EmbeddingsRouteRouteWithChildren = EmbeddingsRouteRoute._addFileChildren(
+  EmbeddingsRouteRouteChildren,
+)
 
 interface RequestsRouteRouteChildren {
   RequestsIndexRoute: typeof RequestsIndexRoute
@@ -286,7 +299,9 @@ const RequestsRouteRouteChildren: RequestsRouteRouteChildren = {
   RequestsIndexRoute: RequestsIndexRoute,
 }
 
-const RequestsRouteRouteWithChildren = RequestsRouteRoute._addFileChildren(RequestsRouteRouteChildren)
+const RequestsRouteRouteWithChildren = RequestsRouteRoute._addFileChildren(
+  RequestsRouteRouteChildren,
+)
 
 interface SettingsRouteRouteChildren {
   SettingsModelsRoute: typeof SettingsModelsRoute
@@ -300,7 +315,9 @@ const SettingsRouteRouteChildren: SettingsRouteRouteChildren = {
   SettingsIndexRoute: SettingsIndexRoute,
 }
 
-const SettingsRouteRouteWithChildren = SettingsRouteRoute._addFileChildren(SettingsRouteRouteChildren)
+const SettingsRouteRouteWithChildren = SettingsRouteRoute._addFileChildren(
+  SettingsRouteRouteChildren,
+)
 
 const rootRouteChildren: RootRouteChildren = {
   DashboardRouteRoute: DashboardRouteRouteWithChildren,
@@ -309,4 +326,6 @@ const rootRouteChildren: RootRouteChildren = {
   RequestsRouteRoute: RequestsRouteRouteWithChildren,
   SettingsRouteRoute: SettingsRouteRouteWithChildren,
 }
-export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

From f5e5305ad574df6c1f8e91e5b29ea831cba513fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 21:10:31 +0800
Subject: [PATCH 06/12] refactor(dashboard): improve error handling and remove
 redundant validation

- Add custom EnvOverrideError class for type-safe error handling
- Remove redundant Zod validation (Elysia TypeBox already validates)
- Use instanceof check instead of string matching for errors

Addresses PR review feedback about fragile string-based error detection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/api/admin/dashboards.ts | 32 +++++++----------------------
 backend/src/utils/dashboards.ts     | 21 +++++++++++++------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/backend/src/api/admin/dashboards.ts b/backend/src/api/admin/dashboards.ts
index 49f4d64..2170deb 100644
--- a/backend/src/api/admin/dashboards.ts
+++ b/backend/src/api/admin/dashboards.ts
@@ -1,10 +1,10 @@
 import { Elysia, t } from "elysia";
-import { grafanaDashboardsSchema } from "@/utils/config";
 import {
   isEnvOverrideActive,
   getGrafanaDashboards,
   setGrafanaDashboards,
   clearGrafanaDashboards,
+  EnvOverrideError,
 } from "@/utils/dashboards";
 
 const dashboardSchema = t.Object({
@@ -36,27 +36,15 @@ export const adminDashboards = new Elysia().group("/dashboards", (app) =>
     .put(
       "/",
       async ({ body, status }) => {
-        // Validate with Zod for extra safety
-        const parsed = grafanaDashboardsSchema.safeParse(body.dashboards);
-        if (!parsed.success) {
-          return status(400, { error: "Invalid dashboards format" });
-        }
-
         try {
-          await setGrafanaDashboards(parsed.data);
+          await setGrafanaDashboards(body.dashboards);
           return {
-            dashboards: parsed.data,
+            dashboards: body.dashboards,
             envOverride: false,
           };
         } catch (error) {
-          if (
-            error instanceof Error &&
-            error.message.includes("GRAFANA_DASHBOARDS")
-          ) {
-            return status(409, {
-              error:
-                "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
-            });
+          if (error instanceof EnvOverrideError) {
+            return status(409, { error: error.message });
           }
           throw error;
         }
@@ -78,14 +66,8 @@ export const adminDashboards = new Elysia().group("/dashboards", (app) =>
           await clearGrafanaDashboards();
           return { success: true };
         } catch (error) {
-          if (
-            error instanceof Error &&
-            error.message.includes("GRAFANA_DASHBOARDS")
-          ) {
-            return status(409, {
-              error:
-                "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
-            });
+          if (error instanceof EnvOverrideError) {
+            return status(409, { error: error.message });
           }
           throw error;
         }
diff --git a/backend/src/utils/dashboards.ts b/backend/src/utils/dashboards.ts
index 75a8749..506bda9 100644
--- a/backend/src/utils/dashboards.ts
+++ b/backend/src/utils/dashboards.ts
@@ -8,6 +8,19 @@ import {
 const DASHBOARDS_KEY = "grafana_dashboards";
 const LEGACY_KEY = "grafana_dashboard_url";
 
+/**
+ * Custom error for when env override prevents modification
+ */
+export class EnvOverrideError extends Error {
+  readonly code = "ENV_OVERRIDE_ACTIVE" as const;
+  constructor() {
+    super(
+      "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
+    );
+    this.name = "EnvOverrideError";
+  }
+}
+
 /**
  * Check if the GRAFANA_DASHBOARDS environment variable is set
  * When set, it overrides database settings
@@ -63,9 +76,7 @@ export async function setGrafanaDashboards(
   dashboards: GrafanaDashboard[],
 ): Promise<void> {
   if (isEnvOverrideActive()) {
-    throw new Error(
-      "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
-    );
+    throw new EnvOverrideError();
   }
 
   await upsertSetting({ key: DASHBOARDS_KEY, value: dashboards });
@@ -77,9 +88,7 @@ export async function setGrafanaDashboards(
  */
 export async function clearGrafanaDashboards(): Promise<void> {
   if (isEnvOverrideActive()) {
-    throw new Error(
-      "Cannot modify dashboards when GRAFANA_DASHBOARDS environment variable is set",
-    );
+    throw new EnvOverrideError();
   }
 
   await deleteSetting(DASHBOARDS_KEY);

From fa9bcf69697e7ad1f19be79aca4d9511dc98a778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 21:12:28 +0800
Subject: [PATCH 07/12] docs(grafana): add security note for anonymous auth
 settings

Add comment explaining that anonymous auth and embedding settings
are for local development convenience. Recommend using Grafana's
Public Dashboard feature for production deployments.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docker-compose.monitoring.yaml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docker-compose.monitoring.yaml b/docker-compose.monitoring.yaml
index a4aa614..7938009 100644
--- a/docker-compose.monitoring.yaml
+++ b/docker-compose.monitoring.yaml
@@ -27,10 +27,16 @@ services:
       - "GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_PASSWORD:-admin}"
       - "GF_USERS_ALLOW_SIGN_UP=false"
       - "GF_SERVER_ROOT_URL=http://localhost:${GRAFANA_PORT:-3001}"
+      # ============================================================
+      # SECURITY NOTE: The following settings enable anonymous access
+      # and iframe embedding for local development convenience.
+      # For production, consider using Grafana's Public Dashboard
+      # feature or an auth proxy instead of anonymous access.
+      # ============================================================
       # Enable anonymous access for iframe embedding (read-only Viewer role)
       - "GF_AUTH_ANONYMOUS_ENABLED=true"
       - "GF_AUTH_ANONYMOUS_ORG_ROLE=Viewer"
-      # Allow embedding in iframes
+      # Allow embedding in iframes (disables X-Frame-Options: deny)
       - "GF_SECURITY_ALLOW_EMBEDDING=true"
     volumes:
       - "grafana_data:/var/lib/grafana"

From 312269381a7a1ef5e14a31ca0457f08ff9f557bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 21:20:00 +0800
Subject: [PATCH 08/12] fix(dashboard): handle empty array env var as explicit
 override

When GRAFANA_DASHBOARDS is set to [], it should disable dashboards
without falling back to DB. Previously required length > 0.

Now isEnvOverrideActive() returns true if env var is defined at all,
allowing ops to explicitly disable dashboards via GRAFANA_DASHBOARDS=[].

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/utils/dashboards.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/src/utils/dashboards.ts b/backend/src/utils/dashboards.ts
index 506bda9..74e4c85 100644
--- a/backend/src/utils/dashboards.ts
+++ b/backend/src/utils/dashboards.ts
@@ -23,20 +23,20 @@ export class EnvOverrideError extends Error {
 
 /**
  * Check if the GRAFANA_DASHBOARDS environment variable is set
- * When set, it overrides database settings
+ * When set (even as empty array), it overrides database settings
  */
 export function isEnvOverrideActive(): boolean {
-  return GRAFANA_DASHBOARDS !== undefined && GRAFANA_DASHBOARDS.length > 0;
+  return GRAFANA_DASHBOARDS !== undefined;
 }
 
 /**
  * Get Grafana dashboards from environment variable or database
- * Environment variable takes precedence over database settings
+ * Environment variable takes precedence over database settings (even if empty)
  */
 export async function getGrafanaDashboards(): Promise<GrafanaDashboard[]> {
-  // Environment variable takes precedence
+  // Environment variable takes precedence (even empty array disables DB fallback)
   if (isEnvOverrideActive()) {
-    return GRAFANA_DASHBOARDS!;
+    return GRAFANA_DASHBOARDS ?? [];
   }
 
   // Try to get from database (new format)

From 62dead77df8c03dbd03a96a27340ec1ee51c8d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Wed, 28 Jan 2026 21:56:47 +0800
Subject: [PATCH 09/12] feat(dashboard): improve Grafana embed UX

1. Auto-select first Grafana dashboard when dashboards are configured
   - Hide built-in option by default when Grafana dashboards exist
   - Auto-redirect from 'builtin' to first dashboard on load

2. Improve iframe height
   - Use min-h-[calc(100vh-280px)] for responsive height
   - Iframe now fills available viewport space

3. Sync theme with NexusGate
   - Pass &theme=light or &theme=dark to Grafana URL
   - Uses resolvedTheme from next-themes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/overview/grafana-embed.tsx | 15 ++++++---
 frontend/src/pages/overview/index.tsx         | 13 +++++++-
 .../src/pages/overview/view-mode-toggle.tsx   | 31 +++++++++++++------
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/overview/grafana-embed.tsx b/frontend/src/pages/overview/grafana-embed.tsx
index 343fef7..6ea8239 100644
--- a/frontend/src/pages/overview/grafana-embed.tsx
+++ b/frontend/src/pages/overview/grafana-embed.tsx
@@ -1,23 +1,30 @@
 import { useMemo } from 'react'
+import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 export function GrafanaEmbed({ url }: { url: string }) {
   const { t } = useTranslation()
+  const { resolvedTheme } = useTheme()
 
   // Parse and modify URL safely, handling invalid URLs gracefully
   const embedUrl = useMemo(() => {
     try {
       const parsed = new URL(url)
+      // Add kiosk mode to hide Grafana navigation
       if (!parsed.searchParams.has('kiosk')) {
         parsed.searchParams.set('kiosk', '')
       }
+      // Sync theme with NexusGate (light/dark)
+      if (resolvedTheme && !parsed.searchParams.has('theme')) {
+        parsed.searchParams.set('theme', resolvedTheme === 'dark' ? 'dark' : 'light')
+      }
       return parsed.toString()
     } catch {
       return null
     }
-  }, [url])
+  }, [url, resolvedTheme])
 
   if (!embedUrl) {
     return (
@@ -35,14 +42,14 @@ export function GrafanaEmbed({ url }: { url: string }) {
   }
 
   return (
-    <Card>
+    <Card className="flex flex-col">
       <CardHeader>
         <CardTitle>{t('pages.overview.grafana.title')}</CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1">
         <iframe
           src={embedUrl}
-          className="h-[800px] w-full rounded border-0"
+          className="min-h-[calc(100vh-280px)] w-full rounded border-0"
           sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
           loading="lazy"
           title={t('pages.overview.grafana.title')}
diff --git a/frontend/src/pages/overview/index.tsx b/frontend/src/pages/overview/index.tsx
index 1fc71e6..25a67cd 100644
--- a/frontend/src/pages/overview/index.tsx
+++ b/frontend/src/pages/overview/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 
@@ -68,6 +68,17 @@ export function OverviewPage() {
   const timeRange = range as TimeRange
   const showGrafana = !!selectedDashboard
 
+  // Auto-select first Grafana dashboard when dashboards are configured
+  useEffect(() => {
+    if (dashboards.length > 0 && view === 'builtin') {
+      navigate({
+        to: '/',
+        search: (prev) => ({ ...prev, view: dashboards[0].id }),
+        replace: true,
+      })
+    }
+  }, [dashboards, view, navigate])
+
   const handleTimeRangeChange = (value: TimeRange) => {
     navigate({
       to: '/',
diff --git a/frontend/src/pages/overview/view-mode-toggle.tsx b/frontend/src/pages/overview/view-mode-toggle.tsx
index f31ce58..5c05ae9 100644
--- a/frontend/src/pages/overview/view-mode-toggle.tsx
+++ b/frontend/src/pages/overview/view-mode-toggle.tsx
@@ -8,22 +8,33 @@ interface ViewModeToggleProps {
   value: string // 'builtin' or dashboard id
   onChange: (mode: string) => void
   dashboards: GrafanaDashboard[]
+  showBuiltin?: boolean // Whether to show built-in option (default: false when dashboards exist)
 }
 
-export function ViewModeToggle({ value, onChange, dashboards }: ViewModeToggleProps) {
+export function ViewModeToggle({ value, onChange, dashboards, showBuiltin }: ViewModeToggleProps) {
   const { t } = useTranslation()
 
+  // Hide built-in by default when Grafana dashboards are configured
+  const shouldShowBuiltin = showBuiltin ?? dashboards.length === 0
+
+  // If only one dashboard and not showing built-in, no need for toggle
+  if (!shouldShowBuiltin && dashboards.length <= 1) {
+    return null
+  }
+
   return (
     <div className="inline-flex items-center rounded-md border p-0.5" role="group" aria-label={t('pages.overview.viewMode.label')}>
-      <Button
-        variant="ghost"
-        size="xs"
-        className={cn(value === 'builtin' && 'bg-accent')}
-        onClick={() => onChange('builtin')}
-        aria-pressed={value === 'builtin'}
-      >
-        {t('pages.overview.viewMode.builtin')}
-      </Button>
+      {shouldShowBuiltin && (
+        <Button
+          variant="ghost"
+          size="xs"
+          className={cn(value === 'builtin' && 'bg-accent')}
+          onClick={() => onChange('builtin')}
+          aria-pressed={value === 'builtin'}
+        >
+          {t('pages.overview.viewMode.builtin')}
+        </Button>
+      )}
       {dashboards.map((dashboard) => (
         <Button
           key={dashboard.id}

From a8fa60e9c7a894b52abec455fddd854e05201d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Thu, 29 Jan 2026 14:01:49 +0800
Subject: [PATCH 10/12] feat(metrics): add cost analytics and enhanced Grafana
 dashboard

Add cost metrics to Prometheus and enhance Grafana dashboard with
advanced analytics panels for Issue #53:

Backend changes:
- Add getCompletionCostMetrics() DB query joining completions with
  models table to calculate costs based on pricing
- Add 3 new Prometheus counters: nexusgate_cost_prompt_usd_total,
  nexusgate_cost_completion_usd_total, nexusgate_cost_total_usd_total
  with labels: model, provider, api_key_comment

Grafana dashboard enhancements:
- Add P75/P90 quantiles to latency panels (Duration & TTFT)
- Add "Cost Analysis" row: Cost Over Time, Cost by Provider/API Key
  pie charts, Cost Breakdown table
- Add "Trend Analysis" row: Request/Cost comparison with previous
  period, Change % stats
- Add "Model Comparison" row: P95 Latency, Error Rate, Cost per 1K
  Tokens bar gauges, Model Performance Matrix table

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/db/index.ts                       |   50 +
 backend/src/services/prometheus.ts            |   61 +
 .../dashboards/json/nexusgate-dashboard.json  | 1496 ++++++++++++++++-
 3 files changed, 1601 insertions(+), 6 deletions(-)

diff --git a/backend/src/db/index.ts b/backend/src/db/index.ts
index f0e8431..4732e6a 100644
--- a/backend/src/db/index.ts
+++ b/backend/src/db/index.ts
@@ -1525,3 +1525,53 @@ export async function getActiveEntityCounts() {
     embeddingModels: Number(row?.embedding_models ?? 0),
   };
 }
+
+/**
+ * Get completion cost metrics grouped by model, provider, and api_key_comment
+ * Calculates costs based on model pricing: (prompt_tokens / 1M) * input_price + (completion_tokens / 1M) * output_price
+ * Returns all-time totals for Prometheus counters
+ */
+export async function getCompletionCostMetrics() {
+  logger.debug("getCompletionCostMetrics");
+  const result = await db.execute(sql`
+    SELECT
+      c.model,
+      COALESCE(p.name, 'unknown') AS provider,
+      COALESCE(ak.comment, 'unknown') AS api_key_comment,
+      COALESCE(SUM(
+        CASE WHEN c.prompt_tokens > 0 AND m.input_price IS NOT NULL
+          THEN (c.prompt_tokens::numeric / 1000000) * m.input_price
+          ELSE 0
+        END
+      ), 0) AS prompt_cost_usd,
+      COALESCE(SUM(
+        CASE WHEN c.completion_tokens > 0 AND m.output_price IS NOT NULL
+          THEN (c.completion_tokens::numeric / 1000000) * m.output_price
+          ELSE 0
+        END
+      ), 0) AS completion_cost_usd,
+      COALESCE(SUM(
+        CASE WHEN m.input_price IS NOT NULL AND m.output_price IS NOT NULL
+          THEN (
+            CASE WHEN c.prompt_tokens > 0 THEN (c.prompt_tokens::numeric / 1000000) * m.input_price ELSE 0 END +
+            CASE WHEN c.completion_tokens > 0 THEN (c.completion_tokens::numeric / 1000000) * m.output_price ELSE 0 END
+          )
+          ELSE 0
+        END
+      ), 0) AS total_cost_usd
+    FROM completions c
+    LEFT JOIN models m ON c.model_id = m.id
+    LEFT JOIN providers p ON m.provider_id = p.id
+    LEFT JOIN api_keys ak ON c.api_key_id = ak.id
+    WHERE c.deleted = false
+    GROUP BY c.model, p.name, ak.comment
+  `);
+  return result as unknown as {
+    model: string;
+    provider: string;
+    api_key_comment: string;
+    prompt_cost_usd: string;
+    completion_cost_usd: string;
+    total_cost_usd: string;
+  }[];
+}
diff --git a/backend/src/services/prometheus.ts b/backend/src/services/prometheus.ts
index 58b3426..a6fb985 100644
--- a/backend/src/services/prometheus.ts
+++ b/backend/src/services/prometheus.ts
@@ -7,6 +7,7 @@ import {
   getEmbeddingDurationHistogram,
   getActiveEntityCounts,
   getApiKeyRateLimitConfig,
+  getCompletionCostMetrics,
   LATENCY_BUCKETS_MS,
 } from "@/db";
 import { COMMIT_SHA, METRICS_CACHE_TTL_SECONDS } from "@/utils/config";
@@ -172,6 +173,7 @@ async function generateMetricsInternal(): Promise<string> {
     entityCounts,
     apiKeyConfigs,
     rateLimitRejections,
+    costMetrics,
   ] = await Promise.all([
     getCompletionMetricsByModelAndStatus(),
     getEmbeddingMetricsByModelAndStatus(),
@@ -181,6 +183,7 @@ async function generateMetricsInternal(): Promise<string> {
     getActiveEntityCounts(),
     getApiKeyRateLimitConfig(),
     getRateLimitRejections(),
+    getCompletionCostMetrics(),
   ]);
 
   const sections: string[] = [];
@@ -299,6 +302,64 @@ async function generateMetricsInternal(): Promise<string> {
     );
   }
 
+  // Cost counters (USD)
+  const promptCostValues: MetricValue[] = [];
+  const completionCostValues: MetricValue[] = [];
+  const totalCostValues: MetricValue[] = [];
+
+  for (const row of costMetrics) {
+    const labels = {
+      model: row.model,
+      provider: row.provider,
+      api_key_comment: row.api_key_comment,
+    };
+
+    const promptCost = Number(row.prompt_cost_usd);
+    const completionCost = Number(row.completion_cost_usd);
+    const totalCost = Number(row.total_cost_usd);
+
+    // Only add metrics if there's actual cost data (pricing was configured)
+    if (promptCost > 0) {
+      promptCostValues.push({ labels, value: promptCost });
+    }
+    if (completionCost > 0) {
+      completionCostValues.push({ labels, value: completionCost });
+    }
+    if (totalCost > 0) {
+      totalCostValues.push({ labels, value: totalCost });
+    }
+  }
+
+  if (promptCostValues.length > 0) {
+    sections.push(
+      formatCounter(
+        "nexusgate_cost_prompt_usd_total",
+        "Total prompt cost in USD (based on model pricing)",
+        promptCostValues,
+      ),
+    );
+  }
+
+  if (completionCostValues.length > 0) {
+    sections.push(
+      formatCounter(
+        "nexusgate_cost_completion_usd_total",
+        "Total completion cost in USD (based on model pricing)",
+        completionCostValues,
+      ),
+    );
+  }
+
+  if (totalCostValues.length > 0) {
+    sections.push(
+      formatCounter(
+        "nexusgate_cost_total_usd_total",
+        "Total cost in USD (prompt + completion, based on model pricing)",
+        totalCostValues,
+      ),
+    );
+  }
+
   // Completion duration histogram
   const durationHistValues = parseHistogramData(completionDurationHist, "duration");
   if (durationHistValues.length > 0) {
diff --git a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
index 275120f..987ae71 100644
--- a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
+++ b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
@@ -740,6 +740,24 @@
           "legendFormat": "p50 - {{model}}",
           "refId": "A"
         },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.75, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
+          "legendFormat": "p75 - {{model}}",
+          "refId": "B"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.90, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
+          "legendFormat": "p90 - {{model}}",
+          "refId": "C"
+        },
         {
           "datasource": {
             "type": "prometheus",
@@ -747,7 +765,7 @@
           },
           "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
           "legendFormat": "p95 - {{model}}",
-          "refId": "B"
+          "refId": "D"
         },
         {
           "datasource": {
@@ -756,10 +774,10 @@
           },
           "expr": "histogram_quantile(0.99, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
           "legendFormat": "p99 - {{model}}",
-          "refId": "C"
+          "refId": "E"
         }
       ],
-      "title": "Completion Duration (p50/p95/p99)",
+      "title": "Completion Duration (p50/p75/p90/p95/p99)",
       "type": "timeseries"
     },
     {
@@ -846,6 +864,24 @@
           "legendFormat": "p50 - {{model}}",
           "refId": "A"
         },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.75, sum(rate(nexusgate_completion_ttft_seconds_bucket[$__rate_interval])) by (le, model))",
+          "legendFormat": "p75 - {{model}}",
+          "refId": "B"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.90, sum(rate(nexusgate_completion_ttft_seconds_bucket[$__rate_interval])) by (le, model))",
+          "legendFormat": "p90 - {{model}}",
+          "refId": "C"
+        },
         {
           "datasource": {
             "type": "prometheus",
@@ -853,7 +889,7 @@
           },
           "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_ttft_seconds_bucket[$__rate_interval])) by (le, model))",
           "legendFormat": "p95 - {{model}}",
-          "refId": "B"
+          "refId": "D"
         },
         {
           "datasource": {
@@ -862,10 +898,10 @@
           },
           "expr": "histogram_quantile(0.99, sum(rate(nexusgate_completion_ttft_seconds_bucket[$__rate_interval])) by (le, model))",
           "legendFormat": "p99 - {{model}}",
-          "refId": "C"
+          "refId": "E"
         }
       ],
-      "title": "Time To First Token (TTFT) (p50/p95/p99)",
+      "title": "Time To First Token (TTFT) (p50/p75/p90/p95/p99)",
       "type": "timeseries"
     },
     {
@@ -2126,6 +2162,1454 @@
       ],
       "title": "Embedding Latency (p50/p95)",
       "type": "timeseries"
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 75
+      },
+      "id": 200,
+      "panels": [],
+      "title": "Cost Analysis",
+      "type": "row"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "USD",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 10,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "smooth",
+            "lineWidth": 2,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "never",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "normal"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 76
+      },
+      "id": 201,
+      "options": {
+        "legend": {
+          "calcs": ["sum"],
+          "displayMode": "table",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_cost_total_usd_total[$__rate_interval])) by (model)",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Cost Over Time (by Model)",
+      "type": "timeseries"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 12,
+        "y": 76
+      },
+      "id": 202,
+      "options": {
+        "displayLabels": ["percent", "value"],
+        "legend": {
+          "displayMode": "table",
+          "placement": "right",
+          "showLegend": true,
+          "values": ["value"]
+        },
+        "pieType": "donut",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_total_usd_total[$__range])) by (provider)",
+          "legendFormat": "{{provider}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Cost by Provider",
+      "type": "piechart"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 18,
+        "y": 76
+      },
+      "id": 203,
+      "options": {
+        "displayLabels": ["percent", "value"],
+        "legend": {
+          "displayMode": "table",
+          "placement": "right",
+          "showLegend": true,
+          "values": ["value"]
+        },
+        "pieType": "donut",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_total_usd_total[$__range])) by (api_key_comment)",
+          "legendFormat": "{{api_key_comment}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Cost by API Key",
+      "type": "piechart"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {
+            "align": "auto",
+            "cellOptions": {
+              "type": "auto"
+            },
+            "inspect": false
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Model"
+            },
+            "properties": [
+              {
+                "id": "custom.width",
+                "value": 150
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Provider"
+            },
+            "properties": [
+              {
+                "id": "custom.width",
+                "value": 120
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "API Key"
+            },
+            "properties": [
+              {
+                "id": "custom.width",
+                "value": 120
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 84
+      },
+      "id": 204,
+      "options": {
+        "cellHeight": "sm",
+        "footer": {
+          "countRows": false,
+          "enablePagination": false,
+          "fields": ["Prompt Cost", "Completion Cost", "Total Cost"],
+          "reducer": ["sum"],
+          "show": true
+        },
+        "showHeader": true,
+        "sortBy": [
+          {
+            "desc": true,
+            "displayName": "Total Cost"
+          }
+        ]
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_prompt_usd_total[$__range])) by (model, provider, api_key_comment)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "Prompt"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_completion_usd_total[$__range])) by (model, provider, api_key_comment)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "Completion"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_total_usd_total[$__range])) by (model, provider, api_key_comment)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "Total"
+        }
+      ],
+      "title": "Cost Breakdown",
+      "transformations": [
+        {
+          "id": "joinByField",
+          "options": {
+            "byField": "model",
+            "mode": "outer"
+          }
+        },
+        {
+          "id": "organize",
+          "options": {
+            "excludeByName": {
+              "Time": true,
+              "Time 1": true,
+              "Time 2": true,
+              "Time 3": true,
+              "api_key_comment 2": true,
+              "api_key_comment 3": true,
+              "provider 2": true,
+              "provider 3": true
+            },
+            "indexByName": {},
+            "renameByName": {
+              "Value #Completion": "Completion Cost",
+              "Value #Prompt": "Prompt Cost",
+              "Value #Total": "Total Cost",
+              "api_key_comment 1": "API Key",
+              "model": "Model",
+              "provider 1": "Provider"
+            }
+          }
+        }
+      ],
+      "type": "table"
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 92
+      },
+      "id": 210,
+      "panels": [],
+      "title": "Trend Analysis",
+      "type": "row"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 10,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "smooth",
+            "lineWidth": 2,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "never",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "reqps"
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byRegexp",
+              "options": ".*Previous.*"
+            },
+            "properties": [
+              {
+                "id": "custom.lineStyle",
+                "value": {
+                  "dash": [10, 10],
+                  "fill": "dash"
+                }
+              },
+              {
+                "id": "custom.fillOpacity",
+                "value": 0
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 93
+      },
+      "id": 211,
+      "options": {
+        "legend": {
+          "calcs": ["mean", "max"],
+          "displayMode": "table",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_completions_total[$__rate_interval]))",
+          "legendFormat": "Current",
+          "refId": "A"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_completions_total[$__rate_interval] offset $__range))",
+          "legendFormat": "Previous Period",
+          "refId": "B"
+        }
+      ],
+      "title": "Request Rate Comparison",
+      "type": "timeseries"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "USD",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 10,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "smooth",
+            "lineWidth": 2,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "never",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byRegexp",
+              "options": ".*Previous.*"
+            },
+            "properties": [
+              {
+                "id": "custom.lineStyle",
+                "value": {
+                  "dash": [10, 10],
+                  "fill": "dash"
+                }
+              },
+              {
+                "id": "custom.fillOpacity",
+                "value": 0
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 93
+      },
+      "id": 212,
+      "options": {
+        "legend": {
+          "calcs": ["sum"],
+          "displayMode": "table",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_cost_total_usd_total[$__rate_interval]))",
+          "legendFormat": "Current",
+          "refId": "A"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_cost_total_usd_total[$__rate_interval] offset $__range))",
+          "legendFormat": "Previous Period",
+          "refId": "B"
+        }
+      ],
+      "title": "Cost Comparison",
+      "type": "timeseries"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Percentage change in request count compared to the previous period",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [
+            {
+              "options": {
+                "match": "null",
+                "result": {
+                  "text": "N/A"
+                }
+              },
+              "type": "special"
+            }
+          ],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "red",
+                "value": null
+              },
+              {
+                "color": "yellow",
+                "value": 0
+              },
+              {
+                "color": "green",
+                "value": 10
+              }
+            ]
+          },
+          "unit": "percent"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 0,
+        "y": 101
+      },
+      "id": 213,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "area",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "100 * (sum(increase(nexusgate_completions_total[$__range])) - sum(increase(nexusgate_completions_total[$__range] offset $__range))) / clamp_min(sum(increase(nexusgate_completions_total[$__range] offset $__range)), 1)",
+          "legendFormat": "Change",
+          "refId": "A"
+        }
+      ],
+      "title": "Request Change %",
+      "type": "stat"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Percentage change in cost compared to the previous period",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [
+            {
+              "options": {
+                "match": "null",
+                "result": {
+                  "text": "N/A"
+                }
+              },
+              "type": "special"
+            }
+          ],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "yellow",
+                "value": 10
+              },
+              {
+                "color": "red",
+                "value": 50
+              }
+            ]
+          },
+          "unit": "percent"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 6,
+        "y": 101
+      },
+      "id": 214,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "area",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "100 * (sum(increase(nexusgate_cost_total_usd_total[$__range])) - sum(increase(nexusgate_cost_total_usd_total[$__range] offset $__range))) / clamp_min(sum(increase(nexusgate_cost_total_usd_total[$__range] offset $__range)), 0.001)",
+          "legendFormat": "Change",
+          "refId": "A"
+        }
+      ],
+      "title": "Cost Change %",
+      "type": "stat"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Total requests in current period",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              }
+            ]
+          },
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 12,
+        "y": 101
+      },
+      "id": 215,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_completions_total[$__range]))",
+          "legendFormat": "Current",
+          "refId": "A"
+        }
+      ],
+      "title": "Period Requests",
+      "type": "stat"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Total cost in current period",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 6,
+        "x": 18,
+        "y": 101
+      },
+      "id": 216,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_total_usd_total[$__range]))",
+          "legendFormat": "Cost",
+          "refId": "A"
+        }
+      ],
+      "title": "Period Cost",
+      "type": "stat"
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 1,
+        "w": 24,
+        "x": 0,
+        "y": 105
+      },
+      "id": 220,
+      "panels": [],
+      "title": "Model Comparison",
+      "type": "row"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "P95 latency comparison across models",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "yellow",
+                "value": 5
+              },
+              {
+                "color": "red",
+                "value": 10
+              }
+            ]
+          },
+          "unit": "s"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 0,
+        "y": 106
+      },
+      "id": 221,
+      "options": {
+        "displayMode": "gradient",
+        "minVizHeight": 10,
+        "minVizWidth": 0,
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true,
+        "valueMode": "color"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ],
+      "title": "P95 Latency by Model",
+      "type": "bargauge"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Error rate comparison across models",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "continuous-RdYlGr"
+          },
+          "mappings": [],
+          "max": 0.1,
+          "min": 0,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "yellow",
+                "value": 0.01
+              },
+              {
+                "color": "red",
+                "value": 0.05
+              }
+            ]
+          },
+          "unit": "percentunit"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 6,
+        "y": 106
+      },
+      "id": 222,
+      "options": {
+        "displayMode": "gradient",
+        "minVizHeight": 10,
+        "minVizWidth": 0,
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true,
+        "valueMode": "color"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / sum(rate(nexusgate_completions_total[$__rate_interval])) by (model)",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Error Rate by Model",
+      "type": "bargauge"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Cost per 1000 tokens (average of input and output)",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "continuous-GrYlRd"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "currencyUSD"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 12,
+        "y": 106
+      },
+      "id": 223,
+      "options": {
+        "displayMode": "gradient",
+        "minVizHeight": 10,
+        "minVizWidth": 0,
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true,
+        "valueMode": "color"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "1000 * sum(increase(nexusgate_cost_total_usd_total[$__range])) by (model) / clamp_min(sum(increase(nexusgate_tokens_prompt_total[$__range])) by (model) + sum(increase(nexusgate_tokens_completion_total[$__range])) by (model), 1)",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Cost per 1K Tokens",
+      "type": "bargauge"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Requests per model",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          },
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 6,
+        "x": 18,
+        "y": 106
+      },
+      "id": 224,
+      "options": {
+        "displayMode": "gradient",
+        "minVizHeight": 10,
+        "minVizWidth": 0,
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true,
+        "valueMode": "color"
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_completions_total[$__range])) by (model)",
+          "legendFormat": "{{model}}",
+          "refId": "A"
+        }
+      ],
+      "title": "Request Count by Model",
+      "type": "bargauge"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "${datasource}"
+      },
+      "description": "Comprehensive model performance comparison",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {
+            "align": "auto",
+            "cellOptions": {
+              "type": "auto"
+            },
+            "inspect": false
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Model"
+            },
+            "properties": [
+              {
+                "id": "custom.width",
+                "value": 150
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Requests"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "short"
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "P50 Latency"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "s"
+              },
+              {
+                "id": "decimals",
+                "value": 2
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "P95 Latency"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "s"
+              },
+              {
+                "id": "decimals",
+                "value": 2
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Error Rate"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "percentunit"
+              },
+              {
+                "id": "decimals",
+                "value": 2
+              },
+              {
+                "id": "thresholds",
+                "value": {
+                  "mode": "absolute",
+                  "steps": [
+                    {
+                      "color": "green",
+                      "value": null
+                    },
+                    {
+                      "color": "yellow",
+                      "value": 0.01
+                    },
+                    {
+                      "color": "red",
+                      "value": 0.05
+                    }
+                  ]
+                }
+              },
+              {
+                "id": "custom.cellOptions",
+                "value": {
+                  "mode": "basic",
+                  "type": "color-background"
+                }
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Total Cost"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "currencyUSD"
+              },
+              {
+                "id": "decimals",
+                "value": 4
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 114
+      },
+      "id": 225,
+      "options": {
+        "cellHeight": "sm",
+        "footer": {
+          "countRows": false,
+          "enablePagination": false,
+          "fields": ["Requests", "Total Cost"],
+          "reducer": ["sum"],
+          "show": true
+        },
+        "showHeader": true,
+        "sortBy": [
+          {
+            "desc": true,
+            "displayName": "Requests"
+          }
+        ]
+      },
+      "pluginVersion": "10.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_completions_total[$__range])) by (model)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "Requests"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.50, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "P50"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "histogram_quantile(0.95, sum(rate(nexusgate_completion_duration_seconds_bucket[$__rate_interval])) by (le, model))",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "P95"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / sum(rate(nexusgate_completions_total[$__rate_interval])) by (model)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "ErrorRate"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "${datasource}"
+          },
+          "expr": "sum(increase(nexusgate_cost_total_usd_total[$__range])) by (model)",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "Cost"
+        }
+      ],
+      "title": "Model Performance Matrix",
+      "transformations": [
+        {
+          "id": "joinByField",
+          "options": {
+            "byField": "model",
+            "mode": "outer"
+          }
+        },
+        {
+          "id": "organize",
+          "options": {
+            "excludeByName": {
+              "Time": true,
+              "Time 1": true,
+              "Time 2": true,
+              "Time 3": true,
+              "Time 4": true,
+              "Time 5": true
+            },
+            "indexByName": {},
+            "renameByName": {
+              "Value #Cost": "Total Cost",
+              "Value #ErrorRate": "Error Rate",
+              "Value #P50": "P50 Latency",
+              "Value #P95": "P95 Latency",
+              "Value #Requests": "Requests",
+              "model": "Model"
+            }
+          }
+        }
+      ],
+      "type": "table"
     }
   ],
   "refresh": "30s",

From c2f31b3fa18ed66534369ece46adb11dbf266aa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Thu, 29 Jan 2026 14:22:18 +0800
Subject: [PATCH 11/12] fix(metrics): address code review feedback

- Fix total_cost_usd calculation to independently sum prompt and
  completion costs (previously required both prices to be non-null)
- Add clamp_min(0.001) protection to 4 division queries in Grafana
  dashboard to prevent NaN when no requests exist:
  - Error Rate by Model panel
  - Cache Hit Rate panel
  - Model Comparison Error Rate bar gauge
  - Model Performance Matrix ErrorRate column

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/db/index.ts                               | 11 ++++++-----
 .../dashboards/json/nexusgate-dashboard.json          |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/backend/src/db/index.ts b/backend/src/db/index.ts
index 4732e6a..c3d1876 100644
--- a/backend/src/db/index.ts
+++ b/backend/src/db/index.ts
@@ -1551,11 +1551,12 @@ export async function getCompletionCostMetrics() {
         END
       ), 0) AS completion_cost_usd,
       COALESCE(SUM(
-        CASE WHEN m.input_price IS NOT NULL AND m.output_price IS NOT NULL
-          THEN (
-            CASE WHEN c.prompt_tokens > 0 THEN (c.prompt_tokens::numeric / 1000000) * m.input_price ELSE 0 END +
-            CASE WHEN c.completion_tokens > 0 THEN (c.completion_tokens::numeric / 1000000) * m.output_price ELSE 0 END
-          )
+        CASE WHEN c.prompt_tokens > 0 AND m.input_price IS NOT NULL
+          THEN (c.prompt_tokens::numeric / 1000000) * m.input_price
+          ELSE 0
+        END +
+        CASE WHEN c.completion_tokens > 0 AND m.output_price IS NOT NULL
+          THEN (c.completion_tokens::numeric / 1000000) * m.output_price
           ELSE 0
         END
       ), 0) AS total_cost_usd
diff --git a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
index 987ae71..7003195 100644
--- a/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
+++ b/grafana/provisioning/dashboards/json/nexusgate-dashboard.json
@@ -1370,7 +1370,7 @@
             "type": "prometheus",
             "uid": "${datasource}"
           },
-          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / sum(rate(nexusgate_completions_total[$__rate_interval])) by (model)",
+          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / clamp_min(sum(rate(nexusgate_completions_total[$__rate_interval])) by (model), 0.001)",
           "legendFormat": "{{model}}",
           "refId": "A"
         }
@@ -1458,7 +1458,7 @@
             "type": "prometheus",
             "uid": "${datasource}"
           },
-          "expr": "sum(rate(nexusgate_completions_total{status=\"cache_hit\"}[$__rate_interval])) / sum(rate(nexusgate_completions_total[$__rate_interval]))",
+          "expr": "sum(rate(nexusgate_completions_total{status=\"cache_hit\"}[$__rate_interval])) / clamp_min(sum(rate(nexusgate_completions_total[$__rate_interval])), 0.001)",
           "legendFormat": "Cache Hit Rate",
           "refId": "A"
         }
@@ -3220,7 +3220,7 @@
             "type": "prometheus",
             "uid": "${datasource}"
           },
-          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / sum(rate(nexusgate_completions_total[$__rate_interval])) by (model)",
+          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / clamp_min(sum(rate(nexusgate_completions_total[$__rate_interval])) by (model), 0.001)",
           "legendFormat": "{{model}}",
           "refId": "A"
         }
@@ -3559,7 +3559,7 @@
             "type": "prometheus",
             "uid": "${datasource}"
           },
-          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / sum(rate(nexusgate_completions_total[$__rate_interval])) by (model)",
+          "expr": "sum(rate(nexusgate_completions_total{status=\"failed\"}[$__rate_interval])) by (model) / clamp_min(sum(rate(nexusgate_completions_total[$__rate_interval])) by (model), 0.001)",
           "format": "table",
           "instant": true,
           "legendFormat": "__auto",

From 1342d9a25f1fc7a00855247fd55515aa5f37e6dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=BF=94=E5=AE=87?= <admin@pescn.cn>
Date: Sat, 31 Jan 2026 18:35:56 +0800
Subject: [PATCH 12/12] fix(dashboard): stabilize useEffect dependency for
 dashboard auto-redirect

Wrap dashboards array derivation with useMemo to prevent unnecessary
useEffect re-runs caused by new array references on each render.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/overview/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/overview/index.tsx b/frontend/src/pages/overview/index.tsx
index 25a67cd..50806ae 100644
--- a/frontend/src/pages/overview/index.tsx
+++ b/frontend/src/pages/overview/index.tsx
@@ -63,12 +63,14 @@ export function OverviewPage() {
   const navigate = useNavigate()
   const { data: dashboardsData } = useGrafanaDashboards()
 
-  const dashboards = dashboardsData?.dashboards ?? []
+  const dashboards = useMemo(() => dashboardsData?.dashboards ?? [], [dashboardsData?.dashboards])
   const selectedDashboard = dashboards.find((d) => d.id === view)
   const timeRange = range as TimeRange
   const showGrafana = !!selectedDashboard
 
   // Auto-select first Grafana dashboard when dashboards are configured
+  // By design, when Grafana dashboards exist the built-in view is replaced;
+  // users switch between dashboards via the ViewModeToggle in the header.
   useEffect(() => {
     if (dashboards.length > 0 && view === 'builtin') {
       navigate({