Merge pull request #1964 from Kilo-Org/christiaan/costPerRequest

Show cost per request in addition to cost per M

Author: chrarnoldus

.changeset/unlucky-knives-cheer.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+The Kilo Code API Provider settings now also shows the average cost per request in addition to the average cost per million tokens for a particular model.

webview-ui/src/components/kilocode/settings/KiloModelInfoView.tsx

@@ -1,5 +1,4 @@
 import { type ModelInfo, type ProviderSettings } from "@roo-code/types"
-import { formatPrice } from "@src/utils/formatPrice"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { ModelDescriptionMarkdown } from "../../settings/ModelDescriptionMarkdown"
 import { ModelInfoSupportsItem } from "@/components/settings/ModelInfoView"
@@ -10,6 +9,21 @@ import { getKiloBaseUriFromToken } from "@roo/kilocode/token"
 import { telemetryClient } from "@/utils/TelemetryClient"
 import { useModelProviders } from "@/components/ui/hooks/useSelectedModel"
 
+type ModelStats = {
+	model: string
+	cost?: Intl.StringNumericLiteral
+	costPerRequest?: Intl.StringNumericLiteral
+}
+
+export const formatPrice = (price: number | Intl.StringNumericLiteral, digits: number = 2) => {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits,
+	}).format(price)
+}
+
 const PricingTable = ({ providers }: { providers: (ModelInfo & { label: string })[] }) => {
 	const { t } = useAppTranslation()
 	const thClass = "text-left px-3 py-2 font-medium text-vscode-foreground whitespace-nowrap"
@@ -75,7 +89,7 @@ export const KiloModelInfoView = ({
 }) => {
 	const { t } = useAppTranslation()
 	const providers = Object.values(useModelProviders(modelId, apiConfiguration).data ?? {})
-	const { data: modelStats } = useQuery<{ model: string; cost: Intl.StringNumericLiteral | number }[]>({
+	const { data: modelStats } = useQuery<ModelStats[]>({
 		queryKey: ["modelstats"],
 		queryFn: async () => {
 			try {
@@ -90,7 +104,7 @@ export const KiloModelInfoView = ({
 			}
 		},
 	})
-	const averageCost = modelStats?.find((ms) => ms.model === modelId)?.cost
+	const stats = modelStats?.find((ms) => ms.model === modelId)
 
 	return (
 		<>
@@ -124,15 +138,17 @@ export const KiloModelInfoView = ({
 					<span className="font-medium">{t("settings:modelInfo.maxOutput")}:</span>{" "}
 					{model.maxTokens?.toLocaleString() ?? 0}
 				</div>
-				{typeof averageCost !== "undefined" && (
-					<StandardTooltip content={t("kilocode:settings.modelInfo.averageKiloCodeCostDescription")}>
-						<div>
-							<span className="font-medium">{t("kilocode:settings.modelInfo.averageKiloCodeCost")}:</span>{" "}
-							{formatPrice(averageCost)} / M tokens
-						</div>
-					</StandardTooltip>
-				)}
 			</div>
+			{stats && stats.cost && stats.costPerRequest && model.inputPrice && model.outputPrice && (
+				<StandardTooltip content={t("kilocode:settings.modelInfo.averageKiloCodeCost")}>
+					<div className="text-sm text-vscode-descriptionForeground font-medium flex flex-wrap gap-2">
+						<div className="rounded-full border px-2.5 py-1">{formatPrice(stats.cost)} / M tokens</div>
+						<div className="rounded-full border px-2.5 py-1">
+							{formatPrice(stats.costPerRequest, 4)} / request
+						</div>
+					</div>
+				</StandardTooltip>
+			)}
 			<Collapsible open={isPricingExpanded} onOpenChange={setIsPricingExpanded}>
 				<CollapsibleTrigger className="flex items-center gap-1 w-full cursor-pointer hover:opacity-80 mb-2">
 					<span className={`codicon codicon-chevron-${isPricingExpanded ? "down" : "right"}`}></span>

webview-ui/src/i18n/locales/ar/kilocode.json

@@ -53,8 +53,7 @@
 		"modelInfo": {
 			"contextWindow": "Context window",
 			"providerBreakdown": "Provider Price and Capability Breakdown",
-			"averageKiloCodeCost": "Average Kilo Code cost",
-			"averageKiloCodeCostDescription": "This is the average actual spent for Kilo Code using this model over the last week. It may be lower than the listed price due to prompt cache utilization.",
+			"averageKiloCodeCost": "This is the average actual spent for Kilo Code using this model over the last week. It may be lower than the listed price due to prompt cache utilization.",
 			"table": {
 				"provider": "Provider",
 				"context": "The endpoint can process this number of tokens (input + output).",