From 2fcfdfa5ddd29fcc7457bb1dae9b57efe5acb475 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Tue, 30 Dec 2025 21:12:58 +0600
Subject: [PATCH 01/12] added provider model metrics

---
 sdk/agenta/sdk/assets.py                      | 65 ++++++++++---
 sdk/agenta/sdk/types.py                       |  8 +-
 .../components/SelectLLMProvider/index.tsx    | 96 +++++++++++++++----
 .../components/SessionsTable/index.tsx        |  1 +
 .../genericTransformer/helpers/metadata.ts    | 43 +++++++--
 .../genericTransformer/types/schema.d.ts      |  1 +
 6 files changed, 173 insertions(+), 41 deletions(-)

diff --git a/sdk/agenta/sdk/assets.py b/sdk/agenta/sdk/assets.py
index 4457ab357b..b0ee836285 100644
--- a/sdk/agenta/sdk/assets.py
+++ b/sdk/agenta/sdk/assets.py
@@ -1,19 +1,19 @@
 supported_llm_models = {
     "anthropic": [
-        "anthropic/claude-sonnet-4-5",
-        "anthropic/claude-haiku-4-5",
-        "anthropic/claude-opus-4-1",
-        "anthropic/claude-sonnet-4-20250514",
-        "anthropic/claude-opus-4-20250514",
-        "anthropic/claude-3-7-sonnet-20250219",
-        "anthropic/claude-3-5-sonnet-20241022",
-        "anthropic/claude-3-5-sonnet-20240620",
-        "anthropic/claude-3-5-haiku-20241022",
-        "anthropic/claude-3-opus-20240229",
-        "anthropic/claude-3-sonnet-20240229",
-        "anthropic/claude-3-haiku-20240307",
-        "anthropic/claude-2.1",
-        "anthropic/claude-2",
+        "claude-sonnet-4-5",
+        "claude-haiku-4-5",
+        "claude-opus-4-1",
+        "claude-sonnet-4-20250514",
+        "claude-opus-4-20250514",
+        "claude-3-7-sonnet-20250219",
+        "claude-3-5-sonnet-20241022",
+        "claude-3-5-sonnet-20240620",
+        "claude-3-5-haiku-20241022",
+        "claude-3-opus-20240229",
+        "claude-3-sonnet-20240229",
+        "claude-3-haiku-20240307",
+        "claude-2.1",
+        "claude-2",
     ],
     "cohere": [
         "cohere/command-light",
@@ -206,6 +206,43 @@
 
 providers_list = list(supported_llm_models.keys())
 
+
+from typing import TypedDict, Dict
+import litellm
+
+
+class ModelMetadata(TypedDict):
+    input: float
+    output: float
+
+
+model_metadata: Dict[str, Dict[str, ModelMetadata]] = {}
+
+for provider, models in supported_llm_models.items():
+    model_metadata[provider] = {}
+    for model in models:
+        cost_info = None
+
+        # 1. Check for exact match
+        if model in litellm.model_cost:
+            cost_info = litellm.model_cost[model]
+
+        # 2. Check for match without provider prefix
+        if not cost_info and "/" in model:
+            short_name = model.split("/", 1)[1]
+            if short_name in litellm.model_cost:
+                cost_info = litellm.model_cost[short_name]
+
+        if cost_info:
+            input_cost = cost_info.get("input_cost_per_token", 0) * 1_000_000
+            output_cost = cost_info.get("output_cost_per_token", 0) * 1_000_000
+
+            if input_cost > 0 or output_cost > 0:
+                model_metadata[provider][model] = {
+                    "input": input_cost,
+                    "output": output_cost,
+                }
+
 model_to_provider_mapping = {
     model: provider
     for provider, models in supported_llm_models.items()
diff --git a/sdk/agenta/sdk/types.py b/sdk/agenta/sdk/types.py
index f5953a142f..243886ac31 100644
--- a/sdk/agenta/sdk/types.py
+++ b/sdk/agenta/sdk/types.py
@@ -8,7 +8,7 @@
 from starlette.responses import StreamingResponse
 
 
-from agenta.sdk.assets import supported_llm_models
+from agenta.sdk.assets import supported_llm_models, model_metadata
 from agenta.client.backend.types import AgentaNodesResponse, AgentaNodeDto
 
 
@@ -23,7 +23,11 @@ def MCField(  # pylint: disable=invalid-name
 ) -> Field:
     # Pydantic 2.12+ no longer allows post-creation mutation of field properties
     if isinstance(choices, dict):
-        json_extra = {"choices": choices, "x-parameter": "grouped_choice"}
+        json_extra = {
+            "choices": choices,
+            "x-parameter": "grouped_choice",
+            "x-model-metadata": model_metadata,
+        }
     elif isinstance(choices, list):
         json_extra = {"choices": choices, "x-parameter": "choice"}
     else:
diff --git a/web/oss/src/components/SelectLLMProvider/index.tsx b/web/oss/src/components/SelectLLMProvider/index.tsx
index 15bbb04df7..42d1fabe4d 100644
--- a/web/oss/src/components/SelectLLMProvider/index.tsx
+++ b/web/oss/src/components/SelectLLMProvider/index.tsx
@@ -1,13 +1,13 @@
 import {useMemo, useRef, useState} from "react"
 
 import {CaretRight, Plus, X} from "@phosphor-icons/react"
-import {Select, Input, Button, Divider, InputRef, Popover} from "antd"
+import {Button, Divider, Input, InputRef, Popover, Select, Typography} from "antd"
 import clsx from "clsx"
 
 import useLazyEffect from "@/oss/hooks/useLazyEffect"
 import {useVaultSecret} from "@/oss/hooks/useVaultSecret"
 import {capitalize} from "@/oss/lib/helpers/utils"
-import {SecretDTOProvider, PROVIDER_LABELS} from "@/oss/lib/Types"
+import {PROVIDER_LABELS, SecretDTOProvider} from "@/oss/lib/Types"
 
 import LLMIcons from "../LLMIcons"
 import Anthropic from "../LLMIcons/assets/Anthropic"
@@ -25,6 +25,7 @@ interface ProviderOption {
     label: string
     value: string
     key?: string
+    metadata?: Record<string, any>
 }
 
 interface ProviderGroup {
@@ -169,6 +170,7 @@ const SelectLLMProvider = ({
                                 label: resolvedLabel,
                                 value: resolvedValue,
                                 key: option?.key ?? resolvedValue,
+                                metadata: option?.metadata,
                             }
                         })
                         .filter(Boolean) as ProviderOption[]) ?? [],
@@ -208,6 +210,65 @@ const SelectLLMProvider = ({
         setTimeout(() => setOpen(false), 0)
     }
 
+    const renderTooltipContent = (metadata: Record<string, any>) => (
+        <div className="flex flex-col gap-0.5">
+            {(metadata.input !== undefined || metadata.output !== undefined) && (
+                <>
+                    <div className="flex justify-between gap-4">
+                        <Typography.Text type="secondary" className="text-[10px] text-nowrap">
+                            Input:
+                        </Typography.Text>
+                        <Typography.Text className="text-[10px] text-nowrap">
+                            ${metadata.input} / 1M
+                        </Typography.Text>
+                    </div>
+                    <div className="flex justify-between gap-4">
+                        <Typography.Text type="secondary" className="text-[10px] text-nowrap">
+                            Output:{" "}
+                        </Typography.Text>
+                        <Typography.Text className="text-[10px] text-nowrap">
+                            ${metadata.output} / 1M
+                        </Typography.Text>
+                    </div>
+                </>
+            )}
+        </div>
+    )
+
+    const renderOptionContent = (option: ProviderOption) => {
+        const Icon = getProviderIcon(option.value) || LLMIcons[option.label]
+        return (
+            <div className="flex items-center gap-2 w-full justify-between group h-full">
+                <div className="flex items-center gap-2 overflow-hidden w-full">
+                    {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+                    <span className="truncate">{option.label}</span>
+                </div>
+            </div>
+        )
+    }
+
+    const renderOption = (option: ProviderOption) => {
+        const content = renderOptionContent(option)
+
+        if (option.metadata) {
+            return (
+                <div className="w-full h-full" onClick={(e) => e.stopPropagation()}>
+                    <Popover
+                        content={renderTooltipContent(option.metadata)}
+                        placement="right"
+                        classNames={{
+                            container: "w-42 max-w-[600px]",
+                        }}
+                    >
+                        {content}
+                    </Popover>
+                </div>
+            )
+        }
+
+        return content
+    }
+
     return (
         <>
             <Select
@@ -225,6 +286,7 @@ const SelectLLMProvider = ({
                 placeholder="Select a provider"
                 style={{width: "100%"}}
                 virtual={false}
+                optionLabelProp="label"
                 className={clsx([
                     "[&_.ant-select-item-option-content]:flex [&_.ant-select-item-option-content]:items-center [&_.ant-select-item-option-content]:gap-2 [&_.ant-select-selection-item]:!flex [&_.ant-select-selection-item]:!items-center [&_.ant-select-selection-item]:!gap-2",
                     className,
@@ -292,10 +354,7 @@ const SelectLLMProvider = ({
                                                                 handleSelect(option.value)
                                                             }}
                                                         >
-                                                            {Icon && (
-                                                                <Icon className="w-4 h-4 flex-shrink-0" />
-                                                            )}
-                                                            <span>{option.label}</span>
+                                                            {renderOption(option)}
                                                         </div>
                                                     ))}
                                                 </div>
@@ -369,27 +428,26 @@ const SelectLLMProvider = ({
                             }
                         >
                             {group.options?.map((option) => {
-                                const Icon =
-                                    getProviderIcon(group.label || "") || LLMIcons[option.label]
                                 return (
-                                    <Option key={option.key ?? option.value} value={option.value}>
-                                        <div className="flex items-center gap-2">
-                                            {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
-                                            <span>{option.label}</span>
-                                        </div>
+                                    <Option
+                                        key={option.key ?? option.value}
+                                        value={option.value}
+                                        label={renderOptionContent(option)}
+                                    >
+                                        {renderOption(option)}
                                     </Option>
                                 )
                             })}
                         </OptGroup>
                     ) : (
                         group.options?.map((option) => {
-                            const Icon = getProviderIcon(option.value) || LLMIcons[option.label]
                             return (
-                                <Option key={option.key ?? option.value} value={option.value}>
-                                    <div className="flex items-center gap-2">
-                                        {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
-                                        <span>{option.label}</span>
-                                    </div>
+                                <Option
+                                    key={option.key ?? option.value}
+                                    value={option.value}
+                                    label={renderOptionContent(option)}
+                                >
+                                    {renderOption(option)}
                                 </Option>
                             )
                         })
diff --git a/web/oss/src/components/pages/observability/components/SessionsTable/index.tsx b/web/oss/src/components/pages/observability/components/SessionsTable/index.tsx
index 4b42aa8623..79471f62c8 100644
--- a/web/oss/src/components/pages/observability/components/SessionsTable/index.tsx
+++ b/web/oss/src/components/pages/observability/components/SessionsTable/index.tsx
@@ -10,6 +10,7 @@ import {useSessions} from "@/oss/state/newObservability/hooks/useSessions"
 import {openSessionDrawerWithUrlAtom} from "@/oss/state/url/session"
 
 import {AUTO_REFRESH_INTERVAL} from "../../constants"
+
 import EmptySessions from "./assets/EmptySessions"
 import {getSessionColumns, SessionRow} from "./assets/getSessionColumns"
 
diff --git a/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts b/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
index e2e20b2147..55aa5589a5 100644
--- a/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
+++ b/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
@@ -1,14 +1,14 @@
 import {toCamelCase} from "@/oss/lib/shared/variant/stringUtils"
 
 import type {
-    SelectOptions,
     BaseOption,
+    ConfigMetadata,
+    ObjectMetadata,
     OptionGroup,
-    SchemaProperty,
     PrimitiveSchema,
-    ConfigMetadata,
+    SchemaProperty,
     SchemaType,
-    ObjectMetadata,
+    SelectOptions,
 } from "../types"
 
 import {processAnyOfSchema} from "./anyOf"
@@ -79,10 +79,38 @@ function isStringRecord(value: unknown): value is Record<string, string[]> {
     )
 }
 
+/**
+ * Find metadata for a specific model by searching through all providers
+ */
+function findModelMetadata(
+    modelValue: string,
+    metadata?: Record<string, unknown>,
+): Record<string, unknown> | undefined {
+    if (!metadata) return undefined
+
+    // Check if we can find the model directly (backward compatibility)
+    if (metadata[modelValue]) {
+        return metadata[modelValue] as Record<string, unknown>
+    }
+
+    // Search through providers
+    for (const providerKey of Object.keys(metadata)) {
+        const providerData = metadata[providerKey] as Record<string, Record<string, unknown>>
+        if (providerData && typeof providerData === "object" && providerData[modelValue]) {
+            return providerData[modelValue]
+        }
+    }
+
+    return undefined
+}
+
 /**
  * Transform options from various formats into a standardized array of label-value pairs
  */
-function normalizeOptions(rawOptions: unknown): SelectOptions | undefined {
+function normalizeOptions(
+    rawOptions: unknown,
+    modelMetadata?: Record<string, unknown>,
+): SelectOptions | undefined {
     if (!rawOptions) return undefined
 
     if (isStringArray(rawOptions)) {
@@ -90,6 +118,7 @@ function normalizeOptions(rawOptions: unknown): SelectOptions | undefined {
             (opt): BaseOption => ({
                 label: opt,
                 value: opt,
+                metadata: findModelMetadata(opt, modelMetadata),
             }),
         )
     }
@@ -103,6 +132,7 @@ function normalizeOptions(rawOptions: unknown): SelectOptions | undefined {
                         label: value,
                         value,
                         group,
+                        metadata: findModelMetadata(value, modelMetadata),
                     }),
                 ),
             }),
@@ -125,12 +155,13 @@ export function createBaseMetadata(schema: SchemaProperty) {
     const {schema: extractedSchema, parentTitle, parentDescription} = extractSchema(schema)
 
     const rawOptions = getOptionsFromSchema(extractedSchema)
+    const modelMetadata = extractedSchema["x-model-metadata"] as Record<string, unknown> | undefined
 
     return {
         type: getSchemaType(extractedSchema),
         title: parentTitle ?? extractedSchema.title,
         description: parentDescription ?? extractedSchema.description,
-        options: normalizeOptions(rawOptions),
+        options: normalizeOptions(rawOptions, modelMetadata),
         ...("minimum" in extractedSchema && {min: extractedSchema.minimum}),
         ...("maximum" in extractedSchema && {max: extractedSchema.maximum}),
         ...("format" in extractedSchema && {format: extractedSchema.format}),
diff --git a/web/oss/src/lib/shared/variant/genericTransformer/types/schema.d.ts b/web/oss/src/lib/shared/variant/genericTransformer/types/schema.d.ts
index 6cf9489a86..4545296f83 100644
--- a/web/oss/src/lib/shared/variant/genericTransformer/types/schema.d.ts
+++ b/web/oss/src/lib/shared/variant/genericTransformer/types/schema.d.ts
@@ -19,6 +19,7 @@ export interface BaseSchema extends Base {
     const?: unknown
     enum?: unknown[]
     key?: string
+    "x-model-metadata"?: Record<string, unknown>
 }
 
 export interface BaseSchemaProperties extends BaseSchema {

From 6584b1b4a96cfd72063cfc9b5b258fd25014e01e Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Tue, 30 Dec 2025 18:07:46 +0100
Subject: [PATCH 02/12] feat(sdk): add body param support for variant_slug and
 variant_version

- Add body.get('variant_slug') to variant reference parsing
- Add body.get('variant_version') to variant version parsing
- Convert variant_version to string since JSON integers need conversion
- This makes variant params consistent with how environment params work

Previously, variant_slug only worked via query params or the legacy 'config'
body param. Now 'variant_slug' and 'variant_version' work directly in the
request body, matching the pattern used for 'environment'.
---
 sdk/agenta/sdk/middleware/config.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/sdk/agenta/sdk/middleware/config.py b/sdk/agenta/sdk/middleware/config.py
index cda301ff07..98d960a411 100644
--- a/sdk/agenta/sdk/middleware/config.py
+++ b/sdk/agenta/sdk/middleware/config.py
@@ -224,6 +224,7 @@ async def _parse_variant_ref(
             baggage.get("ag.refs.variant.slug")
             # ALTERNATIVE
             or request.query_params.get("variant_slug")
+            or body.get("variant_slug")
             # LEGACY
             or baggage.get("variant_slug")
             or request.query_params.get("config")
@@ -234,6 +235,7 @@ async def _parse_variant_ref(
             baggage.get("ag.refs.variant.version")
             # ALTERNATIVE
             or request.query_params.get("variant_version")
+            or body.get("variant_version")
             # LEGACY
             or baggage.get("variant_version")
         )
@@ -244,7 +246,7 @@ async def _parse_variant_ref(
         return Reference(
             id=variant_id,
             slug=variant_slug,
-            version=variant_version,
+            version=str(variant_version) if variant_version is not None else None,
         )
 
     async def _parse_environment_ref(

From e23dbb6eff621befaeec1ff7d3418904abc096bf Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Tue, 30 Dec 2025 18:08:11 +0100
Subject: [PATCH 03/12] feat(web): add Invoke LLM snippets for variants & fix
 code snippets

Variant Use API drawer:
- Add 'Invoke LLM' code snippets to VariantUseApiContent, matching the
  deployment drawer functionality
- Use variant_slug and variant_version in request body params
- Reuse LanguageCodeBlock component for consistent UI

Code snippet fixes:
- Fix fetch_variant snippets to use dynamic URL instead of hardcoded
  cloud.agenta.ai
- Fix Authorization header from 'Bearer' to 'ApiKey' for consistency
- Remove inline comments from all snippets (curl, python, typescript)
  that were breaking copy-paste functionality
- Ensure all generated snippets are directly pastable into terminal/editor
---
 .../endpoints/fetch_config/python.ts          |   9 +-
 .../endpoints/fetch_config/typescript.ts      |   4 +-
 .../endpoints/fetch_variant/curl.ts           |   7 +-
 .../endpoints/fetch_variant/python.ts         |   5 +-
 .../endpoints/fetch_variant/typescript.ts     |  33 ++---
 .../endpoints/invoke_llm_app/curl.ts          |   5 +-
 .../endpoints/invoke_llm_app/python.ts        |   4 +-
 .../endpoints/invoke_llm_app/typescript.ts    |   2 +-
 .../assets/VariantUseApiContent.tsx           | 121 ++++++++++++------
 9 files changed, 118 insertions(+), 72 deletions(-)

diff --git a/web/oss/src/code_snippets/endpoints/fetch_config/python.ts b/web/oss/src/code_snippets/endpoints/fetch_config/python.ts
index ff594c9c64..3be4fb23c9 100644
--- a/web/oss/src/code_snippets/endpoints/fetch_config/python.ts
+++ b/web/oss/src/code_snippets/endpoints/fetch_config/python.ts
@@ -1,18 +1,17 @@
 import {getEnv} from "@/oss/lib/helpers/dynamicEnv"
 
 export default function pythonCode(appName: string, env_name: string, apiKey: string): string {
-    return `
-import os
+    return `import os
 import agenta as ag
 
-os.environ["AGENTA_API_KEY"] = "${apiKey}" # Add your API key here
+os.environ["AGENTA_API_KEY"] = "${apiKey}"
 os.environ["AGENTA_HOST"] = "${getEnv("NEXT_PUBLIC_AGENTA_API_URL")}"
 
 ag.init()
 config = ag.ConfigManager.get_from_registry(
     app_slug="${appName}",
-    environment_slug="${env_name}"       
- )
+    environment_slug="${env_name}",
+)
 print(config)
 `
 }
diff --git a/web/oss/src/code_snippets/endpoints/fetch_config/typescript.ts b/web/oss/src/code_snippets/endpoints/fetch_config/typescript.ts
index b6b134ce9d..39e742436d 100644
--- a/web/oss/src/code_snippets/endpoints/fetch_config/typescript.ts
+++ b/web/oss/src/code_snippets/endpoints/fetch_config/typescript.ts
@@ -22,8 +22,8 @@ const getConfig = async (appName: string, environmentSlug: string) => {
             },
         }, {
             headers: {
-                'Content-Type': 'application/json',    
-                'Authorization': "ApiKey ${apiKey}", // Add your API key here
+                'Content-Type': 'application/json',
+                'Authorization': "ApiKey ${apiKey}",
             },
         });
 
diff --git a/web/oss/src/code_snippets/endpoints/fetch_variant/curl.ts b/web/oss/src/code_snippets/endpoints/fetch_variant/curl.ts
index 35cdc05cb7..b950a62422 100644
--- a/web/oss/src/code_snippets/endpoints/fetch_variant/curl.ts
+++ b/web/oss/src/code_snippets/endpoints/fetch_variant/curl.ts
@@ -1,13 +1,14 @@
+import {getEnv} from "@/oss/lib/helpers/dynamicEnv"
+
 export const buildCurlSnippet = (
     appSlug: string,
     variantSlug: string,
     variantVersion: number,
     apiKey: string,
 ) => {
-    return `# Fetch configuration by variant
-curl -X POST "https://cloud.agenta.ai/api/variants/configs/fetch" \\
+    return `curl -X POST "${getEnv("NEXT_PUBLIC_AGENTA_API_URL")}/variants/configs/fetch" \\
   -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer ${apiKey}" \\
+  -H "Authorization: ApiKey ${apiKey}" \\
   -d '{
     "variant_ref": {
       "slug": "${variantSlug}",
diff --git a/web/oss/src/code_snippets/endpoints/fetch_variant/python.ts b/web/oss/src/code_snippets/endpoints/fetch_variant/python.ts
index c6c744f3ce..ac86c5d77f 100644
--- a/web/oss/src/code_snippets/endpoints/fetch_variant/python.ts
+++ b/web/oss/src/code_snippets/endpoints/fetch_variant/python.ts
@@ -3,13 +3,12 @@ export const buildPythonSnippet = (
     variantSlug: string,
     variantVersion: number,
 ) => {
-    return `# Fetch configuration by variant
-import agenta as ag
+    return `import agenta as ag
 
 config = ag.ConfigManager.get_from_registry(
     app_slug="${appSlug}",
     variant_slug="${variantSlug}",
-    variant_version=${variantVersion}  # Optional: If not provided, fetches the latest version
+    variant_version=${variantVersion},
 )
 
 print("Fetched configuration:")
diff --git a/web/oss/src/code_snippets/endpoints/fetch_variant/typescript.ts b/web/oss/src/code_snippets/endpoints/fetch_variant/typescript.ts
index 122581f586..0953ac4f7d 100644
--- a/web/oss/src/code_snippets/endpoints/fetch_variant/typescript.ts
+++ b/web/oss/src/code_snippets/endpoints/fetch_variant/typescript.ts
@@ -1,32 +1,33 @@
+import {getEnv} from "@/oss/lib/helpers/dynamicEnv"
+
 export const buildTypescriptSnippet = (
     appSlug: string,
     variantSlug: string,
     variantVersion: number,
     apiKey: string,
 ) => {
-    return `// Fetch configuration by variant
-    const fetchResponse = await fetch('https://cloud.agenta.ai/api/variants/configs/fetch', {
+    return `const fetchResponse = await fetch('${getEnv("NEXT_PUBLIC_AGENTA_API_URL")}/variants/configs/fetch', {
     method: 'POST',
     headers: {
         'Content-Type': 'application/json',
-        'Authorization': 'Bearer ${apiKey}'
+        'Authorization': 'ApiKey ${apiKey}',
     },
     body: JSON.stringify({
         variant_ref: {
-        slug: '${variantSlug}',
-        version: ${variantVersion},
-        id: null
+            slug: '${variantSlug}',
+            version: ${variantVersion},
+            id: null,
         },
         application_ref: {
-        slug: '${appSlug}',
-        version: null,
-        id: null
-        }
-    })
-    });
+            slug: '${appSlug}',
+            version: null,
+            id: null,
+        },
+    }),
+});
 
-    const config = await fetchResponse.json();
-    console.log('Fetched configuration:');
-    console.log(config);
-    `
+const config = await fetchResponse.json();
+console.log('Fetched configuration:');
+console.log(config);
+`
 }
diff --git a/web/oss/src/code_snippets/endpoints/invoke_llm_app/curl.ts b/web/oss/src/code_snippets/endpoints/invoke_llm_app/curl.ts
index 5169dcf0e2..12106a466c 100644
--- a/web/oss/src/code_snippets/endpoints/invoke_llm_app/curl.ts
+++ b/web/oss/src/code_snippets/endpoints/invoke_llm_app/curl.ts
@@ -2,10 +2,9 @@ export default function cURLCode(uri: string, params: string, apiKey: string): s
     const parsedParams = JSON.parse(params)
     const isChat = parsedParams.messages !== undefined
 
-    return `# Add your API key to the Authorization header
-curl -X POST "${uri}" \\
+    return `curl -X POST "${uri}" \\
 -H "Content-Type: application/json" \\
--H "Authorization: ApiKey ${apiKey}" \\${isChat ? '\n-H "Baggage: ag.session.id=your_session_id" \\ # Optional: track chat sessions' : ""}
+-H "Authorization: ApiKey ${apiKey}" \\${isChat ? '\n-H "Baggage: ag.session.id=your_session_id" \\' : ""}
 -d '${params}'
 `
 }
diff --git a/web/oss/src/code_snippets/endpoints/invoke_llm_app/python.ts b/web/oss/src/code_snippets/endpoints/invoke_llm_app/python.ts
index d8eca52722..897deb0352 100644
--- a/web/oss/src/code_snippets/endpoints/invoke_llm_app/python.ts
+++ b/web/oss/src/code_snippets/endpoints/invoke_llm_app/python.ts
@@ -8,8 +8,8 @@ import json
 url = "${uri}"
 params = ${params}
 headers = {
-    "Content-Type": "application/json",    
-    "Authorization": "ApiKey ${apiKey}", # Add your API key here${isChat ? '\n    "Baggage": "ag.session.id=your_session_id", # Optional: track chat sessions' : ""}
+    "Content-Type": "application/json",
+    "Authorization": "ApiKey ${apiKey}",${isChat ? '\n    "Baggage": "ag.session.id=your_session_id",' : ""}
 }
 
 response = requests.post(url, json=params, headers=headers)
diff --git a/web/oss/src/code_snippets/endpoints/invoke_llm_app/typescript.ts b/web/oss/src/code_snippets/endpoints/invoke_llm_app/typescript.ts
index d3ab9f8b4e..fa2fdeccd0 100644
--- a/web/oss/src/code_snippets/endpoints/invoke_llm_app/typescript.ts
+++ b/web/oss/src/code_snippets/endpoints/invoke_llm_app/typescript.ts
@@ -11,7 +11,7 @@ const generate = async () => {
     const data = ${params};
     const headers = {
         "Content-Type": "application/json",
-        "Authorization": "ApiKey ${apiKey}", // Add your API key here${isChat ? '\n        "Baggage": "ag.session.id=your_session_id" // Optional: track chat sessions' : ""}
+        "Authorization": "ApiKey ${apiKey}",${isChat ? '\n        "Baggage": "ag.session.id=your_session_id",' : ""}
     };
 
     const response = await axios.post(url, data, { headers });
diff --git a/web/oss/src/components/DeploymentsDashboard/assets/VariantUseApiContent.tsx b/web/oss/src/components/DeploymentsDashboard/assets/VariantUseApiContent.tsx
index 915b8a7396..b68f4fdf08 100644
--- a/web/oss/src/components/DeploymentsDashboard/assets/VariantUseApiContent.tsx
+++ b/web/oss/src/components/DeploymentsDashboard/assets/VariantUseApiContent.tsx
@@ -1,19 +1,23 @@
 import {useCallback, useEffect, useMemo, useState} from "react"
 
 import {PythonOutlined} from "@ant-design/icons"
-import {FileCodeIcon, FileTsIcon} from "@phosphor-icons/react"
-import {Tabs, Typography} from "antd"
+import {FileCode, FileTs} from "@phosphor-icons/react"
+import {Spin, Tabs, Typography} from "antd"
 import {useAtomValue} from "jotai"
 import dynamic from "next/dynamic"
 
 import {buildCurlSnippet} from "@/oss/code_snippets/endpoints/fetch_variant/curl"
 import {buildPythonSnippet} from "@/oss/code_snippets/endpoints/fetch_variant/python"
 import {buildTypescriptSnippet} from "@/oss/code_snippets/endpoints/fetch_variant/typescript"
-import CopyButton from "@/oss/components/CopyButton/CopyButton"
-import CodeBlock from "@/oss/components/DynamicCodeBlock/CodeBlock"
+import invokeLlmAppcURLCode from "@/oss/code_snippets/endpoints/invoke_llm_app/curl"
+import invokeLlmApppythonCode from "@/oss/code_snippets/endpoints/invoke_llm_app/python"
+import invokeLlmApptsCode from "@/oss/code_snippets/endpoints/invoke_llm_app/typescript"
+import LanguageCodeBlock from "@/oss/components/pages/overview/deployments/DeploymentDrawer/assets/LanguageCodeBlock"
 import SelectVariant from "@/oss/components/Playground/Components/Menus/SelectVariant"
 import VariantDetailsWithStatus from "@/oss/components/VariantDetailsWithStatus"
-import {currentAppAtom} from "@/oss/state/app"
+import {useAppId} from "@/oss/hooks/useAppId"
+import {currentAppAtom, useURI} from "@/oss/state/app"
+import {stablePromptVariablesAtomFamily} from "@/oss/state/newPlayground/core/prompts"
 import {revisionsByVariantIdAtomFamily, variantsAtom} from "@/oss/state/variant/atoms/fetcher"
 import {
     latestRevisionInfoByVariantIdAtomFamily,
@@ -29,13 +33,8 @@ interface VariantUseApiContentProps {
     initialRevisionId?: string
 }
 
-interface CodeSnippets {
-    python: string
-    typescript: string
-    bash: string
-}
-
 const VariantUseApiContent = ({initialRevisionId}: VariantUseApiContentProps) => {
+    const appId = useAppId()
     const variants = useAtomValue(variantsAtom)
     const revisionList = useAtomValue(revisionListAtom)
     const currentApp = useAtomValue(currentAppAtom)
@@ -45,6 +44,15 @@ const VariantUseApiContent = ({initialRevisionId}: VariantUseApiContentProps) =>
     const [selectedLang, setSelectedLang] = useState("python")
     const [apiKeyValue, setApiKeyValue] = useState("")
 
+    // Get URI for the selected variant
+    const {data: uri, isLoading: isUriQueryLoading} = useURI(appId, selectedVariantId)
+    const isLoading = Boolean(selectedVariantId) && isUriQueryLoading
+
+    // Get variable names for the selected revision
+    const variableNames = useAtomValue(
+        stablePromptVariablesAtomFamily(selectedRevisionId || ""),
+    ) as string[]
+
     const initialRevision = useMemo(
         () => revisionList.find((rev) => rev.id === initialRevisionId),
         [initialRevisionId, revisionList],
@@ -120,13 +128,52 @@ const VariantUseApiContent = ({initialRevisionId}: VariantUseApiContentProps) =>
     const variantSlug =
         (selectedVariant as any)?.variantSlug ||
         selectedVariant?.variantName ||
-        selectedRevision?.variantName ||
+        (selectedRevision as any)?.variantName ||
         "my-variant-slug"
     const variantVersion = selectedRevision?.revision ?? latestRevision?.revision ?? 1
     const appSlug = (currentApp as any)?.app_slug || currentApp?.app_name || "my-app-slug"
     const apiKey = apiKeyValue || "YOUR_API_KEY"
 
-    const codeSnippets: CodeSnippets = useMemo(
+    const invokeLlmUrl = uri ?? ""
+
+    // Build params for invoke LLM (with variant refs instead of environment)
+    const params = useMemo(() => {
+        const synthesized = variableNames.map((name) => ({name, input: name === "messages"}))
+
+        const mainParams: Record<string, any> = {}
+        const secondaryParams: Record<string, any> = {}
+
+        synthesized.forEach((item) => {
+            if (item.input) {
+                mainParams[item.name] = "add_a_value"
+            } else {
+                secondaryParams[item.name] = "add_a_value"
+            }
+        })
+
+        const hasMessagesParam = synthesized.some((p) => p?.name === "messages")
+        const isChat = currentApp?.app_type === "chat" || hasMessagesParam
+        if (isChat) {
+            mainParams["messages"] = [
+                {
+                    role: "user",
+                    content: "",
+                },
+            ]
+            mainParams["inputs"] = secondaryParams
+        } else if (Object.keys(secondaryParams).length > 0) {
+            mainParams["inputs"] = secondaryParams
+        }
+
+        // Use variant refs instead of environment
+        mainParams["app"] = appSlug
+        mainParams["variant_slug"] = variantSlug
+        mainParams["variant_version"] = variantVersion
+
+        return JSON.stringify(mainParams, null, 2)
+    }, [variableNames, currentApp?.app_type, appSlug, variantSlug, variantVersion])
+
+    const fetchConfigCodeSnippet = useMemo(
         () => ({
             python: buildPythonSnippet(appSlug, variantSlug, variantVersion),
             typescript: buildTypescriptSnippet(appSlug, variantSlug, variantVersion, apiKey),
@@ -135,48 +182,48 @@ const VariantUseApiContent = ({initialRevisionId}: VariantUseApiContentProps) =>
         [apiKey, appSlug, variantSlug, variantVersion],
     )
 
-    const renderTabChildren = useCallback(() => {
-        const activeSnippet = codeSnippets[selectedLang as keyof CodeSnippets]
+    const invokeLlmAppCodeSnippet = useMemo(
+        () => ({
+            python: invokeLlmApppythonCode(invokeLlmUrl, params, apiKeyValue || "x.xxxxxxxx"),
+            bash: invokeLlmAppcURLCode(invokeLlmUrl, params, apiKeyValue || "x.xxxxxxxx"),
+            typescript: invokeLlmApptsCode(invokeLlmUrl, params, apiKeyValue || "x.xxxxxxxx"),
+        }),
+        [apiKeyValue, invokeLlmUrl, params],
+    )
 
+    const renderTabChildren = useCallback(() => {
         return (
-            <div className="flex flex-col gap-3">
-                <div className="flex items-center justify-between">
-                    <Typography.Text className="font-medium">Use API</Typography.Text>
-                    <CopyButton text={activeSnippet} icon={true} buttonText={null} />
-                </div>
-                <CodeBlock language={selectedLang} value={activeSnippet} />
-            </div>
+            <Spin spinning={isLoading}>
+                <LanguageCodeBlock
+                    fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                    invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                    selectedLang={selectedLang}
+                    handleOpenSelectDeployVariantModal={() => {}}
+                    invokeLlmUrl={invokeLlmUrl}
+                />
+            </Spin>
         )
-    }, [
-        apiKeyValue,
-        codeSnippets,
-        revisionList,
-        selectedLang,
-        selectedRevision?.id,
-        selectedRevision?.isLatestRevision,
-        selectedRevision?.revision,
-        selectedRevisionId,
-    ])
+    }, [fetchConfigCodeSnippet, invokeLlmAppCodeSnippet, invokeLlmUrl, isLoading, selectedLang])
 
     const tabItems = useMemo(
         () => [
             {
                 key: "python",
                 label: "Python",
-                icon: <PythonOutlined />,
                 children: renderTabChildren(),
+                icon: <PythonOutlined />,
             },
             {
                 key: "typescript",
                 label: "TypeScript",
-                icon: <FileTsIcon size={14} />,
                 children: renderTabChildren(),
+                icon: <FileTs size={14} />,
             },
             {
                 key: "bash",
                 label: "cURL",
-                icon: <FileCodeIcon size={14} />,
                 children: renderTabChildren(),
+                icon: <FileCode size={14} />,
             },
         ],
         [renderTabChildren],
@@ -221,10 +268,10 @@ const VariantUseApiContent = ({initialRevisionId}: VariantUseApiContentProps) =>
                 <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
             </div>
             <Tabs
+                destroyOnHidden
+                defaultActiveKey={selectedLang}
                 items={tabItems}
                 onChange={setSelectedLang}
-                activeKey={selectedLang}
-                destroyInactiveTabPane
             />
         </div>
     )

From 93923f3464d791140dbf313e253461dcf6b5fc99 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 12:43:55 +0600
Subject: [PATCH 04/12] implmented: - Delete trace from observbility - Load
 next/prev traces when delete from the drawer - Reactored code

---
 .../components/DeleteTraceModal.tsx           | 55 ------------
 .../components/DeleteTraceModal/index.tsx     | 83 +++++++++++++++++++
 .../components/DeleteTraceModal/store/atom.ts | 12 +++
 .../components/TraceTypeHeader/index.tsx      | 25 +++---
 .../components/ObservabilityHeader/index.tsx  | 46 ++++++++--
 5 files changed, 151 insertions(+), 70 deletions(-)
 delete mode 100644 web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal.tsx
 create mode 100644 web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
 create mode 100644 web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts

diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal.tsx
deleted file mode 100644
index c4b46cecd9..0000000000
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {useState} from "react"
-
-import {DeleteOutlined} from "@ant-design/icons"
-import {Modal} from "antd"
-import {useSetAtom} from "jotai"
-
-import {deletePreviewTrace} from "@/oss/services/tracing/api"
-import {useObservability} from "@/oss/state/newObservability"
-
-import {closeTraceDrawerAtom} from "../store/traceDrawerStore"
-
-type DeleteTraceModalProps = {
-    setSelectedTraceId: (val: string) => void
-    activeTraceId: string
-} & React.ComponentProps<typeof Modal>
-
-const DeleteTraceModal = ({setSelectedTraceId, activeTraceId, ...props}: DeleteTraceModalProps) => {
-    const {fetchTraces, setSelectedTraceId: setGlobalSelectedTraceId} = useObservability()
-    const closeDrawer = useSetAtom(closeTraceDrawerAtom)
-    const [isLoading, setIsLoading] = useState(false)
-
-    const handleDelete = async () => {
-        try {
-            setIsLoading(true)
-            await deletePreviewTrace(activeTraceId)
-            await fetchTraces()
-            // Clear both local (drawer) and global (observability) selections
-            setSelectedTraceId("")
-            setGlobalSelectedTraceId("")
-            // Close modal and drawer on success to avoid dangling state
-            props.onCancel?.({} as any)
-            closeDrawer()
-        } catch (error) {
-            console.error(error)
-        } finally {
-            setIsLoading(false)
-        }
-    }
-    return (
-        <Modal
-            centered
-            destroyOnHidden
-            width={380}
-            title={"Are you sure you want to delete?"}
-            okButtonProps={{icon: <DeleteOutlined />, danger: true, loading: isLoading}}
-            okText={"Delete"}
-            onOk={handleDelete}
-            {...props}
-        >
-            This action is not reversible.
-        </Modal>
-    )
-}
-
-export default DeleteTraceModal
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
new file mode 100644
index 0000000000..fe35cb077b
--- /dev/null
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
@@ -0,0 +1,83 @@
+import Router from "next/router"
+import {useState} from "react"
+
+import {DeleteOutlined} from "@ant-design/icons"
+import {Modal} from "antd"
+import {useAtom, useAtomValue, useSetAtom} from "jotai"
+
+import {deletePreviewTrace} from "@/oss/services/tracing/api"
+import {useObservability} from "@/oss/state/newObservability"
+import {traceIdAtom} from "@/oss/state/url/trace"
+
+import {closeTraceDrawerAtom} from "../../store/traceDrawerStore"
+import {deleteTraceModalAtom} from "./store/atom"
+
+const DeleteTraceModal = () => {
+    const {fetchTraces, setSelectedTraceId: setGlobalSelectedTraceId, traces} = useObservability()
+    const closeDrawer = useSetAtom(closeTraceDrawerAtom)
+    const currentTraceId = useAtomValue(traceIdAtom)
+    const [isLoading, setIsLoading] = useState(false)
+    const [{isOpen, traceIds, onClose}, setModalState] = useAtom(deleteTraceModalAtom)
+
+    const handleClose = () => {
+        setModalState((prev) => ({...prev, isOpen: false}))
+    }
+
+    const handleDelete = async () => {
+        try {
+            setIsLoading(true)
+            await Promise.all(traceIds.map((id) => deletePreviewTrace(id)))
+            await fetchTraces()
+
+            const isCurrentTraceDeleted = traceIds.includes(currentTraceId || "")
+
+            if (isCurrentTraceDeleted && traceIds.length === 1) {
+                const deletedIndex = traces.findIndex((t) => t.trace_id === traceIds[0])
+                const nextTrace = traces[deletedIndex + 1] || traces[deletedIndex - 1]
+
+                if (nextTrace) {
+                    const url = new URL(window.location.href)
+                    url.searchParams.set("trace", nextTrace.trace_id)
+                    url.searchParams.delete("span")
+                    await Router.push(url.toString(), undefined, {shallow: true})
+                } else {
+                    closeDrawer()
+                }
+            } else if (isCurrentTraceDeleted) {
+                closeDrawer()
+            }
+
+            // Clear global (observability) selections
+            setGlobalSelectedTraceId("")
+
+            // Execute the callback passed via atom (e.g. refresh, clear selection)
+            onClose?.()
+
+            // Close modal
+            handleClose()
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+    return (
+        <Modal
+            centered
+            destroyOnHidden
+            width={400}
+            title={`Are you sure you want to delete ${
+                traceIds.length > 1 ? ` ${traceIds.length} traces` : ""
+            }?`}
+            open={isOpen}
+            onCancel={handleClose}
+            okButtonProps={{icon: <DeleteOutlined />, danger: true, loading: isLoading}}
+            okText={"Delete"}
+            onOk={handleDelete}
+        >
+            This action is not reversible.
+        </Modal>
+    )
+}
+
+export default DeleteTraceModal
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts
new file mode 100644
index 0000000000..98c4f7a859
--- /dev/null
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts
@@ -0,0 +1,12 @@
+import {atom} from "jotai"
+
+type DeleteTraceModalState = {
+    isOpen: boolean
+    traceIds: string[]
+    onClose?: () => void
+}
+
+export const deleteTraceModalAtom = atom<DeleteTraceModalState>({
+    isOpen: false,
+    traceIds: [],
+})
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
index f77d06882b..3557b8f300 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
@@ -1,10 +1,10 @@
-import {useMemo, useState} from "react"
+import {useMemo} from "react"
 
 import {DeleteOutlined} from "@ant-design/icons"
 import {SidebarSimple} from "@phosphor-icons/react"
 import {Button, Tag, Tooltip, Typography} from "antd"
 import clsx from "clsx"
-import {useAtomValue} from "jotai"
+import {useAtomValue, useSetAtom} from "jotai"
 import dynamic from "next/dynamic"
 
 import TooltipWithCopyAction from "@/oss/components/EnhancedUIs/Tooltip"
@@ -21,6 +21,8 @@ const DeleteTraceModal = dynamic(() => import("../../../DeleteTraceModal"), {
     ssr: false,
 })
 
+import {deleteTraceModalAtom} from "../../../DeleteTraceModal/store/atom"
+
 const TraceTypeHeader = ({
     activeTrace,
     error,
@@ -29,7 +31,7 @@ const TraceTypeHeader = ({
     setIsAnnotationsSectionOpen,
     isAnnotationsSectionOpen,
 }: TraceTypeHeaderProps) => {
-    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+    const setDeleteModalState = useSetAtom(deleteTraceModalAtom)
     const activeTraceData = useAtomValue(spanAgDataAtomFamily(activeTrace))
     const testsetData = useMemo(() => {
         if (!activeTrace?.key) return [] as {data: KeyValuePair; key: string; id: number}[]
@@ -88,7 +90,15 @@ const TraceTypeHeader = ({
 
                 <Button
                     icon={<DeleteOutlined />}
-                    onClick={() => setIsDeleteModalOpen(true)}
+                    onClick={() =>
+                        setDeleteModalState({
+                            isOpen: true,
+                            traceIds: [getTraceIdFromNode(displayTrace) || ""],
+                            onClose: () => {
+                                if (setSelectedTraceId) setSelectedTraceId("")
+                            },
+                        })
+                    }
                     disabled={!displayTrace}
                     size="small"
                 />
@@ -103,12 +113,7 @@ const TraceTypeHeader = ({
                 )}
             </div>
 
-            <DeleteTraceModal
-                open={isDeleteModalOpen}
-                onCancel={() => setIsDeleteModalOpen(false)}
-                activeTraceId={getTraceIdFromNode(displayTrace) || ""}
-                setSelectedTraceId={setSelectedTraceId}
-            />
+            <DeleteTraceModal />
         </div>
     )
 }
diff --git a/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx b/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
index ed8805022e..fdf0fd86bc 100644
--- a/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
+++ b/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
@@ -1,9 +1,9 @@
 import {useCallback, useEffect, useMemo, useState} from "react"
 
-import {ArrowsClockwiseIcon, DatabaseIcon, ExportIcon} from "@phosphor-icons/react"
+import {ArrowsClockwiseIcon, DatabaseIcon, ExportIcon, TrashIcon} from "@phosphor-icons/react"
 import {Button, Input, Radio, RadioChangeEvent, Space, Switch, Typography} from "antd"
 import clsx from "clsx"
-import {useAtomValue} from "jotai"
+import {useAtomValue, useSetAtom} from "jotai"
 import {queryClientAtom} from "jotai-tanstack-query"
 import dynamic from "next/dynamic"
 
@@ -35,6 +35,15 @@ const EditColumns = dynamic(() => import("@/oss/components/Filters/EditColumns")
 const Filters = dynamic(() => import("@/oss/components/Filters/Filters"), {ssr: false})
 const Sort = dynamic(() => import("@/oss/components/Filters/Sort"), {ssr: false})
 
+const DeleteTraceModal = dynamic(
+    () => import("@/oss/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal"),
+    {
+        ssr: false,
+    },
+)
+
+import {deleteTraceModalAtom} from "@/oss/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom"
+
 const AutoRefreshControl: React.FC<{
     checked: boolean
     onChange: (checked: boolean) => void
@@ -102,6 +111,7 @@ const ObservabilityHeader = ({
 }: ObservabilityHeaderProps) => {
     const [isScrolled, setIsScrolled] = useState(false)
     const [internalRefreshTrigger, setInternalRefreshTrigger] = useState(0)
+    const setDeleteModalState = useSetAtom(deleteTraceModalAtom)
 
     const {
         traces,
@@ -114,6 +124,7 @@ const ObservabilityHeader = ({
         setFilters,
         setSort,
         selectedRowKeys,
+        setSelectedRowKeys,
         setTestsetDrawerData,
         setEditColumns,
         fetchAnnotations,
@@ -319,6 +330,23 @@ const ObservabilityHeader = ({
     // Use external refresh trigger if provided (from parent auto-refresh), otherwise use internal
     const refreshTrigger = propsRefreshTrigger ?? internalRefreshTrigger
 
+    const onDelete = useCallback(() => {
+        setDeleteModalState({
+            isOpen: true,
+            traceIds: Array.from(
+                new Set(
+                    traces
+                        .filter((trace) => selectedRowKeys.includes(trace.span_id))
+                        .map((trace) => trace.trace_id),
+                ),
+            ),
+            onClose: () => {
+                setSelectedRowKeys([])
+                handleRefresh()
+            },
+        })
+    }, [traces, selectedRowKeys, setDeleteModalState, setSelectedRowKeys, handleRefresh])
+
     return (
         <>
             <section
@@ -431,7 +459,7 @@ const ObservabilityHeader = ({
                                 icon={<ExportIcon size={14} className="mt-0.5" />}
                                 disabled={traces.length === 0}
                             >
-                                Export as CSV
+                                Export
                             </Button>
 
                             <EditColumns
@@ -441,7 +469,14 @@ const ObservabilityHeader = ({
                                     setEditColumns(keys)
                                 }}
                             />
-
+                            <Button
+                                onClick={onDelete}
+                                icon={<TrashIcon size={14} />}
+                                disabled={selectedRowKeys.length === 0}
+                                danger
+                            >
+                                Delete
+                            </Button>
                             <Button
                                 onClick={() => getTestsetTraceData()}
                                 icon={<DatabaseIcon size={14} />}
@@ -467,7 +502,8 @@ const ObservabilityHeader = ({
                 ) : null}
             </section>
             {/* This element is to reduce the pixel shift of the table */}
-            {isScrolled && <div className="w-full h-[10px]"></div>}{" "}
+            {isScrolled && <div className="w-full h-[10px]"></div>}
+            <DeleteTraceModal />
         </>
     )
 }

From d28653f3ff09cef87fdbae4726eb93fc2b88c9ac Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 12:52:51 +0600
Subject: [PATCH 05/12] revert backend changes for the 'anthropic/' prefix

---
 sdk/agenta/sdk/assets.py | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/sdk/agenta/sdk/assets.py b/sdk/agenta/sdk/assets.py
index b0ee836285..7dc5dbb240 100644
--- a/sdk/agenta/sdk/assets.py
+++ b/sdk/agenta/sdk/assets.py
@@ -1,19 +1,19 @@
 supported_llm_models = {
     "anthropic": [
-        "claude-sonnet-4-5",
-        "claude-haiku-4-5",
-        "claude-opus-4-1",
-        "claude-sonnet-4-20250514",
-        "claude-opus-4-20250514",
-        "claude-3-7-sonnet-20250219",
-        "claude-3-5-sonnet-20241022",
-        "claude-3-5-sonnet-20240620",
-        "claude-3-5-haiku-20241022",
-        "claude-3-opus-20240229",
-        "claude-3-sonnet-20240229",
-        "claude-3-haiku-20240307",
-        "claude-2.1",
-        "claude-2",
+        "anthropic/claude-sonnet-4-5",
+        "anthropic/claude-haiku-4-5",
+        "anthropic/claude-opus-4-1",
+        "anthropic/claude-sonnet-4-20250514",
+        "anthropic/claude-opus-4-20250514",
+        "anthropic/claude-3-7-sonnet-20250219",
+        "anthropic/claude-3-5-sonnet-20241022",
+        "anthropic/claude-3-5-sonnet-20240620",
+        "anthropic/claude-3-5-haiku-20241022",
+        "anthropic/claude-3-opus-20240229",
+        "anthropic/claude-3-sonnet-20240229",
+        "anthropic/claude-3-haiku-20240307",
+        "anthropic/claude-2.1",
+        "anthropic/claude-2",
     ],
     "cohere": [
         "cohere/command-light",

From 62756590e5ac9a5d0799634e20f2c0ec525d441b Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 14:50:45 +0600
Subject: [PATCH 06/12] fix lint

---
 .../TraceDrawer/components/DeleteTraceModal/index.tsx          | 3 ++-
 .../TraceDrawer/components/DeleteTraceModal/store/atom.ts      | 2 +-
 .../TraceContent/components/TraceTypeHeader/index.tsx          | 3 +--
 .../observability/components/ObservabilityHeader/index.tsx     | 3 +--
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
index fe35cb077b..414d8c787c 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/index.tsx
@@ -1,15 +1,16 @@
-import Router from "next/router"
 import {useState} from "react"
 
 import {DeleteOutlined} from "@ant-design/icons"
 import {Modal} from "antd"
 import {useAtom, useAtomValue, useSetAtom} from "jotai"
+import Router from "next/router"
 
 import {deletePreviewTrace} from "@/oss/services/tracing/api"
 import {useObservability} from "@/oss/state/newObservability"
 import {traceIdAtom} from "@/oss/state/url/trace"
 
 import {closeTraceDrawerAtom} from "../../store/traceDrawerStore"
+
 import {deleteTraceModalAtom} from "./store/atom"
 
 const DeleteTraceModal = () => {
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts
index 98c4f7a859..cfce96e69f 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom.ts
@@ -1,6 +1,6 @@
 import {atom} from "jotai"
 
-type DeleteTraceModalState = {
+interface DeleteTraceModalState {
     isOpen: boolean
     traceIds: string[]
     onClose?: () => void
diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
index 3557b8f300..bab9ea0a00 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
@@ -13,6 +13,7 @@ import AnnotateDrawerButton from "@/oss/components/SharedDrawers/AnnotateDrawer/
 import {KeyValuePair} from "@/oss/lib/Types"
 import {spanAgDataAtomFamily} from "@/oss/state/newObservability/selectors/tracing"
 
+import {deleteTraceModalAtom} from "../../../DeleteTraceModal/store/atom"
 import {getTraceIdFromNode} from "../../../TraceHeader/assets/helper"
 
 import {TraceTypeHeaderProps} from "./types"
@@ -21,8 +22,6 @@ const DeleteTraceModal = dynamic(() => import("../../../DeleteTraceModal"), {
     ssr: false,
 })
 
-import {deleteTraceModalAtom} from "../../../DeleteTraceModal/store/atom"
-
 const TraceTypeHeader = ({
     activeTrace,
     error,
diff --git a/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx b/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
index fdf0fd86bc..35bfb649de 100644
--- a/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
+++ b/web/oss/src/components/pages/observability/components/ObservabilityHeader/index.tsx
@@ -9,6 +9,7 @@ import dynamic from "next/dynamic"
 
 import EnhancedButton from "@/oss/components/EnhancedUIs/Button"
 import {SortResult} from "@/oss/components/Filters/Sort"
+import {deleteTraceModalAtom} from "@/oss/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom"
 import useLazyEffect from "@/oss/hooks/useLazyEffect"
 import {formatDay} from "@/oss/lib/helpers/dateTimeHelper"
 import {convertToCsv, downloadCsv} from "@/oss/lib/helpers/fileManipulations"
@@ -42,8 +43,6 @@ const DeleteTraceModal = dynamic(
     },
 )
 
-import {deleteTraceModalAtom} from "@/oss/components/SharedDrawers/TraceDrawer/components/DeleteTraceModal/store/atom"
-
 const AutoRefreshControl: React.FC<{
     checked: boolean
     onChange: (checked: boolean) => void

From 89e0cba26c4aecb85f694e36bb0381b4f9ddbe03 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 15:16:13 +0600
Subject: [PATCH 07/12] fix single cetagorical type display issue

---
 .../SharedDrawers/AnnotateDrawer/assets/transforms.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/oss/src/components/SharedDrawers/AnnotateDrawer/assets/transforms.ts b/web/oss/src/components/SharedDrawers/AnnotateDrawer/assets/transforms.ts
index cef4b1174f..f391ba99ff 100644
--- a/web/oss/src/components/SharedDrawers/AnnotateDrawer/assets/transforms.ts
+++ b/web/oss/src/components/SharedDrawers/AnnotateDrawer/assets/transforms.ts
@@ -216,7 +216,7 @@ export const getMetricsFromEvaluator = (evaluator: EvaluatorDto): Record<string,
                 return
             }
 
-            if (type && USEABLE_METRIC_TYPES.includes(type)) {
+            if (type && USEABLE_METRIC_TYPES.includes(getPropertyType(type))) {
                 const {value, ...restProps} = props
                 target[qualifiedKey] = {
                     value: getDefaultValue({property: props, ignoreObject: true}),

From 0a739cd7f2afcea7675df31695510d78b30e9f4b Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 15:16:39 +0600
Subject: [PATCH 08/12] fix data revalidation after annotation on trace

---
 .../components/TraceContent/components/TraceTypeHeader/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
index f77d06882b..ade0a4c822 100644
--- a/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
+++ b/web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
@@ -84,6 +84,7 @@ const TraceTypeHeader = ({
                         traceId: activeTrace?.trace_id,
                         spanId: activeTrace?.span_id,
                     }}
+                    queryKey="trace-drawer-annotations"
                 />
 
                 <Button

From ba31a73af066c70df9a650f19f6a938164ad0444 Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Wed, 31 Dec 2025 10:22:32 +0100
Subject: [PATCH 09/12] Implement model cost retrieval and metadata building
 for supported LLMs

---
 sdk/agenta/sdk/assets.py | 72 +++++++++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/sdk/agenta/sdk/assets.py b/sdk/agenta/sdk/assets.py
index 7dc5dbb240..a584371842 100644
--- a/sdk/agenta/sdk/assets.py
+++ b/sdk/agenta/sdk/assets.py
@@ -1,3 +1,8 @@
+from typing import Dict, Optional, Tuple
+
+from litellm import cost_calculator
+
+
 supported_llm_models = {
     "anthropic": [
         "anthropic/claude-sonnet-4-5",
@@ -207,41 +212,56 @@
 providers_list = list(supported_llm_models.keys())
 
 
-from typing import TypedDict, Dict
-import litellm
+def _get_model_costs(model: str) -> Optional[Tuple[float, float]]:
+    """
+    Get the input and output costs per 1M tokens for a model.
+
+    Uses litellm's cost_calculator (same as tracing/inline.py) for consistency.
 
+    Args:
+        model: The model name (e.g., "gpt-4o" or "anthropic/claude-3-opus-20240229")
 
-class ModelMetadata(TypedDict):
-    input: float
-    output: float
+    Returns:
+        Tuple of (input_cost, output_cost) per 1M tokens, or None if not found.
+    """
+    try:
+        costs = cost_calculator.cost_per_token(
+            model=model,
+            prompt_tokens=1_000_000,
+            completion_tokens=1_000_000,
+        )
+        if costs:
+            input_cost, output_cost = costs
+            if input_cost > 0 or output_cost > 0:
+                return (input_cost, output_cost)
+    except Exception:
+        pass
+    return None
 
 
-model_metadata: Dict[str, Dict[str, ModelMetadata]] = {}
+def _build_model_metadata() -> Dict[str, Dict[str, Dict[str, float]]]:
+    """
+    Build metadata dictionary with costs for all supported models.
 
-for provider, models in supported_llm_models.items():
-    model_metadata[provider] = {}
-    for model in models:
-        cost_info = None
+    Returns:
+        Nested dict: {provider: {model: {"input": cost, "output": cost}}}
+    """
+    metadata: Dict[str, Dict[str, Dict[str, float]]] = {}
 
-        # 1. Check for exact match
-        if model in litellm.model_cost:
-            cost_info = litellm.model_cost[model]
+    for provider, models in supported_llm_models.items():
+        metadata[provider] = {}
+        for model in models:
+            costs = _get_model_costs(model)
+            if costs:
+                metadata[provider][model] = {
+                    "input": costs[0],
+                    "output": costs[1],
+                }
 
-        # 2. Check for match without provider prefix
-        if not cost_info and "/" in model:
-            short_name = model.split("/", 1)[1]
-            if short_name in litellm.model_cost:
-                cost_info = litellm.model_cost[short_name]
+    return metadata
 
-        if cost_info:
-            input_cost = cost_info.get("input_cost_per_token", 0) * 1_000_000
-            output_cost = cost_info.get("output_cost_per_token", 0) * 1_000_000
 
-            if input_cost > 0 or output_cost > 0:
-                model_metadata[provider][model] = {
-                    "input": input_cost,
-                    "output": output_cost,
-                }
+model_metadata = _build_model_metadata()
 
 model_to_provider_mapping = {
     model: provider

From 57e07edabc04040c95cd818bc0b74d41e702a075 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <87828904+ashrafchowdury@users.noreply.github.com>
Date: Wed, 31 Dec 2025 09:22:57 +0000
Subject: [PATCH 10/12] v0.72.4

---
 api/pyproject.toml   | 2 +-
 sdk/pyproject.toml   | 2 +-
 web/ee/package.json  | 2 +-
 web/oss/package.json | 2 +-
 web/package.json     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/api/pyproject.toml b/api/pyproject.toml
index 049c6c83fe..d635fc77dd 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "api"
-version = "0.72.3"
+version = "0.72.4"
 description = "Agenta API"
 authors = [
     { name = "Mahmoud Mabrouk", email = "mahmoud@agenta.ai" },
diff --git a/sdk/pyproject.toml b/sdk/pyproject.toml
index 52b4199539..dcb029f9d8 100644
--- a/sdk/pyproject.toml
+++ b/sdk/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "agenta"
-version = "0.72.3"
+version = "0.72.4"
 description = "The SDK for agenta is an open-source LLMOps platform."
 readme = "README.md"
 authors = [
diff --git a/web/ee/package.json b/web/ee/package.json
index 4ad070355a..d65072a444 100644
--- a/web/ee/package.json
+++ b/web/ee/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@agenta/ee",
-    "version": "0.72.3",
+    "version": "0.72.4",
     "private": true,
     "engines": {
         "node": ">=18"
diff --git a/web/oss/package.json b/web/oss/package.json
index 7d2b91f069..2120d78cda 100644
--- a/web/oss/package.json
+++ b/web/oss/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@agenta/oss",
-    "version": "0.72.3",
+    "version": "0.72.4",
     "private": true,
     "engines": {
         "node": ">=18"
diff --git a/web/package.json b/web/package.json
index d94241bd14..6274975f6c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "agenta-web",
-    "version": "0.72.3",
+    "version": "0.72.4",
     "workspaces": [
         "ee",
         "oss",

From 6b8ec0e1cfdceac23f6d3ec0028a45f15c410fbc Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 16:14:22 +0600
Subject: [PATCH 11/12] fixed all the of the reported issues

---
 .../components/SelectLLMProvider/index.tsx    |  38 +++---
 .../genericTransformer/helpers/metadata.ts    | 113 ++++++++++--------
 2 files changed, 86 insertions(+), 65 deletions(-)

diff --git a/web/oss/src/components/SelectLLMProvider/index.tsx b/web/oss/src/components/SelectLLMProvider/index.tsx
index 42d1fabe4d..3d50b1098b 100644
--- a/web/oss/src/components/SelectLLMProvider/index.tsx
+++ b/web/oss/src/components/SelectLLMProvider/index.tsx
@@ -1,7 +1,7 @@
 import {useMemo, useRef, useState} from "react"
 
 import {CaretRight, Plus, X} from "@phosphor-icons/react"
-import {Button, Divider, Input, InputRef, Popover, Select, Typography} from "antd"
+import {Button, Divider, Input, InputRef, Popover, Select, Tooltip, Typography} from "antd"
 import clsx from "clsx"
 
 import useLazyEffect from "@/oss/hooks/useLazyEffect"
@@ -210,24 +210,30 @@ const SelectLLMProvider = ({
         setTimeout(() => setOpen(false), 0)
     }
 
+    const formatCost = (cost: number) => {
+        const value = Number(cost)
+        if (isNaN(value)) return "N/A"
+        return value < 0.01 ? value.toFixed(4) : value.toFixed(2)
+    }
+
     const renderTooltipContent = (metadata: Record<string, any>) => (
         <div className="flex flex-col gap-0.5">
             {(metadata.input !== undefined || metadata.output !== undefined) && (
                 <>
                     <div className="flex justify-between gap-4">
-                        <Typography.Text type="secondary" className="text-[10px] text-nowrap">
+                        <Typography.Text className="text-[10px] text-nowrap !text-white">
                             Input:
                         </Typography.Text>
-                        <Typography.Text className="text-[10px] text-nowrap">
-                            ${metadata.input} / 1M
+                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                            ${formatCost(metadata.input)} / 1M
                         </Typography.Text>
                     </div>
                     <div className="flex justify-between gap-4">
-                        <Typography.Text type="secondary" className="text-[10px] text-nowrap">
+                        <Typography.Text className="text-[10px] text-nowrap !text-white">
                             Output:{" "}
                         </Typography.Text>
-                        <Typography.Text className="text-[10px] text-nowrap">
-                            ${metadata.output} / 1M
+                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                            ${formatCost(metadata.output)} / 1M
                         </Typography.Text>
                     </div>
                 </>
@@ -252,17 +258,13 @@ const SelectLLMProvider = ({
 
         if (option.metadata) {
             return (
-                <div className="w-full h-full" onClick={(e) => e.stopPropagation()}>
-                    <Popover
-                        content={renderTooltipContent(option.metadata)}
-                        placement="right"
-                        classNames={{
-                            container: "w-42 max-w-[600px]",
-                        }}
-                    >
-                        {content}
-                    </Popover>
-                </div>
+                <Tooltip
+                    title={renderTooltipContent(option.metadata)}
+                    placement="right"
+                    mouseEnterDelay={0.3}
+                >
+                    {content}
+                </Tooltip>
             )
         }
 
diff --git a/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts b/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
index 55aa5589a5..305950dd16 100644
--- a/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
+++ b/web/oss/src/lib/shared/variant/genericTransformer/helpers/metadata.ts
@@ -28,10 +28,14 @@ export function processProperties(
 ): Record<string, ConfigMetadata> {
     return Object.entries(properties).reduce(
         (acc, [key, prop]) => {
-            const {schema, isNullable} = extractSchema(prop, key)
-            acc[toCamelCase(key)] = {
-                ...createMetadata(schema),
-                nullable: isNullable,
+            try {
+                const {schema, isNullable} = extractSchema(prop, key)
+                acc[toCamelCase(key)] = {
+                    ...createMetadata(schema),
+                    nullable: isNullable,
+                }
+            } catch (error) {
+                console.warn(`Error processing property ${key}:`, error)
             }
             return acc
         },
@@ -80,28 +84,22 @@ function isStringRecord(value: unknown): value is Record<string, string[]> {
 }
 
 /**
- * Find metadata for a specific model by searching through all providers
+ * Build a flat lookup map once instead of nested search each time
  */
-function findModelMetadata(
-    modelValue: string,
+function buildModelMetadataLookup(
     metadata?: Record<string, unknown>,
-): Record<string, unknown> | undefined {
-    if (!metadata) return undefined
+): Map<string, Record<string, unknown>> {
+    const lookup = new Map<string, Record<string, unknown>>()
+    if (!metadata) return lookup
 
-    // Check if we can find the model directly (backward compatibility)
-    if (metadata[modelValue]) {
-        return metadata[modelValue] as Record<string, unknown>
-    }
-
-    // Search through providers
-    for (const providerKey of Object.keys(metadata)) {
-        const providerData = metadata[providerKey] as Record<string, Record<string, unknown>>
-        if (providerData && typeof providerData === "object" && providerData[modelValue]) {
-            return providerData[modelValue]
+    for (const providerData of Object.values(metadata)) {
+        if (providerData && typeof providerData === "object") {
+            for (const [model, modelData] of Object.entries(providerData)) {
+                lookup.set(model, modelData as Record<string, unknown>)
+            }
         }
     }
-
-    return undefined
+    return lookup
 }
 
 /**
@@ -111,35 +109,56 @@ function normalizeOptions(
     rawOptions: unknown,
     modelMetadata?: Record<string, unknown>,
 ): SelectOptions | undefined {
-    if (!rawOptions) return undefined
+    try {
+        if (!rawOptions) return undefined
 
-    if (isStringArray(rawOptions)) {
-        return rawOptions.map(
-            (opt): BaseOption => ({
-                label: opt,
-                value: opt,
-                metadata: findModelMetadata(opt, modelMetadata),
-            }),
-        )
-    }
+        const metadataLookup = buildModelMetadataLookup(modelMetadata)
 
-    if (isStringRecord(rawOptions)) {
-        return Object.entries(rawOptions).map(
-            ([group, values]): OptionGroup => ({
-                label: group,
-                options: values.map(
-                    (value): BaseOption => ({
-                        label: value,
-                        value,
-                        group,
-                        metadata: findModelMetadata(value, modelMetadata),
-                    }),
-                ),
-            }),
-        )
-    }
+        // Helper to get metadata from the lookup map or fallback to backward compatibility check
+        const getMetadata = (value: string) => {
+            if (!modelMetadata) return undefined
+            // Check lookup map first
+            if (metadataLookup.has(value)) {
+                return metadataLookup.get(value)
+            }
+            // Fallback: Check if we can find the model directly in the root metadata (backward compatibility)
+            if (modelMetadata[value]) {
+                return modelMetadata[value] as Record<string, unknown>
+            }
+            return undefined
+        }
 
-    return undefined
+        if (isStringArray(rawOptions)) {
+            return rawOptions.map(
+                (opt): BaseOption => ({
+                    label: opt,
+                    value: opt,
+                    metadata: getMetadata(opt),
+                }),
+            )
+        }
+
+        if (isStringRecord(rawOptions)) {
+            return Object.entries(rawOptions).map(
+                ([group, values]): OptionGroup => ({
+                    label: group,
+                    options: values.map(
+                        (value): BaseOption => ({
+                            label: value,
+                            value,
+                            group,
+                            metadata: getMetadata(value),
+                        }),
+                    ),
+                }),
+            )
+        }
+
+        return undefined
+    } catch (error) {
+        console.warn("Error normalizing options:", error)
+        return undefined
+    }
 }
 
 function getOptionsFromSchema(schema: SchemaProperty) {

From c4914c114e5892d3c97fb5b099079207a01e470c Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Wed, 31 Dec 2025 21:07:32 +0600
Subject: [PATCH 12/12] updated tooltip bg color

---
 web/oss/src/components/SelectLLMProvider/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/oss/src/components/SelectLLMProvider/index.tsx b/web/oss/src/components/SelectLLMProvider/index.tsx
index 3d50b1098b..3a0bf30556 100644
--- a/web/oss/src/components/SelectLLMProvider/index.tsx
+++ b/web/oss/src/components/SelectLLMProvider/index.tsx
@@ -221,18 +221,18 @@ const SelectLLMProvider = ({
             {(metadata.input !== undefined || metadata.output !== undefined) && (
                 <>
                     <div className="flex justify-between gap-4">
-                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                        <Typography.Text className="text-[10px] text-nowrap">
                             Input:
                         </Typography.Text>
-                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                        <Typography.Text className="text-[10px] text-nowrap">
                             ${formatCost(metadata.input)} / 1M
                         </Typography.Text>
                     </div>
                     <div className="flex justify-between gap-4">
-                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                        <Typography.Text className="text-[10px] text-nowrap">
                             Output:{" "}
                         </Typography.Text>
-                        <Typography.Text className="text-[10px] text-nowrap !text-white">
+                        <Typography.Text className="text-[10px] text-nowrap">
                             ${formatCost(metadata.output)} / 1M
                         </Typography.Text>
                     </div>
@@ -262,6 +262,7 @@ const SelectLLMProvider = ({
                     title={renderTooltipContent(option.metadata)}
                     placement="right"
                     mouseEnterDelay={0.3}
+                    color="white"
                 >
                     {content}
                 </Tooltip>