@allbluecn/admin-app 0.1.0

package/src/routes/_nav/monitoring/ai-usage/route.lazy.tsx

@@ -0,0 +1,305 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useState, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { defineChart, lineY } from '@tanstack/charts'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
+import { scalePoint } from '@tanstack/charts/scales/point'
+import { tooltip } from '@tanstack/charts/tooltip'
+import { Chart } from '@tanstack/charts/react'
+import { BarChart3, AlertCircle, AlertTriangle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'
+import { PageHeader } from '@/components/common/page-header'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { getAiUsageOverviewFn } from '@/server/serverFns/monitoring/get-ai-usage-overview'
+import { checkAiAlertsFn } from '@/server/serverFns/monitoring/check-ai-alerts'
+import type { AiUsageOverview } from '@/server/admin-ai-usage'
+import type { AiAlert } from '@/server/admin-ai-alerts'
+
+function TrendChart({ data, y, stroke, strokeDasharray, ariaLabel }: {
+  data: Array<{ date: string; calls: number; cost: number }>
+  y: 'calls' | 'cost'
+  stroke: string
+  strokeDasharray?: string
+  ariaLabel: string
+}) {
+  const definition = useMemo(
+    () =>
+      defineChart({
+        marks: [
+          lineY(data, {
+            x: 'date',
+            y,
+            stroke,
+            strokeWidth: 2,
+            ...(strokeDasharray ? { strokeDasharray } : {}),
+          }),
+        ],
+        scales: {
+          x: { scale: () => scalePoint<string>().padding(0.4) },
+          y: { scale: scaleLinear, nice: true, grid: true },
+        },
+        svgAnimation: true,
+        tooltip,
+      }),
+    [data, y, stroke, strokeDasharray],
+  )
+  return <Chart definition={definition} height={200} ariaLabel={ariaLabel} />
+}
+
+function OverviewCard({ title, value, sub }: { title: string; value: string; sub?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {sub && <div className="text-xs text-muted-foreground mt-1">{sub}</div>}
+      </CardContent>
+    </Card>
+  )
+}
+
+function AiUsagePage() {
+  const { t } = useTranslation('common')
+  const [loading, setLoading] = useState(true)
+  const [data, setData] = useState<AiUsageOverview | null>(null)
+  const [wsPage, setWsPage] = useState(1)
+  const [usrPage, setUsrPage] = useState(1)
+  const [alerts, setAlerts] = useState<AiAlert[]>([])
+
+  const loadData = async () => {
+    setLoading(true)
+    try {
+      const result = await getAiUsageOverviewFn({
+        data: {
+          workspace: { page: wsPage, perPage: 10 },
+          user: { page: usrPage, perPage: 10 },
+        },
+      })
+      setData(result)
+    } catch {
+      /* ignore */
+    }
+    setLoading(false)
+  }
+
+  const loadAlerts = async () => {
+    try {
+      const result = await checkAiAlertsFn({ data: { hours: 24 } })
+      setAlerts(result)
+    } catch {
+      /* ignore */
+    }
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [wsPage, usrPage])
+
+  useEffect(() => {
+    loadAlerts()
+  }, [])
+
+  const wsTotalPages = Math.max(1, Math.ceil((data?.topWorkspacesTotal ?? 0) / 10))
+  const usrTotalPages = Math.max(1, Math.ceil((data?.topUsersTotal ?? 0) / 10))
+
+  if (loading && !data) {
+    return (
+      <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
+        <PageHeader title={t('monitoring.aiUsage.title')} description={t('monitoring.aiUsage.description')} icon={BarChart3} />
+        <div className="flex items-center justify-center h-32">
+          <RefreshCw className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
+      <div className="flex items-center justify-between">
+        <PageHeader title={t('monitoring.aiUsage.title')} description={t('monitoring.aiUsage.description')} icon={BarChart3} />
+        <button
+          onClick={loadData}
+          disabled={loading}
+          className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
+          {t('common.refresh')}
+        </button>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <OverviewCard title={t('monitoring.aiUsage.totalCalls')} value={data?.totalCalls?.toLocaleString('en-US') ?? '0'} />
+        <OverviewCard
+          title={t('monitoring.aiUsage.totalCost')}
+          value={data?.totalCostUsd != null ? `$${data.totalCostUsd.toFixed(2)}` : '—'}
+        />
+        <OverviewCard
+          title={t('monitoring.aiUsage.byokVsManaged')}
+          value={data?.bySource.map((s) => `${s.source}: ${s.count}`).join(' / ') || '—'}
+        />
+      </div>
+
+      {alerts.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {alerts.map((alert, i) => (
+            <Card key={i} className={`border-l-4 ${alert.severity === 'critical' ? 'border-l-destructive bg-destructive/5' : 'border-l-yellow-500 bg-yellow-50'}`}>
+              <CardHeader className="py-2 px-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    {alert.severity === 'critical' ? (
+                      <AlertTriangle className="size-4 text-destructive" />
+                    ) : (
+                      <AlertCircle className="size-4 text-yellow-600" />
+                    )}
+                    <span className="text-sm font-medium">{alert.message}</span>
+                  </div>
+                  <span className="text-xs text-muted-foreground">{alert.period}</span>
+                </div>
+              </CardHeader>
+              <CardContent className="py-0 px-4">
+                <div className="text-xs text-muted-foreground">
+                  {alert.metric}: {alert.value} / {t('monitoring.aiUsage.alert.threshold', { threshold: alert.threshold })} · {t('monitoring.aiUsage.alert.affected', { count: alert.count })}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('monitoring.aiUsage.dailyTrend')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {data?.trend?.length ? (
+            <div className="grid gap-6 md:grid-cols-2">
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">{t('monitoring.aiUsage.trend.calls')}</div>
+                <TrendChart
+                  data={data.trend.slice(-14)}
+                  y="calls"
+                  stroke="var(--primary)"
+                  ariaLabel={t('monitoring.aiUsage.trend.callsAria')}
+                />
+              </div>
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">{t('monitoring.aiUsage.trend.cost')}</div>
+                <TrendChart
+                  data={data.trend.slice(-14)}
+                  y="cost"
+                  stroke="var(--muted-foreground)"
+                  strokeDasharray="4 2"
+                  ariaLabel={t('monitoring.aiUsage.trend.costAria')}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center h-[200px] text-muted-foreground text-sm">
+              {t('common.empty')}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('monitoring.aiUsage.top10Workspaces')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('monitoring.aiUsage.workspace')}</TableHead>
+                  <TableHead className="text-right">{t('monitoring.aiUsage.count')}</TableHead>
+                  <TableHead className="text-right">{t('monitoring.aiUsage.cost')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data?.topWorkspaces.map((w) => (
+                    <TableRow key={w.workspaceId}>
+                      <TableCell>{w.workspaceName ?? w.workspaceId.slice(0, 8)}</TableCell>
+                      <TableCell className="text-right">{w.count}</TableCell>
+                      <TableCell className="text-right">
+                        {w.costUsd != null ? `$${w.costUsd.toFixed(2)}` : '—'}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <div className="flex items-center justify-between mt-3">
+                <span className="text-xs text-muted-foreground">{t('monitoring.aiUsage.totalItems', { total: data?.topWorkspacesTotal ?? 0 })}</span>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => setWsPage(Math.max(1, wsPage - 1))}
+                    disabled={wsPage <= 1}
+                    className="inline-flex items-center justify-center w-7 h-7 rounded-md border text-sm hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronLeft className="size-4" />
+                  </button>
+                  <span className="text-xs px-2">{wsPage} / {wsTotalPages}</span>
+                  <button
+                    onClick={() => setWsPage(Math.min(wsTotalPages, wsPage + 1))}
+                    disabled={wsPage >= wsTotalPages}
+                    className="inline-flex items-center justify-center w-7 h-7 rounded-md border text-sm hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('monitoring.aiUsage.top10Users')}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('monitoring.aiUsage.user')}</TableHead>
+                    <TableHead className="text-right">{t('monitoring.aiUsage.count')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {data?.topUsers.map((u) => (
+                    <TableRow key={u.userId}>
+                      <TableCell>{u.userName ?? u.userId.slice(0, 8)}</TableCell>
+                      <TableCell className="text-right">{u.count}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <div className="flex items-center justify-between mt-3">
+                <span className="text-xs text-muted-foreground">{t('monitoring.aiUsage.totalItems', { total: data?.topUsersTotal ?? 0 })}</span>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => setUsrPage(Math.max(1, usrPage - 1))}
+                    disabled={usrPage <= 1}
+                    className="inline-flex items-center justify-center w-7 h-7 rounded-md border text-sm hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronLeft className="size-4" />
+                  </button>
+                  <span className="text-xs px-2">{usrPage} / {usrTotalPages}</span>
+                  <button
+                    onClick={() => setUsrPage(Math.min(usrTotalPages, usrPage + 1))}
+                    disabled={usrPage >= usrTotalPages}
+                    className="inline-flex items-center justify-center w-7 h-7 rounded-md border text-sm hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createLazyFileRoute('/_nav/monitoring/ai-usage')({
+  component: AiUsagePage,
+})

package/src/routes/_nav/monitoring/ai-usage/route.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/monitoring/ai-usage')({})

package/src/routes/_nav/monitoring/errors/route.lazy.tsx

@@ -0,0 +1,111 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle, RefreshCw, Trash2 } from 'lucide-react'
+import { PageHeader } from '@/components/common/page-header'
+import { ErrorList } from '@/components/monitoring/error-list'
+import { getErrors } from '@/server/serverFns/monitoring/get-errors'
+import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
+import { toast } from 'sonner'
+
+export const Route = createLazyFileRoute('/_nav/monitoring/errors')({
+  component: MonitoringErrors,
+})
+
+function MonitoringErrors() {
+  const { t } = useTranslation('common')
+  const [loading, setLoading] = useState(true)
+  const [data, setData] = useState<any>(null)
+
+  const loadData = async () => {
+    setLoading(true)
+    try {
+      const result = await getErrors()
+      setData(result)
+    } catch {
+      // ignore
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const handleReset = async () => {
+    try {
+      await resetMonitoring({ data: { type: 'errors' } })
+      toast.success(t('monitoring.errors.clearSuccess'))
+      loadData()
+    } catch {
+      toast.error(t('monitoring.errors.clearFailed'))
+    }
+  }
+
+  return (
+    <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
+      <div className="flex items-center justify-between">
+        <PageHeader title={t('monitoring.errors.title')} description={t('monitoring.errors.description')} icon={AlertTriangle} />
+        <div className="flex items-center gap-2">
+          <button
+            onClick={loadData}
+            disabled={loading}
+            className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
+            {t('common.refresh')}
+          </button>
+          <button
+            onClick={handleReset}
+            className="inline-flex items-center gap-1 rounded-md border border-red-200 text-red-600 px-3 py-1.5 text-sm font-medium hover:bg-red-50 transition-colors dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950"
+          >
+            <Trash2 className="size-4" />
+            {t('monitoring.errors.clearData')}
+          </button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-lg border p-4 bg-card">
+          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.errorTypes')}</p>
+          <p className="text-2xl font-bold mt-1">{data?.summary?.uniqueErrors || 0}</p>
+        </div>
+        <div className="rounded-lg border p-4 bg-card">
+          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.totalOccurrences')}</p>
+          <p className="text-2xl font-bold mt-1">{data?.summary?.totalOccurrences || 0}</p>
+        </div>
+        <div className="rounded-lg border p-4 bg-card">
+          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.recentError')}</p>
+          <p className="text-sm font-medium mt-1">{data?.errors?.[0]?.errorName || t('common.none')}</p>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-32">
+          <RefreshCw className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : data?.errors?.length > 0 ? (
+        <ErrorList errors={data.errors} />
+      ) : (
+        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{t('monitoring.errors.empty')}</div>
+      )}
+    </div>
+  )
+}

package/src/routes/_nav/monitoring/health/route.lazy.tsx

@@ -0,0 +1,260 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useState, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
+import { HeartPulse, Play, Square, RefreshCw } from 'lucide-react'
+import { PageHeader } from '@/components/common/page-header'
+import { HealthCards } from '@/components/monitoring/health-cards'
+import { DataTable } from '@/components/data-table/data-table'
+import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
+import { getHealthCheckSettings, updateHealthCheckSettings } from '@/server/serverFns/monitoring/get-health-settings'
+import { toast } from 'sonner'
+
+export const Route = createLazyFileRoute('/_nav/monitoring/health')({
+  component: MonitoringHealth,
+})
+
+function MonitoringHealth() {
+  const { t } = useTranslation('common')
+  const [loading, setLoading] = useState(true)
+  const [data, setData] = useState<any>(null)
+  const [autoEnabled, setAutoEnabled] = useState(true)
+  const [autoLoading, setAutoLoading] = useState(true)
+  const [countdown, setCountdown] = useState(30)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    loadHealth()
+    loadSettings()
+  }, [])
+
+  useEffect(() => {
+    if (timerRef.current) clearInterval(timerRef.current)
+    if (autoEnabled) {
+      setCountdown(30)
+      timerRef.current = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) return 30
+          return prev - 1
+        })
+      }, 1000)
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [autoEnabled])
+
+  const loadHealth = async () => {
+    setLoading(true)
+    try {
+      const result = await getHealthStatus()
+      setData(result)
+    } catch {
+      // ignore
+    }
+    setLoading(false)
+  }
+
+  const loadSettings = async () => {
+    setAutoLoading(true)
+    try {
+      const result = await getHealthCheckSettings()
+      setAutoEnabled(result.enabled)
+    } catch {
+      // ignore
+    }
+    setAutoLoading(false)
+  }
+
+  const handleToggleAuto = async (enabled: boolean) => {
+    try {
+      await updateHealthCheckSettings({ data: { enabled } })
+      setAutoEnabled(enabled)
+      toast.success(enabled ? t('monitoring.health.autoEnabled') : t('monitoring.health.autoDisabled'))
+    } catch {
+      toast.error(t('monitoring.health.operationFailed'))
+    }
+  }
+
+  const statusColor = data?.current?.status === 'healthy'
+    ? 'text-green-500'
+    : 'text-red-500'
+
+  return (
+    <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden min-h-0">
+      <div className="flex items-center justify-between">
+        <PageHeader title={t('monitoring.health.title')} description={t('monitoring.health.description')} icon={HeartPulse} />
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            {autoEnabled ? (
+              <Square className="size-4 text-red-500" />
+            ) : (
+              <Play className="size-4 text-green-500" />
+            )}
+            <span className="text-sm">{t('monitoring.health.autoCheck')}</span>
+            <button
+              onClick={() => handleToggleAuto(!autoEnabled)}
+              disabled={autoLoading}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${autoEnabled ? 'bg-primary' : 'bg-input'}`}
+            >
+              <span
+                className={`inline-block h-3 w-3 rounded-full bg-background transition-transform ${autoEnabled ? 'translate-x-5' : 'translate-x-1'}`}
+              />
+            </button>
+          </div>
+          <button
+            onClick={loadHealth}
+            disabled={loading}
+            className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
+            {t('monitoring.health.checkNow')}
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-40">
+          <RefreshCw className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : data?.current ? (
+        <>
+          <div className={`rounded-lg border p-6 text-center ${data.current.status === 'healthy'
+            ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
+            : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950'
+            }`}>
+            <p className={`text-3xl font-bold ${statusColor}`}>
+              {data.current.status === 'healthy' ? '🟢  HEALTHY' : '🔴  UNHEALTHY'}
+            </p>
+            <p className="text-sm text-muted-foreground mt-1">
+              {t('monitoring.health.runningTime', { hours: Math.floor(data.current.checks.uptime / 3600), minutes: Math.floor((data.current.checks.uptime % 3600) / 60) })}
+              {autoEnabled && ` · ${t('monitoring.health.nextCheck', { countdown })}`}
+            </p>
+          </div>
+
+          <HealthCards health={data.current} />
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className={`rounded-lg border p-4 ${data.current.checks.database.status === 'connected'
+              ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
+              : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950'
+              }`}>
+              <p className="text-sm font-medium">{t('monitoring.health.database.title')}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {data.current.checks.database.status === 'connected'
+                  ? t('monitoring.health.database.connected', { latency: data.current.checks.database.latency })
+                  : `${t('monitoring.health.database.failed')}: ${data.current.checks.database.error || t('monitoring.health.database.unknownError')}`}
+              </p>
+            </div>
+            <div className="rounded-lg border p-4">
+              <p className="text-sm font-medium">{t('monitoring.health.memory.title')}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                RSS: {data.current.checks.memory.rss}B · Heap: {data.current.checks.memory.heapUsed}B / {data.current.checks.memory.heapTotal}B
+              </p>
+            </div>
+          </div>
+        </>
+      ) : null}
+
+      {data?.recent?.length > 0 && (
+        <div className="rounded-lg border bg-card flex-1 min-h-0 flex flex-col">
+          <div className="border-b px-4 py-3 shrink-0">
+            <h3 className="text-sm font-medium">{t('monitoring.health.history')}</h3>
+          </div>
+          <div className="p-4 flex-1 min-h-0">
+            <HistoryTable data={data.recent} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface HealthHistoryRow {
+  status: string
+  uptimeSeconds: number
+  memoryUsage: { heapUsed?: number }
+  dbStatus: string
+  dbLatencyMs?: number | null
+  timestamp: string
+}
+
+function HistoryTable({ data }: { data: HealthHistoryRow[] }) {
+  const { t } = useTranslation('common')
+  const columns = [
+    {
+      header: t('monitoring.health.historyColumns.time'),
+      accessorKey: 'timestamp',
+      meta: { style: { width: 105 } },
+      cell: ({ row }: { row: { original: HealthHistoryRow } }) => (
+        <span className="text-xs">
+          {formatTimestamp(row.original.timestamp, 'yyyy-MM-dd HH:mm:ss')}
+        </span>
+      ),
+    },
+    {
+      header: t('monitoring.health.historyColumns.status'),
+      accessorKey: 'status',
+      meta: { style: { width: 60 } },
+      cell: ({ row }: { row: { original: HealthHistoryRow } }) => {
+        const s = row.original.status
+        return (
+          <span className={s === 'healthy' ? 'text-green-600' : 'text-red-600'}>
+            {s === 'healthy' ? '🟢 ' + t('monitoring.health.status.normal') : '🔴 ' + t('monitoring.health.status.abnormal')}
+          </span>
+        )
+      },
+    },
+    {
+      header: 'Heap Used',
+      accessorKey: 'memoryUsage',
+      meta: { style: { width: 70, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: HealthHistoryRow } }) => {
+        const mem = row.original.memoryUsage
+        return (
+          <span className="text-xs">
+            {mem?.heapUsed ? (mem.heapUsed / 1048576).toFixed(1) + 'MB' : '-'}
+          </span>
+        )
+      },
+    },
+    {
+      header: t('monitoring.health.historyColumns.dbLatency'),
+      accessorKey: 'dbLatencyMs',
+      meta: { style: { width: 65, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: HealthHistoryRow } }) => (
+        <span className="text-xs">{row.original.dbLatencyMs ?? '-'}</span>
+      ),
+    },
+    {
+      header: t('monitoring.health.historyColumns.uptime'),
+      accessorKey: 'uptimeSeconds',
+      meta: { style: { width: 65, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: HealthHistoryRow } }) => {
+        const s = row.original.uptimeSeconds
+        const h = Math.floor(s / 3600)
+        const m = Math.floor((s % 3600) / 60)
+        return <span>{h}h {m}m</span>
+      },
+    },
+  ]
+
+  return <DataTable columns={columns as any} data={data} />
+}