Merge upstream/main

frontend/src/components/account/AccountCapacityCell.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="flex flex-col gap-1.5">
+    <!-- 并发槽位 -->
+    <div class="flex items-center gap-1.5">
+      <span
+        :class="[
+          'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium',
+          concurrencyClass
+        ]"
+      >
+        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+        </svg>
+        <span class="font-mono">{{ currentConcurrency }}</span>
+        <span class="text-gray-400 dark:text-gray-500">/</span>
+        <span class="font-mono">{{ account.concurrency }}</span>
+      </span>
+    </div>
+
+    <!-- 5h窗口费用限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
+    <div v-if="showWindowCost" class="flex items-center gap-1">
+      <span
+        :class="[
+          'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
+          windowCostClass
+        ]"
+        :title="windowCostTooltip"
+      >
+        <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span class="font-mono">${{ formatCost(currentWindowCost) }}</span>
+        <span class="text-gray-400 dark:text-gray-500">/</span>
+        <span class="font-mono">${{ formatCost(account.window_cost_limit) }}</span>
+      </span>
+    </div>
+
+    <!-- 会话数量限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
+    <div v-if="showSessionLimit" class="flex items-center gap-1">
+      <span
+        :class="[
+          'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
+          sessionLimitClass
+        ]"
+        :title="sessionLimitTooltip"
+      >
+        <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+        </svg>
+        <span class="font-mono">{{ activeSessions }}</span>
+        <span class="text-gray-400 dark:text-gray-500">/</span>
+        <span class="font-mono">{{ account.max_sessions }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Account } from '@/types'
+
+const props = defineProps<{
+  account: Account
+}>()
+
+const { t } = useI18n()
+
+// 当前并发数
+const currentConcurrency = computed(() => props.account.current_concurrency || 0)
+
+// 是否为 Anthropic OAuth/SetupToken 账号
+const isAnthropicOAuthOrSetupToken = computed(() => {
+  return (
+    props.account.platform === 'anthropic' &&
+    (props.account.type === 'oauth' || props.account.type === 'setup-token')
+  )
+})
+
+// 是否显示窗口费用限制
+const showWindowCost = computed(() => {
+  return (
+    isAnthropicOAuthOrSetupToken.value &&
+    props.account.window_cost_limit !== undefined &&
+    props.account.window_cost_limit !== null &&
+    props.account.window_cost_limit > 0
+  )
+})
+
+// 当前窗口费用
+const currentWindowCost = computed(() => props.account.current_window_cost ?? 0)
+
+// 是否显示会话限制
+const showSessionLimit = computed(() => {
+  return (
+    isAnthropicOAuthOrSetupToken.value &&
+    props.account.max_sessions !== undefined &&
+    props.account.max_sessions !== null &&
+    props.account.max_sessions > 0
+  )
+})
+
+// 当前活跃会话数
+const activeSessions = computed(() => props.account.active_sessions ?? 0)
+
+// 并发状态样式
+const concurrencyClass = computed(() => {
+  const current = currentConcurrency.value
+  const max = props.account.concurrency
+
+  if (current >= max) {
+    return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+  }
+  if (current > 0) {
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
+})
+
+// 窗口费用状态样式
+const windowCostClass = computed(() => {
+  if (!showWindowCost.value) return ''
+
+  const current = currentWindowCost.value
+  const limit = props.account.window_cost_limit || 0
+  const reserve = props.account.window_cost_sticky_reserve || 10
+
+  // >= 阈值+预留: 完全不可调度 (红色)
+  if (current >= limit + reserve) {
+    return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+  }
+  // >= 阈值: 仅粘性会话 (橙色)
+  if (current >= limit) {
+    return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+  }
+  // >= 80% 阈值: 警告 (黄色)
+  if (current >= limit * 0.8) {
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  // 正常 (绿色)
+  return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+})
+
+// 窗口费用提示文字
+const windowCostTooltip = computed(() => {
+  if (!showWindowCost.value) return ''
+
+  const current = currentWindowCost.value
+  const limit = props.account.window_cost_limit || 0
+  const reserve = props.account.window_cost_sticky_reserve || 10
+
+  if (current >= limit + reserve) {
+    return t('admin.accounts.capacity.windowCost.blocked')
+  }
+  if (current >= limit) {
+    return t('admin.accounts.capacity.windowCost.stickyOnly')
+  }
+  return t('admin.accounts.capacity.windowCost.normal')
+})
+
+// 会话限制状态样式
+const sessionLimitClass = computed(() => {
+  if (!showSessionLimit.value) return ''
+
+  const current = activeSessions.value
+  const max = props.account.max_sessions || 0
+
+  // >= 最大: 完全占满 (红色)
+  if (current >= max) {
+    return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+  }
+  // >= 80%: 警告 (黄色)
+  if (current >= max * 0.8) {
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  // 正常 (绿色)
+  return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+})
+
+// 会话限制提示文字
+const sessionLimitTooltip = computed(() => {
+  if (!showSessionLimit.value) return ''
+
+  const current = activeSessions.value
+  const max = props.account.max_sessions || 0
+  const idle = props.account.session_idle_timeout_minutes || 5
+
+  if (current >= max) {
+    return t('admin.accounts.capacity.sessions.full', { idle })
+  }
+  return t('admin.accounts.capacity.sessions.normal', { idle })
+})
+
+// 格式化费用显示
+const formatCost = (value: number | null | undefined) => {
+  if (value === null || value === undefined) return '0'
+  return value.toFixed(2)
+}
+</script>

frontend/src/components/account/AccountGroupsCell.vue

@@ -0,0 +1,158 @@
+<template>
+  <div v-if="groups && groups.length > 0" class="relative max-w-56">
+    <!-- 分组容器：固定最大宽度，最多显示2行 -->
+    <div class="flex flex-wrap gap-1 max-h-14 overflow-hidden">
+      <GroupBadge
+        v-for="group in displayGroups"
+        :key="group.id"
+        :name="group.name"
+        :platform="group.platform"
+        :subscription-type="group.subscription_type"
+        :rate-multiplier="group.rate_multiplier"
+        :show-rate="false"
+        class="max-w-24"
+      />
+      <!-- 更多数量徽章 -->
+      <button
+        v-if="hiddenCount > 0"
+        ref="moreButtonRef"
+        @click.stop="showPopover = !showPopover"
+        class="inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500 transition-colors cursor-pointer whitespace-nowrap"
+      >
+        <span>+{{ hiddenCount }}</span>
+      </button>
+    </div>
+
+    <!-- Popover 显示完整列表 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div
+          v-if="showPopover"
+          ref="popoverRef"
+          class="fixed z-50 min-w-48 max-w-96 rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-dark-600 dark:bg-dark-800"
+          :style="popoverStyle"
+        >
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {{ t('admin.accounts.allGroups', { count: groups.length }) }}
+            </span>
+            <button
+              @click="showPopover = false"
+              class="rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
+            >
+              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto">
+            <GroupBadge
+              v-for="group in groups"
+              :key="group.id"
+              :name="group.name"
+              :platform="group.platform"
+              :subscription-type="group.subscription_type"
+              :rate-multiplier="group.rate_multiplier"
+              :show-rate="false"
+            />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 点击外部关闭 popover -->
+    <div
+      v-if="showPopover"
+      class="fixed inset-0 z-40"
+      @click="showPopover = false"
+    />
+  </div>
+  <span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import GroupBadge from '@/components/common/GroupBadge.vue'
+import type { Group } from '@/types'
+
+interface Props {
+  groups: Group[] | null | undefined
+  maxDisplay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxDisplay: 4
+})
+
+const { t } = useI18n()
+
+const moreButtonRef = ref<HTMLElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
+const showPopover = ref(false)
+
+// 显示的分组（最多显示 maxDisplay 个）
+const displayGroups = computed(() => {
+  if (!props.groups) return []
+  if (props.groups.length <= props.maxDisplay) {
+    return props.groups
+  }
+  // 留一个位置给 +N 按钮
+  return props.groups.slice(0, props.maxDisplay - 1)
+})
+
+// 隐藏的数量
+const hiddenCount = computed(() => {
+  if (!props.groups) return 0
+  if (props.groups.length <= props.maxDisplay) return 0
+  return props.groups.length - (props.maxDisplay - 1)
+})
+
+// Popover 位置样式
+const popoverStyle = computed(() => {
+  if (!moreButtonRef.value) return {}
+  const rect = moreButtonRef.value.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+  const viewportWidth = window.innerWidth
+
+  let top = rect.bottom + 8
+  let left = rect.left
+
+  // 如果下方空间不足，显示在上方
+  if (top + 280 > viewportHeight) {
+    top = Math.max(8, rect.top - 280)
+  }
+
+  // 如果右侧空间不足，向左偏移
+  if (left + 384 > viewportWidth) {
+    left = Math.max(8, viewportWidth - 392)
+  }
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+})
+
+// 关闭 popover 的键盘事件
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    showPopover.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>

frontend/src/components/account/AccountStatsModal.vue

@@ -73,11 +73,12 @@
             </p>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.stats.accumulatedCost') }}
-              <span class="text-gray-400 dark:text-gray-500"
-                >({{ t('admin.accounts.stats.standardCost') }}: ${{
+              <span class="text-gray-400 dark:text-gray-500">
+                ({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.total_user_cost) }} ·
+                {{ t('admin.accounts.stats.standardCost') }}: ${{
                   formatCost(stats.summary.total_standard_cost)
-                }})</span
-              >
+                }})
+              </span>
             </p>
           </div>
 
@@ -121,12 +122,15 @@
             <p class="text-2xl font-bold text-gray-900 dark:text-white">
               ${{ formatCost(stats.summary.avg_daily_cost) }}
             </p>
-            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{
                 t('admin.accounts.stats.basedOnActualDays', {
                   days: stats.summary.actual_days_used
                 })
               }}
+              <span class="text-gray-400 dark:text-gray-500">
+                ({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.avg_daily_user_cost) }})
+              </span>
             </p>
           </div>
 
@@ -189,13 +193,17 @@
             </div>
             <div class="space-y-2">
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-gray-900 dark:text-white"
                   >${{ formatCost(stats.summary.today?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
+                >
+              </div>
               <div class="flex items-center justify-between">
                 <span class="text-xs text-gray-500 dark:text-gray-400">{{
                   t('admin.accounts.stats.requests')
@@ -240,13 +248,17 @@
                 }}</span>
               </div>
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-orange-600 dark:text-orange-400"
                   >${{ formatCost(stats.summary.highest_cost_day?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.highest_cost_day?.user_cost || 0) }}</span
+                >
+              </div>
               <div class="flex items-center justify-between">
                 <span class="text-xs text-gray-500 dark:text-gray-400">{{
                   t('admin.accounts.stats.requests')
@@ -291,13 +303,17 @@
                 }}</span>
               </div>
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-gray-900 dark:text-white"
                   >${{ formatCost(stats.summary.highest_request_day?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.highest_request_day?.user_cost || 0) }}</span
+                >
+              </div>
             </div>
           </div>
         </div>
@@ -397,13 +413,17 @@
                 }}</span>
               </div>
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.todayCost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-gray-900 dark:text-white"
                   >${{ formatCost(stats.summary.today?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
+                >
+              </div>
             </div>
           </div>
         </div>
@@ -517,14 +537,24 @@ const trendChartData = computed(() => {
     labels: stats.value.history.map((h) => h.label),
     datasets: [
       {
-        label: t('admin.accounts.stats.cost') + ' (USD)',
-        data: stats.value.history.map((h) => h.cost),
+        label: t('usage.accountBilled') + ' (USD)',
+        data: stats.value.history.map((h) => h.actual_cost),
         borderColor: '#3b82f6',
         backgroundColor: 'rgba(59, 130, 246, 0.1)',
         fill: true,
         tension: 0.3,
         yAxisID: 'y'
       },
+      {
+        label: t('usage.userBilled') + ' (USD)',
+        data: stats.value.history.map((h) => h.user_cost),
+        borderColor: '#10b981',
+        backgroundColor: 'rgba(16, 185, 129, 0.08)',
+        fill: false,
+        tension: 0.3,
+        borderDash: [5, 5],
+        yAxisID: 'y'
+      },
       {
         label: t('admin.accounts.stats.requests'),
         data: stats.value.history.map((h) => h.requests),
@@ -602,7 +632,7 @@ const lineChartOptions = computed(() => ({
       },
       title: {
         display: true,
-        text: t('admin.accounts.stats.cost') + ' (USD)',
+        text: t('usage.accountBilled') + ' (USD)',
         color: '#3b82f6',
         font: {
           size: 11

frontend/src/components/account/AccountTodayStatsCell.vue

@@ -32,15 +32,20 @@
           formatTokens(stats.tokens)
         }}</span>
       </div>
-      <!-- Cost -->
+      <!-- Cost (Account) -->
       <div class="flex items-center gap-1">
-        <span class="text-gray-500 dark:text-gray-400"
-          >{{ t('admin.accounts.stats.cost') }}:</span
-        >
+        <span class="text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}:</span>
         <span class="font-medium text-emerald-600 dark:text-emerald-400">{{
           formatCurrency(stats.cost)
         }}</span>
       </div>
+      <!-- Cost (User/API Key) -->
+      <div v-if="stats.user_cost != null" class="flex items-center gap-1">
+        <span class="text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}:</span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">{{
+          formatCurrency(stats.user_cost)
+        }}</span>
+      </div>
     </div>
 
     <!-- No data -->

frontend/src/components/account/BulkEditAccountModal.vue

@@ -459,7 +459,7 @@
       </div>
 
       <!-- Concurrency & Priority -->
-      <div class="grid grid-cols-2 gap-4 border-t border-gray-200 pt-4 dark:border-dark-600">
+      <div class="grid grid-cols-2 gap-4 border-t border-gray-200 pt-4 dark:border-dark-600 lg:grid-cols-3">
         <div>
           <div class="mb-3 flex items-center justify-between">
             <label
@@ -516,6 +516,36 @@
             aria-labelledby="bulk-edit-priority-label"
           />
         </div>
+        <div>
+          <div class="mb-3 flex items-center justify-between">
+            <label
+              id="bulk-edit-rate-multiplier-label"
+              class="input-label mb-0"
+              for="bulk-edit-rate-multiplier-enabled"
+            >
+              {{ t('admin.accounts.billingRateMultiplier') }}
+            </label>
+            <input
+              v-model="enableRateMultiplier"
+              id="bulk-edit-rate-multiplier-enabled"
+              type="checkbox"
+              aria-controls="bulk-edit-rate-multiplier"
+              class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+            />
+          </div>
+          <input
+            v-model.number="rateMultiplier"
+            id="bulk-edit-rate-multiplier"
+            type="number"
+            min="0"
+            step="0.01"
+            :disabled="!enableRateMultiplier"
+            class="input"
+            :class="!enableRateMultiplier && 'cursor-not-allowed opacity-50'"
+            aria-labelledby="bulk-edit-rate-multiplier-label"
+          />
+          <p class="input-hint">{{ t('admin.accounts.billingRateMultiplierHint') }}</p>
+        </div>
       </div>
 
       <!-- Status -->
@@ -655,6 +685,7 @@ const enableInterceptWarmup = ref(false)
 const enableProxy = ref(false)
 const enableConcurrency = ref(false)
 const enablePriority = ref(false)
+const enableRateMultiplier = ref(false)
 const enableStatus = ref(false)
 const enableGroups = ref(false)
 
@@ -670,6 +701,7 @@ const interceptWarmupRequests = ref(false)
 const proxyId = ref<number | null>(null)
 const concurrency = ref(1)
 const priority = ref(1)
+const rateMultiplier = ref(1)
 const status = ref<'active' | 'inactive'>('active')
 const groupIds = ref<number[]>([])
 
@@ -778,6 +810,16 @@ const addPresetMapping = (from: string, to: string) => {
 const toggleErrorCode = (code: number) => {
   const index = selectedErrorCodes.value.indexOf(code)
   if (index === -1) {
+    // Adding code - check for 429/529 warning
+    if (code === 429) {
+      if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+        return
+      }
+    } else if (code === 529) {
+      if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+        return
+      }
+    }
     selectedErrorCodes.value.push(code)
   } else {
     selectedErrorCodes.value.splice(index, 1)
@@ -794,6 +836,16 @@ const addCustomErrorCode = () => {
     appStore.showInfo(t('admin.accounts.errorCodeExists'))
     return
   }
+  // Check for 429/529 warning
+  if (code === 429) {
+    if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+      return
+    }
+  } else if (code === 529) {
+    if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+      return
+    }
+  }
   selectedErrorCodes.value.push(code)
   customErrorCodeInput.value = null
 }
@@ -843,6 +895,10 @@ const buildUpdatePayload = (): Record<string, unknown> | null => {
     updates.priority = priority.value
   }
 
+  if (enableRateMultiplier.value) {
+    updates.rate_multiplier = rateMultiplier.value
+  }
+
   if (enableStatus.value) {
     updates.status = status.value
   }
@@ -903,6 +959,7 @@ const handleSubmit = async () => {
     enableProxy.value ||
     enableConcurrency.value ||
     enablePriority.value ||
+    enableRateMultiplier.value ||
     enableStatus.value ||
     enableGroups.value
 
@@ -957,6 +1014,7 @@ watch(
       enableProxy.value = false
       enableConcurrency.value = false
       enablePriority.value = false
+      enableRateMultiplier.value = false
       enableStatus.value = false
       enableGroups.value = false
 
@@ -971,6 +1029,7 @@ watch(
       proxyId.value = null
       concurrency.value = 1
       priority.value = 1
+      rateMultiplier.value = 1
       status.value = 'active'
       groupIds.value = []
     }

frontend/src/components/account/CreateAccountModal.vue

@@ -1196,7 +1196,7 @@
         <ProxySelector v-model="form.proxy_id" :proxies="proxies" />
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 lg:grid-cols-3">
         <div>
           <label class="input-label">{{ t('admin.accounts.concurrency') }}</label>
           <input v-model.number="form.concurrency" type="number" min="1" class="input" />
@@ -1212,6 +1212,11 @@
           />
           <p class="input-hint">{{ t('admin.accounts.priorityHint') }}</p>
         </div>
+        <div>
+          <label class="input-label">{{ t('admin.accounts.billingRateMultiplier') }}</label>
+          <input v-model.number="form.rate_multiplier" type="number" min="0" step="0.01" class="input" />
+          <p class="input-hint">{{ t('admin.accounts.billingRateMultiplierHint') }}</p>
+        </div>
       </div>
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <label class="input-label">{{ t('admin.accounts.expiresAt') }}</label>
@@ -1832,6 +1837,7 @@ const form = reactive({
   proxy_id: null as number | null,
   concurrency: 10,
   priority: 1,
+  rate_multiplier: 1,
   group_ids: [] as number[],
   expires_at: null as number | null
 })
@@ -1976,6 +1982,16 @@ const addPresetMapping = (from: string, to: string) => {
 const toggleErrorCode = (code: number) => {
   const index = selectedErrorCodes.value.indexOf(code)
   if (index === -1) {
+    // Adding code - check for 429/529 warning
+    if (code === 429) {
+      if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+        return
+      }
+    } else if (code === 529) {
+      if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+        return
+      }
+    }
     selectedErrorCodes.value.push(code)
   } else {
     selectedErrorCodes.value.splice(index, 1)
@@ -1993,6 +2009,16 @@ const addCustomErrorCode = () => {
     appStore.showInfo(t('admin.accounts.errorCodeExists'))
     return
   }
+  // Check for 429/529 warning
+  if (code === 429) {
+    if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+      return
+    }
+  } else if (code === 529) {
+    if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+      return
+    }
+  }
   selectedErrorCodes.value.push(code)
   customErrorCodeInput.value = null
 }
@@ -2099,6 +2125,7 @@ const resetForm = () => {
   form.proxy_id = null
   form.concurrency = 10
   form.priority = 1
+  form.rate_multiplier = 1
   form.group_ids = []
   form.expires_at = null
   accountCategory.value = 'oauth-based'
@@ -2252,6 +2279,7 @@ const createAccountAndFinish = async (
     proxy_id: form.proxy_id,
     concurrency: form.concurrency,
     priority: form.priority,
+    rate_multiplier: form.rate_multiplier,
     group_ids: form.group_ids,
     expires_at: form.expires_at,
     auto_pause_on_expired: autoPauseOnExpired.value
@@ -2462,6 +2490,7 @@ const handleCookieAuth = async (sessionKey: string) => {
 
         await adminAPI.accounts.create({
           name: accountName,
+          notes: form.notes,
           platform: form.platform,
           type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
           credentials,
@@ -2469,6 +2498,9 @@ const handleCookieAuth = async (sessionKey: string) => {
           proxy_id: form.proxy_id,
           concurrency: form.concurrency,
           priority: form.priority,
+          rate_multiplier: form.rate_multiplier,
+          group_ids: form.group_ids,
+          expires_at: form.expires_at,
           auto_pause_on_expired: autoPauseOnExpired.value
         })
 

frontend/src/components/account/EditAccountModal.vue

@@ -549,7 +549,7 @@
         <ProxySelector v-model="form.proxy_id" :proxies="proxies" />
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 lg:grid-cols-3">
         <div>
           <label class="input-label">{{ t('admin.accounts.concurrency') }}</label>
           <input v-model.number="form.concurrency" type="number" min="1" class="input" />
@@ -564,6 +564,11 @@
             data-tour="account-form-priority"
           />
         </div>
+        <div>
+          <label class="input-label">{{ t('admin.accounts.billingRateMultiplier') }}</label>
+          <input v-model.number="form.rate_multiplier" type="number" min="0" step="0.01" class="input" />
+          <p class="input-hint">{{ t('admin.accounts.billingRateMultiplierHint') }}</p>
+        </div>
       </div>
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <label class="input-label">{{ t('admin.accounts.expiresAt') }}</label>
@@ -599,6 +604,136 @@
         </div>
       </div>
 
+      <!-- Quota Control Section (Anthropic OAuth/SetupToken only) -->
+      <div
+        v-if="account?.platform === 'anthropic' && (account?.type === 'oauth' || account?.type === 'setup-token')"
+        class="border-t border-gray-200 pt-4 dark:border-dark-600 space-y-4"
+      >
+        <div class="mb-3">
+          <h3 class="input-label mb-0 text-base font-semibold">{{ t('admin.accounts.quotaControl.title') }}</h3>
+          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {{ t('admin.accounts.quotaControl.hint') }}
+          </p>
+        </div>
+
+        <!-- Window Cost Limit -->
+        <div class="rounded-lg border border-gray-200 p-4 dark:border-dark-600">
+          <div class="mb-3 flex items-center justify-between">
+            <div>
+              <label class="input-label mb-0">{{ t('admin.accounts.quotaControl.windowCost.label') }}</label>
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.accounts.quotaControl.windowCost.hint') }}
+              </p>
+            </div>
+            <button
+              type="button"
+              @click="windowCostEnabled = !windowCostEnabled"
+              :class="[
+                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+                windowCostEnabled ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+              ]"
+            >
+              <span
+                :class="[
+                  'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                  windowCostEnabled ? 'translate-x-5' : 'translate-x-0'
+                ]"
+              />
+            </button>
+          </div>
+
+          <div v-if="windowCostEnabled" class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="input-label">{{ t('admin.accounts.quotaControl.windowCost.limit') }}</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
+                <input
+                  v-model.number="windowCostLimit"
+                  type="number"
+                  min="0"
+                  step="1"
+                  class="input pl-7"
+                  :placeholder="t('admin.accounts.quotaControl.windowCost.limitPlaceholder')"
+                />
+              </div>
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.windowCost.limitHint') }}</p>
+            </div>
+            <div>
+              <label class="input-label">{{ t('admin.accounts.quotaControl.windowCost.stickyReserve') }}</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
+                <input
+                  v-model.number="windowCostStickyReserve"
+                  type="number"
+                  min="0"
+                  step="1"
+                  class="input pl-7"
+                  :placeholder="t('admin.accounts.quotaControl.windowCost.stickyReservePlaceholder')"
+                />
+              </div>
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.windowCost.stickyReserveHint') }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Session Limit -->
+        <div class="rounded-lg border border-gray-200 p-4 dark:border-dark-600">
+          <div class="mb-3 flex items-center justify-between">
+            <div>
+              <label class="input-label mb-0">{{ t('admin.accounts.quotaControl.sessionLimit.label') }}</label>
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.accounts.quotaControl.sessionLimit.hint') }}
+              </p>
+            </div>
+            <button
+              type="button"
+              @click="sessionLimitEnabled = !sessionLimitEnabled"
+              :class="[
+                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+                sessionLimitEnabled ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+              ]"
+            >
+              <span
+                :class="[
+                  'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                  sessionLimitEnabled ? 'translate-x-5' : 'translate-x-0'
+                ]"
+              />
+            </button>
+          </div>
+
+          <div v-if="sessionLimitEnabled" class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="input-label">{{ t('admin.accounts.quotaControl.sessionLimit.maxSessions') }}</label>
+              <input
+                v-model.number="maxSessions"
+                type="number"
+                min="1"
+                step="1"
+                class="input"
+                :placeholder="t('admin.accounts.quotaControl.sessionLimit.maxSessionsPlaceholder')"
+              />
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.sessionLimit.maxSessionsHint') }}</p>
+            </div>
+            <div>
+              <label class="input-label">{{ t('admin.accounts.quotaControl.sessionLimit.idleTimeout') }}</label>
+              <div class="relative">
+                <input
+                  v-model.number="sessionIdleTimeout"
+                  type="number"
+                  min="1"
+                  step="1"
+                  class="input pr-12"
+                  :placeholder="t('admin.accounts.quotaControl.sessionLimit.idleTimeoutPlaceholder')"
+                />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">{{ t('common.minutes') }}</span>
+              </div>
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.sessionLimit.idleTimeoutHint') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div>
           <label class="input-label">{{ t('common.status') }}</label>
@@ -762,6 +897,14 @@ const mixedScheduling = ref(false) // For antigravity accounts: enable mixed sch
 const tempUnschedEnabled = ref(false)
 const tempUnschedRules = ref<TempUnschedRuleForm[]>([])
 
+// Quota control state (Anthropic OAuth/SetupToken only)
+const windowCostEnabled = ref(false)
+const windowCostLimit = ref<number | null>(null)
+const windowCostStickyReserve = ref<number | null>(null)
+const sessionLimitEnabled = ref(false)
+const maxSessions = ref<number | null>(null)
+const sessionIdleTimeout = ref<number | null>(null)
+
 // Computed: current preset mappings based on platform
 const presetMappings = computed(() => getPresetMappingsByPlatform(props.account?.platform || 'anthropic'))
 const tempUnschedPresets = computed(() => [
@@ -807,6 +950,7 @@ const form = reactive({
   proxy_id: null as number | null,
   concurrency: 1,
   priority: 1,
+  rate_multiplier: 1,
   status: 'active' as 'active' | 'inactive',
   group_ids: [] as number[],
   expires_at: null as number | null
@@ -834,6 +978,7 @@ watch(
       form.proxy_id = newAccount.proxy_id
       form.concurrency = newAccount.concurrency
       form.priority = newAccount.priority
+      form.rate_multiplier = newAccount.rate_multiplier ?? 1
       form.status = newAccount.status as 'active' | 'inactive'
       form.group_ids = newAccount.group_ids || []
       form.expires_at = newAccount.expires_at ?? null
@@ -847,6 +992,9 @@ watch(
       const extra = newAccount.extra as Record<string, unknown> | undefined
       mixedScheduling.value = extra?.mixed_scheduling === true
 
+      // Load quota control settings (Anthropic OAuth/SetupToken only)
+      loadQuotaControlSettings(newAccount)
+
       loadTempUnschedRules(credentials)
 
       // Initialize API Key fields for apikey type
@@ -936,6 +1084,16 @@ const addPresetMapping = (from: string, to: string) => {
 const toggleErrorCode = (code: number) => {
   const index = selectedErrorCodes.value.indexOf(code)
   if (index === -1) {
+    // Adding code - check for 429/529 warning
+    if (code === 429) {
+      if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+        return
+      }
+    } else if (code === 529) {
+      if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+        return
+      }
+    }
     selectedErrorCodes.value.push(code)
   } else {
     selectedErrorCodes.value.splice(index, 1)
@@ -953,6 +1111,16 @@ const addCustomErrorCode = () => {
     appStore.showInfo(t('admin.accounts.errorCodeExists'))
     return
   }
+  // Check for 429/529 warning
+  if (code === 429) {
+    if (!confirm(t('admin.accounts.customErrorCodes429Warning'))) {
+      return
+    }
+  } else if (code === 529) {
+    if (!confirm(t('admin.accounts.customErrorCodes529Warning'))) {
+      return
+    }
+  }
   selectedErrorCodes.value.push(code)
   customErrorCodeInput.value = null
 }
@@ -1060,6 +1228,35 @@ function loadTempUnschedRules(credentials?: Record<string, unknown>) {
   })
 }
 
+// Load quota control settings from account (Anthropic OAuth/SetupToken only)
+function loadQuotaControlSettings(account: Account) {
+  // Reset all quota control state first
+  windowCostEnabled.value = false
+  windowCostLimit.value = null
+  windowCostStickyReserve.value = null
+  sessionLimitEnabled.value = false
+  maxSessions.value = null
+  sessionIdleTimeout.value = null
+
+  // Only applies to Anthropic OAuth/SetupToken accounts
+  if (account.platform !== 'anthropic' || (account.type !== 'oauth' && account.type !== 'setup-token')) {
+    return
+  }
+
+  // Load from extra field (via backend DTO fields)
+  if (account.window_cost_limit != null && account.window_cost_limit > 0) {
+    windowCostEnabled.value = true
+    windowCostLimit.value = account.window_cost_limit
+    windowCostStickyReserve.value = account.window_cost_sticky_reserve ?? 10
+  }
+
+  if (account.max_sessions != null && account.max_sessions > 0) {
+    sessionLimitEnabled.value = true
+    maxSessions.value = account.max_sessions
+    sessionIdleTimeout.value = account.session_idle_timeout_minutes ?? 5
+  }
+}
+
 function formatTempUnschedKeywords(value: unknown) {
   if (Array.isArray(value)) {
     return value
@@ -1187,6 +1384,32 @@ const handleSubmit = async () => {
       updatePayload.extra = newExtra
     }
 
+    // For Anthropic OAuth/SetupToken accounts, handle quota control settings in extra
+    if (props.account.platform === 'anthropic' && (props.account.type === 'oauth' || props.account.type === 'setup-token')) {
+      const currentExtra = (props.account.extra as Record<string, unknown>) || {}
+      const newExtra: Record<string, unknown> = { ...currentExtra }
+
+      // Window cost limit settings
+      if (windowCostEnabled.value && windowCostLimit.value != null && windowCostLimit.value > 0) {
+        newExtra.window_cost_limit = windowCostLimit.value
+        newExtra.window_cost_sticky_reserve = windowCostStickyReserve.value ?? 10
+      } else {
+        delete newExtra.window_cost_limit
+        delete newExtra.window_cost_sticky_reserve
+      }
+
+      // Session limit settings
+      if (sessionLimitEnabled.value && maxSessions.value != null && maxSessions.value > 0) {
+        newExtra.max_sessions = maxSessions.value
+        newExtra.session_idle_timeout_minutes = sessionIdleTimeout.value ?? 5
+      } else {
+        delete newExtra.max_sessions
+        delete newExtra.session_idle_timeout_minutes
+      }
+
+      updatePayload.extra = newExtra
+    }
+
     await adminAPI.accounts.update(props.account.id, updatePayload)
     appStore.showSuccess(t('admin.accounts.accountUpdated'))
     emit('updated')

frontend/src/components/account/UsageProgressBar.vue

@@ -15,7 +15,13 @@
         <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
           {{ formatTokens }}
         </span>
-        <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800"> ${{ formatCost }} </span>
+        <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800"> A ${{ formatAccountCost }} </span>
+        <span
+          v-if="windowStats?.user_cost != null"
+          class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800"
+        >
+          U ${{ formatUserCost }}
+        </span>
       </div>
     </div>
 
@@ -149,8 +155,13 @@ const formatTokens = computed(() => {
   return t.toString()
 })
 
-const formatCost = computed(() => {
+const formatAccountCost = computed(() => {
   if (!props.windowStats) return '0.00'
   return props.windowStats.cost.toFixed(2)
 })
+
+const formatUserCost = computed(() => {
+  if (!props.windowStats || props.windowStats.user_cost == null) return '0.00'
+  return props.windowStats.user_cost.toFixed(2)
+})
 </script>

frontend/src/components/admin/account/AccountStatsModal.vue

@@ -61,11 +61,12 @@
             </p>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.stats.accumulatedCost') }}
-              <span class="text-gray-400 dark:text-gray-500"
-                >({{ t('admin.accounts.stats.standardCost') }}: ${{
+              <span class="text-gray-400 dark:text-gray-500">
+                ({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.total_user_cost) }} ·
+                {{ t('admin.accounts.stats.standardCost') }}: ${{
                   formatCost(stats.summary.total_standard_cost)
-                }})</span
-              >
+                }})
+              </span>
             </p>
           </div>
 
@@ -108,12 +109,15 @@
             <p class="text-2xl font-bold text-gray-900 dark:text-white">
               ${{ formatCost(stats.summary.avg_daily_cost) }}
             </p>
-            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{
                 t('admin.accounts.stats.basedOnActualDays', {
                   days: stats.summary.actual_days_used
                 })
               }}
+              <span class="text-gray-400 dark:text-gray-500">
+                ({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.avg_daily_user_cost) }})
+              </span>
             </p>
           </div>
 
@@ -164,13 +168,17 @@
             </div>
             <div class="space-y-2">
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-gray-900 dark:text-white"
                   >${{ formatCost(stats.summary.today?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
+                >
+              </div>
               <div class="flex items-center justify-between">
                 <span class="text-xs text-gray-500 dark:text-gray-400">{{
                   t('admin.accounts.stats.requests')
@@ -210,13 +218,17 @@
                 }}</span>
               </div>
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-orange-600 dark:text-orange-400"
                   >${{ formatCost(stats.summary.highest_cost_day?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.highest_cost_day?.user_cost || 0) }}</span
+                >
+              </div>
               <div class="flex items-center justify-between">
                 <span class="text-xs text-gray-500 dark:text-gray-400">{{
                   t('admin.accounts.stats.requests')
@@ -260,13 +272,17 @@
                 }}</span>
               </div>
               <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{
-                  t('admin.accounts.stats.cost')
-                }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
                 <span class="text-sm font-semibold text-gray-900 dark:text-white"
                   >${{ formatCost(stats.summary.highest_request_day?.cost || 0) }}</span
                 >
               </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white"
+                  >${{ formatCost(stats.summary.highest_request_day?.user_cost || 0) }}</span
+                >
+              </div>
             </div>
           </div>
         </div>
@@ -485,14 +501,24 @@ const trendChartData = computed(() => {
     labels: stats.value.history.map((h) => h.label),
     datasets: [
       {
-        label: t('admin.accounts.stats.cost') + ' (USD)',
-        data: stats.value.history.map((h) => h.cost),
+        label: t('usage.accountBilled') + ' (USD)',
+        data: stats.value.history.map((h) => h.actual_cost),
         borderColor: '#3b82f6',
         backgroundColor: 'rgba(59, 130, 246, 0.1)',
         fill: true,
         tension: 0.3,
         yAxisID: 'y'
       },
+      {
+        label: t('usage.userBilled') + ' (USD)',
+        data: stats.value.history.map((h) => h.user_cost),
+        borderColor: '#10b981',
+        backgroundColor: 'rgba(16, 185, 129, 0.08)',
+        fill: false,
+        tension: 0.3,
+        borderDash: [5, 5],
+        yAxisID: 'y'
+      },
       {
         label: t('admin.accounts.stats.requests'),
         data: stats.value.history.map((h) => h.requests),
@@ -570,7 +596,7 @@ const lineChartOptions = computed(() => ({
       },
       title: {
         display: true,
-        text: t('admin.accounts.stats.cost') + ' (USD)',
+        text: t('usage.accountBilled') + ' (USD)',
         color: '#3b82f6',
         font: {
           size: 11

frontend/src/components/admin/usage/UsageFilters.vue

@@ -127,12 +127,6 @@
           <Select v-model="filters.stream" :options="streamTypeOptions" @change="emitChange" />
         </div>
 
-        <!-- Billing Type Filter -->
-        <div class="w-full sm:w-auto sm:min-w-[180px]">
-          <label class="input-label">{{ t('usage.billingType') }}</label>
-          <Select v-model="filters.billing_type" :options="billingTypeOptions" @change="emitChange" />
-        </div>
-
         <!-- Group Filter -->
         <div class="w-full sm:w-auto sm:min-w-[200px]">
           <label class="input-label">{{ t('admin.usage.group') }}</label>
@@ -227,12 +221,6 @@ const streamTypeOptions = ref<SelectOption[]>([
   { value: false, label: t('usage.sync') }
 ])
 
-const billingTypeOptions = ref<SelectOption[]>([
-  { value: null, label: t('admin.usage.allBillingTypes') },
-  { value: 1, label: t('usage.subscription') },
-  { value: 0, label: t('usage.balance') }
-])
-
 const emitChange = () => emit('change')
 
 const updateStartDate = (value: string) => {

frontend/src/components/admin/usage/UsageStatsCards.vue

@@ -27,9 +27,18 @@
       </div>
       <div class="min-w-0 flex-1">
         <p class="text-xs font-medium text-gray-500">{{ t('usage.totalCost') }}</p>
-        <p class="text-xl font-bold text-green-600">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</p>
-        <p class="text-xs text-gray-400">
-          {{ t('usage.standardCost') }}: <span class="line-through">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
+        <p class="text-xl font-bold text-green-600">
+          ${{ ((stats?.total_account_cost ?? stats?.total_actual_cost) || 0).toFixed(4) }}
+        </p>
+        <p class="text-xs text-gray-400" v-if="stats?.total_account_cost != null">
+          {{ t('usage.userBilled') }}:
+          <span class="text-gray-300">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</span>
+          · {{ t('usage.standardCost') }}:
+          <span class="text-gray-300">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
+        </p>
+        <p class="text-xs text-gray-400" v-else>
+          {{ t('usage.standardCost') }}:
+          <span class="line-through">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
         </p>
       </div>
     </div>

frontend/src/components/admin/usage/UsageTable.vue

@@ -81,27 +81,26 @@
         </template>
 
         <template #cell-cost="{ row }">
-          <div class="flex items-center gap-1.5 text-sm">
-            <span class="font-medium text-green-600 dark:text-green-400">${{ row.actual_cost?.toFixed(6) || '0.000000' }}</span>
-            <!-- Cost Detail Tooltip -->
-            <div
-              class="group relative"
-              @mouseenter="showTooltip($event, row)"
-              @mouseleave="hideTooltip"
-            >
-              <div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
-                <Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
+          <div class="text-sm">
+            <div class="flex items-center gap-1.5">
+              <span class="font-medium text-green-600 dark:text-green-400">${{ row.actual_cost?.toFixed(6) || '0.000000' }}</span>
+              <!-- Cost Detail Tooltip -->
+              <div
+                class="group relative"
+                @mouseenter="showTooltip($event, row)"
+                @mouseleave="hideTooltip"
+              >
+                <div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
+                  <Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
+                </div>
               </div>
             </div>
+            <div v-if="row.account_rate_multiplier != null" class="mt-0.5 text-[11px] text-gray-400">
+              A ${{ (row.total_cost * row.account_rate_multiplier).toFixed(6) }}
+            </div>
           </div>
         </template>
 
-        <template #cell-billing_type="{ row }">
-          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="row.billing_type === 1 ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'">
-            {{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
-          </span>
-        </template>
-
         <template #cell-first_token="{ row }">
           <span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.first_token_ms) }}</span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
@@ -120,6 +119,11 @@
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
         </template>
 
+        <template #cell-ip_address="{ row }">
+          <span v-if="row.ip_address" class="text-sm font-mono text-gray-600 dark:text-gray-400">{{ row.ip_address }}</span>
+          <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
+        </template>
+
         <template #empty><EmptyState :message="t('usage.noRecords')" /></template>
       </DataTable>
     </div>
@@ -203,14 +207,24 @@
             <span class="text-gray-400">{{ t('usage.rate') }}</span>
             <span class="font-semibold text-blue-400">{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span>
           </div>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.accountMultiplier') }}</span>
+            <span class="font-semibold text-blue-400">{{ (tooltipData?.account_rate_multiplier ?? 1).toFixed(2) }}x</span>
+          </div>
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.original') }}</span>
             <span class="font-medium text-white">${{ tooltipData?.total_cost?.toFixed(6) || '0.000000' }}</span>
           </div>
-          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
-            <span class="text-gray-400">{{ t('usage.billed') }}</span>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.userBilled') }}</span>
             <span class="font-semibold text-green-400">${{ tooltipData?.actual_cost?.toFixed(6) || '0.000000' }}</span>
           </div>
+          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
+            <span class="text-gray-400">{{ t('usage.accountBilled') }}</span>
+            <span class="font-semibold text-green-400">
+              ${{ (((tooltipData?.total_cost || 0) * (tooltipData?.account_rate_multiplier ?? 1)) || 0).toFixed(6) }}
+            </span>
+          </div>
         </div>
         <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
       </div>
@@ -249,11 +263,11 @@ const cols = computed(() => [
   { key: 'stream', label: t('usage.type'), sortable: false },
   { key: 'tokens', label: t('usage.tokens'), sortable: false },
   { key: 'cost', label: t('usage.cost'), sortable: false },
-  { key: 'billing_type', label: t('usage.billingType'), sortable: false },
   { key: 'first_token', label: t('usage.firstToken'), sortable: false },
   { key: 'duration', label: t('usage.duration'), sortable: false },
   { key: 'created_at', label: t('usage.time'), sortable: true },
-  { key: 'user_agent', label: t('usage.userAgent'), sortable: false }
+  { key: 'user_agent', label: t('usage.userAgent'), sortable: false },
+  { key: 'ip_address', label: t('admin.usage.ipAddress'), sortable: false }
 ])
 
 const formatCacheTokens = (tokens: number): string => {

frontend/src/components/admin/user/UserBalanceModal.vue

@@ -3,14 +3,17 @@
     <form v-if="user" id="balance-form" @submit.prevent="handleBalanceSubmit" class="space-y-5">
       <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
         <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100"><span class="text-lg font-medium text-primary-700">{{ user.email.charAt(0).toUpperCase() }}</span></div>
-        <div class="flex-1"><p class="font-medium text-gray-900">{{ user.email }}</p><p class="text-sm text-gray-500">{{ t('admin.users.currentBalance') }}: ${{ user.balance.toFixed(2) }}</p></div>
+        <div class="flex-1"><p class="font-medium text-gray-900">{{ user.email }}</p><p class="text-sm text-gray-500">{{ t('admin.users.currentBalance') }}: ${{ formatBalance(user.balance) }}</p></div>
       </div>
       <div>
         <label class="input-label">{{ operation === 'add' ? t('admin.users.depositAmount') : t('admin.users.withdrawAmount') }}</label>
-        <div class="relative"><div class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500">$</div><input v-model.number="form.amount" type="number" step="0.01" min="0.01" required class="input pl-8" /></div>
+        <div class="relative flex gap-2">
+          <div class="relative flex-1"><div class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500">$</div><input v-model.number="form.amount" type="number" step="any" min="0" required class="input pl-8" /></div>
+          <button v-if="operation === 'subtract'" type="button" @click="fillAllBalance" class="btn btn-secondary whitespace-nowrap">{{ t('admin.users.withdrawAll') }}</button>
+        </div>
       </div>
       <div><label class="input-label">{{ t('admin.users.notes') }}</label><textarea v-model="form.notes" rows="3" class="input"></textarea></div>
-      <div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4"><div class="flex items-center justify-between text-sm"><span>{{ t('admin.users.newBalance') }}:</span><span class="font-bold">${{ calculateNewBalance().toFixed(2) }}</span></div></div>
+      <div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4"><div class="flex items-center justify-between text-sm"><span>{{ t('admin.users.newBalance') }}:</span><span class="font-bold">${{ formatBalance(calculateNewBalance()) }}</span></div></div>
     </form>
     <template #footer>
       <div class="flex justify-end gap-3">
@@ -35,13 +38,38 @@ const emit = defineEmits(['close', 'success']); const { t } = useI18n(); const a
 const submitting = ref(false); const form = reactive({ amount: 0, notes: '' })
 watch(() => props.show, (v) => { if(v) { form.amount = 0; form.notes = '' } })
 
-const calculateNewBalance = () => (props.user ? (props.operation === 'add' ? props.user.balance + form.amount : props.user.balance - form.amount) : 0)
+// 格式化余额：显示完整精度，去除尾部多余的0
+const formatBalance = (value: number) => {
+  if (value === 0) return '0.00'
+  // 最多保留8位小数，去除尾部的0
+  const formatted = value.toFixed(8).replace(/\.?0+$/, '')
+  // 确保至少有2位小数
+  const parts = formatted.split('.')
+  if (parts.length === 1) return formatted + '.00'
+  if (parts[1].length === 1) return formatted + '0'
+  return formatted
+}
+
+// 填入全部余额
+const fillAllBalance = () => {
+  if (props.user) {
+    form.amount = props.user.balance
+  }
+}
+
+const calculateNewBalance = () => {
+  if (!props.user) return 0
+  const result = props.operation === 'add' ? props.user.balance + form.amount : props.user.balance - form.amount
+  // 避免浮点数精度问题导致的 -0.00 显示
+  return Math.abs(result) < 1e-10 ? 0 : result
+}
 const handleBalanceSubmit = async () => {
   if (!props.user) return
   if (!form.amount || form.amount <= 0) {
     appStore.showError(t('admin.users.amountRequired'))
     return
   }
+  // 退款时验证金额不超过实际余额
   if (props.operation === 'subtract' && form.amount > props.user.balance) {
     appStore.showError(t('admin.users.insufficientBalance'))
     return

frontend/src/components/admin/user/UserCreateModal.vue

@@ -25,7 +25,7 @@
         <label class="input-label">{{ t('admin.users.username') }}</label>
         <input v-model="form.username" type="text" class="input" :placeholder="t('admin.users.enterUsername')" />
       </div>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
           <input v-model.number="form.balance" type="number" step="any" class="input" />

frontend/src/components/common/DataTable.vue

@@ -1,7 +1,68 @@
 <template>
+  <div class="md:hidden space-y-3">
+    <template v-if="loading">
+      <div v-for="i in 5" :key="i" class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900">
+        <div class="space-y-3">
+          <div v-for="column in columns.filter(c => c.key !== 'actions')" :key="column.key" class="flex justify-between">
+            <div class="h-4 w-20 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+            <div class="h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          </div>
+          <div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
+            <div class="h-8 w-full animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="!data || data.length === 0">
+      <div class="rounded-lg border border-gray-200 bg-white p-12 text-center dark:border-dark-700 dark:bg-dark-900">
+        <slot name="empty">
+          <div class="flex flex-col items-center">
+            <Icon
+              name="inbox"
+              size="xl"
+              class="mb-4 h-12 w-12 text-gray-400 dark:text-dark-500"
+            />
+            <p class="text-lg font-medium text-gray-900 dark:text-gray-100">
+              {{ t('empty.noData') }}
+            </p>
+          </div>
+        </slot>
+      </div>
+    </template>
+
+    <template v-else>
+      <div
+        v-for="(row, index) in sortedData"
+        :key="resolveRowKey(row, index)"
+        class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900"
+      >
+        <div class="space-y-3">
+          <div
+            v-for="column in columns.filter(c => c.key !== 'actions')"
+            :key="column.key"
+            class="flex items-start justify-between gap-4"
+          >
+            <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
+              {{ column.label }}
+            </span>
+            <div class="text-right text-sm text-gray-900 dark:text-gray-100">
+              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
+                {{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
+              </slot>
+            </div>
+          </div>
+          <div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
+            <slot name="cell-actions" :row="row" :value="row['actions']" :expanded="actionsExpanded"></slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
   <div
     ref="tableWrapperRef"
-    class="table-wrapper"
+    class="table-wrapper hidden md:block"
     :class="{
       'actions-expanded': actionsExpanded,
       'is-scrollable': isScrollable
@@ -22,29 +83,36 @@
             ]"
             @click="column.sortable && handleSort(column.key)"
           >
-            <div class="flex items-center space-x-1">
-              <span>{{ column.label }}</span>
-              <span v-if="column.sortable" class="text-gray-400 dark:text-dark-500">
-                <svg
-                  v-if="sortKey === column.key"
-                  class="h-4 w-4"
-                  :class="{ 'rotate-180 transform': sortOrder === 'desc' }"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                <svg v-else class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  />
-                </svg>
-              </span>
-            </div>
+            <slot
+              :name="`header-${column.key}`"
+              :column="column"
+              :sort-key="sortKey"
+              :sort-order="sortOrder"
+            >
+              <div class="flex items-center space-x-1">
+                <span>{{ column.label }}</span>
+                <span v-if="column.sortable" class="text-gray-400 dark:text-dark-500">
+                  <svg
+                    v-if="sortKey === column.key"
+                    class="h-4 w-4"
+                    :class="{ 'rotate-180 transform': sortOrder === 'desc' }"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  <svg v-else class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </slot>
           </th>
         </tr>
       </thead>
@@ -83,7 +151,7 @@
         <tr
           v-else
           v-for="(row, index) in sortedData"
-          :key="index"
+          :key="resolveRowKey(row, index)"
           class="hover:bg-gray-50 dark:hover:bg-dark-800"
         >
           <td
@@ -210,6 +278,7 @@ interface Props {
   stickyActionsColumn?: boolean
   expandableActions?: boolean
   actionsCount?: number // 操作按钮总数，用于判断是否需要展开功能
+  rowKey?: string | ((row: any) => string | number)
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -222,6 +291,18 @@ const props = withDefaults(defineProps<Props>(), {
 const sortKey = ref<string>('')
 const sortOrder = ref<'asc' | 'desc'>('asc')
 const actionsExpanded = ref(false)
+const resolveRowKey = (row: any, index: number) => {
+  if (typeof props.rowKey === 'function') {
+    const key = props.rowKey(row)
+    return key ?? index
+  }
+  if (typeof props.rowKey === 'string' && props.rowKey) {
+    const key = row?.[props.rowKey]
+    return key ?? index
+  }
+  const key = row?.id
+  return key ?? index
+}
 
 // 数据/列变化时重新检查滚动状态
 // 注意：不能监听 actionsExpanded，因为 checkActionsColumnWidth 会临时修改它，会导致无限循环
@@ -264,7 +345,10 @@ const sortedData = computed(() => {
   })
 })
 
-// 检查第一列是否为勾选列
+const hasActionsColumn = computed(() => {
+  return props.columns.some(column => column.key === 'actions')
+})
+
 const hasSelectColumn = computed(() => {
   return props.columns.length > 0 && props.columns[0].key === 'select'
 })

frontend/src/components/common/HelpTooltip.vue

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

frontend/src/components/common/NavigationProgress.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+/**
+ * 导航进度条组件
+ * 在页面顶部显示加载进度，提供导航反馈
+ */
+import { computed } from 'vue'
+import { useNavigationLoadingState } from '@/composables/useNavigationLoading'
+
+const { isLoading } = useNavigationLoadingState()
+
+// 进度条可见性
+const isVisible = computed(() => isLoading.value)
+</script>
+
+<template>
+  <Transition name="progress-fade">
+    <div
+      v-show="isVisible"
+      class="navigation-progress"
+      role="progressbar"
+      aria-label="Loading"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <div class="navigation-progress-bar" />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.navigation-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  z-index: 9999;
+  overflow: hidden;
+  background: transparent;
+}
+
+.navigation-progress-bar {
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    theme('colors.primary.400') 20%,
+    theme('colors.primary.500') 50%,
+    theme('colors.primary.400') 80%,
+    transparent 100%
+  );
+  animation: progress-slide 1.5s ease-in-out infinite;
+}
+
+/* 暗色模式下的进度条颜色 */
+:root.dark .navigation-progress-bar {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    theme('colors.primary.500') 20%,
+    theme('colors.primary.400') 50%,
+    theme('colors.primary.500') 80%,
+    transparent 100%
+  );
+}
+
+/* 进度条滑动动画 */
+@keyframes progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* 淡入淡出过渡 */
+.progress-fade-enter-active {
+  transition: opacity 0.15s ease-out;
+}
+
+.progress-fade-leave-active {
+  transition: opacity 0.3s ease-out;
+}
+
+.progress-fade-enter-from,
+.progress-fade-leave-to {
+  opacity: 0;
+}
+
+/* 减少动画模式 */
+@media (prefers-reduced-motion: reduce) {
+  .navigation-progress-bar {
+    animation: progress-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes progress-pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+}
+</style>

frontend/src/components/common/README.md

@@ -13,6 +13,7 @@ A generic data table component with sorting, loading states, and custom cell ren
 - `columns: Column[]` - Array of column definitions with key, label, sortable, and formatter
 - `data: any[]` - Array of data objects to display
 - `loading?: boolean` - Show loading skeleton
+- `rowKey?: string | (row: any) => string | number` - Row key field or resolver (defaults to `row.id`, falls back to index)
 
 **Slots:**
 

frontend/src/components/common/Select.vue

@@ -67,12 +67,13 @@
               :aria-selected="isSelected(option)"
               :aria-disabled="isOptionDisabled(option)"
               @click.stop="!isOptionDisabled(option) && selectOption(option)"
-              @mouseenter="focusedIndex = index"
+              @mouseenter="handleOptionMouseEnter(option, index)"
               :class="[
                 'select-option',
+                isGroupHeaderOption(option) && 'select-option-group',
                 isSelected(option) && 'select-option-selected',
-                isOptionDisabled(option) && 'select-option-disabled',
-                focusedIndex === index && 'select-option-focused'
+                isOptionDisabled(option) && !isGroupHeaderOption(option) && 'select-option-disabled',
+                focusedIndex === index && !isGroupHeaderOption(option) && 'select-option-focused'
               ]"
             >
               <slot name="option" :option="option" :selected="isSelected(option)">
@@ -201,6 +202,13 @@ const isOptionDisabled = (option: any): boolean => {
   return false
 }
 
+const isGroupHeaderOption = (option: any): boolean => {
+  if (typeof option === 'object' && option !== null) {
+    return option.kind === 'group'
+  }
+  return false
+}
+
 const selectedOption = computed(() => {
   return props.options.find((opt) => getOptionValue(opt) === props.modelValue) || null
 })
@@ -225,6 +233,31 @@ const isSelected = (option: any): boolean => {
   return getOptionValue(option) === props.modelValue
 }
 
+const findNextEnabledIndex = (startIndex: number): number => {
+  const opts = filteredOptions.value
+  if (opts.length === 0) return -1
+  for (let offset = 0; offset < opts.length; offset++) {
+    const idx = (startIndex + offset) % opts.length
+    if (!isOptionDisabled(opts[idx])) return idx
+  }
+  return -1
+}
+
+const findPrevEnabledIndex = (startIndex: number): number => {
+  const opts = filteredOptions.value
+  if (opts.length === 0) return -1
+  for (let offset = 0; offset < opts.length; offset++) {
+    const idx = (startIndex - offset + opts.length) % opts.length
+    if (!isOptionDisabled(opts[idx])) return idx
+  }
+  return -1
+}
+
+const handleOptionMouseEnter = (option: any, index: number) => {
+  if (isOptionDisabled(option) || isGroupHeaderOption(option)) return
+  focusedIndex.value = index
+}
+
 // Update trigger rect periodically while open to follow scroll/resize
 const updateTriggerRect = () => {
   if (containerRef.value) {
@@ -259,8 +292,15 @@ watch(isOpen, (open) => {
   if (open) {
     calculateDropdownPosition()
     // Reset focused index to current selection or first item
-    const selectedIdx = filteredOptions.value.findIndex(isSelected)
-    focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0
+    if (filteredOptions.value.length === 0) {
+      focusedIndex.value = -1
+    } else {
+      const selectedIdx = filteredOptions.value.findIndex(isSelected)
+      const initialIdx = selectedIdx >= 0 ? selectedIdx : 0
+      focusedIndex.value = isOptionDisabled(filteredOptions.value[initialIdx])
+        ? findNextEnabledIndex(initialIdx + 1)
+        : initialIdx
+    }
 
     if (props.searchable) {
       nextTick(() => searchInputRef.value?.focus())
@@ -295,13 +335,13 @@ const onDropdownKeyDown = (e: KeyboardEvent) => {
   switch (e.key) {
     case 'ArrowDown':
       e.preventDefault()
-      focusedIndex.value = (focusedIndex.value + 1) % filteredOptions.value.length
-      scrollToFocused()
+      focusedIndex.value = findNextEnabledIndex(focusedIndex.value + 1)
+      if (focusedIndex.value >= 0) scrollToFocused()
       break
     case 'ArrowUp':
       e.preventDefault()
-      focusedIndex.value = (focusedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-      scrollToFocused()
+      focusedIndex.value = findPrevEnabledIndex(focusedIndex.value - 1)
+      if (focusedIndex.value >= 0) scrollToFocused()
       break
     case 'Enter':
       e.preventDefault()
@@ -441,6 +481,17 @@ onUnmounted(() => {
   @apply cursor-not-allowed opacity-40;
 }
 
+.select-dropdown-portal .select-option-group {
+  @apply cursor-default select-none;
+  @apply bg-gray-50 dark:bg-dark-900;
+  @apply text-[11px] font-bold uppercase tracking-wider;
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.select-dropdown-portal .select-option-group:hover {
+  @apply bg-gray-50 dark:bg-dark-900;
+}
+
 .select-dropdown-portal .select-option-label {
   @apply flex-1 min-w-0 truncate text-left;
 }

frontend/src/components/common/__tests__/NavigationProgress.spec.ts

@@ -0,0 +1,83 @@
+/**
+ * NavigationProgress 组件单元测试
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import NavigationProgress from '../../common/NavigationProgress.vue'
+
+// Mock useNavigationLoadingState
+const mockIsLoading = ref(false)
+
+vi.mock('@/composables/useNavigationLoading', () => ({
+  useNavigationLoadingState: () => ({
+    isLoading: mockIsLoading
+  })
+}))
+
+describe('NavigationProgress', () => {
+  beforeEach(() => {
+    mockIsLoading.value = false
+  })
+
+  it('isLoading=false 时进度条应该隐藏', () => {
+    mockIsLoading.value = false
+    const wrapper = mount(NavigationProgress)
+
+    const progressBar = wrapper.find('.navigation-progress')
+    // v-show 会设置 display: none
+    expect(progressBar.isVisible()).toBe(false)
+  })
+
+  it('isLoading=true 时进度条应该可见', async () => {
+    mockIsLoading.value = true
+    const wrapper = mount(NavigationProgress)
+
+    await wrapper.vm.$nextTick()
+
+    const progressBar = wrapper.find('.navigation-progress')
+    expect(progressBar.exists()).toBe(true)
+    expect(progressBar.isVisible()).toBe(true)
+  })
+
+  it('应该有正确的 ARIA 属性', () => {
+    mockIsLoading.value = true
+    const wrapper = mount(NavigationProgress)
+
+    const progressBar = wrapper.find('.navigation-progress')
+    expect(progressBar.attributes('role')).toBe('progressbar')
+    expect(progressBar.attributes('aria-label')).toBe('Loading')
+    expect(progressBar.attributes('aria-valuemin')).toBe('0')
+    expect(progressBar.attributes('aria-valuemax')).toBe('100')
+  })
+
+  it('进度条应该有动画 class', () => {
+    mockIsLoading.value = true
+    const wrapper = mount(NavigationProgress)
+
+    const bar = wrapper.find('.navigation-progress-bar')
+    expect(bar.exists()).toBe(true)
+  })
+
+  it('应该正确响应 isLoading 状态变化', async () => {
+    // 测试初始状态为 false
+    mockIsLoading.value = false
+    const wrapper = mount(NavigationProgress)
+    await wrapper.vm.$nextTick()
+
+    // 初始状态隐藏
+    expect(wrapper.find('.navigation-progress').isVisible()).toBe(false)
+
+    // 卸载后重新挂载以测试 true 状态
+    wrapper.unmount()
+
+    // 改变为 true 后重新挂载
+    mockIsLoading.value = true
+    const wrapper2 = mount(NavigationProgress)
+    await wrapper2.vm.$nextTick()
+    expect(wrapper2.find('.navigation-progress').isVisible()).toBe(true)
+
+    // 清理
+    wrapper2.unmount()
+  })
+})

frontend/src/components/icons/Icon.vue

@@ -124,7 +124,8 @@ const icons = {
   chatBubble: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z',
   calculator: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
   fire: 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z',
-  badge: 'M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z'
+  badge: 'M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z',
+  brain: 'M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m0 0l-2.69 2.689c-1.232 1.232-.65 3.318 1.067 3.611A48.309 48.309 0 0012 21c2.773 0 5.491-.235 8.135-.687 1.718-.293 2.3-2.379 1.067-3.61L19.8 15.3M12 8.25a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0v3m-3-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0h6m-3 4.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'
 } as const
 
 const iconPath = computed(() => icons[props.name])

frontend/src/components/keys/UseKeyModal.vue

@@ -28,8 +28,8 @@
           {{ platformDescription }}
         </p>
 
-        <!-- Client Tabs (only for Antigravity platform) -->
-        <div v-if="platform === 'antigravity'" class="border-b border-gray-200 dark:border-dark-700">
+        <!-- Client Tabs -->
+        <div v-if="clientTabs.length" class="border-b border-gray-200 dark:border-dark-700">
           <nav class="-mb-px flex space-x-6" aria-label="Client">
             <button
               v-for="tab in clientTabs"
@@ -51,7 +51,7 @@
         </div>
 
         <!-- OS/Shell Tabs -->
-        <div class="border-b border-gray-200 dark:border-dark-700">
+        <div v-if="showShellTabs" class="border-b border-gray-200 dark:border-dark-700">
           <nav class="-mb-px flex space-x-4" aria-label="Tabs">
             <button
               v-for="tab in currentTabs"
@@ -111,7 +111,7 @@
         </div>
 
         <!-- Usage Note -->
-        <div class="flex items-start gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800">
+        <div v-if="showPlatformNote" class="flex items-start gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800">
           <Icon name="infoCircle" size="md" class="text-blue-500 flex-shrink-0 mt-0.5" />
           <p class="text-sm text-blue-700 dark:text-blue-300">
             {{ platformNote }}
@@ -173,17 +173,28 @@ const { copyToClipboard: clipboardCopy } = useClipboard()
 
 const copiedIndex = ref<number | null>(null)
 const activeTab = ref<string>('unix')
-const activeClientTab = ref<string>('claude')  // Level 1 tab for antigravity platform
+const activeClientTab = ref<string>('claude')
 
 // Reset tabs when platform changes
-watch(() => props.platform, (newPlatform) => {
-  activeTab.value = 'unix'
-  if (newPlatform === 'antigravity') {
-    activeClientTab.value = 'claude'
+const defaultClientTab = computed(() => {
+  switch (props.platform) {
+    case 'openai':
+      return 'codex'
+    case 'gemini':
+      return 'gemini'
+    case 'antigravity':
+      return 'claude'
+    default:
+      return 'claude'
   }
 })
 
-// Reset shell tab when client changes (for antigravity)
+watch(() => props.platform, () => {
+  activeTab.value = 'unix'
+  activeClientTab.value = defaultClientTab.value
+}, { immediate: true })
+
+// Reset shell tab when client changes
 watch(activeClientTab, () => {
   activeTab.value = 'unix'
 })
@@ -251,11 +262,32 @@ const SparkleIcon = {
   }
 }
 
-// Client tabs for Antigravity platform (Level 1)
-const clientTabs = computed((): TabConfig[] => [
-  { id: 'claude', label: t('keys.useKeyModal.antigravity.claudeCode'), icon: TerminalIcon },
-  { id: 'gemini', label: t('keys.useKeyModal.antigravity.geminiCli'), icon: SparkleIcon }
-])
+const clientTabs = computed((): TabConfig[] => {
+  if (!props.platform) return []
+  switch (props.platform) {
+    case 'openai':
+      return [
+        { id: 'codex', label: t('keys.useKeyModal.cliTabs.codexCli'), icon: TerminalIcon },
+        { id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
+      ]
+    case 'gemini':
+      return [
+        { id: 'gemini', label: t('keys.useKeyModal.cliTabs.geminiCli'), icon: SparkleIcon },
+        { id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
+      ]
+    case 'antigravity':
+      return [
+        { id: 'claude', label: t('keys.useKeyModal.cliTabs.claudeCode'), icon: TerminalIcon },
+        { id: 'gemini', label: t('keys.useKeyModal.cliTabs.geminiCli'), icon: SparkleIcon },
+        { id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
+      ]
+    default:
+      return [
+        { id: 'claude', label: t('keys.useKeyModal.cliTabs.claudeCode'), icon: TerminalIcon },
+        { id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
+      ]
+  }
+})
 
 // Shell tabs (3 types for environment variable based configs)
 const shellTabs: TabConfig[] = [
@@ -270,11 +302,13 @@ const openaiTabs: TabConfig[] = [
   { id: 'windows', label: 'Windows', icon: WindowsIcon }
 ]
 
+const showShellTabs = computed(() => activeClientTab.value !== 'opencode')
+
 const currentTabs = computed(() => {
+  if (!showShellTabs.value) return []
   if (props.platform === 'openai') {
-    return openaiTabs  // 2 tabs: unix, windows
+    return openaiTabs
   }
-  // All other platforms (anthropic, gemini, antigravity) use shell tabs
   return shellTabs
 })
 
@@ -308,6 +342,8 @@ const platformNote = computed(() => {
   }
 })
 
+const showPlatformNote = computed(() => activeClientTab.value !== 'opencode')
+
 const escapeHtml = (value: string) => value
   .replace(/&/g, '&amp;')
   .replace(/</g, '&lt;')
@@ -329,6 +365,39 @@ const comment = (value: string) => wrapToken('text-slate-500', value)
 const currentFiles = computed((): FileConfig[] => {
   const baseUrl = props.baseUrl || window.location.origin
   const apiKey = props.apiKey
+  const baseRoot = baseUrl.replace(/\/v1\/?$/, '').replace(/\/+$/, '')
+  const ensureV1 = (value: string) => {
+    const trimmed = value.replace(/\/+$/, '')
+    return trimmed.endsWith('/v1') ? trimmed : `${trimmed}/v1`
+  }
+  const apiBase = ensureV1(baseRoot)
+  const antigravityBase = ensureV1(`${baseRoot}/antigravity`)
+  const antigravityGeminiBase = (() => {
+    const trimmed = `${baseRoot}/antigravity`.replace(/\/+$/, '')
+    return trimmed.endsWith('/v1beta') ? trimmed : `${trimmed}/v1beta`
+  })()
+  const geminiBase = (() => {
+    const trimmed = baseRoot.replace(/\/+$/, '')
+    return trimmed.endsWith('/v1beta') ? trimmed : `${trimmed}/v1beta`
+  })()
+
+  if (activeClientTab.value === 'opencode') {
+    switch (props.platform) {
+      case 'anthropic':
+        return [generateOpenCodeConfig('anthropic', apiBase, apiKey)]
+      case 'openai':
+        return [generateOpenCodeConfig('openai', apiBase, apiKey)]
+      case 'gemini':
+        return [generateOpenCodeConfig('gemini', geminiBase, apiKey)]
+      case 'antigravity':
+        return [
+          generateOpenCodeConfig('antigravity-claude', antigravityBase, apiKey, 'opencode.json (Claude)'),
+          generateOpenCodeConfig('antigravity-gemini', antigravityGeminiBase, apiKey, 'opencode.json (Gemini)')
+        ]
+      default:
+        return [generateOpenCodeConfig('openai', apiBase, apiKey)]
+    }
+  }
 
   switch (props.platform) {
     case 'openai':
@@ -336,12 +405,11 @@ const currentFiles = computed((): FileConfig[] => {
     case 'gemini':
       return [generateGeminiCliContent(baseUrl, apiKey)]
     case 'antigravity':
-      // Both Claude Code and Gemini CLI need /antigravity suffix for antigravity platform
-      if (activeClientTab.value === 'claude') {
-        return generateAnthropicFiles(`${baseUrl}/antigravity`, apiKey)
+      if (activeClientTab.value === 'gemini') {
+        return [generateGeminiCliContent(`${baseUrl}/antigravity`, apiKey)]
       }
-      return [generateGeminiCliContent(`${baseUrl}/antigravity`, apiKey)]
-    default: // anthropic
+      return generateAnthropicFiles(`${baseUrl}/antigravity`, apiKey)
+    default:
       return generateAnthropicFiles(baseUrl, apiKey)
   }
 })
@@ -456,6 +524,95 @@ requires_openai_auth = true`
   ]
 }
 
+function generateOpenCodeConfig(platform: string, baseUrl: string, apiKey: string, pathLabel?: string): FileConfig {
+  const provider: Record<string, any> = {
+    [platform]: {
+      options: {
+        baseURL: baseUrl,
+        apiKey
+      }
+    }
+  }
+  const openaiModels = {
+    'gpt-5.2-codex': {
+      name: 'GPT-5.2 Codex',
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {},
+        xhigh: {}
+      }
+    }
+  }
+  const geminiModels = {
+    'gemini-3-pro-high': { name: 'Gemini 3 Pro High' },
+    'gemini-3-pro-low': { name: 'Gemini 3 Pro Low' },
+    'gemini-3-pro-preview': { name: 'Gemini 3 Pro Preview' },
+    'gemini-3-pro-image': { name: 'Gemini 3 Pro Image' },
+    'gemini-3-flash': { name: 'Gemini 3 Flash' },
+    'gemini-2.5-flash-thinking': { name: 'Gemini 2.5 Flash Thinking' },
+    'gemini-2.5-flash': { name: 'Gemini 2.5 Flash' },
+    'gemini-2.5-flash-lite': { name: 'Gemini 2.5 Flash Lite' }
+  }
+  const claudeModels = {
+    'claude-opus-4-5-thinking': { name: 'Claude Opus 4.5 Thinking' },
+    'claude-sonnet-4-5-thinking': { name: 'Claude Sonnet 4.5 Thinking' },
+    'claude-sonnet-4-5': { name: 'Claude Sonnet 4.5' }
+  }
+
+  if (platform === 'gemini') {
+    provider[platform].npm = '@ai-sdk/google'
+    provider[platform].models = geminiModels
+  } else if (platform === 'anthropic') {
+    provider[platform].npm = '@ai-sdk/anthropic'
+  } else if (platform === 'antigravity-claude') {
+    provider[platform].npm = '@ai-sdk/anthropic'
+    provider[platform].name = 'Antigravity (Claude)'
+    provider[platform].models = claudeModels
+  } else if (platform === 'antigravity-gemini') {
+    provider[platform].npm = '@ai-sdk/google'
+    provider[platform].name = 'Antigravity (Gemini)'
+    provider[platform].models = geminiModels
+  } else if (platform === 'openai') {
+    provider[platform].models = openaiModels
+  }
+
+  const agent =
+    platform === 'openai'
+      ? {
+          build: {
+            options: {
+              store: false
+            }
+          },
+          plan: {
+            options: {
+              store: false
+            }
+          }
+        }
+      : undefined
+
+  const content = JSON.stringify(
+    {
+      provider,
+      ...(agent ? { agent } : {}),
+      $schema: 'https://opencode.ai/config.json'
+    },
+    null,
+    2
+  )
+
+  return {
+    path: pathLabel ?? 'opencode.json',
+    content,
+    hint: t('keys.useKeyModal.opencode.hint')
+  }
+}
+
 const copyContent = async (content: string, index: number) => {
   const success = await clipboardCopy(content, t('keys.copied'))
   if (success) {

frontend/src/components/layout/AppSidebar.vue

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