+
+ {modelIcon || (
+
+ {props.model.model_name?.charAt(0).toUpperCase() || '?'}
+
+ )}
-
-
-
+
- {/* Description */}
-
+
+
+
+
+ + {props.model.model_name} +
+ ++ {props.model.vendor_name || + (isTokenBased ? t('Token-based') : t('Per Request'))} +
+
{props.model.description || t('No description available.')}
- {/* Footer: left metadata and right performance summary share row alignment */} -
-
{ep.type}
@@ -523,7 +523,7 @@ function CodeSamplesSection(props: {
>
{(Object.keys(LANG_LABELS) as Lang[]).map((l) => (
-
+
{LANG_LABELS[l]}
))}
@@ -598,7 +598,7 @@ function SupportedParametersSection(props: { model: PricingModel }) {
cell: (p) => (
{p.type}
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 07d52dbc..5baa40db 100644
--- a/web/default/src/features/pricing/components/model-details-performance.tsx
+++ b/web/default/src/features/pricing/components/model-details-performance.tsx
@@ -51,7 +51,7 @@ function StatCard(props: {
const Icon = props.icon
return (
- {primaryGroup && (
-
- {primaryGroup} {t('Groups')}
-
- )}
-
- {isTokenBased ? t('Token-based') : t('Per Request')}
-
- {isDynamicPricing && (
-
- {t('Dynamic Pricing')}
-
- )}
-
- {priceContent}
-
- {bottomTags.map((item) => (
-
- {item}
-
+
+
)
})
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 6627138f..62c6674a 100644
--- a/web/default/src/features/pricing/components/model-details-api.tsx
+++ b/web/default/src/features/pricing/components/model-details-api.tsx
@@ -507,7 +507,7 @@ function CodeSamplesSection(props: {
+
-
+ {groups.slice(0, 1).map((group) => (
+
+ {group}
+
))}
-
- {tokenUnitLabel}
-
- {hiddenCount > 0 && (
-
- +{hiddenCount}
+ {visibleTags.map((tag) => (
+
+ {tag}
+
+ ))}
+ {hiddenTagCount > 0 && (
+
+ +{hiddenTagCount}
)}
+
+
-
+
- {props.children} -
+
+
)
}
@@ -150,28 +151,22 @@ function normalizeCatalogItems(items?: readonly string[]): string[] {
}
function OverviewMetric(props: {
- icon: React.ComponentType<{ className?: string }>
label: string
value: React.ReactNode
valueClassName?: string
}) {
- const Icon = props.icon
-
return (
- {props.children}
+ {props.description && ( ++ {props.description} +
+ )} +
-
-
- {props.label}
-
-
- {props.value}
-
+
+
)
@@ -212,19 +207,13 @@ function OverviewSummaryGrid(props: { model: PricingModel }) {
: 0
return (
-
+ {props.label}
+
+
+ {props.value}
+
+
{props.items.map((item) => (
-
+
{item}
-
+
))}
)
@@ -250,7 +236,7 @@ function CatalogPillList(props: { items: string[] }) {
function CatalogTextValue(props: { children: React.ReactNode }) {
return (
-
+
{props.children}
)
@@ -258,8 +244,8 @@ function CatalogTextValue(props: { children: React.ReactNode }) {
function CatalogInfoCell(props: { label: string; children: React.ReactNode }) {
return (
-
-
+
+
{props.label}
{props.children}
@@ -358,23 +344,20 @@ function ModelBackendQuickStats(props: { model: PricingModel }) {
if (stats.length === 0) return null
return (
-
+
{stats.map((stat) => {
const Icon = stat.icon
return (
-
-
-
+
+
-
- {t('Capabilities')} / {t('Supported modalities')}
-
-
- {capabilities.length > 0 ? (
+ {t('Capabilities')}
+
+ {capabilities.length > 0 && (
t(
@@ -414,13 +395,11 @@ function ModelBackendSignalsSection(props: { model: PricingModel }) {
)
)}
/>
- ) : (
-
)}
{(inputModalities.length > 0 || outputModalities.length > 0) && (
{inputModalities.length > 0 && (
-
+
{t('Input')}
@@ -430,7 +409,7 @@ function ModelBackendSignalsSection(props: { model: PricingModel }) {
)}
{outputModalities.length > 0 && (
-
+
{t('Output')}
@@ -475,7 +454,11 @@ function ModelBackendProviderSection(props: { model: PricingModel }) {
if (groups.length > 0) {
cells.push(
-
)
}
@@ -509,7 +492,7 @@ function ModelBackendProviderSection(props: { model: PricingModel }) {
return (
{t('Model')}
-
+ {groups.map((group) => (
+
+
-
{cells}
@@ -519,7 +502,6 @@ function ModelBackendProviderSection(props: { model: PricingModel }) {
function ModelBackendDetailsSection(props: { model: PricingModel }) {
return (
<>
-
- {modelIcon}
-
- - {model.model_name} -
-
- {model.vendor_name && (
- {model.vendor_name}
- )}
- ·
-
- {model.quota_type === QUOTA_TYPE_VALUES.TOKEN
- ? t('Token-based')
- : t('Per Request')}
-
- {model.billing_mode === 'tiered_expr' && model.billing_expr && (
- <>
- ·
-
- {isSpecialExpression
- ? t('Special billing expression')
- : t('Dynamic Pricing')}
+
+
)
}
@@ -653,16 +664,16 @@ function PriceSection(props: {
if (dynamicSummary.isSpecialExpression) {
return (
- {t('Base Price')}
-
+
+
{description && (
-
+ {modelIcon || (
+
+ {model.model_name?.charAt(0).toUpperCase() || '?'}
-
- )}
+ )}
+
+
+
+
+ {isSpecialExpression
+ ? t('Special billing expression')
+ : t('Dynamic Pricing')}
+
+ )}
+
+ + {model.model_name} +
+
+ {model.vendor_name && {model.vendor_name}}
+ {model.vendor_name && (
+ ·
+ )}
+
+ {model.quota_type === QUOTA_TYPE_VALUES.TOKEN
+ ? t('Token-based')
+ : t('Per Request')}
+
+
+ +
{description}
)} + + {(tags.length > 0 || endpoints.length > 0) && ( +
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+ {endpoints.map((endpoint) => (
+
+ {endpoint}
+
+ ))}
+
+ )}
+ {t('Pricing')}
+
{t('Special billing expression')}
- +
{t('Unable to parse structured pricing')}
-
+
{t('Raw expression')}
@@ -674,55 +685,37 @@ function PriceSection(props: {
)
}
+ const priceRows = [
+ ...dynamicSummary.primaryEntries,
+ ...dynamicSummary.secondaryEntries,
+ ]
+
return (
- {t('Base Price')}
- {dynamicSummary.primaryEntries.length > 0 ? (
-
- {dynamicSummary.primaryEntries.map((entry) => (
+ {t('Pricing')}
+
+
+ {t('Text tokens')}
+
+ {t('Prices shown per')} {tokenUnitLabel} {t('tokens')}
+
+
+
+ {priceRows.map((entry) => (
-
+
{t(entry.shortLabel)}
-
-
+
+
{entry.formatted}
-
- / {tokenUnitLabel}
-
-
+
))}
- ) : (
-
- {t('Dynamic Pricing')}
-
- )}
- {dynamicSummary.secondaryEntries.length > 0 && (
-
-
- {dynamicSummary.secondaryEntries.map((entry) => (
-
-
- {t(entry.shortLabel)}
-
-
- {entry.formatted}
-
- / {tokenUnitLabel}
-
-
-
- ))}
-
-
- )}
+
)
}
@@ -730,77 +723,72 @@ function PriceSection(props: {
if (!isTokenBased) {
return (
- {t('Base Price')}
-
-
- {t('Per request')}
-
-
- {formatFixedPrice(
- props.model,
- baseGroupKey,
- props.showRechargePrice,
- props.priceRate,
- props.usdExchangeRate,
- baseGroupRatioMap
- )}
-
+ {t('Pricing')}
+
+
+
+ {t('Per request')}
+
+
+ {formatFixedPrice(
+ props.model,
+ baseGroupKey,
+ props.showRechargePrice,
+ props.priceRate,
+ props.usdExchangeRate,
+ baseGroupRatioMap
+ )}
+
+
)
}
const secondaryItems = secondaryPriceTypes.filter((p) => p.available)
- const renderPrice = (type: PriceType) => (
- <>
- {formatGroupPrice(
- props.model,
- baseGroupKey,
- type,
- props.tokenUnit,
- props.showRechargePrice,
- props.priceRate,
- props.usdExchangeRate,
- baseGroupRatioMap
- )}
-
- / {tokenUnitLabel}
-
-
- )
+ const priceRows = [
+ ...primaryPriceTypes,
+ ...secondaryItems.map((item) => ({
+ label: item.label,
+ type: item.type,
+ })),
+ ]
return (
- {t('Base Price')}
-
- {primaryPriceTypes.map((item) => (
-
- {item.label}
-
- {renderPrice(item.type)}
-
-
- ))}
-
- {secondaryItems.length > 0 && (
-
-
- {secondaryItems.map((item) => (
-
-
- {item.label}
-
-
- {renderPrice(item.type)}
-
-
- ))}
-
+ {t('Pricing')}
+
+
+ {t('Text tokens')}
+
+ {t('Prices shown per')} {tokenUnitLabel} {t('tokens')}
+
- )}
+
+ {priceRows.map((item) => (
+
+
+ {item.label}
+
+
+ {formatGroupPrice(
+ props.model,
+ baseGroupKey,
+ item.type,
+ props.tokenUnit,
+ props.showRechargePrice,
+ props.priceRate,
+ props.usdExchangeRate,
+ baseGroupRatioMap
+ )}
+
+
+ ))}
+
+
)
}
@@ -844,13 +832,13 @@ function getDynamicPriceFields(
tiers: DynamicPricingTier[],
options: DynamicPriceOptions
) {
- return Array.from(
- new Map(
+ return [
+ ...new Map(
tiers
.flatMap((tier) => getDynamicPriceEntries(tier, options))
.map((entry) => [entry.field, entry])
- ).values()
- )
+ ).values(),
+ ]
}
function getDynamicFormattedPricesByTier(
@@ -897,19 +885,24 @@ function GroupPricingSection(props: {
const extraPriceTypes = useMemo(() => {
const types: { label: string; type: PriceType }[] = []
- if (props.model.cache_ratio != null)
+ if (props.model.cache_ratio != null) {
types.push({ label: t('Cache'), type: 'cache' })
- if (props.model.create_cache_ratio != null)
+ }
+ if (props.model.create_cache_ratio != null) {
types.push({ label: t('Cache Write'), type: 'create_cache' })
- if (props.model.image_ratio != null)
+ }
+ if (props.model.image_ratio != null) {
types.push({ label: t('Image'), type: 'image' })
- if (props.model.audio_ratio != null)
+ }
+ if (props.model.audio_ratio != null) {
types.push({ label: t('Audio In'), type: 'audio_input' })
+ }
if (
props.model.audio_ratio != null &&
props.model.audio_completion_ratio != null
- )
+ ) {
types.push({ label: t('Audio Out'), type: 'audio_output' })
+ }
return types
}, [props.model, t])
@@ -927,8 +920,7 @@ function GroupPricingSection(props: {
)
}
- const thClass =
- 'text-muted-foreground py-2 text-xs font-medium tracking-wider uppercase'
+ const thClass = 'text-muted-foreground py-2 text-xs font-medium'
if (isDynamicPricingModel(props.model)) {
const dynamicTiers = getDynamicPricingTiers(props.model)
@@ -948,7 +940,7 @@ function GroupPricingSection(props: {
)}
-
+
{t('Raw expression')}
@@ -1166,53 +1158,52 @@ export function ModelDetailsContent(props: ModelDetailsContentProps) {
Boolean(props.model.billing_expr)
return (
-
+
-
+
+
{TAB_VALUES.map((value) => {
const Icon = TAB_META[value].icon
return (
-
)
})}
-
-
- {t('Pricing')}
-
-
+
+
@@ -1231,39 +1222,6 @@ export function ModelDetailsContent(props: ModelDetailsContentProps) {
)
}
-// ----------------------------------------------------------------------------
-// Drawer & page wrappers
-// ----------------------------------------------------------------------------
-
-export interface ModelDetailsDrawerProps extends ModelDetailsContentProps {
- open: boolean
- onOpenChange: (open: boolean) => void
-}
-
-export function ModelDetailsDrawer(props: ModelDetailsDrawerProps) {
- const { t } = useTranslation()
- const { open, onOpenChange, ...contentProps } = props
-
- return (
-
-
-
- {props.model.model_name}
- {t('Model details')}
-
-
-
-
- )
-}
-
export function ModelDetails() {
const { t } = useTranslation()
const { modelId } = useParams({ from: '/pricing/$modelId/' })
@@ -1295,8 +1253,8 @@ export function ModelDetails() {
if (isLoading) {
return (
-
-
+
+
-
+
+
{t('Model not found')}
@@ -1337,14 +1295,14 @@ export function ModelDetails() {
}
return (
-
-
+
+
@@ -1364,7 +1322,7 @@ export function ModelDetails() {
>) || {}
}
/>
-
+
)
}
diff --git a/web/default/src/features/pricing/components/pricing-columns.tsx b/web/default/src/features/pricing/components/pricing-columns.tsx
index 04633c54..07bbe38a 100644
--- a/web/default/src/features/pricing/components/pricing-columns.tsx
+++ b/web/default/src/features/pricing/components/pricing-columns.tsx
@@ -17,18 +17,16 @@ along with this program. If not, see
+}
+
+type PriceColumnType = Extract
+
+const DYNAMIC_FIELD_BY_PRICE_TYPE: Record = {
+ input: 'inputPrice',
+ cache: 'cacheReadPrice',
+ output: 'outputPrice',
+}
+
+function renderEmptyCell(align: 'left' | 'right' = 'left'): ReactNode {
+ const dash = (
+ —
+ )
+ if (align === 'right') {
+ return {dash}
+ }
+ return dash
+}
+
+function renderEmptyPrice(): ReactNode {
+ return renderEmptyCell('right')
+}
+
+function renderPriceCell(
+ props: {
+ model: PricingModel
+ priceType: PriceColumnType
+ options: Required<
+ Omit
+ > & {
+ selectedGroup?: string
+ }
+ },
+ t: TFunction
+): ReactNode {
+ const tokenUnitLabel = props.options.tokenUnit === 'K' ? '1K' : '1M'
+ const dynamicSummary = getDynamicPricingSummary(props.model, {
+ tokenUnit: props.options.tokenUnit,
+ showRechargePrice: props.options.showRechargePrice,
+ priceRate: props.options.priceRate,
+ usdExchangeRate: props.options.usdExchangeRate,
+ groupRatioMultiplier: getDynamicDisplayGroupRatio(
+ props.model,
+ props.options.selectedGroup
+ ),
+ })
+
+ if (dynamicSummary?.isSpecialExpression) {
+ if (props.priceType !== 'input') return renderEmptyPrice()
+ return (
+
+
+ {t('Special billing expression')}
+
+
+ {t('View details')}
+
+
+ )
+ }
+
+ if (dynamicSummary) {
+ const entry = dynamicSummary.entries.find(
+ (item) => item.field === DYNAMIC_FIELD_BY_PRICE_TYPE[props.priceType]
+ )
+ if (!entry) return renderEmptyPrice()
+
+ return (
+
+
+ {stripTrailingZeros(entry.formatted)}
+
+
+ / {tokenUnitLabel} {t('tokens')}
+ {dynamicSummary.tierCount > 1 &&
+ ` · ${t('{{count}} tiers', {
+ count: dynamicSummary.tierCount,
+ })}`}
+
+
+ )
+ }
+
+ if (!isTokenBasedModel(props.model)) {
+ if (props.priceType !== 'input') return renderEmptyPrice()
+ return (
+
+
+ {stripTrailingZeros(
+ formatRequestPrice(
+ props.model,
+ props.options.showRechargePrice,
+ props.options.priceRate,
+ props.options.usdExchangeRate,
+ props.options.selectedGroup
+ )
+ )}
+
+ / {t('request')}
+
+ )
+ }
+
+ if (props.priceType === 'cache' && props.model.cache_ratio == null) {
+ return renderEmptyPrice()
+ }
+
+ return (
+
+
+ {stripTrailingZeros(
+ formatPrice(
+ props.model,
+ props.priceType,
+ props.options.tokenUnit,
+ props.options.showRechargePrice,
+ props.options.priceRate,
+ props.options.usdExchangeRate,
+ props.options.selectedGroup
+ )
+ )}
+
+
+ / {tokenUnitLabel} {t('tokens')}
+
+
+ )
}
export function usePricingColumns(
options: PricingColumnsOptions = {}
): ColumnDef[] {
const { t } = useTranslation()
- const {
- tokenUnit = DEFAULT_TOKEN_UNIT,
- priceRate = 1,
- usdExchangeRate = 1,
- showRechargePrice = false,
- selectedGroup,
- } = options
-
- const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
+ const priceOptions = {
+ tokenUnit: options.tokenUnit ?? DEFAULT_TOKEN_UNIT,
+ priceRate: options.priceRate ?? 1,
+ usdExchangeRate: options.usdExchangeRate ?? 1,
+ showRechargePrice: options.showRechargePrice ?? false,
+ selectedGroup: options.selectedGroup,
+ }
return [
- // Model column
{
accessorKey: 'model_name',
- meta: { label: t('Model') },
- header: ({ column }) => (
-
- {isTokenBased ? t('Token') : t('Request')}
-
- )
- },
- size: 80,
- enableSorting: false,
- },
-
- // Price column
- {
- accessorKey: 'price',
- meta: { label: t('Price') },
- header: ({ column }) => (
-
- {dynamicSummary.rawExpression}
-
-
- )
- }
-
- const primaryEntries = dynamicSummary.primaryEntries.slice(0, 2)
- if (primaryEntries.length === 0) {
- return (
-
- {t('Dynamic Pricing')}
-
- )
- }
-
- return (
-
-
- {primaryEntries.map((entry, index) => (
-
- {index > 0 && (
- /
- )}
- {stripTrailingZeros(entry.formatted)}
-
- ))}
-
-
- / {tokenUnitLabel} tokens
- {dynamicSummary.tierCount > 1 &&
- ` · ${t('{{count}} tiers', {
- count: dynamicSummary.tierCount,
- })}`}
-
+
+
+ {modelIcon || (
+
+ {model.model_name?.charAt(0).toUpperCase() || '?'}
+
+ )}
- )
- }
-
- const isTokenBased = isTokenBasedModel(model)
-
- if (isTokenBased) {
- const inputPrice = stripTrailingZeros(
- formatPrice(
- model,
- 'input',
- tokenUnit,
- showRechargePrice,
- priceRate,
- usdExchangeRate,
- selectedGroup
- )
- )
- const outputPrice = stripTrailingZeros(
- formatPrice(
- model,
- 'output',
- tokenUnit,
- showRechargePrice,
- priceRate,
- usdExchangeRate,
- selectedGroup
- )
- )
-
- return (
-
-
- {inputPrice}
- /
- {outputPrice}
-
-
- / {tokenUnitLabel} tokens
-
-
- )
- }
-
- const price = stripTrailingZeros(
- formatRequestPrice(
- model,
- showRechargePrice,
- priceRate,
- usdExchangeRate,
- selectedGroup
- )
- )
-
- return (
-
- {price}
-
- / {t('request')}
+
+
+ {model.model_name}
+
+
+ {model.vendor_name ||
+ model.description ||
+ (isTokenBasedModel(model)
+ ? t('Token-based')
+ : t('Per Request'))}
+
)
},
- size: 180,
+ minSize: 260,
enableSorting: false,
},
-
- // Cached price column (Vercel AI Gateway style)
{
- id: 'cached_price',
- header: t('Cached'),
- cell: ({ row }) => {
- const model = row.original
- const dynamicSummary = getDynamicPricingSummary(model, {
- tokenUnit,
- showRechargePrice,
- priceRate,
- usdExchangeRate,
- groupRatioMultiplier: getDynamicDisplayGroupRatio(
- model,
- selectedGroup
- ),
- })
-
- if (dynamicSummary) {
- if (dynamicSummary.isSpecialExpression) {
- return (
-
- {t('Special billing expression')}
-
- )
- }
-
- const cacheEntry = dynamicSummary.entries.find(
- (entry) => entry.field === 'cacheReadPrice'
- )
- if (!cacheEntry) {
- return —
- }
-
- return (
-
-
- {stripTrailingZeros(cacheEntry.formatted)}
-
-
- / {tokenUnitLabel}
-
-
- )
- }
-
- const isTokenBased = isTokenBasedModel(model)
-
- if (!isTokenBased || model.cache_ratio == null) {
- return —
- }
-
- const cachedPrice = stripTrailingZeros(
- formatPrice(
- model,
- 'cache',
- tokenUnit,
- showRechargePrice,
- priceRate,
- usdExchangeRate,
- selectedGroup
- )
- )
-
- return (
-
- {cachedPrice}
-
- / {tokenUnitLabel}
-
-
- )
- },
- size: 110,
- enableSorting: false,
- },
-
- // Vendor column
- {
- accessorKey: 'vendor_name',
- header: t('Vendor'),
- cell: ({ row }) => {
- const model = row.original
- if (!model.vendor_name) {
- return —
- }
- const vendorIcon = model.vendor_icon
- ? getLobeIcon(model.vendor_icon, 12)
- : null
- return (
-
- {vendorIcon}
-
- {model.vendor_name}
-
-
- )
- },
+ id: 'input_price',
+ header: () => {t('Input')},
+ cell: ({ row }) =>
+ renderPriceCell(
+ {
+ model: row.original,
+ priceType: 'input',
+ options: priceOptions,
+ },
+ t
+ ),
size: 130,
enableSorting: false,
},
-
- // Tags column
+ {
+ id: 'cached_price',
+ header: () => {t('Cached input')},
+ cell: ({ row }) =>
+ renderPriceCell(
+ {
+ model: row.original,
+ priceType: 'cache',
+ options: priceOptions,
+ },
+ t
+ ),
+ size: 130,
+ enableSorting: false,
+ },
+ {
+ id: 'output_price',
+ header: () => {t('Output')},
+ cell: ({ row }) =>
+ renderPriceCell(
+ {
+ model: row.original,
+ priceType: 'output',
+ options: priceOptions,
+ },
+ t
+ ),
+ size: 130,
+ enableSorting: false,
+ },
+ {
+ id: 'health',
+ header: t('Health'),
+ cell: ({ row }) => {
+ const perf = options.perfMap?.get(row.original.model_name || '')
+ if (!perf) {
+ return renderEmptyCell()
+ }
+ return (
-
+
{tag}
))}
/>
)
},
- size: 140,
+ size: 160,
enableSorting: false,
},
-
- // Endpoints column
{
accessorKey: 'supported_endpoint_types',
header: t('Endpoints'),
cell: ({ row }) => {
const endpoints = row.original.supported_endpoint_types || []
+ if (endpoints.length === 0) {
+ return renderEmptyCell()
+ }
return (
(
-
- {ep}
+ items={endpoints.map((endpoint) => (
+
+ {endpoint}
))}
/>
)
},
- size: 130,
+ size: 150,
enableSorting: false,
},
-
- // Enable Groups column
{
accessorKey: 'enable_groups',
header: t('Groups'),
cell: ({ row }) => {
const groups = row.original.enable_groups || []
+ if (groups.length === 0) {
+ return renderEmptyCell()
+ }
return (
(
-
+
-
+
{props.title}
-
@@ -246,39 +245,25 @@ export function PricingSidebar(props: PricingSidebarProps) {
]
return (
-