@mastra/playground-ui 6.1.4-alpha.2 → 6.2.0-alpha.3

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, Fragment as Fragment$1, isValidElement, Suspense, useId, startTransition } from 'react';
+import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Fragment as Fragment$1, isValidElement, useId, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, HashIcon, EditIcon, LoaderCircle, ExternalLinkIcon, Users, Brain, NetworkIcon, SearchIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, EditIcon, Users, Brain, NetworkIcon, SearchIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon } 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';
@@ -47,7 +47,7 @@ import { v4 } from '@lukeed/uuid';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
-import { CodeBlock as CodeBlock$1 } from 'react-code-block';
+import { CodeBlock } from 'react-code-block';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -60,10 +60,9 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { VisuallyHidden as VisuallyHidden$1 } from '@radix-ui/react-visually-hidden';
 import * as HoverCard from '@radix-ui/react-hover-card';
-import { processDataStream } from '@ai-sdk/ui-utils';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/runtime-context';
 import { format as format$1 } from 'date-fns/format';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new MastraClient({
@@ -4296,19 +4295,6 @@ const SyntaxHighlighter$2 = ({ data, className }) => {
     /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
   ] });
 };
-async function highlight(code, language) {
-  const { codeToTokens, bundledLanguages } = await import('shiki');
-  if (!(language in bundledLanguages)) return null;
-  const { tokens } = await codeToTokens(code, {
-    lang: language,
-    defaultColor: false,
-    themes: {
-      light: "github-light",
-      dark: "github-dark"
-    }
-  });
-  return tokens;
-}
 
 const variantClasses$2 = {
   default: "text-icon3",
@@ -7310,15 +7296,15 @@ function CodeBlockDemo({
   filename,
   className
 }) {
-  return /* @__PURE__ */ jsxs(CodeBlock$1, { code, language, theme: themes.oneDark, children: [
+  return /* @__PURE__ */ jsxs(CodeBlock, { code, language, theme: themes.oneDark, children: [
     filename ? /* @__PURE__ */ jsx("div", { className: "absolute w-full px-6 py-2 pl-4 text-sm rounded bg-mastra-bg-2 text-mastra-el-6/50", children: filename }) : null,
     /* @__PURE__ */ jsx(
-      CodeBlock$1.Code,
+      CodeBlock.Code,
       {
         className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
         children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx(CodeBlock$1.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsx(CodeBlock$1.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock$1.Token, { className: "font-mono text-sm mastra-token" }) })
+          /* @__PURE__ */ jsx(CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsx(CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
         ] }) })
       }
     )
@@ -8488,7 +8474,7 @@ const useLinkComponent = () => {
   return ctx;
 };
 
-const columns$2 = [
+const columns$3 = [
   {
     id: "name",
     header: "Name",
@@ -8550,7 +8536,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
   }, [workflows, legacyWorkflows]);
   const table = useReactTable({
     data: workflowData,
-    columns: columns$2,
+    columns: columns$3,
     getCoreRowModel: getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsx(WorkflowTableSkeleton, {});
@@ -8674,7 +8660,7 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
         }
         const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
         return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsx(
-          ToolFallback$1,
+          ToolFallback,
           {
             toolName: message.toolName,
             argsText: typeof message.args === "string" ? message.args : JSON.stringify(message.args),
@@ -8692,7 +8678,7 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
   );
 };
 
-const ToolFallback$1 = ({ toolName, result, args, ...props }) => {
+const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
 const ToolFallbackInner = ({ toolName, result, args }) => {
@@ -8757,7 +8743,7 @@ const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
       {
         components: {
           Text: MarkdownText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 },
+          tools: { Fallback: ToolFallbackCustom || ToolFallback },
           Reasoning
         }
       }
@@ -10263,7 +10249,7 @@ const createRootToolAssistantMessage = ({
   });
 };
 
-const convertMessage$2 = (message) => {
+const convertMessage$1 = (message) => {
   return message;
 };
 const handleFinishReason = (finishReason) => {
@@ -10977,7 +10963,7 @@ function MastraRuntimeProvider({
   const runtime = useExternalStoreRuntime({
     isRunning,
     messages,
-    convertMessage: convertMessage$2,
+    convertMessage: convertMessage$1,
     onNew,
     onCancel,
     adapters: isReady ? adapters : void 0
@@ -12207,7 +12193,7 @@ const providerMapToIcon = {
   MISTRAL: /* @__PURE__ */ jsx(MistralIcon, {})
 };
 
-const NameCell = ({ row }) => {
+const NameCell$1 = ({ row }) => {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsx(
     EntryCell,
@@ -12218,11 +12204,11 @@ const NameCell = ({ row }) => {
     }
   );
 };
-const columns$1 = [
+const columns$2 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell
+    cell: NameCell$1
   },
   {
     header: "Model",
@@ -12277,7 +12263,7 @@ function AgentsTable({ agents, isLoading, computeLink }) {
   );
   const table = useReactTable({
     data: projectData,
-    columns: columns$1,
+    columns: columns$2,
     getCoreRowModel: getCoreRowModel()
   });
   if (isLoading) return /* @__PURE__ */ jsx(AgentsTableSkeleton, {});
@@ -12432,176 +12418,6 @@ const AgentMetadataWrapper = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "py-2 overflow-y-auto h-full px-5", children });
 };
 
-const useScoresByEntityId = (entityId, entityType, page = 0) => {
-  const client = useMastraClient();
-  const [scores, setScores] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScores = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScoresByEntityId({
-          entityId,
-          entityType,
-          page: page || 0,
-          perPage: 10
-        });
-        setScores(res);
-        setIsLoading(false);
-      } catch (error) {
-        setScores(null);
-        setIsLoading(false);
-      }
-    };
-    fetchScores();
-  }, [entityId, entityType, page]);
-  return { scores, isLoading };
-};
-const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
-  const client = useMastraClient();
-  const [scores, setScores] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScores = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScoresByScorerId({
-          scorerId,
-          page: page || 0,
-          entityId: entityId || void 0,
-          entityType: entityType || void 0,
-          perPage: 10
-        });
-        setScores(res);
-        setIsLoading(false);
-      } catch (error) {
-        setScores(null);
-        setIsLoading(false);
-      }
-    };
-    fetchScores();
-  }, [scorerId, page, entityId, entityType]);
-  return { scores, isLoading };
-};
-const useScorer = (scorerId) => {
-  const client = useMastraClient();
-  const [scorer, setScorer] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScorer = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScorer(scorerId);
-        setScorer(res);
-      } catch (error) {
-        setScorer(null);
-        console.error("Error fetching scorer", error);
-        toast.error("Error fetching scorer");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchScorer();
-  }, [scorerId]);
-  return { scorer, isLoading };
-};
-const useScorers = () => {
-  const client = useMastraClient();
-  const [scorers, setScorers] = useState({});
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScorers = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScorers();
-        setScorers(res);
-      } catch (error) {
-        setScorers({});
-        console.error("Error fetching agents", error);
-        toast.error("Error fetching agents");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchScorers();
-  }, []);
-  return { scorers, isLoading };
-};
-
-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 ScorerList = ({ entityId, entityType }) => {
-  const { scorers, isLoading } = useScorers();
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(ScorerSkeleton, {});
-  }
-  const scorerList = Object.keys(scorers).filter((scorerKey) => {
-    const scorer = scorers[scorerKey];
-    if (entityType === "AGENT") {
-      return scorer.agentIds.includes(entityId);
-    }
-    return scorer.workflowIds.includes(entityId);
-  }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
-  if (scorerList.length === 0) {
-    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No scorers were attached to this agent." });
-  }
-  return /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: scorerList.map((scorer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ScorerEntity, { scorer }) }, scorer.id)) });
-};
-const ScorerSkeleton = () => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
-  ] });
-};
-const ScorerEntity = ({ scorer }) => {
-  const { Link } = useLinkComponent();
-  const linkRef = useRef(null);
-  return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
-    /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(GaugeIcon, { className: "group-hover/entity:text-accent3" }) }),
-    /* @__PURE__ */ jsxs(EntityContent, { children: [
-      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.config.name }) }),
-      /* @__PURE__ */ jsx(EntityDescription, { children: scorer.scorer.config.description }),
-      scorer.sampling?.type === "ratio" && /* @__PURE__ */ jsxs(Badge$1, { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "Sample rate:" }),
-        /* @__PURE__ */ jsx("span", { className: "text-icon6", children: scorer.sampling.rate })
-      ] })
-    ] })
-  ] });
-};
-
 function SearchField(props) {
   return /* @__PURE__ */ jsx(
     InputField,
@@ -14063,92 +13879,264 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
   ] });
 }
 
-const openaiModels = [
-  "o1",
-  "o1-2024-12-17",
-  "o3-mini",
-  "o3-mini-2025-01-31",
-  "o3",
-  "o3-2025-04-16",
-  "o4-mini",
-  "o4-mini-2025-04-16",
-  "codex-mini-latest",
-  "computer-use-preview",
-  "gpt-4.1",
-  "gpt-4.1-2025-04-14",
-  "gpt-4.1-mini",
-  "gpt-4.1-mini-2025-04-14",
-  "gpt-4.1-nano",
-  "gpt-4.1-nano-2025-04-14",
-  "gpt-4o",
-  "gpt-4o-2024-05-13",
-  "gpt-4o-2024-08-06",
-  "gpt-4o-2024-11-20",
-  "gpt-4o-audio-preview",
-  "gpt-4o-audio-preview-2024-10-01",
-  "gpt-4o-audio-preview-2024-12-17",
-  "gpt-4o-search-preview",
-  "gpt-4o-search-preview-2025-03-11",
-  "gpt-4o-mini-search-preview",
-  "gpt-4o-mini-search-preview-2025-03-11",
-  "gpt-4o-mini",
-  "gpt-4o-mini-2024-07-18",
-  "gpt-4-turbo",
-  "gpt-4-turbo-2024-04-09",
-  "gpt-4-turbo-preview",
-  "gpt-4-0125-preview",
-  "gpt-4-1106-preview",
-  "gpt-4",
-  "gpt-4-0613",
-  "gpt-4.5-preview",
-  "gpt-4.5-preview-2025-02-27",
-  "gpt-3.5-turbo-0125",
-  "gpt-3.5-turbo",
-  "gpt-3.5-turbo-1106",
-  "chatgpt-4o-latest",
-  "gpt-5",
-  "gpt-5-2025-08-07",
-  "gpt-5-mini",
-  "gpt-5-mini-2025-08-07",
-  "gpt-5-nano",
-  "gpt-5-nano-2025-08-07",
-  "gpt-5-chat-latest"
-];
-const anthropicModels = [
-  "claude-opus-4-20250514",
-  "claude-sonnet-4-20250514",
-  "claude-3-7-sonnet-20250219",
-  "claude-3-5-sonnet-latest",
-  "claude-3-5-sonnet-20241022",
-  "claude-3-5-sonnet-20240620",
-  "claude-3-5-haiku-latest",
-  "claude-3-5-haiku-20241022",
-  "claude-3-opus-latest",
-  "claude-3-opus-20240229",
-  "claude-3-sonnet-20240229",
-  "claude-3-haiku-20240307"
-];
-const googleModels = [
-  "gemini-1.5-flash",
-  "gemini-1.5-flash-latest",
-  "gemini-1.5-flash-001",
-  "gemini-1.5-flash-002",
-  "gemini-1.5-flash-8b",
-  "gemini-1.5-flash-8b-latest",
-  "gemini-1.5-flash-8b-001",
-  "gemini-1.5-pro",
-  "gemini-1.5-pro-latest",
-  "gemini-1.5-pro-001",
-  "gemini-1.5-pro-002",
-  "gemini-2.0-flash",
-  "gemini-2.0-flash-001",
-  "gemini-2.0-flash-live-001",
-  "gemini-2.0-flash-lite",
-  "gemini-2.0-pro-exp-02-05",
-  "gemini-2.0-flash-thinking-exp-01-21",
-  "gemini-2.0-flash-exp",
-  "gemini-2.5-pro",
-  "gemini-2.5-flash",
+const useScoresByEntityId = (entityId, entityType, page = 0) => {
+  const client = useMastraClient();
+  const [scores, setScores] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByEntityId({
+          entityId,
+          entityType,
+          page: page || 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [entityId, entityType, page]);
+  return { scores, isLoading };
+};
+const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
+  const client = useMastraClient();
+  const [scores, setScores] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByScorerId({
+          scorerId,
+          page: page || 0,
+          entityId: entityId || void 0,
+          entityType: entityType || void 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [scorerId, page, entityId, entityType]);
+  return { scores, isLoading };
+};
+const useScorer = (scorerId) => {
+  const client = useMastraClient();
+  const [scorer, setScorer] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScorer = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorer(scorerId);
+        setScorer(res);
+      } catch (error) {
+        setScorer(null);
+        console.error("Error fetching scorer", error);
+        toast.error("Error fetching scorer");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorer();
+  }, [scorerId]);
+  return { scorer, isLoading };
+};
+const useScorers = () => {
+  const client = useMastraClient();
+  const [scorers, setScorers] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScorers = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorers();
+        setScorers(res);
+      } catch (error) {
+        setScorers({});
+        console.error("Error fetching agents", error);
+        toast.error("Error fetching agents");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorers();
+  }, []);
+  return { scorers, isLoading };
+};
+
+const NameCell = ({ row }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsx(
+    EntryCell,
+    {
+      icon: /* @__PURE__ */ jsx(GaugeIcon, {}),
+      name: /* @__PURE__ */ jsx(Link, { className: "w-full space-y-0", href: row.original.id, children: row.original.name }),
+      description: row.original.description
+    }
+  );
+};
+const columns$1 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell
+  }
+];
+
+function ScorersTable({ scorers, isLoading, computeScorerLink }) {
+  const { navigate } = useLinkComponent();
+  const scorersData = useMemo(
+    () => Object.keys(scorers).map((key) => {
+      const scorer = scorers[key];
+      return {
+        id: key,
+        name: scorer.scorer.config.name,
+        description: scorer.scorer.config.description
+      };
+    }),
+    [scorers]
+  );
+  const table = useReactTable({
+    data: scorersData,
+    columns: columns$1,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (isLoading) return /* @__PURE__ */ jsx(ScorersTableSkeleton, {});
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyScorersTable, {});
+  }
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table$1, { 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: () => navigate(computeScorerLink(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 ScorersTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsx(Th, { children: "Name" }) }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }) }, index)) })
+] });
+const EmptyScorersTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(AgentCoinIcon, {}),
+    titleSlot: "Configure Scorers",
+    descriptionSlot: "Mastra scorers are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/scorers/overview",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(AgentIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const openaiModels = [
+  "o1",
+  "o1-2024-12-17",
+  "o3-mini",
+  "o3-mini-2025-01-31",
+  "o3",
+  "o3-2025-04-16",
+  "o4-mini",
+  "o4-mini-2025-04-16",
+  "codex-mini-latest",
+  "computer-use-preview",
+  "gpt-4.1",
+  "gpt-4.1-2025-04-14",
+  "gpt-4.1-mini",
+  "gpt-4.1-mini-2025-04-14",
+  "gpt-4.1-nano",
+  "gpt-4.1-nano-2025-04-14",
+  "gpt-4o",
+  "gpt-4o-2024-05-13",
+  "gpt-4o-2024-08-06",
+  "gpt-4o-2024-11-20",
+  "gpt-4o-audio-preview",
+  "gpt-4o-audio-preview-2024-10-01",
+  "gpt-4o-audio-preview-2024-12-17",
+  "gpt-4o-search-preview",
+  "gpt-4o-search-preview-2025-03-11",
+  "gpt-4o-mini-search-preview",
+  "gpt-4o-mini-search-preview-2025-03-11",
+  "gpt-4o-mini",
+  "gpt-4o-mini-2024-07-18",
+  "gpt-4-turbo",
+  "gpt-4-turbo-2024-04-09",
+  "gpt-4-turbo-preview",
+  "gpt-4-0125-preview",
+  "gpt-4-1106-preview",
+  "gpt-4",
+  "gpt-4-0613",
+  "gpt-4.5-preview",
+  "gpt-4.5-preview-2025-02-27",
+  "gpt-3.5-turbo-0125",
+  "gpt-3.5-turbo",
+  "gpt-3.5-turbo-1106",
+  "chatgpt-4o-latest",
+  "gpt-5",
+  "gpt-5-2025-08-07",
+  "gpt-5-mini",
+  "gpt-5-mini-2025-08-07",
+  "gpt-5-nano",
+  "gpt-5-nano-2025-08-07",
+  "gpt-5-chat-latest"
+];
+const anthropicModels = [
+  "claude-opus-4-20250514",
+  "claude-sonnet-4-20250514",
+  "claude-3-7-sonnet-20250219",
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-sonnet-20241022",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-5-haiku-latest",
+  "claude-3-5-haiku-20241022",
+  "claude-3-opus-latest",
+  "claude-3-opus-20240229",
+  "claude-3-sonnet-20240229",
+  "claude-3-haiku-20240307"
+];
+const googleModels = [
+  "gemini-1.5-flash",
+  "gemini-1.5-flash-latest",
+  "gemini-1.5-flash-001",
+  "gemini-1.5-flash-002",
+  "gemini-1.5-flash-8b",
+  "gemini-1.5-flash-8b-latest",
+  "gemini-1.5-flash-8b-001",
+  "gemini-1.5-pro",
+  "gemini-1.5-pro-latest",
+  "gemini-1.5-pro-001",
+  "gemini-1.5-pro-002",
+  "gemini-2.0-flash",
+  "gemini-2.0-flash-001",
+  "gemini-2.0-flash-live-001",
+  "gemini-2.0-flash-lite",
+  "gemini-2.0-pro-exp-02-05",
+  "gemini-2.0-flash-thinking-exp-01-21",
+  "gemini-2.0-flash-exp",
+  "gemini-2.5-pro",
+  "gemini-2.5-flash",
   "gemini-2.5-flash-lite",
   "gemini-2.5-pro-exp-03-25",
   "gemini-2.5-flash-preview-04-17",
@@ -14331,6 +14319,7 @@ const AgentMetadata = ({
   computeAgentLink,
   computeToolLink,
   computeWorkflowLink,
+  computeScorerLink,
   updateModel,
   modelProviders
 }) => {
@@ -14409,7 +14398,7 @@ const AgentMetadata = ({
         children: /* @__PURE__ */ jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
       }
     ),
-    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(ScorerList, { entityId: agent.name, entityType: "AGENT" }) }),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT", computeScorerLink }) }),
     /* @__PURE__ */ jsx(AgentMetadataSection, { title: "System Prompt", children: promptSlot })
   ] });
 };
@@ -14427,6 +14416,24 @@ const AgentMetadataWorkflowList = ({ workflows, computeWorkflowLink }) => {
   }
   return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeWorkflowLink(workflow.id, workflow), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
 };
+const AgentMetadataScorerList = ({ entityId, entityType, computeScorerLink }) => {
+  const { Link } = useLinkComponent();
+  const { scorers, isLoading } = useScorers();
+  const scorerList = Object.keys(scorers).filter((scorerKey) => {
+    const scorer = scorers[scorerKey];
+    if (entityType === "AGENT") {
+      return scorer.agentIds.includes(entityId);
+    }
+    return scorer.workflowIds.includes(entityId);
+  }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingBadge, {});
+  }
+  if (scorerList.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No Scorers" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeScorerLink(scorer.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
+};
 
 const AgentMetadataPrompt = ({ prompt }) => {
   return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "bg-surface4 text-icon6 whitespace-pre-wrap rounded-lg px-2 py-1.5 text-sm", children: prompt });
@@ -14649,379 +14656,6 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
-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") {
-              const updatedMessage = {
-                ...lastMessage,
-                content: Array.isArray(lastMessage.content) ? [
-                  ...lastMessage.content,
-                  {
-                    type: "tool-call",
-                    toolCallId: value.toolCallId,
-                    toolName: value.toolName,
-                    args: value.args
-                  }
-                ] : [
-                  ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
-                  {
-                    type: "tool-call",
-                    toolCallId: value.toolCallId,
-                    toolName: value.toolName,
-                    args: value.args
-                  }
-                ]
-              };
-              return [...currentConversation.slice(0, -1), updatedMessage];
-            }
-            const newMessage = {
-              role: "assistant",
-              content: [
-                { type: "text", text: content },
-                {
-                  type: "tool-call",
-                  toolCallId: value.toolCallId,
-                  toolName: value.toolName,
-                  args: value.args
-                }
-              ]
-            };
-            return [...currentConversation, newMessage];
-          });
-        },
-        async onToolResultPart(value) {
-          console.log("Tool call result received:", 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 === "tool-call" && part.toolCallId === value.toolCallId) {
-                  return {
-                    ...part,
-                    result: value.result
-                  };
-                }
-                return part;
-              });
-              const updatedMessage = {
-                ...lastMessage,
-                content: updatedContent
-              };
-              return [...currentConversation.slice(0, -1), updatedMessage];
-            }
-            return currentConversation;
-          });
-        },
-        onErrorPart(error) {
-          throw new Error(error);
-        }
-      });
-      console.log(messages);
-      setIsRunning(false);
-    } catch (error) {
-      console.error("Error occurred in MastraRuntimeProvider", error);
-      setIsRunning(false);
-    }
-  };
-  const runtime = useExternalStoreRuntime({
-    isRunning,
-    messages,
-    convertMessage: convertMessage$1,
-    onNew
-  });
-  return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
-    " ",
-    children,
-    " "
-  ] });
-}
-
-function MarkdownRenderer({ children }) {
-  const processedText = children.replace(/\\n/g, "\n");
-  return /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
-}
-const HighlightedPre = React__default.memo(({ children, language, ...props }) => {
-  const [tokens, setTokens] = useState([]);
-  useEffect(() => {
-    highlight(children, language).then((tokens2) => {
-      if (tokens2) setTokens(tokens2);
-    });
-  }, [children, language]);
-  if (!tokens.length) {
-    return /* @__PURE__ */ jsx("pre", { ...props, children });
-  }
-  return /* @__PURE__ */ jsx("pre", { ...props, children: /* @__PURE__ */ jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: line.map((token, tokenIndex) => {
-      const style = typeof token.htmlStyle === "string" ? void 0 : token.htmlStyle;
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
-          style,
-          children: token.content
-        },
-        tokenIndex
-      );
-    }) }, lineIndex),
-    lineIndex !== tokens.length - 1 && "\n"
-  ] })) }) });
-});
-HighlightedPre.displayName = "HighlightedCode";
-const CodeBlock = ({ children, className, language, ...restProps }) => {
-  const code = typeof children === "string" ? children : childrenTakeAllStringContents(children);
-  const preClass = cn(
-    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
-    className
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "group/code relative mb-4", children: [
-    /* @__PURE__ */ jsx(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ jsx("pre", { className: preClass, ...restProps, children }),
-        children: /* @__PURE__ */ jsx(HighlightedPre, { language, className: preClass, children: code })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })
-  ] });
-};
-function childrenTakeAllStringContents(element) {
-  if (typeof element === "string") {
-    return element;
-  }
-  if (element?.props?.children) {
-    let children = element.props.children;
-    if (Array.isArray(children)) {
-      return children.map((child) => childrenTakeAllStringContents(child)).join("");
-    } else {
-      return childrenTakeAllStringContents(children);
-    }
-  }
-  return "";
-}
-const COMPONENTS = {
-  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", ...props, children }),
-  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "font-semibold text-xl", ...props, children }),
-  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", ...props, children }),
-  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "font-semibold text-base", ...props, children }),
-  h5: ({ children, ...props }) => /* @__PURE__ */ jsx("h5", { className: "font-medium", ...props, children }),
-  strong: ({ children, ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", ...props, children }),
-  a: ({ children, ...props }) => /* @__PURE__ */ jsx("a", { className: "underline underline-offset-2", ...props, children }),
-  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-primary pl-4", ...props, children }),
-  code: ({ children, className, ...rest }) => {
-    const match = /language-(\w+)/.exec(className || "");
-    return match ? /* @__PURE__ */ jsx(CodeBlock, { className, language: match[1], ...rest, children }) : /* @__PURE__ */ jsx(
-      "code",
-      {
-        className: cn(
-          "font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
-        ),
-        ...rest,
-        children
-      }
-    );
-  },
-  pre: ({ children }) => children,
-  ol: ({ children, ...props }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-2 pl-6", ...props, children }),
-  ul: ({ children, ...props }) => /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-2 pl-6", ...props, children }),
-  li: ({ children, ...props }) => /* @__PURE__ */ jsx("li", { className: "my-1.5", ...props, children }),
-  table: ({ children, ...props }) => /* @__PURE__ */ jsx("table", { className: "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20", ...props, children }),
-  th: ({ children, ...props }) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
-      ...props,
-      children
-    }
-  ),
-  td: ({ children, ...props }) => /* @__PURE__ */ jsx(
-    "td",
-    {
-      className: "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
-      ...props,
-      children
-    }
-  ),
-  tr: ({ children, ...props }) => /* @__PURE__ */ jsx("tr", { className: "m-0 border-t p-0 even:bg-muted", ...props, children }),
-  p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap leading-relaxed", ...props, children }),
-  hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "border-foreground/20", ...props })
-};
-
-const purpleClasses = {
-  bg: "bg-[rgba(124,80,175,0.25)]",
-  text: "text-[rgb(180,140,230)]",
-  hover: "hover:text-[rgb(200,160,250)]"};
-const ToolFallback = (props) => {
-  const { toolCallId, toolName, args, argsText, result, status } = props;
-  const [expandedAgents, setExpandedAgents] = useState({});
-  const actions = args?.actions || [];
-  if (actions.length === 0) {
-    return null;
-  }
-  const toggleAgent = (agentId) => {
-    setExpandedAgents((prev) => ({
-      ...prev,
-      [agentId]: !prev[agentId]
-    }));
-  };
-  const extractUrls = (text) => {
-    if (typeof text !== "string") return [];
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
-    return text.match(urlRegex) || [];
-  };
-  return /* @__PURE__ */ jsx("div", { className: "mb-4 w-full rounded-lg border border-gray-700 overflow-hidden shadow-md", children: actions.map((action, index) => {
-    const agentId = `${toolCallId || "tool"}-${action.agent}-${index}`;
-    const isExpanded = expandedAgents[agentId] || false;
-    const urls = result ? extractUrls(result) : [];
-    return /* @__PURE__ */ jsxs("div", { className: `border-b border-gray-700 ${index === actions.length - 1 ? "border-b-0" : ""}`, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center justify-between px-4 py-3 bg-gray-900 hover:bg-gray-800 cursor-pointer",
-          onClick: () => toggleAgent(agentId),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("flex h-6 w-6 items-center justify-center rounded-full", purpleClasses.bg), children: status?.type === "running" ? /* @__PURE__ */ jsx(LoaderCircle, { className: cn("h-4 w-4 animate-spin", purpleClasses.text) }) : /* @__PURE__ */ jsx(CheckIcon$1, { className: cn("h-4 w-4", purpleClasses.text) }) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-gray-100", children: action.agent?.replaceAll("_", " ") }) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: cn("text-xs px-2 py-1 rounded-full", purpleClasses.bg, purpleClasses.text), children: status?.type === "running" ? "Processing..." : "Complete" }),
-              isExpanded ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-4 w-4 text-gray-300" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-300" })
-            ] })
-          ]
-        }
-      ),
-      isExpanded && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-[#111]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Query:" }),
-          /* @__PURE__ */ jsx("div", { className: "p-2 bg-gray-900 rounded border border-gray-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-200 whitespace-pre-wrap", children: action.input }) })
-        ] }),
-        result && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Result:" }),
-          /* @__PURE__ */ jsx("div", { className: "p-2 bg-gray-900 rounded border border-gray-700 max-h-60 overflow-auto", children: typeof result === "string" ? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-200", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: result }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-200 whitespace-pre-wrap", children: JSON.stringify(result, null, 2) }) }),
-          urls.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-300 mb-1", children: "Sources:" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-              urls.slice(0, 3).map((url, i) => /* @__PURE__ */ jsxs(
-                "a",
-                {
-                  href: url,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: cn(
-                    "inline-flex items-center gap-1 text-xs hover:underline",
-                    purpleClasses.text,
-                    purpleClasses.hover
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Source ",
-                      i + 1
-                    ] }),
-                    /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-3 w-3" })
-                  ]
-                },
-                i
-              )),
-              urls.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-400", children: [
-                "+",
-                urls.length - 3,
-                " more"
-              ] })
-            ] })
-          ] })
-        ] })
-      ] })
-    ] }, agentId);
-  }) });
-};
-
 const defaultModelSettings = {
   maxRetries: 2,
   maxSteps: 5,
@@ -15055,11 +14689,6 @@ function NetworkProvider({ children }) {
   );
 }
 
-const NetworkChat = ({ agentId, memory }) => {
-  const { modelSettings } = useContext(NetworkContext);
-  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) });
-};
-
 const VNextNetworkChatContext = createContext(void 0);
 const VNextNetworkChatProvider = ({ children }) => {
   const [state, setState] = useState({});
@@ -15281,7 +14910,7 @@ const NextAssistantMessage = ({
       {
         components: {
           Text: MarkdownText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 }
+          tools: { Fallback: ToolFallbackCustom || ToolFallback }
         }
       }
     ) }),
@@ -15979,14 +15608,7 @@ const columns = [
         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
-            }
-          ),
+          name: /* @__PURE__ */ jsx(Link, { className: "w-full space-y-0", href: `/networks/v-next/${row.original.id}/chat`, children: row.original.name }),
           description: row.original.instructions
         }
       );
@@ -16013,33 +15635,23 @@ const columns = [
   {
     id: "model",
     header: "Routing Models",
-    cell: ({ row }) => /* @__PURE__ */ jsxs(Cell, { className: "truncate", 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
-    ] })
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { className: "truncate", children: /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Brain, {}), children: row.original.routingModel }) })
   }
 ];
 
-const NetworkTable = ({ legacyNetworks, networks, isLoading, computeLink }) => {
+const NetworkTable = ({ networks, isLoading, computeLink }) => {
   const { navigate } = useLinkComponent();
   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
+        toolsSize: network.tools.length
       })) ?? []
     ],
-    [networks, legacyNetworks]
+    [networks]
   );
   const table = useReactTable({
     data: allNetworks,
@@ -16054,15 +15666,7 @@ const NetworkTable = ({ legacyNetworks, networks, isLoading, computeLink }) => {
   }
   return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table$1, { 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: () => navigate(computeLink(row.original.id, row.original.isVNext || false)),
-        className: "cursor-pointer",
-        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-      },
-      row.id
-    )) })
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(computeLink(row.original.id)), className: "cursor-pointer", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
   ] }) });
 };
 const NetworkTableEmpty = () => {
@@ -16168,6 +15772,41 @@ const Searchbar = ({ onSearch, label, placeholder }) => {
   );
 };
 
+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, computeLink, computeAgentLink }) => {
   const toolsWithAgents = useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
@@ -18515,88 +18154,6 @@ function TracesTools({
   ] });
 }
 
-const DataTable = ({
-  columns,
-  data,
-  pagination,
-  gotoNextPage,
-  gotoPreviousPage,
-  getRowId,
-  selectedRowId,
-  isLoading,
-  emptyText,
-  onClick
-}) => {
-  const [sorting, setSorting] = useState([]);
-  const [{ pageIndex, pageSize }, setPagination] = useState({
-    pageIndex: pagination ? Math.floor(pagination.offset / pagination.limit) : 0,
-    pageSize: pagination?.limit ?? 10
-  });
-  const [rowSelection, setRowSelection] = useState({});
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: pagination ? Math.ceil(pagination.total / pagination.limit) : -1,
-    state: {
-      sorting,
-      pagination: {
-        pageIndex,
-        pageSize
-      },
-      rowSelection
-    },
-    getRowId,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    enableRowSelection: true,
-    enableMultiRowSelection: false,
-    onRowSelectionChange: setRowSelection
-  });
-  const emptyNode = /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: columns.length, children: /* @__PURE__ */ jsxs("div", { className: "py-12 text-center w-full", children: [
-    "No ",
-    emptyText || "results"
-  ] }) }) });
-  const ths = table.getHeaderGroups()[0];
-  const rows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0 bg-surface2", children: ths.headers.map((header) => {
-        const size = header.column.getSize();
-        const meta = header.column.columnDef.meta;
-        return /* @__PURE__ */ jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
-      }) }),
-      /* @__PURE__ */ jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsx(Row, { onClick: () => {
-      }, children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsx(
-        Row,
-        {
-          "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected",
-          onClick: () => onClick?.(row.original),
-          children: row.getVisibleCells().map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext()))
-        },
-        row.id
-      )) : emptyNode })
-    ] }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-sm", children: [
-        "Showing ",
-        pagination.offset + 1,
-        " to ",
-        Math.min(pagination.offset + data.length, pagination.total),
-        " of",
-        " ",
-        pagination.total,
-        " results"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-6 lg:space-x-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx(Button$2, { variant: "outline", size: "sm", onClick: gotoPreviousPage, disabled: !pagination.offset, children: "Previous" }),
-        /* @__PURE__ */ jsx(Button$2, { variant: "outline", size: "sm", onClick: gotoNextPage, disabled: !pagination.hasMore, children: "Next" })
-      ] }) })
-    ] })
-  ] });
-};
-
 function MainContentLayout({
   children,
   className,
@@ -19117,5 +18674,5 @@ const MemorySearch = ({
   ] });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorerList, ScorerSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useExecuteWorkflow, useInView, useLegacyWorkflow, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useResumeWorkflow, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWatchWorkflow, useWorkflow, useWorkflowRuns, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useExecuteWorkflow, useInView, useLegacyWorkflow, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useResumeWorkflow, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWatchWorkflow, useWorkflow, useWorkflowRuns, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map