@mastra/playground-ui 20.0.1-alpha.2 → 20.0.2-alpha.0

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { useMastraClient, resolveToChildMessages, useCreateWorkflowRun, useStrea
 import { useQuery, useQueryClient, useMutation, useInfiniteQuery, useQueries, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useComposer, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useAuiState, useAssistantState, useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, MoveRight, Copy, Folder, Pencil, Link2, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, FlaskConical, Database, ThumbsUp, ThumbsDown, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, TrendingUpIcon, TrendingDownIcon, FilterIcon, Upload, ClockIcon, BanIcon, MoveRightIcon, GitCompare, ChevronLeftIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
+import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, MoveRight, Copy, Folder, Pencil, Link2, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, FlaskConical, Database, ThumbsUp, ThumbsDown, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, TrendingUpIcon, TrendingDownIcon, FilterIcon, Upload, ClockIcon, BanIcon, MoveRightIcon, GitCompare, ChevronLeftIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, ChevronsUpDownIcon, ChevronsDownUpIcon, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
 import { S as Shadows, G as Glows, B as BorderColors, C as Colors, b as Sizes, F as FontSizes, L as LineHeights, a as BorderRadius, c as Spacings } from './spacings-CKfS0_hW.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -5725,7 +5725,7 @@ function buildLightTheme() {
   ]);
   return [editorTheme, syntaxHighlighting(highlightStyle)];
 }
-const useCodemirrorTheme$1 = () => {
+const useCodemirrorTheme$2 = () => {
   const isDark = useIsDarkMode();
   return useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
@@ -5744,7 +5744,7 @@ const CodeEditor = forwardRef(
     lineNumbers = true,
     ...props
   }, ref) => {
-    const theme = useCodemirrorTheme$1();
+    const theme = useCodemirrorTheme$2();
     const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
     const extensions = useMemo(() => {
       const exts = [];
@@ -8357,7 +8357,7 @@ const CodeDialogContent = ({
   data,
   language = "auto"
 }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const getExtensions = (content) => {
     if (language === "javascript") {
       return [javascript(), EditorView.lineWrapping];
@@ -10352,7 +10352,7 @@ const JsonField = ({
   helperText,
   exampleCode
 }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const { handleCopy } = useCopyToClipboard$1({ text: value });
   const { handleCopy: handleCopyExample } = useCopyToClipboard$1({ text: exampleCode ?? "{}" });
   const [fieldError, setFieldError] = useState(null);
@@ -12834,7 +12834,7 @@ function EntityListTopCellWithTooltip({ children, tooltip, className }) {
     /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
   ] });
 }
-const breakpointClasses = {
+const breakpointClasses$1 = {
   sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
   md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
   lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
@@ -12849,7 +12849,7 @@ function EntityListTopCellSmart({
   className
 }) {
   const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
-  const bp = breakpointClasses[breakpoint];
+  const bp = breakpointClasses$1[breakpoint];
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
     /* @__PURE__ */ jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
@@ -12882,14 +12882,14 @@ const EntityList = Object.assign(EntityListRoot, {
   NoMatch: EntityListNoMatch
 });
 
-const widths$2 = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const widths$3 = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function EntityListSkeleton({ columns, numberOfRows = 3 }) {
   const columnParts = columns.trim().split(/\s+/);
   const columnCount = columnParts.length;
   const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
   const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths$2.length;
-    return widths$2[index];
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths$3.length;
+    return widths$3[index];
   };
   return /* @__PURE__ */ jsx(EntityListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx(
     "div",
@@ -13080,7 +13080,7 @@ const WorkflowRunOptions = () => {
 };
 
 const TracingRunOptions = () => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const { settings, setSettings, entityType } = useTracingSettings();
   const handleChange = (value) => {
     if (!value) {
@@ -17846,7 +17846,7 @@ const AgentAdvancedSettings = () => {
   const [providerOptionsValue, setProviderOptionsValue] = useState("");
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState(null);
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const { handleCopy } = useCopyToClipboard$1({ text: providerOptionsValue });
   const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
   useEffect(() => {
@@ -18466,7 +18466,7 @@ const EmptyAgentsTable = () => {
 const RequestContext = () => {
   const { requestContext, setRequestContext } = usePlaygroundStore();
   const [requestContextValue, setRequestContextValue] = useState("");
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const presets = useRequestContextPresets();
   const [selectedPreset, setSelectedPreset] = useState(() => {
     if (!presets || !requestContext) return "__custom__";
@@ -19049,11 +19049,11 @@ const EntryList = Object.assign(EntryListRoot, {
   EntryStatus: EntryListEntryStatusCol
 });
 
-const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const widths$2 = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function EntryListEntriesSkeleton({ columns, numberOfRows = 3 }) {
   const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$1.length;
-    return widths$1[index];
+    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$2.length;
+    return widths$2[index];
   };
   return /* @__PURE__ */ jsx(EntryListEntries, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx(EntryListEntry, { columns, children: (columns || []).map((col, colIdx) => {
     const key = `${col.name}-${colIdx}`;
@@ -19273,17 +19273,17 @@ function buildSideDialogLightTheme() {
   ]);
   return [editorTheme, syntaxHighlighting(highlightStyle)];
 }
-const useCodemirrorTheme = () => {
+const useCodemirrorTheme$1 = () => {
   const isDark = useIsDarkMode();
   return useMemo(() => isDark ? buildSideDialogDarkTheme() : buildSideDialogLightTheme(), [isDark]);
 };
 function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const [showAsMultilineText, setShowAsMultilineText] = useState(false);
   const hasMultilineText = useMemo(() => {
     try {
       const parsed = JSON.parse(codeStr);
-      return containsInnerNewline(parsed || "");
+      return containsInnerNewline$1(parsed || "");
     } catch {
       return false;
     }
@@ -19303,14 +19303,14 @@ function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }
     codeStr && /* @__PURE__ */ jsx("div", { className: "dark:bg-black/20 bg-surface3 p-4 overflow-hidden rounded-xl border dark:border-white/10 border-border1 text-neutral4 text-ui-md break-all max-h-[30vh] overflow-y-auto", children: simplified ? /* @__PURE__ */ jsx("div", { className: "text-neutral4 font-mono break-all px-2", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView.lineWrapping], theme, value: finalCodeStr }) })
   ] });
 }
-function containsInnerNewline(obj) {
+function containsInnerNewline$1(obj) {
   if (typeof obj === "string") {
     const idx = obj.indexOf("\n");
     return idx !== -1 && idx !== obj.length - 1;
   } else if (Array.isArray(obj)) {
-    return obj.some((item) => containsInnerNewline(item));
+    return obj.some((item) => containsInnerNewline$1(item));
   } else if (obj && typeof obj === "object") {
-    return Object.values(obj).some((value) => containsInnerNewline(value));
+    return Object.values(obj).some((value) => containsInnerNewline$1(value));
   }
   return false;
 }
@@ -22062,7 +22062,7 @@ const AgentMetadata = ({ agentId }) => {
   const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
   const { mutate: reorderModelList } = useReorderModelList(agentId);
   const { mutateAsync: updateModelInModelList } = useUpdateModelInModelList(agentId);
-  const codemirrorTheme = useCodemirrorTheme$1();
+  const codemirrorTheme = useCodemirrorTheme$2();
   const hasMemoryEnabled = Boolean(memory?.result);
   if (isLoading || isMemoryLoading) {
     return /* @__PURE__ */ jsx(Skeleton, { className: "h-full" });
@@ -22781,7 +22781,7 @@ const ToolExecutorContent = ({
   toolType,
   requestContextSchema
 }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const code = JSON.stringify(result ?? {}, null, 2);
   const [selectedTab, setSelectedTab] = useState("input-data");
   const { schemaValues } = useSchemaRequestContext();
@@ -24562,7 +24562,7 @@ function removeFieldAtPath(fields, path, fieldId) {
   });
 }
 
-function Root({
+function Root$1({
   onChange,
   onFieldsChange,
   defaultValue,
@@ -24843,7 +24843,7 @@ function AddField({ children, ...props }) {
 }
 
 const JSONSchemaForm = {
-  Root: Root,
+  Root: Root$1,
   Field: Field,
   FieldList: FieldList,
   FieldName: FieldName,
@@ -33107,7 +33107,7 @@ const useScoresByExperimentId = (experimentId, experimentStatus) => {
   });
 };
 
-const formatHierarchicalSpans = (spans) => {
+const formatHierarchicalSpans$1 = (spans) => {
   if (!spans || spans.length === 0) {
     return [];
   }
@@ -33307,7 +33307,7 @@ Token usage: ${inputTokens} input + ${outputTokens} output = ${totalTokens} tota
   return `The model stopped generating because it reached the maximum token limit (${totalTokens} tokens). The response was truncated and may be incomplete.`;
 }
 
-function SpanDetails({ span }) {
+function SpanDetails$1({ span }) {
   if (!span) {
     return null;
   }
@@ -33599,7 +33599,7 @@ function SpanTabs({
     /* @__PURE__ */ jsx(TabContent, { value: "details", children: /* @__PURE__ */ jsxs(Sections, { children: [
       span?.attributes?.usage ? /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }) : null,
       /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo }),
-      /* @__PURE__ */ jsx(SpanDetails, { span })
+      /* @__PURE__ */ jsx(SpanDetails$1, { span })
     ] }) }),
     /* @__PURE__ */ jsx(TabContent, { value: "scores", children: /* @__PURE__ */ jsxs(Sections, { children: [
       /* @__PURE__ */ jsxs(Section, { children: [
@@ -33747,20 +33747,20 @@ function TraceAsItemDialog({ traceDetails, traceId, isOpen, onClose, level = 2 }
   );
 }
 
-function getSpanDescendantIds$1(span) {
+function getSpanDescendantIds$2(span) {
   if (!span.spans || span.spans.length === 0) {
     return [];
   }
   const descendantIds = [];
   span.spans.forEach((childSpan) => {
     descendantIds.push(childSpan.id);
-    descendantIds.push(...getSpanDescendantIds$1(childSpan));
+    descendantIds.push(...getSpanDescendantIds$2(childSpan));
   });
   return descendantIds;
 }
 
 const spanTypePrefixes$1 = ["agent", "workflow", "model", "mcp", "tool", "other"];
-function getSpanTypeUi(type) {
+function getSpanTypeUi$1(type) {
   const typePrefix = type?.toLowerCase().split("_")[0];
   const spanTypeToUiElements = {
     agent: {
@@ -33807,7 +33807,7 @@ function getSpanTypeUi(type) {
   };
 }
 
-function TimelineExpandCol({
+function TimelineExpandCol$1({
   isSelected,
   isFaded,
   isExpanded,
@@ -33825,12 +33825,12 @@ function TimelineExpandCol({
         "bg-surface4": isSelected
       }),
       children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex  gap-1", children: [
-        /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: () => toggleChildren?.(), children: [
+        /* @__PURE__ */ jsxs(ExpandButton$2, { onClick: () => toggleChildren?.(), children: [
           allDescendantsExpanded ? totalDescendants : numOfChildren,
           " ",
           isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsx(ChevronsUpIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
         ] }),
-        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: () => expandAllDescendants?.(), children: [
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxs(ExpandButton$2, { onClick: () => expandAllDescendants?.(), children: [
           totalDescendants,
           " ",
           /* @__PURE__ */ jsx(ChevronsDownIcon, {})
@@ -33839,7 +33839,7 @@ function TimelineExpandCol({
     }
   );
 }
-function ExpandButton$1({ onClick, children, className }) {
+function ExpandButton$2({ onClick, children, className }) {
   return /* @__PURE__ */ jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -33867,7 +33867,7 @@ function SpanTypeIcon({ icon, color }) {
   );
 }
 
-function TimelineStructureSign({
+function TimelineStructureSign$1({
   isLastChild,
   hasChildren = false,
   expanded = false
@@ -33899,7 +33899,7 @@ function TimelineStructureSign({
   );
 }
 
-function TimelineNameCol({
+function TimelineNameCol$1({
   span,
   spanUI,
   isFaded,
@@ -33931,7 +33931,7 @@ function TimelineNameCol({
               "cursor-default": !hasChildren,
               "cursor-pointer": hasChildren
             }),
-            children: /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild, hasChildren: Boolean(hasChildren), expanded: isExpanded })
+            children: /* @__PURE__ */ jsx(TimelineStructureSign$1, { isLastChild, hasChildren: Boolean(hasChildren), expanded: isExpanded })
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -33955,7 +33955,7 @@ function TimelineNameCol({
   );
 }
 
-function TimelineTimingCol({
+function TimelineTimingCol$1({
   span,
   selectedSpanId,
   isFaded,
@@ -34058,7 +34058,7 @@ function TimelineTimingCol({
   ] });
 }
 
-function TraceTimelineSpan({
+function TraceTimelineSpan$1({
   span,
   depth = 0,
   onSpanClick,
@@ -34075,10 +34075,10 @@ function TraceTimelineSpan({
 }) {
   const hasChildren = span.spans && span.spans.length > 0;
   const numOfChildren = span.spans ? span.spans.length : 0;
-  const allDescendantIds = getSpanDescendantIds$1(span);
+  const allDescendantIds = getSpanDescendantIds$2(span);
   const totalDescendants = allDescendantIds.length;
   const isRootSpan = depth === 0;
-  const spanUI = getSpanTypeUi(span?.type);
+  const spanUI = getSpanTypeUi$1(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;
@@ -34109,7 +34109,7 @@ function TraceTimelineSpan({
   const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      TimelineNameCol,
+      TimelineNameCol$1,
       {
         span,
         spanUI,
@@ -34125,7 +34125,7 @@ function TraceTimelineSpan({
       }
     ),
     /* @__PURE__ */ jsx(
-      TimelineExpandCol,
+      TimelineExpandCol$1,
       {
         isSelected: selectedSpanId === span.id,
         isFaded,
@@ -34139,7 +34139,7 @@ function TraceTimelineSpan({
       }
     ),
     /* @__PURE__ */ jsx(
-      TimelineTimingCol,
+      TimelineTimingCol$1,
       {
         span,
         selectedSpanId,
@@ -34153,7 +34153,7 @@ function TraceTimelineSpan({
     hasChildren && isExpanded && span.spans?.map((childSpan, idx, array) => {
       const isLastChild2 = idx === array.length - 1;
       return /* @__PURE__ */ jsx(
-        TraceTimelineSpan,
+        TraceTimelineSpan$1,
         {
           span: childSpan,
           depth: depth + 1,
@@ -34174,7 +34174,7 @@ function TraceTimelineSpan({
   ] });
 }
 
-function TraceTimeline({
+function TraceTimeline$1({
   hierarchicalSpans = [],
   onSpanClick,
   selectedSpanId,
@@ -34207,7 +34207,7 @@ function TraceTimeline({
         "xl:grid-cols-[2fr_auto_1fr]": overallEndTime
       }),
       children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsx(
-        TraceTimelineSpan,
+        TraceTimelineSpan$1,
         {
           span,
           onSpanClick,
@@ -34254,7 +34254,8 @@ function SearchFieldBlock({
   placeholder = "Search...",
   onChange,
   onReset,
-  className
+  className,
+  size
 }) {
   return /* @__PURE__ */ jsxs(FieldBlock.Layout, { layout, className, children: [
     layout === "horizontal" ? /* @__PURE__ */ jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden$1, { children: label }) : label }) }) : null,
@@ -34269,6 +34270,7 @@ function SearchFieldBlock({
             value,
             placeholder,
             onChange,
+            size,
             className: "pl-10"
           }
         ),
@@ -34344,7 +34346,7 @@ function TraceTimelineTools({
     ) }),
     /* @__PURE__ */ jsxs(CombinedButtons, { children: [
       usedSpanTypes.map((item) => {
-        const spanUI = getSpanTypeUi(item);
+        const spanUI = getSpanTypeUi$1(item);
         const isFaded = fadedTypes?.includes(item);
         return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(
           Button,
@@ -34430,7 +34432,7 @@ function TraceDialog({
     }
   }, [selectedSpanId]);
   const hierarchicalSpans = useMemo(() => {
-    return formatHierarchicalSpans(traceSpans);
+    return formatHierarchicalSpans$1(traceSpans);
   }, [traceSpans]);
   const flatSpans = useMemo(() => {
     const flattenSpans = (spans) => {
@@ -34607,7 +34609,7 @@ function TraceDialog({
                         }
                       ),
                       /* @__PURE__ */ jsx(
-                        TraceTimeline,
+                        TraceTimeline$1,
                         {
                           hierarchicalSpans,
                           onSpanClick: handleSpanClick,
@@ -39420,7 +39422,7 @@ const EntityListPageLayout = Object.assign(EntityListPageLayoutRoot, {
   Top: EntityListPageLayoutTop
 });
 
-const ListSearch = ({ onSearch, label, placeholder, debounceMs = 300 }) => {
+const ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size }) => {
   const id = useId();
   const [value, setValue] = useState("");
   const debouncedSearch = useDebouncedCallback((val) => {
@@ -39449,6 +39451,7 @@ const ListSearch = ({ onSearch, label, placeholder, debounceMs = 300 }) => {
       value,
       onChange: handleChange,
       onReset: handleReset,
+      size,
       className: "w-full max-w-[30rem]"
     }
   );
@@ -40420,7 +40423,7 @@ function ProcessorPanel({ processorId }) {
   return /* @__PURE__ */ jsx(ProcessorDetailPanel, { processor });
 }
 function ProcessorDetailPanel({ processor }) {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const formId = useId();
   const [selectedPhase, setSelectedPhase] = useState(processor.phases[0] || "input");
   const [selectedAgentId, setSelectedAgentId] = useState(processor.configurations[0]?.agentId || "");
@@ -41617,14 +41620,14 @@ function TemplateFailure({ errorMsg, validationErrors }) {
   ] });
 }
 
-const DATE_PRESETS$2 = [
+const DATE_PRESETS$3 = [
   { 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$2.map((p) => p.value));
+const VALID_PRESETS = new Set(DATE_PRESETS$3.map((p) => p.value));
 function isValidPreset(value) {
   return typeof value === "string" && (VALID_PRESETS.has(value) || value === "custom");
 }
@@ -41671,7 +41674,7 @@ function useMetrics() {
 }
 function getDateRangeLabel(preset, customRange) {
   if (preset !== "custom") {
-    return DATE_PRESETS$2.find((p) => p.value === preset).label;
+    return DATE_PRESETS$3.find((p) => p.value === preset).label;
   }
   if (customRange?.from) {
     if (customRange.to) {
@@ -42897,7 +42900,7 @@ function MetricsDashboard() {
   ] });
 }
 
-const DATE_PRESETS$1 = [
+const DATE_PRESETS$2 = [
   { label: "Last 24 hours", value: "24h" },
   { label: "Last 3 days", value: "3d" },
   { label: "Last 7 days", value: "7d" },
@@ -42912,7 +42915,7 @@ function DateRangeSelector() {
       name: "date-range",
       labelIsHidden: true,
       value: datePreset,
-      options: DATE_PRESETS$1,
+      options: DATE_PRESETS$2,
       onValueChange: (value) => setDatePreset(value)
     }
   );
@@ -42993,7 +42996,7 @@ const CONTEXT_FILTER_CATEGORIES = CONTEXT_FIELD_IDS.map((id) => ({
   id,
   ...CONTEXT_FIELD_META[id]
 }));
-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 },
@@ -43007,17 +43010,17 @@ function buildDateWithTime(date, timeStr) {
   const combined = parse$1(timeStr, "h:mm a", dateOnly);
   return isValid(combined) ? combined : null;
 }
-const subContentClass = cn(
+const subContentClass$1 = cn(
   "bg-surface5 backdrop-blur-xl z-50 min-w-32 overflow-auto rounded-lg p-2 shadow-md",
   "data-[state=open]:animate-in data-[state=closed]:animate-out",
   "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
   "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
 );
-function PortalSubContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, { className: cn(subContentClass, className), ...props, children }) });
+function PortalSubContent$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, { className: cn(subContentClass$1, className), ...props, children }) });
 }
-const SUBMENU_SEARCH_THRESHOLD = 6;
-function SubMenuSearch({
+const SUBMENU_SEARCH_THRESHOLD$1 = 6;
+function SubMenuSearch$1({
   value,
   onChange,
   label = "Search"
@@ -43092,7 +43095,7 @@ function TracesTools({
     },
     []
   );
-  const datePresetLabel = DATE_PRESETS.find((p) => p.value === datePreset)?.label ?? "All";
+  const datePresetLabel = DATE_PRESETS$1.find((p) => p.value === datePreset)?.label ?? "All";
   const handleDatePresetSelect = (preset) => {
     onDatePresetChange?.(preset);
     if (preset === "custom") {
@@ -43103,7 +43106,7 @@ function TracesTools({
       setCustomRangeOpen(true);
       return;
     }
-    const entry = DATE_PRESETS.find((p) => p.value === preset);
+    const entry = DATE_PRESETS$1.find((p) => p.value === preset);
     if (entry?.ms) {
       onDateChange?.(new Date(Date.now() - entry.ms), "from");
       onDateChange?.(void 0, "to");
@@ -43247,7 +43250,7 @@ function TracesTools({
         /* @__PURE__ */ jsx(CalendarIcon, {}),
         datePresetLabel
       ] }) }),
-      /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: DATE_PRESETS.map((preset) => /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => handleDatePresetSelect(preset.value), children: preset.label }, preset.value)) })
+      /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: DATE_PRESETS$1.map((preset) => /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => handleDatePresetSelect(preset.value), children: preset.label }, preset.value)) })
     ] }),
     /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
       /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, children: [
@@ -43296,7 +43299,7 @@ function TracesTools({
             "Status",
             errorOnly && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
           ] }),
-          /* @__PURE__ */ jsxs(PortalSubContent, { children: [
+          /* @__PURE__ */ jsxs(PortalSubContent$1, { children: [
             /* @__PURE__ */ jsx(
               DropdownMenu.CheckboxItem,
               {
@@ -43322,8 +43325,8 @@ function TracesTools({
             "Entity Type",
             selectedEntity && selectedEntity.value !== "all" && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
           ] }),
-          /* @__PURE__ */ jsxs(PortalSubContent, { children: [
-            entityOptions.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(SubMenuSearch, { value: entitySearch, onChange: setEntitySearch, label: "Search entity types" }),
+          /* @__PURE__ */ jsxs(PortalSubContent$1, { children: [
+            entityOptions.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(SubMenuSearch$1, { value: entitySearch, onChange: setEntitySearch, label: "Search entity types" }),
             /* @__PURE__ */ jsx(
               DropdownMenu.RadioGroup,
               {
@@ -43344,8 +43347,8 @@ function TracesTools({
             "Tags",
             (selectedTags ?? []).length > 0 && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedTags?.length })
           ] }),
-          /* @__PURE__ */ jsxs(PortalSubContent, { children: [
-            (availableTags ?? []).length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(SubMenuSearch, { value: tagSearch, onChange: setTagSearch, label: "Search tags" }),
+          /* @__PURE__ */ jsxs(PortalSubContent$1, { children: [
+            (availableTags ?? []).length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(SubMenuSearch$1, { value: tagSearch, onChange: setTagSearch, label: "Search tags" }),
             (availableTags ?? []).filter((tag) => !tagSearch || tag.toLowerCase().includes(tagSearch.toLowerCase())).map((tag) => /* @__PURE__ */ jsx(
               DropdownMenu.CheckboxItem,
               {
@@ -43369,9 +43372,9 @@ function TracesTools({
             "Metadata",
             metadataCount > 0 && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: metadataCount })
           ] }),
-          /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-            metadataKeys.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
-              SubMenuSearch,
+          /* @__PURE__ */ jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+            metadataKeys.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(
+              SubMenuSearch$1,
               {
                 value: metadataKeySearch,
                 onChange: setMetadataKeySearch,
@@ -43386,9 +43389,9 @@ function TracesTools({
                   /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: key }),
                   selectedValue && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
                 ] }),
-                /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-                  values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
-                    SubMenuSearch,
+                /* @__PURE__ */ jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+                  values.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(
+                    SubMenuSearch$1,
                     {
                       value: subValueSearch,
                       onChange: setSubValueSearch,
@@ -43446,9 +43449,9 @@ function TracesTools({
               group,
               activeInGroup > 0 && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: activeInGroup })
             ] }),
-            /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-              fieldsWithValues.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
-                SubMenuSearch,
+            /* @__PURE__ */ jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+              fieldsWithValues.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(
+                SubMenuSearch$1,
                 {
                   value: contextFieldSearch,
                   onChange: setContextFieldSearch,
@@ -43465,9 +43468,9 @@ function TracesTools({
                     /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: field.label }),
                     selectedValue && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
                   ] }),
-                  /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-                    values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
-                      SubMenuSearch,
+                  /* @__PURE__ */ jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+                    values.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsx(
+                      SubMenuSearch$1,
                       {
                         value: subValueSearch,
                         onChange: setSubValueSearch,
@@ -43523,7 +43526,7 @@ function TracesTools({
         ] })
       ] })
     ] }),
-    onReset && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, onClick: () => onReset(), children: [
+    onReset && /* @__PURE__ */ jsxs(Button, { disabled: isLoading, size: "md", onClick: () => onReset(), children: [
       /* @__PURE__ */ jsx(XIcon, {}),
       "Reset"
     ] }),
@@ -46216,11 +46219,11 @@ const ItemList = Object.assign(ItemListRoot, {
   LabelCell: ItemListLabelCell
 });
 
-const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function ItemListItemsSkeleton({ columns, numberOfRows = 3 }) {
   const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths.length;
-    return widths[index];
+    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$1.length;
+    return widths$1[index];
   };
   return /* @__PURE__ */ jsx(ItemListItems, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx(ItemListRow, { children: /* @__PURE__ */ jsx(ItemListRowButton, { columns, children: (columns || []).map((col, colIdx) => {
     const key = `${col.name}-${colIdx}`;
@@ -49643,14 +49646,14 @@ const formatTraceSpans = (spans) => {
   return sortedRootSpans;
 };
 
-function getSpanDescendantIds(span) {
+function getSpanDescendantIds$1(span) {
   if (!span.spans || span.spans.length === 0) {
     return [];
   }
   const descendantIds = [];
   span.spans.forEach((childSpan) => {
     descendantIds.push(childSpan.id);
-    descendantIds.push(...getSpanDescendantIds(childSpan));
+    descendantIds.push(...getSpanDescendantIds$1(childSpan));
   });
   return descendantIds;
 }
@@ -49721,12 +49724,12 @@ function ExperimentTraceTimelineExpandCol({
         "bg-surface4": isSelected
       }),
       children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+        /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: () => toggleChildren?.(), children: [
           allDescendantsExpanded ? totalDescendants : numOfChildren,
           " ",
           isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsx(ChevronsUpIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
         ] }),
-        totalDescendants > (numOfChildren ?? 0) && !allDescendantsExpanded && /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+        totalDescendants > (numOfChildren ?? 0) && !allDescendantsExpanded && /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: () => expandAllDescendants?.(), children: [
           totalDescendants,
           " ",
           /* @__PURE__ */ jsx(ChevronsDownIcon, {})
@@ -49735,7 +49738,7 @@ function ExperimentTraceTimelineExpandCol({
     }
   );
 }
-function ExpandButton({ onClick, children, className }) {
+function ExpandButton$1({ onClick, children, className }) {
   return /* @__PURE__ */ jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -49845,7 +49848,7 @@ function ExperimentTraceTimelineSpan({
 }) {
   const hasChildren = span.spans && span.spans.length > 0;
   const numOfChildren = span.spans ? span.spans.length : 0;
-  const allDescendantIds = getSpanDescendantIds(span);
+  const allDescendantIds = getSpanDescendantIds$1(span);
   const totalDescendants = allDescendantIds.length;
   const isRootSpan = depth === 0;
   const spanUI = getExperimentSpanTypeUi(span?.type);
@@ -51377,6 +51380,1803 @@ function DatasetCompareVersionsList({
   }) }) }) });
 }
 
+function DataDetailsPanel$1({ collapsed, children }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden",
+        collapsed ? "h-auto" : "h-full"
+      ),
+      children
+    }
+  );
+}
+
+function DataDetailsPanelCloseButton({
+  onClick,
+  tooltip = "Close panel",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      size: "md",
+      onClick,
+      "aria-label": "Close Panel",
+      tooltipContent: tooltip,
+      className,
+      children: /* @__PURE__ */ jsx(XIcon, {})
+    }
+  );
+}
+
+const useCodemirrorTheme = () => {
+  return useMemo(
+    () => draculaInit({
+      settings: {
+        fontFamily: "var(--geist-mono)",
+        fontSize: "0.75rem",
+        lineHighlight: "transparent",
+        gutterBackground: "transparent",
+        gutterForeground: "#939393",
+        background: "transparent"
+      },
+      styles: [{ tag: [tags.className, tags.propertyName] }]
+    }),
+    []
+  );
+};
+function DataDetailsPanelCodeSection({
+  codeStr = "",
+  title,
+  icon,
+  simplified = false,
+  className
+}) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = useState(false);
+  const hasMultilineText = useMemo(() => {
+    try {
+      const parsed = JSON.parse(codeStr);
+      return containsInnerNewline(parsed || "");
+    } catch {
+      return false;
+    }
+  }, [codeStr]);
+  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  const usePlainTextView = simplified || showAsMultilineText;
+  if (!codeStr || codeStr === "null") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-ui-xs uppercase tracking-widest text-neutral2",
+            "[&>svg]:size-3.5"
+          ),
+          children: [
+            icon,
+            title
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content", size: "sm" }),
+        hasMultilineText && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+            onClick: () => setShowAsMultilineText((v) => !v),
+            children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-3 overflow-hidden rounded-lg border border-white/10 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        extensions: [json(), EditorView$1.lineWrapping],
+        theme,
+        value: codeStr,
+        editable: false
+      }
+    ) })
+  ] });
+}
+function containsInnerNewline(obj) {
+  if (typeof obj === "string") {
+    const idx = obj.indexOf("\n");
+    return idx !== -1 && idx !== obj.length - 1;
+  } else if (Array.isArray(obj)) {
+    return obj.some((item) => containsInnerNewline(item));
+  } else if (obj && typeof obj === "object") {
+    return Object.values(obj).some((value) => containsInnerNewline(value));
+  }
+  return false;
+}
+
+function DataDetailsPanelContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 p-4 overflow-y-auto", children });
+}
+
+function DataDetailsPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3", className), children });
+}
+
+function DataDetailsPanelHeading({ className, children }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("flex gap-2 text-ui-md text-neutral3 [&>b]:text-neutral2 [&>b]:font-normal", className), children });
+}
+
+function Root({ className, children }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5", className), children });
+}
+function Key({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("text-ui-smd  text-neutral2 shrink-0 py-0.5", className), children });
+}
+function Value({ className, children }) {
+  return /* @__PURE__ */ jsx("dd", { className: cn("text-ui-smd text-neutral3 truncate min-w-0 py-0.5", className), children });
+}
+function Header$1({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("col-span-2 text-ui-sm uppercase tracking-widest text-neutral2 py-3", className), children });
+}
+const DataDetailsPanelKeyValueList = Object.assign(Root, {
+  Key,
+  Value,
+  Header: Header$1
+});
+
+function DataDetailsPanelLoadingData({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
+    /* @__PURE__ */ jsx(Spinner, {}),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataDetailsPanelNoData({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "px-4 py-6 text-ui-sm text-neutral2", children: children ?? "No data found." });
+}
+
+const DataDetailsPanel = Object.assign(DataDetailsPanel$1, {
+  Header: DataDetailsPanelHeader,
+  Heading: DataDetailsPanelHeading,
+  CloseButton: DataDetailsPanelCloseButton,
+  LoadingData: DataDetailsPanelLoadingData,
+  NoData: DataDetailsPanelNoData,
+  Content: DataDetailsPanelContent,
+  KeyValueList: DataDetailsPanelKeyValueList,
+  CodeSection: DataDetailsPanelCodeSection
+});
+
+const KV$1 = DataDetailsPanel.KeyValueList;
+function toDate$1(value) {
+  return value instanceof Date ? value : new Date(value);
+}
+function LogDetails({
+  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$1(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$1, { className: "mb-6", children: [
+        log.entityType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Entity Type" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: log.entityType })
+        ] }),
+        log.entityName && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Entity Name" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: log.entityName })
+        ] }),
+        log.serviceName && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Service" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: log.serviceName })
+        ] }),
+        log.environment && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Environment" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: log.environment })
+        ] }),
+        log.source && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Key, { children: "Source" }),
+          /* @__PURE__ */ jsx(KV$1.Value, { children: log.source })
+        ] }),
+        log.metadata && Object.keys(log.metadata).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV$1.Header, { children: "Metadata" }),
+          Object.entries(log.metadata).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(KV$1.Key, { children: key }),
+            /* @__PURE__ */ jsx(KV$1.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 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 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;
+};
+
+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 getSpanTypeUi(type) {
+  const typePrefix = type?.toLowerCase().split("_")[0];
+  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"
+    }
+  };
+  if (typePrefix in spanTypeToUiElements) {
+    return spanTypeToUiElements[typePrefix];
+  }
+  return {
+    typePrefix: "other"
+  };
+}
+
+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",
+    {
+      "aria-label": `View details for span ${span.name}`,
+      className: cn("rounded-md transition-colors 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"
+            ),
+            children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: span.name })
+          }
+        )
+      ]
+    }
+  );
+}
+
+function TimelineTimingCol({
+  span,
+  selectedSpanId,
+  isFaded,
+  overallLatency,
+  overallStartTime,
+  color
+}) {
+  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 min-w-[8rem] p-1 grid grid-cols-[1fr_auto] gap-2 items-center cursor-help pr-2 rounded-r-md",
+          "[&: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", 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-[25rem] rounded-md bg-surface4 p-2 px-4 pr-6 text-ui-sm text-neutral5 text-center border border-border1",
+        sideOffset: 5,
+        side: "top",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "text-ui-md flex items-center gap-2 mb-4",
+                "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(TimerIcon, {}),
+                " Span Timing"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            KeyValueList,
+            {
+              className: " [&>dd]:text-ui-md [&>dt]:text-ui-md [&>dt]:min-h-0 [&>dd]:min-h-0",
+              data: [
+                {
+                  key: "Latency",
+                  label: "Latency",
+                  value: `${span.latency} ms`,
+                  icon: /* @__PURE__ */ jsx(ChevronsLeftRightIcon, {})
+                },
+                {
+                  key: "startTime",
+                  label: "Started at",
+                  value: span.startTime ? format$1(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsx(ChevronFirstIcon, {})
+                },
+                {
+                  key: "endTime",
+                  label: "Ended at",
+                  value: span.endTime ? format$1(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsx(ChevronLastIcon, {})
+                },
+                {
+                  key: "startShift",
+                  label: "Start Shift",
+                  value: `${spanStartTimeShift}ms`,
+                  icon: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(HoverCard.Arrow, { className: "fill-surface5" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function TraceTimelineSpan({
+  span,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  overallLatency,
+  overallStartTime,
+  fadedTypes,
+  searchPhrase,
+  featuredSpanIds,
+  expandedSpanIds,
+  setExpandedSpanIds
+}) {
+  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, span.id] : [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,
+        expandedSpanIds,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimelineTimingCol,
+      {
+        span,
+        selectedSpanId,
+        isFaded,
+        overallLatency,
+        overallStartTime,
+        color: spanUI?.color
+      }
+    ),
+    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
+        },
+        childSpan.id
+      );
+    })
+  ] });
+}
+
+function TraceTimeline({
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  fadedTypes,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  featuredSpanIds
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  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__ */ 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
+    },
+    span.id
+  )) }) });
+}
+
+function TraceDetails({ traceId, onClose, onSpanSelect, initialSpanId }) {
+  const { data: traceData, isLoading } = useTraceSpans(traceId);
+  const [selectedSpanId, setSelectedSpanId] = useState(initialSpanId ?? void 0);
+  useEffect(() => {
+    if (initialSpanId && traceData?.spans) {
+      const span = traceData.spans.find((s) => s.spanId === initialSpanId);
+      if (span) {
+        setSelectedSpanId(initialSpanId);
+        onSpanSelect?.(span);
+        return;
+      }
+    }
+    setSelectedSpanId(void 0);
+    onSpanSelect?.(void 0);
+  }, [initialSpanId, traceData?.spans]);
+  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(traceData?.spans ?? []), [traceData?.spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = useState([]);
+  useEffect(() => {
+    if (hierarchicalSpans.length > 0) {
+      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
+    }
+  }, [hierarchicalSpans]);
+  const handleSpanClick = (id) => {
+    const newId = selectedSpanId === id ? void 0 : id;
+    setSelectedSpanId(newId);
+    const span = newId ? traceData?.spans?.find((s) => s.spanId === newId) : void 0;
+    onSpanSelect?.(span);
+  };
+  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,
+        expandedSpanIds,
+        setExpandedSpanIds
+      }
+    ) })
+  ] });
+}
+
+const NoLogsInfo = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState$1,
+  {
+    iconSlot: /* @__PURE__ */ jsx(CircleSlashIcon, {}),
+    titleSlot: "No logs yet",
+    descriptionSlot: "Logs will appear here once agents, workflows, or tools are executed."
+  }
+) });
+
+const KV = DataDetailsPanel.KeyValueList;
+function SpanDetails({ span, 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: [
+          "# ",
+          span.spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxs(KV, { children: [
+        span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Type" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Started" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsx(KV.Value, { children: format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KV.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsx(KV.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 DataListNextPageLoading({
+  isLoading,
+  hasMore,
+  setEndOfListElement,
+  loadingText = "Loading more data...",
+  noMoreDataText = "No more data to load"
+}) {
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setEndOfListElement,
+      className: "col-span-full text-ui-md text-neutral3 opacity-50 flex py-4 justify-center",
+      children: [
+        isLoading && loadingText,
+        !hasMore && !isLoading && noMoreDataText
+      ]
+    }
+  );
+}
+
+function DataListNoMatch({ message = "Nothing matches your search", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-md", children: message }) });
+}
+
+function DataListRoot({ children, columns, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid bg-surface2 border h-full border-border1 rounded-xl overflow-y-auto content-start",
+        className
+      ),
+      style: { gridTemplateColumns: columns },
+      children
+    }
+  );
+}
+
+const dataListRowStyles = [
+  "data-list-row grid grid-cols-subgrid gap-10 col-span-full px-5 outline-none cursor-pointer border-y border-b-border1 border-t-transparent",
+  "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1",
+  "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent",
+  "transition-colors duration-200 rounded-lg"
+];
+
+function DataListRow({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(...dataListRowStyles, className), children });
+}
+
+function DataListRowButton({ children, onClick, className }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: cn(...dataListRowStyles, "text-left", className), children });
+}
+
+function DataListRowLink({ children, to, className }) {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsx(Link, { href: to, className: cn(...dataListRowStyles, className), children });
+}
+
+function DataListTop({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full border-b border-border1 px-4 bg-surface2 sticky top-0 z-10",
+        className
+      ),
+      children
+    }
+  );
+}
+
+const DataListTopCell = forwardRef(({ children, className }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "h-8 py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
+        className
+      ),
+      children
+    }
+  );
+});
+function DataListTopCellWithTooltip({ children, tooltip, className }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(DataListTopCell, { className, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+}
+const breakpointClasses = {
+  sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
+  md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
+  lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
+  xl: { show: "hidden xl:inline-flex", hide: "inline-flex xl:hidden" },
+  "2xl": { show: "hidden 2xl:inline-flex", hide: "inline-flex 2xl:hidden" }
+};
+function DataListTopCellSmart({
+  long,
+  short,
+  tooltip,
+  breakpoint = "2xl",
+  className
+}) {
+  const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
+  const bp = breakpointClasses[breakpoint];
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
+    /* @__PURE__ */ jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
+  ] });
+  if (tooltipText) {
+    return /* @__PURE__ */ jsx(
+      DataListTopCellWithTooltip,
+      {
+        tooltip: tooltipText,
+        className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DataListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
+}
+
+function DataListCell({ children, className, height = "default" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative grid items-center text-ui-md whitespace-nowrap text-neutral3",
+        height === "compact" ? "py-2" : "py-4",
+        className
+      ),
+      children
+    }
+  );
+}
+function DataListTextCell({ children, className }) {
+  return /* @__PURE__ */ jsx(DataListCell, { className, children });
+}
+function DataListNameCell({ children, className }) {
+  return /* @__PURE__ */ jsx(DataListCell, { className: cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsx("span", { className: "truncate", children }) });
+}
+function DataListDescriptionCell({ children, className }) {
+  return /* @__PURE__ */ jsx(DataListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsx("span", { className: "truncate", children }) });
+}
+
+function toDate(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return isNaN(date.getTime()) ? null : date;
+}
+const LEVEL_CONFIG = {
+  debug: { label: "DEBUG", color: "#71717a" },
+  info: { label: "INFO", color: "#60a5fa" },
+  warn: { label: "WARN", color: "#facc15" },
+  error: { label: "ERROR", color: "#f87171" },
+  fatal: { label: "FATAL", color: "#dc2626" }
+};
+function LogsDataListLevelCell({ level }) {
+  const config = LEVEL_CONFIG[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);
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday(date) ? "Today" : format(date, "MMM dd") : "-" });
+}
+function LogsDataListTimeCell({ timestamp }) {
+  const date = toDate(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: [
+      ".",
+      String(date.getMilliseconds()).padStart(3, "0")
+    ] })
+  ] }) : "-" });
+}
+function EntityTypeIcon({ entityType, className }) {
+  const iconClass = cn("size-3.5 shrink-0 text-neutral2", className);
+  switch (entityType) {
+    case "AGENT":
+      return /* @__PURE__ */ jsx(AgentIcon, { className: iconClass, "aria-hidden": true });
+    case "WORKFLOW":
+      return /* @__PURE__ */ jsx(WorkflowIcon, { className: iconClass, "aria-hidden": true });
+    case "TOOL":
+      return /* @__PURE__ */ jsx(ToolsIcon, { className: iconClass, "aria-hidden": true });
+    default:
+      return null;
+  }
+}
+function LogsDataListEntityCell({ entityType, entityName }) {
+  const type = entityType ?? "";
+  return /* @__PURE__ */ jsxs(DataListCell, { height: "compact", className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx(EntityTypeIcon, { entityType: type }),
+    entityName ? /* @__PURE__ */ jsx("span", { className: "min-w-0 text-ui-smd truncate", children: entityName }) : "-"
+  ] });
+}
+function LogsDataListMessageCell({ message }) {
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-neutral4 text-ui-smd min-w-0 truncate font-mono", children: message });
+}
+function LogsDataListDataCell({ data }) {
+  if (!data || Object.keys(data).length === 0) {
+    return /* @__PURE__ */ jsx(DataListCell, { height: "compact", children: null });
+  }
+  const summary = Object.entries(data).map(([k, v]) => {
+    if (typeof v === "string") return `${k}: ${v}`;
+    try {
+      return `${k}: ${JSON.stringify(v)}`;
+    } catch {
+      return `${k}: <unserializable>`;
+    }
+  }).join(", ");
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: summary }) });
+}
+
+const LogsDataList = Object.assign(DataListRoot, {
+  Top: DataListTop,
+  TopCell: DataListTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
+  TopCellSmart: DataListTopCellSmart,
+  Row: DataListRow,
+  RowButton: DataListRowButton,
+  RowLink: DataListRowLink,
+  NoMatch: DataListNoMatch,
+  DateCell: LogsDataListDateCell,
+  TimeCell: LogsDataListTimeCell,
+  LevelCell: LogsDataListLevelCell,
+  EntityCell: LogsDataListEntityCell,
+  MessageCell: LogsDataListMessageCell,
+  DataCell: LogsDataListDataCell,
+  NextPageLoading: DataListNextPageLoading
+});
+
+const DataList = Object.assign(DataListRoot, {
+  Top: DataListTop,
+  TopCell: DataListTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
+  TopCellSmart: DataListTopCellSmart,
+  Row: DataListRow,
+  RowButton: DataListRowButton,
+  RowLink: DataListRowLink,
+  Cell: DataListCell,
+  TextCell: DataListTextCell,
+  NameCell: DataListNameCell,
+  DescriptionCell: DataListDescriptionCell,
+  NoMatch: DataListNoMatch,
+  NextPageLoading: DataListNextPageLoading
+});
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 }) {
+  const columnParts = columns.trim().split(/\s+/);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index];
+  };
+  return /* @__PURE__ */ jsx(DataListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "data-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 border-y border-b-border1 border-t-transparent transition-colors duration-200 rounded-lg",
+      children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(DataListCell, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
+          style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
+        }
+      ) }, colIdx))
+    },
+    rowIdx
+  )) });
+}
+
+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 getLogIds(logs) {
+  const ids = /* @__PURE__ */ new Map();
+  const seen = /* @__PURE__ */ new Map();
+  for (const log of logs) {
+    const ts = log.timestamp instanceof Date ? log.timestamp.toISOString() : log.timestamp;
+    const base = hashCode(`${ts}${log.message ?? ""}${log.data ? JSON.stringify(log.data) : ""}`);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    ids.set(log, count > 0 ? `${base}-${count}` : base);
+  }
+  return ids;
+}
+const COLUMNS$3 = "auto auto auto auto minmax(5rem,1fr) minmax(5rem,1fr)";
+function LogsList({
+  logs,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  setEndOfListElement,
+  error,
+  hasActiveFilters,
+  featuredLogId: controlledLogId,
+  featuredTraceId: controlledTraceId,
+  featuredSpanId: controlledSpanId,
+  onFeaturedChange
+}) {
+  const [internalIds, setInternalIds] = useState({});
+  const featuredLogId = controlledLogId ?? internalIds.logId ?? null;
+  const featuredTraceId = controlledTraceId ?? internalIds.traceId ?? null;
+  const featuredSpanId = controlledSpanId ?? internalIds.spanId ?? null;
+  const updateFeatured = useCallback(
+    (ids) => {
+      const merged = {
+        logId: ids.logId !== void 0 ? ids.logId : featuredLogId,
+        traceId: ids.traceId !== void 0 ? ids.traceId : featuredTraceId,
+        spanId: ids.spanId !== void 0 ? ids.spanId : featuredSpanId
+      };
+      if (onFeaturedChange) {
+        onFeaturedChange(merged);
+      } else {
+        setInternalIds(merged);
+      }
+    },
+    [onFeaturedChange, featuredLogId, featuredTraceId, featuredSpanId]
+  );
+  const [featuredSpanRecord, setFeaturedSpanRecord] = useState();
+  const [logDetailsCollapsed, setLogDetailsCollapsed] = useState(false);
+  useEffect(() => {
+    if (!featuredSpanId || featuredSpanRecord && featuredSpanRecord.spanId !== featuredSpanId) {
+      setFeaturedSpanRecord(void 0);
+    }
+  }, [featuredSpanId, featuredSpanRecord]);
+  const logIdMap = useMemo(() => getLogIds(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 handlePreviousLog = featuredLogIdx > 0 ? () => {
+    const prevLog = logs[featuredLogIdx - 1];
+    const id = logIdMap.get(prevLog);
+    if (featuredTraceId) {
+      updateFeatured({ logId: id, traceId: prevLog.traceId ?? null, spanId: null });
+      setFeaturedSpanRecord(void 0);
+    } else {
+      updateFeatured({ logId: id });
+    }
+  } : void 0;
+  const handleNextLog = featuredLogIdx >= 0 && featuredLogIdx < logs.length - 1 ? () => {
+    const nextLog = logs[featuredLogIdx + 1];
+    const id = logIdMap.get(nextLog);
+    if (featuredTraceId) {
+      updateFeatured({ logId: id, traceId: nextLog.traceId ?? null, spanId: null });
+      setFeaturedSpanRecord(void 0);
+    } else {
+      updateFeatured({ logId: id });
+    }
+  } : void 0;
+  const handleLogClick = useCallback(
+    (log) => {
+      const id = logIdMap.get(log);
+      if (featuredLogId === id) {
+        updateFeatured({ logId: null });
+        return;
+      }
+      if (featuredTraceId) {
+        updateFeatured({ logId: id, traceId: log.traceId ?? null, spanId: null });
+        setFeaturedSpanRecord(void 0);
+      } else {
+        updateFeatured({ logId: id });
+      }
+    },
+    [featuredLogId, featuredTraceId, updateFeatured, logIdMap]
+  );
+  const handleTraceClick = useCallback(
+    (traceId) => {
+      updateFeatured({ traceId, spanId: null });
+      setFeaturedSpanRecord(void 0);
+    },
+    [updateFeatured]
+  );
+  const handleSpanClick = useCallback(
+    (traceId, spanId) => {
+      updateFeatured({ traceId, spanId });
+    },
+    [updateFeatured]
+  );
+  const handleTraceClose = useCallback(() => {
+    updateFeatured({ traceId: null, spanId: null });
+    setLogDetailsCollapsed(false);
+    setFeaturedSpanRecord(void 0);
+  }, [updateFeatured]);
+  const handleSpanSelect = useCallback(
+    (span) => {
+      updateFeatured({ spanId: span?.spanId ?? null });
+      setFeaturedSpanRecord(span);
+    },
+    [updateFeatured]
+  );
+  const handleSpanClose = useCallback(() => {
+    updateFeatured({ spanId: null });
+    setFeaturedSpanRecord(void 0);
+  }, [updateFeatured]);
+  const handleLogClose = useCallback(() => {
+    updateFeatured({ logId: null });
+  }, [updateFeatured]);
+  if (error) {
+    return /* @__PURE__ */ jsx(ErrorState, { title: "Failed to load logs", message: error.message });
+  }
+  if (logs.length === 0 && !isLoading && !hasActiveFilters) {
+    return /* @__PURE__ */ jsx(NoLogsInfo, {});
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(DataListSkeleton, { columns: COLUMNS$3 });
+  }
+  const hasSidePanel = !!featuredLog;
+  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: [
+        /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs(LogsDataList, { columns: COLUMNS$3, 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);
+            const isFeatured = id === featuredLogId;
+            return /* @__PURE__ */ jsxs(
+              LogsDataList.RowButton,
+              {
+                onClick: () => handleLogClick(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
+            }
+          )
+        ] }) }),
+        featuredLog && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 h-full overflow-auto ",
+              logDetailsCollapsed && featuredTraceId && featuredSpanRecord ? "grid-rows-[auto_1fr_1fr]" : logDetailsCollapsed && featuredTraceId ? "grid-rows-[auto_1fr]" : featuredTraceId && featuredSpanRecord ? "grid-rows-[1fr_1fr_1fr]" : featuredTraceId ? "grid-rows-[1fr_1fr]" : logDetailsCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                LogDetails,
+                {
+                  log: featuredLog,
+                  onClose: handleLogClose,
+                  onTraceClick: handleTraceClick,
+                  onSpanClick: handleSpanClick,
+                  onPrevious: handlePreviousLog,
+                  onNext: handleNextLog,
+                  collapsed: logDetailsCollapsed,
+                  onCollapsedChange: setLogDetailsCollapsed
+                }
+              ),
+              featuredTraceId && /* @__PURE__ */ jsx(
+                TraceDetails,
+                {
+                  traceId: featuredTraceId,
+                  onClose: handleTraceClose,
+                  onSpanSelect: handleSpanSelect,
+                  initialSpanId: featuredSpanId
+                }
+              ),
+              featuredSpanRecord && /* @__PURE__ */ jsx(SpanDetails, { span: featuredSpanRecord, onClose: handleSpanClose })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+const SUBMENU_SEARCH_THRESHOLD = 6;
+const subContentClass = cn(
+  "bg-surface5 backdrop-blur-xl z-50 min-w-[8rem] overflow-auto rounded-lg p-2 shadow-md",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+);
+function PortalSubContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, { className: cn(subContentClass, className), ...props, children }) });
+}
+function SubMenuSearch({
+  value,
+  onChange,
+  label = "Search"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+        "focus-within:border-neutral2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            "aria-label": label,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => e.stopPropagation(),
+            className: cn("bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full")
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SelectDataFilter({
+  categories,
+  value,
+  onChange,
+  disabled,
+  label = "Filter",
+  align = "end",
+  searchThreshold = SUBMENU_SEARCH_THRESHOLD
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const [subSearch, setSubSearch] = useState("");
+  const resetSubSearch = useCallback((open) => {
+    if (!open) setSubSearch("");
+  }, []);
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    for (const selections of Object.values(value)) {
+      if (selections.length > 0) count++;
+    }
+    return count;
+  }, [value]);
+  const grouped = useMemo(() => {
+    const q = filterSearch.toLowerCase();
+    const groups = [];
+    const groupMap = /* @__PURE__ */ new Map();
+    const ungrouped = [];
+    for (const cat of categories) {
+      if (cat.values.length === 0) continue;
+      if (q) {
+        const matchesLabel = cat.label.toLowerCase().includes(q);
+        const matchesValues = cat.values.some((v) => v.label.toLowerCase().includes(q));
+        if (!matchesLabel && !matchesValues) continue;
+      }
+      if (cat.group) {
+        let items = groupMap.get(cat.group);
+        if (!items) {
+          items = [];
+          groupMap.set(cat.group, items);
+        }
+        items.push(cat);
+      } else {
+        ungrouped.push(cat);
+      }
+    }
+    for (const cat of ungrouped) {
+      groups.push({ key: cat.id, items: [cat] });
+    }
+    for (const [groupLabel, items] of groupMap) {
+      groups.push({ key: `group-${groupLabel}`, label: groupLabel, items });
+    }
+    return groups;
+  }, [categories, filterSearch]);
+  const handleSelect = (categoryId, selectedValue, mode) => {
+    const current = value[categoryId] ?? [];
+    let next;
+    if (mode === "single") {
+      next = current.includes(selectedValue) ? [] : [selectedValue];
+    } else {
+      next = current.includes(selectedValue) ? current.filter((v) => v !== selectedValue) : [...current, selectedValue];
+    }
+    onChange({ ...value, [categoryId]: next });
+  };
+  const handleClearAll = () => {
+    onChange({});
+  };
+  const renderCategory = (cat) => {
+    const mode = cat.mode ?? "multi";
+    const selected = value[cat.id] ?? [];
+    const selectedCount = selected.length;
+    return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch, children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, { children: [
+        /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: cat.label }),
+        selectedCount > 0 && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedCount })
+      ] }),
+      /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+        cat.values.length >= searchThreshold && /* @__PURE__ */ jsx(SubMenuSearch, { value: subSearch, onChange: setSubSearch, label: `Search ${cat.label.toLowerCase()}` }),
+        mode === "single" ? /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: selected[0] ?? "", onValueChange: (val) => handleSelect(cat.id, val, mode), children: cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: v.value, children: /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: v.label }) }, v.value)) }) : cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsx(
+          DropdownMenu.CheckboxItem,
+          {
+            checked: selected.includes(v.value),
+            onCheckedChange: () => handleSelect(cat.id, v.value, mode),
+            onSelect: (e) => e.preventDefault(),
+            children: /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: v.label })
+          },
+          v.value
+        ))
+      ] })
+    ] }, cat.id);
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", disabled, size: "md", children: [
+      /* @__PURE__ */ jsx(FilterIcon, {}),
+      label,
+      activeFilterCount > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "ml-0.5 inline-flex items-center justify-center rounded-full bg-accent1/50 text-neutral5 text-ui-sm w-5 h-5"
+          ),
+          children: activeFilterCount
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { align, className: cn("min-w-[12rem]"), children: [
+      /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+            "focus-within:border-neutral2"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search filters...",
+                "aria-label": "Search filters",
+                value: filterSearch,
+                onChange: (e) => setFilterSearch(e.target.value),
+                onKeyDown: (e) => e.stopPropagation(),
+                className: cn("bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full")
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      grouped.map((group) => {
+        if (group.items.length === 1 && !group.label) {
+          return renderCategory(group.items[0]);
+        }
+        if (group.label && group.items.length === 1) {
+          return renderCategory(group.items[0]);
+        }
+        return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+          /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { children: group.label }),
+          /* @__PURE__ */ jsx(PortalSubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
+        ] }, group.key);
+      }),
+      activeFilterCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: handleClearAll, children: [
+          /* @__PURE__ */ jsx(XIcon, {}),
+          "Clear all filters"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+const DATE_PRESET_LABELS = {
+  "24h": "Last 24 hours",
+  "3d": "Last 3 days",
+  "7d": "Last 7 days",
+  "14d": "Last 14 days",
+  "30d": "Last 30 days"
+};
+function LogsToolbar({
+  onSearchChange,
+  datePreset,
+  onDatePresetChange,
+  filterGroups,
+  filterColumns,
+  onToggleComparator: _onToggleComparator,
+  onRemoveFilterGroup: _onRemoveFilterGroup,
+  onClearAllFilters: _onClearAllFilters,
+  onFilterGroupsChange,
+  onReset,
+  isLoading,
+  hasActiveFilters
+}) {
+  const categories = useMemo(
+    () => filterColumns.map((col) => ({
+      id: col.field,
+      label: col.field,
+      values: col.values.map((v) => ({ value: v, label: v })),
+      mode: "multi"
+    })),
+    [filterColumns]
+  );
+  const filterState = useMemo(() => {
+    const state = {};
+    for (const group of filterGroups) {
+      state[group.field] = group.values;
+    }
+    return state;
+  }, [filterGroups]);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(ListSearch, { onSearch: onSearchChange, size: "md", label: "Search logs", placeholder: "Search name, ID, content..." }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "inputLike", size: "md", children: [
+        /* @__PURE__ */ jsx(CalendarIcon, {}),
+        " ",
+        DATE_PRESET_LABELS[datePreset],
+        " ",
+        /* @__PURE__ */ jsx(ChevronDownIcon, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Content, { children: Object.keys(DATE_PRESET_LABELS).map((value) => /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => onDatePresetChange(value), children: DATE_PRESET_LABELS[value] }, value)) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SelectDataFilter,
+      {
+        categories,
+        value: filterState,
+        onChange: onFilterGroupsChange,
+        align: "end",
+        disabled: isLoading
+      }
+    ),
+    onReset && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, onClick: onReset, className: "ml-auto", children: [
+      /* @__PURE__ */ jsx(XIcon, {}),
+      "Reset"
+    ] })
+  ] }) });
+}
+
+const LEVEL_LABELS = {
+  debug: "DEBUG",
+  info: "INFO",
+  warn: "WARN",
+  error: "ERROR",
+  fatal: "FATAL"
+};
+const ENTITY_TYPE_LABELS = {
+  AGENT: "Agent",
+  WORKFLOW: "Workflow",
+  TOOL: "Tool",
+  SYSTEM: "System"
+};
+function getLogFilterValue(log, field) {
+  switch (field) {
+    case "Level":
+      return LEVEL_LABELS[log.level];
+    case "Entity type":
+      return ENTITY_TYPE_LABELS[log.entityType ?? ""] ?? log.entityType ?? "";
+    case "Entity name":
+      return log.entityName ?? "";
+    default:
+      return "";
+  }
+}
+function useLogsFilters(logs) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterGroups, setFilterGroups] = useState([]);
+  const filterColumns = useMemo(() => {
+    const unique = (values) => Array.from(new Set(values.filter(Boolean))).sort();
+    return [
+      { field: "Level", plural: "levels", values: unique(logs.map((l) => LEVEL_LABELS[l.level])) },
+      {
+        field: "Entity type",
+        plural: "types",
+        values: unique(logs.map((l) => ENTITY_TYPE_LABELS[l.entityType ?? ""] ?? l.entityType ?? ""))
+      },
+      { field: "Entity name", plural: "names", values: unique(logs.map((l) => l.entityName ?? "")) }
+    ];
+  }, [logs]);
+  const toggleComparator = useCallback((id) => {
+    setFilterGroups(
+      (prev) => prev.map((g) => g.id === id ? { ...g, comparator: g.comparator === "is" ? "is not" : "is" } : g)
+    );
+  }, []);
+  const removeFilterGroup = useCallback((id) => {
+    setFilterGroups((prev) => prev.filter((g) => g.id !== id));
+  }, []);
+  const clearAllFilters = useCallback(() => {
+    setFilterGroups([]);
+  }, []);
+  const updateFilterGroups = useCallback((nextState) => {
+    setFilterGroups((prev) => {
+      const result = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const group of prev) {
+        const nextValues = nextState[group.field];
+        if (nextValues && nextValues.length > 0) {
+          result.push({ ...group, values: nextValues });
+          seen.add(group.field);
+        }
+      }
+      for (const [field, values] of Object.entries(nextState)) {
+        if (seen.has(field) || values.length === 0) continue;
+        result.push({ id: `${field}-${Date.now()}`, field, comparator: "is", values });
+      }
+      return result;
+    });
+  }, []);
+  const filteredLogs = useMemo(() => {
+    return logs.filter((log) => {
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        const match = log.message.toLowerCase().includes(q) || (log.entityName ?? "").toLowerCase().includes(q) || (log.traceId ?? "").toLowerCase().includes(q);
+        if (!match) return false;
+      }
+      for (const group of filterGroups) {
+        const logVal = getLogFilterValue(log, group.field);
+        const matches = group.values.includes(logVal);
+        if (group.comparator === "is" && !matches) return false;
+        if (group.comparator === "is not" && matches) return false;
+      }
+      return true;
+    });
+  }, [logs, searchQuery, filterGroups]);
+  return {
+    searchQuery,
+    setSearchQuery,
+    filterGroups,
+    filterColumns,
+    toggleComparator,
+    removeFilterGroup,
+    clearAllFilters,
+    updateFilterGroups,
+    filteredLogs
+  };
+}
+
+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" }
+];
+function isValidLogsDatePreset(value) {
+  return DATE_PRESETS.some((p) => p.value === value);
+}
+
 function useEvaluationScorers() {
   const client = useMastraClient();
   const requestContext = useMergedRequestContext();
@@ -52883,7 +54683,7 @@ function MainSidebarNavHeader({
       {
         className: cn("text-ui-xs uppercase tracking-widest", {
           "pl-3": isDefaultState,
-          "text-accent1 font-semibold": isActive,
+          "text-black dark:text-white font-semibold": isActive,
           "text-neutral3/75": !isActive
         }),
         children: href && isDefaultState ? /* @__PURE__ */ jsx(
@@ -52892,7 +54692,7 @@ function MainSidebarNavHeader({
             href,
             className: cn("transition-colors duration-normal", {
               "hover:text-neutral5": !isActive,
-              "text-accent1": isActive
+              "text-black dark:text-white": isActive
             }),
             children: labelContent
           }
@@ -52932,7 +54732,7 @@ function MainSidebarNavLink({
           "[&>a]:text-neutral5 [&>a]:bg-surface3": isActive,
           "[&_svg]:text-neutral5": isActive,
           // Active indicator bar
-          "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-5 before:bg-accent1 before:rounded-r-full before:transition-all before:duration-normal": isActive && !isCollapsed,
+          "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-5 before:bg-black dark:before:bg-white before:rounded-r-full before:transition-all before:duration-normal": isActive && !isCollapsed,
           "[&>a]:justify-start": !isCollapsed,
           "[&_svg]:text-neutral3": isCollapsed,
           // Featured variant
@@ -55762,5 +57562,5 @@ const NavigationCommand = () => {
   );
 };
 
-export { AGENT_CMS_SECTIONS, ActionsMenu, ActivatedSkillsProvider, AddField, AddItemDialog, AddItemsToDatasetDialog, AddSkillDialog, AgentCMSBlock, AgentCMSBlocks, AgentCMSRefBlock, AgentChat, AgentCmsBottomBar, AgentCmsFormShell, AgentCmsSidebar, AgentCoinIcon, AgentCombobox, AgentEditFormProvider, AgentEditLayout, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataCombinedProcessorList, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataSkillList, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWorkspaceToolsList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPageTabs, AgentPlaygroundConfig, AgentPlaygroundEvaluate, AgentPlaygroundRequestContext, AgentPlaygroundReview, AgentPlaygroundTestChat, AgentPlaygroundVersionBar, AgentPlaygroundView, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentTopBarControls, AgentTracesPanel, AgentVersionCombobox, AgentVersionPanel, AgentsCmsLayout, AgentsList, AgentsPage, AgentsSection, AgentsTable, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, AuthRequired, AuthStatus, AutoForm, Avatar, Badge, BranchIcon, Breadcrumb$1 as Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CHART_COLORS, CODE_AGENT_OVERRIDE_SECTIONS, CONTEXT_FIELD_IDS, CSVImportDialog, Cell, ChatThreads, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ComposerModelSwitcher, ContentBlock, ContentBlocks, CopyButton, CreateDatasetDialog, CreateDatasetFromItemsDialog, CrossIcon, Crumb, DashboardCard, DatasetCombobox, DatasetCompareVersionToolbar, DatasetCompareVersionsList, DatasetExperiments, DatasetExperimentsComparison, DatasetHealthCard, DatasetItemContent, DatasetItemHeader, DatasetItemVersionsPanel, DatasetItemsList, DatasetPageContent, DatasetVersionsPanel, DatasetsList, DatasetsTable, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeleteDatasetDialog, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayConditionsDialog, DividerIcon, DocsIcon, DropdownMenu, DuplicateDatasetDialog, DynamicForm, EditDatasetDialog, EditModeContent, ElementSelect, EmptyDatasetsTable, EmptyState$1 as EmptyState, Entity, EntityAccordionItem, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, EvaluationDashboard, EvaluationDatasetsList, EvaluationExperimentsList, EvaluationKpiCards, EvaluationScorersList, ExperimentPageContent, ExperimentPageHeader, ExperimentResultSpanPane, ExperimentResultTracePanel, ExperimentResultsPanel, ExperimentStats, ExperimentStatusCard, ExperimentTriggerDialog, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FileBrowser, FileViewer, FiltersIcon, FolderIcon, GenerationProvider, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, InformationPage, Input, InstructionBlocksPage, IntegrationToolsSection, ItemList, ItemListSkeleton, ItemPageToolbar, JSONImportDialog, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, LLMModels, LLMProviders, Label, LatencyCard, LatencyIcon, LinkComponentProvider, ListSearch, LoginButton, LoginPage, LogoWithoutText, LogsIcon, MCPClientCreateContent, MCPClientEditLayout, MCPClientFormSidebar, MCPClientList, MCPClientToolPreview, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MarkdownRenderer, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, McpServersList, MemoryIcon, MemoryPage, MemorySearch, MemorySection, MetricsCard, MetricsDashboard, MetricsDataTable, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, ModelUsageCostCard, MultiColumn, MultiCombobox, NavigationCommand, NestedFields, Notice, Notification, OPERATORS, OPERATOR_LABELS, ObservationalMemoryProvider, OpenAIIcon, PER_PAGE$2 as PER_PAGE, PageHeader, PermissionDenied, PlaygroundConfigGuard, PlaygroundModelProvider, PlaygroundQueryClient, Popover, PopoverContent, PopoverTrigger, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorCombobox, ProcessorIcon, ProcessorPanel, ProcessorTable, ProcessorsList, PromptBlockCreateContent, PromptBlockEditMain, PromptBlockEditSidebar, PromptBlockPickerDialog, PromptBlockVersionCombobox, PromptBlocksTable, PromptIcon, PromptsList, ProviderLogo, RadioGroup, RadioGroupItem, ReferenceViewerDialog, RepoIcon, RequestContext, RequestContextSchemaForm, RequestContextWrapper, ReviewPipelineCard, ReviewQueueProvider, Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, STORED_SCORER_TYPES, SchemaRequestContext, SchemaRequestContextProvider, ScoreAsItemDialog, ScoreDelta, ScoreDialog, ScorerCombobox, ScorerCreateContent, ScorerEditMain, ScorerEditSidebar, ScorerSelector, ScorerVersionCombobox, ScorersList, ScorersPage, ScorersSection, ScorersTable, ScoresCard, ScoresList, ScoresOverTimeCard, ScoresTools, ScrollArea, ScrollBar, SearchFieldBlock, SearchSkillsPanel, SearchWorkspacePanel, Searchbar, SearchbarWrapper, Section, SectionHeader, Sections, Select, SelectContent, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SettingsIcon, ShadcnAutoFormFieldComponents, SideDialog, Skeleton, SkillDetail, SkillIcon, SkillRemoveButton, SkillUpdateButton, SkillsNotConfigured, SkillsPage, SkillsTable, SlashIcon, Slider, SpanScoreList, SpanScoring, SpanTabs, Spinner, StudioConfigContext, StudioConfigForm, StudioConfigProvider, SubSectionHeader, Switch, Tab, TabContent, TabList, Table, Tabs, TargetSelector, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextFieldBlock, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, TokenUsageByAgentCard, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolList, ToolPanel, ToolProviderDialog, ToolTable, ToolkitList, ToolsIcon, ToolsList, ToolsPage, ToolsSection, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceAsItemDialog, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracesVolumeCard, TracingSettingsContext, TracingSettingsProvider, Tree, Truncate, TsIcon, Txt, TxtCell, UserAvatar, UserMenu, VARIABLE_PATTERN, VariablesIcon, VariablesPage, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkflowsList, WorkflowsPage, WorkflowsSection, WorkingMemoryContext, WorkingMemoryProvider, WorkspaceNotConfigured, agentFormSchema, arrayToRecord, buildObservationalMemoryForApi, buttonVariants, cleanProviderId, cn, collectMCPClientIds, columns$6 as columns, comboboxStyles, computeAgentInitialValues, convertWorkflowRunStateToStreamResult, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createInstructionBlock, createRefInstructionBlock, createVariableAutocomplete, exportItemsToCSV, exportItemsToJSON, extractPrompt, fieldConfig, fieldsToJSONSchema, findProviderById, flattenSchemaToVariables, formatCompact, formatHierarchicalSpans, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getItemListColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getWorkflowRunsNextPageParam, groupTracesByThread, highlight, inputVariants, is403ForbiddenError, isActive, isAuthenticated, isRule, isRuleGroup, isValidPreset, isWorkspaceV1Supported, joinModelId, jsonSchemaToFields, makeAuthCapabilitiesRequest, makeLogoutRequest, makeSSOLoginRequest, mapAgentResponseToDataSource, mapInstructionBlocksFromApi, mapInstructionBlocksToApi, mapScorersToApi, normalizeIntegrationToolsToRecord, normalizeScorersFromApi, normalizeSkillsFromApi, normalizeToolsToRecord, normalizeWorkspaceFromApi, parseError, parseFieldPath, parseJSONCell, parseObservationalMemoryFromApi, parseRow, parseSkillSource, promptBlockFormSchema, providerMapToIcon, removeEmptyValues, resolveSerializedZodOutput, scorerFormSchema, scoresListColumns, selectUniqueRuns, shouldRetryQuery, spanTypePrefixes$1 as spanTypePrefixes, splitModelId, toast, traceScoresListColumns, tracesListColumns, transformIntegrationToolsForApi, useActivateAgentVersion, useActivatePromptBlockVersion, useActivateScorerVersion, useActivatedSkills, useAgent, useAgentCmsForm, useAgentCmsNavigation, useAgentEditForm, useAgentEditFormContext, useAgentExperiments, useAgentInformationTab, useAgentRunsKpiMetrics, useAgentSettings, useAgentSkill, useAgentVersion, useAgentVersions, useAgents, useAllIntegrationTools, useAllModels, useAuthCapabilities, useAvgScoreKpiMetrics, useCSVParser, useCanCreateAgent, useCloneThread, useCodemirrorTheme$1 as useCodemirrorTheme, useCompareAgentVersions, useCompareExperiments, useCompareScorerVersions, useCreateAgentVersion, useCreatePromptBlockVersion, useCreateScorerVersion, useCreateSkill, useCreateWorkspaceDirectory, useCredentialsLogin, useCredentialsSignUp, useCurrentRun, useCurrentUser, useDataset, useDatasetExperiment, useDatasetExperimentResults, useDatasetExperiments, useDatasetItem, useDatasetItemVersion, useDatasetItemVersions, useDatasetItems, useDatasetMutations, useDatasetVersions, useDatasets, useDeleteAgentVersion, useDeletePromptBlockVersion, useDeleteScorerVersion, useDeleteThread, useDeleteWorkflowRun, useDeleteWorkspaceFile, useEnvironments, useEvaluationDatasets, useEvaluationExperiments, useEvaluationScoreMetrics, useEvaluationScorers, useExecuteAgentTool, useExecuteMCPTool, useExecuteProcessor, useExecuteTool, useExperimentalFeatures, useFilteredModels, useFilteredProviders, useGenerationTasks, useHasObservability, useInView, useIndexWorkspaceContent, useInstallSkill, useIsCmsAvailable, useIsDarkMode, useItemSelection, useJSONParser, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLLMProviders, useLatencyMetrics, useLinkComponent, useLogout, useMCPServerTool, useMCPServerTools, useMCPServerToolsById, useMCPServers, useMainSidebar, useMastraPackages, useMastraPlatform, useMaybeSidebar, useMemory, useMemoryConfig, useMemorySearch, useMemoryWithOMStatus, useMergedRequestContext, useMetrics, useMetricsFilters, useModelUsageCostMetrics, useNavigationCommand, useObservationalMemory, useObservationalMemoryContext, useOptionalAgentEditFormContext, usePackageUpdates, usePermissions, usePlaygroundModel, usePlaygroundStore, usePopularSkillsSh, useProcessor, useProcessors, usePromptBlockEditForm, usePromptBlockVersion, usePromptBlockVersions, useProviderTools, useRemoveSkill, useReorderModelList, useRequestContextPresets, useResetAgentModel, useRestoreAgentVersion, useRestorePromptBlockVersion, useRestoreScorerVersion, useReviewQueue, useReviewSummary, useSSOLogin, useSchemaRequestContext, useScorer, useScorerEditForm, useScorerVersion, useScorerVersions, useScorers, useScoresByExperimentId, useScoresByScorerId, useScoresMetrics, useSearchSkillsSh, useSearchWorkspace, useSearchWorkspaceSkills, useServiceNames, useSkillPreview, useSpeechRecognition, useStoredAgent, useStoredAgentMutations, useStoredAgents, useStoredPromptBlock, useStoredPromptBlockMutations, useStoredPromptBlocks, useStoredScorer, useStoredScorerMutations, useStoredSkills, useStudioConfig, useTableKeyboardNavigation, useTags, useThread, useThreadInput, useThreads, useTokenUsageByAgentMetrics, useTool, useToolProviders, useToolkits, useTools, useTotalTokensKpiMetrics, useTraceSpanScores, useTraceVolumeMetrics, useTracingSettings, useTryConnectMcp, useUpdateAgentModel, useUpdateModelInModelList, useUpdateSkills, useWorkflow, useWorkflowRun, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory, useWorkspaceFile, useWorkspaceFileStat, useWorkspaceFiles, useWorkspaceInfo, useWorkspaceSkill, useWorkspaceSkillReference, useWorkspaceSkillReferences, useWorkspaceSkills, useWorkspaces, useWriteWorkspaceFile, useWriteWorkspaceFileFromFile, validateCsvRows, validateJSONData, validateMappedData, variableHighlight };
+export { AGENT_CMS_SECTIONS, ActionsMenu, ActivatedSkillsProvider, AddField, AddItemDialog, AddItemsToDatasetDialog, AddSkillDialog, AgentCMSBlock, AgentCMSBlocks, AgentCMSRefBlock, AgentChat, AgentCmsBottomBar, AgentCmsFormShell, AgentCmsSidebar, AgentCoinIcon, AgentCombobox, AgentEditFormProvider, AgentEditLayout, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataCombinedProcessorList, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataSkillList, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWorkspaceToolsList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPageTabs, AgentPlaygroundConfig, AgentPlaygroundEvaluate, AgentPlaygroundRequestContext, AgentPlaygroundReview, AgentPlaygroundTestChat, AgentPlaygroundVersionBar, AgentPlaygroundView, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentTopBarControls, AgentTracesPanel, AgentVersionCombobox, AgentVersionPanel, AgentsCmsLayout, AgentsList, AgentsPage, AgentsSection, AgentsTable, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, AuthRequired, AuthStatus, AutoForm, Avatar, Badge, BranchIcon, Breadcrumb$1 as Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CHART_COLORS, CODE_AGENT_OVERRIDE_SECTIONS, CONTEXT_FIELD_IDS, CSVImportDialog, Cell, ChatThreads, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ComposerModelSwitcher, ContentBlock, ContentBlocks, CopyButton, CreateDatasetDialog, CreateDatasetFromItemsDialog, CrossIcon, Crumb, DashboardCard, DataList, DataListSkeleton, DatasetCombobox, DatasetCompareVersionToolbar, DatasetCompareVersionsList, DatasetExperiments, DatasetExperimentsComparison, DatasetHealthCard, DatasetItemContent, DatasetItemHeader, DatasetItemVersionsPanel, DatasetItemsList, DatasetPageContent, DatasetVersionsPanel, DatasetsList, DatasetsTable, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeleteDatasetDialog, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayConditionsDialog, DividerIcon, DocsIcon, DropdownMenu, DuplicateDatasetDialog, DynamicForm, EditDatasetDialog, EditModeContent, ElementSelect, EmptyDatasetsTable, EmptyState$1 as EmptyState, Entity, EntityAccordionItem, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, EvaluationDashboard, EvaluationDatasetsList, EvaluationExperimentsList, EvaluationKpiCards, EvaluationScorersList, ExperimentPageContent, ExperimentPageHeader, ExperimentResultSpanPane, ExperimentResultTracePanel, ExperimentResultsPanel, ExperimentStats, ExperimentStatusCard, ExperimentTriggerDialog, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FileBrowser, FileViewer, FiltersIcon, FolderIcon, GenerationProvider, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, InformationPage, Input, InstructionBlocksPage, IntegrationToolsSection, ItemList, ItemListSkeleton, ItemPageToolbar, JSONImportDialog, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, LLMModels, LLMProviders, Label, LatencyCard, LatencyIcon, LinkComponentProvider, ListSearch, LogDetails, LoginButton, LoginPage, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, LogsList, LogsToolbar, MCPClientCreateContent, MCPClientEditLayout, MCPClientFormSidebar, MCPClientList, MCPClientToolPreview, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MarkdownRenderer, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, McpServersList, MemoryIcon, MemoryPage, MemorySearch, MemorySection, MetricsCard, MetricsDashboard, MetricsDataTable, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, ModelUsageCostCard, MultiColumn, MultiCombobox, NavigationCommand, NestedFields, Notice, Notification, OPERATORS, OPERATOR_LABELS, ObservationalMemoryProvider, OpenAIIcon, PER_PAGE$2 as PER_PAGE, PageHeader, PermissionDenied, PlaygroundConfigGuard, PlaygroundModelProvider, PlaygroundQueryClient, Popover, PopoverContent, PopoverTrigger, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorCombobox, ProcessorIcon, ProcessorPanel, ProcessorTable, ProcessorsList, PromptBlockCreateContent, PromptBlockEditMain, PromptBlockEditSidebar, PromptBlockPickerDialog, PromptBlockVersionCombobox, PromptBlocksTable, PromptIcon, PromptsList, ProviderLogo, RadioGroup, RadioGroupItem, ReferenceViewerDialog, RepoIcon, RequestContext, RequestContextSchemaForm, RequestContextWrapper, ReviewPipelineCard, ReviewQueueProvider, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, STORED_SCORER_TYPES, SchemaRequestContext, SchemaRequestContextProvider, ScoreAsItemDialog, ScoreDelta, ScoreDialog, ScorerCombobox, ScorerCreateContent, ScorerEditMain, ScorerEditSidebar, ScorerSelector, ScorerVersionCombobox, ScorersList, ScorersPage, ScorersSection, ScorersTable, ScoresCard, ScoresList, ScoresOverTimeCard, ScoresTools, ScrollArea, ScrollBar, SearchFieldBlock, SearchSkillsPanel, SearchWorkspacePanel, Searchbar, SearchbarWrapper, Section, SectionHeader, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SettingsIcon, ShadcnAutoFormFieldComponents, SideDialog, Skeleton, SkillDetail, SkillIcon, SkillRemoveButton, SkillUpdateButton, SkillsNotConfigured, SkillsPage, SkillsTable, SlashIcon, Slider, SpanScoreList, SpanScoring, SpanTabs, Spinner, StudioConfigContext, StudioConfigForm, StudioConfigProvider, SubSectionHeader, Switch, Tab, TabContent, TabList, Table, Tabs, TargetSelector, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextFieldBlock, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, TokenUsageByAgentCard, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolList, ToolPanel, ToolProviderDialog, ToolTable, ToolkitList, ToolsIcon, ToolsList, ToolsPage, ToolsSection, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceAsItemDialog, TraceDetails, TraceDialog, TraceIcon, TraceTimeline$1 as TraceTimeline, TraceTimelineSpan$1 as TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracesVolumeCard, TracingSettingsContext, TracingSettingsProvider, Tree, Truncate, TsIcon, Txt, TxtCell, UserAvatar, UserMenu, VARIABLE_PATTERN, VariablesIcon, VariablesPage, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkflowsList, WorkflowsPage, WorkflowsSection, WorkingMemoryContext, WorkingMemoryProvider, WorkspaceNotConfigured, agentFormSchema, arrayToRecord, buildObservationalMemoryForApi, buttonVariants, cleanProviderId, cn, collectMCPClientIds, columns$6 as columns, comboboxStyles, computeAgentInitialValues, convertWorkflowRunStateToStreamResult, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createInstructionBlock, createRefInstructionBlock, createVariableAutocomplete, exportItemsToCSV, exportItemsToJSON, extractPrompt, fieldConfig, fieldsToJSONSchema, findProviderById, flattenSchemaToVariables, formatCompact, formatHierarchicalSpans$1 as formatHierarchicalSpans, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getItemListColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi$1 as getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getWorkflowRunsNextPageParam, groupTracesByThread, highlight, inputVariants, is403ForbiddenError, isActive, isAuthenticated, isRule, isRuleGroup, isValidLogsDatePreset, isValidPreset, isWorkspaceV1Supported, joinModelId, jsonSchemaToFields, makeAuthCapabilitiesRequest, makeLogoutRequest, makeSSOLoginRequest, mapAgentResponseToDataSource, mapInstructionBlocksFromApi, mapInstructionBlocksToApi, mapScorersToApi, normalizeIntegrationToolsToRecord, normalizeScorersFromApi, normalizeSkillsFromApi, normalizeToolsToRecord, normalizeWorkspaceFromApi, parseError, parseFieldPath, parseJSONCell, parseObservationalMemoryFromApi, parseRow, parseSkillSource, promptBlockFormSchema, providerMapToIcon, removeEmptyValues, resolveSerializedZodOutput, scorerFormSchema, scoresListColumns, selectUniqueRuns, shouldRetryQuery, spanTypePrefixes$1 as spanTypePrefixes, splitModelId, toast, traceScoresListColumns, tracesListColumns, transformIntegrationToolsForApi, useActivateAgentVersion, useActivatePromptBlockVersion, useActivateScorerVersion, useActivatedSkills, useAgent, useAgentCmsForm, useAgentCmsNavigation, useAgentEditForm, useAgentEditFormContext, useAgentExperiments, useAgentInformationTab, useAgentRunsKpiMetrics, useAgentSettings, useAgentSkill, useAgentVersion, useAgentVersions, useAgents, useAllIntegrationTools, useAllModels, useAuthCapabilities, useAvgScoreKpiMetrics, useCSVParser, useCanCreateAgent, useCloneThread, useCodemirrorTheme$2 as useCodemirrorTheme, useCompareAgentVersions, useCompareExperiments, useCompareScorerVersions, useCreateAgentVersion, useCreatePromptBlockVersion, useCreateScorerVersion, useCreateSkill, useCreateWorkspaceDirectory, useCredentialsLogin, useCredentialsSignUp, useCurrentRun, useCurrentUser, useDataset, useDatasetExperiment, useDatasetExperimentResults, useDatasetExperiments, useDatasetItem, useDatasetItemVersion, useDatasetItemVersions, useDatasetItems, useDatasetMutations, useDatasetVersions, useDatasets, useDeleteAgentVersion, useDeletePromptBlockVersion, useDeleteScorerVersion, useDeleteThread, useDeleteWorkflowRun, useDeleteWorkspaceFile, useEnvironments, useEvaluationDatasets, useEvaluationExperiments, useEvaluationScoreMetrics, useEvaluationScorers, useExecuteAgentTool, useExecuteMCPTool, useExecuteProcessor, useExecuteTool, useExperimentalFeatures, useFilteredModels, useFilteredProviders, useGenerationTasks, useHasObservability, useInView, useIndexWorkspaceContent, useInstallSkill, useIsCmsAvailable, useIsDarkMode, useItemSelection, useJSONParser, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLLMProviders, useLatencyMetrics, useLinkComponent, useLogout, useLogsFilters, useMCPServerTool, useMCPServerTools, useMCPServerToolsById, useMCPServers, useMainSidebar, useMastraPackages, useMastraPlatform, useMaybeSidebar, useMemory, useMemoryConfig, useMemorySearch, useMemoryWithOMStatus, useMergedRequestContext, useMetrics, useMetricsFilters, useModelUsageCostMetrics, useNavigationCommand, useObservationalMemory, useObservationalMemoryContext, useOptionalAgentEditFormContext, usePackageUpdates, usePermissions, usePlaygroundModel, usePlaygroundStore, usePopularSkillsSh, useProcessor, useProcessors, usePromptBlockEditForm, usePromptBlockVersion, usePromptBlockVersions, useProviderTools, useRemoveSkill, useReorderModelList, useRequestContextPresets, useResetAgentModel, useRestoreAgentVersion, useRestorePromptBlockVersion, useRestoreScorerVersion, useReviewQueue, useReviewSummary, useSSOLogin, useSchemaRequestContext, useScorer, useScorerEditForm, useScorerVersion, useScorerVersions, useScorers, useScoresByExperimentId, useScoresByScorerId, useScoresMetrics, useSearchSkillsSh, useSearchWorkspace, useSearchWorkspaceSkills, useServiceNames, useSkillPreview, useSpeechRecognition, useStoredAgent, useStoredAgentMutations, useStoredAgents, useStoredPromptBlock, useStoredPromptBlockMutations, useStoredPromptBlocks, useStoredScorer, useStoredScorerMutations, useStoredSkills, useStudioConfig, useTableKeyboardNavigation, useTags, useThread, useThreadInput, useThreads, useTokenUsageByAgentMetrics, useTool, useToolProviders, useToolkits, useTools, useTotalTokensKpiMetrics, useTraceSpanScores, useTraceVolumeMetrics, useTracingSettings, useTryConnectMcp, useUpdateAgentModel, useUpdateModelInModelList, useUpdateSkills, useWorkflow, useWorkflowRun, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory, useWorkspaceFile, useWorkspaceFileStat, useWorkspaceFiles, useWorkspaceInfo, useWorkspaceSkill, useWorkspaceSkillReference, useWorkspaceSkillReferences, useWorkspaceSkills, useWorkspaces, useWriteWorkspaceFile, useWriteWorkspaceFileFromFile, validateCsvRows, validateJSONData, validateMappedData, variableHighlight };
 //# sourceMappingURL=index.es.js.map