feat(console): latency block with output TPS on Logs and Access (#430)

Merge Logs Latency/TTFT into a three-row Timing column (首字 / 总耗时 / 输出 TPS)
and reuse the same LatencyStats block under Access assistant replies. Derive
tok/s client-side from completion_tokens over the post-TTFT generation window
when streaming, with total-latency fallback.

Co-authored-by: caigee-cmd <210803857+caigee-cmd@users.noreply.github.com>

Author: caigee-cmd

frontend/src/components/access/ChatMessage.tsx

@@ -5,6 +5,7 @@ import { CopySimple, FileText } from '@phosphor-icons/react'
 import { useI18n } from '@/hooks/useI18n'
 import { copyText } from '@/lib/clipboard'
 import { formatCompact, formatCredits } from '@/lib/format'
+import { LatencyStats } from '@/components/ui/LatencyStats'
 import { duration, ease, gsap, prefersReducedMotion } from '@/lib/motion'
 import { ThinkingBlock } from './ThinkingBlock'
 import { ToolCallList } from './ToolCallCard'
@@ -126,6 +127,10 @@ export function ChatMessageView({ message }: { message: ThreadMessage }) {
   const showSkeleton = message.status === 'streaming' && !message.content && !message.reasoning && !message.toolCalls?.length
   const canCopy = Boolean(message.content) && message.status === 'done'
   const streaming = message.status === 'streaming'
+  const showUsage = Boolean(message.usage && message.usage.credits != null)
+  const showLatency =
+    message.status === 'done' &&
+    (message.latency_ms != null || message.ttfb_ms != null || typeof message.usage?.completion_tokens === 'number')
 
   async function onCopy() {
     if (!message.content) return
@@ -158,19 +163,35 @@ export function ChatMessageView({ message }: { message: ThreadMessage }) {
           <ContentSegments text={message.content} streaming={streaming} />
         </div>
       ) : null}
-      {(canCopy || (message.usage && message.usage.credits != null)) ? (
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-0.5">
-          {canCopy ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-1 text-caption text-muted hover:text-foreground"
-              onClick={() => void onCopy()}
-            >
-              <CopySimple size={12} />
-              {copied ? t('copied') : t('copy')}
-            </button>
+      {(canCopy || showUsage || showLatency) ? (
+        <div className="space-y-1.5 px-0.5">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            {canCopy ? (
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 text-caption text-muted hover:text-foreground"
+                onClick={() => void onCopy()}
+              >
+                <CopySimple size={12} />
+                {copied ? t('copied') : t('copy')}
+              </button>
+            ) : null}
+            <UsageFoot message={message} />
+          </div>
+          {showLatency ? (
+            <LatencyStats
+              latencyMs={message.latency_ms}
+              ttfbMs={message.ttfb_ms}
+              completionTokens={message.usage?.completion_tokens}
+              stream
+              labels={{
+                heading: t('logsColLatency'),
+                ttft: t('logsColTTFT'),
+                total: t('logsLatencyTotal'),
+                tps: t('logsOutputTPS'),
+              }}
+            />
           ) : null}
-          <UsageFoot message={message} />
         </div>
       ) : null}
     </div>

frontend/src/components/access/demoSeed.ts

@@ -54,6 +54,8 @@ export function buildDemoThread(): ThreadMessage[] {
       ],
       reasoningOpen: false,
       usage: { credits: 0.75, prompt_tokens: 1840, completion_tokens: 126, source: 'upstream' },
+      ttfb_ms: 380,
+      latency_ms: 2140,
       status: 'done',
     },
   ]

frontend/src/components/access/types.ts

@@ -37,6 +37,10 @@ export type ThreadMessage = {
   toolCalls?: ChatToolCall[]
   /** Per-turn usage from the stream; show credits only when set. */
   usage?: ThreadMessageUsage
+  /** Client-measured TTFT (ms) from stream start to first content/reasoning chunk. */
+  ttfb_ms?: number
+  /** Client-measured total stream duration (ms). */
+  latency_ms?: number
   status: 'pending' | 'streaming' | 'done' | 'error'
   error?: string
 }

frontend/src/components/ui/LatencyStats.tsx

@@ -0,0 +1,62 @@
+import { formatLatency, computeOutputTokensPerSecond, formatTokensPerSecond } from '@/lib/format'
+
+export type LatencyStatsLabels = {
+  /** Optional block heading (e.g. 延迟). Column headers already cover this in tables. */
+  heading?: string
+  ttft: string
+  total: string
+  tps: string
+}
+
+export type LatencyStatsProps = {
+  latencyMs?: number | null
+  ttfbMs?: number | null
+  completionTokens?: number | null
+  /** When true/undefined, prefer generation window (latency − TTFT). */
+  stream?: boolean | null
+  labels: LatencyStatsLabels
+  className?: string
+}
+
+/**
+ * Three-row latency block: TTFT / total / output TPS.
+ * Grayscale Studio Admin tokens — muted labels, mono values, soft left rule.
+ */
+export function LatencyStats({
+  latencyMs,
+  ttfbMs,
+  completionTokens,
+  stream,
+  labels,
+  className = '',
+}: LatencyStatsProps) {
+  const tps = formatTokensPerSecond(
+    computeOutputTokensPerSecond({
+      completionTokens,
+      latencyMs,
+      ttfbMs,
+      stream,
+    }),
+  )
+  const rows: Array<[string, string]> = [
+    [labels.ttft, formatLatency(ttfbMs)],
+    [labels.total, formatLatency(latencyMs)],
+    [labels.tps, tps],
+  ]
+
+  return (
+    <div className={className}>
+      {labels.heading ? (
+        <div className="mb-1 text-caption font-medium text-muted">{labels.heading}</div>
+      ) : null}
+      <div className="border-l border-separator pl-2 leading-4">
+        {rows.map(([label, value]) => (
+          <div key={label} className="flex items-baseline gap-2 py-px">
+            <span className="shrink-0 text-caption text-muted">{label}</span>
+            <span className="mono text-xs text-foreground">{value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/i18n/messages.ts

@@ -271,6 +271,8 @@ export const messages: Record<Lang, Dict> = {
     logsColStatus: 'Status',
     logsColLatency: 'Latency',
     logsColTTFT: 'First token',
+    logsLatencyTotal: 'Total',
+    logsOutputTPS: 'Output TPS',
     logsColTokens: 'Tokens',
     logsTokensIn: 'in',
     logsTokensOut: 'out',
@@ -1188,6 +1190,8 @@ export const messages: Record<Lang, Dict> = {
     logsColStatus: '状态',
     logsColLatency: '延迟',
     logsColTTFT: '首字',
+    logsLatencyTotal: '总耗时',
+    logsOutputTPS: '输出 TPS',
     logsColTokens: 'Tokens',
     logsTokensIn: '输入',
     logsTokensOut: '输出',

frontend/src/lib/format.ts

@@ -73,3 +73,36 @@ export function formatCredits(value: number | null | undefined) {
   if (value >= 10_000) return formatCompact(value)
   return value.toLocaleString('zh-CN', { minimumFractionDigits: value < 100 ? 2 : 0, maximumFractionDigits: 2 })
 }
+
+/** Output generation rate (tok/s). Prefer post-TTFT window on streams. */
+export function computeOutputTokensPerSecond(opts: {
+  completionTokens?: number | null
+  latencyMs?: number | null
+  ttfbMs?: number | null
+  stream?: boolean | null
+}): number | null {
+  const completion = opts.completionTokens
+  const latency = opts.latencyMs
+  const ttfb = opts.ttfbMs
+  if (completion == null || !Number.isFinite(completion) || completion <= 0) return null
+  if (latency == null || !Number.isFinite(latency) || latency <= 0) return null
+
+  const preferGeneration =
+    opts.stream === true &&
+    ttfb != null &&
+    Number.isFinite(ttfb) &&
+    ttfb >= 0 &&
+    latency - ttfb > 0
+
+  const seconds = preferGeneration ? (latency - (ttfb as number)) / 1000 : latency / 1000
+  if (!(seconds > 0)) return null
+  const rate = completion / seconds
+  return Number.isFinite(rate) && rate > 0 ? rate : null
+}
+
+/** e.g. `39.7 tok/s`, integer when large; missing → `—`. */
+export function formatTokensPerSecond(rate: number | null | undefined) {
+  if (rate == null || !Number.isFinite(rate) || rate <= 0) return '—'
+  const text = rate >= 100 ? String(Math.round(rate)) : Number(rate.toFixed(1)).toString()
+  return `${text} tok/s`
+}

frontend/src/pages/AccessPage.tsx

@@ -279,30 +279,54 @@ export function AccessPage() {
     }
     const apiMessages = toApiMessages(history, apiUser)
 
+    const startedAt = performance.now()
+    let firstTokenAt: number | null = null
+    const markFirstToken = () => {
+      if (firstTokenAt == null) firstTokenAt = performance.now()
+    }
+    const timingPatch = (): Pick<ThreadMessage, 'ttfb_ms' | 'latency_ms'> => {
+      const endedAt = performance.now()
+      return {
+        latency_ms: Math.max(0, Math.round(endedAt - startedAt)),
+        ttfb_ms: firstTokenAt != null ? Math.max(0, Math.round(firstTokenAt - startedAt)) : undefined,
+      }
+    }
+
     try {
       await streamChat(selectedModel, apiMessages, selectedAccount || undefined, {
         signal: controller.signal,
-        onContent: (_chunk, full) => patchAssistant(assistantId, { content: full }),
-        onReasoning: (_chunk, full) => patchAssistant(assistantId, { reasoning: full }),
-        onToolCalls: (calls) => patchAssistant(assistantId, { toolCalls: mapToolCalls(calls, true) }),
+        onContent: (_chunk, full) => {
+          if (_chunk) markFirstToken()
+          patchAssistant(assistantId, { content: full })
+        },
+        onReasoning: (_chunk, full) => {
+          if (_chunk) markFirstToken()
+          patchAssistant(assistantId, { reasoning: full })
+        },
+        onToolCalls: (calls) => {
+          markFirstToken()
+          patchAssistant(assistantId, { toolCalls: mapToolCalls(calls, true) })
+        },
         onUsage: (usage) => patchAssistant(assistantId, { usage }),
       })
       patchAssistant(assistantId, (prev) => ({
         status: 'done',
+        ...timingPatch(),
         toolCalls: prev.toolCalls?.map((call) => ({ ...call, status: 'success' as const })),
       }))
       setChatState('success')
     } catch (error) {
       if (controller.signal.aborted) {
         patchAssistant(assistantId, (prev) => ({
           status: 'done',
+          ...timingPatch(),
           toolCalls: prev.toolCalls?.map((call) => ({ ...call, status: 'success' as const })),
         }))
         setChatState('success')
         return
       }
       const message = error instanceof Error ? error.message : String(error)
-      patchAssistant(assistantId, { status: 'error', error: message })
+      patchAssistant(assistantId, { status: 'error', error: message, ...timingPatch() })
       setChatState('error')
     } finally {
       if (chatAbortRef.current === controller) chatAbortRef.current = null

frontend/src/pages/LogsPage.tsx

@@ -36,6 +36,7 @@ import { FilterToggle } from '@/components/ui/FilterToggle'
 import { ListPager, type PageSize } from '@/components/ui/ListPager'
 import { PageAlert } from '@/components/ui/PageAlert'
 import { LogsPageSkeleton, LogsRequestListSkeleton, LogsRuntimeListSkeleton, SkeletonBlock } from '@/components/ui/PageSkeletons'
+import { LatencyStats } from '@/components/ui/LatencyStats'
 import { SearchBar } from '@/components/ui/SearchBar'
 import { dateValueToISO, isoToDateValue, TimeRangePicker, type DateRangeValue } from '@/components/ui/TimeRangePicker'
 import { useI18n } from '@/hooks/useI18n'
@@ -149,12 +150,6 @@ function RequestDetailSkeleton() {
   )
 }
 
-function formatLatency(ms?: number | null) {
-  if (ms == null) return '—'
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(1)}s`
-}
-
 function formatCredit(value?: number | null) {
   if (value == null || !Number.isFinite(value)) return '—'
   return String(Math.round(value * 10000) / 10000)
@@ -729,7 +724,6 @@ export function LogsPage() {
                       <Table.Column>{t('logsColStatus')}</Table.Column>
                       <Table.Column>{t('logsColStream')}</Table.Column>
                       <Table.Column>{t('logsColLatency')}</Table.Column>
-                      <Table.Column>{t('logsColTTFT')}</Table.Column>
                       <Table.Column>{t('logsColTokens')}</Table.Column>
                     </Table.Header>
                     <Table.Body>
@@ -764,8 +758,19 @@ export function LogsPage() {
                             {item.error_kind ? <div className="mono mt-1 text-caption text-muted">{item.error_kind}</div> : null}
                           </Table.Cell>
                           <Table.Cell><span className="text-xs text-muted">{item.stream ? t('logsStreamYes') : t('logsStreamNo')}</span></Table.Cell>
-                          <Table.Cell><span className="mono text-xs">{formatLatency(item.latency_ms)}</span></Table.Cell>
-                          <Table.Cell><span className="mono text-xs">{formatLatency(item.ttfb_ms)}</span></Table.Cell>
+                          <Table.Cell>
+                            <LatencyStats
+                              latencyMs={item.latency_ms}
+                              ttfbMs={item.ttfb_ms}
+                              completionTokens={item.completion_tokens}
+                              stream={item.stream}
+                              labels={{
+                                ttft: t('logsColTTFT'),
+                                total: t('logsLatencyTotal'),
+                                tps: t('logsOutputTPS'),
+                              }}
+                            />
+                          </Table.Cell>
                           <Table.Cell>
                             <TokenSplit
                               log={item}
@@ -975,8 +980,6 @@ export function LogsPage() {
                     [t('logsColReasoning'), selected ? (reasoningLabel(selected) || '—') : '—'],
                     [t('logsColProvider'), selected ? providerLabel(selected) : '—'],
                     [t('logsColAccount'), selected?.account_id ? (accountNameById.get(selected.account_id) || selected.account_id) : '—'],
-                    [t('logsColLatency'), formatLatency(selected?.latency_ms)],
-                    [t('logsColTTFT'), formatLatency(selected?.ttfb_ms)],
                     [t('logsColStream'), selected?.stream ? t('logsStreamYes') : t('logsStreamNo')],
                     [t('logsRouting'), selected ? routingLabel(selected.routing) : '—'],
                   ].map(([label, value]) => (
@@ -998,6 +1001,20 @@ export function LogsPage() {
                       ) : '—'}
                     </dd>
                   </div>
+                  <div className="sm:col-span-2">
+                    <LatencyStats
+                      latencyMs={selected?.latency_ms}
+                      ttfbMs={selected?.ttfb_ms}
+                      completionTokens={selected?.completion_tokens}
+                      stream={selected?.stream}
+                      labels={{
+                        heading: t('logsColLatency'),
+                        ttft: t('logsColTTFT'),
+                        total: t('logsLatencyTotal'),
+                        tps: t('logsOutputTPS'),
+                      }}
+                    />
+                  </div>
                 </dl>
                 {selected && selected.message_count ? (
                   <div className="rounded-lg bg-surface-secondary px-3 py-3 text-xs">