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 全绿
2026-04-20 20:21:02 +08:00
parent 0b85a8da88
commit 20a4e41872
67 changed files with 14997 additions and 32 deletions
--- a/frontend/src/api/admin/channelMonitor.ts
+++ b/frontend/src/api/admin/channelMonitor.ts
@@ -0,0 +1,190 @@
+/**
+ * Admin Channel Monitor API endpoints
+ * Handles channel monitor (uptime/health) management for administrators
+ */
+
+import { apiClient } from '../client'
+
+export type Provider = 'openai' | 'anthropic' | 'gemini'
+export type MonitorStatus = 'operational' | 'degraded' | 'failed' | 'error'
+
+export interface ChannelMonitor {
+  id: number
+  name: string
+  provider: Provider
+  endpoint: string
+  api_key_masked: string
+  /**
+   * True when the stored encrypted API key cannot be decrypted (e.g. the
+   * encryption key has changed). Admin must re-edit the monitor to provide
+   * a fresh key. Backend skips checks for these monitors.
+   */
+  api_key_decrypt_failed?: boolean
+  primary_model: string
+  extra_models: string[]
+  group_name: string
+  enabled: boolean
+  interval_seconds: number
+  last_checked_at: string | null
+  created_by: number
+  created_at: string
+  updated_at: string
+  /** Latest status of the primary model (empty when no history yet) */
+  primary_status: MonitorStatus | ''
+  /** Latest latency of the primary model in ms (null when no history yet) */
+  primary_latency_ms: number | null
+  /** Primary model 7-day availability percentage (0-100) */
+  availability_7d: number
+  /** Latest status per extra model (used for hover tooltip) */
+  extra_models_status: ExtraModelStatus[]
+}
+
+export interface ExtraModelStatus {
+  model: string
+  status: MonitorStatus | ''
+  latency_ms: number | null
+}
+
+export interface ListParams {
+  page?: number
+  page_size?: number
+  provider?: Provider
+  enabled?: boolean
+  search?: string
+}
+
+export interface ListResponse {
+  items: ChannelMonitor[]
+  total: number
+  page: number
+  page_size: number
+  pages: number
+}
+
+export interface CreateParams {
+  name: string
+  provider: Provider
+  endpoint: string
+  api_key: string
+  primary_model: string
+  extra_models?: string[]
+  group_name?: string
+  enabled?: boolean
+  interval_seconds: number
+}
+
+// Update request: api_key empty string means "do not modify"
+export type UpdateParams = Partial<CreateParams>
+
+export interface CheckResult {
+  model: string
+  status: MonitorStatus
+  latency_ms: number | null
+  ping_latency_ms: number | null
+  message: string
+  checked_at: string
+}
+
+export interface RunNowResponse {
+  results: CheckResult[]
+}
+
+export interface HistoryItem {
+  id: number
+  model: string
+  status: MonitorStatus
+  latency_ms: number | null
+  ping_latency_ms: number | null
+  message: string
+  checked_at: string
+}
+
+export interface HistoryParams {
+  model?: string
+  limit?: number
+}
+
+export interface HistoryResponse {
+  items: HistoryItem[]
+}
+
+/**
+ * List channel monitors with pagination and filters
+ */
+export async function list(
+  params: ListParams = {},
+  options?: { signal?: AbortSignal }
+): Promise<ListResponse> {
+  const { data } = await apiClient.get<ListResponse>('/admin/channel-monitors', {
+    params,
+    signal: options?.signal,
+  })
+  return data
+}
+
+/**
+ * Get a channel monitor by ID
+ */
+export async function get(id: number): Promise<ChannelMonitor> {
+  const { data } = await apiClient.get<ChannelMonitor>(`/admin/channel-monitors/${id}`)
+  return data
+}
+
+/**
+ * Create a new channel monitor
+ */
+export async function create(params: CreateParams): Promise<ChannelMonitor> {
+  const { data } = await apiClient.post<ChannelMonitor>('/admin/channel-monitors', params)
+  return data
+}
+
+/**
+ * Update an existing channel monitor.
+ * api_key field: empty string means "do not modify".
+ */
+export async function update(id: number, params: UpdateParams): Promise<ChannelMonitor> {
+  const { data } = await apiClient.put<ChannelMonitor>(`/admin/channel-monitors/${id}`, params)
+  return data
+}
+
+/**
+ * Delete a channel monitor
+ */
+export async function del(id: number): Promise<void> {
+  await apiClient.delete(`/admin/channel-monitors/${id}`)
+}
+
+/**
+ * Trigger an immediate manual check for a channel monitor.
+ * Returns the latest check results for primary + extra models.
+ */
+export async function runNow(id: number): Promise<RunNowResponse> {
+  const { data } = await apiClient.post<RunNowResponse>(`/admin/channel-monitors/${id}/run`)
+  return data
+}
+
+/**
+ * List historical check results for a monitor.
+ */
+export async function listHistory(
+  id: number,
+  params: HistoryParams = {}
+): Promise<HistoryResponse> {
+  const { data } = await apiClient.get<HistoryResponse>(
+    `/admin/channel-monitors/${id}/history`,
+    { params }
+  )
+  return data
+}
+
+export const channelMonitorAPI = {
+  list,
+  get,
+  create,
+  update,
+  del,
+  runNow,
+  listHistory,
+}
+
+export default channelMonitorAPI
--- a/frontend/src/api/admin/index.ts
+++ b/frontend/src/api/admin/index.ts
@@ -26,6 +26,7 @@ import scheduledTestsAPI from './scheduledTests'
 import backupAPI from './backup'
 import tlsFingerprintProfileAPI from './tlsFingerprintProfile'
 import channelsAPI from './channels'
+import channelMonitorAPI from './channelMonitor'
 import adminPaymentAPI from './payment'

 /**
@@ -55,6 +56,7 @@ export const adminAPI = {
  backup: backupAPI,
  tlsFingerprintProfiles: tlsFingerprintProfileAPI,
  channels: channelsAPI,
+  channelMonitor: channelMonitorAPI,
  payment: adminPaymentAPI
 }

@@ -82,6 +84,7 @@ export {
  backupAPI,
  tlsFingerprintProfileAPI,
  channelsAPI,
+  channelMonitorAPI,
  adminPaymentAPI
 }

--- a/frontend/src/api/channelMonitor.ts
+++ b/frontend/src/api/channelMonitor.ts
@@ -0,0 +1,74 @@
+/**
+ * User-facing Channel Monitor API endpoints
+ * Read-only views for end users to inspect channel availability/status.
+ */
+
+import { apiClient } from './client'
+import type { Provider, MonitorStatus } from './admin/channelMonitor'
+
+export type { Provider, MonitorStatus } from './admin/channelMonitor'
+
+export interface UserMonitorExtraModel {
+  model: string
+  status: MonitorStatus
+  latency_ms: number | null
+}
+
+export interface UserMonitorView {
+  id: number
+  name: string
+  provider: Provider
+  group_name: string
+  primary_model: string
+  primary_status: MonitorStatus
+  primary_latency_ms: number | null
+  availability_7d: number
+  extra_models: UserMonitorExtraModel[]
+}
+
+export interface UserMonitorListResponse {
+  items: UserMonitorView[]
+}
+
+export interface UserMonitorModelDetail {
+  model: string
+  latest_status: MonitorStatus
+  latest_latency_ms: number | null
+  availability_7d: number
+  availability_15d: number
+  availability_30d: number
+  avg_latency_7d_ms: number | null
+}
+
+export interface UserMonitorDetail {
+  id: number
+  name: string
+  provider: Provider
+  group_name: string
+  models: UserMonitorModelDetail[]
+}
+
+/**
+ * List all monitor views available to the current user.
+ */
+export async function list(options?: { signal?: AbortSignal }): Promise<UserMonitorListResponse> {
+  const { data } = await apiClient.get<UserMonitorListResponse>('/channel-monitors', {
+    signal: options?.signal,
+  })
+  return data
+}
+
+/**
+ * Get detailed status (multi-window availability + latency) for a single monitor.
+ */
+export async function status(id: number): Promise<UserMonitorDetail> {
+  const { data } = await apiClient.get<UserMonitorDetail>(`/channel-monitors/${id}/status`)
+  return data
+}
+
+export const channelMonitorUserAPI = {
+  list,
+  status,
+}
+
+export default channelMonitorUserAPI
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -18,6 +18,7 @@ export { paymentAPI } from './payment'
 export { userGroupsAPI } from './groups'
 export { totpAPI } from './totp'
 export { default as announcementsAPI } from './announcements'
+export { channelMonitorUserAPI } from './channelMonitor'

 // Admin APIs
 export { adminAPI } from './admin'
--- a/frontend/src/components/admin/monitor/MonitorActionsCell.vue
+++ b/frontend/src/components/admin/monitor/MonitorActionsCell.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex items-center gap-1">
+    <button
+      @click="$emit('run', row)"
+      :disabled="running"
+      class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
+    >
+      <Icon name="refresh" size="sm" :class="running ? 'animate-spin' : ''" />
+      <span class="text-xs">{{ t('admin.channelMonitor.runNow') }}</span>
+    </button>
+    <button
+      @click="$emit('edit', row)"
+      class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
+    >
+      <Icon name="edit" size="sm" />
+      <span class="text-xs">{{ t('common.edit') }}</span>
+    </button>
+    <button
+      @click="$emit('delete', row)"
+      class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+    >
+      <Icon name="trash" size="sm" />
+      <span class="text-xs">{{ t('common.delete') }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { ChannelMonitor } from '@/api/admin/channelMonitor'
+import Icon from '@/components/icons/Icon.vue'
+
+defineProps<{
+  row: ChannelMonitor
+  running: boolean
+}>()
+
+defineEmits<{
+  (e: 'run', row: ChannelMonitor): void
+  (e: 'edit', row: ChannelMonitor): void
+  (e: 'delete', row: ChannelMonitor): void
+}>()
+
+const { t } = useI18n()
+</script>
--- a/frontend/src/components/admin/monitor/MonitorFiltersBar.vue
+++ b/frontend/src/components/admin/monitor/MonitorFiltersBar.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
+    <!-- Left: Search + Filters -->
+    <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="search"
+          type="text"
+          :placeholder="t('admin.channelMonitor.searchPlaceholder')"
+          class="input pl-10"
+          @input="$emit('search-input')"
+        />
+      </div>
+
+      <Select
+        v-model="provider"
+        :options="providerFilterOptions"
+        :placeholder="t('admin.channelMonitor.allProviders')"
+        class="w-44"
+        @change="$emit('reload')"
+      />
+
+      <Select
+        v-model="enabled"
+        :options="enabledFilterOptions"
+        :placeholder="t('admin.channelMonitor.enabledFilter')"
+        class="w-40"
+        @change="$emit('reload')"
+      />
+    </div>
+
+    <!-- Right: Actions -->
+    <div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
+      <button
+        @click="$emit('reload')"
+        :disabled="loading"
+        class="btn btn-secondary"
+        :title="t('common.refresh')"
+      >
+        <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
+      </button>
+      <button @click="$emit('create')" class="btn btn-primary">
+        <Icon name="plus" size="md" class="mr-2" />
+        {{ t('admin.channelMonitor.createButton') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Provider } from '@/api/admin/channelMonitor'
+import Select from '@/components/common/Select.vue'
+import Icon from '@/components/icons/Icon.vue'
+import {
+  PROVIDER_OPENAI,
+  PROVIDER_ANTHROPIC,
+  PROVIDER_GEMINI,
+} from '@/constants/channelMonitor'
+
+defineProps<{
+  loading: boolean
+}>()
+
+defineEmits<{
+  (e: 'reload'): void
+  (e: 'create'): void
+  (e: 'search-input'): void
+}>()
+
+const search = defineModel<string>('search', { required: true })
+const provider = defineModel<Provider | ''>('provider', { required: true })
+const enabled = defineModel<'' | 'true' | 'false'>('enabled', { required: true })
+
+const { t } = useI18n()
+
+const providerFilterOptions = computed(() => [
+  { value: '', label: t('admin.channelMonitor.allProviders') },
+  { value: PROVIDER_OPENAI, label: t('monitorCommon.providers.openai') },
+  { value: PROVIDER_ANTHROPIC, label: t('monitorCommon.providers.anthropic') },
+  { value: PROVIDER_GEMINI, label: t('monitorCommon.providers.gemini') },
+])
+
+const enabledFilterOptions = computed(() => [
+  { value: '', label: t('admin.channelMonitor.allStatus') },
+  { value: 'true', label: t('admin.channelMonitor.onlyEnabled') },
+  { value: 'false', label: t('admin.channelMonitor.onlyDisabled') },
+])
+</script>
--- a/frontend/src/components/admin/monitor/MonitorFormDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorFormDialog.vue
@@ -0,0 +1,297 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="editing ? t('admin.channelMonitor.editTitle') : t('admin.channelMonitor.createTitle')"
+    width="wide"
+    @close="$emit('close')"
+  >
+    <form id="channel-monitor-form" @submit.prevent="handleSubmit" class="space-y-5">
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.name') }} <span class="text-red-500">*</span></label>
+        <input v-model="form.name" type="text" required class="input" :placeholder="t('admin.channelMonitor.form.namePlaceholder')" />
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.provider') }} <span class="text-red-500">*</span></label>
+        <Select v-model="form.provider" :options="providerOptions" />
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.endpoint') }} <span class="text-red-500">*</span></label>
+        <div class="flex gap-2">
+          <input v-model="form.endpoint" type="text" required class="input flex-1" :placeholder="t('admin.channelMonitor.form.endpointPlaceholder')" />
+          <button type="button" @click="useCurrentDomain" class="btn btn-secondary whitespace-nowrap">
+            {{ t('admin.channelMonitor.form.useCurrentDomain') }}
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <label class="input-label">
+          {{ t('admin.channelMonitor.form.apiKey') }}<span v-if="!editing" class="text-red-500"> *</span>
+        </label>
+        <div class="flex gap-2">
+          <input
+            v-model="form.api_key"
+            type="password"
+            :required="!editing"
+            class="input flex-1"
+            :placeholder="editing ? t('admin.channelMonitor.form.apiKeyEditPlaceholder') : t('admin.channelMonitor.form.apiKeyPlaceholder')"
+          />
+          <button type="button" @click="openMyKeyPicker" class="btn btn-secondary whitespace-nowrap">
+            {{ t('admin.channelMonitor.form.useMyKey') }}
+          </button>
+        </div>
+        <p v-if="editing && editing.api_key_masked" class="mt-1 text-xs text-gray-400">{{ editing.api_key_masked }}</p>
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.primaryModel') }} <span class="text-red-500">*</span></label>
+        <input v-model="form.primary_model" type="text" required class="input" :placeholder="t('admin.channelMonitor.form.primaryModelPlaceholder')" />
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.extraModels') }}</label>
+        <ModelTagInput
+          :models="form.extra_models"
+          :placeholder="t('admin.channelMonitor.form.extraModelsPlaceholder')"
+          @update:models="form.extra_models = $event"
+        />
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.groupName') }}</label>
+        <input v-model="form.group_name" type="text" class="input" :placeholder="t('admin.channelMonitor.form.groupNamePlaceholder')" />
+      </div>
+
+      <div>
+        <label class="input-label">{{ t('admin.channelMonitor.form.intervalSeconds') }} <span class="text-red-500">*</span></label>
+        <input v-model.number="form.interval_seconds" type="number" min="15" max="3600" required class="input" />
+        <p class="mt-1 text-xs text-gray-400">{{ t('admin.channelMonitor.form.intervalSecondsHint') }}</p>
+      </div>
+
+      <div class="flex items-center justify-between">
+        <label class="input-label mb-0">{{ t('admin.channelMonitor.form.enabled') }}</label>
+        <Toggle v-model="form.enabled" />
+      </div>
+    </form>
+
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" type="button" class="btn btn-secondary">
+          {{ t('common.cancel') }}
+        </button>
+        <button
+          type="submit"
+          form="channel-monitor-form"
+          :disabled="submitting"
+          class="btn btn-primary"
+        >
+          {{ submitting
+            ? t('common.submitting')
+            : editing ? t('common.update') : t('common.create') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+
+  <MonitorKeyPickerDialog
+    :show="showKeyPicker"
+    :loading="myKeysLoading"
+    :keys="myActiveKeys"
+    @close="showKeyPicker = false"
+    @pick="pickMyKey"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { extractApiErrorMessage } from '@/utils/apiError'
+import { adminAPI } from '@/api/admin'
+import { keysAPI } from '@/api/keys'
+import type {
+  ChannelMonitor,
+  CreateParams,
+  Provider,
+  UpdateParams,
+} from '@/api/admin/channelMonitor'
+import type { ApiKey } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import Select from '@/components/common/Select.vue'
+import Toggle from '@/components/common/Toggle.vue'
+import ModelTagInput from '@/components/admin/channel/ModelTagInput.vue'
+import MonitorKeyPickerDialog from '@/components/admin/monitor/MonitorKeyPickerDialog.vue'
+import {
+  PROVIDER_OPENAI,
+  PROVIDER_ANTHROPIC,
+  PROVIDER_GEMINI,
+  DEFAULT_INTERVAL_SECONDS,
+} from '@/constants/channelMonitor'
+
+const props = defineProps<{
+  show: boolean
+  monitor: ChannelMonitor | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'saved'): void
+}>()
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+// editing is true when we have an existing monitor
+const editing = computed<ChannelMonitor | null>(() => props.monitor)
+
+const submitting = ref(false)
+
+// API key picker
+const showKeyPicker = ref(false)
+const myKeysLoading = ref(false)
+const myActiveKeys = ref<ApiKey[]>([])
+
+interface MonitorForm {
+  name: string
+  provider: Provider
+  endpoint: string
+  api_key: string
+  primary_model: string
+  extra_models: string[]
+  group_name: string
+  interval_seconds: number
+  enabled: boolean
+}
+
+const form = reactive<MonitorForm>({
+  name: '',
+  provider: PROVIDER_OPENAI,
+  endpoint: '',
+  api_key: '',
+  primary_model: '',
+  extra_models: [],
+  group_name: '',
+  interval_seconds: DEFAULT_INTERVAL_SECONDS,
+  enabled: true,
+})
+
+const providerOptions = computed(() => [
+  { value: PROVIDER_OPENAI, label: t('monitorCommon.providers.openai') },
+  { value: PROVIDER_ANTHROPIC, label: t('monitorCommon.providers.anthropic') },
+  { value: PROVIDER_GEMINI, label: t('monitorCommon.providers.gemini') },
+])
+
+function resetForm() {
+  form.name = ''
+  form.provider = PROVIDER_OPENAI
+  form.endpoint = ''
+  form.api_key = ''
+  form.primary_model = ''
+  form.extra_models = []
+  form.group_name = ''
+  form.interval_seconds = DEFAULT_INTERVAL_SECONDS
+  form.enabled = true
+}
+
+function loadFromMonitor(m: ChannelMonitor) {
+  form.name = m.name
+  form.provider = m.provider
+  form.endpoint = m.endpoint
+  form.api_key = ''
+  form.primary_model = m.primary_model
+  form.extra_models = [...(m.extra_models || [])]
+  form.group_name = m.group_name || ''
+  form.interval_seconds = m.interval_seconds || DEFAULT_INTERVAL_SECONDS
+  form.enabled = m.enabled
+}
+
+// Re-sync form whenever the dialog is opened or the target monitor changes.
+watch(
+  () => [props.show, props.monitor] as const,
+  ([show, m]) => {
+    if (!show) return
+    if (m) loadFromMonitor(m)
+    else resetForm()
+  },
+  { immediate: true },
+)
+
+function useCurrentDomain() {
+  form.endpoint = window.location.origin
+}
+
+async function openMyKeyPicker() {
+  showKeyPicker.value = true
+  if (myActiveKeys.value.length > 0) return
+  myKeysLoading.value = true
+  try {
+    const res = await keysAPI.list(1, 100, { status: 'active' })
+    const items = res.items || []
+    const now = Date.now()
+    myActiveKeys.value = items.filter(k => {
+      if (k.status !== 'active') return false
+      if (!k.expires_at) return true
+      return new Date(k.expires_at).getTime() > now
+    })
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('admin.channelMonitor.form.noActiveKey')))
+  } finally {
+    myKeysLoading.value = false
+  }
+}
+
+function pickMyKey(k: ApiKey) {
+  form.api_key = k.key
+  showKeyPicker.value = false
+}
+
+function buildPayload(): CreateParams {
+  return {
+    name: form.name.trim(),
+    provider: form.provider,
+    endpoint: form.endpoint.trim(),
+    api_key: form.api_key.trim(),
+    primary_model: form.primary_model.trim(),
+    extra_models: form.extra_models,
+    group_name: form.group_name.trim(),
+    enabled: form.enabled,
+    interval_seconds: form.interval_seconds,
+  }
+}
+
+async function handleSubmit() {
+  if (submitting.value) return
+  if (!form.name.trim()) {
+    appStore.showError(t('admin.channelMonitor.nameRequired'))
+    return
+  }
+  if (!form.primary_model.trim()) {
+    appStore.showError(t('admin.channelMonitor.primaryModelRequired'))
+    return
+  }
+
+  submitting.value = true
+  try {
+    const target = editing.value
+    if (target) {
+      const { api_key, ...rest } = buildPayload()
+      const req: UpdateParams = rest
+      // Only send api_key if user typed a new value
+      if (api_key) req.api_key = api_key
+      await adminAPI.channelMonitor.update(target.id, req)
+      appStore.showSuccess(t('admin.channelMonitor.updateSuccess'))
+    } else {
+      await adminAPI.channelMonitor.create(buildPayload())
+      appStore.showSuccess(t('admin.channelMonitor.createSuccess'))
+    }
+    emit('saved')
+    emit('close')
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('common.error')))
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
--- a/frontend/src/components/admin/monitor/MonitorKeyPickerDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorKeyPickerDialog.vue
@@ -0,0 +1,64 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="t('admin.channelMonitor.form.selectKeyTitle')"
+    width="normal"
+    @close="$emit('close')"
+  >
+    <div class="space-y-3">
+      <p class="text-xs text-gray-500 dark:text-gray-400">
+        {{ t('admin.channelMonitor.form.selectKeyHint') }}
+      </p>
+      <div v-if="loading" class="py-6 text-center text-sm text-gray-500">
+        {{ t('common.loading') }}
+      </div>
+      <div v-else-if="keys.length === 0" class="py-6 text-center text-sm text-gray-500">
+        {{ t('admin.channelMonitor.form.noActiveKey') }}
+      </div>
+      <div v-else class="max-h-72 space-y-1 overflow-auto">
+        <button
+          v-for="k in keys"
+          :key="k.id"
+          type="button"
+          @click="$emit('pick', k)"
+          class="block w-full rounded-lg border border-gray-200 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
+        >
+          <div class="font-medium text-gray-900 dark:text-white">{{ k.name }}</div>
+          <div class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ maskKey(k.key) }}</div>
+        </button>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end">
+        <button @click="$emit('close')" class="btn btn-secondary">
+          {{ t('common.cancel') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { ApiKey } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+
+defineProps<{
+  show: boolean
+  loading: boolean
+  keys: ApiKey[]
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+  (e: 'pick', key: ApiKey): void
+}>()
+
+const { t } = useI18n()
+
+function maskKey(key: string): string {
+  if (!key) return ''
+  if (key.length <= 12) return `${key.slice(0, 4)}***`
+  return `${key.slice(0, 6)}...${key.slice(-4)}`
+}
+</script>
--- a/frontend/src/components/admin/monitor/MonitorPrimaryModelCell.vue
+++ b/frontend/src/components/admin/monitor/MonitorPrimaryModelCell.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-sm text-gray-900 dark:text-gray-100">{{ row.primary_model }}</span>
+    <HelpTooltip>
+      <template #trigger>
+        <span
+          class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"
+          :class="statusBadgeClass(row.primary_status)"
+        >
+          {{ statusLabel(row.primary_status) }}
+        </span>
+      </template>
+      <div class="space-y-2">
+        <div class="text-xs font-semibold text-gray-100">
+          {{ row.primary_model }}
+          <span
+            class="ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+            :class="statusBadgeClass(row.primary_status)"
+          >
+            {{ statusLabel(row.primary_status) }}
+          </span>
+        </div>
+        <div v-if="(row.extra_models?.length ?? 0) === 0" class="text-[11px] text-gray-300">
+          {{ t('monitorCommon.extraModelsEmpty') }}
+        </div>
+        <div v-else class="space-y-1">
+          <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">
+            {{ t('monitorCommon.extraModelsHeader') }}
+          </div>
+          <table class="w-full text-left text-[11px]">
+            <thead>
+              <tr class="text-gray-400">
+                <th class="py-0.5 pr-2 font-medium">{{ t('admin.channelMonitor.columns.primaryModel') }}</th>
+                <th class="py-0.5 pr-2 font-medium">{{ t('admin.channelMonitor.columns.actions') }}</th>
+                <th class="py-0.5 font-medium">{{ t('admin.channelMonitor.columns.latency') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="m in (row.extra_models_status || [])" :key="m.model">
+                <td class="py-0.5 pr-2 text-gray-100">{{ m.model }}</td>
+                <td class="py-0.5 pr-2">
+                  <span
+                    class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px]"
+                    :class="statusBadgeClass(m.status)"
+                  >
+                    {{ statusLabel(m.status) }}
+                  </span>
+                </td>
+                <td class="py-0.5 text-gray-100">{{ formatLatency(m.latency_ms) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </HelpTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { ChannelMonitor } from '@/api/admin/channelMonitor'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+
+defineProps<{
+  row: ChannelMonitor
+}>()
+
+const { t } = useI18n()
+const { statusLabel, statusBadgeClass, formatLatency } = useChannelMonitorFormat()
+</script>
--- a/frontend/src/components/admin/monitor/MonitorRunResultDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorRunResultDialog.vue
@@ -0,0 +1,56 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="t('admin.channelMonitor.runResultTitle')"
+    width="normal"
+    @close="$emit('close')"
+  >
+    <div class="space-y-2">
+      <div
+        v-for="r in results"
+        :key="r.model"
+        class="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2 text-sm dark:border-dark-600"
+      >
+        <div class="flex flex-col">
+          <span class="font-medium text-gray-900 dark:text-white">{{ r.model }}</span>
+          <span v-if="r.message" class="text-xs text-gray-500 dark:text-gray-400">{{ r.message }}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px]"
+            :class="statusBadgeClass(r.status)"
+          >
+            {{ statusLabel(r.status) }}
+          </span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">{{ formatLatency(r.latency_ms) }} ms</span>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end">
+        <button @click="$emit('close')" class="btn btn-primary">
+          {{ t('common.close') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { CheckResult } from '@/api/admin/channelMonitor'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+
+defineProps<{
+  show: boolean
+  results: CheckResult[]
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const { statusLabel, statusBadgeClass, formatLatency } = useChannelMonitorFormat()
+</script>
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -38,7 +38,7 @@
                  'sidebar-link-collapsed': sidebarCollapsed
                }"
                :title="sidebarCollapsed ? item.label : undefined"
-                @click="sidebarCollapsed ? undefined : toggleGroup(item)"
+                @click="handleGroupClick(item)"
              >
                <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
                <span
@@ -181,7 +181,7 @@

 <script setup lang="ts">
 import { computed, h, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAdminSettingsStore, useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
 import VersionBadge from '@/components/common/VersionBadge.vue'
@@ -194,11 +194,17 @@ interface NavItem {
  iconSvg?: string
  hideInSimpleMode?: boolean
  children?: NavItem[]
+  /**
+   * When true, the parent item only toggles the expand/collapse state and
+   * does NOT navigate to its `path`. The `path` is purely a stable key.
+   */
+  expandOnly?: boolean
 }

 const { t } = useI18n()

 const route = useRoute()
+const router = useRouter()
 const appStore = useAppStore()
 const authStore = useAuthStore()
 const onboardingStore = useOnboardingStore()
@@ -549,6 +555,41 @@ const ChevronDoubleRightIcon = {
    )
 }

+const SignalIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'
+        })
+      ]
+    )
+}
+
+const PriceTagIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z'
+        }),
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M6 6h.008v.008H6V6z'
+        })
+      ]
+    )
+}
+
 const ChevronDownIcon = {
  render: () =>
    h(
@@ -570,6 +611,7 @@ const userNavItems = computed((): NavItem[] => {
    { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
    { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
    { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
+    { path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon },
    { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
    ...(appStore.cachedPublicSettings?.payment_enabled
      ? [
@@ -608,6 +650,7 @@ const personalNavItems = computed((): NavItem[] => {
  const items: NavItem[] = [
    { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
    { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
+    { path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon },
    { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
    ...(appStore.cachedPublicSettings?.payment_enabled
      ? [
@@ -664,7 +707,17 @@ const adminNavItems = computed((): NavItem[] => {
      : []),
    { path: '/admin/users', label: t('nav.users'), icon: UsersIcon, hideInSimpleMode: true },
    { path: '/admin/groups', label: t('nav.groups'), icon: FolderIcon, hideInSimpleMode: true },
-    { path: '/admin/channels', label: t('nav.channels', '渠道管理'), icon: ChannelIcon, hideInSimpleMode: true },
+    {
+      path: '/admin/channels',
+      label: t('nav.channelManagement'),
+      icon: ChannelIcon,
+      hideInSimpleMode: true,
+      expandOnly: true,
+      children: [
+        { path: '/admin/channels/pricing', label: t('nav.channelPricing'), icon: PriceTagIcon },
+        { path: '/admin/channels/monitor', label: t('nav.channelMonitor'), icon: SignalIcon },
+      ],
+    },
    { path: '/admin/subscriptions', label: t('nav.subscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
    { path: '/admin/accounts', label: t('nav.accounts'), icon: GlobeIcon },
    { path: '/admin/announcements', label: t('nav.announcements'), icon: BellIcon },
@@ -678,6 +731,7 @@ const adminNavItems = computed((): NavItem[] => {
            label: t('nav.orderManagement'),
            icon: OrderIcon,
            hideInSimpleMode: true,
+            expandOnly: true,
            children: [
              { path: '/admin/orders/dashboard', label: t('nav.paymentDashboard'), icon: ChartIcon },
              { path: '/admin/orders', label: t('nav.orderManagement'), icon: OrderIcon },
@@ -764,6 +818,28 @@ function toggleGroup(item: NavItem) {
  }
 }

+/**
+ * Click handler for collapsible parent items.
+ * - When sidebar is collapsed: do nothing (children are not visible).
+ * - When `expandOnly` is true: only toggle expand state.
+ * - Otherwise (default, e.g. /admin/orders): navigate to the parent path
+ *   (router-link semantics) and ensure the group is expanded.
+ */
+function handleGroupClick(item: NavItem) {
+  if (sidebarCollapsed.value) return
+  if (item.expandOnly) {
+    toggleGroup(item)
+    return
+  }
+  // Push to path and ensure expanded
+  if (route.path !== item.path) {
+    router.push(item.path)
+  }
+  if (!expandedGroups.value.has(item.path)) {
+    expandedGroups.value.add(item.path)
+  }
+}
+
 // Initialize theme
 const savedTheme = localStorage.getItem('theme')
 if (
--- a/frontend/src/components/user/MonitorDetailDialog.vue
+++ b/frontend/src/components/user/MonitorDetailDialog.vue
@@ -0,0 +1,114 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="title"
+    width="wide"
+    @close="$emit('close')"
+  >
+    <div v-if="loading" class="py-8 text-center text-sm text-gray-500">
+      {{ t('common.loading') }}
+    </div>
+    <div v-else-if="!detail" class="py-8 text-center text-sm text-gray-500">
+      {{ t('channelStatus.detailLoadError') }}
+    </div>
+    <div v-else class="overflow-x-auto">
+      <table class="w-full text-left text-sm">
+        <thead class="border-b border-gray-200 dark:border-dark-700">
+          <tr class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.model') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.latestStatus') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.latestLatency') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability7d') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability15d') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability30d') }}</th>
+            <th class="py-2 pr-3">{{ t('channelStatus.detailColumns.avgLatency7d') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="m in detail.models"
+            :key="m.model"
+            class="border-b border-gray-100 dark:border-dark-800"
+          >
+            <td class="py-2 pr-3 font-medium text-gray-900 dark:text-gray-100">{{ m.model }}</td>
+            <td class="py-2 pr-3">
+              <span
+                class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px]"
+                :class="statusBadgeClass(m.latest_status)"
+              >
+                {{ statusLabel(m.latest_status) }}
+              </span>
+            </td>
+            <td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatLatency(m.latest_latency_ms) }}</td>
+            <td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_7d) }}</td>
+            <td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_15d) }}</td>
+            <td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_30d) }}</td>
+            <td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatLatency(m.avg_latency_7d_ms) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <button @click="$emit('close')" class="btn btn-secondary">
+          {{ t('channelStatus.closeDetail') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { extractApiErrorMessage } from '@/utils/apiError'
+import {
+  status as fetchChannelMonitorDetail,
+  type UserMonitorDetail,
+} from '@/api/channelMonitor'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+
+const props = defineProps<{
+  show: boolean
+  monitorId: number | null
+  title: string
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { statusLabel, statusBadgeClass, formatLatency, formatPercent } = useChannelMonitorFormat()
+
+const detail = ref<UserMonitorDetail | null>(null)
+const loading = ref(false)
+
+async function load(id: number) {
+  detail.value = null
+  loading.value = true
+  try {
+    detail.value = await fetchChannelMonitorDetail(id)
+  } catch (err: unknown) {
+    appStore.showError(extractApiErrorMessage(err, t('channelStatus.detailLoadError')))
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.show, props.monitorId] as const,
+  ([show, id]) => {
+    if (!show) {
+      detail.value = null
+      return
+    }
+    if (id != null) void load(id)
+  },
+  { immediate: true },
+)
+</script>
--- a/frontend/src/components/user/MonitorPrimaryModelCell.vue
+++ b/frontend/src/components/user/MonitorPrimaryModelCell.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-sm text-gray-900 dark:text-gray-100">{{ row.primary_model }}</span>
+    <HelpTooltip>
+      <template #trigger>
+        <span
+          class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"
+          :class="statusBadgeClass(row.primary_status)"
+        >
+          {{ statusLabel(row.primary_status) }}
+        </span>
+      </template>
+      <div class="space-y-2">
+        <div class="text-xs font-semibold text-gray-100">
+          {{ row.primary_model }}
+          <span
+            class="ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+            :class="statusBadgeClass(row.primary_status)"
+          >
+            {{ statusLabel(row.primary_status) }}
+          </span>
+        </div>
+        <div v-if="(row.extra_models?.length ?? 0) === 0" class="text-[11px] text-gray-300">
+          {{ t('monitorCommon.extraModelsEmpty') }}
+        </div>
+        <div v-else class="space-y-1">
+          <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">
+            {{ t('monitorCommon.extraModelsHeader') }}
+          </div>
+          <table class="w-full text-left text-[11px]">
+            <thead>
+              <tr class="text-gray-400">
+                <th class="py-0.5 pr-2 font-medium">{{ t('channelStatus.detailColumns.model') }}</th>
+                <th class="py-0.5 pr-2 font-medium">{{ t('channelStatus.detailColumns.latestStatus') }}</th>
+                <th class="py-0.5 font-medium">{{ t('channelStatus.detailColumns.latestLatency') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="m in row.extra_models" :key="m.model">
+                <td class="py-0.5 pr-2 text-gray-100">{{ m.model }}</td>
+                <td class="py-0.5 pr-2">
+                  <span
+                    class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px]"
+                    :class="statusBadgeClass(m.status)"
+                  >
+                    {{ statusLabel(m.status) }}
+                  </span>
+                </td>
+                <td class="py-0.5 text-gray-100">{{ formatLatency(m.latency_ms) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </HelpTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { UserMonitorView } from '@/api/channelMonitor'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
+
+defineProps<{
+  row: UserMonitorView
+}>()
+
+const { t } = useI18n()
+const { statusLabel, statusBadgeClass, formatLatency } = useChannelMonitorFormat()
+</script>
--- a/frontend/src/composables/useChannelMonitorFormat.ts
+++ b/frontend/src/composables/useChannelMonitorFormat.ts
@@ -0,0 +1,97 @@
+/**
+ * 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,
+  }
+}
--- a/frontend/src/constants/channelMonitor.ts
+++ b/frontend/src/constants/channelMonitor.ts
@@ -0,0 +1,35 @@
+/**
+ * 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
--- a/frontend/src/i18n/locales/en.ts
+++ b/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',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/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: '订阅管理',
--- a/frontend/src/router/index.ts
+++ b/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',
--- a/frontend/src/views/admin/ChannelMonitorView.vue
+++ b/frontend/src/views/admin/ChannelMonitorView.vue
@@ -0,0 +1,295 @@
+<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>
--- a/frontend/src/views/user/ChannelStatusView.vue
+++ b/frontend/src/views/user/ChannelStatusView.vue
@@ -0,0 +1,208 @@
+<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>