diff --git a/frontend/src/views/dashboard/components/AnimatedMetricValue.vue b/frontend/src/components/AnimatedMetricValue.vue
similarity index 100%
rename from frontend/src/views/dashboard/components/AnimatedMetricValue.vue
rename to frontend/src/components/AnimatedMetricValue.vue
diff --git a/frontend/src/views/accounts/components/AccountPlanBadge.vue b/frontend/src/components/account/AccountPlanBadge.vue
similarity index 97%
rename from frontend/src/views/accounts/components/AccountPlanBadge.vue
rename to frontend/src/components/account/AccountPlanBadge.vue
index 906717c18..0f053d6f5 100644
--- a/frontend/src/views/accounts/components/AccountPlanBadge.vue
+++ b/frontend/src/components/account/AccountPlanBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { stableVisualIndex } from '../utils/visualTone'
+import { stableVisualIndex } from '@/utils/color'
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue b/frontend/src/components/account/account-usage-window/AccountRequestTimeline.vue
similarity index 88%
rename from frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue
rename to frontend/src/components/account/account-usage-window/AccountRequestTimeline.vue
index 329486a33..89b4b429e 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue
+++ b/frontend/src/components/account/account-usage-window/AccountRequestTimeline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AccountRequestBar } from './presenter'
+import type { AccountRequestBar } from '@/components/account/account-usage-window/presenter'
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/index.vue b/frontend/src/components/account/account-usage-window/index.vue
similarity index 91%
rename from frontend/src/views/accounts/components/AccountUsageWindow/index.vue
rename to frontend/src/components/account/account-usage-window/index.vue
index 0ae2527bb..c0a797b00 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/index.vue
+++ b/frontend/src/components/account/account-usage-window/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { AccountQuotaWindow } from '../../constants'
-import type { AccountUsageWindowVariant } from './presenter'
+import type { AccountQuotaWindow } from '@/api/index'
+import type { AccountUsageWindowVariant } from '@/components/account/account-usage-window/presenter'
 import { computed } from 'vue'
-import AccountRequestTimeline from './AccountRequestTimeline.vue'
-import { resolveAccountUsageWindowPresentation } from './presenter'
+import AccountRequestTimeline from '@/components/account/account-usage-window/AccountRequestTimeline.vue'
+import { resolveAccountUsageWindowPresentation } from '@/components/account/account-usage-window/presenter'
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts b/frontend/src/components/account/account-usage-window/presenter.ts
similarity index 98%
rename from frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts
rename to frontend/src/components/account/account-usage-window/presenter.ts
index c26949273..7adeb6dc3 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts
+++ b/frontend/src/components/account/account-usage-window/presenter.ts
@@ -1,4 +1,4 @@
-import type { AccountQuotaWindow } from '../../constants'
+import type { AccountQuotaWindow } from '@/api/index'
 import { clamp } from 'es-toolkit'
 import { isRecord } from '@/utils/data'
 import { formatInteger } from '@/utils/format'
@@ -43,7 +43,7 @@ interface AccountUsageWindowVariantDefinition {
 
 type QuotaWindowTone = 'danger' | 'success' | 'unknown' | 'warning'
 
-export interface AccountUsageWindowPresentationInput {
+interface AccountUsageWindowPresentationInput {
   window: AccountQuotaWindow | undefined
   variant: AccountUsageWindowVariant
   showLocalValue: boolean
diff --git a/frontend/src/components/charts/BaseChart.vue b/frontend/src/components/charts/BaseChart.vue
index de5562038..c4deaba6b 100644
--- a/frontend/src/components/charts/BaseChart.vue
+++ b/frontend/src/components/charts/BaseChart.vue
@@ -18,9 +18,8 @@ const props = withDefaults(
 )
 
 const chartElement = useTemplateRef<HTMLElement>('chart')
-const chartOption = shallowRef<EChartsOption>(props.option)
 const chart = shallowRef<EChartsType>()
-const pendingInitElement = shallowRef<HTMLElement>()
+let pendingInitElement: HTMLElement | undefined
 
 const style = computed(() => ({
   height: `${props.height}px`,
@@ -34,13 +33,13 @@ function ensureChart(element: HTMLElement) {
   if (chart.value || !elementHasSize(element))
     return
   chart.value = init(element, undefined, { renderer: 'canvas' })
-  applyOption(chartOption.value)
+  applyOption(props.option)
 }
 
 const { pause: pausePendingInit, resume: resumePendingInit } = useRafFn(
   () => {
-    const element = pendingInitElement.value
-    pendingInitElement.value = undefined
+    const element = pendingInitElement
+    pendingInitElement = undefined
     if (element) {
       ensureChart(element)
     }
@@ -49,12 +48,12 @@ const { pause: pausePendingInit, resume: resumePendingInit } = useRafFn(
 )
 
 function cancelPendingInit() {
-  pendingInitElement.value = undefined
+  pendingInitElement = undefined
   pausePendingInit()
 }
 
 function scheduleInit(element: HTMLElement) {
-  pendingInitElement.value = element
+  pendingInitElement = element
   resumePendingInit()
 }
 
@@ -77,7 +76,6 @@ function dispose() {
 watch(
   () => props.option,
   (option) => {
-    chartOption.value = option
     if (chart.value) {
       applyOption(option)
       return
diff --git a/frontend/src/components/SchemaForm/index.vue b/frontend/src/components/schema-form/index.vue
similarity index 96%
rename from frontend/src/components/SchemaForm/index.vue
rename to frontend/src/components/schema-form/index.vue
index 7fd277a1d..b040fdafa 100644
--- a/frontend/src/components/SchemaForm/index.vue
+++ b/frontend/src/components/schema-form/index.vue
@@ -3,7 +3,7 @@ import type { InputField } from './schema'
 import { BaseForm, BaseFormItem, BaseIconButton, BaseInput, BasePopover, BaseSelect, BaseTextarea } from '@codex-proxy/ui'
 import { Braces, Info, List } from '@lucide/vue'
 import { computed, nextTick, shallowRef, useTemplateRef } from 'vue'
-import { jsonObjectError, parseJsonObject } from '@/utils/data'
+import { parseJsonObject } from '@/utils/data'
 import { inputFields } from './schema'
 
 const props = defineProps<{
@@ -15,8 +15,9 @@ const props = defineProps<{
 const text = defineModel<string>({ required: true })
 const jsonMode = shallowRef(false)
 const root = useTemplateRef<HTMLElement>('root')
-const error = computed(() => jsonObjectError(text.value, props.maximumBytes))
-const value = computed(() => error.value ? null : parseJsonObject(text.value, props.maximumBytes))
+const parsed = computed(() => parseJsonObject(text.value, props.maximumBytes))
+const error = computed(() => parsed.value.error)
+const value = computed(() => parsed.value.value)
 const fields = computed(() => inputFields(props.schema))
 const hasExtra = computed(() => Object.keys(value.value ?? {}).some(key => !fields.value?.some(field => field.key === key)))
 const incompatibleValue = computed(() => fields.value?.some((field) => {
diff --git a/frontend/src/components/SchemaForm/schema.ts b/frontend/src/components/schema-form/schema.ts
similarity index 100%
rename from frontend/src/components/SchemaForm/schema.ts
rename to frontend/src/components/schema-form/schema.ts
diff --git a/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue b/frontend/src/components/usage/HealthTimelinePointPopover.vue
similarity index 96%
rename from frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue
rename to frontend/src/components/usage/HealthTimelinePointPopover.vue
index f255ebebf..5cbb6838a 100644
--- a/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue
+++ b/frontend/src/components/usage/HealthTimelinePointPopover.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HealthTimelinePoint } from '../constants'
+import type { DashboardHealthTimelinePoint } from '@/api'
 
 import { computed } from 'vue'
-import { formatHealthCount, healthReliabilityValueClass, healthStatusMeta } from '../constants'
+import { formatHealthCount, healthReliabilityValueClass, healthStatusMeta } from '@/components/usage/shared/health'
 
 const props = defineProps<{
-  point: HealthTimelinePoint
+  point: DashboardHealthTimelinePoint
 }>()
 
 const status = computed(() => healthStatusMeta[props.point.status])
diff --git a/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue b/frontend/src/components/usage/RequestHealthTimelineCard.vue
similarity index 92%
rename from frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue
rename to frontend/src/components/usage/RequestHealthTimelineCard.vue
index 0b5fb26b6..56ea1ded2 100644
--- a/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue
+++ b/frontend/src/components/usage/RequestHealthTimelineCard.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { HealthTimeline, HealthTimelinePoint } from '../constants'
+import type { DashboardHealthTimeline, DashboardHealthTimelinePoint } from '@/api'
 import { BaseCard, BasePopover } from '@codex-proxy/ui'
 
 import { usePreferredReducedMotion } from '@vueuse/core'
 import { gsap } from 'gsap'
 import { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
-import { formatHealthCount, healthLegend, healthReliabilityValueClass, healthStatusMeta } from '../constants'
-import HealthTimelinePointPopover from './HealthTimelinePointPopover.vue'
+import HealthTimelinePointPopover from '@/components/usage/HealthTimelinePointPopover.vue'
+import { formatHealthCount, healthLegend, healthReliabilityValueClass, healthStatusMeta } from '@/components/usage/shared/health'
 
 const props = defineProps<{
-  timeline: HealthTimeline
+  timeline: DashboardHealthTimeline
 }>()
 
 const healthPopoverArrowSurfaceClasses = {
@@ -21,25 +21,25 @@ const timelineGrid = useTemplateRef<HTMLElement>('timelineGrid')
 const preferredMotion = usePreferredReducedMotion()
 const points = computed(() => props.timeline.points)
 
-const activePoint = shallowRef<HealthTimelinePoint>()
+const activePoint = shallowRef<DashboardHealthTimelinePoint>()
 const activeAnchor = shallowRef<HTMLElement | null>(null)
 const popoverOpen = shallowRef(false)
 const highlightedPointBucket = shallowRef<string>()
 let wavedCellIndexes = new Set<number>()
 
-function observedRequests(point: HealthTimelinePoint) {
+function observedRequests(point: DashboardHealthTimelinePoint) {
   return point.successRequests + point.failedRequests + point.cancelledRequests + point.callerErrorRequests
 }
 
-function isInteractivePoint(point: HealthTimelinePoint) {
+function isInteractivePoint(point: DashboardHealthTimelinePoint) {
   return point.status !== 'future' && observedRequests(point) > 0
 }
 
-function isActivePoint(point: HealthTimelinePoint) {
+function isActivePoint(point: DashboardHealthTimelinePoint) {
   return popoverOpen.value && highlightedPointBucket.value === point.bucketStart
 }
 
-function activatePoint(point: HealthTimelinePoint, pointIndex: number, event: Event) {
+function activatePoint(point: DashboardHealthTimelinePoint, pointIndex: number, event: Event) {
   if (!(event.currentTarget instanceof HTMLElement))
     return
   if (!isInteractivePoint(point)) {
@@ -162,7 +162,7 @@ function releasePointWave() {
   wavedCellIndexes = new Set<number>()
 }
 
-function pointAccessibilityLabel(point: HealthTimelinePoint) {
+function pointAccessibilityLabel(point: DashboardHealthTimelinePoint) {
   const eligibleRequests = point.successRequests + point.failedRequests
   return `${point.time}，${healthStatusMeta[point.status].label}，有效请求 ${formatHealthCount(eligibleRequests)}，可用性 ${point.reliabilityDisplay}`
 }
diff --git a/frontend/src/views/usage/components/UsageBillingCell.vue b/frontend/src/components/usage/UsageBillingCell.vue
similarity index 93%
rename from frontend/src/views/usage/components/UsageBillingCell.vue
rename to frontend/src/components/usage/UsageBillingCell.vue
index 71811d713..b162ce11c 100644
--- a/frontend/src/views/usage/components/UsageBillingCell.vue
+++ b/frontend/src/components/usage/UsageBillingCell.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
 
 import { Zap } from '@lucide/vue'
 import { computed } from 'vue'
-import { usageBilling, usageBillingText } from '../utils/records'
-import UsageDetailPopover from './UsageDetailPopover.vue'
+import UsageDetailPopover from '@/components/usage/UsageDetailPopover.vue'
+import { usageBillingText } from './shared/presenter'
 
 const props = defineProps<{
-  record: Pick<UsageDisplayRecord, 'billing'>
+  record: Pick<UsageListRecord, 'billing'>
 }>()
 
-const billing = computed(() => usageBilling(props.record))
+const billing = computed(() => props.record.billing)
 const billingItems = computed(() => {
   const value = billing.value
   if (!value)
diff --git a/frontend/src/views/usage/components/UsageClientIpCell.vue b/frontend/src/components/usage/UsageClientIpCell.vue
similarity index 90%
rename from frontend/src/views/usage/components/UsageClientIpCell.vue
rename to frontend/src/components/usage/UsageClientIpCell.vue
index 1d009d7f3..5785f374e 100644
--- a/frontend/src/views/usage/components/UsageClientIpCell.vue
+++ b/frontend/src/components/usage/UsageClientIpCell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { usageClientIp } from '../utils/records'
+import { usageClientIp } from './shared/presenter'
 
 const props = defineProps<{
   record: { clientIp?: string | null }
diff --git a/frontend/src/views/usage/components/UsageDetailPopover.vue b/frontend/src/components/usage/UsageDetailPopover.vue
similarity index 100%
rename from frontend/src/views/usage/components/UsageDetailPopover.vue
rename to frontend/src/components/usage/UsageDetailPopover.vue
diff --git a/frontend/src/views/usage/components/UsageLatencyCell.vue b/frontend/src/components/usage/UsageLatencyCell.vue
similarity index 90%
rename from frontend/src/views/usage/components/UsageLatencyCell.vue
rename to frontend/src/components/usage/UsageLatencyCell.vue
index 8029cbffe..087b6264d 100644
--- a/frontend/src/views/usage/components/UsageLatencyCell.vue
+++ b/frontend/src/components/usage/UsageLatencyCell.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
 
 import { computed } from 'vue'
-import { usageLatencyDetails } from '../utils/records'
-import UsageDetailPopover from './UsageDetailPopover.vue'
+import UsageDetailPopover from '@/components/usage/UsageDetailPopover.vue'
+import { usageLatencyDetails } from './shared/presenter'
 
 const props = defineProps<{
-  record: Pick<UsageDisplayRecord, 'latencyDetails' | 'firstTokenLatencyMs' | 'latencyMs'>
+  record: Pick<UsageListRecord, 'latencyDetails' | 'firstTokenLatencyMs' | 'latencyMs'>
 }>()
 
 const latencyDetails = computed(() => usageLatencyDetails(props.record))
diff --git a/frontend/src/views/usage/components/UsageModelCell.vue b/frontend/src/components/usage/UsageModelCell.vue
similarity index 88%
rename from frontend/src/views/usage/components/UsageModelCell.vue
rename to frontend/src/components/usage/UsageModelCell.vue
index 610e00483..f72a81b74 100644
--- a/frontend/src/views/usage/components/UsageModelCell.vue
+++ b/frontend/src/components/usage/UsageModelCell.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
+
 import { CornerDownRight } from '@lucide/vue'
 
 import { computed } from 'vue'
-import { usageModelDisplay } from '../utils/records'
+import { usageModelDisplay } from './shared/presenter'
 
 const props = defineProps<{
-  record: UsageDisplayRecord
+  record: UsageListRecord
 }>()
 
 const modelDisplay = computed(() => usageModelDisplay(props.record))
diff --git a/frontend/src/views/usage/components/UsageReasoningEffortCell.vue b/frontend/src/components/usage/UsageReasoningEffortCell.vue
similarity index 74%
rename from frontend/src/views/usage/components/UsageReasoningEffortCell.vue
rename to frontend/src/components/usage/UsageReasoningEffortCell.vue
index 1ad3d8480..34b19745c 100644
--- a/frontend/src/views/usage/components/UsageReasoningEffortCell.vue
+++ b/frontend/src/components/usage/UsageReasoningEffortCell.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
 
 import { Bot, SquareDashedBottomCode } from '@lucide/vue'
-import { usageIsReview, usageIsSubagent, usageReasoningEffort } from '../utils/records'
+import { usageReasoningEffort } from './shared/presenter'
 
 defineProps<{
-  record: UsageDisplayRecord
+  record: UsageListRecord
 }>()
 </script>
 
@@ -15,7 +15,7 @@ defineProps<{
   >
     <span>{{ usageReasoningEffort(record) }}</span>
     <span
-      v-if="usageIsSubagent(record)"
+      v-if="record.subagentKind"
       class="inline-flex shrink-0 text-cp-purple-text"
       title="子代理请求"
       aria-label="子代理请求"
@@ -23,7 +23,7 @@ defineProps<{
       <Bot class="size-3.5" stroke-width="2.2" />
     </span>
     <span
-      v-if="usageIsReview(record)"
+      v-if="record.subagentKind === 'review'"
       class="inline-flex shrink-0 text-cp-purple-text"
       title="Review 子代理请求"
       aria-label="Review 子代理请求"
diff --git a/frontend/src/views/usage/components/UsageRecordsTable.vue b/frontend/src/components/usage/UsageRecordsTable.vue
similarity index 81%
rename from frontend/src/views/usage/components/UsageRecordsTable.vue
rename to frontend/src/components/usage/UsageRecordsTable.vue
index 32dd7fb31..14f9248d1 100644
--- a/frontend/src/views/usage/components/UsageRecordsTable.vue
+++ b/frontend/src/components/usage/UsageRecordsTable.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import type { BaseTableColumn } from '@codex-proxy/ui'
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
+
 import { BaseTable } from '@codex-proxy/ui'
 import { Minimize2 } from '@lucide/vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
-import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
+import UsageBillingCell from '@/components/usage/UsageBillingCell.vue'
+import UsageClientIpCell from '@/components/usage/UsageClientIpCell.vue'
+import UsageLatencyCell from '@/components/usage/UsageLatencyCell.vue'
+import UsageModelCell from '@/components/usage/UsageModelCell.vue'
+import UsageReasoningEffortCell from '@/components/usage/UsageReasoningEffortCell.vue'
+import UsageTokenCell from '@/components/usage/UsageTokenCell.vue'
+import UsageTransportBadge from '@/components/usage/UsageTransportBadge.vue'
 import {
   usageAccountText,
-  usageAuthenticationKind,
-  usageIsCompact,
   usageUserAgent,
-} from '../utils/records'
-import UsageBillingCell from './UsageBillingCell.vue'
-import UsageClientIpCell from './UsageClientIpCell.vue'
-import UsageLatencyCell from './UsageLatencyCell.vue'
-import UsageModelCell from './UsageModelCell.vue'
-import UsageReasoningEffortCell from './UsageReasoningEffortCell.vue'
-import UsageTokenCell from './UsageTokenCell.vue'
-import UsageTransportBadge from './UsageTransportBadge.vue'
+} from './shared/presenter'
 
 // 使用记录表只负责该领域的单元格呈现；筛选与分页由页面组合。
 withDefaults(
   defineProps<{
-    columns: BaseTableColumn<UsageDisplayRecord>[]
-    rows: UsageDisplayRecord[]
+    columns: BaseTableColumn<UsageListRecord>[]
+    rows: UsageListRecord[]
     loading?: boolean
     emptyText?: string
   }>(),
@@ -53,7 +52,7 @@ withDefaults(
     <template #provider="{ row }">
       <ProviderIconGroup
         :provider="String(row.provider || '')"
-        :authentication-kind="usageAuthenticationKind(row)"
+        :authentication-kind="row.authenticationKind"
       />
     </template>
 
@@ -105,7 +104,7 @@ withDefaults(
       <div class="inline-flex max-w-full items-center gap-1.5 whitespace-nowrap">
         <code class="font-mono text-cp-sm font-emphasis">{{ row.route || '—' }}</code>
         <span
-          v-if="usageIsCompact(row)"
+          v-if="row.compact"
           class="inline-flex shrink-0 text-cp-orange-text"
           title="压缩请求"
           aria-label="压缩请求"
diff --git a/frontend/src/views/usage/components/UsageTokenCell.vue b/frontend/src/components/usage/UsageTokenCell.vue
similarity index 88%
rename from frontend/src/views/usage/components/UsageTokenCell.vue
rename to frontend/src/components/usage/UsageTokenCell.vue
index d2ae1a20e..6910163be 100644
--- a/frontend/src/views/usage/components/UsageTokenCell.vue
+++ b/frontend/src/components/usage/UsageTokenCell.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { UsageDisplayRecord } from '../utils/records'
+import type { UsageListRecord } from '@/api'
+
 import { Archive, ArrowDown, ArrowUp } from '@lucide/vue'
 
 import { computed } from 'vue'
-import { usageTokenDetails } from '../utils/records'
-import UsageDetailPopover from './UsageDetailPopover.vue'
+import UsageDetailPopover from '@/components/usage/UsageDetailPopover.vue'
 
 const props = defineProps<{
-  record: Pick<UsageDisplayRecord, 'tokenDetails'>
+  record: Pick<UsageListRecord, 'tokenDetails'>
 }>()
 
-const tokenDetails = computed(() => usageTokenDetails(props.record))
+const tokenDetails = computed(() => props.record.tokenDetails)
 const tokenItems = computed(() => [
   { label: '输入 Token', value: tokenDetails.value.inputTokensDisplay },
   { label: '输出 Token', value: tokenDetails.value.outputTokensDisplay },
diff --git a/frontend/src/views/usage/components/UsageTransportBadge.vue b/frontend/src/components/usage/UsageTransportBadge.vue
similarity index 80%
rename from frontend/src/views/usage/components/UsageTransportBadge.vue
rename to frontend/src/components/usage/UsageTransportBadge.vue
index e3fcba961..5bc9f7058 100644
--- a/frontend/src/views/usage/components/UsageTransportBadge.vue
+++ b/frontend/src/components/usage/UsageTransportBadge.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usageTransportType, usageTransportTypeClass } from '../utils/records'
+import { usageTransportType, usageTransportTypeClass } from './shared/presenter'
 
 defineProps<{
   transport?: string | null
diff --git a/frontend/src/components/usage/shared/columns.ts b/frontend/src/components/usage/shared/columns.ts
new file mode 100644
index 000000000..1c03063ee
--- /dev/null
+++ b/frontend/src/components/usage/shared/columns.ts
@@ -0,0 +1,35 @@
+import type { UsageListRecord } from '@/api'
+import { defineTableColumns } from '@codex-proxy/ui'
+import { formatProviderLabel } from '@/utils/providers'
+
+export const usageRecordColumns = defineTableColumns<UsageListRecord>([
+  { key: 'clientApiKeyName', label: '密钥名称', kind: 'identity', size: 'xl' },
+  {
+    key: 'accountEmail',
+    hideable: false,
+    label: '账号',
+    kind: 'identity',
+    size: '3xl',
+  },
+  { key: 'accountPlanType', label: '订阅', kind: 'status', size: 'sm', fixedWidth: true },
+  {
+    key: 'provider',
+    label: '平台/类型',
+    kind: 'status',
+    size: 'md',
+    fixedWidth: true,
+    format: (value: unknown) => formatProviderLabel(typeof value === 'string' ? value : null),
+  },
+  { key: 'model', label: '模型', kind: 'custom', size: 'xl' },
+  { key: 'reasoningEffort', label: '推理强度', kind: 'status', size: 'md', align: 'left' },
+  { key: 'route', label: '端点', kind: 'mono' },
+  { key: 'upstreamTransport', label: '上游', kind: 'status', size: 'md' },
+  { key: 'clientTransport', label: '接入', kind: 'status', size: 'md' },
+  { key: 'tokenDetails', label: 'TOKEN', kind: 'numeric', size: 'xl' },
+  { key: 'billing', label: '费用', kind: 'numeric', size: 'xl' },
+  { key: 'latency', label: '延迟', kind: 'numeric', size: 'xl' },
+  { key: 'createdAtDisplay', label: '时间', kind: 'datetime' },
+  { key: 'clientIp', label: 'IP', kind: 'custom', size: '3xl' },
+  { key: 'userAgent', label: 'User-Agent', kind: 'custom', size: '4xl' },
+  { key: 'actions', label: '操作', kind: 'actions', size: 'sm', hideable: false },
+])
diff --git a/frontend/src/components/usage/shared/health.ts b/frontend/src/components/usage/shared/health.ts
new file mode 100644
index 000000000..e5ef3bd01
--- /dev/null
+++ b/frontend/src/components/usage/shared/health.ts
@@ -0,0 +1,68 @@
+import type { DashboardHealthStatus } from '@/api'
+import { formatInteger } from '@/utils/format'
+
+interface DashboardHealthStatusMeta {
+  label: string
+  cellClass: string
+  badgeClass: string
+}
+
+export const healthLegend = [
+  { status: 'no_data', label: '无有效样本' },
+  { status: 'unavailable', label: '不可达' },
+  { status: 'unstable', label: '不稳定' },
+  { status: 'low_sample', label: '低样本' },
+  { status: 'stable', label: '稳定' },
+] satisfies { status: DashboardHealthStatus, label: string }[]
+
+export const healthStatusMeta: Record<DashboardHealthStatus, DashboardHealthStatusMeta> = {
+  future: {
+    label: '未来',
+    cellClass: 'bg-cp-bg-container-disabled opacity-60',
+    badgeClass: 'bg-cp-fill-tertiary text-cp-text-quaternary',
+  },
+  no_data: {
+    label: '无有效样本',
+    cellClass: 'bg-cp-border',
+    badgeClass: 'bg-cp-fill-tertiary text-cp-text-secondary',
+  },
+  unavailable: {
+    label: '不可达',
+    cellClass: 'bg-cp-error',
+    badgeClass: 'bg-cp-error-container text-cp-error-on-container',
+  },
+  unstable: {
+    label: '不稳定',
+    cellClass: 'bg-cp-warning',
+    badgeClass: 'bg-cp-warning-container text-cp-warning-on-container',
+  },
+  low_sample: {
+    label: '低样本',
+    cellClass: 'bg-cp-cyan-solid',
+    badgeClass: 'bg-cp-cyan-container text-cp-cyan-on-container',
+  },
+  stable: {
+    label: '稳定',
+    cellClass: 'bg-cp-success',
+    badgeClass: 'bg-cp-success-container text-cp-success-on-container',
+  },
+}
+
+export function healthReliabilityValueClass(successRequests: number, failedRequests: number) {
+  const eligibleRequests = Math.max(0, successRequests) + Math.max(0, failedRequests)
+  if (eligibleRequests === 0)
+    return 'text-cp-text-quaternary'
+
+  const reliability = (Math.max(0, successRequests) / eligibleRequests) * 100
+  if (reliability >= 99.5)
+    return 'text-cp-success-text'
+  if (reliability >= 98)
+    return 'text-cp-cyan-text'
+  if (reliability >= 95)
+    return 'text-cp-warning-text'
+  return 'text-cp-error-text'
+}
+
+export function formatHealthCount(value: number) {
+  return formatInteger(Math.max(0, value))
+}
diff --git a/frontend/src/components/usage/shared/presenter.ts b/frontend/src/components/usage/shared/presenter.ts
new file mode 100644
index 000000000..08935d56f
--- /dev/null
+++ b/frontend/src/components/usage/shared/presenter.ts
@@ -0,0 +1,154 @@
+import type { UsageListRecord, UsageRecordDetail } from '@/api'
+import { formatDuration } from '@/utils/format'
+
+// 列表与详情使用独立读模型，展示函数只依赖两者的公共字段。
+type UsageCommonRecord = UsageListRecord | UsageRecordDetail
+
+export function usageTransportType(transport?: string | null) {
+  if (transport === 'websocket')
+    return 'WS'
+
+  if (transport === 'http_sse')
+    return 'SSE'
+  if (transport === 'http' || transport === 'http_json')
+    return 'HTTP'
+  return transport || '—'
+}
+
+export function usageTransportTypeClass(transport?: string | null) {
+  const type = usageTransportType(transport)
+  if (type === 'WS')
+    return 'bg-cp-blue-container text-cp-blue-on-container'
+  if (type === 'SSE')
+    return 'bg-cp-green-container text-cp-green-on-container'
+  return 'bg-cp-fill-tertiary text-cp-text-secondary'
+}
+
+export function usageAccountText(record: UsageCommonRecord) {
+  return record.accountEmail || record.accountName || record.accountId || '—'
+}
+
+export function usageClientIp(record: { clientIp?: string | null }) {
+  return record.clientIp || '—'
+}
+
+export function usageUserAgent(record: { userAgent?: string | null }) {
+  return record.userAgent || '—'
+}
+
+export function usageReasoningEffort(record: UsageCommonRecord) {
+  const reasoningEffort = record.reasoningEffort || '—'
+  if (record.subagentKind)
+    return reasoningEffort
+  return record.reasoningPreset || reasoningEffort
+}
+
+export function usageModelDisplay(record: UsageCommonRecord) {
+  const requestedModel = record.requestedModel || ''
+  const upstreamModel = record.upstreamModel || ''
+  const storedModel = record.model || ''
+  const primary = requestedModel || storedModel || upstreamModel || '—'
+  const secondary
+    = upstreamModel && upstreamModel !== primary
+      ? upstreamModel
+      : requestedModel && storedModel && storedModel !== requestedModel
+        ? storedModel
+        : ''
+
+  const responseModel = record.upstreamResponseModel || ''
+  const returned = responseModel && responseModel !== primary ? responseModel : ''
+  const routes = []
+  if (secondary && secondary !== returned) {
+    routes.push({
+      model: secondary,
+      kind: 'mapped' as const,
+      description: `网关映射后发送给上游的模型：${secondary}`,
+    })
+  }
+  if (returned) {
+    routes.push({
+      model: returned,
+      kind: 'returned' as const,
+      description: returned === secondary
+        ? `上游返回模型：${returned}（与网关映射后发送的模型一致）`
+        : `上游返回模型：${returned}`,
+    })
+  }
+
+  return { primary, secondary, routes }
+}
+
+export function usageLatencyDetails(record: Pick<UsageCommonRecord, 'latencyDetails' | 'firstTokenLatencyMs' | 'latencyMs'>) {
+  const latencyDetails = record.latencyDetails
+  const firstTokenMs = durationValue(
+    record.firstTokenLatencyMs ?? latencyDetails?.firstTokenMs,
+  )
+  const firstEventMs = durationValue(latencyDetails?.firstEventMs)
+  const totalMs = durationValue(record.latencyMs)
+  const firstReasoningMs = durationValue(latencyDetails?.firstReasoningMs)
+  const firstTextMs = durationValue(latencyDetails?.firstTextMs)
+  const breakdownItems = []
+
+  if (firstTokenMs !== null && totalMs !== null && firstTokenMs <= totalMs) {
+    breakdownItems.push({ label: '首字等待', value: formatDuration(firstTokenMs) })
+
+    if (firstTextMs !== null && firstTextMs >= firstTokenMs && firstTextMs <= totalMs) {
+      const beforeTextMs = firstTextMs - firstTokenMs
+      if (beforeTextMs > 0) {
+        breakdownItems.push({
+          label: firstReasoningMs === firstTokenMs ? '推理到正文' : '首个输出到正文',
+          value: formatDuration(beforeTextMs),
+        })
+      }
+      breakdownItems.push({ label: '正文生成', value: formatDuration(totalMs - firstTextMs) })
+    }
+    else {
+      breakdownItems.push({
+        label: '首个输出后完成',
+        value: formatDuration(totalMs - firstTokenMs),
+      })
+    }
+  }
+
+  const transportItems = [
+    { label: '准入判定', value: durationValue(latencyDetails?.admissionDecisionMs) },
+    { label: '账号选择等待', value: durationValue(latencyDetails?.accountSelectionWaitMs) },
+    {
+      label: '传输决策等待',
+      value: durationValue(latencyDetails?.transportDecisionWaitMs),
+    },
+    { label: 'WebSocket 连接', value: durationValue(latencyDetails?.wsConnectMs) },
+    { label: '上游响应头', value: durationValue(latencyDetails?.upstreamHeadersMs) },
+    { label: '首个上游事件', value: firstEventMs },
+    { label: '上游处理', value: durationValue(latencyDetails?.openaiProcessingMs) },
+  ]
+    .filter(item => item.value !== null)
+    .map(item => ({ ...item, value: formatDuration(item.value) }))
+
+  if (
+    latencyDetails?.capacityUsedSlots != null
+    && latencyDetails.capacityTotalSlots != null
+  ) {
+    transportItems.push({
+      label: '账号槽位快照',
+      value: `${latencyDetails.capacityUsedSlots} / ${latencyDetails.capacityTotalSlots}`,
+    })
+  }
+
+  return {
+    // SSE 可能先收到生命周期事件而没有文本或推理增量；这不是首字，须保留原始语义。
+    firstOutputLabel: firstTokenMs === null && firstEventMs !== null ? '首事件' : '首字',
+    firstOutputDisplay: formatDuration(firstTokenMs ?? firstEventMs),
+    totalDisplay: formatDuration(totalMs),
+    breakdownItems,
+    transportItems,
+  }
+}
+
+export function usageBillingText(record: Pick<UsageCommonRecord, 'billing'>) {
+  return record.billing?.totalAmountDisplay || '—'
+}
+
+function durationValue(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : null
+}
diff --git a/frontend/src/composables/useAccountGroupCatalog.ts b/frontend/src/composables/useAccountGroupCatalog.ts
index 0115c79c2..880cd0ac1 100644
--- a/frontend/src/composables/useAccountGroupCatalog.ts
+++ b/frontend/src/composables/useAccountGroupCatalog.ts
@@ -2,18 +2,25 @@ import type { AccountGroup } from '@/api'
 
 import { onMounted, shallowRef } from 'vue'
 import { getAccountGroups } from '@/api'
+import { useRequestState } from './useRequestState'
 
 export function useAccountGroupCatalog(options: { immediate?: boolean } = {}) {
   const groups = shallowRef<AccountGroup[]>([])
-  const loading = shallowRef(false)
+  const request = useRequestState()
+  const { loading } = request
 
   async function loadGroups() {
-    loading.value = true
+    const requestId = request.start()
+    const requestOptions = { signal: request.signal }
     try {
-      const first = await getAccountGroups({ page: 1, pageSize: 200 })
+      const first = await getAccountGroups({ page: 1, pageSize: 200 }, requestOptions)
+      if (!request.isCurrent(requestId))
+        return []
       const items = [...first.items]
       for (let page = 2; page <= first.page.totalPages; page += 1) {
-        const result = await getAccountGroups({ page, pageSize: first.page.pageSize })
+        const result = await getAccountGroups({ page, pageSize: first.page.pageSize }, requestOptions)
+        if (!request.isCurrent(requestId))
+          return []
         items.push(...result.items)
       }
       groups.value = items
@@ -23,7 +30,7 @@ export function useAccountGroupCatalog(options: { immediate?: boolean } = {}) {
       return []
     }
     finally {
-      loading.value = false
+      request.finish(requestId)
     }
   }
 
diff --git a/frontend/src/composables/useAsyncAction.ts b/frontend/src/composables/useAsyncAction.ts
index bf0c10f8f..baf126aba 100644
--- a/frontend/src/composables/useAsyncAction.ts
+++ b/frontend/src/composables/useAsyncAction.ts
@@ -21,15 +21,16 @@ function resolveErrorText(error: unknown, errorText: string | false | undefined)
   return errorMessage(error, errorText || '操作失败')
 }
 
-export function useAsyncAction() {
+export function useAsyncAction(defaults: AsyncActionRunOptions = {}) {
   const loading = shallowRef(false)
 
-  async function run<T>(task: () => MaybePromise<T>, options: AsyncActionRunOptions = {}) {
+  async function run<T>(task: () => MaybePromise<T>, overrides: AsyncActionRunOptions = {}) {
     if (loading.value) {
       return undefined
     }
 
     loading.value = true
+    const options = { ...defaults, ...overrides }
     try {
       const execute = async () => task()
       return options.minimumMs === undefined
diff --git a/frontend/src/composables/useProxyCatalog.ts b/frontend/src/composables/useProxyCatalog.ts
index 43b5afac1..24234332b 100644
--- a/frontend/src/composables/useProxyCatalog.ts
+++ b/frontend/src/composables/useProxyCatalog.ts
@@ -1,26 +1,34 @@
 import type { OutboundProxyRecord } from '@/api'
 import { onMounted, shallowRef } from 'vue'
 import { getProxies } from '@/api'
+import { useRequestState } from './useRequestState'
 
 export function useProxyCatalog() {
   const proxies = shallowRef<OutboundProxyRecord[]>([])
-  const loading = shallowRef(false)
+  const request = useRequestState()
+  const { loading } = request
 
   async function loadProxies() {
     if (loading.value)
       return
-    loading.value = true
+    const requestId = request.start()
+    const requestOptions = { signal: request.signal }
     try {
-      const first = await getProxies({ page: 1, pageSize: 200 })
+      const first = await getProxies({ page: 1, pageSize: 200 }, requestOptions)
+      if (!request.isCurrent(requestId))
+        return
       const items = [...first.items]
       for (let page = 2; page <= first.page.totalPages; page += 1) {
-        items.push(...(await getProxies({ page, pageSize: 200 })).items)
+        const result = await getProxies({ page, pageSize: first.page.pageSize }, requestOptions)
+        if (!request.isCurrent(requestId))
+          return
+        items.push(...result.items)
       }
       proxies.value = items
     }
     catch {}
     finally {
-      loading.value = false
+      request.finish(requestId)
     }
   }
 
diff --git a/frontend/src/composables/useStablePagedQuery.ts b/frontend/src/composables/useStablePagedQuery.ts
index d4ae36f14..bd25107ad 100644
--- a/frontend/src/composables/useStablePagedQuery.ts
+++ b/frontend/src/composables/useStablePagedQuery.ts
@@ -56,6 +56,8 @@ export function useStablePagedQuery<Result extends PageResult>(options: {
   }
 
   function reloadFromStart(execution: { silent?: boolean } = {}) {
+    // 重新分页后旧记录不再对应当前页，失败时也不能留在新页号下。
+    items.value = []
     currentPage.value = 1
     total.value = 0
     return execute(1, execution)
diff --git a/frontend/src/layout/components/AppSidebar.vue b/frontend/src/layout/components/AppSidebar.vue
index f762fe48d..85a9dc984 100644
--- a/frontend/src/layout/components/AppSidebar.vue
+++ b/frontend/src/layout/components/AppSidebar.vue
@@ -34,7 +34,7 @@ import { useAuthStore } from '@/stores/modules/auth'
 import { usePluginViewsStore } from '@/stores/modules/plugin-views'
 import { useSystemUpdateStore } from '@/stores/modules/system-update'
 import { useThemeStore } from '@/stores/modules/theme'
-import { pluginPageLocation, shortPluginInstanceId } from '@/views/plugins/utils/navigation'
+import { pluginPageLocation, shortPluginInstanceId } from '@/utils/plugin'
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/layout/components/SystemUpdateModal/index.vue b/frontend/src/layout/components/system-update-modal/index.vue
similarity index 100%
rename from frontend/src/layout/components/SystemUpdateModal/index.vue
rename to frontend/src/layout/components/system-update-modal/index.vue
diff --git a/frontend/src/layout/components/SystemUpdateModal/presenter.ts b/frontend/src/layout/components/system-update-modal/presenter.ts
similarity index 100%
rename from frontend/src/layout/components/SystemUpdateModal/presenter.ts
rename to frontend/src/layout/components/system-update-modal/presenter.ts
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index f5c87e252..3a4f521ea 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -10,7 +10,7 @@ import { useUiStore } from '@/stores/modules/ui'
 
 import AppSidebar from './components/AppSidebar.vue'
 import FloatingSidebarToggle from './components/FloatingSidebarToggle.vue'
-import SystemUpdateModal from './components/SystemUpdateModal/index.vue'
+import SystemUpdateModal from './components/system-update-modal/index.vue'
 
 const uiStore = useUiStore()
 const systemUpdateStore = useSystemUpdateStore()
diff --git a/frontend/src/utils/client.ts b/frontend/src/utils/client.ts
index c6bb137f7..f3b820978 100644
--- a/frontend/src/utils/client.ts
+++ b/frontend/src/utils/client.ts
@@ -1,9 +1,9 @@
 import { API_BASE_URL } from '@/api/constants'
 
-export const CODEX_DEFAULT_MODEL = 'gpt-5.6-terra'
+const CODEX_DEFAULT_MODEL = 'gpt-5.6-terra'
 export const CODEX_WEBSOCKET_ENABLED_BY_DEFAULT = false
 
-export interface CodexConfigInput {
+interface CodexConfigInput {
   apiKey: string
   baseUrl: string
   websocketEnabled?: boolean
@@ -45,7 +45,7 @@ goals = true`
   }
 }
 
-export interface CodexCcSwitchImportInput {
+interface CodexCcSwitchImportInput {
   apiKey: string
   baseUrl: string
   providerName: string
@@ -86,11 +86,7 @@ function buildUsageScript(apiKey: string, baseUrl: string) {
 }
 
 export function buildCodexCcSwitchImportDeeplink(input: CodexCcSwitchImportInput): string {
-  const configFiles = buildCodexConfigFiles({
-    apiKey: input.apiKey,
-    baseUrl: input.baseUrl,
-    websocketEnabled: input.websocketEnabled ?? CODEX_WEBSOCKET_ENABLED_BY_DEFAULT,
-  })
+  const configFiles = buildCodexConfigFiles(input)
   // 与界面共用原生生图配置；保留 auth 载荷和独立字段，兼容旧版 CCSwitch。
   const config = encodeBase64(JSON.stringify({
     auth: configFiles.auth,
diff --git a/frontend/src/views/accounts/utils/visualTone.ts b/frontend/src/utils/color.ts
similarity index 75%
rename from frontend/src/views/accounts/utils/visualTone.ts
rename to frontend/src/utils/color.ts
index 7101cc420..ed1139289 100644
--- a/frontend/src/views/accounts/utils/visualTone.ts
+++ b/frontend/src/utils/color.ts
@@ -1,4 +1,4 @@
-export type PresetVisualTone = 'blue' | 'cyan' | 'green' | 'orange'
+type PresetVisualTone = 'blue' | 'cyan' | 'green' | 'orange'
 
 const presetVisualTones: readonly PresetVisualTone[] = ['blue', 'green', 'orange', 'cyan']
 const presetVisualToneClasses = {
@@ -21,10 +21,7 @@ export function stableVisualIndex(value: unknown, length: number): number {
 }
 
 /** 为无状态含义的身份与分类生成稳定色调，不把颜色误解为成功或警告。 */
-export function stablePresetVisualTone(value: unknown): PresetVisualTone {
-  return presetVisualTones[stableVisualIndex(value, presetVisualTones.length)]!
-}
-
 export function stablePresetVisualToneClass(value: unknown): string {
-  return presetVisualToneClasses[stablePresetVisualTone(value)]
+  const tone = presetVisualTones[stableVisualIndex(value, presetVisualTones.length)]!
+  return presetVisualToneClasses[tone]
 }
diff --git a/frontend/src/utils/data.ts b/frontend/src/utils/data.ts
index ea2175081..504ccafe8 100644
--- a/frontend/src/utils/data.ts
+++ b/frontend/src/utils/data.ts
@@ -1,45 +1,22 @@
-import type { RequestLocation } from '@/api'
-
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
-export function parseJsonObject(text: string, maximumBytes?: number): Record<string, unknown> {
+type JsonObjectResult
+  = | { value: Record<string, unknown>, error: undefined }
+    | { value: undefined, error: string }
+
+export function parseJsonObject(text: string, maximumBytes?: number): JsonObjectResult {
   let value: unknown
   try {
     value = JSON.parse(text)
   }
   catch {
-    throw new Error('请输入有效的 JSON 对象')
+    return { value: undefined, error: '请输入有效的 JSON 对象' }
   }
   if (!isRecord(value))
-    throw new Error('输入必须是 JSON 对象')
+    return { value: undefined, error: '输入必须是 JSON 对象' }
   if (maximumBytes !== undefined && new TextEncoder().encode(JSON.stringify(value)).byteLength > maximumBytes)
-    throw new Error(`输入不能超过 ${maximumBytes / 1024} KiB`)
-  return value
-}
-
-export function jsonObjectError(text: string, maximumBytes?: number) {
-  try {
-    parseJsonObject(text, maximumBytes)
-    return undefined
-  }
-  catch (error) {
-    return (error as Error).message
-  }
-}
-
-export function normalizeRequestLocation(location: RequestLocation): RequestLocation {
-  return {
-    country: location.country.trim().toUpperCase(),
-    region: location.region.trim(),
-    city: location.city.trim(),
-    timezone: location.timezone.trim(),
-  }
-}
-
-export function requestLocationError(location: RequestLocation): string {
-  if (!/^[A-Z]{2}$/.test(location.country) || !location.region || !location.city || !location.timezone)
-    return '请填写两位国家代码、地区、城市和 IANA 时区'
-  return ''
+    return { value: undefined, error: `输入不能超过 ${maximumBytes / 1024} KiB` }
+  return { value, error: undefined }
 }
diff --git a/frontend/src/utils/format.ts b/frontend/src/utils/format.ts
index bd9ea8b51..068cdf171 100644
--- a/frontend/src/utils/format.ts
+++ b/frontend/src/utils/format.ts
@@ -1,10 +1,3 @@
-export function parseTimestamp(value: string | number | Date | null | undefined): number | null {
-  if (value === null || value === undefined)
-    return null
-  const timestamp = new Date(value).getTime()
-  return Number.isFinite(timestamp) ? timestamp : null
-}
-
 const integerFormatter = new Intl.NumberFormat('zh-CN')
 
 const localizedCompactFormatter = new Intl.NumberFormat('zh-CN', {
@@ -44,3 +37,44 @@ export function formatCompactNumber(value: number) {
 
   return formatInteger(normalized)
 }
+
+const percentFormatter = new Intl.NumberFormat('zh-CN', {
+  style: 'percent',
+  maximumFractionDigits: 1,
+})
+
+export function formatPercent(value?: number | null) {
+  return value == null || !Number.isFinite(value) ? '—' : percentFormatter.format(value)
+}
+
+export function formatDuration(value?: number | null) {
+  if (value == null || !Number.isFinite(value) || value < 0)
+    return '—'
+  if (value < 1_000)
+    return `${Math.round(value)} ms`
+  if (value < 60_000) {
+    const seconds = value / 1_000
+    return `${seconds.toFixed(seconds >= 10 ? 1 : 2).replace(/\.0+$|(?<=\.\d)0$/, '')} s`
+  }
+  return `${(value / 60_000).toFixed(1).replace(/\.0$/, '')} min`
+}
+
+export function decimalDisplayNumber(value?: string | number | null) {
+  if (value == null)
+    return null
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function formatUsd(value?: string | number | null, precise = false) {
+  const parsed = decimalDisplayNumber(value)
+  if (parsed == null)
+    return '—'
+  const fractionDigits = precise || (Math.abs(parsed) > 0 && Math.abs(parsed) < 0.01) ? 4 : 2
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(parsed)
+}
diff --git a/frontend/src/utils/location.ts b/frontend/src/utils/location.ts
new file mode 100644
index 000000000..1ce976c75
--- /dev/null
+++ b/frontend/src/utils/location.ts
@@ -0,0 +1,16 @@
+import type { RequestLocation } from '@/api'
+
+export function normalizeRequestLocation(location: RequestLocation): RequestLocation {
+  return {
+    country: location.country.trim().toUpperCase(),
+    region: location.region.trim(),
+    city: location.city.trim(),
+    timezone: location.timezone.trim(),
+  }
+}
+
+export function requestLocationError(location: RequestLocation): string {
+  if (!/^[A-Z]{2}$/.test(location.country) || !location.region || !location.city || !location.timezone)
+    return '请填写两位国家代码、地区、城市和 IANA 时区'
+  return ''
+}
diff --git a/frontend/src/views/plugins/utils/navigation.ts b/frontend/src/utils/plugin.ts
similarity index 83%
rename from frontend/src/views/plugins/utils/navigation.ts
rename to frontend/src/utils/plugin.ts
index 0d63c60a7..905bddd1b 100644
--- a/frontend/src/views/plugins/utils/navigation.ts
+++ b/frontend/src/utils/plugin.ts
@@ -1,13 +1,11 @@
 import type { PluginManagementPage, PluginManagementView } from '@/api'
 
-export const PLUGIN_PAGE_ROUTE_NAME = 'plugin-page'
-
 export function pluginPageLocation(
   view: PluginManagementView,
   page: PluginManagementPage,
 ) {
   return {
-    name: PLUGIN_PAGE_ROUTE_NAME,
+    name: 'plugin-page',
     params: {
       instanceId: view.target.instanceId,
       pageId: page.id,
diff --git a/frontend/src/utils/providers.ts b/frontend/src/utils/providers.ts
index 7af7b5ae1..71dc696f2 100644
--- a/frontend/src/utils/providers.ts
+++ b/frontend/src/utils/providers.ts
@@ -2,26 +2,23 @@ import type { Component } from 'vue'
 import { Key, LinkAlt, Openai, Xai } from '@boxicons/vue'
 import { Fingerprint, Plug } from '@lucide/vue'
 
-export const PROVIDER_DISPLAY_NAMES = {
+const PROVIDER_DISPLAY_NAMES = {
   openai: 'OpenAI',
   xai: 'xAI',
 } as const
 
 export const PROVIDER_IDS = Object.keys(PROVIDER_DISPLAY_NAMES) as Array<keyof typeof PROVIDER_DISPLAY_NAMES>
 
-export type SupportedProvider = keyof typeof PROVIDER_DISPLAY_NAMES
+type SupportedProvider = keyof typeof PROVIDER_DISPLAY_NAMES
 
 export function isSupportedProvider(value: unknown): value is SupportedProvider {
   return typeof value === 'string' && Object.hasOwn(PROVIDER_DISPLAY_NAMES, value)
 }
 
-export function providerDisplayName(value?: string | null) {
-  return isSupportedProvider(value) ? PROVIDER_DISPLAY_NAMES[value] : undefined
-}
-
 export function formatProviderLabel(value?: string | null, fallback = '—') {
   const normalized = value?.trim()
-  return providerDisplayName(normalized?.toLowerCase()) ?? (normalized || fallback)
+  const provider = normalized?.toLowerCase()
+  return isSupportedProvider(provider) ? PROVIDER_DISPLAY_NAMES[provider] : (normalized || fallback)
 }
 
 export function providerIcon(value: string): Component {
diff --git a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
index 2077778cf..ac2516aef 100644
--- a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
+++ b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
@@ -3,8 +3,8 @@ import type { useAccountConnectionTest } from '../composables/useAccountConnecti
 
 import { BaseButton, BaseIconButton, BaseModal, BaseSelect } from '@codex-proxy/ui'
 import { RefreshCw } from '@lucide/vue'
+import AccountStatusBadge from './account-status-badge/index.vue'
 import AccountIdentityCell from './AccountIdentityCell.vue'
-import AccountStatusBadge from './AccountStatusBadge/index.vue'
 
 type ConnectionTest = ReturnType<typeof useAccountConnectionTest>
 
diff --git a/frontend/src/views/accounts/components/AccountEditModal.vue b/frontend/src/views/accounts/components/AccountEditModal.vue
index f5d2bab74..d14eb7740 100644
--- a/frontend/src/views/accounts/components/AccountEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountEditModal.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { AccountRow } from '../constants'
 import type { ApiKeyAccountForm } from '../utils/upstreamApiKey'
-import type { AccountGroup, AccountModelAccess } from '@/api'
+
+import type { Account, AccountGroup, AccountModelAccess } from '@/api'
 
 import { BaseButton, BaseFormItem, BaseModal, BaseSegmented, BaseTextarea } from '@codex-proxy/ui'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
 import { isOpenAiApiKeyAccount, isOpenAiOAuthAccount } from '../utils/upstreamApiKey'
 import AccountApiKeyFields from './AccountApiKeyFields.vue'
 import AccountIdentityCell from './AccountIdentityCell.vue'
-import AccountPlanBadge from './AccountPlanBadge.vue'
 import AccountSettingsFields from './AccountSettingsFields.vue'
 
 defineProps<{
-  account: AccountRow | null
+  account: Account | null
   groups: AccountGroup[]
   groupsLoading: boolean
   saving: boolean
diff --git a/frontend/src/views/accounts/components/AccountIdentityCell.vue b/frontend/src/views/accounts/components/AccountIdentityCell.vue
index dc94b41ea..071aa7719 100644
--- a/frontend/src/views/accounts/components/AccountIdentityCell.vue
+++ b/frontend/src/views/accounts/components/AccountIdentityCell.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { getAccounts } from '@/api'
+import type { Account } from '@/api'
+
 import { computed } from 'vue'
 
-import { stablePresetVisualToneClass } from '../utils/visualTone'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
+import { stablePresetVisualToneClass } from '@/utils/color'
 import AccountNotesPopover from './AccountNotesPopover.vue'
-import AccountPlanBadge from './AccountPlanBadge.vue'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-type AccountIdentity = Pick<AccountRow, 'id' | 'email' | 'planType' | 'planTypeDisplay'>
-  & Partial<Pick<AccountRow, 'accountId' | 'notes' | 'name' | 'authenticationKind'>>
+type AccountIdentity = Pick<Account, 'id' | 'email' | 'planType' | 'planTypeDisplay'>
+  & Partial<Pick<Account, 'accountId' | 'notes' | 'name' | 'authenticationKind'>>
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/views/accounts/components/AccountTableActions.vue b/frontend/src/views/accounts/components/AccountTableActions.vue
index b173dd5d9..ed7fe8437 100644
--- a/frontend/src/views/accounts/components/AccountTableActions.vue
+++ b/frontend/src/views/accounts/components/AccountTableActions.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { AccountRow } from '../constants'
+import type { Account } from '@/api'
+
 import { BaseIconButton, BaseMenuItem, BasePopover } from '@codex-proxy/ui'
 
 import { Download, KeyRound, MoreHorizontal, Pencil, Power, RefreshCw, RotateCcw, Trash2, Wifi } from '@lucide/vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  account: AccountRow
+  account: Account
   deleting: boolean
   downloadingCatalog: boolean
   recovering: boolean
@@ -15,14 +16,14 @@ const props = defineProps<{
   togglingScheduling: boolean
 }>()
 const emit = defineEmits<{
-  edit: [account: AccountRow]
-  delete: [account: AccountRow]
+  edit: [account: Account]
+  delete: [account: Account]
   recover: [accountId: string]
-  test: [account: AccountRow]
+  test: [account: Account]
   refresh: [accountId: string]
-  reauthorize: [account: AccountRow]
-  downloadModelCatalog: [account: AccountRow]
-  toggleScheduling: [account: AccountRow]
+  reauthorize: [account: Account]
+  downloadModelCatalog: [account: Account]
+  toggleScheduling: [account: Account]
 }>()
 
 const credentialEligible = computed(() => props.account.authenticationKind === 'oauth')
diff --git a/frontend/src/views/accounts/components/AccountUsagePanel.vue b/frontend/src/views/accounts/components/AccountUsagePanel.vue
index 25659951a..b719d026a 100644
--- a/frontend/src/views/accounts/components/AccountUsagePanel.vue
+++ b/frontend/src/views/accounts/components/AccountUsagePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AccountRow } from '../constants'
+import type { Account } from '@/api'
 
 import { BaseTable, defineTableColumns } from '@codex-proxy/ui'
 import { Sigma } from '@lucide/vue'
@@ -7,10 +7,10 @@ import { computed } from 'vue'
 import { modelSuccessRateTextClass } from '../constants'
 
 const props = defineProps<{
-  account: AccountRow
+  account: Account
 }>()
 
-type AccountModelUsage = AccountRow['usage']['models'][number]
+type AccountModelUsage = Account['usage']['models'][number]
 
 const totalBilling = computed(() => props.account.usage.costs.find(cost => cost.currency.toUpperCase() === 'USD'))
 const totalBillingDisplay = computed(() => totalBilling.value?.estimatedAmountDisplay ?? '—')
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountImportFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountCreateModal/AccountImportFields.vue
rename to frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountOAuthFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountCreateModal/AccountOAuthFields.vue
rename to frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue b/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
similarity index 94%
rename from frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
rename to frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
index ae4da5abd..9e1dd54ae 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AccountCreateSource } from './model'
+import type { AccountCreateSource } from '../../utils/accountCreate'
 import { BaseSegmented } from '@codex-proxy/ui'
 import { LayoutGrid } from '@lucide/vue'
 import { computed } from 'vue'
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountSetupFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
similarity index 95%
rename from frontend/src/views/accounts/components/AccountCreateModal/AccountSetupFields.vue
rename to frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
index 24ea5615d..83f2e6571 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/AccountSetupFields.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AccountCreateForm } from './model'
+import type { AccountCreateForm } from '../../utils/accountCreate'
 import type { AccountGroup } from '@/api'
 import { BaseFormItem, BaseTextarea } from '@codex-proxy/ui'
 import AccountSettingsFields from '../AccountSettingsFields.vue'
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/index.vue b/frontend/src/views/accounts/components/account-create-modal/index.vue
similarity index 95%
rename from frontend/src/views/accounts/components/AccountCreateModal/index.vue
rename to frontend/src/views/accounts/components/account-create-modal/index.vue
index 25d970c56..64214916f 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/index.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/index.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { AccountAuthorizationView } from '../../composables/useAccountAuthorization'
-import type { AccountRow } from '../../constants'
-import type { AccountCreateForm, AccountImportMode } from './model'
-import type { AccountGroup } from '@/api'
+import type { AccountCreateForm, AccountImportMode } from '../../utils/accountCreate'
+
+import type { Account, AccountGroup } from '@/api'
 import { Openai, Xai } from '@boxicons/vue'
 import { BaseButton, BaseIconButton, BaseModal, BaseSegmented } from '@codex-proxy/ui'
 import { Copy, LayoutGrid, Settings2 } from '@lucide/vue'
 import { computed } from 'vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
 import { useCopyText } from '@/composables/useCopyText'
+import { accountCreateProvider, accountProxyError } from '../../utils/accountCreate'
 import { accountModelAccessError } from '../../utils/modelAccess'
 import { parseAccountSchedulingForm } from '../../utils/schedulingForm'
 import AccountApiKeyFields from '../AccountApiKeyFields.vue'
 import AccountIdentityCell from '../AccountIdentityCell.vue'
-import AccountPlanBadge from '../AccountPlanBadge.vue'
 import AccountImportFields from './AccountImportFields.vue'
 import AccountOAuthFields from './AccountOAuthFields.vue'
 import AccountSetupFields from './AccountSetupFields.vue'
-import { accountCreateProvider, accountProxyError } from './model'
 import { resolveAccountCreatePresentation } from './presenter'
 
 const props = withDefaults(defineProps<{
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<{
   saving?: boolean
   oauthLoading?: boolean
   reauthorizing?: boolean
-  account?: AccountRow | null
+  account?: Account | null
   authorization: AccountAuthorizationView
 }>(), { saving: false, oauthLoading: false, reauthorizing: false, account: null })
 
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/presenter.ts b/frontend/src/views/accounts/components/account-create-modal/presenter.ts
similarity index 83%
rename from frontend/src/views/accounts/components/AccountCreateModal/presenter.ts
rename to frontend/src/views/accounts/components/account-create-modal/presenter.ts
index aa3a5d95b..128b43d4d 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/presenter.ts
+++ b/frontend/src/views/accounts/components/account-create-modal/presenter.ts
@@ -1,23 +1,8 @@
 import type { AccountAuthorizationView } from '../../composables/useAccountAuthorization'
-import type { AccountCreateForm } from './model'
+import type { AccountCreateForm } from '../../utils/accountCreate'
 import { formatProviderLabel } from '@/utils/providers'
+import { accountCreateProvider, accountImportModes } from '../../utils/accountCreate'
 import { apiKeyAccountError } from '../../utils/upstreamApiKey'
-import { accountCreateProvider } from './model'
-
-export function accountImportModes(provider: string | undefined) {
-  if (provider === 'openai') {
-    return [
-      { label: 'OAuth', value: 'oauth' as const },
-      { label: 'API Key', value: 'api_key' as const },
-      { label: 'AT', value: 'access_token' as const },
-      { label: 'RT', value: 'refresh_token' as const },
-      { label: '账号文件', value: 'json' as const },
-    ]
-  }
-  if (provider === 'xai')
-    return [{ label: 'OAuth', value: 'oauth' as const }, { label: '账号文件', value: 'json' as const }]
-  return []
-}
 
 export function resolveAccountCreatePresentation(input: {
   form: AccountCreateForm
diff --git a/frontend/src/views/accounts/components/AccountImportTasks/TaskDetail.vue b/frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountImportTasks/TaskDetail.vue
rename to frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue
diff --git a/frontend/src/views/accounts/components/AccountImportTasks/index.vue b/frontend/src/views/accounts/components/account-import-tasks/index.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountImportTasks/index.vue
rename to frontend/src/views/accounts/components/account-import-tasks/index.vue
diff --git a/frontend/src/views/accounts/components/AccountImportTasks/presenter.ts b/frontend/src/views/accounts/components/account-import-tasks/presenter.ts
similarity index 100%
rename from frontend/src/views/accounts/components/AccountImportTasks/presenter.ts
rename to frontend/src/views/accounts/components/account-import-tasks/presenter.ts
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/ActivityInsights.vue b/frontend/src/views/accounts/components/account-profile-modal/ActivityInsights.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountProfileModal/ActivityInsights.vue
rename to frontend/src/views/accounts/components/account-profile-modal/ActivityInsights.vue
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/Metrics.vue b/frontend/src/views/accounts/components/account-profile-modal/Metrics.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountProfileModal/Metrics.vue
rename to frontend/src/views/accounts/components/account-profile-modal/Metrics.vue
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/ProfileHero.vue b/frontend/src/views/accounts/components/account-profile-modal/ProfileHero.vue
similarity index 91%
rename from frontend/src/views/accounts/components/AccountProfileModal/ProfileHero.vue
rename to frontend/src/views/accounts/components/account-profile-modal/ProfileHero.vue
index 77d133133..ca56d2871 100644
--- a/frontend/src/views/accounts/components/AccountProfileModal/ProfileHero.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/ProfileHero.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { AccountRow } from '../../constants'
-import type { AccountProfileStatisticsResponse } from '@/api'
+import type { Account, AccountProfileStatisticsResponse } from '@/api'
+
 import { UserRound } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 
 import { accountProfileAvatarUrl } from '@/api'
-import { stablePresetVisualToneClass } from '../../utils/visualTone'
-import AccountPlanBadge from '../AccountPlanBadge.vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
+import { stablePresetVisualToneClass } from '@/utils/color'
 
 const props = defineProps<{
-  account: AccountRow
+  account: Account
   profile: AccountProfileStatisticsResponse | null
 }>()
 
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/Skeleton.vue b/frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountProfileModal/Skeleton.vue
rename to frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/Subscription.vue b/frontend/src/views/accounts/components/account-profile-modal/Subscription.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountProfileModal/Subscription.vue
rename to frontend/src/views/accounts/components/account-profile-modal/Subscription.vue
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/TokenActivity.vue b/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
similarity index 97%
rename from frontend/src/views/accounts/components/AccountProfileModal/TokenActivity.vue
rename to frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
index e68acf4e9..91d3c8c84 100644
--- a/frontend/src/views/accounts/components/AccountProfileModal/TokenActivity.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ProfileActivityLevel, ProfileActivityMode } from '../../utils/accountProfileStatistics'
+import type { ProfileActivityLevel, ProfileActivityMode } from './activity'
 import type { ProfileActivityCalendar } from '@/api'
 import { BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
 
 import { computed, shallowRef } from 'vue'
-import { buildProfileActivityGrid, profileActivityCellLabel } from '../../utils/accountProfileStatistics'
+import { buildProfileActivityGrid, profileActivityCellLabel } from './activity'
 
 const props = defineProps<{
   calendar: ProfileActivityCalendar | null
diff --git a/frontend/src/views/accounts/utils/accountProfileStatistics.ts b/frontend/src/views/accounts/components/account-profile-modal/activity.ts
similarity index 100%
rename from frontend/src/views/accounts/utils/accountProfileStatistics.ts
rename to frontend/src/views/accounts/components/account-profile-modal/activity.ts
diff --git a/frontend/src/views/accounts/components/AccountProfileModal/index.vue b/frontend/src/views/accounts/components/account-profile-modal/index.vue
similarity index 97%
rename from frontend/src/views/accounts/components/AccountProfileModal/index.vue
rename to frontend/src/views/accounts/components/account-profile-modal/index.vue
index 92ff8712a..1c637dec9 100644
--- a/frontend/src/views/accounts/components/AccountProfileModal/index.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { AccountRow } from '../../constants'
+import type { Account } from '@/api'
+
 import { BaseButton, BaseEmpty, BaseModal, BaseSkeleton } from '@codex-proxy/ui'
 
 import { RefreshCw, TriangleAlert } from '@lucide/vue'
@@ -12,7 +13,7 @@ import AccountProfileSkeleton from './Skeleton.vue'
 import AccountSubscription from './Subscription.vue'
 import AccountProfileTokenActivity from './TokenActivity.vue'
 
-const props = defineProps<{ account: AccountRow }>()
+const props = defineProps<{ account: Account }>()
 const open = defineModel<boolean>({ required: true })
 const accountId = toRef(() => props.account.id)
 const { profile, subscription, loading, error, load } = useAccountPersonalInfo({
diff --git a/frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/ForecastCapacity.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue
rename to frontend/src/views/accounts/components/account-quota-forecast-modal/ForecastCapacity.vue
diff --git a/frontend/src/views/accounts/components/AccountQuotaForecastModal/Skeleton.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountQuotaForecastModal/Skeleton.vue
rename to frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue
diff --git a/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
similarity index 98%
rename from frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue
rename to frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
index 068c3d8e0..8b24023e9 100644
--- a/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AccountRow } from '../../constants'
 import type { Account } from '@/api'
+
 import { BaseButton, BaseEmpty, BaseIconButton, BaseModal, BasePopover, BaseSegmented } from '@codex-proxy/ui'
 import { ChartNoAxesCombined, CircleAlert, RefreshCw } from '@lucide/vue'
 import { useIntervalFn, useNow } from '@vueuse/core'
@@ -11,7 +11,7 @@ import AccountIdentityCell from '../AccountIdentityCell.vue'
 import ForecastCapacity from './ForecastCapacity.vue'
 import ForecastSkeleton from './Skeleton.vue'
 
-const props = defineProps<{ account: AccountRow }>()
+const props = defineProps<{ account: Account }>()
 const emit = defineEmits<{ accountUpdated: [account: Account] }>()
 const open = defineModel<boolean>({ default: false })
 const period = ref('weekly')
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel/Credits.vue b/frontend/src/views/accounts/components/account-quota-panel/Credits.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountQuotaPanel/Credits.vue
rename to frontend/src/views/accounts/components/account-quota-panel/Credits.vue
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel/Entry.vue b/frontend/src/views/accounts/components/account-quota-panel/Entry.vue
similarity index 95%
rename from frontend/src/views/accounts/components/AccountQuotaPanel/Entry.vue
rename to frontend/src/views/accounts/components/account-quota-panel/Entry.vue
index cd184b5b0..03fef5924 100644
--- a/frontend/src/views/accounts/components/AccountQuotaPanel/Entry.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/Entry.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AccountQuotaWindow } from '../../constants'
+import type { AccountQuotaWindow } from '@/api'
 
 import { computed } from 'vue'
-import AccountRequestTimeline from '../AccountUsageWindow/AccountRequestTimeline.vue'
+import AccountRequestTimeline from '@/components/account/account-usage-window/AccountRequestTimeline.vue'
 import {
   quotaWindowLocalUsageDisplay,
   quotaWindowPresentation,
   resolveAccountUsageWindowPresentation,
-} from '../AccountUsageWindow/presenter'
+} from '@/components/account/account-usage-window/presenter'
 
 const props = defineProps<{
   label: string | null
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel/ResetCredits.vue b/frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue
similarity index 100%
rename from frontend/src/views/accounts/components/AccountQuotaPanel/ResetCredits.vue
rename to frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel/UsageLimits.vue b/frontend/src/views/accounts/components/account-quota-panel/UsageLimits.vue
similarity index 94%
rename from frontend/src/views/accounts/components/AccountQuotaPanel/UsageLimits.vue
rename to frontend/src/views/accounts/components/account-quota-panel/UsageLimits.vue
index bbbb4dd85..d0162ee22 100644
--- a/frontend/src/views/accounts/components/AccountQuotaPanel/UsageLimits.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/UsageLimits.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { AccountQuotaWindow } from '../../constants'
+import type { AccountQuotaWindow } from '@/api'
 import { computed } from 'vue'
+import { quotaWindowPresentation } from '@/components/account/account-usage-window/presenter'
 import { orderedPanelQuotaWindows } from '../../constants'
-import { quotaWindowPresentation } from '../AccountUsageWindow/presenter'
 
 const props = defineProps<{
   windows: AccountQuotaWindow[]
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel/index.vue b/frontend/src/views/accounts/components/account-quota-panel/index.vue
similarity index 93%
rename from frontend/src/views/accounts/components/AccountQuotaPanel/index.vue
rename to frontend/src/views/accounts/components/account-quota-panel/index.vue
index 819ea598e..e9239f208 100644
--- a/frontend/src/views/accounts/components/AccountQuotaPanel/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/index.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import type { AccountRow } from '../../constants'
+import type { Account } from '@/api'
+
 import { BaseEmpty, BaseIconButton } from '@codex-proxy/ui'
 
 import { ChartNoAxesCombined, RefreshCw, UserRound } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import { formatProviderLabel } from '@/utils/providers'
 import { groupedAccountQuotaWindows, orderedPanelQuotaWindows } from '../../constants'
-import AccountPlanBadge from '../AccountPlanBadge.vue'
-import AccountProfileModal from '../AccountProfileModal/index.vue'
-import AccountQuotaForecastModal from '../AccountQuotaForecastModal/index.vue'
+import AccountProfileModal from '../account-profile-modal/index.vue'
+import AccountQuotaForecastModal from '../account-quota-forecast-modal/index.vue'
 import AccountQuotaPanelEntry from './Entry.vue'
 import AccountResetCredits from './ResetCredits.vue'
 
 const props = defineProps<{
-  account: AccountRow
+  account: Account
   refreshing: boolean
 }>()
 
 const emit = defineEmits<{
-  accountUpdated: [account: AccountRow]
+  accountUpdated: [account: Account]
   refreshQuota: [accountId: string]
   quotaReset: [accountId: string]
 }>()
diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/Entry.vue b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
similarity index 95%
rename from frontend/src/views/accounts/components/AccountQuotaSummaryCell/Entry.vue
rename to frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
index 0dfe2d241..80a4ad229 100644
--- a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/Entry.vue
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AccountQuotaWindow } from '../../constants'
+import type { AccountQuotaWindow } from '@/api'
 
 import { BasePopover } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
-import AccountRequestTimeline from '../AccountUsageWindow/AccountRequestTimeline.vue'
-import AccountUsageWindow from '../AccountUsageWindow/index.vue'
-import { resolveAccountUsageWindowPresentation } from '../AccountUsageWindow/presenter'
+import AccountRequestTimeline from '@/components/account/account-usage-window/AccountRequestTimeline.vue'
+import AccountUsageWindow from '@/components/account/account-usage-window/index.vue'
+import { resolveAccountUsageWindowPresentation } from '@/components/account/account-usage-window/presenter'
 import AccountQuotaWindowGroup from './WindowGroup.vue'
 
 const props = withDefaults(defineProps<{
diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/WindowGroup.vue b/frontend/src/views/accounts/components/account-quota-summary-cell/WindowGroup.vue
similarity index 94%
rename from frontend/src/views/accounts/components/AccountQuotaSummaryCell/WindowGroup.vue
rename to frontend/src/views/accounts/components/account-quota-summary-cell/WindowGroup.vue
index f3f728a40..ede3d3e37 100644
--- a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/WindowGroup.vue
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/WindowGroup.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { AccountQuotaWindow } from '../../constants'
+import type { AccountQuotaWindow } from '@/api'
 
 import { computed } from 'vue'
-import { quotaWindowPresentation } from '../AccountUsageWindow/presenter'
+import { quotaWindowPresentation } from '@/components/account/account-usage-window/presenter'
 
 const props = withDefaults(defineProps<{
   label: string
diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/index.vue b/frontend/src/views/accounts/components/account-quota-summary-cell/index.vue
similarity index 95%
rename from frontend/src/views/accounts/components/AccountQuotaSummaryCell/index.vue
rename to frontend/src/views/accounts/components/account-quota-summary-cell/index.vue
index 408555b22..2de640353 100644
--- a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { AccountRow } from '../../constants'
+import type { Account } from '@/api'
 
 import { computed } from 'vue'
+import AccountUsageWindow from '@/components/account/account-usage-window/index.vue'
+import { quotaWindowPresentation } from '@/components/account/account-usage-window/presenter'
 import { groupedAccountQuotaWindows, visibleSummaryQuotaWindows } from '../../constants'
 import AccountCapacityIndicator from '../AccountCapacityIndicator.vue'
-import AccountUsageWindow from '../AccountUsageWindow/index.vue'
-import { quotaWindowPresentation } from '../AccountUsageWindow/presenter'
 import AccountQuotaSummaryEntry from './Entry.vue'
 import { recentlyUsedQuotaEntry, representativeQuotaWindow } from './presenter'
 
 const props = defineProps<{
-  account: AccountRow
+  account: Account
 }>()
 
 const quotaWindows = computed(() => props.account.quota.windows)
diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts b/frontend/src/views/accounts/components/account-quota-summary-cell/presenter.ts
similarity index 92%
rename from frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts
rename to frontend/src/views/accounts/components/account-quota-summary-cell/presenter.ts
index e8a516eff..ebac997ab 100644
--- a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/presenter.ts
@@ -1,6 +1,7 @@
-import type { AccountQuotaWindow, AccountQuotaWindowEntry, AccountRow } from '../../constants'
+import type { AccountQuotaWindowEntry } from '../../constants'
+import type { Account, AccountQuotaWindow } from '@/api'
 
-type AccountModelUsage = AccountRow['usage']['models'][number]
+type AccountModelUsage = Account['usage']['models'][number]
 
 /**
  * 根据账号最近一次模型请求选择对应额度组。
diff --git a/frontend/src/views/accounts/components/AccountStatusBadge/index.vue b/frontend/src/views/accounts/components/account-status-badge/index.vue
similarity index 98%
rename from frontend/src/views/accounts/components/AccountStatusBadge/index.vue
rename to frontend/src/views/accounts/components/account-status-badge/index.vue
index 23b1924f0..e0e074b1b 100644
--- a/frontend/src/views/accounts/components/AccountStatusBadge/index.vue
+++ b/frontend/src/views/accounts/components/account-status-badge/index.vue
@@ -3,8 +3,8 @@ import type { AccountErrorReason, AccountStatus } from '@/api'
 import { BasePopover, BaseScrollbar } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
-import { useUiClock } from '@/composables/useUiClock'
 import { resolveAccountStatusPresentation } from './presenter'
+import { useStatusClock } from './useStatusClock'
 
 const props = withDefaults(
   defineProps<{
@@ -30,7 +30,7 @@ const props = withDefaults(
   },
 )
 
-const now = useUiClock()
+const now = useStatusClock()
 const presentation = computed(() =>
   resolveAccountStatusPresentation({
     status: props.status,
diff --git a/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts b/frontend/src/views/accounts/components/account-status-badge/presenter.ts
similarity index 93%
rename from frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts
rename to frontend/src/views/accounts/components/account-status-badge/presenter.ts
index 9f2ba0b01..bc89b8112 100644
--- a/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts
+++ b/frontend/src/views/accounts/components/account-status-badge/presenter.ts
@@ -2,10 +2,9 @@ import type { Component } from 'vue'
 import type { AccountErrorReason, AccountStatus } from '@/api'
 import { AlertTriangle, CircleCheck, Gauge, Power, Timer } from '@lucide/vue'
 
-import { parseTimestamp } from '@/utils/format'
 import { errorReasonLabels, statusLabels, statusTones } from '../../constants'
 
-export type AccountStatusDisplayMode = AccountStatus | 'refresh_backoff'
+type AccountStatusDisplayMode = AccountStatus | 'refresh_backoff'
 
 type AccountStatusTone = (typeof statusTones)[AccountStatus]
 
@@ -25,7 +24,7 @@ interface AccountStatusStyle {
   icon: string
 }
 
-export interface AccountStatusPresentation {
+interface AccountStatusPresentation {
   mode: AccountStatusDisplayMode
   statusStyle: AccountStatusStyle
   label: string
@@ -41,7 +40,7 @@ export interface AccountStatusPresentation {
   triggerLabel: string
 }
 
-export interface AccountStatusPresentationInput {
+interface AccountStatusPresentationInput {
   status: AccountStatus
   errorReason: AccountErrorReason | null
   errorMessage: string | null
@@ -143,12 +142,9 @@ const errorRecoveryHints: Record<AccountErrorReason, string> = {
 export function resolveAccountStatusPresentation(
   input: AccountStatusPresentationInput,
 ): AccountStatusPresentation {
-  const nextRefreshTimestamp = input.nextRefreshAt === null
-    ? null
-    : parseTimestamp(input.nextRefreshAt)
   const isBackoff = input.status !== 'disabled'
-    && nextRefreshTimestamp !== null
-    && nextRefreshTimestamp > input.now
+    && input.nextRefreshAt !== null
+    && Date.parse(input.nextRefreshAt) > input.now
   const mode: AccountStatusDisplayMode = isBackoff ? 'refresh_backoff' : input.status
   const isFreeze = mode === 'rate_limited' && input.rateLimitReason === 'capacity_freeze'
   const waitsForProbe = isFreeze && input.recoveryProbeRequired
diff --git a/frontend/src/composables/useUiClock.ts b/frontend/src/views/accounts/components/account-status-badge/useStatusClock.ts
similarity index 72%
rename from frontend/src/composables/useUiClock.ts
rename to frontend/src/views/accounts/components/account-status-badge/useStatusClock.ts
index 11e9b5c42..87ac4ce59 100644
--- a/frontend/src/composables/useUiClock.ts
+++ b/frontend/src/views/accounts/components/account-status-badge/useStatusClock.ts
@@ -1,6 +1,6 @@
 import { createSharedComposable, useIntervalFn, useNow } from '@vueuse/core'
 
-export const useUiClock = createSharedComposable(() =>
+export const useStatusClock = createSharedComposable(() =>
   useNow({
     scheduler: callback => useIntervalFn(callback, 30_000),
   }),
diff --git a/frontend/src/views/accounts/composables/useAccountBatchEditor.ts b/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
index ceb10aa23..54bf8c793 100644
--- a/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
+++ b/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { AccountModelAccess, getAccounts } from '@/api'
+import type { Account, AccountModelAccess } from '@/api'
 
 import { toast } from '@codex-proxy/ui'
 import { computed, ref, shallowRef, watch } from 'vue'
@@ -8,15 +8,13 @@ import { useAsyncAction } from '@/composables/useAsyncAction'
 import { accountModelAccessError } from '../utils/modelAccess'
 import { concurrencyLimitInput, parseAccountSchedulingForm } from '../utils/schedulingForm'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountBatchEditor(options: {
-  accounts: Ref<AccountRow[]>
+  accounts: Ref<Account[]>
   selectedIds: Ref<Set<string>>
   reloadAccounts: () => Promise<unknown>
   reloadGroups: () => Promise<unknown>
 }) {
-  const selectedAccountsById = new Map<string, AccountRow>()
+  const selectedAccountsById = new Map<string, Account>()
   const showBatchEditModal = shallowRef(false)
   const editingCount = shallowRef(0)
   const schedulingEnabled = shallowRef(true)
@@ -143,19 +141,19 @@ export function useAccountBatchEditor(options: {
   }
 }
 
-function sharedConcurrencyLimit(accounts: AccountRow[]) {
+function sharedConcurrencyLimit(accounts: Account[]) {
   const first = accounts[0]?.concurrencyLimit ?? null
   return accounts.every(account => account.concurrencyLimit === first)
     ? concurrencyLimitInput(first)
     : ''
 }
 
-function sharedWeight(accounts: AccountRow[]) {
+function sharedWeight(accounts: Account[]) {
   const first = accounts[0]?.weight ?? 1
   return accounts.every(account => account.weight === first) ? String(first) : '1'
 }
 
-function sharedGroupIds(accounts: AccountRow[]) {
+function sharedGroupIds(accounts: Account[]) {
   const [first, ...rest] = accounts
   if (!first)
     return []
diff --git a/frontend/src/views/accounts/composables/useAccountEditor.ts b/frontend/src/views/accounts/composables/useAccountEditor.ts
index afac5d9ae..dcd595bc1 100644
--- a/frontend/src/views/accounts/composables/useAccountEditor.ts
+++ b/frontend/src/views/accounts/composables/useAccountEditor.ts
@@ -1,4 +1,4 @@
-import type { AccountModelAccess, ApiKeyConfiguration, getAccounts } from '@/api'
+import type { Account, AccountModelAccess, ApiKeyConfiguration } from '@/api'
 
 import { toast } from '@codex-proxy/ui'
 import { ref, shallowRef, watch } from 'vue'
@@ -9,15 +9,13 @@ import { accountModelAccessError } from '../utils/modelAccess'
 import { concurrencyLimitInput, parseAccountSchedulingForm } from '../utils/schedulingForm'
 import { apiKeyAccountError, emptyApiKeyAccountForm, isOpenAiApiKeyAccount, isOpenAiOAuthAccount, parseApiKeyConfiguration } from '../utils/upstreamApiKey'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountEditor(options: {
   reloadAccounts: () => Promise<unknown>
   reloadGroups: () => Promise<unknown>
 }) {
   const showEditModal = shallowRef(false)
   // 保存后列表可能因筛选移除该账号，编辑窗口的退场仍需保留原账号内容。
-  const editingAccount = shallowRef<AccountRow | null>(null)
+  const editingAccount = shallowRef<Account | null>(null)
   const notes = shallowRef('')
   const schedulingEnabled = shallowRef(true)
   const concurrencyLimit = shallowRef('')
@@ -66,7 +64,7 @@ export function useAccountEditor(options: {
     }
   }
 
-  function open(account: AccountRow) {
+  function open(account: Account) {
     configurationRequest.invalidate()
     editingAccount.value = account
     notes.value = account.notes ?? ''
diff --git a/frontend/src/views/accounts/composables/useAccountMutations.ts b/frontend/src/views/accounts/composables/useAccountMutations.ts
index 7db563d02..3b231f081 100644
--- a/frontend/src/views/accounts/composables/useAccountMutations.ts
+++ b/frontend/src/views/accounts/composables/useAccountMutations.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { AccountImportTask, getAccounts } from '@/api'
+import type { Account, AccountImportTask } from '@/api'
 import type { RequestOptions } from '@/api/request'
 import { toast } from '@codex-proxy/ui'
 import { computed, ref, shallowReactive, watch } from 'vue'
@@ -20,14 +20,12 @@ import { isSupportedProvider } from '@/utils/providers'
 
 import { useAccountOnboarding } from './useAccountOnboarding'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountMutations(options: {
-  accounts: Ref<AccountRow[]>
+  accounts: Ref<Account[]>
   selectedIds: Ref<Set<string>>
   onImportTaskCreated: (task: AccountImportTask) => void
   reload: () => Promise<unknown>
-  replaceAccount: (account: AccountRow) => Promise<boolean>
+  replaceAccount: (account: Account) => Promise<boolean>
 }) {
   const loadAccounts = options.reload
   const { downloadJson } = useDownload()
@@ -35,10 +33,10 @@ export function useAccountMutations(options: {
     reload: loadAccounts,
     onImportTaskCreated: options.onImportTaskCreated,
   })
-  const selectedAccountsById = shallowReactive(new Map<string, AccountRow>())
+  const selectedAccountsById = shallowReactive(new Map<string, Account>())
   const showDeleteModal = ref(false)
   const showSingleDeleteModal = ref(false)
-  const pendingDeleteAccount = ref<AccountRow | null>(null)
+  const pendingDeleteAccount = ref<Account | null>(null)
   const deleteCount = ref(0)
   const recoveringAccounts = useIdSet<string>()
   const refreshingAccounts = useIdSet<string>()
@@ -88,7 +86,7 @@ export function useAccountMutations(options: {
     { immediate: true, flush: 'sync' },
   )
 
-  function requestDeleteAccount(account: AccountRow) {
+  function requestDeleteAccount(account: Account) {
     pendingDeleteAccount.value = account
     showSingleDeleteModal.value = true
   }
@@ -173,7 +171,7 @@ export function useAccountMutations(options: {
     )
   }
 
-  async function handleDownloadModelCatalog(account: AccountRow) {
+  async function handleDownloadModelCatalog(account: Account) {
     await downloadingCatalogAccounts.run(account.id, async () => {
       try {
         const result = await getAccountModelCatalog({ accountId: account.id })
@@ -209,7 +207,7 @@ export function useAccountMutations(options: {
     })
   }
 
-  async function handleToggleScheduling(account: AccountRow) {
+  async function handleToggleScheduling(account: Account) {
     await togglingSchedulingAccounts.run(account.id, async () => {
       try {
         await batchUpdateAccounts({ accountIds: [account.id], enabled: !account.enabled })
@@ -278,7 +276,7 @@ export function useAccountMutations(options: {
     return accounts
   }
 
-  async function deleteAccountBatch(accounts: AccountRow[], options?: RequestOptions) {
+  async function deleteAccountBatch(accounts: Account[], options?: RequestOptions) {
     const account = accounts[0]
     if (!account)
       return
@@ -291,8 +289,8 @@ export function useAccountMutations(options: {
       throw new Error(`不支持的 Provider：${account.provider}`)
   }
 
-  function accountDeletionGroups(accounts: AccountRow[]) {
-    const groups = new Map<string, AccountRow[]>()
+  function accountDeletionGroups(accounts: Account[]) {
+    const groups = new Map<string, Account[]>()
     for (const account of accounts) {
       const key = account.provider
       const group = groups.get(key)
diff --git a/frontend/src/views/accounts/composables/useAccountOnboarding.ts b/frontend/src/views/accounts/composables/useAccountOnboarding.ts
index 1938969a7..427c61e37 100644
--- a/frontend/src/views/accounts/composables/useAccountOnboarding.ts
+++ b/frontend/src/views/accounts/composables/useAccountOnboarding.ts
@@ -1,24 +1,21 @@
-import type { AccountImportTask, getAccounts } from '@/api'
+import type { Account, AccountImportTask } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { createAccountImportTask, importAccounts } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
 import { errorMessage, generateRequestId } from '@/utils/operation'
 import { formatProviderLabel, isSupportedProvider } from '@/utils/providers'
-import { accountCreateProvider, accountCreateSourceKey, accountImportSettings, accountProxyError, emptyAccountCreateForm } from '../components/AccountCreateModal/model'
-import { accountImportModes } from '../components/AccountCreateModal/presenter'
+import { accountCreateProvider, accountCreateSourceKey, accountImportModes, accountImportSettings, accountProxyError, emptyAccountCreateForm } from '../utils/accountCreate'
 import { accountImportDocuments, MAX_ACCOUNT_IMPORT_COUNT, mixedImportDocuments } from '../utils/accountImport'
 import { apiKeyAccountError, emptyApiKeyAccountForm } from '../utils/upstreamApiKey'
 import { useAccountAuthorization } from './useAccountAuthorization'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountOnboarding(options: {
   reload: () => Promise<unknown>
   onImportTaskCreated: (task: AccountImportTask) => void
 }) {
   const createModalOpen = shallowRef(false)
-  const reauthorizingAccount = shallowRef<AccountRow | null>(null)
+  const reauthorizingAccount = shallowRef<Account | null>(null)
   const creatingAccountAction = useAsyncAction()
   const createForm = ref(emptyAccountCreateForm())
   const authorization = useAccountAuthorization(() => finishCreate(reauthorizingAccount.value ? '账号重新授权成功' : '账号已添加'))
@@ -133,7 +130,7 @@ export function useAccountOnboarding(options: {
     showCreateModal.value = true
   }
 
-  function openReauthorizeAccount(account: AccountRow) {
+  function openReauthorizeAccount(account: Account) {
     if (isSupportedProvider(account.provider) && account.authenticationKind !== 'oauth')
       return
     authorization.reset()
diff --git a/frontend/src/views/accounts/composables/useAccountsQuery.ts b/frontend/src/views/accounts/composables/useAccountsQuery.ts
index 9a928075b..907155332 100644
--- a/frontend/src/views/accounts/composables/useAccountsQuery.ts
+++ b/frontend/src/views/accounts/composables/useAccountsQuery.ts
@@ -1,12 +1,10 @@
 import type { BaseTableSort } from '@codex-proxy/ui'
-import { watchDebounced } from '@vueuse/core'
+import type { Account } from '@/api'
 
 import { computed, onMounted, shallowRef, watch } from 'vue'
 import { getAccounts } from '@/api'
 import { usePagedQuery } from '@/composables/usePagedQuery'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountsQuery() {
   const searchQuery = shallowRef('')
   const providerQuery = shallowRef('')
@@ -63,7 +61,7 @@ export function useAccountsQuery() {
     void query.execute()
   }
 
-  async function replaceAccount(updated: AccountRow) {
+  async function replaceAccount(updated: Account) {
     // 先取消旧查询并应用接口返回的账号，避免旧响应覆盖最新行数据。
     query.invalidate()
     query.items.value = query.items.value.map(account => account.id === updated.id ? updated : account)
@@ -74,14 +72,13 @@ export function useAccountsQuery() {
     return query.items.value.some(account => account.id === updated.id)
   }
 
-  watchDebounced(
-    searchQuery,
-    () => {
+  watch(searchQuery, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
       query.page.value = 1
       void query.execute()
-    },
-    { debounce: 250 },
-  )
+    }, 250)
+    onCleanup(() => clearTimeout(timer))
+  })
 
   watch([providerQuery, statusQuery, groupQuery], () => {
     query.page.value = 1
diff --git a/frontend/src/views/accounts/composables/useAccountsTable.ts b/frontend/src/views/accounts/composables/useAccountsTable.ts
index 1d70f59b7..efe01bcef 100644
--- a/frontend/src/views/accounts/composables/useAccountsTable.ts
+++ b/frontend/src/views/accounts/composables/useAccountsTable.ts
@@ -1,13 +1,11 @@
 import type { Ref } from 'vue'
-import type { getAccounts } from '@/api'
+import type { Account } from '@/api'
 
 import { computed, ref } from 'vue'
 import { usePageSelection } from '@/composables/usePageSelection'
 
-type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-
 export function useAccountsTable(
-  accounts: Ref<AccountRow[]>,
+  accounts: Ref<Account[]>,
   selectedIds = ref<Set<string>>(new Set()),
 ) {
   const expandedAccountIds = ref<Set<string>>(new Set())
diff --git a/frontend/src/views/accounts/constants.ts b/frontend/src/views/accounts/constants.ts
index 23ce2d4fc..f58554f47 100644
--- a/frontend/src/views/accounts/constants.ts
+++ b/frontend/src/views/accounts/constants.ts
@@ -1,10 +1,7 @@
-import type { AccountErrorReason, AccountStatus, getAccounts } from '@/api'
+import type { Account, AccountErrorReason, AccountQuotaWindow, AccountStatus } from '@/api'
 import { defineTableColumns } from '@codex-proxy/ui'
 import { formatProviderLabel } from '@/utils/providers'
 
-export type AccountRow = Awaited<ReturnType<typeof getAccounts>>['items'][number]
-export type AccountQuotaWindow = AccountRow['quota']['windows'][number]
-
 export interface AccountQuotaWindowEntry {
   key: string
   label: string | null
@@ -17,7 +14,7 @@ const quotaGroupOrder = new Map([
   ['other', 2],
 ])
 
-export const accountColumns = defineTableColumns<AccountRow>([
+export const accountColumns = defineTableColumns<Account>([
   { key: 'expander', kind: 'expander', hideable: false },
   { key: 'selection', kind: 'selection', hideable: false },
   {
@@ -34,7 +31,7 @@ export const accountColumns = defineTableColumns<AccountRow>([
     kind: 'meta',
     size: 'md',
     align: 'center',
-    format: value => accountProviderLabel(typeof value === 'string' ? value : null),
+    format: value => formatProviderLabel(typeof value === 'string' ? value : null),
   },
   { key: 'status', label: '状态', kind: 'status', align: 'left', sortable: true },
   { key: 'planType', label: '订阅', kind: 'status', sortable: true },
@@ -92,14 +89,6 @@ export const errorReasonLabels: Record<AccountErrorReason, string> = {
   account_banned: '账号不可用或已被封禁',
 }
 
-/**
- * 后端已派生互斥状态（正常 / 配额耗尽 / 限流中 / 已停用 / 错误）；
- * 前端只渲染，不再独立派生。
- */
-export function derivedAccountStatus(row: AccountRow): AccountStatus {
-  return row.status
-}
-
 export function visibleSummaryQuotaWindows(windows: AccountQuotaWindow[]) {
   const known = [...windows]
     .filter(window => window.group !== 'other')
@@ -199,10 +188,6 @@ function quotaLimitLabel(window: AccountQuotaWindow) {
   return window.limitName
 }
 
-function accountProviderLabel(value?: string | null) {
-  return formatProviderLabel(value)
-}
-
 function optionalAccountCell(value: unknown) {
   return value === '—' || value === '-' ? '' : value
 }
diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index a99589e79..1bd70fd08 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -3,22 +3,22 @@ import { BaseCard, BaseCheckbox, BaseConfirmModal, BasePageHeader, BaseTable, Ba
 
 import { ChevronDown } from '@lucide/vue'
 import { ref } from 'vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import AccountGroupMarks from '@/components/AccountGroupMarks.vue'
 import LastUsedAtCell from '@/components/LastUsedAtCell.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
 import { useAccountGroupCatalog } from '@/composables/useAccountGroupCatalog'
+import AccountCreateModal from './components/account-create-modal/index.vue'
+import AccountImportTasks from './components/account-import-tasks/index.vue'
+import AccountQuotaPanel from './components/account-quota-panel/index.vue'
+import AccountQuotaSummaryCell from './components/account-quota-summary-cell/index.vue'
+import AccountStatusBadge from './components/account-status-badge/index.vue'
 import AccountBatchEditModal from './components/AccountBatchEditModal.vue'
 import AccountConnectionTestModal from './components/AccountConnectionTestModal.vue'
-import AccountCreateModal from './components/AccountCreateModal/index.vue'
 import AccountEditModal from './components/AccountEditModal.vue'
 import AccountFilters from './components/AccountFilters.vue'
 import AccountIdentityCell from './components/AccountIdentityCell.vue'
-import AccountImportTasks from './components/AccountImportTasks/index.vue'
 import AccountOverviewCards from './components/AccountOverviewCards.vue'
-import AccountPlanBadge from './components/AccountPlanBadge.vue'
-import AccountQuotaPanel from './components/AccountQuotaPanel/index.vue'
-import AccountQuotaSummaryCell from './components/AccountQuotaSummaryCell/index.vue'
-import AccountStatusBadge from './components/AccountStatusBadge/index.vue'
 import AccountTableActions from './components/AccountTableActions.vue'
 import AccountUsagePanel from './components/AccountUsagePanel.vue'
 import { useAccountBatchEditor } from './composables/useAccountBatchEditor'
@@ -28,7 +28,7 @@ import { useAccountImportTasks } from './composables/useAccountImportTasks'
 import { useAccountMutations } from './composables/useAccountMutations'
 import { useAccountsQuery } from './composables/useAccountsQuery'
 import { useAccountsTable } from './composables/useAccountsTable'
-import { accountColumns, derivedAccountStatus } from './constants'
+import { accountColumns } from './constants'
 
 const selectedIds = ref<Set<string>>(new Set())
 const { visibleColumns, columnOptions, setColumnVisible, setColumnOrder, resetColumns } = useTableColumns(accountColumns, 'accounts')
@@ -294,7 +294,7 @@ const {
 
             <template #status="{ row }">
               <AccountStatusBadge
-                :status="derivedAccountStatus(row)"
+                :status="row.status"
                 :error-reason="row.errorReason"
                 :error-message="row.errorMessage"
                 :rate-limit-recovery-display="row.quota.rateLimitRecoveryDisplay"
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/model.ts b/frontend/src/views/accounts/utils/accountCreate.ts
similarity index 71%
rename from frontend/src/views/accounts/components/AccountCreateModal/model.ts
rename to frontend/src/views/accounts/utils/accountCreate.ts
index 79636632d..cb08c94a1 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/model.ts
+++ b/frontend/src/views/accounts/utils/accountCreate.ts
@@ -1,12 +1,12 @@
-import type { ApiKeyAccountForm } from '../../utils/upstreamApiKey'
+import type { ApiKeyAccountForm } from './upstreamApiKey'
 import type { AccountModelAccess } from '@/api'
-import { accountModelAccessError } from '../../utils/modelAccess'
-import { parseAccountSchedulingForm } from '../../utils/schedulingForm'
-import { emptyApiKeyAccountForm } from '../../utils/upstreamApiKey'
+import { accountModelAccessError } from './modelAccess'
+import { parseAccountSchedulingForm } from './schedulingForm'
+import { emptyApiKeyAccountForm } from './upstreamApiKey'
 
 export type AccountCreateSource = { kind: 'bundle' } | { kind: 'provider', id: string }
 export type AccountImportMode = 'oauth' | 'api_key' | 'access_token' | 'refresh_token' | 'json'
-export type AccountImportInputMode = 'access_token' | 'refresh_token' | 'json'
+type AccountImportInputMode = 'access_token' | 'refresh_token' | 'json'
 
 export interface AccountCreateForm {
   source: AccountCreateSource | null
@@ -72,3 +72,18 @@ export function accountImportSettings(form: AccountCreateForm) {
     notes: form.notes.trim() || undefined,
   }
 }
+
+export function accountImportModes(provider: string | undefined) {
+  if (provider === 'openai') {
+    return [
+      { label: 'OAuth', value: 'oauth' as const },
+      { label: 'API Key', value: 'api_key' as const },
+      { label: 'AT', value: 'access_token' as const },
+      { label: 'RT', value: 'refresh_token' as const },
+      { label: '账号文件', value: 'json' as const },
+    ]
+  }
+  if (provider === 'xai')
+    return [{ label: 'OAuth', value: 'oauth' as const }, { label: '账号文件', value: 'json' as const }]
+  return []
+}
diff --git a/frontend/src/views/accounts/utils/accountImport.ts b/frontend/src/views/accounts/utils/accountImport.ts
index 56da65825..bb17300f7 100644
--- a/frontend/src/views/accounts/utils/accountImport.ts
+++ b/frontend/src/views/accounts/utils/accountImport.ts
@@ -2,7 +2,7 @@ import { isRecord } from '@/utils/data'
 import { formatProviderLabel, isSupportedProvider } from '@/utils/providers'
 
 export const MAX_ACCOUNT_IMPORT_COUNT = 200
-export interface AccountImportDocument {
+interface AccountImportDocument {
   provider: string
   document: Record<string, unknown>
 }
diff --git a/frontend/src/views/accounts/utils/schedulingForm.ts b/frontend/src/views/accounts/utils/schedulingForm.ts
index 158825870..1107ca71c 100644
--- a/frontend/src/views/accounts/utils/schedulingForm.ts
+++ b/frontend/src/views/accounts/utils/schedulingForm.ts
@@ -1,4 +1,4 @@
-export interface AccountSchedulingValues {
+interface AccountSchedulingValues {
   concurrencyLimit: number | null
   weight: number
 }
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index 3be5000b4..0d3d8b7f2 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { dashboardSnapshotView, MetricTone } from '../composables/useDashboard'
+import type { dashboardSnapshotView, MetricTone } from '../presenter'
 import { BaseCard, BaseEmpty } from '@codex-proxy/ui'
 
 import { CircleCheck, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
 import { computed } from 'vue'
+import AccountUsageWindow from '@/components/account/account-usage-window/index.vue'
 import { formatCompactNumber } from '@/utils/format'
-import AccountUsageWindow from '@/views/accounts/components/AccountUsageWindow/index.vue'
 import { metricToneIconClasses, metricToneValueClasses } from '../constants'
 import DashboardAccountIdentity from './DashboardAccountIdentity.vue'
 
diff --git a/frontend/src/views/dashboard/components/DashboardAccountIdentity.vue b/frontend/src/views/dashboard/components/DashboardAccountIdentity.vue
index 3daf6daaa..8cedf93e4 100644
--- a/frontend/src/views/dashboard/components/DashboardAccountIdentity.vue
+++ b/frontend/src/views/dashboard/components/DashboardAccountIdentity.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { dashboardSnapshotView } from '../composables/useDashboard'
+import type { dashboardSnapshotView } from '../presenter'
 import { computed } from 'vue'
 
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
+import { stablePresetVisualToneClass } from '@/utils/color'
 import { authenticationIcon, formatAuthenticationLabel, formatProviderLabel, providerIcon } from '@/utils/providers'
-import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
-import { stablePresetVisualToneClass } from '@/views/accounts/utils/visualTone'
 
 type DashboardSnapshot = ReturnType<typeof dashboardSnapshotView>
 type DashboardAccount = DashboardSnapshot['accountUsage'][number]
diff --git a/frontend/src/views/dashboard/components/DashboardContent.vue b/frontend/src/views/dashboard/components/DashboardContent.vue
index 60a487333..c28289197 100644
--- a/frontend/src/views/dashboard/components/DashboardContent.vue
+++ b/frontend/src/views/dashboard/components/DashboardContent.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { dashboardSnapshotView, dashboardTrendView } from '../composables/useDashboard'
+import type { dashboardSnapshotView, dashboardTrendView } from '../presenter'
 import type { DashboardTrendKind } from '@/api/modules/dashboard'
 import { BaseIconButton, BasePageHeader } from '@codex-proxy/ui'
 
 import { RefreshCw } from '@lucide/vue'
 
+import RequestHealthTimelineCard from '@/components/usage/RequestHealthTimelineCard.vue'
 import AccountOverviewCard from './AccountOverviewCard.vue'
 import DashboardHeartbeat from './DashboardHeartbeat.vue'
 import MetricCard from './MetricCard.vue'
-import RequestHealthTimelineCard from './RequestHealthTimelineCard.vue'
 import RequestTrendCard from './RequestTrendCard.vue'
 import UsageRecordCard from './UsageRecordCard.vue'
 import WireProfileCard from './WireProfileCard.vue'
diff --git a/frontend/src/views/dashboard/components/MetricCard.vue b/frontend/src/views/dashboard/components/MetricCard.vue
index bcc0fc471..87964605e 100644
--- a/frontend/src/views/dashboard/components/MetricCard.vue
+++ b/frontend/src/views/dashboard/components/MetricCard.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { EChartsOption } from 'echarts'
-import type { MetricCardView, MetricTone } from '../composables/useDashboard'
+import type { MetricCardView, MetricTone } from '../presenter'
 
 import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
 import { computed } from 'vue'
 
+import AnimatedMetricValue from '@/components/AnimatedMetricValue.vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { useThemeColor } from '@/composables/useThemeColor'
 import { metricToneIconClasses, metricToneValueClasses } from '../constants'
-import AnimatedMetricValue from './AnimatedMetricValue.vue'
 
 const props = defineProps<{
   metric: MetricCardView
diff --git a/frontend/src/views/dashboard/components/RequestTrendCard.vue b/frontend/src/views/dashboard/components/RequestTrendCard.vue
index c890b5495..7de97786a 100644
--- a/frontend/src/views/dashboard/components/RequestTrendCard.vue
+++ b/frontend/src/views/dashboard/components/RequestTrendCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { dashboardTrendView, normalizeDashboardTrendKind } from '../composables/useDashboard'
+import type { dashboardTrendView, normalizeDashboardTrendKind } from '../presenter'
 
 import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
 import { toRef } from 'vue'
diff --git a/frontend/src/views/dashboard/components/UsageRecordCard.vue b/frontend/src/views/dashboard/components/UsageRecordCard.vue
index 75f4bc544..f61e6cba6 100644
--- a/frontend/src/views/dashboard/components/UsageRecordCard.vue
+++ b/frontend/src/views/dashboard/components/UsageRecordCard.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { dashboardSnapshotView } from '../composables/useDashboard'
+import type { dashboardSnapshotView } from '../presenter'
 
 import { BaseCard } from '@codex-proxy/ui'
-import UsageRecordsTable from '@/views/usage/components/UsageRecordsTable.vue'
-import { usageRecordColumns } from '@/views/usage/constants'
+import { usageRecordColumns } from '@/components/usage/shared/columns'
+import UsageRecordsTable from '@/components/usage/UsageRecordsTable.vue'
 
 type DashboardSnapshot = ReturnType<typeof dashboardSnapshotView>
 
diff --git a/frontend/src/views/dashboard/composables/useDashboard.ts b/frontend/src/views/dashboard/composables/useDashboard.ts
index 73c9dee47..04fb6c9b9 100644
--- a/frontend/src/views/dashboard/composables/useDashboard.ts
+++ b/frontend/src/views/dashboard/composables/useDashboard.ts
@@ -1,16 +1,15 @@
-import type { Component } from 'vue'
-import { Activity, FileText, Timer, Users } from '@lucide/vue'
+import type { DashboardTrendResponse } from '@/api'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, onMounted, onScopeDispose, shallowRef } from 'vue'
 
 import { getDashboardSummary, getDashboardTrend } from '@/api'
-import { formatCompactNumber, formatInteger } from '@/utils/format'
 import { errorMessage, withMinimumDuration } from '@/utils/operation'
+import { dashboardSnapshotView, dashboardTrendView, normalizeDashboardTrendKind } from '../presenter'
 
 export function useDashboard() {
   const activeTrendKind = shallowRef(normalizeDashboardTrendKind('usage'))
   const snapshot = shallowRef(dashboardSnapshotView(null))
-  const trend = shallowRef<DashboardTrend | null>(null)
+  const trend = shallowRef<DashboardTrendResponse | null>(null)
   const trendLoading = shallowRef(false)
   const trendError = shallowRef('')
   const loading = shallowRef(false)
@@ -176,374 +175,3 @@ export function useDashboard() {
     loadTrend,
   }
 }
-
-type DashboardSummary = Awaited<ReturnType<typeof getDashboardSummary>>
-type DashboardTrend = Awaited<ReturnType<typeof getDashboardTrend>>
-type DashboardTrendPoint = DashboardTrend['points'][number]
-type DashboardTrendKind = DashboardTrend['kind']
-
-export type MetricTone = 'normal' | 'info' | 'success' | 'warning' | 'danger'
-
-export interface MetricCardView {
-  title: string
-  value: string
-  valueRaw?: number | null
-  valueFormatter?: (value: number) => string
-  icon: Component
-  tone: MetricTone
-  sparkline?: {
-    values: number[]
-    tone: MetricTone
-  }
-  trend?: {
-    direction: 'up' | 'down' | 'flat'
-    tone: MetricTone
-  }
-  details: Array<{
-    label: string
-    value: string
-    tone?: MetricTone
-  }>
-}
-
-const metricSparklineBuckets = 12
-
-const emptyCards: DashboardSummary['cards'] = {
-  credentials: {
-    total: '0',
-    totalValue: 0,
-    available: '0',
-    availableValue: 0,
-    unavailable: '0',
-    unavailableValue: 0,
-  },
-  traffic: {
-    todayRequests: '0',
-    todayRequestsValue: 0,
-    yesterdayRequestsValue: 0,
-    totalRequests: '0',
-  },
-  tokens: {
-    todayTokens: '0',
-    todayTokensValue: 0,
-    yesterdayTokensValue: 0,
-    totalTokens: '0',
-    totalBillingAmountUsd: '—',
-  },
-  cache: {
-    todayHitRate: '—',
-    todayHitRateValue: null,
-    yesterdayHitRateValue: null,
-    totalHitRate: '—',
-    totalCachedTokens: '0',
-    averageFirstTokenLatencyMs: '—',
-  },
-}
-
-const emptyHealthTimeline: DashboardSummary['healthTimeline'] = {
-  title: '请求健康时间线',
-  description: '有效请求可用性',
-  reliabilityDisplay: '-',
-  status: 'no_data',
-  successRequests: 0,
-  failedRequests: 0,
-  cancelledRequests: 0,
-  incompleteRequests: 0,
-  callerErrorRequests: 0,
-  points: [],
-}
-
-const emptyCapacityInfo = {
-  maxConcurrentPerAccount: null,
-  totalSlots: null,
-  usedSlots: null,
-  availableSlots: null,
-}
-
-export function dashboardSnapshotView(summary: DashboardSummary | null) {
-  const trendPoints = summary?.trend.points ?? []
-  return {
-    metrics: metricCards(summary?.cards ?? emptyCards, trendPoints),
-    healthTimeline: summary?.healthTimeline ?? emptyHealthTimeline,
-    accountUsage: (summary?.accountUsage ?? []),
-    wireProfiles: summary?.wireProfiles ?? [],
-    usageRecords: summary?.usageRecords ?? [],
-    poolSummary: summary?.poolSummary ?? null,
-    capacityInfo: summary?.capacityInfo ?? emptyCapacityInfo,
-    rotationStrategy: summary?.rotationStrategy ?? null,
-  }
-}
-
-export function dashboardTrendView(trend: DashboardTrend | null) {
-  if (!trend) {
-    const points: ReturnType<typeof aggregateUsageTrend> = []
-    const summary: ReturnType<typeof usageTrendSummary> = []
-    return { points, summary }
-  }
-
-  if (trend.kind === 'usage') {
-    const points = aggregateUsageTrend(trend.points)
-    return { points, summary: usageTrendSummary(points) }
-  }
-
-  const summary = []
-  for (const item of trend.summary) {
-    summary.push({
-      label: item.label,
-      value: trend.kind === 'errors' && item.ratio !== null ? item.ratio : item.value,
-      tone: trendSummaryTone(item.label),
-      colorVar: trendSummaryColorVar(trend.kind, item.label),
-    })
-  }
-  return { points: trend.points, summary }
-}
-
-export function normalizeDashboardTrendKind(kind: string): DashboardTrendKind {
-  if (kind === 'latency' || kind === 'errors')
-    return kind
-  return 'usage'
-}
-
-function metricCards(
-  cards: DashboardSummary['cards'],
-  points: DashboardTrendPoint[],
-): MetricCardView[] {
-  const { credentials, traffic, tokens, cache } = cards
-  const recentPoints = recentTrendWindow(points)
-  return [
-    {
-      title: '账号',
-      value: credentials.total,
-      valueRaw: credentials.totalValue,
-      valueFormatter: formatAccountCount,
-      icon: Users,
-      tone: 'normal',
-      details: [
-        {
-          label: '可用',
-          value: credentials.available,
-          tone: 'success',
-        },
-        {
-          label: '不可用',
-          value: credentials.unavailable,
-          tone: 'danger',
-        },
-      ],
-    },
-    {
-      title: '请求次数',
-      value: traffic.todayRequests,
-      valueRaw: traffic.todayRequestsValue,
-      valueFormatter: formatCompactNumber,
-      icon: Activity,
-      tone: 'info',
-      sparkline: sparkline(
-        recentPoints.map(point => point.requestsValue),
-        'info',
-      ),
-      trend: trendState(traffic.todayRequestsValue, traffic.yesterdayRequestsValue, 'info'),
-      details: [
-        { label: '总请求', value: traffic.totalRequests, tone: 'info' },
-        { label: '首字均值', value: cache.averageFirstTokenLatencyMs, tone: 'info' },
-      ],
-    },
-    {
-      title: 'Token',
-      value: tokens.todayTokens,
-      valueRaw: tokens.todayTokensValue,
-      valueFormatter: formatCompactNumber,
-      icon: FileText,
-      tone: 'success',
-      sparkline: sparkline(
-        recentPoints.map(point => point.tokensValue),
-        'success',
-      ),
-      trend: trendState(tokens.todayTokensValue, tokens.yesterdayTokensValue, 'success'),
-      details: [
-        { label: '总 Token', value: tokens.totalTokens, tone: 'success' },
-        { label: '总计费', value: formatDashboardUsd(tokens.totalBillingAmountUsd), tone: 'success' },
-      ],
-    },
-    {
-      title: '缓存命中',
-      value: cache.todayHitRate,
-      valueRaw: cache.todayHitRateValue,
-      valueFormatter: formatDashboardRate,
-      icon: Timer,
-      tone: cache.todayHitRateValue && cache.todayHitRateValue > 0 ? 'warning' : 'normal',
-      sparkline: sparkline(
-        recentPoints.map(point => point.cacheHitRateValue),
-        'warning',
-      ),
-      trend: trendState(
-        cache.todayHitRateValue ?? 0,
-        cache.yesterdayHitRateValue ?? 0,
-        'warning',
-      ),
-      details: [
-        { label: '总缓存命中', value: cache.totalHitRate, tone: 'warning' },
-        { label: '总缓存', value: cache.totalCachedTokens, tone: 'warning' },
-      ],
-    },
-  ]
-}
-
-function formatAccountCount(value: number) {
-  return formatInteger(Math.max(0, Math.round(value)))
-}
-
-function sparkline(values: number[], tone: MetricTone) {
-  return values.some(value => value > 0) ? { values, tone } : undefined
-}
-
-function recentTrendWindow(points: DashboardTrendPoint[]) {
-  let lastActiveIndex = points.length - 1
-  while (lastActiveIndex >= 0 && points[lastActiveIndex].requestsValue <= 0) lastActiveIndex -= 1
-  if (lastActiveIndex < 0)
-    return []
-  return points.slice(
-    Math.max(0, lastActiveIndex - (metricSparklineBuckets - 1)),
-    lastActiveIndex + 1,
-  )
-}
-
-function formatDashboardRate(value: number) {
-  return Number.isFinite(value) ? `${(value * 100).toFixed(1)}%` : '—'
-}
-
-function aggregateUsageTrend(points: DashboardTrendPoint[]) {
-  return Array.from({ length: Math.ceil(points.length / 2) }, (_, groupIndex) => {
-    const group = points.slice(groupIndex * 2, groupIndex * 2 + 2)
-    const first = group[0]
-    const requestsValue = sum(group, point => point.requestsValue)
-    const errorsValue = sum(group, point => point.errorsValue)
-    const inputTokensValue = sum(group, point => point.inputTokensValue)
-    const outputTokensValue = sum(group, point => point.outputTokensValue)
-    const cachedTokensValue = Math.min(
-      inputTokensValue,
-      sum(group, point => point.cachedTokensValue),
-    )
-    const uncachedInputTokensValue = inputTokensValue - cachedTokensValue
-    const effectiveTokensValue = uncachedInputTokensValue + outputTokensValue
-    const cacheHitRateValue = inputTokensValue ? cachedTokensValue / inputTokensValue : 0
-    const successRateValue = requestsValue
-      ? ((requestsValue - errorsValue) / requestsValue) * 100
-      : 0
-
-    return {
-      ...first,
-      requests: formatCompactNumber(requestsValue),
-      requestsValue,
-      inputTokens: formatCompactNumber(inputTokensValue),
-      inputTokensValue,
-      outputTokens: formatCompactNumber(outputTokensValue),
-      outputTokensValue,
-      cachedTokens: formatCompactNumber(cachedTokensValue),
-      cachedTokensValue,
-      uncachedInputTokens: formatCompactNumber(uncachedInputTokensValue),
-      uncachedInputTokensValue,
-      effectiveTokens: formatCompactNumber(effectiveTokensValue),
-      effectiveTokensValue: effectiveTokensValue > 0 ? effectiveTokensValue : null,
-      cacheHitRate: formatDashboardRate(cacheHitRateValue),
-      cacheHitRateValue,
-      tokensValue: inputTokensValue + outputTokensValue,
-      errors: formatCompactNumber(errorsValue),
-      errorsValue,
-      successRate: `${successRateValue.toFixed(1)}%`,
-      successRateValue,
-    }
-  })
-}
-
-function sum(points: DashboardTrendPoint[], selector: (point: DashboardTrendPoint) => number) {
-  return points.reduce((total, point) => total + selector(point), 0)
-}
-
-function usageTrendSummary(points: ReturnType<typeof aggregateUsageTrend>) {
-  const inputTokens = points.reduce((total, point) => total + point.inputTokensValue, 0)
-  const outputTokens = points.reduce((total, point) => total + point.outputTokensValue, 0)
-  const cachedTokens = Math.min(
-    inputTokens,
-    points.reduce((total, point) => total + point.cachedTokensValue, 0),
-  )
-
-  return [
-    {
-      label: '输入',
-      value: formatCompactNumber(inputTokens),
-      tone: 'info',
-      colorVar: '--cp-color-blue-solid',
-    },
-    {
-      label: '输出',
-      value: formatCompactNumber(outputTokens),
-      tone: 'success',
-      colorVar: '--cp-color-green-solid',
-    },
-    {
-      label: '缓存',
-      value: formatCompactNumber(cachedTokens),
-      tone: 'normal',
-      colorVar: '--cp-color-text-tertiary',
-    },
-  ]
-}
-
-function formatDashboardUsd(value: string) {
-  const normalized = value.trim()
-  if (!normalized.startsWith('$'))
-    return value
-  const amount = Number(normalized.slice(1).replaceAll(',', ''))
-  if (!Number.isFinite(amount))
-    return value
-  if (amount < 10_000)
-    return `$${amount.toFixed(2)}`
-  return `$${(amount / 1_000).toFixed(3)}k`
-}
-
-function trendState(
-  current: number,
-  previous: number,
-  fallbackTone: MetricTone,
-): MetricCardView['trend'] {
-  if (current > previous)
-    return { direction: 'up', tone: 'success' }
-  if (current < previous)
-    return { direction: 'down', tone: 'danger' }
-  return previous > 0 || current > 0 ? { direction: 'flat', tone: fallbackTone } : undefined
-}
-
-function trendSummaryTone(label: string) {
-  if (label.includes('错误'))
-    return 'danger'
-  if (label.includes('总耗时'))
-    return 'warning'
-  if (label.includes('吞吐') || label.includes('输出') || label.includes('成功'))
-    return 'success'
-  if (label.includes('首字') || label.includes('缓存'))
-    return 'normal'
-  return 'info'
-}
-
-function trendSummaryColorVar(kind: DashboardTrendKind, label: string) {
-  if (kind === 'latency') {
-    if (label.includes('总耗时'))
-      return '--cp-color-orange-solid'
-    if (label.includes('吞吐'))
-      return '--cp-color-green-solid'
-    return '--cp-color-cyan-solid'
-  }
-  if (kind === 'errors') {
-    if (label.includes('错误'))
-      return '--cp-color-red-solid'
-    if (label.includes('成功'))
-      return '--cp-color-green-solid'
-    return '--cp-color-blue-solid'
-  }
-  if (label.includes('输出'))
-    return '--cp-color-green-solid'
-  if (label.includes('缓存'))
-    return '--cp-color-text-tertiary'
-  return '--cp-color-blue-solid'
-}
diff --git a/frontend/src/views/dashboard/composables/useRequestTrendChart.ts b/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
index a1ed34f1e..dab7aa9de 100644
--- a/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
+++ b/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
@@ -1,6 +1,6 @@
 import type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts'
 import type { Ref } from 'vue'
-import type { dashboardTrendView, normalizeDashboardTrendKind } from './useDashboard'
+import type { dashboardTrendView, normalizeDashboardTrendKind } from '../presenter'
 import { usePreferredReducedMotion } from '@vueuse/core'
 import { computed, shallowRef, watch } from 'vue'
 
diff --git a/frontend/src/views/dashboard/constants.ts b/frontend/src/views/dashboard/constants.ts
index fe9f58210..391da10e7 100644
--- a/frontend/src/views/dashboard/constants.ts
+++ b/frontend/src/views/dashboard/constants.ts
@@ -1,5 +1,4 @@
-import type { MetricTone } from './composables/useDashboard'
-import { formatInteger } from '@/utils/format'
+import type { MetricTone } from './presenter'
 
 // tone 到 Tailwind 类的唯一映射；仪表盘各卡片共用。
 export const metricToneIconClasses: Record<MetricTone, string> = {
@@ -17,95 +16,3 @@ export const metricToneValueClasses: Record<MetricTone, string> = {
   warning: 'text-cp-warning-text',
   danger: 'text-cp-error-text',
 }
-
-export type HealthStatus
-  = 'future' | 'no_data' | 'unavailable' | 'unstable' | 'low_sample' | 'stable'
-
-export interface HealthTimelinePoint {
-  bucketStart: string
-  time: string
-  status: HealthStatus
-  reliabilityDisplay: string
-  successRequests: number
-  failedRequests: number
-  cancelledRequests: number
-  callerErrorRequests: number
-}
-
-export interface HealthTimeline {
-  title: string
-  description: string
-  reliabilityDisplay: string
-  status: HealthStatus
-  successRequests: number
-  failedRequests: number
-  cancelledRequests: number
-  callerErrorRequests: number
-  points: HealthTimelinePoint[]
-}
-
-interface HealthStatusMeta {
-  label: string
-  cellClass: string
-  badgeClass: string
-}
-
-export const healthLegend = [
-  { status: 'no_data', label: '无有效样本' },
-  { status: 'unavailable', label: '不可达' },
-  { status: 'unstable', label: '不稳定' },
-  { status: 'low_sample', label: '低样本' },
-  { status: 'stable', label: '稳定' },
-] satisfies { status: HealthStatus, label: string }[]
-
-export const healthStatusMeta: Record<HealthStatus, HealthStatusMeta> = {
-  future: {
-    label: '未来',
-    cellClass: 'bg-cp-bg-container-disabled opacity-60',
-    badgeClass: 'bg-cp-fill-tertiary text-cp-text-quaternary',
-  },
-  no_data: {
-    label: '无有效样本',
-    cellClass: 'bg-cp-border',
-    badgeClass: 'bg-cp-fill-tertiary text-cp-text-secondary',
-  },
-  unavailable: {
-    label: '不可达',
-    cellClass: 'bg-cp-error',
-    badgeClass: 'bg-cp-error-container text-cp-error-on-container',
-  },
-  unstable: {
-    label: '不稳定',
-    cellClass: 'bg-cp-warning',
-    badgeClass: 'bg-cp-warning-container text-cp-warning-on-container',
-  },
-  low_sample: {
-    label: '低样本',
-    cellClass: 'bg-cp-cyan-solid',
-    badgeClass: 'bg-cp-cyan-container text-cp-cyan-on-container',
-  },
-  stable: {
-    label: '稳定',
-    cellClass: 'bg-cp-success',
-    badgeClass: 'bg-cp-success-container text-cp-success-on-container',
-  },
-}
-
-export function healthReliabilityValueClass(successRequests: number, failedRequests: number) {
-  const eligibleRequests = Math.max(0, successRequests) + Math.max(0, failedRequests)
-  if (eligibleRequests === 0)
-    return 'text-cp-text-quaternary'
-
-  const reliability = (Math.max(0, successRequests) / eligibleRequests) * 100
-  if (reliability >= 99.5)
-    return 'text-cp-success-text'
-  if (reliability >= 98)
-    return 'text-cp-cyan-text'
-  if (reliability >= 95)
-    return 'text-cp-warning-text'
-  return 'text-cp-error-text'
-}
-
-export function formatHealthCount(value: number) {
-  return formatInteger(Math.max(0, value))
-}
diff --git a/frontend/src/views/dashboard/presenter.ts b/frontend/src/views/dashboard/presenter.ts
new file mode 100644
index 000000000..8dc75134a
--- /dev/null
+++ b/frontend/src/views/dashboard/presenter.ts
@@ -0,0 +1,370 @@
+import type { Component } from 'vue'
+import type { DashboardSummaryResponse, DashboardTrendKind, DashboardTrendPoint, DashboardTrendResponse } from '@/api'
+import { Activity, FileText, Timer, Users } from '@lucide/vue'
+import { formatCompactNumber, formatInteger } from '@/utils/format'
+
+export type MetricTone = 'normal' | 'info' | 'success' | 'warning' | 'danger'
+
+export interface MetricCardView {
+  title: string
+  value: string
+  valueRaw?: number | null
+  valueFormatter?: (value: number) => string
+  icon: Component
+  tone: MetricTone
+  sparkline?: {
+    values: number[]
+    tone: MetricTone
+  }
+  trend?: {
+    direction: 'up' | 'down' | 'flat'
+    tone: MetricTone
+  }
+  details: Array<{
+    label: string
+    value: string
+    tone?: MetricTone
+  }>
+}
+
+const metricSparklineBuckets = 12
+
+const emptyCards: DashboardSummaryResponse['cards'] = {
+  credentials: {
+    total: '0',
+    totalValue: 0,
+    available: '0',
+    availableValue: 0,
+    unavailable: '0',
+    unavailableValue: 0,
+  },
+  traffic: {
+    todayRequests: '0',
+    todayRequestsValue: 0,
+    yesterdayRequestsValue: 0,
+    totalRequests: '0',
+  },
+  tokens: {
+    todayTokens: '0',
+    todayTokensValue: 0,
+    yesterdayTokensValue: 0,
+    totalTokens: '0',
+    totalBillingAmountUsd: '—',
+  },
+  cache: {
+    todayHitRate: '—',
+    todayHitRateValue: null,
+    yesterdayHitRateValue: null,
+    totalHitRate: '—',
+    totalCachedTokens: '0',
+    averageFirstTokenLatencyMs: '—',
+  },
+}
+
+const emptyHealthTimeline: DashboardSummaryResponse['healthTimeline'] = {
+  title: '请求健康时间线',
+  description: '有效请求可用性',
+  reliabilityDisplay: '-',
+  status: 'no_data',
+  successRequests: 0,
+  failedRequests: 0,
+  cancelledRequests: 0,
+  incompleteRequests: 0,
+  callerErrorRequests: 0,
+  points: [],
+}
+
+const emptyCapacityInfo = {
+  maxConcurrentPerAccount: null,
+  totalSlots: null,
+  usedSlots: null,
+  availableSlots: null,
+}
+
+export function dashboardSnapshotView(summary: DashboardSummaryResponse | null) {
+  const trendPoints = summary?.trend.points ?? []
+  return {
+    metrics: metricCards(summary?.cards ?? emptyCards, trendPoints),
+    healthTimeline: summary?.healthTimeline ?? emptyHealthTimeline,
+    accountUsage: (summary?.accountUsage ?? []),
+    wireProfiles: summary?.wireProfiles ?? [],
+    usageRecords: summary?.usageRecords ?? [],
+    poolSummary: summary?.poolSummary ?? null,
+    capacityInfo: summary?.capacityInfo ?? emptyCapacityInfo,
+    rotationStrategy: summary?.rotationStrategy ?? null,
+  }
+}
+
+export function dashboardTrendView(trend: DashboardTrendResponse | null) {
+  if (!trend) {
+    const points: ReturnType<typeof aggregateUsageTrend> = []
+    const summary: ReturnType<typeof usageTrendSummary> = []
+    return { points, summary }
+  }
+
+  if (trend.kind === 'usage') {
+    const points = aggregateUsageTrend(trend.points)
+    return { points, summary: usageTrendSummary(points) }
+  }
+
+  const summary = []
+  for (const item of trend.summary) {
+    summary.push({
+      label: item.label,
+      value: trend.kind === 'errors' && item.ratio !== null ? item.ratio : item.value,
+      tone: trendSummaryTone(item.label),
+      colorVar: trendSummaryColorVar(trend.kind, item.label),
+    })
+  }
+  return { points: trend.points, summary }
+}
+
+export function normalizeDashboardTrendKind(kind: string): DashboardTrendKind {
+  if (kind === 'latency' || kind === 'errors')
+    return kind
+  return 'usage'
+}
+
+function metricCards(
+  cards: DashboardSummaryResponse['cards'],
+  points: DashboardTrendPoint[],
+): MetricCardView[] {
+  const { credentials, traffic, tokens, cache } = cards
+  const recentPoints = recentTrendWindow(points)
+  return [
+    {
+      title: '账号',
+      value: credentials.total,
+      valueRaw: credentials.totalValue,
+      valueFormatter: formatAccountCount,
+      icon: Users,
+      tone: 'normal',
+      details: [
+        {
+          label: '可用',
+          value: credentials.available,
+          tone: 'success',
+        },
+        {
+          label: '不可用',
+          value: credentials.unavailable,
+          tone: 'danger',
+        },
+      ],
+    },
+    {
+      title: '请求次数',
+      value: traffic.todayRequests,
+      valueRaw: traffic.todayRequestsValue,
+      valueFormatter: formatCompactNumber,
+      icon: Activity,
+      tone: 'info',
+      sparkline: sparkline(
+        recentPoints.map(point => point.requestsValue),
+        'info',
+      ),
+      trend: trendState(traffic.todayRequestsValue, traffic.yesterdayRequestsValue, 'info'),
+      details: [
+        { label: '总请求', value: traffic.totalRequests, tone: 'info' },
+        { label: '首字均值', value: cache.averageFirstTokenLatencyMs, tone: 'info' },
+      ],
+    },
+    {
+      title: 'Token',
+      value: tokens.todayTokens,
+      valueRaw: tokens.todayTokensValue,
+      valueFormatter: formatCompactNumber,
+      icon: FileText,
+      tone: 'success',
+      sparkline: sparkline(
+        recentPoints.map(point => point.tokensValue),
+        'success',
+      ),
+      trend: trendState(tokens.todayTokensValue, tokens.yesterdayTokensValue, 'success'),
+      details: [
+        { label: '总 Token', value: tokens.totalTokens, tone: 'success' },
+        { label: '总计费', value: formatDashboardUsd(tokens.totalBillingAmountUsd), tone: 'success' },
+      ],
+    },
+    {
+      title: '缓存命中',
+      value: cache.todayHitRate,
+      valueRaw: cache.todayHitRateValue,
+      valueFormatter: formatDashboardRate,
+      icon: Timer,
+      tone: cache.todayHitRateValue && cache.todayHitRateValue > 0 ? 'warning' : 'normal',
+      sparkline: sparkline(
+        recentPoints.map(point => point.cacheHitRateValue),
+        'warning',
+      ),
+      trend: trendState(
+        cache.todayHitRateValue ?? 0,
+        cache.yesterdayHitRateValue ?? 0,
+        'warning',
+      ),
+      details: [
+        { label: '总缓存命中', value: cache.totalHitRate, tone: 'warning' },
+        { label: '总缓存', value: cache.totalCachedTokens, tone: 'warning' },
+      ],
+    },
+  ]
+}
+
+function formatAccountCount(value: number) {
+  return formatInteger(Math.max(0, Math.round(value)))
+}
+
+function sparkline(values: number[], tone: MetricTone) {
+  return values.some(value => value > 0) ? { values, tone } : undefined
+}
+
+function recentTrendWindow(points: DashboardTrendPoint[]) {
+  let lastActiveIndex = points.length - 1
+  while (lastActiveIndex >= 0 && points[lastActiveIndex].requestsValue <= 0) lastActiveIndex -= 1
+  if (lastActiveIndex < 0)
+    return []
+  return points.slice(
+    Math.max(0, lastActiveIndex - (metricSparklineBuckets - 1)),
+    lastActiveIndex + 1,
+  )
+}
+
+function formatDashboardRate(value: number) {
+  return Number.isFinite(value) ? `${(value * 100).toFixed(1)}%` : '—'
+}
+
+function aggregateUsageTrend(points: DashboardTrendPoint[]) {
+  return Array.from({ length: Math.ceil(points.length / 2) }, (_, groupIndex) => {
+    const group = points.slice(groupIndex * 2, groupIndex * 2 + 2)
+    const first = group[0]
+    const requestsValue = sum(group, point => point.requestsValue)
+    const errorsValue = sum(group, point => point.errorsValue)
+    const inputTokensValue = sum(group, point => point.inputTokensValue)
+    const outputTokensValue = sum(group, point => point.outputTokensValue)
+    const cachedTokensValue = Math.min(
+      inputTokensValue,
+      sum(group, point => point.cachedTokensValue),
+    )
+    const uncachedInputTokensValue = inputTokensValue - cachedTokensValue
+    const effectiveTokensValue = uncachedInputTokensValue + outputTokensValue
+    const cacheHitRateValue = inputTokensValue ? cachedTokensValue / inputTokensValue : 0
+    const successRateValue = requestsValue
+      ? ((requestsValue - errorsValue) / requestsValue) * 100
+      : 0
+
+    return {
+      ...first,
+      requests: formatCompactNumber(requestsValue),
+      requestsValue,
+      inputTokens: formatCompactNumber(inputTokensValue),
+      inputTokensValue,
+      outputTokens: formatCompactNumber(outputTokensValue),
+      outputTokensValue,
+      cachedTokens: formatCompactNumber(cachedTokensValue),
+      cachedTokensValue,
+      uncachedInputTokens: formatCompactNumber(uncachedInputTokensValue),
+      uncachedInputTokensValue,
+      effectiveTokens: formatCompactNumber(effectiveTokensValue),
+      effectiveTokensValue: effectiveTokensValue > 0 ? effectiveTokensValue : null,
+      cacheHitRate: formatDashboardRate(cacheHitRateValue),
+      cacheHitRateValue,
+      tokensValue: inputTokensValue + outputTokensValue,
+      errors: formatCompactNumber(errorsValue),
+      errorsValue,
+      successRate: `${successRateValue.toFixed(1)}%`,
+      successRateValue,
+    }
+  })
+}
+
+function sum(points: DashboardTrendPoint[], selector: (point: DashboardTrendPoint) => number) {
+  return points.reduce((total, point) => total + selector(point), 0)
+}
+
+function usageTrendSummary(points: ReturnType<typeof aggregateUsageTrend>) {
+  const inputTokens = points.reduce((total, point) => total + point.inputTokensValue, 0)
+  const outputTokens = points.reduce((total, point) => total + point.outputTokensValue, 0)
+  const cachedTokens = Math.min(
+    inputTokens,
+    points.reduce((total, point) => total + point.cachedTokensValue, 0),
+  )
+
+  return [
+    {
+      label: '输入',
+      value: formatCompactNumber(inputTokens),
+      tone: 'info',
+      colorVar: '--cp-color-blue-solid',
+    },
+    {
+      label: '输出',
+      value: formatCompactNumber(outputTokens),
+      tone: 'success',
+      colorVar: '--cp-color-green-solid',
+    },
+    {
+      label: '缓存',
+      value: formatCompactNumber(cachedTokens),
+      tone: 'normal',
+      colorVar: '--cp-color-text-tertiary',
+    },
+  ]
+}
+
+function formatDashboardUsd(value: string) {
+  const normalized = value.trim()
+  if (!normalized.startsWith('$'))
+    return value
+  const amount = Number(normalized.slice(1).replaceAll(',', ''))
+  if (!Number.isFinite(amount))
+    return value
+  if (amount < 10_000)
+    return `$${amount.toFixed(2)}`
+  return `$${(amount / 1_000).toFixed(3)}k`
+}
+
+function trendState(
+  current: number,
+  previous: number,
+  fallbackTone: MetricTone,
+): MetricCardView['trend'] {
+  if (current > previous)
+    return { direction: 'up', tone: 'success' }
+  if (current < previous)
+    return { direction: 'down', tone: 'danger' }
+  return previous > 0 || current > 0 ? { direction: 'flat', tone: fallbackTone } : undefined
+}
+
+function trendSummaryTone(label: string) {
+  if (label.includes('错误'))
+    return 'danger'
+  if (label.includes('总耗时'))
+    return 'warning'
+  if (label.includes('吞吐') || label.includes('输出') || label.includes('成功'))
+    return 'success'
+  if (label.includes('首字') || label.includes('缓存'))
+    return 'normal'
+  return 'info'
+}
+
+function trendSummaryColorVar(kind: DashboardTrendKind, label: string) {
+  if (kind === 'latency') {
+    if (label.includes('总耗时'))
+      return '--cp-color-orange-solid'
+    if (label.includes('吞吐'))
+      return '--cp-color-green-solid'
+    return '--cp-color-cyan-solid'
+  }
+  if (kind === 'errors') {
+    if (label.includes('错误'))
+      return '--cp-color-red-solid'
+    if (label.includes('成功'))
+      return '--cp-color-green-solid'
+    return '--cp-color-blue-solid'
+  }
+  if (label.includes('输出'))
+    return '--cp-color-green-solid'
+  if (label.includes('缓存'))
+    return '--cp-color-text-tertiary'
+  return '--cp-color-blue-solid'
+}
diff --git a/frontend/src/views/groups/components/AccountGroupMetricsCell.vue b/frontend/src/views/groups/components/AccountGroupMetricsCell.vue
index 7c30ac7d7..5f3cbbb9b 100644
--- a/frontend/src/views/groups/components/AccountGroupMetricsCell.vue
+++ b/frontend/src/views/groups/components/AccountGroupMetricsCell.vue
@@ -4,7 +4,7 @@ import type { AccountGroup } from '@/api'
 import { AlertTriangle, CircleCheck, Grid2X2, Users } from '@lucide/vue'
 import { computed } from 'vue'
 
-import { formatUsd } from '@/views/usage/utils/format'
+import { formatUsd } from '@/utils/format'
 
 type MetricKind = 'accounts' | 'capacity' | 'usage'
 type MetricTone = 'primary' | 'secondary' | 'success' | 'warning' | 'active'
diff --git a/frontend/src/views/groups/composables/useAccountGroups.ts b/frontend/src/views/groups/composables/useAccountGroups.ts
index 3dbbd3082..f09b477b1 100644
--- a/frontend/src/views/groups/composables/useAccountGroups.ts
+++ b/frontend/src/views/groups/composables/useAccountGroups.ts
@@ -1,7 +1,6 @@
 import type { AccountGroup, ApiKey } from '@/api'
 import { normalizeRgbaHexColor, toast } from '@codex-proxy/ui'
 
-import { watchDebounced } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import {
   createAccountGroup,
@@ -15,6 +14,7 @@ import {
 import { useAsyncAction } from '@/composables/useAsyncAction'
 import { useIdSet } from '@/composables/useIdSet'
 import { usePagedQuery } from '@/composables/usePagedQuery'
+import { useRequestState } from '@/composables/useRequestState'
 import { errorMessage } from '@/utils/operation'
 import { DEFAULT_ACCOUNT_GROUP_COLOR } from '../constants'
 
@@ -38,6 +38,7 @@ export function useAccountGroups() {
   const pendingDisableGroup = shallowRef<AccountGroup | null>(null)
   const deleteCount = shallowRef(0)
   const clientKeys = shallowRef<ApiKey[]>([])
+  const referenceKeysRequest = useRequestState()
   const form = ref<AccountGroupFormValue>(emptyForm())
   const savingAction = useAsyncAction()
   const deletingAction = useAsyncAction()
@@ -56,9 +57,7 @@ export function useAccountGroups() {
       }, options),
   })
 
-  const groups = computed(() => query.items.value.map(group => ({
-    ...group,
-  })))
+  const groups = query.items
   const pagination = computed(() => ({
     currentPage: query.page.value,
     pageSize: query.pageSize.value,
@@ -87,18 +86,26 @@ export function useAccountGroups() {
   }
 
   async function loadReferenceKeys() {
+    const requestId = referenceKeysRequest.start()
+    const requestOptions = { signal: referenceKeysRequest.signal }
     try {
       const items: ApiKey[] = []
       let cursor: string | undefined
       do {
-        const result = await getApiKeys({ limit: 200, cursor })
+        const result = await getApiKeys({ limit: 200, cursor }, requestOptions)
+        if (!referenceKeysRequest.isCurrent(requestId))
+          return
         items.push(...result.items)
         cursor = result.nextCursor ?? undefined
       } while (cursor)
       clientKeys.value = items
     }
     catch {
-      clientKeys.value = []
+      if (referenceKeysRequest.isCurrent(requestId))
+        clientKeys.value = []
+    }
+    finally {
+      referenceKeysRequest.finish(requestId)
     }
   }
 
@@ -257,10 +264,13 @@ export function useAccountGroups() {
     void query.execute()
   }
 
-  watchDebounced(searchQuery, () => {
-    query.page.value = 1
-    void query.execute()
-  }, { debounce: 250 })
+  watch(searchQuery, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
+      query.page.value = 1
+      void query.execute()
+    }, 250)
+    onCleanup(() => clearTimeout(timer))
+  })
   watch(statusQuery, () => {
     query.page.value = 1
     void query.execute()
diff --git a/frontend/src/views/key-usage/components/KeyUsageRecords.vue b/frontend/src/views/key-usage/components/KeyUsageRecords.vue
index 1f1c7a11f..8ef1e24c0 100644
--- a/frontend/src/views/key-usage/components/KeyUsageRecords.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageRecords.vue
@@ -3,11 +3,11 @@ import type { BaseTablePaginationState as Pagination } from '@codex-proxy/ui'
 import type { KeyUsageRecord, KeyUsageRecordKind } from '@/api/modules/key-usage'
 import { BaseCard, BaseSegmented, BaseTable, BaseTablePagination, defineTableColumns } from '@codex-proxy/ui'
 import { computed } from 'vue'
-import UsageBillingCell from '@/views/usage/components/UsageBillingCell.vue'
-import UsageClientIpCell from '@/views/usage/components/UsageClientIpCell.vue'
-import UsageLatencyCell from '@/views/usage/components/UsageLatencyCell.vue'
-import UsageTokenCell from '@/views/usage/components/UsageTokenCell.vue'
-import UsageTransportBadge from '@/views/usage/components/UsageTransportBadge.vue'
+import UsageBillingCell from '@/components/usage/UsageBillingCell.vue'
+import UsageClientIpCell from '@/components/usage/UsageClientIpCell.vue'
+import UsageLatencyCell from '@/components/usage/UsageLatencyCell.vue'
+import UsageTokenCell from '@/components/usage/UsageTokenCell.vue'
+import UsageTransportBadge from '@/components/usage/UsageTransportBadge.vue'
 
 defineProps<{ rows: KeyUsageRecord[], pagination: Pagination, loading: boolean, error: string, stale: boolean }>()
 defineEmits<{ pageChange: [page: number], pageSizeChange: [size: number] }>()
diff --git a/frontend/src/views/key-usage/components/KeyUsageSummary.vue b/frontend/src/views/key-usage/components/KeyUsageSummary.vue
index 0af29b4a3..c075eb3c8 100644
--- a/frontend/src/views/key-usage/components/KeyUsageSummary.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageSummary.vue
@@ -3,8 +3,8 @@ import type { KeyUsageMetrics } from '@/api/modules/key-usage'
 import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
 import { Gauge, Zap } from '@lucide/vue'
 import { computed } from 'vue'
+import AnimatedMetricValue from '@/components/AnimatedMetricValue.vue'
 import { formatCompactNumber, formatInteger } from '@/utils/format'
-import AnimatedMetricValue from '@/views/dashboard/components/AnimatedMetricValue.vue'
 import { money } from '../utils/format'
 import { keyUsageTokenMetrics, keyUsageTokenValue } from '../utils/metrics'
 
diff --git a/frontend/src/views/key-usage/composables/useKeyUsage.ts b/frontend/src/views/key-usage/composables/useKeyUsage.ts
index fada1e8ec..530dccc3f 100644
--- a/frontend/src/views/key-usage/composables/useKeyUsage.ts
+++ b/frontend/src/views/key-usage/composables/useKeyUsage.ts
@@ -69,14 +69,12 @@ export function useKeyUsage() {
     queryGeneration += 1
     rangeEnd.value = Date.now()
     overview.value = undefined
-    records.items.value = []
     void loadOverview()
     void records.reloadFromStart()
   }, { immediate: true })
 
   watch(kind, () => {
     queryGeneration += 1
-    records.items.value = []
     void records.reloadFromStart()
   })
 
diff --git a/frontend/src/views/key-usage/index.vue b/frontend/src/views/key-usage/index.vue
index 64a13f3c9..dbf3205d6 100644
--- a/frontend/src/views/key-usage/index.vue
+++ b/frontend/src/views/key-usage/index.vue
@@ -6,7 +6,7 @@ import { shallowRef } from 'vue'
 import { getKeyUsageVersion } from '@/api/modules/key-usage'
 import ApiKeyConfigModal from '@/components/ApiKeyConfigModal.vue'
 import AppAboutModal from '@/components/AppAboutModal.vue'
-import RequestHealthTimelineCard from '@/views/dashboard/components/RequestHealthTimelineCard.vue'
+import RequestHealthTimelineCard from '@/components/usage/RequestHealthTimelineCard.vue'
 import KeyUsageBudget from './components/KeyUsageBudget.vue'
 import KeyUsageHeader from './components/KeyUsageHeader.vue'
 import KeyUsageRecords from './components/KeyUsageRecords.vue'
diff --git a/frontend/src/views/key-usage/utils/format.ts b/frontend/src/views/key-usage/utils/format.ts
index 1fbfeba2e..d6160662d 100644
--- a/frontend/src/views/key-usage/utils/format.ts
+++ b/frontend/src/views/key-usage/utils/format.ts
@@ -11,8 +11,3 @@ export function money(value: string | number | null, currency = 'USD') {
     maximumFractionDigits: 6,
   }).format(amount)
 }
-
-export function freshInput(input: number, cached: number, written: number) {
-  // 输入总量已经包含缓存读写，不把缓存再次计入消耗。
-  return Math.max(0, input - cached - written)
-}
diff --git a/frontend/src/views/key-usage/utils/metrics.ts b/frontend/src/views/key-usage/utils/metrics.ts
index 6b802f0ba..021b85cbe 100644
--- a/frontend/src/views/key-usage/utils/metrics.ts
+++ b/frontend/src/views/key-usage/utils/metrics.ts
@@ -1,6 +1,5 @@
 import type { KeyUsageMetrics } from '@/api/modules/key-usage'
 import { ArrowDown, ArrowUp, Brain, Database, Sparkles } from '@lucide/vue'
-import { freshInput } from './format'
 
 // 卡片、曲线和图例共用语义与主题色，避免同一指标出现不同颜色。
 export const keyUsageTokenMetrics = [
@@ -16,3 +15,8 @@ export function keyUsageTokenValue(metrics: KeyUsageMetrics, key: typeof keyUsag
     ? freshInput(metrics.inputTokens, metrics.cachedTokens, metrics.cacheWriteTokens)
     : metrics[key]
 }
+
+function freshInput(input: number, cached: number, written: number) {
+  // 输入总量已经包含缓存读写，不把缓存再次计入消耗。
+  return Math.max(0, input - cached - written)
+}
diff --git a/frontend/src/views/keys/components/ApiKeyActions.vue b/frontend/src/views/keys/components/ApiKeyActions.vue
index f3cc3dcba..675291d15 100644
--- a/frontend/src/views/keys/components/ApiKeyActions.vue
+++ b/frontend/src/views/keys/components/ApiKeyActions.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import type { getApiKeys } from '@/api'
+import type { ApiKey } from '@/api'
+
 import { BaseIconButton, BaseMenuItem, BasePopover } from '@codex-proxy/ui'
 
 import { MoreHorizontal, Pencil, Power, RotateCcw, Terminal, Trash2, Upload } from '@lucide/vue'
 
-type ApiKeyRow = Awaited<ReturnType<typeof getApiKeys>>['items'][number]
-
 defineProps<{
-  apiKey: ApiKeyRow
+  apiKey: ApiKey
   deleting: boolean
   updatingStatus: boolean
   revealing: boolean
 }>()
 
 const emit = defineEmits<{
-  use: [apiKey: ApiKeyRow]
-  importCcs: [apiKey: ApiKeyRow]
-  toggle: [apiKey: ApiKeyRow]
-  delete: [apiKey: ApiKeyRow]
-  edit: [apiKey: ApiKeyRow]
-  resetBudget: [apiKey: ApiKeyRow]
+  use: [apiKey: ApiKey]
+  importCcs: [apiKey: ApiKey]
+  toggle: [apiKey: ApiKey]
+  delete: [apiKey: ApiKey]
+  edit: [apiKey: ApiKey]
+  resetBudget: [apiKey: ApiKey]
 }>()
 </script>
 
diff --git a/frontend/src/views/keys/components/ApiKeyCreatedModal.vue b/frontend/src/views/keys/components/ApiKeyCreatedModal.vue
new file mode 100644
index 000000000..75f74dddd
--- /dev/null
+++ b/frontend/src/views/keys/components/ApiKeyCreatedModal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { BaseButton, BaseIconButton, BaseModal } from '@codex-proxy/ui'
+import { Copy, Upload } from '@lucide/vue'
+
+defineProps<{ createdKey: string }>()
+const emit = defineEmits<{
+  copy: [text: string]
+  importCcs: []
+  afterLeave: []
+}>()
+const open = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <BaseModal
+    v-model="open"
+    title="API Key 已创建"
+    description="复制密钥，或直接导入 CCSwitch"
+    tone="success"
+    size="md"
+    @after-leave="emit('afterLeave')"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="rounded-cp border border-cp-warning-border bg-cp-warning-container px-4 py-3">
+        <p class="m-0 text-cp font-semibold text-cp-warning-on-container">
+          该密钥具有网关访问权限，请仅发送给可信调用方
+        </p>
+      </div>
+      <div>
+        <p class="mb-2 text-cp font-medium text-cp-text-secondary">
+          API Key
+        </p>
+        <div class="flex items-center gap-2">
+          <code class="flex-1 rounded-cp bg-cp-fill-quaternary px-3 py-2.5 font-mono text-cp break-all text-cp-text">
+            {{ createdKey }}
+          </code>
+          <BaseIconButton size="md" label="复制" @click="emit('copy', createdKey)">
+            <Copy class="size-4" />
+          </BaseIconButton>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <BaseButton variant="secondary" @click="emit('copy', createdKey)">
+        <template #icon>
+          <Copy class="size-4" />
+        </template>
+        复制密钥
+      </BaseButton>
+      <BaseButton variant="secondary" @click="emit('importCcs')">
+        <template #icon>
+          <Upload class="size-4" />
+        </template>
+        导入 CCSwitch
+      </BaseButton>
+      <BaseButton variant="primary" @click="open = false">
+        我已保存
+      </BaseButton>
+    </template>
+  </BaseModal>
+</template>
diff --git a/frontend/src/views/keys/components/ApiKeyCreateModal.vue b/frontend/src/views/keys/components/ApiKeyFormModal.vue
similarity index 60%
rename from frontend/src/views/keys/components/ApiKeyCreateModal.vue
rename to frontend/src/views/keys/components/ApiKeyFormModal.vue
index a14852b9d..09b9c0022 100644
--- a/frontend/src/views/keys/components/ApiKeyCreateModal.vue
+++ b/frontend/src/views/keys/components/ApiKeyFormModal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ApiKeyFormValue } from '../composables/useApiKeyMutations'
+import type { ApiKeyFormValue } from '../composables/useApiKeyEditor'
 import type { AccountGroup } from '@/api'
-import { BaseButton, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BaseModal } from '@codex-proxy/ui'
+import { BaseButton, BaseForm, BaseFormItem, BaseInput, BaseModal } from '@codex-proxy/ui'
 
-import { Copy, DollarSign, KeyRound, Upload } from '@lucide/vue'
+import { DollarSign, KeyRound } from '@lucide/vue'
 import { computed } from 'vue'
 import AccountGroupCheckboxGrid from '@/components/AccountGroupCheckboxGrid.vue'
 import ProviderRequestProfilesEditor from '@/components/client-profile/ProviderRequestProfilesEditor.vue'
@@ -12,20 +12,19 @@ const props = defineProps<{
   groups: AccountGroup[]
   groupLoading: boolean
   editing: boolean
-  createdKey: string
   saving: boolean
 }>()
 const emit = defineEmits<{
   save: []
-  copy: [text: string]
-  importCcs: []
   afterLeave: []
-  createdAfterLeave: []
 }>()
 const open = defineModel<boolean>({ default: false })
-const createdOpen = defineModel<boolean>('createdOpen', { default: false })
 const form = defineModel<ApiKeyFormValue>('form', { required: true })
 const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
+
+function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFormValue[Key]) {
+  form.value = { ...form.value, [key]: value }
+}
 </script>
 
 <template>
@@ -45,20 +44,20 @@ const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
     <BaseForm class="grid gap-6">
       <BaseFormItem label="名称" required>
         <BaseInput
-          v-model="form.name"
-          aria-label="名称"
+          :model-value="form.name" aria-label="名称"
           placeholder="例如：生产环境"
           :disabled="saving"
+          @update:model-value="updateForm('name', $event)"
         />
       </BaseFormItem>
 
       <div class="grid gap-6" :class="{ 'sm:grid-cols-2': !editing }">
         <BaseFormItem label="标签（可选）">
           <BaseInput
-            v-model="form.label"
-            aria-label="标签（可选）"
+            :model-value="form.label" aria-label="标签（可选）"
             placeholder="例如：后端服务"
             :disabled="saving"
+            @update:model-value="updateForm('label', $event)"
           />
         </BaseFormItem>
 
@@ -67,45 +66,45 @@ const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
           label="自定义 Key（可选）"
         >
           <BaseInput
-            v-model="form.customKey"
-            type="password"
+            :model-value="form.customKey" type="password"
             autocomplete="new-password"
             :spellcheck="false"
             aria-label="自定义 Key（可选）"
             placeholder="留空自动生成"
             :disabled="saving"
+            @update:model-value="updateForm('customKey', $event)"
           />
         </BaseFormItem>
       </div>
 
       <BaseFormItem label="分组">
         <AccountGroupCheckboxGrid
-          v-model="form.groupIds"
-          :groups="groups"
+          :model-value="form.groupIds" :groups="groups"
           :loading="groupLoading"
           :disabled="saving"
+          @update:model-value="updateForm('groupIds', $event)"
         />
       </BaseFormItem>
 
       <BaseFormItem label="上游身份">
         <ProviderRequestProfilesEditor
-          v-model="form.providerRequestProfileOverrides"
-          allow-inherit
+          :model-value="form.providerRequestProfileOverrides" allow-inherit
           :active="open"
           :disabled="saving"
+          @update:model-value="updateForm('providerRequestProfileOverrides', $event)"
         />
       </BaseFormItem>
 
       <div class="grid gap-6 sm:grid-cols-2">
         <BaseFormItem label="日限额">
           <BaseInput
-            v-model="form.dailyLimitUsd"
-            type="number"
+            :model-value="form.dailyLimitUsd" type="number"
             min="0"
             step="any"
             aria-label="日限额（美元）"
             placeholder="不限制"
             :disabled="saving"
+            @update:model-value="updateForm('dailyLimitUsd', $event)"
           >
             <template #prefix>
               <DollarSign class="size-4" aria-hidden="true" />
@@ -114,13 +113,13 @@ const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
         </BaseFormItem>
         <BaseFormItem label="周限额">
           <BaseInput
-            v-model="form.weeklyLimitUsd"
-            type="number"
+            :model-value="form.weeklyLimitUsd" type="number"
             min="0"
             step="any"
             aria-label="周限额（美元）"
             placeholder="不限制"
             :disabled="saving"
+            @update:model-value="updateForm('weeklyLimitUsd', $event)"
           >
             <template #prefix>
               <DollarSign class="size-4" aria-hidden="true" />
@@ -132,24 +131,24 @@ const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
       <div class="grid gap-6 sm:grid-cols-2">
         <BaseFormItem label="最大并发">
           <BaseInput
-            v-model="form.maxConcurrency"
-            type="number"
+            :model-value="form.maxConcurrency" type="number"
             aria-label="最大并发"
             min="0"
             step="1"
             placeholder="不限制"
             :disabled="saving"
+            @update:model-value="updateForm('maxConcurrency', $event)"
           />
         </BaseFormItem>
         <BaseFormItem label="每分钟请求数（RPM）">
           <BaseInput
-            v-model="form.requestsPerMinute"
-            type="number"
+            :model-value="form.requestsPerMinute" type="number"
             aria-label="每分钟请求数（RPM）"
             min="0"
             step="1"
             placeholder="不限制"
             :disabled="saving"
+            @update:model-value="updateForm('requestsPerMinute', $event)"
           />
         </BaseFormItem>
       </div>
@@ -169,52 +168,4 @@ const title = computed(() => props.editing ? '编辑密钥' : '创建 API Key')
       </BaseButton>
     </template>
   </BaseModal>
-
-  <BaseModal
-    v-model="createdOpen"
-    title="API Key 已创建"
-    description="复制密钥，或直接导入 CCSwitch"
-    tone="success"
-    size="md"
-    @after-leave="emit('createdAfterLeave')"
-  >
-    <div class="flex flex-col gap-4">
-      <div class="rounded-cp border border-cp-warning-border bg-cp-warning-container px-4 py-3">
-        <p class="m-0 text-cp font-semibold text-cp-warning-on-container">
-          该密钥具有网关访问权限，请仅发送给可信调用方
-        </p>
-      </div>
-      <div>
-        <p class="mb-2 text-cp font-medium text-cp-text-secondary">
-          API Key
-        </p>
-        <div class="flex items-center gap-2">
-          <code class="flex-1 rounded-cp bg-cp-fill-quaternary px-3 py-2.5 font-mono text-cp break-all text-cp-text">
-            {{ createdKey }}
-          </code>
-          <BaseIconButton size="md" label="复制" @click="emit('copy', createdKey)">
-            <Copy class="size-4" />
-          </BaseIconButton>
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <BaseButton variant="secondary" @click="emit('copy', createdKey)">
-        <template #icon>
-          <Copy class="size-4" />
-        </template>
-        复制密钥
-      </BaseButton>
-      <BaseButton variant="secondary" @click="emit('importCcs')">
-        <template #icon>
-          <Upload class="size-4" />
-        </template>
-        导入 CCSwitch
-      </BaseButton>
-      <BaseButton variant="primary" @click="createdOpen = false">
-        我已保存
-      </BaseButton>
-    </template>
-  </BaseModal>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyIdentityCell.vue b/frontend/src/views/keys/components/ApiKeyIdentityCell.vue
index 7f8fc8da2..f14a9e771 100644
--- a/frontend/src/views/keys/components/ApiKeyIdentityCell.vue
+++ b/frontend/src/views/keys/components/ApiKeyIdentityCell.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { getApiKeys } from '@/api'
-
-type ApiKeyRow = Awaited<ReturnType<typeof getApiKeys>>['items'][number]
+import type { ApiKey } from '@/api'
 
 defineProps<{
-  apiKey: ApiKeyRow
+  apiKey: ApiKey
 }>()
 </script>
 
diff --git a/frontend/src/views/keys/composables/useApiKeyEditor.ts b/frontend/src/views/keys/composables/useApiKeyEditor.ts
new file mode 100644
index 000000000..09cb74d49
--- /dev/null
+++ b/frontend/src/views/keys/composables/useApiKeyEditor.ts
@@ -0,0 +1,182 @@
+import type { ApiKey } from '@/api'
+import type { ProviderRequestProfiles, ProviderRequestProfileUpdates } from '@/api/modules/client-profiles'
+import { toast } from '@codex-proxy/ui'
+import { cloneDeep } from 'es-toolkit'
+import { ref, shallowRef } from 'vue'
+import { createApiKey, updateApiKey } from '@/api'
+import { useAsyncAction } from '@/composables/useAsyncAction'
+
+export interface ApiKeyFormValue {
+  providerRequestProfileOverrides: ProviderRequestProfiles
+  customKey: string
+  name: string
+  label: string
+  groupIds: string[]
+  maxConcurrency: string
+  requestsPerMinute: string
+  dailyLimitUsd: string
+  weeklyLimitUsd: string
+}
+
+export function useApiKeyEditor(options: {
+  reload: () => Promise<unknown>
+  onCreated: (key: string, name: string) => void
+}) {
+  const showFormModal = shallowRef(false)
+  const showAllAccountsConfirm = shallowRef(false)
+  const editingKey = shallowRef<ApiKey | null>(null)
+  const savingKeyAction = useAsyncAction()
+  const savingKey = savingKeyAction.loading
+  const form = ref<ApiKeyFormValue>(emptyForm())
+
+  function openCreate() {
+    editingKey.value = null
+    form.value = emptyForm()
+    showFormModal.value = true
+  }
+
+  function openEdit(key: ApiKey) {
+    editingKey.value = key
+    form.value = {
+      providerRequestProfileOverrides: cloneDeep(key.providerRequestProfileOverrides),
+      customKey: '',
+      name: key.name,
+      label: key.label ?? '',
+      groupIds: key.groups.map(group => group.id),
+      maxConcurrency: limitInputValue(key.maxConcurrency),
+      requestsPerMinute: limitInputValue(key.requestsPerMinute),
+      dailyLimitUsd: limitInputValue(key.dailyLimitUsd),
+      weeklyLimitUsd: limitInputValue(key.weeklyLimitUsd),
+    }
+    showFormModal.value = true
+  }
+
+  function requestSave() {
+    if (!validateForm() || savingKey.value)
+      return
+    if (form.value.groupIds.length === 0) {
+      showAllAccountsConfirm.value = true
+      return
+    }
+    void save()
+  }
+
+  async function confirmAllAccountsScope() {
+    showAllAccountsConfirm.value = false
+    await save()
+  }
+
+  async function save() {
+    if (!validateForm() || savingKey.value)
+      return
+
+    await savingKeyAction.run(
+      async () => {
+        const payload = {
+          name: form.value.name.trim(),
+          label: form.value.label.trim() || null,
+          groupIds: [...new Set(form.value.groupIds)],
+          maxConcurrency: Number(form.value.maxConcurrency),
+          requestsPerMinute: Number(form.value.requestsPerMinute),
+          dailyLimitUsd: form.value.dailyLimitUsd.trim() || '0',
+          weeklyLimitUsd: form.value.weeklyLimitUsd.trim() || '0',
+        }
+        const current = editingKey.value
+        let created: { key: string, name: string } | undefined
+        if (current) {
+          await updateApiKey({
+            id: current.id,
+            ...payload,
+            providerRequestProfileOverrides: profileOverrideUpdates(
+              current.providerRequestProfileOverrides,
+              form.value.providerRequestProfileOverrides,
+            ),
+          })
+        }
+        else {
+          const result = await createApiKey({
+            ...payload,
+            providerRequestProfileOverrides: cloneDeep(form.value.providerRequestProfileOverrides),
+            customKey: form.value.customKey || undefined,
+          })
+          created = { key: result.plaintextKey, name: payload.name }
+        }
+
+        showFormModal.value = false
+        await options.reload()
+        if (current) {
+          toast.success('API Key 已更新')
+        }
+        else if (created) {
+          options.onCreated(created.key, created.name)
+          toast.success('API Key 创建成功')
+        }
+      },
+      { onError: () => void options.reload() },
+    )
+  }
+
+  function validateForm() {
+    for (const [label, value] of [['日限额', form.value.dailyLimitUsd], ['周限额', form.value.weeklyLimitUsd]]) {
+      if (value.trim() && !/^\d{1,10}(?:\.\d{1,10})?$/.test(value.trim())) {
+        toast.warning(`${label}必须是非负金额，最多 10 位小数`)
+        return false
+      }
+    }
+    if (!form.value.name.trim()) {
+      toast.warning('请输入 API Key 名称')
+      return false
+    }
+    if (!editingKey.value && form.value.customKey && !/^[\x21-\x7E]+$/.test(form.value.customKey)) {
+      toast.warning('自定义 Key 只能包含 HTTP 可传输的可见字符，不能包含空格或换行')
+      return false
+    }
+    for (const [label, value] of [
+      ['最大并发', form.value.maxConcurrency],
+      ['每分钟请求数', form.value.requestsPerMinute],
+    ] as const) {
+      const parsed = Number(value)
+      if (!Number.isSafeInteger(parsed) || parsed < 0) {
+        toast.warning(`${label}必须是非负整数`)
+        return false
+      }
+    }
+    return true
+  }
+
+  function clearCustomKey() {
+    form.value.customKey = ''
+  }
+
+  return { showFormModal, showAllAccountsConfirm, editingKey, savingKey, form, openCreate, openEdit, clearCustomKey, requestSave, confirmAllAccountsScope }
+}
+
+function emptyForm(): ApiKeyFormValue {
+  return {
+    providerRequestProfileOverrides: {},
+    customKey: '',
+    name: '',
+    label: '',
+    groupIds: [],
+    maxConcurrency: '',
+    requestsPerMinute: '',
+    dailyLimitUsd: '',
+    weeklyLimitUsd: '',
+  }
+}
+
+function profileOverrideUpdates(
+  previous: ProviderRequestProfiles,
+  current: ProviderRequestProfiles,
+): ProviderRequestProfileUpdates {
+  const updates: ProviderRequestProfileUpdates = cloneDeep(current)
+  for (const provider of Object.keys(previous)) {
+    if (!Object.hasOwn(current, provider))
+      updates[provider] = null
+  }
+  return updates
+}
+
+function limitInputValue(limit: string | number) {
+  return Number(limit) === 0 ? '' : String(limit)
+}
diff --git a/frontend/src/views/keys/composables/useApiKeyMutations.ts b/frontend/src/views/keys/composables/useApiKeyMutations.ts
index 5f2d45e90..c101d8a1c 100644
--- a/frontend/src/views/keys/composables/useApiKeyMutations.ts
+++ b/frontend/src/views/keys/composables/useApiKeyMutations.ts
@@ -1,181 +1,32 @@
 import type { Ref } from 'vue'
-import type { getApiKeys } from '@/api'
-import type { ProviderRequestProfile, ProviderRequestProfiles } from '@/api/modules/client-profiles'
+import type { ApiKey } from '@/api'
 import { toast } from '@codex-proxy/ui'
-import { ref, shallowRef, watch } from 'vue'
-import {
-  createApiKey,
-  deleteApiKey,
-  disableApiKey,
-  enableApiKey,
-  revealApiKey,
-  updateApiKey,
-} from '@/api'
+import { shallowRef, watch } from 'vue'
+import { deleteApiKey, disableApiKey, enableApiKey } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
-import { useCopyText } from '@/composables/useCopyText'
 import { useIdSet } from '@/composables/useIdSet'
 
-type ApiKeyRow = Awaited<ReturnType<typeof getApiKeys>>['items'][number]
-
-export interface ApiKeyFormValue {
-  providerRequestProfileOverrides: ProviderRequestProfiles
-  customKey: string
-  name: string
-  label: string
-  groupIds: string[]
-  maxConcurrency: string
-  requestsPerMinute: string
-  dailyLimitUsd: string
-  weeklyLimitUsd: string
-}
-
 export function useApiKeyMutations(options: {
   selectedIds: Ref<Set<string>>
   reload: () => Promise<unknown>
 }) {
-  const copyText = useCopyText()
-  const showFormModal = shallowRef(false)
   const showDeleteModal = shallowRef(false)
   const showSingleDeleteModal = shallowRef(false)
-  const showKeyModal = shallowRef(false)
-  const showAllAccountsConfirm = shallowRef(false)
-  const createdKey = shallowRef('')
-  const createdKeyName = shallowRef('')
-  const editingKey = shallowRef<ApiKeyRow | null>(null)
-  const pendingDeleteKey = shallowRef<ApiKeyRow | null>(null)
+  const pendingDeleteKey = shallowRef<ApiKey | null>(null)
   const deleteCount = shallowRef(0)
-  const savingKeyAction = useAsyncAction()
   const deletingKeyAction = useAsyncAction()
   const batchDeletingAction = useAsyncAction()
   const updatingStatusKeys = useIdSet<string>()
-  const revealingKeys = useIdSet<string>()
-  const savingKey = savingKeyAction.loading
   const deletingKey = deletingKeyAction.loading
   const batchDeleting = batchDeletingAction.loading
   const updatingStatusKeyIds = updatingStatusKeys.ids
-  const revealingKeyIds = revealingKeys.ids
-  const form = ref<ApiKeyFormValue>(emptyForm())
+
   watch([showDeleteModal, batchDeleting], ([open, busy]) => {
     if (open && !busy)
       deleteCount.value = options.selectedIds.value.size
   })
 
-  function openCreate() {
-    editingKey.value = null
-    form.value = emptyForm()
-    showFormModal.value = true
-  }
-
-  function openEdit(key: ApiKeyRow) {
-    editingKey.value = key
-    form.value = {
-      providerRequestProfileOverrides: cloneProfiles(key.providerRequestProfileOverrides),
-      customKey: '',
-      name: key.name,
-      label: key.label ?? '',
-      groupIds: key.groups.map(group => group.id),
-      maxConcurrency: limitInputValue(key.maxConcurrency),
-      requestsPerMinute: limitInputValue(key.requestsPerMinute),
-      dailyLimitUsd: limitInputValue(key.dailyLimitUsd),
-      weeklyLimitUsd: limitInputValue(key.weeklyLimitUsd),
-    }
-    showFormModal.value = true
-  }
-
-  function requestSave() {
-    if (!validateForm() || savingKey.value)
-      return
-    if (form.value.groupIds.length === 0) {
-      showAllAccountsConfirm.value = true
-      return
-    }
-    void save()
-  }
-
-  async function confirmAllAccountsScope() {
-    showAllAccountsConfirm.value = false
-    await save()
-  }
-
-  async function save() {
-    if (!validateForm() || savingKey.value)
-      return
-
-    await savingKeyAction.run(
-      async () => {
-        const payload = {
-          name: form.value.name.trim(),
-          label: form.value.label.trim() || null,
-          groupIds: [...new Set(form.value.groupIds)],
-          maxConcurrency: parseLimit(form.value.maxConcurrency),
-          requestsPerMinute: parseLimit(form.value.requestsPerMinute),
-          dailyLimitUsd: form.value.dailyLimitUsd.trim() || '0',
-          weeklyLimitUsd: form.value.weeklyLimitUsd.trim() || '0',
-        }
-        const current = editingKey.value
-        if (current) {
-          await updateApiKey({
-            id: current.id,
-            ...payload,
-            providerRequestProfileOverrides: profileOverrideUpdates(
-              current.providerRequestProfileOverrides,
-              form.value.providerRequestProfileOverrides,
-            ),
-          })
-        }
-        else {
-          const result = await createApiKey({
-            ...payload,
-            providerRequestProfileOverrides: cloneProfiles(form.value.providerRequestProfileOverrides),
-            customKey: form.value.customKey || undefined,
-          })
-          createdKey.value = result.plaintextKey
-          createdKeyName.value = payload.name
-        }
-
-        showFormModal.value = false
-        await options.reload()
-        if (current) {
-          toast.success('API Key 已更新')
-        }
-        else {
-          showKeyModal.value = true
-          toast.success('API Key 创建成功')
-        }
-      },
-      { onError: () => void options.reload() },
-    )
-  }
-
-  function validateForm() {
-    for (const [label, value] of [['日限额', form.value.dailyLimitUsd], ['周限额', form.value.weeklyLimitUsd]]) {
-      if (value.trim() && !/^\d{1,10}(?:\.\d{1,10})?$/.test(value.trim())) {
-        toast.warning(`${label}必须是非负金额，最多 10 位小数`)
-        return false
-      }
-    }
-    if (!form.value.name.trim()) {
-      toast.warning('请输入 API Key 名称')
-      return false
-    }
-    if (!editingKey.value && form.value.customKey && !/^[\x21-\x7E]+$/.test(form.value.customKey)) {
-      toast.warning('自定义 Key 只能包含 HTTP 可传输的可见字符，不能包含空格或换行')
-      return false
-    }
-    for (const [label, value] of [
-      ['最大并发', form.value.maxConcurrency],
-      ['每分钟请求数', form.value.requestsPerMinute],
-    ] as const) {
-      const parsed = Number(value)
-      if (!Number.isSafeInteger(parsed) || parsed < 0) {
-        toast.warning(`${label}必须是非负整数`)
-        return false
-      }
-    }
-    return true
-  }
-
-  function requestDeleteKey(key: ApiKeyRow) {
+  function requestDeleteKey(key: ApiKey) {
     pendingDeleteKey.value = key
     showSingleDeleteModal.value = true
   }
@@ -222,7 +73,7 @@ export function useApiKeyMutations(options: {
     )
   }
 
-  async function handleToggleStatus(key: ApiKeyRow) {
+  async function handleToggleStatus(key: ApiKey) {
     await updatingStatusKeys.run(key.id, async () => {
       try {
         const mutation = key.enabled ? disableApiKey : enableApiKey
@@ -236,108 +87,5 @@ export function useApiKeyMutations(options: {
     })
   }
 
-  async function copyToClipboard(text: string) {
-    await copyText(text, { successText: '已复制到剪贴板', emptyErrorText: '复制失败' })
-  }
-
-  async function revealPlaintextKey(apiKey: ApiKeyRow) {
-    try {
-      const result = await revealingKeys.run(apiKey.id, () => revealApiKey({ id: apiKey.id }))
-      if (!result)
-        return undefined
-      if (!result.plaintextKey) {
-        toast.error('完整 API Key 不可用')
-        return undefined
-      }
-      return result.plaintextKey
-    }
-    catch {
-      return undefined
-    }
-  }
-
-  async function copyApiKey(apiKey: ApiKeyRow) {
-    const key = await revealPlaintextKey(apiKey)
-    if (key)
-      await copyToClipboard(key)
-  }
-
-  function clearCreatedKey() {
-    createdKey.value = ''
-    createdKeyName.value = ''
-  }
-
-  function clearCustomKey() {
-    form.value.customKey = ''
-  }
-
-  return {
-    showFormModal,
-    showDeleteModal,
-    showSingleDeleteModal,
-    showKeyModal,
-    showAllAccountsConfirm,
-    createdKey,
-    createdKeyName,
-    editingKey,
-    pendingDeleteKey,
-    deleteCount,
-    savingKey,
-    deletingKey,
-    batchDeleting,
-    updatingStatusKeyIds,
-    revealingKeyIds,
-    form,
-    openCreate,
-    openEdit,
-    clearCustomKey,
-    clearCreatedKey,
-    requestSave,
-    confirmAllAccountsScope,
-    requestDeleteKey,
-    handleDelete,
-    handleBatchDelete,
-    handleToggleStatus,
-    copyToClipboard,
-    revealPlaintextKey,
-    copyApiKey,
-  }
-}
-
-function emptyForm(): ApiKeyFormValue {
-  return {
-    providerRequestProfileOverrides: {},
-    customKey: '',
-    name: '',
-    label: '',
-    groupIds: [],
-    maxConcurrency: '',
-    requestsPerMinute: '',
-    dailyLimitUsd: '',
-    weeklyLimitUsd: '',
-  }
-}
-
-function cloneProfiles(value: ProviderRequestProfiles): ProviderRequestProfiles {
-  return JSON.parse(JSON.stringify(value)) as ProviderRequestProfiles
-}
-
-function profileOverrideUpdates(
-  previous: ProviderRequestProfiles,
-  current: ProviderRequestProfiles,
-): Record<string, ProviderRequestProfile | null> {
-  const updates: Record<string, ProviderRequestProfile | null> = cloneProfiles(current)
-  for (const provider of Object.keys(previous)) {
-    if (!Object.hasOwn(current, provider))
-      updates[provider] = null
-  }
-  return updates
-}
-
-function limitInputValue(limit: string | number) {
-  return Number(limit) === 0 ? '' : String(limit)
-}
-
-function parseLimit(value: string) {
-  return Number(value)
+  return { showDeleteModal, showSingleDeleteModal, pendingDeleteKey, deleteCount, deletingKey, batchDeleting, updatingStatusKeyIds, requestDeleteKey, handleDelete, handleBatchDelete, handleToggleStatus }
 }
diff --git a/frontend/src/views/keys/composables/useApiKeyUse.ts b/frontend/src/views/keys/composables/useApiKeyUse.ts
index 69dbc31c8..509dd7b59 100644
--- a/frontend/src/views/keys/composables/useApiKeyUse.ts
+++ b/frontend/src/views/keys/composables/useApiKeyUse.ts
@@ -1,60 +1,101 @@
-import type { Ref, ShallowRef } from 'vue'
-import type { getApiKeys } from '@/api'
-import { computed, shallowRef } from 'vue'
-
+import type { ApiKey } from '@/api'
+import { toast } from '@codex-proxy/ui'
+import { shallowRef } from 'vue'
+import { revealApiKey } from '@/api'
+import { useCopyText } from '@/composables/useCopyText'
+import { useIdSet } from '@/composables/useIdSet'
 import { buildCodexCcSwitchImportDeeplink, resolveServiceRootUrl } from '@/utils/client'
 
-// “使用密钥”弹窗展示明文时，在列表行上补挂 reveal 得到的完整 key。
-type ApiKeyRow = Awaited<ReturnType<typeof getApiKeys>>['items'][number] & { key?: string }
-
-// 密钥使用与 CCSwitch 导入编排：服务根地址推导、deeplink 跳转、
-// “使用密钥”弹窗的明文补全与打开。
-export function useApiKeyUse(options: {
-  createdKey: Readonly<Ref<string>>
-  createdKeyName: Readonly<Ref<string>>
-  revealPlaintextKey: (apiKey: ApiKeyRow) => Promise<string | undefined>
-}) {
+// 明文读取、复制、展示与导入共用生命周期，列表数据不保存明文。
+export function useApiKeyUse() {
+  const copyText = useCopyText()
+  const revealingKeys = useIdSet<string>()
   const showUseKeyModal = shallowRef(false)
-  const selectedUseKey: ShallowRef<ApiKeyRow | null> = shallowRef(null)
+  const selectedUseKey = shallowRef<(ApiKey & { key: string }) | null>(null)
+  const showCreatedKeyModal = shallowRef(false)
+  const createdKey = shallowRef('')
+  const createdKeyName = shallowRef('')
 
-  const serviceRootUrl = computed(() => resolveServiceRootUrl())
-  const openAiBaseUrl = computed(() => `${serviceRootUrl.value}/v1`)
+  function showCreatedKey(key: string, name: string) {
+    createdKey.value = key
+    createdKeyName.value = name
+    showCreatedKeyModal.value = true
+  }
+
+  const openAiBaseUrl = `${resolveServiceRootUrl()}/v1`
 
   function importCreatedKeyToCcs() {
-    if (!options.createdKey.value)
+    if (!createdKey.value)
       return
 
     window.location.href = buildCodexCcSwitchImportDeeplink({
-      apiKey: options.createdKey.value,
-      baseUrl: openAiBaseUrl.value,
-      providerName: options.createdKeyName.value || 'codex-proxy-rs',
+      apiKey: createdKey.value,
+      baseUrl: openAiBaseUrl,
+      providerName: createdKeyName.value || 'codex-proxy-rs',
     })
   }
 
-  async function openUseKeyModal(apiKey: ApiKeyRow) {
-    const key = await options.revealPlaintextKey(apiKey)
+  async function openUseKeyModal(apiKey: ApiKey) {
+    const key = await revealPlaintextKey(apiKey)
     if (!key)
       return
     selectedUseKey.value = { ...apiKey, key }
     showUseKeyModal.value = true
   }
 
-  async function importToCcs(apiKey: ApiKeyRow) {
-    const key = await options.revealPlaintextKey(apiKey)
+  async function importToCcs(apiKey: ApiKey) {
+    const key = await revealPlaintextKey(apiKey)
     if (!key)
       return
     window.location.href = buildCodexCcSwitchImportDeeplink({
       apiKey: key,
-      baseUrl: openAiBaseUrl.value,
+      baseUrl: openAiBaseUrl,
       providerName: apiKey.name || apiKey.prefix || 'codex-proxy-rs',
     })
   }
 
+  async function copyToClipboard(text: string) {
+    await copyText(text, { successText: '已复制到剪贴板', emptyErrorText: '复制失败' })
+  }
+
+  async function revealPlaintextKey(apiKey: ApiKey) {
+    try {
+      const result = await revealingKeys.run(apiKey.id, () => revealApiKey({ id: apiKey.id }))
+      if (!result)
+        return undefined
+      if (!result.plaintextKey) {
+        toast.error('完整 API Key 不可用')
+        return undefined
+      }
+      return result.plaintextKey
+    }
+    catch {
+      return undefined
+    }
+  }
+
+  async function copyApiKey(apiKey: ApiKey) {
+    const key = await revealPlaintextKey(apiKey)
+    if (key)
+      await copyToClipboard(key)
+  }
+
+  function clearCreatedKey() {
+    createdKey.value = ''
+    createdKeyName.value = ''
+  }
+
   return {
     showUseKeyModal,
     selectedUseKey,
-    serviceRootUrl,
+    showCreatedKeyModal,
+    createdKey,
+    revealingKeyIds: revealingKeys.ids,
     openAiBaseUrl,
+    showCreatedKey,
+    clearCreatedKey,
+    copyToClipboard,
+    copyApiKey,
     importCreatedKeyToCcs,
     openUseKeyModal,
     importToCcs,
diff --git a/frontend/src/views/keys/composables/useApiKeysQuery.ts b/frontend/src/views/keys/composables/useApiKeysQuery.ts
index 8273a0e01..954aa2aee 100644
--- a/frontend/src/views/keys/composables/useApiKeysQuery.ts
+++ b/frontend/src/views/keys/composables/useApiKeysQuery.ts
@@ -1,7 +1,7 @@
 import type { BaseTableSort } from '@codex-proxy/ui'
-import { watchDebounced } from '@vueuse/core'
+import type { ApiKey } from '@/api'
 
-import { computed, onMounted, shallowRef } from 'vue'
+import { computed, onMounted, shallowRef, watch } from 'vue'
 import { getApiKeys } from '@/api'
 import { useRequestState } from '@/composables/useRequestState'
 
@@ -11,11 +11,7 @@ export function useApiKeysQuery() {
   const page = shallowRef(1)
   const pageSize = shallowRef(20)
   const total = shallowRef(0)
-  const apiKeys = shallowRef<
-    Array<Awaited<ReturnType<typeof getApiKeys>>['items'][number] & {
-      createdAtDisplay: string
-    }>
-  >([])
+  const apiKeys = shallowRef<ApiKey[]>([])
   const request = useRequestState()
   const { loading } = request
   const cursors = new Map<number, string | undefined>([[1, undefined]])
@@ -50,9 +46,7 @@ export function useApiKeysQuery() {
   }
 
   function applyPage(result: Awaited<ReturnType<typeof getApiKeys>>, targetPage: number) {
-    apiKeys.value = result.items.map((item: (typeof result.items)[number]) => ({
-      ...item,
-    }))
+    apiKeys.value = result.items
     total.value = result.total
     page.value = targetPage
   }
@@ -120,13 +114,12 @@ export function useApiKeysQuery() {
     void reloadFromStart()
   }
 
-  watchDebounced(
-    searchQuery,
-    () => {
+  watch(searchQuery, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
       void reloadFromStart()
-    },
-    { debounce: 250 },
-  )
+    }, 250)
+    onCleanup(() => clearTimeout(timer))
+  })
 
   onMounted(() => {
     void execute()
diff --git a/frontend/src/views/keys/constants.ts b/frontend/src/views/keys/constants.ts
index 00cf9373f..01902838a 100644
--- a/frontend/src/views/keys/constants.ts
+++ b/frontend/src/views/keys/constants.ts
@@ -1,11 +1,8 @@
-import type { getApiKeys } from '@/api'
+import type { ApiKey } from '@/api'
+
 import { defineTableColumns } from '@codex-proxy/ui'
 
-type ApiKeyRow = Awaited<ReturnType<typeof getApiKeys>>['items'][number] & {
-  createdAtDisplay: string
-}
-
-export const apiKeyColumns = defineTableColumns<ApiKeyRow>([
+export const apiKeyColumns = defineTableColumns<ApiKey>([
   { key: 'selection', kind: 'selection' },
   { key: 'identity', label: '名称', kind: 'identity', size: '2xl', sortable: 'name' },
   { key: 'prefix', label: '密钥前缀', kind: 'mono', size: '2xl' },
diff --git a/frontend/src/views/keys/index.vue b/frontend/src/views/keys/index.vue
index 089b5c057..1d3ae0b99 100644
--- a/frontend/src/views/keys/index.vue
+++ b/frontend/src/views/keys/index.vue
@@ -10,12 +10,14 @@ import { usePageSelection } from '@/composables/usePageSelection'
 import ApiKeyActions from './components/ApiKeyActions.vue'
 import ApiKeyBudgetCell from './components/ApiKeyBudgetCell.vue'
 import ApiKeyBudgetResetModal from './components/ApiKeyBudgetResetModal.vue'
-import ApiKeyCreateModal from './components/ApiKeyCreateModal.vue'
+import ApiKeyCreatedModal from './components/ApiKeyCreatedModal.vue'
 import ApiKeyFilters from './components/ApiKeyFilters.vue'
+import ApiKeyFormModal from './components/ApiKeyFormModal.vue'
 import ApiKeyIdentityCell from './components/ApiKeyIdentityCell.vue'
 import ApiKeyPrefixCell from './components/ApiKeyPrefixCell.vue'
 import ApiKeyScopeCell from './components/ApiKeyScopeCell.vue'
 import ApiKeyStatusBadge from './components/ApiKeyStatusBadge.vue'
+import { useApiKeyEditor } from './composables/useApiKeyEditor'
 import { useApiKeyMutations } from './composables/useApiKeyMutations'
 import { useApiKeysQuery } from './composables/useApiKeysQuery'
 import { useApiKeyUse } from './composables/useApiKeyUse'
@@ -48,35 +50,46 @@ const {
 } = useAccountGroupCatalog({ immediate: false })
 
 const {
-  showFormModal,
-  showDeleteModal,
-  showSingleDeleteModal,
-  showKeyModal,
-  showAllAccountsConfirm,
+  showUseKeyModal,
+  selectedUseKey,
+  showCreatedKeyModal,
   createdKey,
-  createdKeyName,
-  editingKey,
-  pendingDeleteKey,
-  deleteCount,
-  savingKey,
-  deletingKey,
-  batchDeleting,
-  updatingStatusKeyIds,
   revealingKeyIds,
+  openAiBaseUrl,
+  showCreatedKey,
+  clearCreatedKey,
+  copyToClipboard,
+  copyApiKey,
+  importCreatedKeyToCcs,
+  openUseKeyModal,
+  importToCcs,
+} = useApiKeyUse()
+
+const {
+  showFormModal,
+  showAllAccountsConfirm,
+  editingKey,
+  savingKey,
   form,
   openCreate,
   openEdit,
   clearCustomKey,
-  clearCreatedKey,
   requestSave,
   confirmAllAccountsScope,
+} = useApiKeyEditor({ reload: loadApiKeys, onCreated: showCreatedKey })
+
+const {
+  showDeleteModal,
+  showSingleDeleteModal,
+  pendingDeleteKey,
+  deleteCount,
+  deletingKey,
+  batchDeleting,
+  updatingStatusKeyIds,
   requestDeleteKey,
   handleDelete,
   handleBatchDelete,
   handleToggleStatus,
-  copyToClipboard,
-  revealPlaintextKey,
-  copyApiKey,
 } = useApiKeyMutations({ selectedIds, reload: loadApiKeys })
 
 const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll } = usePageSelection(
@@ -84,19 +97,6 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
   selectedIds,
 )
 
-const {
-  showUseKeyModal,
-  selectedUseKey,
-  openAiBaseUrl,
-  importCreatedKeyToCcs,
-  openUseKeyModal,
-  importToCcs,
-} = useApiKeyUse({
-  createdKey,
-  createdKeyName,
-  revealPlaintextKey,
-})
-
 watch(
   showFormModal,
   open => open && void loadGroups(),
@@ -214,20 +214,23 @@ watch(
       </template>
     </BaseCard>
 
-    <ApiKeyCreateModal
+    <ApiKeyFormModal
       v-model="showFormModal"
-      v-model:created-open="showKeyModal"
       v-model:form="form"
       :groups="groups"
       :group-loading="loadingGroups"
       :editing="Boolean(editingKey)"
-      :created-key="createdKey"
       :saving="savingKey"
-      @copy="copyToClipboard"
       @save="requestSave"
-      @import-ccs="importCreatedKeyToCcs"
       @after-leave="clearCustomKey"
-      @created-after-leave="clearCreatedKey"
+    />
+
+    <ApiKeyCreatedModal
+      v-model="showCreatedKeyModal"
+      :created-key="createdKey"
+      @copy="copyToClipboard"
+      @import-ccs="importCreatedKeyToCcs"
+      @after-leave="clearCreatedKey"
     />
 
     <ApiKeyBudgetResetModal
diff --git a/frontend/src/views/plugins/components/PluginCapabilityTags.vue b/frontend/src/views/plugins/components/PluginCapabilityTags.vue
index 072195e27..8eb0f884d 100644
--- a/frontend/src/views/plugins/components/PluginCapabilityTags.vue
+++ b/frontend/src/views/plugins/components/PluginCapabilityTags.vue
@@ -2,7 +2,7 @@
 import type { PluginArtifactMetadata } from '@/api'
 import { BasePopover, BaseTag } from '@codex-proxy/ui'
 import { computed, shallowRef, useId } from 'vue'
-import { pluginCapabilityLabel, pluginContributionEntries } from '../utils/model'
+import { pluginCapabilityLabel } from '../utils/model'
 
 const props = withDefaults(defineProps<{
   metadata: PluginArtifactMetadata
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
 
 const open = shallowRef(false)
 const contentId = useId()
-const entries = computed(() => pluginContributionEntries(props.metadata))
+const entries = computed(() => Object.entries(props.metadata.contributes))
 const visible = computed(() => entries.value.slice(0, 2))
 const hidden = computed(() => entries.value.slice(2))
 </script>
diff --git a/frontend/src/views/plugins/components/PluginCatalogPanel.vue b/frontend/src/views/plugins/components/PluginCatalogPanel.vue
index ccd2b09ea..cfb6698c5 100644
--- a/frontend/src/views/plugins/components/PluginCatalogPanel.vue
+++ b/frontend/src/views/plugins/components/PluginCatalogPanel.vue
@@ -3,7 +3,8 @@ import type { InstalledPlugin } from '../utils/catalog'
 import { BaseButton, BaseCard, BaseEmpty, BaseIconButton, BaseInput, BaseScrollbar, BaseSegmented, BaseSelect, BaseTable, BaseTablePagination, BaseTag, defineTableColumns } from '@codex-proxy/ui'
 import { CircleAlert, LayoutGrid, List, Puzzle, Search, Settings2 } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
-import { currentPluginInstance, PLUGIN_STATUS_LABELS, pluginStatus, pluginStatusType } from '../utils/catalog'
+import { PLUGIN_STATUS_LABELS } from '../constants'
+import { currentPluginInstance, pluginStatus, pluginStatusType } from '../utils/catalog'
 import PluginCapabilityTags from './PluginCapabilityTags.vue'
 import PluginCompatibilityWarning from './PluginCompatibilityWarning.vue'
 import PluginIcon from './PluginIcon.vue'
diff --git a/frontend/src/views/plugins/components/PluginConfigurationFields.vue b/frontend/src/views/plugins/components/PluginConfigurationFields.vue
index ea14aa1ec..f8309d64d 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationFields.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationFields.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { JsonSchema } from '../utils/model'
-
 import { BaseEmpty, BaseFormItem, BaseInput, BaseTag } from '@codex-proxy/ui'
 
 import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
-import SchemaForm from '@/components/SchemaForm/index.vue'
-import { jsonObjectError, parseJsonObject } from '@/utils/data'
+
+import SchemaForm from '@/components/schema-form/index.vue'
+import { parseJsonObject } from '@/utils/data'
+import { PLUGIN_CONFIGURATION_MAX_BYTES } from '../constants'
 import PluginHelpPopover from './PluginHelpPopover.vue'
 
 const props = withDefaults(defineProps<{
@@ -29,7 +30,8 @@ const secrets = defineModel<Record<string, string>>('secrets', { required: true
 const configurationText = shallowRef('{}')
 const schemaForm = useTemplateRef<{ focusField: (key?: string) => Promise<boolean> }>('schemaForm')
 const secretFieldsRoot = useTemplateRef<HTMLElement>('secretFieldsRoot')
-const configurationError = computed(() => jsonObjectError(configurationText.value, 48 * 1024))
+const parsedConfiguration = computed(() => parseJsonObject(configurationText.value, PLUGIN_CONFIGURATION_MAX_BYTES))
+const configurationError = computed(() => parsedConfiguration.value.error)
 const configurationSchema = computed(() => {
   const schema = { ...props.schema } as JsonSchema
   if (schema.properties) {
@@ -118,9 +120,9 @@ watch(
   { immediate: true },
 )
 
-watch(configurationText, (text) => {
-  if (!jsonObjectError(text, 48 * 1024))
-    configuration.value = parseJsonObject(text, 48 * 1024)
+watch(parsedConfiguration, ({ value }) => {
+  if (value)
+    configuration.value = value
 })
 
 async function focusInvalid() {
@@ -165,7 +167,7 @@ defineExpose({ focusInvalid, validationMessage })
       v-model="configurationText"
       :schema="configurationSchema"
       :disabled="disabled"
-      :maximum-bytes="48 * 1024"
+      :maximum-bytes="PLUGIN_CONFIGURATION_MAX_BYTES"
       :field-errors="configurationFieldErrors"
     />
 
diff --git a/frontend/src/views/plugins/components/PluginConfigurationModal.vue b/frontend/src/views/plugins/components/PluginConfigurationModal.vue
index dbe64b6f7..d12a0a31c 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationModal.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationModal.vue
@@ -2,8 +2,9 @@
 import type { ConfigurePluginInstanceRequest, PluginArtifact, PluginInstance, PluginVersionPlan } from '@/api'
 import { BaseButton, BaseModal, BaseSegmented, toast } from '@codex-proxy/ui'
 import { Blocks, Save, Settings2, ShieldCheck } from '@lucide/vue'
+import { cloneDeep } from 'es-toolkit'
 import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
-import { cloneJsonValue, pluginContributionForCapability, pluginRequestBindingEntries } from '../utils/model'
+import { pluginRequestBindingEntries } from '../utils/model'
 import PluginBindingEditor from './PluginBindingEditor.vue'
 import PluginConfigurationFields from './PluginConfigurationFields.vue'
 import PluginFrontendAuthenticationEditor from './PluginFrontendAuthenticationEditor.vue'
@@ -29,12 +30,12 @@ const configurationFields = useTemplateRef<{ focusInvalid: () => Promise<unknown
 const authenticationEditor = useTemplateRef<{ validationError: string }>('authenticationEditor')
 const existingSecretFields = computed(() => props.draft?.secretFields ?? props.instance?.secretFields ?? [])
 const versionChanged = computed(() => Boolean(props.instance && props.artifact && props.instance.artifactSha256 !== props.artifact.metadata.sha256))
-const authenticationContribution = computed(() => props.artifact && pluginContributionForCapability(props.artifact.metadata, 'frontend_authentication'))
+const authenticationContribution = computed(() => props.artifact && props.artifact.metadata.contributes.frontend_authentication)
 const authenticationBinding = computed({
   get: () => bindings.value.find(binding => binding.contribution === authenticationContribution.value?.id) ?? null,
   set: (binding) => {
     const others = bindings.value.filter(value => value.contribution !== authenticationContribution.value?.id)
-    bindings.value = binding ? [...others, cloneJsonValue(binding)] : others
+    bindings.value = binding ? [...others, cloneDeep(binding)] : others
   },
 })
 const hasRequestBindings = computed(() => props.artifact && pluginRequestBindingEntries(props.artifact.metadata).length > 0)
@@ -80,11 +81,11 @@ async function submit() {
     name: instance.name,
     artifactSha256: artifact.metadata.sha256,
     enabled: instance.enabled || (!versionChanged.value && instance.configurationRequired),
-    configuration: cloneJsonValue(configuration.value),
-    bindings: cloneJsonValue(bindings.value),
+    configuration: cloneDeep(configuration.value),
+    bindings: cloneDeep(bindings.value),
   }
   if (secretMode.value !== 'preserve')
-    input.secrets = secretMode.value === 'clear' ? {} : cloneJsonValue(secretValues.value)
+    input.secrets = secretMode.value === 'clear' ? {} : cloneDeep(secretValues.value)
   emit('save', input)
 }
 
@@ -92,8 +93,8 @@ watch(open, async (value) => {
   if (!value)
     return
   secretValues.value = {}
-  configuration.value = cloneJsonValue(props.draft?.configuration ?? props.instance?.configuration ?? {})
-  bindings.value = cloneJsonValue(props.draft?.bindings ?? props.instance?.bindings ?? [])
+  configuration.value = cloneDeep(props.draft?.configuration ?? props.instance?.configuration ?? {})
+  bindings.value = cloneDeep(props.draft?.bindings ?? props.instance?.bindings ?? [])
   secretMode.value = existingSecretFields.value.length ? 'preserve' : 'replace'
   configurationValid.value = true
   authenticationValid.value = true
diff --git a/frontend/src/views/plugins/components/PluginConfigurationSummary.vue b/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
index 05d0cb175..2122fd0b9 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
@@ -3,7 +3,8 @@ import type { PluginArtifactMetadata, PluginCapabilityBinding, PluginInstance }
 import { BaseScrollbar } from '@codex-proxy/ui'
 import { ChevronDown } from '@lucide/vue'
 import { computed } from 'vue'
-import { PLUGIN_OBSERVER_EVENT_LABELS, PLUGIN_REQUEST_STAGES, pluginCapabilityForContribution, pluginCapabilityLabel } from '../utils/model'
+import { PLUGIN_OBSERVER_EVENT_LABELS, PLUGIN_REQUEST_STAGES } from '../constants'
+import { pluginCapabilityForContribution, pluginCapabilityLabel } from '../utils/model'
 
 const props = defineProps<{
   instance: Pick<PluginInstance, 'name' | 'bindings'> & { id?: string }
diff --git a/frontend/src/views/plugins/components/PluginDetailModal.vue b/frontend/src/views/plugins/components/PluginDetailModal.vue
index 3dc0bd160..b8c9eed32 100644
--- a/frontend/src/views/plugins/components/PluginDetailModal.vue
+++ b/frontend/src/views/plugins/components/PluginDetailModal.vue
@@ -6,9 +6,10 @@ import { BaseButton, BaseEmpty, BaseIconButton, BaseModal, BaseSegmented, BaseTa
 import { ArrowUpRight, CircleAlert, History, Layers, Play, Power, RefreshCw, Settings2 } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
-import { configurationStatus, currentPluginInstance, hasPluginSettings, PLUGIN_STATUS_LABELS, pluginStatusType } from '../utils/catalog'
+import { pluginPageLocation } from '@/utils/plugin'
+import { PLUGIN_STATUS_LABELS } from '../constants'
+import { configurationStatus, currentPluginInstance, hasPluginSettings, pluginStatusType } from '../utils/catalog'
 import { artifactForInstance } from '../utils/model'
-import { pluginPageLocation } from '../utils/navigation'
 import PluginCompatibilityWarning from './PluginCompatibilityWarning.vue'
 import PluginConfigurationSummary from './PluginConfigurationSummary.vue'
 import PluginHelpPopover from './PluginHelpPopover.vue'
diff --git a/frontend/src/views/plugins/components/PluginExtensionsPanel.vue b/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
index b9e20ea6f..7eb6dbae5 100644
--- a/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
+++ b/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
@@ -5,7 +5,7 @@ import { BaseButton, BaseEmpty, BaseTag } from '@codex-proxy/ui'
 import { Blocks, ExternalLink } from '@lucide/vue'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { pluginPageLocation, shortPluginInstanceId } from '../utils/navigation'
+import { pluginPageLocation, shortPluginInstanceId } from '@/utils/plugin'
 
 const props = defineProps<{
   views: PluginManagementView[]
diff --git a/frontend/src/views/plugins/components/PluginInstallModal.vue b/frontend/src/views/plugins/components/PluginInstallModal.vue
index bfa9b64d8..0540e8b48 100644
--- a/frontend/src/views/plugins/components/PluginInstallModal.vue
+++ b/frontend/src/views/plugins/components/PluginInstallModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginUpdateSelection } from '../composables/usePluginUpdateCheck'
-import type { PluginInstallSelection } from '../utils/model'
+import type { PluginInstallMode, PluginInstallSelection } from '../utils/model'
 import type {
   CreatePluginSourceCredentialRequest,
   PluginArtifact,
@@ -26,8 +26,6 @@ import PluginDownloadAuthentication from './PluginDownloadAuthentication.vue'
 import PluginHelpPopover from './PluginHelpPopover.vue'
 import PluginSourceProxyField from './PluginSourceProxyField.vue'
 
-export type PluginInstallMode = 'upload' | 'url' | 'github'
-
 const props = defineProps<{
   mode: PluginInstallMode
   installedArtifacts: PluginArtifact[]
diff --git a/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue b/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
index 4835ac951..dffe8c544 100644
--- a/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
+++ b/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
@@ -2,7 +2,8 @@
 import type { PluginArtifact, PluginInstance } from '@/api'
 import { BaseIconButton, BaseTag } from '@codex-proxy/ui'
 import { Play, Power, Settings2, Trash2 } from '@lucide/vue'
-import { configurationStatus, PLUGIN_STATUS_LABELS, pluginStatusType } from '../utils/catalog'
+import { PLUGIN_STATUS_LABELS } from '../constants'
+import { configurationStatus, pluginStatusType } from '../utils/catalog'
 import { artifactForInstance } from '../utils/model'
 import PluginCompatibilityWarning from './PluginCompatibilityWarning.vue'
 
diff --git a/frontend/src/views/plugins/components/PluginManagement.vue b/frontend/src/views/plugins/components/PluginManagement.vue
index 53498b56e..cd5ab8d1b 100644
--- a/frontend/src/views/plugins/components/PluginManagement.vue
+++ b/frontend/src/views/plugins/components/PluginManagement.vue
@@ -260,7 +260,7 @@ const tabOptions = [
       description="仍被使用时不可删除，删除后无法恢复"
       destructive
       confirm-text="确认删除"
-      :loading="Boolean(management.busyDistributionId.value)"
+      :loading="Boolean(management.busyCredentialId.value)"
       @confirm="management.confirmCredentialDelete"
     >
       <p class="m-0 wrap-anywhere text-cp-sm font-normal">
diff --git a/frontend/src/views/plugins/components/PluginPage.vue b/frontend/src/views/plugins/components/PluginPage.vue
index f850a270e..e4eaa9544 100644
--- a/frontend/src/views/plugins/components/PluginPage.vue
+++ b/frontend/src/views/plugins/components/PluginPage.vue
@@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted, shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { usePluginViewsStore } from '@/stores/modules/plugin-views'
-import { pluginPageLocation } from '../utils/navigation'
+import { pluginPageLocation } from '@/utils/plugin'
 import PluginManagementFrame from './PluginManagementFrame.vue'
 import PluginPageLoading from './PluginPageLoading.vue'
 
diff --git a/frontend/src/views/plugins/components/PluginVersionCard.vue b/frontend/src/views/plugins/components/PluginVersionCard.vue
index 6ad9f974e..49845051b 100644
--- a/frontend/src/views/plugins/components/PluginVersionCard.vue
+++ b/frontend/src/views/plugins/components/PluginVersionCard.vue
@@ -3,7 +3,8 @@ import type { PluginArtifact, PluginInstance } from '@/api'
 import { BaseIconButton, BaseTag } from '@codex-proxy/ui'
 import { ArrowDownToLine, ChevronDown, CircleAlert, Play, Trash2 } from '@lucide/vue'
 import { computed, shallowRef, useId } from 'vue'
-import { configurationStatus, PLUGIN_STATUS_LABELS, pluginStatusType } from '../utils/catalog'
+import { PLUGIN_STATUS_LABELS } from '../constants'
+import { configurationStatus, pluginStatusType } from '../utils/catalog'
 import { shortDigest, sourceDetail, sourceLabel } from '../utils/model'
 import PluginCompatibilityWarning from './PluginCompatibilityWarning.vue'
 
diff --git a/frontend/src/views/plugins/composables/usePluginActions.ts b/frontend/src/views/plugins/composables/usePluginActions.ts
deleted file mode 100644
index be91b5053..000000000
--- a/frontend/src/views/plugins/composables/usePluginActions.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { Ref } from 'vue'
-import { toast } from '@codex-proxy/ui'
-import { ApiError } from '@/api/request'
-import { errorMessage } from '@/utils/operation'
-
-export type PluginActionContext = ReturnType<typeof usePluginActions>
-
-export function usePluginActions(refresh: (silent?: boolean, suppressErrors?: boolean) => Promise<void>) {
-  function notifyError(title: string, error: unknown) {
-    if (error instanceof ApiError && error.kind === 'cancelled')
-      return
-    toast.error(errorMessage(error, title))
-  }
-
-  async function runAction<T>(
-    flag: Ref<boolean>,
-    title: string,
-    task: () => Promise<T>,
-  ): Promise<T | undefined> {
-    if (flag.value)
-      return undefined
-    flag.value = true
-    try {
-      return await task()
-    }
-    catch (error) {
-      notifyError(title, error)
-      return undefined
-    }
-    finally {
-      flag.value = false
-    }
-  }
-
-  return { refresh, notifyError, runAction }
-}
diff --git a/frontend/src/views/plugins/composables/usePluginArtifactActions.ts b/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
index 7ef557689..8ac2f2cfd 100644
--- a/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
+++ b/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
@@ -1,10 +1,11 @@
-import type { PluginActionContext } from './usePluginActions'
+import type { PluginRefreshContext } from '../utils/actions'
 import type { PluginArtifact } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginArtifact } from '@/api'
+import { notifyPluginError } from '../utils/actions'
 
-export function usePluginArtifactActions({ refresh, notifyError }: Pick<PluginActionContext, 'refresh' | 'notifyError'>) {
+export function usePluginArtifactActions({ refresh }: PluginRefreshContext) {
   const showArtifactDelete = shallowRef(false)
   const pendingArtifact = shallowRef<PluginArtifact | null>(null)
   const busyDigest = shallowRef('')
@@ -26,7 +27,7 @@ export function usePluginArtifactActions({ refresh, notifyError }: Pick<PluginAc
       await refresh(true)
     }
     catch (error) {
-      notifyError('插件制品删除失败', error)
+      notifyPluginError('插件制品删除失败', error)
     }
     finally {
       busyDigest.value = ''
diff --git a/frontend/src/views/plugins/composables/usePluginCredentials.ts b/frontend/src/views/plugins/composables/usePluginCredentials.ts
index 35e044b3c..9c9668b55 100644
--- a/frontend/src/views/plugins/composables/usePluginCredentials.ts
+++ b/frontend/src/views/plugins/composables/usePluginCredentials.ts
@@ -1,22 +1,28 @@
 import type { Ref } from 'vue'
-import type { PluginActionContext } from './usePluginActions'
+import type { PluginRefreshContext } from '../utils/actions'
 import type { CreatePluginSourceCredentialRequest, PluginSourceCredential } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { createPluginSourceCredential, deletePluginSourceCredential } from '@/api'
+import { useAsyncAction } from '@/composables/useAsyncAction'
+import { notifyPluginError } from '../utils/actions'
 
-interface CredentialContext extends PluginActionContext {
+interface CredentialContext extends PluginRefreshContext {
   credentials: Ref<PluginSourceCredential[]>
 }
 
-export function usePluginCredentials({ credentials, refresh, notifyError, runAction }: CredentialContext) {
-  const savingCredential = shallowRef(false)
+export function usePluginCredentials({ credentials, refresh }: CredentialContext) {
+  const action = useAsyncAction({
+    errorText: false,
+    onError: error => notifyPluginError('下载认证保存失败', error),
+  })
+  const savingCredential = action.loading
   const showCredentialDelete = shallowRef(false)
   const pendingCredential = shallowRef<PluginSourceCredential | null>(null)
-  const busyDistributionId = shallowRef('')
+  const busyCredentialId = shallowRef('')
 
   async function saveCredential(request: CreatePluginSourceCredentialRequest) {
-    const result = await runAction(savingCredential, '下载认证保存失败', () => createPluginSourceCredential(request, { silent: true }))
+    const result = await action.run(() => createPluginSourceCredential(request, { silent: true }))
     if (!result)
       return null
     credentials.value = [...credentials.value, result]
@@ -30,9 +36,9 @@ export function usePluginCredentials({ credentials, refresh, notifyError, runAct
 
   async function confirmCredentialDelete() {
     const credential = pendingCredential.value
-    if (!credential || busyDistributionId.value)
+    if (!credential || busyCredentialId.value)
       return
-    busyDistributionId.value = credential.id
+    busyCredentialId.value = credential.id
     try {
       await deletePluginSourceCredential({ id: credential.id }, { silent: true })
       showCredentialDelete.value = false
@@ -40,12 +46,12 @@ export function usePluginCredentials({ credentials, refresh, notifyError, runAct
       await refresh(true)
     }
     catch (error) {
-      notifyError('来源凭据删除失败', error)
+      notifyPluginError('来源凭据删除失败', error)
     }
     finally {
-      busyDistributionId.value = ''
+      busyCredentialId.value = ''
     }
   }
 
-  return { savingCredential, showCredentialDelete, pendingCredential, busyDistributionId, saveCredential, requestCredentialDelete, confirmCredentialDelete }
+  return { savingCredential, showCredentialDelete, pendingCredential, busyCredentialId, saveCredential, requestCredentialDelete, confirmCredentialDelete }
 }
diff --git a/frontend/src/views/plugins/composables/usePluginInstallation.ts b/frontend/src/views/plugins/composables/usePluginInstallation.ts
index 70381f9f8..18d3fcae9 100644
--- a/frontend/src/views/plugins/composables/usePluginInstallation.ts
+++ b/frontend/src/views/plugins/composables/usePluginInstallation.ts
@@ -1,30 +1,32 @@
-import type { Ref } from 'vue'
-import type { PluginInstallMode } from '../components/PluginInstallModal.vue'
 import type { InstalledPlugin } from '../utils/catalog'
-import type { PluginInstallSelection } from '../utils/model'
+import type { PluginInstallMode, PluginInstallSelection } from '../utils/model'
 import type { PluginUpdateSelection } from './usePluginUpdateCheck'
 import type { PluginArtifact, PluginArtifactMutationResponse, PluginInstance, PluginRelease, PluginUpdateSourceBinding, QueryPluginReleaseRequest, VerifiedPluginArtifact } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { isEqual } from 'es-toolkit'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { acceptPluginArtifact, getPluginUpdateSources, installRemotePlugin, queryPluginRelease, updatePluginSource, uploadPluginArtifact, verifyRemotePlugin, verifyUploadedPlugin } from '@/api'
+import { useAsyncAction } from '@/composables/useAsyncAction'
+import { notifyPluginError } from '../utils/actions'
 import { pluginInstallSelectionKey } from '../utils/model'
 
 interface InstallationContext {
-  runAction: <T>(flag: Ref<boolean>, title: string, task: () => Promise<T>) => Promise<T | undefined>
-  notifyError: (title: string, error: unknown) => void
   onInstalled: (result: PluginArtifactMutationResponse, switchTarget?: PluginInstance) => Promise<void>
   onSourceSaved: (source: PluginUpdateSourceBinding) => void
 }
 
-export function usePluginInstallation({ runAction, notifyError, onInstalled, onSourceSaved }: InstallationContext) {
+export function usePluginInstallation({ onInstalled, onSourceSaved }: InstallationContext) {
   const showInstall = shallowRef(false)
   const installMode = shallowRef<PluginInstallMode>('upload')
   const updateSource = shallowRef<PluginUpdateSourceBinding | null>(null)
   const updateSelection = shallowRef<PluginUpdateSelection | null>(null)
   const acceptanceArtifact = shallowRef<PluginArtifact | null>(null)
   const release = shallowRef<PluginRelease | null>(null)
-  const installing = shallowRef(false)
+  const action = useAsyncAction({
+    errorText: false,
+    onError: error => notifyPluginError('插件安装失败', error),
+  })
+  const installing = action.loading
   const queryingRelease = shallowRef(false)
   const verifyingArtifact = shallowRef(false)
   const verifiedArtifact = shallowRef<{ requestKey: string | File, artifact: VerifiedPluginArtifact } | null>(null)
@@ -81,7 +83,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
     const previous = updateSource.value
     if (!previous || previous.pluginId !== source.pluginId)
       return false
-    const result = await runAction(installing, '安装来源保存失败', async () => {
+    const result = await action.run(async () => {
       const current = (await getPluginUpdateSources({ silent: true })).find(value => value.pluginId === source.pluginId)
       if (!isEqual(current, previous))
         throw new Error('安装来源已变更，请关闭后重新打开')
@@ -89,7 +91,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
       updateSource.value = source
       onSourceSaved(source)
       return true
-    })
+    }, { onError: error => notifyPluginError('安装来源保存失败', error) })
     return result === true
   }
 
@@ -113,7 +115,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
     }
     catch (error) {
       if (releaseController === controller)
-        notifyError('GitHub Release 查询失败', error)
+        notifyPluginError('GitHub Release 查询失败', error)
     }
     finally {
       if (releaseController === controller) {
@@ -129,7 +131,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
       toast.warning('请先校验当前选择的插件包')
       return
     }
-    const result = await runAction(installing, '插件安装失败', async () => {
+    const result = await action.run(async () => {
       const { pluginId, version, sha256 } = verified.artifact.metadata
       if (request instanceof File) {
         return uploadPluginArtifact(request, sha256, { silent: true })
@@ -155,7 +157,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
     const { artifact, request, instance, binding } = selection
     if (!artifact || !request || !instance)
       return false
-    const completed = await runAction(installing, '插件升级失败', async () => {
+    const completed = await action.run(async () => {
       const latest = (await getPluginUpdateSources({ silent: true })).find(value => value.pluginId === binding.pluginId)
       if (!isEqual(binding, latest))
         throw new Error('安装来源已变更，请重新检查更新')
@@ -170,7 +172,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
       // 使用检查时的实例 revision，避免下载期间的设置变更被升级覆盖。
       await onInstalled(result, instance)
       return true
-    })
+    }, { onError: error => notifyPluginError('插件升级失败', error) })
     return completed === true
   }
 
@@ -179,7 +181,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
       toast.warning('请选择待安装的插件版本')
       return
     }
-    const result = await runAction(installing, '插件安装失败', () => acceptPluginArtifact({ sha256: artifact.metadata.sha256 }, { silent: true }))
+    const result = await action.run(() => acceptPluginArtifact({ sha256: artifact.metadata.sha256 }, { silent: true }))
     if (!result)
       return
     showInstall.value = false
@@ -211,7 +213,7 @@ export function usePluginInstallation({ runAction, notifyError, onInstalled, onS
     }
     catch (error) {
       if (verificationController === controller)
-        notifyError('插件包校验失败', error)
+        notifyPluginError('插件包校验失败', error)
     }
     finally {
       if (verificationController === controller) {
diff --git a/frontend/src/views/plugins/composables/usePluginInstances.ts b/frontend/src/views/plugins/composables/usePluginInstances.ts
index 25e30400f..ec68aa2c7 100644
--- a/frontend/src/views/plugins/composables/usePluginInstances.ts
+++ b/frontend/src/views/plugins/composables/usePluginInstances.ts
@@ -1,24 +1,30 @@
 import type { Ref } from 'vue'
-import type { PluginActionContext } from './usePluginActions'
+import type { PluginRefreshContext } from '../utils/actions'
 import type { ConfigurePluginInstanceRequest, PluginArtifact, PluginInstance, PluginVersionPlan } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginInstance, disablePluginInstance, getPluginArtifacts, getPluginInstances, updatePluginInstance } from '@/api'
+import { useAsyncAction } from '@/composables/useAsyncAction'
+import { notifyPluginError } from '../utils/actions'
 import { configurationStatus } from '../utils/catalog'
 
-interface InstanceContext extends PluginActionContext {
+interface InstanceContext extends PluginRefreshContext {
   artifacts: Ref<PluginArtifact[]>
   onEdit: (pluginId: string) => void
   onSaved: () => void
 }
 
-export function usePluginInstances({ artifacts, refresh, notifyError, runAction, onEdit, onSaved }: InstanceContext) {
+export function usePluginInstances({ artifacts, refresh, onEdit, onSaved }: InstanceContext) {
   const configurationArtifact = shallowRef<PluginArtifact | null>(null)
   const showInstance = shallowRef(false)
   const configurationDraft = shallowRef<PluginVersionPlan | null>(null)
   const configurationError = shallowRef('')
   const editingInstance = shallowRef<PluginInstance | null>(null)
-  const savingInstance = shallowRef(false)
+  const action = useAsyncAction({
+    errorText: false,
+    onError: error => notifyPluginError('插件配置保存失败', error),
+  })
+  const savingInstance = action.loading
   const pendingEnable = shallowRef<{
     request: ConfigurePluginInstanceRequest
     instanceId?: string
@@ -46,16 +52,16 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
     if (!instance)
       return
     const input = { ...request, expectedRevision: configurationDraft.value?.instanceRevision ?? instance.revision }
-    const result = await runAction(savingInstance, '插件配置保存失败', async () => {
+    const result = await action.run(async () => {
       if (request.enabled) {
-        const pending = await prepareInstanceEnable(input, instance?.id)
+        const pending = await prepareInstanceEnable(input, instance.id)
         if (pending.replacements.length) {
           pendingEnable.value = pending
           showEnableConfirmation.value = true
           return true
         }
       }
-      await persistInstance(input, instance?.id)
+      await persistInstance(input, instance.id)
       return true
     })
     if (!result)
@@ -89,7 +95,7 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
       openEditInstance(instance)
       return
     }
-    const result = await runAction(savingInstance, '启用配置加载失败', async () => {
+    const result = await action.run(async () => {
       // 不传 secrets，沿用已保存密钥，不读取或回填明文。
       const pending = await prepareInstanceEnable({
         expectedRevision: instance.revision,
@@ -107,7 +113,7 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
         await persistInstance(pending.request, instance.id)
       }
       return true
-    })
+    }, { onError: error => notifyPluginError('启用配置加载失败', error) })
     if (!result)
       await refresh(true, true)
   }
@@ -116,13 +122,13 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
     const pending = pendingEnable.value
     if (!showEnableConfirmation.value || !pending || savingInstance.value)
       return
-    const result = await runAction(savingInstance, '配置启用失败', async () => {
+    const result = await action.run(async () => {
       await persistInstance({
         ...pending.request,
         replaceInstances: pending.replacements.map(instance => ({ id: instance.id, expectedRevision: instance.revision })),
       }, pending.instanceId)
       return true
-    })
+    }, { onError: error => notifyPluginError('配置启用失败', error) })
     // 失败后保留编辑草稿或已保存配置，再次提交需重新读取并确认停用范围。
     showEnableConfirmation.value = false
     if (!result)
@@ -150,7 +156,7 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
       await refresh(true)
     }
     catch (error) {
-      notifyError('插件停用失败', error)
+      notifyPluginError('插件停用失败', error)
     }
     finally {
       busyInstanceId.value = ''
@@ -174,7 +180,7 @@ export function usePluginInstances({ artifacts, refresh, notifyError, runAction,
       await refresh(true)
     }
     catch (error) {
-      notifyError('插件实例删除失败', error)
+      notifyPluginError('插件实例删除失败', error)
     }
     finally {
       busyInstanceId.value = ''
diff --git a/frontend/src/views/plugins/composables/usePluginManagement.ts b/frontend/src/views/plugins/composables/usePluginManagement.ts
index 6b2931bb7..1c3b938f8 100644
--- a/frontend/src/views/plugins/composables/usePluginManagement.ts
+++ b/frontend/src/views/plugins/composables/usePluginManagement.ts
@@ -16,8 +16,8 @@ import {
   getPluginUpdateSources,
 } from '@/api'
 import { usePluginViewsStore } from '@/stores/modules/plugin-views'
+import { notifyPluginError } from '../utils/actions'
 import { currentPluginInstance, groupInstalledPlugins } from '../utils/catalog'
-import { usePluginActions } from './usePluginActions'
 import { usePluginArtifactActions } from './usePluginArtifactActions'
 import { usePluginCredentials } from './usePluginCredentials'
 import { usePluginInstallation } from './usePluginInstallation'
@@ -43,9 +43,6 @@ export function usePluginManagement() {
 
   let refreshController: AbortController | undefined
 
-  const actions = usePluginActions(refresh)
-  const { notifyError, runAction } = actions
-
   async function refresh(silent = false, suppressErrors = false) {
     refreshController?.abort()
     const controller = new AbortController()
@@ -54,7 +51,7 @@ export function usePluginManagement() {
       loading.value = true
     try {
       const options = { signal: controller.signal, silent: true }
-      const extensionRequest = extensionDirectory.refresh(silent)
+      const extensionRequest = extensionDirectory.refresh(true)
         .then(items => ({ ok: true as const, items }))
         .catch((error: unknown) => ({ ok: false as const, error }))
       const [artifactItems, instanceItems, sourceItems, credentialItems, extensionResult] = await Promise.all([
@@ -71,11 +68,11 @@ export function usePluginManagement() {
       sources.value = sourceItems
       credentials.value = credentialItems
       if (!extensionResult.ok && !suppressErrors)
-        notifyError('插件扩展页加载失败', extensionResult.error)
+        notifyPluginError('插件扩展页加载失败', extensionResult.error)
     }
     catch (error) {
       if (refreshController === controller && !suppressErrors)
-        notifyError('插件数据加载失败', error)
+        notifyPluginError('插件数据加载失败', error)
     }
     finally {
       if (refreshController === controller) {
@@ -85,20 +82,20 @@ export function usePluginManagement() {
     }
   }
 
-  const artifactActions = usePluginArtifactActions(actions)
-  const credentialActions = usePluginCredentials({ ...actions, credentials })
+  const artifactActions = usePluginArtifactActions({ refresh })
+  const credentialActions = usePluginCredentials({ refresh, credentials })
   function showConfigurations() {
     detailSection.value = 'configurations'
     showDetail.value = true
   }
   const instanceActions = usePluginInstances({
-    ...actions,
+    refresh,
     artifacts,
     onEdit: pluginId => selectedPluginId.value = pluginId,
     onSaved: showConfigurations,
   })
   const versionActions = usePluginVersions({
-    ...actions,
+    refresh,
     catalog,
     instances,
     busyInstanceId: instanceActions.busyInstanceId,
@@ -110,14 +107,12 @@ export function usePluginManagement() {
   })
 
   const installation = usePluginInstallation({
-    runAction,
-    notifyError,
     onInstalled,
     onSourceSaved: (source) => {
       sources.value = [...sources.value.filter(value => value.pluginId !== source.pluginId), source]
     },
   })
-  const updateCheck = usePluginUpdateCheck(credentials, notifyError)
+  const updateCheck = usePluginUpdateCheck(credentials)
 
   async function upgradeCheckedPlugin(selection: PluginUpdateSelection) {
     if (await installation.installUpdate(selection))
@@ -160,7 +155,7 @@ export function usePluginManagement() {
   }
 
   onMounted(() => void refresh())
-  const uninstall = usePluginUninstall(() => refresh(true), notifyError)
+  const uninstall = usePluginUninstall(() => refresh(true))
   let pollTimer: ReturnType<typeof setTimeout> | undefined
   let disposed = false
   function schedulePoll() {
diff --git a/frontend/src/views/plugins/composables/usePluginUninstall.ts b/frontend/src/views/plugins/composables/usePluginUninstall.ts
index 30a3e23d9..a15dde5fa 100644
--- a/frontend/src/views/plugins/composables/usePluginUninstall.ts
+++ b/frontend/src/views/plugins/composables/usePluginUninstall.ts
@@ -2,8 +2,9 @@ import type { InstalledPlugin } from '../utils/catalog'
 import { toast } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginArtifact, deletePluginInstance, disablePluginInstance, getPluginArtifacts, getPluginInstances } from '@/api'
+import { notifyPluginError } from '../utils/actions'
 
-export function usePluginUninstall(refresh: () => Promise<void>, notifyError: (title: string, cause: unknown) => void) {
+export function usePluginUninstall(refresh: () => Promise<void>) {
   const open = shallowRef(false)
   const pending = shallowRef<InstalledPlugin | null>(null)
   const acknowledged = shallowRef(false)
@@ -57,7 +58,7 @@ export function usePluginUninstall(refresh: () => Promise<void>, notifyError: (t
     catch (cause) {
       // 卸载不是跨请求事务，刷新已完成的步骤后提示失败原因，可从剩余部分重试。
       await refresh()
-      notifyError('卸载尚未完成，可重试剩余步骤', cause)
+      notifyPluginError('卸载尚未完成，可重试剩余步骤', cause)
     }
     finally {
       busy.value = false
diff --git a/frontend/src/views/plugins/composables/usePluginUpdateCheck.ts b/frontend/src/views/plugins/composables/usePluginUpdateCheck.ts
index 262619666..aa340c68d 100644
--- a/frontend/src/views/plugins/composables/usePluginUpdateCheck.ts
+++ b/frontend/src/views/plugins/composables/usePluginUpdateCheck.ts
@@ -4,6 +4,7 @@ import type { PluginArtifact, PluginInstance, PluginRelease, PluginSourceCredent
 import { isEqual } from 'es-toolkit'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { checkPluginUpdate, getPluginUpdateSources, queryPluginRelease, verifyRemotePlugin } from '@/api'
+import { notifyPluginError } from '../utils/actions'
 import { currentPluginInstance } from '../utils/catalog'
 import { selectPluginReleaseAsset } from '../utils/updates'
 
@@ -16,7 +17,7 @@ export interface PluginUpdateSelection {
   instance?: PluginInstance
 }
 
-export function usePluginUpdateCheck(credentials: Ref<PluginSourceCredential[]>, notifyError: (title: string, error: unknown) => void) {
+export function usePluginUpdateCheck(credentials: Ref<PluginSourceCredential[]>) {
   const open = shallowRef(false)
   const checking = shallowRef(false)
   const plugin = shallowRef<InstalledPlugin | null>(null)
@@ -84,7 +85,7 @@ export function usePluginUpdateCheck(credentials: Ref<PluginSourceCredential[]>,
     catch (error) {
       if (controller === current) {
         open.value = false
-        notifyError('检查更新失败', error)
+        notifyPluginError('检查更新失败', error)
       }
     }
     finally {
diff --git a/frontend/src/views/plugins/composables/usePluginVersions.ts b/frontend/src/views/plugins/composables/usePluginVersions.ts
index 44cf7a3d6..e933ad256 100644
--- a/frontend/src/views/plugins/composables/usePluginVersions.ts
+++ b/frontend/src/views/plugins/composables/usePluginVersions.ts
@@ -1,15 +1,16 @@
 import type { Ref } from 'vue'
+import type { PluginRefreshContext } from '../utils/actions'
 import type { InstalledPlugin } from '../utils/catalog'
-import type { PluginActionContext } from './usePluginActions'
 import type { PluginArtifact, PluginInstance, PluginRollbackPlan, PluginVersionPlan } from '@/api'
 import { toast } from '@codex-proxy/ui'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { getPluginRollbackPlan, getPluginVersionPlan, rollbackPluginInstance, switchPluginVersion } from '@/api'
 import { ApiError } from '@/api/request'
 import { errorMessage } from '@/utils/operation'
+import { notifyPluginError } from '../utils/actions'
 import { currentPluginInstance } from '../utils/catalog'
 
-interface VersionContext extends Pick<PluginActionContext, 'refresh' | 'notifyError'> {
+interface VersionContext extends PluginRefreshContext {
   catalog: Ref<InstalledPlugin[]>
   instances: Ref<PluginInstance[]>
   busyInstanceId: Ref<string>
@@ -17,7 +18,7 @@ interface VersionContext extends Pick<PluginActionContext, 'refresh' | 'notifyEr
   onConfigurationRequired: (instance: PluginInstance, artifact: PluginArtifact, plan: PluginVersionPlan, error: string) => void
 }
 
-export function usePluginVersions({ catalog, instances, busyInstanceId, refresh, notifyError, onApplied, onConfigurationRequired }: VersionContext) {
+export function usePluginVersions({ catalog, instances, busyInstanceId, refresh, onApplied, onConfigurationRequired }: VersionContext) {
   const showRollback = shallowRef(false)
   const rollbackInstance = shallowRef<PluginInstance | null>(null)
   const rollbackPlan = shallowRef<PluginRollbackPlan | null>(null)
@@ -67,11 +68,11 @@ export function usePluginVersions({ catalog, instances, busyInstanceId, refresh,
           onConfigurationRequired(current, artifact, plan, errorMessage(error, '请调整不兼容的设置后重试'))
         }
         catch (planError) {
-          notifyError('版本设置加载失败', planError)
+          notifyPluginError('版本设置加载失败', planError)
         }
       }
       else {
-        notifyError('版本切换失败', error)
+        notifyPluginError('版本切换失败', error)
       }
     }
     finally {
@@ -94,7 +95,7 @@ export function usePluginVersions({ catalog, instances, busyInstanceId, refresh,
     }
     catch (error) {
       if (rollbackController === controller)
-        notifyError('回退版本加载失败', error)
+        notifyPluginError('回退版本加载失败', error)
     }
     finally {
       if (rollbackController === controller) {
@@ -118,7 +119,7 @@ export function usePluginVersions({ catalog, instances, busyInstanceId, refresh,
       await refresh(true)
     }
     catch (error) {
-      notifyError('插件版本回退失败', error)
+      notifyPluginError('插件版本回退失败', error)
     }
     finally {
       busyInstanceId.value = ''
diff --git a/frontend/src/views/plugins/constants.ts b/frontend/src/views/plugins/constants.ts
new file mode 100644
index 000000000..84b50b9b3
--- /dev/null
+++ b/frontend/src/views/plugins/constants.ts
@@ -0,0 +1,53 @@
+import type { PluginCatalogStatus } from './utils/catalog'
+import type { PluginObserverEvent } from '@/api'
+
+interface PluginRequestStage {
+  label: string
+  scope: 'none' | 'model' | 'provider'
+  globalLabel?: string
+}
+
+export const PLUGIN_CONFIGURATION_MAX_BYTES = 48 * 1024
+
+export const PLUGIN_OBSERVER_EVENT_LABELS: Record<PluginObserverEvent, string> = {
+  request_completed: '请求完成与用量',
+  websocket_response: '上游 WebSocket 事件',
+}
+
+export const PLUGIN_CAPABILITY_LABELS: Record<string, string> = {
+  frontend_authentication: '客户端认证',
+  scheduler: '请求调度',
+  model_router: '模型路由',
+  model_catalog: '模型目录',
+  retry_policy: '重试策略',
+  middleware: '请求中间件',
+  upstream_adapter: '上游适配器',
+  observer: '事件观察',
+  command_line: '命令行',
+  management: '管理扩展',
+  maintenance: '维护任务',
+}
+
+// 编辑入口、范围控件与摘要共用阶段描述；能力和阶段的合法组合由宿主校验。
+export const PLUGIN_REQUEST_STAGES: Record<string, PluginRequestStage> = {
+  http: { label: 'HTTP 请求', scope: 'none', globalLabel: '所有 HTTP 请求' },
+  websocket: { label: 'WebSocket 消息', scope: 'none', globalLabel: '所有 WebSocket 消息' },
+  service: { label: '服务调用', scope: 'none', globalLabel: '所有服务调用' },
+  request: { label: '请求开始', scope: 'model' },
+  attempt: { label: '每次尝试', scope: 'provider' },
+  upstream: { label: '上游调用', scope: 'provider' },
+  routing: { label: '模型路由', scope: 'model' },
+  scheduling: { label: '账号调度', scope: 'provider' },
+  retry: { label: '重试决策', scope: 'provider' },
+  observation: { label: '事件观察', scope: 'provider' },
+}
+
+export const PLUGIN_STATUS_LABELS: Record<PluginCatalogStatus, string> = {
+  unaccepted: '待安装',
+  unconfigured: '待配置',
+  enabled: '已启用',
+  disabled: '已停用',
+  pending: '等待生效',
+  failed: '需要处理',
+  incompatible: '不兼容',
+}
diff --git a/frontend/src/views/plugins/management/frame.ts b/frontend/src/views/plugins/management/frame.ts
index cf8734db3..91b1ada51 100644
--- a/frontend/src/views/plugins/management/frame.ts
+++ b/frontend/src/views/plugins/management/frame.ts
@@ -44,7 +44,7 @@ const JAVASCRIPT_CONTENT_TYPES = new Set([
   'text/javascript',
 ])
 
-export interface AssembledPluginPage {
+interface AssembledPluginPage {
   srcdoc: string
   revoke: () => void
 }
diff --git a/frontend/src/views/plugins/utils/actions.ts b/frontend/src/views/plugins/utils/actions.ts
new file mode 100644
index 000000000..176e5c000
--- /dev/null
+++ b/frontend/src/views/plugins/utils/actions.ts
@@ -0,0 +1,14 @@
+import { toast } from '@codex-proxy/ui'
+import { ApiError } from '@/api/request'
+import { errorMessage } from '@/utils/operation'
+
+export interface PluginRefreshContext {
+  refresh: (silent?: boolean, suppressErrors?: boolean) => Promise<void>
+}
+
+// 插件操作会聚合多个静默请求，由操作边界统一反馈一次错误。
+export function notifyPluginError(title: string, error: unknown): void {
+  if (error instanceof ApiError && error.kind === 'cancelled')
+    return
+  toast.error(errorMessage(error, title))
+}
diff --git a/frontend/src/views/plugins/utils/catalog.ts b/frontend/src/views/plugins/utils/catalog.ts
index e71d10fc9..921691936 100644
--- a/frontend/src/views/plugins/utils/catalog.ts
+++ b/frontend/src/views/plugins/utils/catalog.ts
@@ -54,16 +54,6 @@ export function pluginStatus(plugin: InstalledPlugin): PluginCatalogStatus {
   return instance ? configurationStatus(instance) : 'unconfigured'
 }
 
-export const PLUGIN_STATUS_LABELS: Record<PluginCatalogStatus, string> = {
-  unaccepted: '待安装',
-  unconfigured: '待配置',
-  enabled: '已启用',
-  disabled: '已停用',
-  pending: '等待生效',
-  failed: '需要处理',
-  incompatible: '不兼容',
-}
-
 export function pluginStatusType(status: PluginCatalogStatus) {
   if (status === 'enabled')
     return 'success' as const
diff --git a/frontend/src/views/plugins/utils/model.ts b/frontend/src/views/plugins/utils/model.ts
index bc020f4ac..e1348bc91 100644
--- a/frontend/src/views/plugins/utils/model.ts
+++ b/frontend/src/views/plugins/utils/model.ts
@@ -7,7 +7,9 @@ import type {
   PluginUpdateSource,
   VerifyRemotePluginRequest,
 } from '@/api'
+import { PLUGIN_CAPABILITY_LABELS, PLUGIN_OBSERVER_EVENT_LABELS, PLUGIN_REQUEST_STAGES } from '../constants'
 
+export type PluginInstallMode = 'upload' | 'url' | 'github'
 export type PluginInstallSelection = File | VerifyRemotePluginRequest
 
 export function pluginInstallSelectionKey(selection: PluginInstallSelection) {
@@ -31,45 +33,8 @@ export interface JsonSchema {
   additionalProperties?: boolean | JsonSchema
 }
 
-export const PLUGIN_OBSERVER_EVENT_LABELS: Record<PluginObserverEvent, string> = {
-  request_completed: '请求完成与用量',
-  websocket_response: '上游 WebSocket 事件',
-}
-
-export const PLUGIN_CAPABILITY_LABELS: Record<string, string> = {
-  frontend_authentication: '客户端认证',
-  scheduler: '请求调度',
-  model_router: '模型路由',
-  model_catalog: '模型目录',
-  retry_policy: '重试策略',
-  middleware: '请求中间件',
-  upstream_adapter: '上游适配器',
-  observer: '事件观察',
-  command_line: '命令行',
-  management: '管理扩展',
-  maintenance: '维护任务',
-}
-
-// 编辑入口、范围控件与摘要共用阶段描述；能力和阶段的合法组合由宿主校验。
-export const PLUGIN_REQUEST_STAGES: Record<string, {
-  label: string
-  scope: 'none' | 'model' | 'provider'
-  globalLabel?: string
-}> = {
-  http: { label: 'HTTP 请求', scope: 'none', globalLabel: '所有 HTTP 请求' },
-  websocket: { label: 'WebSocket 消息', scope: 'none', globalLabel: '所有 WebSocket 消息' },
-  service: { label: '服务调用', scope: 'none', globalLabel: '所有服务调用' },
-  request: { label: '请求开始', scope: 'model' },
-  attempt: { label: '每次尝试', scope: 'provider' },
-  upstream: { label: '上游调用', scope: 'provider' },
-  routing: { label: '模型路由', scope: 'model' },
-  scheduling: { label: '账号调度', scope: 'provider' },
-  retry: { label: '重试决策', scope: 'provider' },
-  observation: { label: '事件观察', scope: 'provider' },
-}
-
 export function pluginRequestBindingEntries(metadata: PluginArtifactMetadata) {
-  return pluginContributionEntries(metadata).flatMap(([capability, contribution]) =>
+  return Object.entries(metadata.contributes).flatMap(([capability, contribution]) =>
     contribution.stages.flatMap((stage) => {
       const description = PLUGIN_REQUEST_STAGES[stage]
       if (!description)
@@ -86,10 +51,6 @@ export function pluginCapabilityLabel(capability: string) {
   return PLUGIN_CAPABILITY_LABELS[capability] ?? capability
 }
 
-export function pluginContributionEntries(metadata: PluginArtifactMetadata) {
-  return Object.entries(metadata.contributes)
-}
-
 export function normalizePluginRepository(value: string) {
   // GitHub 下载端使用小写仓库路径，凭据的路径范围必须采用相同规范。
   return value.trim().replace(/^https:\/\/github\.com\//i, '').replace(/\/$/, '').replace(/\.git$/i, '').toLowerCase()
@@ -103,18 +64,11 @@ export function formatPluginFileSize(bytes: number) {
   return `${(bytes / 1024 / 1024).toFixed(1)} MiB`
 }
 
-export function pluginContributionForCapability(
-  metadata: PluginArtifactMetadata,
-  capability: string,
-) {
-  return metadata.contributes[capability]
-}
-
 export function pluginCapabilityForContribution(
   metadata: PluginArtifactMetadata,
   contributionId: string,
 ) {
-  return pluginContributionEntries(metadata).find(([, contribution]) =>
+  return Object.entries(metadata.contributes).find(([, contribution]) =>
     contribution.id === contributionId,
   )?.[0]
 }
@@ -152,7 +106,3 @@ export function shortDigest(digest: string) {
 export function artifactForInstance(instance: PluginInstance, artifacts: PluginArtifact[]) {
   return artifacts.find(artifact => artifact.metadata.sha256 === instance.artifactSha256)
 }
-
-export function cloneJsonValue<T>(value: T): T {
-  return JSON.parse(JSON.stringify(value)) as T
-}
diff --git a/frontend/src/views/proxies/components/ProxyAccountsModal.vue b/frontend/src/views/proxies/components/ProxyAccountsModal.vue
index f449a02ed..889be1a5c 100644
--- a/frontend/src/views/proxies/components/ProxyAccountsModal.vue
+++ b/frontend/src/views/proxies/components/ProxyAccountsModal.vue
@@ -3,10 +3,10 @@ import type { OutboundProxyAccount, OutboundProxyRecord } from '@/api'
 import { BaseConfirmModal, BaseIconButton, BaseInput, BaseModal, BaseTable, BaseTablePagination, defineTableColumns } from '@codex-proxy/ui'
 import { Search, Unlink } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import AccountGroupMarks from '@/components/AccountGroupMarks.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
-import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
-import { stablePresetVisualToneClass } from '@/views/accounts/utils/visualTone'
+import { stablePresetVisualToneClass } from '@/utils/color'
 import { useProxyAccounts } from '../composables/useProxyAccounts'
 
 const props = defineProps<{
diff --git a/frontend/src/views/proxies/composables/useProxies.ts b/frontend/src/views/proxies/composables/useProxies.ts
new file mode 100644
index 000000000..0535c23cc
--- /dev/null
+++ b/frontend/src/views/proxies/composables/useProxies.ts
@@ -0,0 +1,258 @@
+import type { OutboundProxyRecord, OutboundProxyTest } from '@/api'
+import { toast } from '@codex-proxy/ui'
+import { computed, onMounted, reactive, shallowRef, watch } from 'vue'
+import { createProxy, deleteProxy, getProxies, probeProxy, testProxy, updateProxy } from '@/api'
+import { useAsyncAction } from '@/composables/useAsyncAction'
+import { useIdSet } from '@/composables/useIdSet'
+import { usePagedQuery } from '@/composables/usePagedQuery'
+import { normalizeRequestLocation, requestLocationError } from '@/utils/location'
+
+export function useProxies() {
+  const search = shallowRef('')
+  const query = usePagedQuery({
+    initialPageSize: 20,
+    load: (pagination, options) => getProxies({ ...pagination, search: search.value.trim() || undefined }, options),
+  })
+  const { items: proxies, loading } = query
+  const pagination = computed(() => ({ currentPage: query.page.value, pageSize: query.pageSize.value, total: query.total.value }))
+  const showForm = shallowRef(false)
+  const editing = shallowRef<OutboundProxyRecord | null>(null)
+  const form = reactive({
+    name: '',
+    proxyUrl: '',
+    customLocation: false,
+    location: { country: '', region: '', city: '', timezone: '' },
+  })
+  const formTestResult = shallowRef<OutboundProxyTest | null>(null)
+  const saveAction = useAsyncAction()
+  const { loading: saving } = saveAction
+  const deleteAction = useAsyncAction()
+  const { loading: deleting } = deleteAction
+  const showDelete = shallowRef(false)
+  const pendingDelete = shallowRef<OutboundProxyRecord | null>(null)
+  const testing = useIdSet<string>()
+  const testingIds = testing.ids
+  const formTestAction = useAsyncAction()
+  const testingForm = computed(() => formTestAction.loading.value || (editing.value !== null && testingIds.value.has(editing.value.id)))
+  const detectingLocation = shallowRef(false)
+  const testingConnection = computed(() => testingForm.value && !detectingLocation.value)
+
+  function openForm(proxy: OutboundProxyRecord | null = null) {
+    editing.value = proxy
+    form.name = proxy?.name ?? ''
+    form.proxyUrl = ''
+    formTestResult.value = null
+    const currentLocation = proxy?.autoLocation ? proxy.detectedLocation?.location ?? proxy.location : proxy?.location
+    form.customLocation = currentLocation != null
+    form.location = currentLocation ? { ...currentLocation } : { country: '', region: '', city: '', timezone: '' }
+    showForm.value = true
+  }
+
+  async function checkProxy(proxy: OutboundProxyRecord) {
+    if (testing.has(proxy.id))
+      return
+    testing.add(proxy.id)
+    try {
+      const result = await testProxy({ id: proxy.id, revision: proxy.revision })
+      if (editing.value?.id === result.id) {
+        editing.value = result
+        formTestResult.value = result.lastTest
+      }
+      if (result.lastTest?.success === false)
+        toast.error(`${result.name}：${result.lastTest.message}`)
+      else if (result.lastTest?.success)
+        toast.success(`${result.name}：连接成功`)
+      else
+        toast.error(result.lastTest?.message ?? '代理测试失败')
+    }
+    catch {}
+    finally {
+      testing.remove(proxy.id)
+      await query.execute({ silent: true })
+    }
+  }
+
+  async function testConnection() {
+    if (saving.value || testingForm.value)
+      return
+    const proxyUrl = form.proxyUrl.trim()
+    if (!proxyUrl && editing.value) {
+      await checkProxy(editing.value)
+      return
+    }
+    if (!proxyUrl) {
+      toast.warning('请填写代理连接地址')
+      return
+    }
+    await formTestAction.run(async () => {
+      // 新地址只做探测，保存前不修改代理及关联账号的连接配置。
+      const result = await probeProxy({ proxyUrl, detectLocation: false })
+      formTestResult.value = result
+      if (!result.success)
+        toast.error(result.message)
+      else
+        toast.success(`连接成功，耗时 ${result.latencyMs} ms`)
+    })
+  }
+
+  async function detectLocation() {
+    if (saving.value || testingForm.value)
+      return
+    const proxyUrl = form.proxyUrl.trim()
+    if (!proxyUrl && !editing.value) {
+      toast.warning('请填写代理连接地址')
+      return
+    }
+    detectingLocation.value = true
+    try {
+      await formTestAction.run(async () => {
+        let result: OutboundProxyTest | null
+        if (proxyUrl) {
+          // 新地址只解析草稿，不修改已保存代理或账号绑定。
+          result = await probeProxy({ proxyUrl, detectLocation: true })
+        }
+        else {
+          const proxy = editing.value!
+          const updated = await testProxy({ id: proxy.id, revision: proxy.revision, detectLocation: true })
+          editing.value = updated
+          result = updated.lastTest
+          await query.execute({ silent: true })
+        }
+        formTestResult.value = result
+        if (!result?.success) {
+          toast.error(result?.message ?? '代理连接失败，未能解析位置')
+          return
+        }
+        if (result.location.status === 'detected') {
+          form.location = { ...result.location.location }
+          form.customLocation = true
+          toast.success('已填入出口位置')
+        }
+        else if (result.location.status === 'conflict') {
+          toast.warning('IPv4 与 IPv6 出口时区不一致，请手动填写')
+        }
+        else if (result.location.status === 'failed') {
+          toast.warning(result.location.message)
+        }
+        else {
+          toast.warning('未获取到出口位置')
+        }
+      })
+    }
+    finally {
+      detectingLocation.value = false
+    }
+  }
+
+  async function save() {
+    if (saving.value || testingForm.value)
+      return
+    const name = form.name.trim()
+    const proxyUrl = form.proxyUrl.trim()
+    if (!name || (!editing.value && !proxyUrl)) {
+      toast.warning('请填写代理名称和连接地址')
+      return
+    }
+    const location = form.customLocation ? normalizeRequestLocation(form.location) : null
+    const locationError = location ? requestLocationError(location) : ''
+    if (locationError) {
+      toast.warning(locationError)
+      return
+    }
+    await saveAction.run(async () => {
+      // 编辑时留空保留已保存的地址和认证，不能用脱敏地址覆盖原连接。
+      await (editing.value
+        ? updateProxy({
+            id: editing.value.id,
+            revision: editing.value.revision,
+            name,
+            autoLocation: false,
+            proxyUrl: proxyUrl || undefined,
+            location,
+          })
+        : createProxy({
+            name,
+            autoLocation: false,
+            proxyUrl,
+            location,
+          }))
+      showForm.value = false
+      toast.success('代理已保存')
+      search.value = ''
+      query.page.value = 1
+      await query.execute()
+    })
+  }
+
+  function requestDelete(proxy: OutboundProxyRecord) {
+    pendingDelete.value = proxy
+    showDelete.value = true
+  }
+
+  async function confirmDelete() {
+    const proxy = pendingDelete.value
+    if (!proxy || deleting.value)
+      return
+    await deleteAction.run(async () => {
+      await deleteProxy({ id: proxy.id, revision: proxy.revision })
+      showDelete.value = false
+      await query.execute()
+      toast.success('代理已删除')
+    })
+  }
+
+  function setPage(page: number) {
+    query.page.value = page
+    void query.execute()
+  }
+
+  function setPageSize(size: number) {
+    query.pageSize.value = size
+    setPage(1)
+  }
+
+  watch(() => form.proxyUrl, () => {
+    formTestResult.value = null
+  })
+
+  function clearCredentials() {
+    form.proxyUrl = ''
+  }
+
+  watch(search, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
+      void setPage(1)
+    }, 300)
+    onCleanup(() => clearTimeout(timer))
+  })
+  onMounted(() => void query.execute())
+
+  return {
+    search,
+    proxies,
+    loading,
+    pagination,
+    loadProxies: query.execute,
+    showForm,
+    editing,
+    form,
+    formTestResult,
+    saving,
+    showDelete,
+    pendingDelete,
+    deleting,
+    testingIds,
+    testingConnection,
+    detectingLocation,
+    openForm,
+    checkProxy,
+    testConnection,
+    detectLocation,
+    save,
+    requestDelete,
+    confirmDelete,
+    setPage,
+    setPageSize,
+    clearCredentials,
+  }
+}
diff --git a/frontend/src/views/proxies/composables/useProxyAccounts.ts b/frontend/src/views/proxies/composables/useProxyAccounts.ts
index 0eb868bb6..ee0679895 100644
--- a/frontend/src/views/proxies/composables/useProxyAccounts.ts
+++ b/frontend/src/views/proxies/composables/useProxyAccounts.ts
@@ -1,5 +1,4 @@
 import { toast } from '@codex-proxy/ui'
-import { watchDebounced } from '@vueuse/core'
 import { computed, shallowRef, watch } from 'vue'
 import { getProxyAccounts, removeProxyAccount } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -75,7 +74,12 @@ export function useProxyAccounts(options: {
     search.value = ''
     load()
   }, { immediate: true, flush: 'sync' })
-  watchDebounced(search, () => setPage(1), { debounce: 300 })
+  watch(search, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
+      void setPage(1)
+    }, 300)
+    onCleanup(() => clearTimeout(timer))
+  })
 
   return {
     accounts: query.items,
diff --git a/frontend/src/views/proxies/constants.ts b/frontend/src/views/proxies/constants.ts
new file mode 100644
index 000000000..bc9595f91
--- /dev/null
+++ b/frontend/src/views/proxies/constants.ts
@@ -0,0 +1,12 @@
+import type { OutboundProxyRecord } from '@/api'
+import { defineTableColumns } from '@codex-proxy/ui'
+
+export const proxyColumns = defineTableColumns<OutboundProxyRecord>([
+  { key: 'name', label: '代理名称', kind: 'identity', size: 'lg' },
+  { key: 'address', label: '代理地址', kind: 'identity', size: 'xl' },
+  { key: 'exitIp', label: '出口 IP', kind: 'custom' },
+  { key: 'latency', label: '耗时', kind: 'custom', size: 'sm' },
+  { key: 'accounts', label: '关联账号', kind: 'custom', size: 'sm' },
+  { key: 'testedAt', label: '测试时间', kind: 'datetime' },
+  { key: 'actions', label: '操作', kind: 'actions', size: 'lg', fixedWidth: true },
+])
diff --git a/frontend/src/views/proxies/index.vue b/frontend/src/views/proxies/index.vue
index 44ca957f3..98b724a64 100644
--- a/frontend/src/views/proxies/index.vue
+++ b/frontend/src/views/proxies/index.vue
@@ -1,240 +1,44 @@
 <script setup lang="ts">
-import type { OutboundProxyRecord, OutboundProxyTest } from '@/api'
-import { BaseButton, BaseCard, BaseConfirmModal, BaseIconButton, BaseInput, BasePageHeader, BaseTable, BaseTablePagination, defineTableColumns, toast } from '@codex-proxy/ui'
+import type { OutboundProxyRecord } from '@/api'
+import { BaseButton, BaseCard, BaseConfirmModal, BaseIconButton, BaseInput, BasePageHeader, BaseTable, BaseTablePagination } from '@codex-proxy/ui'
 import { LockKeyhole, MapPin, Pencil, Plus, Search, Trash2, Users, Wifi } from '@lucide/vue'
-import { watchDebounced } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
-import { createProxy, deleteProxy, getProxies, probeProxy, testProxy, updateProxy } from '@/api'
-import { useAsyncAction } from '@/composables/useAsyncAction'
-import { usePagedQuery } from '@/composables/usePagedQuery'
-import { normalizeRequestLocation, requestLocationError } from '@/utils/data'
+import { shallowRef } from 'vue'
 import ProxyAccountsModal from './components/ProxyAccountsModal.vue'
 import ProxyFormModal from './components/ProxyFormModal.vue'
+import { useProxies } from './composables/useProxies'
+import { proxyColumns } from './constants'
 import { effectiveProxyLocation } from './utils/location'
 
-const search = shallowRef('')
-const query = usePagedQuery({
-  initialPageSize: 20,
-  load: (pagination, options) => getProxies({ ...pagination, search: search.value.trim() || undefined }, options),
-})
-const { items: proxies, loading } = query
-const pagination = computed(() => ({ currentPage: query.page.value, pageSize: query.pageSize.value, total: query.total.value }))
-const columns = defineTableColumns<OutboundProxyRecord>([
-  { key: 'name', label: '代理名称', kind: 'identity', size: 'lg' },
-  { key: 'address', label: '代理地址', kind: 'identity', size: 'xl' },
-  { key: 'exitIp', label: '出口 IP', kind: 'custom' },
-  { key: 'latency', label: '耗时', kind: 'custom', size: 'sm' },
-  { key: 'accounts', label: '关联账号', kind: 'custom', size: 'sm' },
-  { key: 'testedAt', label: '测试时间', kind: 'datetime' },
-  { key: 'actions', label: '操作', kind: 'actions', size: 'lg', fixedWidth: true },
-])
-const showForm = shallowRef(false)
-const editing = shallowRef<OutboundProxyRecord | null>(null)
-const form = reactive({
-  name: '',
-  proxyUrl: '',
-  customLocation: false,
-  location: { country: '', region: '', city: '', timezone: '' },
-})
-const formTestResult = shallowRef<OutboundProxyTest | null>(null)
-const saveAction = useAsyncAction()
-const { loading: saving } = saveAction
-const deleteAction = useAsyncAction()
-const { loading: deleting } = deleteAction
-const showDelete = shallowRef(false)
-const pendingDelete = shallowRef<OutboundProxyRecord | null>(null)
-const testingIds = ref(new Set<string>())
-const formTestAction = useAsyncAction()
-const testingForm = computed(() => formTestAction.loading.value || (editing.value !== null && testingIds.value.has(editing.value.id)))
-const detectingLocation = shallowRef(false)
-const testingConnection = computed(() => testingForm.value && !detectingLocation.value)
+const {
+  search,
+  proxies,
+  loading,
+  pagination,
+  loadProxies,
+  showForm,
+  editing,
+  form,
+  formTestResult,
+  saving,
+  showDelete,
+  pendingDelete,
+  deleting,
+  testingIds,
+  testingConnection,
+  detectingLocation,
+  openForm,
+  checkProxy,
+  testConnection,
+  detectLocation,
+  save,
+  requestDelete,
+  confirmDelete,
+  setPage,
+  setPageSize,
+  clearCredentials,
+} = useProxies()
 const showAccounts = shallowRef(false)
 const inspected = shallowRef<OutboundProxyRecord | null>(null)
-
-function openForm(proxy: OutboundProxyRecord | null = null) {
-  editing.value = proxy
-  form.name = proxy?.name ?? ''
-  form.proxyUrl = ''
-  formTestResult.value = null
-  const currentLocation = proxy?.autoLocation ? proxy.detectedLocation?.location ?? proxy.location : proxy?.location
-  form.customLocation = currentLocation != null
-  form.location = currentLocation ? { ...currentLocation } : { country: '', region: '', city: '', timezone: '' }
-  showForm.value = true
-}
-
-async function checkProxy(proxy: OutboundProxyRecord) {
-  if (testingIds.value.has(proxy.id))
-    return
-  testingIds.value.add(proxy.id)
-  try {
-    const result = await testProxy({ id: proxy.id, revision: proxy.revision })
-    if (editing.value?.id === result.id) {
-      editing.value = result
-      formTestResult.value = result.lastTest
-    }
-    if (result.lastTest?.success === false)
-      toast.error(`${result.name}：${result.lastTest.message}`)
-    else if (result.lastTest?.success)
-      toast.success(`${result.name}：连接成功`)
-    else
-      toast.error(result.lastTest?.message ?? '代理测试失败')
-  }
-  catch {}
-  finally {
-    testingIds.value.delete(proxy.id)
-    await query.execute({ silent: true })
-  }
-}
-
-async function testConnection() {
-  if (saving.value || testingForm.value)
-    return
-  const proxyUrl = form.proxyUrl.trim()
-  if (!proxyUrl && editing.value) {
-    await checkProxy(editing.value)
-    return
-  }
-  if (!proxyUrl) {
-    toast.warning('请填写代理连接地址')
-    return
-  }
-  await formTestAction.run(async () => {
-    // 新地址只做探测，保存前不修改代理及关联账号的连接配置。
-    const result = await probeProxy({ proxyUrl, detectLocation: false })
-    formTestResult.value = result
-    if (!result.success)
-      toast.error(result.message)
-    else
-      toast.success(`连接成功，耗时 ${result.latencyMs} ms`)
-  })
-}
-
-async function detectLocation() {
-  if (saving.value || testingForm.value)
-    return
-  const proxyUrl = form.proxyUrl.trim()
-  if (!proxyUrl && !editing.value) {
-    toast.warning('请填写代理连接地址')
-    return
-  }
-  detectingLocation.value = true
-  try {
-    await formTestAction.run(async () => {
-      let result: OutboundProxyTest | null
-      if (proxyUrl) {
-        // 新地址只解析草稿，不修改已保存代理或账号绑定。
-        result = await probeProxy({ proxyUrl, detectLocation: true })
-      }
-      else {
-        const proxy = editing.value!
-        const updated = await testProxy({ id: proxy.id, revision: proxy.revision, detectLocation: true })
-        editing.value = updated
-        result = updated.lastTest
-        await query.execute({ silent: true })
-      }
-      formTestResult.value = result
-      if (!result?.success) {
-        toast.error(result?.message ?? '代理连接失败，未能解析位置')
-        return
-      }
-      if (result.location.status === 'detected') {
-        form.location = { ...result.location.location }
-        form.customLocation = true
-        toast.success('已填入出口位置')
-      }
-      else if (result.location.status === 'conflict') {
-        toast.warning('IPv4 与 IPv6 出口时区不一致，请手动填写')
-      }
-      else if (result.location.status === 'failed') {
-        toast.warning(result.location.message)
-      }
-      else {
-        toast.warning('未获取到出口位置')
-      }
-    })
-  }
-  finally {
-    detectingLocation.value = false
-  }
-}
-
-async function save() {
-  if (saving.value || testingForm.value)
-    return
-  const name = form.name.trim()
-  const proxyUrl = form.proxyUrl.trim()
-  if (!name || (!editing.value && !proxyUrl)) {
-    toast.warning('请填写代理名称和连接地址')
-    return
-  }
-  const location = form.customLocation ? normalizeRequestLocation(form.location) : null
-  const locationError = location ? requestLocationError(location) : ''
-  if (locationError) {
-    toast.warning(locationError)
-    return
-  }
-  await saveAction.run(async () => {
-    // 编辑时留空保留已保存的地址和认证，不能用脱敏地址覆盖原连接。
-    await (editing.value
-      ? updateProxy({
-          id: editing.value.id,
-          revision: editing.value.revision,
-          name,
-          autoLocation: false,
-          proxyUrl: proxyUrl || undefined,
-          location,
-        })
-      : createProxy({
-          name,
-          autoLocation: false,
-          proxyUrl,
-          location,
-        }))
-    showForm.value = false
-    toast.success('代理已保存')
-    search.value = ''
-    query.page.value = 1
-    await query.execute()
-  })
-}
-
-function requestDelete(proxy: OutboundProxyRecord) {
-  pendingDelete.value = proxy
-  showDelete.value = true
-}
-
-async function confirmDelete() {
-  const proxy = pendingDelete.value
-  if (!proxy || deleting.value)
-    return
-  await deleteAction.run(async () => {
-    await deleteProxy({ id: proxy.id, revision: proxy.revision })
-    showDelete.value = false
-    await query.execute()
-    toast.success('代理已删除')
-  })
-}
-
-function setPage(page: number) {
-  query.page.value = page
-  void query.execute()
-}
-
-function setPageSize(size: number) {
-  query.pageSize.value = size
-  setPage(1)
-}
-
-watch(() => form.proxyUrl, () => {
-  formTestResult.value = null
-})
-
-function clearCredentials() {
-  form.proxyUrl = ''
-}
-
-watchDebounced(search, () => setPage(1), { debounce: 300 })
-onMounted(() => void query.execute())
 </script>
 
 <template>
@@ -264,7 +68,7 @@ onMounted(() => void query.execute())
       </template>
       <template #body>
         <div class="flex h-full min-h-0 flex-col">
-          <BaseTable class="min-h-0 flex-1" :columns="columns" :rows="proxies" :loading="loading" :empty-text="search.trim() ? '没有找到匹配的代理，请尝试其他名称' : '暂无代理，请点击新增代理添加'">
+          <BaseTable class="min-h-0 flex-1" :columns="proxyColumns" :rows="proxies" :loading="loading" :empty-text="search.trim() ? '没有找到匹配的代理，请尝试其他名称' : '暂无代理，请点击新增代理添加'">
             <template #name="{ row }">
               <span class="block truncate text-cp text-cp-text" :title="row.name">{{ row.name }}</span>
             </template>
@@ -355,6 +159,6 @@ onMounted(() => void query.execute())
         确定删除“{{ pendingDelete?.name }}”吗？
       </p>
     </BaseConfirmModal>
-    <ProxyAccountsModal v-model="showAccounts" :proxy="inspected" @removed="query.execute({ silent: true })" />
+    <ProxyAccountsModal v-model="showAccounts" :proxy="inspected" @removed="loadProxies({ silent: true })" />
   </div>
 </template>
diff --git a/frontend/src/views/settings/components/backup/BackupScheduleCard.vue b/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
index d5c0d89a5..01e6d0f46 100644
--- a/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
@@ -11,7 +11,7 @@ interface ScheduleForm {
 }
 
 defineProps<{
-  loading: boolean
+  disabled: boolean
   saving: boolean
   storageReady: boolean
 }>()
@@ -21,6 +21,10 @@ const emit = defineEmits<{
 }>()
 
 const schedule = defineModel<ScheduleForm>('schedule', { required: true })
+
+function updateSchedule<Key extends keyof ScheduleForm>(key: Key, value: ScheduleForm[Key]) {
+  schedule.value = { ...schedule.value, [key]: value }
+}
 </script>
 
 <template>
@@ -29,7 +33,7 @@ const schedule = defineModel<ScheduleForm>('schedule', { required: true })
     description="配置自动备份的执行时间与保留策略"
   >
     <template #actions>
-      <BaseButton variant="primary" :loading="saving" :disabled="loading" @click="emit('save')">
+      <BaseButton variant="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
         <template #icon>
           <Save class="size-4" />
         </template>
@@ -41,10 +45,10 @@ const schedule = defineModel<ScheduleForm>('schedule', { required: true })
       <BaseForm class="max-w-6xl @min-[640px]:grid-cols-2">
         <div class="col-span-2 flex items-center gap-4 @max-[640px]:col-span-1">
           <BaseCheckbox
-            v-model="schedule.scheduleEnabled"
-            :disabled="!storageReady"
+            :model-value="schedule.scheduleEnabled" :disabled="disabled || !storageReady"
             label="启用定时备份"
             show-label
+            @update:model-value="updateSchedule('scheduleEnabled', $event)"
           />
         </div>
 
@@ -52,7 +56,7 @@ const schedule = defineModel<ScheduleForm>('schedule', { required: true })
           label="Cron 表达式"
           description="5 段格式，例如 0 2 * * * 表示每天凌晨 2 点"
         >
-          <BaseInput v-model="schedule.cronExpression" aria-label="Cron 表达式">
+          <BaseInput :model-value="schedule.cronExpression" :disabled="disabled" aria-label="Cron 表达式" @update:model-value="updateSchedule('cronExpression', $event)">
             <template #prefix>
               <CalendarClock class="size-4" />
             </template>
@@ -60,14 +64,14 @@ const schedule = defineModel<ScheduleForm>('schedule', { required: true })
         </BaseFormItem>
 
         <BaseFormItem label="保留天数" description="超过此天数自动删除，0 表示不按天数清理，仍受最大保留份数限制">
-          <BaseInput v-model="schedule.retentionDays" aria-label="备份保留天数" type="number" min="0" />
+          <BaseInput :model-value="schedule.retentionDays" :disabled="disabled" aria-label="备份保留天数" type="number" min="0" @update:model-value="updateSchedule('retentionDays', $event)" />
         </BaseFormItem>
 
         <BaseFormItem
           label="最大保留份数"
           description="最多保留的备份数量，0 表示不按份数清理，仍受保留天数限制"
         >
-          <BaseInput v-model="schedule.retentionCount" aria-label="最大保留份数" type="number" min="0" />
+          <BaseInput :model-value="schedule.retentionCount" :disabled="disabled" aria-label="最大保留份数" type="number" min="0" @update:model-value="updateSchedule('retentionCount', $event)" />
         </BaseFormItem>
       </BaseForm>
     </div>
diff --git a/frontend/src/views/settings/components/backup/BackupStorageCard.vue b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
index 0691212f1..680d00107 100644
--- a/frontend/src/views/settings/components/backup/BackupStorageCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
@@ -15,7 +15,7 @@ interface StorageForm {
 }
 
 defineProps<{
-  loading: boolean
+  disabled: boolean
   saving: boolean
   testing: boolean
   verified: boolean
@@ -42,6 +42,10 @@ function toggleAccessKeyVisible(): void {
 function toggleSecretVisible(): void {
   secretVisible.value = !secretVisible.value
 }
+
+function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageForm[Key]) {
+  storage.value = { ...storage.value, [key]: value }
+}
 </script>
 
 <template>
@@ -65,7 +69,7 @@ function toggleSecretVisible(): void {
         <BaseButton
           variant="secondary"
           :loading="testing"
-          :disabled="loading"
+          :disabled="disabled"
           :title="verified ? '已通过连接测试' : '尚未通过连接测试'"
           @click="emit('test')"
         >
@@ -75,7 +79,7 @@ function toggleSecretVisible(): void {
           </template>
           {{ testing ? '测试中...' : '测试连接' }}
         </BaseButton>
-        <BaseButton variant="primary" :loading="saving" :disabled="loading" @click="emit('save')">
+        <BaseButton variant="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
           <template #icon>
             <Save class="size-4" />
           </template>
@@ -88,9 +92,10 @@ function toggleSecretVisible(): void {
       <BaseForm class="max-w-6xl @min-[640px]:grid-cols-2">
         <BaseFormItem label="端点地址" description="S3 兼容服务的 HTTPS 地址">
           <BaseInput
-            v-model="storage.endpoint"
+            :model-value="storage.endpoint" :disabled="disabled"
             aria-label="端点地址"
             placeholder="https://<account_id>.r2.cloudflarestorage.com"
+            @update:model-value="updateStorage('endpoint', $event)"
           >
             <template #prefix>
               <DatabaseZap class="size-4" />
@@ -99,23 +104,24 @@ function toggleSecretVisible(): void {
         </BaseFormItem>
 
         <BaseFormItem label="区域" description="R2 使用固定值 auto，其它服务按提供方填写">
-          <BaseInput v-model="storage.region" aria-label="区域" />
+          <BaseInput :model-value="storage.region" :disabled="disabled" aria-label="区域" @update:model-value="updateStorage('region', $event)" />
         </BaseFormItem>
 
         <BaseFormItem label="存储桶" description="私有存储桶名称">
-          <BaseInput v-model="storage.bucket" aria-label="存储桶" />
+          <BaseInput :model-value="storage.bucket" :disabled="disabled" aria-label="存储桶" @update:model-value="updateStorage('bucket', $event)" />
         </BaseFormItem>
 
         <BaseFormItem label="对象键前缀" description="备份对象的存储路径前缀，不影响已有备份">
-          <BaseInput v-model="storage.prefix" aria-label="对象键前缀" />
+          <BaseInput :model-value="storage.prefix" :disabled="disabled" aria-label="对象键前缀" @update:model-value="updateStorage('prefix', $event)" />
         </BaseFormItem>
 
         <BaseFormItem label="Access Key ID" description="对象存储专用凭据">
           <BaseInput
-            v-model="storage.accessKeyId"
+            :model-value="storage.accessKeyId" :disabled="disabled"
             aria-label="Access Key ID"
             :type="accessKeyInputType"
             autocomplete="off"
+            @update:model-value="updateStorage('accessKeyId', $event)"
           >
             <template #suffix>
               <BaseIconButton
@@ -134,10 +140,11 @@ function toggleSecretVisible(): void {
 
         <BaseFormItem label="Secret Access Key" description="对象存储专用 Secret">
           <BaseInput
-            v-model="storage.secretAccessKey"
+            :model-value="storage.secretAccessKey" :disabled="disabled"
             aria-label="Secret Access Key"
             :type="secretInputType"
             autocomplete="new-password"
+            @update:model-value="updateStorage('secretAccessKey', $event)"
           >
             <template #suffix>
               <BaseIconButton
@@ -155,7 +162,7 @@ function toggleSecretVisible(): void {
         </BaseFormItem>
 
         <div class="col-span-2 flex items-center gap-4 @max-[640px]:col-span-1">
-          <BaseCheckbox v-model="storage.forcePathStyle" label="强制路径式访问" show-label />
+          <BaseCheckbox :model-value="storage.forcePathStyle" :disabled="disabled" label="强制路径式访问" show-label @update:model-value="updateStorage('forcePathStyle', $event)" />
         </div>
       </BaseForm>
     </div>
diff --git a/frontend/src/views/settings/components/backup/SettingsBackupSection.vue b/frontend/src/views/settings/components/backup/SettingsBackupSection.vue
index 092cfcdfd..6051b0cb6 100644
--- a/frontend/src/views/settings/components/backup/SettingsBackupSection.vue
+++ b/frontend/src/views/settings/components/backup/SettingsBackupSection.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
 
 const {
   loading: settingsLoading,
+  busy,
   savingStorage,
   testing,
   savingSchedule,
@@ -58,11 +59,11 @@ const showR2Guide = ref(false)
 const storageConfigured = computed(
   () =>
     Boolean(
-      storage.endpoint.trim()
-      && storage.region.trim()
-      && storage.bucket.trim()
-      && storage.accessKeyId.trim()
-      && storage.secretAccessKey.trim(),
+      storage.value.endpoint.trim()
+      && storage.value.region.trim()
+      && storage.value.bucket.trim()
+      && storage.value.accessKeyId.trim()
+      && storage.value.secretAccessKey.trim(),
     ),
 )
 
@@ -97,7 +98,7 @@ watch(
   <div class="grid w-full gap-5">
     <BackupStorageCard
       v-model:storage="storage"
-      :loading="settingsLoading"
+      :disabled="busy || !loaded"
       :saving="savingStorage"
       :testing="testing"
       :verified="verified"
@@ -108,7 +109,7 @@ watch(
 
     <BackupScheduleCard
       v-model:schedule="schedule"
-      :loading="settingsLoading"
+      :disabled="busy || !loaded"
       :saving="savingSchedule"
       :storage-ready="storageReady"
       @save="saveSchedule()"
diff --git a/frontend/src/views/settings/composables/useBackupSettings.ts b/frontend/src/views/settings/composables/useBackupSettings.ts
index 968cbebd4..3dfd226b5 100644
--- a/frontend/src/views/settings/composables/useBackupSettings.ts
+++ b/frontend/src/views/settings/composables/useBackupSettings.ts
@@ -1,14 +1,13 @@
 import type { BackupSettingsView, UpdateBackupStoragePayload } from '@/api'
 
 import { toast } from '@codex-proxy/ui'
-import { reactive, shallowRef } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import {
   getBackupSettings,
   testBackupStorage,
   updateBackupSchedule,
   updateBackupStorage,
 } from '@/api'
-import { errorMessage } from '@/utils/operation'
 
 /** 存储与计划配置共用的加载/保存/测试 composable。 */
 export function useBackupSettings() {
@@ -16,14 +15,14 @@ export function useBackupSettings() {
   const savingStorage = shallowRef(false)
   const testing = shallowRef(false)
   const savingSchedule = shallowRef(false)
-  const error = shallowRef('')
+  const busy = computed(() => loading.value || savingStorage.value || testing.value || savingSchedule.value)
   const loaded = shallowRef(false)
 
-  const storageRevision = shallowRef(0)
+  let storageRevision = 0
   const verified = shallowRef(false)
 
   // 存储表单；secretAccessKey 由 GET 回填，保存时始终整体提交。
-  const storage = reactive({
+  const storage = ref({
     endpoint: '',
     region: 'auto',
     bucket: '',
@@ -33,7 +32,7 @@ export function useBackupSettings() {
     forcePathStyle: false,
   })
 
-  const schedule = reactive({
+  const schedule = ref({
     scheduleEnabled: false,
     cronExpression: '0 2 * * *',
     retentionDays: '7',
@@ -41,57 +40,68 @@ export function useBackupSettings() {
   })
 
   async function load(): Promise<void> {
-    if (loaded.value)
+    if (loaded.value || busy.value)
       return
     loading.value = true
-    error.value = ''
     try {
       const data = await getBackupSettings()
-      applySettings(data)
+      applyStorage(data)
+      applySchedule(data)
       loaded.value = true
     }
-    catch (cause) {
-      error.value = errorMessage(cause)
-    }
+    catch {}
     finally {
       loading.value = false
     }
   }
 
-  function applySettings(data: BackupSettingsView): void {
-    storageRevision.value = data.storageRevision
+  function applyStorage(data: BackupSettingsView): void {
+    storageRevision = data.storageRevision
     verified.value = data.verified
-    storage.endpoint = data.endpoint ?? ''
-    storage.region = data.region ?? 'auto'
-    storage.bucket = data.bucket ?? ''
-    storage.accessKeyId = data.accessKeyId ?? ''
-    storage.secretAccessKey = data.secretAccessKey ?? ''
-    storage.prefix = data.prefix ?? 'backups/'
-    storage.forcePathStyle = data.forcePathStyle
-    schedule.scheduleEnabled = data.scheduleEnabled
-    schedule.cronExpression = data.cronExpression ?? '0 2 * * *'
-    schedule.retentionDays = String(data.retentionDays)
-    schedule.retentionCount = String(data.retentionCount)
+    storage.value = {
+      endpoint: data.endpoint ?? '',
+      region: data.region ?? 'auto',
+      bucket: data.bucket ?? '',
+      accessKeyId: data.accessKeyId ?? '',
+      secretAccessKey: data.secretAccessKey ?? '',
+      prefix: data.prefix ?? 'backups/',
+      forcePathStyle: data.forcePathStyle,
+    }
+  }
+
+  function applySchedule(data: BackupSettingsView): void {
+    schedule.value = {
+      scheduleEnabled: data.scheduleEnabled,
+      cronExpression: data.cronExpression ?? '0 2 * * *',
+      retentionDays: String(data.retentionDays),
+      retentionCount: String(data.retentionCount),
+    }
   }
 
   function storagePayload(): UpdateBackupStoragePayload {
     return {
-      endpoint: storage.endpoint.trim(),
-      region: storage.region.trim(),
-      bucket: storage.bucket.trim(),
-      accessKeyId: storage.accessKeyId.trim(),
-      secretAccessKey: storage.secretAccessKey.trim(),
-      prefix: storage.prefix.trim(),
-      forcePathStyle: storage.forcePathStyle,
+      endpoint: storage.value.endpoint.trim(),
+      region: storage.value.region.trim(),
+      bucket: storage.value.bucket.trim(),
+      accessKeyId: storage.value.accessKeyId.trim(),
+      secretAccessKey: storage.value.secretAccessKey.trim(),
+      prefix: storage.value.prefix.trim(),
+      forcePathStyle: storage.value.forcePathStyle,
     }
   }
 
   async function saveStorage(): Promise<boolean> {
+    if (busy.value || !loaded.value)
+      return false
     savingStorage.value = true
     try {
       const data = await updateBackupStorage(storagePayload())
-      const schedulePaused = schedule.scheduleEnabled && !data.scheduleEnabled
-      applySettings(data)
+      const storageChanged = data.storageRevision !== storageRevision
+      const schedulePaused = storageChanged && schedule.value.scheduleEnabled && !data.scheduleEnabled
+      applyStorage(data)
+      // 仅存储版本变化时同步服务端暂停状态，普通保存不覆盖计划草稿。
+      if (storageChanged)
+        schedule.value.scheduleEnabled = data.scheduleEnabled
       toast.success(schedulePaused ? '存储配置已保存，定时备份已暂停，请测试连接后重新启用' : '存储配置已保存')
       return true
     }
@@ -104,6 +114,8 @@ export function useBackupSettings() {
   }
 
   async function runTest(): Promise<void> {
+    if (busy.value || !loaded.value)
+      return
     testing.value = true
     try {
       const result = await testBackupStorage()
@@ -125,15 +137,17 @@ export function useBackupSettings() {
   }
 
   async function saveSchedule(): Promise<boolean> {
+    if (busy.value || !loaded.value)
+      return false
     savingSchedule.value = true
     try {
       const data = await updateBackupSchedule({
-        scheduleEnabled: schedule.scheduleEnabled,
-        cronExpression: schedule.cronExpression.trim(),
-        retentionDays: Number(schedule.retentionDays) || 0,
-        retentionCount: Number(schedule.retentionCount) || 0,
+        scheduleEnabled: schedule.value.scheduleEnabled,
+        cronExpression: schedule.value.cronExpression.trim(),
+        retentionDays: Number(schedule.value.retentionDays) || 0,
+        retentionCount: Number(schedule.value.retentionCount) || 0,
       })
-      applySettings(data)
+      applySchedule(data)
       toast.success('备份计划已保存')
       return true
     }
@@ -147,12 +161,11 @@ export function useBackupSettings() {
 
   return {
     loading,
+    busy,
     savingStorage,
     testing,
     savingSchedule,
-    error,
     loaded,
-    storageRevision,
     verified,
     storage,
     schedule,
diff --git a/frontend/src/views/settings/composables/useSettingsForm.ts b/frontend/src/views/settings/composables/useSettingsForm.ts
index 27df7c7f0..90b70962a 100644
--- a/frontend/src/views/settings/composables/useSettingsForm.ts
+++ b/frontend/src/views/settings/composables/useSettingsForm.ts
@@ -1,14 +1,14 @@
 import type { rotationOptions } from '../constants'
-import type { RequestLocation, SmartSchedulingConfig } from '@/api'
+import type { SmartSchedulingConfig } from '@/api'
 import type { ProviderRequestProfiles, ProviderRequestProfileUpdates } from '@/api/modules/client-profiles'
 import { toast } from '@codex-proxy/ui'
-import { isEqual } from 'es-toolkit'
+import { cloneDeep, isEqual } from 'es-toolkit'
 
 import { computed, reactive, ref, shallowRef } from 'vue'
 import { getSettings, updateSettings } from '@/api'
 import { ApiError } from '@/api/request'
 import { useAsyncAction } from '@/composables/useAsyncAction'
-import { normalizeRequestLocation, requestLocationError } from '@/utils/data'
+import { normalizeRequestLocation, requestLocationError } from '@/utils/location'
 import { errorMessage } from '@/utils/operation'
 
 type RotationStrategy = (typeof rotationOptions)[number]['value']
@@ -21,7 +21,6 @@ export function useSettingsForm() {
   const saving = saveAction.loading
   const error = shallowRef('')
   const mappings = ref<Array<{ requestedModel: string, upstreamModel: string }>>([])
-  const savedRequestLocation = shallowRef<RequestLocation>()
   const smartSchedulingDefaults = shallowRef<SmartSchedulingConfig>()
   const form = reactive({
     configRevision: 0,
@@ -59,30 +58,19 @@ export function useSettingsForm() {
   })
 
   function snapshot() {
-    return {
-      form: {
-        ...form,
-        smartScheduling: form.smartScheduling ? { ...form.smartScheduling } : undefined,
-        providerRequestProfiles: cloneProfiles(form.providerRequestProfiles),
-        requestLocation: { ...form.requestLocation },
-      },
-      mappings: mappings.value.map(row => ({ ...row })),
-    }
+    return cloneDeep({ form, mappings: mappings.value })
   }
 
   const saved = shallowRef<ReturnType<typeof snapshot>>()
-  const loaded = computed(() => saved.value !== undefined)
-  const hasChanges = computed(() => loaded.value && !isEqual(snapshot(), saved.value))
+  const hasChanges = computed(() => saved.value !== undefined
+    && !isEqual({ form, mappings: mappings.value }, saved.value))
 
   function resetSettings() {
     if (!saved.value || saving.value)
       return
-    Object.assign(form, saved.value.form, {
-      smartScheduling: saved.value.form.smartScheduling ? { ...saved.value.form.smartScheduling } : undefined,
-      providerRequestProfiles: cloneProfiles(saved.value.form.providerRequestProfiles),
-      requestLocation: { ...saved.value.form.requestLocation },
-    })
-    mappings.value = saved.value.mappings.map(row => ({ ...row }))
+    const initial = cloneDeep(saved.value)
+    Object.assign(form, initial.form)
+    mappings.value = initial.mappings
   }
 
   function numericModel(key: 'refreshMarginSeconds' | 'refreshConcurrency' | 'maxConcurrentPerAccount' | 'openaiGuardianReservedConcurrency' | 'requestIntervalMs' | 'maxWaitingPerKey' | 'maxWaitingPerAccount' | 'concurrencyWaitTimeoutSeconds' | 'responsesMaxDecompressedBodyMiB' | 'accountAutoFreezeThreshold' | 'accountAutoFreezeWindowSeconds' | 'accountAutoFreezeDurationSeconds') {
@@ -122,7 +110,6 @@ export function useSettingsForm() {
 
   function applySettings(data: Awaited<ReturnType<typeof getSettings>>) {
     form.configRevision = data.configRevision
-    savedRequestLocation.value = { ...data.requestLocation }
     form.requestLocationEnabled = data.requestLocationEnabled
     form.requestLocation = { ...data.requestLocation }
     form.refreshMarginSeconds = data.refreshMarginSeconds
@@ -139,7 +126,7 @@ export function useSettingsForm() {
     smartSchedulingDefaults.value = { ...data.smartSchedulingDefaults }
     form.rotationStrategy = data.rotationStrategy
     form.minCodexDesktopVersion = data.minCodexDesktopVersion ?? ''
-    form.providerRequestProfiles = cloneProfiles(data.providerRequestProfiles)
+    form.providerRequestProfiles = cloneDeep(data.providerRequestProfiles)
     form.minCodexCliVersion = data.minCodexCliVersion ?? ''
     form.usageRetentionDays = data.usageRetentionDays
     form.opsEventRetentionDays = data.opsEventRetentionDays
@@ -154,9 +141,9 @@ export function useSettingsForm() {
     form.accountWarmupEnabled = data.accountWarmupEnabled
     form.accountWarmupScheduleTime = data.accountWarmupScheduleTime ?? '08:00'
     form.accountWarmupModel = data.accountWarmupModel ?? ''
-    mappings.value = Object.entries(data.modelMappings || {}).map(([requestedModel, upstreamModel]) => ({
+    mappings.value = Object.entries(data.modelMappings).map(([requestedModel, upstreamModel]) => ({
       requestedModel,
-      upstreamModel: String(upstreamModel),
+      upstreamModel,
     }))
     saved.value = snapshot()
   }
@@ -212,7 +199,7 @@ export function useSettingsForm() {
     if (!smartScheduling)
       return
     const savedSettings = saved.value
-    if (saving.value || loading.value || !savedRequestLocation.value || !savedSettings)
+    if (saving.value || loading.value || !savedSettings)
       return
     const { refreshMarginSeconds, refreshConcurrency, maxConcurrentPerAccount, openaiGuardianReservedConcurrency, requestIntervalMs, rotationStrategy, maxWaitingPerKey, maxWaitingPerAccount, concurrencyWaitTimeoutSeconds, responsesMaxDecompressedBodyMiB, accountAutoFreezeThreshold, accountAutoFreezeWindowSeconds, accountAutoFreezeDurationSeconds } = form
     if (refreshMarginSeconds === null || refreshConcurrency === null || maxConcurrentPerAccount === null || openaiGuardianReservedConcurrency === null || requestIntervalMs === null || !rotationStrategy || maxWaitingPerKey === null || maxWaitingPerAccount === null || concurrencyWaitTimeoutSeconds === null) {
@@ -244,7 +231,7 @@ export function useSettingsForm() {
     // 关闭时保留已保存的自定义值，未完成的草稿不阻止停止覆盖。
     const requestLocation = form.requestLocationEnabled
       ? normalizeRequestLocation(form.requestLocation)
-      : savedRequestLocation.value
+      : savedSettings.form.requestLocation
     const locationError = requestLocationError(requestLocation)
     if (locationError) {
       toast.warning(locationError)
@@ -261,7 +248,7 @@ export function useSettingsForm() {
       return
     }
     const probeModel = form.accountAutoFreezeProbeModel.trim()
-    if (probeModel && (probeModel.length > 128 || probeModel !== probeModel.trim())) {
+    if (probeModel.length > 128) {
       toast.warning('探测模型名称不能超过 128 个字符')
       return
     }
@@ -358,16 +345,12 @@ export function useSettingsForm() {
   }
 }
 
-function cloneProfiles(value: ProviderRequestProfiles): ProviderRequestProfiles {
-  return JSON.parse(JSON.stringify(value)) as ProviderRequestProfiles
-}
-
 function requestProfileUpdates(
   previous: ProviderRequestProfiles,
   current: ProviderRequestProfiles,
 ): ProviderRequestProfileUpdates {
   const updates: ProviderRequestProfileUpdates = {}
-  const clonedCurrent = cloneProfiles(current)
+  const clonedCurrent = cloneDeep(current)
   for (const provider of new Set([...Object.keys(previous), ...Object.keys(current)])) {
     if (isEqual(previous[provider], current[provider]))
       continue
diff --git a/frontend/src/views/theme/components/ThemeDashboardPreview.vue b/frontend/src/views/theme/components/ThemeDashboardPreview.vue
index a86846dc1..3d0f87e7a 100644
--- a/frontend/src/views/theme/components/ThemeDashboardPreview.vue
+++ b/frontend/src/views/theme/components/ThemeDashboardPreview.vue
@@ -6,7 +6,7 @@ import DashboardContent from '@/views/dashboard/components/DashboardContent.vue'
 import {
   dashboardSnapshotView,
   dashboardTrendView,
-} from '@/views/dashboard/composables/useDashboard'
+} from '@/views/dashboard/presenter'
 
 import { themeDashboardSummary } from '../fixtures/dashboard'
 
diff --git a/frontend/src/views/theme/composables/useThemeEditor.ts b/frontend/src/views/theme/composables/useThemeEditor.ts
index f3b5d633f..59eb4aaa8 100644
--- a/frontend/src/views/theme/composables/useThemeEditor.ts
+++ b/frontend/src/views/theme/composables/useThemeEditor.ts
@@ -24,7 +24,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { useThemeStore } from '@/stores/modules/theme'
 
-export type ThemeEditorScope = 'global' | 'component'
+type ThemeEditorScope = 'global' | 'component'
 export type ThemeEditorGlobalCategory = 'color' | 'size' | 'style'
 export type ThemeEditorPreview = 'page' | 'components'
 export type ThemeEditorComponent
@@ -153,13 +153,13 @@ export function useThemeEditor() {
   function setComponentNumber(key: ComponentNumberKey, value: number) {
     if (!Number.isFinite(value))
       return
-    setCustomization(normalizeThemeCustomization({
+    setCustomization({
       ...draft.value.customization,
       component: {
         ...(draft.value.customization.component ?? {}),
         [key]: value,
       },
-    }))
+    })
   }
 
   function resetComponentNumber(key: ComponentNumberKey) {
@@ -172,13 +172,13 @@ export function useThemeEditor() {
   }
 
   function setTokenOverride(name: ThemeTokenName, value: string) {
-    setCustomization(normalizeThemeCustomization({
+    setCustomization({
       ...draft.value.customization,
       tokenOverrides: {
         ...(draft.value.customization.tokenOverrides ?? {}),
         [name]: value,
       },
-    }))
+    })
   }
 
   function resetTokenOverride(name: ThemeTokenName) {
@@ -218,13 +218,13 @@ export function useThemeEditor() {
   }
 
   function updateSeed(patch: Partial<ThemeSeedOverrides>) {
-    setCustomization(normalizeThemeCustomization({
+    setCustomization({
       ...draft.value.customization,
       seed: {
         ...(draft.value.customization.seed ?? {}),
         ...patch,
       },
-    }))
+    })
   }
 
   function setCustomization(customization: ThemeCustomization) {
diff --git a/frontend/src/views/usage/components/OpsErrorPanel.vue b/frontend/src/views/usage/components/OpsErrorPanel.vue
index 7a7056c9e..79b3e5b2f 100644
--- a/frontend/src/views/usage/components/OpsErrorPanel.vue
+++ b/frontend/src/views/usage/components/OpsErrorPanel.vue
@@ -5,14 +5,14 @@ import type { OpsError } from '@/api'
 import { BaseIconButton, BaseInput, BaseTable, BaseTableColumnSettings, BaseTablePagination, useTableColumns } from '@codex-proxy/ui'
 import { Eye, RefreshCw, Search } from '@lucide/vue'
 import { shallowRef, toRef } from 'vue'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
-import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
+import { usageUserAgent } from '@/components/usage/shared/presenter'
+import UsageClientIpCell from '@/components/usage/UsageClientIpCell.vue'
 import { useOpsErrorsTable } from '../composables/useOpsErrorsTable'
 import { opsErrorColumns } from '../constants'
 import { opsErrorSummary } from '../utils/opsErrorPresentation'
-import { usageUserAgent } from '../utils/records'
 import OpsErrorDetailModal from './OpsErrorDetailModal.vue'
-import UsageClientIpCell from './UsageClientIpCell.vue'
 
 const props = defineProps<{
   timeRangeParams: UsageTimeRangeParams
diff --git a/frontend/src/views/usage/components/UsageCostCard.vue b/frontend/src/views/usage/components/UsageCostCard.vue
index 380227caf..6121a0260 100644
--- a/frontend/src/views/usage/components/UsageCostCard.vue
+++ b/frontend/src/views/usage/components/UsageCostCard.vue
@@ -9,12 +9,12 @@ import {
   requestActivityByBucket,
   zeroInactiveValues,
 } from '@/components/charts/timeSeriesGap'
+import { tooltipIndex, tooltipRows } from '@/components/charts/tooltip'
 import { useChartPalette } from '@/composables/useChartPalette'
-import { formatLocalizedCompactNumber as formatCompactNumber } from '@/utils/format'
+import { decimalDisplayNumber, formatLocalizedCompactNumber as formatCompactNumber, formatPercent, formatUsd } from '@/utils/format'
 
 import {
-  tooltipIndex,
-  tooltipRows,
+  formatUsdAxis,
   usageCategoryAxis,
   usageGapAwareLineSeries,
   usageLegend,
@@ -23,12 +23,6 @@ import {
   usageTooltipItem,
   usageValueAxis,
 } from '../utils/chart'
-import {
-  decimalDisplayNumber,
-  formatPercent,
-  formatUsd,
-  formatUsdAxis,
-} from '../utils/format'
 
 type Cost = Awaited<ReturnType<typeof getUsageRecordInsightsOverview>>['cost']
 type Activity = Awaited<ReturnType<typeof getUsageRecordInsightsOverview>>['health']['points']
diff --git a/frontend/src/views/usage/components/UsageDiagnosticCard.vue b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
index cb6c19d37..58bcaac1f 100644
--- a/frontend/src/views/usage/components/UsageDiagnosticCard.vue
+++ b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
@@ -5,10 +5,8 @@ import { BaseCard, BaseEmpty, BaseSegmented, BaseTable, defineTableColumns } fro
 
 import { CornerDownRight } from '@lucide/vue'
 import { computed } from 'vue'
-import { formatLocalizedCompactNumber as formatCompactNumber } from '@/utils/format'
-import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
-
-import { formatDuration, formatPercent, formatUsd } from '../utils/format'
+import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
+import { formatLocalizedCompactNumber as formatCompactNumber, formatDuration, formatPercent, formatUsd } from '@/utils/format'
 
 type Diagnostics = Awaited<ReturnType<typeof getUsageRecordInsightsDiagnostics>>
 
diff --git a/frontend/src/views/usage/components/UsageHealthCard.vue b/frontend/src/views/usage/components/UsageHealthCard.vue
index de1a1e117..25a89f499 100644
--- a/frontend/src/views/usage/components/UsageHealthCard.vue
+++ b/frontend/src/views/usage/components/UsageHealthCard.vue
@@ -7,12 +7,11 @@ import { BarChart } from 'echarts/charts'
 import { use } from 'echarts/core'
 import { computed } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
+import { tooltipIndex, tooltipRows } from '@/components/charts/tooltip'
 import { useChartPalette } from '@/composables/useChartPalette'
-import { formatLocalizedCompactNumber as formatCompactNumber } from '@/utils/format'
+import { formatLocalizedCompactNumber as formatCompactNumber, formatPercent } from '@/utils/format'
 
 import {
-  tooltipIndex,
-  tooltipRows,
   usageCategoryAxis,
   usageGapAwareLineSeries,
   usageLegend,
@@ -21,7 +20,6 @@ import {
   usageTooltipItem,
   usageValueAxis,
 } from '../utils/chart'
-import { formatPercent } from '../utils/format'
 
 type Health = Awaited<ReturnType<typeof getUsageRecordInsightsOverview>>['health']
 type HealthPoint = Health['points'][number]
diff --git a/frontend/src/views/usage/components/UsagePerformanceCard.vue b/frontend/src/views/usage/components/UsagePerformanceCard.vue
index 1eeeb131e..fc1c0a6cc 100644
--- a/frontend/src/views/usage/components/UsagePerformanceCard.vue
+++ b/frontend/src/views/usage/components/UsagePerformanceCard.vue
@@ -6,12 +6,12 @@ import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
 import { computed, shallowRef } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { requestActivityByBucket, zeroInactiveValues } from '@/components/charts/timeSeriesGap'
+import { tooltipIndex, tooltipRows } from '@/components/charts/tooltip'
 import { useChartPalette } from '@/composables/useChartPalette'
-import { formatLocalizedCompactNumber as formatCompactNumber } from '@/utils/format'
+import { formatLocalizedCompactNumber as formatCompactNumber, formatDuration, formatPercent } from '@/utils/format'
 
 import {
-  tooltipIndex,
-  tooltipRows,
+  formatDurationAxis,
   usageCategoryAxis,
   usageGapAwareLineSeries,
   usageLegend,
@@ -20,7 +20,6 @@ import {
   usageTooltipItem,
   usageValueAxis,
 } from '../utils/chart'
-import { formatDuration, formatDurationAxis, formatPercent } from '../utils/format'
 
 type Performance = Awaited<ReturnType<typeof getUsageRecordInsightsOverview>>['performance']
 type PerformancePoint = Performance['points'][number]
diff --git a/frontend/src/views/usage/components/UsageRecordDetailModal.vue b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
index 5f5d5a3ba..9e3923956 100644
--- a/frontend/src/views/usage/components/UsageRecordDetailModal.vue
+++ b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
@@ -1,35 +1,31 @@
 <script setup lang="ts">
 import type { EChartsOption } from 'echarts'
-import type { UsageViewModel } from '../utils/records'
+import type { UsageRecordDetail } from '@/api'
 
 import { BaseButton, BaseModal, BaseTable, defineTableColumns } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { chartTooltipStyle } from '@/components/charts/tooltip'
-import { useChartPalette } from '@/composables/useChartPalette'
-import { displayValue, fieldLabelClass, fieldValueBaseClass, fieldValueClass } from '../utils/detail'
-import { formatDuration } from '../utils/format'
 import {
   usageAccountText,
-  usageBilling,
   usageBillingText,
   usageClientIp,
   usageLatencyDetails,
   usageModelDisplay,
   usageReasoningEffort,
-  usageTokenDetails,
   usageTransportType,
   usageUserAgent,
-  visibleRequestText,
-  visibleResponseText,
-} from '../utils/records'
+} from '@/components/usage/shared/presenter'
+import { useChartPalette } from '@/composables/useChartPalette'
+import { formatDuration } from '@/utils/format'
+import { displayValue, fieldLabelClass, fieldValueBaseClass, fieldValueClass, visibleRequestText, visibleResponseText } from '../utils/detail'
 import RequestDiagnosticsPanel from './RequestDiagnosticsPanel.vue'
 import UsageDetailCodePanel from './UsageDetailCodePanel.vue'
 import UsageDetailFieldGrid from './UsageDetailFieldGrid.vue'
 import UsageStatusCodeBadge from './UsageStatusCodeBadge.vue'
 
 const props = defineProps<{
-  record: UsageViewModel | null
+  record: UsageRecordDetail | null
 }>()
 
 const open = defineModel<boolean>({ default: false })
@@ -41,8 +37,8 @@ const responseText = computed(() => props.record ? visibleResponseText(props.rec
 const modelDisplay = computed(() => props.record
   ? usageModelDisplay(props.record)
   : { primary: '—', secondary: '' })
-const tokenDetails = computed(() => props.record ? usageTokenDetails(props.record) : null)
-const billing = computed(() => props.record ? usageBilling(props.record) : null)
+const tokenDetails = computed(() => props.record ? props.record.tokenDetails : null)
+const billing = computed(() => props.record ? props.record.billing : null)
 const latencyDetails = computed(() => props.record ? usageLatencyDetails(props.record) : null)
 
 const panelClass = 'min-w-0 rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5'
@@ -468,11 +464,11 @@ const tokenDonutOption = computed<EChartsOption>(() => {
         </div>
       </section>
 
-      <section v-if="record.providerMetadata" class="min-h-0" :class="[panelClass]">
+      <section v-if="record.metadata" class="min-h-0" :class="[panelClass]">
         <UsageDetailCodePanel
           title="元数据"
           max-height="min(32dvh, 340px)"
-          :content="JSON.stringify(record.providerMetadata, null, 2)"
+          :content="JSON.stringify(record.metadata, null, 2)"
         />
       </section>
     </div>
diff --git a/frontend/src/views/usage/composables/useOpsErrorsTable.ts b/frontend/src/views/usage/composables/useOpsErrorsTable.ts
index 6861ec5a9..6bb6cf673 100644
--- a/frontend/src/views/usage/composables/useOpsErrorsTable.ts
+++ b/frontend/src/views/usage/composables/useOpsErrorsTable.ts
@@ -1,8 +1,7 @@
 import type { Ref } from 'vue'
 import type { UsageTimeRangeParams } from './useUsageTimeRange'
-import { watchDebounced } from '@vueuse/core'
 
-import { computed, onScopeDispose, shallowRef, watch } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
 import { getOpsErrors } from '@/api'
 import { useStablePagedQuery } from '@/composables/useStablePagedQuery'
 import { withMinimumDuration } from '@/utils/operation'
@@ -18,7 +17,6 @@ export function useOpsErrorsTable(options: UseOpsErrorsTableOptions) {
   const refreshing = shallowRef(false)
   const searchQuery = shallowRef('')
   const search = computed(() => searchQuery.value.trim() || undefined)
-  let disposed = false
   // 时间、平台和搜索共同构成分页快照，避免翻页混入另一组筛选结果。
   let tableParams = snapshot()
 
@@ -62,8 +60,6 @@ export function useOpsErrorsTable(options: UseOpsErrorsTableOptions) {
 
   function reloadLatest() {
     tableParams = snapshot()
-    // 筛选失败不能继续展示上一范围的数据，错误态由面板单独呈现。
-    query.items.value = []
     return query.reloadFromStart()
   }
 
@@ -79,14 +75,13 @@ export function useOpsErrorsTable(options: UseOpsErrorsTableOptions) {
     }
   }
 
-  watchDebounced(
-    search,
-    () => {
-      if (!disposed && options.active.value && tableParams.search !== search.value)
+  watch(search, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
+      if (options.active.value && tableParams.search !== search.value)
         void reloadLatest()
-    },
-    { debounce: 250 },
-  )
+    }, 250)
+    onCleanup(() => clearTimeout(timer))
+  })
 
   watch([options.timeRangeParams, options.provider, options.active], () => {
     if (options.active.value)
@@ -95,8 +90,6 @@ export function useOpsErrorsTable(options: UseOpsErrorsTableOptions) {
       query.invalidate()
   }, { immediate: true })
 
-  onScopeDispose(() => disposed = true)
-
   return {
     loading: query.loading,
     error: query.error,
diff --git a/frontend/src/views/usage/composables/useUsageRecordDetail.ts b/frontend/src/views/usage/composables/useUsageRecordDetail.ts
index aafec7279..9f0d03723 100644
--- a/frontend/src/views/usage/composables/useUsageRecordDetail.ts
+++ b/frontend/src/views/usage/composables/useUsageRecordDetail.ts
@@ -1,16 +1,15 @@
-import type { UsageDisplayRecord, UsageViewModel } from '../utils/records'
+import type { UsageListRecord, UsageRecordDetail } from '@/api'
 import { shallowRef } from 'vue'
 import { getUsageRecordDetail } from '@/api'
-import { normalizeUsageRecord } from '../utils/records'
 
 export function useUsageRecordDetail() {
   const showDetailModal = shallowRef(false)
-  const selectedUsageRecord = shallowRef<UsageViewModel | null>(null)
+  const selectedUsageRecord = shallowRef<UsageRecordDetail | null>(null)
 
-  async function handleViewDetail(record: UsageDisplayRecord) {
+  async function handleViewDetail(record: UsageListRecord) {
     try {
       const detail = await getUsageRecordDetail({ id: record.id })
-      selectedUsageRecord.value = normalizeUsageRecord(detail)
+      selectedUsageRecord.value = detail
       showDetailModal.value = true
     }
     catch {}
diff --git a/frontend/src/views/usage/composables/useUsageRecordsTable.ts b/frontend/src/views/usage/composables/useUsageRecordsTable.ts
index d85b79926..5b61899e4 100644
--- a/frontend/src/views/usage/composables/useUsageRecordsTable.ts
+++ b/frontend/src/views/usage/composables/useUsageRecordsTable.ts
@@ -1,7 +1,5 @@
 import type { Ref } from 'vue'
-import type { UsageDisplayRecord } from '../utils/records'
 import type { UsageTimeRangeParams } from './useUsageTimeRange'
-import { watchDebounced } from '@vueuse/core'
 
 import { computed, onMounted, onScopeDispose, shallowRef, watch } from 'vue'
 import {
@@ -10,6 +8,7 @@ import {
   getUsageRecords,
   getUsageRecordSummary,
 } from '@/api'
+import { useStablePagedQuery } from '@/composables/useStablePagedQuery'
 import { withMinimumDuration } from '@/utils/operation'
 
 interface UseUsageRecordsTableOptions {
@@ -26,27 +25,24 @@ interface UsageLoadOptions {
 }
 
 export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
-  const loading = shallowRef(true)
   const analyticsLoading = shallowRef(true)
-  const records = shallowRef<UsageDisplayRecord[]>([])
   const summary = shallowRef(emptySummary())
   const insights = shallowRef(emptyInsights())
-  const currentPage = shallowRef(1)
-  const pageSize = shallowRef(10)
-  const totalRecords = shallowRef(0)
   const searchQuery = shallowRef('')
   const search = computed(() => searchQuery.value.trim() || undefined)
   const providerQuery = shallowRef('')
   let tableParams = snapshot()
+  const table = useStablePagedQuery({
+    initialPageSize: 10,
+    load: (pagination, requestOptions) => getUsageRecords({ ...pagination, ...tableParams }, requestOptions),
+  })
+  const { currentPage, pageSize, loading, error, items: records, total: totalRecords } = table
   const refreshingList = shallowRef(false)
   const diagnosticDimension = shallowRef('model')
-  let tableRequestId = 0
   let analyticsRequestId = 0
   let diagnosticRequestId = 0
-  let tableController: AbortController | undefined
   let analyticsController: AbortController | undefined
   let diagnosticController: AbortController | undefined
-  let disposed = false
   const scopedParams = () => ({
     ...options.timeRangeParams.value,
     ...(providerQuery.value ? { provider: providerQuery.value } : {}),
@@ -65,7 +61,10 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
     }
   }
 
-  function resetPagination() {
+  function resetTable() {
+    tableParams = snapshot()
+    // 筛选范围变化后不能继续展示上一范围的数据，即使新查询失败。
+    records.value = []
     currentPage.value = 1
     totalRecords.value = 0
   }
@@ -73,44 +72,15 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
   async function loadUsageRecords(loadOptions: UsageLoadOptions = {}) {
     const { scope = 'all', background = false } = loadOptions
     const globalParams = scopedParams()
-    if (scope === 'all') {
-      resetPagination()
-      tableParams = snapshot()
-    }
+    if (scope === 'all')
+      resetTable()
 
     await Promise.all([
-      ...(options.active.value ? [loadUsagePage(background)] : []),
+      ...(options.active.value ? [table.execute()] : []),
       ...(scope === 'all' ? [loadUsageAnalytics(globalParams, background)] : []),
     ])
   }
 
-  async function loadUsagePage(background: boolean) {
-    const requestId = ++tableRequestId
-    tableController?.abort()
-    tableController = new AbortController()
-    loading.value = !background
-    try {
-      const result = await getUsageRecords({
-        currentPage: currentPage.value,
-        pageSize: pageSize.value,
-        ...tableParams,
-      }, { signal: tableController.signal })
-      if (requestId !== tableRequestId)
-        return
-
-      records.value = result.items
-      pageSize.value = result.pageSize
-      totalRecords.value = result.total
-      currentPage.value = result.currentPage
-    }
-    catch {}
-    finally {
-      if (requestId === tableRequestId) {
-        loading.value = false
-      }
-    }
-  }
-
   async function loadUsageAnalytics(globalParams: ReturnType<typeof scopedParams>, background: boolean) {
     const requestId = ++analyticsRequestId
     const diagnosticsId = ++diagnosticRequestId
@@ -183,8 +153,7 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
   }
 
   function reloadLatestTable() {
-    tableParams = snapshot()
-    resetPagination()
+    resetTable()
     return loadUsageRecords({ scope: 'table' })
   }
 
@@ -193,8 +162,7 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
       void reloadLatestTable()
       return
     }
-    currentPage.value = nextPage
-    void loadUsageRecords({ scope: 'table' })
+    void table.execute(nextPage)
   }
 
   function handlePageSizeChange(nextPageSize: number) {
@@ -203,8 +171,7 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
       void reloadLatestTable()
       return
     }
-    resetPagination()
-    void loadUsageRecords({ scope: 'table' })
+    void table.reloadFromStart()
   }
 
   onMounted(() => {
@@ -224,26 +191,21 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
       void reloadLatestTable()
     }
     else {
-      tableRequestId += 1
-      tableController?.abort()
+      table.invalidate()
     }
   })
 
-  watchDebounced(
-    search,
-    () => {
-      if (!disposed && options.active.value && tableParams.search !== search.value)
+  watch(search, (_value, _previous, onCleanup) => {
+    const timer = setTimeout(() => {
+      if (options.active.value && tableParams.search !== search.value)
         void reloadLatestTable()
-    },
-    { debounce: 250 },
-  )
+    }, 250)
+    onCleanup(() => clearTimeout(timer))
+  })
 
   onScopeDispose(() => {
-    disposed = true
-    tableRequestId += 1
     analyticsRequestId += 1
     diagnosticRequestId += 1
-    tableController?.abort()
     analyticsController?.abort()
     diagnosticController?.abort()
   })
@@ -255,6 +217,7 @@ export function useUsageRecordsTable(options: UseUsageRecordsTableOptions) {
     providerQuery,
     usagePagination,
     loading,
+    error,
     analyticsLoading,
     records,
     summary,
diff --git a/frontend/src/views/usage/composables/useUsageTimeRange.ts b/frontend/src/views/usage/composables/useUsageTimeRange.ts
index 558955fa0..705a6b2c3 100644
--- a/frontend/src/views/usage/composables/useUsageTimeRange.ts
+++ b/frontend/src/views/usage/composables/useUsageTimeRange.ts
@@ -1,6 +1,6 @@
 import { computed, shallowRef } from 'vue'
 
-export type UsageTimeRange = 'today' | '7d' | '30d'
+type UsageTimeRange = 'today' | '7d' | '30d'
 export interface UsageTimeRangeParams {
   period: UsageTimeRange
   asOf: number
diff --git a/frontend/src/views/usage/constants.ts b/frontend/src/views/usage/constants.ts
index 3a74b7439..3c87d548e 100644
--- a/frontend/src/views/usage/constants.ts
+++ b/frontend/src/views/usage/constants.ts
@@ -1,43 +1,7 @@
-import type { UsageDisplayRecord } from './utils/records'
 import type { OpsError } from '@/api'
 import { defineTableColumns } from '@codex-proxy/ui'
-import { formatProvider } from './utils/format'
 
-type OpsErrorRow = OpsError
-
-export const usageRecordColumns = defineTableColumns<UsageDisplayRecord>([
-  { key: 'clientApiKeyName', label: '密钥名称', kind: 'identity', size: 'xl' },
-  {
-    key: 'accountEmail',
-    hideable: false,
-    label: '账号',
-    kind: 'identity',
-    size: '3xl',
-  },
-  { key: 'accountPlanType', label: '订阅', kind: 'status', size: 'sm', fixedWidth: true },
-  {
-    key: 'provider',
-    label: '平台/类型',
-    kind: 'status',
-    size: 'md',
-    fixedWidth: true,
-    format: (value: unknown) => formatProvider(typeof value === 'string' ? value : null),
-  },
-  { key: 'model', label: '模型', kind: 'custom', size: 'xl' },
-  { key: 'reasoningEffort', label: '推理强度', kind: 'status', size: 'md', align: 'left' },
-  { key: 'route', label: '端点', kind: 'mono' },
-  { key: 'upstreamTransport', label: '上游', kind: 'status', size: 'md' },
-  { key: 'clientTransport', label: '接入', kind: 'status', size: 'md' },
-  { key: 'tokenDetails', label: 'TOKEN', kind: 'numeric', size: 'xl' },
-  { key: 'billing', label: '费用', kind: 'numeric', size: 'xl' },
-  { key: 'latency', label: '延迟', kind: 'numeric', size: 'xl' },
-  { key: 'createdAtDisplay', label: '时间', kind: 'datetime' },
-  { key: 'clientIp', label: 'IP', kind: 'custom', size: '3xl' },
-  { key: 'userAgent', label: 'User-Agent', kind: 'custom', size: '4xl' },
-  { key: 'actions', label: '操作', kind: 'actions', size: 'sm', hideable: false },
-])
-
-export const opsErrorColumns = defineTableColumns<OpsErrorRow>([
+export const opsErrorColumns = defineTableColumns<OpsError>([
   { key: 'clientApiKeyName', label: '密钥名称', kind: 'identity', size: 'xl' },
   { key: 'accountId', label: '账号', kind: 'identity', size: '3xl', emptyText: '未知账号', hideable: false },
   { key: 'accountPlanType', label: '订阅', kind: 'status', size: 'sm', fixedWidth: true },
diff --git a/frontend/src/views/usage/index.vue b/frontend/src/views/usage/index.vue
index 9e6004a75..b7198d704 100644
--- a/frontend/src/views/usage/index.vue
+++ b/frontend/src/views/usage/index.vue
@@ -4,16 +4,17 @@ import { BaseCard, BaseIconButton, BasePageHeader, BaseSegmented, BaseSelect, Ba
 import { Eye } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import ProviderFilter from '@/components/ProviderFilter.vue'
+import { usageRecordColumns } from '@/components/usage/shared/columns'
+import UsageRecordsTable from '@/components/usage/UsageRecordsTable.vue'
 import OpsErrorPanel from './components/OpsErrorPanel.vue'
 import UsageFilters from './components/UsageFilters.vue'
 import UsageInsightsGrid from './components/UsageInsightsGrid.vue'
 import UsageRecordDetailModal from './components/UsageRecordDetailModal.vue'
-import UsageRecordsTable from './components/UsageRecordsTable.vue'
 import UsageSummaryCards from './components/UsageSummaryCards.vue'
 import { useUsageRecordDetail } from './composables/useUsageRecordDetail'
 import { useUsageRecordsTable } from './composables/useUsageRecordsTable'
 import { useUsageTimeRange } from './composables/useUsageTimeRange'
-import { usageRecordColumns, usageTimeRangeOptions } from './constants'
+import { usageTimeRangeOptions } from './constants'
 
 const recordView = shallowRef('success')
 const { visibleColumns, columnOptions, setColumnVisible, setColumnOrder, resetColumns } = useTableColumns(usageRecordColumns, 'usage-records')
@@ -30,6 +31,7 @@ const {
   providerQuery,
   usagePagination,
   loading,
+  error,
   analyticsLoading,
   records,
   summary,
@@ -122,7 +124,7 @@ watch(timeRange, () => {
               :columns="visibleColumns"
               :rows="records"
               :loading="loading"
-              empty-text="暂无使用记录"
+              :empty-text="error ? `加载失败：${error}` : '暂无使用记录'"
             >
               <template #actions="{ row }">
                 <div class="flex items-center justify-start">
diff --git a/frontend/src/views/usage/utils/chart.ts b/frontend/src/views/usage/utils/chart.ts
index 36a93316a..c7c38ef90 100644
--- a/frontend/src/views/usage/utils/chart.ts
+++ b/frontend/src/views/usage/utils/chart.ts
@@ -2,7 +2,7 @@ import type { LineSeriesOption } from 'echarts'
 import type { useChartPalette } from '@/composables/useChartPalette'
 import { sampleGapBridgeSeries } from '@/components/charts/timeSeriesGap'
 import { chartTooltipStyle } from '@/components/charts/tooltip'
-import { escapeTooltip } from './format'
+import { formatLocalizedCompactNumber } from '@/utils/format'
 
 type UsageChartPalette = ReturnType<typeof useChartPalette>['palette']['value']
 type UsageAreaStrength = 'strong' | 'subtle'
@@ -19,7 +19,7 @@ const areaAlpha: Record<UsageAreaStrength, readonly [string, string]> = {
   subtle: ['18', '02'],
 }
 
-export function usageLineSeries(
+function usageLineSeries(
   name: string,
   data: Array<number | null | undefined>,
   color: string,
@@ -168,4 +168,28 @@ export function usageLegend(theme: UsageChartPalette, data: string[]) {
   }
 }
 
-export { tooltipIndex, tooltipRows } from '@/components/charts/tooltip'
+export function formatDurationAxis(value: number) {
+  if (!Number.isFinite(value))
+    return '—'
+  if (value < 1_000)
+    return `${Math.round(value)}ms`
+  return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}s`
+}
+
+export function formatUsdAxis(value: number) {
+  const safeValue = Number.isFinite(value) ? value : 0
+  if (Math.abs(safeValue) >= 1_000)
+    return `$${formatLocalizedCompactNumber(safeValue)}`
+  if (Math.abs(safeValue) < 0.01 && safeValue !== 0)
+    return `$${safeValue.toFixed(3)}`
+  return `$${safeValue.toFixed(safeValue < 1 ? 2 : 1)}`
+}
+
+function escapeTooltip(value: string) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('\'', '&#39;')
+}
diff --git a/frontend/src/views/usage/utils/detail.ts b/frontend/src/views/usage/utils/detail.ts
index af5dddeb3..5a8287d74 100644
--- a/frontend/src/views/usage/utils/detail.ts
+++ b/frontend/src/views/usage/utils/detail.ts
@@ -1,3 +1,6 @@
+import type { UsageRecordDetail } from '@/api'
+import { isRecord } from '@/utils/data'
+
 // 详情弹窗共享的字段展示约定：占位符、标签/值样式，供弹窗与其子组件复用。
 export const fieldLabelClass = 'text-cp-xs leading-none font-bold text-cp-text-quaternary'
 export const fieldValueBaseClass
@@ -12,3 +15,77 @@ export function displayValue(value: unknown) {
 export function fieldValueClass(mono?: boolean) {
   return [fieldValueBaseClass, mono ? 'font-mono tabular-nums' : undefined]
 }
+
+export function visibleRequestText(record: UsageRecordDetail) {
+  const body = record.metadata.requestBody
+  if (!body)
+    return ''
+
+  return extractInputText(body) || JSON.stringify(body, null, 2)
+}
+
+export function visibleResponseText(record: UsageRecordDetail) {
+  const body = record.metadata.responseBody
+  if (!body)
+    return ''
+
+  if (typeof body === 'string')
+    return body
+
+  return stringProperty(asRecord(body), 'output_text') || extractOutputText(body) || JSON.stringify(body, null, 2)
+}
+
+function extractInputText(body: unknown) {
+  const input = asRecord(body)?.input
+  if (typeof input === 'string')
+    return input
+
+  if (!Array.isArray(input))
+    return ''
+
+  return input
+    .flatMap((item) => {
+      const content = asRecord(item)?.content
+      if (typeof content === 'string')
+        return [content]
+
+      if (!Array.isArray(content))
+        return []
+
+      return content.flatMap((part) => {
+        const value = asRecord(part)
+        const text = stringProperty(value, 'text')
+        return value?.type === 'input_text' && text ? [text] : []
+      })
+    })
+    .filter(Boolean)
+    .join('\n')
+}
+
+function extractOutputText(body: unknown) {
+  const output = asRecord(body)?.output
+  if (!Array.isArray(output))
+    return ''
+
+  return output
+    .flatMap((item) => {
+      const content = asRecord(item)?.content
+      if (!Array.isArray(content))
+        return []
+      return content.flatMap((part) => {
+        const text = stringProperty(asRecord(part), 'text')
+        return text ? [text] : []
+      })
+    })
+    .filter(Boolean)
+    .join('\n')
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  return isRecord(value) ? value : undefined
+}
+
+function stringProperty(value: Record<string, unknown> | undefined, key: string) {
+  const valueAtKey = value?.[key]
+  return typeof valueAtKey === 'string' ? valueAtKey : undefined
+}
diff --git a/frontend/src/views/usage/utils/format.ts b/frontend/src/views/usage/utils/format.ts
deleted file mode 100644
index 8ddd35bfa..000000000
--- a/frontend/src/views/usage/utils/format.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { formatLocalizedCompactNumber } from '@/utils/format'
-import { formatProviderLabel } from '@/utils/providers'
-
-const percentFormatter = new Intl.NumberFormat('zh-CN', {
-  style: 'percent',
-  maximumFractionDigits: 1,
-})
-
-export function formatPercent(value?: number | null) {
-  return value == null || !Number.isFinite(value) ? '—' : percentFormatter.format(value)
-}
-
-export function formatProvider(value?: string | null) {
-  return formatProviderLabel(value)
-}
-
-export function formatDuration(value?: number | null) {
-  if (value == null || !Number.isFinite(value) || value < 0)
-    return '—'
-  if (value < 1_000)
-    return `${Math.round(value)} ms`
-  if (value < 60_000) {
-    const seconds = value / 1_000
-    return `${seconds.toFixed(seconds >= 10 ? 1 : 2).replace(/\.0+$|(?<=\.\d)0$/, '')} s`
-  }
-  return `${(value / 60_000).toFixed(1).replace(/\.0$/, '')} min`
-}
-
-export function formatDurationAxis(value: number) {
-  if (!Number.isFinite(value))
-    return '—'
-  if (value < 1_000)
-    return `${Math.round(value)}ms`
-  return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}s`
-}
-
-export function decimalDisplayNumber(value?: string | number | null) {
-  if (value == null)
-    return null
-  const parsed = typeof value === 'number' ? value : Number(value)
-  return Number.isFinite(parsed) ? parsed : null
-}
-
-export function formatUsd(value?: string | number | null, precise = false) {
-  const parsed = decimalDisplayNumber(value)
-  if (parsed == null)
-    return '—'
-  const safeValue = parsed
-  const fractionDigits = precise || (Math.abs(safeValue) > 0 && Math.abs(safeValue) < 0.01) ? 4 : 2
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits,
-  }).format(safeValue)
-}
-
-export function formatUsdAxis(value: number) {
-  const safeValue = finiteOrZero(value)
-  if (Math.abs(safeValue) >= 1_000)
-    return `$${formatLocalizedCompactNumber(safeValue)}`
-  if (Math.abs(safeValue) < 0.01 && safeValue !== 0)
-    return `$${safeValue.toFixed(3)}`
-  return `$${safeValue.toFixed(safeValue < 1 ? 2 : 1)}`
-}
-
-export function escapeTooltip(value: string) {
-  return value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll('\'', '&#39;')
-}
-
-function finiteOrZero(value: number) {
-  return Number.isFinite(value) ? value : 0
-}
diff --git a/frontend/src/views/usage/utils/records.ts b/frontend/src/views/usage/utils/records.ts
deleted file mode 100644
index 1f84511bf..000000000
--- a/frontend/src/views/usage/utils/records.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-// Usage 列表与详情使用独立读模型；共享展示函数只依赖两者的公共字段。
-
-import type {
-  UsageAttempt,
-  UsageBilling,
-  UsageCost,
-  UsageCostCoverage,
-  UsageLatencyDetails,
-  UsageListRecord,
-  UsageRecordDetail,
-  UsageTokenDetails,
-} from '@/api'
-
-import { isRecord } from '@/utils/data'
-import { formatDuration } from './format'
-
-// Usage 记录的规范化 view model：组件只消费这个形状。
-export interface UsageViewModel {
-  id: string
-  requestId: string
-  clientApiKeyId: string | null
-  kind: string
-  provider: string | null
-  authenticationKind: string | null
-  accountId: string | null
-  accountEmail: string | null
-  accountName: string | null
-  route: string
-  model: string | null
-  requestedModel: string | null
-  upstreamModel: string | null
-  upstreamResponseModel: string | null
-  serviceTier: string | null
-  statusCode: number | null
-  clientTransport: string
-  upstreamTransport: string | null
-  attemptIndex: number | null
-  attemptCount: number
-  responseId: string | null
-  upstreamRequestId: string | null
-  protocol: string
-  httpVersion: string | null
-  clientStatusCode: number | null
-  upstreamStatusCode: number | null
-  websocketPool: { kind: string } | null
-  imageGenerationRequested: boolean
-  imageGenerationSucceeded: boolean | null
-  latencyMs: number | null
-  firstTokenLatencyMs: number | null
-  latencyDetails: UsageLatencyDetails | null
-  inputTokens: number | null
-  outputTokens: number | null
-  cachedTokens: number | null
-  cacheWriteTokens: number | null
-  reasoningTokens: number | null
-  imageInputTokens: number | null
-  imageOutputTokens: number | null
-  message: string
-  createdAt: string
-  createdAtDisplay: string
-  clientIp: string | null
-  userAgent: string | null
-  reasoningEffort: string | null
-  reasoningPreset: string | null
-  compact: boolean
-  requestKind: string | null
-  subagentKind: string | null
-  tokenDetails: UsageTokenDetails
-  billing: UsageBilling | null
-  costs: UsageCost[]
-  costCoverage: UsageCostCoverage
-  firstTokenLatencyMsDisplay: string
-  latencyMsDisplay: string
-  logicalOutcome: string
-  providerMetadata: Record<string, unknown>
-  requestBody?: unknown
-  responseBody?: unknown
-  attempts?: UsageAttempt[]
-  attemptsComplete?: boolean
-}
-
-/** 将 Usage 详情 API 记录收口为详情组件消费的形状。 */
-export function normalizeUsageRecord(record: UsageRecordDetail): UsageViewModel {
-  const metadata = record.metadata
-
-  return {
-    id: record.id,
-    requestId: record.requestId,
-    clientApiKeyId: record.clientApiKeyId,
-    kind: record.kind,
-    provider: record.provider,
-    authenticationKind: record.authenticationKind,
-    accountId: record.accountId,
-    accountEmail: record.accountEmail,
-    accountName: record.accountName,
-    route: record.route,
-    model: record.model,
-    requestedModel: record.requestedModel,
-    upstreamModel: record.upstreamModel,
-    upstreamResponseModel: record.upstreamResponseModel,
-    serviceTier: record.serviceTier,
-    statusCode: record.statusCode,
-    clientTransport: record.clientTransport,
-    upstreamTransport: record.upstreamTransport,
-    attemptIndex: record.attemptIndex,
-    attemptCount: record.attemptCount,
-    responseId: record.responseId,
-    upstreamRequestId: record.upstreamRequestId,
-    protocol: record.protocol,
-    httpVersion: record.httpVersion,
-    clientStatusCode: record.clientStatusCode,
-    upstreamStatusCode: record.upstreamStatusCode,
-    websocketPool: record.websocketPool,
-    imageGenerationRequested: record.imageGenerationRequested,
-    imageGenerationSucceeded: record.imageGenerationSucceeded,
-    latencyMs: record.latencyMs,
-    firstTokenLatencyMs: record.firstTokenLatencyMs,
-    latencyDetails: record.latencyDetails,
-    inputTokens: record.inputTokens,
-    outputTokens: record.outputTokens,
-    cachedTokens: record.cachedTokens,
-    cacheWriteTokens: record.cacheWriteTokens,
-    reasoningTokens: record.reasoningTokens,
-    imageInputTokens: record.imageInputTokens,
-    imageOutputTokens: record.imageOutputTokens,
-    message: record.message,
-    createdAt: record.createdAt,
-    createdAtDisplay: record.createdAtDisplay,
-    clientIp: record.clientIp,
-    userAgent: record.userAgent,
-    reasoningEffort: record.reasoningEffort,
-    reasoningPreset: record.reasoningPreset,
-    compact: record.compact === true,
-    requestKind: record.requestKind,
-    subagentKind: record.subagentKind,
-    tokenDetails: record.tokenDetails,
-    billing: record.billing,
-    costs: record.costs,
-    costCoverage: record.costCoverage,
-    firstTokenLatencyMsDisplay: record.firstTokenLatencyMsDisplay,
-    latencyMsDisplay: record.latencyMsDisplay,
-    logicalOutcome: record.logicalOutcome,
-    providerMetadata: metadata,
-    requestBody: metadata.requestBody,
-    responseBody: metadata.responseBody,
-    attempts: record.attempts,
-    attemptsComplete: record.attemptsComplete,
-  }
-}
-
-export type UsageDisplayRecord = UsageListRecord
-
-type UsageCommonRecord = UsageDisplayRecord | UsageViewModel
-
-export function usageTransportType(transport?: string | null) {
-  if (transport === 'websocket')
-    return 'WS'
-
-  if (transport === 'http_sse')
-    return 'SSE'
-  if (transport === 'http' || transport === 'http_json')
-    return 'HTTP'
-  return transport || '—'
-}
-
-export function usageTransportTypeClass(transport?: string | null) {
-  const type = usageTransportType(transport)
-  if (type === 'WS')
-    return 'bg-cp-blue-container text-cp-blue-on-container'
-  if (type === 'SSE')
-    return 'bg-cp-green-container text-cp-green-on-container'
-  return 'bg-cp-fill-tertiary text-cp-text-secondary'
-}
-
-export function usageAccountText(record: UsageCommonRecord) {
-  return record.accountEmail || record.accountName || record.accountId || '—'
-}
-
-export function usageAuthenticationKind(record: UsageCommonRecord) {
-  return typeof record.authenticationKind === 'string' ? record.authenticationKind : null
-}
-
-export function usageClientIp(record: { clientIp?: string | null }) {
-  return record.clientIp || '—'
-}
-
-export function usageUserAgent(record: { userAgent?: string | null }) {
-  return record.userAgent || '—'
-}
-
-export function usageReasoningEffort(record: UsageCommonRecord) {
-  const reasoningEffort = record.reasoningEffort || '—'
-  if (usageIsSubagent(record))
-    return reasoningEffort
-  return record.reasoningPreset || reasoningEffort
-}
-
-export function usageIsSubagent(record: UsageCommonRecord) {
-  return Boolean(record.subagentKind)
-}
-
-export function usageIsReview(record: UsageCommonRecord) {
-  return record.subagentKind === 'review'
-}
-
-export function usageIsCompact(record: UsageCommonRecord) {
-  return record.compact === true
-}
-
-export function usageModelDisplay(record: UsageCommonRecord) {
-  const requestedModel = record.requestedModel || ''
-  const upstreamModel = record.upstreamModel || ''
-  const storedModel = record.model || ''
-  const primary = requestedModel || storedModel || upstreamModel || '—'
-  const secondary
-    = upstreamModel && upstreamModel !== primary
-      ? upstreamModel
-      : requestedModel && storedModel && storedModel !== requestedModel
-        ? storedModel
-        : ''
-
-  const responseModel = record.upstreamResponseModel || ''
-  const returned = responseModel && responseModel !== primary ? responseModel : ''
-  const routes = []
-  if (secondary && secondary !== returned) {
-    routes.push({
-      model: secondary,
-      kind: 'mapped' as const,
-      description: `网关映射后发送给上游的模型：${secondary}`,
-    })
-  }
-  if (returned) {
-    routes.push({
-      model: returned,
-      kind: 'returned' as const,
-      description: returned === secondary
-        ? `上游返回模型：${returned}（与网关映射后发送的模型一致）`
-        : `上游返回模型：${returned}`,
-    })
-  }
-
-  return { primary, secondary, routes }
-}
-
-export function usageTokenDetails(record: Pick<UsageCommonRecord, 'tokenDetails'>) {
-  return record.tokenDetails
-}
-
-export function usageLatencyDetails(record: Pick<UsageCommonRecord, 'latencyDetails' | 'firstTokenLatencyMs' | 'latencyMs'>) {
-  const latencyDetails = record.latencyDetails
-  const firstTokenMs = durationValue(
-    record.firstTokenLatencyMs ?? latencyDetails?.firstTokenMs,
-  )
-  const firstEventMs = durationValue(latencyDetails?.firstEventMs)
-  const totalMs = durationValue(record.latencyMs)
-  const firstReasoningMs = durationValue(latencyDetails?.firstReasoningMs)
-  const firstTextMs = durationValue(latencyDetails?.firstTextMs)
-  const breakdownItems = []
-
-  if (firstTokenMs !== null && totalMs !== null && firstTokenMs <= totalMs) {
-    breakdownItems.push({ label: '首字等待', value: formatDuration(firstTokenMs) })
-
-    if (firstTextMs !== null && firstTextMs >= firstTokenMs && firstTextMs <= totalMs) {
-      const beforeTextMs = firstTextMs - firstTokenMs
-      if (beforeTextMs > 0) {
-        breakdownItems.push({
-          label: firstReasoningMs === firstTokenMs ? '推理到正文' : '首个输出到正文',
-          value: formatDuration(beforeTextMs),
-        })
-      }
-      breakdownItems.push({ label: '正文生成', value: formatDuration(totalMs - firstTextMs) })
-    }
-    else {
-      breakdownItems.push({
-        label: '首个输出后完成',
-        value: formatDuration(totalMs - firstTokenMs),
-      })
-    }
-  }
-
-  const transportItems = [
-    { label: '准入判定', value: durationValue(latencyDetails?.admissionDecisionMs) },
-    { label: '账号选择等待', value: durationValue(latencyDetails?.accountSelectionWaitMs) },
-    {
-      label: '传输决策等待',
-      value: durationValue(latencyDetails?.transportDecisionWaitMs),
-    },
-    { label: 'WebSocket 连接', value: durationValue(latencyDetails?.wsConnectMs) },
-    { label: '上游响应头', value: durationValue(latencyDetails?.upstreamHeadersMs) },
-    { label: '首个上游事件', value: firstEventMs },
-    { label: '上游处理', value: durationValue(latencyDetails?.openaiProcessingMs) },
-  ]
-    .filter(item => item.value !== null)
-    .map(item => ({ ...item, value: formatDuration(item.value) }))
-
-  if (
-    latencyDetails?.capacityUsedSlots != null
-    && latencyDetails.capacityTotalSlots != null
-  ) {
-    transportItems.push({
-      label: '账号槽位快照',
-      value: `${latencyDetails.capacityUsedSlots} / ${latencyDetails.capacityTotalSlots}`,
-    })
-  }
-
-  return {
-    // SSE 可能先收到生命周期事件而没有文本或推理增量；这不是首字，须保留原始语义。
-    firstOutputLabel: firstTokenMs === null && firstEventMs !== null ? '首事件' : '首字',
-    firstOutputDisplay: formatDuration(firstTokenMs ?? firstEventMs),
-    totalDisplay: formatDuration(totalMs),
-    breakdownItems,
-    transportItems,
-  }
-}
-
-export function usageBilling(record: Pick<UsageCommonRecord, 'billing'>) {
-  return record.billing
-}
-
-export function usageBillingText(record: Pick<UsageCommonRecord, 'billing'>) {
-  return usageBilling(record)?.totalAmountDisplay || '—'
-}
-
-export function visibleRequestText(record: UsageViewModel) {
-  const body = record.requestBody
-  if (!body)
-    return ''
-
-  return extractInputText(body) || JSON.stringify(body, null, 2)
-}
-
-export function visibleResponseText(record: UsageViewModel) {
-  const body = record.responseBody
-  if (!body)
-    return ''
-
-  if (typeof body === 'string')
-    return body
-
-  return stringProperty(asRecord(body), 'output_text') || extractOutputText(body) || JSON.stringify(body, null, 2)
-}
-
-function durationValue(value: unknown) {
-  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : null
-}
-
-function extractInputText(body: unknown) {
-  const input = property(asRecord(body), 'input')
-  if (typeof input === 'string')
-    return input
-
-  if (!Array.isArray(input))
-    return ''
-
-  return input
-    .flatMap((item) => {
-      const content = property(asRecord(item), 'content')
-      if (typeof content === 'string')
-        return [content]
-
-      if (!Array.isArray(content))
-        return []
-
-      return content.flatMap((part) => {
-        const value = asRecord(part)
-        const text = stringProperty(value, 'text')
-        return value?.type === 'input_text' && text ? [text] : []
-      })
-    })
-    .filter(Boolean)
-    .join('\n')
-}
-
-function extractOutputText(body: unknown) {
-  const output = property(asRecord(body), 'output')
-  if (!Array.isArray(output))
-    return ''
-
-  return output
-    .flatMap((item) => {
-      const content = property(asRecord(item), 'content')
-      if (!Array.isArray(content))
-        return []
-      return content.flatMap((part) => {
-        const text = stringProperty(asRecord(part), 'text')
-        return text ? [text] : []
-      })
-    })
-    .filter(Boolean)
-    .join('\n')
-}
-
-function asRecord(value: unknown): Record<string, unknown> | undefined {
-  return isRecord(value) ? value : undefined
-}
-
-function property(value: Record<string, unknown> | undefined, key: string) {
-  return value?.[key]
-}
-
-function stringProperty(value: Record<string, unknown> | undefined, key: string) {
-  const valueAtKey = property(value, key)
-  return typeof valueAtKey === 'string' ? valueAtKey : undefined
-}