From a95655a245522a9d3b433f7fe3f7c2cb4424e99a Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Wed, 17 Jun 2026 22:28:36 +0800
Subject: [PATCH] feat(performance): implement success rate grading and enhance
 UI representation

---
 .../models/performance-overview.tsx           |  22 +-
 .../overview/performance-health-panel.tsx     |  22 +-
 .../performance-metrics/lib/format.ts         |  64 ++
 .../pricing/components/model-details-api.tsx  | 104 ----
 .../components/model-details-capabilities.tsx | 181 ------
 .../components/model-details-charts.tsx       |   7 +-
 .../components/model-details-modalities.tsx   | 160 -----
 .../components/model-details-performance.tsx  |  15 +-
 .../components/model-details-quick-stats.tsx  | 147 -----
 .../model-details-uptime-sparkline.tsx        |  25 +-
 .../pricing/components/model-details.tsx      | 439 +++++++++++---
 .../pricing/components/model-perf-badge.tsx   |   8 +-
 web/default/src/features/pricing/lib/index.ts |   1 -
 .../features/pricing/lib/model-metadata.ts    | 569 ------------------
 web/default/src/features/pricing/types.ts     |   6 +-
 .../components/redemptions-mutate-drawer.tsx  |  17 +-
 16 files changed, 447 insertions(+), 1340 deletions(-)
 delete mode 100644 web/default/src/features/pricing/components/model-details-capabilities.tsx
 delete mode 100644 web/default/src/features/pricing/components/model-details-modalities.tsx
 delete mode 100644 web/default/src/features/pricing/components/model-details-quick-stats.tsx
 delete mode 100644 web/default/src/features/pricing/lib/model-metadata.ts

diff --git a/web/default/src/features/dashboard/components/models/performance-overview.tsx b/web/default/src/features/dashboard/components/models/performance-overview.tsx
index 5e67bb8a..f5f424ad 100644
--- a/web/default/src/features/dashboard/components/models/performance-overview.tsx
+++ b/web/default/src/features/dashboard/components/models/performance-overview.tsx
@@ -27,6 +27,8 @@ import {
   formatLatency,
   formatThroughput,
   formatUptimePct,
+  getSuccessRateDotClass,
+  getSuccessRateTextClass,
 } from '@/features/performance-metrics/lib/format'
 import type { PerfModelSummary } from '@/features/performance-metrics/types'
 
@@ -79,20 +81,6 @@ function buildPerformanceSummary(rows: PerfModelSummary[]): PerformanceSummary {
   }
 }
 
-function successRateClassName(successRate: number): string {
-  if (!Number.isFinite(successRate)) return 'text-muted-foreground'
-  if (successRate >= 99.9) return 'text-success'
-  if (successRate >= 99) return 'text-warning'
-  return 'text-destructive'
-}
-
-function successDotClassName(successRate: number): string {
-  if (!Number.isFinite(successRate)) return 'bg-muted-foreground'
-  if (successRate >= 99.9) return 'bg-success'
-  if (successRate >= 99) return 'bg-warning'
-  return 'bg-destructive'
-}
-
 export function PerformanceOverview() {
   const { t } = useTranslation()
   const metricsQuery = useQuery({
@@ -152,7 +140,7 @@ export function PerformanceOverview() {
               icon={HeartPulse}
               label={t('Success rate')}
               value={formatUptimePct(summary.successRate)}
-              valueClassName={successRateClassName(summary.successRate)}
+              valueClassName={getSuccessRateTextClass(summary.successRate)}
             />
             <InlineMetric
               icon={Timer}
@@ -221,14 +209,14 @@ function ModelBadge(props: { model: PerfModelSummary }) {
       <span
         className={cn(
           'size-1.5 rounded-full',
-          successDotClassName(model.success_rate)
+          getSuccessRateDotClass(model.success_rate)
         )}
         aria-hidden='true'
       />
       <span
         className={cn(
           'font-mono text-[11px] font-semibold tabular-nums',
-          successRateClassName(model.success_rate)
+          getSuccessRateTextClass(model.success_rate)
         )}
       >
         {formatUptimePct(model.success_rate)}
diff --git a/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx b/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
index cbde734d..29cae5d6 100644
--- a/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
+++ b/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
@@ -27,6 +27,8 @@ import {
   formatLatency,
   formatThroughput,
   formatUptimePct,
+  getSuccessRateDotClass,
+  getSuccessRateTextClass,
 } from '@/features/performance-metrics/lib/format'
 import type { PerfModelSummary } from '@/features/performance-metrics/types'
 
@@ -51,20 +53,6 @@ function simpleAverage(
   return count > 0 ? total / count : NaN
 }
 
-function rateTextClass(rate: number): string {
-  if (!Number.isFinite(rate)) return 'text-muted-foreground'
-  if (rate >= 99.9) return 'text-success'
-  if (rate >= 99) return 'text-warning'
-  return 'text-destructive'
-}
-
-function rateDotClass(rate: number): string {
-  if (!Number.isFinite(rate)) return 'bg-muted-foreground'
-  if (rate >= 99.9) return 'bg-success'
-  if (rate >= 99) return 'bg-warning'
-  return 'bg-destructive'
-}
-
 export function PerformanceHealthPanel() {
   const { t } = useTranslation()
   const metricsQuery = useQuery({
@@ -121,7 +109,7 @@ export function PerformanceHealthPanel() {
             label={t('Success rate')}
             value={formatUptimePct(summary.successRate)}
             loading={loading}
-            valueClassName={rateTextClass(summary.successRate)}
+            valueClassName={getSuccessRateTextClass(summary.successRate)}
           />
           <MetricCell
             icon={Timer}
@@ -162,14 +150,14 @@ export function PerformanceHealthPanel() {
                       <span
                         className={cn(
                           'size-1.5 rounded-full',
-                          rateDotClass(model.success_rate)
+                          getSuccessRateDotClass(model.success_rate)
                         )}
                         aria-hidden='true'
                       />
                       <span
                         className={cn(
                           'font-mono text-[11px] font-semibold tabular-nums',
-                          rateTextClass(model.success_rate)
+                          getSuccessRateTextClass(model.success_rate)
                         )}
                       >
                         {formatUptimePct(model.success_rate)}
diff --git a/web/default/src/features/performance-metrics/lib/format.ts b/web/default/src/features/performance-metrics/lib/format.ts
index 5c6c5103..bae9985b 100644
--- a/web/default/src/features/performance-metrics/lib/format.ts
+++ b/web/default/src/features/performance-metrics/lib/format.ts
@@ -32,3 +32,67 @@ export function formatUptimePct(pct: number): string {
   if (!Number.isFinite(pct)) return '—'
   return `${pct.toFixed(2)}%`
 }
+
+export type SuccessRateLevel =
+  | 'excellent'
+  | 'good'
+  | 'warning'
+  | 'critical'
+  | 'unknown'
+
+const SUCCESS_RATE_EXCELLENT_MIN = 100
+const SUCCESS_RATE_GOOD_MIN = 90
+const SUCCESS_RATE_WARNING_MIN = 70
+
+/**
+ * Single source of truth for grading a success rate (0-100).
+ * - excellent: 100% (full green)
+ * - good: >= 90% (slightly lighter green)
+ * - warning: >= 70%
+ * - critical: below 70%
+ * - unknown: non-finite values
+ */
+export function getSuccessRateLevel(rate: number): SuccessRateLevel {
+  if (!Number.isFinite(rate)) return 'unknown'
+  if (rate >= SUCCESS_RATE_EXCELLENT_MIN) return 'excellent'
+  if (rate >= SUCCESS_RATE_GOOD_MIN) return 'good'
+  if (rate >= SUCCESS_RATE_WARNING_MIN) return 'warning'
+  return 'critical'
+}
+
+const SUCCESS_RATE_TEXT_CLASS: Record<SuccessRateLevel, string> = {
+  excellent: 'text-success',
+  good: 'text-success/70',
+  warning: 'text-warning',
+  critical: 'text-destructive',
+  unknown: 'text-muted-foreground',
+}
+
+const SUCCESS_RATE_DOT_CLASS: Record<SuccessRateLevel, string> = {
+  excellent: 'bg-success',
+  good: 'bg-success/60',
+  warning: 'bg-warning',
+  critical: 'bg-destructive',
+  unknown: 'bg-muted-foreground',
+}
+
+// Hex colors for non-CSS contexts (e.g. chart libraries that need raw values).
+const SUCCESS_RATE_HEX_COLOR: Record<SuccessRateLevel, string> = {
+  excellent: '#10b981', // emerald-500 (full green)
+  good: '#34d399', // emerald-400 (slightly lighter green)
+  warning: '#f59e0b', // amber-500
+  critical: '#ef4444', // red-500
+  unknown: '#9ca3af', // gray-400
+}
+
+export function getSuccessRateTextClass(rate: number): string {
+  return SUCCESS_RATE_TEXT_CLASS[getSuccessRateLevel(rate)]
+}
+
+export function getSuccessRateDotClass(rate: number): string {
+  return SUCCESS_RATE_DOT_CLASS[getSuccessRateLevel(rate)]
+}
+
+export function getSuccessRateColor(rate: number): string {
+  return SUCCESS_RATE_HEX_COLOR[getSuccessRateLevel(rate)]
+}
diff --git a/web/default/src/features/pricing/components/model-details-api.tsx b/web/default/src/features/pricing/components/model-details-api.tsx
index cb7833ba..ac29dc08 100644
--- a/web/default/src/features/pricing/components/model-details-api.tsx
+++ b/web/default/src/features/pricing/components/model-details-api.tsx
@@ -19,17 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
 import { useMemo, useState } from 'react'
 import {
   ChevronRight,
-  ExternalLink,
   Gauge,
   KeyRound,
   ScrollText,
-  ShieldCheck,
   Sigma,
   Zap,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import type { BundledLanguage } from 'shiki/bundle/web'
-import { cn } from '@/lib/utils'
 import { useStatus } from '@/hooks/use-status'
 import { Badge } from '@/components/ui/badge'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -48,7 +45,6 @@ import {
   type SupportedParameter,
 } from '../lib/mock-stats'
 import { replaceModelInPath } from '../lib/model-helpers'
-import { inferApiInfo } from '../lib/model-metadata'
 import type { PricingModel } from '../types'
 
 // ---------------------------------------------------------------------------
@@ -722,106 +718,6 @@ function RateLimitsSection(props: { model: PricingModel }) {
   )
 }
 
-// ---------------------------------------------------------------------------
-// Provider info card (vendor / tokenizer / license / privacy)
-// ---------------------------------------------------------------------------
-//
-// Exported separately so the Overview tab can render it alongside capabilities
-// and modalities (i.e. "what is this model?" rather than "how do I call it?").
-
-export function ModelDetailsProviderInfo(props: { model: PricingModel }) {
-  const { t } = useTranslation()
-  const info = useMemo(() => inferApiInfo(props.model), [props.model])
-
-  return (
-    <section>
-      <SectionTitle icon={ShieldCheck}>
-        {t('Provider & data privacy')}
-      </SectionTitle>
-
-      <div className='border-border/60 bg-border/60 grid grid-cols-1 gap-px overflow-hidden rounded-lg border sm:grid-cols-2'>
-        <InfoCell label={t('Provider')}>
-          <div className='flex items-center gap-1.5'>
-            <span className='text-sm font-medium'>{info.vendor_label}</span>
-            {info.homepage && (
-              <a
-                href={info.homepage}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='text-muted-foreground hover:text-foreground inline-flex items-center gap-0.5 text-[11px]'
-              >
-                {t('Docs')}
-                <ExternalLink className='size-3' />
-              </a>
-            )}
-          </div>
-        </InfoCell>
-
-        <InfoCell label={t('Tokenizer')}>
-          <div className='flex flex-col gap-0.5'>
-            <code className='font-mono text-xs'>{info.tokenizer}</code>
-            {info.tokenizer_note && (
-              <span className='text-muted-foreground text-[10px]'>
-                {info.tokenizer_note}
-              </span>
-            )}
-          </div>
-        </InfoCell>
-
-        <InfoCell label={t('License')}>
-          <div className='flex flex-col gap-1'>
-            <span className='text-sm'>{info.license}</span>
-            <Badge
-              variant='outline'
-              className={cn(
-                'h-4 w-fit px-1.5 text-[9px] font-medium',
-                info.license_kind === 'open' &&
-                  'border-emerald-500/40 text-emerald-600 dark:text-emerald-400',
-                info.license_kind === 'open-weight' &&
-                  'border-sky-500/40 text-sky-600 dark:text-sky-400',
-                info.license_kind === 'proprietary' &&
-                  'border-amber-500/40 text-amber-600 dark:text-amber-400'
-              )}
-            >
-              {info.license_kind === 'open'
-                ? t('Open source')
-                : info.license_kind === 'open-weight'
-                  ? t('Open weights')
-                  : info.license_kind === 'proprietary'
-                    ? t('Proprietary')
-                    : t('Unknown')}
-            </Badge>
-          </div>
-        </InfoCell>
-
-        <InfoCell label={t('Data retention')}>
-          <span className='text-sm'>
-            {info.data_retention_days === 0
-              ? t('Zero retention')
-              : `${info.data_retention_days} ${t('days')}`}
-          </span>
-          <span className='text-muted-foreground text-[10px]'>
-            {info.training_opt_out
-              ? t('Not used for upstream training by default')
-              : t('May be used for training by upstream provider')}
-          </span>
-        </InfoCell>
-      </div>
-    </section>
-  )
-}
-
-function InfoCell(props: { label: string; children: React.ReactNode }) {
-  return (
-    <div className='bg-card flex flex-col gap-1 px-3 py-2.5'>
-      <span className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
-        {props.label}
-      </span>
-      {props.children}
-    </div>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Authentication preview
 // ---------------------------------------------------------------------------
diff --git a/web/default/src/features/pricing/components/model-details-capabilities.tsx b/web/default/src/features/pricing/components/model-details-capabilities.tsx
deleted file mode 100644
index bccb1d67..00000000
--- a/web/default/src/features/pricing/components/model-details-capabilities.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import {
-  BookOpenCheck,
-  Braces,
-  Code2,
-  Database,
-  FileCode,
-  Globe,
-  type LucideIcon,
-  PanelTopOpen,
-  ScanEye,
-  Settings2,
-  Sparkles,
-  Workflow,
-  Zap,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import type { ModelCapability } from '../types'
-
-type CapabilityMeta = {
-  icon: LucideIcon
-  labelKey: string
-  descriptionKey: string
-}
-
-const CAPABILITY_META: Record<ModelCapability, CapabilityMeta> = {
-  function_calling: {
-    icon: Workflow,
-    labelKey: 'Function calling',
-    descriptionKey:
-      'Invoke developer-defined functions with structured arguments',
-  },
-  streaming: {
-    icon: Zap,
-    labelKey: 'Streaming',
-    descriptionKey: 'Stream tokens incrementally as they are generated',
-  },
-  vision: {
-    icon: ScanEye,
-    labelKey: 'Vision',
-    descriptionKey: 'Understand image inputs alongside text',
-  },
-  json_mode: {
-    icon: Braces,
-    labelKey: 'JSON mode',
-    descriptionKey: 'Force a syntactically valid JSON response',
-  },
-  structured_output: {
-    icon: FileCode,
-    labelKey: 'Structured output',
-    descriptionKey: 'Return data conforming to a JSON schema',
-  },
-  reasoning: {
-    icon: Sparkles,
-    labelKey: 'Reasoning',
-    descriptionKey: 'Multi-step thinking before final answer',
-  },
-  tools: {
-    icon: Settings2,
-    labelKey: 'Tools',
-    descriptionKey: 'Use external tools to extend capabilities',
-  },
-  system_prompt: {
-    icon: PanelTopOpen,
-    labelKey: 'System prompt',
-    descriptionKey: 'Steer behaviour with a system instruction',
-  },
-  web_search: {
-    icon: Globe,
-    labelKey: 'Web search',
-    descriptionKey: 'Search the public web at inference time',
-  },
-  code_interpreter: {
-    icon: Code2,
-    labelKey: 'Code interpreter',
-    descriptionKey: 'Execute code in a sandbox during the response',
-  },
-  caching: {
-    icon: Database,
-    labelKey: 'Prompt caching',
-    descriptionKey: 'Cache repeated prompt prefixes for cheaper, faster reuse',
-  },
-  embeddings: {
-    icon: BookOpenCheck,
-    labelKey: 'Embeddings',
-    descriptionKey: 'Return vector embeddings for inputs',
-  },
-}
-
-/**
- * Order capabilities for display. We put the most user-facing capabilities
- * first, then the rest. Anything not listed sinks to the bottom in a stable
- * order so the layout looks tidy across models.
- */
-const CAPABILITY_ORDER: ModelCapability[] = [
-  'streaming',
-  'function_calling',
-  'tools',
-  'json_mode',
-  'structured_output',
-  'vision',
-  'reasoning',
-  'caching',
-  'system_prompt',
-  'web_search',
-  'code_interpreter',
-  'embeddings',
-]
-
-function orderCapabilities(capabilities: ModelCapability[]): ModelCapability[] {
-  const set = new Set(capabilities)
-  const ordered = CAPABILITY_ORDER.filter((c) => set.has(c))
-  for (const c of capabilities) {
-    if (!ordered.includes(c)) ordered.push(c)
-  }
-  return ordered
-}
-
-export function ModelDetailsCapabilities(props: {
-  capabilities: ModelCapability[]
-}) {
-  const { t } = useTranslation()
-  const ordered = orderCapabilities(props.capabilities)
-
-  if (ordered.length === 0) {
-    return (
-      <p className='text-muted-foreground text-sm'>
-        {t('No capabilities reported for this model.')}
-      </p>
-    )
-  }
-
-  return (
-    <div className='grid grid-cols-2 gap-2 @md/details:grid-cols-3 @2xl/details:grid-cols-4'>
-      {ordered.map((capability) => {
-        const meta = CAPABILITY_META[capability]
-        if (!meta) return null
-        const Icon = meta.icon
-        return (
-          <div
-            key={capability}
-            className={cn(
-              'group flex items-start gap-2 rounded-lg border p-3 transition-colors',
-              'hover:bg-muted/30'
-            )}
-          >
-            <span className='bg-muted text-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-colors group-hover:bg-emerald-100 group-hover:text-emerald-700 dark:group-hover:bg-emerald-500/20 dark:group-hover:text-emerald-300'>
-              <Icon className='size-3.5' />
-            </span>
-            <div className='min-w-0 flex-1'>
-              <div className='text-foreground truncate text-xs font-semibold'>
-                {t(meta.labelKey)}
-              </div>
-              <p className='text-muted-foreground mt-0.5 line-clamp-2 text-[11px] leading-snug'>
-                {t(meta.descriptionKey)}
-              </p>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/web/default/src/features/pricing/components/model-details-charts.tsx b/web/default/src/features/pricing/components/model-details-charts.tsx
index 997af6ee..2b709017 100644
--- a/web/default/src/features/pricing/components/model-details-charts.tsx
+++ b/web/default/src/features/pricing/components/model-details-charts.tsx
@@ -24,6 +24,7 @@ import { useChartTheme } from '@/lib/use-chart-theme'
 import { cn } from '@/lib/utils'
 import { VCHART_OPTION } from '@/lib/vchart'
 import { useThemeCustomization } from '@/context/theme-customization-provider'
+import { getSuccessRateColor } from '@/features/performance-metrics/lib/format'
 import type { LatencyTimePoint, UptimeDayPoint } from '../lib/mock-stats'
 
 function formatHourLabel(iso: string): string {
@@ -229,11 +230,7 @@ export function UptimeTrendChart(props: {
           size: 5,
           stroke: '#ffffff',
           lineWidth: 1.5,
-          fill: (datum: { uptime: number }) => {
-            if (datum.uptime >= 99.9) return '#10b981'
-            if (datum.uptime >= 99.0) return '#f59e0b'
-            return '#ef4444'
-          },
+          fill: (datum: { uptime: number }) => getSuccessRateColor(datum.uptime),
         },
       },
       tooltip: {
diff --git a/web/default/src/features/pricing/components/model-details-modalities.tsx b/web/default/src/features/pricing/components/model-details-modalities.tsx
deleted file mode 100644
index d34ced69..00000000
--- a/web/default/src/features/pricing/components/model-details-modalities.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import {
-  FileText,
-  Image as ImageIcon,
-  Mic2,
-  Type as TypeIcon,
-  Video,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { StaticDataTable } from '@/components/data-table'
-import type { Modality } from '../types'
-
-type IconComponent = React.ComponentType<{ className?: string }>
-
-const MODALITY_META: Record<
-  Modality,
-  { icon: IconComponent; labelKey: string }
-> = {
-  text: { icon: TypeIcon, labelKey: 'Text' },
-  image: { icon: ImageIcon, labelKey: 'Image' },
-  audio: { icon: Mic2, labelKey: 'Audio' },
-  video: { icon: Video, labelKey: 'Video' },
-  file: { icon: FileText, labelKey: 'File' },
-}
-
-const ALL_MODALITIES: Modality[] = ['text', 'image', 'audio', 'video', 'file']
-
-/** Inline modality icons (used by the quick-stats flow). */
-export function ModalityIcons(props: {
-  modalities: Modality[]
-  className?: string
-}) {
-  const { t } = useTranslation()
-  if (props.modalities.length === 0) {
-    return <span className='text-muted-foreground text-xs'>—</span>
-  }
-  return (
-    <span className='inline-flex items-center gap-1'>
-      {props.modalities.map((modality) => {
-        const meta = MODALITY_META[modality]
-        const Icon = meta.icon
-        return (
-          <Tooltip key={modality}>
-            <TooltipTrigger
-              render={
-                <span
-                  aria-label={t(meta.labelKey)}
-                  className='text-foreground/80 inline-flex'
-                />
-              }
-            >
-              <Icon className={cn('size-3.5', props.className)} />
-            </TooltipTrigger>
-            <TooltipContent side='top' className='text-xs'>
-              {t(meta.labelKey)}
-            </TooltipContent>
-          </Tooltip>
-        )
-      })}
-    </span>
-  )
-}
-
-/**
- * 2 × N matrix showing which modalities are supported as input vs output.
- * Cells with a checkmark indicate support; empty cells show a dash.
- */
-export function ModalitiesMatrix(props: {
-  input: Modality[]
-  output: Modality[]
-}) {
-  const { t } = useTranslation()
-  const inputSet = new Set(props.input)
-  const outputSet = new Set(props.output)
-
-  return (
-    <StaticDataTable
-      className='rounded-lg'
-      tableClassName='text-sm'
-      headerRowClassName='bg-muted/40'
-      data={[
-        { label: t('Input'), set: inputSet },
-        { label: t('Output'), set: outputSet },
-      ]}
-      getRowKey={(row) => row.label}
-      columns={[
-        {
-          id: 'modality',
-          header: t('Modality'),
-          className:
-            'text-muted-foreground px-3 py-2 text-left text-[11px] font-medium tracking-wider uppercase',
-          cellClassName:
-            'text-muted-foreground bg-muted/30 px-3 py-2 text-left text-[11px] font-medium tracking-wider uppercase',
-          cell: (row) => row.label,
-        },
-        ...ALL_MODALITIES.map((modality) => ({
-          id: modality,
-          header: t(MODALITY_META[modality].labelKey),
-          className:
-            'text-muted-foreground border-l px-3 py-2 text-center text-[11px] font-medium tracking-wider uppercase',
-          cellClassName: (row: { label: string; set: Set<Modality> }) =>
-            cn(
-              'border-l px-3 py-2 text-center',
-              row.set.has(modality)
-                ? 'bg-emerald-50/40 dark:bg-emerald-500/10'
-                : 'bg-background'
-            ),
-          cell: (row: { label: string; set: Set<Modality> }) => {
-            const enabled = row.set.has(modality)
-            const Icon = MODALITY_META[modality].icon
-            return (
-              <span
-                className={cn(
-                  'inline-flex items-center justify-center',
-                  enabled
-                    ? 'text-emerald-700 dark:text-emerald-300'
-                    : 'text-muted-foreground/40'
-                )}
-                aria-label={
-                  enabled
-                    ? t('{{modality}} supported', {
-                        modality: t(MODALITY_META[modality].labelKey),
-                      })
-                    : t('{{modality}} not supported', {
-                        modality: t(MODALITY_META[modality].labelKey),
-                      })
-                }
-              >
-                <Icon className='size-4' />
-              </span>
-            )
-          },
-        })),
-      ]}
-    />
-  )
-}
diff --git a/web/default/src/features/pricing/components/model-details-performance.tsx b/web/default/src/features/pricing/components/model-details-performance.tsx
index d968813f..19915a18 100644
--- a/web/default/src/features/pricing/components/model-details-performance.tsx
+++ b/web/default/src/features/pricing/components/model-details-performance.tsx
@@ -31,6 +31,7 @@ import {
   formatLatency,
   formatThroughput,
   formatUptimePct,
+  getSuccessRateTextClass,
 } from '@/features/performance-metrics/lib/format'
 import type { PerformanceGroup } from '@/features/performance-metrics/types'
 import { type UptimeDayPoint } from '../lib/mock-stats'
@@ -43,10 +44,9 @@ function StatCard(props: {
   label: string
   value: React.ReactNode
   hint?: string
-  intent?: 'default' | 'warning' | 'success'
+  valueClassName?: string
 }) {
   const Icon = props.icon
-  const intent = props.intent ?? 'default'
   return (
     <div className='bg-background flex flex-col gap-1 rounded-lg border p-3'>
       <span className='text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider uppercase'>
@@ -56,8 +56,7 @@ function StatCard(props: {
       <span
         className={cn(
           'text-foreground font-mono text-lg font-semibold tabular-nums',
-          intent === 'warning' && 'text-amber-600 dark:text-amber-400',
-          intent === 'success' && 'text-emerald-600 dark:text-emerald-400'
+          props.valueClassName
         )}
       >
         {props.value}
@@ -217,12 +216,6 @@ export function ModelDetailsPerformance(props: { model: PricingModel }) {
         successRates.length
       : 0
   const incidentCount = uptimeSeries.reduce((s, p) => s + p.incidents, 0)
-  let intent: 'default' | 'warning' | 'success' = 'warning'
-  if (successRate >= 99.9) {
-    intent = 'success'
-  } else if (successRate >= 99) {
-    intent = 'default'
-  }
 
   return (
     <div className='flex flex-col gap-4'>
@@ -249,7 +242,7 @@ export function ModelDetailsPerformance(props: { model: PricingModel }) {
                 })
               : t('No incidents in the last 24 hours')
           }
-          intent={intent}
+          valueClassName={getSuccessRateTextClass(successRate)}
         />
       </div>
 
diff --git a/web/default/src/features/pricing/components/model-details-quick-stats.tsx b/web/default/src/features/pricing/components/model-details-quick-stats.tsx
deleted file mode 100644
index c249157d..00000000
--- a/web/default/src/features/pricing/components/model-details-quick-stats.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import {
-  CalendarClock,
-  FileText,
-  Layers,
-  Maximize2,
-  Sparkles,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import {
-  formatTokenCount,
-  formatYearMonth,
-  type ModelMetadata,
-} from '../lib/model-metadata'
-import type { Modality } from '../types'
-import { ModalityIcons } from './model-details-modalities'
-
-type QuickStatsProps = {
-  metadata: ModelMetadata
-}
-
-type Stat = {
-  key: string
-  icon: React.ComponentType<{ className?: string }>
-  label: string
-  value: React.ReactNode
-  hint?: string
-}
-
-function buildStats(
-  metadata: ModelMetadata,
-  t: (key: string) => string
-): Stat[] {
-  const stats: Stat[] = [
-    {
-      key: 'context',
-      icon: Layers,
-      label: t('Context'),
-      value: formatTokenCount(metadata.context_length),
-      hint: t('Maximum input window'),
-    },
-  ]
-
-  if (metadata.max_output_tokens > 0) {
-    stats.push({
-      key: 'max-output',
-      icon: Maximize2,
-      label: t('Max output'),
-      value: formatTokenCount(metadata.max_output_tokens),
-      hint: t('Maximum tokens per response'),
-    })
-  }
-
-  stats.push({
-    key: 'modalities',
-    icon: FileText,
-    label: t('Modalities'),
-    value: (
-      <ModalityFlow
-        input={metadata.input_modalities}
-        output={metadata.output_modalities}
-      />
-    ),
-  })
-
-  if (metadata.knowledge_cutoff) {
-    stats.push({
-      key: 'knowledge',
-      icon: Sparkles,
-      label: t('Knowledge cutoff'),
-      value: formatYearMonth(metadata.knowledge_cutoff),
-    })
-  }
-
-  if (metadata.release_date) {
-    stats.push({
-      key: 'release',
-      icon: CalendarClock,
-      label: t('Released'),
-      value: formatYearMonth(metadata.release_date),
-    })
-  }
-
-  return stats
-}
-
-function ModalityFlow(props: { input: Modality[]; output: Modality[] }) {
-  return (
-    <span className='inline-flex items-center gap-1 align-middle'>
-      <ModalityIcons modalities={props.input} className='size-3.5' />
-      <span className='text-muted-foreground/40'>→</span>
-      <ModalityIcons modalities={props.output} className='size-3.5' />
-    </span>
-  )
-}
-
-export function ModelDetailsQuickStats(props: QuickStatsProps) {
-  const { t } = useTranslation()
-  const stats = buildStats(props.metadata, t)
-
-  return (
-    <div className='bg-muted/20 grid grid-cols-2 gap-px overflow-hidden rounded-lg border @md/details:grid-cols-3 @2xl/details:grid-cols-5'>
-      {stats.map((stat) => {
-        const Icon = stat.icon
-        return (
-          <div
-            key={stat.key}
-            className={cn(
-              'bg-background flex min-w-0 flex-col gap-0.5 px-3 py-2.5'
-            )}
-          >
-            <span className='text-muted-foreground inline-flex min-w-0 items-center gap-1 text-[10px] font-medium tracking-wider uppercase'>
-              <Icon className='size-3 shrink-0' />
-              <span className='truncate'>{stat.label}</span>
-            </span>
-            <span className='text-foreground truncate text-sm font-semibold tabular-nums'>
-              {stat.value}
-            </span>
-            {stat.hint && (
-              <span className='text-muted-foreground/60 truncate text-[10px]'>
-                {stat.hint}
-              </span>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx b/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx
index 034319b6..a0dfcdf7 100644
--- a/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx
+++ b/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx
@@ -25,7 +25,11 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { formatUptimePct } from '@/features/performance-metrics/lib/format'
+import {
+  formatUptimePct,
+  getSuccessRateDotClass,
+  getSuccessRateTextClass,
+} from '@/features/performance-metrics/lib/format'
 import { aggregateUptime, type UptimeDayPoint } from '../lib/mock-stats'
 
 // ---------------------------------------------------------------------------
@@ -50,14 +54,6 @@ type UptimeSparklineProps = {
   className?: string
 }
 
-function colourFor(uptime: number): string {
-  if (uptime >= 99.9) return 'bg-emerald-500'
-  if (uptime >= 99.0) return 'bg-emerald-400'
-  if (uptime >= 95.0) return 'bg-amber-500'
-  if (uptime >= 90.0) return 'bg-amber-600'
-  return 'bg-rose-500'
-}
-
 function heightFor(uptime: number): string {
   if (uptime >= 99.9) return 'h-full'
   if (uptime >= 99.0) return 'h-[88%]'
@@ -66,13 +62,6 @@ function heightFor(uptime: number): string {
   return 'h-[40%]'
 }
 
-function overallTextColour(pct: number): string {
-  if (pct >= 99.9) return 'text-emerald-600 dark:text-emerald-400'
-  if (pct >= 99.0) return 'text-emerald-600 dark:text-emerald-400'
-  if (pct >= 95.0) return 'text-amber-600 dark:text-amber-400'
-  return 'text-rose-600 dark:text-rose-400'
-}
-
 export function UptimeSparkline(props: UptimeSparklineProps) {
   const size = props.size ?? 'md'
   const showOverall = props.showOverall ?? true
@@ -116,7 +105,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
               <div
                 className={cn(
                   'w-full rounded-sm',
-                  colourFor(day.uptime_pct),
+                  getSuccessRateDotClass(day.uptime_pct),
                   heightFor(day.uptime_pct)
                 )}
                 aria-hidden
@@ -138,7 +127,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
         <span
           className={cn(
             'font-mono text-sm font-semibold tabular-nums',
-            overallTextColour(overall)
+            getSuccessRateTextClass(overall)
           )}
         >
           {overall.toFixed(1)}%
diff --git a/web/default/src/features/pricing/components/model-details.tsx b/web/default/src/features/pricing/components/model-details.tsx
index aa00053b..da80df8e 100644
--- a/web/default/src/features/pricing/components/model-details.tsx
+++ b/web/default/src/features/pricing/components/model-details.tsx
@@ -19,7 +19,18 @@ For commercial licensing, please contact support@quantumnous.com
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router'
-import { ArrowLeft, Code2, HeartPulse, Info, Timer } from 'lucide-react'
+import {
+  ArrowLeft,
+  CalendarClock,
+  Code2,
+  FileText,
+  HeartPulse,
+  Info,
+  Layers,
+  Maximize2,
+  Sparkles,
+  Timer,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { cn } from '@/lib/utils'
@@ -43,6 +54,7 @@ import {
   formatLatency,
   formatThroughput,
   formatUptimePct,
+  getSuccessRateTextClass,
 } from '@/features/performance-metrics/lib/format'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
 import { usePricingData } from '../hooks/use-pricing-data'
@@ -54,20 +66,16 @@ import {
 } from '../lib/dynamic-price'
 import { parseTags } from '../lib/filters'
 import { getAvailableGroups, isTokenBasedModel } from '../lib/model-helpers'
-import { inferModelMetadata } from '../lib/model-metadata'
 import { formatFixedPrice, formatGroupPrice } from '../lib/price'
 import type {
-  Modality,
   ModelCapability,
   PriceType,
   PricingModel,
   TokenUnit,
 } from '../types'
 import { DynamicPricingBreakdown } from './dynamic-pricing-breakdown'
-import { ModelDetailsApi, ModelDetailsProviderInfo } from './model-details-api'
-import { ModalityIcons } from './model-details-modalities'
+import { ModelDetailsApi } from './model-details-api'
 import { ModelDetailsPerformance } from './model-details-performance'
-import { ModelDetailsQuickStats } from './model-details-quick-stats'
 
 // ----------------------------------------------------------------------------
 // Local UI helpers
@@ -96,80 +104,51 @@ const CAPABILITY_LABEL_KEYS: Record<ModelCapability, string> = {
   embeddings: 'Embeddings',
 }
 
-function CompactCapabilityList(props: { capabilities: ModelCapability[] }) {
-  const { t } = useTranslation()
+const MODALITY_LABEL_KEYS: Record<string, string> = {
+  text: 'Text',
+  image: 'Image',
+  audio: 'Audio',
+  video: 'Video',
+  file: 'File',
+}
 
-  if (props.capabilities.length === 0) {
-    return (
-      <span className='text-muted-foreground text-xs'>
-        {t('No capabilities reported for this model.')}
-      </span>
-    )
+const TOKEN_FORMAT = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 1,
+})
+
+function formatCatalogTokenCount(tokens: number): string {
+  if (!Number.isFinite(tokens) || tokens <= 0) return ''
+  if (tokens >= 1_000_000) {
+    return `${TOKEN_FORMAT.format(tokens / 1_000_000)}M`
   }
-
-  return (
-    <div className='flex flex-wrap gap-1.5'>
-      {props.capabilities.map((capability) => (
-        <span
-          key={capability}
-          className='bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs font-medium'
-        >
-          {t(CAPABILITY_LABEL_KEYS[capability] ?? capability)}
-        </span>
-      ))}
-    </div>
-  )
+  if (tokens >= 1_000) {
+    return `${TOKEN_FORMAT.format(tokens / 1_000)}K`
+  }
+  return TOKEN_FORMAT.format(tokens)
 }
 
-function CompactModalities(props: { input: Modality[]; output: Modality[] }) {
-  const { t } = useTranslation()
-
-  return (
-    <div className='grid gap-2 sm:grid-cols-2'>
-      <div className='flex items-center justify-between gap-3 rounded-lg border px-3 py-2'>
-        <span className='text-muted-foreground text-xs font-medium'>
-          {t('Input')}
-        </span>
-        <ModalityIcons modalities={props.input} />
-      </div>
-      <div className='flex items-center justify-between gap-3 rounded-lg border px-3 py-2'>
-        <span className='text-muted-foreground text-xs font-medium'>
-          {t('Output')}
-        </span>
-        <ModalityIcons modalities={props.output} />
-      </div>
-    </div>
-  )
+function formatCatalogYearMonth(value?: string): string {
+  if (!value) return ''
+  const [yearStr, monthStr] = value.split('-')
+  const year = Number(yearStr)
+  const month = Number(monthStr)
+  if (!Number.isFinite(year) || !Number.isFinite(month)) return value
+  const date = new Date(Date.UTC(year, month - 1, 1))
+  return date.toLocaleString(undefined, { year: 'numeric', month: 'short' })
 }
 
-function ModelSignalsSection(props: {
-  capabilities: ModelCapability[]
-  input: Modality[]
-  output: Modality[]
-}) {
-  const { t } = useTranslation()
-
-  return (
-    <section>
-      <SectionTitle>
-        {t('Capabilities')} / {t('Supported modalities')}
-      </SectionTitle>
-      <div className='grid gap-3 rounded-xl border p-3 @2xl/details:grid-cols-[minmax(0,1.5fr)_minmax(260px,1fr)]'>
-        <CompactCapabilityList capabilities={props.capabilities} />
-        <CompactModalities input={props.input} output={props.output} />
-      </div>
-    </section>
-  )
+function normalizeCatalogItems(items?: readonly string[]): string[] {
+  if (!items) return []
+  return items.filter((item) => item.trim().length > 0)
 }
 
 function OverviewMetric(props: {
   icon: React.ComponentType<{ className?: string }>
   label: string
   value: React.ReactNode
-  intent?: 'default' | 'warning' | 'success'
+  valueClassName?: string
 }) {
   const Icon = props.icon
-  const intent = props.intent ?? 'default'
 
   return (
     <div className='flex min-w-0 items-center gap-2 px-3 py-2'>
@@ -181,8 +160,7 @@ function OverviewMetric(props: {
         <div
           className={cn(
             'text-foreground truncate font-mono text-sm font-semibold tabular-nums',
-            intent === 'warning' && 'text-amber-600 dark:text-amber-400',
-            intent === 'success' && 'text-emerald-600 dark:text-emerald-400'
+            props.valueClassName
           )}
         >
           {props.value}
@@ -208,12 +186,6 @@ function OverviewSummaryGrid(props: { model: PricingModel }) {
     successRates.length > 0
       ? successRates.reduce((sum, rate) => sum + rate, 0) / successRates.length
       : Number.NaN
-  let successIntent: 'default' | 'warning' | 'success' = 'warning'
-  if (successRate >= 99.9) {
-    successIntent = 'success'
-  } else if (successRate >= 99) {
-    successIntent = 'default'
-  }
   const tpsValues = groups
     .map((group) => group.avg_tps)
     .filter((value) => value > 0)
@@ -248,12 +220,305 @@ function OverviewSummaryGrid(props: { model: PricingModel }) {
         icon={HeartPulse}
         label={t('Success rate')}
         value={formatUptimePct(successRate)}
-        intent={successIntent}
+        valueClassName={getSuccessRateTextClass(successRate)}
       />
     </div>
   )
 }
 
+function CatalogPillList(props: { items: string[] }) {
+  return (
+    <div className='flex min-w-0 flex-wrap gap-1.5'>
+      {props.items.map((item) => (
+        <span
+          key={item}
+          className='bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs font-medium'
+        >
+          {item}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function CatalogTextValue(props: { children: React.ReactNode }) {
+  return (
+    <span className='text-foreground min-w-0 truncate text-sm font-semibold'>
+      {props.children}
+    </span>
+  )
+}
+
+function CatalogInfoCell(props: { label: string; children: React.ReactNode }) {
+  return (
+    <div className='bg-card flex min-w-0 flex-col gap-1 px-3 py-2.5'>
+      <span className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
+        {props.label}
+      </span>
+      {props.children}
+    </div>
+  )
+}
+
+function ModalityLabels(props: { items: string[] }) {
+  const { t } = useTranslation()
+  if (props.items.length === 0) return null
+
+  return (
+    <span className='inline-flex items-center gap-1 align-middle'>
+      {props.items.map((item) => (
+        <span key={item} className='font-medium'>
+          {t(MODALITY_LABEL_KEYS[item] ?? item)}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+function ModelBackendQuickStats(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const model = props.model
+  const inputModalities = normalizeCatalogItems(model.input_modalities)
+  const outputModalities = normalizeCatalogItems(model.output_modalities)
+  const contextLength = model.context_length ?? 0
+  const maxOutput = model.max_output_tokens ?? 0
+  const knowledgeCutoff = formatCatalogYearMonth(model.knowledge_cutoff)
+  const releaseDate = formatCatalogYearMonth(model.release_date)
+
+  const stats: {
+    key: string
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value: React.ReactNode
+    hint?: string
+  }[] = []
+
+  if (contextLength > 0) {
+    stats.push({
+      key: 'context',
+      icon: Layers,
+      label: t('Context'),
+      value: formatCatalogTokenCount(contextLength),
+      hint: t('Maximum input window'),
+    })
+  }
+
+  if (maxOutput > 0) {
+    stats.push({
+      key: 'max-output',
+      icon: Maximize2,
+      label: t('Max output'),
+      value: formatCatalogTokenCount(maxOutput),
+      hint: t('Maximum tokens per response'),
+    })
+  }
+
+  if (inputModalities.length > 0 || outputModalities.length > 0) {
+    stats.push({
+      key: 'modalities',
+      icon: FileText,
+      label: t('Modalities'),
+      value: (
+        <span className='inline-flex items-center gap-1'>
+          <ModalityLabels items={inputModalities} />
+          {inputModalities.length > 0 && outputModalities.length > 0 && (
+            <span className='text-muted-foreground/40'>→</span>
+          )}
+          <ModalityLabels items={outputModalities} />
+        </span>
+      ),
+    })
+  }
+
+  if (knowledgeCutoff) {
+    stats.push({
+      key: 'knowledge',
+      icon: Sparkles,
+      label: t('Knowledge cutoff'),
+      value: knowledgeCutoff,
+    })
+  }
+
+  if (releaseDate) {
+    stats.push({
+      key: 'release',
+      icon: CalendarClock,
+      label: t('Released'),
+      value: releaseDate,
+    })
+  }
+
+  if (stats.length === 0) return null
+
+  return (
+    <div className='bg-muted/20 grid grid-cols-2 gap-px overflow-hidden rounded-lg border @md/details:grid-cols-3 @2xl/details:grid-cols-5'>
+      {stats.map((stat) => {
+        const Icon = stat.icon
+        return (
+          <div
+            key={stat.key}
+            className='bg-background flex min-w-0 flex-col gap-0.5 px-3 py-2.5'
+          >
+            <span className='text-muted-foreground inline-flex min-w-0 items-center gap-1 text-[10px] font-medium tracking-wider uppercase'>
+              <Icon className='size-3 shrink-0' />
+              <span className='truncate'>{stat.label}</span>
+            </span>
+            <span className='text-foreground truncate text-sm font-semibold tabular-nums'>
+              {stat.value}
+            </span>
+            {stat.hint && (
+              <span className='text-muted-foreground/60 truncate text-[10px]'>
+                {stat.hint}
+              </span>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function ModelBackendSignalsSection(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const capabilities = normalizeCatalogItems(props.model.capabilities)
+  const inputModalities = normalizeCatalogItems(props.model.input_modalities)
+  const outputModalities = normalizeCatalogItems(props.model.output_modalities)
+
+  if (
+    capabilities.length === 0 &&
+    inputModalities.length === 0 &&
+    outputModalities.length === 0
+  ) {
+    return null
+  }
+
+  return (
+    <section>
+      <SectionTitle>
+        {t('Capabilities')} / {t('Supported modalities')}
+      </SectionTitle>
+      <div className='grid gap-3 rounded-xl border p-3 @2xl/details:grid-cols-[minmax(0,1.5fr)_minmax(260px,1fr)]'>
+        {capabilities.length > 0 ? (
+          <CatalogPillList
+            items={capabilities.map((capability) =>
+              t(
+                CAPABILITY_LABEL_KEYS[capability as ModelCapability] ??
+                  capability
+              )
+            )}
+          />
+        ) : (
+          <div />
+        )}
+        {(inputModalities.length > 0 || outputModalities.length > 0) && (
+          <div className='grid gap-2 sm:grid-cols-2'>
+            {inputModalities.length > 0 && (
+              <div className='flex items-center justify-between gap-3 rounded-lg border px-3 py-2'>
+                <span className='text-muted-foreground text-xs font-medium'>
+                  {t('Input')}
+                </span>
+                <CatalogTextValue>
+                  <ModalityLabels items={inputModalities} />
+                </CatalogTextValue>
+              </div>
+            )}
+            {outputModalities.length > 0 && (
+              <div className='flex items-center justify-between gap-3 rounded-lg border px-3 py-2'>
+                <span className='text-muted-foreground text-xs font-medium'>
+                  {t('Output')}
+                </span>
+                <CatalogTextValue>
+                  <ModalityLabels items={outputModalities} />
+                </CatalogTextValue>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function ModelBackendProviderSection(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const model = props.model
+  const groups = normalizeCatalogItems(model.enable_groups)
+  const endpoints = normalizeCatalogItems(model.supported_endpoint_types)
+  const tags = parseTags(model.tags)
+  const cells: React.ReactNode[] = []
+
+  if (model.vendor_name) {
+    cells.push(
+      <CatalogInfoCell key='provider' label={t('Provider')}>
+        <CatalogTextValue>{model.vendor_name}</CatalogTextValue>
+      </CatalogInfoCell>
+    )
+  }
+
+  cells.push(
+    <CatalogInfoCell key='type' label={t('Type')}>
+      <CatalogTextValue>
+        {model.quota_type === QUOTA_TYPE_VALUES.TOKEN
+          ? t('Token-based')
+          : t('Per Request')}
+      </CatalogTextValue>
+    </CatalogInfoCell>
+  )
+
+  if (groups.length > 0) {
+    cells.push(
+      <CatalogInfoCell key='groups' label={t('Groups')}>
+        <CatalogPillList items={groups} />
+      </CatalogInfoCell>
+    )
+  }
+
+  if (endpoints.length > 0) {
+    cells.push(
+      <CatalogInfoCell key='endpoints' label={t('Endpoints')}>
+        <CatalogPillList items={endpoints} />
+      </CatalogInfoCell>
+    )
+  }
+
+  if (tags.length > 0) {
+    cells.push(
+      <CatalogInfoCell key='tags' label={t('Tags')}>
+        <CatalogPillList items={tags} />
+      </CatalogInfoCell>
+    )
+  }
+
+  if (model.parameter_count) {
+    cells.push(
+      <CatalogInfoCell key='parameters' label={t('Parameters')}>
+        <CatalogTextValue>{model.parameter_count}</CatalogTextValue>
+      </CatalogInfoCell>
+    )
+  }
+
+  if (cells.length === 0) return null
+
+  return (
+    <section>
+      <SectionTitle>{t('Model')}</SectionTitle>
+      <div className='border-border/60 bg-border/60 grid grid-cols-1 gap-px overflow-hidden rounded-lg border sm:grid-cols-2'>
+        {cells}
+      </div>
+    </section>
+  )
+}
+
+function ModelBackendDetailsSection(props: { model: PricingModel }) {
+  return (
+    <>
+      <ModelBackendQuickStats model={props.model} />
+      <ModelBackendSignalsSection model={props.model} />
+      <ModelBackendProviderSection model={props.model} />
+    </>
+  )
+}
+
 // ----------------------------------------------------------------------------
 // Model header (always visible above the detail sections)
 // ----------------------------------------------------------------------------
@@ -264,7 +529,6 @@ function ModelHeader(props: { model: PricingModel }) {
   const modelIconKey = model.icon || model.vendor_icon
   const modelIcon = modelIconKey ? getLobeIcon(modelIconKey, 20) : null
   const description = model.description || model.vendor_description || null
-  const tags = parseTags(model.tags)
   const isSpecialExpression =
     model.billing_mode === 'tiered_expr' &&
     Boolean(model.billing_expr) &&
@@ -312,18 +576,6 @@ function ModelHeader(props: { model: PricingModel }) {
           {description}
         </p>
       )}
-      {tags.length > 0 && (
-        <div className='mt-2.5 flex flex-wrap gap-1'>
-          {tags.map((tag) => (
-            <span
-              key={tag}
-              className='bg-muted text-muted-foreground rounded px-2 py-0.5 text-[11px] font-medium'
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-      )}
     </header>
   )
 }
@@ -901,7 +1153,6 @@ export interface ModelDetailsContentProps {
 export function ModelDetailsContent(props: ModelDetailsContentProps) {
   const { t } = useTranslation()
   const showRechargePrice = props.showRechargePrice ?? false
-  const metadata = useMemo(() => inferModelMetadata(props.model), [props.model])
 
   const isDynamic =
     props.model.billing_mode === 'tiered_expr' &&
@@ -955,15 +1206,7 @@ export function ModelDetailsContent(props: ModelDetailsContentProps) {
             />
           </section>
 
-          <ModelDetailsQuickStats metadata={metadata} />
-
-          <ModelSignalsSection
-            capabilities={metadata.capabilities}
-            input={metadata.input_modalities}
-            output={metadata.output_modalities}
-          />
-
-          <ModelDetailsProviderInfo model={props.model} />
+          <ModelBackendDetailsSection model={props.model} />
         </TabsContent>
 
         <TabsContent value='performance' className='outline-none'>
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 25c5c5ca..75fa46bf 100644
--- a/web/default/src/features/pricing/components/model-perf-badge.tsx
+++ b/web/default/src/features/pricing/components/model-perf-badge.tsx
@@ -22,6 +22,7 @@ import { cn } from '@/lib/utils'
 import {
   formatLatency,
   formatThroughput,
+  getSuccessRateDotClass,
 } from '@/features/performance-metrics/lib/format'
 
 export type ModelPerfBadgeData = {
@@ -49,12 +50,7 @@ export const ModelPerfBadge = memo(function ModelPerfBadge(
 
   const { avg_latency_ms, avg_tps, success_rate } = props.perf
 
-  let statusColor = 'bg-emerald-500'
-  if (success_rate < 99) {
-    statusColor = 'bg-red-500'
-  } else if (success_rate < 99.9) {
-    statusColor = 'bg-amber-500'
-  }
+  const statusColor = getSuccessRateDotClass(success_rate)
 
   return (
     <div
diff --git a/web/default/src/features/pricing/lib/index.ts b/web/default/src/features/pricing/lib/index.ts
index f841855b..54236700 100644
--- a/web/default/src/features/pricing/lib/index.ts
+++ b/web/default/src/features/pricing/lib/index.ts
@@ -25,6 +25,5 @@ export * from './price'
 export * from './model-helpers'
 export * from './billing-expr'
 export * from './tier-expr'
-export * from './model-metadata'
 export * from './mock-stats'
 export * from './seed'
diff --git a/web/default/src/features/pricing/lib/model-metadata.ts b/web/default/src/features/pricing/lib/model-metadata.ts
deleted file mode 100644
index 09868ffd..00000000
--- a/web/default/src/features/pricing/lib/model-metadata.ts
+++ /dev/null
@@ -1,569 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import type { Modality, ModelCapability, PricingModel } from '../types'
-import { hashStringToSeed, seededRandom } from './seed'
-
-// ----------------------------------------------------------------------------
-// Model metadata inference
-// ----------------------------------------------------------------------------
-//
-// The backend does not currently return `context_length`, `max_output_tokens`,
-// `knowledge_cutoff`, `release_date`, `parameter_count`, or modality/capability
-// flags for a model. Until it does, we infer reasonable values client-side
-// from the data we already have (endpoint types, ratios, tags, model name)
-// and fall back to a deterministic mock seeded from the model name so that
-// every render of the same model shows the same numbers.
-//
-// When the backend starts returning these fields, callers should prefer the
-// explicit values on `model.*` and only fall back to the inferred ones.
-
-const TEXT_INPUT_ENDPOINTS = new Set([
-  'openai',
-  'openai-response',
-  'anthropic',
-  'gemini',
-  'embeddings',
-  'jina-rerank',
-])
-
-const IMAGE_OUTPUT_ENDPOINTS = new Set(['image-generation'])
-const VIDEO_OUTPUT_ENDPOINTS = new Set(['openai-video'])
-const EMBEDDING_ENDPOINTS = new Set(['embeddings', 'jina-rerank'])
-
-const REASONING_NAME_PATTERNS = [
-  /^o[1-4](?:[-:_].+)?$/i,
-  /reasoning/i,
-  /thinking/i,
-  /qwq/i,
-  /deepseek-r\d/i,
-  /grok.*-(?:thinking|reasoning)/i,
-]
-
-const VISION_NAME_PATTERNS = [
-  /vision/i,
-  /vl(?:[-_]|$)/i,
-  /multimodal/i,
-  /-omni/i,
-]
-
-const AUDIO_NAME_PATTERNS = [
-  /audio/i,
-  /whisper/i,
-  /tts/i,
-  /voice/i,
-  /-realtime/i,
-]
-
-const VIDEO_NAME_PATTERNS = [/video/i, /sora/i, /veo/i, /kling/i, /pika/i]
-
-const CODE_NAME_PATTERNS = [/code/i, /-coder/i]
-
-const WEB_SEARCH_PATTERNS = [/web[-_ ]?search/i, /-online/i, /perplexity/i]
-
-const KNOWLEDGE_CUTOFFS = [
-  '2023-04',
-  '2023-10',
-  '2023-12',
-  '2024-04',
-  '2024-06',
-  '2024-08',
-  '2024-10',
-  '2024-12',
-  '2025-02',
-  '2025-04',
-  '2025-08',
-]
-
-const PARAM_BUCKETS = [
-  '1.5B',
-  '3B',
-  '7B',
-  '8B',
-  '14B',
-  '32B',
-  '70B',
-  '120B',
-  '405B',
-]
-
-const CONTEXT_BUCKETS = [
-  8_192, 16_384, 32_768, 65_536, 128_000, 200_000, 1_000_000,
-]
-const MAX_OUTPUT_BUCKETS = [2_048, 4_096, 8_192, 16_384, 32_768, 65_536]
-
-const TAG_TO_CAPABILITY: Record<string, ModelCapability> = {
-  vision: 'vision',
-  multimodal: 'vision',
-  reasoning: 'reasoning',
-  thinking: 'reasoning',
-  tools: 'tools',
-  function: 'function_calling',
-  'function-calling': 'function_calling',
-  streaming: 'streaming',
-  json: 'json_mode',
-  structured: 'structured_output',
-  search: 'web_search',
-  code: 'code_interpreter',
-  embedding: 'embeddings',
-}
-
-const TAG_TO_MODALITY: Record<string, Modality> = {
-  text: 'text',
-  image: 'image',
-  audio: 'audio',
-  video: 'video',
-  file: 'file',
-  document: 'file',
-  pdf: 'file',
-}
-
-function pickFromBuckets<T>(buckets: T[], rand: () => number): T {
-  return buckets[Math.floor(rand() * buckets.length)]
-}
-
-function parseModelTags(tagsString?: string): string[] {
-  if (!tagsString) return []
-  return tagsString
-    .split(/[,;|\s]+/)
-    .map((t) => t.trim().toLowerCase())
-    .filter(Boolean)
-}
-
-function nameMatches(name: string, patterns: RegExp[]): boolean {
-  return patterns.some((re) => re.test(name))
-}
-
-function inferInputModalities(
-  model: PricingModel,
-  tags: string[],
-  endpoints: string[],
-  name: string
-): Modality[] {
-  const set = new Set<Modality>()
-
-  if (
-    endpoints.length === 0 ||
-    endpoints.some((e) => TEXT_INPUT_ENDPOINTS.has(e))
-  ) {
-    set.add('text')
-  }
-
-  if (model.image_ratio != null || nameMatches(name, VISION_NAME_PATTERNS)) {
-    set.add('image')
-  }
-  if (model.audio_ratio != null || nameMatches(name, AUDIO_NAME_PATTERNS)) {
-    set.add('audio')
-  }
-  if (nameMatches(name, VIDEO_NAME_PATTERNS)) {
-    set.add('video')
-  }
-
-  for (const tag of tags) {
-    const m = TAG_TO_MODALITY[tag]
-    if (m) set.add(m)
-  }
-
-  if (set.size === 0) set.add('text')
-  return ordered(set)
-}
-
-function inferOutputModalities(
-  model: PricingModel,
-  endpoints: string[],
-  name: string
-): Modality[] {
-  const set = new Set<Modality>()
-
-  if (endpoints.some((e) => IMAGE_OUTPUT_ENDPOINTS.has(e))) set.add('image')
-  if (endpoints.some((e) => VIDEO_OUTPUT_ENDPOINTS.has(e))) set.add('video')
-  if (endpoints.some((e) => EMBEDDING_ENDPOINTS.has(e))) set.add('text')
-
-  if (
-    model.audio_completion_ratio != null ||
-    /tts|voice|audio-out/i.test(name)
-  ) {
-    set.add('audio')
-  }
-
-  if (set.size === 0) set.add('text')
-  return ordered(set)
-}
-
-function inferCapabilities(
-  model: PricingModel,
-  tags: string[],
-  endpoints: string[],
-  name: string,
-  outputs: Modality[],
-  inputs: Modality[]
-): ModelCapability[] {
-  const set = new Set<ModelCapability>()
-
-  if (outputs.includes('text') && !endpoints.includes('image-generation')) {
-    set.add('streaming')
-    set.add('system_prompt')
-  }
-  if (
-    !endpoints.includes('image-generation') &&
-    !endpoints.includes('embeddings') &&
-    !endpoints.includes('jina-rerank')
-  ) {
-    set.add('function_calling')
-    set.add('tools')
-    set.add('json_mode')
-    set.add('structured_output')
-  }
-  if (inputs.includes('image')) set.add('vision')
-  if (model.cache_ratio != null) set.add('caching')
-  if (endpoints.some((e) => EMBEDDING_ENDPOINTS.has(e))) set.add('embeddings')
-  if (nameMatches(name, REASONING_NAME_PATTERNS)) set.add('reasoning')
-  if (nameMatches(name, CODE_NAME_PATTERNS)) set.add('code_interpreter')
-  if (nameMatches(name, WEB_SEARCH_PATTERNS)) set.add('web_search')
-
-  for (const tag of tags) {
-    const cap = TAG_TO_CAPABILITY[tag]
-    if (cap) set.add(cap)
-  }
-
-  return Array.from(set)
-}
-
-function ordered(modalities: Set<Modality>): Modality[] {
-  const order: Modality[] = ['text', 'image', 'audio', 'video', 'file']
-  return order.filter((m) => modalities.has(m))
-}
-
-function inferContextAndOutputs(
-  name: string,
-  rand: () => number,
-  endpoints: string[]
-): { context: number; maxOutput: number } {
-  if (endpoints.includes('embeddings') || endpoints.includes('jina-rerank')) {
-    return { context: 8_192, maxOutput: 0 }
-  }
-  if (
-    endpoints.includes('image-generation') ||
-    endpoints.includes('openai-video')
-  ) {
-    return { context: 4_096, maxOutput: 0 }
-  }
-
-  const lower = name.toLowerCase()
-  if (lower.includes('1m') || lower.includes('-long')) {
-    return { context: 1_000_000, maxOutput: 65_536 }
-  }
-  if (/claude.*(?:4|opus|sonnet)/.test(lower)) {
-    return { context: 1_000_000, maxOutput: 65_536 }
-  }
-  if (
-    lower.includes('200k') ||
-    lower.includes('claude-3') ||
-    lower.includes('claude-4')
-  ) {
-    return { context: 200_000, maxOutput: 16_384 }
-  }
-  if (lower.includes('128k') || /gpt-4o|gpt-4\.1|gpt-5|o1|o3|o4/.test(lower)) {
-    return { context: 128_000, maxOutput: 16_384 }
-  }
-  if (/gemini.*-2|gemini.*pro|gemini.*flash/.test(lower)) {
-    return { context: 1_000_000, maxOutput: 8_192 }
-  }
-  if (/gpt-3\.5|claude-2/.test(lower)) {
-    return { context: 16_384, maxOutput: 4_096 }
-  }
-
-  const context = pickFromBuckets(CONTEXT_BUCKETS, rand)
-  const maxOutput = Math.min(context, pickFromBuckets(MAX_OUTPUT_BUCKETS, rand))
-  return { context, maxOutput }
-}
-
-function inferReleaseAndCutoff(rand: () => number): {
-  release: string
-  cutoff: string
-} {
-  const cutoff = pickFromBuckets(KNOWLEDGE_CUTOFFS, rand)
-  const [year, month] = cutoff.split('-').map(Number)
-  const offsetMonths = 4 + Math.floor(rand() * 6)
-  const releaseMonth = month + offsetMonths
-  const releaseYear = year + Math.floor((releaseMonth - 1) / 12)
-  const finalMonth = ((releaseMonth - 1) % 12) + 1
-  const release = `${releaseYear}-${String(finalMonth).padStart(2, '0')}-15`
-  return { release, cutoff }
-}
-
-export type ModelMetadata = {
-  context_length: number
-  max_output_tokens: number
-  knowledge_cutoff: string
-  release_date: string
-  parameter_count: string
-  input_modalities: Modality[]
-  output_modalities: Modality[]
-  capabilities: ModelCapability[]
-}
-
-/**
- * Infer / mock model metadata. Prefers explicit fields on `model.*` and
- * falls back to inference + a deterministic seed otherwise.
- */
-export function inferModelMetadata(model: PricingModel): ModelMetadata {
-  const name = model.model_name || ''
-  const rand = seededRandom(hashStringToSeed(name))
-  const tags = parseModelTags(model.tags)
-  const endpoints = model.supported_endpoint_types || []
-
-  const inputs =
-    model.input_modalities ?? inferInputModalities(model, tags, endpoints, name)
-  const outputs =
-    model.output_modalities ?? inferOutputModalities(model, endpoints, name)
-  const capabilities =
-    model.capabilities ??
-    inferCapabilities(model, tags, endpoints, name, outputs, inputs)
-
-  const fallback = inferContextAndOutputs(name, rand, endpoints)
-  const cutoffAndRelease = inferReleaseAndCutoff(rand)
-
-  return {
-    context_length: model.context_length ?? fallback.context,
-    max_output_tokens: model.max_output_tokens ?? fallback.maxOutput,
-    knowledge_cutoff: model.knowledge_cutoff ?? cutoffAndRelease.cutoff,
-    release_date: model.release_date ?? cutoffAndRelease.release,
-    parameter_count:
-      model.parameter_count ?? pickFromBuckets(PARAM_BUCKETS, rand),
-    input_modalities: inputs,
-    output_modalities: outputs,
-    capabilities,
-  }
-}
-
-const TOKEN_FORMAT = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 1,
-})
-
-/** Format a token count compactly: 128_000 → "128K", 1_000_000 → "1M". */
-export function formatTokenCount(tokens: number): string {
-  if (!Number.isFinite(tokens) || tokens <= 0) return '—'
-  if (tokens >= 1_000_000) {
-    const value = tokens / 1_000_000
-    return `${TOKEN_FORMAT.format(value)}M`
-  }
-  if (tokens >= 1_000) {
-    const value = tokens / 1_000
-    return `${TOKEN_FORMAT.format(value)}K`
-  }
-  return TOKEN_FORMAT.format(tokens)
-}
-
-/** Format a YYYY-MM (or YYYY-MM-DD) date as `Mon YYYY` for display. */
-export function formatYearMonth(value: string): string {
-  if (!value) return '—'
-  const [yearStr, monthStr] = value.split('-')
-  const year = Number(yearStr)
-  const month = Number(monthStr)
-  if (!Number.isFinite(year) || !Number.isFinite(month)) return value
-  const date = new Date(Date.UTC(year, month - 1, 1))
-  return date.toLocaleString(undefined, { year: 'numeric', month: 'short' })
-}
-
-// ---------------------------------------------------------------------------
-// Provider / vendor / tokenizer / license inference
-// ---------------------------------------------------------------------------
-//
-// These helpers derive vendor-style metadata from the model name. They are
-// purely heuristic and serve only the API-info display until the backend
-// returns explicit fields.
-
-export type ModelVendor =
-  | 'openai'
-  | 'anthropic'
-  | 'google'
-  | 'meta'
-  | 'mistral'
-  | 'qwen'
-  | 'deepseek'
-  | 'xai'
-  | 'cohere'
-  | 'baidu'
-  | 'zhipu'
-  | 'moonshot'
-  | 'minimax'
-  | 'tencent'
-  | 'bytedance'
-  | 'midjourney'
-  | 'stability'
-  | 'unknown'
-
-export type ApiInfo = {
-  vendor: ModelVendor
-  vendor_label: string
-  tokenizer: string
-  tokenizer_note?: string
-  license: string
-  license_kind: 'proprietary' | 'open' | 'open-weight' | 'unknown'
-  data_retention_days: number
-  training_opt_out: boolean
-  homepage?: string
-}
-
-const VENDOR_LABELS: Record<ModelVendor, string> = {
-  openai: 'OpenAI',
-  anthropic: 'Anthropic',
-  google: 'Google',
-  meta: 'Meta',
-  mistral: 'Mistral AI',
-  qwen: 'Alibaba (Qwen)',
-  deepseek: 'DeepSeek',
-  xai: 'xAI',
-  cohere: 'Cohere',
-  baidu: 'Baidu',
-  zhipu: 'Zhipu AI',
-  moonshot: 'Moonshot AI',
-  minimax: 'MiniMax',
-  tencent: 'Tencent',
-  bytedance: 'ByteDance',
-  midjourney: 'Midjourney',
-  stability: 'Stability AI',
-  unknown: 'Unknown',
-}
-
-function detectVendor(name: string): ModelVendor {
-  const n = name.toLowerCase()
-  if (/^gpt|^o[1-4]|davinci|babbage|whisper|tts|dall.?e|sora|^omni/.test(n))
-    return 'openai'
-  if (/claude/.test(n)) return 'anthropic'
-  if (/gemini|gemma|imagen|veo|palm/.test(n)) return 'google'
-  if (/llama|^codellama/.test(n)) return 'meta'
-  if (/mistral|mixtral|codestral|magistral|pixtral/.test(n)) return 'mistral'
-  if (/qwen|qwq|qvq/.test(n)) return 'qwen'
-  if (/deepseek/.test(n)) return 'deepseek'
-  if (/grok/.test(n)) return 'xai'
-  if (/command|cohere|aya/.test(n)) return 'cohere'
-  if (/ernie|wenxin/.test(n)) return 'baidu'
-  if (/glm|chatglm|cogview|cogvideo/.test(n)) return 'zhipu'
-  if (/kimi|moonshot/.test(n)) return 'moonshot'
-  if (/abab|minimax|hailuo/.test(n)) return 'minimax'
-  if (/hunyuan/.test(n)) return 'tencent'
-  if (/doubao|seed|jimeng/.test(n)) return 'bytedance'
-  if (/midjourney|niji/.test(n)) return 'midjourney'
-  if (/^sd-|stable[-_]?diffusion|sdxl/.test(n)) return 'stability'
-  return 'unknown'
-}
-
-const TOKENIZER_BY_VENDOR: Partial<Record<ModelVendor, string>> = {
-  openai: 'o200k_base',
-  anthropic: 'Anthropic Claude tokenizer',
-  google: 'SentencePiece (Gemini)',
-  meta: 'Llama 3 tokenizer',
-  mistral: 'Mistral tokenizer (BPE)',
-  qwen: 'Qwen tokenizer (tiktoken-compat)',
-  deepseek: 'DeepSeek tokenizer (BPE)',
-  xai: 'Grok tokenizer (BPE)',
-  cohere: 'Cohere tokenizer',
-  baidu: 'Ernie tokenizer',
-  zhipu: 'GLM tokenizer',
-  moonshot: 'Kimi tokenizer',
-  minimax: 'ABAB tokenizer',
-  tencent: 'Hunyuan tokenizer',
-  bytedance: 'Doubao tokenizer',
-}
-
-function inferTokenizer(
-  model: PricingModel,
-  vendor: ModelVendor
-): {
-  tokenizer: string
-  note?: string
-} {
-  const name = model.model_name.toLowerCase()
-  if (vendor === 'openai') {
-    if (/gpt-3|davinci|babbage|whisper|tts/.test(name)) {
-      return { tokenizer: 'cl100k_base', note: 'Older GPT-3.5 family' }
-    }
-    return { tokenizer: 'o200k_base' }
-  }
-  return { tokenizer: TOKENIZER_BY_VENDOR[vendor] ?? 'BPE (vendor-specific)' }
-}
-
-const LICENSE_BY_VENDOR: Record<
-  ModelVendor,
-  { license: string; kind: ApiInfo['license_kind'] }
-> = {
-  openai: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  anthropic: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  google: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  meta: { license: 'Llama Community License', kind: 'open-weight' },
-  mistral: { license: 'Apache 2.0 / Commercial', kind: 'open-weight' },
-  qwen: { license: 'Tongyi Qianwen License', kind: 'open-weight' },
-  deepseek: { license: 'DeepSeek License', kind: 'open-weight' },
-  xai: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  cohere: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  baidu: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  zhipu: { license: 'GLM-4 License', kind: 'open-weight' },
-  moonshot: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  minimax: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  tencent: { license: 'Hunyuan License', kind: 'open-weight' },
-  bytedance: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  midjourney: { license: 'Proprietary (commercial)', kind: 'proprietary' },
-  stability: { license: 'Stability AI Community License', kind: 'open-weight' },
-  unknown: { license: 'Provider-specific', kind: 'unknown' },
-}
-
-const HOMEPAGE_BY_VENDOR: Partial<Record<ModelVendor, string>> = {
-  openai: 'https://platform.openai.com/docs/models',
-  anthropic: 'https://docs.anthropic.com/claude/docs/models-overview',
-  google: 'https://ai.google.dev/models',
-  meta: 'https://llama.meta.com/',
-  mistral: 'https://docs.mistral.ai/getting-started/models/',
-  qwen: 'https://qwenlm.github.io/',
-  deepseek: 'https://api-docs.deepseek.com/',
-  xai: 'https://x.ai/api',
-  cohere: 'https://docs.cohere.com/docs/models',
-  baidu: 'https://cloud.baidu.com/product/wenxinworkshop',
-  zhipu: 'https://open.bigmodel.cn/dev/api',
-  moonshot: 'https://platform.moonshot.cn/docs',
-  minimax: 'https://platform.minimaxi.com/document/notice',
-  tencent: 'https://cloud.tencent.com/document/product/1729',
-  bytedance: 'https://www.volcengine.com/docs/82379',
-  midjourney: 'https://www.midjourney.com/',
-  stability: 'https://platform.stability.ai/',
-}
-
-/**
- * Build vendor / tokenizer / license / privacy metadata for the model.
- * Returns deterministic values keyed off the model name so each render is
- * stable.
- */
-export function inferApiInfo(model: PricingModel): ApiInfo {
-  const vendor = detectVendor(model.model_name || '')
-  const tk = inferTokenizer(model, vendor)
-  const license = LICENSE_BY_VENDOR[vendor]
-  const rand = seededRandom(hashStringToSeed(`${model.model_name}:api`))
-  const retention = vendor === 'openai' ? 30 : Math.round(rand() * 90)
-  return {
-    vendor,
-    vendor_label: VENDOR_LABELS[vendor],
-    tokenizer: tk.tokenizer,
-    tokenizer_note: tk.note,
-    license: license.license,
-    license_kind: license.kind,
-    data_retention_days: retention,
-    training_opt_out: true,
-    homepage: HOMEPAGE_BY_VENDOR[vendor],
-  }
-}
diff --git a/web/default/src/features/pricing/types.ts b/web/default/src/features/pricing/types.ts
index 9ee69cd7..8a0e244d 100644
--- a/web/default/src/features/pricing/types.ts
+++ b/web/default/src/features/pricing/types.ts
@@ -57,10 +57,8 @@ export type PricingModel = {
   /** Pricing version returned by backend, useful for cache busting */
   pricing_version?: string
   /**
-   * Optional model metadata fields. These are not yet returned by the backend
-   * and are populated client-side from {@link inferModelMetadata}.
-   * When the backend ships these fields, the inference layer becomes a
-   * fallback rather than the source of truth.
+   * Optional model metadata fields reserved for backend-provided catalog data.
+   * Keep them data-driven; do not synthesize display values on the client.
    */
   context_length?: number
   max_output_tokens?: number
diff --git a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
index 0c6d7ac2..d26b28ae 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
@@ -16,12 +16,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useEffect, useState } from 'react'
+import { type FormEvent, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { getCurrencyDisplay, getCurrencyLabel } from '@/lib/currency'
+import { formatQuota, parseQuotaFromDollars } from '@/lib/format'
 import { addTimeToDate } from '@/lib/time'
 import { Button } from '@/components/ui/button'
 import {
@@ -135,6 +136,18 @@ export function RedemptionsMutateDrawer({
     }
   }
 
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    if (!isUpdate) {
+      const name = form.getValues('name')
+      if (!name?.trim()) {
+        const quota = parseQuotaFromDollars(form.getValues('quota_dollars'))
+        form.setValue('name', formatQuota(quota), { shouldValidate: true })
+      }
+    }
+
+    void form.handleSubmit(onSubmit)(event)
+  }
+
   const handleSetExpiry = (months: number, days: number, hours: number) => {
     const newDate = addTimeToDate(months, days, hours)
     form.setValue('expired_time', newDate)
@@ -177,7 +190,7 @@ export function RedemptionsMutateDrawer({
         <Form {...form}>
           <form
             id='redemption-form'
-            onSubmit={form.handleSubmit(onSubmit)}
+            onSubmit={handleSubmit}
             className={sideDrawerFormClassName()}
           >
             <SideDrawerSection>