feat(前端UI): 实现运维监控前端界面

- 新增帮助提示组件（HelpTooltip.vue）
- 更新侧边栏添加 ops 监控菜单项
- 扩展设置视图集成 ops 配置面板
- 新增 ops 监控视图目录（dashboard, alerts, realtime, settings 等）

frontend/src/components/common/HelpTooltip.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  content?: string
+}>()
+
+const show = ref(false)
+</script>
+
+<template>
+  <div
+    class="group relative ml-1 inline-flex items-center align-middle"
+    @mouseenter="show = true"
+    @mouseleave="show = false"
+  >
+    <!-- Trigger Icon -->
+    <slot name="trigger">
+      <svg
+        class="h-4 w-4 cursor-help text-gray-400 transition-colors hover:text-primary-600 dark:text-gray-500 dark:hover:text-primary-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    </slot>
+
+    <!-- Popover Content -->
+    <div
+      v-show="show"
+      class="absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg bg-gray-900 p-3 text-xs leading-relaxed text-white shadow-xl ring-1 ring-white/10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:bg-gray-800"
+    >
+      <slot>{{ content }}</slot>
+      <div class="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
+    </div>
+  </div>
+</template>
+

frontend/src/components/layout/AppSidebar.vue

@@ -144,10 +144,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
+import { useAdminSettingsStore, useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
 import VersionBadge from '@/components/common/VersionBadge.vue'
 
 const { t } = useI18n()
@@ -156,6 +156,7 @@ const route = useRoute()
 const appStore = useAppStore()
 const authStore = useAuthStore()
 const onboardingStore = useOnboardingStore()
+const adminSettingsStore = useAdminSettingsStore()
 
 const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
 const mobileOpen = computed(() => appStore.mobileOpen)
@@ -442,6 +443,9 @@ const personalNavItems = computed(() => {
 const adminNavItems = computed(() => {
   const baseItems = [
     { path: '/admin/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
+    ...(adminSettingsStore.opsMonitoringEnabled
+      ? [{ path: '/admin/ops', label: t('nav.ops'), icon: ChartIcon }]
+      : []),
     { path: '/admin/users', label: t('nav.users'), icon: UsersIcon, hideInSimpleMode: true },
     { path: '/admin/groups', label: t('nav.groups'), icon: FolderIcon, hideInSimpleMode: true },
     { path: '/admin/subscriptions', label: t('nav.subscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
@@ -510,6 +514,23 @@ if (
   isDark.value = true
   document.documentElement.classList.add('dark')
 }
+
+// Fetch admin settings (for feature-gated nav items like Ops).
+watch(
+  isAdmin,
+  (v) => {
+    if (v) {
+      adminSettingsStore.fetch()
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  if (isAdmin.value) {
+    adminSettingsStore.fetch()
+  }
+})
 </script>
 
 <style scoped>

frontend/src/views/admin/SettingsView.vue

@@ -665,6 +665,59 @@
           </div>
         </div>
 
+        <!-- Ops Monitoring -->
+        <div class="card">
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.opsMonitoring.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.opsMonitoring.description') }}
+            </p>
+          </div>
+          <div class="p-6">
+            <div class="flex items-center justify-between">
+              <div>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.opsMonitoring.enabled')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.opsMonitoring.enabledHint') }}
+                </p>
+              </div>
+              <Toggle v-model="form.ops_monitoring_enabled" />
+            </div>
+
+            <div v-if="form.ops_monitoring_enabled" class="mt-5 flex items-center justify-between">
+              <div>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.opsMonitoring.realtimeEnabled')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.opsMonitoring.realtimeEnabledHint') }}
+                </p>
+              </div>
+              <Toggle v-model="form.ops_realtime_monitoring_enabled" />
+            </div>
+
+            <div v-if="form.ops_monitoring_enabled" class="mt-5 flex items-center justify-between">
+              <div>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.opsMonitoring.queryMode')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.opsMonitoring.queryModeHint') }}
+                </p>
+              </div>
+              <Select
+                v-model="form.ops_query_mode_default"
+                :options="opsQueryModeOptions"
+                class="w-[220px]"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- Save Button -->
         <div class="flex justify-end">
           <button type="submit" :disabled="saving" class="btn btn-primary">
@@ -687,22 +740,34 @@
           </button>
         </div>
       </form>
+
+      <!-- Ops settings and management (only show when enabled) -->
+      <div v-if="showOpsSettings" class="space-y-6">
+        <OpsRuntimeSettingsCard />
+        <OpsEmailNotificationCard />
+        <OpsAlertRulesCard />
+      </div>
     </div>
   </AppLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api'
 import type { SystemSettings, UpdateSettingsRequest } from '@/api/admin/settings'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import Icon from '@/components/icons/Icon.vue'
 import Toggle from '@/components/common/Toggle.vue'
-import { useAppStore } from '@/stores'
+import Select from '@/components/common/Select.vue'
+import { useAdminSettingsStore, useAppStore } from '@/stores'
+import OpsAlertRulesCard from '@/views/admin/ops/components/OpsAlertRulesCard.vue'
+import OpsEmailNotificationCard from '@/views/admin/ops/components/OpsEmailNotificationCard.vue'
+import OpsRuntimeSettingsCard from '@/views/admin/ops/components/OpsRuntimeSettingsCard.vue'
 
 const { t } = useI18n()
 const appStore = useAppStore()
+const adminSettingsStore = useAdminSettingsStore()
 
 const loading = ref(true)
 const saving = ref(false)
@@ -747,11 +812,29 @@ const form = reactive<SettingsForm>({
   turnstile_site_key: '',
   turnstile_secret_key: '',
   turnstile_secret_key_configured: false,
+  // Model fallback
+  enable_model_fallback: false,
+  fallback_model_anthropic: 'claude-3-5-sonnet-20241022',
+  fallback_model_openai: 'gpt-4o',
+  fallback_model_gemini: 'gemini-2.5-pro',
+  fallback_model_antigravity: 'gemini-2.5-pro',
   // Identity patch (Claude -> Gemini)
   enable_identity_patch: true,
-  identity_patch_prompt: ''
+  identity_patch_prompt: '',
+  // Ops Monitoring (vNext)
+  ops_monitoring_enabled: true,
+  ops_realtime_monitoring_enabled: true,
+  ops_query_mode_default: 'auto'
 })
 
+const opsQueryModeOptions = computed(() => [
+  { value: 'auto', label: t('admin.settings.opsMonitoring.queryModeAuto') },
+  { value: 'raw', label: t('admin.settings.opsMonitoring.queryModeRaw') },
+  { value: 'preagg', label: t('admin.settings.opsMonitoring.queryModePreagg') }
+])
+
+const showOpsSettings = computed(() => !!form.ops_monitoring_enabled)
+
 function handleLogoUpload(event: Event) {
   const input = event.target as HTMLInputElement
   const file = input.files?.[0]
@@ -829,12 +912,25 @@ async function saveSettings() {
       smtp_use_tls: form.smtp_use_tls,
       turnstile_enabled: form.turnstile_enabled,
       turnstile_site_key: form.turnstile_site_key,
-      turnstile_secret_key: form.turnstile_secret_key || undefined
+      turnstile_secret_key: form.turnstile_secret_key || undefined,
+      enable_model_fallback: form.enable_model_fallback,
+      fallback_model_anthropic: form.fallback_model_anthropic,
+      fallback_model_openai: form.fallback_model_openai,
+      fallback_model_gemini: form.fallback_model_gemini,
+      fallback_model_antigravity: form.fallback_model_antigravity,
+      enable_identity_patch: form.enable_identity_patch,
+      identity_patch_prompt: form.identity_patch_prompt,
+      ops_monitoring_enabled: form.ops_monitoring_enabled,
+      ops_realtime_monitoring_enabled: form.ops_realtime_monitoring_enabled,
+      ops_query_mode_default: form.ops_query_mode_default
     }
     const updated = await adminAPI.settings.updateSettings(payload)
     Object.assign(form, updated)
     form.smtp_password = ''
     form.turnstile_secret_key = ''
+    adminSettingsStore.setOpsMonitoringEnabledLocal(!!updated.ops_monitoring_enabled)
+    adminSettingsStore.setOpsRealtimeMonitoringEnabledLocal(!!updated.ops_realtime_monitoring_enabled)
+    adminSettingsStore.setOpsQueryModeDefaultLocal(updated.ops_query_mode_default || 'auto')
     // Refresh cached public settings so sidebar/header update immediately
     await appStore.fetchPublicSettings(true)
     appStore.showSuccess(t('admin.settings.settingsSaved'))

frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue

+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import Select from '@/components/common/Select.vue'
+import { opsAPI } from '@/api/admin/ops'
+import type { AlertEvent } from '../types'
+import { formatDateTime } from '../utils/opsFormatters'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const loading = ref(false)
+const events = ref<AlertEvent[]>([])
+
+const limit = ref(100)
+const limitOptions = computed(() => [
+  { value: 50, label: '50' },
+  { value: 100, label: '100' },
+  { value: 200, label: '200' }
+])
+
+async function load() {
+  loading.value = true
+  try {
+    events.value = await opsAPI.listAlertEvents(limit.value)
+  } catch (err: any) {
+    console.error('[OpsAlertEventsCard] Failed to load alert events', err)
+    appStore.showError(err?.response?.data?.detail || t('admin.ops.alertEvents.loadFailed'))
+    events.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  load()
+})
+
+watch(limit, () => {
+  load()
+})
+
+function severityBadgeClass(severity: string | undefined): string {
+  const s = String(severity || '').trim().toLowerCase()
+  if (s === 'p0' || s === 'critical') return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+  if (s === 'p1' || s === 'warning') return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
+  if (s === 'p2' || s === 'info') return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+  if (s === 'p3') return 'bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-gray-300'
+  return 'bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-gray-300'
+}
+
+function statusBadgeClass(status: string | undefined): string {
+  const s = String(status || '').trim().toLowerCase()
+  if (s === 'firing') return 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-900/30 dark:text-red-300 dark:ring-red-500/30'
+  if (s === 'resolved') return 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-300 dark:ring-green-500/30'
+  return 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/30 dark:text-gray-300 dark:ring-gray-500/30'
+}
+
+const empty = computed(() => events.value.length === 0 && !loading.value)
+</script>
+
+<template>
+  <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex items-start justify-between gap-4">
+      <div>
+        <h3 class="text-sm font-bold text-gray-900 dark:text-white">{{ t('admin.ops.alertEvents.title') }}</h3>
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.ops.alertEvents.description') }}</p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Select :model-value="limit" :options="limitOptions" class="w-[88px]" @change="limit = Number($event || 100)" />
+        <button
+          class="flex items-center gap-1.5 rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-bold text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
+          :disabled="loading"
+          @click="load"
+        >
+          <svg class="h-3.5 w-3.5" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          {{ t('common.refresh') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+      <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      {{ t('admin.ops.alertEvents.loading') }}
+    </div>
+
+    <div v-else-if="empty" class="rounded-xl border border-dashed border-gray-200 p-8 text-center text-sm text-gray-500 dark:border-dark-700 dark:text-gray-400">
+      {{ t('admin.ops.alertEvents.empty') }}
+    </div>
+
+    <div v-else class="overflow-hidden rounded-xl border border-gray-200 dark:border-dark-700">
+      <div class="max-h-[600px] overflow-y-auto overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+          <thead class="bg-gray-50 dark:bg-dark-900">
+            <tr>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.time') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.status') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.severity') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.title') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.metric') }}
+              </th>
+              <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertEvents.table.email') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-800">
+            <tr v-for="row in events" :key="row.id" class="hover:bg-gray-50 dark:hover:bg-dark-700/50">
+              <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
+                {{ formatDateTime(row.fired_at || row.created_at) }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span class="inline-flex items-center rounded-full px-2 py-1 text-[10px] font-bold ring-1 ring-inset" :class="statusBadgeClass(row.status)">
+                  {{ String(row.status || '-').toUpperCase() }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span class="rounded-full px-2 py-1 text-[10px] font-bold" :class="severityBadgeClass(String(row.severity || ''))">
+                  {{ row.severity || '-' }}
+                </span>
+              </td>
+              <td class="min-w-[280px] px-4 py-3 text-xs text-gray-700 dark:text-gray-200">
+                <div class="font-semibold">{{ row.title || '-' }}</div>
+                <div v-if="row.description" class="mt-0.5 line-clamp-2 text-[11px] text-gray-500 dark:text-gray-400">
+                  {{ row.description }}
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
+                <span v-if="typeof row.metric_value === 'number' && typeof row.threshold_value === 'number'">
+                  {{ row.metric_value.toFixed(2) }} / {{ row.threshold_value.toFixed(2) }}
+                </span>
+                <span v-else>-</span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-right text-xs">
+                <span
+                  class="inline-flex items-center rounded-full px-2 py-1 text-[10px] font-bold ring-1 ring-inset"
+                  :class="row.email_sent ? 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-300 dark:ring-green-500/30' : 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/30 dark:text-gray-300 dark:ring-gray-500/30'"
+                >
+                  {{ row.email_sent ? t('common.enabled') : t('common.disabled') }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/views/admin/ops/components/OpsAlertRulesCard.vue

+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import Select from '@/components/common/Select.vue'
+import { opsAPI } from '@/api/admin/ops'
+import type { AlertRule, MetricType, Operator } from '../types'
+import type { OpsSeverity } from '@/api/admin/ops'
+import { formatDateTime } from '../utils/opsFormatters'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const loading = ref(false)
+const rules = ref<AlertRule[]>([])
+
+async function load() {
+  loading.value = true
+  try {
+    rules.value = await opsAPI.listAlertRules()
+  } catch (err: any) {
+    console.error('[OpsAlertRulesCard] Failed to load rules', err)
+    appStore.showError(err?.response?.data?.detail || t('admin.ops.alertRules.loadFailed'))
+    rules.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  load()
+})
+
+const sortedRules = computed(() => {
+  return [...rules.value].sort((a, b) => (b.id || 0) - (a.id || 0))
+})
+
+const showEditor = ref(false)
+const saving = ref(false)
+const editingId = ref<number | null>(null)
+const draft = ref<AlertRule | null>(null)
+
+const metricOptions = computed(() => {
+  const items: Array<{ value: MetricType; label: string }> = [
+    { value: 'success_rate', label: t('admin.ops.alertRules.metrics.successRate') },
+    { value: 'error_rate', label: t('admin.ops.alertRules.metrics.errorRate') },
+    { value: 'p95_latency_ms', label: t('admin.ops.alertRules.metrics.p95') },
+    { value: 'p99_latency_ms', label: t('admin.ops.alertRules.metrics.p99') },
+    { value: 'cpu_usage_percent', label: t('admin.ops.alertRules.metrics.cpu') },
+    { value: 'memory_usage_percent', label: t('admin.ops.alertRules.metrics.memory') },
+    { value: 'concurrency_queue_depth', label: t('admin.ops.alertRules.metrics.queueDepth') }
+  ]
+  return items
+})
+
+const operatorOptions = computed(() => {
+  const ops: Operator[] = ['>', '>=', '<', '<=', '==', '!=']
+  return ops.map((o) => ({ value: o, label: o }))
+})
+
+const severityOptions = computed(() => {
+  const sev: OpsSeverity[] = ['P0', 'P1', 'P2', 'P3']
+  return sev.map((s) => ({ value: s, label: s }))
+})
+
+const windowOptions = computed(() => {
+  const windows = [1, 5, 60]
+  return windows.map((m) => ({ value: m, label: `${m}m` }))
+})
+
+function newRuleDraft(): AlertRule {
+  return {
+    name: '',
+    description: '',
+    enabled: true,
+    metric_type: 'error_rate',
+    operator: '>',
+    threshold: 1,
+    window_minutes: 1,
+    sustained_minutes: 2,
+    severity: 'P1',
+    cooldown_minutes: 10,
+    notify_email: true
+  }
+}
+
+function openCreate() {
+  editingId.value = null
+  draft.value = newRuleDraft()
+  showEditor.value = true
+}
+
+function openEdit(rule: AlertRule) {
+  editingId.value = rule.id ?? null
+  draft.value = JSON.parse(JSON.stringify(rule))
+  showEditor.value = true
+}
+
+const editorValidation = computed(() => {
+  const errors: string[] = []
+  const r = draft.value
+  if (!r) return { valid: true, errors }
+  if (!r.name || !r.name.trim()) errors.push(t('admin.ops.alertRules.validation.nameRequired'))
+  if (!r.metric_type) errors.push(t('admin.ops.alertRules.validation.metricRequired'))
+  if (!r.operator) errors.push(t('admin.ops.alertRules.validation.operatorRequired'))
+  if (!(typeof r.threshold === 'number' && Number.isFinite(r.threshold)))
+    errors.push(t('admin.ops.alertRules.validation.thresholdRequired'))
+  if (!(typeof r.window_minutes === 'number' && Number.isFinite(r.window_minutes) && [1, 5, 60].includes(r.window_minutes))) {
+    errors.push(t('admin.ops.alertRules.validation.windowRange'))
+  }
+  if (!(typeof r.sustained_minutes === 'number' && Number.isFinite(r.sustained_minutes) && r.sustained_minutes >= 1 && r.sustained_minutes <= 1440)) {
+    errors.push(t('admin.ops.alertRules.validation.sustainedRange'))
+  }
+  if (!(typeof r.cooldown_minutes === 'number' && Number.isFinite(r.cooldown_minutes) && r.cooldown_minutes >= 0 && r.cooldown_minutes <= 1440)) {
+    errors.push(t('admin.ops.alertRules.validation.cooldownRange'))
+  }
+  return { valid: errors.length === 0, errors }
+})
+
+async function save() {
+  if (!draft.value) return
+  if (!editorValidation.value.valid) {
+    appStore.showError(editorValidation.value.errors[0] || t('admin.ops.alertRules.validation.invalid'))
+    return
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await opsAPI.updateAlertRule(editingId.value, draft.value)
+    } else {
+      await opsAPI.createAlertRule(draft.value)
+    }
+    showEditor.value = false
+    draft.value = null
+    editingId.value = null
+    await load()
+    appStore.showSuccess(t('common.success'))
+  } catch (err: any) {
+    console.error('[OpsAlertRulesCard] Failed to save rule', err)
+    appStore.showError(err?.response?.data?.detail || t('admin.ops.alertRules.saveFailed'))
+  } finally {
+    saving.value = false
+  }
+}
+
+const showDeleteConfirm = ref(false)
+const pendingDelete = ref<AlertRule | null>(null)
+
+function requestDelete(rule: AlertRule) {
+  pendingDelete.value = rule
+  showDeleteConfirm.value = true
+}
+
+async function confirmDelete() {
+  if (!pendingDelete.value?.id) return
+  try {
+    await opsAPI.deleteAlertRule(pendingDelete.value.id)
+    showDeleteConfirm.value = false
+    pendingDelete.value = null
+    await load()
+    appStore.showSuccess(t('common.success'))
+  } catch (err: any) {
+    console.error('[OpsAlertRulesCard] Failed to delete rule', err)
+    appStore.showError(err?.response?.data?.detail || t('admin.ops.alertRules.deleteFailed'))
+  }
+}
+
+function cancelDelete() {
+  showDeleteConfirm.value = false
+  pendingDelete.value = null
+}
+</script>
+
+<template>
+  <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex items-start justify-between gap-4">
+      <div>
+        <h3 class="text-sm font-bold text-gray-900 dark:text-white">{{ t('admin.ops.alertRules.title') }}</h3>
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.ops.alertRules.description') }}</p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button class="btn btn-sm btn-primary" :disabled="loading" @click="openCreate">
+          {{ t('admin.ops.alertRules.create') }}
+        </button>
+        <button
+          class="flex items-center gap-1.5 rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-bold text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
+          :disabled="loading"
+          @click="load"
+        >
+          <svg class="h-3.5 w-3.5" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          {{ t('common.refresh') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="py-10 text-center text-sm text-gray-500 dark:text-gray-400">
+      {{ t('admin.ops.alertRules.loading') }}
+    </div>
+
+    <div v-else-if="sortedRules.length === 0" class="rounded-xl border border-dashed border-gray-200 p-8 text-center text-sm text-gray-500 dark:border-dark-700 dark:text-gray-400">
+      {{ t('admin.ops.alertRules.empty') }}
+    </div>
+
+    <div v-else class="overflow-hidden rounded-xl border border-gray-200 dark:border-dark-700">
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+          <thead class="bg-gray-50 dark:bg-dark-900">
+            <tr>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertRules.table.name') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertRules.table.metric') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertRules.table.severity') }}
+              </th>
+              <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertRules.table.enabled') }}
+              </th>
+              <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {{ t('admin.ops.alertRules.table.actions') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-800">
+            <tr v-for="row in sortedRules" :key="row.id" class="hover:bg-gray-50 dark:hover:bg-dark-700/50">
+              <td class="px-4 py-3">
+                <div class="text-xs font-bold text-gray-900 dark:text-white">{{ row.name }}</div>
+                <div v-if="row.description" class="mt-0.5 line-clamp-2 text-[11px] text-gray-500 dark:text-gray-400">
+                  {{ row.description }}
+                </div>
+                <div v-if="row.updated_at" class="mt-1 text-[10px] text-gray-400">
+                  {{ formatDateTime(row.updated_at) }}
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-700 dark:text-gray-200">
+                <span class="font-mono">{{ row.metric_type }}</span>
+                <span class="mx-1 text-gray-400">{{ row.operator }}</span>
+                <span class="font-mono">{{ row.threshold }}</span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-xs font-bold text-gray-700 dark:text-gray-200">
+                {{ row.severity }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-700 dark:text-gray-200">
+                {{ row.enabled ? t('common.enabled') : t('common.disabled') }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-right text-xs">
+                <button class="btn btn-sm btn-secondary" @click="openEdit(row)">{{ t('common.edit') }}</button>
+                <button class="ml-2 btn btn-sm btn-danger" @click="requestDelete(row)">{{ t('common.delete') }}</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <BaseDialog
+      :show="showEditor"
+      :title="editingId ? t('admin.ops.alertRules.editTitle') : t('admin.ops.alertRules.createTitle')"
+      width="wide"
+      @close="showEditor = false"
+    >
+      <div class="space-y-4">
+        <div v-if="!editorValidation.valid" class="rounded-xl bg-red-50 p-4 text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300">
+          <div class="font-bold">{{ t('admin.ops.alertRules.validation.title') }}</div>
+          <ul class="mt-1 list-disc pl-5">
+            <li v-for="e in editorValidation.errors" :key="e">{{ e }}</li>
+          </ul>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="md:col-span-2">
+            <label class="input-label">{{ t('admin.ops.alertRules.form.name') }}</label>
+            <input v-model="draft!.name" class="input" type="text" />
+          </div>
+
+          <div class="md:col-span-2">
+            <label class="input-label">{{ t('admin.ops.alertRules.form.description') }}</label>
+            <input v-model="draft!.description" class="input" type="text" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.metric') }}</label>
+            <Select v-model="draft!.metric_type" :options="metricOptions" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.operator') }}</label>
+            <Select v-model="draft!.operator" :options="operatorOptions" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.threshold') }}</label>
+            <input v-model.number="draft!.threshold" class="input" type="number" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.severity') }}</label>
+            <Select v-model="draft!.severity" :options="severityOptions" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.window') }}</label>
+            <Select v-model="draft!.window_minutes" :options="windowOptions" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.sustained') }}</label>
+            <input v-model.number="draft!.sustained_minutes" class="input" type="number" min="1" max="1440" />
+          </div>
+
+          <div>
+            <label class="input-label">{{ t('admin.ops.alertRules.form.cooldown') }}</label>
+            <input v-model.number="draft!.cooldown_minutes" class="input" type="number" min="0" max="1440" />
+          </div>
+
+          <div class="flex items-center justify-between rounded-xl bg-gray-50 px-4 py-3 dark:bg-dark-800/50 md:col-span-2">
+            <span class="text-xs font-bold text-gray-700 dark:text-gray-200">{{ t('admin.ops.alertRules.form.enabled') }}</span>
+            <input v-model="draft!.enabled" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
+          </div>
+
+          <div class="flex items-center justify-between rounded-xl bg-gray-50 px-4 py-3 dark:bg-dark-800/50 md:col-span-2">
+            <span class="text-xs font-bold text-gray-700 dark:text-gray-200">{{ t('admin.ops.alertRules.form.notifyEmail') }}</span>
+            <input v-model="draft!.notify_email" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex items-center justify-end gap-2">
+          <button class="btn btn-secondary" :disabled="saving" @click="showEditor = false">
+            {{ t('common.cancel') }}
+          </button>
+          <button class="btn btn-primary" :disabled="saving" @click="save">
+            {{ saving ? t('common.saving') : t('common.save') }}
+          </button>
+        </div>
+      </template>
+    </BaseDialog>
+
+    <ConfirmDialog
+      :show="showDeleteConfirm"
+      :title="t('admin.ops.alertRules.deleteConfirmTitle')"
+      :message="t('admin.ops.alertRules.deleteConfirmMessage')"
+      :confirmText="t('common.delete')"
+      :cancelText="t('common.cancel')"
+      @confirm="confirmDelete"
+      @cancel="cancelDelete"
+    />
+  </div>
+</template>

frontend/src/views/admin/ops/components/OpsDashboardHeader.vue

+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Select from '@/components/common/Select.vue'
+import { adminAPI } from '@/api'
+import type { OpsDashboardOverview, OpsWSStatus } from '@/api/admin/ops'
+import { formatNumber } from '@/utils/format'
+
+interface Props {
+  overview?: OpsDashboardOverview | null
+  wsStatus: OpsWSStatus
+  wsReconnectInMs?: number | null
+  wsHasData?: boolean
+  realTimeQps: number
+  realTimeTps: number
+  platform: string
+  groupId: number | null
+  timeRange: string
+  queryMode: string
+  loading: boolean
+  lastUpdated: Date | null
+}
+
+interface Emits {
+  (e: 'update:platform', value: string): void
+  (e: 'update:group', value: number | null): void
+  (e: 'update:timeRange', value: string): void
+  (e: 'update:queryMode', value: string): void
+  (e: 'refresh'): void
+  (e: 'openRequestDetails'): void
+  (e: 'openErrorDetails', kind: 'request' | 'upstream'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { t } = useI18n()
+
+const groups = ref<Array<{ id: number; name: string; platform: string }>>([])
+
+const platformOptions = computed(() => [
+  { value: '', label: t('common.all') },
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'gemini', label: 'Gemini' },
+  { value: 'antigravity', label: 'Antigravity' }
+])
+
+const timeRangeOptions = computed(() => [
+  { value: '5m', label: '5m' },
+  { value: '30m', label: '30m' },
+  { value: '1h', label: '1h' },
+  { value: '6h', label: '6h' },
+  { value: '24h', label: '24h' }
+])
+
+const queryModeOptions = computed(() => [
+  { value: 'auto', label: t('admin.ops.queryMode.auto') },
+  { value: 'raw', label: t('admin.ops.queryMode.raw') },
+  { value: 'preagg', label: t('admin.ops.queryMode.preagg') }
+])
+
+const groupOptions = computed(() => {
+  const filtered = props.platform ? groups.value.filter((g) => g.platform === props.platform) : groups.value
+  return [{ value: null, label: t('common.all') }, ...filtered.map((g) => ({ value: g.id, label: g.name }))]
+})
+
+watch(
+  () => props.platform,
+  (newPlatform) => {
+    if (!newPlatform) return
+    const currentGroup = groups.value.find((g) => g.id === props.groupId)
+    if (currentGroup && currentGroup.platform !== newPlatform) {
+      emit('update:group', null)
+    }
+  }
+)
+
+onMounted(async () => {
+  try {
+    const list = await adminAPI.groups.getAll()
+    groups.value = list.map((g) => ({ id: g.id, name: g.name, platform: g.platform }))
+  } catch (e) {
+    console.error('[OpsDashboardHeader] Failed to load groups', e)
+    groups.value = []
+  }
+})
+
+function handlePlatformChange(val: string | number | boolean | null) {
+  emit('update:platform', String(val || ''))
+}
+
+function handleGroupChange(val: string | number | boolean | null) {
+  if (val === null || val === '' || typeof val === 'boolean') {
+    emit('update:group', null)
+    return
+  }
+  const id = typeof val === 'number' ? val : Number.parseInt(String(val), 10)
+  emit('update:group', Number.isFinite(id) && id > 0 ? id : null)
+}
+
+function handleTimeRangeChange(val: string | number | boolean | null) {
+  emit('update:timeRange', String(val || '1h'))
+}
+
+function handleQueryModeChange(val: string | number | boolean | null) {
+  emit('update:queryMode', String(val || 'auto'))
+}
+
+const updatedAtLabel = computed(() => {
+  if (!props.lastUpdated) return t('common.unknown')
+  return props.lastUpdated.toLocaleTimeString()
+})
+
+const totalRequestsLabel = computed(() => {
+  const n = props.overview?.request_count_total ?? 0
+  return formatNumber(n)
+})
+
+const totalTokensLabel = computed(() => {
+  const n = props.overview?.token_consumed ?? 0
+  return formatNumber(n)
+})
+
+const qpsLabel = computed(() => {
+  const useRealtime = props.wsStatus === 'connected' && !!props.wsHasData
+  const n = useRealtime ? props.realTimeQps : props.overview?.qps?.current
+  if (typeof n !== 'number') return '-'
+  return n.toFixed(1)
+})
+
+const tpsLabel = computed(() => {
+  const useRealtime = props.wsStatus === 'connected' && !!props.wsHasData
+  const n = useRealtime ? props.realTimeTps : props.overview?.tps?.current
+  if (typeof n !== 'number') return '-'
+  return n.toFixed(1)
+})
+
+const qpsPeakLabel = computed(() => {
+  const n = props.overview?.qps?.peak
+  if (typeof n !== 'number') return '-'
+  return n.toFixed(1)
+})
+
+const tpsPeakLabel = computed(() => {
+  const n = props.overview?.tps?.peak
+  if (typeof n !== 'number') return '-'
+  return n.toFixed(1)
+})
+
+const slaLabel = computed(() => {
+  const v = props.overview?.sla
+  if (typeof v !== 'number') return '-'
+  return `${(v * 100).toFixed(3)}%`
+})
+
+const errorRateLabel = computed(() => {
+  const v = props.overview?.error_rate
+  if (typeof v !== 'number') return '-'
+  return `${(v * 100).toFixed(2)}%`
+})
+
+const upstreamErrorRateLabel = computed(() => {
+  const v = props.overview?.upstream_error_rate
+  if (typeof v !== 'number') return '-'
+  return `${(v * 100).toFixed(2)}%`
+})
+
+const wsStatusLabel = computed(() => {
+  switch (props.wsStatus) {
+    case 'connected':
+      return t('admin.ops.realtime.connected')
+    case 'connecting':
+      return t('admin.ops.realtime.connecting')
+    case 'reconnecting':
+      return t('admin.ops.realtime.reconnecting')
+    case 'offline':
+      return t('admin.ops.realtime.offline')
+    case 'closed':
+    default:
+      return t('admin.ops.realtime.closed')
+  }
+})
+
+const wsStatusDotClass = computed(() => {
+  switch (props.wsStatus) {
+    case 'connected':
+      return 'bg-green-500'
+    case 'reconnecting':
+    case 'connecting':
+      return 'bg-yellow-500'
+    case 'offline':
+      return 'bg-orange-500'
+    case 'closed':
+    default:
+      return 'bg-gray-400'
+  }
+})
+
+const wsReconnectHint = computed(() => {
+  if (props.wsStatus !== 'reconnecting') return ''
+  const delayMs = props.wsReconnectInMs ?? null
+  if (typeof delayMs !== 'number' || !Number.isFinite(delayMs) || delayMs <= 0) return ''
+  const sec = Math.max(1, Math.ceil(delayMs / 1000))
+  return t('admin.ops.realtime.reconnectIn', { seconds: sec })
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <!-- Top Toolbar (style aligned with docs/sub2api baseline) -->
+    <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 pb-4 dark:border-dark-700">
+      <div>
+        <h1 class="flex items-center gap-2 text-xl font-black text-gray-900 dark:text-white">
+          <svg class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+            />
+          </svg>
+          {{ t('admin.ops.title') }}
+        </h1>
+        <div class="mt-1 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+          <span class="flex items-center gap-1.5" :title="props.loading ? t('admin.ops.loadingText') : t('admin.ops.ready')">
+            <span class="relative flex h-2 w-2">
+              <span
+                class="relative inline-flex h-2 w-2 rounded-full"
+                :class="props.loading ? 'bg-gray-400' : 'bg-green-500'"
+              ></span>
+            </span>
+            {{ props.loading ? t('admin.ops.loadingText') : t('admin.ops.ready') }}
+          </span>
+          <span>·</span>
+          <span>{{ t('common.refresh') }}: {{ updatedAtLabel }}</span>
+          <span>·</span>
+          <span class="flex items-center gap-1.5">
+            <span class="relative flex h-2 w-2">
+              <span class="relative inline-flex h-2 w-2 rounded-full" :class="wsStatusDotClass"></span>
+            </span>
+            <span>{{ wsStatusLabel }}</span>
+            <span v-if="wsReconnectHint" class="text-[11px] text-gray-400">({{ wsReconnectHint }})</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <Select
+          :model-value="platform"
+          :options="platformOptions"
+          class="w-full sm:w-[140px]"
+          @update:model-value="handlePlatformChange"
+        />
+
+        <Select
+          :model-value="groupId"
+          :options="groupOptions"
+          class="w-full sm:w-[140px]"
+          @update:model-value="handleGroupChange"
+        />
+
+        <div class="mx-1 hidden h-4 w-[1px] bg-gray-200 dark:bg-dark-700 sm:block"></div>
+
+        <Select
+          :model-value="timeRange"
+          :options="timeRangeOptions"
+          class="relative w-full sm:w-[150px]"
+          @update:model-value="handleTimeRangeChange"
+        />
+
+        <Select
+          :model-value="queryMode"
+          :options="queryModeOptions"
+          class="relative w-full sm:w-[170px]"
+          @update:model-value="handleQueryModeChange"
+        />
+
+        <button
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-400 dark:hover:bg-dark-600"
+          :disabled="loading"
+          :title="t('common.refresh')"
+          @click="emit('refresh')"
+        >
+          <svg class="h-4 w-4" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Placeholder section to keep header height close to baseline.
+         Will be progressively filled as Milestone 6 modules land. -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
+        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.requests') }}</div>
+        <div class="mt-2 text-xl font-black text-gray-900 dark:text-white">
+          {{ totalRequestsLabel }}
+        </div>
+        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+          {{ t('admin.ops.tokens') }}: {{ totalTokensLabel }}
+        </div>
+      </div>
+      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
+        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">QPS / TPS</div>
+        <div class="mt-2 flex items-end justify-between gap-3">
+          <div class="text-xl font-black text-gray-900 dark:text-white">
+            {{ qpsLabel }} <span class="text-xs font-semibold text-gray-400">/</span> {{ tpsLabel }}
+          </div>
+          <button
+            type="button"
+            class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
+            :disabled="props.loading"
+            :title="t('admin.ops.requestDetails.title')"
+            @click="emit('openRequestDetails')"
+          >
+            {{ t('admin.ops.requestDetails.details') }}
+          </button>
+        </div>
+        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+          {{ t('admin.ops.peak') }}: {{ qpsPeakLabel }} / {{ tpsPeakLabel }}
+        </div>
+      </div>
+      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
+        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">SLA</div>
+        <div class="mt-2 text-xl font-black text-gray-900 dark:text-white">
+          {{ slaLabel }}
+        </div>
+        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+          {{ t('admin.ops.businessLimited') }}: {{ formatNumber(props.overview?.business_limited_count ?? 0) }}
+        </div>
+      </div>
+      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
+        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errors') }}</div>
+        <div class="mt-2 flex items-center justify-between gap-3">
+          <div class="text-xs font-semibold text-gray-700 dark:text-gray-200">
+            {{ t('admin.ops.errorRate') }}: <span class="font-mono font-bold text-gray-900 dark:text-white">{{ errorRateLabel }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
+              :disabled="props.loading"
+              @click="emit('openErrorDetails', 'request')"
+            >
+              {{ t('admin.ops.errorDetails.requestErrors') }}
+            </button>
+            <button
+              type="button"
+              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
+              :disabled="props.loading"
+              @click="emit('openErrorDetails', 'upstream')"
+            >
+              {{ t('admin.ops.errorDetails.upstreamErrors') }}
+            </button>
+          </div>
+        </div>
+        <div class="mt-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
+          {{ t('admin.ops.upstreamRate') }}: <span class="font-mono font-bold text-gray-900 dark:text-white">{{ upstreamErrorRateLabel }}</span>
+        </div>
+        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+          429: {{ formatNumber(props.overview?.upstream_429_count ?? 0) }} · 529:
+          {{ formatNumber(props.overview?.upstream_529_count ?? 0) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ops/components/OpsDashboardSkeleton.vue

+<template>
+  <div class="space-y-6">
+    <!-- Header -->
+    <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div class="space-y-2">
+          <div class="h-5 w-48 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          <div class="h-4 w-72 animate-pulse rounded bg-gray-100 dark:bg-dark-700/70"></div>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="h-9 w-28 animate-pulse rounded-xl bg-gray-200 dark:bg-dark-700"></div>
+          <div class="h-9 w-28 animate-pulse rounded-xl bg-gray-200 dark:bg-dark-700"></div>
+        </div>
+      </div>
+
+      <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <div v-for="i in 4" :key="i" class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
+          <div class="h-3 w-16 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          <div class="mt-3 h-6 w-24 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Charts -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+        <div class="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+        <div class="mt-6 h-64 animate-pulse rounded-2xl bg-gray-100 dark:bg-dark-700/70"></div>
+      </div>
+      <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+        <div class="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+        <div class="mt-6 h-64 animate-pulse rounded-2xl bg-gray-100 dark:bg-dark-700/70"></div>
+      </div>
+    </div>
+
+    <!-- Cards -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700"
+      >
+        <div class="h-4 w-36 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+        <div class="mt-4 space-y-3">
+          <div class="h-3 w-2/3 animate-pulse rounded bg-gray-100 dark:bg-dark-700/70"></div>
+          <div class="h-3 w-1/2 animate-pulse rounded bg-gray-100 dark:bg-dark-700/70"></div>
+          <div class="h-3 w-3/5 animate-pulse rounded bg-gray-100 dark:bg-dark-700/70"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue

+<template>
+  <BaseDialog :show="show" :title="title" width="full" :close-on-click-outside="true" @close="close">
+    <div v-if="loading" class="flex items-center justify-center py-16">
+      <div class="flex flex-col items-center gap-3">
+        <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
+        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('admin.ops.errorDetail.loading') }}</div>
+      </div>
+    </div>
+
+    <div v-else-if="!detail" class="py-10 text-center text-sm text-gray-500 dark:text-gray-400">
+      {{ emptyText }}
+    </div>
+
+    <div v-else class="space-y-6 p-6">
+      <!-- Top Summary -->
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
+        <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
+          <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.requestId') }}</div>
+          <div class="mt-1 break-all font-mono text-sm font-medium text-gray-900 dark:text-white">
+            {{ detail.request_id || detail.client_request_id || '—' }}
+          </div>
+        </div>
+
+        <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
+          <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.time') }}</div>
+          <div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+            {{ formatDateTime(detail.created_at) }}
+          </div>
+        </div>
+
+        <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
+          <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.phase') }}</div>
+          <div class="mt-1 text-sm font-bold uppercase text-gray-900 dark:text-white">
+            {{ detail.phase || '—' }}
+          </div>
+          <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {{ detail.type || '—' }}
+          </div>
+        </div>
+
+        <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
+          <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.status') }}</div>
+          <div class="mt-1 flex flex-wrap items-center gap-2">
+            <span :class="['inline-flex items-center rounded-lg px-2 py-1 text-xs font-black ring-1 ring-inset shadow-sm', statusClass]">
+              {{ detail.status_code }}
+            </span>
+            <span
+              v-if="detail.severity"
+              :class="['rounded-md px-2 py-0.5 text-[10px] font-black shadow-sm', severityClass]"
+            >
+              {{ detail.severity }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Message -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <h3 class="mb-4 text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.message') }}</h3>
+        <div class="text-sm font-medium text-gray-800 dark:text-gray-200 break-words">
+          {{ detail.message || '—' }}
+        </div>
+      </div>
+
+      <!-- Basic Info -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <h3 class="mb-4 text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.basicInfo') }}</h3>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.platform') }}</div>
+            <div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ detail.platform || '—' }}</div>
+          </div>
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.model') }}</div>
+            <div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ detail.model || '—' }}</div>
+          </div>
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.latency') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.latency_ms != null ? `${detail.latency_ms}ms` : '—' }}
+            </div>
+          </div>
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.ttft') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.time_to_first_token_ms != null ? `${detail.time_to_first_token_ms}ms` : '—' }}
+            </div>
+          </div>
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.businessLimited') }}</div>
+            <div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+              {{ detail.is_business_limited ? 'true' : 'false' }}
+            </div>
+          </div>
+          <div>
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.requestPath') }}</div>
+            <div class="mt-1 font-mono text-xs text-gray-700 dark:text-gray-200 break-all">
+              {{ detail.request_path || '—' }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Timings (best-effort fields) -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <h3 class="mb-4 text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.timings') }}</h3>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="rounded-lg bg-white p-4 shadow-sm dark:bg-dark-800">
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.auth') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.auth_latency_ms != null ? `${detail.auth_latency_ms}ms` : '—' }}
+            </div>
+          </div>
+          <div class="rounded-lg bg-white p-4 shadow-sm dark:bg-dark-800">
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.routing') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.routing_latency_ms != null ? `${detail.routing_latency_ms}ms` : '—' }}
+            </div>
+          </div>
+          <div class="rounded-lg bg-white p-4 shadow-sm dark:bg-dark-800">
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.upstream') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.upstream_latency_ms != null ? `${detail.upstream_latency_ms}ms` : '—' }}
+            </div>
+          </div>
+          <div class="rounded-lg bg-white p-4 shadow-sm dark:bg-dark-800">
+            <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.response') }}</div>
+            <div class="mt-1 font-mono text-sm font-bold text-gray-900 dark:text-white">
+              {{ detail.response_latency_ms != null ? `${detail.response_latency_ms}ms` : '—' }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Retry -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <div class="flex flex-col justify-between gap-4 md:flex-row md:items-start">
+          <div class="space-y-1">
+            <h3 class="text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.retry') }}</h3>
+            <div class="text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.ops.errorDetail.retryNote1') }}
+            </div>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <button type="button" class="btn btn-secondary btn-sm" :disabled="retrying" @click="openRetryConfirm('client')">
+              {{ t('admin.ops.errorDetail.retryClient') }}
+            </button>
+            <button
+              type="button"
+              class="btn btn-secondary btn-sm"
+              :disabled="retrying || !pinnedAccountId"
+              @click="openRetryConfirm('upstream')"
+              :title="pinnedAccountId ? '' : t('admin.ops.errorDetail.retryUpstreamHint')"
+            >
+              {{ t('admin.ops.errorDetail.retryUpstream') }}
+            </button>
+          </div>
+        </div>
+
+        <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
+          <div class="md:col-span-1">
+            <label class="mb-1 block text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.pinnedAccountId') }}</label>
+            <input v-model="pinnedAccountIdInput" type="text" class="input font-mono text-sm" :placeholder="t('admin.ops.errorDetail.pinnedAccountIdHint')" />
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.ops.errorDetail.retryNote2') }}
+            </div>
+          </div>
+          <div class="md:col-span-2">
+            <div class="rounded-lg bg-white p-4 shadow-sm dark:bg-dark-800">
+              <div class="text-xs font-bold uppercase text-gray-400">{{ t('admin.ops.errorDetail.retryNotes') }}</div>
+              <ul class="mt-2 list-disc space-y-1 pl-5 text-xs text-gray-600 dark:text-gray-300">
+                <li>{{ t('admin.ops.errorDetail.retryNote3') }}</li>
+                <li>{{ t('admin.ops.errorDetail.retryNote4') }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Request body -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <div class="flex items-center justify-between">
+          <h3 class="text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.requestBody') }}</h3>
+          <div
+            v-if="detail.request_body_truncated"
+            class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+          >
+            {{ t('admin.ops.errorDetail.trimmed') }}
+          </div>
+        </div>
+        <pre
+          class="mt-4 max-h-[420px] overflow-auto rounded-xl border border-gray-200 bg-white p-4 text-xs text-gray-800 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-100"
+        ><code>{{ prettyJSON(detail.request_body) }}</code></pre>
+      </div>
+
+      <!-- Error body -->
+      <div class="rounded-xl bg-gray-50 p-6 dark:bg-dark-900">
+        <h3 class="text-sm font-black uppercase tracking-wider text-gray-900 dark:text-white">{{ t('admin.ops.errorDetail.errorBody') }}</h3>
+        <pre
+          class="mt-4 max-h-[420px] overflow-auto rounded-xl border border-gray-200 bg-white p-4 text-xs text-gray-800 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-100"
+        ><code>{{ prettyJSON(detail.error_body) }}</code></pre>
+      </div>
+    </div>
+  </BaseDialog>
+
+  <ConfirmDialog
+    :show="showRetryConfirm"
+    :title="t('admin.ops.errorDetail.confirmRetry')"
+    :message="retryConfirmMessage"
+    @confirm="runConfirmedRetry"
+    @cancel="cancelRetry"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import { useAppStore } from '@/stores'
+import { opsAPI, type OpsErrorDetail, type OpsRetryMode } from '@/api/admin/ops'
+import { formatDateTime } from '@/utils/format'
+import { getSeverityClass } from '../utils/opsFormatters'
+
+interface Props {
+  show: boolean
+  errorId: number | null
+}
+
+interface Emits {
+  (e: 'update:show', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const loading = ref(false)
+const detail = ref<OpsErrorDetail | null>(null)
+
+const retrying = ref(false)
+const showRetryConfirm = ref(false)
+const pendingRetryMode = ref<OpsRetryMode>('client')
+
+const pinnedAccountIdInput = ref('')
+const pinnedAccountId = computed<number | null>(() => {
+  const raw = String(pinnedAccountIdInput.value || '').trim()
+  if (!raw) return null
+  const n = Number.parseInt(raw, 10)
+  return Number.isFinite(n) && n > 0 ? n : null
+})
+
+const title = computed(() => {
+  if (!props.errorId) return 'Error Detail'
+  return `Error #${props.errorId}`
+})
+
+const emptyText = computed(() => 'No error selected.')
+
+function close() {
+  emit('update:show', false)
+}
+
+function prettyJSON(raw?: string): string {
+  if (!raw) return t('admin.ops.errorDetail.na')
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}
+
+async function fetchDetail(id: number) {
+  loading.value = true
+  try {
+    const d = await opsAPI.getErrorLogDetail(id)
+    detail.value = d
+
+    // Default pinned account from error log if present.
+    if (d.account_id && d.account_id > 0) {
+      pinnedAccountIdInput.value = String(d.account_id)
+    } else {
+      pinnedAccountIdInput.value = ''
+    }
+  } catch (err: any) {
+    detail.value = null
+    appStore.showError(err?.message || 'Failed to load error detail')
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.show, props.errorId] as const,
+  ([show, id]) => {
+    if (!show) {
+      detail.value = null
+      return
+    }
+    if (typeof id === 'number' && id > 0) {
+      fetchDetail(id)
+    }
+  },
+  { immediate: true }
+)
+
+function openRetryConfirm(mode: OpsRetryMode) {
+  pendingRetryMode.value = mode
+  showRetryConfirm.value = true
+}
+
+const retryConfirmMessage = computed(() => {
+  const mode = pendingRetryMode.value
+  if (mode === 'upstream') {
+    return t('admin.ops.errorDetail.confirmRetryMessage')
+  }
+  return t('admin.ops.errorDetail.confirmRetryHint')
+})
+
+const severityClass = computed(() => {
+  if (!detail.value?.severity) return 'bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-gray-300'
+  return getSeverityClass(detail.value.severity)
+})
+
+const statusClass = computed(() => {
+  const code = detail.value?.status_code ?? 0
+  if (code >= 500) return 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-500/30'
+  if (code === 429) return 'bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400 dark:ring-purple-500/30'
+  if (code >= 400) return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-500/30'
+  return 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/30 dark:text-gray-400 dark:ring-gray-500/30'
+})
+
+async function runConfirmedRetry() {
+  if (!props.errorId) return
+  const mode = pendingRetryMode.value
+  showRetryConfirm.value = false
+
+  retrying.value = true
+  try {
+    const req =
+      mode === 'upstream'
+        ? { mode, pinned_account_id: pinnedAccountId.value ?? undefined }
+        : { mode }
+
+    const res = await opsAPI.retryErrorRequest(props.errorId, req)
+    const summary = res.status === 'succeeded' ? t('admin.ops.errorDetail.retrySuccess') : t('admin.ops.errorDetail.retryFailed')
+    appStore.showSuccess(summary)
+  } catch (err: any) {
+    appStore.showError(err?.message || 'Retry failed')
+  } finally {
+    retrying.value = false
+  }
+}
+
+function cancelRetry() {
+  showRetryConfirm.value = false
+}
+</script>

frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue

+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import Select from '@/components/common/Select.vue'
+import OpsErrorLogTable from './OpsErrorLogTable.vue'
+import { opsAPI, type OpsErrorLog } from '@/api/admin/ops'
+
+interface Props {
+  show: boolean
+  timeRange: string
+  platform?: string
+  groupId?: number | null
+  errorType: 'request' | 'upstream'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+  (e: 'openErrorDetail', errorId: number): void
+}>()
+
+const { t } = useI18n()
+
+const loading = ref(false)
+const rows = ref<OpsErrorLog[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(50)
+
+const q = ref('')
+const statusCode = ref<number | null>(null)
+const phase = ref<string>('')
+const accountIdInput = ref<string>('')
+
+const accountId = computed<number | null>(() => {
+  const raw = String(accountIdInput.value || '').trim()
+  if (!raw) return null
+  const n = Number.parseInt(raw, 10)
+  return Number.isFinite(n) && n > 0 ? n : null
+})
+
+const modalTitle = computed(() => {
+  return props.errorType === 'upstream' ? t('admin.ops.errorDetails.upstreamErrors') : t('admin.ops.errorDetails.requestErrors')
+})
+
+const statusCodeSelectOptions = computed(() => {
+  const codes = [400, 401, 403, 404, 409, 422, 429, 500, 502, 503, 504, 529]
+  return [
+    { value: null, label: t('common.all') },
+    ...codes.map((c) => ({ value: c, label: String(c) }))
+  ]
+})
+
+const phaseSelectOptions = computed(() => {
+  const options = [
+    { value: '', label: t('common.all') },
+    { value: 'upstream', label: 'upstream' },
+    { value: 'network', label: 'network' },
+    { value: 'routing', label: 'routing' },
+    { value: 'auth', label: 'auth' },
+    { value: 'billing', label: 'billing' },
+    { value: 'concurrency', label: 'concurrency' },
+    { value: 'internal', label: 'internal' }
+  ]
+  return options
+})
+
+function close() {
+  emit('update:show', false)
+}
+
+onKeyStroke('Escape', () => {
+  if (props.show) close()
+})
+
+async function fetchErrorLogs() {
+  if (!props.show) return
+
+  loading.value = true
+  try {
+    const params: Record<string, any> = {
+      page: page.value,
+      page_size: pageSize.value,
+      time_range: props.timeRange
+    }
+
+    const platform = String(props.platform || '').trim()
+    if (platform) params.platform = platform
+    if (typeof props.groupId === 'number' && props.groupId > 0) params.group_id = props.groupId
+
+    if (q.value.trim()) params.q = q.value.trim()
+    if (typeof statusCode.value === 'number') params.status_codes = String(statusCode.value)
+    if (typeof accountId.value === 'number') params.account_id = accountId.value
+
+    const phaseVal = String(phase.value || '').trim()
+    if (phaseVal) params.phase = phaseVal
+
+    const res = await opsAPI.listErrorLogs(params)
+    rows.value = res.items || []
+    total.value = res.total || 0
+  } catch (err) {
+    console.error('[OpsErrorDetailsModal] Failed to fetch error logs', err)
+    rows.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetFilters() {
+  q.value = ''
+  statusCode.value = null
+  phase.value = props.errorType === 'upstream' ? 'upstream' : ''
+  accountIdInput.value = ''
+  page.value = 1
+  fetchErrorLogs()
+}
+
+watch(
+  () => props.show,
+  (open) => {
+    if (!open) return
+    page.value = 1
+    pageSize.value = 50
+    resetFilters()
+  }
+)
+
+watch(
+  () => [props.timeRange, props.platform, props.groupId] as const,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+
+watch(
+  () => [page.value, pageSize.value] as const,
+  () => {
+    if (!props.show) return
+    fetchErrorLogs()
+  }
+)
+
+let searchTimeout: number | null = null
+watch(
+  () => q.value,
+  () => {
+    if (!props.show) return
+    if (searchTimeout) window.clearTimeout(searchTimeout)
+    searchTimeout = window.setTimeout(() => {
+      page.value = 1
+      fetchErrorLogs()
+    }, 350)
+  }
+)
+
+watch(
+  () => [statusCode.value, phase.value] as const,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+
+watch(
+  () => accountId.value,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4" @click.self="close">
+        <Transition
+          enter-active-class="transition duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="show" class="relative flex max-h-[90vh] w-full max-w-7xl flex-col overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-dark-800">
+            <!-- Header -->
+            <div class="flex items-center justify-between border-b border-gray-200 px-6 py-5 dark:border-dark-700">
+              <div class="flex items-center gap-3">
+                <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-orange-50 dark:bg-orange-900/20">
+                  <svg class="h-6 w-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="text-lg font-black text-gray-900 dark:text-white">{{ modalTitle }}</h3>
+                  <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('admin.ops.errorDetails.total') }} {{ total }}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700"
+                @click="close"
+              >
+                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- Filters -->
+            <div class="border-b border-gray-200 px-6 py-4 dark:border-dark-700">
+              <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
+                <div class="lg:col-span-5">
+                  <div class="relative group">
+                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+                      <svg
+                        class="h-4 w-4 text-gray-400 transition-colors group-focus-within:text-blue-500"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                    </div>
+                    <input
+                      v-model="q"
+                      type="text"
+                      class="w-full rounded-2xl border-gray-200 bg-gray-50/50 py-2 pl-10 pr-4 text-sm font-medium text-gray-700 transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:focus:bg-dark-800"
+                      :placeholder="t('admin.ops.errorDetails.searchPlaceholder')"
+                    />
+                  </div>
+                </div>
+
+                <div class="lg:col-span-2">
+                  <Select :model-value="statusCode" :options="statusCodeSelectOptions" class="w-full" @update:model-value="statusCode = $event as any" />
+                </div>
+
+                <div class="lg:col-span-2">
+                  <Select :model-value="phase" :options="phaseSelectOptions" class="w-full" @update:model-value="phase = String($event ?? '')" />
+                </div>
+
+                <div class="lg:col-span-2">
+                  <input
+                    v-model="accountIdInput"
+                    type="text"
+                    inputmode="numeric"
+                    class="input w-full text-sm"
+                    :placeholder="t('admin.ops.errorDetails.accountIdPlaceholder')"
+                  />
+                </div>
+
+                <div class="lg:col-span-1 flex items-center justify-end">
+                  <button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">
+                    {{ t('common.reset') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Body -->
+            <div class="min-h-0 flex-1 overflow-y-auto px-6 py-6">
+              <OpsErrorLogTable
+                :rows="rows"
+                :total="total"
+                :loading="loading"
+                :page="page"
+                :page-size="pageSize"
+                @openErrorDetail="emit('openErrorDetail', $event)"
+                @update:page="page = $event"
+                @update:pageSize="pageSize = $event"
+              />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Chart as ChartJS, ArcElement, Legend, Tooltip } from 'chart.js'
+import { Doughnut } from 'vue-chartjs'
+import type { OpsErrorDistributionResponse } from '@/api/admin/ops'
+import type { ChartState } from '../types'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+interface Props {
+  data: OpsErrorDistributionResponse | null
+  loading: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'openDetails'): void
+}>()
+const { t } = useI18n()
+
+const isDarkMode = computed(() => document.documentElement.classList.contains('dark'))
+const colors = computed(() => ({
+  blue: '#3b82f6',
+  red: '#ef4444',
+  orange: '#f59e0b',
+  gray: '#9ca3af',
+  text: isDarkMode.value ? '#9ca3af' : '#6b7280'
+}))
+
+const hasData = computed(() => (props.data?.total ?? 0) > 0)
+
+const state = computed<ChartState>(() => {
+  if (hasData.value) return 'ready'
+  if (props.loading) return 'loading'
+  return 'empty'
+})
+
+interface ErrorCategory {
+  label: string
+  count: number
+  color: string
+}
+
+const categories = computed<ErrorCategory[]>(() => {
+  if (!props.data) return []
+
+  let upstream = 0 // 502, 503, 504
+  let client = 0 // 4xx
+  let system = 0 // 500
+  let other = 0
+
+  for (const item of props.data.items || []) {
+    const code = Number(item.status_code || 0)
+    const count = Number(item.total || 0)
+    if (!Number.isFinite(code) || !Number.isFinite(count)) continue
+
+    if ([502, 503, 504].includes(code)) upstream += count
+    else if (code >= 400 && code < 500) client += count
+    else if (code === 500) system += count
+    else other += count
+  }
+
+  const out: ErrorCategory[] = []
+  if (upstream > 0) out.push({ label: t('admin.ops.upstream'), count: upstream, color: colors.value.orange })
+  if (client > 0) out.push({ label: t('admin.ops.client'), count: client, color: colors.value.blue })
+  if (system > 0) out.push({ label: t('admin.ops.system'), count: system, color: colors.value.red })
+  if (other > 0) out.push({ label: t('admin.ops.other'), count: other, color: colors.value.gray })
+  return out
+})
+
+const topReason = computed(() => {
+  if (categories.value.length === 0) return null
+  return categories.value.reduce((prev, cur) => (cur.count > prev.count ? cur : prev))
+})
+
+const chartData = computed(() => {
+  if (!hasData.value || categories.value.length === 0) return null
+  return {
+    labels: categories.value.map((c) => c.label),
+    datasets: [
+      {
+        data: categories.value.map((c) => c.count),
+        backgroundColor: categories.value.map((c) => c.color),
+        borderWidth: 0
+      }
+    ]
+  }
+})
+
+const options = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      backgroundColor: isDarkMode.value ? '#1f2937' : '#ffffff',
+      titleColor: isDarkMode.value ? '#f3f4f6' : '#111827',
+      bodyColor: isDarkMode.value ? '#d1d5db' : '#4b5563'
+    }
+  }
+}))
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex items-center justify-between">
+      <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
+        <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+        {{ t('admin.ops.errorDistribution') }}
+        <HelpTooltip :content="t('admin.ops.tooltips.errorDistribution')" />
+      </h3>
+      <button
+        type="button"
+        class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+        :disabled="state !== 'ready'"
+        :title="t('admin.ops.errorTrend')"
+        @click="emit('openDetails')"
+      >
+        {{ t('admin.ops.requestDetails.details') }}
+      </button>
+    </div>
+
+    <div class="relative min-h-0 flex-1">
+      <div v-if="state === 'ready' && chartData" class="flex h-full flex-col">
+        <div class="flex-1">
+          <Doughnut :data="chartData" :options="{ ...options, cutout: '65%' }" />
+        </div>
+        <div class="mt-4 flex flex-col items-center gap-2">
+          <div v-if="topReason" class="text-xs font-bold text-gray-900 dark:text-white">
+            {{ t('admin.ops.top') }}: <span :style="{ color: topReason.color }">{{ topReason.label }}</span>
+          </div>
+          <div class="flex flex-wrap justify-center gap-3">
+            <div v-for="item in categories" :key="item.label" class="flex items-center gap-1.5 text-xs">
+              <span class="h-2 w-2 rounded-full" :style="{ backgroundColor: item.color }"></span>
+              <span class="text-gray-500 dark:text-gray-400">{{ item.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="flex h-full items-center justify-center">
+        <div v-if="state === 'loading'" class="animate-pulse text-sm text-gray-400">{{ t('common.loading') }}</div>
+        <EmptyState v-else :title="t('common.noData')" :description="t('admin.ops.charts.emptyError')" />
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ops/components/OpsErrorLogTable.vue

+<template>
+  <div>
+    <div v-if="loading" class="flex items-center justify-center py-10">
+      <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
+    </div>
+
+    <div v-else class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+        <thead class="sticky top-0 z-10 bg-gray-50/50 dark:bg-dark-800/50">
+          <tr>
+            <th
+              scope="col"
+              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.timeId') }}
+            </th>
+            <th
+              scope="col"
+              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.context') }}
+            </th>
+            <th
+              scope="col"
+              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.status') }}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.message') }}
+            </th>
+            <th
+              scope="col"
+              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.latency') }}
+            </th>
+            <th
+              scope="col"
+              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+            >
+              {{ t('admin.ops.errorLog.action') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-dark-700">
+          <tr v-if="rows.length === 0" class="bg-white dark:bg-dark-900">
+            <td colspan="6" class="py-16 text-center text-sm text-gray-400 dark:text-dark-500">
+              {{ t('admin.ops.errorLog.noErrors') }}
+            </td>
+          </tr>
+
+          <tr
+            v-for="log in rows"
+            :key="log.id"
+            class="group cursor-pointer transition-all duration-200 hover:bg-gray-50/80 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:hover:bg-dark-800/50 dark:focus:ring-offset-dark-900"
+            tabindex="0"
+            role="button"
+            @click="emit('openErrorDetail', log.id)"
+            @keydown.enter.prevent="emit('openErrorDetail', log.id)"
+            @keydown.space.prevent="emit('openErrorDetail', log.id)"
+          >
+            <!-- Time & ID -->
+            <td class="px-6 py-4">
+              <div class="flex flex-col gap-0.5">
+                <span class="font-mono text-xs font-bold text-gray-900 dark:text-gray-200">
+                  {{ formatDateTime(log.created_at).split(' ')[1] }}
+                </span>
+                <span
+                  class="font-mono text-[10px] text-gray-400 transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400"
+                  :title="log.request_id || log.client_request_id"
+                >
+                  {{ (log.request_id || log.client_request_id || '').substring(0, 12) }}
+                </span>
+              </div>
+            </td>
+
+	            <!-- Context (Platform/Model) -->
+	            <td class="px-6 py-4">
+	              <div class="flex flex-col items-start gap-1.5">
+	                <span
+	                  class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-tight text-gray-600 dark:bg-dark-700 dark:text-gray-300"
+	                >
+	                  {{ log.platform || '-' }}
+	                </span>
+	                <span
+	                  v-if="log.model"
+	                  class="max-w-[160px] truncate font-mono text-[10px] text-gray-500 dark:text-dark-400"
+	                  :title="log.model"
+	                >
+	                  {{ log.model }}
+	                </span>
+	                <div
+	                  v-if="log.group_id || log.account_id"
+	                  class="flex flex-wrap items-center gap-2 font-mono text-[10px] font-semibold text-gray-400 dark:text-dark-500"
+	                >
+	                  <span v-if="log.group_id">{{ t('admin.ops.errorLog.grp') }} {{ log.group_id }}</span>
+	                  <span v-if="log.account_id">{{ t('admin.ops.errorLog.acc') }} {{ log.account_id }}</span>
+	                </div>
+	              </div>
+	            </td>
+
+            <!-- Status & Severity -->
+            <td class="px-6 py-4">
+              <div class="flex flex-wrap items-center gap-2">
+                <span
+                  :class="[
+                    'inline-flex items-center rounded-lg px-2 py-1 text-xs font-black ring-1 ring-inset shadow-sm',
+                    getStatusClass(log.status_code)
+                  ]"
+                >
+                  {{ log.status_code }}
+                </span>
+                <span
+                  v-if="log.severity"
+                  :class="['rounded-md px-2 py-0.5 text-[10px] font-black shadow-sm', getSeverityClass(log.severity)]"
+                >
+                  {{ log.severity }}
+                </span>
+              </div>
+            </td>
+
+            <!-- Message -->
+            <td class="px-6 py-4">
+              <div class="max-w-md lg:max-w-2xl">
+                <p class="truncate text-xs font-semibold text-gray-700 dark:text-gray-300" :title="log.message">
+                  {{ formatSmartMessage(log.message) || '-' }}
+                </p>
+                <div class="mt-1.5 flex flex-wrap gap-x-3 gap-y-1">
+                  <div v-if="log.phase" class="flex items-center gap-1">
+                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
+                    <span class="text-[9px] font-black uppercase tracking-tighter text-gray-400">{{ log.phase }}</span>
+                  </div>
+                  <div v-if="log.client_ip" class="flex items-center gap-1">
+                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
+                    <span class="text-[9px] font-mono font-bold text-gray-400">{{ log.client_ip }}</span>
+                  </div>
+                </div>
+              </div>
+            </td>
+
+            <!-- Latency -->
+            <td class="px-6 py-4 text-right">
+              <div class="flex flex-col items-end">
+                <span class="font-mono text-xs font-black" :class="getLatencyClass(log.latency_ms ?? null)">
+                  {{ log.latency_ms != null ? Math.round(log.latency_ms) + 'ms' : '--' }}
+                </span>
+              </div>
+            </td>
+
+            <!-- Actions -->
+            <td class="px-6 py-4 text-right" @click.stop>
+              <button type="button" class="btn btn-secondary btn-sm" @click="emit('openErrorDetail', log.id)">
+                {{ t('admin.ops.errorLog.details') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <Pagination
+      v-if="total > 0"
+      :total="total"
+      :page="page"
+      :page-size="pageSize"
+      :page-size-options="[10, 20, 50, 100, 200, 500]"
+      @update:page="emit('update:page', $event)"
+      @update:pageSize="emit('update:pageSize', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import Pagination from '@/components/common/Pagination.vue'
+import type { OpsErrorLog } from '@/api/admin/ops'
+import { getSeverityClass, formatDateTime } from '../utils/opsFormatters'
+
+const { t } = useI18n()
+
+interface Props {
+  rows: OpsErrorLog[]
+  total: number
+  loading: boolean
+  page: number
+  pageSize: number
+}
+
+interface Emits {
+  (e: 'openErrorDetail', id: number): void
+  (e: 'update:page', value: number): void
+  (e: 'update:pageSize', value: number): void
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+function getStatusClass(code: number): string {
+  if (code >= 500) return 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-500/30'
+  if (code === 429) return 'bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400 dark:ring-purple-500/30'
+  if (code >= 400) return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-500/30'
+  return 'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-900/30 dark:text-gray-400 dark:ring-gray-500/30'
+}
+
+function getLatencyClass(latency: number | null): string {
+  if (!latency) return 'text-gray-400'
+  if (latency > 10000) return 'text-red-600 font-black'
+  if (latency > 5000) return 'text-red-500 font-bold'
+  if (latency > 2000) return 'text-orange-500 font-medium'
+  return 'text-gray-600 dark:text-gray-400'
+}
+
+function formatSmartMessage(msg: string): string {
+  if (!msg) return ''
+
+  if (msg.startsWith('{') || msg.startsWith('[')) {
+    try {
+      const obj = JSON.parse(msg)
+      if (obj?.error?.message) return String(obj.error.message)
+      if (obj?.message) return String(obj.message)
+      if (obj?.detail) return String(obj.detail)
+      if (typeof obj === 'object') return JSON.stringify(obj).substring(0, 150)
+    } catch {
+      // ignore parse error
+    }
+  }
+
+  if (msg.includes('context deadline exceeded')) return 'context deadline exceeded'
+  if (msg.includes('connection refused')) return 'connection refused'
+  if (msg.toLowerCase().includes('rate limit')) return 'rate limit'
+
+  return msg.length > 200 ? msg.substring(0, 200) + '...' : msg
+}
+</script>

frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  Filler,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip
+} from 'chart.js'
+import { Line } from 'vue-chartjs'
+import type { OpsErrorTrendPoint } from '@/api/admin/ops'
+import type { ChartState } from '../types'
+import { formatHistoryLabel, sumNumbers } from '../utils/opsFormatters'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, Filler)
+
+interface Props {
+  points: OpsErrorTrendPoint[]
+  loading: boolean
+  timeRange: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'openRequestErrors'): void
+  (e: 'openUpstreamErrors'): void
+}>()
+const { t } = useI18n()
+
+const isDarkMode = computed(() => document.documentElement.classList.contains('dark'))
+const colors = computed(() => ({
+  red: '#ef4444',
+  redAlpha: '#ef444420',
+  purple: '#8b5cf6',
+  purpleAlpha: '#8b5cf620',
+  gray: '#9ca3af',
+  grid: isDarkMode.value ? '#374151' : '#f3f4f6',
+  text: isDarkMode.value ? '#9ca3af' : '#6b7280'
+}))
+
+const totalErrors = computed(() => sumNumbers(props.points.map((p) => p.error_count_sla ?? 0)))
+
+const chartData = computed(() => {
+  if (!props.points.length || totalErrors.value <= 0) return null
+  return {
+    labels: props.points.map((p) => formatHistoryLabel(p.bucket_start, props.timeRange)),
+    datasets: [
+      {
+        label: t('admin.ops.errorsSla'),
+        data: props.points.map((p) => p.error_count_sla ?? 0),
+        borderColor: colors.value.red,
+        backgroundColor: colors.value.redAlpha,
+        fill: true,
+        tension: 0.35,
+        pointRadius: 0,
+        pointHitRadius: 10
+      },
+      {
+        label: t('admin.ops.upstreamExcl429529'),
+        data: props.points.map((p) => p.upstream_error_count_excl_429_529 ?? 0),
+        borderColor: colors.value.purple,
+        backgroundColor: colors.value.purpleAlpha,
+        fill: true,
+        tension: 0.35,
+        pointRadius: 0,
+        pointHitRadius: 10
+      },
+      {
+        label: t('admin.ops.businessLimited'),
+        data: props.points.map((p) => p.business_limited_count ?? 0),
+        borderColor: colors.value.gray,
+        backgroundColor: 'transparent',
+        borderDash: [6, 6],
+        fill: false,
+        tension: 0.35,
+        pointRadius: 0,
+        pointHitRadius: 10
+      }
+    ]
+  }
+})
+
+const state = computed<ChartState>(() => {
+  if (chartData.value) return 'ready'
+  if (props.loading) return 'loading'
+  return 'empty'
+})
+
+const options = computed(() => {
+  const c = colors.value
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: { intersect: false, mode: 'index' as const },
+    plugins: {
+      legend: {
+        position: 'top' as const,
+        align: 'end' as const,
+        labels: { color: c.text, usePointStyle: true, boxWidth: 6, font: { size: 10 } }
+      },
+      tooltip: {
+        backgroundColor: isDarkMode.value ? '#1f2937' : '#ffffff',
+        titleColor: isDarkMode.value ? '#f3f4f6' : '#111827',
+        bodyColor: isDarkMode.value ? '#d1d5db' : '#4b5563',
+        borderColor: c.grid,
+        borderWidth: 1,
+        padding: 10,
+        displayColors: true
+      }
+    },
+    scales: {
+      x: {
+        type: 'category' as const,
+        grid: { display: false },
+        ticks: {
+          color: c.text,
+          font: { size: 10 },
+          maxTicksLimit: 8,
+          autoSkip: true,
+          autoSkipPadding: 10
+        }
+      },
+      y: {
+        type: 'linear' as const,
+        display: true,
+        position: 'left' as const,
+        grid: { color: c.grid, borderDash: [4, 4] },
+        ticks: { color: c.text, font: { size: 10 }, precision: 0 }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex shrink-0 items-center justify-between">
+      <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
+        <svg class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
+          />
+        </svg>
+        {{ t('admin.ops.errorTrend') }}
+        <HelpTooltip :content="t('admin.ops.tooltips.errorTrend')" />
+      </h3>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+          :disabled="state !== 'ready'"
+          @click="emit('openRequestErrors')"
+        >
+          {{ t('admin.ops.errorDetails.requestErrors') }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+          :disabled="state !== 'ready'"
+          @click="emit('openUpstreamErrors')"
+        >
+          {{ t('admin.ops.errorDetails.upstreamErrors') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1">
+      <Line v-if="state === 'ready' && chartData" :data="chartData" :options="options" />
+      <div v-else class="flex h-full items-center justify-center">
+        <div v-if="state === 'loading'" class="animate-pulse text-sm text-gray-400">{{ t('common.loading') }}</div>
+        <EmptyState v-else :title="t('common.noData')" :description="t('admin.ops.charts.emptyError')" />
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ops/components/OpsLatencyChart.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Chart as ChartJS, BarElement, CategoryScale, Legend, LinearScale, Tooltip } from 'chart.js'
+import { Bar } from 'vue-chartjs'
+import type { OpsLatencyHistogramResponse } from '@/api/admin/ops'
+import type { ChartState } from '../types'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+
+ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend)
+
+interface Props {
+  latencyData: OpsLatencyHistogramResponse | null
+  loading: boolean
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+
+const isDarkMode = computed(() => document.documentElement.classList.contains('dark'))
+const colors = computed(() => ({
+  blue: '#3b82f6',
+  grid: isDarkMode.value ? '#374151' : '#f3f4f6',
+  text: isDarkMode.value ? '#9ca3af' : '#6b7280'
+}))
+
+const hasData = computed(() => (props.latencyData?.total_requests ?? 0) > 0)
+
+const state = computed<ChartState>(() => {
+  if (hasData.value) return 'ready'
+  if (props.loading) return 'loading'
+  return 'empty'
+})
+
+const chartData = computed(() => {
+  if (!props.latencyData || !hasData.value) return null
+  const c = colors.value
+  return {
+    labels: props.latencyData.buckets.map((b) => b.range),
+    datasets: [
+      {
+        label: t('admin.ops.requests'),
+        data: props.latencyData.buckets.map((b) => b.count),
+        backgroundColor: c.blue,
+        borderRadius: 4,
+        barPercentage: 0.6
+      }
+    ]
+  }
+})
+
+const options = computed(() => {
+  const c = colors.value
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false }
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        ticks: { color: c.text, font: { size: 10 } }
+      },
+      y: {
+        beginAtZero: true,
+        grid: { color: c.grid, borderDash: [4, 4] },
+        ticks: { color: c.text, font: { size: 10 } }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex items-center justify-between">
+      <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
+        <svg class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        {{ t('admin.ops.latencyHistogram') }}
+        <HelpTooltip :content="t('admin.ops.tooltips.latencyHistogram')" />
+      </h3>
+    </div>
+
+    <div class="min-h-0 flex-1">
+      <Bar v-if="state === 'ready' && chartData" :data="chartData" :options="options" />
+      <div v-else class="flex h-full items-center justify-center">
+        <div v-if="state === 'loading'" class="animate-pulse text-sm text-gray-400">{{ t('common.loading') }}</div>
+        <EmptyState v-else :title="t('common.noData')" :description="t('admin.ops.charts.emptyRequest')" />
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue

+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { onKeyStroke } from '@vueuse/core'
+import Pagination from '@/components/common/Pagination.vue'
+import { useClipboard } from '@/composables/useClipboard'
+import { useAppStore } from '@/stores'
+import { opsAPI, type OpsRequestDetailsParams, type OpsRequestDetail } from '@/api/admin/ops'
+import { parseTimeRangeMinutes, formatDateTime } from '../utils/opsFormatters'
+
+export interface OpsRequestDetailsPreset {
+  title: string
+  kind?: OpsRequestDetailsParams['kind']
+  sort?: OpsRequestDetailsParams['sort']
+  min_duration_ms?: number
+  max_duration_ms?: number
+}
+
+interface Props {
+  modelValue: boolean
+  timeRange: string
+  preset: OpsRequestDetailsPreset
+  platform?: string
+  groupId?: number | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'openErrorDetail', errorId: number): void
+}>()
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { copyToClipboard } = useClipboard()
+
+const loading = ref(false)
+const items = ref<OpsRequestDetail[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(50)
+
+const close = () => emit('update:modelValue', false)
+
+onKeyStroke('Escape', () => {
+  if (props.modelValue) close()
+})
+
+const handleOverlayClick = (e: MouseEvent) => {
+  if (e.target === e.currentTarget) close()
+}
+
+const rangeLabel = computed(() => {
+  const minutes = parseTimeRangeMinutes(props.timeRange)
+  if (minutes >= 60) return t('admin.ops.requestDetails.rangeHours', { n: Math.round(minutes / 60) })
+  return t('admin.ops.requestDetails.rangeMinutes', { n: minutes })
+})
+
+function buildTimeParams(): Pick<OpsRequestDetailsParams, 'start_time' | 'end_time'> {
+  const minutes = parseTimeRangeMinutes(props.timeRange)
+  const endTime = new Date()
+  const startTime = new Date(endTime.getTime() - minutes * 60 * 1000)
+  return {
+    start_time: startTime.toISOString(),
+    end_time: endTime.toISOString()
+  }
+}
+
+const fetchData = async () => {
+  if (!props.modelValue) return
+  loading.value = true
+  try {
+    const params: OpsRequestDetailsParams = {
+      ...buildTimeParams(),
+      page: page.value,
+      page_size: pageSize.value,
+      kind: props.preset.kind ?? 'all',
+      sort: props.preset.sort ?? 'created_at_desc'
+    }
+
+    const platform = (props.platform || '').trim()
+    if (platform) params.platform = platform
+    if (typeof props.groupId === 'number' && props.groupId > 0) params.group_id = props.groupId
+
+    if (typeof props.preset.min_duration_ms === 'number') params.min_duration_ms = props.preset.min_duration_ms
+    if (typeof props.preset.max_duration_ms === 'number') params.max_duration_ms = props.preset.max_duration_ms
+
+    const res = await opsAPI.listRequestDetails(params)
+    items.value = res.items || []
+    total.value = res.total || 0
+  } catch (e: any) {
+    console.error('[OpsRequestDetailsModal] Failed to fetch request details', e)
+    appStore.showError(e?.message || t('admin.ops.requestDetails.failedToLoad'))
+    items.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      page.value = 1
+      fetchData()
+    }
+  }
+)
+
+watch(
+  () => [
+    props.timeRange,
+    props.platform,
+    props.groupId,
+    props.preset.kind,
+    props.preset.sort,
+    props.preset.min_duration_ms,
+    props.preset.max_duration_ms
+  ],
+  () => {
+    if (!props.modelValue) return
+    page.value = 1
+    fetchData()
+  }
+)
+
+function handlePageChange(next: number) {
+  page.value = next
+  fetchData()
+}
+
+function handlePageSizeChange(next: number) {
+  pageSize.value = next
+  page.value = 1
+  fetchData()
+}
+
+async function handleCopyRequestId(requestId: string) {
+  const ok = await copyToClipboard(requestId, t('admin.ops.requestDetails.requestIdCopied'))
+  if (ok) return
+  // `useClipboard` already shows toast on failure; this keeps UX consistent with older ops modal.
+  appStore.showWarning(t('admin.ops.requestDetails.copyFailed'))
+}
+
+function openErrorDetail(errorId: number | null | undefined) {
+  if (!errorId) return
+  close()
+  emit('openErrorDetail', errorId)
+}
+
+const kindBadgeClass = (kind: string) => {
+  if (kind === 'error') return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+  return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" @click="handleOverlayClick">
+      <div class="relative max-h-[90vh] w-full max-w-5xl overflow-y-auto rounded-2xl bg-white shadow-2xl dark:bg-dark-800" @click.stop>
+        <!-- Header -->
+        <div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4 dark:border-dark-700 dark:bg-dark-800">
+          <div>
+            <div class="text-sm font-bold text-gray-900 dark:text-white">
+              {{ props.preset.title || t('admin.ops.requestDetails.title') }}
+            </div>
+            <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.ops.requestDetails.rangeLabel', { range: rangeLabel }) }}
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <button
+              type="button"
+              class="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-bold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+              @click="fetchData"
+            >
+              {{ t('common.refresh') }}
+            </button>
+            <button
+              type="button"
+              class="rounded-lg bg-gray-100 p-2 text-gray-600 hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600"
+              @click="close"
+              :title="t('common.close')"
+            >
+              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading" class="flex items-center justify-center py-16">
+          <div class="flex flex-col items-center gap-3">
+            <svg class="h-8 w-8 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('common.loading') }}</span>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <div v-else class="p-6">
+          <div v-if="items.length === 0" class="rounded-xl border border-dashed border-gray-200 p-10 text-center dark:border-dark-700">
+            <div class="text-sm font-medium text-gray-600 dark:text-gray-300">{{ t('admin.ops.requestDetails.empty') }}</div>
+            <div class="mt-1 text-xs text-gray-400">{{ t('admin.ops.requestDetails.emptyHint') }}</div>
+          </div>
+
+          <div v-else class="overflow-hidden rounded-xl border border-gray-200 dark:border-dark-700">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+                <thead class="bg-gray-50 dark:bg-dark-900">
+                  <tr>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.time') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.kind') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.platform') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.model') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.duration') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.status') }}
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.requestId') }}
+                    </th>
+                    <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      {{ t('admin.ops.requestDetails.table.actions') }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-800">
+                  <tr v-for="(row, idx) in items" :key="idx" class="hover:bg-gray-50 dark:hover:bg-dark-700/50">
+                    <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
+                      {{ formatDateTime(row.created_at) }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3">
+                      <span class="rounded-full px-2 py-1 text-[10px] font-bold" :class="kindBadgeClass(row.kind)">
+                        {{ row.kind === 'error' ? t('admin.ops.requestDetails.kind.error') : t('admin.ops.requestDetails.kind.success') }}
+                      </span>
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-200">
+                      {{ (row.platform || 'unknown').toUpperCase() }}
+                    </td>
+                    <td class="max-w-[240px] truncate px-4 py-3 text-xs text-gray-600 dark:text-gray-300" :title="row.model || ''">
+                      {{ row.model || '-' }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
+                      {{ typeof row.duration_ms === 'number' ? `${row.duration_ms} ms` : '-' }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
+                      {{ row.status_code ?? '-' }}
+                    </td>
+                    <td class="px-4 py-3">
+                      <div v-if="row.request_id" class="flex items-center gap-2">
+                        <span class="max-w-[220px] truncate font-mono text-[11px] text-gray-700 dark:text-gray-200" :title="row.request_id">
+                          {{ row.request_id }}
+                        </span>
+                        <button
+                          class="rounded-md bg-gray-100 px-2 py-1 text-[10px] font-bold text-gray-600 hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
+                          @click="handleCopyRequestId(row.request_id)"
+                        >
+                          {{ t('admin.ops.requestDetails.copy') }}
+                        </button>
+                      </div>
+                      <span v-else class="text-xs text-gray-400">-</span>
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-right">
+                      <button
+                        v-if="row.kind === 'error' && row.error_id"
+                        class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-bold text-red-600 hover:bg-red-100 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
+                        @click="openErrorDetail(row.error_id)"
+                      >
+                        {{ t('admin.ops.requestDetails.viewError') }}
+                      </button>
+                      <span v-else class="text-xs text-gray-400">-</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <Pagination
+              :total="total"
+              :page="page"
+              :page-size="pageSize"
+              @update:page="handlePageChange"
+              @update:pageSize="handlePageSizeChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue

+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Chart as ChartJS, CategoryScale, Filler, Legend, LineElement, LinearScale, PointElement, Title, Tooltip } from 'chart.js'
+import { Line } from 'vue-chartjs'
+import type { ChartComponentRef } from 'vue-chartjs'
+import type { OpsThroughputGroupBreakdownItem, OpsThroughputPlatformBreakdownItem, OpsThroughputTrendPoint } from '@/api/admin/ops'
+import type { ChartState } from '../types'
+import { formatHistoryLabel, sumNumbers } from '../utils/opsFormatters'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+import { formatNumber } from '@/utils/format'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, Filler)
+
+interface Props {
+  points: OpsThroughputTrendPoint[]
+  loading: boolean
+  timeRange: string
+  byPlatform?: OpsThroughputPlatformBreakdownItem[]
+  topGroups?: OpsThroughputGroupBreakdownItem[]
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+const emit = defineEmits<{
+  (e: 'selectPlatform', platform: string): void
+  (e: 'selectGroup', groupId: number): void
+  (e: 'openDetails'): void
+}>()
+
+const throughputChartRef = ref<ChartComponentRef | null>(null)
+watch(
+  () => props.timeRange,
+  () => {
+    setTimeout(() => {
+      const chart: any = throughputChartRef.value?.chart
+      if (chart && typeof chart.resetZoom === 'function') {
+        chart.resetZoom()
+      }
+    }, 100)
+  }
+)
+
+const isDarkMode = computed(() => document.documentElement.classList.contains('dark'))
+const colors = computed(() => ({
+  blue: '#3b82f6',
+  blueAlpha: '#3b82f620',
+  green: '#10b981',
+  greenAlpha: '#10b98120',
+  grid: isDarkMode.value ? '#374151' : '#f3f4f6',
+  text: isDarkMode.value ? '#9ca3af' : '#6b7280'
+}))
+
+const totalRequests = computed(() => sumNumbers(props.points.map((p) => p.request_count)))
+
+const chartData = computed(() => {
+  if (!props.points.length || totalRequests.value <= 0) return null
+  return {
+    labels: props.points.map((p) => formatHistoryLabel(p.bucket_start, props.timeRange)),
+    datasets: [
+      {
+        label: t('admin.ops.qps'),
+        data: props.points.map((p) => p.qps ?? 0),
+        borderColor: colors.value.blue,
+        backgroundColor: colors.value.blueAlpha,
+        fill: true,
+        tension: 0.4,
+        pointRadius: 0,
+        pointHitRadius: 10
+      },
+      {
+        label: t('admin.ops.tpsK'),
+        data: props.points.map((p) => (p.tps ?? 0) / 1000),
+        borderColor: colors.value.green,
+        backgroundColor: colors.value.greenAlpha,
+        fill: true,
+        tension: 0.4,
+        pointRadius: 0,
+        pointHitRadius: 10,
+        yAxisID: 'y1'
+      }
+    ]
+  }
+})
+
+const state = computed<ChartState>(() => {
+  if (chartData.value) return 'ready'
+  if (props.loading) return 'loading'
+  return 'empty'
+})
+
+const options = computed(() => {
+  const c = colors.value
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: { intersect: false, mode: 'index' as const },
+    plugins: {
+      legend: {
+        position: 'top' as const,
+        align: 'end' as const,
+        labels: { color: c.text, usePointStyle: true, boxWidth: 6, font: { size: 10 } }
+      },
+      tooltip: {
+        backgroundColor: isDarkMode.value ? '#1f2937' : '#ffffff',
+        titleColor: isDarkMode.value ? '#f3f4f6' : '#111827',
+        bodyColor: isDarkMode.value ? '#d1d5db' : '#4b5563',
+        borderColor: c.grid,
+        borderWidth: 1,
+        padding: 10,
+        displayColors: true,
+        callbacks: {
+          label: (context: any) => {
+            let label = context.dataset.label || ''
+            if (label) label += ': '
+            if (context.raw !== null) label += context.parsed.y.toFixed(1)
+            return label
+          }
+        }
+      },
+      // Optional: if chartjs-plugin-zoom is installed, these options will enable zoom/pan.
+      zoom: {
+        pan: { enabled: true, mode: 'x' as const, modifierKey: 'ctrl' as const },
+        zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'x' as const }
+      }
+    },
+    scales: {
+      x: {
+        type: 'category' as const,
+        grid: { display: false },
+        ticks: {
+          color: c.text,
+          font: { size: 10 },
+          maxTicksLimit: 8,
+          autoSkip: true,
+          autoSkipPadding: 10
+        }
+      },
+      y: {
+        type: 'linear' as const,
+        display: true,
+        position: 'left' as const,
+        grid: { color: c.grid, borderDash: [4, 4] },
+        ticks: { color: c.text, font: { size: 10 } }
+      },
+      y1: {
+        type: 'linear' as const,
+        display: true,
+        position: 'right' as const,
+        grid: { display: false },
+        ticks: { color: c.green, font: { size: 10 } }
+      }
+    }
+  }
+})
+
+function resetZoom() {
+  const chart: any = throughputChartRef.value?.chart
+  if (chart && typeof chart.resetZoom === 'function') chart.resetZoom()
+}
+
+function downloadChart() {
+  const chart: any = throughputChartRef.value?.chart
+  if (!chart || typeof chart.toBase64Image !== 'function') return
+  const url = chart.toBase64Image('image/png', 1)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `ops-throughput-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.png`
+  a.click()
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex shrink-0 items-center justify-between">
+      <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
+        <svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+        </svg>
+        {{ t('admin.ops.throughputTrend') }}
+        <HelpTooltip :content="t('admin.ops.tooltips.throughputTrend')" />
+      </h3>
+      <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-blue-500"></span>{{ t('admin.ops.qps') }}</span>
+        <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-green-500"></span>{{ t('admin.ops.tpsK') }}</span>
+        <button
+          type="button"
+          class="ml-2 inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+          :disabled="state !== 'ready'"
+          :title="t('admin.ops.requestDetails.title')"
+          @click="emit('openDetails')"
+        >
+          {{ t('admin.ops.requestDetails.details') }}
+        </button>
+        <button
+          type="button"
+          class="ml-2 inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+          :disabled="state !== 'ready'"
+          :title="t('admin.ops.charts.resetZoomHint')"
+          @click="resetZoom"
+        >
+          {{ t('admin.ops.charts.resetZoom') }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+          :disabled="state !== 'ready'"
+          :title="t('admin.ops.charts.downloadChartHint')"
+          @click="downloadChart"
+        >
+          {{ t('admin.ops.charts.downloadChart') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Drilldown chips (baseline interaction: click to set global filter) -->
+    <div v-if="(props.topGroups?.length ?? 0) > 0" class="mb-3 flex flex-wrap gap-2">
+      <button
+        v-for="g in props.topGroups"
+        :key="g.group_id"
+        type="button"
+        class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-1 text-[11px] font-semibold text-gray-700 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-200 dark:hover:bg-dark-800"
+        @click="emit('selectGroup', g.group_id)"
+      >
+        <span class="max-w-[180px] truncate">{{ g.group_name || `#${g.group_id}` }}</span>
+        <span class="text-gray-400 dark:text-gray-500">{{ formatNumber(g.request_count) }}</span>
+      </button>
+    </div>
+
+    <div v-else-if="(props.byPlatform?.length ?? 0) > 0" class="mb-3 flex flex-wrap gap-2">
+      <button
+        v-for="p in props.byPlatform"
+        :key="p.platform"
+        type="button"
+        class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-1 text-[11px] font-semibold text-gray-700 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-200 dark:hover:bg-dark-800"
+        @click="emit('selectPlatform', p.platform)"
+      >
+        <span class="uppercase">{{ p.platform }}</span>
+        <span class="text-gray-400 dark:text-gray-500">{{ formatNumber(p.request_count) }}</span>
+      </button>
+    </div>
+
+    <div class="min-h-0 flex-1">
+      <Line v-if="state === 'ready' && chartData" ref="throughputChartRef" :data="chartData" :options="options" />
+      <div v-else class="flex h-full items-center justify-center">
+        <div v-if="state === 'loading'" class="animate-pulse text-sm text-gray-400">{{ t('common.loading') }}</div>
+        <EmptyState v-else :title="t('common.noData')" :description="t('admin.ops.charts.emptyRequest')" />
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ops/types.ts

+// Ops 前端视图层的共享类型（与后端 DTO 解耦）。
+
+export type ChartState = 'loading' | 'empty' | 'ready'
+
+// Re-export ops alert/settings types so view components can import from a single place
+// while keeping the API contract centralized in `@/api/admin/ops`.
+export type {
+  AlertRule,
+  AlertEvent,
+  AlertSeverity,
+  ThresholdMode,
+  MetricType,
+  Operator,
+  EmailNotificationConfig,
+  OpsDistributedLockSettings,
+  OpsAlertRuntimeSettings
+} from '@/api/admin/ops'