@app-studio/web 0.9.17 → 0.9.19

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('src/components/Loader/Loader'), require('src/components/Avatar/Avatar'), require('src/components/Alert/Alert'), require('src/components/Form/Form'), require('core-js/modules/es.array.sort.js'), require('src/components'), require('src/components/Tabs/Tabs')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'src/components/Loader/Loader', 'src/components/Avatar/Avatar', 'src/components/Alert/Alert', 'src/components/Form/Form', 'core-js/modules/es.array.sort.js', 'src/components', 'src/components/Tabs/Tabs'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, null, global.zustand, null, null, null, null, global.Loader$1, global.Avatar$1, global.Alert$1, global.Form, null, global.components, global.Tabs$1));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, es_string_replace_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_string_match_js, es_string_search_js, es_array_flatMap_js, es_array_unscopables_flatMap_js, Loader$1, Avatar$1, Alert$1, Form, es_array_sort_js, components, Tabs$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.array.sort.js'), require('src/components')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.array.sort.js', 'src/components'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, null, global.zustand, null, null, null, null, null, global.components));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, es_string_replace_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_string_match_js, es_string_search_js, es_array_flatMap_js, es_array_unscopables_flatMap_js, es_array_sort_js, components) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
@@ -28097,7 +28097,7 @@
         return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
           alignItems: "center",
           gap: 8
-        }, /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+        }, /*#__PURE__*/React__default.createElement(Loader, {
           size: "sm"
         }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           color: "color.gray.600"
@@ -28251,7 +28251,7 @@
       alignItems: "flex-start",
       justifyContent: isUser ? 'flex-end' : 'flex-start',
       width: "100%"
-    }, showAvatar && !isUser && (/*#__PURE__*/React__default.createElement(Avatar$1.Avatar, Object.assign({
+    }, showAvatar && !isUser && (/*#__PURE__*/React__default.createElement(Avatar, Object.assign({
       size: "sm",
       backgroundColor: "color.green.500",
       color: "white"
@@ -28260,7 +28260,7 @@
       maxWidth: "80%"
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, messageStyles), renderMessageContent()), showTimestamp && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentChatStyles.timestamp, views.timestamp, {
       textAlign: isUser ? 'right' : 'left'
-    }), formatTimestamp(message.timestamp)))), showAvatar && isUser && (/*#__PURE__*/React__default.createElement(Avatar$1.Avatar, Object.assign({
+    }), formatTimestamp(message.timestamp)))), showAvatar && isUser && (/*#__PURE__*/React__default.createElement(Avatar, Object.assign({
       size: "sm",
       backgroundColor: "color.blue.500",
       color: "white"
@@ -28276,7 +28276,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 12,
       alignItems: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Avatar$1.Avatar, Object.assign({
+    }, /*#__PURE__*/React__default.createElement(Avatar, Object.assign({
       size: "sm",
       backgroundColor: "color.green.500",
       color: "white"
@@ -28478,12 +28478,12 @@
     }, "Session: ", sessionId == null ? void 0 : sessionId.slice(0, 8), "..."))), isLoading && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       alignItems: "center",
       gap: 8
-    }, /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    }, /*#__PURE__*/React__default.createElement(Loader, {
       size: "sm"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.gray.600"
-    }, "Processing..."))))), error && (/*#__PURE__*/React__default.createElement(Alert$1.Alert, {
+    }, "Processing..."))))), error && (/*#__PURE__*/React__default.createElement(Alert, {
       variant: "error",
       title: "",
       description: error,
@@ -29333,7 +29333,7 @@
       gap: 12
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentSessionStyles.filterLabel), "Sort By"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8
-    }, /*#__PURE__*/React__default.createElement(Form.Select, {
+    }, /*#__PURE__*/React__default.createElement(Select, {
       value: sortOptions.field,
       onChange: handleSortFieldChange,
       options: [{
@@ -29350,7 +29350,7 @@
         label: 'Message Count'
       }],
       placeholder: "Sort field"
-    }), /*#__PURE__*/React__default.createElement(Form.Select, {
+    }), /*#__PURE__*/React__default.createElement(Select, {
       value: sortOptions.direction,
       onChange: handleSortDirectionChange,
       options: [{
@@ -29361,14 +29361,14 @@
         label: 'Ascending'
       }],
       placeholder: "Sort direction"
-    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentSessionStyles.filterLabel), "Filter by Tags"), /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentSessionStyles.filterLabel), "Filter by Tags"), /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Enter tags separated by commas",
       value: ((_filters$tags = filters.tags) == null ? void 0 : _filters$tags.join(', ')) || '',
       onChange: handleTagsChange
     })), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentSessionStyles.filterLabel), "Message Count Range"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8,
       alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Min",
       type: "number",
       value: ((_filters$messageCount3 = filters.messageCountRange) == null || (_filters$messageCount3 = _filters$messageCount3.min) == null ? void 0 : _filters$messageCount3.toString()) || '',
@@ -29379,7 +29379,7 @@
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.gray.600"
-    }, "to"), /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, "to"), /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Max",
       type: "number",
       value: ((_filters$messageCount4 = filters.messageCountRange) == null || (_filters$messageCount4 = _filters$messageCount4.max) == null ? void 0 : _filters$messageCount4.toString()) || '',
@@ -29578,9 +29578,9 @@
       onClick: handleCreateSession,
       disabled: isCreating,
       "aria-label": "Create new session"
-    }, isCreating ? /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    }, isCreating ? /*#__PURE__*/React__default.createElement(Loader, {
       size: "xs"
-    }) : '+ New Session'))))), error && (/*#__PURE__*/React__default.createElement(Alert$1.Alert, {
+    }) : '+ New Session'))))), error && (/*#__PURE__*/React__default.createElement(Alert, {
       variant: "error",
       onClose: () => setError(null)
     }, error)), enableSessionSearch && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -29589,7 +29589,7 @@
       borderBottomColor: "color.gray.200"
     }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 12
-    }, /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Search sessions...",
       value: searchQuery,
       onChange: setSearchQuery,
@@ -29612,7 +29612,7 @@
         importButton: views == null ? void 0 : views.importButton,
         exportButton: views == null ? void 0 : views.exportButton
       }
-    })), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.sessionList, views == null ? void 0 : views.sessionList), isLoading && sessions.length === 0 ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    })), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.sessionList, views == null ? void 0 : views.sessionList), isLoading && sessions.length === 0 ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader, {
       size: "md"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       color: "color.gray.600"
@@ -30932,7 +30932,7 @@
       flexWrap: "wrap"
     }, eventTypes.map(type => {
       var _filter$eventTypes;
-      return /*#__PURE__*/React__default.createElement(Form.Checkbox, {
+      return /*#__PURE__*/React__default.createElement(Checkbox, {
         key: type,
         checked: ((_filter$eventTypes = filter.eventTypes) == null ? void 0 : _filter$eventTypes.includes(type)) || false,
         onChange: checked => {
@@ -30946,7 +30946,7 @@
       gap: 8
     }, ['info', 'warning', 'error', 'debug'].map(level => {
       var _filter$level;
-      return /*#__PURE__*/React__default.createElement(Form.Checkbox, {
+      return /*#__PURE__*/React__default.createElement(Checkbox, {
         key: level,
         checked: ((_filter$level = filter.level) == null ? void 0 : _filter$level.includes(level)) || false,
         onChange: checked => {
@@ -30959,7 +30959,7 @@
     }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentTraceStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentTraceStyles.filterLabel), "Duration Range (ms)"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8,
       alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Min",
       type: "number",
       value: ((_filter$minDuration = filter.minDuration) == null ? void 0 : _filter$minDuration.toString()) || '',
@@ -30970,7 +30970,7 @@
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.gray.600"
-    }, "to"), /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, "to"), /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Max",
       type: "number",
       value: ((_filter$maxDuration = filter.maxDuration) == null ? void 0 : _filter$maxDuration.toString()) || '',
@@ -30978,7 +30978,7 @@
       style: {
         width: '100px'
       }
-    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentTraceStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentTraceStyles.filterLabel), "Filter by Tags"), /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentTraceStyles.filterGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentTraceStyles.filterLabel), "Filter by Tags"), /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Enter tags separated by commas",
       value: ((_filter$tags = filter.tags) == null ? void 0 : _filter$tags.join(', ')) || '',
       onChange: handleTagsChange
@@ -31384,14 +31384,14 @@
       onClick: handleRefresh,
       disabled: isLoading,
       "aria-label": "Refresh trace data"
-    }, isLoading ? /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    }, isLoading ? /*#__PURE__*/React__default.createElement(Loader, {
       size: "xs"
     }) : '🔄'), enableExport && (/*#__PURE__*/React__default.createElement(appStudio.Button, {
       variant: "outline",
       size: "sm",
       onClick: () => handleExport('json'),
       "aria-label": "Export trace data"
-    }, "\uD83D\uDCE4 Export"))))), error && (/*#__PURE__*/React__default.createElement(Alert$1.Alert, {
+    }, "\uD83D\uDCE4 Export"))))), error && (/*#__PURE__*/React__default.createElement(Alert, {
       variant: "error",
       onClose: () => setError(null)
     }, error)), enableSearch && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -31400,7 +31400,7 @@
       borderBottomColor: "color.gray.200"
     }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 12
-    }, /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Search events...",
       value: searchQuery,
       onChange: setSearchQuery,
@@ -31439,15 +31439,15 @@
     })) : (
     /*#__PURE__*/
     // Full mode - tabbed interface
-    React__default.createElement(Tabs$1.Tabs, {
+    React__default.createElement(Tabs, {
       defaultValue: "timeline"
-    }, /*#__PURE__*/React__default.createElement(Tabs$1.Tabs.List, null, showTimeline && (/*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Trigger, {
+    }, /*#__PURE__*/React__default.createElement(Tabs.List, null, showTimeline && (/*#__PURE__*/React__default.createElement(Tabs.Trigger, {
       value: "timeline"
-    }, "Timeline")), /*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Trigger, {
+    }, "Timeline")), /*#__PURE__*/React__default.createElement(Tabs.Trigger, {
       value: "events"
-    }, "Events"), showVisualization && (/*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Trigger, {
+    }, "Events"), showVisualization && (/*#__PURE__*/React__default.createElement(Tabs.Trigger, {
       value: "visualization"
-    }, "Visualization"))), showTimeline && (/*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Content, {
+    }, "Visualization"))), showTimeline && (/*#__PURE__*/React__default.createElement(Tabs.Content, {
       value: "timeline"
     }, /*#__PURE__*/React__default.createElement(TraceTimeline, {
       events: events,
@@ -31459,7 +31459,7 @@
       views: {
         container: views == null ? void 0 : views.timeline
       }
-    }))), /*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Content, {
+    }))), /*#__PURE__*/React__default.createElement(Tabs.Content, {
       value: "events"
     }, /*#__PURE__*/React__default.createElement(TraceEventList, {
       events: events,
@@ -31472,7 +31472,7 @@
         eventItem: views == null ? void 0 : views.eventItem,
         selectedEventItem: views == null ? void 0 : views.selectedEventItem
       }
-    })), showVisualization && (/*#__PURE__*/React__default.createElement(Tabs$1.Tabs.Content, {
+    })), showVisualization && (/*#__PURE__*/React__default.createElement(Tabs.Content, {
       value: "visualization"
     }, /*#__PURE__*/React__default.createElement(TraceVisualization, {
       events: events,
@@ -31484,7 +31484,7 @@
       views: {
         container: views == null ? void 0 : views.visualization
       }
-    })))))), isLoading && events.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentTraceStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    })))))), isLoading && events.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentTraceStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader, {
       size: "md"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       color: "color.gray.600"
@@ -32394,7 +32394,7 @@
       }, "Avg Score: ", evaluation.summary.averageScore.toFixed(1)), /*#__PURE__*/React__default.createElement(appStudio.Text, {
         fontSize: "sm",
         color: "color.gray.600"
-      }, "Pass Rate: ", (evaluation.summary.passRate * 100).toFixed(1), "%"))), evaluation.error && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      }, "Pass Rate:", ' ', (evaluation.summary.passRate * 100).toFixed(1), "%"))), evaluation.error && (/*#__PURE__*/React__default.createElement(appStudio.View, {
         padding: 8,
         backgroundColor: "color.red.50",
         borderRadius: "4px",
@@ -32535,7 +32535,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.yellow.800"
-    }, "\u26A0\uFE0F Maximum concurrent evaluations reached. Please wait for running evaluations to complete."))), templates.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Use Template (Optional)"), /*#__PURE__*/React__default.createElement(Form.Select, {
+    }, "\u26A0\uFE0F Maximum concurrent evaluations reached. Please wait for running evaluations to complete."))), templates.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Use Template (Optional)"), /*#__PURE__*/React__default.createElement(Select, {
       value: selectedTemplate,
       onChange: handleTemplateSelect,
       options: [{
@@ -32546,7 +32546,7 @@
         label: t.name
       }))],
       placeholder: "Select a template"
-    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Evaluation Name *"), /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Evaluation Name *"), /*#__PURE__*/React__default.createElement(TextField, {
       value: name,
       onChange: setName,
       placeholder: "Enter evaluation name",
@@ -32560,7 +32560,7 @@
       size: "sm",
       onClick: loadSampleData,
       disabled: isCreating
-    }, "Load Sample")), /*#__PURE__*/React__default.createElement(Form.TextArea, {
+    }, "Load Sample")), /*#__PURE__*/React__default.createElement(TextArea, {
       value: testCasesText,
       onChange: e => setTestCasesText(e.target.value),
       placeholder: "Enter test cases as JSON array",
@@ -32578,7 +32578,7 @@
       fontSize: "xs",
       color: "color.gray.600",
       marginTop: 4
-    }, "Each test case should have: id, name, input, expectedOutput (optional)")), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Metrics (JSON)"), /*#__PURE__*/React__default.createElement(Form.TextArea, {
+    }, "Each test case should have: id, name, input, expectedOutput (optional)")), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.formGroup), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, DefaultAgentEvalStyles.formLabel), "Metrics (JSON)"), /*#__PURE__*/React__default.createElement(TextArea, {
       value: metricsText,
       onChange: e => setMetricsText(e.target.value),
       placeholder: "Enter metrics as JSON array",
@@ -33000,13 +33000,13 @@
     }, "\uD83D\uDCCA Key Insights"), overallMetrics.avgPassRate > 0.9 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.green.700"
-    }, "\u2705 Excellent performance with ", (overallMetrics.avgPassRate * 100).toFixed(1), "% average pass rate")), overallMetrics.avgPassRate < 0.7 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    }, "\u2705 Excellent performance with", ' ', (overallMetrics.avgPassRate * 100).toFixed(1), "% average pass rate")), overallMetrics.avgPassRate < 0.7 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.red.700"
     }, "\u26A0\uFE0F Consider reviewing test cases or agent configuration (pass rate: ", (overallMetrics.avgPassRate * 100).toFixed(1), "%)")), overallMetrics.totalEvaluations >= 10 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.blue.700"
-    }, "\uD83D\uDCC8 Good evaluation coverage with ", overallMetrics.totalEvaluations, " completed evaluations")), overallMetrics.totalEvaluations < 5 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    }, "\uD83D\uDCC8 Good evaluation coverage with", ' ', overallMetrics.totalEvaluations, " completed evaluations")), overallMetrics.totalEvaluations < 5 && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "sm",
       color: "color.yellow.700"
     }, "\uD83D\uDCA1 Consider running more evaluations for better performance insights")))))), !overallMetrics && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -33144,7 +33144,7 @@
       onClick: handleRefresh,
       disabled: isLoading,
       "aria-label": "Refresh evaluations"
-    }, isLoading ? /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    }, isLoading ? /*#__PURE__*/React__default.createElement(Loader, {
       size: "xs"
     }) : '🔄'), enableResultExport && (/*#__PURE__*/React__default.createElement(appStudio.Button, {
       variant: "outline",
@@ -33159,7 +33159,7 @@
       padding: 16,
       borderBottom: "1px solid",
       borderBottomColor: "color.gray.200"
-    }, /*#__PURE__*/React__default.createElement(Form.TextField, {
+    }, /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Search evaluations...",
       value: searchQuery,
       onChange: setSearchQuery,
@@ -33263,7 +33263,7 @@
       views: {
         container: views == null ? void 0 : views.metricsPanel
       }
-    })))))), isLoading && evaluations.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    })))))), isLoading && evaluations.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentEvalStyles.loadingState, views == null ? void 0 : views.loadingState), /*#__PURE__*/React__default.createElement(Loader, {
       size: "md"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       color: "color.gray.600"