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

package/dist/{colors-BauMYA7t.js → colors-B25-HzLf.js}

@@ -8,7 +8,8 @@ const Colors = {
   accent2: "#FF4931",
   accent3: "#267AD2",
   accent4: "#9E57B3",
-  accent5: "#4A9DF2"
+  accent5: "#4A9DF2",
+  accent6: "#FFF176"
 };
 const BorderColors = {
   border1: "rgba(48, 48, 48, 1)",
@@ -24,4 +25,4 @@ const IconColors = {
 };
 
 export { BorderColors as B, Colors as C, IconColors as I };
-//# sourceMappingURL=colors-BauMYA7t.js.map
+//# sourceMappingURL=colors-B25-HzLf.js.map

package/dist/colors-B25-HzLf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-B25-HzLf.js","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n  accent5: '#4A9DF2',\n  accent6: '#FFF176',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":"AAAO,MAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,uBAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,UAAA,GAAa;AAAA,EACxB,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO;AACT;;;;"}

package/dist/{colors-BjoU9dWU.cjs → colors-CD-k9ILs.cjs}

@@ -10,7 +10,8 @@ const Colors = {
   accent2: "#FF4931",
   accent3: "#267AD2",
   accent4: "#9E57B3",
-  accent5: "#4A9DF2"
+  accent5: "#4A9DF2",
+  accent6: "#FFF176"
 };
 const BorderColors = {
   border1: "rgba(48, 48, 48, 1)",
@@ -28,4 +29,4 @@ const IconColors = {
 exports.BorderColors = BorderColors;
 exports.Colors = Colors;
 exports.IconColors = IconColors;
-//# sourceMappingURL=colors-BjoU9dWU.cjs.map
+//# sourceMappingURL=colors-CD-k9ILs.cjs.map

package/dist/colors-CD-k9ILs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-CD-k9ILs.cjs","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n  accent5: '#4A9DF2',\n  accent6: '#FFF176',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":";;AAAO,MAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,uBAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,UAAA,GAAa;AAAA,EACxB,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO;AACT;;;;;;"}

package/dist/index.cjs.js

@@ -28,7 +28,7 @@ const middleware = require('zustand/middleware');
 const dateFns = require('date-fns');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const react$1 = require('motion/react');
-const colors = require('./colors-BjoU9dWU.cjs');
+const colors = require('./colors-CD-k9ILs.cjs');
 const SliderPrimitive = require('@radix-ui/react-slider');
 const LabelPrimitive = require('@radix-ui/react-label');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -7330,6 +7330,22 @@ function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
+const LinkComponentContext = React.createContext({
+  Link: React.forwardRef(() => null),
+  navigate: () => {
+  }
+});
+const LinkComponentProvider = ({ children, Link, navigate }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponentContext.Provider, { value: { Link, navigate }, children });
+};
+const useLinkComponent = () => {
+  const ctx = React.useContext(LinkComponentContext);
+  if (!ctx) {
+    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
+  }
+  return ctx;
+};
+
 const OpenaiChatIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 320 320", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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" }) });
@@ -7751,20 +7767,6 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   }
 );
 
-const LinkComponentContext = React.createContext({
-  Link: React.forwardRef(() => null)
-});
-const LinkComponentProvider = ({ children, Link }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponentContext.Provider, { value: { Link }, children });
-};
-const useLinkComponent = () => {
-  const ctx = React.useContext(LinkComponentContext);
-  if (!ctx) {
-    throw new Error("useLinkComponent must be used within a LinkComponentProvider");
-  }
-  return ctx;
-};
-
 const providerMapToIcon = {
   "openai.chat": /* @__PURE__ */ jsxRuntime.jsx(OpenaiChatIcon, {}),
   "anthropic.chat": /* @__PURE__ */ jsxRuntime.jsx(AnthropicChatIcon, {}),
@@ -7777,6 +7779,7 @@ const providerMapToIcon = {
   X_GROK: /* @__PURE__ */ jsxRuntime.jsx(XGroqIcon, {}),
   MISTRAL: /* @__PURE__ */ jsxRuntime.jsx(MistralIcon, {})
 };
+
 const NameCell = ({ row }) => {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7824,7 +7827,8 @@ const columns$2 = [
   }
 ];
 
-function AgentsTable({ agents, isLoading, onClickRow }) {
+function AgentsTable({ agents, isLoading, computeLink }) {
+  const { navigate } = useLinkComponent();
   const projectData = React.useMemo(
     () => Object.keys(agents).map((key) => {
       const agent = agents[key];
@@ -7838,7 +7842,7 @@ function AgentsTable({ agents, isLoading, onClickRow }) {
         repoUrl: void 0,
         tools: agent.tools,
         modelId: agent.modelId,
-        link: `/agents/${key}/chat/new`
+        link: computeLink(key)
       };
     }),
     [agents]
@@ -7856,7 +7860,7 @@ function AgentsTable({ agents, isLoading, onClickRow }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => onClickRow(row.original.id), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
   ] }) });
 }
 const AgentsTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
@@ -7931,7 +7935,7 @@ const RuntimeContext = () => {
     const formatted = await formatJSON(runtimeContextValue);
     setRuntimeContextValue(formatted);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Runtime Context (JSON)" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -7956,7 +7960,7 @@ const RuntimeContext = () => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleSaveRuntimeContext, children: "Save" }) })
-  ] });
+  ] }) });
 };
 const RuntimeContextWrapper = ({ children }) => {
   const { Link } = useLinkComponent();
@@ -9615,7 +9619,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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9624,7 +9629,7 @@ function WorkflowDefaultNode({
               step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
               step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-accent3" }),
               step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
+              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-accent6 animate-spin" }),
               !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
@@ -9917,7 +9922,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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9926,7 +9932,7 @@ function WorkflowNestedNode({
               step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
               step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-accent3" }),
               step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
+              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-accent6 animate-spin" }),
               !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
@@ -11157,7 +11163,8 @@ const columns$1 = [
   }
 ];
 
-const NetworkTable = ({ legacyNetworks, networks, isLoading, onClickRow }) => {
+const NetworkTable = ({ legacyNetworks, networks, isLoading, computeLink }) => {
+  const { navigate } = useLinkComponent();
   const allNetworks = React.useMemo(
     () => [
       ...legacyNetworks?.map((network) => ({
@@ -11190,7 +11197,15 @@ const NetworkTable = ({ legacyNetworks, networks, isLoading, onClickRow }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => onClickRow(row.original.id, row.original.isVNext || false), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+      Row,
+      {
+        onClick: () => navigate(computeLink(row.original.id, row.original.isVNext || false)),
+        className: "cursor-pointer",
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+      },
+      row.id
+    )) })
   ] }) });
 };
 const NetworkTableEmpty = () => {
@@ -11272,13 +11287,17 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
 };
 
-const ToolList = ({ tools, agents, isLoading }) => {
+const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   const toolsWithAgents = React.useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsxRuntime.jsx(ToolListSkeleton, {}) });
-  return /* @__PURE__ */ jsxRuntime.jsx(ToolListInner, { toolsWithAgents });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolListInner, { toolsWithAgents, computeLink, computeAgentLink });
 };
-const ToolListInner = ({ toolsWithAgents }) => {
+const ToolListInner = ({
+  toolsWithAgents,
+  computeLink,
+  computeAgentLink
+}) => {
   const [filteredTools, setFilteredTools] = React.useState(toolsWithAgents);
   const [value, setValue] = React.useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsxRuntime.jsx(ToolListEmpty, {});
@@ -11312,29 +11331,22 @@ const ToolListInner = ({ toolsWithAgents }) => {
       ] }),
       filteredTools.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", className: "text-icon3 py-2", children: "No tools found matching your search." })
     ] }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToolEntity, { tool }, tool.id)) })
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToolEntity, { tool, computeLink, computeAgentLink }, tool.id)) })
   ] });
 };
-const ToolEntity = ({ tool }) => {
+const ToolEntity = ({ tool, computeLink, computeAgentLink }) => {
   const linkRef = React.useRef(null);
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
     /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "group-hover/entity:text-[#ECB047]" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(EntityContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Link,
-        {
-          ref: linkRef,
-          href: tool.agents.length > 0 ? `/tools/${tool.agents[0].id}/${tool.id}` : `/tools/all/${tool.id}`,
-          children: tool.id
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: computeLink(tool.id, tool.agents[0]?.id), children: tool.id }) }),
       /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: tool.description }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex flex-wrap gap-2 pt-4", children: tool.agents.map((agent) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Link,
           {
-            href: `/agents/${agent.id}/chat`,
+            href: computeAgentLink(tool.id, agent.id),
             onClick: (e) => e.stopPropagation(),
             className: "group/link",
             children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "group-hover/link:text-accent3" }), className: "bg-surface5 ", children: agent.name })
@@ -12618,7 +12630,7 @@ const WorkflowStatus = ({ stepId, status, result }) => {
           status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
           status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-accent3" }),
           status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
-          status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon3 animate-spin" })
+          status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-accent6 animate-spin" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
       ] }),
@@ -12789,6 +12801,7 @@ function WorkflowTrigger({
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
   const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  const doneStatuses = ["success", "failed", "canceled"];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
@@ -12856,7 +12869,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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircle, {}) }),
             cancelResponse?.message || "Cancel Workflow Run"
@@ -12947,7 +12960,8 @@ const columns = [
   }
 ];
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
+function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
+  const { navigate } = useLinkComponent();
   const workflowData = React.useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
       const workflow = workflows?.[key];
@@ -12956,7 +12970,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) => {
@@ -12966,7 +12980,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];
@@ -12984,7 +12998,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => onClickRow(row.original.id), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
   ] }) });
 }
 const WorkflowTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
@@ -13501,6 +13515,7 @@ exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.WorkingMemoryContext = WorkingMemoryContext;
 exports.WorkingMemoryProvider = WorkingMemoryProvider;
+exports.providerMapToIcon = providerMapToIcon;
 exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
 exports.useLinkComponent = useLinkComponent;