feat(performance): implement success rate grading and enhance UI representation

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
 // ---------------------------------------------------------------------------