feat(ui): enhance ChannelsTable and CommonLogs components with improved UI elements

web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
-import { Route, CircleAlert, Sparkles, KeyRound } from 'lucide-react'
+import { CircleAlert, Sparkles, KeyRound } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { formatBillingCurrencyFromUSD } from '@/lib/currency'
 import {
@@ -10,11 +10,6 @@ import {
 } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
 import {
   Tooltip,
   TooltipContent,
@@ -25,8 +20,6 @@ import { DataTableColumnHeader } from '@/components/data-table'
 import {
   StatusBadge,
   type StatusBadgeProps,
-  dotColorMap,
-  textColorMap,
 } from '@/components/status-badge'
 import type { UsageLog } from '../../data/schema'
 import {
@@ -47,6 +40,7 @@ import {
 } from '../../lib/utils'
 import type { LogOtherData } from '../../types'
 import { DetailsDialog } from '../dialogs/details-dialog'
+import { ModelBadge } from '../model-badge'
 import { useUsageLogsContext } from '../usage-logs-provider'
 
 interface DetailSegment {
@@ -445,10 +439,20 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
       const tokenName = log.token_name
       if (!tokenName) return null
 
+      const other = parseLogOther(log.other)
       const displayName = sensitiveVisible ? tokenName : '••••'
+      let group = log.group
+      if (!group) group = other?.group || ''
+
+      const metaParts: string[] = []
+      const groupRatioText = getGroupRatioText(other)
+      if (group) {
+        metaParts.push(sensitiveVisible ? group : '••••')
+      }
+      if (groupRatioText) metaParts.push(groupRatioText)
 
       return (
-        <div className='max-w-[120px]'>
+        <div className='flex max-w-[150px] flex-col gap-0.5'>
           <StatusBadge
             label={displayName}
             icon={KeyRound}
@@ -457,6 +461,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
             showDot={false}
             className='max-w-full overflow-hidden rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono text-foreground'
           />
+          {metaParts.length > 0 && (
+            <span className='text-muted-foreground/60 truncate text-[11px]'>
+              {metaParts.join(' · ')}
+            </span>
+          )}
         </div>
       )
     },
@@ -471,81 +480,17 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
         <DataTableColumnHeader column={column} title={t('Model')} />
       ),
       cell: function ModelCell({ row }) {
-        const { sensitiveVisible } = useUsageLogsContext()
         const log = row.original
         if (!isDisplayableLogType(log.type)) return null
 
         const modelInfo = formatModelName(log)
-        const other = parseLogOther(log.other)
-        let group = log.group
-        if (!group) group = other?.group || ''
-
-        const badgeClass =
-          'truncate rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono'
-
-        const modelBadge = modelInfo.isMapped ? (
-          <Popover>
-            <PopoverTrigger asChild>
-              <button
-                type='button'
-                className='inline-flex items-center gap-1'
-              >
-                <StatusBadge
-                  label={modelInfo.name}
-                  autoColor={modelInfo.name}
-                  copyText={modelInfo.name}
-                  size='sm'
-                  className={badgeClass}
-                />
-                <Route className='text-muted-foreground size-3 shrink-0' />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent className='w-72'>
-              <div className='space-y-2'>
-                <div className='flex items-start justify-between gap-3'>
-                  <span className='text-muted-foreground text-xs'>
-                    {t('Request Model:')}
-                  </span>
-                  <span className='truncate font-mono text-xs font-medium'>
-                    {modelInfo.name}
-                  </span>
-                </div>
-                <div className='flex items-start justify-between gap-3'>
-                  <span className='text-muted-foreground text-xs'>
-                    {t('Actual Model:')}
-                  </span>
-                  <span className='truncate font-mono text-xs font-medium'>
-                    {modelInfo.actualModel}
-                  </span>
-                </div>
-              </div>
-            </PopoverContent>
-          </Popover>
-        ) : (
-          <StatusBadge
-            label={modelInfo.name}
-            autoColor={modelInfo.name}
-            copyText={modelInfo.name}
-            size='sm'
-            className={badgeClass}
-          />
-        )
-
-        const metaParts: string[] = []
-        const groupRatioText = getGroupRatioText(other)
-        if (group) {
-          metaParts.push(sensitiveVisible ? group : '••••')
-        }
-        if (groupRatioText) metaParts.push(groupRatioText)
 
         return (
           <div className='flex max-w-[220px] flex-col gap-0.5'>
-            {modelBadge}
-            {metaParts.length > 0 && (
-              <span className='text-muted-foreground/60 truncate text-[11px]'>
-                {metaParts.join(' · ')}
-              </span>
-            )}
+            <ModelBadge
+              modelName={modelInfo.name}
+              actualModel={modelInfo.actualModel}
+            />
           </div>
         )
       },
@@ -576,11 +521,21 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
 
         const pillBg: Record<string, string> = {
           success:
-            'border border-emerald-200/60 bg-emerald-50/50 dark:border-emerald-800/50 dark:bg-emerald-950/20',
+            'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
           warning:
-            'border border-amber-200/60 bg-amber-50/50 dark:border-amber-800/50 dark:bg-amber-950/20',
+            'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
           danger:
-            'border border-rose-200/70 bg-rose-50/60 dark:border-rose-800/50 dark:bg-rose-950/25',
+            'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
+        }
+        const pillText: Record<string, string> = {
+          success: 'text-emerald-700/85 dark:text-emerald-400/85',
+          warning: 'text-amber-700/85 dark:text-amber-400/85',
+          danger: 'text-rose-700/85 dark:text-rose-400/85',
+        }
+        const pillDot: Record<string, string> = {
+          success: 'bg-emerald-500/80',
+          warning: 'bg-amber-500/80',
+          danger: 'bg-rose-500/80',
         }
 
         return (
@@ -590,13 +545,13 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                 className={cn(
                   'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
                   pillBg[timeVariant],
-                  textColorMap[timeVariant]
+                  pillText[timeVariant]
                 )}
               >
                 <span
                   className={cn(
                     'size-1.5 shrink-0 rounded-full',
-                    dotColorMap[timeVariant]
+                    pillDot[timeVariant]
                   )}
                   aria-hidden='true'
                 />
@@ -607,7 +562,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   className={cn(
                     'inline-flex items-center rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
                     pillBg[frtVariant!],
-                    textColorMap[frtVariant!]
+                    pillText[frtVariant!]
                   )}
                 >
                   {formatUseTime(frt / 1000)}

web/default/src/features/usage-logs/components/common-logs-stats.tsx

@@ -12,6 +12,22 @@ import { useUsageLogsContext } from './usage-logs-provider'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
 
+function StatBadge(props: {
+  label: string
+  value: string | number
+  accent: string
+}) {
+  return (
+    <span className='inline-flex h-7 items-center gap-2 rounded-md border border-border/60 bg-muted/25 px-2.5 text-xs shadow-xs'>
+      <span className={cn('h-3.5 w-0.5 rounded-full', props.accent)} />
+      <span className='text-muted-foreground'>{props.label}</span>
+      <span className='font-mono font-semibold tabular-nums text-foreground/85'>
+        {props.value}
+      </span>
+    </span>
+  )
+}
+
 export function CommonLogsStats() {
   const { t } = useTranslation()
   const isAdmin = useIsAdmin()
@@ -50,36 +66,23 @@ export function CommonLogsStats() {
     )
   }
 
-  const tagClass =
-    'inline-flex h-7 items-center rounded-md border px-3 py-1 text-xs font-medium shadow-xs'
-
   return (
     <div className='flex flex-wrap items-center gap-2'>
-      <span
-        className={cn(
-          tagClass,
-          'border-blue-200/70 bg-blue-50 text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300'
-        )}
-      >
-        {t('Usage')}:{' '}
-        {sensitiveVisible ? formatLogQuota(stats?.quota || 0) : '••••'}
-      </span>
-      <span
-        className={cn(
-          tagClass,
-          'border-pink-200/70 bg-pink-50 text-pink-700 dark:border-pink-500/20 dark:bg-pink-500/10 dark:text-pink-300'
-        )}
-      >
-        {t('RPM')}: {stats?.rpm || 0}
-      </span>
-      <span
-        className={cn(
-          tagClass,
-          'border-border bg-background text-muted-foreground'
-        )}
-      >
-        {t('TPM')}: {stats?.tpm || 0}
-      </span>
+      <StatBadge
+        label={t('Usage')}
+        value={sensitiveVisible ? formatLogQuota(stats?.quota || 0) : '••••'}
+        accent='bg-sky-500/70'
+      />
+      <StatBadge
+        label={t('RPM')}
+        value={stats?.rpm || 0}
+        accent='bg-rose-500/65'
+      />
+      <StatBadge
+        label={t('TPM')}
+        value={stats?.tpm || 0}
+        accent='bg-slate-400/70'
+      />
     </div>
   )
 }

web/default/src/features/usage-logs/components/model-badge.tsx

@@ -0,0 +1,144 @@
+import { Route } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { getLobeIcon } from '@/lib/lobe-icon'
+import { cn } from '@/lib/utils'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { StatusBadge } from '@/components/status-badge'
+
+interface ModelBadgeProps {
+  modelName: string
+  actualModel?: string
+  className?: string
+}
+
+interface ModelProvider {
+  icon: string
+  label: string
+}
+
+function resolveModelProvider(modelName: string): ModelProvider | null {
+  const model = modelName.toLowerCase()
+  const hasAny = (keywords: string[]) =>
+    keywords.some((keyword) => model.includes(keyword))
+
+  if (
+    hasAny([
+      'gpt-',
+      'chatgpt-',
+      'text-embedding-',
+      'omni-moderation',
+      'dall-e',
+      'whisper',
+      'tts-',
+    ]) ||
+    /\bo[134](?:-|$)/.test(model)
+  ) {
+    return { icon: 'OpenAI.Color', label: 'OpenAI' }
+  }
+  if (hasAny(['claude-', 'anthropic'])) {
+    return { icon: 'Claude.Color', label: 'Claude' }
+  }
+  if (hasAny(['gemini-', 'learnlm-'])) {
+    return { icon: 'Gemini.Color', label: 'Gemini' }
+  }
+  if (hasAny(['grok-', 'xai-'])) {
+    return { icon: 'Grok.Color', label: 'Grok' }
+  }
+  if (hasAny(['deepseek-'])) {
+    return { icon: 'DeepSeek.Color', label: 'DeepSeek' }
+  }
+  if (hasAny(['qwen', 'qwq-'])) {
+    return { icon: 'Qwen.Color', label: 'Qwen' }
+  }
+  if (hasAny(['doubao-', 'volcengine'])) {
+    return { icon: 'Doubao.Color', label: 'Doubao' }
+  }
+  if (hasAny(['moonshot-', 'kimi-'])) {
+    return { icon: 'Moonshot.Color', label: 'Moonshot' }
+  }
+  if (hasAny(['mistral-', 'mixtral-'])) {
+    return { icon: 'Mistral.Color', label: 'Mistral' }
+  }
+  if (hasAny(['llama-', 'meta-'])) {
+    return { icon: 'Meta.Color', label: 'Meta' }
+  }
+  if (hasAny(['command-', 'cohere-'])) {
+    return { icon: 'Cohere.Color', label: 'Cohere' }
+  }
+
+  return null
+}
+
+function ModelBadgeContent(props: ModelBadgeProps) {
+  const provider = resolveModelProvider(props.modelName)
+
+  return (
+    <StatusBadge
+      copyText={props.modelName}
+      size='sm'
+      showDot={!provider}
+      autoColor={provider ? undefined : props.modelName}
+      className={cn(
+        'rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono',
+        provider && 'text-foreground',
+        props.className
+      )}
+    >
+      <span className='flex items-center gap-1.5'>
+        {provider && (
+          <span
+            className='flex size-3.5 shrink-0 items-center justify-center'
+            title={provider.label}
+            aria-label={provider.label}
+          >
+            {getLobeIcon(provider.icon, 14)}
+          </span>
+        )}
+        <span>{props.modelName}</span>
+      </span>
+    </StatusBadge>
+  )
+}
+
+export function ModelBadge(props: ModelBadgeProps) {
+  const { t } = useTranslation()
+
+  if (!props.actualModel) {
+    return <ModelBadgeContent {...props} />
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button type='button' className='inline-flex items-center gap-1'>
+          <ModelBadgeContent {...props} />
+          <Route className='text-muted-foreground size-3 shrink-0' />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className='w-72'>
+        <div className='space-y-2'>
+          <div className='flex items-start justify-between gap-3'>
+            <span className='text-muted-foreground text-xs'>
+              {t('Request Model:')}
+            </span>
+            <span className='truncate font-mono text-xs font-medium'>
+              {props.modelName}
+            </span>
+          </div>
+          <div className='flex items-start justify-between gap-3'>
+            <span className='text-muted-foreground text-xs'>
+              {t('Actual Model:')}
+            </span>
+            <span className='truncate font-mono text-xs font-medium'>
+              {props.actualModel}
+            </span>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}