@mastra/playground-ui 5.1.12 → 5.1.13-alpha.1

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Braces, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, Braces, SaveIcon, RefreshCw, ExternalLink, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -20,7 +20,7 @@ import CodeMirror from '@uiw/react-codemirror';
 import { toast } from 'sonner';
 import { useShallow } from 'zustand/shallow';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { RuntimeContext } from '@mastra/core/di';
+import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/di';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
@@ -31,6 +31,10 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import prettier from 'prettier';
+import prettierPluginBabel from 'prettier/plugins/babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, MiniMap, Background, BackgroundVariant, ReactFlowProvider, Controls } from '@xyflow/react';
@@ -38,11 +42,9 @@ import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import prettier from 'prettier';
-import prettierPluginBabel from 'prettier/plugins/babel';
-import prettierPluginEstree from 'prettier/plugins/estree';
 import { useDebouncedCallback } from 'use-debounce';
 import { v4 } from '@lukeed/uuid';
+import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/runtime-context';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$1, { z, ZodObject } from 'zod';
@@ -53,7 +55,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
-import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 import './index.css';const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new MastraClient({
@@ -4334,7 +4335,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
     /* @__PURE__ */ jsxs("button", { onClick: () => setIsCollapsed((s) => !s), className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
       /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: toolName })
@@ -4352,20 +4353,35 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   ] });
 };
 
+const Reasoning = ({ text }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2 space-y-2", children: [
+    /* @__PURE__ */ jsxs("button", { onClick: () => setIsCollapsed((s) => !s), className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
+      /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(BrainIcon, {}), children: [
+        isCollapsed ? "Show" : "Hide",
+        " reasoning"
+      ] })
+    ] }),
+    !isCollapsed ? /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-surface4 p-2 border-sm border-border-1", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap text-ui-sm leading-ui-sm text-icon6", children: text }) }) : null
+  ] });
+};
+
 const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = useMessage();
-  const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
+  const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", children: [
     /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
         components: {
           Text: MarkdownText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 }
+          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 },
+          Reasoning
         }
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsx(AssistantActionBar$1, {}) })
+    !isToolCallAndOrReasoning && /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: /* @__PURE__ */ jsx(AssistantActionBar$1, {}) })
   ] });
 };
 const AssistantActionBar$1 = () => {
@@ -4932,6 +4948,108 @@ const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
+function parseJsonString(jsonString) {
+  try {
+    return JSON.stringify(JSON.parse(jsonString), null, 2);
+  } catch {
+    return jsonString;
+  }
+}
+function useAgentWorkingMemory(agentId, threadId, resourceId) {
+  const client = useMastraClient();
+  const [threadExists, setThreadExists] = useState(false);
+  const [workingMemoryData, setWorkingMemoryData] = useState(null);
+  const [workingMemorySource, setWorkingMemorySource] = useState("thread");
+  const [workingMemoryFormat, setWorkingMemoryFormat] = useState("markdown");
+  const [isLoading, setIsLoading] = useState(true);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const refetch = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      if (!agentId || !threadId) {
+        setWorkingMemoryData(null);
+        setIsLoading(false);
+        return;
+      }
+      const res = await client.getWorkingMemory({ agentId, threadId, resourceId });
+      const { workingMemory, source, workingMemoryTemplate, threadExists: threadExists2 } = res;
+      setThreadExists(threadExists2);
+      setWorkingMemoryData(workingMemory);
+      setWorkingMemorySource(source);
+      setWorkingMemoryFormat(workingMemoryTemplate?.format || "markdown");
+      if (workingMemoryTemplate?.format === "json") {
+        let dataToSet = "";
+        if (workingMemory) {
+          dataToSet = parseJsonString(workingMemory);
+        } else if (workingMemoryTemplate?.content) {
+          dataToSet = parseJsonString(workingMemoryTemplate.content);
+        } else {
+          dataToSet = "";
+        }
+        setWorkingMemoryData(dataToSet);
+      } else {
+        setWorkingMemoryData(workingMemory || workingMemoryTemplate?.content || "");
+      }
+    } catch (error) {
+      setWorkingMemoryData(null);
+      console.error("Error fetching working memory", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [agentId, threadId, resourceId]);
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+  const updateWorkingMemory = async (newMemory) => {
+    setIsUpdating(true);
+    try {
+      if (workingMemoryFormat === "json") {
+        try {
+          JSON.parse(newMemory);
+        } catch (e) {
+          throw new Error("Invalid JSON working memory");
+        }
+      }
+      await client.updateWorkingMemory({ agentId, threadId, workingMemory: newMemory, resourceId });
+      refetch();
+    } catch (error) {
+      console.error("Error updating working memory", error);
+      throw error;
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  return {
+    threadExists,
+    workingMemoryData,
+    workingMemorySource,
+    workingMemoryFormat,
+    isLoading,
+    isUpdating,
+    refetch,
+    updateWorkingMemory
+  };
+}
+
+const WorkingMemoryContext = createContext({
+  threadExists: false,
+  workingMemoryData: null,
+  workingMemorySource: "thread",
+  isLoading: false,
+  isUpdating: false,
+  updateWorkingMemory: () => Promise.resolve(),
+  refetch: () => Promise.resolve()
+});
+function WorkingMemoryProvider({ agentId, threadId, resourceId, children }) {
+  const value = useAgentWorkingMemory(agentId, threadId, resourceId);
+  return /* @__PURE__ */ jsx(WorkingMemoryContext.Provider, { value, children });
+}
+function useWorkingMemory() {
+  const ctx = useContext(WorkingMemoryContext);
+  if (!ctx) throw new Error("useWorkingMemory must be used within a WorkingMemoryProvider");
+  return ctx;
+}
+
 class PDFAttachmentAdapter {
   accept = "application/pdf";
   async add({ file }) {
@@ -5043,6 +5161,7 @@ function MastraRuntimeProvider({
   const [isRunning, setIsRunning] = useState(false);
   const [messages, setMessages] = useState([]);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const {
     frequencyPenalty,
     presencePenalty,
@@ -5053,9 +5172,11 @@ function MastraRuntimeProvider({
     topK,
     topP,
     instructions,
-    chatWithGenerate
+    chatWithGenerate,
+    providerOptions
   } = settings?.modelSettings ?? {};
-  const runtimeContextInstance = new RuntimeContext();
+  const toolCallIdToName = useRef({});
+  const runtimeContextInstance = new RuntimeContext$1();
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
@@ -5076,9 +5197,11 @@ function MastraRuntimeProvider({
             mimeType: image.contentType,
             image: image.url
           }));
+          const reasoning = message?.parts?.find(({ type }) => type === "reasoning")?.details?.map((detail) => detail?.text)?.join(" ");
           return {
             ...message,
             content: [
+              ...reasoning ? [{ type: "reasoning", text: reasoning }] : [],
               ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
               ...toolInvocationsAsContentParts,
               ...attachmentsAsContentParts
@@ -5122,7 +5245,8 @@ function MastraRuntimeProvider({
           topP,
           instructions,
           runtimeContext: runtimeContextInstance,
-          ...memory ? { threadId, resourceId: agentId } : {}
+          ...memory ? { threadId, resourceId: agentId } : {},
+          providerOptions
         });
         if (generateResponse.response) {
           const latestMessage = generateResponse.response.messages.reduce(
@@ -5133,6 +5257,7 @@ function MastraRuntimeProvider({
                   ...acc,
                   content: [
                     ..._content,
+                    ...generateResponse.reasoning ? [{ type: "reasoning", text: generateResponse.reasoning }] : [],
                     {
                       type: "text",
                       text: message2.content
@@ -5142,6 +5267,7 @@ function MastraRuntimeProvider({
               }
               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 = _content.map((c) => {
                     if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
@@ -5152,14 +5278,14 @@ function MastraRuntimeProvider({
                   const containsToolCall = newContent.some((c) => c.type === "tool-call");
                   return {
                     ...acc,
-                    content: containsToolCall ? newContent : [..._content, toolCallContent]
+                    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, textContent]
+                    content: [..._content, ...reasoningContent ? [reasoningContent] : [], textContent]
                   };
                 }
               }
@@ -5233,7 +5359,8 @@ function MastraRuntimeProvider({
           topP,
           instructions,
           runtimeContext: runtimeContextInstance,
-          ...memory ? { threadId, resourceId: agentId } : {}
+          ...memory ? { threadId, resourceId: agentId } : {},
+          providerOptions
         });
         if (!response.body) {
           throw new Error("No response body");
@@ -5296,6 +5423,7 @@ function MastraRuntimeProvider({
               assistantToolCallAddedForContent = true;
               return [...currentConversation, newMessage];
             });
+            toolCallIdToName.current[value.toolCallId] = value.toolName;
           },
           async onToolResultPart(value) {
             setMessages((currentConversation) => {
@@ -5318,12 +5446,52 @@ function MastraRuntimeProvider({
               }
               return currentConversation;
             });
+            try {
+              const toolName = toolCallIdToName.current[value.toolCallId];
+              if (toolName === "updateWorkingMemory" && value.result?.success) {
+                await refreshWorkingMemory?.();
+              }
+            } finally {
+              delete toolCallIdToName.current[value.toolCallId];
+            }
           },
           onErrorPart(error) {
             throw new Error(error);
           },
           onFinishMessagePart({ finishReason }) {
             handleFinishReason(finishReason);
+          },
+          onReasoningPart(value) {
+            setMessages((currentConversation) => {
+              const lastMessage = currentConversation[currentConversation.length - 1];
+              if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                const updatedContent = lastMessage.content.map((part) => {
+                  if (typeof part === "object" && part.type === "reasoning") {
+                    return {
+                      ...part,
+                      text: part.text + value
+                    };
+                  }
+                  return part;
+                });
+                const updatedMessage = {
+                  ...lastMessage,
+                  content: updatedContent
+                };
+                return [...currentConversation.slice(0, -1), updatedMessage];
+              }
+              const newMessage = {
+                role: "assistant",
+                content: [
+                  {
+                    type: "reasoning",
+                    text: value
+                  },
+                  { type: "text", text: content }
+                ]
+              };
+              return [...currentConversation, newMessage];
+            });
           }
         });
       }
@@ -6676,13 +6844,79 @@ const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
+const formatJSON = async (code) => {
+  const formatted = await prettier.format(code, {
+    semi: false,
+    parser: "json",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
+};
+const isValidJson = (str) => {
+  try {
+    const obj = JSON.parse(str);
+    return !!obj && typeof obj === "object";
+  } catch (e) {
+    return false;
+  }
+};
+
 const AgentAdvancedSettings = () => {
   const { settings, setSettings } = useAgentSettings();
   const [isOpen, setIsOpen] = useState(false);
+  const [providerOptionsValue, setProviderOptionsValue] = useState("");
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  const theme = useCodemirrorTheme();
+  const { handleCopy } = useCopyToClipboard({ text: providerOptionsValue });
+  const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
+  useEffect(() => {
+    const run = async () => {
+      if (!isValidJson(providerOptionsStr)) {
+        setError("Invalid JSON");
+        return;
+      }
+      const formatted = await formatJSON(providerOptionsStr);
+      setProviderOptionsValue(formatted);
+    };
+    run();
+  }, [providerOptionsStr]);
+  const formatProviderOptions = async () => {
+    setError(null);
+    if (!isValidJson(providerOptionsValue)) {
+      setError("Invalid JSON");
+      return;
+    }
+    const formatted = await formatJSON(providerOptionsValue);
+    setProviderOptionsValue(formatted);
+  };
+  const saveProviderOptions = async () => {
+    try {
+      setError(null);
+      const parsedContext = JSON.parse(providerOptionsValue);
+      setSettings({
+        ...settings,
+        modelSettings: {
+          ...settings?.modelSettings,
+          providerOptions: parsedContext
+        }
+      });
+      setSaved(true);
+      setTimeout(() => {
+        setSaved(false);
+      }, 1e3);
+    } catch (error2) {
+      console.error("error", error2);
+      setError("Invalid JSON");
+    }
+  };
   const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
   const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
   const collapsibleContentClassName = "bg-surface2 p-[10px] grid grid-cols-2 gap-[10px]";
-  return /* @__PURE__ */ jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
+  const buttonClass = "text-icon3 hover:text-icon6";
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
       "Advanced Settings",
       /* @__PURE__ */ jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsx(ChevronDown, {}) })
@@ -6795,9 +7029,39 @@ const AgentAdvancedSettings = () => {
             })
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 col-span-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "provider-options", children: "Provider Options" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: formatProviderOptions, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, {}) }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Format the Provider Options JSON" })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Provider Options" })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: saveProviderOptions, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: saved ? /* @__PURE__ */ jsx(CheckIcon$1, {}) : /* @__PURE__ */ jsx(SaveIcon, {}) }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: saved ? "Saved" : "Save Provider Options" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            value: providerOptionsValue,
+            onChange: setProviderOptionsValue,
+            theme,
+            extensions: [jsonLanguage],
+            className: "h-[300px] overflow-scroll rounded-lg border bg-transparent shadow-sm focus-visible:ring-ring transition-colors focus-visible:outline-none focus-visible:ring-1 p-2"
+          }
+        ),
+        error && /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-accent2", children: error })
       ] })
     ] })
-  ] });
+  ] }) });
 };
 
 const AgentSettings = () => {
@@ -6869,93 +7133,899 @@ const AgentSettings = () => {
   ] });
 };
 
-const convertMessage$1 = (message) => {
-  return message;
+const EmptyState = ({
+  iconSlot,
+  titleSlot,
+  descriptionSlot,
+  actionSlot,
+  as: Component = "div"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-[340px] flex-col items-center justify-center text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-auto [&>svg]:w-[126px]", children: iconSlot }),
+    /* @__PURE__ */ jsx(Component, { className: "text-icon6 pt-[34px] font-serif text-[1.75rem] font-semibold", children: titleSlot }),
+    /* @__PURE__ */ jsx(Txt, { variant: "ui-lg", className: "text-icon3 pb-[34px]", children: descriptionSlot }),
+    actionSlot
+  ] });
 };
-function MastraNetworkRuntimeProvider({
+
+const INDICATOR_WIDTH = 40;
+const INDICATOR_HEIGHT = 150;
+const INDICATOR_SPACE = 10;
+const ScrollableContainer = ({
+  className,
   children,
-  agentId,
-  initialMessages,
-  memory,
-  threadId,
-  modelSettings
-}) {
-  const [isRunning, setIsRunning] = useState(false);
-  const [messages, setMessages] = useState(initialMessages || []);
-  const [currentThreadId, setCurrentThreadId] = useState(threadId);
-  const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
+  scrollSpeed = 100,
+  scrollIntervalTime = 20
+}) => {
+  const containerRef = useRef(null);
+  const scrollInterval = useRef(null);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [containerRight, setContainerRight] = useState(0);
+  const [containerTop, setContainerTop] = useState(0);
+  const [containerLeft, setContainerLeft] = useState(0);
+  const [showRightIndicator, setShowRightIndicator] = useState(false);
+  const [showLeftIndicator, setShowLeftIndicator] = useState(false);
   useEffect(() => {
-    if (messages.length === 0 || currentThreadId !== threadId) {
-      if (initialMessages && threadId && memory) {
-        setMessages(initialMessages);
-        setCurrentThreadId(threadId);
+    const updatePositions = () => {
+      if (!containerRef.current) return;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowRightIndicator(canScrollRight);
+      setContainerHeight(containerRef.current.clientHeight);
+      const rect = containerRef.current.getBoundingClientRect();
+      setContainerRight(rect.right);
+      setContainerLeft(rect.left);
+      setContainerTop(rect.top);
+    };
+    updatePositions();
+    const resizeObserver = new ResizeObserver(updatePositions);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const canScrollLeft = containerRef.current.scrollLeft > 0;
+      const canScrollRight = containerRef.current.scrollLeft < containerRef.current.scrollWidth - containerRef.current.clientWidth;
+      setShowLeftIndicator(canScrollLeft);
+      setShowRightIndicator(canScrollRight);
+      updatePositions();
+    };
+    containerRef?.current?.addEventListener("scroll", handleScroll);
+    const container = containerRef.current;
+    return () => {
+      if (container) {
+        resizeObserver.unobserve(container);
+        container.removeEventListener("scroll", handleScroll);
       }
-    }
-  }, [initialMessages, threadId, memory, messages]);
-  const mastra = useMastraClient();
-  const network = mastra.getNetwork(agentId);
-  const onNew = async (message) => {
-    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 {
-      let updater = function() {
-        setMessages((currentConversation) => {
-          const message2 = {
-            role: "assistant",
-            content: [{ type: "text", text: content }]
-          };
-          if (!assistantMessageAdded) {
-            assistantMessageAdded = true;
-            return [...currentConversation, message2];
-          }
-          return [...currentConversation.slice(0, -1), message2];
+    };
+  }, []);
+  const ScrollIndicator = ({
+    isVisible,
+    position,
+    containerHeight: containerHeight2,
+    containerTop: containerTop2,
+    containerRight: containerRight2,
+    onStartScrolling,
+    onStopScrolling
+  }) => {
+    if (!isVisible) return null;
+    const styles = {
+      top: containerHeight2 < INDICATOR_HEIGHT ? containerTop2 : containerTop2 + (containerHeight2 - INDICATOR_HEIGHT) / 2,
+      width: INDICATOR_WIDTH,
+      height: containerHeight2 < INDICATOR_HEIGHT ? `${containerHeight2}px` : `${INDICATOR_HEIGHT}px`
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onMouseDown: onStartScrolling,
+        onTouchStart: onStartScrolling,
+        onMouseUp: onStopScrolling,
+        onTouchEnd: onStopScrolling,
+        onTouchCancel: onStopScrolling,
+        className: "bg-surface4 text-muted-foreground border-surface5 hover:border-muted-foreground fixed z-10 flex items-center justify-center rounded-lg border text-2xl hover:text-white",
+        style: {
+          ...styles,
+          left: position === "left" ? containerLeft + INDICATOR_SPACE : containerRight2 - INDICATOR_WIDTH - INDICATOR_SPACE
+        },
+        children: [
+          " ",
+          position === "left" ? "«" : "»"
+        ]
+      }
+    );
+  };
+  const startScrolling = useCallback(
+    (direction, e) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+      if (scrollInterval.current) {
+        clearInterval(scrollInterval.current);
+        scrollInterval.current = null;
+      }
+      if (containerRef.current) {
+        containerRef.current.scrollBy({
+          left: direction === "right" ? scrollSpeed * 2 : -scrollSpeed * 2,
+          behavior: "smooth"
         });
-      };
-      const response = await network.stream({
-        messages: [
-          {
-            role: "user",
-            content: input
-          }
-        ],
-        runId: agentId,
-        frequencyPenalty,
-        presencePenalty,
-        maxRetries,
-        maxSteps,
-        maxTokens,
-        temperature,
-        topK,
-        topP,
-        instructions,
-        ...memory ? { threadId, resourceId: agentId } : {}
-      });
-      if (!response.body) {
-        throw new Error("No response body");
       }
-      const parts = [];
-      let content = "";
-      let currentTextPart = null;
-      let assistantMessageAdded = false;
-      await processDataStream({
-        stream: response.body,
-        onTextPart(value) {
-          if (currentTextPart == null) {
-            currentTextPart = {
-              type: "text",
-              text: value
-            };
-            parts.push(currentTextPart);
-          } else {
-            currentTextPart.text += value;
-          }
-          content += value;
-          updater();
-        },
-        async onToolCallPart(value) {
-          console.log("Tool call received:", value);
+      scrollInterval.current = setInterval(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollBy({
+            left: direction === "right" ? scrollSpeed : -scrollSpeed,
+            behavior: "smooth"
+          });
+        }
+      }, scrollIntervalTime);
+    },
+    [scrollSpeed, scrollIntervalTime]
+  );
+  const stopScrolling = useCallback(() => {
+    if (scrollInterval.current) {
+      clearInterval(scrollInterval.current);
+      scrollInterval.current = null;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx("relative max-h-full overflow-auto", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ScrollIndicator,
+      {
+        isVisible: showLeftIndicator,
+        position: "left",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("left", e),
+        onStopScrolling: stopScrolling
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollIndicator,
+      {
+        isVisible: showRightIndicator,
+        position: "right",
+        containerHeight,
+        containerTop,
+        containerRight,
+        onStartScrolling: (e) => startScrolling("right", e),
+        onStopScrolling: stopScrolling
+      }
+    )
+  ] });
+};
+
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+}
+
+const OpenaiChatIcon = (props) => /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" }) });
+
+const AnthropicChatIcon = (props) => /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" }) });
+
+const AnthropicMessagesIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "h-3 w-3",
+    fill: "white",
+    height: "78",
+    strokeLinejoin: "round",
+    viewBox: "0 0 16 16",
+    width: "78",
+    style: { color: "currentcolor" },
+    ...props,
+    children: /* @__PURE__ */ jsx("g", { transform: "translate(0,2)", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M11.375 0h-2.411L13.352 11.13h2.411L11.375 0ZM4.4 0 0 11.13h2.46l0.9-2.336h4.604l0.9 2.336h2.46L6.924 0H4.4Zm-0.244 6.723 1.506-3.909 1.506 3.909H4.156Z",
+        fill: "currentColor"
+      }
+    ) })
+  }
+);
+
+const AzureIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "h-3 w-3",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7.402 13.8777C9.45763 13.4674 11.1555 13.128 11.175 13.1233L11.2104 13.1148L9.2697 10.507C8.2023 9.07276 7.32898 7.8937 7.32898 7.88691C7.32898 7.87404 9.33293 1.63997 9.3442 1.61779C9.34797 1.61037 10.7117 4.27017 12.65 8.06532C14.4647 11.6184 15.9608 14.5479 15.9747 14.5754L16 14.6253L9.83224 14.6244L3.66449 14.6235L7.402 13.8777ZM0 13.0824C0 13.0787 0.914457 11.2855 2.03212 9.09735L4.06425 5.11896L6.43245 2.87384C7.73497 1.63902 8.80417 0.627201 8.80845 0.625356C8.81274 0.623511 8.79561 0.672228 8.77038 0.733617C8.74515 0.795006 7.58796 3.59893 6.19884 6.96455L3.67317 13.0839L1.83659 13.0865C0.826464 13.0879 0 13.0861 0 13.0824Z",
+        fill: "#0089D6",
+        style: { fill: "#0089D6", fillOpacity: 1 }
+      }
+    )
+  }
+);
+
+const AmazonIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-3 w-3",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 181 108",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_1480_1723)", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M51.2203 39.3158C51.2203 41.5066 51.4572 43.2829 51.8717 44.5856C52.3453 45.8882 52.9374 47.3093 53.7664 48.8487C54.0624 49.3224 54.1809 49.7961 54.1809 50.2106C54.1809 50.8027 53.8256 51.3948 53.0559 51.9869L49.3256 54.4737C48.7927 54.829 48.2598 55.0066 47.7861 55.0066C47.194 55.0066 46.6019 54.7106 46.0098 54.1777C45.1809 53.2895 44.4703 52.3422 43.8782 51.3948C43.2861 50.3882 42.694 49.2632 42.0427 47.9014C37.4243 53.3487 31.6217 56.0724 24.6348 56.0724C19.6611 56.0724 15.694 54.6514 12.7927 51.8093C9.8914 48.9672 8.41113 45.1777 8.41113 40.4408C8.41113 35.4079 10.1874 31.3224 13.7993 28.2435C17.4111 25.1645 22.2072 23.6251 28.3059 23.6251C30.319 23.6251 32.3914 23.8027 34.5822 24.0987C36.773 24.3948 39.023 24.8685 41.3914 25.4014V21.079C41.3914 16.579 40.444 13.4408 38.6085 11.6053C36.7138 9.76979 33.5164 8.88163 28.9572 8.88163C26.8848 8.88163 24.7532 9.11847 22.5624 9.65137C20.3717 10.1843 18.2401 10.8356 16.1677 11.6645C15.2203 12.079 14.5098 12.3158 14.0953 12.4343C13.6809 12.5527 13.3848 12.6119 13.148 12.6119C12.319 12.6119 11.9046 12.0198 11.9046 10.7764V7.87505C11.9046 6.92768 12.023 6.21716 12.319 5.80268C12.6151 5.38821 13.148 4.97374 13.9769 4.55926C16.0493 3.49347 18.5361 2.60531 21.4374 1.89479C24.3388 1.12505 27.4177 0.769788 30.6743 0.769788C37.7203 0.769788 42.8717 2.36847 46.1875 5.56584C49.444 8.76321 51.1019 13.6185 51.1019 20.1316V39.3158H51.2203ZM27.1809 48.3158C29.1348 48.3158 31.148 47.9606 33.2796 47.2501C35.4111 46.5395 37.3059 45.2369 38.9046 43.4606C39.8519 42.3356 40.5625 41.0922 40.9177 39.6711C41.273 38.2501 41.5098 36.5329 41.5098 34.5198V32.0329C39.7927 31.6185 37.9572 31.2632 36.0624 31.0264C34.1677 30.7895 32.3322 30.6711 30.4967 30.6711C26.5296 30.6711 23.6282 31.4408 21.6743 33.0395C19.7203 34.6382 18.773 36.8882 18.773 39.8487C18.773 42.6316 19.4835 44.704 20.9638 46.1251C22.3848 47.6053 24.4572 48.3158 27.1809 48.3158ZM74.7269 54.7106C73.6611 54.7106 72.9506 54.5329 72.4769 54.1185C72.0032 53.7632 71.5888 52.9343 71.2335 51.8093L57.319 6.03953C56.9638 4.85531 56.7861 4.08558 56.7861 3.6711C56.7861 2.72374 57.2598 2.19084 58.2072 2.19084H64.0098C65.1348 2.19084 65.9046 2.36847 66.319 2.78295C66.7927 3.13821 67.148 3.96716 67.5032 5.09216L77.4506 44.2895L86.6874 5.09216C86.9835 3.90795 87.3388 3.13821 87.8124 2.78295C88.2861 2.42768 89.1151 2.19084 90.1809 2.19084H94.9177C96.0427 2.19084 96.8124 2.36847 97.2861 2.78295C97.7598 3.13821 98.1743 3.96716 98.4111 5.09216L107.766 44.7632L118.01 5.09216C118.365 3.90795 118.78 3.13821 119.194 2.78295C119.668 2.42768 120.437 2.19084 121.503 2.19084H127.01C127.957 2.19084 128.49 2.66453 128.49 3.6711C128.49 3.96716 128.431 4.26321 128.372 4.61847C128.312 4.97374 128.194 5.44742 127.957 6.09874L113.687 51.8685C113.332 53.0527 112.918 53.8224 112.444 54.1777C111.97 54.5329 111.201 54.7698 110.194 54.7698H105.102C103.977 54.7698 103.207 54.5922 102.733 54.1777C102.26 53.7632 101.845 52.9935 101.608 51.8093L92.4309 13.6185L83.3125 51.7501C83.0164 52.9343 82.6611 53.704 82.1874 54.1185C81.7138 54.5329 80.8848 54.7106 79.819 54.7106H74.7269ZM150.812 56.3093C147.734 56.3093 144.655 55.954 141.694 55.2435C138.733 54.5329 136.424 53.7632 134.885 52.8751C133.937 52.3422 133.286 51.7501 133.049 51.2172C132.812 50.6843 132.694 50.0922 132.694 49.5593V46.5395C132.694 45.2961 133.168 44.704 134.056 44.704C134.411 44.704 134.766 44.7632 135.122 44.8816C135.477 45.0001 136.01 45.2369 136.602 45.4737C138.615 46.3619 140.806 47.0724 143.115 47.5461C145.484 48.0198 147.793 48.2566 150.161 48.2566C153.891 48.2566 156.793 47.6053 158.806 46.3027C160.819 45 161.885 43.1053 161.885 40.6777C161.885 39.0198 161.352 37.6579 160.286 36.5329C159.22 35.4079 157.207 34.4014 154.306 33.454L145.72 30.7895C141.398 29.4277 138.201 27.4145 136.247 24.7501C134.293 22.1448 133.286 19.2435 133.286 16.1645C133.286 13.6777 133.819 11.4869 134.885 9.59216C135.951 7.69742 137.372 6.03953 139.148 4.73689C140.924 3.37505 142.937 2.36847 145.306 1.65795C147.674 0.94742 150.161 0.651367 152.766 0.651367C154.069 0.651367 155.431 0.710578 156.734 0.888209C158.095 1.06584 159.339 1.30268 160.582 1.53953C161.766 1.83558 162.891 2.13163 163.957 2.48689C165.023 2.84216 165.852 3.19742 166.444 3.55268C167.273 4.02637 167.865 4.50005 168.22 5.03295C168.576 5.50663 168.753 6.15795 168.753 6.98689V9.76979C168.753 11.0132 168.28 11.6645 167.391 11.6645C166.918 11.6645 166.148 11.4277 165.141 10.954C161.766 9.41453 157.977 8.64479 153.773 8.64479C150.398 8.64479 147.734 9.17768 145.898 10.3027C144.062 11.4277 143.115 13.1448 143.115 15.5724C143.115 17.2303 143.707 18.6514 144.891 19.7764C146.076 20.9014 148.266 22.0264 151.405 23.0329L159.812 25.6974C164.076 27.0593 167.155 28.954 168.99 31.3816C170.826 33.8093 171.714 36.5922 171.714 39.6711C171.714 42.2172 171.181 44.5264 170.174 46.5395C169.108 48.5527 167.687 50.329 165.852 51.7501C164.016 53.2303 161.826 54.2961 159.28 55.0658C156.615 55.8948 153.832 56.3093 150.812 56.3093Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M162.004 85.0856C142.524 99.4738 114.221 107.112 89.8855 107.112C55.7803 107.112 25.05 94.5001 1.83948 73.5396C0.00394917 71.8817 1.66184 69.6317 3.85263 70.9343C28.9579 85.5001 59.925 94.3225 91.9579 94.3225C113.57 94.3225 137.313 89.8225 159.162 80.5856C162.418 79.1054 165.201 82.7172 162.004 85.0856Z",
+            fill: "#FF9900"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M170.115 75.8487C167.628 72.6513 153.654 74.3092 147.319 75.079C145.424 75.3158 145.128 73.6579 146.845 72.4145C157.976 64.5987 176.272 66.8487 178.404 69.454C180.536 72.1184 177.812 90.4145 167.391 99.1776C165.792 100.539 164.253 99.8289 164.963 98.0526C167.332 92.1908 172.601 78.9868 170.115 75.8487Z",
+            fill: "#FF9900"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1480_1723", children: /* @__PURE__ */ jsx("rect", { width: "180", height: "107.763", fill: "white", transform: "translate(0.0625)" }) }) })
+    ]
+  }
+);
+
+const CohereIcon = (props) => /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", xmlns: "http://www.w3.org/2000/svg", width: "17", height: "18", fill: "none", ...props, children: [
+  /* @__PURE__ */ jsx("mask", { id: "mask0_174_2406", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "17", height: "18", children: /* @__PURE__ */ jsx("path", { d: "M17 0.5H0V17.5H17V0.5Z", fill: "white" }) }),
+  /* @__PURE__ */ jsxs("g", { mask: "url(#mask0_174_2406)", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M5.50773 10.6219C5.9653 10.6219 6.8755 10.5968 8.13362 10.0788C9.59973 9.47518 12.5166 8.37942 14.6208 7.2539C16.0924 6.46668 16.7375 5.42553 16.7375 4.02344C16.7375 2.07751 15.16 0.5 13.2141 0.5H5.06095C2.26586 0.5 0 2.76586 0 5.56095C0 8.35604 2.12151 10.6219 5.50773 10.6219Z",
+        fill: "#39594D"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.88672 14.107C6.88672 12.7369 7.71155 11.5016 8.97699 10.9764L11.5446 9.9108C14.1417 8.83294 17.0003 10.7415 17.0003 13.5535C17.0003 15.732 15.2339 17.4979 13.0553 17.4973L10.2754 17.4966C8.40372 17.4961 6.88672 15.9787 6.88672 14.107Z",
+        fill: "#D18EE2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2.91749 11.2891C1.30623 11.2891 0 12.5952 0 14.2065V14.5844C0 16.1956 1.30618 17.5018 2.91744 17.5018C4.5287 17.5018 5.83493 16.1956 5.83493 14.5844V14.2065C5.83493 12.5952 4.52875 11.2891 2.91749 11.2891Z",
+        fill: "#FF7759"
+      }
+    )
+  ] })
+] });
+
+const GroqIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-3 w-3",
+    "data-testid": "geist-icon",
+    height: "78",
+    strokeLinejoin: "round",
+    viewBox: "0 0 160 59",
+    width: "104",
+    style: {
+      color: "currentcolor"
+    },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "mask",
+        {
+          id: "mask0_4345_1846",
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "160",
+          height: "59",
+          style: {
+            maskType: "luminance"
+          },
+          children: /* @__PURE__ */ jsx("path", { d: "M0.273438 0.219727H159.216V58.1817H0.273438V0.219727Z", fill: "white" })
+        }
+      ),
+      /* @__PURE__ */ jsx("g", { mask: "url(#mask0_4345_1846)", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M95.4635 0.314595C84.4822 0.314595 75.5599 9.19525 75.5599 20.1677C75.5599 31.1402 84.4632 40.0208 95.4635 40.0208C106.464 40.0208 115.367 31.1402 115.367 20.1677C115.348 9.21427 106.445 0.333611 95.4635 0.314595ZM95.4635 32.5664C88.6002 32.5664 83.0333 27.0136 83.0333 20.1677C83.0333 13.3218 88.6002 7.76902 95.4635 7.76902C102.327 7.76902 107.894 13.3218 107.894 20.1677C107.894 27.0136 102.327 32.5664 95.4635 32.5664ZM67.9912 0.39066C67.3049 0.314595 66.6376 0.276562 65.9513 0.276562C65.6081 0.276562 65.284 0.276562 64.9599 0.295578C64.6358 0.314595 64.2926 0.333611 63.9685 0.352628C62.634 0.44771 61.2995 0.675906 60.0031 1.03722C57.3531 1.74082 54.8556 2.99591 52.7013 4.68836C50.4898 6.43787 48.7358 8.68181 47.5347 11.23C46.9437 12.5041 46.5052 13.8543 46.2193 15.2234C46.0858 15.908 45.9905 16.5926 45.9142 17.2772C45.8952 17.6195 45.857 17.9618 45.857 18.3041L45.838 18.8175V19.293L45.8761 32.5854L45.9142 39.2221H53.3685L53.4067 32.5854L53.4448 19.293V18.5893C53.4448 18.3802 53.4829 18.171 53.4829 17.9618C53.5211 17.5434 53.5973 17.1441 53.6736 16.7257C53.8452 15.9271 54.093 15.1474 54.4362 14.4057C55.1225 12.9225 56.152 11.6293 57.4293 10.6025C58.7639 9.53755 60.3081 8.75787 61.9477 8.3205C62.7865 8.0923 63.6635 7.94017 64.5405 7.8641C64.7693 7.84509 64.979 7.82607 65.2078 7.82607C65.4365 7.82607 65.6653 7.80705 65.875 7.80705C66.2944 7.80705 66.7329 7.82607 67.1524 7.8641C68.8491 8.03525 70.4887 8.54869 71.9948 9.38541L75.7124 2.93886C73.3484 1.56968 70.7175 0.694923 67.9912 0.39066ZM20.3484 0.219513C9.36711 0.124431 0.36855 8.92902 0.273226 19.8825C0.177902 30.8359 9.00488 39.8116 19.9862 39.9067H26.8876V32.4713H20.3484C13.4851 32.5474 7.84193 27.0707 7.76567 20.2057C7.68941 13.3408 13.1801 7.73099 20.0624 7.65492H20.3484C27.2117 7.65492 32.7786 13.2077 32.8167 20.0536V38.3284C32.8167 45.1172 27.2689 50.651 20.4819 50.7271C17.2218 50.708 14.1142 49.3959 11.8265 47.0949L6.54553 52.3625C10.206 56.0326 15.1628 58.1244 20.3484 58.1625H20.6153C31.4632 58.0103 40.1757 49.2248 40.2329 38.4044V19.5592C39.966 8.81492 31.1391 0.238529 20.3484 0.219513ZM139.389 0.314595C128.407 0.314595 119.485 9.19525 119.504 20.1677C119.504 31.1212 128.407 40.0018 139.389 40.0018H146.195V32.5664H139.389C132.525 32.5664 126.958 27.0136 126.958 20.1677C126.958 13.3218 132.525 7.76902 139.389 7.76902C145.833 7.76902 151.209 12.6943 151.781 19.1028H151.762V57.2116H159.216V20.1677C159.216 9.21427 150.351 0.314595 139.389 0.314595Z",
+          fill: "currentColor"
+        }
+      ) })
+    ]
+  }
+);
+
+const XGroqIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "h-3 w-3",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1000 1000",
+    width: "78",
+    height: "78",
+    style: {
+      color: "currentcolor"
+    },
+    ...props,
+    children: /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          fill: "currentColor",
+          points: "226.83 411.15 501.31 803.15 623.31 803.15 348.82 411.15 226.83 411.15"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          fill: "currentColor",
+          points: "348.72 628.87 226.69 803.15 348.77 803.15 409.76 716.05 348.72 628.87"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          fill: "currentColor",
+          points: "651.23 196.85 440.28 498.12 501.32 585.29 773.31 196.85 651.23 196.85"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          fill: "currentColor",
+          points: "673.31 383.25 673.31 803.15 773.31 803.15 773.31 240.44 673.31 383.25"
+        }
+      )
+    ] })
+  }
+);
+
+const MistralIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-3 w-3",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "176",
+    height: "162",
+    viewBox: "0 0 176 162",
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "15", y: "1", width: "32", height: "32", fill: "#FFCD00", stroke: "#636363", "stroke-opacity": "0.2", "stroke-width": "0.5" }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "143",
+          y: "1",
+          width: "32",
+          height: "32",
+          fill: "#FFCD00",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "15",
+          y: "33",
+          width: "32",
+          height: "32",
+          fill: "#FFA400",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "47",
+          y: "33",
+          width: "32",
+          height: "32",
+          fill: "#FFA400",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "111",
+          y: "33",
+          width: "32",
+          height: "32",
+          fill: "#FFA400",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "143",
+          y: "33",
+          width: "32",
+          height: "32",
+          fill: "#FFA400",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "15",
+          y: "65",
+          width: "32",
+          height: "32",
+          fill: "#FF7100",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "47",
+          y: "65",
+          width: "32",
+          height: "32",
+          fill: "#FF7100",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "79",
+          y: "65",
+          width: "32",
+          height: "32",
+          fill: "#FF7100",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "111",
+          y: "65",
+          width: "32",
+          height: "32",
+          fill: "#FF7100",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "143",
+          y: "65",
+          width: "32",
+          height: "32",
+          fill: "#FF7100",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "15",
+          y: "97",
+          width: "32",
+          height: "32",
+          fill: "#FF4902",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "79",
+          y: "97",
+          width: "32",
+          height: "32",
+          fill: "#FF4902",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "143",
+          y: "97",
+          width: "32",
+          height: "32",
+          fill: "#FF4902",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "15",
+          y: "129",
+          width: "32",
+          height: "32",
+          fill: "#FF0006",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "143",
+          y: "129",
+          width: "32",
+          height: "32",
+          fill: "#FF0006",
+          stroke: "#636363",
+          "stroke-opacity": "0.2",
+          "stroke-width": "0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx("rect", { y: "1", width: "16", height: "160", fill: "black" }),
+      /* @__PURE__ */ jsx("rect", { x: "63", y: "97", width: "16", height: "32", fill: "black" }),
+      /* @__PURE__ */ jsx("rect", { x: "95", y: "33", width: "16", height: "32", fill: "black" }),
+      /* @__PURE__ */ jsx("rect", { x: "127", y: "1", width: "16", height: "32", fill: "black" }),
+      /* @__PURE__ */ jsx("rect", { x: "127", y: "97", width: "16", height: "64", fill: "black" })
+    ]
+  }
+);
+
+const LinkComponentContext = createContext({
+  Link: forwardRef(() => null)
+});
+const LinkComponentProvider = ({ children, Link }) => {
+  return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link }, children });
+};
+const useLinkComponent = () => {
+  const ctx = useContext(LinkComponentContext);
+  if (!ctx) {
+    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
+  }
+  return ctx;
+};
+
+const providerMapToIcon = {
+  "openai.chat": /* @__PURE__ */ jsx(OpenaiChatIcon, {}),
+  "anthropic.chat": /* @__PURE__ */ jsx(AnthropicChatIcon, {}),
+  "anthropic.messages": /* @__PURE__ */ jsx(AnthropicMessagesIcon, {}),
+  AZURE: /* @__PURE__ */ jsx(AzureIcon, {}),
+  AMAZON: /* @__PURE__ */ jsx(AmazonIcon, {}),
+  GOOGLE: /* @__PURE__ */ jsx(GoogleIcon, {}),
+  COHERE: /* @__PURE__ */ jsx(CohereIcon, {}),
+  GROQ: /* @__PURE__ */ jsx(GroqIcon, {}),
+  X_GROK: /* @__PURE__ */ jsx(XGroqIcon, {}),
+  MISTRAL: /* @__PURE__ */ jsx(MistralIcon, {})
+};
+const NameCell = ({ row }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsx(
+    EntryCell,
+    {
+      icon: /* @__PURE__ */ jsx(AgentIcon, {}),
+      name: /* @__PURE__ */ jsx(Link, { className: "w-full space-y-0", href: row.original.link, children: row.original.name }),
+      description: row.original.instructions
+    }
+  );
+};
+const columns$2 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell
+  },
+  {
+    header: "Model",
+    accessorKey: "model",
+    size: 160,
+    cell: ({ row }) => {
+      return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
+        Badge$1,
+        {
+          variant: "default",
+          icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsx(OpenAIIcon, {}),
+          children: row.original.modelId || "N/A"
+        }
+      ) });
+    }
+  },
+  {
+    size: 160,
+    header: "Tools",
+    accessorKey: "tools",
+    cell: ({ row }) => {
+      const toolsCount = row.original.tools ? Object.keys(row.original.tools).length : 0;
+      return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(ApiIcon, {}), children: [
+        toolsCount,
+        " tool",
+        toolsCount > 1 ? "s" : ""
+      ] }) });
+    }
+  }
+];
+
+function AgentsTable({ agents, isLoading, onClickRow }) {
+  const projectData = useMemo(
+    () => Object.keys(agents).map((key) => {
+      const agent = agents[key];
+      return {
+        id: key,
+        name: agent.name,
+        instructions: agent.instructions,
+        provider: agent.provider,
+        branch: void 0,
+        executedAt: void 0,
+        repoUrl: void 0,
+        tools: agent.tools,
+        modelId: agent.modelId,
+        link: `/agents/${key}/chat/new`
+      };
+    }),
+    [agents]
+  );
+  const table = useReactTable({
+    data: projectData,
+    columns: columns$2,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (isLoading) return /* @__PURE__ */ jsx(AgentsTableSkeleton, {});
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyAgentsTable, {});
+  }
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => onClickRow(row.original.id), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+  ] }) });
+}
+const AgentsTableSkeleton = () => /* @__PURE__ */ jsxs(Table, { children: [
+  /* @__PURE__ */ jsxs(Thead, { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsx(Th, { width: 160, children: "Model" }),
+    /* @__PURE__ */ jsx(Th, { width: 160, children: "Tools" })
+  ] }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyAgentsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(AgentCoinIcon, {}),
+    titleSlot: "Configure Agents",
+    descriptionSlot: "Mastra agents are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/agents/overview",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(AgentIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const RuntimeContext = () => {
+  const { runtimeContext, setRuntimeContext } = usePlaygroundStore();
+  const [runtimeContextValue, setRuntimeContextValue] = useState("");
+  const theme = useCodemirrorTheme();
+  const { handleCopy } = useCopyToClipboard({ text: runtimeContextValue });
+  const runtimeContextStr = JSON.stringify(runtimeContext);
+  useEffect(() => {
+    const run = async () => {
+      if (!isValidJson(runtimeContextStr)) {
+        toast.error("Invalid JSON");
+        return;
+      }
+      const formatted = await formatJSON(runtimeContextStr);
+      setRuntimeContextValue(formatted);
+    };
+    run();
+  }, [runtimeContextStr]);
+  const handleSaveRuntimeContext = () => {
+    try {
+      const parsedContext = JSON.parse(runtimeContextValue);
+      setRuntimeContext(parsedContext);
+      toast.success("Runtime context saved successfully");
+    } catch (error) {
+      console.error("error", error);
+      toast.error("Invalid JSON");
+    }
+  };
+  const buttonClass = "text-icon3 hover:text-icon6";
+  const formatRuntimeContext = async () => {
+    if (!isValidJson(runtimeContextValue)) {
+      toast.error("Invalid JSON");
+      return;
+    }
+    const formatted = await formatJSON(runtimeContextValue);
+    setRuntimeContextValue(formatted);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Runtime Context (JSON)" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: formatRuntimeContext, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, {}) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Format the Runtime Context JSON" })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Runtime Context" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        value: runtimeContextValue,
+        onChange: setRuntimeContextValue,
+        theme,
+        extensions: [jsonLanguage],
+        className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveRuntimeContext, children: "Save" }) })
+  ] });
+};
+const RuntimeContextWrapper = ({ children }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl p-5 overflow-y-scroll h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg p-4 pb-5 bg-surface4 shadow-md space-y-3 border border-border1 mb-5", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon3", children: "Mastra provides runtime context, which is a system based on dependency injection that enables you to configure your agents and tools with runtime variables. If you find yourself creating several different agents that do very similar things, runtime context allows you to combine them into one agent." }),
+      /* @__PURE__ */ jsxs(Button, { as: Link, to: "https://mastra.ai/en/docs/agents/runtime-variables", target: "_blank", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ExternalLink, {}) }),
+        "See documentation"
+      ] })
+    ] }),
+    children
+  ] });
+};
+
+const convertMessage$1 = (message) => {
+  return message;
+};
+function MastraNetworkRuntimeProvider({
+  children,
+  agentId,
+  initialMessages,
+  memory,
+  threadId,
+  modelSettings
+}) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [messages, setMessages] = useState(initialMessages || []);
+  const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
+  useEffect(() => {
+    if (messages.length === 0 || currentThreadId !== threadId) {
+      if (initialMessages && threadId && memory) {
+        setMessages(initialMessages);
+        setCurrentThreadId(threadId);
+      }
+    }
+  }, [initialMessages, threadId, memory, messages]);
+  const mastra = useMastraClient();
+  const network = mastra.getNetwork(agentId);
+  const onNew = async (message) => {
+    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 {
+      let updater = function() {
+        setMessages((currentConversation) => {
+          const message2 = {
+            role: "assistant",
+            content: [{ type: "text", text: content }]
+          };
+          if (!assistantMessageAdded) {
+            assistantMessageAdded = true;
+            return [...currentConversation, message2];
+          }
+          return [...currentConversation.slice(0, -1), message2];
+        });
+      };
+      const response = await network.stream({
+        messages: [
+          {
+            role: "user",
+            content: input
+          }
+        ],
+        runId: agentId,
+        frequencyPenalty,
+        presencePenalty,
+        maxRetries,
+        maxSteps,
+        maxTokens,
+        temperature,
+        topK,
+        topP,
+        instructions,
+        ...memory ? { threadId, resourceId: agentId } : {}
+      });
+      if (!response.body) {
+        throw new Error("No response body");
+      }
+      const parts = [];
+      let content = "";
+      let currentTextPart = null;
+      let assistantMessageAdded = false;
+      await processDataStream({
+        stream: response.body,
+        onTextPart(value) {
+          if (currentTextPart == null) {
+            currentTextPart = {
+              type: "text",
+              text: value
+            };
+            parts.push(currentTextPart);
+          } else {
+            currentTextPart.text += value;
+          }
+          content += value;
+          updater();
+        },
+        async onToolCallPart(value) {
+          console.log("Tool call received:", value);
           setMessages((currentConversation) => {
             const lastMessage = currentConversation[currentConversation.length - 1];
             if (lastMessage && lastMessage.role === "assistant") {
@@ -7345,12 +8415,8 @@ const Clock = ({ startedAt, endedAt }) => {
   return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
     toSigFigs(timeDiff, 3),
     "ms"
-  ] });
-};
-
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
+  ] });
+};
 
 const lodashTitleCase = (str) => {
   const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
@@ -8234,25 +9300,6 @@ const CodeDialogContent = ({ data }) => {
   }
 };
 
-const formatJSON = async (code) => {
-  const formatted = await prettier.format(code, {
-    semi: false,
-    parser: "json",
-    printWidth: 80,
-    tabWidth: 2,
-    plugins: [prettierPluginBabel, prettierPluginEstree]
-  });
-  return formatted;
-};
-const isValidJson = (str) => {
-  try {
-    const obj = JSON.parse(str);
-    return !!obj && typeof obj === "object";
-  } catch (e) {
-    return false;
-  }
-};
-
 const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
   const [eventData, setEventData] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -8264,6 +9311,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
     setIsLoading(true);
     setError(null);
     try {
+      setError(null);
       data = JSON.parse(eventData);
     } catch (error2) {
       setError("Invalid JSON");
@@ -8271,6 +9319,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
       return;
     }
     try {
+      setError(null);
       const result = await onSendEvent({ event, data, runId });
       toast.success(result.message);
     } catch (error2) {
@@ -8282,6 +9331,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
   };
   const buttonClass = "text-icon3 hover:text-icon6";
   const formatEventData = async () => {
+    setError(null);
     if (!isValidJson(eventData)) {
       setError("Invalid JSON");
       return;
@@ -9520,7 +10570,8 @@ function VNextMastraNetworkRuntimeProvider({
   memory,
   threadId,
   refreshThreadList,
-  initialMessages
+  initialMessages,
+  runtimeContext
 }) {
   const runIdRef = useRef(void 0);
   const [isRunning, setIsRunning] = useState(false);
@@ -9530,6 +10581,10 @@ function VNextMastraNetworkRuntimeProvider({
   const { chatWithLoop, maxIterations } = useContext(NetworkContext);
   const id = runIdRef.current;
   const currentState = id ? state[id] : void 0;
+  const runtimeContextInstance = new RuntimeContext$2();
+  Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
+    runtimeContextInstance.set(key, value);
+  });
   useEffect(() => {
     if (!currentState) return;
     const hasFinished = Boolean(currentState?.steps?.["finish"]);
@@ -9821,7 +10876,8 @@ ${formatted}\`\`\``;
             message: input,
             threadId,
             resourceId: networkId,
-            maxIterations
+            maxIterations,
+            runtimeContext: runtimeContextInstance
           },
           async (record) => {
             if (record.type === "step-start" && record.payload?.id === "Agent-Network-Outer-Workflow") {
@@ -9915,7 +10971,8 @@ ${formatted}\`\`\``;
           {
             message: input,
             threadId,
-            resourceId: networkId
+            resourceId: networkId,
+            runtimeContext: runtimeContextInstance
           },
           (record) => {
             if (runIdRef.current) {
@@ -10000,6 +11057,7 @@ const VNextNetworkChat = ({
   memory,
   refreshThreadList
 }) => {
+  const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsx(MessagesProvider, { children: /* @__PURE__ */ jsx(VNextNetworkChatProvider, { children: /* @__PURE__ */ jsx(
     VNextMastraNetworkRuntimeProvider,
     {
@@ -10008,12 +11066,316 @@ const VNextNetworkChat = ({
       threadId,
       memory,
       refreshThreadList,
+      runtimeContext,
       children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(NetworkThread, { hasMemory: memory, networkName }) })
     },
     threadId
   ) }, threadId) }, threadId);
 };
 
+const columns$1 = [
+  {
+    id: "name",
+    header: "Name",
+    cell: ({ row }) => {
+      const { Link } = useLinkComponent();
+      return /* @__PURE__ */ jsx(
+        EntryCell,
+        {
+          icon: /* @__PURE__ */ jsx(AgentIcon, {}),
+          name: /* @__PURE__ */ jsx(
+            Link,
+            {
+              className: "w-full space-y-0",
+              href: `/networks${row.original.isVNext ? "/v-next" : ""}/${row.original.id}/chat`,
+              children: row.original.name
+            }
+          ),
+          description: row.original.instructions
+        }
+      );
+    },
+    meta: {
+      width: "auto"
+    }
+  },
+  {
+    id: "agents",
+    header: "Agents",
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(Users, {}), children: row.original.agentsSize }) })
+  },
+  {
+    id: "workflows",
+    header: "Workflows",
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, {}), children: row.original.workflowsSize }) })
+  },
+  {
+    id: "tools",
+    header: "Tools",
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, {}), children: row.original.toolsSize }) })
+  },
+  {
+    id: "model",
+    header: "Routing Models",
+    cell: ({ row }) => /* @__PURE__ */ jsxs(Cell, { children: [
+      /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Brain, {}), children: row.original.routingModel }),
+      row.original.isVNext ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-accent1 ml-2", children: "vNext" }) : null
+    ] })
+  }
+];
+
+const NetworkTable = ({ legacyNetworks, networks, isLoading, onClickRow }) => {
+  const allNetworks = useMemo(
+    () => [
+      ...legacyNetworks?.map((network) => ({
+        ...network,
+        routingModel: network.routingModel.modelId,
+        agentsSize: network.agents.length,
+        isVNext: false
+      })) ?? [],
+      ...networks?.map((network) => ({
+        ...network,
+        routingModel: network.routingModel.modelId,
+        agentsSize: network.agents.length,
+        workflowsSize: network.workflows.length,
+        toolsSize: network.tools.length,
+        isVNext: true
+      })) ?? []
+    ],
+    [networks, legacyNetworks]
+  );
+  const table = useReactTable({
+    data: allNetworks,
+    columns: columns$1,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (isLoading) return /* @__PURE__ */ jsx(NetworkTableSkeleton, {});
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(NetworkTableEmpty, {});
+  }
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => onClickRow(row.original.id), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+  ] }) });
+};
+const NetworkTableEmpty = () => {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      iconSlot: /* @__PURE__ */ jsx(AgentNetworkCoinIcon, {}),
+      titleSlot: "Configure Agent Networks",
+      descriptionSlot: "Mastra agent networks are not configured yet. You can find more information in the documentation.",
+      actionSlot: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "lg",
+          className: "w-full",
+          variant: "light",
+          as: "a",
+          href: "https://mastra.ai/en/reference/networks/agent-network",
+          target: "_blank",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(NetworkIcon, {}) }),
+            "Docs"
+          ]
+        }
+      )
+    }
+  );
+};
+const NetworkTableSkeleton = () => {
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsxs(Thead, { children: [
+      /* @__PURE__ */ jsx(Th, { children: "Name" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Agents" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Workflows" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Tools" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Routing Models" })
+    ] }),
+    /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+    ] }, index)) })
+  ] });
+};
+
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
+const ToolList = ({ tools, agents, isLoading }) => {
+  const toolsWithAgents = useMemo(() => prepareAgents(tools, agents), [tools, agents]);
+  if (isLoading)
+    return /* @__PURE__ */ jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsx(ToolListSkeleton, {}) });
+  return /* @__PURE__ */ jsx(ToolListInner, { toolsWithAgents });
+};
+const ToolListInner = ({ toolsWithAgents }) => {
+  const [filteredTools, setFilteredTools] = useState(toolsWithAgents);
+  const [value, setValue] = useState("");
+  if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsx(ToolListEmpty, {});
+  const handleSearch = (e) => {
+    const value2 = e.target.value;
+    setValue(value2);
+    startTransition(() => {
+      setFilteredTools(
+        toolsWithAgents.filter(
+          (tool) => tool.id.toLowerCase().includes(value2.toLowerCase()) || tool.description.toLowerCase().includes(value2.toLowerCase()) || tool.agents.some(
+            (agent) => agent.name.toLowerCase().includes(value2.toLowerCase()) || agent.id.toLowerCase().includes(value2.toLowerCase())
+          )
+        )
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-4 flex items-center gap-2 rounded-lg bg-surface5 focus-within:ring-2 focus-within:ring-accent3", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search for a tool",
+            className: "w-full py-2 bg-transparent text-icon3 focus:text-icon6 placeholder:text-icon3 outline-none",
+            value,
+            onChange: handleSearch
+          }
+        )
+      ] }),
+      filteredTools.length === 0 && /* @__PURE__ */ jsx(Txt, { as: "p", className: "text-icon3 py-2", children: "No tools found matching your search." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 xl:grid-cols-3 gap-4 max-w-5xl mx-auto py-8", children: filteredTools.map((tool) => /* @__PURE__ */ jsx(ToolEntity, { tool }, tool.id)) })
+  ] });
+};
+const ToolEntity = ({ tool }) => {
+  const linkRef = useRef(null);
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(ToolsIcon, { className: "group-hover/entity:text-[#ECB047]" }) }),
+    /* @__PURE__ */ jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          ref: linkRef,
+          href: tool.agents.length > 0 ? `/tools/${tool.agents[0].id}/${tool.id}` : `/tools/all/${tool.id}`,
+          children: tool.id
+        }
+      ) }),
+      /* @__PURE__ */ jsx(EntityDescription, { children: tool.description }),
+      /* @__PURE__ */ jsx("div", { className: "inline-flex flex-wrap gap-2 pt-4", children: tool.agents.map((agent) => {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: `/agents/${agent.id}/chat`,
+            onClick: (e) => e.stopPropagation(),
+            className: "group/link",
+            children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(AgentIcon, { className: "group-hover/link:text-accent3" }), className: "bg-surface5 ", children: agent.name })
+          },
+          agent.id
+        );
+      }) })
+    ] })
+  ] });
+};
+const ToolListSkeleton = () => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 xl:grid-cols-3 gap-4 max-w-5xl mx-auto py-8", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
+    ] })
+  ] });
+};
+const ToolListEmpty = () => {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      iconSlot: /* @__PURE__ */ jsx(ToolCoinIcon, {}),
+      titleSlot: "Configure Tools",
+      descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
+      actionSlot: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "lg",
+          className: "w-full",
+          variant: "light",
+          as: "a",
+          href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+          target: "_blank",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ToolsIcon, {}) }),
+            "Docs"
+          ]
+        }
+      )
+    }
+  );
+};
+const prepareAgents = (tools, agents) => {
+  const toolsWithAgents = /* @__PURE__ */ new Map();
+  const agentsKeys = Object.keys(agents);
+  for (const k of agentsKeys) {
+    const agent = agents[k];
+    const agentToolsDict = agent.tools;
+    const agentToolsKeys = Object.keys(agentToolsDict);
+    for (const key of agentToolsKeys) {
+      const tool = agentToolsDict[key];
+      if (!toolsWithAgents.has(tool.id)) {
+        toolsWithAgents.set(tool.id, {
+          ...tool,
+          agents: []
+        });
+      }
+      toolsWithAgents.get(tool.id).agents.push({ id: k, name: agent.name });
+    }
+  }
+  for (const [_, tool] of Object.entries(tools)) {
+    if (!toolsWithAgents.has(tool.id)) {
+      toolsWithAgents.set(tool.id, {
+        ...tool,
+        agents: []
+      });
+    }
+  }
+  return Array.from(toolsWithAgents.values());
+};
+
 function WorkflowTraces({ traces, error, runId, stepName }) {
   return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
 }
@@ -11517,6 +12879,115 @@ const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   ) }, run.runId)) });
 };
 
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    cell: ({ row }) => {
+      const { Link } = useLinkComponent();
+      return /* @__PURE__ */ jsx(
+        EntryCell,
+        {
+          icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
+          name: /* @__PURE__ */ jsx(Link, { href: row.original.link, children: row.original.name }),
+          description: void 0,
+          meta: void 0
+        }
+      );
+    },
+    meta: {
+      width: "auto"
+    }
+  },
+  {
+    id: "stepsCount",
+    header: "Steps",
+    size: 300,
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(Footprints, {}), className: "!h-button-md", children: [
+        row.original.stepsCount,
+        " step",
+        row.original.stepsCount > 1 ? "s" : ""
+      ] }),
+      row.original.isLegacy ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-foreground/80 !h-button-md", children: "Legacy" }) : null
+    ] }) })
+  }
+];
+
+function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
+  const workflowData = useMemo(() => {
+    const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
+      const workflow = workflows?.[key];
+      return {
+        id: key,
+        name: workflow?.name || "N/A",
+        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
+        isLegacy: false,
+        link: `/workflows/${key}/graph`
+      };
+    });
+    const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
+      const workflow = legacyWorkflows?.[key];
+      return {
+        id: key,
+        name: workflow?.name || "N/A",
+        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
+        isLegacy: true,
+        link: `/workflows/legacy/${key}/graph`
+      };
+    });
+    return [..._workflowsData, ...legacyWorkflowsData];
+  }, [workflows, legacyWorkflows]);
+  const table = useReactTable({
+    data: workflowData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (isLoading) return /* @__PURE__ */ jsx(WorkflowTableSkeleton, {});
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyWorkflowsTable, {});
+  }
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => onClickRow(row.original.id), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+  ] }) });
+}
+const WorkflowTableSkeleton = () => /* @__PURE__ */ jsxs(Table, { children: [
+  /* @__PURE__ */ jsxs(Thead, { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsx(Th, { width: 300, children: "Steps" })
+  ] }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { width: 300, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(WorkflowCoinIcon, {}),
+    titleSlot: "Configure Workflows",
+    descriptionSlot: "Mastra workflows are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/workflows/overview",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(WorkflowIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
 const DataTable = ({
   columns,
   data,
@@ -11771,56 +13242,6 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: (e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      className: clsx(
-        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
-        onClick && "cursor-pointer hover:bg-surface4 transition-all",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
-const EntityIcon = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className, children });
-};
-
-const EmptyState = ({
-  iconSlot,
-  titleSlot,
-  descriptionSlot,
-  actionSlot,
-  as: Component = "div"
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-[340px] flex-col items-center justify-center text-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-auto [&>svg]:w-[126px]", children: iconSlot }),
-    /* @__PURE__ */ jsx(Component, { className: "text-icon6 pt-[34px] font-serif text-[1.75rem] font-semibold", children: titleSlot }),
-    /* @__PURE__ */ jsx(Txt, { variant: "ui-lg", className: "text-icon3 pb-[34px]", children: descriptionSlot }),
-    actionSlot
-  ] });
-};
-
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -11928,5 +13349,5 @@ function usePolling({
   };
 }
 
-export { AgentChat, AgentCoinIcon, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useAgentSettings, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
+export { AgentChat, AgentCoinIcon, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentTraces, AgentsTable, AgentsTableSkeleton, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTraces, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, useAgentSettings, useCurrentRun, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map