+ {loading && (
+
+ } size="small" />
+ Updating...
+
+ )}
+
+
+
+ Total/Request
+ {formatCost(result.cost_per_request)}
+
+
+ Input Cost
+ {formatCost(result.input_cost_per_request)}
+
+
+ Output Cost
+ {formatCost(result.output_cost_per_request)}
+
+
+ Margin Fee
+ 0 ? "text-amber-600" : ""}`}>
+ {formatCost(result.margin_cost_per_request)}
+
+
+
+
+ {periodCost !== null && (
+
+
+ {periodLabel} Total ({formatRequests(periodRequests)} req)
+
+ {formatCost(periodCost)}
+
+
+
+ {periodLabel} Input
+ {formatCost(periodInputCost)}
+
+
+ {periodLabel} Output
+ {formatCost(periodOutputCost)}
+
+
+ {periodLabel} Margin Fee
+ 0 ? "text-amber-600" : ""}`}>
+ {formatCost(periodMarginCost)}
+
+
+
+ )}
+
+ {(result.input_cost_per_token || result.output_cost_per_token) && (
+
+ Token Pricing: {" "}
+ {result.input_cost_per_token && (
+ Input ${formatNumberWithCommas(result.input_cost_per_token * 1_000_000, 2)}/1M
+ )}
+ {result.input_cost_per_token && result.output_cost_per_token && " | "}
+ {result.output_cost_per_token && (
+ Output ${formatNumberWithCommas(result.output_cost_per_token * 1_000_000, 2)}/1M
+ )}
+
+ )}
+
+ );
+};
+
+const MultiCostResults: React.FC