From 9c5fbdba70eed5575cb102922e29bf221e3c9c7d Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Mon, 5 Oct 2026 10:34:10 +0800
Subject: [PATCH] refactor(frontend): clarify module boundaries and simplify
 state

Move shared components and helpers to their actual owners, standardize
component directory names, and use concise names for common utilities.
Remove redundant wrappers, copied API models, and duplicate state.

Separate API key editing from key usage, isolate settings drafts, reuse
paged queries, and tie debounced queries and requests to their scopes.

Validated with frontend lint, type checking and production build, local
import checks, and 15 temporary behavioral regression groups.

Co-authored-by: Codex <noreply@openai.com>
---
 .../components/AnimatedMetricValue.vue        |   0
 .../account}/AccountPlanBadge.vue             |   2 +-
 .../AccountRequestTimeline.vue                |   2 +-
 .../account/account-usage-window}/index.vue   |   8 +-
 .../account-usage-window}/presenter.ts        |   4 +-
 frontend/src/components/charts/BaseChart.vue  |  14 +-
 .../{SchemaForm => schema-form}/index.vue     |   7 +-
 .../{SchemaForm => schema-form}/schema.ts     |   0
 .../usage}/HealthTimelinePointPopover.vue     |   6 +-
 .../usage}/RequestHealthTimelineCard.vue      |  20 +-
 .../usage}/UsageBillingCell.vue               |  10 +-
 .../usage}/UsageClientIpCell.vue              |   2 +-
 .../usage}/UsageDetailPopover.vue             |   0
 .../usage}/UsageLatencyCell.vue               |   8 +-
 .../usage}/UsageModelCell.vue                 |   7 +-
 .../usage}/UsageReasoningEffortCell.vue       |  10 +-
 .../usage}/UsageRecordsTable.vue              |  31 +-
 .../usage}/UsageTokenCell.vue                 |  10 +-
 .../usage}/UsageTransportBadge.vue            |   2 +-
 .../src/components/usage/shared/columns.ts    |  35 ++
 .../src/components/usage/shared/health.ts     |  68 +++
 .../src/components/usage/shared/presenter.ts  | 154 +++++++
 .../src/composables/useAccountGroupCatalog.ts |  17 +-
 frontend/src/composables/useAsyncAction.ts    |   5 +-
 frontend/src/composables/useProxyCatalog.ts   |  18 +-
 .../src/composables/useStablePagedQuery.ts    |   2 +
 frontend/src/layout/components/AppSidebar.vue |   2 +-
 .../index.vue                                 |   0
 .../presenter.ts                              |   0
 frontend/src/layout/index.vue                 |   2 +-
 frontend/src/utils/client.ts                  |  12 +-
 .../utils/visualTone.ts => utils/color.ts}    |   9 +-
 frontend/src/utils/data.ts                    |  41 +-
 frontend/src/utils/format.ts                  |  48 ++-
 frontend/src/utils/location.ts                |  16 +
 .../utils/navigation.ts => utils/plugin.ts}   |   4 +-
 frontend/src/utils/providers.ts               |  11 +-
 .../components/AccountConnectionTestModal.vue |   2 +-
 .../accounts/components/AccountEditModal.vue  |   8 +-
 .../components/AccountIdentityCell.vue        |  12 +-
 .../components/AccountTableActions.vue        |  17 +-
 .../accounts/components/AccountUsagePanel.vue |   6 +-
 .../AccountImportFields.vue                   |   0
 .../AccountOAuthFields.vue                    |   0
 .../AccountProviderChooser.vue                |   2 +-
 .../AccountSetupFields.vue                    |   2 +-
 .../index.vue                                 |  12 +-
 .../presenter.ts                              |  19 +-
 .../TaskDetail.vue                            |   0
 .../index.vue                                 |   0
 .../presenter.ts                              |   0
 .../ActivityInsights.vue                      |   0
 .../Metrics.vue                               |   0
 .../ProfileHero.vue                           |  10 +-
 .../Skeleton.vue                              |   0
 .../Subscription.vue                          |   0
 .../TokenActivity.vue                         |   4 +-
 .../account-profile-modal/activity.ts}        |   0
 .../index.vue                                 |   5 +-
 .../ForecastCapacity.vue                      |   0
 .../Skeleton.vue                              |   0
 .../index.vue                                 |   4 +-
 .../Credits.vue                               |   0
 .../Entry.vue                                 |   6 +-
 .../ResetCredits.vue                          |   0
 .../UsageLimits.vue                           |   4 +-
 .../index.vue                                 |  13 +-
 .../Entry.vue                                 |   8 +-
 .../WindowGroup.vue                           |   4 +-
 .../index.vue                                 |   8 +-
 .../presenter.ts                              |   5 +-
 .../index.vue                                 |   4 +-
 .../presenter.ts                              |  14 +-
 .../account-status-badge/useStatusClock.ts}   |   2 +-
 .../composables/useAccountBatchEditor.ts      |  14 +-
 .../accounts/composables/useAccountEditor.ts  |   8 +-
 .../composables/useAccountMutations.ts        |  24 +-
 .../composables/useAccountOnboarding.ts       |  11 +-
 .../accounts/composables/useAccountsQuery.ts  |  17 +-
 .../accounts/composables/useAccountsTable.ts  |   6 +-
 frontend/src/views/accounts/constants.ts      |  21 +-
 frontend/src/views/accounts/index.vue         |  16 +-
 .../model.ts => utils/accountCreate.ts}       |  25 +-
 .../src/views/accounts/utils/accountImport.ts |   2 +-
 .../views/accounts/utils/schedulingForm.ts    |   2 +-
 .../components/AccountOverviewCard.vue        |   4 +-
 .../components/DashboardAccountIdentity.vue   |   6 +-
 .../dashboard/components/DashboardContent.vue |   4 +-
 .../views/dashboard/components/MetricCard.vue |   4 +-
 .../dashboard/components/RequestTrendCard.vue |   2 +-
 .../dashboard/components/UsageRecordCard.vue  |   6 +-
 .../dashboard/composables/useDashboard.ts     | 378 +---------------
 .../composables/useRequestTrendChart.ts       |   2 +-
 frontend/src/views/dashboard/constants.ts     |  95 +---
 frontend/src/views/dashboard/presenter.ts     | 370 ++++++++++++++++
 .../components/AccountGroupMetricsCell.vue    |   2 +-
 .../groups/composables/useAccountGroups.ts    |  30 +-
 .../key-usage/components/KeyUsageRecords.vue  |  10 +-
 .../key-usage/components/KeyUsageSummary.vue  |   2 +-
 .../key-usage/composables/useKeyUsage.ts      |   2 -
 frontend/src/views/key-usage/index.vue        |   2 +-
 frontend/src/views/key-usage/utils/format.ts  |   5 -
 frontend/src/views/key-usage/utils/metrics.ts |   6 +-
 .../views/keys/components/ApiKeyActions.vue   |  19 +-
 .../keys/components/ApiKeyCreatedModal.vue    |  62 +++
 ...KeyCreateModal.vue => ApiKeyFormModal.vue} |  99 ++---
 .../keys/components/ApiKeyIdentityCell.vue    |   6 +-
 .../views/keys/composables/useApiKeyEditor.ts | 182 ++++++++
 .../keys/composables/useApiKeyMutations.ts    | 268 +-----------
 .../views/keys/composables/useApiKeyUse.ts    |  95 ++--
 .../views/keys/composables/useApiKeysQuery.ts |  25 +-
 frontend/src/views/keys/constants.ts          |   9 +-
 frontend/src/views/keys/index.vue             |  77 ++--
 .../components/PluginCapabilityTags.vue       |   4 +-
 .../plugins/components/PluginCatalogPanel.vue |   3 +-
 .../components/PluginConfigurationFields.vue  |  18 +-
 .../components/PluginConfigurationModal.vue   |  17 +-
 .../components/PluginConfigurationSummary.vue |   3 +-
 .../plugins/components/PluginDetailModal.vue  |   5 +-
 .../components/PluginExtensionsPanel.vue      |   2 +-
 .../plugins/components/PluginInstallModal.vue |   4 +-
 .../components/PluginLegacyConfigurations.vue |   3 +-
 .../plugins/components/PluginManagement.vue   |   2 +-
 .../views/plugins/components/PluginPage.vue   |   2 +-
 .../plugins/components/PluginVersionCard.vue  |   3 +-
 .../plugins/composables/usePluginActions.ts   |  36 --
 .../composables/usePluginArtifactActions.ts   |   7 +-
 .../composables/usePluginCredentials.ts       |  28 +-
 .../composables/usePluginInstallation.ts      |  32 +-
 .../plugins/composables/usePluginInstances.ts |  32 +-
 .../composables/usePluginManagement.ts        |  25 +-
 .../plugins/composables/usePluginUninstall.ts |   5 +-
 .../composables/usePluginUpdateCheck.ts       |   5 +-
 .../plugins/composables/usePluginVersions.ts  |  15 +-
 frontend/src/views/plugins/constants.ts       |  53 +++
 .../src/views/plugins/management/frame.ts     |   2 +-
 frontend/src/views/plugins/utils/actions.ts   |  14 +
 frontend/src/views/plugins/utils/catalog.ts   |  10 -
 frontend/src/views/plugins/utils/model.ts     |  58 +--
 .../proxies/components/ProxyAccountsModal.vue |   4 +-
 .../views/proxies/composables/useProxies.ts   | 258 +++++++++++
 .../proxies/composables/useProxyAccounts.ts   |   8 +-
 frontend/src/views/proxies/constants.ts       |  12 +
 frontend/src/views/proxies/index.vue          | 266 ++----------
 .../components/backup/BackupScheduleCard.vue  |  18 +-
 .../components/backup/BackupStorageCard.vue   |  27 +-
 .../backup/SettingsBackupSection.vue          |  15 +-
 .../settings/composables/useBackupSettings.ts |  95 ++--
 .../settings/composables/useSettingsForm.ts   |  49 +--
 .../components/ThemeDashboardPreview.vue      |   2 +-
 .../views/theme/composables/useThemeEditor.ts |  14 +-
 .../views/usage/components/OpsErrorPanel.vue  |   6 +-
 .../views/usage/components/UsageCostCard.vue  |  12 +-
 .../usage/components/UsageDiagnosticCard.vue  |   6 +-
 .../usage/components/UsageHealthCard.vue      |   6 +-
 .../usage/components/UsagePerformanceCard.vue |   7 +-
 .../components/UsageRecordDetailModal.vue     |  24 +-
 .../usage/composables/useOpsErrorsTable.ts    |  21 +-
 .../usage/composables/useUsageRecordDetail.ts |   9 +-
 .../usage/composables/useUsageRecordsTable.ts |  85 ++--
 .../usage/composables/useUsageTimeRange.ts    |   2 +-
 frontend/src/views/usage/constants.ts         |  38 +-
 frontend/src/views/usage/index.vue            |   8 +-
 frontend/src/views/usage/utils/chart.ts       |  30 +-
 frontend/src/views/usage/utils/detail.ts      |  77 ++++
 frontend/src/views/usage/utils/format.ts      |  78 ----
 frontend/src/views/usage/utils/records.ts     | 404 ------------------
 167 files changed, 2196 insertions(+), 2449 deletions(-)
 rename frontend/src/{views/dashboard => }/components/AnimatedMetricValue.vue (100%)
 rename frontend/src/{views/accounts/components => components/account}/AccountPlanBadge.vue (97%)
 rename frontend/src/{views/accounts/components/AccountUsageWindow => components/account/account-usage-window}/AccountRequestTimeline.vue (88%)
 rename frontend/src/{views/accounts/components/AccountUsageWindow => components/account/account-usage-window}/index.vue (91%)
 rename frontend/src/{views/accounts/components/AccountUsageWindow => components/account/account-usage-window}/presenter.ts (98%)
 rename frontend/src/components/{SchemaForm => schema-form}/index.vue (96%)
 rename frontend/src/components/{SchemaForm => schema-form}/schema.ts (100%)
 rename frontend/src/{views/dashboard/components => components/usage}/HealthTimelinePointPopover.vue (96%)
 rename frontend/src/{views/dashboard/components => components/usage}/RequestHealthTimelineCard.vue (92%)
 rename frontend/src/{views/usage/components => components/usage}/UsageBillingCell.vue (93%)
 rename frontend/src/{views/usage/components => components/usage}/UsageClientIpCell.vue (90%)
 rename frontend/src/{views/usage/components => components/usage}/UsageDetailPopover.vue (100%)
 rename frontend/src/{views/usage/components => components/usage}/UsageLatencyCell.vue (90%)
 rename frontend/src/{views/usage/components => components/usage}/UsageModelCell.vue (88%)
 rename frontend/src/{views/usage/components => components/usage}/UsageReasoningEffortCell.vue (74%)
 rename frontend/src/{views/usage/components => components/usage}/UsageRecordsTable.vue (81%)
 rename frontend/src/{views/usage/components => components/usage}/UsageTokenCell.vue (88%)
 rename frontend/src/{views/usage/components => components/usage}/UsageTransportBadge.vue (80%)
 create mode 100644 frontend/src/components/usage/shared/columns.ts
 create mode 100644 frontend/src/components/usage/shared/health.ts
 create mode 100644 frontend/src/components/usage/shared/presenter.ts
 rename frontend/src/layout/components/{SystemUpdateModal => system-update-modal}/index.vue (100%)
 rename frontend/src/layout/components/{SystemUpdateModal => system-update-modal}/presenter.ts (100%)
 rename frontend/src/{views/accounts/utils/visualTone.ts => utils/color.ts} (75%)
 create mode 100644 frontend/src/utils/location.ts
 rename frontend/src/{views/plugins/utils/navigation.ts => utils/plugin.ts} (83%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/AccountImportFields.vue (100%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/AccountOAuthFields.vue (100%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/AccountProviderChooser.vue (94%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/AccountSetupFields.vue (95%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/index.vue (95%)
 rename frontend/src/views/accounts/components/{AccountCreateModal => account-create-modal}/presenter.ts (83%)
 rename frontend/src/views/accounts/components/{AccountImportTasks => account-import-tasks}/TaskDetail.vue (100%)
 rename frontend/src/views/accounts/components/{AccountImportTasks => account-import-tasks}/index.vue (100%)
 rename frontend/src/views/accounts/components/{AccountImportTasks => account-import-tasks}/presenter.ts (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/ActivityInsights.vue (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/Metrics.vue (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/ProfileHero.vue (91%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/Skeleton.vue (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/Subscription.vue (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/TokenActivity.vue (97%)
 rename frontend/src/views/accounts/{utils/accountProfileStatistics.ts => components/account-profile-modal/activity.ts} (100%)
 rename frontend/src/views/accounts/components/{AccountProfileModal => account-profile-modal}/index.vue (97%)
 rename frontend/src/views/accounts/components/{AccountQuotaForecastModal => account-quota-forecast-modal}/ForecastCapacity.vue (100%)
 rename frontend/src/views/accounts/components/{AccountQuotaForecastModal => account-quota-forecast-modal}/Skeleton.vue (100%)
 rename frontend/src/views/accounts/components/{AccountQuotaForecastModal => account-quota-forecast-modal}/index.vue (98%)
 rename frontend/src/views/accounts/components/{AccountQuotaPanel => account-quota-panel}/Credits.vue (100%)
 rename frontend/src/views/accounts/components/{AccountQuotaPanel => account-quota-panel}/Entry.vue (95%)
 rename frontend/src/views/accounts/components/{AccountQuotaPanel => account-quota-panel}/ResetCredits.vue (100%)
 rename frontend/src/views/accounts/components/{AccountQuotaPanel => account-quota-panel}/UsageLimits.vue (94%)
 rename frontend/src/views/accounts/components/{AccountQuotaPanel => account-quota-panel}/index.vue (93%)
 rename frontend/src/views/accounts/components/{AccountQuotaSummaryCell => account-quota-summary-cell}/Entry.vue (95%)
 rename frontend/src/views/accounts/components/{AccountQuotaSummaryCell => account-quota-summary-cell}/WindowGroup.vue (94%)
 rename frontend/src/views/accounts/components/{AccountQuotaSummaryCell => account-quota-summary-cell}/index.vue (95%)
 rename frontend/src/views/accounts/components/{AccountQuotaSummaryCell => account-quota-summary-cell}/presenter.ts (92%)
 rename frontend/src/views/accounts/components/{AccountStatusBadge => account-status-badge}/index.vue (98%)
 rename frontend/src/views/accounts/components/{AccountStatusBadge => account-status-badge}/presenter.ts (93%)
 rename frontend/src/{composables/useUiClock.ts => views/accounts/components/account-status-badge/useStatusClock.ts} (72%)
 rename frontend/src/views/accounts/{components/AccountCreateModal/model.ts => utils/accountCreate.ts} (71%)
 create mode 100644 frontend/src/views/dashboard/presenter.ts
 create mode 100644 frontend/src/views/keys/components/ApiKeyCreatedModal.vue
 rename frontend/src/views/keys/components/{ApiKeyCreateModal.vue => ApiKeyFormModal.vue} (60%)
 create mode 100644 frontend/src/views/keys/composables/useApiKeyEditor.ts
 delete mode 100644 frontend/src/views/plugins/composables/usePluginActions.ts
 create mode 100644 frontend/src/views/plugins/constants.ts
 create mode 100644 frontend/src/views/plugins/utils/actions.ts
 create mode 100644 frontend/src/views/proxies/composables/useProxies.ts
 create mode 100644 frontend/src/views/proxies/constants.ts
 delete mode 100644 frontend/src/views/usage/utils/format.ts
 delete mode 100644 frontend/src/views/usage/utils/records.ts

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
-}