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

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { X, Wand2, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, ShieldX, LogIn, Check, ChevronsUpDown, Search, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronLeftIcon, ChevronRightIcon, CalendarIcon, CircleAlertIcon, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, PanelRightIcon, KeyboardIcon, AlertTriangleIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ClockIcon, BanIcon, ChevronRight, Folder, File, AlertTriangle, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft } from 'lucide-react';
+import { X, Wand2, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, ShieldX, LogIn, Check, ChevronsUpDown, Search, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronLeftIcon, ChevronRightIcon, CalendarIcon, CircleAlertIcon, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, PanelRightIcon, KeyboardIcon, AlertTriangleIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ClockIcon, BanIcon, ChevronRight, Folder, File, AlertTriangle, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft, BrainIcon, ArrowRightToLineIcon, CoinsIcon, ChevronsUpIcon, ChevronUpIcon, ChevronDownIcon, ChevronsDownIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, CircleGaugeIcon, FileInputIcon, FileOutputIcon, BracesIcon, CircleSlashIcon } from 'lucide-react';
 import * as React from 'react';
-import React__default, { useState, useRef, useCallback, useSyncExternalStore, forwardRef, useMemo, useId, useEffect, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { useState, useRef, useCallback, useSyncExternalStore, forwardRef, useMemo, useId, useEffect, Suspense, Fragment as Fragment$1, createContext, useContext } from 'react';
 import { Shadows, Glows, BorderColors, Colors, Sizes, FontSizes, LineHeights, BorderRadius, Spacings } from './tokens.es.js';
 import './index.css';export { Animations } from './tokens.es.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -51,6 +51,8 @@ import { isToday } from 'date-fns/isToday';
 import { SearchCursor } from '@codemirror/search';
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Line } from 'recharts';
 import { usePanelRef, Panel, Separator as Separator$1 } from 'react-resizable-panels';
+import { useQuery, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query';
+import { EntityType } from '@mastra/core/observability';
 
 const formElementSizes = {
   sm: "h-form-sm",
@@ -12028,16 +12030,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__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
 }
 function ScoresDataListTimeCell({ timestamp }) {
-  const date = toDate$2(timestamp);
+  const date = toDate$3(timestamp);
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? format(date, "h:mm:ss aaa") : "-" });
 }
 function ScoresDataListInputCell({ input }) {
@@ -12067,7 +12069,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;
 }
@@ -12079,11 +12081,11 @@ function TracesDataListIdCell({ traceId }) {
   return /* @__PURE__ */ 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__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
 }
 function TracesDataListTimeCell({ timestamp }) {
-  const date = toDate$1(timestamp);
+  const date = toDate$2(timestamp);
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxs(Fragment, { children: [
     format(date, "HH:mm:ss"),
     /* @__PURE__ */ jsxs("span", { className: "text-neutral2", children: [
@@ -12364,7 +12366,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;
 }
@@ -12380,11 +12382,11 @@ function LogsDataListLevelCell({ level }) {
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ 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__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
 }
 function LogsDataListTimeCell({ timestamp }) {
-  const date = toDate(timestamp);
+  const date = toDate$1(timestamp);
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxs(Fragment, { children: [
     format(date, "HH:mm:ss"),
     /* @__PURE__ */ jsxs("span", { className: "text-neutral2", children: [
@@ -13509,7 +13511,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 },
@@ -13533,7 +13535,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] = useState(false);
   const [draftDateFrom, setDraftDateFrom] = useState(dateFrom);
@@ -13541,7 +13543,7 @@ function DateTimeRangePicker({
   const [draftTimeFrom, setDraftTimeFrom] = useState("12:00 AM");
   const [draftTimeTo, setDraftTimeTo] = useState("11:59 PM");
   const [customRangeError, setCustomRangeError] = 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") {
@@ -13552,7 +13554,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");
@@ -14970,5 +14972,4124 @@ function generateDefaultValues(schema) {
   return generateObjectDefaults(schema.properties, 0);
 }
 
-export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorBoundary, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, Label, LatencyIcon, LineHeights, ListSearch, Logo, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MistralIcon, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, PickMultiPanel, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, PropertyFilterCreator, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, Spinner, StatusBadge, SubSectionRoot, Switch, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceIcon, TracesDataList, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, buttonVariants, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatJSON, generateDefaultValues, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getItemListColumnTemplate, getMainContentContentClassName, getShortId$1 as getShortId, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isValidJson, jsonSchemaToFields, lodashTitleCase, parseError, parseFieldPath, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useMainSidebar, useMaybeSidebar, usePlaygroundStore, useTableKeyboardNavigation, variableHighlight };
+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 = createContext({
+  datePreset: "24h",
+  setDatePreset: () => {
+  },
+  customRange: void 0,
+  setCustomRange: () => {
+  },
+  dateRangeLabel: "Last 24 hours"
+});
+function useMetrics() {
+  return 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 `${format(customRange.from, "MMM d, yyyy")} – ${format(customRange.to, "MMM d, yyyy")}`;
+    }
+    return format(customRange.from, "MMM d, yyyy");
+  }
+  return "Custom range";
+}
+function MetricsProvider({
+  children,
+  initialPreset,
+  onPresetChange
+}) {
+  const [datePreset, setDatePresetState] = useState(initialPreset ?? "24h");
+  const [customRange, setCustomRange] = useState(void 0);
+  const dateRangeLabel = getDateRangeLabel(datePreset, customRange);
+  useEffect(() => {
+    if (initialPreset && initialPreset !== datePreset) {
+      setDatePresetState(initialPreset);
+    }
+  }, [initialPreset]);
+  const setDatePreset = useCallback(
+    (v) => {
+      setDatePresetState(v);
+      onPresetChange?.(v);
+    },
+    [onPresetChange]
+  );
+  return /* @__PURE__ */ jsx(
+    MetricsContext.Provider,
+    {
+      value: {
+        datePreset,
+        setDatePreset,
+        customRange,
+        setCustomRange,
+        dateRangeLabel
+      },
+      children
+    }
+  );
+}
+
+function DateRangeSelector() {
+  const { datePreset, setDatePreset } = useMetrics();
+  return /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-4", children: legend?.map((l) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: l.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-icon2", children: l.label })
+      ] }, l.label)) }),
+      valueLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-icon2", children: valueLabel })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "group flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-7", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-y-0 left-0 rounded",
+              style: { width: `${pct}%`, backgroundColor: color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-2 flex items-center text-xs text-white whitespace-nowrap", children: d.name })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: CHART_COLORS.blue } }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-icon2", children: "Completed" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: CHART_COLORS.red } }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-icon2", children: "Errors" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-icon2", children: "Total (Success)" })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "group flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-7", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(TooltipContent, { side: "top", className: "font-mono", children: [
+              d.completed.toLocaleString(),
+              " completed"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(TooltipContent, { side: "top", className: "font-mono", children: [
+              d.errors.toLocaleString(),
+              " errors"
+            ] })
+          ] }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsx(MetricsKpiCard.Label, { children: label }),
+    /* @__PURE__ */ jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? value : "—" }),
+    isError ? /* @__PURE__ */ jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsx(MetricsKpiCard.Loading, {}) : hasData ? changePct != null ? /* @__PURE__ */ jsx(MetricsKpiCard.Change, { changePct, prevValue }) : /* @__PURE__ */ jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ 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__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" });
+  }
+  return /* @__PURE__ */ 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__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Latency", description: "Hourly p50 and p95 latency." }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: avgP50, label: "Avg p50" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultTab: data.agentData.length > 0 ? "agents" : data.workflowData.length > 0 ? "workflows" : data.toolData.length > 0 ? "tools" : "agents",
+        className: "overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { children: [
+            /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
+            /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
+            /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
+          ] }),
+          /* @__PURE__ */ jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.agentData }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.workflowData }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.toolData }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function ModelUsageCostCardView({ rows, isLoading, isError }) {
+  const hasData = !!rows && rows.length > 0;
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ 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__ */ jsx(MetricsCard.Summary, { value, label: "Total cost" });
+      })()
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load model usage data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No model usage data yet" }) : /* @__PURE__ */ 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 = 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__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }),
+      hasData && /* @__PURE__ */ jsx(
+        MetricsCard.Summary,
+        {
+          value: data?.avgScore != null ? `avg ${data.avgScore}` : "—",
+          label: "Across all scorers"
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load scores data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No scores data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "over-time", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "over-time", children: "Over Time" }),
+        /* @__PURE__ */ jsx(Tab, { value: "summary", children: "Summary" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "summary", children: /* @__PURE__ */ 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] = 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__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(
+        MetricsCard.TitleAndDescription,
+        {
+          title: "Token Usage by Agent",
+          description: "Token consumption grouped by agent."
+        }
+      ),
+      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" }))
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load token usage data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ 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__ */ jsxs(TabList, { children: [
+            /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }),
+            /* @__PURE__ */ jsx(Tab, { value: "cost", children: "Cost" })
+          ] }),
+          /* @__PURE__ */ jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ 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__ */ jsx(TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ 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__ */ jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function VolumeBars({ data }) {
+  return /* @__PURE__ */ 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__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "agents", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.agentData }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.workflowData }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.toolData }) : /* @__PURE__ */ 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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 = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return 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__ */ 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__ */ 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__ */ jsx(BrainIcon, {}),
+    color: "oklch(0.75 0.15 320)",
+    label: "Model",
+    bgColor: "oklch(0.75 0.15 320 / 0.1)",
+    typePrefix: "model"
+  },
+  mcp: {
+    icon: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(ArrowRightIcon, {}) },
+    completionTokens: { label: "Completion Tokens", icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {}) }
+  };
+  const v5TokenPresentations = {
+    inputTokens: { label: "Input Tokens", icon: /* @__PURE__ */ jsx(ArrowRightIcon, {}) },
+    outputTokens: { label: "Output Tokens", icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {}) },
+    reasoningTokens: { label: "Reasoning Tokens", icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {}) },
+    cachedInputTokens: { label: "Cached Input Tokens", icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {}) },
+    inputDetails: { label: "Input Details", icon: /* @__PURE__ */ jsx(ArrowRightIcon, {}) },
+    outputDetails: { label: "Output Details", icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {}) }
+  };
+  const commonTokenPresentations = {
+    totalTokens: { label: "Total LLM Tokens", icon: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: cn("flex gap-6 flex-wrap", className), children: usageAsArray.map(({ key, value }) => {
+    const isObject = isTokenDetailsObject(value);
+    return /* @__PURE__ */ jsxs("div", { className: "bg-surface3 p-3 px-4 rounded-lg text-ui-md grow", children: [
+      /* @__PURE__ */ 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__ */ jsx("span", { className: "text-ui-md", children: tokenPresentations?.[key]?.label }),
+            !isObject && /* @__PURE__ */ jsx("b", { className: "text-ui-lg", children: value })
+          ]
+        }
+      ),
+      isObject && /* @__PURE__ */ 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__ */ jsxs(
+          "dl",
+          {
+            className: "grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 justify-between text-neutral3",
+            children: [
+              /* @__PURE__ */ jsx("dt", { children: detailKeyLabels[detailKey] || detailKey }),
+              /* @__PURE__ */ jsx("dd", { children: detailValue })
+            ]
+          },
+          detailKey
+        );
+      }) })
+    ] }, key);
+  }) });
+}
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  toggleChildren,
+  expandAllDescendants,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren
+}) {
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex  gap-1", children: [
+        /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+          allDescendantsExpanded ? totalDescendants : numOfChildren,
+          " ",
+          isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsx(ChevronsUpIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
+        ] }),
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+          totalDescendants,
+          " ",
+          /* @__PURE__ */ jsx(ChevronsDownIcon, {})
+        ] })
+      ] }) : null
+    }
+  );
+}
+function ExpandButton({ onClick, children, className }) {
+  return /* @__PURE__ */ jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(TimelineStructureSign, { isLastChild }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs(HoverCard.Root, { openDelay: 250, children: [
+    /* @__PURE__ */ jsxs(
+      HoverCard.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__ */ jsx("div", { className: cn("w-full p-1.5 rounded-md bg-surface4 transition-colors duration-1000"), children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-1.5 rounded-sm overflow-hidden", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex justify-end text-neutral3 text-ui-xs"), children: [
+            (span.latency / 1e3).toFixed(3),
+            " s"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsxs(
+      HoverCard.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__ */ jsx("div", { className: cn("text-ui-sm flex items-center gap-2 mb-2 mt-1"), children: "Span Timing" }),
+          /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
+            /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Latency" }),
+            /* @__PURE__ */ jsxs(DataKeysAndValues.Value, { children: [
+              span.latency,
+              " ms"
+            ] }),
+            /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started at" }),
+            /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.startTime ? format$1(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
+            /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended at" }),
+            /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.endTime ? format$1(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
+            /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
+            /* @__PURE__ */ jsxs(DataKeysAndValues.Value, { children: [
+              spanStartTimeShift,
+              "ms"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(HoverCard.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__ */ jsxs(DataKeysAndValues, { numOfCol, className, children: [
+    rootSpan.entityId && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Entity Id" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: rootSpan.entityName || rootSpan.entityId })
+    ] }),
+    rootSpan.entityType && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Entity Type" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: rootSpan.entityType })
+    ] }),
+    /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Status" }),
+    /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: statusLabel }),
+    startedAt && endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Duration" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: `${(endedAt.getTime() - startedAt.getTime()).toLocaleString()}ms` })
+    ] }),
+    startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started at" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: format(startedAt, "MMM dd, h:mm:ss.SSS aaa") })
+    ] }),
+    endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended at" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: 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;
+  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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TimelineNameCol,
+      {
+        span,
+        spanUI,
+        isFaded,
+        depth,
+        onSpanClick,
+        selectedSpanId,
+        isLastChild,
+        hasChildren,
+        isRootSpan,
+        isExpanded
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimelineExpandCol,
+      {
+        isSelected: selectedSpanId === span.id,
+        isFaded,
+        isExpanded,
+        toggleChildren,
+        expandAllDescendants,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren
+      }
+    ),
+    /* @__PURE__ */ 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__ */ 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 = 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__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ 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__ */ jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    usedSpanTypes.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1 text-ui-sm text-neutral3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block w-1.5 h-1.5 rounded-full shrink-0",
+            style: { backgroundColor: spanUI?.color }
+          }
+        ),
+        spanUI?.label || type
+      ] }, type);
+    }) }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: cn("grid grid-cols-[1fr_auto] gap-3 items-start "), children: [
+      /* @__PURE__ */ jsx(
+        PropertyFilterApplied,
+        {
+          fields: filterFields,
+          tokens: filterTokens,
+          onTokensChange: onFilterTokensChange,
+          disabled: isLoading,
+          autoFocusFieldId: autoFocusFilterFieldId
+        }
+      ),
+      hasActiveFilters && /* @__PURE__ */ 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] = useState(false);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
+  const contentRef = useRef(null);
+  const [selectedSpanId, setSelectedSpanId] = useState(initialSpanId ?? void 0);
+  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]);
+  useEffect(() => {
+    if (!selectedSpanId || !contentRef.current) return;
+    const el = contentRef.current.querySelector(`[data-span-id="${selectedSpanId}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedSpanId]);
+  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = useState([]);
+  useEffect(() => {
+    if (hierarchicalSpans.length > 0) {
+      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
+    }
+  }, [hierarchicalSpans]);
+  const rootSpan = 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__ */ jsxs(DataPanel, { collapsed, children: [
+    /* @__PURE__ */ jsx(DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsx(DataPanel.Heading, { children: "Trace Timeline" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
+        "Trace ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          truncateString(traceId, 12)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        onCollapsedChange && /* @__PURE__ */ jsx(
+          ButtonWithTooltip,
+          {
+            size: "md",
+            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            onClick: () => setCollapsed(!collapsed),
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsDownUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous trace",
+            nextLabel: "Next trace"
+          }
+        ),
+        showOpenTracePageLink && /* @__PURE__ */ jsx(
+          ButtonWithTooltip,
+          {
+            as: LinkComponent,
+            href: traceHref,
+            size: "md",
+            tooltipContent: "Open trace page",
+            "aria-label": "Open trace page",
+            children: /* @__PURE__ */ jsx(Link2Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }) }),
+    !collapsed && (isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading trace..." }) : hierarchicalSpans.length === 0 ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : /* @__PURE__ */ jsxs(DataPanel.Content, { ref: contentRef, children: [
+      !isOnTracePage && rootSpan && /* @__PURE__ */ jsx(TraceKeysAndValues, { rootSpan, className: "mb-6" }),
+      !isOnTracePage && (onEvaluateTrace || onSaveAsDatasetItem) && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex justify-between items-center gap-4", children: [
+        onEvaluateTrace && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onEvaluateTrace, children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleGaugeIcon, {}) }),
+          "Evaluate Trace"
+        ] }),
+        onSaveAsDatasetItem && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId }), children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(SaveIcon, {}) }),
+          "Save as Dataset Item"
+        ] })
+      ] }),
+      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral2 uppercase tracking-widest [&>svg]:size-3.5", children: [
+      icon,
+      sectionTitle
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "› Span ",
+      /* @__PURE__ */ jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.spanId
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "› Trace ",
+      /* @__PURE__ */ jsxs("b", { className: "text-neutral3", children: [
+        "#",
+        span.traceId
+      ] })
+    ] })
+  ] });
+}
+function SpanDataPanelView({
+  traceId,
+  spanId,
+  span,
+  isLoading,
+  onClose,
+  onPrevious,
+  onNext,
+  activeTab,
+  onTabChange,
+  scoringTabSlot,
+  scoringTabBadge
+}) {
+  return /* @__PURE__ */ jsxs(DataPanel, { children: [
+    /* @__PURE__ */ jsxs(DataPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          DataPanel.NextPrevNav,
+          {
+            onPrevious,
+            onNext,
+            previousLabel: "Previous span",
+            nextLabel: "Next span"
+          }
+        ),
+        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(DataPanel.LoadingData, { children: "Loading span details..." }) : !span ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    isTokenLimitExceeded(span) && /* @__PURE__ */ jsxs(Alert, { variant: "warning", className: "mb-3", children: [
+      /* @__PURE__ */ jsx(AlertTitle, { children: "Token Limit Exceeded" }),
+      /* @__PURE__ */ jsx(AlertDescription, { as: "p", children: getTokenLimitMessage(span) })
+    ] }),
+    usage && /* @__PURE__ */ jsx(SpanTokenUsage, { usage, className: "mb-3" }),
+    /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
+      span.parentSpanId == null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        span.traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
+        ] }),
+        span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Tags" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })
+        ] }),
+        span.runId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Run Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Run Id to clipboard", copyValue: span.runId, children: span.runId })
+        ] }),
+        span.threadId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Thread Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Thread Id to clipboard", copyValue: span.threadId, children: span.threadId })
+        ] }),
+        span.sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Session Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Session Id to clipboard",
+              copyValue: span.sessionId,
+              children: span.sessionId
+            }
+          )
+        ] }),
+        span.requestId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Request Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Request Id to clipboard",
+              copyValue: span.requestId,
+              children: span.requestId
+            }
+          )
+        ] }),
+        span.resourceId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Resource Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Resource Id to clipboard",
+              copyValue: span.resourceId,
+              children: span.resourceId
+            }
+          )
+        ] }),
+        span.userId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "User Id" }),
+          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy User Id to clipboard", copyValue: span.userId, children: span.userId })
+        ] }),
+        span.organizationId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Organization Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Organization Id to clipboard",
+              copyValue: span.organizationId,
+              children: span.organizationId
+            }
+          )
+        ] }),
+        span.experimentId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Experiment Id" }),
+          /* @__PURE__ */ jsx(
+            DataKeysAndValues.ValueWithCopyBtn,
+            {
+              copyTooltip: "Copy Experiment Id to clipboard",
+              copyValue: span.experimentId,
+              children: span.experimentId
+            }
+          )
+        ] })
+      ] }),
+      span.name && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Name" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.name })
+      ] }),
+      span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Type" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.spanType })
+      ] }),
+      span.startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      span.endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      durationMs != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Duration" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 mt-3", children: [
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Input",
+          dialogTitle: buildDialogTitle("Input", /* @__PURE__ */ jsx(FileInputIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Output",
+          dialogTitle: buildDialogTitle("Output", /* @__PURE__ */ jsx(FileOutputIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Metadata",
+          dialogTitle: buildDialogTitle("Metadata", /* @__PURE__ */ jsx(BracesIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataPanel.CodeSection,
+        {
+          title: "Attributes",
+          dialogTitle: buildDialogTitle("Attributes", /* @__PURE__ */ jsx(BracesIcon, {}), { spanId, traceId }),
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+  if (!scoringTabSlot) {
+    return /* @__PURE__ */ jsx(DataPanel.Content, { children: detailsBody });
+  }
+  return /* @__PURE__ */ jsx(DataPanel.Content, { children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "details", value: activeTab, onValueChange: onTabChange, children: [
+    /* @__PURE__ */ jsxs(TabList, { children: [
+      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxs(Tab, { value: "scoring", children: [
+        "Scoring ",
+        scoringTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          "(",
+          scoringTabBadge,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabContent, { value: "details", children: detailsBody }),
+    /* @__PURE__ */ 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__ */ jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataDetailsPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(DataDetailsPanel.LoadingData, { children: "Loading span..." }) : !span ? /* @__PURE__ */ jsx(DataDetailsPanel.NoData, { children: "Span not found." }) : /* @__PURE__ */ jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxs(KV$1, { children: [
+        span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Type" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Started" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Input",
+          icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Output",
+          icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Metadata",
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Attributes",
+          icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+}
+
+function TraceDetailsView({
+  traceId,
+  spans,
+  isLoading,
+  onClose,
+  onSpanSelect,
+  selectedSpanId
+}) {
+  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = useState([]);
+  useEffect(() => {
+    if (hierarchicalSpans.length > 0) {
+      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
+    }
+  }, [hierarchicalSpans]);
+  const handleSpanClick = (id) => {
+    onSpanSelect?.(selectedSpanId === id ? void 0 : id);
+  };
+  return /* @__PURE__ */ jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataDetailsPanel.Heading, { children: [
+        "Trace ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "# ",
+          traceId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(DataDetailsPanel.LoadingData, { children: "Loading trace..." }) : hierarchicalSpans.length === 0 ? /* @__PURE__ */ jsx(DataDetailsPanel.NoData, { children: "No spans found for this trace." }) : /* @__PURE__ */ jsx(DataDetailsPanel.Content, { children: /* @__PURE__ */ jsx(
+      TraceTimeline,
+      {
+        hierarchicalSpans,
+        onSpanClick: handleSpanClick,
+        selectedSpanId: selectedSpanId ?? void 0,
+        expandedSpanIds,
+        setExpandedSpanIds
+      }
+    ) })
+  ] });
+}
+
+function TracesLayout({
+  listSlot,
+  tracePanelSlot,
+  spanPanelSlot,
+  scorePanelSlot,
+  traceCollapsed
+}) {
+  const hasSidePanel = !!tracePanelSlot;
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
+      TracesDataList.RowButton,
+      {
+        onClick: () => onTraceClick(trace),
+        className: cn(isFeatured && "bg-surface4"),
+        children: [
+          /* @__PURE__ */ jsx(TracesDataList.IdCell, { traceId: trace.traceId }),
+          /* @__PURE__ */ jsx(TracesDataList.DateCell, { timestamp: displayDate }),
+          /* @__PURE__ */ jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
+          /* @__PURE__ */ jsx(TracesDataList.NameCell, { name: trace.name }),
+          /* @__PURE__ */ jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
+          /* @__PURE__ */ jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
+          /* @__PURE__ */ jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
+        ]
+      },
+      trace.traceId
+    );
+  });
+  return /* @__PURE__ */ jsxs(TracesDataList, { columns: COLUMNS$1, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs(TracesDataList.Top, { children: [
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "ID" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Date" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Time" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Name" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Input" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Entity" }),
+      /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Status" })
+    ] }),
+    traces.length === 0 ? /* @__PURE__ */ jsx(
+      TracesDataList.NoMatch,
+      {
+        message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
+      }
+    ) : groupByThread ? (() => {
+      const { groups, ungrouped } = groupTracesByThread(traces);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        groups.map((group) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxs(TracesDataList.SubHeading, { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "uppercase", children: "Thread" }),
+            threadTitles?.[group.threadId] && /* @__PURE__ */ jsxs("b", { children: [
+              "'",
+              threadTitles[group.threadId],
+              "'"
+            ] }),
+            /* @__PURE__ */ jsxs("b", { children: [
+              "# ",
+              group.threadId
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-neutral2", children: [
+              "(",
+              group.traces.length,
+              ")"
+            ] })
+          ] }) }),
+          renderRows(group.traces)
+        ] }, group.threadId)),
+        ungrouped.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxs(TracesDataList.SubHeading, { className: "flex gap-2 uppercase", children: [
+            /* @__PURE__ */ jsx("span", { children: "No thread" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-neutral2", children: [
+              "(",
+              ungrouped.length,
+              ")"
+            ] })
+          ] }) }),
+          renderRows(ungrouped)
+        ] })
+      ] });
+    })() : renderRows(traces),
+    traces.length > 0 && /* @__PURE__ */ jsx(
+      TracesDataList.NextPageLoading,
+      {
+        isLoading: isFetchingNextPage,
+        hasMore: hasNextPage,
+        setEndOfListElement
+      }
+    )
+  ] });
+}
+
+function TracesErrorContent({ error, resource, errorTitle }) {
+  if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsx(SessionExpired, {});
+  if (is403ForbiddenError(error)) return /* @__PURE__ */ jsx(PermissionDenied, { resource });
+  const parsed = error instanceof Error ? parseError(error) : void 0;
+  return /* @__PURE__ */ 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 = useMastraClient();
+  return 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 = useMastraClient();
+  return 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 = useMastraClient();
+  return 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 = useMastraClient();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = useInfiniteQuery({
+    queryKey: ["traces", filters],
+    queryFn: ({ pageParam }) => fetchTracesFn({
+      client,
+      page: pageParam,
+      perPage: TRACES_PER_PAGE,
+      filters
+    }),
+    initialPageParam: 0,
+    getNextPageParam: getTracesNextPageParam,
+    select: selectUniqueTraces,
+    placeholderData: keepPreviousData,
+    retry: false,
+    // Disable polling on 403 to prevent flickering
+    refetchInterval: (query2) => is403ForbiddenError(query2.state.error) ? false : 3e3
+  });
+  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  useEffect(() => {
+    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  return { ...query, setEndOfListElement };
+};
+
+const useTags = () => {
+  const client = useMastraClient();
+  return 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: EntityType.AGENT,
+  WORKFLOW: EntityType.WORKFLOW_RUN,
+  SCORER: EntityType.SCORER,
+  INGEST: 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 = useMastraClient();
+  const queryKey = entityType ? ["observability-entity-names", "by-type", entityType] : ["observability-entity-names", "all", rootOnly ? "root-only" : "all-types"];
+  return 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 = useMastraClient();
+  return useQuery({
+    queryKey: ["observability-environments"],
+    queryFn: async () => {
+      try {
+        return await client.getEnvironments();
+      } catch {
+        return { environments: [] };
+      }
+    },
+    select: (data) => data?.environments ?? [],
+    retry: false
+  });
+};
+
+const useServiceNames = () => {
+  const client = useMastraClient();
+  return 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 = 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 = 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 = 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 = 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 = 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 = 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 = useMemo(
+    () => ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(TRACE_ROOT_ENTITY_TYPE_PARAM)),
+    [searchParams]
+  );
+  const selectedStatus = useMemo(() => {
+    const value = searchParams.get(TRACE_STATUS_PARAM);
+    return value && TRACE_STATUS_VALUES.has(value) ? value : void 0;
+  }, [searchParams]);
+  const filterTokens = useMemo(() => getTracePropertyFilterTokens(searchParams), [searchParams]);
+  const handleTraceClick = 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 = useCallback(() => handleTraceClick(""), [handleTraceClick]);
+  const handleSpanChange = 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 = useCallback(() => handleSpanChange(null), [handleSpanChange]);
+  const handleSpanTabChange = 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 = 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 = 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 = 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 = 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 = 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] = useState(() => loadTraceFiltersFromStorage(storageKey) !== null);
+  const handleSave = 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 = useCallback(() => {
+    clearSavedTraceFilters(storageKey);
+    setHasSavedFilters(false);
+    const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE$1;
+    if (text !== false) toast.success(text);
+  }, [storageKey, messages?.cleared]);
+  const hydratedRef = useRef(false);
+  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] = useState(false);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
+  const date = toDate(log.timestamp);
+  return /* @__PURE__ */ jsxs(DataDetailsPanel, { collapsed, children: [
+    /* @__PURE__ */ jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxs(DataDetailsPanel.Heading, { children: [
+        "Log ",
+        /* @__PURE__ */ jsx("b", { children: format(date, "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        onCollapsedChange && /* @__PURE__ */ jsx(
+          ButtonWithTooltip,
+          {
+            size: "md",
+            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            onClick: () => setCollapsed(!collapsed),
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsDownUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
+          /* @__PURE__ */ jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Previous log", onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsx(ArrowUpIcon, {}) }),
+          /* @__PURE__ */ jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Next log", onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-ui-md text-neutral4 font-mono wrap-break-word whitespace-pre-wrap", children: log.message }),
+      (log.traceId || log.spanId) && /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2 my-8", "[&>button]:justify-between [&>button]:overflow-hidden"), children: [
+        log.traceId && /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "md",
+              className: "min-w-0 flex-1 overflow-hidden",
+              onClick: () => onTraceClick?.(log.traceId),
+              children: [
+                /* @__PURE__ */ jsx(ArrowRightIcon, {}),
+                /* @__PURE__ */ jsx("span", { children: "Trace" }),
+                /* @__PURE__ */ jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.traceId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(CopyButton, { content: log.traceId, size: "md", tooltip: "Copy Trace ID to clipboard" })
+        ] }),
+        log.spanId && /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ 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__ */ jsx(ArrowRightIcon, {}),
+                /* @__PURE__ */ jsx("span", { children: "Span" }),
+                /* @__PURE__ */ jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.spanId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(CopyButton, { content: log.spanId, size: "md", tooltip: "Copy Span ID to clipboard" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(KV, { className: "mb-6", children: [
+        log.entityType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Entity Type" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: log.entityType })
+        ] }),
+        log.entityName && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Entity Name" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: log.entityName })
+        ] }),
+        log.serviceName && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Service" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: log.serviceName })
+        ] }),
+        log.environment && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Environment" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: log.environment })
+        ] }),
+        log.source && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Source" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: log.source })
+        ] }),
+        log.metadata && Object.keys(log.metadata).length > 0 && /* @__PURE__ */ jsx(Fragment, { children: Object.entries(log.metadata).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: key }),
+          /* @__PURE__ */ jsx(KV.Value, { children: String(value) })
+        ] }, key)) })
+      ] }),
+      log.data && Object.keys(log.data).length > 0 && /* @__PURE__ */ 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__ */ jsx(SessionExpired, {});
+  if (is403ForbiddenError(error)) return /* @__PURE__ */ jsx(PermissionDenied, { resource });
+  const message = error instanceof Error ? error.message : void 0;
+  return /* @__PURE__ */ jsx(ErrorState, { title: errorTitle, message: message ?? "Unknown error" });
+}
+
+function LogsLayout({ listSlot, logPanelSlot, tracePanelSlot, spanPanelSlot, logCollapsed }) {
+  const hasSidePanel = !!logPanelSlot;
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(DataListSkeleton, { columns: COLUMNS });
+  }
+  return /* @__PURE__ */ jsxs(LogsDataList, { columns: COLUMNS, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs(LogsDataList.Top, { children: [
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Date" }),
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Time" }),
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Level" }),
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Entity" }),
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Message" }),
+      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Data" })
+    ] }),
+    logs.length === 0 ? /* @__PURE__ */ 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__ */ jsxs(
+        LogsDataList.RowButton,
+        {
+          onClick: () => onLogClick(log),
+          className: cn(isFeatured && "bg-surface4"),
+          children: [
+            /* @__PURE__ */ jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
+            /* @__PURE__ */ jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
+            /* @__PURE__ */ jsx(LogsDataList.LevelCell, { level: log.level }),
+            /* @__PURE__ */ jsx(LogsDataList.EntityCell, { entityType: log.entityType, entityName: log.entityName }),
+            /* @__PURE__ */ jsx(LogsDataList.MessageCell, { message: log.message }),
+            /* @__PURE__ */ jsx(LogsDataList.DataCell, { data: log.data })
+          ]
+        },
+        id
+      );
+    }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("grid grid-cols-[1fr_auto] gap-3 items-start"), children: [
+    /* @__PURE__ */ jsx(
+      PropertyFilterApplied,
+      {
+        fields: filterFields,
+        tokens: filterTokens,
+        onTokensChange: onFilterTokensChange,
+        disabled: isLoading,
+        autoFocusFieldId: autoFocusFilterFieldId
+      }
+    ),
+    hasActiveFilters && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(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 = useMastraClient();
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = 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;
+  useEffect(() => {
+    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  return { ...query, data: query.data, setEndOfListElement };
+};
+
+const LOGS_ROOT_ENTITY_TYPES = {
+  AGENT: EntityType.AGENT,
+  WORKFLOW: EntityType.WORKFLOW_RUN,
+  SCORER: EntityType.SCORER,
+  INGEST: 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 = 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 = 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 = 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 = 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 = useMemo(
+    () => LOGS_ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(LOGS_ROOT_ENTITY_TYPE_PARAM)),
+    [searchParams]
+  );
+  const filterTokens = useMemo(() => getLogsPropertyFilterTokens(searchParams), [searchParams]);
+  const handleFeaturedChange = 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 = useCallback(
+    (tokens) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          applyLogsPropertyFilterTokens(next, tokens);
+          clearSelectionParams(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
+  const handleFilterTokensChange = applyFilterTokens;
+  const handleDateChange = 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 = 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 = 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 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] = useState(() => loadLogsFiltersFromStorage(storageKey) !== null);
+  const handleSave = 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 = useCallback(() => {
+    clearSavedLogsFilters(storageKey);
+    setHasSavedFilters(false);
+    const text = messages?.cleared ?? DEFAULT_CLEARED_MESSAGE;
+    if (text !== false) toast.success(text);
+  }, [storageKey, messages?.cleared]);
+  const hydratedRef = useRef(false);
+  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 = useMemo(() => buildLogIds(logs), [logs]);
+  const idToLog = 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 = useCallback((log) => logIdMap.get(log), [logIdMap]);
+  const handleLogClick = 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
+  };
+}
+
+export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BarListContent, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CHART_COLORS, CONTEXT_FIELD_IDS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorBoundary, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, KpiCardView, LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_PRESET_VALUES, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_FIELD_IDS, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPES, LOGS_ROOT_ENTITY_TYPE_OPTIONS, LOGS_ROOT_ENTITY_TYPE_PARAM, LOG_LEVEL_OPTIONS, LOG_LEVEL_VALUES, Label, LatencyCardView, LatencyIcon, LineHeights, ListSearch, LogDetailsView, Logo, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsErrorContent, LogsIcon, LogsLayout, LogsListView, LogsToolbar, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, MistralIcon, ModelUsageCostCardView, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, NoLogsInfo, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, PickMultiPanel, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, PropertyFilterCreator, ROOT_ENTITY_TYPES, ROOT_ENTITY_TYPE_OPTIONS, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresCardView, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, SpanDataPanelView, SpanDetailsView, SpanTokenUsage, Spinner, StackedRunsBars, StatusBadge, SubSectionRoot, Switch, TRACE_DATE_FROM_PARAM, TRACE_DATE_PRESET_PARAM, TRACE_DATE_PRESET_VALUES, TRACE_DATE_TO_PARAM, TRACE_PROPERTY_FILTER_FIELD_IDS, TRACE_PROPERTY_FILTER_PARAM_BY_FIELD, TRACE_ROOT_ENTITY_TYPE_PARAM, TRACE_STATUS_OPTIONS, TRACE_STATUS_PARAM, TRACE_STATUS_VALUES, TRACE_SYNTHETIC_FILTER_FIELD_IDS, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, TimelineExpandCol, TimelineNameCol, TimelineStructureSign, TimelineTimingCol, TokenUsageByAgentCardView, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDataPanelView, TraceDetailsView, TraceIcon, TraceKeysAndValues, TraceTimeline, TraceTimelineSpan, TracesDataList, TracesErrorContent, TracesLayout, TracesListView, TracesToolbar, TracesVolumeCardView, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsListFilters, buildTraceListFilters, buttonVariants, clearSavedLogsFilters, clearSavedTraceFilters, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createLogsPropertyFilterFields, createTracePropertyFilterFields, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getItemListColumnTemplate, getLogsPropertyFilterTokens, getMainContentContentClassName, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getShortId$1 as getShortId, getSpanDescendantIds, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getTokenLimitMessage, getTracePropertyFilterTokens, groupTracesByThread, hasAnyLogsFilterParams, hasAnyTraceFilterParams, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, jsonSchemaToFields, loadLogsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveTraceFiltersToStorage, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, spanTypePrefixes, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAgentRunsKpiMetrics, useAutoscroll, useAvgScoreKpiMetrics, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useEntityNames, useEnvironments, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMainSidebar, useMaybeSidebar, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTableKeyboardNavigation, useTags, useTokenUsageByAgentMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceSpanNavigation, useTraceSpans, useTraceUrlState, useTraceVolumeMetrics, useTraces, variableHighlight };
 //# sourceMappingURL=index.es.js.map