@mastra/playground-ui 19.0.1-alpha.2 → 19.1.0-alpha.3

package/dist/index.cjs.js

@@ -8617,9 +8617,12 @@ function DatePicker({ className, classNames, showOutsideDays = true, ...props })
           props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
           "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
         ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "!bg-neutral6/50 !text-surface2 hover:bg-neutral6 rounded-md hover:text-surface2 focus:bg-neutral6 focus:text-surface2",
+        day_range_start: "day-range-start rounded-l-md",
+        day_range_end: "day-range-end rounded-r-md",
+        day_selected: cn(
+          "!bg-accent1 !text-white hover:!bg-accent1/80 focus:!bg-accent1/80 focus:!text-white",
+          props.mode !== "range" && "rounded-md"
+        ),
         day_today: "bg-neutral6/10 text-neutral5",
         day_outside: "day-outside text-neutral3 opacity-50  aria-selected:bg-surface5/50 aria-selected:text-neutral3 aria-selected:opacity-30",
         day_disabled: "text-neutral3 opacity-50",
@@ -10824,7 +10827,7 @@ const useAutoscroll = (ref, { enabled = true }) => {
 };
 
 const ScrollArea = React__namespace.forwardRef(
-  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
+  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, orientation = "vertical", ...props }, ref) => {
     const areaRef = React__namespace.useRef(null);
     useAutoscroll(areaRef, { enabled: autoScroll });
     return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
@@ -10837,8 +10840,9 @@ const ScrollArea = React__namespace.forwardRef(
           children
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" }),
+      (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" }),
+      orientation === "both" && /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
     ] });
   }
 );
@@ -40932,14 +40936,14 @@ function TemplateFailure({ errorMsg, validationErrors }) {
   ] });
 }
 
-const DATE_PRESETS$1 = [
+const DATE_PRESETS$2 = [
   { label: "Last 24 hours", value: "24h" },
   { label: "Last 3 days", value: "3d" },
   { label: "Last 7 days", value: "7d" },
   { label: "Last 14 days", value: "14d" },
   { label: "Last 30 days", value: "30d" }
 ];
-const VALID_PRESETS = new Set(DATE_PRESETS$1.map((p) => p.value));
+const VALID_PRESETS = new Set(DATE_PRESETS$2.map((p) => p.value));
 function isValidPreset(value) {
   return typeof value === "string" && (VALID_PRESETS.has(value) || value === "custom");
 }
@@ -40986,7 +40990,7 @@ function useMetrics() {
 }
 function getDateRangeLabel(preset, customRange) {
   if (preset !== "custom") {
-    return DATE_PRESETS$1.find((p) => p.value === preset).label;
+    return DATE_PRESETS$2.find((p) => p.value === preset).label;
   }
   if (customRange?.from) {
     if (customRange.to) {
@@ -41101,6 +41105,12 @@ function formatCompact(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
   return n.toLocaleString();
 }
+function formatCost(value, unit) {
+  if (unit?.toLowerCase() === "usd" || !unit) {
+    return `$${value < 0.01 && value > 0 ? value.toFixed(4) : value.toFixed(2)}`;
+  }
+  return `${value.toFixed(4)} ${unit}`;
+}
 const CHART_COLORS = {
   green: "#22c55e",
   orange: "#fb923c",
@@ -41162,17 +41172,21 @@ function MetricsCardSummary({ value, label, className }) {
   ] });
 }
 
-function MetricsCardTitle({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-ui-md font-normal text-neutral4", className), children });
+function MetricsCardTitle({
+  children,
+  className,
+  as: Tag = "h2"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn("text-ui-md font-normal text-neutral4", className), children });
 }
 
 function MetricsCardTitleAndDescription(props) {
   if ("children" in props) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: props.className, children: props.children });
   }
-  const { title, description } = props;
+  const { title, description, titleAs } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MetricsCardTitle, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsCardTitle, { as: titleAs, children: title }),
     description && /* @__PURE__ */ jsxRuntime.jsx(MetricsCardDescription, { children: description })
   ] });
 }
@@ -41443,6 +41457,28 @@ function useAvgScoreKpiMetrics() {
   });
 }
 
+function useModelCostKpiMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "model-cost-kpi", datePreset, customRange],
+    queryFn: async () => {
+      const res = await client.getMetricAggregate({
+        name: ["mastra_model_total_input_tokens", "mastra_model_total_output_tokens"],
+        aggregation: "sum",
+        filters: { timestamp },
+        comparePeriod: "previous_period"
+      });
+      return {
+        cost: res.estimatedCost ?? null,
+        costUnit: res.costUnit ?? null,
+        previousCost: res.previousEstimatedCost ?? null,
+        costChangePercent: res.costChangePercent ?? null
+      };
+    }
+  });
+}
+
 function useTotalTokensKpiMetrics() {
   const client = react.useMastraClient();
   const { datePreset, customRange, timestamp } = useMetricsFilters();
@@ -41492,6 +41528,21 @@ function AgentRunsKpiCard() {
     ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
   ] });
 }
+function ModelCostKpiCard() {
+  const { data: costKpi, isLoading, isError } = useModelCostKpiMetrics();
+  const hasData = costKpi?.cost != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Label, { children: "Total Model Cost" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? formatCost(costKpi.cost, costKpi.costUnit) : "—" }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Loading, {}) : hasData ? costKpi.costChangePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: costKpi.costChangePercent,
+        prevValue: costKpi.previousCost != null ? formatCost(costKpi.previousCost, costKpi.costUnit) : void 0
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
 function TotalTokensKpiCard() {
   const { data: totalTokensKpi, isLoading, isError } = useTotalTokensKpiMetrics();
   const hasData = totalTokensKpi?.value != null;
@@ -41548,32 +41599,48 @@ function useModelUsageCostMetrics() {
       const modelMap = /* @__PURE__ */ new Map();
       const ensureModel = (model) => {
         if (!modelMap.has(model)) {
-          modelMap.set(model, { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 });
+          modelMap.set(model, { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: null, costUnit: null });
         }
         return modelMap.get(model);
       };
+      const addCost = (entry, group) => {
+        if (group.estimatedCost != null) {
+          entry.cost = (entry.cost ?? 0) + group.estimatedCost;
+          if (group.costUnit) entry.costUnit = group.costUnit;
+        }
+      };
       for (const group of inputRes.groups) {
         const m = group.dimensions.model ?? "unknown";
-        ensureModel(m).input = group.value;
+        const entry = ensureModel(m);
+        entry.input = group.value;
+        addCost(entry, group);
       }
       for (const group of outputRes.groups) {
         const m = group.dimensions.model ?? "unknown";
-        ensureModel(m).output = group.value;
+        const entry = ensureModel(m);
+        entry.output = group.value;
+        addCost(entry, group);
       }
       for (const group of cacheReadRes.groups) {
         const m = group.dimensions.model ?? "unknown";
-        ensureModel(m).cacheRead = group.value;
+        const entry = ensureModel(m);
+        entry.cacheRead = group.value;
+        addCost(entry, group);
       }
       for (const group of cacheWriteRes.groups) {
         const m = group.dimensions.model ?? "unknown";
-        ensureModel(m).cacheWrite = group.value;
+        const entry = ensureModel(m);
+        entry.cacheWrite = group.value;
+        addCost(entry, group);
       }
       return Array.from(modelMap.entries()).map(([model, vals]) => ({
         model,
         input: formatCompact(vals.input),
         output: formatCompact(vals.output),
         cacheRead: formatCompact(vals.cacheRead),
-        cacheWrite: formatCompact(vals.cacheWrite)
+        cacheWrite: formatCompact(vals.cacheWrite),
+        cost: vals.cost,
+        costUnit: vals.costUnit
       })).sort((a, b) => a.model.localeCompare(b.model));
     }
   });
@@ -41585,12 +41652,12 @@ function MetricsDataTable({
   className
 }) {
   if (columns.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: cn("w-full h-full", className), maxHeight: "20rem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: cn("w-full h-full", className), maxHeight: "20rem", orientation: "both", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "grid items-center",
       style: {
-        gridTemplateColumns: `auto ${columns.slice(1).map(() => "1fr").join(" ")}`
+        gridTemplateColumns: `auto ${columns.slice(1).map(() => "auto").join(" ")}`
       },
       children: [
         columns.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -41628,7 +41695,14 @@ function ModelUsageCostCard() {
   const { data: rows, isLoading, isError } = useModelUsageCostMetrics();
   const hasData = !!rows && rows.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TopBar, { children: /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Model Usage", description: "Token consumption by model." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Model Usage & Cost", description: "Token consumption by model." }),
+      hasData && (() => {
+        const totalCost = rows.reduce((sum, r) => sum + (r.cost ?? 0), 0);
+        const unit = rows.find((r) => r.costUnit)?.costUnit;
+        return /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: totalCost > 0 ? formatCost(totalCost, unit) : "—", label: "Total cost" });
+      })()
+    ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load model usage data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No model usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsx(
       MetricsDataTable,
       {
@@ -41637,8 +41711,12 @@ function ModelUsageCostCard() {
           { label: "Input", value: (row) => row.input },
           { label: "Output", value: (row) => row.output },
           { label: "Cache Read", value: (row) => row.cacheRead },
-          { label: "Cache Write", value: (row) => row.cacheWrite }
-          // { label: 'Cost', value: () => '—', highlight: true },
+          { label: "Cache Write", value: (row) => row.cacheWrite },
+          {
+            label: "Cost",
+            value: (row) => row.cost != null ? formatCost(row.cost, row.costUnit) : "—",
+            highlight: true
+          }
         ],
         data: rows.map((row) => ({ ...row, key: row.model }))
       }
@@ -41792,7 +41870,7 @@ function useTokenUsageByAgentMetrics() {
   return reactQuery.useQuery({
     queryKey: ["metrics", "token-usage-by-agent", datePreset, customRange],
     queryFn: async () => {
-      const [inputRes, outputRes] = await Promise.all([
+      const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all([
         client.getMetricBreakdown({
           name: ["mastra_model_total_input_tokens"],
           groupBy: ["entityName"],
@@ -41804,28 +41882,62 @@ function useTokenUsageByAgentMetrics() {
           groupBy: ["entityName"],
           aggregation: "sum",
           filters: { timestamp }
+        }),
+        client.getMetricBreakdown({
+          name: ["mastra_model_input_cache_read_tokens"],
+          groupBy: ["entityName"],
+          aggregation: "sum",
+          filters: { timestamp }
+        }),
+        client.getMetricBreakdown({
+          name: ["mastra_model_input_cache_write_tokens"],
+          groupBy: ["entityName"],
+          aggregation: "sum",
+          filters: { timestamp }
         })
       ]);
       const agentMap = /* @__PURE__ */ new Map();
       const ensure = (name) => {
         if (!agentMap.has(name)) {
-          agentMap.set(name, { input: 0, output: 0 });
+          agentMap.set(name, { input: 0, output: 0, cost: null, costUnit: null });
         }
         return agentMap.get(name);
       };
+      const addCost = (entry, group) => {
+        if (group.estimatedCost != null) {
+          entry.cost = (entry.cost ?? 0) + group.estimatedCost;
+          if (group.costUnit) entry.costUnit = group.costUnit;
+        }
+      };
       for (const group of inputRes.groups) {
         const name = group.dimensions.entityName ?? "unknown";
-        ensure(name).input = group.value;
+        const entry = ensure(name);
+        entry.input = group.value;
+        addCost(entry, group);
       }
       for (const group of outputRes.groups) {
         const name = group.dimensions.entityName ?? "unknown";
-        ensure(name).output = group.value;
+        const entry = ensure(name);
+        entry.output = group.value;
+        addCost(entry, group);
+      }
+      for (const group of cacheReadRes.groups) {
+        const name = group.dimensions.entityName ?? "unknown";
+        const entry = ensure(name);
+        addCost(entry, group);
+      }
+      for (const group of cacheWriteRes.groups) {
+        const name = group.dimensions.entityName ?? "unknown";
+        const entry = ensure(name);
+        addCost(entry, group);
       }
       return Array.from(agentMap.entries()).map(([name, vals]) => ({
         name,
         input: vals.input,
         output: vals.output,
-        total: vals.input + vals.output
+        total: vals.input + vals.output,
+        cost: vals.cost,
+        costUnit: vals.costUnit
       })).sort((a, b) => b.total - a.total);
     }
   });
@@ -41911,8 +42023,15 @@ function HorizontalBars({
 
 function TokenUsageByAgentCard() {
   const { data, isLoading, isError } = useTokenUsageByAgentMetrics();
+  const [activeTab, setActiveTab] = React.useState("tokens");
   const hasData = !!data && data.length > 0;
   const totalTokens = data?.reduce((s, d) => s + d.total, 0) ?? 0;
+  const costRows = data?.filter((d) => d.cost != null && d.cost > 0) ?? [];
+  const uniqueCostUnits = new Set(costRows.map((d) => d.costUnit ?? "usd"));
+  const hasSingleCostUnit = uniqueCostUnits.size <= 1;
+  const costUnit = hasSingleCostUnit ? costRows[0]?.costUnit ?? null : null;
+  const totalCost = hasSingleCostUnit ? costRows.reduce((s, d) => s + (d.cost ?? 0), 0) : 0;
+  const hasCostData = hasSingleCostUnit && totalCost > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -41922,23 +42041,44 @@ function TokenUsageByAgentCard() {
           description: "Token consumption grouped by agent."
         }
       ),
-      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" })
+      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" }))
     ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load token usage data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "tokens", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabList, { children: /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tokens", children: "Tokens" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.jsx(
-        HorizontalBars,
-        {
-          data: data.map((d) => ({ name: d.name, values: [d.input, d.output] })),
-          segments: [
-            { label: "Input", color: CHART_COLORS.blueDark },
-            { label: "Output", color: CHART_COLORS.blue }
-          ],
-          maxVal: Math.max(...data.map((d) => d.input + d.output)),
-          fmt: formatCompact
-        }
-      ) })
-    ] }) })
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load token usage data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        defaultTab: "tokens",
+        value: activeTab,
+        onValueChange: (v) => setActiveTab(v),
+        className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tokens", children: "Tokens" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "cost", children: "Cost" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.jsx(
+            HorizontalBars,
+            {
+              data: data.map((d) => ({ name: d.name, values: [d.input, d.output] })),
+              segments: [
+                { label: "Input", color: CHART_COLORS.blueDark },
+                { label: "Output", color: CHART_COLORS.blue }
+              ],
+              maxVal: Math.max(...data.map((d) => d.input + d.output)),
+              fmt: formatCompact
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(
+            HorizontalBars,
+            {
+              data: data.filter((d) => d.cost != null && d.cost > 0).sort((a, b) => (b.cost ?? 0) - (a.cost ?? 0)).map((d) => ({ name: d.name, values: [d.cost] })),
+              segments: [{ label: "Cost", color: CHART_COLORS.purple }],
+              maxVal: Math.max(...data.map((d) => d.cost ?? 0)),
+              fmt: (v) => formatCost(v, costUnit)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
+        ]
+      }
+    ) })
   ] });
 }
 
@@ -42065,6 +42205,7 @@ function MetricsDashboard() {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(MetricsFlexGrid, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(AgentRunsKpiCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ModelCostKpiCard, {}),
       /* @__PURE__ */ jsxRuntime.jsx(TotalTokensKpiCard, {}),
       /* @__PURE__ */ jsxRuntime.jsx(AvgScoreKpiCard, {})
     ] }),
@@ -42078,7 +42219,7 @@ function MetricsDashboard() {
   ] });
 }
 
-const DATE_PRESETS = [
+const DATE_PRESETS$1 = [
   { label: "Last 24 hours", value: "24h" },
   { label: "Last 3 days", value: "3d" },
   { label: "Last 7 days", value: "7d" },
@@ -42093,7 +42234,7 @@ function DateRangeSelector() {
       name: "date-range",
       labelIsHidden: true,
       value: datePreset,
-      options: DATE_PRESETS,
+      options: DATE_PRESETS$1,
       onValueChange: (value) => setDatePreset(value)
     }
   );
@@ -42126,6 +42267,108 @@ function groupTracesByThread(traces) {
   return { groups, ungrouped };
 }
 
+const CONTEXT_FIELD_IDS = [
+  "environment",
+  "serviceName",
+  "source",
+  "scope",
+  "userId",
+  "organizationId",
+  "resourceId",
+  "runId",
+  "sessionId",
+  "threadId",
+  "requestId",
+  "experimentId",
+  "spanType",
+  "entityName",
+  "parentEntityType",
+  "parentEntityId",
+  "parentEntityName",
+  "rootEntityType",
+  "rootEntityId",
+  "rootEntityName"
+];
+const CONTEXT_FIELD_META = {
+  environment: { label: "Environment", group: "Deployment" },
+  serviceName: { label: "Service Name", group: "Deployment" },
+  source: { label: "Source", group: "Deployment" },
+  scope: { label: "Scope", group: "Deployment" },
+  userId: { label: "User ID", group: "Identity" },
+  organizationId: { label: "Organization ID", group: "Identity" },
+  resourceId: { label: "Resource ID", group: "Identity" },
+  runId: { label: "Run ID", group: "Correlation" },
+  sessionId: { label: "Session ID", group: "Correlation" },
+  threadId: { label: "Thread ID", group: "Correlation" },
+  requestId: { label: "Request ID", group: "Correlation" },
+  experimentId: { label: "Experiment ID", group: "Experimentation" },
+  spanType: { label: "Span Type", group: "Span" },
+  entityName: { label: "Entity Name", group: "Entity" },
+  parentEntityType: { label: "Parent Entity Type", group: "Entity" },
+  parentEntityId: { label: "Parent Entity ID", group: "Entity" },
+  parentEntityName: { label: "Parent Entity Name", group: "Entity" },
+  rootEntityType: { label: "Root Entity Type", group: "Entity" },
+  rootEntityId: { label: "Root Entity ID", group: "Entity" },
+  rootEntityName: { label: "Root Entity Name", group: "Entity" }
+};
+const CONTEXT_FILTER_CATEGORIES = CONTEXT_FIELD_IDS.map((id) => ({
+  id,
+  ...CONTEXT_FIELD_META[id]
+}));
+const DATE_PRESETS = [
+  { value: "all", label: "All" },
+  { value: "last-24h", label: "Last 24 hours", ms: 24 * 60 * 60 * 1e3 },
+  { value: "last-3d", label: "Last 3 days", ms: 3 * 24 * 60 * 60 * 1e3 },
+  { value: "last-7d", label: "Last 7 days", ms: 7 * 24 * 60 * 60 * 1e3 },
+  { value: "last-14d", label: "Last 14 days", ms: 14 * 24 * 60 * 60 * 1e3 },
+  { value: "last-30d", label: "Last 30 days", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { value: "custom", label: "Custom range..." }
+];
+function buildDateWithTime(date, timeStr) {
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const combined = dateFns.parse(timeStr, "h:mm a", dateOnly);
+  return dateFns.isValid(combined) ? combined : null;
+}
+const subContentClass = cn(
+  "bg-surface5 backdrop-blur-xl z-50 min-w-[8rem] overflow-auto rounded-lg p-2 shadow-md",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+);
+function PortalSubContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.SubContent, { className: cn(subContentClass, className), ...props, children }) });
+}
+const SUBMENU_SEARCH_THRESHOLD = 6;
+function SubMenuSearch({
+  value,
+  onChange,
+  label = "Search"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+        "focus-within:border-neutral2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            "aria-label": label,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => e.stopPropagation(),
+            className: cn("bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full")
+          }
+        )
+      ]
+    }
+  ) });
+}
 function TracesTools({
   onEntityChange,
   onReset,
@@ -42136,63 +42379,481 @@ function TracesTools({
   selectedDateTo,
   isLoading,
   groupByThread,
-  onGroupByThreadChange
+  onGroupByThreadChange,
+  searchQuery: _searchQuery,
+  onSearchChange,
+  datePreset = "all",
+  onDatePresetChange,
+  selectedTags,
+  availableTags,
+  onTagsChange,
+  errorOnly,
+  onErrorOnlyChange,
+  selectedMetadata,
+  availableMetadata,
+  onMetadataChange,
+  contextFilters,
+  availableContextValues,
+  onContextFiltersChange
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap gap-x-8 gap-y-4"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SelectField,
+  const [filterSearch, setFilterSearch] = React.useState("");
+  const [customRangeOpen, setCustomRangeOpen] = React.useState(false);
+  const [draftDateFrom, setDraftDateFrom] = React.useState(selectedDateFrom);
+  const [draftDateTo, setDraftDateTo] = React.useState(selectedDateTo);
+  const [draftTimeFrom, setDraftTimeFrom] = React.useState("12:00 AM");
+  const [draftTimeTo, setDraftTimeTo] = React.useState("11:59 PM");
+  const [entitySearch, setEntitySearch] = React.useState("");
+  const [tagSearch, setTagSearch] = React.useState("");
+  const [metadataKeySearch, setMetadataKeySearch] = React.useState("");
+  const [subValueSearch, setSubValueSearch] = React.useState("");
+  const [contextFieldSearch, setContextFieldSearch] = React.useState("");
+  const [customRangeError, setCustomRangeError] = React.useState();
+  const resetSubSearch = React.useCallback(
+    (setter) => (open) => {
+      if (!open) setter("");
+    },
+    []
+  );
+  const datePresetLabel = DATE_PRESETS.find((p) => p.value === datePreset)?.label ?? "All";
+  const handleDatePresetSelect = (preset) => {
+    onDatePresetChange?.(preset);
+    if (preset === "custom") {
+      setDraftDateFrom(selectedDateFrom);
+      setDraftDateTo(selectedDateTo);
+      setDraftTimeFrom("12:00 AM");
+      setDraftTimeTo("11:59 PM");
+      setCustomRangeOpen(true);
+      return;
+    }
+    const entry = DATE_PRESETS.find((p) => p.value === preset);
+    if (entry?.ms) {
+      onDateChange?.(new Date(Date.now() - entry.ms), "from");
+      onDateChange?.(void 0, "to");
+    } else {
+      onDateChange?.(void 0, "from");
+      onDateChange?.(void 0, "to");
+    }
+  };
+  const applyCustomRange = () => {
+    const fromDate = draftDateFrom ? buildDateWithTime(draftDateFrom, draftTimeFrom) ?? draftDateFrom : void 0;
+    const toDate = draftDateTo ? buildDateWithTime(draftDateTo, draftTimeTo) ?? draftDateTo : void 0;
+    if (fromDate && toDate && fromDate.getTime() > toDate.getTime()) {
+      setCustomRangeError("Start date/time must be before end date/time");
+      return;
+    }
+    setCustomRangeError(void 0);
+    onDateChange?.(fromDate, "from");
+    onDateChange?.(toDate, "to");
+    setCustomRangeOpen(false);
+  };
+  const metadataCount = Object.keys(selectedMetadata ?? {}).length;
+  const activeFilterCount = React.useMemo(() => {
+    let count = 0;
+    if (selectedEntity && selectedEntity.value !== "all") count++;
+    if (errorOnly) count++;
+    if ((selectedTags ?? []).length > 0) count++;
+    if (metadataCount > 0) count++;
+    if (contextFilters) {
+      count += Object.values(contextFilters).filter((v) => v.trim()).length;
+    }
+    return count;
+  }, [selectedEntity, errorOnly, selectedTags, metadataCount, contextFilters]);
+  const contextFilterGroups = React.useMemo(() => {
+    const groups = {};
+    for (const cat of CONTEXT_FILTER_CATEGORIES) {
+      if (!groups[cat.group]) groups[cat.group] = [];
+      groups[cat.group].push({ id: cat.id, label: cat.label });
+    }
+    return groups;
+  }, []);
+  const metadataKeys = React.useMemo(() => Object.keys(availableMetadata ?? {}).sort(), [availableMetadata]);
+  const filterCategories = React.useMemo(() => {
+    const q = filterSearch.toLowerCase();
+    const categories = [
+      { id: "status", label: "Status" },
+      { id: "entity-type", label: "Entity Type" },
+      { id: "tags", label: "Tags" },
+      { id: "metadata", label: "Metadata" },
+      ...Object.keys(contextFilterGroups).map((group) => ({ id: `ctx-${group}`, label: group }))
+    ];
+    if (!q) return categories;
+    return categories.filter((c) => {
+      if (c.label.toLowerCase().includes(q)) return true;
+      if (c.id.startsWith("ctx-")) {
+        const group = c.label;
+        return contextFilterGroups[group]?.some((f) => f.label.toLowerCase().includes(q));
+      }
+      if (c.id === "metadata") {
+        return metadataKeys.some((k) => k.toLowerCase().includes(q));
+      }
+      return false;
+    });
+  }, [filterSearch, contextFilterGroups, metadataKeys]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3"), children: [
+    onSearchChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 max-w-sm"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Searchbar,
       {
-        label: "Filter by Entity",
-        name: "select-entity",
-        placeholder: "Select...",
-        options: entityOptions || [],
-        onValueChange: (val) => {
-          const entity = entityOptions?.find((entity2) => entity2.value === val);
-          if (entity) {
-            onEntityChange(entity);
-          }
-        },
-        value: selectedEntity?.value || "",
-        className: "min-w-[20rem]",
-        disabled: isLoading
+        onSearch: onSearchChange,
+        label: "Search traces",
+        placeholder: "Search name, ID, content...",
+        size: "md"
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-4 items-center flex-wrap"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0 text-ui-md text-neutral3"), children: "Filter by Date & time range" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DateTimePicker,
-        {
-          placeholder: "From",
-          value: selectedDateFrom,
-          maxValue: selectedDateTo,
-          onValueChange: (date) => onDateChange?.(date, "from"),
-          className: "min-w-32",
-          defaultTimeStrValue: "12:00 AM",
-          disabled: isLoading
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DateTimePicker,
-        {
-          placeholder: "To",
-          value: selectedDateTo,
-          minValue: selectedDateFrom,
-          onValueChange: (date) => onDateChange?.(date, "to"),
-          className: "min-w-32",
-          defaultTimeStrValue: "11:59 PM",
-          disabled: isLoading
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("flex gap-2 items-center shrink-0 cursor-pointer"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: groupByThread, onCheckedChange: onGroupByThreadChange, disabled: isLoading }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-md text-neutral3"), children: "Group by thread" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "light", size: "lg", className: "min-w-32", onClick: onReset, disabled: isLoading, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) }),
-        "Reset"
+    ) }),
+    datePreset === "custom" ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: customRangeOpen, onOpenChange: setCustomRangeOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+        selectedDateFrom ? selectedDateFrom.toLocaleDateString() : "Start",
+        " ",
+        " – ",
+        selectedDateTo ? selectedDateTo.toLocaleDateString() : "End"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", className: cn("w-auto p-0"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-r border-border1"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), children: "Start" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker,
+              {
+                mode: "single",
+                selected: draftDateFrom,
+                month: draftDateFrom,
+                onSelect: setDraftDateFrom,
+                disabled: isLoading,
+                toDate: draftDateTo
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TimePicker,
+              {
+                className: "mx-4 mb-3 w-auto",
+                defaultValue: draftTimeFrom,
+                onValueChange: setDraftTimeFrom
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), children: "End" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker,
+              {
+                mode: "single",
+                selected: draftDateTo,
+                month: draftDateTo,
+                onSelect: setDraftDateTo,
+                disabled: isLoading,
+                fromDate: draftDateFrom
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(TimePicker, { className: "mx-4 mb-3 w-auto", defaultValue: draftTimeTo, onValueChange: setDraftTimeTo })
+          ] })
+        ] }),
+        customRangeError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-ui-sm text-red-500 px-4 pb-1"), children: customRangeError }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-between items-center px-4 pb-3"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn("text-ui-sm text-neutral3 hover:text-neutral4"),
+              onClick: () => {
+                setCustomRangeError(void 0);
+                handleDatePresetSelect("all");
+              },
+              children: "← Presets"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: applyCustomRange, children: "Apply" })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+        datePresetLabel
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", children: DATE_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Item, { onSelect: () => handleDatePresetSelect(preset.value), children: preset.label }, preset.value)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilterIcon, {}),
+        "Filter",
+        activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "ml-0.5 inline-flex items-center justify-center rounded-full bg-accent1/50 text-neutral5 text-ui-sm w-5 h-5"
+            ),
+            children: activeFilterCount
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Content, { align: "end", className: cn("min-w-[12rem]"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+              "focus-within:border-neutral2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search filters...",
+                  "aria-label": "Search filters",
+                  value: filterSearch,
+                  onChange: (e) => setFilterSearch(e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  className: cn(
+                    "bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+        filterCategories.some((c) => c.id === "status") && onErrorOnlyChange && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+            "Status",
+            errorOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenu.CheckboxItem,
+              {
+                checked: !errorOnly,
+                onCheckedChange: () => onErrorOnlyChange(false),
+                onSelect: (e) => e.preventDefault(),
+                children: "All"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenu.CheckboxItem,
+              {
+                checked: errorOnly,
+                onCheckedChange: () => onErrorOnlyChange(true),
+                onSelect: (e) => e.preventDefault(),
+                children: "Error only"
+              }
+            )
+          ] })
+        ] }),
+        filterCategories.some((c) => c.id === "entity-type") && entityOptions && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setEntitySearch), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+            "Entity Type",
+            selectedEntity && selectedEntity.value !== "all" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
+            entityOptions.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: entitySearch, onChange: setEntitySearch, label: "Search entity types" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenu.RadioGroup,
+              {
+                value: selectedEntity?.value ?? "all",
+                onValueChange: (val) => {
+                  const entity = entityOptions.find((e) => e.value === val);
+                  if (entity) onEntityChange(entity);
+                },
+                children: entityOptions.filter(
+                  (option) => !entitySearch || option.label.toLowerCase().includes(entitySearch.toLowerCase())
+                ).map((option) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] })
+        ] }),
+        filterCategories.some((c) => c.id === "tags") && onTagsChange && (availableTags ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setTagSearch), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+            "Tags",
+            (selectedTags ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedTags?.length })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
+            (availableTags ?? []).length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: tagSearch, onChange: setTagSearch, label: "Search tags" }),
+            (availableTags ?? []).filter((tag) => !tagSearch || tag.toLowerCase().includes(tagSearch.toLowerCase())).map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenu.CheckboxItem,
+              {
+                checked: (selectedTags ?? []).includes(tag),
+                onCheckedChange: (checked) => {
+                  if (checked) {
+                    onTagsChange([...selectedTags ?? [], tag]);
+                  } else {
+                    onTagsChange((selectedTags ?? []).filter((t) => t !== tag));
+                  }
+                },
+                onSelect: (e) => e.preventDefault(),
+                children: tag
+              },
+              tag
+            ))
+          ] })
+        ] }),
+        filterCategories.some((c) => c.id === "metadata") && onMetadataChange && metadataKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setMetadataKeySearch), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+            "Metadata",
+            metadataCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: metadataCount })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+            metadataKeys.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
+              SubMenuSearch,
+              {
+                value: metadataKeySearch,
+                onChange: setMetadataKeySearch,
+                label: "Search metadata keys"
+              }
+            ),
+            metadataKeys.filter((key) => !metadataKeySearch || key.toLowerCase().includes(metadataKeySearch.toLowerCase())).map((key) => {
+              const values = availableMetadata?.[key] ?? [];
+              const selectedValue = selectedMetadata?.[key];
+              return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setSubValueSearch), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: key }),
+                  selectedValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+                  values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
+                    SubMenuSearch,
+                    {
+                      value: subValueSearch,
+                      onChange: setSubValueSearch,
+                      label: "Search metadata values"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DropdownMenu.CheckboxItem,
+                    {
+                      checked: !selectedValue,
+                      onCheckedChange: () => {
+                        const next = { ...selectedMetadata };
+                        delete next[key];
+                        onMetadataChange(next);
+                      },
+                      onSelect: (e) => e.preventDefault(),
+                      children: "Any"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+                  values.filter(
+                    (value) => !subValueSearch || value.toLowerCase().includes(subValueSearch.toLowerCase())
+                  ).map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+                    DropdownMenu.CheckboxItem,
+                    {
+                      checked: selectedValue === value,
+                      onCheckedChange: (checked) => {
+                        const next = { ...selectedMetadata };
+                        if (checked) {
+                          next[key] = value;
+                        } else {
+                          delete next[key];
+                        }
+                        onMetadataChange(next);
+                      },
+                      onSelect: (e) => e.preventDefault(),
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: value })
+                    },
+                    value
+                  ))
+                ] })
+              ] }, key);
+            })
+          ] })
+        ] }),
+        onContextFiltersChange && Object.entries(contextFilterGroups).map(([group, fields]) => {
+          if (!filterCategories.some((c) => c.id === `ctx-${group}`)) return null;
+          const q = filterSearch.toLowerCase();
+          const visibleFields = q ? fields.filter((f) => f.label.toLowerCase().includes(q) || group.toLowerCase().includes(q)) : fields;
+          const fieldsWithValues = visibleFields.filter((f) => (availableContextValues?.[f.id] ?? []).length > 0);
+          if (fieldsWithValues.length === 0) return null;
+          const activeInGroup = fieldsWithValues.filter((f) => contextFilters?.[f.id]?.trim()).length;
+          return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setContextFieldSearch), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+              group,
+              activeInGroup > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: activeInGroup })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+              fieldsWithValues.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
+                SubMenuSearch,
+                {
+                  value: contextFieldSearch,
+                  onChange: setContextFieldSearch,
+                  label: "Search context fields"
+                }
+              ),
+              fieldsWithValues.filter(
+                (field) => !contextFieldSearch || field.label.toLowerCase().includes(contextFieldSearch.toLowerCase())
+              ).map((field) => {
+                const values = availableContextValues?.[field.id] ?? [];
+                const selectedValue = contextFilters?.[field.id];
+                return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch(setSubValueSearch), children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: field.label }),
+                    selectedValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+                    values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
+                      SubMenuSearch,
+                      {
+                        value: subValueSearch,
+                        onChange: setSubValueSearch,
+                        label: "Search context values"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      DropdownMenu.CheckboxItem,
+                      {
+                        checked: !selectedValue,
+                        onCheckedChange: () => {
+                          const next = { ...contextFilters };
+                          delete next[field.id];
+                          onContextFiltersChange(next);
+                        },
+                        onSelect: (e) => e.preventDefault(),
+                        children: "Any"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+                    values.filter(
+                      (value) => !subValueSearch || value.toLowerCase().includes(subValueSearch.toLowerCase())
+                    ).map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+                      DropdownMenu.CheckboxItem,
+                      {
+                        checked: selectedValue === value,
+                        onCheckedChange: (checked) => {
+                          const next = { ...contextFilters };
+                          if (checked) {
+                            next[field.id] = value;
+                          } else {
+                            delete next[field.id];
+                          }
+                          onContextFiltersChange(next);
+                        },
+                        onSelect: (e) => e.preventDefault(),
+                        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: value })
+                      },
+                      value
+                    ))
+                  ] })
+                ] }, field.id);
+              })
+            ] })
+          ] }, group);
+        }),
+        activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Item, { onSelect: () => onReset?.(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+            "Clear all filters"
+          ] })
+        ] })
       ] })
+    ] }),
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, onClick: () => onReset(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+      "Reset"
+    ] }),
+    onGroupByThreadChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("flex gap-2 items-center shrink-0 cursor-pointer"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: groupByThread, onCheckedChange: onGroupByThreadChange, disabled: isLoading }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-md text-neutral3"), children: "Group by thread" })
     ] })
-  ] });
+  ] }) });
 }
 
 const tracesListColumns = [
@@ -42205,13 +42866,13 @@ const tracesListColumns = [
   { name: "status", label: "Status", size: "3rem" }
 ];
 function traceToEntry(trace, selectedTraceId) {
-  const createdAtDate = new Date(trace.createdAt);
-  const isTodayDate = dateFns.isToday(createdAtDate);
+  const displayDate = new Date(trace.startedAt ?? trace.createdAt);
+  const isTodayDate = dateFns.isToday(displayDate);
   return {
     id: trace.traceId,
     shortId: getShortId(trace?.traceId) || "n/a",
-    date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
-    time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+    date: isTodayDate ? "Today" : dateFns.format(displayDate, "MMM dd"),
+    time: dateFns.format(displayDate, "h:mm:ss aaa"),
     name: trace?.name,
     input: getInputPreview(trace?.input),
     entityId: trace?.entityName || trace?.entityId || trace?.attributes?.agentId || trace?.attributes?.workflowId,
@@ -42693,6 +43354,54 @@ const SpanScoring = ({
   ] });
 };
 
+const useTags = () => {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["observability-tags"],
+    queryFn: async () => {
+      try {
+        return await client.getTags();
+      } catch {
+        return { tags: [] };
+      }
+    },
+    select: (data) => data?.tags ?? [],
+    retry: false
+  });
+};
+
+const useEnvironments = () => {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["observability-environments"],
+    queryFn: async () => {
+      try {
+        return await client.getEnvironments();
+      } catch {
+        return { environments: [] };
+      }
+    },
+    select: (data) => data?.environments ?? [],
+    retry: false
+  });
+};
+
+const useServiceNames = () => {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["observability-service-names"],
+    queryFn: async () => {
+      try {
+        return await client.getServiceNames();
+      } catch {
+        return { serviceNames: [] };
+      }
+    },
+    select: (data) => data?.serviceNames ?? [],
+    retry: false
+  });
+};
+
 const useDatasetItemVersions = (datasetId, itemId) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
@@ -49475,6 +50184,32 @@ const CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+function FieldBlocksLayoutColumn({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 content-start", className), children });
+}
+
+function FieldBlocksLayoutRoot({ children, className, columns = 1, gap }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "grid",
+        {
+          "grid-cols-1": columns === 1,
+          "grid-cols-2": columns === 2
+        },
+        gap ?? "gap-6",
+        className
+      ),
+      children
+    }
+  );
+}
+
+const FieldBlocksLayout = Object.assign(FieldBlocksLayoutRoot, {
+  Column: FieldBlocksLayoutColumn
+});
+
 const themeClasses = {
   light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
   dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
@@ -52527,6 +53262,7 @@ exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
 exports.CHART_COLORS = CHART_COLORS;
 exports.CODE_AGENT_OVERRIDE_SECTIONS = CODE_AGENT_OVERRIDE_SECTIONS;
+exports.CONTEXT_FIELD_IDS = CONTEXT_FIELD_IDS;
 exports.CSVImportDialog = CSVImportDialog;
 exports.Cell = Cell;
 exports.ChatThreads = ChatThreads;
@@ -52562,6 +53298,7 @@ exports.CreateDatasetDialog = CreateDatasetDialog;
 exports.CreateDatasetFromItemsDialog = CreateDatasetFromItemsDialog;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;
+exports.DashboardCard = DashboardCard;
 exports.DatasetCombobox = DatasetCombobox;
 exports.DatasetCompareVersionToolbar = DatasetCompareVersionToolbar;
 exports.DatasetCompareVersionsList = DatasetCompareVersionsList;
@@ -52599,6 +53336,7 @@ exports.DialogTrigger = DialogTrigger;
 exports.DisplayConditionsDialog = DisplayConditionsDialog;
 exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
+exports.DropdownMenu = DropdownMenu;
 exports.DuplicateDatasetDialog = DuplicateDatasetDialog;
 exports.DynamicForm = DynamicForm;
 exports.EditDatasetDialog = EditDatasetDialog;
@@ -52630,6 +53368,8 @@ exports.ExperimentResultsPanel = ExperimentResultsPanel;
 exports.ExperimentStats = ExperimentStats;
 exports.ExperimentTriggerDialog = ExperimentTriggerDialog;
 exports.Field = Field;
+exports.FieldBlock = FieldBlock;
+exports.FieldBlocksLayout = FieldBlocksLayout;
 exports.FieldDescription = FieldDescription;
 exports.FieldList = FieldList;
 exports.FieldName = FieldName;
@@ -52653,6 +53393,7 @@ exports.HomeIcon = HomeIcon;
 exports.HorizontalBars = HorizontalBars;
 exports.HoverPopover = HoverPopover;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.InfoIcon = InfoIcon;
 exports.InformationPage = InformationPage;
 exports.Input = Input;
@@ -52779,6 +53520,7 @@ exports.ScoresList = ScoresList;
 exports.ScoresTools = ScoresTools;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
+exports.SearchFieldBlock = SearchFieldBlock;
 exports.SearchSkillsPanel = SearchSkillsPanel;
 exports.SearchWorkspacePanel = SearchWorkspacePanel;
 exports.Searchbar = Searchbar;
@@ -52789,6 +53531,7 @@ exports.Sections = Sections;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectField = SelectField;
+exports.SelectFieldBlock = SelectFieldBlock;
 exports.SelectGroup = SelectGroup;
 exports.SelectItem = SelectItem;
 exports.SelectTrigger = SelectTrigger;
@@ -52830,6 +53573,7 @@ exports.TemplateSuccess = TemplateSuccess;
 exports.TemplatesList = TemplatesList;
 exports.TemplatesTools = TemplatesTools;
 exports.TextAndIcon = TextAndIcon;
+exports.TextFieldBlock = TextFieldBlock;
 exports.Th = Th;
 exports.Thead = Thead;
 exports.ThreadDeleteButton = ThreadDeleteButton;
@@ -53035,6 +53779,7 @@ exports.useDeleteScorerVersion = useDeleteScorerVersion;
 exports.useDeleteThread = useDeleteThread;
 exports.useDeleteWorkflowRun = useDeleteWorkflowRun;
 exports.useDeleteWorkspaceFile = useDeleteWorkspaceFile;
+exports.useEnvironments = useEnvironments;
 exports.useExecuteAgentTool = useExecuteAgentTool;
 exports.useExecuteMCPTool = useExecuteMCPTool;
 exports.useExecuteProcessor = useExecuteProcessor;
@@ -53109,6 +53854,7 @@ exports.useScoresMetrics = useScoresMetrics;
 exports.useSearchSkillsSh = useSearchSkillsSh;
 exports.useSearchWorkspace = useSearchWorkspace;
 exports.useSearchWorkspaceSkills = useSearchWorkspaceSkills;
+exports.useServiceNames = useServiceNames;
 exports.useSkillPreview = useSkillPreview;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStoredAgent = useStoredAgent;
@@ -53122,6 +53868,7 @@ exports.useStoredScorerMutations = useStoredScorerMutations;
 exports.useStoredSkills = useStoredSkills;
 exports.useStudioConfig = useStudioConfig;
 exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
+exports.useTags = useTags;
 exports.useThread = useThread;
 exports.useThreadInput = useThreadInput;
 exports.useThreads = useThreads;