@mastra/playground-ui 6.2.4-alpha.1 → 6.3.0-alpha.0

package/dist/index.cjs.js

@@ -63,7 +63,6 @@ const HoverCard = require('@radix-ui/react-hover-card');
 const dnd = require('@hello-pangea/dnd');
 const SwitchPrimitives = require('@radix-ui/react-switch');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
-const runtimeContext = require('@mastra/core/runtime-context');
 const format = require('date-fns/format');
 const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
@@ -4349,7 +4348,7 @@ const SyntaxHighlighter$2 = ({
   ] });
 };
 
-const variantClasses$2 = {
+const variantClasses$3 = {
   default: "text-icon3",
   success: "text-accent1",
   error: "text-accent2",
@@ -4362,12 +4361,12 @@ const Badge$1 = ({ icon, variant = "default", className, children, ...props }) =
       className: clsx(
         "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
         icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
+        icon || variant === "default" ? "text-icon5" : variantClasses$3[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$3[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -4612,7 +4611,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
         workflowState: {
           ...prev?.payload?.workflowState,
           status: "running",
-          steps: {}
+          steps: prev?.runId === chunk.runId ? prev?.payload?.workflowState?.steps ?? {} : {}
         }
       }
     };
@@ -4621,6 +4620,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
     return {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev.payload,
         currentStep: {
@@ -4645,6 +4645,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
     return {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev?.payload,
         currentStep: {
@@ -4671,6 +4672,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
     return {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev?.payload,
         currentStep: {
@@ -4698,6 +4700,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
     const next = {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev?.payload,
         currentStep: {
@@ -4724,6 +4727,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
   if (chunk.type === "workflow-canceled") {
     return {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev?.payload,
         workflowState: {
@@ -4737,6 +4741,7 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
   if (chunk.type === "workflow-finish") {
     return {
       ...prev,
+      runId: chunk.runId,
       payload: {
         ...prev?.payload,
         currentStep: void 0,
@@ -4759,7 +4764,7 @@ function WorkflowRunProvider({
   const [result, setResult] = React.useState(
     () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
   );
-  const [payload, setPayload] = React.useState(null);
+  const [payload, setPayload] = React.useState(() => snapshot?.context?.input ?? null);
   const clearData = () => {
     setResult(null);
     setPayload(null);
@@ -4767,6 +4772,7 @@ function WorkflowRunProvider({
   React.useEffect(() => {
     if (snapshot?.runId) {
       setResult(convertWorkflowRunStateToWatchResult(snapshot));
+      setPayload(snapshot.context?.input);
     }
   }, [snapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5291,7 +5297,7 @@ const sizeClasses = {
   md: "h-button-md gap-md",
   lg: "h-button-lg gap-lg"
 };
-const variantClasses$1 = {
+const variantClasses$2 = {
   default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
   light: "bg-surface3 hover:bg-surface5 text-icon6"
 };
@@ -5302,7 +5308,7 @@ const Button$1 = ({ className, as, size = "md", variant = "default", ...props })
     {
       className: clsx(
         "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses$1[variant],
+        variantClasses$2[variant],
         sizeClasses[size],
         className,
         {
@@ -5322,7 +5328,7 @@ const useCodemirrorTheme$1 = () => {
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        gutterForeground: colors.Colors.surface3,
+        gutterForeground: colors.IconColors.icon3,
         background: "transparent"
       },
       styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
@@ -6261,20 +6267,20 @@ const alertVariants = cva(
     }
   }
 );
-const Alert = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-Alert.displayName = "Alert";
-const AlertTitle = React__namespace.forwardRef(
+const Alert$1 = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+Alert$1.displayName = "Alert";
+const AlertTitle$1 = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
 );
-AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React__namespace.forwardRef(
+AlertTitle$1.displayName = "AlertTitle";
+const AlertDescription$1 = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
 );
-AlertDescription.displayName = "AlertDescription";
+AlertDescription$1.displayName = "AlertDescription";
 
-const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
+const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "destructive", children: [
   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: error })
+  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { children: error })
 ] });
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button$2, { type: "submit", children });
@@ -6462,7 +6468,8 @@ const PopoverContent = React__namespace.forwardRef(({ className, align = "center
     align,
     sideOffset,
     className: clsx(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-72 rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className?.includes(` p-`) ? false : `p-4`,
       className
     ),
     ...props
@@ -7091,6 +7098,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
 const WorkflowInputData = ({
   schema,
   defaultValues,
+  withoutSubmit,
   isSubmitLoading,
   submitButtonLabel,
   onSubmit
@@ -7129,7 +7137,7 @@ const WorkflowInputData = ({
             defaultValues,
             isSubmitLoading,
             submitButtonLabel,
-            onSubmit
+            onSubmit: withoutSubmit ? void 0 : onSubmit
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           JSONInput,
@@ -7138,16 +7146,24 @@ const WorkflowInputData = ({
             defaultValues,
             isSubmitLoading,
             submitButtonLabel,
-            onSubmit
+            onSubmit,
+            withoutSubmit
           }
         )
       }
     )
   ] });
 };
-const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+const JSONInput = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit,
+  withoutSubmit
+}) => {
   const [errors, setErrors] = React.useState([]);
-  const [inputData, setInputData] = React.useState(JSON.stringify(defaultValues ?? {}, null, 2));
+  const [inputData, setInputData] = React.useState(() => JSON.stringify(defaultValues ?? {}, null, 2));
   const handleSubmit = () => {
     setErrors([]);
     try {
@@ -7170,7 +7186,7 @@ const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel,
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
+    withoutSubmit ? null : /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
   ] });
 };
 const SyntaxHighlighter = ({ data, onChange }) => {
@@ -7181,23 +7197,27 @@ const SyntaxHighlighter = ({ data, onChange }) => {
   ] });
 };
 
+const isObjectEmpty = (objectName) => {
+  return objectName && Object.keys(objectName).length === 0 && objectName.constructor === Object;
+};
+
 function WorkflowTrigger({
   workflowId,
+  paramsRunId,
   setRunId,
   workflow,
   isLoading,
   createWorkflowRun,
   resumeWorkflow,
   streamWorkflow,
+  observeWorkflowStream,
   isStreamingWorkflow,
   streamResult,
-  isResumingWorkflow,
   isCancellingWorkflowRun,
   cancelWorkflowRun
 }) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
-  const [suspendedSteps, setSuspendedSteps] = React.useState([]);
   const [isRunning, setIsRunning] = React.useState(false);
   const [innerRunId, setInnerRunId] = React.useState("");
   const [cancelResponse, setCancelResponse] = React.useState(null);
@@ -7235,19 +7255,21 @@ function WorkflowTrigger({
     setCancelResponse(response);
   };
   const streamResultToUse = result ?? streamResult;
+  const suspendedSteps = Object.entries(streamResultToUse?.payload?.workflowState?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
+    stepId,
+    runId: streamResultToUse?.runId ?? "",
+    suspendPayload: payload2,
+    isLoading: false
+  }));
+  React.useEffect(() => {
+    if (paramsRunId && observeWorkflowStream) {
+      observeWorkflowStream({ workflowId, runId: paramsRunId });
+      setInnerRunId(paramsRunId);
+    }
+  }, [paramsRunId]);
   React.useEffect(() => {
     setIsRunning(isStreamingWorkflow);
   }, [isStreamingWorkflow]);
-  React.useEffect(() => {
-    if (!streamResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
-    const suspended = Object.entries(streamResultToUse?.payload?.workflowState?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
-      stepId,
-      runId: result.runId,
-      suspendPayload: payload2,
-      isLoading: false
-    }));
-    setSuspendedSteps(suspended);
-  }, [streamResultToUse, result]);
   React.useEffect(() => {
     if (streamResult) {
       setResult(streamResult);
@@ -7267,7 +7289,7 @@ function WorkflowTrigger({
   const doneStatuses = ["success", "failed", "canceled"];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+      isSuspendedSteps && isStreamingWorkflow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
       ] }),
@@ -7281,9 +7303,10 @@ function WorkflowTrigger({
           onSubmit: (data) => {
             setPayload(data);
             handleExecuteWorkflow(data);
-          }
+          },
+          withoutSubmit: !!paramsRunId
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ) : !!paramsRunId ? null : /* @__PURE__ */ jsxRuntime.jsx(
         Button$1,
         {
           className: "w-full",
@@ -7311,7 +7334,7 @@ function WorkflowTrigger({
             WorkflowInputData,
             {
               schema: stepSchema,
-              isSubmitLoading: isResumingWorkflow,
+              isSubmitLoading: isStreamingWorkflow,
               submitButtonLabel: "Resume",
               onSubmit: (data) => {
                 const stepIds = step.stepId?.split(".");
@@ -7349,7 +7372,7 @@ function WorkflowTrigger({
         ] })
       ] })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result }) })
+    result && !isObjectEmpty(result) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result }) })
   ] });
 }
 const WorkflowJsonDialog = ({ result }) => {
@@ -7377,7 +7400,14 @@ const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   });
 };
 
-const WorkflowRuns = ({ workflowId, runId, onPressRun }) => {
+const WorkflowRuns = ({
+  workflowId,
+  runId,
+  onPressRun,
+  onPressBackToRuns,
+  observeWorkflowStream,
+  ...triggerProps
+}) => {
   const { isLoading, data: runs } = useWorkflowRuns(workflowId);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
@@ -7386,19 +7416,45 @@ const WorkflowRuns = ({ workflowId, runId, onPressRun }) => {
   if (actualRuns.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon6 text-center", children: "No previous run" }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "pb-10", children: actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const run = actualRuns.find((run2) => run2.runId === runId);
+  const runSnapshot = run?.snapshot;
+  const runResult = runSnapshot && typeof runSnapshot === "object" ? convertWorkflowRunStateToWatchResult(runSnapshot) : null;
+  const runStatus = runResult?.payload?.workflowState?.status;
+  if (runId) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full grid grid-rows-[1fr_auto]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { onClick: onPressBackToRuns, variant: "light", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}) }),
+        "Back to runs"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowTrigger,
+        {
+          ...triggerProps,
+          streamResult: isObjectEmpty(triggerProps.streamResult ?? {}) ? runResult : triggerProps.streamResult,
+          paramsRunId: runId,
+          workflowId,
+          observeWorkflowStream: () => {
+            if (runStatus !== "success" && runStatus !== "failed" && runStatus !== "canceled") {
+              observeWorkflowStream?.({ workflowId, runId });
+            }
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "pb-10", children: actualRuns.map((run2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      onClick: () => onPressRun({ workflowId, runId: run.runId }),
+      onClick: () => onPressRun({ workflowId, runId: run2.runId }),
       className: clsx("px-3 py-2 border-b-sm border-border1 block w-full hover:bg-surface4 text-left", {
-        "bg-surface4": run.runId === runId
+        "bg-surface4": run2.runId === runId
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run.runId }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run2.runId }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run2?.snapshot === "string" ? "" : run2?.snapshot?.timestamp ? dateFns.formatDate(run2?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
       ]
     }
-  ) }, run.runId)) });
+  ) }, run2.runId)) });
 };
 
 const EmptyState = ({
@@ -7690,7 +7746,7 @@ const useLinkComponent = () => {
   return ctx;
 };
 
-const columns$3 = [
+const columns$2 = [
   {
     id: "name",
     header: "Name",
@@ -7738,7 +7794,7 @@ function WorkflowTable({ workflows, isLoading }) {
   }, [workflows]);
   const table = reactTable.useReactTable({
     data: workflowData,
-    columns: columns$3,
+    columns: columns$2,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(WorkflowTableSkeleton, {});
@@ -8521,11 +8577,11 @@ const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) =>
           modelMetadata.modelId
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar$1, {})
+      /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar, {})
     ] })
   ] });
 };
-const AssistantActionBar$1 = () => {
+const AssistantActionBar = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.ActionBarPrimitive.Root,
     {
@@ -9114,28 +9170,28 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }) =
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback, hasModelList });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper$1, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome$1, { agentName }),
+      /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { agentName }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
         react.ThreadPrimitive.Messages,
         {
           components: {
             UserMessage,
-            EditComposer: EditComposer$1,
+            EditComposer,
             AssistantMessage: WrappedAssistantMessage
           }
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, agentId })
+    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory, agentId })
   ] });
 };
-const ThreadWrapper$1 = ({ children }) => {
+const ThreadWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
 };
-const ThreadWelcome$1 = ({ agentName }) => {
+const ThreadWelcome = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
   const words = safeAgentName.split(" ") ?? [];
   let initials = "A";
@@ -9151,36 +9207,30 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer$1 = ({ hasMemory, agentId }) => {
+const Composer = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
-            autoFocus: true,
-            placeholder: "Enter your message...",
-            name: "",
-            id: "",
-            onChange: (e) => setThreadInput?.(e.target.value)
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SpeechInput$1, { agentId }),
-          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction$1, {})
-        ] })
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
+          autoFocus: document.activeElement === document.body,
+          placeholder: "Enter your message...",
+          name: "",
+          id: "",
+          onChange: (e) => setThreadInput?.(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SpeechInput, { agentId }),
+        /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, {})
       ] })
-    ] }),
-    !hasMemory && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex gap-2 pt-1 max-w-[568px] w-full mx-auto border-t items-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "transform translate-y-[0.1rem]", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {}) }),
-      "Memory is not enabled. The conversation will not be persisted."
     ] })
-  ] });
+  ] }) });
 };
-const SpeechInput$1 = ({ agentId }) => {
+const SpeechInput = ({ agentId }) => {
   const composerRuntime = react.useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition({ agentId });
   React.useEffect(() => {
@@ -9195,11 +9245,11 @@ const SpeechInput$1 = ({ agentId }) => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
-const ComposerAction$1 = () => {
+const ComposerAction = () => {
   const [isAddAttachmentDialogOpen, setIsAddAttachmentDialogOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -9223,10 +9273,10 @@ const ComposerAction$1 = () => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
-const EditComposer$1 = () => {
+const EditComposer = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -9235,7 +9285,7 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -10040,9 +10090,6 @@ const createRootToolAssistantMessage = ({
   return [...conversation, newMessage];
 };
 
-const convertMessage$1 = (message) => {
-  return message;
-};
 const handleFinishReason = (finishReason) => {
   switch (finishReason) {
     case "tool-calls":
@@ -10151,17 +10198,20 @@ function MastraRuntimeProvider({
   runtimeContext,
   modelVersion
 }) {
-  const [isRunning, setIsRunning] = React.useState(false);
+  const initializeMessages = () => memory ? initializeMessageState(initialMessages || []) : [];
+  const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
+  const [legacyMessages, setLegacyMessages] = React.useState(initializeMessages());
   const {
-    messages,
     setMessages,
-    streamVNext,
+    messages,
+    generate,
+    stream,
     network,
     cancelRun,
-    isRunning: isRunningStreamVNext
+    isRunning: isRunningStream
   } = react$3.useChat({
     agentId,
-    initializeMessages: () => memory ? initializeMessageState(initialMessages || []) : []
+    initializeMessages
   });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
@@ -10175,8 +10225,8 @@ function MastraRuntimeProvider({
     topK,
     topP,
     instructions,
+    chatWithGenerateLegacy,
     chatWithGenerate,
-    chatWithGenerateVNext,
     chatWithNetwork,
     providerOptions
   } = settings?.modelSettings ?? {};
@@ -10197,11 +10247,16 @@ function MastraRuntimeProvider({
     providerOptions
   };
   const baseClient = react$3.useMastraClient();
+  const isVNext = modelVersion === "v2";
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    setMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
+    if (isVNext) {
+      setMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
+    } else {
+      setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
+    }
     const controller = new AbortController();
     abortControllerRef.current = controller;
     const clientWithAbort = new clientJs.MastraClient({
@@ -10210,97 +10265,7 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
-      let handleGenerateResponse = function(generatedResponse) {
-        if (generatedResponse.response && "messages" in generatedResponse.response && generatedResponse.response.messages) {
-          const latestMessage = generatedResponse.response.messages.reduce(
-            (acc, message2) => {
-              const _content = Array.isArray(acc.content) ? acc.content : [];
-              if (typeof message2.content === "string") {
-                return {
-                  ...acc,
-                  content: [
-                    ..._content,
-                    ...generatedResponse.reasoning ? [{ type: "reasoning", text: generatedResponse.reasoning }] : [],
-                    {
-                      type: "text",
-                      text: message2.content
-                    }
-                  ]
-                };
-              }
-              if (message2.role === "assistant") {
-                const toolCallContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-call") : void 0;
-                const reasoningContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "reasoning") : void 0;
-                if (toolCallContent) {
-                  const newContent = message2.content.map((c) => {
-                    if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
-                      return {
-                        ...c,
-                        toolCallId: toolCallContent.toolCallId,
-                        toolName: toolCallContent.toolName,
-                        args: toolCallContent.input
-                      };
-                    }
-                    return c;
-                  });
-                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
-                  return {
-                    ...acc,
-                    content: containsToolCall ? [...reasoningContent ? [reasoningContent] : [], ...newContent] : [..._content, ...reasoningContent ? [reasoningContent] : [], toolCallContent]
-                  };
-                }
-                const textContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "text" && content.text) : void 0;
-                if (textContent) {
-                  return {
-                    ...acc,
-                    content: [..._content, ...reasoningContent ? [reasoningContent] : [], textContent]
-                  };
-                }
-              }
-              if (message2.role === "tool") {
-                const toolResult = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-result") : void 0;
-                if (toolResult) {
-                  const newContent = _content.map((c) => {
-                    if (c.type === "tool-call" && c.toolCallId === toolResult?.toolCallId) {
-                      return { ...c, result: toolResult.output?.value };
-                    }
-                    return c;
-                  });
-                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
-                  return {
-                    ...acc,
-                    content: containsToolCall ? newContent : [
-                      ..._content,
-                      { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.output?.value }
-                    ]
-                  };
-                }
-                return {
-                  ...acc,
-                  content: [..._content, toolResult]
-                };
-              }
-              return acc;
-            },
-            { role: "assistant", content: [] }
-          );
-          setMessages((currentConversation) => [
-            ...currentConversation,
-            {
-              ...latestMessage,
-              metadata: {
-                custom: {
-                  modelMetadata: generatedResponse.response.modelMetadata
-                }
-              }
-            }
-          ]);
-          if (generatedResponse.finishReason) {
-            handleFinishReason(generatedResponse.finishReason);
-          }
-        }
-      };
-      if (modelVersion === "v2") {
+      if (isVNext) {
         if (chatWithNetwork) {
           let currentEntityId;
           await network({
@@ -10386,36 +10351,26 @@ function MastraRuntimeProvider({
             }
           });
         } else {
-          if (chatWithGenerateVNext) {
-            setIsRunning(true);
-            const response = await agent.generateVNext({
-              messages: [
+          if (chatWithGenerate) {
+            await generate({
+              coreUserMessages: [
                 {
                   role: "user",
                   content: input
                 },
                 ...attachments
               ],
-              runId: agentId,
-              modelSettings: {
-                frequencyPenalty,
-                presencePenalty,
-                maxRetries,
-                temperature,
-                topK,
-                topP,
-                maxOutputTokens: maxTokens
-              },
-              providerOptions,
-              instructions,
               runtimeContext: runtimeContextInstance,
-              ...memory ? { threadId, resourceId: agentId } : {}
+              threadId,
+              modelSettings: modelSettingsArgs,
+              signal: controller.signal,
+              onFinish: (messages2) => {
+                return messages2.map((message2) => react$3.toAssistantUIMessage(message2));
+              }
             });
-            handleGenerateResponse(response);
-            setIsRunning(false);
             return;
           } else {
-            await streamVNext({
+            await stream({
               coreUserMessages: [
                 {
                   role: "user",
@@ -10439,9 +10394,9 @@ function MastraRuntimeProvider({
           }
         }
       } else {
-        if (chatWithGenerate) {
-          setIsRunning(true);
-          const generateResponse = await agent.generate({
+        if (chatWithGenerateLegacy) {
+          setIsLegacyRunning(true);
+          const generateResponse = await agent.generateLegacy({
             messages: [
               {
                 role: "user",
@@ -10531,12 +10486,13 @@ function MastraRuntimeProvider({
               },
               { role: "assistant", content: [] }
             );
-            setMessages((currentConversation) => [...currentConversation, latestMessage]);
+            setLegacyMessages((currentConversation) => [...currentConversation, latestMessage]);
             handleFinishReason(generateResponse.finishReason);
           }
+          setIsLegacyRunning(false);
         } else {
           let updater = function() {
-            setMessages((currentConversation) => {
+            setLegacyMessages((currentConversation) => {
               const message2 = {
                 role: "assistant",
                 content: [{ type: "text", text: content }]
@@ -10555,8 +10511,8 @@ function MastraRuntimeProvider({
               return [...currentConversation.slice(0, -1), message2];
             });
           };
-          setIsRunning(true);
-          const response = await agent.stream({
+          setIsLegacyRunning(true);
+          const response = await agent.streamLegacy({
             messages: [
               {
                 role: "user",
@@ -10596,7 +10552,7 @@ function MastraRuntimeProvider({
               updater();
             },
             async onToolCallPart(value) {
-              setMessages((currentConversation) => {
+              setLegacyMessages((currentConversation) => {
                 const lastMessage = currentConversation[currentConversation.length - 1];
                 if (lastMessage && lastMessage.role === "assistant") {
                   const updatedMessage = {
@@ -10642,7 +10598,7 @@ function MastraRuntimeProvider({
               toolCallIdToName.current[value.toolCallId] = value.toolName;
             },
             async onToolResultPart(value) {
-              setMessages((currentConversation) => {
+              setLegacyMessages((currentConversation) => {
                 const lastMessage = currentConversation[currentConversation.length - 1];
                 if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
                   const updatedContent = lastMessage.content.map((part) => {
@@ -10678,7 +10634,7 @@ function MastraRuntimeProvider({
               handleFinishReason(finishReason);
             },
             onReasoningPart(value) {
-              setMessages((currentConversation) => {
+              setLegacyMessages((currentConversation) => {
                 const lastMessage = currentConversation[currentConversation.length - 1];
                 if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
                   const updatedContent = lastMessage.content.map((part) => {
@@ -10711,21 +10667,28 @@ function MastraRuntimeProvider({
             }
           });
         }
+        setIsLegacyRunning(false);
       }
-      setIsRunning(false);
       setTimeout(() => {
         refreshThreadList?.();
       }, 500);
     } catch (error) {
       console.error("Error occurred in MastraRuntimeProvider", error);
-      setIsRunning(false);
+      setIsLegacyRunning(false);
       if (error.name === "AbortError") {
         return;
       }
-      setMessages((currentConversation) => [
-        ...currentConversation,
-        { role: "assistant", content: [{ type: "text", text: `${error}` }] }
-      ]);
+      if (isVNext) {
+        setMessages((currentConversation) => [
+          ...currentConversation,
+          { role: "assistant", content: [{ type: "text", text: `${error}` }] }
+        ]);
+      } else {
+        setLegacyMessages((currentConversation) => [
+          ...currentConversation,
+          { role: "assistant", content: [{ type: "text", text: `${error}` }] }
+        ]);
+      }
     } finally {
       abortControllerRef.current = null;
     }
@@ -10734,15 +10697,15 @@ function MastraRuntimeProvider({
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
-      setIsRunning(false);
+      setIsLegacyRunning(false);
       cancelRun?.();
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
   const runtime = react.useExternalStoreRuntime({
-    isRunning: isRunning || isRunningStreamVNext,
-    messages,
-    convertMessage: convertMessage$1,
+    isRunning: isLegacyRunning || isRunningStream,
+    messages: isVNext ? messages : legacyMessages,
+    convertMessage: (x) => x,
     onNew,
     onCancel,
     adapters: isReady ? adapters : void 0
@@ -10761,8 +10724,8 @@ const defaultSettings = {
     maxSteps: 5,
     temperature: 0.5,
     topP: 1,
-    chatWithGenerate: false,
-    chatWithGenerateVNext: false
+    chatWithGenerateLegacy: false,
+    chatWithGenerate: false
   }
 };
 function useAgentSettingsState({ agentId }) {
@@ -11507,10 +11470,10 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
     if (settings?.modelSettings?.chatWithNetwork) {
       radioValue = "network";
     } else {
-      radioValue = settings?.modelSettings?.chatWithGenerateVNext ? "generateVNext" : "streamVNext";
+      radioValue = settings?.modelSettings?.chatWithGenerate ? "generate" : "stream";
     }
   } else {
-    radioValue = settings?.modelSettings?.chatWithGenerate ? "generate" : "stream";
+    radioValue = settings?.modelSettings?.chatWithGenerateLegacy ? "generateLegacy" : "streamLegacy";
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
@@ -11523,29 +11486,28 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
             ...settings,
             modelSettings: {
               ...settings?.modelSettings,
+              chatWithGenerateLegacy: value === "generateLegacy",
               chatWithGenerate: value === "generate",
-              chatWithGenerateVNext: value === "generateVNext",
-              chatWithStreamVNext: value === "streamVNext",
               chatWithNetwork: value === "network"
             }
           }),
           className: "flex flex-row gap-4",
           children: [
             modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateLegacy", children: "Generate" })
             ] }),
             modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateVNext", id: "generateVNext", className: "text-icon6" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateVNext", children: "Generate vNext" })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
             ] }),
             modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "streamLegacy", id: "streamLegacy", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamLegacy", children: "Stream" })
             ] }),
             modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "streamVNext", id: "streamVNext", className: "text-icon6" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamVNext", children: "Stream vNext" })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
             ] }),
             modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
           ]
@@ -11605,7 +11567,7 @@ const NameCell$1 = ({ row }) => {
     }
   );
 };
-const columns$2 = [
+const columns$1 = [
   {
     header: "Name",
     accessorKey: "name",
@@ -11682,7 +11644,7 @@ function AgentsTable({ agents, isLoading }) {
   );
   const table = reactTable.useReactTable({
     data: projectData,
-    columns: columns$2,
+    columns: columns$1,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(AgentsTableSkeleton, {});
@@ -13403,7 +13365,7 @@ const NameCell = ({ row }) => {
     }
   );
 };
-const columns$1 = [
+const columns = [
   {
     header: "Name",
     accessorKey: "name",
@@ -13426,7 +13388,7 @@ function ScorersTable({ scorers, isLoading }) {
   );
   const table = reactTable.useReactTable({
     data: scorersData,
-    columns: columns$1,
+    columns,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(ScorersTableSkeleton, {});
@@ -13468,20 +13430,41 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classNam
   }
 ) });
 
+const variantClasses$1 = {
+  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
+  destructive: "bg-red-900/20 border-sm border-red-200 text-red-200"
+};
+const variantIcons = {
+  warning: lucideReact.TriangleAlert,
+  destructive: lucideReact.AlertCircle
+};
+const Alert = ({ children, variant = "destructive" }) => {
+  const Ico = variantIcons[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+  ] }) });
+};
+const AlertTitle = ({ children, as: As = "h5" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
+};
+const AlertDescription = ({ children, as: As = "p" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
+};
+
 const AgentMetadataModelSwitcher = ({
   defaultProvider,
   defaultModel,
   updateModel,
-  apiUrl = "/api/agents/providers",
-  autoSave = false,
-  selectProviderPlaceholder = "Select provider"
+  apiUrl = "/api/agents/providers"
 }) => {
   const [selectedModel, setSelectedModel] = React.useState(defaultModel);
   const [showModelSuggestions, setShowModelSuggestions] = React.useState(false);
   const [selectedProvider, setSelectedProvider] = React.useState(defaultProvider || "");
   const [providerSearch, setProviderSearch] = React.useState("");
   const [modelSearch, setModelSearch] = React.useState("");
-  const [isSearching, setIsSearching] = React.useState(false);
+  const [isSearchingProvider, setIsSearchingProvider] = React.useState(false);
+  const [isSearchingModel, setIsSearchingModel] = React.useState(false);
   const [showProviderSuggestions, setShowProviderSuggestions] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const [providers, setProviders] = React.useState([]);
@@ -13525,7 +13508,7 @@ const AgentMetadataModelSwitcher = ({
     );
   }, [providers]);
   const filteredProviders = React.useMemo(() => {
-    const searchTerm = isSearching ? providerSearch : "";
+    const searchTerm = isSearchingProvider ? providerSearch : "";
     let filtered = providers;
     if (searchTerm) {
       filtered = providers.filter(
@@ -13548,18 +13531,18 @@ const AgentMetadataModelSwitcher = ({
       }
       return a.name.localeCompare(b.name);
     });
-  }, [providers, providerSearch, isSearching]);
+  }, [providers, providerSearch, isSearchingProvider]);
   const filteredModels = React.useMemo(() => {
     let filtered = allModels;
     if (currentModelProvider) {
       filtered = filtered.filter((m) => m.provider === currentModelProvider);
     }
-    if (isSearching && modelSearch) {
+    if (isSearchingModel && modelSearch) {
       filtered = filtered.filter((m) => m.model.toLowerCase().includes(modelSearch.toLowerCase()));
     }
     filtered.sort((a, b) => a.model.localeCompare(b.model));
     return filtered;
-  }, [allModels, modelSearch, currentModelProvider, isSearching]);
+  }, [allModels, modelSearch, currentModelProvider, isSearchingModel]);
   const [infoMsg, setInfoMsg] = React.useState("");
   const handleModelSelect = async (modelId) => {
     setSelectedModel(modelId);
@@ -13585,7 +13568,7 @@ const AgentMetadataModelSwitcher = ({
   const handleProviderSelect = async (provider) => {
     setSelectedProvider(provider.id);
     setProviderSearch("");
-    setIsSearching(false);
+    setIsSearchingProvider(false);
     setShowProviderSuggestions(false);
     setHighlightedProviderIndex(-1);
     if (provider.id !== currentModelProvider) {
@@ -13602,10 +13585,12 @@ const AgentMetadataModelSwitcher = ({
   const { registerResetFn } = useModelReset();
   React.useEffect(() => {
     const resetIfIncomplete = () => {
+      if (modelInputRef.current === document.activeElement || providerInputRef.current === document.activeElement || showProviderSuggestions || showModelSuggestions) {
+        return;
+      }
       const providerChanged = currentModelProvider && currentModelProvider !== defaultProvider;
       const modelEmpty = !selectedModel || selectedModel === "";
       if (providerChanged && modelEmpty) {
-        console.log("Incomplete model selection detected, reverting to defaults");
         setSelectedProvider(defaultProvider);
         setSelectedModel(defaultModel);
         if (defaultProvider && defaultModel) {
@@ -13622,7 +13607,16 @@ const AgentMetadataModelSwitcher = ({
     return () => {
       registerResetFn(null);
     };
-  }, [registerResetFn, currentModelProvider, selectedModel, defaultProvider, defaultModel, updateModel]);
+  }, [
+    registerResetFn,
+    currentModelProvider,
+    selectedModel,
+    defaultProvider,
+    defaultModel,
+    updateModel,
+    showProviderSuggestions,
+    showModelSuggestions
+  ]);
   if (providersLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
@@ -13630,7 +13624,7 @@ const AgentMetadataModelSwitcher = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col xl:flex-row items-stretch xl:items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Popover,
         {
@@ -13639,12 +13633,12 @@ const AgentMetadataModelSwitcher = ({
             setShowProviderSuggestions(open);
             if (!open) {
               setProviderSearch("");
-              setIsSearching(false);
+              setIsSearchingProvider(false);
             }
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-[180px]", children: [
-              !isSearching && currentModelProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full xl:w-2/5", children: [
+              !isSearchingProvider && currentModelProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: currentModelProvider, size: 16 }),
                   (() => {
@@ -13683,15 +13677,15 @@ const AgentMetadataModelSwitcher = ({
                 {
                   spellCheck: "false",
                   ref: providerInputRef,
-                  className: `w-full ${!isSearching && currentModelProvider ? "pl-8 pr-8" : ""}`,
+                  className: `w-full ${!isSearchingProvider && currentModelProvider ? "pl-8 pr-8" : ""}`,
                   type: "text",
-                  value: isSearching ? providerSearch : providers.find((p) => p.id === cleanProviderId(currentModelProvider))?.name || currentModelProvider || "",
+                  value: isSearchingProvider ? providerSearch : providers.find((p) => p.id === cleanProviderId(currentModelProvider))?.name || currentModelProvider || "",
                   onKeyDown: (e) => {
                     const filteredProviders2 = providers.filter(
                       (provider) => provider.name.toLowerCase().includes(providerSearch.toLowerCase()) || provider.id.toLowerCase().includes(providerSearch.toLowerCase())
                     );
-                    if (!isSearching && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-                      setIsSearching(true);
+                    if (!isSearchingProvider && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                      setIsSearchingProvider(true);
                       setProviderSearch("");
                       setHighlightedProviderIndex(0);
                     } else if (showProviderSuggestions) {
@@ -13727,7 +13721,7 @@ const AgentMetadataModelSwitcher = ({
                               handleProviderSelect(provider);
                             } else {
                               setShowProviderSuggestions(false);
-                              setIsSearching(false);
+                              setIsSearchingProvider(false);
                               setProviderSearch("");
                               setHighlightedProviderIndex(-1);
                             }
@@ -13735,7 +13729,7 @@ const AgentMetadataModelSwitcher = ({
                           break;
                         case "Escape":
                           e.preventDefault();
-                          setIsSearching(false);
+                          setIsSearchingProvider(false);
                           setProviderSearch("");
                           setHighlightedProviderIndex(-1);
                           setShowProviderSuggestions(false);
@@ -13757,7 +13751,7 @@ const AgentMetadataModelSwitcher = ({
                     }
                   },
                   onChange: (e) => {
-                    setIsSearching(true);
+                    setIsSearchingProvider(true);
                     setProviderSearch(e.target.value);
                     setHighlightedProviderIndex(0);
                   },
@@ -13777,7 +13771,7 @@ const AgentMetadataModelSwitcher = ({
               PopoverContent,
               {
                 onOpenAutoFocus: (e) => e.preventDefault(),
-                className: "flex flex-col gap-1 w-[var(--radix-popover-trigger-width)] max-h-[300px] overflow-y-auto p-1",
+                className: "flex flex-col gap-0.5 w-[var(--radix-popover-trigger-width)] max-h-[300px] overflow-y-auto p-2",
                 children: filteredProviders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 p-2", children: "No providers found" }) : filteredProviders.map((provider, index) => {
                   const isSelected = provider.id === currentModelProvider;
                   const isHighlighted = index === highlightedProviderIndex;
@@ -13785,7 +13779,7 @@ const AgentMetadataModelSwitcher = ({
                     "div",
                     {
                       "data-provider-highlighted": isHighlighted,
-                      className: `flex items-center gap-2 cursor-pointer hover:bg-surface5 p-2 rounded ${isHighlighted ? "outline outline-2 outline-blue-500" : ""} ${isSelected ? "bg-surface5" : ""}`,
+                      className: `flex items-center gap-2 cursor-pointer hover:bg-surface5 px-3 py-4 rounded ${isHighlighted ? "outline outline-2 outline-blue-500" : ""} ${isSelected ? "bg-surface5" : ""}`,
                       onClick: () => handleProviderSelect(provider),
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -13798,10 +13792,7 @@ const AgentMetadataModelSwitcher = ({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: provider.name }),
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: provider.id })
-                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: provider.name }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           lucideReact.Info,
                           {
@@ -13830,7 +13821,7 @@ const AgentMetadataModelSwitcher = ({
             setShowModelSuggestions(open);
             if (!open) {
               setModelSearch("");
-              setIsSearching(false);
+              setIsSearchingModel(false);
             }
           },
           children: [
@@ -13839,13 +13830,13 @@ const AgentMetadataModelSwitcher = ({
               {
                 spellCheck: "false",
                 ref: modelInputRef,
-                className: "flex-1",
+                className: "w-full xl:w-3/5",
                 type: "text",
                 value: modelSearch || selectedModel,
                 onChange: (e) => {
                   setSelectedModel(e.target.value);
                   setModelSearch(e.target.value);
-                  setIsSearching(true);
+                  setIsSearchingModel(true);
                   setHighlightedModelIndex(0);
                 },
                 onClick: (e) => {
@@ -13894,7 +13885,7 @@ const AgentMetadataModelSwitcher = ({
                       if (highlightedModelIndex >= 0 && highlightedModelIndex < filteredModels.length) {
                         const model = filteredModels[highlightedModelIndex];
                         setModelSearch("");
-                        setIsSearching(false);
+                        setIsSearchingModel(false);
                         setShowModelSuggestions(false);
                         handleModelSelect(model.model);
                         setTimeout(() => {
@@ -13908,7 +13899,7 @@ const AgentMetadataModelSwitcher = ({
                         }, 100);
                       } else if (selectedModel && selectedModel.trim()) {
                         setModelSearch("");
-                        setIsSearching(false);
+                        setIsSearchingModel(false);
                         setShowModelSuggestions(false);
                         handleModelSelect(selectedModel.trim());
                         setTimeout(() => {
@@ -13937,7 +13928,7 @@ const AgentMetadataModelSwitcher = ({
             allModels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               PopoverContent,
               {
-                className: "flex flex-col gap-2 w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto",
+                className: "flex flex-col gap-0 w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto p-2",
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin mx-auto" }) }) : filteredModels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No models found" }) : filteredModels.map((model, index) => {
                   const isHighlighted = index === highlightedModelIndex;
@@ -13946,11 +13937,11 @@ const AgentMetadataModelSwitcher = ({
                     "div",
                     {
                       "data-model-highlighted": isHighlighted,
-                      className: `flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-surface5 rounded ${isHighlighted ? "outline outline-2 outline-blue-500" : ""} ${isSelected ? "bg-surface5" : ""}`,
+                      className: `flex items-center gap-2 px-4 py-3 cursor-pointer rounded hover:bg-surface5 ${isHighlighted ? "outline outline-2 outline-blue-500" : ""} ${isSelected ? "bg-surface5" : ""}`,
                       onMouseDown: (e) => {
                         e.preventDefault();
                         setModelSearch("");
-                        setIsSearching(false);
+                        setIsSearchingModel(false);
                         handleModelSelect(model.model);
                         modelInputRef.current?.blur();
                         setTimeout(() => {
@@ -13979,17 +13970,18 @@ const AgentMetadataModelSwitcher = ({
     (() => {
       const currentProvider = providers.find((p) => p.id === currentModelProvider);
       if (currentProvider && !currentProvider.connected) {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400 mt-0.5" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: "Provider not connected" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs mt-1", children: [
-              "Set the",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/50 rounded", children: currentProvider.envVar }),
-              " ",
-              "environment variable to use this provider."
-            ] })
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Provider not connected" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+            "Set the",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/50 rounded", children: Array.isArray(currentProvider.envVar) ? currentProvider.envVar.join(", ") : currentProvider.envVar }),
+            " ",
+            "environment",
+            " ",
+            Array.isArray(currentProvider.envVar) && currentProvider.envVar.length > 1 ? "variables" : "variable",
+            " ",
+            "to use this provider."
           ] })
         ] }) });
       }
@@ -14165,7 +14157,24 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/agent-memory",
           title: "Agent Memory documentation"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: hasMemoryEnabled ? "success" : "error", className: "font-medium", children: hasMemoryEnabled ? "On" : "Off" })
+        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Memory not enabled" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+            "Thread messages will not be stored. To activate memory, see the",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://mastra.ai/en/docs/agents/agent-memory",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline",
+                children: "documentation"
+              }
+            ),
+            "."
+          ] })
+        ] })
       }
     ),
     networkAgents.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -14270,7 +14279,7 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
       href,
       prefetch,
       to,
-      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
+      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer", className),
       children
     }
   );
@@ -14283,7 +14292,7 @@ const ThreadItem = ({ children, isActive }) => {
     "li",
     {
       className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
+        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
         isActive && "bg-surface4"
       ),
       children
@@ -14374,7 +14383,6 @@ const ChatThreads = ({ threads, isLoading, threadId, onDelete, resourceId, resou
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(ChatThreadSkeleton, {});
   }
-  const reverseThreads = [...threads].reverse();
   const newThreadLink = resourceType === "agent" ? paths.agentNewThreadLink(resourceId) : paths.networkNewThreadLink(resourceId);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
@@ -14382,8 +14390,8 @@ const ChatThreads = ({ threads, isLoading, threadId, onDelete, resourceId, resou
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
         "New Chat"
       ] }) }) }),
-      reverseThreads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5 max-w-[12rem]", children: "Your conversations will appear here once you start chatting!" }),
-      reverseThreads.map((thread) => {
+      threads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5 max-w-[12rem]", children: "Your conversations will appear here once you start chatting!" }),
+      threads.map((thread) => {
         const isActive = thread.id === threadId;
         const threadLink = resourceType === "agent" ? paths.agentThreadLink(resourceId, thread.id) : paths.networkThreadLink(resourceId, thread.id);
         return /* @__PURE__ */ jsxRuntime.jsxs(ThreadItem, { isActive, children: [
@@ -14440,7 +14448,7 @@ function ThreadTitle({ title }) {
   if (isDefaultThreadName(title)) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Chat from" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem]", children: title });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: title });
 }
 const formatDay = (date) => {
   const options = {
@@ -14454,1063 +14462,6 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
-const defaultModelSettings = {
-  maxRetries: 2,
-  maxSteps: 5,
-  temperature: 0.5,
-  topP: 1
-};
-const NetworkContext = React.createContext({});
-function NetworkProvider({ children }) {
-  const [modelSettings, setModelSettings] = React.useState(defaultModelSettings);
-  const [chatWithLoop, setChatWithLoop] = React.useState(false);
-  const [maxIterations, setMaxIterations] = React.useState(void 0);
-  const resetModelSettings = () => {
-    setModelSettings(defaultModelSettings);
-    setChatWithLoop(false);
-    setMaxIterations(void 0);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NetworkContext.Provider,
-    {
-      value: {
-        modelSettings,
-        setModelSettings,
-        resetModelSettings,
-        chatWithLoop,
-        setChatWithLoop,
-        maxIterations,
-        setMaxIterations
-      },
-      children
-    }
-  );
-}
-
-const VNextNetworkChatContext = React.createContext(void 0);
-const VNextNetworkChatProvider = ({ children }) => {
-  const [state, setState] = React.useState({});
-  const { chatWithLoop } = React.useContext(NetworkContext);
-  const handleStep = (uuid, record) => {
-    const addFinishStep = chatWithLoop && record.type === "step-finish" && record.payload?.id === "final-step" || record.type === "error";
-    let id = record?.type === "finish" ? "finish" : record.type === "start" ? "start" : record.payload?.id;
-    if (id?.includes("mapping_")) return;
-    setState((prevState) => {
-      const current = prevState[uuid];
-      if (record.type === "error") {
-        id = current?.executionSteps?.[current?.executionSteps.length - 1];
-      }
-      const currentMetadata = current?.steps?.[id]?.metadata;
-      let startTime = currentMetadata?.startTime;
-      let endTime = currentMetadata?.endTime;
-      if (record.type === "step-start") {
-        startTime = Date.now();
-      }
-      if (record.type === "step-finish" || record.type === "error") {
-        endTime = Date.now();
-      }
-      return {
-        ...prevState,
-        [uuid]: {
-          ...current,
-          runId: current?.runId || record?.payload?.runId,
-          executionSteps: current?.steps?.[id] ? [...current?.executionSteps, ...addFinishStep ? ["finish"] : []] : [...current?.executionSteps || [], id],
-          steps: {
-            ...current?.steps,
-            [id]: {
-              ...current?.steps?.[id] || {},
-              [record.type]: record.payload || record?.error,
-              metadata: {
-                startTime,
-                endTime
-              }
-            }
-          }
-        }
-      };
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(VNextNetworkChatContext.Provider, { value: { state, handleStep, setState }, children });
-};
-const useVNextNetworkChat = () => {
-  const context = React.useContext(VNextNetworkChatContext);
-  if (context === void 0) {
-    throw new Error("useVNextNetworkChat must be used within a VNextNetworkChatProvider");
-  }
-  return context;
-};
-
-const LabelMappings = {
-  "Agent-Network-Outer-Workflow.routing-step": "Decision making process",
-  "routing-step": "Decision making process",
-  "agent-step": "Agent execution",
-  "Agent-Network-Outer-Workflow.agent-step": "Agent execution",
-  "workflow-step": "Workflow execution",
-  "Agent-Network-Outer-Workflow.workflow-step": "Workflow execution",
-  toolStep: "Tool execution",
-  "Agent-Network-Outer-Workflow.toolStep": "Tool execution",
-  "final-step": "Task completed"
-};
-const StepDropdown = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const { state } = useVNextNetworkChat();
-  const message = react.useMessage();
-  const id = message?.metadata?.custom?.id;
-  if (!id) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Something is wrong" });
-  const currentState = state[id];
-  const latestStepId = currentState.executionSteps ? currentState.executionSteps?.[currentState.executionSteps.length - 1] : "";
-  const hasFinished = latestStepId === "finish";
-  const failed = Object.values(currentState?.steps || {}).some(
-    (step) => step?.["error"] || step?.["step-result"]?.status === "failed"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { onClick: () => setIsExpanded(!isExpanded), children: [
-      hasFinished ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: failed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }) }),
-        "Failed"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }) }),
-        "Done"
-      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) }),
-        "Thinking..."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "ml-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: clsx("transition-transform -rotate-90", isExpanded && "rotate-0") }) })
-    ] }),
-    isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(Steps, { id }) : null
-  ] });
-};
-const Steps = ({ id }) => {
-  const { state } = useVNextNetworkChat();
-  const currentState = state[id];
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps?.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsxRuntime.jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
-};
-const StepEntry = ({ stepId, step, runId }) => {
-  const [expanded, setExpanded] = React.useState(false);
-  let stepResult = step["step-result"];
-  const stepError = step["error"];
-  if (stepId === "workflow-step" || stepId === "Agent-Network-Outer-Workflow.workflow-step") {
-    const parsedResult = JSON.parse(stepResult?.output?.result ?? "{}") ?? {};
-    if (!parsedResult?.runResult && stepResult?.status === "success") {
-      stepResult = {
-        ...stepResult,
-        status: "failed",
-        error: "Something went wrong"
-      };
-    }
-  }
-  if (stepError) {
-    stepResult = {
-      ...stepResult,
-      status: "failed",
-      error: stepError?.data?.error?.message
-    };
-  }
-  if (stepId === "finish") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: "Process completed" }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between w-full text-left",
-        onClick: () => setExpanded((s) => !s),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status: stepResult ? stepResult?.status : "loading" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: LabelMappings[stepId] || stepId })
-          ] }),
-          step.metadata?.startTime && /* @__PURE__ */ jsxRuntime.jsx(StepClock, { step })
-        ]
-      }
-    ),
-    (stepId === "routing-step" || stepId === "Agent-Network-Outer-Workflow.routing-step") && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Selection reason:" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.selectionReason || "N/A" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Resource ID" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.resourceId || "N/A" })
-      ] }),
-      stepResult?.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.error || "N/A" })
-      ] }) : null
-    ] }),
-    (stepId === "agent-step" || stepId === "Agent-Network-Outer-Workflow.agent-step") && (stepError || stepResult?.error) && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepError?.message || stepError?.data?.error?.message || stepResult?.error || "N/A" })
-    ] }) }),
-    (stepId === "toolStep" || stepId === "Agent-Network-Outer-Workflow.toolStep") && (stepError || stepResult?.error) && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepError?.message || stepError?.data?.error?.message || stepResult?.error || "N/A" })
-    ] }) }),
-    stepId === "final-step" && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Task:" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.task || "N/A" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Number of iterations:" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.iteration || "N/A" })
-      ] })
-    ] }),
-    (stepId === "workflow-step" || stepId === "Agent-Network-Outer-Workflow.workflow-step") && stepResult?.output?.resourceId ? /* @__PURE__ */ jsxRuntime.jsx(
-      WorkflowStepResultDialog,
-      {
-        open: expanded,
-        onOpenChange: setExpanded,
-        workflowId: stepResult?.output?.resourceId,
-        runId
-      }
-    ) : null
-  ] });
-};
-const WorkflowStepResultDialog = ({ open, onOpenChange, workflowId, runId }) => {
-  const { data: runs } = useWorkflowRuns(workflowId);
-  const { data: workflow, isLoading } = useWorkflow(workflowId);
-  const run = runs?.runs.find((run2) => run2.runId === runId);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "h-[90vh] w-[90%] max-w-[unset]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Workflow details" }),
-    /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { snapshot: typeof run?.snapshot === "object" ? run.snapshot : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraph, { workflowId, workflow, isLoading }) })
-  ] }) }) }) });
-};
-const StatusIcon = ({ status }) => {
-  if (status === "failed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }) });
-  }
-  if (status === "success") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) });
-};
-const StepClock = ({ step }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { children: /* @__PURE__ */ jsxRuntime.jsx(Clock, { startedAt: step.metadata.startTime, endedAt: step.metadata?.endTime }) });
-};
-
-const NextAssistantMessage = ({
-  ToolFallback: ToolFallbackCustom
-}) => {
-  const data = react.useMessage();
-  const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
-  const content = data.content[0];
-  if (!content) {
-    return null;
-  }
-  const textContent = content.text;
-  if (textContent === "start") {
-    return /* @__PURE__ */ jsxRuntime.jsx(StepDropdown, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.MessagePrimitive.Parts,
-      {
-        components: {
-          Text: MarkdownText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar, {}) })
-  ] });
-};
-const AssistantActionBar = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.ActionBarPrimitive.Root,
-    {
-      hideWhenRunning: true,
-      autohide: "always",
-      autohideFloat: "single-branch",
-      className: "flex gap-1 items-center transition-all",
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
-      ] }) })
-    }
-  );
-};
-
-const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
-  const areaRef = React.useRef(null);
-  useAutoscroll(areaRef, { enabled: true });
-  const WrappedAssistantMessage = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(NextAssistantMessage, { ...props, ToolFallback });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { networkName }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.ThreadPrimitive.Messages,
-          {
-            components: {
-              UserMessage,
-              EditComposer,
-              AssistantMessage: WrappedAssistantMessage
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory })
-  ] });
-};
-const ThreadWrapper = ({ children }) => {
-  const hasAttachments = useHasAttachments();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.ThreadPrimitive.Root,
-    {
-      className: clsx(
-        "max-w-[568px] w-full mx-auto px-4",
-        hasAttachments ? "h-[calc(100%-208px)]" : "h-[calc(100%-112px)]"
-      ),
-      children
-    }
-  );
-};
-const ThreadWelcome = ({ networkName }) => {
-  const safeNetworkName = networkName ?? "";
-  const words = safeNetworkName.split(" ") ?? [];
-  let initials = "A";
-  if (words.length === 2) {
-    initials = `${words[0][0]}${words[1][0]}`;
-  } else if (safeNetworkName.length > 0) {
-    initials = `${safeNetworkName[0]}`;
-  } else {
-    initials = "A";
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
-  ] }) });
-};
-const Composer = ({ hasMemory }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent resize-none",
-            autoFocus: true,
-            placeholder: "Enter your message...",
-            name: "",
-            id: ""
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SpeechInput, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, {})
-        ] })
-      ] })
-    ] }),
-    !hasMemory && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {}) }),
-      "Memory is not enabled. The conversation will not be persisted."
-    ] })
-  ] });
-};
-const SpeechInput = () => {
-  const composerRuntime = react.useComposerRuntime();
-  const { start, stop, isListening, transcript } = useSpeechRecognition({});
-  React.useEffect(() => {
-    if (!transcript) return;
-    composerRuntime.setText(transcript);
-  }, [composerRuntime, transcript]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TooltipIconButton,
-    {
-      type: "button",
-      tooltip: isListening ? "Stop dictation" : "Start dictation",
-      variant: "ghost",
-      className: "rounded-full",
-      onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
-    }
-  );
-};
-const ComposerAction = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      TooltipIconButton,
-      {
-        tooltip: "Send",
-        variant: "default",
-        className: "rounded-full border-sm border-[#363636] bg-[#292929]",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
-  ] });
-};
-const EditComposer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
-    ] })
-  ] });
-};
-const CircleStopIcon = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
-};
-
-const MessagesContext = React.createContext({
-  messages: [],
-  setMessages: () => {
-  },
-  appendToLastMessage: () => {
-  }
-});
-const MessagesProvider = ({ children }) => {
-  const [messages, setMessages] = React.useState([]);
-  const appendToLastMessage = (partial) => setMessages((msgs) => {
-    const lastMsg = msgs[msgs.length - 1];
-    const content = typeof lastMsg.content === "string" ? lastMsg.content : (lastMsg.content?.[0]).text;
-    return [
-      ...msgs.slice(0, -1),
-      {
-        ...lastMsg,
-        content: [{ type: "text", text: content + partial }]
-      }
-    ];
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(MessagesContext.Provider, { value: { messages, setMessages, appendToLastMessage }, children });
-};
-const useMessages = () => React.useContext(MessagesContext);
-
-const convertMessage = (message) => {
-  return message;
-};
-function VNextMastraNetworkRuntimeProvider({
-  children,
-  networkId,
-  memory,
-  threadId,
-  refreshThreadList,
-  initialMessages,
-  runtimeContext: runtimeContext$1
-}) {
-  const runIdRef = React.useRef(void 0);
-  const [isRunning, setIsRunning] = React.useState(false);
-  const { messages, setMessages, appendToLastMessage } = useMessages();
-  const [currentThreadId, setCurrentThreadId] = React.useState(threadId);
-  const { handleStep, state, setState } = useVNextNetworkChat();
-  const { chatWithLoop, maxIterations } = React.useContext(NetworkContext);
-  const id = runIdRef.current;
-  const currentState = id ? state[id] : void 0;
-  const runtimeContextInstance = new runtimeContext.RuntimeContext();
-  Object.entries(runtimeContext$1 ?? {}).forEach(([key, value]) => {
-    runtimeContextInstance.set(key, value);
-  });
-  React.useEffect(() => {
-    if (!currentState) return;
-    const hasFinished = Boolean(currentState?.steps?.["finish"]);
-    if (!hasFinished) return;
-    const workflowStep = currentState?.steps?.["workflow-step"];
-    const toolStep = currentState?.steps?.["toolStep"];
-    if (!workflowStep && !toolStep) return;
-    const workflowStepResult = workflowStep?.["step-result"];
-    const toolStepResult = toolStep?.["step-result"];
-    if (!workflowStepResult && !toolStepResult) return;
-    const workflowStepResultOutput = workflowStepResult?.output;
-    const toolStepResultOutput = toolStepResult?.output;
-    if (!workflowStepResultOutput && !toolStepResultOutput) return;
-    const run = async () => {
-      const parsedResult = workflowStepResult ? JSON.parse(workflowStepResult?.output?.result ?? "{}") ?? {} : { runResult: toolStepResultOutput?.result ?? {} };
-      if (parsedResult?.runResult) {
-        const runResult = parsedResult?.runResult ?? {};
-        const formatted = await formatJSON(JSON.stringify(runResult));
-        setMessages((msgs) => [
-          ...msgs,
-          { role: "assistant", content: [{ type: "text", text: `\`\`\`json
-${formatted}\`\`\`` }] }
-        ]);
-      }
-    };
-    run();
-  }, [currentState]);
-  React.useEffect(() => {
-    if (messages.length === 0 || currentThreadId !== threadId) {
-      const run = async (result, messageId) => {
-        const formatted = await formatJSON(result);
-        const finalResponse = `\`\`\`json
-${formatted}\`\`\``;
-        setMessages((currentConversation) => {
-          return currentConversation.map((message) => {
-            if (message.metadata?.custom?.id === messageId) {
-              return { ...message, content: [{ type: "text", text: finalResponse }] };
-            }
-            return message;
-          });
-        });
-      };
-      if (initialMessages && threadId && memory) {
-        let userMessage = "";
-        let iteration = 1;
-        const formattedMessages = [];
-        let assistantStep = freshAssistantStep();
-        for (let i = 0; i < initialMessages.length; i++) {
-          const message = initialMessages[i];
-          if (message.role === "user") {
-            assistantStep = freshAssistantStep();
-            userMessage = message.content;
-            formattedMessages.push({
-              role: "user",
-              message
-            });
-            continue;
-          }
-          if (message.role === "assistant") {
-            const responseArray = message.parts ?? [];
-            let hasRoutingDecision = false;
-            let hasTaskCompleteDecision = false;
-            let directText = "";
-            let jsonStringResponse = "";
-            for (const part of responseArray) {
-              if (part.type === "text" && part.text) {
-                const parsed = safeParse(part.text);
-                if (parsed?.resourceId && parsed?.resourceType) {
-                  hasRoutingDecision = true;
-                  assistantStep.routingDecision = parsed;
-                }
-                if (typeof parsed?.isComplete === "boolean") {
-                  hasTaskCompleteDecision = true;
-                  assistantStep.taskCompleteDecision = parsed;
-                  if (parsed?.isComplete) {
-                    assistantStep.finalResponse = parsed.finalResult;
-                    formattedMessages.push({ role: "assistant", message: assistantStep });
-                    assistantStep = freshAssistantStep();
-                  }
-                }
-                if (!parsed || !parsed.resourceId && !parsed.runResult && typeof parsed.isComplete !== "boolean") {
-                  directText = part.text;
-                }
-                if (parsed && !parsed.resourceId && typeof parsed.isComplete !== "boolean") {
-                  jsonStringResponse = part.text;
-                }
-              }
-            }
-            if (!hasRoutingDecision && !hasTaskCompleteDecision) {
-              assistantStep.finalResponse = directText || jsonStringResponse;
-              if (assistantStep.routingDecision || assistantStep.finalResponse) {
-                formattedMessages.push({ role: "assistant", message: assistantStep });
-                assistantStep = freshAssistantStep();
-              }
-            }
-          }
-          if (i === initialMessages.length - 1 && (assistantStep.routingDecision || assistantStep.finalResponse)) {
-            formattedMessages.push({ role: "assistant", message: assistantStep });
-          }
-        }
-        for (const formattedMessage of formattedMessages) {
-          const { role, message } = formattedMessage;
-          if (role === "user") {
-            iteration = 1;
-            userMessage = message.content;
-            setMessages((currentConversation) => {
-              if (currentConversation.some((m) => m.id === message.id)) {
-                return currentConversation;
-              }
-              return [...currentConversation, message];
-            });
-          }
-          if (role === "assistant") {
-            const { id: id2, formattedMessageId, finalStepId, routingDecision, finalResponse, taskCompleteDecision } = message;
-            let resourceStepId = "";
-            if (routingDecision?.resourceType === "agent") resourceStepId = "agent-step";
-            if (routingDecision?.resourceType === "tool") resourceStepId = "toolStep";
-            if (routingDecision?.resourceType === "workflow") resourceStepId = "workflow-step";
-            let runId = "";
-            let runResult = {};
-            let finalStep = null;
-            let finalResult = "";
-            if (resourceStepId === "workflow-step" || resourceStepId === "toolStep") {
-              const parsedResult = JSON.parse(finalResponse ?? "{}") ?? {};
-              runResult = resourceStepId === "workflow-step" ? parsedResult?.runResult ?? {} : parsedResult ?? {};
-              runId = parsedResult?.runId ?? "";
-            }
-            if (taskCompleteDecision?.isComplete) {
-              finalStep = {
-                executionSteps: ["start", "routing-step", "final-step", "finish"],
-                runId: "",
-                steps: {
-                  start: {},
-                  "routing-step": {
-                    "step-result": {
-                      output: {
-                        selectionReason: taskCompleteDecision?.completionReason ?? ""
-                      },
-                      status: "success"
-                    }
-                  },
-                  "final-step": {
-                    "step-result": {
-                      output: {
-                        iteration,
-                        task: userMessage
-                      },
-                      status: "success"
-                    }
-                  },
-                  finish: {}
-                }
-              };
-              finalResult = taskCompleteDecision?.finalResult;
-            }
-            const routingStepFailed = resourceStepId === "workflow-step" || resourceStepId === "toolStep" ? Object.keys(runResult).length === 0 : !finalResponse;
-            setState((currentState2) => {
-              return {
-                ...currentState2,
-                ...finalStep ? { [finalStepId]: finalStep } : {
-                  [id2]: {
-                    executionSteps: ["start", "routing-step", resourceStepId, "finish"],
-                    runId,
-                    steps: {
-                      start: {},
-                      "routing-step": {
-                        "step-result": {
-                          output: routingDecision,
-                          status: routingDecision ? "success" : "failed",
-                          ...routingDecision ? {} : { error: "Something went wrong" }
-                        }
-                      },
-                      [resourceStepId]: {
-                        "step-result": {
-                          output: {
-                            resourceId: routingDecision?.resourceId,
-                            result: finalResponse ?? ""
-                          },
-                          status: routingStepFailed ? "failed" : "success",
-                          ...routingStepFailed ? { error: "Something went wrong" } : {}
-                        }
-                      },
-                      finish: {}
-                    }
-                  }
-                }
-              };
-            });
-            setMessages((currentConversation) => {
-              const assistantRoutingMessageExist = currentConversation.some(
-                (message2) => message2.metadata?.custom?.id === id2
-              );
-              const assistantResponseMessageExist = currentConversation.some(
-                (message2) => message2.metadata?.custom?.id === formattedMessageId
-              );
-              return [
-                ...currentConversation,
-                ...finalResult ? [
-                  {
-                    role: "assistant",
-                    metadata: {
-                      custom: {
-                        id: finalStepId
-                      }
-                    },
-                    content: [
-                      {
-                        type: "text",
-                        text: "start"
-                      }
-                    ]
-                  },
-                  {
-                    role: "assistant",
-                    content: [{ type: "text", text: finalResult }]
-                  }
-                ] : [
-                  ...assistantRoutingMessageExist ? [] : [
-                    {
-                      role: "assistant",
-                      metadata: {
-                        custom: {
-                          id: id2
-                        }
-                      },
-                      content: [
-                        {
-                          type: "text",
-                          text: "start"
-                        }
-                      ]
-                    }
-                  ],
-                  ...assistantResponseMessageExist ? [] : [
-                    {
-                      role: "assistant",
-                      content: [
-                        {
-                          type: "text",
-                          text: resourceStepId === "workflow-step" || resourceStepId === "toolStep" ? "" : finalResponse
-                        }
-                      ],
-                      metadata: {
-                        custom: {
-                          id: formattedMessageId
-                        }
-                      }
-                    }
-                  ]
-                ]
-              ];
-            });
-            if ((resourceStepId === "workflow-step" || resourceStepId === "toolStep") && !routingStepFailed) {
-              run(JSON.stringify(runResult), formattedMessageId);
-            }
-            iteration++;
-          }
-        }
-        setCurrentThreadId(threadId);
-      }
-    }
-  }, [initialMessages, threadId, memory, messages]);
-  const mastra = react$3.useMastraClient();
-  const network = mastra.getVNextNetwork(networkId);
-  const onNew = async (message) => {
-    runIdRef.current = void 0;
-    if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
-    const input = message.content[0].text;
-    setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
-    setIsRunning(true);
-    try {
-      if (chatWithLoop) {
-        const run = async (result, messageId) => {
-          const formatted = await formatJSON(result);
-          const finalResponse = `\`\`\`json
-${formatted}\`\`\``;
-          setMessages((currentConversation) => {
-            return currentConversation.map((message2) => {
-              if (message2.metadata?.custom?.id === messageId) {
-                return { ...message2, content: [{ type: "text", text: finalResponse }] };
-              }
-              return message2;
-            });
-          });
-        };
-        let isAgentNetworkOuterWorkflowCompleted = false;
-        await network.loopStream(
-          {
-            message: input,
-            threadId,
-            resourceId: networkId,
-            maxIterations,
-            runtimeContext: runtimeContextInstance
-          },
-          async (record) => {
-            if (record.type === "step-start" && record.payload?.id === "Agent-Network-Outer-Workflow") {
-              const id2 = uuid.v4();
-              runIdRef.current = id2;
-              setMessages((currentConversation) => {
-                return [
-                  ...currentConversation,
-                  {
-                    role: "assistant",
-                    metadata: {
-                      custom: {
-                        id: id2
-                      }
-                    },
-                    content: [
-                      {
-                        type: "text",
-                        text: "start"
-                      }
-                    ]
-                  }
-                ];
-              });
-            } else if (runIdRef.current) {
-              if (record.type === "tool-call-delta") {
-                appendToLastMessage(record.argsTextDelta);
-              } else if (record.type === "tool-call-streaming-start") {
-                setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
-                setTimeout(() => {
-                  refreshThreadList?.();
-                }, 500);
-                return;
-              } else {
-                if (record.type === "step-finish" && record.payload?.id === "Agent-Network-Outer-Workflow") {
-                  if (!isAgentNetworkOuterWorkflowCompleted) {
-                    handleStep(runIdRef.current, { ...record, type: "finish" });
-                    runIdRef.current = void 0;
-                  }
-                } else if (record.type === "step-result" && (record.payload?.id === "Agent-Network-Outer-Workflow.workflow-step" || record.payload?.id === "Agent-Network-Outer-Workflow.toolStep")) {
-                  handleStep(runIdRef.current, record);
-                  const result = record?.payload?.output?.result;
-                  const parsedResult = typeof result === "string" ? JSON.parse(record?.payload?.output?.result ?? "{}") ?? {} : { runResult: result };
-                  const runResult = parsedResult?.runResult ?? {};
-                  const formatedOutputId = uuid.v4();
-                  setMessages((msgs) => [
-                    ...msgs,
-                    {
-                      role: "assistant",
-                      content: [
-                        {
-                          type: "text",
-                          text: ""
-                        }
-                      ],
-                      metadata: {
-                        custom: {
-                          id: formatedOutputId
-                        }
-                      }
-                    }
-                  ]);
-                  run(JSON.stringify(runResult), formatedOutputId);
-                } else if (record.payload?.id === "Agent-Network-Outer-Workflow" || record.payload?.id === "finish-step") {
-                  if (record.type === "step-result" && record.payload?.id === "Agent-Network-Outer-Workflow") {
-                    isAgentNetworkOuterWorkflowCompleted = record?.payload?.output?.isComplete;
-                  }
-                } else {
-                  handleStep(runIdRef.current, record);
-                }
-              }
-            }
-            if (record.type === "step-result" && record.payload?.id === "final-step") {
-              setMessages((msgs) => [
-                ...msgs,
-                { role: "assistant", content: [{ type: "text", text: record.payload?.output?.result }] }
-              ]);
-            }
-            if (record.type === "step-finish" && record.payload?.id === "final-step") {
-              runIdRef.current = void 0;
-            }
-            if (record.type === "start" || record.type === "step-start" || record.type === "finish") {
-              setTimeout(() => {
-                refreshThreadList?.();
-              }, 500);
-            }
-          }
-        );
-      } else {
-        await network.stream(
-          {
-            message: input,
-            threadId,
-            resourceId: networkId,
-            runtimeContext: runtimeContextInstance
-          },
-          (record) => {
-            if (runIdRef.current) {
-              if (record.type === "tool-call-delta") {
-                appendToLastMessage(record.argsTextDelta);
-              } else if (record.type === "tool-call-streaming-start") {
-                setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
-                return;
-              } else {
-                handleStep(runIdRef.current, record);
-              }
-            } else if (record.type === "start") {
-              const id2 = uuid.v4();
-              runIdRef.current = id2;
-              setMessages((currentConversation) => {
-                return [
-                  ...currentConversation,
-                  {
-                    role: "assistant",
-                    metadata: {
-                      custom: {
-                        id: id2
-                      }
-                    },
-                    content: [
-                      {
-                        type: "text",
-                        text: "start"
-                      }
-                    ]
-                  }
-                ];
-              });
-            }
-            if (record.type === "start" || record.type === "step-start" || record.type === "finish") {
-              setTimeout(() => {
-                refreshThreadList?.();
-              }, 500);
-            }
-          }
-        );
-      }
-      setIsRunning(false);
-    } catch (error) {
-      console.error("Error occurred in VNextMastraNetworkRuntimeProvider", error);
-      setIsRunning(false);
-    }
-  };
-  const runtime = react.useExternalStoreRuntime({
-    isRunning,
-    messages,
-    convertMessage,
-    onNew
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
-    " ",
-    children,
-    " "
-  ] });
-  function safeParse(str) {
-    try {
-      return JSON.parse(str);
-    } catch {
-      return void 0;
-    }
-  }
-  function freshAssistantStep() {
-    return {
-      id: uuid.v4(),
-      formattedMessageId: uuid.v4(),
-      finalStepId: uuid.v4(),
-      finalResponse: ""
-    };
-  }
-}
-
-const VNextNetworkChat = ({
-  networkId,
-  networkName,
-  threadId,
-  initialMessages,
-  memory,
-  refreshThreadList
-}) => {
-  const { runtimeContext } = usePlaygroundStore();
-  return /* @__PURE__ */ jsxRuntime.jsx(MessagesProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VNextNetworkChatProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    VNextMastraNetworkRuntimeProvider,
-    {
-      networkId,
-      initialMessages: initialMessages ?? [],
-      threadId,
-      memory,
-      refreshThreadList,
-      runtimeContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(NetworkThread, { hasMemory: memory, networkName }) })
-    },
-    threadId
-  ) }, threadId) }, threadId);
-};
-
-const columns = [
-  {
-    id: "name",
-    header: "Name",
-    cell: ({ row }) => {
-      const { Link } = useLinkComponent();
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        EntryCell,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
-          name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: `/networks/v-next/${row.original.id}/chat`, children: row.original.name }),
-          description: row.original.instructions
-        }
-      );
-    },
-    meta: {
-      width: "auto"
-    }
-  },
-  {
-    id: "agents",
-    header: "Agents",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, {}), children: row.original.agentsSize }) })
-  },
-  {
-    id: "workflows",
-    header: "Workflows",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}), children: row.original.workflowsSize }) })
-  },
-  {
-    id: "tools",
-    header: "Tools",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}), children: row.original.toolsSize }) })
-  },
-  {
-    id: "model",
-    header: "Routing Models",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "truncate", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brain, {}), children: row.original.routingModel }) })
-  }
-];
-
-const NetworkTable = ({ networks, isLoading }) => {
-  const { navigate, paths } = useLinkComponent();
-  const allNetworks = React.useMemo(
-    () => [
-      ...networks?.map((network) => ({
-        ...network,
-        routingModel: network.routingModel.modelId,
-        agentsSize: network.agents.length,
-        workflowsSize: network.workflows.length,
-        toolsSize: network.tools.length
-      })) ?? []
-    ],
-    [networks]
-  );
-  const table = reactTable.useReactTable({
-    data: allNetworks,
-    columns,
-    getCoreRowModel: reactTable.getCoreRowModel()
-  });
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(NetworkTableSkeleton, {});
-  const ths = table.getHeaderGroups()[0];
-  const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NetworkTableEmpty, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(paths.networkLink(row.original.id)), className: "cursor-pointer", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) });
-};
-const NetworkTableEmpty = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EmptyState,
-    {
-      iconSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentNetworkCoinIcon, {}),
-      titleSlot: "Configure Agent Networks",
-      descriptionSlot: "Mastra agent networks are not configured yet. You can find more information in the documentation.",
-      actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
-        Button$1,
-        {
-          size: "lg",
-          className: "w-full",
-          variant: "light",
-          as: "a",
-          href: "https://mastra.ai/en/reference/networks/agent-network",
-          target: "_blank",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}) }),
-            "Docs"
-          ]
-        }
-      )
-    }
-  );
-};
-const NetworkTableSkeleton = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Agents" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Workflows" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Tools" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Routing Models" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
-    ] }, index)) })
-  ] });
-};
-
 const themeClasses = {
   light: "bg-gray-100 border-gray-300 text-gray-700",
   dark: "bg-surface4 border-border1 text-icon6"
@@ -18858,7 +17809,10 @@ exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentsTable = AgentsTable;
 exports.AgentsTableSkeleton = AgentsTableSkeleton;
 exports.AiIcon = AiIcon;
+exports.Alert = Alert;
+exports.AlertDescription = AlertDescription;
 exports.AlertDialog = AlertDialog;
+exports.AlertTitle = AlertTitle;
 exports.ApiIcon = ApiIcon;
 exports.Badge = Badge$1;
 exports.BranchIcon = BranchIcon;
@@ -18934,11 +17888,6 @@ exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
 exports.MemorySearch = MemorySearch;
 exports.ModelResetProvider = ModelResetProvider;
-exports.NetworkContext = NetworkContext;
-exports.NetworkProvider = NetworkProvider;
-exports.NetworkTable = NetworkTable;
-exports.NetworkTableEmpty = NetworkTableEmpty;
-exports.NetworkTableSkeleton = NetworkTableSkeleton;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PageHeader = PageHeader;
 exports.PlaygroundQueryClient = PlaygroundQueryClient;
@@ -19012,7 +17961,6 @@ exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;
 exports.UnitCell = UnitCell;
-exports.VNextNetworkChat = VNextNetworkChat;
 exports.VariablesIcon = VariablesIcon;
 exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkflowGraph = WorkflowGraph;