refactor: 统一 API 格式显示函数，补全 Usage/Trace 的 provider 链路信息

- 提取 formatApiFormat 为共享工具函数，替换各组件中分散的 API_FORMAT_LABELS 调用
- Trace API 返回密钥认证类型(key_auth_type)和 OAuth 套餐信息(key_oauth_plan_type)
- 请求时间线展示密钥认证方式标签（OAuth/Vertex AI/Kiro 等）
- Usage 记录补充 provider_id/endpoint_id/key_id，避免 curl 复现时缺失 provider 信息
- curl 复现兜底从 RequestCandidate 表查找 provider 信息
- Headers Diff 面板左右独立滚动并同步垂直滚动位置

frontend/src/features/usage/components/HorizontalRequestTimeline.vue

@@ -92,14 +92,6 @@
                 </div>
               </div>
 
-              <!-- 格式转换标记（节点下方） -->
-              <div
-                v-if="group.hasConversion"
-                class="conversion-indicator"
-              >
-                {{ group.primary.extra_data?.provider_api_format || '转换' }}
-              </div>
-
               <!-- 连接线 -->
               <div
                 v-if="groupIndex < groupedTimeline.length - 1"
@@ -202,25 +194,31 @@
                     <span class="info-value mono">{{ formatLatency(currentAttempt.extra_data.first_byte_time_ms) }}</span>
                   </div>
                   <div
-                    v-if="currentAttempt.extra_data?.needs_conversion"
+                    v-if="currentAttempt.extra_data?.provider_api_format"
                     class="info-item"
                   >
                     <span class="info-label">格式</span>
                     <span class="info-value">
-                      <span class="conversion-badge">格式转换</span>
-                      <code
-                        v-if="currentAttempt.extra_data?.provider_api_format"
-                        class="ml-1.5 text-xs"
-                      >{{ currentAttempt.extra_data.provider_api_format }}</code>
+                      <code class="format-code">{{ formatApiFormat(currentAttempt.extra_data.provider_api_format) }}</code>
+                      <span
+                        v-if="currentAttempt.extra_data?.needs_conversion"
+                        class="conversion-badge ml-1.5"
+                      >格式转换</span>
                     </span>
                   </div>
                   <div
                     v-if="currentAttempt.key_name || currentAttempt.key_id"
                     class="info-item"
                   >
-                    <span class="info-label">密钥</span>
+                    <span class="info-label">{{ isOAuthType(currentAttempt.key_auth_type) ? '账号' : '密钥' }}</span>
                     <span class="info-value info-value-stacked">
-                      <span class="key-name">{{ currentAttempt.key_name || '未知' }}</span>
+                      <span class="key-name">
+                        {{ currentAttempt.key_name || '未知' }}
+                        <span
+                          v-if="currentAttempt.key_auth_type && currentAttempt.key_auth_type !== 'api_key'"
+                          class="auth-type-tag"
+                        >{{ formatAuthTypeWithPlan(currentAttempt.key_auth_type, currentAttempt.key_oauth_plan_type) }}</span>
+                      </span>
                       <code
                         v-if="currentAttempt.key_preview"
                         class="key-preview"
@@ -373,6 +371,7 @@ import Skeleton from '@/components/ui/skeleton.vue'
 import { ChevronLeft, ChevronRight, ExternalLink } from 'lucide-vue-next'
 import { requestTraceApi, type RequestTrace, type CandidateRecord } from '@/api/requestTrace'
 import { log } from '@/utils/logger'
+import { formatApiFormat } from '@/api/endpoints/types/api-format'
 
 // 节点组类型
 interface NodeGroup {
@@ -386,6 +385,7 @@ interface NodeGroup {
   startIndex: number
   endIndex: number
   hasConversion: boolean  // 组内是否有格式转换候选
+  providerApiFormat: string | null  // 提供商 API 格式（如 openai:cli）
 }
 
 // 用量数据类型
@@ -615,6 +615,7 @@ const groupedTimeline = computed<NodeGroup[]>(() => {
         startIndex: index,
         endIndex: index,
         hasConversion: candidate.extra_data?.needs_conversion === true,
+        providerApiFormat: candidate.extra_data?.provider_api_format || null,
       }
       groups.push(currentGroup)
     }
@@ -722,6 +723,30 @@ const isCapabilityUsed = (cap: string): boolean => {
   return activeCapabilities.value.includes(cap)
 }
 
+// 判断是否为 OAuth 类型（provider_type 为具体值时也算 OAuth）
+const isOAuthType = (authType?: string): boolean => {
+  if (!authType) return false
+  return !['api_key', 'vertex_ai'].includes(authType)
+}
+
+// 格式化认证类型（合并 plan 信息，避免冗余）
+const formatAuthTypeWithPlan = (authType: string, planType?: string): string => {
+  const labels: Record<string, string> = {
+    'oauth': 'OAuth',
+    'vertex_ai': 'Vertex AI',
+    'kiro': 'Kiro',
+    'codex': 'Codex',
+    'antigravity': 'Antigravity',
+    'claude_code': 'Claude Code',
+    'gemini_cli': 'Gemini CLI',
+  }
+  const typeName = labels[authType] || authType
+  if (planType) {
+    return `${typeName} ${planType}`
+  }
+  return typeName
+}
+
 // 格式化能力标签显示
 const formatCapabilityLabel = (cap: string): string => {
   const labels: Record<string, string> = {
@@ -1143,24 +1168,6 @@ const getStatusColorClass = (status: string) => {
 .node-dot.status-skipped { color: hsl(var(--primary)); }
 .node-dot.status-available { color: #d1d5db; }
 
-/* 格式转换标记（节点下方） */
-.conversion-indicator {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.55rem;
-  color: hsl(var(--muted-foreground) / 0.7);
-  white-space: nowrap;
-  max-width: 80px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 1px 4px;
-  border: 1px dashed hsl(var(--border));
-  border-radius: 3px;
-  background: hsl(var(--muted) / 0.3);
-}
-
 /* 连接线容器 */
 .node-line-wrapper {
   position: absolute;
@@ -1426,6 +1433,16 @@ const getStatusColorClass = (status: string) => {
   gap: 0.2rem;
 }
 
+/* 格式代码 */
+.format-code {
+  font-size: 0.75rem;
+  padding: 0.1rem 0.3rem;
+  background: hsl(var(--muted));
+  border-radius: 3px;
+  color: hsl(var(--muted-foreground));
+  font-family: ui-monospace, monospace;
+}
+
 /* Key 信息 */
 .key-name {
   font-weight: 500;
@@ -1440,6 +1457,20 @@ const getStatusColorClass = (status: string) => {
   font-family: ui-monospace, monospace;
 }
 
+/* 认证类型标签 */
+.auth-type-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1rem 0.35rem;
+  margin-left: 0.375rem;
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: hsl(var(--primary) / 0.8);
+  background: hsl(var(--primary) / 0.08);
+  border: 1px solid hsl(var(--primary) / 0.2);
+  border-radius: 3px;
+}
+
 /* 代理信息 */
 .proxy-name {
   font-weight: 500;

frontend/src/features/usage/components/RequestDetailDrawer.vue

@@ -640,7 +640,7 @@ import Tabs from '@/components/ui/tabs.vue'
 import TabsContent from '@/components/ui/tabs-content.vue'
 import { Copy, Check, Maximize2, Minimize2, Columns2, RefreshCw, X, Monitor, Server, MessageSquareText, Code2, Terminal, Play } from 'lucide-vue-next'
 import { dashboardApi, type RequestDetail } from '@/api/dashboard'
-import { API_FORMAT_LABELS } from '@/api/endpoints/types'
+import { formatApiFormat } from '@/api/endpoints/types/api-format'
 import { log } from '@/utils/logger'
 
 // 子组件
@@ -1074,17 +1074,6 @@ function getTaskTypeLabel(taskType: string): string {
   }
 }
 
-function formatApiFormat(format: string | null | undefined): string {
-  if (!format) return '-'
-  const raw = (format || '').trim()
-  return (
-    API_FORMAT_LABELS[raw] ||
-    API_FORMAT_LABELS[raw.toLowerCase()] ||
-    API_FORMAT_LABELS[raw.toUpperCase()] ||
-    raw
-  )
-}
-
 function formatNumber(num: number): string {
   if (num >= 1_000_000) {
     return `${(num / 1_000_000).toFixed(1)  }M`

frontend/src/features/usage/components/RequestDetailDrawer/RequestHeadersContent.vue

@@ -25,94 +25,100 @@
         </div>
 
         <!-- 并排 Diff 内容 -->
-        <div class="overflow-x-auto max-h-[500px] overflow-y-auto">
-          <div class="flex font-mono text-xs">
-            <!-- 左侧：客户端 -->
-            <div class="flex-1 border-r">
-              <template
-                v-for="entry in sortedEntries"
-                :key="'left-' + entry.key"
+        <div class="flex font-mono text-xs max-h-[500px]">
+          <!-- 左侧：客户端 -->
+          <div
+            ref="leftPanelRef"
+            class="w-1/2 min-w-0 border-r overflow-x-auto overflow-y-auto"
+            @scroll="onLeftScroll"
+          >
+            <template
+              v-for="entry in sortedEntries"
+              :key="'left-' + entry.key"
+            >
+              <!-- 删除的行 -->
+              <div
+                v-if="entry.status === 'removed'"
+                class="flex items-start bg-destructive/10 px-3 py-0.5"
               >
-                <!-- 删除的行 -->
-                <div
-                  v-if="entry.status === 'removed'"
-                  class="flex items-start bg-destructive/10 px-3 py-0.5"
-                >
-                  <span class="text-destructive">
-                    "{{ entry.key }}": "{{ entry.clientValue }}"
-                  </span>
-                </div>
-                <!-- 修改的行 - 旧值 -->
-                <div
-                  v-else-if="entry.status === 'modified'"
-                  class="flex items-start bg-amber-500/10 px-3 py-0.5"
-                >
-                  <span class="text-amber-600 dark:text-amber-400">
-                    "{{ entry.key }}": "{{ entry.clientValue }}"
-                  </span>
-                </div>
-                <!-- 新增的行 - 左侧空白占位 -->
-                <div
-                  v-else-if="entry.status === 'added'"
-                  class="flex items-start bg-muted/30 px-3 py-0.5"
-                >
-                  <span class="text-muted-foreground/30 italic">（无）</span>
-                </div>
-                <!-- 未变化的行 -->
-                <div
-                  v-else
-                  class="flex items-start px-3 py-0.5 hover:bg-muted/50"
-                >
-                  <span class="text-muted-foreground">
-                    "{{ entry.key }}": "{{ entry.clientValue }}"
-                  </span>
-                </div>
-              </template>
-            </div>
-            <!-- 右侧：提供商 -->
-            <div class="flex-1">
-              <template
-                v-for="entry in sortedEntries"
-                :key="'right-' + entry.key"
+                <span class="text-destructive">
+                  "{{ entry.key }}": "{{ entry.clientValue }}"
+                </span>
+              </div>
+              <!-- 修改的行 - 旧值 -->
+              <div
+                v-else-if="entry.status === 'modified'"
+                class="flex items-start bg-amber-500/10 px-3 py-0.5"
               >
-                <!-- 删除的行 - 右侧空白占位 -->
-                <div
-                  v-if="entry.status === 'removed'"
-                  class="flex items-start bg-muted/30 px-3 py-0.5"
-                >
-                  <span class="text-muted-foreground/50 line-through">
-                    "{{ entry.key }}": "{{ entry.clientValue }}"
-                  </span>
-                </div>
-                <!-- 修改的行 - 新值 -->
-                <div
-                  v-else-if="entry.status === 'modified'"
-                  class="flex items-start bg-amber-500/10 px-3 py-0.5"
-                >
-                  <span class="text-amber-600 dark:text-amber-400">
-                    "{{ entry.key }}": "{{ entry.providerValue }}"
-                  </span>
-                </div>
-                <!-- 新增的行 -->
-                <div
-                  v-else-if="entry.status === 'added'"
-                  class="flex items-start bg-green-500/10 px-3 py-0.5"
-                >
-                  <span class="text-green-600 dark:text-green-400">
-                    "{{ entry.key }}": "{{ entry.providerValue }}"
-                  </span>
-                </div>
-                <!-- 未变化的行 -->
-                <div
-                  v-else
-                  class="flex items-start px-3 py-0.5 hover:bg-muted/50"
-                >
-                  <span class="text-muted-foreground">
-                    "{{ entry.key }}": "{{ entry.providerValue }}"
-                  </span>
-                </div>
-              </template>
-            </div>
+                <span class="text-amber-600 dark:text-amber-400">
+                  "{{ entry.key }}": "{{ entry.clientValue }}"
+                </span>
+              </div>
+              <!-- 新增的行 - 左侧空白占位 -->
+              <div
+                v-else-if="entry.status === 'added'"
+                class="flex items-start bg-muted/30 px-3 py-0.5"
+              >
+                <span class="text-muted-foreground/30 italic">（无）</span>
+              </div>
+              <!-- 未变化的行 -->
+              <div
+                v-else
+                class="flex items-start px-3 py-0.5 hover:bg-muted/50"
+              >
+                <span class="text-muted-foreground">
+                  "{{ entry.key }}": "{{ entry.clientValue }}"
+                </span>
+              </div>
+            </template>
+          </div>
+          <!-- 右侧：提供商 -->
+          <div
+            ref="rightPanelRef"
+            class="w-1/2 min-w-0 overflow-x-auto overflow-y-auto"
+            @scroll="onRightScroll"
+          >
+            <template
+              v-for="entry in sortedEntries"
+              :key="'right-' + entry.key"
+            >
+              <!-- 删除的行 - 右侧空白占位 -->
+              <div
+                v-if="entry.status === 'removed'"
+                class="flex items-start bg-muted/30 px-3 py-0.5"
+              >
+                <span class="text-muted-foreground/50 line-through">
+                  "{{ entry.key }}": "{{ entry.clientValue }}"
+                </span>
+              </div>
+              <!-- 修改的行 - 新值 -->
+              <div
+                v-else-if="entry.status === 'modified'"
+                class="flex items-start bg-amber-500/10 px-3 py-0.5"
+              >
+                <span class="text-amber-600 dark:text-amber-400">
+                  "{{ entry.key }}": "{{ entry.providerValue }}"
+                </span>
+              </div>
+              <!-- 新增的行 -->
+              <div
+                v-else-if="entry.status === 'added'"
+                class="flex items-start bg-green-500/10 px-3 py-0.5"
+              >
+                <span class="text-green-600 dark:text-green-400">
+                  "{{ entry.key }}": "{{ entry.providerValue }}"
+                </span>
+              </div>
+              <!-- 未变化的行 -->
+              <div
+                v-else
+                class="flex items-start px-3 py-0.5 hover:bg-muted/50"
+              >
+                <span class="text-muted-foreground">
+                  "{{ entry.key }}": "{{ entry.providerValue }}"
+                </span>
+              </div>
+            </template>
           </div>
         </div>
       </Card>
@@ -150,7 +156,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import Card from '@/components/ui/card.vue'
 import JsonContent from './JsonContent.vue'
 import type { RequestDetail } from '@/api/dashboard'
@@ -168,6 +174,28 @@ const props = defineProps<{
   isDark: boolean
 }>()
 
+const leftPanelRef = ref<HTMLElement | null>(null)
+const rightPanelRef = ref<HTMLElement | null>(null)
+let isSyncingScroll = false
+
+function onLeftScroll() {
+  if (isSyncingScroll) return
+  isSyncingScroll = true
+  if (leftPanelRef.value && rightPanelRef.value) {
+    rightPanelRef.value.scrollTop = leftPanelRef.value.scrollTop
+  }
+  requestAnimationFrame(() => { isSyncingScroll = false })
+}
+
+function onRightScroll() {
+  if (isSyncingScroll) return
+  isSyncingScroll = true
+  if (leftPanelRef.value && rightPanelRef.value) {
+    leftPanelRef.value.scrollTop = rightPanelRef.value.scrollTop
+  }
+  requestAnimationFrame(() => { isSyncingScroll = false })
+}
+
 // 合并并排序的条目（用于并排显示）
 const sortedEntries = computed(() => {
   const clientHeaders = props.detail.request_headers || {}

frontend/src/features/usage/components/UsageApiFormatTable.vue

@@ -78,7 +78,7 @@ import TableRow from '@/components/ui/table-row.vue'
 import TableHead from '@/components/ui/table-head.vue'
 import TableCell from '@/components/ui/table-cell.vue'
 import { formatTokens, formatCurrency } from '@/utils/format'
-import { API_FORMAT_LABELS } from '@/api/endpoints/types'
+import { formatApiFormat } from '@/api/endpoints/types/api-format'
 import type { ApiFormatStatsItem } from '../types'
 
 defineProps<{
@@ -86,15 +86,4 @@ defineProps<{
   isAdmin: boolean
 }>()
 
-// 格式化 API 格式显示名称
-function formatApiFormat(format: string): string {
-  const raw = (format || '').trim()
-  return (
-    API_FORMAT_LABELS[raw] ||
-    API_FORMAT_LABELS[raw.toLowerCase()] ||
-    API_FORMAT_LABELS[raw.toUpperCase()] ||
-    raw
-  )
-}
-
 </script>

frontend/src/features/usage/components/UsageRecordsTable.vue

@@ -668,7 +668,7 @@ import { RefreshCcw, Search } from 'lucide-vue-next'
 import { formatTokens, formatCurrency } from '@/utils/format'
 import { formatDateTime } from '../composables'
 import { useRowClick } from '@/composables/useRowClick'
-import { API_FORMAT_LABELS } from '@/api/endpoints/types'
+import { formatApiFormat } from '@/api/endpoints/types/api-format'
 import type { DateRangeParams, UsageRecord } from '../types'
 import { TimeRangePicker } from '@/components/common'
 
@@ -811,17 +811,6 @@ function handleRowClick(event: MouseEvent, id: string) {
 
 // useIntervalFn 和 useDebounceFn 自动处理清理，无需 onUnmounted
 
-// 格式化 API 格式显示名称
-function formatApiFormat(format: string): string {
-  const raw = (format || '').trim()
-  return (
-    API_FORMAT_LABELS[raw] ||
-    API_FORMAT_LABELS[raw.toLowerCase()] ||
-    API_FORMAT_LABELS[raw.toUpperCase()] ||
-    raw
-  )
-}
-
 // 判断是否应该显示格式转换信息
 // 包括：1. 跨格式转换（has_format_conversion=true）2. 同族格式差异（如 CLAUDE_CLI → CLAUDE）
 function shouldShowFormatConversion(record: UsageRecord): boolean {