Use shared clock for active usage timers

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

@@ -3,26 +3,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
   createdAt?: string | null
   status?: string | null
   responseTimeMs?: number | null
+  displayNowMs?: number | null
   precision?: number
 }>(), {
   createdAt: null,
   status: null,
   responseTimeMs: null,
+  displayNowMs: null,
   precision: 2,
 })
 
-const now = ref(Date.now())
 const precision = computed(() => Math.max(0, props.precision))
 const isActive = computed(() => props.status === 'pending' || props.status === 'streaming')
 
-let rafId: number | null = null
-
 function parseCreatedAtMs(value: string | null | undefined): number {
   if (!value) return Number.NaN
   // 后端有时返回无时区时间，按 UTC 解析，和列表时间显示逻辑保持一致
@@ -30,35 +29,6 @@ function parseCreatedAtMs(value: string | null | undefined): number {
   return new Date(normalized).getTime()
 }
 
-function stopRaf() {
-  if (rafId == null) return
-  cancelAnimationFrame(rafId)
-  rafId = null
-}
-
-function tick() {
-  now.value = Date.now()
-  rafId = requestAnimationFrame(tick)
-}
-
-function startRaf() {
-  stopRaf()
-  now.value = Date.now()
-  rafId = requestAnimationFrame(tick)
-}
-
-watch(isActive, (active) => {
-  if (active) {
-    startRaf()
-  } else {
-    stopRaf()
-  }
-}, { immediate: true })
-
-onUnmounted(() => {
-  stopRaf()
-})
-
 const displayText = computed(() => {
   if (!isActive.value) {
     if (props.responseTimeMs == null) return '-'
@@ -70,7 +40,11 @@ const displayText = computed(() => {
   const createdAtMs = parseCreatedAtMs(props.createdAt)
   if (Number.isNaN(createdAtMs)) return '-'
 
-  const elapsedMs = Math.max(0, now.value - createdAtMs)
+  // 活跃请求里的 response_time_ms 可能只是首字或中间值；终态才使用后端最终耗时。
+  const nowMs = typeof props.displayNowMs === 'number' && Number.isFinite(props.displayNowMs)
+    ? props.displayNowMs
+    : Date.now()
+  const elapsedMs = Math.max(0, nowMs - createdAtMs)
   return `${(elapsedMs / 1000).toFixed(precision.value)}s`
 })
 </script>

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

@@ -324,6 +324,7 @@
                 :created-at="record.created_at"
                 :status="getDisplayStatus(record)"
                 :response-time-ms="record.response_time_ms ?? null"
+                :display-now-ms="displayNowMs ?? null"
               />
             </span>
             <span
@@ -940,6 +941,7 @@
                   :created-at="record.created_at"
                   :status="getDisplayStatus(record)"
                   :response-time-ms="record.response_time_ms ?? null"
+                  :display-now-ms="displayNowMs ?? null"
                 />
               </span>
             </div>
@@ -1114,6 +1116,7 @@ const props = defineProps<{
   pageSizeOptions: number[]
   // 自动刷新
   autoRefresh: boolean
+  displayNowMs?: number | null
 }>()
 
 const emit = defineEmits<{

frontend/src/features/usage/components/__tests__/ElapsedTimeText.spec.ts

@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { createApp, type App } from 'vue'
+import ElapsedTimeText from '../ElapsedTimeText.vue'
+
+const mountedApps: Array<{ app: App, root: HTMLElement }> = []
+
+function mountElapsedTimeText(props: Record<string, unknown>) {
+  const root = document.createElement('div')
+  document.body.appendChild(root)
+
+  const app = createApp(ElapsedTimeText, props)
+  app.mount(root)
+  mountedApps.push({ app, root })
+  return root
+}
+
+afterEach(() => {
+  for (const { app, root } of mountedApps.splice(0)) {
+    app.unmount()
+    root.remove()
+  }
+})
+
+describe('ElapsedTimeText', () => {
+  it('uses the supplied display clock for active requests', () => {
+    const root = mountElapsedTimeText({
+      createdAt: '2026-05-28T12:00:00Z',
+      status: 'streaming',
+      responseTimeMs: 10_000,
+      displayNowMs: Date.parse('2026-05-28T12:00:40Z'),
+    })
+
+    expect(root.textContent).toBe('40.00s')
+  })
+
+  it('keeps terminal requests pinned to the backend final duration', () => {
+    const root = mountElapsedTimeText({
+      createdAt: '2026-05-28T12:00:00Z',
+      status: 'completed',
+      responseTimeMs: 42_340,
+      displayNowMs: Date.parse('2026-05-28T12:01:30Z'),
+    })
+
+    expect(root.textContent).toBe('42.34s')
+  })
+
+  it('clamps active elapsed time at zero when the display clock is behind', () => {
+    const root = mountElapsedTimeText({
+      createdAt: '2026-05-28T12:00:40Z',
+      status: 'pending',
+      displayNowMs: Date.parse('2026-05-28T12:00:00Z'),
+    })
+
+    expect(root.textContent).toBe('0.00s')
+  })
+})

frontend/src/features/usage/components/__tests__/UsageRecordsTable.spec.ts

@@ -91,8 +91,16 @@ vi.mock('lucide-vue-next', async () => {
 vi.mock('../ElapsedTimeText.vue', () => ({
   default: defineComponent({
     name: 'ElapsedTimeTextStub',
-    setup() {
-      return () => h('span', 'elapsed')
+    props: {
+      displayNowMs: {
+        type: Number,
+        default: null,
+      },
+    },
+    setup(props) {
+      return () => h('span', {
+        'data-display-now-ms': props.displayNowMs == null ? '' : String(props.displayNowMs),
+      }, 'elapsed')
     },
   }),
 }))
@@ -243,6 +251,16 @@ describe('UsageRecordsTable', () => {
     expect(root.querySelector('[data-active-latency-state="waiting-first-byte"]')).toBeNull()
   })
 
+  it('passes the shared display clock to active elapsed text', () => {
+    const root = mountUsageRecordsTable([buildRecord({
+      status: 'streaming',
+      response_time_ms: null,
+      first_byte_time_ms: 500,
+    })], { displayNowMs: 1_779_999_000_000 })
+
+    expect(root.querySelector('[data-display-now-ms="1779999000000"]')).not.toBeNull()
+  })
+
   it('shows failed when Codex image progress fails before the usage record finalizes', () => {
     const root = mountUsageRecordsTable([buildRecord({
       status: 'pending',

frontend/src/views/shared/Usage.vue

@@ -100,6 +100,7 @@
       :total-records="effectiveTotalRecords"
       :page-size-options="pageSizeOptions"
       :auto-refresh="globalAutoRefresh"
+      :display-now-ms="calibratedDisplayNowMs"
       @update:time-range="handleTimeRangeChange"
       @update:filter-search="handleFilterSearchChange"
       @update:filter-user="handleFilterUserChange"
@@ -247,6 +248,8 @@ const {
   availableProviders,
   loadStats,
   loadRecords,
+  serverClockOffsetMs,
+  hasServerClockOffset,
   updateServerClockOffset
 } = useUsageData({ isAdminPage })
 
@@ -435,8 +438,10 @@ const AUTO_REFRESH_INTERVAL = 1000 // 1秒刷新一次（用于活跃请求）
 const ACTIVE_DISCOVERY_HOT_INTERVAL = 1000 // 有活跃请求时 1 秒扫描一次
 const ACTIVE_DISCOVERY_IDLE_INTERVAL = 5000 // 空闲时降频，避免后台持续刷日志
 const GLOBAL_AUTO_REFRESH_INTERVAL = 3000 // 3秒刷新一次（全局自动刷新）
+const ACTIVE_ELAPSED_DISPLAY_INTERVAL = 250 // 共享显示时钟，避免每行单独动画
 const globalAutoRefresh = ref(false) // 全局自动刷新开关（默认关闭）
 const isPageVisible = ref(typeof document === 'undefined' ? true : !document.hidden)
+const displayNowMs = ref(Date.now())
 
 // 轮询活跃请求状态（轻量级，只更新状态变化的记录）
 
@@ -719,8 +724,10 @@ function handleVisibilityChange() {
     stopAutoRefresh()
     stopActiveDiscovery()
     stopGlobalAutoRefresh()
+    stopActiveElapsedDisplayTimer()
     return
   }
+  syncActiveElapsedDisplayTimer()
   if (hasActiveRequests.value) {
     startAutoRefresh()
   }
@@ -737,6 +744,7 @@ onUnmounted(() => {
   stopAutoRefresh()
   stopActiveDiscovery()
   stopGlobalAutoRefresh()
+  stopActiveElapsedDisplayTimer()
 })
 
 // 用户页面的前端分页（后端一次性返回所有记录，前端分页+筛选）
@@ -760,6 +768,51 @@ const effectiveTotalRecords = computed(() => {
 // 显示的记录
 const displayRecords = computed(() => paginatedRecords.value)
 
+const hasVisibleActiveRecords = computed(() => {
+  return displayRecords.value.some((record) => {
+    const displayStatus = resolveDisplayRequestStatus(record)
+    return displayStatus === 'pending' || displayStatus === 'streaming'
+  })
+})
+
+const calibratedDisplayNowMs = computed(() => {
+  return hasServerClockOffset.value
+    ? displayNowMs.value + serverClockOffsetMs.value
+    : displayNowMs.value
+})
+
+let activeElapsedDisplayTimer: ReturnType<typeof setInterval> | null = null
+
+function tickActiveElapsedDisplay() {
+  displayNowMs.value = Date.now()
+}
+
+function startActiveElapsedDisplayTimer() {
+  if (activeElapsedDisplayTimer) return
+  if (!isPageVisible.value || !hasVisibleActiveRecords.value) return
+  tickActiveElapsedDisplay()
+  activeElapsedDisplayTimer = setInterval(tickActiveElapsedDisplay, ACTIVE_ELAPSED_DISPLAY_INTERVAL)
+}
+
+function stopActiveElapsedDisplayTimer() {
+  if (activeElapsedDisplayTimer) {
+    clearInterval(activeElapsedDisplayTimer)
+    activeElapsedDisplayTimer = null
+  }
+}
+
+function syncActiveElapsedDisplayTimer() {
+  if (isPageVisible.value && hasVisibleActiveRecords.value) {
+    startActiveElapsedDisplayTimer()
+  } else {
+    stopActiveElapsedDisplayTimer()
+  }
+}
+
+watch(hasVisibleActiveRecords, () => {
+  syncActiveElapsedDisplayTimer()
+}, { immediate: true })
+
 const availableClientFamilies = computed(() => {
   const families = new Set<string>()
   currentRecords.value.forEach((record) => {