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

package/dist/index.cjs.js

@@ -5757,7 +5757,7 @@ function buildLightTheme() {
   ]);
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
-const useCodemirrorTheme$1 = () => {
+const useCodemirrorTheme$2 = () => {
   const isDark = useIsDarkMode();
   return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
@@ -5776,7 +5776,7 @@ const CodeEditor = React.forwardRef(
     lineNumbers = true,
     ...props
   }, ref) => {
-    const theme = useCodemirrorTheme$1();
+    const theme = useCodemirrorTheme$2();
     const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
     const extensions = React.useMemo(() => {
       const exts = [];
@@ -8389,7 +8389,7 @@ const CodeDialogContent = ({
   data,
   language = "auto"
 }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const getExtensions = (content) => {
     if (language === "javascript") {
       return [langJavascript.javascript(), view.EditorView.lineWrapping];
@@ -10384,7 +10384,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] = React.useState(null);
@@ -12866,7 +12866,7 @@ function EntityListTopCellWithTooltip({ children, tooltip, className }) {
     /* @__PURE__ */ jsxRuntime.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" },
@@ -12881,7 +12881,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
@@ -12914,14 +12914,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__ */ jsxRuntime.jsx(EntityListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -13112,7 +13112,7 @@ const WorkflowRunOptions = () => {
 };
 
 const TracingRunOptions = () => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const { settings, setSettings, entityType } = useTracingSettings();
   const handleChange = (value) => {
     if (!value) {
@@ -17878,7 +17878,7 @@ const AgentAdvancedSettings = () => {
   const [providerOptionsValue, setProviderOptionsValue] = React.useState("");
   const [saved, setSaved] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const { handleCopy } = useCopyToClipboard$1({ text: providerOptionsValue });
   const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
   React.useEffect(() => {
@@ -18498,7 +18498,7 @@ const EmptyAgentsTable = () => {
 const RequestContext = () => {
   const { requestContext, setRequestContext } = usePlaygroundStore();
   const [requestContextValue, setRequestContextValue] = React.useState("");
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const presets = useRequestContextPresets();
   const [selectedPreset, setSelectedPreset] = React.useState(() => {
     if (!presets || !requestContext) return "__custom__";
@@ -19081,11 +19081,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__ */ jsxRuntime.jsx(EntryListEntries, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntryListEntry, { columns, children: (columns || []).map((col, colIdx) => {
     const key = `${col.name}-${colIdx}`;
@@ -19305,17 +19305,17 @@ function buildSideDialogLightTheme() {
   ]);
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
-const useCodemirrorTheme = () => {
+const useCodemirrorTheme$1 = () => {
   const isDark = useIsDarkMode();
   return React.useMemo(() => isDark ? buildSideDialogDarkTheme() : buildSideDialogLightTheme(), [isDark]);
 };
 function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
   const hasMultilineText = React.useMemo(() => {
     try {
       const parsed = JSON.parse(codeStr);
-      return containsInnerNewline(parsed || "");
+      return containsInnerNewline$1(parsed || "");
     } catch {
       return false;
     }
@@ -19335,14 +19335,14 @@ function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }
     codeStr && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all px-2", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), view.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;
 }
@@ -22094,7 +22094,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__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" });
@@ -22813,7 +22813,7 @@ const ToolExecutorContent = ({
   toolType,
   requestContextSchema
 }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const code = JSON.stringify(result ?? {}, null, 2);
   const [selectedTab, setSelectedTab] = React.useState("input-data");
   const { schemaValues } = useSchemaRequestContext();
@@ -24594,7 +24594,7 @@ function removeFieldAtPath(fields, path, fieldId) {
   });
 }
 
-function Root({
+function Root$1({
   onChange,
   onFieldsChange,
   defaultValue,
@@ -24875,7 +24875,7 @@ function AddField({ children, ...props }) {
 }
 
 const JSONSchemaForm = {
-  Root: Root,
+  Root: Root$1,
   Field: Field,
   FieldList: FieldList,
   FieldName: FieldName,
@@ -33139,7 +33139,7 @@ const useScoresByExperimentId = (experimentId, experimentStatus) => {
   });
 };
 
-const formatHierarchicalSpans = (spans) => {
+const formatHierarchicalSpans$1 = (spans) => {
   if (!spans || spans.length === 0) {
     return [];
   }
@@ -33339,7 +33339,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;
   }
@@ -33631,7 +33631,7 @@ function SpanTabs({
     /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "details", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
       span?.attributes?.usage ? /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo }),
-      /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span })
+      /* @__PURE__ */ jsxRuntime.jsx(SpanDetails$1, { span })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "scores", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
@@ -33779,20 +33779,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: {
@@ -33839,7 +33839,7 @@ function getSpanTypeUi(type) {
   };
 }
 
-function TimelineExpandCol({
+function TimelineExpandCol$1({
   isSelected,
   isFaded,
   isExpanded,
@@ -33857,12 +33857,12 @@ function TimelineExpandCol({
         "bg-surface4": isSelected
       }),
       children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: () => toggleChildren?.(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$2, { onClick: () => toggleChildren?.(), children: [
           allDescendantsExpanded ? totalDescendants : numOfChildren,
           " ",
           isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
         ] }),
-        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: () => expandAllDescendants?.(), children: [
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$2, { onClick: () => expandAllDescendants?.(), children: [
           totalDescendants,
           " ",
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
@@ -33871,7 +33871,7 @@ function TimelineExpandCol({
     }
   );
 }
-function ExpandButton$1({ onClick, children, className }) {
+function ExpandButton$2({ onClick, children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -33899,7 +33899,7 @@ function SpanTypeIcon({ icon, color }) {
   );
 }
 
-function TimelineStructureSign({
+function TimelineStructureSign$1({
   isLastChild,
   hasChildren = false,
   expanded = false
@@ -33931,7 +33931,7 @@ function TimelineStructureSign({
   );
 }
 
-function TimelineNameCol({
+function TimelineNameCol$1({
   span,
   spanUI,
   isFaded,
@@ -33963,7 +33963,7 @@ function TimelineNameCol({
               "cursor-default": !hasChildren,
               "cursor-pointer": hasChildren
             }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(TimelineStructureSign, { isLastChild, hasChildren: Boolean(hasChildren), expanded: isExpanded })
+            children: /* @__PURE__ */ jsxRuntime.jsx(TimelineStructureSign$1, { isLastChild, hasChildren: Boolean(hasChildren), expanded: isExpanded })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -33987,7 +33987,7 @@ function TimelineNameCol({
   );
 }
 
-function TimelineTimingCol({
+function TimelineTimingCol$1({
   span,
   selectedSpanId,
   isFaded,
@@ -34090,7 +34090,7 @@ function TimelineTimingCol({
   ] });
 }
 
-function TraceTimelineSpan({
+function TraceTimelineSpan$1({
   span,
   depth = 0,
   onSpanClick,
@@ -34107,10 +34107,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;
@@ -34141,7 +34141,7 @@ function TraceTimelineSpan({
   const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      TimelineNameCol,
+      TimelineNameCol$1,
       {
         span,
         spanUI,
@@ -34157,7 +34157,7 @@ function TraceTimelineSpan({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      TimelineExpandCol,
+      TimelineExpandCol$1,
       {
         isSelected: selectedSpanId === span.id,
         isFaded,
@@ -34171,7 +34171,7 @@ function TraceTimelineSpan({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      TimelineTimingCol,
+      TimelineTimingCol$1,
       {
         span,
         selectedSpanId,
@@ -34185,7 +34185,7 @@ function TraceTimelineSpan({
     hasChildren && isExpanded && span.spans?.map((childSpan, idx, array) => {
       const isLastChild2 = idx === array.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsx(
-        TraceTimelineSpan,
+        TraceTimelineSpan$1,
         {
           span: childSpan,
           depth: depth + 1,
@@ -34206,7 +34206,7 @@ function TraceTimelineSpan({
   ] });
 }
 
-function TraceTimeline({
+function TraceTimeline$1({
   hierarchicalSpans = [],
   onSpanClick,
   selectedSpanId,
@@ -34239,7 +34239,7 @@ function TraceTimeline({
         "xl:grid-cols-[2fr_auto_1fr]": overallEndTime
       }),
       children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
-        TraceTimelineSpan,
+        TraceTimelineSpan$1,
         {
           span,
           onSpanClick,
@@ -34286,7 +34286,8 @@ function SearchFieldBlock({
   placeholder = "Search...",
   onChange,
   onReset,
-  className
+  className,
+  size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Layout, { layout, className, children: [
     layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
@@ -34301,6 +34302,7 @@ function SearchFieldBlock({
             value,
             placeholder,
             onChange,
+            size,
             className: "pl-10"
           }
         ),
@@ -34376,7 +34378,7 @@ function TraceTimelineTools({
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(CombinedButtons, { children: [
       usedSpanTypes.map((item) => {
-        const spanUI = getSpanTypeUi(item);
+        const spanUI = getSpanTypeUi$1(item);
         const isFaded = fadedTypes?.includes(item);
         return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
@@ -34462,7 +34464,7 @@ function TraceDialog({
     }
   }, [selectedSpanId]);
   const hierarchicalSpans = React.useMemo(() => {
-    return formatHierarchicalSpans(traceSpans);
+    return formatHierarchicalSpans$1(traceSpans);
   }, [traceSpans]);
   const flatSpans = React.useMemo(() => {
     const flattenSpans = (spans) => {
@@ -34639,7 +34641,7 @@ function TraceDialog({
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        TraceTimeline,
+                        TraceTimeline$1,
                         {
                           hierarchicalSpans,
                           onSpanClick: handleSpanClick,
@@ -39452,7 +39454,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 = React.useId();
   const [value, setValue] = React.useState("");
   const debouncedSearch = useDebounce.useDebouncedCallback((val) => {
@@ -39481,6 +39483,7 @@ const ListSearch = ({ onSearch, label, placeholder, debounceMs = 300 }) => {
       value,
       onChange: handleChange,
       onReset: handleReset,
+      size,
       className: "w-full max-w-[30rem]"
     }
   );
@@ -40452,7 +40455,7 @@ function ProcessorPanel({ processorId }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ProcessorDetailPanel, { processor });
 }
 function ProcessorDetailPanel({ processor }) {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   const formId = React.useId();
   const [selectedPhase, setSelectedPhase] = React.useState(processor.phases[0] || "input");
   const [selectedAgentId, setSelectedAgentId] = React.useState(processor.configurations[0]?.agentId || "");
@@ -41649,14 +41652,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");
 }
@@ -41703,7 +41706,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) {
@@ -42929,7 +42932,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" },
@@ -42944,7 +42947,7 @@ function DateRangeSelector() {
       name: "date-range",
       labelIsHidden: true,
       value: datePreset,
-      options: DATE_PRESETS$1,
+      options: DATE_PRESETS$2,
       onValueChange: (value) => setDatePreset(value)
     }
   );
@@ -43025,7 +43028,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 },
@@ -43039,17 +43042,17 @@ function buildDateWithTime(date, timeStr) {
   const combined = dateFns.parse(timeStr, "h:mm a", dateOnly);
   return dateFns.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__ */ jsxRuntime.jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.SubContent, { className: cn(subContentClass, className), ...props, children }) });
+function PortalSubContent$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.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"
@@ -43124,7 +43127,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") {
@@ -43135,7 +43138,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");
@@ -43279,7 +43282,7 @@ function TracesTools({
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
         datePresetLabel
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", children: DATE_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Item, { onSelect: () => handleDatePresetSelect(preset.value), children: preset.label }, preset.value)) })
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", children: DATE_PRESETS$1.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Item, { onSelect: () => handleDatePresetSelect(preset.value), children: preset.label }, preset.value)) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { modal: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, children: [
@@ -43328,7 +43331,7 @@ function TracesTools({
             "Status",
             errorOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenu.CheckboxItem,
               {
@@ -43354,8 +43357,8 @@ function TracesTools({
             "Entity Type",
             selectedEntity && selectedEntity.value !== "all" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
-            entityOptions.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: entitySearch, onChange: setEntitySearch, label: "Search entity types" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { children: [
+            entityOptions.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch$1, { value: entitySearch, onChange: setEntitySearch, label: "Search entity types" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenu.RadioGroup,
               {
@@ -43376,8 +43379,8 @@ function TracesTools({
             "Tags",
             (selectedTags ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedTags?.length })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { children: [
-            (availableTags ?? []).length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: tagSearch, onChange: setTagSearch, label: "Search tags" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { children: [
+            (availableTags ?? []).length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch$1, { value: tagSearch, onChange: setTagSearch, label: "Search tags" }),
             (availableTags ?? []).filter((tag) => !tagSearch || tag.toLowerCase().includes(tagSearch.toLowerCase())).map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenu.CheckboxItem,
               {
@@ -43401,9 +43404,9 @@ function TracesTools({
             "Metadata",
             metadataCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: metadataCount })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-            metadataKeys.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
-              SubMenuSearch,
+          /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+            metadataKeys.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(
+              SubMenuSearch$1,
               {
                 value: metadataKeySearch,
                 onChange: setMetadataKeySearch,
@@ -43418,9 +43421,9 @@ function TracesTools({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: key }),
                   selectedValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-                  values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
-                    SubMenuSearch,
+                /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+                  values.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(
+                    SubMenuSearch$1,
                     {
                       value: subValueSearch,
                       onChange: setSubValueSearch,
@@ -43478,9 +43481,9 @@ function TracesTools({
               group,
               activeInGroup > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: activeInGroup })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-              fieldsWithValues.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
-                SubMenuSearch,
+            /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+              fieldsWithValues.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(
+                SubMenuSearch$1,
                 {
                   value: contextFieldSearch,
                   onChange: setContextFieldSearch,
@@ -43497,9 +43500,9 @@ function TracesTools({
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: field.label }),
                     selectedValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: "1" })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-80"), children: [
-                    values.length >= SUBMENU_SEARCH_THRESHOLD && /* @__PURE__ */ jsxRuntime.jsx(
-                      SubMenuSearch,
+                  /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent$1, { className: cn("max-h-80"), children: [
+                    values.length >= SUBMENU_SEARCH_THRESHOLD$1 && /* @__PURE__ */ jsxRuntime.jsx(
+                      SubMenuSearch$1,
                       {
                         value: subValueSearch,
                         onChange: setSubValueSearch,
@@ -43555,7 +43558,7 @@ function TracesTools({
         ] })
       ] })
     ] }),
-    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, onClick: () => onReset(), children: [
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { disabled: isLoading, size: "md", onClick: () => onReset(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
       "Reset"
     ] }),
@@ -46248,11 +46251,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__ */ jsxRuntime.jsx(ItemListItems, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(ItemListRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemListRowButton, { columns, children: (columns || []).map((col, colIdx) => {
     const key = `${col.name}-${colIdx}`;
@@ -49675,14 +49678,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;
 }
@@ -49753,12 +49756,12 @@ function ExperimentTraceTimelineExpandCol({
         "bg-surface4": isSelected
       }),
       children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: () => toggleChildren?.(), children: [
           allDescendantsExpanded ? totalDescendants : numOfChildren,
           " ",
           isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
         ] }),
-        totalDescendants > (numOfChildren ?? 0) && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+        totalDescendants > (numOfChildren ?? 0) && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: () => expandAllDescendants?.(), children: [
           totalDescendants,
           " ",
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
@@ -49767,7 +49770,7 @@ function ExperimentTraceTimelineExpandCol({
     }
   );
 }
-function ExpandButton({ onClick, children, className }) {
+function ExpandButton$1({ onClick, children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -49877,7 +49880,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);
@@ -51409,6 +51412,1803 @@ function DatasetCompareVersionsList({
   }) }) }) });
 }
 
+function DataDetailsPanel$1({ collapsed, children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    ButtonWithTooltip,
+    {
+      size: "md",
+      onClick,
+      "aria-label": "Close Panel",
+      tooltipContent: tooltip,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    }
+  );
+}
+
+const useCodemirrorTheme = () => {
+  return React.useMemo(
+    () => codemirrorThemeDracula.draculaInit({
+      settings: {
+        fontFamily: "var(--geist-mono)",
+        fontSize: "0.75rem",
+        lineHighlight: "transparent",
+        gutterBackground: "transparent",
+        gutterForeground: "#939393",
+        background: "transparent"
+      },
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
+    }),
+    []
+  );
+};
+function DataDetailsPanelCodeSection({
+  codeStr = "",
+  title,
+  icon,
+  simplified = false,
+  className
+}) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
+  const hasMultilineText = React.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ButtonsGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content", size: "sm" }),
+        hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "sm",
+            "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+            onClick: () => setShowAsMultilineText((v) => !v),
+            children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      CodeMirror,
+      {
+        extensions: [langJson.json(), CodeMirror.EditorView.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__ */ jsxRuntime.jsx("div", { className: "flex-1 p-4 overflow-y-auto", children });
+}
+
+function DataDetailsPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5", className), children });
+}
+function Key({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: cn("text-ui-smd  text-neutral2 shrink-0 py-0.5", className), children });
+}
+function Value({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataDetailsPanelNoData({ children }) {
+  return /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
+  const date = toDate$1(log.timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel, { collapsed, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Log ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: dateFns.format(date, "MMM dd, HH:mm:ss.SSS") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+        onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonWithTooltip,
+          {
+            size: "md",
+            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            onClick: () => setCollapsed(!collapsed),
+            children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Previous log", onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Next log", onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+      ] })
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral4 font-mono wrap-break-word whitespace-pre-wrap", children: log.message }),
+      (log.traceId || log.spanId) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-2 my-8", "[&>button]:justify-between [&>button]:overflow-hidden"), children: [
+        log.traceId && /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              size: "md",
+              className: "min-w-0 flex-1 overflow-hidden",
+              onClick: () => onTraceClick?.(log.traceId),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Trace" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.traceId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: log.traceId, size: "md", tooltip: "Copy Trace ID to clipboard" })
+        ] }),
+        log.spanId && /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", className: "min-w-0 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              size: "md",
+              className: "min-w-0 flex-1 overflow-hidden",
+              disabled: !log.traceId || !onSpanClick,
+              onClick: () => log.traceId && onSpanClick?.(log.traceId, log.spanId),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Span" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: " ml-auto text-ui-sm text-neutral2 min-w-0 truncate", children: [
+                  "# ",
+                  log.spanId
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: log.spanId, size: "md", tooltip: "Copy Span ID to clipboard" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(KV$1, { className: "mb-6", children: [
+        log.entityType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Entity Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: log.entityType })
+        ] }),
+        log.entityName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Entity Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: log.entityName })
+        ] }),
+        log.serviceName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Service" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: log.serviceName })
+        ] }),
+        log.environment && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Environment" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: log.environment })
+        ] }),
+        log.source && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: "Source" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: log.source })
+        ] }),
+        log.metadata && Object.keys(log.metadata).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV$1.Header, { children: "Metadata" }),
+          Object.entries(log.metadata).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(KV$1.Key, { children: key }),
+            /* @__PURE__ */ jsxRuntime.jsx(KV$1.Value, { children: String(value) })
+          ] }, key))
+        ] })
+      ] }),
+      log.data && Object.keys(log.data).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CodeSection, { title: "Data", codeStr: JSON.stringify(log.data, null, 2), className: "mt-6" })
+    ] })
+  ] });
+}
+
+function useTraceSpans(traceId) {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["trace-spans", traceId],
+    queryFn: async () => {
+      if (!traceId) {
+        throw new Error("Trace ID is required");
+      }
+      const res = await client.getTrace(traceId);
+      return res;
+    },
+    enabled: !!traceId
+  });
+}
+
+const 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__ */ jsxRuntime.jsx(AgentIcon, {}),
+      color: "oklch(0.75 0.15 250)",
+      label: "Agent",
+      bgColor: "oklch(0.75 0.15 250 / 0.1)",
+      typePrefix: "agent"
+    },
+    workflow: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}),
+      color: "oklch(0.75 0.15 200)",
+      label: "Workflow",
+      bgColor: "oklch(0.75 0.15 200 / 0.1)",
+      typePrefix: "workflow"
+    },
+    model: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, {}),
+      color: "oklch(0.75 0.15 320)",
+      label: "Model",
+      bgColor: "oklch(0.75 0.15 320 / 0.1)",
+      typePrefix: "model"
+    },
+    mcp: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
+      color: "oklch(0.75 0.15 160)",
+      label: "MCP",
+      bgColor: "oklch(0.75 0.15 160 / 0.1)",
+      typePrefix: "mcp"
+    },
+    tool: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+      color: "oklch(0.75 0.15 100)",
+      label: "Tool",
+      bgColor: "oklch(0.75 0.15 100 / 0.1)",
+      typePrefix: "tool"
+    }
+  };
+  if (typePrefix in spanTypeToUiElements) {
+    return spanTypeToUiElements[typePrefix];
+  }
+  return {
+    typePrefix: "other"
+  };
+}
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  toggleChildren,
+  expandAllDescendants,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end h-full px-1.5", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": isSelected
+      }),
+      children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+          allDescendantsExpanded ? totalDescendants : numOfChildren,
+          " ",
+          isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+        ] }),
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+          totalDescendants,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
+        ] })
+      ] }) : null
+    }
+  );
+}
+function ExpandButton({ onClick, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[0.1rem] text-ui-xs text-neutral5 border border-border1 pl-1.5 pr-0.5 rounded-md transition-all",
+        "hover:text-yellow-500",
+        "[&>svg]:shrink-0 [&>svg]:opacity-80 [&>svg]:w-[0.85rem] [&>svg]:h-[0.85rem] [&>svg]:transition-all"
+      ),
+      children
+    }
+  ) });
+}
+
+function TimelineStructureSign({ isLastChild }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "w-[0.5rem] h-[1.8rem] relative opacity-100 shrink-0",
+        'after:content-[""] after:absolute after:left-[-1px] after:top-0 after:bottom-0 after:w-[0px] after:border-l-[1px] after:border-neutral3 after:border-dashed ',
+        'before:content-[""] before:absolute before:left-0 before:top-[50%] before:w-full before:h-[0px] before:border-b-[1px] before:border-neutral3 before:border-dashed',
+        {
+          "after:bottom-[50%]": isLastChild
+        }
+      )
+    }
+  );
+}
+
+function TimelineNameCol({
+  span,
+  spanUI: _spanUI,
+  isFaded,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  hasChildren: _hasChildren,
+  isRootSpan,
+  isExpanded: _isExpanded
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "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__ */ jsxRuntime.jsx(TimelineStructureSign, { isLastChild }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onSpanClick?.(span.id),
+            className: cn(
+              "text-ui-sm flex items-center text-left gap-1.5 text-neutral6 w-full min-w-0 rounded-md h-full px-2 py-1 transition-colors",
+              "[&>svg]:transition-all [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:ml-auto",
+              "hover:bg-surface4 [&:hover>svg]:opacity-60"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.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__ */ jsxRuntime.jsx("div", { className: cn("w-full p-1.5 rounded-md bg-surface4 transition-colors duration-1000"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-1.5 rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("bg-neutral1 absolute rounded-sm h-1.5 top-0"),
+              style: {
+                width: percentageSpanLatency ? `${percentageSpanLatency}%` : "2px",
+                left: `${percentageSpanStartTime || 0}%`,
+                backgroundColor: color
+              }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end text-neutral3 text-ui-xs"), children: [
+            (span.latency / 1e3).toFixed(3),
+            " s"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.Content,
+      {
+        className: "z-50 w-auto max-w-[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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}),
+                " Span Timing"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightIcon, {})
+                },
+                {
+                  key: "startTime",
+                  label: "Started at",
+                  value: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronFirstIcon, {})
+                },
+                {
+                  key: "endTime",
+                  label: "Ended at",
+                  value: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLastIcon, {})
+                },
+                {
+                  key: "startShift",
+                  label: "Start Shift",
+                  value: `${spanStartTimeShift}ms`,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.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;
+  React.useEffect(() => {
+    if (!featuredSpanIds || allDescendantIds.length === 0) return;
+    if (isExpanded) return;
+    const hasFeaturedDescendant = allDescendantIds.some((id) => featuredSpanIds.includes(id));
+    if (hasFeaturedDescendant && setExpandedSpanIds) {
+      setExpandedSpanIds((prev) => prev ? [...prev, 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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineNameCol,
+      {
+        span,
+        spanUI,
+        isFaded,
+        depth,
+        onSpanClick,
+        selectedSpanId,
+        isLastChild,
+        hasChildren,
+        isRootSpan,
+        isExpanded
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineExpandCol,
+      {
+        isSelected: selectedSpanId === span.id,
+        isFaded,
+        isExpanded,
+        toggleChildren,
+        expandAllDescendants,
+        expandedSpanIds,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1", children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
+    TraceTimelineSpan,
+    {
+      span,
+      onSpanClick,
+      selectedSpanId,
+      overallLatency,
+      overallStartTime,
+      fadedTypes,
+      featuredSpanIds,
+      expandedSpanIds,
+      setExpandedSpanIds
+    },
+    span.id
+  )) }) });
+}
+
+function TraceDetails({ traceId, onClose, onSpanSelect, initialSpanId }) {
+  const { data: traceData, isLoading } = useTraceSpans(traceId);
+  const [selectedSpanId, setSelectedSpanId] = React.useState(initialSpanId ?? void 0);
+  React.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 = React.useMemo(() => formatHierarchicalSpans(traceData?.spans ?? []), [traceData?.spans]);
+  const [expandedSpanIds, setExpandedSpanIds] = React.useState([]);
+  React.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__ */ jsxRuntime.jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Trace ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          traceId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.LoadingData, { children: "Loading trace..." }) : hierarchicalSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.NoData, { children: "No spans found for this trace." }) : /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TraceTimeline,
+      {
+        hierarchicalSpans,
+        onSpanClick: handleSpanClick,
+        selectedSpanId,
+        expandedSpanIds,
+        setExpandedSpanIds
+      }
+    ) })
+  ] });
+}
+
+const NoLogsInfo = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState$1,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(DataDetailsPanel, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Heading, { children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+          "# ",
+          span.spanId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DataDetailsPanel.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(KV, { children: [
+        span.spanType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: span.spanType })
+        ] }),
+        span.startedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Started" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: dateFns.format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        span.endedAt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Ended" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: dateFns.format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") })
+        ] }),
+        durationMs != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Key, { children: "Duration" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KV.Value, { children: durationMs < 1e3 ? `${durationMs}ms` : `${(durationMs / 1e3).toFixed(2)}s` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Input",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+          codeStr: JSON.stringify(span.input ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Output",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+          codeStr: JSON.stringify(span.output ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Metadata",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.metadata ?? null, null, 2)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DataDetailsPanel.CodeSection,
+        {
+          title: "Attributes",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+          codeStr: JSON.stringify(span.attributes ?? null, null, 2)
+        }
+      )
+    ] })
+  ] });
+}
+
+function DataListNextPageLoading({
+  isLoading,
+  hasMore,
+  setEndOfListElement,
+  loadingText = "Loading more data...",
+  noMoreDataText = "No more data to load"
+}) {
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message }) });
+}
+
+function DataListRoot({ children, columns, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn(...dataListRowStyles, className), children });
+}
+
+function DataListRowButton({ children, onClick, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: cn(...dataListRowStyles, "text-left", className), children });
+}
+
+function DataListRowLink({ children, to, className }) {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxRuntime.jsx(Link, { href: to, className: cn(...dataListRowStyles, className), children });
+}
+
+function DataListTop({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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 = React.forwardRef(({ children, className }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className, children }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
+  ] });
+  if (tooltipText) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataListTopCellWithTooltip,
+      {
+        tooltip: tooltipText,
+        className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
+}
+
+function DataListCell({ children, className, height = "default" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListCell, { className, children });
+}
+function DataListNameCell({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
+}
+function DataListDescriptionCell({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
+}
+function LogsDataListDateCell({ timestamp }) {
+  const date = toDate(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
+}
+function LogsDataListTimeCell({ timestamp }) {
+  const date = toDate(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    dateFns.format(date, "HH:mm:ss"),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+      ".",
+      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__ */ jsxRuntime.jsx(AgentIcon, { className: iconClass, "aria-hidden": true });
+    case "WORKFLOW":
+      return /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: iconClass, "aria-hidden": true });
+    case "TOOL":
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: iconClass, "aria-hidden": true });
+    default:
+      return null;
+  }
+}
+function LogsDataListEntityCell({ entityType, entityName }) {
+  const type = entityType ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataListCell, { height: "compact", className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntityTypeIcon, { entityType: type }),
+    entityName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-ui-smd truncate", children: entityName }) : "-"
+  ] });
+}
+function LogsDataListMessageCell({ message }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListCell, { children: /* @__PURE__ */ jsxRuntime.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] = React.useState({});
+  const featuredLogId = controlledLogId ?? internalIds.logId ?? null;
+  const featuredTraceId = controlledTraceId ?? internalIds.traceId ?? null;
+  const featuredSpanId = controlledSpanId ?? internalIds.spanId ?? null;
+  const updateFeatured = React.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] = React.useState();
+  const [logDetailsCollapsed, setLogDetailsCollapsed] = React.useState(false);
+  React.useEffect(() => {
+    if (!featuredSpanId || featuredSpanRecord && featuredSpanRecord.spanId !== featuredSpanId) {
+      setFeaturedSpanRecord(void 0);
+    }
+  }, [featuredSpanId, featuredSpanRecord]);
+  const logIdMap = React.useMemo(() => getLogIds(logs), [logs]);
+  const idToLog = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (let i = 0; i < logs.length; i++) {
+      const id = logIdMap.get(logs[i]);
+      if (id) m.set(id, { log: logs[i], idx: i });
+    }
+    return m;
+  }, [logs, logIdMap]);
+  const entry = featuredLogId ? idToLog.get(featuredLogId) : void 0;
+  const featuredLogIdx = entry?.idx ?? -1;
+  const featuredLog = featuredLogIdx >= 0 ? logs[featuredLogIdx] : null;
+  const 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 = React.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 = React.useCallback(
+    (traceId) => {
+      updateFeatured({ traceId, spanId: null });
+      setFeaturedSpanRecord(void 0);
+    },
+    [updateFeatured]
+  );
+  const handleSpanClick = React.useCallback(
+    (traceId, spanId) => {
+      updateFeatured({ traceId, spanId });
+    },
+    [updateFeatured]
+  );
+  const handleTraceClose = React.useCallback(() => {
+    updateFeatured({ traceId: null, spanId: null });
+    setLogDetailsCollapsed(false);
+    setFeaturedSpanRecord(void 0);
+  }, [updateFeatured]);
+  const handleSpanSelect = React.useCallback(
+    (span) => {
+      updateFeatured({ spanId: span?.spanId ?? null });
+      setFeaturedSpanRecord(span);
+    },
+    [updateFeatured]
+  );
+  const handleSpanClose = React.useCallback(() => {
+    updateFeatured({ spanId: null });
+    setFeaturedSpanRecord(void 0);
+  }, [updateFeatured]);
+  const handleLogClose = React.useCallback(() => {
+    updateFeatured({ logId: null });
+  }, [updateFeatured]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { title: "Failed to load logs", message: error.message });
+  }
+  if (logs.length === 0 && !isLoading && !hasActiveFilters) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NoLogsInfo, {});
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListSkeleton, { columns: COLUMNS$3 });
+  }
+  const hasSidePanel = !!featuredLog;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("grid h-full min-h-0 gap-4 items-start ", hasSidePanel ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList, { columns: COLUMNS$3, className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList.Top, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Time" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Level" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Entity" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Message" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Data" })
+          ] }),
+          logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.NoMatch, { message: "No logs match your search" }) : logs.map((log) => {
+            const id = logIdMap.get(log);
+            const isFeatured = id === featuredLogId;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              LogsDataList.RowButton,
+              {
+                onClick: () => handleLogClick(log),
+                className: cn(isFeatured && "bg-surface4"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.LevelCell, { level: log.level }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.EntityCell, { entityType: log.entityType, entityName: log.entityName }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.MessageCell, { message: log.message }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DataCell, { data: log.data })
+                ]
+              },
+              id
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LogsDataList.NextPageLoading,
+            {
+              isLoading: isFetchingNextPage,
+              hasMore: hasNextPage,
+              setEndOfListElement
+            }
+          )
+        ] }) }),
+        featuredLog && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                LogDetails,
+                {
+                  log: featuredLog,
+                  onClose: handleLogClose,
+                  onTraceClick: handleTraceClick,
+                  onSpanClick: handleSpanClick,
+                  onPrevious: handlePreviousLog,
+                  onNext: handleNextLog,
+                  collapsed: logDetailsCollapsed,
+                  onCollapsedChange: setLogDetailsCollapsed
+                }
+              ),
+              featuredTraceId && /* @__PURE__ */ jsxRuntime.jsx(
+                TraceDetails,
+                {
+                  traceId: featuredTraceId,
+                  onClose: handleTraceClose,
+                  onSpanSelect: handleSpanSelect,
+                  initialSpanId: featuredSpanId
+                }
+              ),
+              featuredSpanRecord && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.SubContent, { className: cn(subContentClass, className), ...props, children }) });
+}
+function SubMenuSearch({
+  value,
+  onChange,
+  label = "Search"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+        "focus-within:border-neutral2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            "aria-label": label,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => e.stopPropagation(),
+            className: cn("bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full")
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SelectDataFilter({
+  categories,
+  value,
+  onChange,
+  disabled,
+  label = "Filter",
+  align = "end",
+  searchThreshold = SUBMENU_SEARCH_THRESHOLD
+}) {
+  const [filterSearch, setFilterSearch] = React.useState("");
+  const [subSearch, setSubSearch] = React.useState("");
+  const resetSubSearch = React.useCallback((open) => {
+    if (!open) setSubSearch("");
+  }, []);
+  const activeFilterCount = React.useMemo(() => {
+    let count = 0;
+    for (const selections of Object.values(value)) {
+      if (selections.length > 0) count++;
+    }
+    return count;
+  }, [value]);
+  const grouped = React.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__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { onOpenChange: resetSubSearch, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubTrigger, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: cat.label }),
+        selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedCount })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+        cat.values.length >= searchThreshold && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: subSearch, onChange: setSubSearch, label: `Search ${cat.label.toLowerCase()}` }),
+        mode === "single" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: v.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: v.label }) }, v.value)) }) : cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu.CheckboxItem,
+          {
+            checked: selected.includes(v.value),
+            onCheckedChange: () => handleSelect(cat.id, v.value, mode),
+            onSelect: (e) => e.preventDefault(),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: v.label })
+          },
+          v.value
+        ))
+      ] })
+    ] }, cat.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", disabled, size: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilterIcon, {}),
+      label,
+      activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "ml-0.5 inline-flex items-center justify-center rounded-full bg-accent1/50 text-neutral5 text-ui-sm w-5 h-5"
+          ),
+          children: activeFilterCount
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Content, { align, className: cn("min-w-[12rem]"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-2 pb-2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-2 border border-border1 rounded-md px-2 py-1",
+            "focus-within:border-neutral2"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-3.5 w-3.5 shrink-0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search filters...",
+                "aria-label": "Search filters",
+                value: filterSearch,
+                onChange: (e) => setFilterSearch(e.target.value),
+                onKeyDown: (e) => e.stopPropagation(),
+                className: cn("bg-transparent text-ui-sm text-neutral4 placeholder:text-neutral3 outline-none w-full")
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+      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__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.SubTrigger, { children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(PortalSubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
+        ] }, group.key);
+      }),
+      activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Separator, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Item, { onSelect: handleClearAll, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 = React.useMemo(
+    () => filterColumns.map((col) => ({
+      id: col.field,
+      label: col.field,
+      values: col.values.map((v) => ({ value: v, label: v })),
+      mode: "multi"
+    })),
+    [filterColumns]
+  );
+  const filterState = React.useMemo(() => {
+    const state = {};
+    for (const group of filterGroups) {
+      state[group.field] = group.values;
+    }
+    return state;
+  }, [filterGroups]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ListSearch, { onSearch: onSearchChange, size: "md", label: "Search logs", placeholder: "Search name, ID, content..." }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "inputLike", size: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+        " ",
+        DATE_PRESET_LABELS[datePreset],
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { children: Object.keys(DATE_PRESET_LABELS).map((value) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Item, { onSelect: () => onDatePresetChange(value), children: DATE_PRESET_LABELS[value] }, value)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectDataFilter,
+      {
+        categories,
+        value: filterState,
+        onChange: onFilterGroupsChange,
+        align: "end",
+        disabled: isLoading
+      }
+    ),
+    onReset && hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "md", disabled: isLoading, onClick: onReset, className: "ml-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = React.useState("");
+  const [filterGroups, setFilterGroups] = React.useState([]);
+  const filterColumns = React.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 = React.useCallback((id) => {
+    setFilterGroups(
+      (prev) => prev.map((g) => g.id === id ? { ...g, comparator: g.comparator === "is" ? "is not" : "is" } : g)
+    );
+  }, []);
+  const removeFilterGroup = React.useCallback((id) => {
+    setFilterGroups((prev) => prev.filter((g) => g.id !== id));
+  }, []);
+  const clearAllFilters = React.useCallback(() => {
+    setFilterGroups([]);
+  }, []);
+  const updateFilterGroups = React.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 = React.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 = react.useMastraClient();
   const requestContext = useMergedRequestContext();
@@ -52915,7 +54715,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__ */ jsxRuntime.jsx(
@@ -52924,7 +54724,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
           }
@@ -52964,7 +54764,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
@@ -55918,6 +57718,8 @@ exports.CreateDatasetFromItemsDialog = CreateDatasetFromItemsDialog;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;
 exports.DashboardCard = DashboardCard;
+exports.DataList = DataList;
+exports.DataListSkeleton = DataListSkeleton;
 exports.DatasetCombobox = DatasetCombobox;
 exports.DatasetCompareVersionToolbar = DatasetCompareVersionToolbar;
 exports.DatasetCompareVersionsList = DatasetCompareVersionsList;
@@ -56040,10 +57842,15 @@ exports.LatencyCard = LatencyCard;
 exports.LatencyIcon = LatencyIcon;
 exports.LinkComponentProvider = LinkComponentProvider;
 exports.ListSearch = ListSearch;
+exports.LogDetails = LogDetails;
 exports.LoginButton = LoginButton;
 exports.LoginPage = LoginPage;
 exports.LogoWithoutText = LogoWithoutText;
+exports.LogsDataList = LogsDataList;
+exports.LogsDataListSkeleton = DataListSkeleton;
 exports.LogsIcon = LogsIcon;
+exports.LogsList = LogsList;
+exports.LogsToolbar = LogsToolbar;
 exports.MCPClientCreateContent = MCPClientCreateContent;
 exports.MCPClientEditLayout = MCPClientEditLayout;
 exports.MCPClientFormSidebar = MCPClientFormSidebar;
@@ -56121,7 +57928,7 @@ exports.RequestContextSchemaForm = RequestContextSchemaForm;
 exports.RequestContextWrapper = RequestContextWrapper;
 exports.ReviewPipelineCard = ReviewPipelineCard;
 exports.ReviewQueueProvider = ReviewQueueProvider;
-exports.Root = Root;
+exports.Root = Root$1;
 exports.Row = Row;
 exports.RuleBuilder = RuleBuilder;
 exports.RuleFieldSelect = RuleFieldSelect;
@@ -56160,6 +57967,7 @@ exports.SectionHeader = SectionHeader;
 exports.Sections = Sections;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
+exports.SelectDataFilter = SelectDataFilter;
 exports.SelectField = SelectField;
 exports.SelectFieldBlock = SelectFieldBlock;
 exports.SelectGroup = SelectGroup;
@@ -56233,10 +58041,11 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TraceAsItemDialog = TraceAsItemDialog;
+exports.TraceDetails = TraceDetails;
 exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
-exports.TraceTimeline = TraceTimeline;
-exports.TraceTimelineSpan = TraceTimelineSpan;
+exports.TraceTimeline = TraceTimeline$1;
+exports.TraceTimelineSpan = TraceTimelineSpan$1;
 exports.TraceTimelineTools = TraceTimelineTools;
 exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
@@ -56299,7 +58108,7 @@ exports.fieldsToJSONSchema = fieldsToJSONSchema;
 exports.findProviderById = findProviderById;
 exports.flattenSchemaToVariables = flattenSchemaToVariables;
 exports.formatCompact = formatCompact;
-exports.formatHierarchicalSpans = formatHierarchicalSpans;
+exports.formatHierarchicalSpans = formatHierarchicalSpans$1;
 exports.getChildFieldOptions = getChildFieldOptions;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getFieldOptionAtPath = getFieldOptionAtPath;
@@ -56307,7 +58116,7 @@ exports.getFieldOptionsFromSchema = getFieldOptionsFromSchema;
 exports.getItemListColumnTemplate = getItemListColumnTemplate;
 exports.getMainContentContentClassName = getMainContentContentClassName;
 exports.getShortId = getShortId;
-exports.getSpanTypeUi = getSpanTypeUi;
+exports.getSpanTypeUi = getSpanTypeUi$1;
 exports.getStatusIcon = getStatusIcon;
 exports.getToNextEntryFn = getToNextEntryFn;
 exports.getToNextItemFn = getToNextItemFn;
@@ -56321,6 +58130,7 @@ exports.isActive = isActive;
 exports.isAuthenticated = isAuthenticated;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
+exports.isValidLogsDatePreset = isValidLogsDatePreset;
 exports.isValidPreset = isValidPreset;
 exports.joinModelId = joinModelId;
 exports.jsonSchemaToFields = jsonSchemaToFields;
@@ -56379,7 +58189,7 @@ exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCSVParser = useCSVParser;
 exports.useCanCreateAgent = useCanCreateAgent;
 exports.useCloneThread = useCloneThread;
-exports.useCodemirrorTheme = useCodemirrorTheme$1;
+exports.useCodemirrorTheme = useCodemirrorTheme$2;
 exports.useCompareAgentVersions = useCompareAgentVersions;
 exports.useCompareExperiments = useCompareExperiments;
 exports.useCompareScorerVersions = useCompareScorerVersions;
@@ -56437,6 +58247,7 @@ exports.useLLMProviders = useLLMProviders;
 exports.useLatencyMetrics = useLatencyMetrics;
 exports.useLinkComponent = useLinkComponent;
 exports.useLogout = useLogout;
+exports.useLogsFilters = useLogsFilters;
 exports.useMCPServerTool = useMCPServerTool;
 exports.useMCPServerTools = useMCPServerTools;
 exports.useMCPServerToolsById = useMCPServerToolsById;