Remove model from promptVariant and add cost

Storing the model on promptVariant is problematic because it isn't always in sync with the actual prompt definition. I'm removing it for now to see if we can get away with that -- might have to add it back in later if this causes trouble.

Added `cost` to modelOutput as well so we can cache that, which is important given that the cost calculations won't be the same between different API providers.

src/components/OutputsTable/OutputCell/OutputCell.tsx

@@ -129,7 +129,7 @@ export default function OutputCell({
             )}
           </SyntaxHighlighter>
         </VStack>
-        <OutputStats model={variant.model} modelOutput={modelOutput} scenario={scenario} />
+        <OutputStats modelOutput={modelOutput} scenario={scenario} />
       </VStack>
     );
   }
@@ -143,9 +143,7 @@ export default function OutputCell({
         <CellOptions refetchingOutput={refetchingOutput} refetchOutput={hardRefetch} />
         <Text>{contentToDisplay}</Text>
       </VStack>
-      {modelOutput && (
-        <OutputStats model={variant.model} modelOutput={modelOutput} scenario={scenario} />
-      )}
+      {modelOutput && <OutputStats modelOutput={modelOutput} scenario={scenario} />}
     </VStack>
   );
 }

src/components/OutputsTable/OutputCell/OutputStats.tsx

@@ -1,19 +1,14 @@
-import { type SupportedModel } from "~/server/types";
 import { type Scenario } from "../types";
 import { type RouterOutputs } from "~/utils/api";
-import { calculateTokenCost } from "~/utils/calculateTokenCost";
 import { HStack, Icon, Text, Tooltip } from "@chakra-ui/react";
 import { BsCheck, BsClock, BsCurrencyDollar, BsX } from "react-icons/bs";
 import { CostTooltip } from "~/components/tooltip/CostTooltip";
 
-const SHOW_COST = true;
 const SHOW_TIME = true;
 
 export const OutputStats = ({
-  model,
   modelOutput,
 }: {
-  model: SupportedModel | string | null;
   modelOutput: NonNullable<
     NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>["modelOutput"]
   >;
@@ -24,12 +19,6 @@ export const OutputStats = ({
   const promptTokens = modelOutput.promptTokens;
   const completionTokens = modelOutput.completionTokens;
 
-  const promptCost = promptTokens && model ? calculateTokenCost(model, promptTokens) : 0;
-  const completionCost =
-    completionTokens && model ? calculateTokenCost(model, completionTokens, true) : 0;
-
-  const cost = promptCost + completionCost;
-
   return (
     <HStack w="full" align="center" color="gray.500" fontSize="2xs" mt={{ base: 0, md: 1 }}>
       <HStack flex={1}>
@@ -53,11 +42,15 @@ export const OutputStats = ({
           );
         })}
       </HStack>
-      {SHOW_COST && (
-        <CostTooltip promptTokens={promptTokens} completionTokens={completionTokens} cost={cost}>
+      {modelOutput.cost && (
+        <CostTooltip
+          promptTokens={promptTokens}
+          completionTokens={completionTokens}
+          cost={modelOutput.cost}
+        >
           <HStack spacing={0}>
             <Icon as={BsCurrencyDollar} />
-            <Text mr={1}>{cost.toFixed(3)}</Text>
+            <Text mr={1}>{modelOutput.cost.toFixed(3)}</Text>
           </HStack>
         </CostTooltip>
       )}

src/components/OutputsTable/VariantStats.tsx

@@ -1,4 +1,4 @@
-import { HStack, Icon, Skeleton, Text, useToken } from "@chakra-ui/react";
+import { HStack, Icon, Text, useToken } from "@chakra-ui/react";
 import { type PromptVariant } from "./types";
 import { cellPadding } from "../constants";
 import { api } from "~/utils/api";
@@ -69,7 +69,7 @@ export default function VariantStats(props: { variant: PromptVariant }) {
           );
         })}
       </HStack>
-      {data.overallCost && !data.awaitingRetrievals ? (
+      {data.overallCost && !data.awaitingRetrievals && (
         <CostTooltip
           promptTokens={data.promptTokens}
           completionTokens={data.completionTokens}
@@ -80,8 +80,6 @@ export default function VariantStats(props: { variant: PromptVariant }) {
             <Text mr={1}>{data.overallCost.toFixed(3)}</Text>
           </HStack>
         </CostTooltip>
-      ) : (
-        <Skeleton height={4} width={12} mr={1} />
       )}
     </HStack>
   );

src/components/VariantHeader/VariantHeaderMenuButton.tsx

@@ -14,12 +14,12 @@ import {
 } from "@chakra-ui/react";
 import { BsFillTrashFill, BsGear } from "react-icons/bs";
 import { FaRegClone } from "react-icons/fa";
-import { RiExchangeFundsFill } from "react-icons/ri";
 import { AiOutlineDiff } from "react-icons/ai";
 import { useState } from "react";
+import { RefinePromptModal } from "../RefinePromptModal/RefinePromptModal";
+import { RiExchangeFundsFill } from "react-icons/ri";
 import { SelectModelModal } from "../SelectModelModal/SelectModelModal";
 import { type SupportedModel } from "~/server/types";
-import { RefinePromptModal } from "../RefinePromptModal/RefinePromptModal";
 
 export default function VariantHeaderMenuButton({
   variant,