From 1414569b636c1e66bf88df2d27d82df5f252973e Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Thu, 18 Jun 2026 12:13:53 +0800
Subject: [PATCH] feat(stat): enhance log stat cards with compact number
 formatting and improved layout

---
 .../components/models/log-stat-cards.tsx      | 61 ++++++++++++++-----
 .../pricing/components/model-perf-badge.tsx   |  4 +-
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/web/default/src/features/dashboard/components/models/log-stat-cards.tsx b/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
index 5466ed40..92431560 100644
--- a/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
+++ b/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
@@ -18,8 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import { useEffect, useState } from 'react'
 import { useAuthStore } from '@/stores/auth-store'
-import { formatNumber, formatQuota } from '@/lib/format'
+import { formatCompactNumber, formatNumber, formatQuota } from '@/lib/format'
 import { computeTimeRange } from '@/lib/time'
+import { cn } from '@/lib/utils'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getUserQuotaDates } from '@/features/dashboard/api'
 import { useModelStatCardsConfig } from '@/features/dashboard/hooks/use-dashboard-config'
@@ -38,6 +39,21 @@ interface LogStatCardsProps {
   onDataUpdate?: (data: QuotaDataItem[], loading: boolean) => void
 }
 
+const MAX_INLINE_STAT_CHARS = 9
+
+function formatStatNumber(value: number) {
+  const fullValue = formatNumber(value)
+  const displayValue =
+    fullValue.length > MAX_INLINE_STAT_CHARS
+      ? formatCompactNumber(value)
+      : fullValue
+
+  return {
+    displayValue,
+    fullValue,
+  }
+}
+
 export function LogStatCards(props: LogStatCardsProps) {
   const statCardsConfig = useModelStatCardsConfig()
   const user = useAuthStore((state) => state.auth.user)
@@ -100,27 +116,41 @@ export function LogStatCards(props: LogStatCardsProps) {
     tpm: stats?.totalTokens ?? 0,
   }
 
-  const items = statCardsConfig.map((config) => ({
-    title: config.title,
-    value:
+  const items = statCardsConfig.map((config) => {
+    const rawValue = config.getValue(adaptedStats, timeRangeMinutes)
+    const formatted =
       config.key === 'quota'
-        ? formatQuota(config.getValue(adaptedStats, timeRangeMinutes))
-        : formatNumber(config.getValue(adaptedStats, timeRangeMinutes)),
-    desc: config.description,
-    icon: config.icon,
-  }))
+        ? {
+            displayValue: formatQuota(rawValue),
+            fullValue: formatQuota(rawValue),
+          }
+        : formatStatNumber(rawValue)
+
+    return {
+      title: config.title,
+      value: formatted.displayValue,
+      fullValue: formatted.fullValue,
+      desc: config.description,
+      icon: config.icon,
+    }
+  })
 
   return (
     <div className='overflow-hidden rounded-lg border'>
-      <div className='divide-border/60 grid grid-cols-2 divide-x sm:grid-cols-3 lg:grid-cols-5'>
+      <div className='divide-border/60 grid min-w-0 grid-cols-2 divide-x sm:grid-cols-3 lg:grid-cols-5'>
         {items.map((it, idx) => {
           const Icon = it.icon
           return (
             <div
               key={it.title}
-              className={`px-3 py-2.5 sm:px-5 sm:py-4 ${idx === items.length - 1 && items.length % 2 !== 0 ? 'col-span-2 sm:col-span-1' : ''}`}
+              className={cn(
+                'min-w-0 px-3 py-2.5 sm:px-5 sm:py-4',
+                idx === items.length - 1 &&
+                  items.length % 2 !== 0 &&
+                  'col-span-2 sm:col-span-1'
+              )}
             >
-              <div className='flex items-center gap-2'>
+              <div className='flex min-w-0 items-center gap-2'>
                 <Icon className='text-muted-foreground/60 size-3.5 shrink-0' />
                 <div className='text-muted-foreground truncate text-xs font-medium tracking-wider uppercase'>
                   {it.title}
@@ -128,7 +158,7 @@ export function LogStatCards(props: LogStatCardsProps) {
               </div>
 
               {loading ? (
-                <div className='mt-2 space-y-1.5'>
+                <div className='mt-2 flex flex-col gap-1.5'>
                   <Skeleton className='h-7 w-20' />
                   <Skeleton className='h-3.5 w-28' />
                 </div>
@@ -143,7 +173,10 @@ export function LogStatCards(props: LogStatCardsProps) {
                 </>
               ) : (
                 <>
-                  <div className='text-foreground mt-1.5 font-mono text-lg font-bold tracking-tight tabular-nums sm:mt-2 sm:text-2xl'>
+                  <div
+                    className='text-foreground mt-1.5 max-w-full truncate font-mono text-lg font-bold tracking-tight tabular-nums sm:mt-2 sm:text-2xl'
+                    title={it.fullValue}
+                  >
                     {it.value}
                   </div>
                   <div className='text-muted-foreground/60 mt-1 hidden text-xs md:block'>
diff --git a/web/default/src/features/pricing/components/model-perf-badge.tsx b/web/default/src/features/pricing/components/model-perf-badge.tsx
index 5176836a..010fd83d 100644
--- a/web/default/src/features/pricing/components/model-perf-badge.tsx
+++ b/web/default/src/features/pricing/components/model-perf-badge.tsx
@@ -45,8 +45,8 @@ function formatCompactLatency(ms: number): string {
 
 function formatCompactThroughput(tps: number): string {
   if (!Number.isFinite(tps) || tps <= 0) return '—'
-  if (tps >= 1_000) return `${formatCompactNumber(tps / 1_000)}Ktps`
-  return `${formatCompactNumber(tps)}tps`
+  if (tps >= 1_000) return `${formatCompactNumber(tps / 1_000)}Kt`
+  return `${formatCompactNumber(tps)}t`
 }
 
 export const ModelPerfBadge = memo(function ModelPerfBadge(