@mastra/playground-ui 5.1.13-alpha.0 → 5.1.13-alpha.2

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, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, Braces, SaveIcon, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, 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';
@@ -44,7 +44,7 @@ import { Highlight, themes } from 'prism-react-renderer';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { useDebouncedCallback } from 'use-debounce';
 import { v4 } from '@lukeed/uuid';
-import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/runtime-context';
+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';
@@ -5176,7 +5176,7 @@ function MastraRuntimeProvider({
     providerOptions
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = useRef({});
-  const runtimeContextInstance = new RuntimeContext();
+  const runtimeContextInstance = new RuntimeContext$1();
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
@@ -7725,7 +7725,11 @@ const LinkComponentProvider = ({ children, Link }) => {
   return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link }, children });
 };
 const useLinkComponent = () => {
-  return useContext(LinkComponentContext);
+  const ctx = useContext(LinkComponentContext);
+  if (!ctx) {
+    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
+  }
+  return ctx;
 };
 
 const providerMapToIcon = {
@@ -7751,7 +7755,7 @@ const NameCell = ({ row }) => {
     }
   );
 };
-const columns = [
+const columns$2 = [
   {
     header: "Name",
     accessorKey: "name",
@@ -7788,24 +7792,27 @@ const columns = [
 ];
 
 function AgentsTable({ agents, isLoading, onClickRow }) {
-  const _agents = agents || {};
-  const projectData = 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
-    };
-  });
+  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: columns$2,
     getCoreRowModel: getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsx(AgentsTableSkeleton, {});
@@ -7855,6 +7862,83 @@ const EmptyAgentsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-f
   }
 ) });
 
+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;
 };
@@ -10497,7 +10581,7 @@ function VNextMastraNetworkRuntimeProvider({
   const { chatWithLoop, maxIterations } = useContext(NetworkContext);
   const id = runIdRef.current;
   const currentState = id ? state[id] : void 0;
-  const runtimeContextInstance = new RuntimeContext$1();
+  const runtimeContextInstance = new RuntimeContext$2();
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
@@ -10989,6 +11073,309 @@ const VNextNetworkChat = ({
   ) }, 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, row.original.isVNext || false), 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 }) });
 }
@@ -12492,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,
@@ -12746,41 +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 });
-};
-
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -12888,5 +13349,5 @@ function usePolling({
   };
 }
 
-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, 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, 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, WorkingMemoryContext, WorkingMemoryProvider, useAgentSettings, useCurrentRun, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useWorkingMemory };
+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