+ + + + {hasProviderConfigFields && ( = ({ ); }; + +type ModelCosts = { + inputCost?: number; + outputCost?: number; + cacheReadCost?: number; + cacheWriteCost?: number; +}; + +const priceEstimateFields: ReadonlyArray<[string, keyof ModelCosts]> = [ + ["Input", "inputCost"], + ["Output", "outputCost"], + ["Cache read", "cacheReadCost"], + ["Cache write", "cacheWriteCost"], +]; + +const priceOrUndefined = (micros: number | null): number | undefined => + micros === null ? undefined : microsToDollars(micros); + +export const PricingEstimateFields: FC<{ + provider: string; + model: string; +}> = ({ provider, model }) => { + const fieldIdPrefix = useId(); + const aibridgeEntitled = Boolean(useFeatureVisibility().aibridge); + const normalizedProvider = normalizeProvider(provider); + const trimmedModel = model.trim(); + const livePricesQuery = useQuery({ + ...aiModelPrices(normalizedProvider, trimmedModel), + enabled: + aibridgeEntitled && normalizedProvider !== "" && trimmedModel !== "", + }); + const livePriceLoading = + livePricesQuery.fetchStatus !== "idle" && !livePricesQuery.isSuccess; + const livePrice = livePricesQuery.data?.[0]; + + const knownModel = + findKnownModelByCanonicalId(normalizedProvider, trimmedModel) ?? + findKnownModelByExactAlias(normalizedProvider, trimmedModel); + + // A price book row is the deployment's own pricing for the model, so it + // wins outright. A null field on that row means the category is unpriced + // (the cost engine bills it as zero), not that the catalog should fill it + // in. The catalog is only the fallback when the model has no row at all. + const costs: ModelCosts | undefined = livePrice + ? { + inputCost: priceOrUndefined(livePrice.input_price), + outputCost: priceOrUndefined(livePrice.output_price), + cacheReadCost: priceOrUndefined(livePrice.cache_read_price), + cacheWriteCost: priceOrUndefined(livePrice.cache_write_price), + } + : knownModel; + + if (livePricesQuery.isError) { + return ( +

+ + Couldn't load pricing. +

+ ); + } + + if ( + !livePriceLoading && + (costs === undefined || + priceEstimateFields.every(([, key]) => costs[key] === undefined)) + ) { + return ( +

+ No pricing data for this model. +

+ ); + } + + return ( + <> + {priceEstimateFields.map(([label, key]) => { + const cost = costs?.[key]; + const fieldId = `${fieldIdPrefix}-${label.toLowerCase().replace(/\s+/g, "-")}`; + const displayValue = + cost === undefined ? "" : formatPricePerMillionTokens(cost).slice(1); + return ( +

+ + + $ + {livePriceLoading ? ( + + ) : ( + + )} + + + USD/1M tokens + + + +

+ ); + })} + + ); +}; diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.test.ts b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.test.ts index 80a7ecc47a8..b49c3567322 100644 --- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.test.ts +++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.test.ts @@ -3,6 +3,7 @@ import { findKnownModelByCanonicalId, findKnownModelByExactAlias, formatContextBadge, + formatPricePerMillionTokens, getKnownModelsForProvider, searchKnownModels, } from "./index"; @@ -123,6 +124,42 @@ describe("findKnownModelByExactAlias", () => { }); }); +describe("formatPricePerMillionTokens", () => { + it("formats whole-dollar prices", () => { + expect(formatPricePerMillionTokens(10)).toBe("$10"); + }); + + it("formats fractional prices without dropping precision", () => { + expect(formatPricePerMillionTokens(1.25)).toBe("$1.25"); + expect(formatPricePerMillionTokens(0.1)).toBe("$0.10"); + expect(formatPricePerMillionTokens(0.3)).toBe("$0.30"); + }); + + it("keeps sub-cent prices visible", () => { + expect(formatPricePerMillionTokens(0.075)).toBe("$0.075"); + expect(formatPricePerMillionTokens(0.003625)).toBe("$0.0036"); + expect(formatPricePerMillionTokens(0.125)).toBe("$0.125"); + }); + + it("shows a threshold for positive prices below four decimals", () => { + expect(formatPricePerMillionTokens(0.000001)).toBe("<$0.0001"); + expect(formatPricePerMillionTokens(0.000049)).toBe("<$0.0001"); + expect(formatPricePerMillionTokens(0.0001)).toBe("$0.0001"); + }); + + it("formats zero", () => { + expect(formatPricePerMillionTokens(0)).toBe("$0"); + }); + + it("rejects non-finite values", () => { + for (const invalidValue of [Number.NaN, Number.POSITIVE_INFINITY]) { + expect(() => formatPricePerMillionTokens(invalidValue)).toThrow( + "price must be a finite number", + ); + } + }); +}); + describe("findKnownModelByCanonicalId", () => { it("returns exact canonical lookup", () => { expect(findKnownModelByCanonicalId("openai", "gpt-5.5")?.displayName).toBe( diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.ts b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.ts index 164a8810df3..765face1b66 100644 --- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.ts +++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/knownModels/index.ts @@ -100,3 +100,22 @@ export const formatContextBadge = (contextLimit: number): string => { } return `${formatCompactNumber(contextLimit / 1_000_000)}M context`; }; + +export const formatPricePerMillionTokens = (value: number): string => { + if (!Number.isFinite(value)) { + throw new Error("price must be a finite number"); + } + if (Number.isInteger(value)) { + return `$${value}`; + } + // A positive price too small to show at four decimals would otherwise + // render as $0.00 and read as free, so show it as a threshold instead. + if (value > 0 && value < 0.0001) { + return "<$0.0001"; + } + // Keep two decimals so cents read as cents ($0.10, not $0.1). Keep up to + // four so sub-cent prices stay visible ($0.075, $0.0036). + const [whole, decimals = ""] = value.toFixed(4).split("."); + const trimmed = decimals.slice(0, 2) + decimals.slice(2).replace(/0+$/, ""); + return `$${whole}.${trimmed}`; +};