Hide cost and usage in playground and evaluation when these are not specified

agenta-web/src/components/Playground/Views/TestView.tsx

@@ -22,7 +22,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import duration from "dayjs/plugin/duration"
 import {useQueryParam} from "@/hooks/useQuery"
-import {formatLatency} from "@/lib/helpers/formatters"
+import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
 
 dayjs.extend(relativeTime)
 dayjs.extend(duration)
@@ -218,13 +218,13 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     <p>
                         Tokens:{" "}
                         {additionalData.usage !== null
-                            ? JSON.stringify(additionalData.usage.total_tokens)
+                            ? formatTokenUsage(additionalData.usage.total_tokens)
                             : 0}
                     </p>
                     <p>
                         Cost:{" "}
                         {additionalData.cost !== null
-                            ? `$${additionalData.cost.toFixed(4)}`
+                            ? formatCurrency(additionalData.cost)
                             : "$0.00"}
                     </p>
                     <p>

agenta-web/src/lib/helpers/formatters.ts

@@ -5,17 +5,25 @@ const intlNumber = new Intl.NumberFormat("en-US", {
 const intlCurrency = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
-    maximumFractionDigits: 4,
+    maximumFractionDigits: 6,
 })
 
 export const formatNumber = (value = 0) => {
     return intlNumber.format(value)
 }
 
-export const formatCurrency = (value = 0) => {
+export const formatCurrency = (value: number) => {
     return intlCurrency.format(value)
 }
 
 export const formatLatency = (value = 0) => {
     return `${Math.round(value * 1000)}ms`
 }
+
+export const formatTokenUsage = (value: number) => {
+    if (value === 0) {
+        return "-"
+    } else {
+        return value
+    }
+}