@mastra/playground-ui 23.0.2 → 24.0.0-alpha.1

package/dist/index.cjs.js

@@ -50,6 +50,8 @@ const isToday = require('date-fns/isToday');
 const search = require('@codemirror/search');
 const recharts = require('recharts');
 const reactResizablePanels = require('react-resizable-panels');
+const reactQuery = require('@tanstack/react-query');
+const observability = require('@mastra/core/observability');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -12062,16 +12064,16 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
   )) });
 }
 
-function toDate$2(value) {
+function toDate$3(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
 }
 function ScoresDataListDateCell({ timestamp }) {
-  const date = toDate$2(timestamp);
+  const date = toDate$3(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
 }
 function ScoresDataListTimeCell({ timestamp }) {
-  const date = toDate$2(timestamp);
+  const date = toDate$3(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? dateFns.format(date, "h:mm:ss aaa") : "-" });
 }
 function ScoresDataListInputCell({ input }) {
@@ -12101,7 +12103,7 @@ const ScoresDataList = Object.assign(ScoresDataListRoot, {
   ScoreCell: ScoresDataListScoreCell
 });
 
-function toDate$1(value) {
+function toDate$2(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
 }
@@ -12113,11 +12115,11 @@ function TracesDataListIdCell({ traceId }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: getShortId(traceId) });
 }
 function TracesDataListDateCell({ timestamp }) {
-  const date = toDate$1(timestamp);
+  const date = toDate$2(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
 }
 function TracesDataListTimeCell({ timestamp }) {
-  const date = toDate$1(timestamp);
+  const date = toDate$2(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     dateFns.format(date, "HH:mm:ss"),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
@@ -12398,7 +12400,7 @@ function EntityListSkeleton({ columns, numberOfRows = 3 }) {
   )) });
 }
 
-function toDate(value) {
+function toDate$1(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
 }
@@ -12414,11 +12416,11 @@ function LogsDataListLevelCell({ level }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
 }
 function LogsDataListDateCell({ timestamp }) {
-  const date = toDate(timestamp);
+  const date = toDate$1(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
 }
 function LogsDataListTimeCell({ timestamp }) {
-  const date = toDate(timestamp);
+  const date = toDate$1(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     dateFns.format(date, "HH:mm:ss"),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
@@ -13543,7 +13545,7 @@ const DataPanel = Object.assign(DataPanelRoot, {
   CodeSection: DataCodeSection
 });
 
-const DATE_PRESETS = [
+const DATE_PRESETS$1 = [
   { 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 },
@@ -13567,7 +13569,7 @@ function DateTimeRangePicker({
   presets,
   size = "md"
 }) {
-  const visiblePresets = presets ? DATE_PRESETS.filter((p) => presets.includes(p.value)) : DATE_PRESETS;
+  const visiblePresets = presets ? DATE_PRESETS$1.filter((p) => presets.includes(p.value)) : DATE_PRESETS$1;
   const fallbackPreset = visiblePresets.find((p) => p.value !== "custom")?.value ?? "all";
   const [customRangeOpen, setCustomRangeOpen] = React.useState(false);
   const [draftDateFrom, setDraftDateFrom] = React.useState(dateFrom);
@@ -13575,7 +13577,7 @@ function DateTimeRangePicker({
   const [draftTimeFrom, setDraftTimeFrom] = React.useState("12:00 AM");
   const [draftTimeTo, setDraftTimeTo] = React.useState("11:59 PM");
   const [customRangeError, setCustomRangeError] = React.useState();
-  const datePresetLabel = DATE_PRESETS.find((p) => p.value === preset)?.label ?? "All";
+  const datePresetLabel = DATE_PRESETS$1.find((p) => p.value === preset)?.label ?? "All";
   const handlePresetSelect = (value) => {
     onPresetChange?.(value);
     if (value === "custom") {
@@ -13586,7 +13588,7 @@ function DateTimeRangePicker({
       setCustomRangeOpen(true);
       return;
     }
-    const entry = DATE_PRESETS.find((p) => p.value === value);
+    const entry = DATE_PRESETS$1.find((p) => p.value === value);
     if (entry?.ms) {
       onDateChange?.(new Date(Date.now() - entry.ms), "from");
       onDateChange?.(void 0, "to");
@@ -15004,6 +15006,4125 @@ function generateDefaultValues(schema) {
   return generateObjectDefaults(schema.properties, 0);
 }
 
+const DATE_PRESETS = [
+  { 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.map((p) => p.value));
+function isValidPreset(value) {
+  return typeof value === "string" && (VALID_PRESETS.has(value) || value === "custom");
+}
+const MetricsContext = React.createContext({
+  datePreset: "24h",
+  setDatePreset: () => {
+  },
+  customRange: void 0,
+  setCustomRange: () => {
+  },
+  dateRangeLabel: "Last 24 hours"
+});
+function useMetrics() {
+  return React.useContext(MetricsContext);
+}
+function getDateRangeLabel(preset, customRange) {
+  if (preset !== "custom") {
+    return DATE_PRESETS.find((p) => p.value === preset).label;
+  }
+  if (customRange?.from) {
+    if (customRange.to) {
+      return `${dateFns.format(customRange.from, "MMM d, yyyy")} – ${dateFns.format(customRange.to, "MMM d, yyyy")}`;
+    }
+    return dateFns.format(customRange.from, "MMM d, yyyy");
+  }
+  return "Custom range";
+}
+function MetricsProvider({
+  children,
+  initialPreset,
+  onPresetChange
+}) {
+  const [datePreset, setDatePresetState] = React.useState(initialPreset ?? "24h");
+  const [customRange, setCustomRange] = React.useState(void 0);
+  const dateRangeLabel = getDateRangeLabel(datePreset, customRange);
+  React.useEffect(() => {
+    if (initialPreset && initialPreset !== datePreset) {
+      setDatePresetState(initialPreset);
+    }
+  }, [initialPreset]);
+  const setDatePreset = React.useCallback(
+    (v) => {
+      setDatePresetState(v);
+      onPresetChange?.(v);
+    },
+    [onPresetChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MetricsContext.Provider,
+    {
+      value: {
+        datePreset,
+        setDatePreset,
+        customRange,
+        setCustomRange,
+        dateRangeLabel
+      },
+      children
+    }
+  );
+}
+
+function DateRangeSelector() {
+  const { datePreset, setDatePreset } = useMetrics();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectFieldBlock,
+    {
+      name: "date-range",
+      labelIsHidden: true,
+      value: datePreset,
+      options: DATE_PRESETS.map((p) => ({ label: p.label, value: p.value })),
+      onValueChange: (value) => {
+        if (isValidPreset(value)) setDatePreset(value);
+      }
+    }
+  );
+}
+
+function formatCompact(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  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",
+  pink: "#f472b6",
+  purple: "#8b5cf6",
+  blue: "#4f83f1",
+  blueDark: "#2b5cd9",
+  blueLight: "#6b8fe5",
+  red: "#f87171",
+  greenDark: "#15613a",
+  redDark: "#991b1b",
+  yellow: "#facc15"
+};
+
+function BarListContent({
+  data,
+  maxVal,
+  fmt,
+  color,
+  valueLabel,
+  legend
+}) {
+  const sorted = [...data].sort((a, b) => b.value - a.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: legend?.map((l) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: l.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon2", children: l.label })
+      ] }, l.label)) }),
+      valueLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-icon2", children: valueLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2.5", children: sorted.map((d) => {
+      const pct = Math.min(Math.max(maxVal > 0 ? d.value / maxVal * 100 : 0, 0), 100);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 h-7", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-y-0 left-0 rounded",
+              style: { width: `${pct}%`, backgroundColor: color }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-2 flex items-center text-xs text-white whitespace-nowrap", children: d.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs font-mono text-icon6 tabular-nums", children: fmt(d.value) })
+      ] }, d.name);
+    }) })
+  ] });
+}
+function StackedRunsBars({ data }) {
+  const sorted = [...data].sort((a, b) => b.completed + b.errors - (a.completed + a.errors));
+  const maxTotal = Math.max(...sorted.map((d) => d.completed + d.errors));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: CHART_COLORS.blue } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon2", children: "Completed" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: CHART_COLORS.red } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon2", children: "Errors" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-icon2", children: "Total (Success)" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2.5", children: sorted.map((d) => {
+      const total = d.completed + d.errors;
+      const successPct = total > 0 ? (d.completed / total * 100).toFixed(1) : "0.0";
+      const completedWidth = Math.min(Math.max(maxTotal > 0 ? d.completed / maxTotal * 100 : 0, 0), 100);
+      const errorsWidth = Math.min(Math.max(maxTotal > 0 ? d.errors / maxTotal * 100 : 0, 0), 100);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 h-7", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "img",
+                "aria-label": `${d.completed.toLocaleString()} completed`,
+                tabIndex: 0,
+                className: "absolute inset-y-0 left-0 rounded-l cursor-default",
+                style: { width: `${completedWidth}%`, backgroundColor: CHART_COLORS.blue }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { side: "top", className: "font-mono", children: [
+              d.completed.toLocaleString(),
+              " completed"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "img",
+                "aria-label": `${d.errors.toLocaleString()} errors`,
+                tabIndex: 0,
+                className: "absolute inset-y-0 rounded-r cursor-default",
+                style: {
+                  left: `${completedWidth}%`,
+                  width: `${errorsWidth}%`,
+                  backgroundColor: CHART_COLORS.red
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { side: "top", className: "font-mono", children: [
+              d.errors.toLocaleString(),
+              " errors"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-2 flex items-center text-xs text-white whitespace-nowrap pointer-events-none", children: d.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-xs font-mono text-icon6 tabular-nums", children: [
+          total.toLocaleString(),
+          " (",
+          successPct,
+          "%)"
+        ] })
+      ] }, d.name);
+    }) })
+  ] });
+}
+
+function KpiCardView({ label, value, prevValue, changePct, isLoading, isError }) {
+  const hasData = value != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? value : "—" }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Loading, {}) : hasData ? changePct != null ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Change, { changePct, prevValue }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+
+const latencySeries = [
+  {
+    dataKey: "p50",
+    label: "p50",
+    color: CHART_COLORS.blue,
+    aggregate: (data) => ({
+      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + d.p50, 0) / data.length)}` : "0",
+      suffix: "avg ms"
+    })
+  },
+  {
+    dataKey: "p95",
+    label: "p95",
+    color: CHART_COLORS.yellow,
+    aggregate: (data) => ({
+      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + d.p95, 0) / data.length)}` : "0",
+      suffix: "avg ms"
+    })
+  }
+];
+function LatencyChart({ data }) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No latency data yet" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChart, { data, series: latencySeries });
+}
+function LatencyCardView({ data, isLoading, isError }) {
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const p50Values = data ? Object.values(data).filter(Array.isArray).flat().map((d) => d.p50).filter((v) => typeof v === "number") : [];
+  const avgP50 = p50Values.length > 0 ? `${Math.round(p50Values.reduce((s, v) => s + v, 0) / p50Values.length)}ms` : "—";
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Latency", description: "Hourly p50 and p95 latency." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: avgP50, label: "Avg p50" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        defaultTab: data.agentData.length > 0 ? "agents" : data.workflowData.length > 0 ? "workflows" : data.toolData.length > 0 ? "tools" : "agents",
+        className: "overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "agents", children: "Agents" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "workflows", children: "Workflows" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tools", children: "Tools" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.agentData }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.workflowData }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.toolData }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function ModelUsageCostCardView({ rows, isLoading, isError }) {
+  const hasData = !!rows && rows.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__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 units = new Set(rows.filter((r) => r.cost != null && r.costUnit).map((r) => r.costUnit));
+        let value;
+        if (units.size === 0) {
+          value = totalCost > 0 ? formatCost(totalCost) : "—";
+        } else if (units.size === 1) {
+          value = totalCost > 0 ? formatCost(totalCost, [...units][0]) : "—";
+        } else {
+          value = "Mixed";
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value, 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,
+      {
+        columns: [
+          { label: "Model", value: (row) => row.model },
+          { 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: (row) => row.cost != null ? formatCost(row.cost, row.costUnit) : "—",
+            highlight: true
+          }
+        ],
+        data: rows.map((row) => ({ ...row, key: row.model }))
+      }
+    ) })
+  ] });
+}
+
+const SERIES_COLORS = [
+  CHART_COLORS.green,
+  CHART_COLORS.blue,
+  CHART_COLORS.purple,
+  CHART_COLORS.orange,
+  CHART_COLORS.pink,
+  CHART_COLORS.yellow
+];
+function ScoresCardView({ data, isLoading, isError }) {
+  const hasData = !!data && (data.summaryData.length > 0 || data.overTimeData.length > 0);
+  const series = React.useMemo(() => {
+    if (!data?.scorerNames) return [];
+    return data.scorerNames.map((name, i) => ({
+      dataKey: name,
+      label: name,
+      color: SERIES_COLORS[i % SERIES_COLORS.length],
+      aggregate: (points) => ({
+        value: points.length > 0 ? (points.reduce((s, d) => s + (d[name] ?? 0), 0) / points.length).toFixed(2) : "0",
+        suffix: "avg"
+      })
+    }));
+  }, [data?.scorerNames]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(
+        MetricsCard.Summary,
+        {
+          value: data?.avgScore != null ? `avg ${data.avgScore}` : "—",
+          label: "Across all scorers"
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load scores data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No scores data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "over-time", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "over-time", children: "Over Time" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "summary", children: "Summary" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MetricsDataTable,
+        {
+          columns: [
+            { label: "Scorer", value: (row) => row.scorer },
+            { label: "Avg", value: (row) => row.avg.toFixed(2), highlight: true },
+            { label: "Min", value: (row) => row.min.toFixed(2) },
+            { label: "Max", value: (row) => row.max.toFixed(2) },
+            { label: "Count", value: (row) => row.count.toLocaleString() }
+          ],
+          data: data.summaryData.map((row) => ({ ...row, key: row.scorer }))
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+function isTokenUsageTab(value) {
+  return value === "tokens" || value === "cost";
+}
+function TokenUsageByAgentCardView({ data, isLoading, isError }) {
+  const [activeTab, setActiveTab] = React.useState("tokens");
+  const rows = data ?? [];
+  const hasData = rows.length > 0;
+  const totalTokens = rows.reduce((s, d) => s + d.total, 0);
+  const costRows = rows.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 ? [...uniqueCostUnits][0] ?? "usd" : 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(
+        MetricsCard.TitleAndDescription,
+        {
+          title: "Token Usage by Agent",
+          description: "Token consumption grouped by agent."
+        }
+      ),
+      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",
+        value: activeTab,
+        onValueChange: (v) => {
+          if (isTokenUsageTab(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: rows.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(...rows.map((d) => d.input + d.output)),
+              fmt: formatCompact
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(
+            HorizontalBars,
+            {
+              data: costRows.slice().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(...costRows.map((d) => d.cost ?? 0)),
+              fmt: (v) => formatCost(v, costUnit)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function VolumeBars({ data }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HorizontalBars,
+    {
+      data: data.map((d) => ({ name: d.name, values: [d.completed, d.errors] })),
+      segments: [
+        { label: "Completed", color: CHART_COLORS.blueDark },
+        { label: "Errors", color: CHART_COLORS.pink }
+      ],
+      maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
+      fmt: formatCompact
+    }
+  );
+}
+function TracesVolumeCardView({ data, isLoading, isError }) {
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const total = data ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "agents", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.agentData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.workflowData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.toolData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No tool data yet" }) })
+    ] }) })
+  ] });
+}
+
+const PRESET_MS$2 = {
+  "24h": 24 * 60 * 60 * 1e3,
+  "3d": 3 * 24 * 60 * 60 * 1e3,
+  "7d": 7 * 24 * 60 * 60 * 1e3,
+  "14d": 14 * 24 * 60 * 60 * 1e3,
+  "30d": 30 * 24 * 60 * 60 * 1e3
+};
+function buildTimestamp(preset, customRange) {
+  const now = /* @__PURE__ */ new Date();
+  if (preset !== "custom") {
+    const ms = PRESET_MS$2[preset] ?? PRESET_MS$2["24h"];
+    return { start: new Date(now.getTime() - ms), end: now };
+  }
+  return {
+    start: customRange?.from ?? new Date(now.getTime() - PRESET_MS$2["24h"]),
+    end: customRange?.to ?? now
+  };
+}
+function useMetricsFilters() {
+  const { datePreset, customRange } = useMetrics();
+  const timestamp = buildTimestamp(datePreset, customRange);
+  return { datePreset, customRange, timestamp };
+}
+
+function useAgentRunsKpiMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "agent-runs-kpi", datePreset, customRange],
+    queryFn: () => client.getMetricAggregate({
+      name: ["mastra_agent_duration_ms"],
+      aggregation: "count",
+      filters: { timestamp },
+      comparePeriod: "previous_period"
+    })
+  });
+}
+
+function useAvgScoreKpiMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "avg-score-kpi", datePreset, customRange],
+    queryFn: async () => {
+      const scorersMap = await client.listScorers();
+      const scorerIds = Object.keys(scorersMap ?? {});
+      if (scorerIds.length === 0) {
+        return { value: null, previousValue: null, changePercent: null };
+      }
+      const filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
+      const results = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg2, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return { avg: avg2.value ?? 0, count: count.value ?? 0 };
+        })
+      );
+      const withData = results.filter((r) => r.count > 0);
+      if (withData.length === 0) {
+        return { value: null, previousValue: null, changePercent: null };
+      }
+      const totalCount = withData.reduce((sum, r) => sum + r.count, 0);
+      const weightedSum = withData.reduce((sum, r) => sum + r.avg * r.count, 0);
+      const avg = weightedSum / totalCount;
+      return { value: Math.round(avg * 100) / 100, previousValue: null, changePercent: null };
+    }
+  });
+}
+
+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();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "total-tokens-kpi", datePreset, customRange],
+    queryFn: async () => {
+      const [input, output] = await Promise.all([
+        client.getMetricAggregate({
+          name: ["mastra_model_total_input_tokens"],
+          aggregation: "sum",
+          filters: { timestamp },
+          comparePeriod: "previous_period"
+        }),
+        client.getMetricAggregate({
+          name: ["mastra_model_total_output_tokens"],
+          aggregation: "sum",
+          filters: { timestamp },
+          comparePeriod: "previous_period"
+        })
+      ]);
+      const hasCurrent = input.value != null || output.value != null;
+      const hasPrevious = input.previousValue != null || output.previousValue != null;
+      const value = (input.value ?? 0) + (output.value ?? 0);
+      const previousValue = (input.previousValue ?? 0) + (output.previousValue ?? 0);
+      const changePercent = hasPrevious && previousValue > 0 ? (value - previousValue) / previousValue * 100 : null;
+      return {
+        value: hasCurrent ? value : null,
+        previousValue: hasPrevious ? previousValue : null,
+        changePercent
+      };
+    }
+  });
+}
+
+function useModelUsageCostMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "model-usage-cost", datePreset, customRange],
+    queryFn: async () => {
+      const metrics = [
+        "mastra_model_total_input_tokens",
+        "mastra_model_total_output_tokens",
+        "mastra_model_input_cache_read_tokens",
+        "mastra_model_input_cache_write_tokens"
+      ];
+      const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all(
+        metrics.map(
+          (name) => client.getMetricBreakdown({
+            name: [name],
+            groupBy: ["model"],
+            aggregation: "sum",
+            filters: { timestamp }
+          })
+        )
+      );
+      const modelMap = /* @__PURE__ */ new Map();
+      const ensureModel = (model) => {
+        if (!modelMap.has(model)) {
+          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";
+        const entry = ensureModel(m);
+        entry.input = group.value;
+        addCost(entry, group);
+      }
+      for (const group of outputRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        const entry = ensureModel(m);
+        entry.output = group.value;
+        addCost(entry, group);
+      }
+      for (const group of cacheReadRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        const entry = ensureModel(m);
+        entry.cacheRead = group.value;
+        addCost(entry, group);
+      }
+      for (const group of cacheWriteRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        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),
+        cost: vals.cost,
+        costUnit: vals.costUnit
+      })).sort((a, b) => a.model.localeCompare(b.model));
+    }
+  });
+}
+
+async function fetchPercentiles(client, metricName, timestamp) {
+  const res = await client.getMetricPercentiles({
+    name: metricName,
+    percentiles: [0.5, 0.95],
+    interval: "1h",
+    filters: { timestamp }
+  });
+  const p50Series = res.series.find((s) => s.percentile === 0.5);
+  const p95Series = res.series.find((s) => s.percentile === 0.95);
+  if (!p50Series || !p95Series) return [];
+  const p95Map = new Map(p95Series.points.map((p) => [new Date(p.timestamp).getTime(), p.value]));
+  return p50Series.points.map((p) => {
+    const ts = new Date(p.timestamp);
+    return {
+      time: ts.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }),
+      p50: Math.round(p.value),
+      p95: Math.round(p95Map.get(ts.getTime()) ?? 0)
+    };
+  });
+}
+function useLatencyMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "latency", datePreset, customRange],
+    queryFn: async () => {
+      const [agentData, workflowData, toolData] = await Promise.all([
+        fetchPercentiles(client, "mastra_agent_duration_ms", timestamp),
+        fetchPercentiles(client, "mastra_workflow_duration_ms", timestamp),
+        fetchPercentiles(client, "mastra_tool_duration_ms", timestamp)
+      ]);
+      return { agentData, workflowData, toolData };
+    }
+  });
+}
+
+async function fetchVolume(client, metricName, timestamp) {
+  const res = await client.getMetricBreakdown({
+    name: [metricName],
+    groupBy: ["entityName", "status"],
+    aggregation: "count",
+    filters: { timestamp }
+  });
+  const map = /* @__PURE__ */ new Map();
+  for (const group of res.groups) {
+    const name = group.dimensions.entityName ?? "unknown";
+    const status = group.dimensions.status ?? "ok";
+    if (!map.has(name)) {
+      map.set(name, { completed: 0, errors: 0 });
+    }
+    const entry = map.get(name);
+    if (status === "error") {
+      entry.errors += group.value;
+    } else {
+      entry.completed += group.value;
+    }
+  }
+  return Array.from(map.entries()).map(([name, vals]) => ({ name, ...vals })).sort((a, b) => b.completed + b.errors - (a.completed + a.errors));
+}
+function useTraceVolumeMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "trace-volume", datePreset, customRange],
+    queryFn: async () => {
+      const [agentData, workflowData, toolData] = await Promise.all([
+        fetchVolume(client, "mastra_agent_duration_ms", timestamp),
+        fetchVolume(client, "mastra_workflow_duration_ms", timestamp),
+        fetchVolume(client, "mastra_tool_duration_ms", timestamp)
+      ]);
+      return { agentData, workflowData, toolData };
+    }
+  });
+}
+
+function useScoresMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "scores-card", datePreset, customRange],
+    queryFn: async () => {
+      const filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
+      const scorersMap = await client.listScorers();
+      const scorerIds = Object.keys(scorersMap ?? {});
+      if (scorerIds.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
+      }
+      const summaryResults = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg, min, max, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "min", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "max", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return {
+            scorer: scorerId,
+            avg: avg.value ?? 0,
+            min: min.value ?? 0,
+            max: max.value ?? 0,
+            count: count.value ?? 0
+          };
+        })
+      );
+      const summaryData = summaryResults.filter((s) => s.count > 0);
+      const scorerNames = summaryData.map((s) => s.scorer);
+      if (summaryData.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
+      }
+      const totalWeighted = summaryData.reduce((s, d) => s + d.avg * d.count, 0);
+      const totalCount = summaryData.reduce((s, d) => s + d.count, 0);
+      const avgScore = totalCount ? Math.round(totalWeighted / totalCount * 100) / 100 : 0;
+      const interval = "1h";
+      const timeSeriesResults = await Promise.all(
+        scorerNames.map(
+          (scorerId) => client.getScoreTimeSeries({
+            scorerId,
+            interval,
+            aggregation: "avg",
+            filters
+          })
+        )
+      );
+      const hourBuckets = /* @__PURE__ */ new Map();
+      for (let i = 0; i < scorerNames.length; i++) {
+        const scorerId = scorerNames[i];
+        const series = timeSeriesResults[i]?.series ?? [];
+        for (const s of series) {
+          for (const point of s.points) {
+            const ts = new Date(point.timestamp);
+            const hourKey = ts.toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: false
+            });
+            if (!hourBuckets.has(hourKey)) {
+              hourBuckets.set(hourKey, /* @__PURE__ */ new Map());
+            }
+            const scorerMap = hourBuckets.get(hourKey);
+            if (!scorerMap.has(scorerId)) {
+              scorerMap.set(scorerId, { sum: 0, count: 0 });
+            }
+            const acc = scorerMap.get(scorerId);
+            acc.sum += point.value;
+            acc.count += 1;
+          }
+        }
+      }
+      const overTimeData = Array.from(hourBuckets.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([hourKey, scorerMap]) => {
+        const point = { time: hourKey };
+        for (const [scorerId, acc] of scorerMap) {
+          point[scorerId] = +(acc.sum / acc.count).toFixed(2);
+        }
+        return point;
+      });
+      return {
+        summaryData,
+        overTimeData,
+        scorerNames,
+        avgScore
+      };
+    }
+  });
+}
+
+function useTokenUsageByAgentMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.useQuery({
+    queryKey: ["metrics", "token-usage-by-agent", datePreset, customRange],
+    queryFn: async () => {
+      const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all([
+        client.getMetricBreakdown({
+          name: ["mastra_model_total_input_tokens"],
+          groupBy: ["entityName"],
+          aggregation: "sum",
+          filters: { timestamp }
+        }),
+        client.getMetricBreakdown({
+          name: ["mastra_model_total_output_tokens"],
+          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, 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";
+        const entry = ensure(name);
+        entry.input = group.value;
+        addCost(entry, group);
+      }
+      for (const group of outputRes.groups) {
+        const name = group.dimensions.entityName ?? "unknown";
+        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,
+        cost: vals.cost,
+        costUnit: vals.costUnit
+      })).sort((a, b) => b.total - a.total);
+    }
+  });
+}
+
+const formatHierarchicalSpans = (spans) => {
+  if (!spans || spans.length === 0) {
+    return [];
+  }
+  const overallEndDate = spans.reduce(
+    (latest, span) => {
+      const endDate = span?.endedAt ? new Date(span.endedAt) : void 0;
+      return endDate && (!latest || endDate > latest) ? endDate : latest;
+    },
+    null
+  );
+  const spanMap = /* @__PURE__ */ new Map();
+  const rootSpans = [];
+  spans.forEach((spanRecord) => {
+    const startDate = new Date(spanRecord.startedAt);
+    const endDate = spanRecord.endedAt ? new Date(spanRecord.endedAt) : void 0;
+    const uiSpan = {
+      id: spanRecord.spanId,
+      name: spanRecord.name,
+      type: spanRecord.spanType,
+      latency: endDate ? endDate.getTime() - startDate.getTime() : 0,
+      startTime: startDate.toISOString(),
+      endTime: endDate ? endDate.toISOString() : void 0,
+      spans: [],
+      parentSpanId: spanRecord.parentSpanId
+    };
+    spanMap.set(spanRecord.spanId, uiSpan);
+  });
+  spans.forEach((spanRecord) => {
+    const uiSpan = spanMap.get(spanRecord.spanId);
+    if (spanRecord?.parentSpanId == null) {
+      if (overallEndDate && uiSpan.endTime && overallEndDate > new Date(uiSpan.endTime)) {
+        uiSpan.endTime = overallEndDate.toISOString();
+        const overallEndTime = new Date(overallEndDate).getTime();
+        const spanStartTime = new Date(uiSpan.startTime).getTime();
+        uiSpan.latency = overallEndTime - spanStartTime;
+      }
+      rootSpans.push(uiSpan);
+    } else {
+      const parent = spanMap.get(spanRecord.parentSpanId);
+      if (parent) {
+        parent.spans.push(uiSpan);
+      } else {
+        rootSpans.push(uiSpan);
+      }
+    }
+  });
+  const sortSpansByStartTime = (spans2) => {
+    return spans2.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+  };
+  const sortedRootSpans = sortSpansByStartTime(rootSpans);
+  const sortNestedSpans = (spans2) => {
+    spans2.forEach((span) => {
+      if (span.spans && span.spans.length > 0) {
+        span.spans = sortSpansByStartTime(span.spans);
+        sortNestedSpans(span.spans);
+      }
+    });
+  };
+  sortNestedSpans(sortedRootSpans);
+  return sortedRootSpans;
+};
+
+const spanTypePrefixes = ["agent", "workflow", "model", "mcp", "tool", "memory", "workspace", "other"];
+const spanTypeToUiElements = {
+  agent: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
+    color: "oklch(0.75 0.15 250)",
+    label: "Agent",
+    bgColor: "oklch(0.75 0.15 250 / 0.1)",
+    typePrefix: "agent"
+  },
+  workflow: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}),
+    color: "oklch(0.75 0.15 200)",
+    label: "Workflow",
+    bgColor: "oklch(0.75 0.15 200 / 0.1)",
+    typePrefix: "workflow"
+  },
+  model: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, {}),
+    color: "oklch(0.75 0.15 320)",
+    label: "Model",
+    bgColor: "oklch(0.75 0.15 320 / 0.1)",
+    typePrefix: "model"
+  },
+  mcp: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
+    color: "oklch(0.75 0.15 160)",
+    label: "MCP",
+    bgColor: "oklch(0.75 0.15 160 / 0.1)",
+    typePrefix: "mcp"
+  },
+  tool: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+    color: "oklch(0.75 0.15 100)",
+    label: "Tool",
+    bgColor: "oklch(0.75 0.15 100 / 0.1)",
+    typePrefix: "tool"
+  },
+  memory: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}),
+    color: "oklch(0.75 0.15 60)",
+    label: "Memory",
+    bgColor: "oklch(0.75 0.15 60 / 0.1)",
+    typePrefix: "memory"
+  },
+  workspace: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, {}),
+    color: "oklch(0.75 0.15 40)",
+    label: "Workspace",
+    bgColor: "oklch(0.75 0.15 40 / 0.1)",
+    typePrefix: "workspace"
+  }
+};
+const otherSpanType = {
+  color: "oklch(0.65 0 0)",
+  label: "Other",
+  typePrefix: "other"
+};
+function getSpanTypeUi(type) {
+  const typePrefix = type?.toLowerCase().split("_")[0];
+  return spanTypeToUiElements[typePrefix] ?? otherSpanType;
+}
+
+function isTokenDetailsObject(value) {
+  return typeof value === "object" && value !== null;
+}
+const detailKeyLabels = {
+  text: "Text",
+  cacheRead: "Cache Read",
+  cacheWrite: "Cache Write",
+  audio: "Audio",
+  image: "Image",
+  reasoning: "Reasoning"
+};
+function SpanTokenUsage({ usage, className }) {
+  if (!usage) return null;
+  const isV5 = "inputTokens" in usage;
+  const legacyTokenPresentations = {
+    promptTokens: { label: "Prompt Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}) },
+    completionTokens: { label: "Completion Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {}) }
+  };
+  const v5TokenPresentations = {
+    inputTokens: { label: "Input Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}) },
+    outputTokens: { label: "Output Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {}) },
+    reasoningTokens: { label: "Reasoning Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {}) },
+    cachedInputTokens: { label: "Cached Input Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {}) },
+    inputDetails: { label: "Input Details", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}) },
+    outputDetails: { label: "Output Details", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {}) }
+  };
+  const commonTokenPresentations = {
+    totalTokens: { label: "Total LLM Tokens", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CoinsIcon, {}) }
+  };
+  const tokenPresentations = {
+    ...commonTokenPresentations,
+    ...v5TokenPresentations,
+    ...legacyTokenPresentations
+  };
+  const usageKeyOrder = isV5 ? [
+    "totalTokens",
+    "inputTokens",
+    "outputTokens",
+    "reasoningTokens",
+    "cachedInputTokens",
+    "inputDetails",
+    "outputDetails"
+  ] : ["totalTokens", "promptTokens", "completionTokens"];
+  const usageAsArray = Object.entries(usage).filter((entry) => {
+    const value = entry[1];
+    return typeof value === "number" || isTokenDetailsObject(value);
+  }).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-6 flex-wrap", className), children: usageAsArray.map(({ key, value }) => {
+    const isObject = isTokenDetailsObject(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 p-3 px-4 rounded-lg text-ui-md grow", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-[1.5rem_1fr_auto] gap-2 items-center",
+            "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
+          ),
+          children: [
+            tokenPresentations?.[key]?.icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md", children: tokenPresentations?.[key]?.label }),
+            !isObject && /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-ui-lg", children: value })
+          ]
+        }
+      ),
+      isObject && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-md mt-2 pl-8", children: Object.entries(value).map(([detailKey, detailValue]) => {
+        if (typeof detailValue !== "number") return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "dl",
+          {
+            className: "grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 justify-between text-neutral3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("dt", { children: detailKeyLabels[detailKey] || detailKey }),
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { children: detailValue })
+            ]
+          },
+          detailKey
+        );
+      }) })
+    ] }, key);
+  }) });
+}
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  toggleChildren,
+  expandAllDescendants,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end h-full px-1.5", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": isSelected
+      }),
+      children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+          allDescendantsExpanded ? totalDescendants : numOfChildren,
+          " ",
+          isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+        ] }),
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+          totalDescendants,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
+        ] })
+      ] }) : null
+    }
+  );
+}
+function ExpandButton({ onClick, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[0.1rem] text-ui-xs text-neutral5 border border-border1 pl-1.5 pr-0.5 rounded-md transition-all",
+        "hover:text-yellow-500",
+        "[&>svg]:shrink-0 [&>svg]:opacity-80 [&>svg]:w-[0.85rem] [&>svg]:h-[0.85rem] [&>svg]:transition-all"
+      ),
+      children
+    }
+  ) });
+}
+
+function TimelineStructureSign({ isLastChild }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "w-[0.5rem] h-[1.8rem] relative opacity-100 shrink-0",
+        'after:content-[""] after:absolute after:left-[-1px] after:top-0 after:bottom-0 after:w-[0px] after:border-l-[1px] after:border-neutral3 after:border-dashed ',
+        'before:content-[""] before:absolute before:left-0 before:top-[50%] before:w-full before:h-[0px] before:border-b-[1px] before:border-neutral3 before:border-dashed',
+        {
+          "after:bottom-[50%]": isLastChild
+        }
+      )
+    }
+  );
+}
+
+function TimelineNameCol({
+  span,
+  spanUI: _spanUI,
+  isFaded,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  hasChildren: _hasChildren,
+  isRootSpan,
+  isExpanded: _isExpanded
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-span-id": span.id,
+      "aria-label": `View details for span ${span.name}`,
+      className: cn("rounded-md flex opacity-80 min-h-8 items-center rounded-l-lg", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": selectedSpanId === span.id
+      }),
+      style: { paddingLeft: `${depth * 1}rem` },
+      children: [
+        !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(TimelineStructureSign, { isLastChild }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onSpanClick?.(span.id),
+            className: cn(
+              "text-ui-sm flex items-center text-left gap-1.5 text-neutral6 w-full min-w-0 rounded-md h-full px-2 py-1 transition-colors",
+              "[&>svg]:transition-all [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:ml-auto",
+              "hover:bg-surface4 [&:hover>svg]:opacity-60",
+              "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: span.name })
+          }
+        )
+      ]
+    }
+  );
+}
+
+function TimelineTimingCol({
+  span,
+  selectedSpanId,
+  isFaded,
+  overallLatency,
+  overallStartTime,
+  color,
+  chartWidth = "default"
+}) {
+  const percentageSpanLatency = overallLatency ? Math.ceil(span.latency / overallLatency * 100) : 0;
+  const overallStartTimeDate = overallStartTime ? new Date(overallStartTime) : null;
+  const spanStartTimeDate = span.startTime ? new Date(span.startTime) : null;
+  const spanStartTimeShift = spanStartTimeDate && overallStartTimeDate ? spanStartTimeDate.getTime() - overallStartTimeDate.getTime() : 0;
+  const percentageSpanStartTime = overallLatency && Math.floor(spanStartTimeShift / overallLatency * 100);
+  return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.Trigger,
+      {
+        className: cn(
+          "h-8 p-1 grid grid-cols-[1fr_auto] gap-2 items-center cursor-help pr-2 rounded-r-md",
+          chartWidth === "wide" ? "min-w-72" : "min-w-32",
+          "[&:hover>div]:bg-surface5",
+          {
+            "opacity-30 [&:hover]:opacity-60": isFaded,
+            "bg-surface4": selectedSpanId === span.id
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full p-1.5 rounded-md bg-surface4 transition-colors duration-1000"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-1.5 rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("bg-neutral1 absolute rounded-sm h-1.5 top-0"),
+              style: {
+                width: percentageSpanLatency ? `${percentageSpanLatency}%` : "2px",
+                left: `${percentageSpanStartTime || 0}%`,
+                backgroundColor: color
+              }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end text-neutral3 text-ui-xs"), children: [
+            (span.latency / 1e3).toFixed(3),
+            " s"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.Content,
+      {
+        className: "z-50 w-auto max-w-100 rounded-md bg-surface4 p-2 px-4 pr-6 text-ui-sm text-neutral5 border border-border1",
+        sideOffset: 5,
+        side: "top",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-ui-sm flex items-center gap-2 mb-2 mt-1"), children: "Span Timing" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Latency" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
+              span.latency,
+              " ms"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started at" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended at" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
+              spanStartTimeShift,
+              "ms"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function computeTraceStatus(span) {
+  if (span.error != null) return "error" /* ERROR */;
+  if (span.endedAt == null) return "running" /* RUNNING */;
+  return "success" /* SUCCESS */;
+}
+function TraceKeysAndValues({ rootSpan, numOfCol = 2, className }) {
+  const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;
+  const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;
+  const status = computeTraceStatus(rootSpan);
+  const statusLabel = status === "error" /* ERROR */ ? "ERROR" : status === "running" /* RUNNING */ ? "RUNNING" : "SUCCESS";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { numOfCol, className, children: [
+    rootSpan.entityId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Entity Id" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: rootSpan.entityName || rootSpan.entityId })
+    ] }),
+    rootSpan.entityType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Entity Type" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: rootSpan.entityType })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Status" }),
+    /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: statusLabel }),
+    startedAt && endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Duration" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: `${(endedAt.getTime() - startedAt.getTime()).toLocaleString()}ms` })
+    ] }),
+    startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started at" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: dateFns.format(startedAt, "MMM dd, h:mm:ss.SSS aaa") })
+    ] }),
+    endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended at" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: dateFns.format(endedAt, "MMM dd, h:mm:ss.SSS aaa") })
+    ] })
+  ] });
+}
+
+function getSpanDescendantIds(span) {
+  if (!span.spans || span.spans.length === 0) {
+    return [];
+  }
+  const descendantIds = [];
+  span.spans.forEach((childSpan) => {
+    descendantIds.push(childSpan.id);
+    descendantIds.push(...getSpanDescendantIds(childSpan));
+  });
+  return descendantIds;
+}
+function getAllSpanIds(spans) {
+  const ids = [];
+  for (const span of spans) {
+    ids.push(span.id);
+    ids.push(...getSpanDescendantIds(span));
+  }
+  return ids;
+}
+
+function TraceTimelineSpan({
+  span,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  overallLatency,
+  overallStartTime,
+  fadedTypes,
+  searchPhrase,
+  featuredSpanIds,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  chartWidth
+}) {
+  const hasChildren = span.spans && span.spans.length > 0;
+  const numOfChildren = span.spans ? span.spans.length : 0;
+  const allDescendantIds = getSpanDescendantIds(span);
+  const totalDescendants = allDescendantIds.length;
+  const isRootSpan = depth === 0;
+  const spanUI = getSpanTypeUi(span?.type);
+  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;
+  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;
+  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || "") : false;
+  const isFaded = isFadedByType || isFadedBySearch;
+  React.useEffect(() => {
+    if (!featuredSpanIds || allDescendantIds.length === 0) return;
+    if (isExpanded) return;
+    const hasFeaturedDescendant = allDescendantIds.some((id) => featuredSpanIds.includes(id));
+    if (hasFeaturedDescendant && setExpandedSpanIds) {
+      setExpandedSpanIds((prev) => !prev || prev.includes(span.id) ? prev ?? [span.id] : [...prev, span.id]);
+    }
+  }, [featuredSpanIds, allDescendantIds]);
+  const toggleChildren = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
+      return isExpanded ? prev.filter((id) => !idsToRemove.has(id)) : [...prev, span.id];
+    });
+  };
+  const expandAllDescendants = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
+    });
+  };
+  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineNameCol,
+      {
+        span,
+        spanUI,
+        isFaded,
+        depth,
+        onSpanClick,
+        selectedSpanId,
+        isLastChild,
+        hasChildren,
+        isRootSpan,
+        isExpanded
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineExpandCol,
+      {
+        isSelected: selectedSpanId === span.id,
+        isFaded,
+        isExpanded,
+        toggleChildren,
+        expandAllDescendants,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineTimingCol,
+      {
+        span,
+        selectedSpanId,
+        isFaded,
+        overallLatency,
+        overallStartTime,
+        color: spanUI?.color,
+        chartWidth
+      }
+    ),
+    hasChildren && isExpanded && span.spans?.map((childSpan, idx, array) => {
+      const isLast = idx === array.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TraceTimelineSpan,
+        {
+          span: childSpan,
+          depth: depth + 1,
+          onSpanClick,
+          selectedSpanId,
+          isLastChild: isLast,
+          overallLatency,
+          overallStartTime,
+          fadedTypes,
+          searchPhrase,
+          expandedSpanIds,
+          setExpandedSpanIds,
+          featuredSpanIds,
+          chartWidth
+        },
+        childSpan.id
+      );
+    })
+  ] });
+}
+
+function TraceTimeline({
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  fadedTypes,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  featuredSpanIds,
+  chartWidth = "default"
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const usedSpanTypes = React.useMemo(() => {
+    const collectTypes = (spans) => {
+      const types2 = /* @__PURE__ */ new Set();
+      for (const span of spans) {
+        const prefix = span.type?.toLowerCase().split("_")[0];
+        if (prefix) types2.add(prefix);
+        if (span.spans) {
+          for (const t of collectTypes(span.spans)) types2.add(t);
+        }
+      }
+      return types2;
+    };
+    const types = collectTypes(hierarchicalSpans);
+    const hasOther = [...types].some((t) => !spanTypePrefixes.includes(t));
+    const known = spanTypePrefixes.filter((p) => p !== "other" && types.has(p));
+    if (hasOther) known.push("other");
+    return known;
+  }, [hierarchicalSpans]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    usedSpanTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 px-2 py-1.5 justify-end", children: usedSpanTypes.map((type) => {
+      const spanUI = getSpanTypeUi(type);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-ui-sm text-neutral3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-block w-1.5 h-1.5 rounded-full shrink-0",
+            style: { backgroundColor: spanUI?.color }
+          }
+        ),
+        spanUI?.label || type
+      ] }, type);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1", children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
+      TraceTimelineSpan,
+      {
+        span,
+        onSpanClick,
+        selectedSpanId,
+        overallLatency,
+        overallStartTime,
+        fadedTypes,
+        featuredSpanIds,
+        expandedSpanIds,
+        setExpandedSpanIds,
+        chartWidth
+      },
+      span.id
+    )) })
+  ] }) });
+}
+
+function TracesToolbar({
+  onClear,
+  onRemoveAll,
+  onSave,
+  onRemoveSaved,
+  isLoading,
+  filterFields,
+  filterTokens,
+  onFilterTokensChange,
+  autoFocusFilterFieldId
+}) {
+  const hasActiveFilters = filterTokens.length > 0;
+  const hasNonDefaultFilter = filterTokens.some((token) => isNonDefaultFilter$1(token, filterFields));
+  return (
+    // 1fr | auto — pills wrap in the first column; Clear stays pinned to the
+    // top of the second column regardless of how many pill rows render.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-[1fr_auto] gap-3 items-start "), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PropertyFilterApplied,
+        {
+          fields: filterFields,
+          tokens: filterTokens,
+          onTokensChange: onFilterTokensChange,
+          disabled: isLoading,
+          autoFocusFieldId: autoFocusFilterFieldId
+        }
+      ),
+      hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
+        PropertyFilterActions,
+        {
+          disabled: isLoading,
+          onClear: hasNonDefaultFilter ? onClear : void 0,
+          onRemoveAll,
+          onSave,
+          onRemoveSaved
+        }
+      )
+    ] })
+  );
+}
+function isNonDefaultFilter$1(token, fields) {
+  const field = fields.find((f) => f.id === token.fieldId);
+  if (!field) return false;
+  if (field.kind === "text") {
+    return typeof token.value === "string" && token.value.trim() !== "";
+  }
+  if (field.kind === "pick-multi") {
+    if (field.multi) return Array.isArray(token.value) && token.value.length > 0;
+    return typeof token.value === "string" && token.value !== "" && token.value !== "Any";
+  }
+  if (field.kind === "multi-select") {
+    return Array.isArray(token.value) && token.value.length > 0;
+  }
+  return false;
+}
+
+function TraceDataPanelView({
+  traceId,
+  spans,
+  isLoading,
+  onClose,
+  onSpanSelect,
+  onEvaluateTrace,
+  onSaveAsDatasetItem,
+  initialSpanId,
+  onPrevious,
+  onNext,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  placement,
+  timelineChartWidth = "default",
+  LinkComponent,
+  traceHref
+}) {
+  const isOnTracePage = placement === "trace-page";
+  const [internalCollapsed, setInternalCollapsed] = React.useState(false);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
+  const contentRef = React.useRef(null);
+  const [selectedSpanId, setSelectedSpanId] = React.useState(initialSpanId ?? void 0);
+  React.useEffect(() => {
+    if (!initialSpanId) {
+      setSelectedSpanId(void 0);
+      onSpanSelect?.(void 0);
+      return;
+    }
+    if (!spans) return;
+    const found = spans.find((s) => s.spanId === initialSpanId);
+    if (found) {
+      setSelectedSpanId(initialSpanId);
+      onSpanSelect?.(initialSpanId);
+    } else {
+      setSelectedSpanId(void 0);
+      onSpanSelect?.(void 0);
+    }
+  }, [initialSpanId, spans]);
+  React.useEffect(() => {
+    if (!selectedSpanId || !contentRef.current) return;
+    const el = contentRef.current.querySelector(`[data-span-id="${selectedSpanId}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedSpanId]);
+  const hierarchicalSpans = React.useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = React.useState([]);
+  React.useEffect(() => {
+    if (hierarchicalSpans.length > 0) {
+      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
+    }
+  }, [hierarchicalSpans]);
+  const rootSpan = React.useMemo(() => spans?.find((s) => s.parentSpanId == null), [spans]);
+  const handleSpanClick = (id) => {
+    const newId = selectedSpanId === id ? void 0 : id;
+    setSelectedSpanId(newId);
+    onSpanSelect?.(newId);
+  };
+  const showOpenTracePageLink = !isOnTracePage && LinkComponent && traceHref;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPanel, { collapsed, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxRuntime.jsx(DataPanel.Heading, { children: "Trace Timeline" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataPanel.Heading, { children: [
+        "Trace ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          truncateString(traceId, 12)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonWithTooltip,
+          {
+            size: "md",
+            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            onClick: () => setCollapsed(!collapsed),
+            children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous trace",
+            nextLabel: "Next trace"
+          }
+        ),
+        showOpenTracePageLink && /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonWithTooltip,
+          {
+            as: LinkComponent,
+            href: traceHref,
+            size: "md",
+            tooltipContent: "Open trace page",
+            "aria-label": "Open trace page",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }) }),
+    !collapsed && (isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DataPanel.LoadingData, { children: "Loading trace..." }) : hierarchicalSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : /* @__PURE__ */ jsxRuntime.jsxs(DataPanel.Content, { ref: contentRef, children: [
+      !isOnTracePage && rootSpan && /* @__PURE__ */ jsxRuntime.jsx(TraceKeysAndValues, { rootSpan, className: "mb-6" }),
+      !isOnTracePage && (onEvaluateTrace || onSaveAsDatasetItem) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex justify-between items-center gap-4", children: [
+        onEvaluateTrace && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", onClick: onEvaluateTrace, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}) }),
+          "Evaluate Trace"
+        ] }),
+        onSaveAsDatasetItem && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", onClick: () => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId }), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SaveIcon, {}) }),
+          "Save as Dataset Item"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TraceTimeline,
+        {
+          hierarchicalSpans,
+          onSpanClick: handleSpanClick,
+          selectedSpanId,
+          expandedSpanIds,
+          setExpandedSpanIds,
+          chartWidth: timelineChartWidth
+        }
+      )
+    ] }))
+  ] });
+}
+
+function getInputPreview(input, maxLength = 100) {
+  if (input == null) return "";
+  const messageArray = Array.isArray(input) ? input : input && typeof input === "object" && !Array.isArray(input) && Array.isArray(input.messages) ? input.messages : null;
+  if (messageArray) {
+    const messages = messageArray;
+    const userMessages = messages.filter((m) => m?.role === "user").map((m) => {
+      if (typeof m.content === "string") return m.content;
+      if (Array.isArray(m.content)) {
+        return m.content.map((part) => {
+          if (typeof part === "string") return part;
+          if (part?.type === "text" && typeof part.text === "string") return part.text;
+          return "";
+        }).filter(Boolean).join(" ");
+      }
+      return "";
+    }).filter(Boolean);
+    const joined = userMessages.join(" | ");
+    if (joined.length > maxLength) {
+      return joined.slice(0, maxLength) + "…";
+    }
+    return joined;
+  }
+  if (typeof input === "string") {
+    if (input.length > maxLength) {
+      return input.slice(0, maxLength) + "…";
+    }
+    return input;
+  }
+  const str = JSON.stringify(input);
+  if (str.length > maxLength) {
+    return str.slice(0, maxLength) + "…";
+  }
+  return str;
+}
+function isTokenLimitExceeded(span) {
+  return span?.attributes?.finishReason === "length";
+}
+function getTokenLimitMessage(span) {
+  const usage = span?.attributes?.usage;
+  if (!usage) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.`;
+  }
+  const inputTokens = usage.inputTokens ?? 0;
+  const outputTokens = usage.outputTokens ?? 0;
+  const totalTokens = usage.totalTokens ?? inputTokens + outputTokens;
+  if (inputTokens > 0 || outputTokens > 0) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.
+
+Token usage: ${inputTokens} input + ${outputTokens} output = ${totalTokens} total`;
+  }
+  return `The model stopped generating because it reached the maximum token limit (${totalTokens} tokens). The response was truncated and may be incomplete.`;
+}
+
+function buildDialogTitle(sectionTitle, icon, span) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>svg]:size-3.5", children: [
+      icon,
+      sectionTitle
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "› Span ",
+      /* @__PURE__ */ jsxRuntime.jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.spanId
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "› Trace ",
+      /* @__PURE__ */ jsxRuntime.jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.traceId
+      ] })
+    ] })
+  ] });
+}
+function SpanDataPanelView({
+  traceId,
+  spanId,
+  span,
+  isLoading,
+  onClose,
+  onPrevious,
+  onNext,
+  activeTab,
+  onTabChange,
+  scoringTabSlot,
+  scoringTabBadge
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous span",
+            nextLabel: "Next span"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DataPanel.LoadingData, { children: "Loading span details..." }) : !span ? /* @__PURE__ */ jsxRuntime.jsx(DataPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxRuntime.jsx(
+      SpanDataPanelContent,
+      {
+        span,
+        traceId,
+        spanId,
+        activeTab,
+        onTabChange,
+        scoringTabSlot,
+        scoringTabBadge
+      }
+    )
+  ] });
+}
+function SpanDataPanelContent({
+  span,
+  traceId,
+  spanId,
+  activeTab,
+  onTabChange,
+  scoringTabSlot,
+  scoringTabBadge
+}) {
+  const durationMs = span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
+  const usage = span.attributes?.usage;
+  const detailsBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isTokenLimitExceeded(span) && /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", className: "mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Token Limit Exceeded" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { as: "p", children: getTokenLimitMessage(span) })
+    ] }),
+    usage && /* @__PURE__ */ jsxRuntime.jsx(SpanTokenUsage, { usage, className: "mb-3" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
+      span.parentSpanId == null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        span.traceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
+        ] }),
+        span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Tags" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })
+        ] }),
+        span.runId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Run Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Run Id to clipboard", copyValue: span.runId, children: span.runId })
+        ] }),
+        span.threadId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Thread Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Thread Id to clipboard", copyValue: span.threadId, children: span.threadId })
+        ] }),
+        span.sessionId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Session Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Session Id to clipboard",
+              copyValue: span.sessionId,
+              children: span.sessionId
+            }
+          )
+        ] }),
+        span.requestId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Request Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Request Id to clipboard",
+              copyValue: span.requestId,
+              children: span.requestId
+            }
+          )
+        ] }),
+        span.resourceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Resource Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Resource Id to clipboard",
+              copyValue: span.resourceId,
+              children: span.resourceId
+            }
+          )
+        ] }),
+        span.userId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "User Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy User Id to clipboard", copyValue: span.userId, children: span.userId })
+        ] }),
+        span.organizationId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Organization Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Organization Id to clipboard",
+              copyValue: span.organizationId,
+              children: span.organizationId
+            }
+          )
+        ] }),
+        span.experimentId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Experiment Id" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Experiment Id to clipboard",
+              copyValue: span.experimentId,
+              children: span.experimentId
+            }
+          )
+        ] })
+      ] }),
+      span.name && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.name })
+      ] }),
+      span.spanType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.spanType })
+      ] }),
+      span.startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: dateFns.format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      span.endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: dateFns.format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      durationMs != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Duration" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 mt-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Input",
+          dialogTitle: buildDialogTitle("Input", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Output",
+          dialogTitle: buildDialogTitle("Output", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Metadata",
+          dialogTitle: buildDialogTitle("Metadata", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Attributes",
+          dialogTitle: buildDialogTitle("Attributes", /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+  if (!scoringTabSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataPanel.Content, { children: detailsBody });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DataPanel.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tab, { value: "scoring", children: [
+        "Scoring ",
+        scoringTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "(",
+          scoringTabBadge,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "details", children: detailsBody }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "scoring", children: scoringTabSlot({ span, traceId, spanId }) })
+  ] }) });
+}
+
+const KV$1 = DataDetailsPanel.KeyValueList;
+function SpanDetailsView({ spanId, span, isLoading, onClose }) {
+  const durationMs = span?.startedAt && span?.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.LoadingData, { children: "Loading span..." }) : !span ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(KV$1, { children: [
+        span.spanType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Started" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: dateFns.format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: dateFns.format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Input",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Output",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Metadata",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Attributes",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+}
+
+function TraceDetailsView({
+  traceId,
+  spans,
+  isLoading,
+  onClose,
+  onSpanSelect,
+  selectedSpanId
+}) {
+  const hierarchicalSpans = React.useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = React.useState([]);
+  React.useEffect(() => {
+    if (hierarchicalSpans.length > 0) {
+      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
+    }
+  }, [hierarchicalSpans]);
+  const handleSpanClick = (id) => {
+    onSpanSelect?.(selectedSpanId === id ? void 0 : id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Trace ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          traceId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.LoadingData, { children: "Loading trace..." }) : hierarchicalSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.NoData, { children: "No spans found for this trace." }) : /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TraceTimeline,
+      {
+        hierarchicalSpans,
+        onSpanClick: handleSpanClick,
+        selectedSpanId: selectedSpanId ?? void 0,
+        expandedSpanIds,
+        setExpandedSpanIds
+      }
+    ) })
+  ] });
+}
+
+function TracesLayout({
+  listSlot,
+  tracePanelSlot,
+  spanPanelSlot,
+  scorePanelSlot,
+  traceCollapsed
+}) {
+  const hasSidePanel = !!tracePanelSlot;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "grid max-h-full min-h-0 gap-4 items-start ",
+        hasSidePanel ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"
+      ),
+      children: [
+        listSlot,
+        hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 max-h-full overflow-auto",
+              scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+            ),
+            children: [
+              tracePanelSlot,
+              spanPanelSlot,
+              scorePanelSlot
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+function groupTracesByThread(traces) {
+  const threadMap = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const trace of traces) {
+    if (trace.threadId) {
+      const existing = threadMap.get(trace.threadId);
+      if (existing) {
+        existing.push(trace);
+      } else {
+        threadMap.set(trace.threadId, [trace]);
+      }
+    } else {
+      ungrouped.push(trace);
+    }
+  }
+  const groups = Array.from(threadMap.entries()).map(([threadId, traces2]) => ({
+    threadId,
+    traces: traces2
+  }));
+  groups.sort((a, b) => {
+    const aLatest = Math.max(...a.traces.map((t) => new Date(t.createdAt).getTime()));
+    const bLatest = Math.max(...b.traces.map((t) => new Date(t.createdAt).getTime()));
+    return bLatest - aLatest;
+  });
+  return { groups, ungrouped };
+}
+
+const COLUMNS$1 = "auto auto auto auto minmax(5rem,1fr) auto auto";
+function TracesListView({
+  traces,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  setEndOfListElement,
+  filtersApplied,
+  featuredTraceId,
+  onTraceClick,
+  groupByThread,
+  threadTitles
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListSkeleton, { columns: COLUMNS$1 });
+  }
+  const renderRows = (rows) => rows.map((trace) => {
+    const isFeatured = trace.traceId === featuredTraceId;
+    const displayDate = trace.startedAt ?? trace.createdAt;
+    const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      TracesDataList.RowButton,
+      {
+        onClick: () => onTraceClick(trace),
+        className: cn(isFeatured && "bg-surface4"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.IdCell, { traceId: trace.traceId }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.NameCell, { name: trace.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
+        ]
+      },
+      trace.traceId
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList, { columns: COLUMNS$1, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.Top, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "ID" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Date" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Name" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Input" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Entity" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Status" })
+    ] }),
+    traces.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      TracesDataList.NoMatch,
+      {
+        message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
+      }
+    ) : groupByThread ? (() => {
+      const { groups, ungrouped } = groupTracesByThread(traces);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: "Thread" }),
+            threadTitles?.[group.threadId] && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+              "'",
+              threadTitles[group.threadId],
+              "'"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+              "# ",
+              group.threadId
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+              "(",
+              group.traces.length,
+              ")"
+            ] })
+          ] }) }),
+          renderRows(group.traces)
+        ] }, group.threadId)),
+        ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2 uppercase", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No thread" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+              "(",
+              ungrouped.length,
+              ")"
+            ] })
+          ] }) }),
+          renderRows(ungrouped)
+        ] })
+      ] });
+    })() : renderRows(traces),
+    traces.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      TracesDataList.NextPageLoading,
+      {
+        isLoading: isFetchingNextPage,
+        hasMore: hasNextPage,
+        setEndOfListElement
+      }
+    )
+  ] });
+}
+
+function TracesErrorContent({ error, resource, errorTitle }) {
+  if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(SessionExpired, {});
+  if (is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(PermissionDenied, { resource });
+  const parsed = error instanceof Error ? parseError(error) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { title: errorTitle, message: parsed?.error ?? "Unknown error" });
+}
+
+const IMMUTABLE_CACHE_TIME$1 = 1e3 * 60 * 60 * 24 * 30;
+function useSpanDetail(traceId, spanId) {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["span-detail", traceId, spanId],
+    queryFn: async () => {
+      if (!traceId || !spanId) {
+        throw new Error("Trace ID and Span ID are required");
+      }
+      return client.getSpan(traceId, spanId);
+    },
+    enabled: !!traceId && !!spanId,
+    staleTime: (query) => {
+      const data = query.state.data;
+      if (data?.span?.endedAt) {
+        return IMMUTABLE_CACHE_TIME$1;
+      }
+      return 0;
+    }
+  });
+}
+
+const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
+function useTraceLightSpans(traceId) {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["trace-light-spans", traceId],
+    queryFn: async () => {
+      if (!traceId) {
+        throw new Error("Trace ID is required");
+      }
+      const res = await client.getTraceLight(traceId);
+      return res;
+    },
+    enabled: !!traceId,
+    staleTime: (query) => {
+      const data = query.state.data;
+      const isFinished = data?.spans.every((d) => Boolean(d.endedAt));
+      if (isFinished) {
+        return IMMUTABLE_CACHE_TIME;
+      }
+      return 0;
+    }
+  });
+}
+
+function useTraceSpans(traceId) {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["trace-spans", traceId],
+    queryFn: async () => {
+      if (!traceId) {
+        throw new Error("Trace ID is required");
+      }
+      const res = await client.getTrace(traceId);
+      return res;
+    },
+    enabled: !!traceId
+  });
+}
+
+const fetchTracesFn = async ({
+  client,
+  page,
+  perPage,
+  filters
+}) => {
+  return client.listTraces({
+    pagination: {
+      page,
+      perPage
+    },
+    filters
+  });
+};
+const TRACES_PER_PAGE = 25;
+function getTracesNextPageParam(lastPage, _allPages, lastPageParam) {
+  if (lastPage?.pagination?.hasMore) {
+    return lastPageParam + 1;
+  }
+  return void 0;
+}
+function selectUniqueTraces(data) {
+  const seen = /* @__PURE__ */ new Set();
+  const spans = data.pages.flatMap((page) => page.spans ?? []).filter((span) => {
+    if (seen.has(span.traceId)) return false;
+    seen.add(span.traceId);
+    return true;
+  });
+  const threadTitles = {};
+  for (const page of data.pages) {
+    if (page.threadTitles) {
+      Object.assign(threadTitles, page.threadTitles);
+    }
+  }
+  return { spans, threadTitles };
+}
+const useTraces = ({ filters }) => {
+  const client = react.useMastraClient();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = reactQuery.useInfiniteQuery({
+    queryKey: ["traces", filters],
+    queryFn: ({ pageParam }) => fetchTracesFn({
+      client,
+      page: pageParam,
+      perPage: TRACES_PER_PAGE,
+      filters
+    }),
+    initialPageParam: 0,
+    getNextPageParam: getTracesNextPageParam,
+    select: selectUniqueTraces,
+    placeholderData: reactQuery.keepPreviousData,
+    retry: false,
+    // Disable polling on 403 to prevent flickering
+    refetchInterval: (query2) => is403ForbiddenError(query2.state.error) ? false : 3e3
+  });
+  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  React.useEffect(() => {
+    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  return { ...query, setEndOfListElement };
+};
+
+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 ROOT_ENTITY_TYPES = {
+  AGENT: observability.EntityType.AGENT,
+  WORKFLOW: observability.EntityType.WORKFLOW_RUN,
+  SCORER: observability.EntityType.SCORER,
+  INGEST: observability.EntityType.RAG_INGESTION
+};
+const ROOT_ENTITY_TYPE_OPTIONS = [
+  { label: "Agent", entityType: ROOT_ENTITY_TYPES.AGENT },
+  { label: "Workflow", entityType: ROOT_ENTITY_TYPES.WORKFLOW },
+  { label: "Scorer", entityType: ROOT_ENTITY_TYPES.SCORER },
+  { label: "Ingest", entityType: ROOT_ENTITY_TYPES.INGEST }
+];
+const TRACE_STATUS_OPTIONS = [
+  { label: "Running", value: "running" },
+  { label: "Success", value: "success" },
+  { label: "Error", value: "error" }
+];
+const TRACE_SYNTHETIC_FILTER_FIELD_IDS = ["rootEntityType", "status"];
+const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
+const TRACE_STATUS_PARAM = "status";
+const TRACE_DATE_PRESET_PARAM = "datePreset";
+const TRACE_DATE_FROM_PARAM = "dateFrom";
+const TRACE_DATE_TO_PARAM = "dateTo";
+const TRACE_DATE_PRESET_VALUES = /* @__PURE__ */ new Set([
+  "all",
+  "last-24h",
+  "last-3d",
+  "last-7d",
+  "last-14d",
+  "last-30d",
+  "custom"
+]);
+const TRACE_PROPERTY_FILTER_PARAM_BY_FIELD = {
+  tags: "filterTags",
+  entityId: "filterEntityId",
+  entityName: "filterEntityName",
+  traceId: "filterTraceId",
+  runId: "filterRunId",
+  threadId: "filterThreadId",
+  sessionId: "filterSessionId",
+  requestId: "filterRequestId",
+  resourceId: "filterResourceId",
+  userId: "filterUserId",
+  organizationId: "filterOrganizationId",
+  serviceName: "filterServiceName",
+  environment: "filterEnvironment",
+  experimentId: "filterExperimentId"
+};
+const TRACE_PROPERTY_FILTER_FIELD_IDS = Object.keys(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD);
+const TRACE_STATUS_VALUES = /* @__PURE__ */ new Set(["running", "success", "error"]);
+const DEFAULT_TRACE_FILTERS_STORAGE_KEY = "mastra:traces:saved-filters";
+function saveTraceFiltersToStorage(params, storageKey = DEFAULT_TRACE_FILTERS_STORAGE_KEY) {
+  const serialized = getPreservedTraceFilterParams(params);
+  const preset = params.get(TRACE_DATE_PRESET_PARAM);
+  if (preset) serialized.set(TRACE_DATE_PRESET_PARAM, preset);
+  const from = params.get(TRACE_DATE_FROM_PARAM);
+  if (from) serialized.set(TRACE_DATE_FROM_PARAM, from);
+  const to = params.get(TRACE_DATE_TO_PARAM);
+  if (to) serialized.set(TRACE_DATE_TO_PARAM, to);
+  try {
+    localStorage.setItem(storageKey, serialized.toString());
+  } catch {
+  }
+}
+function clearSavedTraceFilters(storageKey = DEFAULT_TRACE_FILTERS_STORAGE_KEY) {
+  try {
+    localStorage.removeItem(storageKey);
+  } catch {
+  }
+}
+function loadTraceFiltersFromStorage(storageKey = DEFAULT_TRACE_FILTERS_STORAGE_KEY) {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = new URLSearchParams(raw);
+    return parsed.toString() ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function hasAnyTraceFilterParams(params) {
+  if (params.has(TRACE_DATE_PRESET_PARAM)) return true;
+  if (params.has(TRACE_DATE_FROM_PARAM)) return true;
+  if (params.has(TRACE_DATE_TO_PARAM)) return true;
+  if (params.has(TRACE_ROOT_ENTITY_TYPE_PARAM)) return true;
+  if (params.has(TRACE_STATUS_PARAM)) return true;
+  for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
+    if (params.has(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId])) return true;
+  }
+  return false;
+}
+function createTracePropertyFilterFields({
+  availableTags,
+  availableRootEntityNames,
+  availableServiceNames,
+  availableEnvironments,
+  loading
+}) {
+  const fields = [
+    {
+      id: "rootEntityType",
+      label: "Primitive Type",
+      kind: "pick-multi",
+      searchable: false,
+      options: ROOT_ENTITY_TYPE_OPTIONS.map((o) => ({ label: o.label, value: o.entityType })),
+      placeholder: "Choose entity type",
+      emptyText: "No entity types."
+    },
+    {
+      id: "entityName",
+      label: "Primitive Name",
+      kind: "pick-multi",
+      options: availableRootEntityNames.map((name) => ({ label: name, value: name })),
+      placeholder: "Choose entity names",
+      emptyText: "No entity names found.",
+      isLoading: loading?.entityNames
+    },
+    { id: "entityId", label: "Primitive ID", kind: "text" },
+    {
+      id: "status",
+      label: "Status",
+      kind: "pick-multi",
+      searchable: false,
+      options: TRACE_STATUS_OPTIONS.map((o) => ({ label: o.label, value: o.value })),
+      placeholder: "Choose status",
+      emptyText: "No statuses."
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      kind: "pick-multi",
+      multi: true,
+      options: availableTags.map((tag) => ({ label: tag, value: tag })),
+      placeholder: "Choose tags",
+      emptyText: "No tags found.",
+      isLoading: loading?.tags
+    },
+    {
+      id: "serviceName",
+      label: "Service Name",
+      kind: "pick-multi",
+      options: availableServiceNames.map((name) => ({ label: name, value: name })),
+      placeholder: "Choose service names",
+      emptyText: "No service names found.",
+      isLoading: loading?.serviceNames
+    },
+    {
+      id: "environment",
+      label: "Environment",
+      kind: "pick-multi",
+      options: availableEnvironments.map((env) => ({ label: env, value: env })),
+      placeholder: "Choose environments",
+      emptyText: "No environments found.",
+      isLoading: loading?.environments
+    },
+    { id: "traceId", label: "Trace ID", kind: "text" },
+    { id: "runId", label: "Run ID", kind: "text" },
+    { id: "threadId", label: "Thread ID", kind: "text" },
+    { id: "sessionId", label: "Session ID", kind: "text" },
+    { id: "requestId", label: "Request ID", kind: "text" },
+    { id: "resourceId", label: "Resource ID", kind: "text" },
+    { id: "userId", label: "User ID", kind: "text" },
+    { id: "organizationId", label: "Organization ID", kind: "text" },
+    { id: "experimentId", label: "Experiment ID", kind: "text" }
+  ];
+  const byLabel = (a, b) => a.label.localeCompare(b.label);
+  const pickMulti = fields.filter((f) => f.kind === "pick-multi").sort(byLabel);
+  const text = fields.filter((f) => f.kind === "text").sort(byLabel);
+  return [...pickMulti, ...text];
+}
+function getTracePropertyFilterTokens(searchParams) {
+  const tokens = [];
+  const paramToFieldId = /* @__PURE__ */ new Map([
+    [TRACE_ROOT_ENTITY_TYPE_PARAM, "rootEntityType"],
+    [TRACE_STATUS_PARAM, "status"]
+  ]);
+  for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
+    paramToFieldId.set(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId], fieldId);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const [paramName] of searchParams.entries()) {
+    const fieldId = paramToFieldId.get(paramName);
+    if (!fieldId || seen.has(fieldId)) continue;
+    seen.add(fieldId);
+    if (fieldId === "tags") {
+      const raw = searchParams.getAll(paramName);
+      if (raw.length === 0) continue;
+      tokens.push({ fieldId, value: raw.filter(Boolean) });
+      continue;
+    }
+    const value = searchParams.get(paramName);
+    if (value !== null) tokens.push({ fieldId, value });
+  }
+  return tokens;
+}
+function getPreservedTraceFilterParams(searchParams) {
+  const next = new URLSearchParams();
+  const rootEntityType = searchParams.get(TRACE_ROOT_ENTITY_TYPE_PARAM);
+  if (rootEntityType) next.set(TRACE_ROOT_ENTITY_TYPE_PARAM, rootEntityType);
+  const status = searchParams.get(TRACE_STATUS_PARAM);
+  if (status) next.set(TRACE_STATUS_PARAM, status);
+  for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
+    const param = TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId];
+    if (fieldId === "tags") {
+      for (const value2 of searchParams.getAll(param)) {
+        next.append(param, value2);
+      }
+      continue;
+    }
+    const value = searchParams.get(param);
+    if (value) {
+      next.set(param, value);
+    }
+  }
+  return next;
+}
+function applyTracePropertyFilterTokens(params, tokens) {
+  params.delete(TRACE_ROOT_ENTITY_TYPE_PARAM);
+  params.delete(TRACE_STATUS_PARAM);
+  for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
+    params.delete(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId]);
+  }
+  for (const token of tokens) {
+    if (token.fieldId === "rootEntityType" && typeof token.value === "string") {
+      params.set(TRACE_ROOT_ENTITY_TYPE_PARAM, token.value);
+      continue;
+    }
+    if (token.fieldId === "status" && typeof token.value === "string") {
+      params.set(TRACE_STATUS_PARAM, token.value);
+      continue;
+    }
+    const param = TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[token.fieldId];
+    if (!param) continue;
+    if (token.fieldId === "tags" && Array.isArray(token.value)) {
+      if (token.value.length === 0) {
+        params.append(param, "");
+      } else {
+        for (const value of token.value) {
+          params.append(param, value);
+        }
+      }
+      continue;
+    }
+    if (typeof token.value === "string") {
+      params.set(param, token.value.trim());
+    }
+  }
+}
+function buildTraceListFilters({
+  rootEntityType,
+  status,
+  dateFrom,
+  dateTo,
+  tokens
+}) {
+  const filters = {};
+  if (rootEntityType) {
+    filters.entityType = rootEntityType;
+  }
+  if (status) {
+    filters.status = status;
+  }
+  if (dateFrom) {
+    filters.startedAt = { start: dateFrom };
+  }
+  if (dateTo) {
+    filters.endedAt = { end: dateTo };
+  }
+  for (const token of tokens) {
+    if (token.fieldId === "tags") {
+      if (Array.isArray(token.value) && token.value.length > 0) {
+        filters.tags = token.value;
+      } else if (typeof token.value === "string" && token.value.trim()) {
+        filters.tags = [token.value.trim()];
+      }
+      continue;
+    }
+    if (typeof token.value !== "string") continue;
+    if (!token.value.trim()) continue;
+    if (token.value === "Any") continue;
+    switch (token.fieldId) {
+      case "entityId":
+        filters.entityId = token.value;
+        break;
+      case "entityName":
+        filters.entityName = token.value;
+        break;
+      case "traceId":
+        filters.traceId = token.value;
+        break;
+      case "runId":
+        filters.runId = token.value;
+        break;
+      case "threadId":
+        filters.threadId = token.value;
+        break;
+      case "sessionId":
+        filters.sessionId = token.value;
+        break;
+      case "requestId":
+        filters.requestId = token.value;
+        break;
+      case "resourceId":
+        filters.resourceId = token.value;
+        break;
+      case "userId":
+        filters.userId = token.value;
+        break;
+      case "organizationId":
+        filters.organizationId = token.value;
+        break;
+      case "serviceName":
+        filters.serviceName = token.value;
+        break;
+      case "environment":
+        filters.environment = token.value;
+        break;
+      case "experimentId":
+        filters.experimentId = token.value;
+        break;
+    }
+  }
+  return filters;
+}
+function neutralizeFilterTokens(filterFields, filterTokens) {
+  return filterTokens.map((token) => {
+    const field = filterFields.find((f) => f.id === token.fieldId);
+    if (!field) return token;
+    if (field.kind === "text") return { fieldId: token.fieldId, value: "" };
+    if (field.kind === "pick-multi") {
+      return field.multi ? { fieldId: token.fieldId, value: [] } : { fieldId: token.fieldId, value: "Any" };
+    }
+    return token;
+  });
+}
+
+const useEntityNames = ({ entityType, rootOnly = false } = {}) => {
+  const client = react.useMastraClient();
+  const queryKey = entityType ? ["observability-entity-names", "by-type", entityType] : ["observability-entity-names", "all", rootOnly ? "root-only" : "all-types"];
+  return reactQuery.useQuery({
+    queryKey,
+    queryFn: async () => {
+      try {
+        if (entityType) {
+          return await client.getEntityNames({ entityType });
+        }
+        if (!rootOnly) {
+          return await client.getEntityNames();
+        }
+        const responses = await Promise.all(
+          ROOT_ENTITY_TYPE_OPTIONS.map((option) => client.getEntityNames({ entityType: option.entityType }))
+        );
+        return {
+          names: Array.from(new Set(responses.flatMap((response) => response?.names ?? []))).sort()
+        };
+      } catch {
+        return { names: [] };
+      }
+    },
+    select: (data) => data?.names ?? [],
+    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
+  });
+};
+
+function useTraceSpanNavigation(lightSpans, featuredSpanId, onSpanChange) {
+  const timelineSpanIds = React.useMemo(() => getAllSpanIds(formatHierarchicalSpans(lightSpans ?? [])), [lightSpans]);
+  const featuredSpanIdx = featuredSpanId ? timelineSpanIds.indexOf(featuredSpanId) : -1;
+  const handlePreviousSpan = featuredSpanIdx > 0 ? () => onSpanChange(timelineSpanIds[featuredSpanIdx - 1]) : void 0;
+  const handleNextSpan = featuredSpanIdx >= 0 && featuredSpanIdx < timelineSpanIds.length - 1 ? () => onSpanChange(timelineSpanIds[featuredSpanIdx + 1]) : void 0;
+  return { handlePreviousSpan, handleNextSpan, timelineSpanIds };
+}
+
+function useTraceListNavigation(traces, featuredTraceId, onTraceChange) {
+  const featuredTraceIdx = React.useMemo(
+    () => featuredTraceId ? traces.findIndex((t) => t.traceId === featuredTraceId) : -1,
+    [traces, featuredTraceId]
+  );
+  const handlePreviousTrace = featuredTraceIdx > 0 ? () => onTraceChange(traces[featuredTraceIdx - 1].traceId) : void 0;
+  const handleNextTrace = featuredTraceIdx >= 0 && featuredTraceIdx < traces.length - 1 ? () => onTraceChange(traces[featuredTraceIdx + 1].traceId) : void 0;
+  return { featuredTraceIdx, handlePreviousTrace, handleNextTrace };
+}
+
+const TRACE_ID_PARAM = "traceId";
+const SPAN_ID_PARAM = "spanId";
+const TAB_PARAM = "tab";
+const SCORE_ID_PARAM = "scoreId";
+const DAY_MS$1 = 24 * 60 * 60 * 1e3;
+const PRESET_MS$1 = {
+  "last-24h": DAY_MS$1,
+  "last-3d": 3 * DAY_MS$1,
+  "last-7d": 7 * DAY_MS$1,
+  "last-14d": 14 * DAY_MS$1,
+  "last-30d": 30 * DAY_MS$1
+};
+function clearSelectionParams$1(params) {
+  params.delete(TRACE_ID_PARAM);
+  params.delete(SPAN_ID_PARAM);
+  params.delete(TAB_PARAM);
+  params.delete(SCORE_ID_PARAM);
+}
+function useTraceUrlState(searchParams, setSearchParams, options) {
+  const { onRemoveAll } = options ?? {};
+  const datePreset = React.useMemo(() => {
+    const value = searchParams.get(TRACE_DATE_PRESET_PARAM);
+    return value && TRACE_DATE_PRESET_VALUES.has(value) ? value : "last-24h";
+  }, [searchParams]);
+  const dateFromParamRaw = searchParams.get(TRACE_DATE_FROM_PARAM);
+  const dateToParamRaw = searchParams.get(TRACE_DATE_TO_PARAM);
+  const selectedDateFrom = React.useMemo(() => {
+    if (datePreset === "custom") {
+      if (!dateFromParamRaw) return void 0;
+      const parsed = new Date(dateFromParamRaw);
+      return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+    }
+    if (datePreset === "all") return void 0;
+    const ms = PRESET_MS$1[datePreset];
+    return ms ? new Date(Date.now() - ms) : void 0;
+  }, [datePreset, dateFromParamRaw]);
+  const selectedDateTo = React.useMemo(() => {
+    if (datePreset !== "custom" || !dateToParamRaw) return void 0;
+    const parsed = new Date(dateToParamRaw);
+    return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+  }, [datePreset, dateToParamRaw]);
+  const datePresetRef = React.useRef(datePreset);
+  datePresetRef.current = datePreset;
+  const traceIdParam = searchParams.get(TRACE_ID_PARAM) || void 0;
+  const spanIdParam = searchParams.get(SPAN_ID_PARAM) || void 0;
+  const tabParam = searchParams.get(TAB_PARAM);
+  const spanTabParam = tabParam === "scoring" ? "scoring" : tabParam === "details" ? "details" : void 0;
+  const scoreIdParam = searchParams.get(SCORE_ID_PARAM) || void 0;
+  const selectedEntityOption = React.useMemo(
+    () => ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(TRACE_ROOT_ENTITY_TYPE_PARAM)),
+    [searchParams]
+  );
+  const selectedStatus = React.useMemo(() => {
+    const value = searchParams.get(TRACE_STATUS_PARAM);
+    return value && TRACE_STATUS_VALUES.has(value) ? value : void 0;
+  }, [searchParams]);
+  const filterTokens = React.useMemo(() => getTracePropertyFilterTokens(searchParams), [searchParams]);
+  const handleTraceClick = React.useCallback(
+    (traceId) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (traceId) {
+            next.set(TRACE_ID_PARAM, traceId);
+          } else {
+            next.delete(TRACE_ID_PARAM);
+          }
+          next.delete(SPAN_ID_PARAM);
+          next.delete(TAB_PARAM);
+          next.delete(SCORE_ID_PARAM);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleTraceClose = React.useCallback(() => handleTraceClick(""), [handleTraceClick]);
+  const handleSpanChange = React.useCallback(
+    (spanId) => {
+      const currentSpanId = searchParams.get(SPAN_ID_PARAM) || null;
+      if (spanId === currentSpanId) return;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (spanId) {
+            next.set(SPAN_ID_PARAM, spanId);
+          } else {
+            next.delete(SPAN_ID_PARAM);
+          }
+          next.delete(TAB_PARAM);
+          next.delete(SCORE_ID_PARAM);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [searchParams, setSearchParams]
+  );
+  const handleSpanClose = React.useCallback(() => handleSpanChange(null), [handleSpanChange]);
+  const handleSpanTabChange = React.useCallback(
+    (tab) => {
+      const currentTab = searchParams.get(TAB_PARAM) || null;
+      if (tab === currentTab) return;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (tab && tab !== "details") {
+            next.set(TAB_PARAM, tab);
+          } else {
+            next.delete(TAB_PARAM);
+          }
+          next.delete(SCORE_ID_PARAM);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [searchParams, setSearchParams]
+  );
+  const handleScoreChange = React.useCallback(
+    (scoreId) => {
+      const currentScoreId = searchParams.get(SCORE_ID_PARAM) || null;
+      if (scoreId === currentScoreId) return;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (scoreId) {
+            next.set(SCORE_ID_PARAM, scoreId);
+          } else {
+            next.delete(SCORE_ID_PARAM);
+          }
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [searchParams, setSearchParams]
+  );
+  const applyFilterTokens = React.useCallback(
+    (tokens) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          applyTracePropertyFilterTokens(next, tokens);
+          clearSelectionParams$1(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleFilterTokensChange = applyFilterTokens;
+  const handleDateChange = React.useCallback(
+    (value, type) => {
+      if (datePresetRef.current !== "custom") return;
+      const param = type === "from" ? TRACE_DATE_FROM_PARAM : TRACE_DATE_TO_PARAM;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (value) {
+            next.set(param, value.toISOString());
+          } else {
+            next.delete(param);
+          }
+          clearSelectionParams$1(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleDatePresetChange = React.useCallback(
+    (preset) => {
+      datePresetRef.current = preset;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (preset === "last-24h") {
+            next.delete(TRACE_DATE_PRESET_PARAM);
+            next.delete(TRACE_DATE_FROM_PARAM);
+            next.delete(TRACE_DATE_TO_PARAM);
+          } else if (preset === "custom") {
+            next.set(TRACE_DATE_PRESET_PARAM, "custom");
+          } else {
+            next.set(TRACE_DATE_PRESET_PARAM, preset);
+            next.delete(TRACE_DATE_FROM_PARAM);
+            next.delete(TRACE_DATE_TO_PARAM);
+          }
+          clearSelectionParams$1(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleRemoveAll = React.useCallback(() => {
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        next.delete(TRACE_ROOT_ENTITY_TYPE_PARAM);
+        next.delete(TRACE_STATUS_PARAM);
+        for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
+          next.delete(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId]);
+        }
+        clearSelectionParams$1(next);
+        return next;
+      },
+      { replace: true }
+    );
+    onRemoveAll?.();
+  }, [setSearchParams, onRemoveAll]);
+  return {
+    searchParams,
+    setSearchParams,
+    datePreset,
+    selectedDateFrom,
+    selectedDateTo,
+    datePresetRef,
+    traceIdParam,
+    spanIdParam,
+    spanTabParam,
+    scoreIdParam,
+    selectedEntityOption,
+    selectedStatus,
+    filterTokens,
+    handleTraceClick,
+    handleTraceClose,
+    handleSpanChange,
+    handleSpanClose,
+    handleSpanTabChange,
+    handleScoreChange,
+    handleFilterTokensChange,
+    handleDateChange,
+    handleDatePresetChange,
+    handleRemoveAll,
+    applyFilterTokens
+  };
+}
+
+const DEFAULT_SAVED_MESSAGE$1 = "Trace filter settings saved.";
+const DEFAULT_CLEARED_MESSAGE$1 = "Trace filter settings cleared.";
+function useTraceFilterPersistence(searchParams, setSearchParams, options) {
+  const { storageKey, messages, skipHydration } = options ?? {};
+  const [hasSavedFilters, setHasSavedFilters] = React.useState(() => loadTraceFiltersFromStorage(storageKey) !== null);
+  const handleSave = React.useCallback(() => {
+    saveTraceFiltersToStorage(searchParams, storageKey);
+    setHasSavedFilters(true);
+    const text = messages?.saved ?? DEFAULT_SAVED_MESSAGE$1;
+    if (text !== false) toast.success(text);
+  }, [searchParams, storageKey, messages?.saved]);
+  const handleRemoveSaved = React.useCallback(() => {
+    clearSavedTraceFilters(storageKey);
+    setHasSavedFilters(false);
+    const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE$1;
+    if (text !== false) toast.success(text);
+  }, [storageKey, messages?.cleared]);
+  const hydratedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (skipHydration) return;
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    if (hasAnyTraceFilterParams(searchParams)) return;
+    const saved = loadTraceFiltersFromStorage(storageKey);
+    if (!saved) return;
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        for (const [key, value] of saved) {
+          next.append(key, value);
+        }
+        return next;
+      },
+      { replace: true }
+    );
+  }, []);
+  return { hasSavedFilters, handleSave, handleRemoveSaved };
+}
+
+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 KV = DataDetailsPanel.KeyValueList;
+function toDate(value) {
+  return value instanceof Date ? value : new Date(value);
+}
+function LogDetailsView({
+  log,
+  onClose,
+  onTraceClick,
+  onSpanClick,
+  onPrevious,
+  onNext,
+  collapsed: controlledCollapsed,
+  onCollapsedChange
+}) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(false);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
+  const date = toDate(log.timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel, { collapsed, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Log ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: dateFns.format(date, "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonWithTooltip,
+          {
+            size: "md",
+            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            onClick: () => setCollapsed(!collapsed),
+            children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Previous log", onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Next log", onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral4 font-mono wrap-break-word whitespace-pre-wrap", children: log.message }),
+      (log.traceId || log.spanId) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-2 my-8", "[&>button]:justify-between [&>button]:overflow-hidden"), children: [
+        log.traceId && /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              size: "md",
+              className: "min-w-0 flex-1 overflow-hidden",
+              onClick: () => onTraceClick?.(log.traceId),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Trace" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.traceId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: log.traceId, size: "md", tooltip: "Copy Trace ID to clipboard" })
+        ] }),
+        log.spanId && /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              size: "md",
+              className: "min-w-0 flex-1 overflow-hidden",
+              disabled: !log.traceId || !onSpanClick,
+              onClick: () => log.traceId && onSpanClick?.(log.traceId, log.spanId),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Span" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.spanId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: log.spanId, size: "md", tooltip: "Copy Span ID to clipboard" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(KV, { className: "mb-6", children: [
+        log.entityType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Entity Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: log.entityType })
+        ] }),
+        log.entityName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Entity Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: log.entityName })
+        ] }),
+        log.serviceName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Service" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: log.serviceName })
+        ] }),
+        log.environment && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Environment" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: log.environment })
+        ] }),
+        log.source && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Source" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: log.source })
+        ] }),
+        log.metadata && Object.keys(log.metadata).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.entries(log.metadata).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: key }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: String(value) })
+        ] }, key)) })
+      ] }),
+      log.data && Object.keys(log.data).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CodeSection, { title: "Data", codeStr: JSON.stringify(log.data, null, 2), className: "mt-6" })
+    ] })
+  ] });
+}
+
+function LogsErrorContent({ error, resource, errorTitle }) {
+  if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(SessionExpired, {});
+  if (is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(PermissionDenied, { resource });
+  const message = error instanceof Error ? error.message : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { title: errorTitle, message: message ?? "Unknown error" });
+}
+
+function LogsLayout({ listSlot, logPanelSlot, tracePanelSlot, spanPanelSlot, logCollapsed }) {
+  const hasSidePanel = !!logPanelSlot;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("grid h-full min-h-0 gap-4 items-start", hasSidePanel ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"),
+      children: [
+        listSlot,
+        hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 h-full overflow-auto",
+              tracePanelSlot && spanPanelSlot ? logCollapsed ? "grid-rows-[auto_1fr_1fr]" : "grid-rows-[1fr_1fr_1fr]" : tracePanelSlot ? logCollapsed ? "grid-rows-[auto_1fr]" : "grid-rows-[1fr_1fr]" : logCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+            ),
+            children: [
+              logPanelSlot,
+              tracePanelSlot,
+              spanPanelSlot
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+const COLUMNS = "auto auto auto auto minmax(5rem,1fr) minmax(5rem,1fr)";
+function LogsListView({
+  logs,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  setEndOfListElement,
+  logIdMap,
+  featuredLogId,
+  onLogClick
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListSkeleton, { columns: COLUMNS });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList, { columns: COLUMNS, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList.Top, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Date" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Level" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Entity" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Message" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Data" })
+    ] }),
+    logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.NoMatch, { message: "No logs match your search" }) : logs.map((log) => {
+      const id = logIdMap.get(log);
+      if (!id) return null;
+      const isFeatured = id === featuredLogId;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        LogsDataList.RowButton,
+        {
+          onClick: () => onLogClick(log),
+          className: cn(isFeatured && "bg-surface4"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.LevelCell, { level: log.level }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.EntityCell, { entityType: log.entityType, entityName: log.entityName }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.MessageCell, { message: log.message }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DataCell, { data: log.data })
+          ]
+        },
+        id
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LogsDataList.NextPageLoading,
+      {
+        isLoading: isFetchingNextPage,
+        hasMore: hasNextPage,
+        setEndOfListElement
+      }
+    )
+  ] });
+}
+
+function LogsToolbar({
+  onClear,
+  onRemoveAll,
+  onSave,
+  onRemoveSaved,
+  isLoading,
+  filterFields,
+  filterTokens,
+  onFilterTokensChange,
+  autoFocusFilterFieldId
+}) {
+  const hasActiveFilters = filterTokens.length > 0;
+  const hasNonDefaultFilter = filterTokens.some((token) => isNonDefaultFilter(token, filterFields));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-[1fr_auto] gap-3 items-start"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PropertyFilterApplied,
+      {
+        fields: filterFields,
+        tokens: filterTokens,
+        onTokensChange: onFilterTokensChange,
+        disabled: isLoading,
+        autoFocusFieldId: autoFocusFilterFieldId
+      }
+    ),
+    hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
+      PropertyFilterActions,
+      {
+        disabled: isLoading,
+        onClear: hasNonDefaultFilter ? onClear : void 0,
+        onRemoveAll,
+        onSave,
+        onRemoveSaved
+      }
+    )
+  ] });
+}
+function isNonDefaultFilter(token, fields) {
+  const field = fields.find((f) => f.id === token.fieldId);
+  if (!field) return false;
+  if (field.kind === "text") {
+    return typeof token.value === "string" && token.value.trim() !== "";
+  }
+  if (field.kind === "pick-multi") {
+    if (field.multi) return Array.isArray(token.value) && token.value.length > 0;
+    return typeof token.value === "string" && token.value !== "" && token.value !== "Any";
+  }
+  if (field.kind === "multi-select") {
+    return Array.isArray(token.value) && token.value.length > 0;
+  }
+  return false;
+}
+
+const NoLogsInfo = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, {}),
+    titleSlot: "No logs yet",
+    descriptionSlot: "Logs will appear here once agents, workflows, or tools are executed."
+  }
+) });
+
+const LOGS_PER_PAGE = 20;
+function getNextPageParam(lastPage, _allPages, lastPageParam) {
+  if (lastPage?.pagination?.hasMore) {
+    return lastPageParam + 1;
+  }
+  return void 0;
+}
+function selectLogs(data) {
+  return data.pages.flatMap((page) => page.logs ?? []);
+}
+const useLogs = ({ filters } = {}) => {
+  const client = react.useMastraClient();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = reactQuery.useInfiniteQuery({
+    queryKey: ["logs", filters],
+    queryFn: ({ pageParam }) => client.listLogsVNext({
+      pagination: { page: pageParam, perPage: LOGS_PER_PAGE },
+      filters,
+      orderBy: { field: "timestamp", direction: "DESC" }
+    }),
+    initialPageParam: 0,
+    getNextPageParam,
+    select: selectLogs,
+    retry: false,
+    refetchInterval: 3e3
+  });
+  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  React.useEffect(() => {
+    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  return { ...query, data: query.data, setEndOfListElement };
+};
+
+const LOGS_ROOT_ENTITY_TYPES = {
+  AGENT: observability.EntityType.AGENT,
+  WORKFLOW: observability.EntityType.WORKFLOW_RUN,
+  SCORER: observability.EntityType.SCORER,
+  INGEST: observability.EntityType.RAG_INGESTION
+};
+const LOGS_ROOT_ENTITY_TYPE_OPTIONS = [
+  { label: "Agent", entityType: LOGS_ROOT_ENTITY_TYPES.AGENT },
+  { label: "Workflow", entityType: LOGS_ROOT_ENTITY_TYPES.WORKFLOW },
+  { label: "Scorer", entityType: LOGS_ROOT_ENTITY_TYPES.SCORER },
+  { label: "Ingest", entityType: LOGS_ROOT_ENTITY_TYPES.INGEST }
+];
+const LOG_LEVEL_VALUES = ["debug", "info", "warn", "error", "fatal"];
+const LOG_LEVEL_OPTIONS = [
+  { label: "Debug", value: "debug" },
+  { label: "Info", value: "info" },
+  { label: "Warn", value: "warn" },
+  { label: "Error", value: "error" },
+  { label: "Fatal", value: "fatal" }
+];
+const LOGS_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
+const LOGS_DATE_PRESET_PARAM = "datePreset";
+const LOGS_DATE_FROM_PARAM = "dateFrom";
+const LOGS_DATE_TO_PARAM = "dateTo";
+const LOGS_DATE_PRESET_VALUES = /* @__PURE__ */ new Set([
+  "all",
+  "last-24h",
+  "last-3d",
+  "last-7d",
+  "last-14d",
+  "last-30d",
+  "custom"
+]);
+const LOGS_PROPERTY_FILTER_PARAM_BY_FIELD = {
+  level: "filterLevel",
+  tags: "filterTags",
+  entityName: "filterEntityName",
+  traceId: "filterTraceId",
+  spanId: "filterSpanId",
+  runId: "filterRunId",
+  threadId: "filterThreadId",
+  sessionId: "filterSessionId",
+  requestId: "filterRequestId",
+  resourceId: "filterResourceId",
+  userId: "filterUserId",
+  organizationId: "filterOrganizationId",
+  serviceName: "filterServiceName",
+  environment: "filterEnvironment",
+  experimentId: "filterExperimentId"
+};
+const LOGS_PROPERTY_FILTER_FIELD_IDS = Object.keys(LOGS_PROPERTY_FILTER_PARAM_BY_FIELD);
+const LOGS_ARRAY_FIELD_IDS = /* @__PURE__ */ new Set(["tags"]);
+const DEFAULT_LOGS_FILTERS_STORAGE_KEY = "mastra:logs:saved-filters";
+function saveLogsFiltersToStorage(params, storageKey = DEFAULT_LOGS_FILTERS_STORAGE_KEY) {
+  const serialized = getPreservedLogsFilterParams(params);
+  const preset = params.get(LOGS_DATE_PRESET_PARAM);
+  if (preset) serialized.set(LOGS_DATE_PRESET_PARAM, preset);
+  const from = params.get(LOGS_DATE_FROM_PARAM);
+  if (from) serialized.set(LOGS_DATE_FROM_PARAM, from);
+  const to = params.get(LOGS_DATE_TO_PARAM);
+  if (to) serialized.set(LOGS_DATE_TO_PARAM, to);
+  try {
+    localStorage.setItem(storageKey, serialized.toString());
+  } catch {
+  }
+}
+function clearSavedLogsFilters(storageKey = DEFAULT_LOGS_FILTERS_STORAGE_KEY) {
+  try {
+    localStorage.removeItem(storageKey);
+  } catch {
+  }
+}
+function loadLogsFiltersFromStorage(storageKey = DEFAULT_LOGS_FILTERS_STORAGE_KEY) {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = new URLSearchParams(raw);
+    return parsed.toString() ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function hasAnyLogsFilterParams(params) {
+  if (params.has(LOGS_DATE_PRESET_PARAM)) return true;
+  if (params.has(LOGS_DATE_FROM_PARAM)) return true;
+  if (params.has(LOGS_DATE_TO_PARAM)) return true;
+  if (params.has(LOGS_ROOT_ENTITY_TYPE_PARAM)) return true;
+  for (const fieldId of LOGS_PROPERTY_FILTER_FIELD_IDS) {
+    if (params.has(LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId])) return true;
+  }
+  return false;
+}
+function createLogsPropertyFilterFields({
+  availableTags,
+  availableRootEntityNames,
+  availableServiceNames,
+  availableEnvironments,
+  loading
+}) {
+  const fields = [
+    {
+      id: "rootEntityType",
+      label: "Primitive Type",
+      kind: "pick-multi",
+      searchable: false,
+      options: LOGS_ROOT_ENTITY_TYPE_OPTIONS.map((o) => ({ label: o.label, value: o.entityType })),
+      placeholder: "Choose entity type",
+      emptyText: "No entity types."
+    },
+    {
+      id: "entityName",
+      label: "Primitive Name",
+      kind: "pick-multi",
+      options: availableRootEntityNames.map((name) => ({ label: name, value: name })),
+      placeholder: "Choose entity names",
+      emptyText: "No entity names found.",
+      isLoading: loading?.entityNames
+    },
+    {
+      id: "level",
+      label: "Level",
+      kind: "pick-multi",
+      searchable: false,
+      options: LOG_LEVEL_OPTIONS.map((o) => ({ label: o.label, value: o.value })),
+      placeholder: "Choose level",
+      emptyText: "No levels."
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      kind: "pick-multi",
+      multi: true,
+      options: availableTags.map((tag) => ({ label: tag, value: tag })),
+      placeholder: "Choose tags",
+      emptyText: "No tags found.",
+      isLoading: loading?.tags
+    },
+    {
+      id: "serviceName",
+      label: "Service Name",
+      kind: "pick-multi",
+      options: availableServiceNames.map((name) => ({ label: name, value: name })),
+      placeholder: "Choose service names",
+      emptyText: "No service names found.",
+      isLoading: loading?.serviceNames
+    },
+    {
+      id: "environment",
+      label: "Environment",
+      kind: "pick-multi",
+      options: availableEnvironments.map((env) => ({ label: env, value: env })),
+      placeholder: "Choose environments",
+      emptyText: "No environments found.",
+      isLoading: loading?.environments
+    },
+    { id: "traceId", label: "Trace ID", kind: "text" },
+    { id: "spanId", label: "Span ID", kind: "text" },
+    { id: "runId", label: "Run ID", kind: "text" },
+    { id: "threadId", label: "Thread ID", kind: "text" },
+    { id: "sessionId", label: "Session ID", kind: "text" },
+    { id: "requestId", label: "Request ID", kind: "text" },
+    { id: "resourceId", label: "Resource ID", kind: "text" },
+    { id: "userId", label: "User ID", kind: "text" },
+    { id: "organizationId", label: "Organization ID", kind: "text" },
+    { id: "experimentId", label: "Experiment ID", kind: "text" }
+  ];
+  const byLabel = (a, b) => a.label.localeCompare(b.label);
+  const pickMulti = fields.filter((f) => f.kind === "pick-multi").sort(byLabel);
+  const text = fields.filter((f) => f.kind === "text").sort(byLabel);
+  return [...pickMulti, ...text];
+}
+function getLogsPropertyFilterTokens(searchParams) {
+  const tokens = [];
+  const paramToFieldId = /* @__PURE__ */ new Map([[LOGS_ROOT_ENTITY_TYPE_PARAM, "rootEntityType"]]);
+  for (const fieldId of LOGS_PROPERTY_FILTER_FIELD_IDS) {
+    paramToFieldId.set(LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId], fieldId);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const [paramName] of searchParams.entries()) {
+    const fieldId = paramToFieldId.get(paramName);
+    if (!fieldId || seen.has(fieldId)) continue;
+    seen.add(fieldId);
+    if (LOGS_ARRAY_FIELD_IDS.has(fieldId)) {
+      const raw = searchParams.getAll(paramName);
+      if (raw.length === 0) continue;
+      tokens.push({ fieldId, value: raw.filter(Boolean) });
+      continue;
+    }
+    const value = searchParams.get(paramName);
+    if (value !== null) tokens.push({ fieldId, value });
+  }
+  return tokens;
+}
+function getPreservedLogsFilterParams(searchParams) {
+  const next = new URLSearchParams();
+  const rootEntityType = searchParams.get(LOGS_ROOT_ENTITY_TYPE_PARAM);
+  if (rootEntityType) next.set(LOGS_ROOT_ENTITY_TYPE_PARAM, rootEntityType);
+  for (const fieldId of LOGS_PROPERTY_FILTER_FIELD_IDS) {
+    const param = LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId];
+    if (LOGS_ARRAY_FIELD_IDS.has(fieldId)) {
+      for (const value2 of searchParams.getAll(param)) {
+        next.append(param, value2);
+      }
+      continue;
+    }
+    const value = searchParams.get(param);
+    if (value) next.set(param, value);
+  }
+  return next;
+}
+function applyLogsPropertyFilterTokens(params, tokens) {
+  params.delete(LOGS_ROOT_ENTITY_TYPE_PARAM);
+  for (const fieldId of LOGS_PROPERTY_FILTER_FIELD_IDS) {
+    params.delete(LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId]);
+  }
+  for (const token of tokens) {
+    if (token.fieldId === "rootEntityType" && typeof token.value === "string") {
+      params.set(LOGS_ROOT_ENTITY_TYPE_PARAM, token.value);
+      continue;
+    }
+    const param = LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[token.fieldId];
+    if (!param) continue;
+    if (LOGS_ARRAY_FIELD_IDS.has(token.fieldId) && Array.isArray(token.value)) {
+      if (token.value.length === 0) {
+        params.append(param, "");
+      } else {
+        for (const value of token.value) {
+          params.append(param, value);
+        }
+      }
+      continue;
+    }
+    if (typeof token.value === "string") {
+      params.set(param, token.value.trim());
+    }
+  }
+}
+function buildLogsListFilters({
+  rootEntityType,
+  dateFrom,
+  dateTo,
+  tokens
+}) {
+  const filters = {};
+  if (rootEntityType) {
+    filters.rootEntityType = rootEntityType;
+  }
+  if (dateFrom || dateTo) {
+    filters.timestamp = {
+      ...dateFrom ? { start: dateFrom } : {},
+      ...dateTo ? { end: dateTo } : {}
+    };
+  }
+  for (const token of tokens) {
+    if (token.fieldId === "tags") {
+      if (Array.isArray(token.value) && token.value.length > 0) {
+        filters.tags = token.value;
+      } else if (typeof token.value === "string" && token.value.trim()) {
+        filters.tags = [token.value.trim()];
+      }
+      continue;
+    }
+    if (token.fieldId === "level") {
+      if (typeof token.value === "string" && token.value.trim() && token.value !== "Any") {
+        filters.level = token.value;
+      }
+      continue;
+    }
+    if (typeof token.value !== "string") continue;
+    if (!token.value.trim()) continue;
+    if (token.value === "Any") continue;
+    switch (token.fieldId) {
+      case "entityName":
+        filters.rootEntityName = token.value;
+        break;
+      case "traceId":
+        filters.traceId = token.value;
+        break;
+      case "spanId":
+        filters.spanId = token.value;
+        break;
+      case "runId":
+        filters.runId = token.value;
+        break;
+      case "threadId":
+        filters.threadId = token.value;
+        break;
+      case "sessionId":
+        filters.sessionId = token.value;
+        break;
+      case "requestId":
+        filters.requestId = token.value;
+        break;
+      case "resourceId":
+        filters.resourceId = token.value;
+        break;
+      case "userId":
+        filters.userId = token.value;
+        break;
+      case "organizationId":
+        filters.organizationId = token.value;
+        break;
+      case "serviceName":
+        filters.serviceName = token.value;
+        break;
+      case "environment":
+        filters.environment = token.value;
+        break;
+      case "experimentId":
+        filters.experimentId = token.value;
+        break;
+    }
+  }
+  return filters;
+}
+function neutralizeLogsFilterTokens(filterFields, filterTokens) {
+  return filterTokens.map((token) => {
+    const field = filterFields.find((f) => f.id === token.fieldId);
+    if (!field) return token;
+    if (field.kind === "text") return { fieldId: token.fieldId, value: "" };
+    if (field.kind === "pick-multi") {
+      return field.multi ? { fieldId: token.fieldId, value: [] } : { fieldId: token.fieldId, value: "Any" };
+    }
+    return token;
+  });
+}
+
+const LOG_PARAM = "logId";
+const TRACE_PARAM = "traceId";
+const SPAN_PARAM = "spanId";
+const DAY_MS = 24 * 60 * 60 * 1e3;
+const PRESET_MS = {
+  "last-24h": DAY_MS,
+  "last-3d": 3 * DAY_MS,
+  "last-7d": 7 * DAY_MS,
+  "last-14d": 14 * DAY_MS,
+  "last-30d": 30 * DAY_MS
+};
+function clearSelectionParams(params) {
+  params.delete(LOG_PARAM);
+  params.delete(TRACE_PARAM);
+  params.delete(SPAN_PARAM);
+}
+function useLogsUrlState(searchParams, setSearchParams, options) {
+  const { onRemoveAll } = options ?? {};
+  const datePreset = React.useMemo(() => {
+    const value = searchParams.get(LOGS_DATE_PRESET_PARAM);
+    return value && LOGS_DATE_PRESET_VALUES.has(value) ? value : "last-24h";
+  }, [searchParams]);
+  const dateFromParamRaw = searchParams.get(LOGS_DATE_FROM_PARAM);
+  const dateToParamRaw = searchParams.get(LOGS_DATE_TO_PARAM);
+  const selectedDateFrom = React.useMemo(() => {
+    if (datePreset === "custom") {
+      if (!dateFromParamRaw) return void 0;
+      const parsed = new Date(dateFromParamRaw);
+      return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+    }
+    if (datePreset === "all") return void 0;
+    const ms = PRESET_MS[datePreset];
+    return ms ? new Date(Date.now() - ms) : void 0;
+  }, [datePreset, dateFromParamRaw]);
+  const selectedDateTo = React.useMemo(() => {
+    if (datePreset !== "custom" || !dateToParamRaw) return void 0;
+    const parsed = new Date(dateToParamRaw);
+    return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+  }, [datePreset, dateToParamRaw]);
+  const datePresetRef = React.useRef(datePreset);
+  datePresetRef.current = datePreset;
+  const featuredLogId = searchParams.get(LOG_PARAM);
+  const featuredTraceId = searchParams.get(TRACE_PARAM);
+  const featuredSpanId = searchParams.get(SPAN_PARAM);
+  const selectedEntityOption = React.useMemo(
+    () => LOGS_ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(LOGS_ROOT_ENTITY_TYPE_PARAM)),
+    [searchParams]
+  );
+  const filterTokens = React.useMemo(() => getLogsPropertyFilterTokens(searchParams), [searchParams]);
+  const handleFeaturedChange = React.useCallback(
+    (ids) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          for (const [field, value] of Object.entries(ids)) {
+            const param = field === "logId" ? LOG_PARAM : field === "traceId" ? TRACE_PARAM : SPAN_PARAM;
+            if (value) {
+              next.set(param, value);
+            } else {
+              next.delete(param);
+            }
+          }
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const applyFilterTokens = React.useCallback(
+    (tokens) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          applyLogsPropertyFilterTokens(next, tokens);
+          clearSelectionParams(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleFilterTokensChange = applyFilterTokens;
+  const handleDateChange = React.useCallback(
+    (value, type) => {
+      if (datePresetRef.current !== "custom") return;
+      const param = type === "from" ? LOGS_DATE_FROM_PARAM : LOGS_DATE_TO_PARAM;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (value) {
+            next.set(param, value.toISOString());
+          } else {
+            next.delete(param);
+          }
+          clearSelectionParams(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleDatePresetChange = React.useCallback(
+    (preset) => {
+      datePresetRef.current = preset;
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (preset === "last-24h") {
+            next.delete(LOGS_DATE_PRESET_PARAM);
+            next.delete(LOGS_DATE_FROM_PARAM);
+            next.delete(LOGS_DATE_TO_PARAM);
+          } else if (preset === "custom") {
+            next.set(LOGS_DATE_PRESET_PARAM, "custom");
+          } else {
+            next.set(LOGS_DATE_PRESET_PARAM, preset);
+            next.delete(LOGS_DATE_FROM_PARAM);
+            next.delete(LOGS_DATE_TO_PARAM);
+          }
+          clearSelectionParams(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleRemoveAll = React.useCallback(() => {
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        next.delete(LOGS_ROOT_ENTITY_TYPE_PARAM);
+        for (const fieldId of LOGS_PROPERTY_FILTER_FIELD_IDS) {
+          next.delete(LOGS_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId]);
+        }
+        next.delete(LOGS_DATE_PRESET_PARAM);
+        next.delete(LOGS_DATE_FROM_PARAM);
+        next.delete(LOGS_DATE_TO_PARAM);
+        clearSelectionParams(next);
+        return next;
+      },
+      { replace: true }
+    );
+    onRemoveAll?.();
+  }, [setSearchParams, onRemoveAll]);
+  return React.useMemo(
+    () => ({
+      searchParams,
+      setSearchParams,
+      datePreset,
+      selectedDateFrom,
+      selectedDateTo,
+      datePresetRef,
+      featuredLogId,
+      featuredTraceId,
+      featuredSpanId,
+      selectedEntityOption,
+      filterTokens,
+      handleFeaturedChange,
+      handleFilterTokensChange,
+      handleDateChange,
+      handleDatePresetChange,
+      handleRemoveAll,
+      applyFilterTokens
+    }),
+    [
+      searchParams,
+      setSearchParams,
+      datePreset,
+      selectedDateFrom,
+      selectedDateTo,
+      datePresetRef,
+      featuredLogId,
+      featuredTraceId,
+      featuredSpanId,
+      selectedEntityOption,
+      filterTokens,
+      handleFeaturedChange,
+      handleFilterTokensChange,
+      handleDateChange,
+      handleDatePresetChange,
+      handleRemoveAll,
+      applyFilterTokens
+    ]
+  );
+}
+
+const DEFAULT_SAVED_MESSAGE = "Filters setting for Logs saved";
+const DEFAULT_CLEARED_MESSAGE = "Filters setting for Logs cleared up";
+function useLogsFilterPersistence(searchParams, setSearchParams, options) {
+  const { storageKey, messages, skipHydration } = options ?? {};
+  const [hasSavedFilters, setHasSavedFilters] = React.useState(() => loadLogsFiltersFromStorage(storageKey) !== null);
+  const handleSave = React.useCallback(() => {
+    saveLogsFiltersToStorage(searchParams, storageKey);
+    setHasSavedFilters(true);
+    const text = messages?.saved ?? DEFAULT_SAVED_MESSAGE;
+    if (text !== false) toast.success(text);
+  }, [searchParams, storageKey, messages?.saved]);
+  const handleRemoveSaved = React.useCallback(() => {
+    clearSavedLogsFilters(storageKey);
+    setHasSavedFilters(false);
+    const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE;
+    if (text !== false) toast.success(text);
+  }, [storageKey, messages?.cleared]);
+  const hydratedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (skipHydration) return;
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    if (hasAnyLogsFilterParams(searchParams)) return;
+    const saved = loadLogsFiltersFromStorage(storageKey);
+    if (!saved) return;
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        for (const [key, value] of saved) {
+          next.append(key, value);
+        }
+        return next;
+      },
+      { replace: true }
+    );
+  }, []);
+  return { hasSavedFilters, handleSave, handleRemoveSaved };
+}
+
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+function buildLogIds(logs) {
+  const ids = /* @__PURE__ */ new Map();
+  for (const log of logs) {
+    if (log.logId) {
+      ids.set(log, log.logId);
+      continue;
+    }
+    const ts = log.timestamp instanceof Date ? log.timestamp.toISOString() : log.timestamp;
+    ids.set(log, hashCode(`${ts}${log.message ?? ""}${log.data ? JSON.stringify(log.data) : ""}`));
+  }
+  return ids;
+}
+function useLogsListNavigation(logs, featuredLogId, onFeaturedChange, featuredTraceId) {
+  const logIdMap = React.useMemo(() => buildLogIds(logs), [logs]);
+  const idToLog = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (let i = 0; i < logs.length; i++) {
+      const id = logIdMap.get(logs[i]);
+      if (id) m.set(id, { log: logs[i], idx: i });
+    }
+    return m;
+  }, [logs, logIdMap]);
+  const entry = featuredLogId ? idToLog.get(featuredLogId) : void 0;
+  const featuredLogIdx = entry?.idx ?? -1;
+  const featuredLog = featuredLogIdx >= 0 ? logs[featuredLogIdx] : null;
+  const getLogId = React.useCallback((log) => logIdMap.get(log), [logIdMap]);
+  const handleLogClick = React.useCallback(
+    (log) => {
+      const id = logIdMap.get(log);
+      if (!id) return;
+      if (featuredLogId === id) {
+        onFeaturedChange({ logId: null });
+        return;
+      }
+      if (featuredTraceId) {
+        onFeaturedChange({ logId: id, traceId: log.traceId ?? null, spanId: null });
+      } else {
+        onFeaturedChange({ logId: id });
+      }
+    },
+    [logIdMap, featuredLogId, featuredTraceId, onFeaturedChange]
+  );
+  const handlePreviousLog = featuredLogIdx > 0 ? () => {
+    const prevLog = logs[featuredLogIdx - 1];
+    const id = logIdMap.get(prevLog);
+    if (featuredTraceId) {
+      onFeaturedChange({ logId: id, traceId: prevLog.traceId ?? null, spanId: null });
+    } else {
+      onFeaturedChange({ logId: id });
+    }
+  } : void 0;
+  const handleNextLog = featuredLogIdx >= 0 && featuredLogIdx < logs.length - 1 ? () => {
+    const nextLog = logs[featuredLogIdx + 1];
+    const id = logIdMap.get(nextLog);
+    if (featuredTraceId) {
+      onFeaturedChange({ logId: id, traceId: nextLog.traceId ?? null, spanId: null });
+    } else {
+      onFeaturedChange({ logId: id });
+    }
+  } : void 0;
+  return {
+    logIdMap,
+    getLogId,
+    featuredLog,
+    handleLogClick,
+    handlePreviousLog,
+    handleNextLog
+  };
+}
+
 exports.Animations = tokens.Animations;
 exports.BorderColors = tokens.BorderColors;
 exports.BorderRadius = tokens.BorderRadius;
@@ -15034,12 +19155,15 @@ exports.ApiIcon = ApiIcon;
 exports.Avatar = Avatar;
 exports.AzureIcon = AzureIcon;
 exports.Badge = Badge;
+exports.BarListContent = BarListContent;
 exports.BranchIcon = BranchIcon;
 exports.BrandLoader = BrandLoader;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
+exports.CHART_COLORS = CHART_COLORS;
+exports.CONTEXT_FIELD_IDS = CONTEXT_FIELD_IDS;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -15078,6 +19202,9 @@ exports.ContentBlocks = ContentBlocks;
 exports.CopyButton = CopyButton;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;
+exports.DATE_PRESETS = DATE_PRESETS;
+exports.DEFAULT_LOGS_FILTERS_STORAGE_KEY = DEFAULT_LOGS_FILTERS_STORAGE_KEY;
+exports.DEFAULT_TRACE_FILTERS_STORAGE_KEY = DEFAULT_TRACE_FILTERS_STORAGE_KEY;
 exports.DashboardCard = DashboardCard;
 exports.DataCodeSection = DataCodeSection;
 exports.DataDetailsPanel = DataDetailsPanel;
@@ -15086,6 +19213,7 @@ exports.DataList = DataList;
 exports.DataListSkeleton = DataListSkeleton;
 exports.DataPanel = DataPanel;
 exports.DatePicker = DatePicker;
+exports.DateRangeSelector = DateRangeSelector;
 exports.DateTimeCell = DateTimeCell;
 exports.DateTimePicker = DateTimePicker;
 exports.DateTimePickerContent = DateTimePickerContent;
@@ -15160,14 +19288,32 @@ exports.JSONSchemaForm = JSONSchemaForm;
 exports.JudgeIcon = JudgeIcon;
 exports.Kbd = Kbd;
 exports.KeyValueList = KeyValueList;
+exports.KpiCardView = KpiCardView;
+exports.LOGS_DATE_FROM_PARAM = LOGS_DATE_FROM_PARAM;
+exports.LOGS_DATE_PRESET_PARAM = LOGS_DATE_PRESET_PARAM;
+exports.LOGS_DATE_PRESET_VALUES = LOGS_DATE_PRESET_VALUES;
+exports.LOGS_DATE_TO_PARAM = LOGS_DATE_TO_PARAM;
+exports.LOGS_PROPERTY_FILTER_FIELD_IDS = LOGS_PROPERTY_FILTER_FIELD_IDS;
+exports.LOGS_PROPERTY_FILTER_PARAM_BY_FIELD = LOGS_PROPERTY_FILTER_PARAM_BY_FIELD;
+exports.LOGS_ROOT_ENTITY_TYPES = LOGS_ROOT_ENTITY_TYPES;
+exports.LOGS_ROOT_ENTITY_TYPE_OPTIONS = LOGS_ROOT_ENTITY_TYPE_OPTIONS;
+exports.LOGS_ROOT_ENTITY_TYPE_PARAM = LOGS_ROOT_ENTITY_TYPE_PARAM;
+exports.LOG_LEVEL_OPTIONS = LOG_LEVEL_OPTIONS;
+exports.LOG_LEVEL_VALUES = LOG_LEVEL_VALUES;
 exports.Label = Label;
+exports.LatencyCardView = LatencyCardView;
 exports.LatencyIcon = LatencyIcon;
 exports.ListSearch = ListSearch;
+exports.LogDetailsView = LogDetailsView;
 exports.Logo = Logo;
 exports.LogoWithoutText = LogoWithoutText;
 exports.LogsDataList = LogsDataList;
 exports.LogsDataListSkeleton = DataListSkeleton;
+exports.LogsErrorContent = LogsErrorContent;
 exports.LogsIcon = LogsIcon;
+exports.LogsLayout = LogsLayout;
+exports.LogsListView = LogsListView;
+exports.LogsToolbar = LogsToolbar;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
 exports.MainHeader = MainHeader;
@@ -15185,12 +19331,15 @@ exports.MetricsFlexGrid = MetricsFlexGrid;
 exports.MetricsKpiCard = MetricsKpiCard;
 exports.MetricsLineChart = MetricsLineChart;
 exports.MetricsLineChartTooltip = MetricsLineChartTooltip;
+exports.MetricsProvider = MetricsProvider;
 exports.MistralIcon = MistralIcon;
+exports.ModelUsageCostCardView = ModelUsageCostCardView;
 exports.MultiColumn = MultiColumn;
 exports.MultiCombobox = MultiCombobox;
 exports.NestedFields = NestedFields;
 exports.NetlifyIcon = NetlifyIcon;
 exports.NoDataPageLayout = NoDataPageLayout;
+exports.NoLogsInfo = NoLogsInfo;
 exports.Notice = Notice;
 exports.Notification = Notification;
 exports.OPERATORS = OPERATORS;
@@ -15214,6 +19363,8 @@ exports.PromptIcon = PromptIcon;
 exports.PropertyFilterActions = PropertyFilterActions;
 exports.PropertyFilterApplied = PropertyFilterApplied;
 exports.PropertyFilterCreator = PropertyFilterCreator;
+exports.ROOT_ENTITY_TYPES = ROOT_ENTITY_TYPES;
+exports.ROOT_ENTITY_TYPE_OPTIONS = ROOT_ENTITY_TYPE_OPTIONS;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RepoIcon = RepoIcon;
@@ -15224,6 +19375,7 @@ exports.RuleFieldSelect = RuleFieldSelect;
 exports.RuleOperatorSelect = RuleOperatorSelect;
 exports.RuleRow = RuleRow;
 exports.RuleValueInput = RuleValueInput;
+exports.ScoresCardView = ScoresCardView;
 exports.ScoresDataList = ScoresDataList;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
@@ -15250,10 +19402,25 @@ exports.Skeleton = Skeleton;
 exports.SkillIcon = SkillIcon;
 exports.SlashIcon = SlashIcon;
 exports.Slider = Slider;
+exports.SpanDataPanelView = SpanDataPanelView;
+exports.SpanDetailsView = SpanDetailsView;
+exports.SpanTokenUsage = SpanTokenUsage;
 exports.Spinner = Spinner;
+exports.StackedRunsBars = StackedRunsBars;
 exports.StatusBadge = StatusBadge;
 exports.SubSectionRoot = SubSectionRoot;
 exports.Switch = Switch;
+exports.TRACE_DATE_FROM_PARAM = TRACE_DATE_FROM_PARAM;
+exports.TRACE_DATE_PRESET_PARAM = TRACE_DATE_PRESET_PARAM;
+exports.TRACE_DATE_PRESET_VALUES = TRACE_DATE_PRESET_VALUES;
+exports.TRACE_DATE_TO_PARAM = TRACE_DATE_TO_PARAM;
+exports.TRACE_PROPERTY_FILTER_FIELD_IDS = TRACE_PROPERTY_FILTER_FIELD_IDS;
+exports.TRACE_PROPERTY_FILTER_PARAM_BY_FIELD = TRACE_PROPERTY_FILTER_PARAM_BY_FIELD;
+exports.TRACE_ROOT_ENTITY_TYPE_PARAM = TRACE_ROOT_ENTITY_TYPE_PARAM;
+exports.TRACE_STATUS_OPTIONS = TRACE_STATUS_OPTIONS;
+exports.TRACE_STATUS_PARAM = TRACE_STATUS_PARAM;
+exports.TRACE_STATUS_VALUES = TRACE_STATUS_VALUES;
+exports.TRACE_SYNTHETIC_FILTER_FIELD_IDS = TRACE_SYNTHETIC_FILTER_FIELD_IDS;
 exports.Tab = Tab;
 exports.TabContent = TabContent;
 exports.TabList = TabList;
@@ -15271,14 +19438,29 @@ exports.ThreadLink = ThreadLink;
 exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.TimePicker = TimePicker;
+exports.TimelineExpandCol = TimelineExpandCol;
+exports.TimelineNameCol = TimelineNameCol;
+exports.TimelineStructureSign = TimelineStructureSign;
+exports.TimelineTimingCol = TimelineTimingCol;
+exports.TokenUsageByAgentCardView = TokenUsageByAgentCardView;
 exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolsIcon = ToolsIcon;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.TraceDataPanelView = TraceDataPanelView;
+exports.TraceDetailsView = TraceDetailsView;
 exports.TraceIcon = TraceIcon;
+exports.TraceKeysAndValues = TraceKeysAndValues;
+exports.TraceTimeline = TraceTimeline;
+exports.TraceTimelineSpan = TraceTimelineSpan;
 exports.TracesDataList = TracesDataList;
+exports.TracesErrorContent = TracesErrorContent;
+exports.TracesLayout = TracesLayout;
+exports.TracesListView = TracesListView;
+exports.TracesToolbar = TracesToolbar;
+exports.TracesVolumeCardView = TracesVolumeCardView;
 exports.Tree = Tree;
 exports.Truncate = Truncate;
 exports.TsIcon = TsIcon;
@@ -15289,13 +19471,21 @@ exports.VariablesIcon = VariablesIcon;
 exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkflowIcon = WorkflowIcon;
 exports.XGroqIcon = XGroqIcon;
+exports.applyLogsPropertyFilterTokens = applyLogsPropertyFilterTokens;
+exports.applyTracePropertyFilterTokens = applyTracePropertyFilterTokens;
+exports.buildLogsListFilters = buildLogsListFilters;
+exports.buildTraceListFilters = buildTraceListFilters;
 exports.buttonVariants = buttonVariants;
+exports.clearSavedLogsFilters = clearSavedLogsFilters;
+exports.clearSavedTraceFilters = clearSavedTraceFilters;
 exports.cn = cn;
 exports.comboboxStyles = comboboxStyles;
 exports.countLeafRules = countLeafRules;
 exports.createDefaultRule = createDefaultRule;
 exports.createDefaultRuleGroup = createDefaultRuleGroup;
 exports.createField = createField;
+exports.createLogsPropertyFilterFields = createLogsPropertyFilterFields;
+exports.createTracePropertyFilterFields = createTracePropertyFilterFields;
 exports.createVariableAutocomplete = createVariableAutocomplete;
 exports.fieldsToJSONSchema = fieldsToJSONSchema;
 exports.fileToBase64 = fileToBase64;
@@ -15306,21 +19496,36 @@ exports.formElementFocusWithin = formElementFocusWithin;
 exports.formElementRadius = formElementRadius;
 exports.formElementSizes = formElementSizes;
 exports.formElementTransition = formElementTransition;
+exports.formatCompact = formatCompact;
+exports.formatCost = formatCost;
+exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatJSON = formatJSON;
 exports.generateDefaultValues = generateDefaultValues;
+exports.getAllSpanIds = getAllSpanIds;
 exports.getChildFieldOptions = getChildFieldOptions;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getFieldOptionAtPath = getFieldOptionAtPath;
 exports.getFieldOptionsFromSchema = getFieldOptionsFromSchema;
 exports.getFileContentType = getFileContentType;
+exports.getInputPreview = getInputPreview;
 exports.getItemListColumnTemplate = getItemListColumnTemplate;
+exports.getLogsPropertyFilterTokens = getLogsPropertyFilterTokens;
 exports.getMainContentContentClassName = getMainContentContentClassName;
+exports.getPreservedLogsFilterParams = getPreservedLogsFilterParams;
+exports.getPreservedTraceFilterParams = getPreservedTraceFilterParams;
 exports.getShortId = getShortId$1;
+exports.getSpanDescendantIds = getSpanDescendantIds;
+exports.getSpanTypeUi = getSpanTypeUi;
 exports.getStatusIcon = getStatusIcon;
 exports.getToNextEntryFn = getToNextEntryFn;
 exports.getToNextItemFn = getToNextItemFn;
 exports.getToPreviousEntryFn = getToPreviousEntryFn;
 exports.getToPreviousItemFn = getToPreviousItemFn;
+exports.getTokenLimitMessage = getTokenLimitMessage;
+exports.getTracePropertyFilterTokens = getTracePropertyFilterTokens;
+exports.groupTracesByThread = groupTracesByThread;
+exports.hasAnyLogsFilterParams = hasAnyLogsFilterParams;
+exports.hasAnyTraceFilterParams = hasAnyTraceFilterParams;
 exports.highlight = highlight;
 exports.hoverEffects = hoverEffects;
 exports.inputVariants = inputVariants;
@@ -15330,32 +19535,68 @@ exports.isNonRetryableError = isNonRetryableError;
 exports.isObjectEmpty = isObjectEmpty;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
+exports.isTokenLimitExceeded = isTokenLimitExceeded;
 exports.isValidJson = isValidJson;
+exports.isValidPreset = isValidPreset;
 exports.jsonSchemaToFields = jsonSchemaToFields;
+exports.loadLogsFiltersFromStorage = loadLogsFiltersFromStorage;
+exports.loadTraceFiltersFromStorage = loadTraceFiltersFromStorage;
 exports.lodashTitleCase = lodashTitleCase;
+exports.neutralizeFilterTokens = neutralizeFilterTokens;
+exports.neutralizeLogsFilterTokens = neutralizeLogsFilterTokens;
 exports.parseError = parseError;
 exports.parseFieldPath = parseFieldPath;
+exports.saveLogsFiltersToStorage = saveLogsFiltersToStorage;
+exports.saveTraceFiltersToStorage = saveTraceFiltersToStorage;
 exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
 exports.sharedFormElementFocusStyle = sharedFormElementFocusStyle;
 exports.sharedFormElementStyle = sharedFormElementStyle;
 exports.shouldRetryQuery = shouldRetryQuery;
+exports.spanTypePrefixes = spanTypePrefixes;
 exports.stringToColor = stringToColor;
 exports.textareaVariants = textareaVariants;
 exports.toSigFigs = toSigFigs;
 exports.toast = toast;
 exports.transitions = transitions;
 exports.truncateString = truncateString;
+exports.useAgentRunsKpiMetrics = useAgentRunsKpiMetrics;
 exports.useAutoscroll = useAutoscroll;
+exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCodemirrorTheme = useCodemirrorTheme$3;
 exports.useCopyToClipboard = useCopyToClipboard;
+exports.useEntityNames = useEntityNames;
+exports.useEnvironments = useEnvironments;
 exports.useInView = useInView;
 exports.useIsDarkMode = useIsDarkMode;
 exports.useJSONSchemaForm = useJSONSchemaForm;
 exports.useJSONSchemaFormField = useJSONSchemaFormField;
 exports.useJSONSchemaFormNestedContext = useJSONSchemaFormNestedContext;
+exports.useLatencyMetrics = useLatencyMetrics;
+exports.useLogs = useLogs;
+exports.useLogsFilterPersistence = useLogsFilterPersistence;
+exports.useLogsListNavigation = useLogsListNavigation;
+exports.useLogsUrlState = useLogsUrlState;
 exports.useMainSidebar = useMainSidebar;
 exports.useMaybeSidebar = useMaybeSidebar;
+exports.useMetrics = useMetrics;
+exports.useMetricsFilters = useMetricsFilters;
+exports.useModelCostKpiMetrics = useModelCostKpiMetrics;
+exports.useModelUsageCostMetrics = useModelUsageCostMetrics;
 exports.usePlaygroundStore = usePlaygroundStore;
+exports.useScoresMetrics = useScoresMetrics;
+exports.useServiceNames = useServiceNames;
+exports.useSpanDetail = useSpanDetail;
 exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
+exports.useTags = useTags;
+exports.useTokenUsageByAgentMetrics = useTokenUsageByAgentMetrics;
+exports.useTotalTokensKpiMetrics = useTotalTokensKpiMetrics;
+exports.useTraceFilterPersistence = useTraceFilterPersistence;
+exports.useTraceLightSpans = useTraceLightSpans;
+exports.useTraceListNavigation = useTraceListNavigation;
+exports.useTraceSpanNavigation = useTraceSpanNavigation;
+exports.useTraceSpans = useTraceSpans;
+exports.useTraceUrlState = useTraceUrlState;
+exports.useTraceVolumeMetrics = useTraceVolumeMetrics;
+exports.useTraces = useTraces;
 exports.variableHighlight = variableHighlight;
 //# sourceMappingURL=index.cjs.js.map