feat(monitor): admin channel monitor MVP with SSRF protection and batch aggregation

新增 admin「渠道监控」模块（参考 BingZi-233/check-cx），独立于现有 Channel 体系。
admin 配置 + 后台定时调用上游 LLM chat completions 健康检查 + 所有登录用户只读可见。

后端：
- ent: channel_monitor + channel_monitor_history（AES-256-GCM 加密 api_key）
- service 按职责拆分：service/aggregator/validate/checker/runner/ssrf
- provider strategy map 替代 switch（openai/anthropic/gemini）
- repository batch 聚合（ListLatestForMonitorIDs + ComputeAvailabilityForMonitors）消除 N+1
- runner: ticker(5s) + pond worker pool(5) + inFlight 防并发 + TrySubmit 防雪崩
  + 凌晨 3 点 cron 清理 30 天历史
- SSRF 防护：强制 https + 私网/loopback/云元数据 IP 拒绝（127/8、10/8、172.16/12、
  192.168/16、169.254/16、100.64/10、::1、fc00::/7、fe80::/10）+ DialContext
  在 socket 层防 DNS rebinding
- API key sanitize：擦除 url.Error 与上游响应 body 中的 sk-/sk-ant-/AIza/JWT 模式
- APIKeyDecryptFailed 标志位 + 单 monitor 路径检测，避免空 key 调用上游

handler:
- admin: CRUD + 手动触发 + 历史接口（api_key 脱敏）
- user: 只读列表 + 状态详情（去除 api_key/endpoint）
- ParseChannelMonitorID 共用 + dto.ChannelMonitorExtraModelStatus 共用

前端：
- 路由 /admin/channels/{pricing,monitor} + /monitor（用户只读）
- AppSidebar 父项 expandOnly 支持
- ChannelMonitorView 拆为 8 个子组件 + ChannelStatusView 拆出 detail dialog
- composables/useChannelMonitorFormat + constants/channelMonitor 共享
- i18n monitorCommon namespace 消除 admin/user 两 view 重复

合规：所有文件符合 CLAUDE.md（Go ≤ 500 行 / Vue ≤ 300 行 / 函数 ≤ 30 行）
CI: go build / gofmt / golangci-lint(0 issues) / make test-unit / pnpm build 全绿

frontend/src/composables/useChannelMonitorFormat.ts

+/**
+ * Shared formatting helpers for channel monitor views (admin + user).
+ *
+ * Centralises:
+ *  - status / provider label + badge class lookups
+ *  - latency / availability / percent number formatting
+ *
+ * i18n keys live under `monitorCommon.*` so admin and user views share the
+ * same translation source.
+ */
+
+import { useI18n } from 'vue-i18n'
+import type { MonitorStatus, Provider } from '@/api/admin/channelMonitor'
+import {
+  PROVIDER_OPENAI,
+  PROVIDER_ANTHROPIC,
+  PROVIDER_GEMINI,
+  STATUS_OPERATIONAL,
+  STATUS_DEGRADED,
+  STATUS_FAILED,
+  STATUS_ERROR,
+} from '@/constants/channelMonitor'
+
+const NEUTRAL_BADGE = 'bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-gray-300'
+
+export interface AvailabilityRow {
+  primary_status: MonitorStatus | ''
+  availability_7d: number | null | undefined
+}
+
+export function useChannelMonitorFormat() {
+  const { t } = useI18n()
+
+  function statusLabel(s: MonitorStatus | ''): string {
+    if (!s) return t('monitorCommon.status.unknown')
+    return t(`monitorCommon.status.${s}`)
+  }
+
+  function statusBadgeClass(s: MonitorStatus | ''): string {
+    switch (s) {
+      case STATUS_OPERATIONAL:
+        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+      case STATUS_DEGRADED:
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
+      case STATUS_FAILED:
+        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+      case STATUS_ERROR:
+      default:
+        return NEUTRAL_BADGE
+    }
+  }
+
+  function providerLabel(p: Provider | string): string {
+    if (p === PROVIDER_OPENAI || p === PROVIDER_ANTHROPIC || p === PROVIDER_GEMINI) {
+      return t(`monitorCommon.providers.${p}`)
+    }
+    return p || '-'
+  }
+
+  function providerBadgeClass(p: Provider | string): string {
+    switch (p) {
+      case PROVIDER_OPENAI:
+        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+      case PROVIDER_ANTHROPIC:
+        return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300'
+      case PROVIDER_GEMINI:
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+      default:
+        return NEUTRAL_BADGE
+    }
+  }
+
+  function formatLatency(ms: number | null | undefined): string {
+    if (ms == null) return t('monitorCommon.latencyEmpty')
+    return String(Math.round(ms))
+  }
+
+  function formatPercent(v: number | null | undefined): string {
+    if (v == null || Number.isNaN(v)) return '-'
+    return `${v.toFixed(2)}%`
+  }
+
+  function formatAvailability(row: AvailabilityRow): string {
+    if (!row.primary_status) return '-'
+    return formatPercent(row.availability_7d)
+  }
+
+  return {
+    statusLabel,
+    statusBadgeClass,
+    providerLabel,
+    providerBadgeClass,
+    formatLatency,
+    formatPercent,
+    formatAvailability,
+  }
+}

frontend/src/constants/channelMonitor.ts

+/**
+ * Channel monitor shared constants.
+ *
+ * Single source of truth for provider/status string values used by both the
+ * admin (`views/admin/ChannelMonitorView.vue`) and user-facing
+ * (`views/user/ChannelStatusView.vue`) screens, plus the shared composable
+ * `useChannelMonitorFormat`.
+ */
+
+import type { Provider, MonitorStatus } from '@/api/admin/channelMonitor'
+
+export const PROVIDER_OPENAI: Provider = 'openai'
+export const PROVIDER_ANTHROPIC: Provider = 'anthropic'
+export const PROVIDER_GEMINI: Provider = 'gemini'
+
+export const PROVIDERS: readonly Provider[] = [
+  PROVIDER_OPENAI,
+  PROVIDER_ANTHROPIC,
+  PROVIDER_GEMINI,
+]
+
+export const STATUS_OPERATIONAL: MonitorStatus = 'operational'
+export const STATUS_DEGRADED: MonitorStatus = 'degraded'
+export const STATUS_FAILED: MonitorStatus = 'failed'
+export const STATUS_ERROR: MonitorStatus = 'error'
+
+export const MONITOR_STATUSES: readonly MonitorStatus[] = [
+  STATUS_OPERATIONAL,
+  STATUS_DEGRADED,
+  STATUS_FAILED,
+  STATUS_ERROR,
+]
+
+/** Default polling interval (seconds) for new monitors. */
+export const DEFAULT_INTERVAL_SECONDS = 60

frontend/src/i18n/locales/en.ts

@@ -245,6 +245,7 @@ export default {
   // Common
   common: {
     loading: 'Loading...',
+    submitting: 'Submitting...',
     justNow: 'just now',
     save: 'Save',
     saved: 'Saved successfully',
@@ -363,7 +364,11 @@ export default {
     orderManagement: 'Orders',
     paymentDashboard: 'Payment Dashboard',
     paymentConfig: 'Payment Config',
-    paymentPlans: 'Plans'
+    paymentPlans: 'Plans',
+    channelManagement: 'Channels',
+    channelPricing: 'Channel Pricing',
+    channelMonitor: 'Channel Monitor',
+    channelStatus: 'Channel Status',
   },
 
   // Auth
@@ -846,6 +851,58 @@ export default {
     userAgent: 'User-Agent'
   },
 
+  // Shared keys for channel monitor (admin + user views)
+  monitorCommon: {
+    status: {
+      operational: 'Operational',
+      degraded: 'Degraded',
+      failed: 'Failed',
+      error: 'Error',
+      unknown: '-'
+    },
+    providers: {
+      openai: 'OpenAI',
+      anthropic: 'Anthropic',
+      gemini: 'Gemini'
+    },
+    extraModelsHeader: 'Extra Models',
+    extraModelsEmpty: 'No extra models',
+    latencyEmpty: '-'
+  },
+
+  // Channel Status (user-facing read-only view)
+  channelStatus: {
+    title: 'Channel Status',
+    description: 'Inspect channel availability, latency and recent status',
+    searchPlaceholder: 'Search channels...',
+    allProviders: 'All Providers',
+    loadError: 'Failed to load channel status',
+    detailLoadError: 'Failed to load channel detail',
+    detailTitle: 'Channel Detail',
+    closeDetail: 'Close',
+    columns: {
+      name: 'Name',
+      provider: 'Provider',
+      groupName: 'Group',
+      primaryModel: 'Primary Model',
+      availability7d: '7d Availability',
+      latency: 'Latency (ms)'
+    },
+    detailColumns: {
+      model: 'Model',
+      latestStatus: 'Latest Status',
+      latestLatency: 'Latest Latency (ms)',
+      availability7d: '7d Availability',
+      availability15d: '15d Availability',
+      availability30d: '30d Availability',
+      avgLatency7d: '7d Avg Latency (ms)'
+    },
+    empty: {
+      title: 'No channels available',
+      description: 'No monitored channels have been configured yet.'
+    }
+  },
+
   // Redeem
   redeem: {
     title: 'Redeem Code',
@@ -2014,6 +2071,69 @@ export default {
       }
     },
 
+    // Channel Monitor
+    channelMonitor: {
+      title: 'Channel Monitor',
+      description: 'Monitor channel availability, latency and status',
+      searchPlaceholder: 'Search monitor name...',
+      allProviders: 'All Providers',
+      allStatus: 'All Status',
+      enabledFilter: 'Enabled',
+      onlyEnabled: 'Enabled only',
+      onlyDisabled: 'Disabled only',
+      createButton: 'Create Monitor',
+      createTitle: 'Create Channel Monitor',
+      editTitle: 'Edit Channel Monitor',
+      runNow: 'Run Now',
+      runSuccess: 'Check completed',
+      runFailed: 'Check failed',
+      apiKeyDecryptFailed: 'API Key decryption failed. Please re-edit this monitor with a fresh key.',
+      createSuccess: 'Monitor created',
+      updateSuccess: 'Monitor updated',
+      deleteSuccess: 'Monitor deleted',
+      loadError: 'Failed to load monitors',
+      deleteConfirm: 'Are you sure you want to delete monitor "{name}"? This action cannot be undone.',
+      nameRequired: 'Please enter a monitor name',
+      primaryModelRequired: 'Please enter a primary model',
+      columns: {
+        name: 'Name',
+        provider: 'Provider',
+        primaryModel: 'Primary Model',
+        availability7d: '7d Availability',
+        latency: 'Latency (ms)',
+        enabled: 'Enabled',
+        actions: 'Actions'
+      },
+      form: {
+        name: 'Name',
+        namePlaceholder: 'Enter monitor name',
+        provider: 'Provider',
+        endpoint: 'Endpoint',
+        endpointPlaceholder: 'https://api.example.com',
+        useCurrentDomain: 'Use current service',
+        apiKey: 'API Key',
+        apiKeyPlaceholder: 'Enter API Key',
+        apiKeyEditPlaceholder: 'Leave blank to keep current key',
+        useMyKey: 'Use my key',
+        selectKeyTitle: 'Select my API Key',
+        selectKeyHint: 'Only your active, non-expired keys are listed.',
+        noActiveKey: 'No active API keys available',
+        primaryModel: 'Primary Model',
+        primaryModelPlaceholder: 'gpt-4o-mini',
+        extraModels: 'Extra Models',
+        extraModelsPlaceholder: 'Press Enter to add extra model',
+        groupName: 'Group Name',
+        groupNamePlaceholder: 'Optional, used to group rows in user view',
+        intervalSeconds: 'Interval (seconds)',
+        intervalSecondsHint: 'Range: 15 - 3600 seconds',
+        enabled: 'Enable monitor',
+        kindRequired: 'Please select a provider'
+      },
+      runResultTitle: 'Check Result',
+      noMonitorsYet: 'No monitors yet',
+      createFirstMonitor: 'Create your first monitor to track channel availability'
+    },
+
     // Subscriptions
     subscriptions: {
       title: 'Subscription Management',

frontend/src/i18n/locales/zh.ts

@@ -245,6 +245,7 @@ export default {
   // Common
   common: {
     loading: '加载中...',
+    submitting: '提交中...',
     justNow: '刚刚',
     save: '保存',
     saved: '保存成功',
@@ -363,7 +364,11 @@ export default {
     orderManagement: '订单管理',
     paymentDashboard: '支付概览',
     paymentConfig: '支付配置',
-    paymentPlans: '订阅套餐'
+    paymentPlans: '订阅套餐',
+    channelManagement: '渠道管理',
+    channelPricing: '渠道定价',
+    channelMonitor: '渠道监控',
+    channelStatus: '渠道状态',
   },
 
   // Auth
@@ -850,6 +855,58 @@ export default {
     userAgent: 'User-Agent'
   },
 
+  // Shared keys for channel monitor (admin + user views)
+  monitorCommon: {
+    status: {
+      operational: '正常',
+      degraded: '降级',
+      failed: '失败',
+      error: '错误',
+      unknown: '-'
+    },
+    providers: {
+      openai: 'OpenAI',
+      anthropic: 'Anthropic',
+      gemini: 'Gemini'
+    },
+    extraModelsHeader: '附加模型',
+    extraModelsEmpty: '无附加模型',
+    latencyEmpty: '-'
+  },
+
+  // Channel Status (user-facing read-only view)
+  channelStatus: {
+    title: '渠道状态',
+    description: '查看渠道可用性、延迟和近期状态',
+    searchPlaceholder: '搜索渠道...',
+    allProviders: '全部供应商',
+    loadError: '加载渠道状态失败',
+    detailLoadError: '加载渠道详情失败',
+    detailTitle: '渠道详情',
+    closeDetail: '关闭',
+    columns: {
+      name: '名称',
+      provider: '供应商',
+      groupName: '分组',
+      primaryModel: '主模型',
+      availability7d: '7 天可用率',
+      latency: '延迟 (ms)'
+    },
+    detailColumns: {
+      model: '模型',
+      latestStatus: '最新状态',
+      latestLatency: '最新延迟 (ms)',
+      availability7d: '7 天可用率',
+      availability15d: '15 天可用率',
+      availability30d: '30 天可用率',
+      avgLatency7d: '7 天平均延迟 (ms)'
+    },
+    empty: {
+      title: '暂无可显示的渠道',
+      description: '管理员尚未配置可监控的渠道。'
+    }
+  },
+
   // Redeem
   redeem: {
     title: '兑换码',
@@ -2093,6 +2150,69 @@ export default {
       }
     },
 
+    // Channel Monitor
+    channelMonitor: {
+      title: '渠道监控',
+      description: '监测各渠道的可用性、延迟和状态',
+      searchPlaceholder: '搜索监控名称...',
+      allProviders: '全部供应商',
+      allStatus: '全部状态',
+      enabledFilter: '启用状态',
+      onlyEnabled: '仅启用',
+      onlyDisabled: '仅禁用',
+      createButton: '新增监控',
+      createTitle: '新增渠道监控',
+      editTitle: '编辑渠道监控',
+      runNow: '立即检测',
+      runSuccess: '检测完成',
+      runFailed: '检测失败',
+      apiKeyDecryptFailed: 'API Key 解密失败，请重新编辑该监控并填入新的 Key',
+      createSuccess: '监控创建成功',
+      updateSuccess: '监控更新成功',
+      deleteSuccess: '监控删除成功',
+      loadError: '加载监控列表失败',
+      deleteConfirm: '确定要删除监控「{name}」吗？此操作不可撤销。',
+      nameRequired: '请输入监控名称',
+      primaryModelRequired: '请输入主模型',
+      columns: {
+        name: '名称',
+        provider: '供应商',
+        primaryModel: '主模型',
+        availability7d: '7 天可用率',
+        latency: '延迟 (ms)',
+        enabled: '启用',
+        actions: '操作'
+      },
+      form: {
+        name: '名称',
+        namePlaceholder: '输入监控名称',
+        provider: '供应商',
+        endpoint: '上游地址',
+        endpointPlaceholder: 'https://api.example.com',
+        useCurrentDomain: '使用当前服务',
+        apiKey: 'API Key',
+        apiKeyPlaceholder: '请输入 API Key',
+        apiKeyEditPlaceholder: '留空表示不修改',
+        useMyKey: '使用我的 Key',
+        selectKeyTitle: '选择我的 API Key',
+        selectKeyHint: '仅显示当前账号下处于「启用」状态且未过期的 Key。',
+        noActiveKey: '没有可用的启用状态 Key',
+        primaryModel: '主模型',
+        primaryModelPlaceholder: 'gpt-4o-mini',
+        extraModels: '附加模型',
+        extraModelsPlaceholder: '回车添加附加模型',
+        groupName: '分组名称',
+        groupNamePlaceholder: '可选，用于在用户视图中聚合显示',
+        intervalSeconds: '检测间隔 (秒)',
+        intervalSecondsHint: '范围：15 - 3600 秒',
+        enabled: '启用监控',
+        kindRequired: '请选择供应商'
+      },
+      runResultTitle: '检测结果',
+      noMonitorsYet: '暂无监控',
+      createFirstMonitor: '创建第一个监控来跟踪渠道可用性'
+    },
+
     // Subscriptions Management
     subscriptions: {
       title: '订阅管理',

frontend/src/router/index.ts

@@ -360,6 +360,10 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/admin/channels',
+    redirect: '/admin/channels/pricing'
+  },
+  {
+    path: '/admin/channels/pricing',
     name: 'AdminChannels',
     component: () => import('@/views/admin/ChannelsView.vue'),
     meta: {
@@ -370,6 +374,29 @@ const routes: RouteRecordRaw[] = [
       descriptionKey: 'admin.channels.description'
     }
   },
+  {
+    path: '/admin/channels/monitor',
+    name: 'AdminChannelMonitor',
+    component: () => import('@/views/admin/ChannelMonitorView.vue'),
+    meta: {
+      requiresAuth: true,
+      requiresAdmin: true,
+      title: 'Channel Monitor',
+      titleKey: 'admin.channelMonitor.title',
+      descriptionKey: 'admin.channelMonitor.description'
+    }
+  },
+  {
+    path: '/monitor',
+    name: 'ChannelStatus',
+    component: () => import('@/views/user/ChannelStatusView.vue'),
+    meta: {
+      requiresAuth: true,
+      requiresAdmin: false,
+      title: 'Channel Status',
+      titleKey: 'nav.channelStatus'
+    }
+  },
   {
     path: '/admin/subscriptions',
     name: 'AdminSubscriptions',

frontend/src/views/admin/ChannelMonitorView.vue

+<template>
+  <AppLayout>
+    <TablePageLayout>
+      <template #filters>
+        <MonitorFiltersBar
+          v-model:search="searchQuery"
+          v-model:provider="providerFilter"
+          v-model:enabled="enabledFilter"
+          :loading="loading"
+          @reload="reload"
+          @create="openCreateDialog"
+          @search-input="handleSearch"
+        />
+      </template>
+
+      <template #table>
+        <DataTable :columns="columns" :data="monitors" :loading="loading">
+          <template #cell-name="{ row, value }">
+            <div class="flex items-center gap-1.5">
+              <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
+              <HelpTooltip v-if="row.api_key_decrypt_failed" :content="t('admin.channelMonitor.apiKeyDecryptFailed')">
+                <Icon name="exclamationTriangle" size="sm" class="text-red-500" />
+              </HelpTooltip>
+            </div>
+          </template>
+
+          <template #cell-provider="{ row }">
+            <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium" :class="providerBadgeClass(row.provider)">
+              {{ providerLabel(row.provider) }}
+            </span>
+          </template>
+
+          <template #cell-primary_model="{ row }">
+            <MonitorPrimaryModelCell :row="row" />
+          </template>
+
+          <template #cell-availability_7d="{ row }">
+            <span class="text-sm text-gray-900 dark:text-gray-100">{{ formatAvailability(row) }}</span>
+          </template>
+
+          <template #cell-latency="{ row }">
+            <span class="text-sm text-gray-900 dark:text-gray-100">{{ formatLatency(row.primary_latency_ms) }}</span>
+          </template>
+
+          <template #cell-enabled="{ row }">
+            <Toggle :modelValue="row.enabled" @update:modelValue="toggleEnabled(row)" />
+          </template>
+
+          <template #cell-actions="{ row }">
+            <MonitorActionsCell
+              :row="row"
+              :running="runningId === row.id"
+              @run="handleRunNow"
+              @edit="openEditDialog"
+              @delete="handleDelete"
+            />
+          </template>
+
+          <template #empty>
+            <EmptyState
+              :title="t('admin.channelMonitor.noMonitorsYet')"
+              :description="t('admin.channelMonitor.createFirstMonitor')"
+              :action-text="t('admin.channelMonitor.createButton')"
+              @action="openCreateDialog"
+            />
+          </template>
+        </DataTable>
+      </template>
+
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="onPageChange"
+          @update:pageSize="onPageSizeChange"
+        />
+      </template>
+    </TablePageLayout>
+
+    <MonitorFormDialog
+      :show="showDialog"
+      :monitor="editing"
+      @close="closeDialog"
+      @saved="reload"
+    />
+
+    <MonitorRunResultDialog
+      :show="showRunResult"
+      :results="runResults"
+      @close="showRunResult = false"
+    />
+
+    <ConfirmDialog
+      :show="showDeleteDialog"
+      :title="t('common.delete')"
+      :message="deleteConfirmMessage"
+      :confirm-text="t('common.delete')"
+      :cancel-text="t('common.cancel')"
+      :danger="true"
+      @confirm="confirmDelete"
+      @cancel="showDeleteDialog = false"
+    />
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { extractApiErrorMessage } from '@/utils/apiError'
+import { adminAPI } from '@/api/admin'
+import type {
+  ChannelMonitor,
+  CheckResult,
+  ListParams,
+  Provider,
+} from '@/api/admin/channelMonitor'
+import type { Column } from '@/components/common/types'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
+import DataTable from '@/components/common/DataTable.vue'
+import Pagination from '@/components/common/Pagination.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import Icon from '@/components/icons/Icon.vue'
+import Toggle from '@/components/common/Toggle.vue'
+import MonitorFiltersBar from '@/components/admin/monitor/MonitorFiltersBar.vue'
+import MonitorFormDialog from '@/components/admin/monitor/MonitorFormDialog.vue'
+import MonitorRunResultDialog from '@/components/admin/monitor/MonitorRunResultDialog.vue'
+import MonitorPrimaryModelCell from '@/components/admin/monitor/MonitorPrimaryModelCell.vue'
+import MonitorActionsCell from '@/components/admin/monitor/MonitorActionsCell.vue'
+import { getPersistedPageSize } from '@/composables/usePersistedPageSize'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const {
+  providerLabel,
+  providerBadgeClass,
+  formatLatency,
+  formatAvailability,
+} = useChannelMonitorFormat()
+
+const monitors = ref<ChannelMonitor[]>([])
+const loading = ref(false)
+const runningId = ref<number | null>(null)
+const searchQuery = ref('')
+const providerFilter = ref<Provider | ''>('')
+const enabledFilter = ref<'' | 'true' | 'false'>('')
+const pagination = reactive({ page: 1, page_size: getPersistedPageSize(), total: 0 })
+
+const showDialog = ref(false)
+const editing = ref<ChannelMonitor | null>(null)
+const showDeleteDialog = ref(false)
+const deleting = ref<ChannelMonitor | null>(null)
+const showRunResult = ref(false)
+const runResults = ref<CheckResult[]>([])
+
+let abortController: AbortController | null = null
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+const columns = computed<Column[]>(() => [
+  { key: 'name', label: t('admin.channelMonitor.columns.name'), sortable: false },
+  { key: 'provider', label: t('admin.channelMonitor.columns.provider'), sortable: false },
+  { key: 'primary_model', label: t('admin.channelMonitor.columns.primaryModel'), sortable: false },
+  { key: 'availability_7d', label: t('admin.channelMonitor.columns.availability7d'), sortable: false },
+  { key: 'latency', label: t('admin.channelMonitor.columns.latency'), sortable: false },
+  { key: 'enabled', label: t('admin.channelMonitor.columns.enabled'), sortable: false },
+  { key: 'actions', label: t('admin.channelMonitor.columns.actions'), sortable: false },
+])
+
+const deleteConfirmMessage = computed(() => {
+  const name = deleting.value?.name || ''
+  return t('admin.channelMonitor.deleteConfirm', { name })
+})
+
+async function reload() {
+  if (abortController) abortController.abort()
+  const ctrl = new AbortController()
+  abortController = ctrl
+  loading.value = true
+  try {
+    const params: ListParams = {
+      page: pagination.page,
+      page_size: pagination.page_size,
+    }
+    if (providerFilter.value) params.provider = providerFilter.value
+    if (enabledFilter.value === 'true') params.enabled = true
+    if (enabledFilter.value === 'false') params.enabled = false
+    if (searchQuery.value.trim()) params.search = searchQuery.value.trim()
+
+    const res = await adminAPI.channelMonitor.list(params, { signal: ctrl.signal })
+    if (ctrl.signal.aborted || abortController !== ctrl) return
+    monitors.value = res.items || []
+    pagination.total = res.total
+  } catch (err: unknown) {
+    const e = err as { name?: string; code?: string }
+    if (e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return
+    appStore.showError(extractApiErrorMessage(err, t('admin.channelMonitor.loadError')))
+  } finally {
+    if (abortController === ctrl) {
+      loading.value = false
+      abortController = null
+    }
+  }
+}
+
+function handleSearch() {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    pagination.page = 1
+    reload()
+  }, 300)
+}
+
+function onPageChange(page: number) {
+  pagination.page = page
+  reload()
+}
+
+function onPageSizeChange(size: number) {
+  pagination.page_size = size
+  pagination.page = 1
+  reload()
+}
+
+function openCreateDialog() {
+  editing.value = null
+  showDialog.value = true
+}
+
+function openEditDialog(row: ChannelMonitor) {
+  editing.value = row
+  showDialog.value = true
+}
+
+function closeDialog() {
+  showDialog.value = false
+  editing.value = null
+}
+
+async function toggleEnabled(row: ChannelMonitor) {
+  const next = !row.enabled
+  try {
+    await adminAPI.channelMonitor.update(row.id, { enabled: next })
+    row.enabled = next
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('common.error')))
+  }
+}
+
+async function handleRunNow(row: ChannelMonitor) {
+  if (runningId.value != null) return
+  runningId.value = row.id
+  try {
+    const res = await adminAPI.channelMonitor.runNow(row.id)
+    runResults.value = res.results || []
+    showRunResult.value = true
+    appStore.showSuccess(t('admin.channelMonitor.runSuccess'))
+    // Refresh row to get latest status from backend
+    void reload()
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('admin.channelMonitor.runFailed')))
+  } finally {
+    runningId.value = null
+  }
+}
+
+function handleDelete(row: ChannelMonitor) {
+  deleting.value = row
+  showDeleteDialog.value = true
+}
+
+async function confirmDelete() {
+  if (!deleting.value) return
+  try {
+    await adminAPI.channelMonitor.del(deleting.value.id)
+    appStore.showSuccess(t('admin.channelMonitor.deleteSuccess'))
+    showDeleteDialog.value = false
+    deleting.value = null
+    reload()
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('common.error')))
+  }
+}
+
+onMounted(reload)
+onUnmounted(() => {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  abortController?.abort()
+})
+</script>

frontend/src/views/user/ChannelStatusView.vue

+<template>
+  <AppLayout>
+    <TablePageLayout>
+      <template #filters>
+        <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <div class="relative w-full sm:w-64">
+              <Icon
+                name="search"
+                size="md"
+                class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+              />
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('channelStatus.searchPlaceholder')"
+                class="input pl-10"
+              />
+            </div>
+
+            <Select
+              v-model="providerFilter"
+              :options="providerFilterOptions"
+              :placeholder="t('channelStatus.allProviders')"
+              class="w-44"
+            />
+          </div>
+
+          <div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
+            <button
+              @click="reload"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <template #table>
+        <DataTable :columns="columns" :data="filteredItems" :loading="loading">
+          <template #cell-name="{ row }">
+            <button
+              @click="openDetail(row)"
+              class="font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+            >
+              {{ row.name }}
+            </button>
+          </template>
+
+          <template #cell-provider="{ row }">
+            <span
+              class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium"
+              :class="providerBadgeClass(row.provider)"
+            >
+              {{ providerLabel(row.provider) }}
+            </span>
+          </template>
+
+          <template #cell-group_name="{ value }">
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{ value || '-' }}</span>
+          </template>
+
+          <template #cell-primary_model="{ row }">
+            <MonitorPrimaryModelCell :row="row" />
+          </template>
+
+          <template #cell-availability_7d="{ row }">
+            <span class="text-sm text-gray-900 dark:text-gray-100">
+              {{ formatAvailability(row) }}
+            </span>
+          </template>
+
+          <template #cell-latency="{ row }">
+            <span class="text-sm text-gray-900 dark:text-gray-100">
+              {{ formatLatency(row.primary_latency_ms) }}
+            </span>
+          </template>
+
+          <template #empty>
+            <EmptyState
+              :title="t('channelStatus.empty.title')"
+              :description="t('channelStatus.empty.description')"
+            />
+          </template>
+        </DataTable>
+      </template>
+    </TablePageLayout>
+
+    <MonitorDetailDialog
+      :show="showDetail"
+      :monitor-id="detailTarget?.id ?? null"
+      :title="detailTitle"
+      @close="closeDetail"
+    />
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { extractApiErrorMessage } from '@/utils/apiError'
+import {
+  list as listChannelMonitorViews,
+  type Provider,
+  type UserMonitorView,
+} from '@/api/channelMonitor'
+import type { Column } from '@/components/common/types'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
+import DataTable from '@/components/common/DataTable.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+import Select from '@/components/common/Select.vue'
+import Icon from '@/components/icons/Icon.vue'
+import MonitorDetailDialog from '@/components/user/MonitorDetailDialog.vue'
+import MonitorPrimaryModelCell from '@/components/user/MonitorPrimaryModelCell.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+import {
+  PROVIDER_OPENAI,
+  PROVIDER_ANTHROPIC,
+  PROVIDER_GEMINI,
+} from '@/constants/channelMonitor'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const {
+  providerLabel,
+  providerBadgeClass,
+  formatLatency,
+  formatAvailability,
+} = useChannelMonitorFormat()
+
+// ── State ──
+const items = ref<UserMonitorView[]>([])
+const loading = ref(false)
+const searchQuery = ref('')
+const providerFilter = ref<Provider | ''>('')
+
+const showDetail = ref(false)
+const detailTarget = ref<UserMonitorView | null>(null)
+
+// ── Options ──
+const providerFilterOptions = computed(() => [
+  { value: '', label: t('channelStatus.allProviders') },
+  { value: PROVIDER_OPENAI, label: providerLabel(PROVIDER_OPENAI) },
+  { value: PROVIDER_ANTHROPIC, label: providerLabel(PROVIDER_ANTHROPIC) },
+  { value: PROVIDER_GEMINI, label: providerLabel(PROVIDER_GEMINI) },
+])
+
+// ── Columns ──
+const columns = computed<Column[]>(() => [
+  { key: 'name', label: t('channelStatus.columns.name'), sortable: false },
+  { key: 'provider', label: t('channelStatus.columns.provider'), sortable: false },
+  { key: 'group_name', label: t('channelStatus.columns.groupName'), sortable: false },
+  { key: 'primary_model', label: t('channelStatus.columns.primaryModel'), sortable: false },
+  { key: 'availability_7d', label: t('channelStatus.columns.availability7d'), sortable: false },
+  { key: 'latency', label: t('channelStatus.columns.latency'), sortable: false },
+])
+
+// ── Filtered data ──
+const filteredItems = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  return items.value.filter(it => {
+    if (providerFilter.value && it.provider !== providerFilter.value) return false
+    if (!q) return true
+    return (
+      it.name.toLowerCase().includes(q) ||
+      (it.group_name || '').toLowerCase().includes(q) ||
+      it.primary_model.toLowerCase().includes(q)
+    )
+  })
+})
+
+const detailTitle = computed(() => {
+  return detailTarget.value?.name || t('channelStatus.detailTitle')
+})
+
+// ── Loaders ──
+async function reload() {
+  loading.value = true
+  try {
+    const res = await listChannelMonitorViews()
+    items.value = res.items || []
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('channelStatus.loadError')))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openDetail(row: UserMonitorView) {
+  detailTarget.value = row
+  showDetail.value = true
+}
+
+function closeDetail() {
+  showDetail.value = false
+  detailTarget.value = null
+}
+
+// ── Lifecycle ──
+onMounted(() => {
+  reload()
+})
+</script>