@agentmark-ai/ui-components 0.3.0 → 0.3.1

package/dist/index.js

@@ -1279,7 +1279,7 @@ var import_material4 = require("@mui/material");
 
 // src/sections/requests/request-table.tsx
 var import_x_data_grid2 = require("@mui/x-data-grid");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/iconify/iconify.tsx
 var import_react = require("react");
@@ -1373,59 +1373,63 @@ function EmptyContent({
 }
 
 // src/components/datagrid/datagrid.tsx
+var import_react3 = require("react");
 var import_x_data_grid = require("@mui/x-data-grid");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var DataGridToolbar = (0, import_react3.memo)(function DataGridToolbar2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_x_data_grid.Toolbar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_x_data_grid.ColumnsPanelTrigger, { startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Iconify, { icon: "solar:eye-bold" }), children: "Columns" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_x_data_grid.FilterPanelTrigger, { startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Iconify, { icon: "solar:filter-bold" }), children: "Filters" })
+  ] });
+});
 var DataGrid = ({
   t,
   emptyContentImgUrl,
   ...props
 }) => {
+  const slots = (0, import_react3.useMemo)(
+    () => ({
+      toolbar: DataGridToolbar,
+      noRowsOverlay: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        EmptyContent,
+        {
+          sx: { margin: 2 },
+          title: t("noResults"),
+          imgUrl: emptyContentImgUrl
+        }
+      ),
+      noResultsOverlay: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        EmptyContent,
+        {
+          title: t("noResults"),
+          sx: { py: 10 },
+          imgUrl: emptyContentImgUrl
+        }
+      )
+    }),
+    [t, emptyContentImgUrl]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_x_data_grid.DataGrid,
     {
       sx: { "--DataGrid-overlayHeight": "530px" },
       ...props,
-      slots: {
-        toolbar: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_x_data_grid.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_x_data_grid.ColumnsPanelTrigger,
-              {
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Iconify, { icon: "solar:eye-bold" }),
-                children: "Columns"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_x_data_grid.FilterPanelTrigger,
-              {
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Iconify, { icon: "solar:filter-bold" }),
-                children: "Filters"
-              }
-            )
-          ] });
-        },
-        noRowsOverlay: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          EmptyContent,
-          {
-            sx: { margin: 2 },
-            title: t("noResults"),
-            imgUrl: emptyContentImgUrl
-          }
-        ),
-        noResultsOverlay: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          EmptyContent,
-          {
-            title: t("noResults"),
-            sx: { py: 10 },
-            imgUrl: emptyContentImgUrl
-          }
-        )
-      },
+      slots,
       slotProps: {
         loadingOverlay: {
           sx: {
             padding: 5
           }
+        },
+        filterPanel: {
+          sx: {
+            maxWidth: "100vw"
+          }
+        },
+        columnsPanel: {
+          sx: {
+            maxWidth: "100vw"
+          }
         }
       }
     }
@@ -1433,21 +1437,21 @@ var DataGrid = ({
 };
 
 // src/components/table/use-table.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useTable(props) {
-  const [dense, setDense] = (0, import_react3.useState)(!!props?.defaultDense);
-  const [page, setPage] = (0, import_react3.useState)(props?.defaultCurrentPage || 0);
-  const [orderBy, setOrderBy] = (0, import_react3.useState)(props?.defaultOrderBy || "name");
-  const [rowsPerPage, setRowsPerPage] = (0, import_react3.useState)(
+  const [dense, setDense] = (0, import_react4.useState)(!!props?.defaultDense);
+  const [page, setPage] = (0, import_react4.useState)(props?.defaultCurrentPage || 0);
+  const [orderBy, setOrderBy] = (0, import_react4.useState)(props?.defaultOrderBy || "name");
+  const [rowsPerPage, setRowsPerPage] = (0, import_react4.useState)(
     props?.defaultRowsPerPage || 10
   );
-  const [order, setOrder] = (0, import_react3.useState)(
+  const [order, setOrder] = (0, import_react4.useState)(
     props?.defaultOrder || "asc"
   );
-  const [selected, setSelected] = (0, import_react3.useState)(
+  const [selected, setSelected] = (0, import_react4.useState)(
     props?.defaultSelected || []
   );
-  const onSort = (0, import_react3.useCallback)(
+  const onSort = (0, import_react4.useCallback)(
     (id) => {
       const isAsc = orderBy === id && order === "asc";
       if (id !== "") {
@@ -1457,27 +1461,27 @@ function useTable(props) {
     },
     [order, orderBy]
   );
-  const onSelectRow = (0, import_react3.useCallback)(
+  const onSelectRow = (0, import_react4.useCallback)(
     (inputValue) => {
       const newSelected = selected.includes(inputValue) ? selected.filter((value) => value !== inputValue) : [...selected, inputValue];
       setSelected(newSelected);
     },
     [selected]
   );
-  const onChangeRowsPerPage = (0, import_react3.useCallback)(
+  const onChangeRowsPerPage = (0, import_react4.useCallback)(
     (event) => {
       setPage(0);
       setRowsPerPage(parseInt(event.target.value, 10));
     },
     []
   );
-  const onChangeDense = (0, import_react3.useCallback)(
+  const onChangeDense = (0, import_react4.useCallback)(
     (event) => {
       setDense(event.target.checked);
     },
     []
   );
-  const onSelectAllRows = (0, import_react3.useCallback)(
+  const onSelectAllRows = (0, import_react4.useCallback)(
     (checked, inputValue) => {
       if (checked) {
         setSelected(inputValue);
@@ -1487,13 +1491,13 @@ function useTable(props) {
     },
     []
   );
-  const onChangePage = (0, import_react3.useCallback)((_event, newPage) => {
+  const onChangePage = (0, import_react4.useCallback)((_event, newPage) => {
     setPage(newPage);
   }, []);
-  const onResetPage = (0, import_react3.useCallback)(() => {
+  const onResetPage = (0, import_react4.useCallback)(() => {
     setPage(0);
   }, []);
-  const onUpdatePageDeleteRow = (0, import_react3.useCallback)(
+  const onUpdatePageDeleteRow = (0, import_react4.useCallback)(
     (totalRowsInPage) => {
       setSelected([]);
       if (page) {
@@ -1504,7 +1508,7 @@ function useTable(props) {
     },
     [page]
   );
-  const onUpdatePageDeleteRows = (0, import_react3.useCallback)(
+  const onUpdatePageDeleteRows = (0, import_react4.useCallback)(
     ({
       totalRows,
       totalRowsInPage,
@@ -1763,7 +1767,7 @@ function TableEmptyRows({ emptyRows, height: height2 }) {
 }
 
 // src/components/label/label.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_Box5 = __toESM(require("@mui/material/Box"));
 
 // src/components/label/styles.ts
@@ -1832,7 +1836,7 @@ var StyledLabel = (0, import_styles2.styled)(import_Box4.default)(({ theme: them
 
 // src/components/label/label.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Label = (0, import_react4.forwardRef)(
+var Label = (0, import_react5.forwardRef)(
   ({
     children,
     color: color2 = "default",
@@ -2154,7 +2158,7 @@ function serializeStyles(args, registered, mergedProps) {
 }
 
 // ../../node_modules/@mui/styled-engine/esm/index.js
-var import_react5 = require("@emotion/react");
+var import_react6 = require("@emotion/react");
 function styled2(tag, options) {
   const stylesFactory = (0, import_styled.default)(tag, options);
   if (process.env.NODE_ENV !== "production") {
@@ -3478,7 +3482,7 @@ function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme(defaultTheme2 = null) {
-  const contextTheme = React2.useContext(import_react5.ThemeContext);
+  const contextTheme = React2.useContext(import_react6.ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme2 : contextTheme;
 }
 var useThemeWithoutDefault_default = useTheme;
@@ -17450,14 +17454,14 @@ var lintExtensions = [
 ];
 
 // src/components/editor/json-editor.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function JsonEditor({
   defaultValue,
   onChange,
   value
 }) {
-  const [linterEnabled, setLinterEnabled] = (0, import_react6.useState)(
+  const [linterEnabled, setLinterEnabled] = (0, import_react7.useState)(
     !!defaultValue && defaultValue !== ""
   );
   const theme2 = useTheme_default();
@@ -17532,7 +17536,7 @@ var RequestTable = ({
   t,
   emptyContentImgUrl
 }) => {
-  const tableData = (0, import_react7.useMemo)(() => {
+  const tableData = (0, import_react8.useMemo)(() => {
     if (requests) {
       return requests.map((item) => ({
         ...item,
@@ -17542,7 +17546,7 @@ var RequestTable = ({
       }));
     } else return [];
   }, [requests]);
-  const columns = (0, import_react7.useMemo)(() => {
+  const columns = (0, import_react8.useMemo)(() => {
     const col = [
       {
         field: "input",
@@ -19413,9 +19417,9 @@ var TraceListItem = ({ trace, onClick }) => {
 };
 
 // src/sections/traces/trace-list/trace-list-provider.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var TraceListContext = (0, import_react8.createContext)(
+var TraceListContext = (0, import_react9.createContext)(
   void 0
 );
 var TraceListProvider = ({
@@ -19427,7 +19431,7 @@ var TraceListProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TraceListContext.Provider, { value: { traces, isLoading, error }, children });
 };
 var useTraceListContext = () => {
-  const context = (0, import_react8.useContext)(TraceListContext);
+  const context = (0, import_react9.useContext)(TraceListContext);
   if (!context) {
     throw new Error(
       "useTraceListContext must be used within TraceListProvider"
@@ -19502,15 +19506,15 @@ var TracesList = ({
 };
 
 // src/sections/traces/trace-drawer/trace-drawer-provider.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/sections/traces/trace-drawer/hooks/use-trace-drawer.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useTraceDrawer = (initialHeight = 400) => {
-  const [treeHeight, setTreeHeight] = (0, import_react9.useState)(initialHeight);
-  const [isDragging, setIsDragging] = (0, import_react9.useState)(false);
-  const [dragStart, setDragStart] = (0, import_react9.useState)({ y: 0, initialHeight: 0 });
-  (0, import_react9.useEffect)(() => {
+  const [treeHeight, setTreeHeight] = (0, import_react10.useState)(initialHeight);
+  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
+  const [dragStart, setDragStart] = (0, import_react10.useState)({ y: 0, initialHeight: 0 });
+  (0, import_react10.useEffect)(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -19552,7 +19556,7 @@ var useTraceDrawer = (initialHeight = 400) => {
 
 // src/sections/traces/trace-drawer/trace-drawer-provider.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var TraceDrawerContext = (0, import_react10.createContext)(
+var TraceDrawerContext = (0, import_react11.createContext)(
   void 0
 );
 var TraceDrawerProvider = ({
@@ -19563,8 +19567,8 @@ var TraceDrawerProvider = ({
   t,
   onSpanChange
 }) => {
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react10.useState)(null);
-  const selectedSpan = (0, import_react10.useMemo)(() => {
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react11.useState)(null);
+  const selectedSpan = (0, import_react11.useMemo)(() => {
     if (!selectedSpanId) {
       if (traces.length > 0 && traces[0]) {
         return {
@@ -19600,7 +19604,7 @@ var TraceDrawerProvider = ({
     }
     return null;
   }, [selectedSpanId, traces]);
-  const spanTree = (0, import_react10.useMemo)(() => {
+  const spanTree = (0, import_react11.useMemo)(() => {
     const buildSpanTree = (traces2) => {
       const tree = [];
       const lookup = {};
@@ -19636,17 +19640,17 @@ var TraceDrawerProvider = ({
     return buildSpanTree(traces);
   }, [traces]);
   const { treeHeight, handleMouseDown, isDragging } = useTraceDrawer();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       setSelectedSpanId(null);
     };
   }, [traces]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (onSpanChange) {
       onSpanChange(selectedSpan);
     }
   }, [selectedSpan]);
-  const findCostAndTokens = (0, import_react10.useCallback)((item) => {
+  const findCostAndTokens = (0, import_react11.useCallback)((item) => {
     const costAndTokenCache = {};
     const calculate = (node) => {
       if (costAndTokenCache[node.id]) {
@@ -19703,7 +19707,7 @@ var TraceDrawerProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TraceDrawerContext.Provider, { value, children });
 };
 var useTraceDrawerContext = () => {
-  const context = (0, import_react10.useContext)(TraceDrawerContext);
+  const context = (0, import_react11.useContext)(TraceDrawerContext);
   if (!context) {
     throw new Error(
       "useTraceDrawerContext must be used within TraceDrawerProvider"
@@ -20349,7 +20353,7 @@ var TraceLabel = ({
 };
 
 // src/sections/traces/trace-drawer/trace-tree/trace-tree.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var renderTree = (node, findCostAndTokens) => {
   if (!node) {
@@ -20387,7 +20391,7 @@ var TraceTree = () => {
     findCostAndTokens,
     traceId
   } = useTraceDrawerContext();
-  const tree = (0, import_react11.useMemo)(() => {
+  const tree = (0, import_react12.useMemo)(() => {
     return spanTree.map((node) => renderTree(node, findCostAndTokens));
   }, [spanTree]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material17.Box, { sx: { height: "100%", overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -20413,10 +20417,10 @@ var TraceTree = () => {
 
 // src/sections/traces/trace-drawer/trace-graph/trace-graph-canvas.tsx
 var import_material20 = require("@mui/material");
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/sections/traces/trace-drawer/trace-graph/use-trace-graph.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/sections/traces/trace-drawer/trace-graph/workflow-graph-generator.ts
 function hasManualGraphMetadata(spans) {
@@ -20674,7 +20678,7 @@ function convertWorkflowEdgesToGraphEdges(workflowEdges) {
   }));
 }
 var useTraceGraph = (graphData, spans) => {
-  const result2 = (0, import_react12.useMemo)(() => {
+  const result2 = (0, import_react13.useMemo)(() => {
     if (graphData && graphData.length > 0) {
       return processManualGraphData(graphData);
     }
@@ -20700,11 +20704,11 @@ var useTraceGraph = (graphData, spans) => {
 };
 
 // src/sections/traces/trace-drawer/trace-graph/trace-graph-canvas.tsx
-var import_react17 = require("@xyflow/react");
+var import_react18 = require("@xyflow/react");
 
 // src/sections/traces/trace-drawer/trace-graph/trace-node.tsx
-var import_react13 = require("react");
-var import_react14 = require("@xyflow/react");
+var import_react14 = require("react");
+var import_react15 = require("@xyflow/react");
 var import_material18 = require("@mui/material");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function TraceNodeComponent(props) {
@@ -20726,10 +20730,10 @@ function TraceNodeComponent(props) {
   if (isStartOrEnd) {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        import_react14.Handle,
+        import_react15.Handle,
         {
           type: "target",
-          position: import_react14.Position.Top,
+          position: import_react15.Position.Top,
           style: { visibility: "hidden" }
         }
       ),
@@ -20759,10 +20763,10 @@ function TraceNodeComponent(props) {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        import_react14.Handle,
+        import_react15.Handle,
         {
           type: "source",
-          position: import_react14.Position.Bottom,
+          position: import_react15.Position.Bottom,
           style: { visibility: "hidden" }
         }
       )
@@ -20770,10 +20774,10 @@ function TraceNodeComponent(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_react14.Handle,
+      import_react15.Handle,
       {
         type: "target",
-        position: import_react14.Position.Top,
+        position: import_react15.Position.Top,
         style: { visibility: "hidden" }
       }
     ),
@@ -20843,19 +20847,19 @@ function TraceNodeComponent(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_react14.Handle,
+      import_react15.Handle,
       {
         type: "source",
-        position: import_react14.Position.Bottom,
+        position: import_react15.Position.Bottom,
         style: { visibility: "hidden" }
       }
     )
   ] });
 }
-var TraceNode = (0, import_react13.memo)(TraceNodeComponent);
+var TraceNode = (0, import_react14.memo)(TraceNodeComponent);
 
 // src/sections/traces/trace-drawer/trace-graph/use-graph-data.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_material19 = require("@mui/material");
 function useGraphData({
   nodes: rawNodes,
@@ -20865,7 +20869,7 @@ function useGraphData({
   nodeSpanIndices
 }) {
   const theme2 = (0, import_material19.useTheme)();
-  const reactFlowNodes = (0, import_react15.useMemo)(() => {
+  const reactFlowNodes = (0, import_react16.useMemo)(() => {
     if (!rawNodes.length) return [];
     const initialNodes = rawNodes.map((node) => ({
       id: node.id,
@@ -20903,7 +20907,7 @@ function useGraphData({
     });
     return styledNodes;
   }, [rawNodes, rawEdges, theme2, onNodeClick, onNodeCycleClick, nodeSpanIndices]);
-  const reactFlowEdges = (0, import_react15.useMemo)(() => {
+  const reactFlowEdges = (0, import_react16.useMemo)(() => {
     const edges = [];
     rawEdges.forEach((edge) => {
       edges.push({
@@ -20916,7 +20920,7 @@ function useGraphData({
     });
     return edges;
   }, [rawEdges]);
-  const { nodes: layoutedNodes, edges: layoutedEdges } = (0, import_react15.useMemo)(
+  const { nodes: layoutedNodes, edges: layoutedEdges } = (0, import_react16.useMemo)(
     () => applyDagreLayout(reactFlowNodes, reactFlowEdges),
     [reactFlowNodes, reactFlowEdges]
   );
@@ -20938,7 +20942,7 @@ function TraceGraphCanvas({
 }) {
   const theme2 = (0, import_material20.useTheme)();
   const { onSelectSpan, traces } = useTraceDrawerContext();
-  const spansForAutoGeneration = (0, import_react16.useMemo)(() => {
+  const spansForAutoGeneration = (0, import_react17.useMemo)(() => {
     if (graphData && graphData.length > 0) {
       return [];
     }
@@ -20957,18 +20961,18 @@ function TraceGraphCanvas({
     graphData,
     spansForAutoGeneration
   );
-  const [nodeSpanIndices, setNodeSpanIndices] = (0, import_react16.useState)(
+  const [nodeSpanIndices, setNodeSpanIndices] = (0, import_react17.useState)(
     () => /* @__PURE__ */ new Map()
   );
-  const nodeMap = (0, import_react16.useMemo)(() => {
+  const nodeMap = (0, import_react17.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     rawNodes.forEach((node) => map.set(node.id, node));
     return map;
   }, [rawNodes]);
-  const onNodeClick = (0, import_react16.useCallback)((spanId) => {
+  const onNodeClick = (0, import_react17.useCallback)((spanId) => {
     onSelectSpan(spanId);
   }, [onSelectSpan]);
-  const onNodeCycleClick = (0, import_react16.useCallback)(
+  const onNodeCycleClick = (0, import_react17.useCallback)(
     (nodeId) => {
       const node = nodeMap.get(nodeId);
       if (!node?.spanIds || node.spanIds.length === 0) return;
@@ -20993,15 +20997,15 @@ function TraceGraphCanvas({
     onNodeCycleClick,
     nodeSpanIndices
   });
-  const [nodes, setNodes] = (0, import_react16.useState)(reactFlowNodes);
-  const [edges, setEdges] = (0, import_react16.useState)(reactFlowEdges);
-  const [focusedNodeIndex, setFocusedNodeIndex] = (0, import_react16.useState)(-1);
-  (0, import_react16.useEffect)(() => {
+  const [nodes, setNodes] = (0, import_react17.useState)(reactFlowNodes);
+  const [edges, setEdges] = (0, import_react17.useState)(reactFlowEdges);
+  const [focusedNodeIndex, setFocusedNodeIndex] = (0, import_react17.useState)(-1);
+  (0, import_react17.useEffect)(() => {
     setNodes(reactFlowNodes);
     setEdges(reactFlowEdges);
     setFocusedNodeIndex(-1);
   }, [reactFlowNodes, reactFlowEdges]);
-  const handleKeyDown = (0, import_react16.useCallback)(
+  const handleKeyDown = (0, import_react17.useCallback)(
     (event) => {
       if (nodes.length === 0) return;
       switch (event.key) {
@@ -21044,7 +21048,7 @@ function TraceGraphCanvas({
     },
     [nodes, focusedNodeIndex, onNodeClick, onNodeCycleClick]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (focusedNodeIndex >= 0 && focusedNodeIndex < nodes.length) {
       setNodes(
         (prevNodes) => prevNodes.map((node, index) => ({
@@ -21105,16 +21109,16 @@ function TraceGraphCanvas({
           role: "application",
           "aria-label": "Workflow graph - use arrow keys to navigate between nodes, Enter to select",
           children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-            import_react17.ReactFlow,
+            import_react18.ReactFlow,
             {
               nodes,
               edges,
               nodeTypes,
               onNodesChange: (changes) => {
-                setNodes((0, import_react17.applyNodeChanges)(changes, nodes));
+                setNodes((0, import_react18.applyNodeChanges)(changes, nodes));
               },
               onEdgesChange: (changes) => {
-                setEdges((0, import_react17.applyEdgeChanges)(changes, edges));
+                setEdges((0, import_react18.applyEdgeChanges)(changes, edges));
               },
               fitView: true,
               zoomOnScroll: true,
@@ -21125,7 +21129,7 @@ function TraceGraphCanvas({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_react17.MiniMap,
+                  import_react18.MiniMap,
                   {
                     style: {
                       width: 80,
@@ -21142,7 +21146,7 @@ function TraceGraphCanvas({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_react17.Controls,
+                  import_react18.Controls,
                   {
                     style: {
                       backgroundColor: theme2.palette.background.paper,
@@ -21152,7 +21156,7 @@ function TraceGraphCanvas({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react17.Background, { gap: 20, size: 1 })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Background, { gap: 20, size: 1 })
               ]
             }
           )
@@ -21442,17 +21446,17 @@ function computeTimelineLayout(spans) {
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/use-timeline-layout.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useTimelineLayout(spans) {
-  return (0, import_react18.useMemo)(() => computeTimelineLayout(spans), [spans]);
+  return (0, import_react19.useMemo)(() => computeTimelineLayout(spans), [spans]);
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/use-timeline-zoom.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var { MIN_SCALE, MAX_SCALE } = TIMELINE_CONSTANTS;
 var ZOOM_FACTOR = 1.2;
 function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
-  const [viewState, setViewState] = (0, import_react19.useState)(() => ({
+  const [viewState, setViewState] = (0, import_react20.useState)(() => ({
     viewBox: {
       x: 0,
       y: 0,
@@ -21462,13 +21466,13 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
     scale: 1,
     isPanning: false
   }));
-  const panStartRef = (0, import_react19.useRef)(
+  const panStartRef = (0, import_react20.useRef)(
     null
   );
-  const clampScale = (0, import_react19.useCallback)((scale) => {
+  const clampScale = (0, import_react20.useCallback)((scale) => {
     return Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
   }, []);
-  const zoomIn = (0, import_react19.useCallback)(() => {
+  const zoomIn = (0, import_react20.useCallback)(() => {
     setViewState((prev) => {
       const newScale = clampScale(prev.scale * ZOOM_FACTOR);
       const scaleRatio = prev.scale / newScale;
@@ -21488,7 +21492,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
       };
     });
   }, [clampScale]);
-  const zoomOut = (0, import_react19.useCallback)(() => {
+  const zoomOut = (0, import_react20.useCallback)(() => {
     setViewState((prev) => {
       const newScale = clampScale(prev.scale / ZOOM_FACTOR);
       const scaleRatio = prev.scale / newScale;
@@ -21508,7 +21512,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
       };
     });
   }, [clampScale]);
-  const resetZoom = (0, import_react19.useCallback)(() => {
+  const resetZoom = (0, import_react20.useCallback)(() => {
     setViewState({
       viewBox: {
         x: 0,
@@ -21520,7 +21524,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
       isPanning: false
     });
   }, [contentWidth, contentHeight]);
-  const setScale = (0, import_react19.useCallback)(
+  const setScale = (0, import_react20.useCallback)(
     (scale) => {
       setViewState((prev) => {
         const newScale = clampScale(scale);
@@ -21543,7 +21547,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
     },
     [clampScale]
   );
-  const onWheel = (0, import_react19.useCallback)(
+  const onWheel = (0, import_react20.useCallback)(
     (event) => {
       if (!event.ctrlKey && !event.metaKey) {
         return;
@@ -21587,7 +21591,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
     },
     [clampScale]
   );
-  const onMouseDown = (0, import_react19.useCallback)((event) => {
+  const onMouseDown = (0, import_react20.useCallback)((event) => {
     if (event.button !== 0) return;
     event.preventDefault();
     setViewState((prev) => {
@@ -21603,7 +21607,7 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
       };
     });
   }, []);
-  const onMouseMove = (0, import_react19.useCallback)((event) => {
+  const onMouseMove = (0, import_react20.useCallback)((event) => {
     if (!panStartRef.current) return;
     const svg2 = event.currentTarget;
     const rect = svg2.getBoundingClientRect();
@@ -21622,14 +21626,14 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
       };
     });
   }, []);
-  const onMouseUp = (0, import_react19.useCallback)(() => {
+  const onMouseUp = (0, import_react20.useCallback)(() => {
     panStartRef.current = null;
     setViewState((prev) => ({
       ...prev,
       isPanning: false
     }));
   }, []);
-  const onMouseLeave = (0, import_react19.useCallback)(() => {
+  const onMouseLeave = (0, import_react20.useCallback)(() => {
     if (panStartRef.current) {
       panStartRef.current = null;
       setViewState((prev) => ({
@@ -21655,11 +21659,11 @@ function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/use-timeline-view-preference.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var STORAGE_KEY = "agentmark-trace-view-preference";
 var DEFAULT_VIEW = "graph";
 function useTimelineViewPreference() {
-  const [view, setViewState] = (0, import_react20.useState)(() => {
+  const [view, setViewState] = (0, import_react21.useState)(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem(STORAGE_KEY);
@@ -21671,7 +21675,7 @@ function useTimelineViewPreference() {
     }
     return DEFAULT_VIEW;
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (typeof window !== "undefined") {
       try {
         localStorage.setItem(STORAGE_KEY, view);
@@ -21679,10 +21683,10 @@ function useTimelineViewPreference() {
       }
     }
   }, [view]);
-  const setView = (0, import_react20.useCallback)((newView) => {
+  const setView = (0, import_react21.useCallback)((newView) => {
     setViewState(newView);
   }, []);
-  const toggleView = (0, import_react20.useCallback)(() => {
+  const toggleView = (0, import_react21.useCallback)(() => {
     setViewState((current) => current === "graph" ? "timeline" : "graph");
   }, []);
   return {
@@ -21700,12 +21704,12 @@ function useTimelineViewPreference() {
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/trace-timeline.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_material24 = require("@mui/material");
 var import_styles10 = require("@mui/material/styles");
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-bar.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_styles6 = require("@mui/material/styles");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var { ROW_HEIGHT, MIN_BAR_WIDTH, BAR_HEIGHT_RATIO } = TIMELINE_CONSTANTS;
@@ -21715,7 +21719,7 @@ function formatBarDuration(ms) {
   }
   return `${(ms / 1e3).toFixed(1)}s`;
 }
-var TimelineBar = (0, import_react21.memo)(function TimelineBar2({
+var TimelineBar = (0, import_react22.memo)(function TimelineBar2({
   layout,
   isSelected,
   isFocused = false,
@@ -21803,11 +21807,11 @@ var TimelineBar = (0, import_react21.memo)(function TimelineBar2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-ruler.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_styles7 = require("@mui/material/styles");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var { RULER_HEIGHT } = TIMELINE_CONSTANTS;
-var TimelineRuler = (0, import_react22.memo)(function TimelineRuler2({
+var TimelineRuler = (0, import_react23.memo)(function TimelineRuler2({
   ticks,
   width: width2,
   height: height2 = RULER_HEIGHT
@@ -21873,7 +21877,7 @@ var TimelineRuler = (0, import_react22.memo)(function TimelineRuler2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-tooltip.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_material21 = require("@mui/material");
 var import_styles8 = require("@mui/material/styles");
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -21921,13 +21925,13 @@ function truncateText(text, maxLength) {
   if (cleanText.length <= maxLength) return cleanText;
   return cleanText.slice(0, maxLength) + "...";
 }
-var TimelineTooltip = (0, import_react23.memo)(function TimelineTooltip2({
+var TimelineTooltip = (0, import_react24.memo)(function TimelineTooltip2({
   layout,
   position,
   visible
 }) {
   const theme2 = (0, import_styles8.useTheme)();
-  const parsedAttributes = (0, import_react23.useMemo)(() => {
+  const parsedAttributes = (0, import_react24.useMemo)(() => {
     const attributes = layout?.span?.data?.attributes;
     if (!attributes) return null;
     try {
@@ -22210,7 +22214,7 @@ var TimelineTooltip = (0, import_react23.memo)(function TimelineTooltip2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-legend.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_material22 = require("@mui/material");
 var import_styles9 = require("@mui/material/styles");
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -22234,7 +22238,7 @@ var NODE_TYPE_ORDER = [
   "memory",
   "default"
 ];
-var TimelineLegend = (0, import_react24.memo)(function TimelineLegend2({
+var TimelineLegend = (0, import_react25.memo)(function TimelineLegend2({
   typeBreakdown,
   showCounts = false
 }) {
@@ -22324,10 +22328,10 @@ var TimelineLegend = (0, import_react24.memo)(function TimelineLegend2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-error-boundary.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_material23 = require("@mui/material");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var TimelineErrorBoundary = class extends import_react25.Component {
+var TimelineErrorBoundary = class extends import_react26.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -22385,7 +22389,7 @@ var import_jsx_runtime44 = require("react/jsx-runtime");
 var { ROW_HEIGHT: ROW_HEIGHT2, RULER_HEIGHT: RULER_HEIGHT2, PADDING, LABEL_WIDTH } = TIMELINE_CONSTANTS;
 var VIRTUALIZATION_THRESHOLD = 100;
 var VIRTUALIZATION_OVERSCAN = 5;
-var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
+var TraceTimeline = (0, import_react27.memo)(function TraceTimeline2({
   spans,
   selectedSpanId,
   onSelectSpan,
@@ -22397,12 +22401,12 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
   isLoading = false
 }) {
   const theme2 = (0, import_styles10.useTheme)();
-  const containerRef = (0, import_react26.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react26.useState)(800);
-  const prevSelectedSpanIdRef = (0, import_react26.useRef)(void 0);
-  const [tooltipData, setTooltipData] = (0, import_react26.useState)({ layout: null, position: null });
-  const [scrollTop, setScrollTop] = (0, import_react26.useState)(0);
-  const [containerHeight, setContainerHeight] = (0, import_react26.useState)(400);
+  const containerRef = (0, import_react27.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react27.useState)(800);
+  const prevSelectedSpanIdRef = (0, import_react27.useRef)(void 0);
+  const [tooltipData, setTooltipData] = (0, import_react27.useState)({ layout: null, position: null });
+  const [scrollTop, setScrollTop] = (0, import_react27.useState)(0);
+  const [containerHeight, setContainerHeight] = (0, import_react27.useState)(400);
   const { layouts, metrics, rulerTicks } = useTimelineLayout(spans);
   const timelineWidth = Math.max(400, containerWidth - LABEL_WIDTH - PADDING * 2);
   const contentHeight = layouts.length * ROW_HEIGHT2;
@@ -22415,7 +22419,7 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
     onWheel,
     panHandlers
   } = useTimelineZoom(timelineWidth, contentHeight);
-  const { visibleLayouts } = (0, import_react26.useMemo)(() => {
+  const { visibleLayouts } = (0, import_react27.useMemo)(() => {
     if (layouts.length < VIRTUALIZATION_THRESHOLD) {
       return {
         visibleLayouts: layouts,
@@ -22439,7 +22443,7 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
       endIndex: end
     };
   }, [layouts, scrollTop, containerHeight, showRuler]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -22460,7 +22464,7 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
       container.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!selectedSpanId || selectedSpanId === prevSelectedSpanIdRef.current) {
       prevSelectedSpanIdRef.current = selectedSpanId;
       return;
@@ -22482,13 +22486,13 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
       });
     }
   }, [selectedSpanId, layouts, showRuler]);
-  const handleSelectSpan = (0, import_react26.useCallback)(
+  const handleSelectSpan = (0, import_react27.useCallback)(
     (spanId) => {
       onSelectSpan?.(spanId);
     },
     [onSelectSpan]
   );
-  const handleBarMouseEnter = (0, import_react26.useCallback)(
+  const handleBarMouseEnter = (0, import_react27.useCallback)(
     (layout, event) => {
       setTooltipData({
         layout,
@@ -22497,11 +22501,11 @@ var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
     },
     []
   );
-  const handleBarMouseLeave = (0, import_react26.useCallback)(() => {
+  const handleBarMouseLeave = (0, import_react27.useCallback)(() => {
     setTooltipData({ layout: null, position: null });
   }, []);
-  const [focusedIndex, setFocusedIndex] = (0, import_react26.useState)(-1);
-  const handleKeyDown = (0, import_react26.useCallback)(
+  const [focusedIndex, setFocusedIndex] = (0, import_react27.useState)(-1);
+  const handleKeyDown = (0, import_react27.useCallback)(
     (event) => {
       if (layouts.length === 0) return;
       switch (event.key) {
@@ -22767,17 +22771,17 @@ var SpanInfoContent = ({ children }) => {
 var import_material26 = require("@mui/material");
 
 // src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/sections/traces/trace-drawer/span-info/hooks/use-span-info.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 var useSpanInfo = ({ span }) => {
-  const [activeTab, setActiveTab] = (0, import_react27.useState)("attributes");
-  const [tabs, setTabs] = (0, import_react27.useState)([]);
-  const isLLMCall = (0, import_react27.useMemo)(() => {
+  const [activeTab, setActiveTab] = (0, import_react28.useState)("attributes");
+  const [tabs, setTabs] = (0, import_react28.useState)([]);
+  const isLLMCall = (0, import_react28.useMemo)(() => {
     return span?.data?.type === "GENERATION" || !!span?.data?.model;
   }, [span?.data?.type, span?.data?.model]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (span?.id) {
       const newTabs = [];
       if (isLLMCall) {
@@ -22800,7 +22804,7 @@ var useSpanInfo = ({ span }) => {
       setTabs(newTabs);
     }
   }, [span?.id, isLLMCall]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const isTabValid = activeTab === "inputOutput" && isLLMCall || activeTab === "evaluation" || activeTab === "attributes";
     if (!isTabValid) {
       if (isLLMCall) {
@@ -22820,7 +22824,7 @@ var useSpanInfo = ({ span }) => {
 
 // src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var SpanInfoContext = (0, import_react28.createContext)(
+var SpanInfoContext = (0, import_react29.createContext)(
   void 0
 );
 var SpanInfoProvider = ({
@@ -22847,7 +22851,7 @@ var SpanInfoProvider = ({
   );
 };
 var useSpanInfoContext = () => {
-  const context = (0, import_react28.useContext)(SpanInfoContext);
+  const context = (0, import_react29.useContext)(SpanInfoContext);
   if (!context) {
     throw new Error("useSpanInfo must be used within a SpanInfoProvider");
   }
@@ -22925,7 +22929,7 @@ var SpanInfoTabs = ({ children }) => {
 var import_lab2 = require("@mui/lab");
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/sections/traces/trace-drawer/span-info/tabs/attribute-transformer-registry.ts
 var AttributeTransformerRegistry = class {
@@ -23231,7 +23235,7 @@ var transformAttributes = (attributes, normalizedData) => {
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
 var useSpanAttributes = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const rawAttributes = (0, import_react29.useMemo)(() => {
+  const rawAttributes = (0, import_react30.useMemo)(() => {
     if (!selectedSpan?.data?.attributes) return {};
     try {
       return JSON.parse(selectedSpan.data.attributes);
@@ -23239,7 +23243,7 @@ var useSpanAttributes = () => {
       return {};
     }
   }, [selectedSpan]);
-  const transformedAttributes = (0, import_react29.useMemo)(() => {
+  const transformedAttributes = (0, import_react30.useMemo)(() => {
     return transformAttributes(rawAttributes, selectedSpan?.data);
   }, [rawAttributes, selectedSpan?.data]);
   return {
@@ -23315,7 +23319,7 @@ var AttributesTab = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-prompts.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var extractPromptsFromSpan = (span) => {
   if (!span?.data?.input) return [];
   try {
@@ -23358,10 +23362,10 @@ var extractOutputFromSpan = (span) => {
 };
 var useSpanPrompts = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const prompts = (0, import_react30.useMemo)(() => {
+  const prompts = (0, import_react31.useMemo)(() => {
     return extractPromptsFromSpan(selectedSpan);
   }, [selectedSpan]);
-  const outputData = (0, import_react30.useMemo)(() => {
+  const outputData = (0, import_react31.useMemo)(() => {
     return extractOutputFromSpan(selectedSpan);
   }, [selectedSpan]);
   return {
@@ -23724,13 +23728,13 @@ var EvaluationItem = ({
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-provider.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var EvaluationContext = (0, import_react31.createContext)(
+var EvaluationContext = (0, import_react32.createContext)(
   void 0
 );
 var useEvaluationContext = () => {
-  const context = (0, import_react31.useContext)(EvaluationContext);
+  const context = (0, import_react32.useContext)(EvaluationContext);
   if (!context) {
     throw new Error(
       "useEvaluationContext must be used within EvaluationProvider"
@@ -23744,7 +23748,7 @@ var EvaluationProvider = ({
   scores,
   isLoading
 }) => {
-  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = (0, import_react31.useState)(false);
+  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = (0, import_react32.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     EvaluationContext.Provider,
     {