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

package/dist/index.es.js

@@ -26,7 +26,7 @@ import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { AnimatePresence } from 'motion/react';
-import { C as Colors } from './colors-BauMYA7t.js';
+import { C as Colors } from './colors-B25-HzLf.js';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -7297,6 +7297,22 @@ function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
+const LinkComponentContext = createContext({
+  Link: forwardRef(() => null),
+  navigate: () => {
+  }
+});
+const LinkComponentProvider = ({ children, Link, navigate }) => {
+  return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link, navigate }, children });
+};
+const useLinkComponent = () => {
+  const ctx = useContext(LinkComponentContext);
+  if (!ctx) {
+    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
+  }
+  return ctx;
+};
+
 const OpenaiChatIcon = (props) => /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" }) });
 
 const AnthropicChatIcon = (props) => /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" }) });
@@ -7718,20 +7734,6 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxs(
   }
 );
 
-const LinkComponentContext = createContext({
-  Link: forwardRef(() => null)
-});
-const LinkComponentProvider = ({ children, Link }) => {
-  return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link }, children });
-};
-const useLinkComponent = () => {
-  const ctx = useContext(LinkComponentContext);
-  if (!ctx) {
-    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
-  }
-  return ctx;
-};
-
 const providerMapToIcon = {
   "openai.chat": /* @__PURE__ */ jsx(OpenaiChatIcon, {}),
   "anthropic.chat": /* @__PURE__ */ jsx(AnthropicChatIcon, {}),
@@ -7744,6 +7746,7 @@ const providerMapToIcon = {
   X_GROK: /* @__PURE__ */ jsx(XGroqIcon, {}),
   MISTRAL: /* @__PURE__ */ jsx(MistralIcon, {})
 };
+
 const NameCell = ({ row }) => {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsx(
@@ -7791,7 +7794,8 @@ const columns$2 = [
   }
 ];
 
-function AgentsTable({ agents, isLoading, onClickRow }) {
+function AgentsTable({ agents, isLoading, computeLink }) {
+  const { navigate } = useLinkComponent();
   const projectData = useMemo(
     () => Object.keys(agents).map((key) => {
       const agent = agents[key];
@@ -7805,7 +7809,7 @@ function AgentsTable({ agents, isLoading, onClickRow }) {
         repoUrl: void 0,
         tools: agent.tools,
         modelId: agent.modelId,
-        link: `/agents/${key}/chat/new`
+        link: computeLink(key)
       };
     }),
     [agents]
@@ -7823,7 +7827,7 @@ function AgentsTable({ agents, isLoading, onClickRow }) {
   }
   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)) })
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
   ] }) });
 }
 const AgentsTableSkeleton = () => /* @__PURE__ */ jsxs(Table, { children: [
@@ -7898,7 +7902,7 @@ const RuntimeContext = () => {
     const formatted = await formatJSON(runtimeContextValue);
     setRuntimeContextValue(formatted);
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__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: [
@@ -7923,7 +7927,7 @@ const RuntimeContext = () => {
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveRuntimeContext, children: "Save" }) })
-  ] });
+  ] }) });
 };
 const RuntimeContextWrapper = ({ children }) => {
   const { Link } = useLinkComponent();
@@ -9582,7 +9586,8 @@ function WorkflowDefaultNode({
           step?.status === "success" && "ring-2 ring-accent1",
           step?.status === "failed" && "ring-2 ring-accent2",
           step?.status === "suspended" && "ring-2 ring-accent3",
-          step?.status === "waiting" && "ring-2 ring-accent5"
+          step?.status === "waiting" && "ring-2 ring-accent5",
+          step?.status === "running" && "ring-2 ring-accent6"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9591,7 +9596,7 @@ function WorkflowDefaultNode({
               step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
               step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
               step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" }),
               !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
             ] }),
             /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
@@ -9884,7 +9889,8 @@ function WorkflowNestedNode({
           step?.status === "success" && "ring-2 ring-accent1",
           step?.status === "failed" && "ring-2 ring-accent2",
           step?.status === "suspended" && "ring-2 ring-accent3",
-          step?.status === "waiting" && "ring-2 ring-accent5"
+          step?.status === "waiting" && "ring-2 ring-accent5",
+          step?.status === "running" && "ring-2 ring-accent6"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9893,7 +9899,7 @@ function WorkflowNestedNode({
               step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
               step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
               step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" }),
               !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
             ] }),
             /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
@@ -11124,7 +11130,8 @@ const columns$1 = [
   }
 ];
 
-const NetworkTable = ({ legacyNetworks, networks, isLoading, onClickRow }) => {
+const NetworkTable = ({ legacyNetworks, networks, isLoading, computeLink }) => {
+  const { navigate } = useLinkComponent();
   const allNetworks = useMemo(
     () => [
       ...legacyNetworks?.map((network) => ({
@@ -11157,7 +11164,15 @@ const NetworkTable = ({ legacyNetworks, networks, isLoading, onClickRow }) => {
   }
   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)) })
+    /* @__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
+    )) })
   ] }) });
 };
 const NetworkTableEmpty = () => {
@@ -11239,13 +11254,17 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className, children });
 };
 
-const ToolList = ({ tools, agents, isLoading }) => {
+const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   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 });
+  return /* @__PURE__ */ jsx(ToolListInner, { toolsWithAgents, computeLink, computeAgentLink });
 };
-const ToolListInner = ({ toolsWithAgents }) => {
+const ToolListInner = ({
+  toolsWithAgents,
+  computeLink,
+  computeAgentLink
+}) => {
   const [filteredTools, setFilteredTools] = useState(toolsWithAgents);
   const [value, setValue] = useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsx(ToolListEmpty, {});
@@ -11279,29 +11298,22 @@ const ToolListInner = ({ toolsWithAgents }) => {
       ] }),
       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)) })
+    /* @__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, computeLink, computeAgentLink }, tool.id)) })
   ] });
 };
-const ToolEntity = ({ tool }) => {
+const ToolEntity = ({ tool, computeLink, computeAgentLink }) => {
   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(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: computeLink(tool.id, tool.agents[0]?.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`,
+            href: computeAgentLink(tool.id, agent.id),
             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 })
@@ -12585,7 +12597,7 @@ const WorkflowStatus = ({ stepId, status, result }) => {
           status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
           status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
           status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
+          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" })
         ] }),
         /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
       ] }),
@@ -12756,6 +12768,7 @@ function WorkflowTrigger({
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
   const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  const doneStatuses = ["success", "failed", "canceled"];
   return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
@@ -12823,7 +12836,7 @@ function WorkflowTrigger({
           className: "w-full",
           size: "lg",
           onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun || result?.payload?.workflowState?.status && doneStatuses.includes(result?.payload?.workflowState?.status),
           children: [
             isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
             cancelResponse?.message || "Cancel Workflow Run"
@@ -12914,7 +12927,8 @@ const columns = [
   }
 ];
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
+function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
+  const { navigate } = useLinkComponent();
   const workflowData = useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
       const workflow = workflows?.[key];
@@ -12923,7 +12937,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
         name: workflow?.name || "N/A",
         stepsCount: Object.keys(workflow?.steps ?? {})?.length,
         isLegacy: false,
-        link: `/workflows/${key}/graph`
+        link: computeLink(key)
       };
     });
     const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
@@ -12933,7 +12947,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
         name: workflow?.name || "N/A",
         stepsCount: Object.keys(workflow?.steps ?? {})?.length,
         isLegacy: true,
-        link: `/workflows/legacy/${key}/graph`
+        link: computeLink(key)
       };
     });
     return [..._workflowsData, ...legacyWorkflowsData];
@@ -12951,7 +12965,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
   }
   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)) })
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(row.original.link), 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: [
@@ -13349,5 +13363,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, 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 };
+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, providerMapToIcon, useAgentSettings, useCurrentRun, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map