@mastra/playground-ui 6.2.1 → 6.2.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @mastra/playground-ui
 
+## 6.2.2-alpha.0
+
+### Patch Changes
+
+- dependencies updates: ([#7980](https://github.com/mastra-ai/mastra/pull/7980))
+  - Updated dependency [`zod@^4.1.8` ↗︎](https://www.npmjs.com/package/zod/v/4.1.8) (from `^4.1.5`, in `dependencies`)
+
+- Get rid off swr one for all ([#7931](https://github.com/mastra-ai/mastra/pull/7931))
+
+- Updated dependencies [[`a61f23f`](https://github.com/mastra-ai/mastra/commit/a61f23fbbca4b88b763d94f1d784c47895ed72d7), [`d1dc606`](https://github.com/mastra-ai/mastra/commit/d1dc6067b0557a71190b68d56ee15b48c26d2411), [`d3bd4d4`](https://github.com/mastra-ai/mastra/commit/d3bd4d482a685bbb67bfa89be91c90dca3fa71ad)]:
+  - @mastra/client-js@0.13.2-alpha.0
+  - @mastra/core@0.17.2-alpha.0
+
 ## 6.2.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -8495,10 +8495,24 @@ const ScrollableContainer = ({
 const LinkComponentContext = React.createContext({
   Link: React.forwardRef(() => null),
   navigate: () => {
+  },
+  paths: {
+    agentLink: () => "",
+    agentsLink: () => "",
+    agentToolLink: () => "",
+    agentThreadLink: () => "",
+    agentNewThreadLink: () => "",
+    workflowsLink: () => "",
+    workflowLink: () => "",
+    networkLink: () => "",
+    networkNewThreadLink: () => "",
+    networkThreadLink: () => "",
+    scorerLink: () => "",
+    toolLink: () => ""
   }
 });
-const LinkComponentProvider = ({ children, Link, navigate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponentContext.Provider, { value: { Link, navigate }, children });
+const LinkComponentProvider = ({ children, Link, navigate, paths }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponentContext.Provider, { value: { Link, navigate, paths }, children });
 };
 const useLinkComponent = () => {
   const ctx = React.useContext(LinkComponentContext);
@@ -8543,8 +8557,8 @@ const columns$3 = [
   }
 ];
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
-  const { navigate } = useLinkComponent();
+function WorkflowTable({ workflows, legacyWorkflows, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const workflowData = React.useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
       const workflow = workflows?.[key];
@@ -8553,7 +8567,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
         name: workflow?.name || "N/A",
         stepsCount: Object.keys(workflow?.steps ?? {})?.length,
         isLegacy: false,
-        link: computeLink(key)
+        link: paths.workflowLink(key)
       };
     });
     const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
@@ -8563,7 +8577,7 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
         name: workflow?.name || "N/A",
         stepsCount: Object.keys(workflow?.steps ?? {})?.length,
         isLegacy: true,
-        link: computeLink(key)
+        link: paths.workflowLink(key)
       };
     });
     return [..._workflowsData, ...legacyWorkflowsData];
@@ -12275,8 +12289,8 @@ const columns$2 = [
   }
 ];
 
-function AgentsTable({ agents, isLoading, computeLink }) {
-  const { navigate } = useLinkComponent();
+function AgentsTable({ agents, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const projectData = React.useMemo(
     () => Object.keys(agents).map((key) => {
       const agent = agents[key];
@@ -12290,7 +12304,7 @@ function AgentsTable({ agents, isLoading, computeLink }) {
         repoUrl: void 0,
         tools: agent.tools,
         modelId: agent.modelId,
-        link: computeLink(key)
+        link: paths.agentLink(key)
       };
     }),
     [agents]
@@ -14028,8 +14042,8 @@ const columns$1 = [
   }
 ];
 
-function ScorersTable({ scorers, isLoading, computeScorerLink }) {
-  const { navigate } = useLinkComponent();
+function ScorersTable({ scorers, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const scorersData = React.useMemo(
     () => Object.keys(scorers).map((key) => {
       const scorer = scorers[key];
@@ -14054,7 +14068,7 @@ function ScorersTable({ scorers, isLoading, computeScorerLink }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { 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: () => navigate(computeScorerLink(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(paths.scorerLink(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)) })
   ] }) });
 }
 const ScorersTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
@@ -14339,21 +14353,18 @@ const AgentMetadataModelSwitcher = ({
   ] }) });
 };
 
-const AgentMetadataNetworkList = ({ agents, computeAgentLink }) => {
-  const { Link } = useLinkComponent();
+const AgentMetadataNetworkList = ({ agents }) => {
+  const { Link, paths } = useLinkComponent();
   if (agents.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No tools" });
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No agents" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeAgentLink(agent), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
 const AgentMetadata = ({
+  agentId,
   agent,
   promptSlot,
   hasMemoryEnabled,
-  computeAgentLink,
-  computeToolLink,
-  computeWorkflowLink,
-  computeScorerLink,
   updateModel,
   modelProviders
 }) => {
@@ -14407,7 +14418,7 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/overview",
           title: "Agents documentation"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataNetworkList, { agents: networkAgents, computeAgentLink })
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataNetworkList, { agents: networkAgents })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -14418,7 +14429,7 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
           title: "Using Tools and MCP documentation"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataToolList, { tools, computeToolLink })
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataToolList, { tools, agentId })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -14429,29 +14440,29 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/workflows/overview",
           title: "Workflows documentation"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkflowList, { workflows })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT", computeScorerLink }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "System Prompt", children: promptSlot })
   ] });
 };
-const AgentMetadataToolList = ({ tools, computeToolLink }) => {
-  const { Link } = useLinkComponent();
+const AgentMetadataToolList = ({ tools, agentId }) => {
+  const { Link, paths } = useLinkComponent();
   if (tools.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No tools" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeToolLink(tool), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentToolLink(agentId, tool.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
 };
-const AgentMetadataWorkflowList = ({ workflows, computeWorkflowLink }) => {
-  const { Link } = useLinkComponent();
+const AgentMetadataWorkflowList = ({ workflows }) => {
+  const { Link, paths } = useLinkComponent();
   if (workflows.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No workflows" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeWorkflowLink(workflow.id, workflow), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(workflow.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
 };
-const AgentMetadataScorerList = ({ entityId, entityType, computeScorerLink }) => {
-  const { Link } = useLinkComponent();
+const AgentMetadataScorerList = ({ entityId, entityType }) => {
+  const { Link, paths } = useLinkComponent();
   const { scorers, isLoading } = useScorers();
   const scorerList = Object.keys(scorers).filter((scorerKey) => {
     const scorer = scorers[scorerKey];
@@ -14466,7 +14477,7 @@ const AgentMetadataScorerList = ({ entityId, entityType, computeScorerLink }) =>
   if (scorerList.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No Scorers" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeScorerLink(scorer.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
 const AgentMetadataPrompt = ({ prompt }) => {
@@ -14599,31 +14610,26 @@ AlertDialog.Description = AlertDialogDescription;
 AlertDialog.Action = AlertDialogAction;
 AlertDialog.Cancel = AlertDialogCancel;
 
-const ChatThreads = ({
-  computeNewThreadLink,
-  computeThreadLink,
-  threads,
-  isLoading,
-  threadId,
-  onDelete
-}) => {
-  const { Link } = useLinkComponent();
+const ChatThreads = ({ threads, isLoading, threadId, onDelete, resourceId, resourceType }) => {
+  const { Link, paths } = useLinkComponent();
   const [deleteId, setDeleteId] = React.useState(null);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(ChatThreadSkeleton, {});
   }
   const reverseThreads = [...threads].reverse();
+  const newThreadLink = resourceType === "agent" ? paths.agentNewThreadLink(resourceId) : paths.networkNewThreadLink(resourceId);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: computeNewThreadLink(), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: newThreadLink, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
         "New Chat"
       ] }) }) }),
       reverseThreads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5 max-w-[12rem]", children: "Your conversations will appear here once you start chatting!" }),
       reverseThreads.map((thread) => {
         const isActive = thread.id === threadId;
+        const threadLink = resourceType === "agent" ? paths.agentThreadLink(resourceId, thread.id) : paths.networkThreadLink(resourceId, thread.id);
         return /* @__PURE__ */ jsxRuntime.jsxs(ThreadItem, { isActive, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: computeThreadLink(thread.id), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: threadLink, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ThreadTitle, { title: thread.title }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDay(thread.createdAt) })
           ] }),
@@ -15673,8 +15679,8 @@ const columns = [
   }
 ];
 
-const NetworkTable = ({ networks, isLoading, computeLink }) => {
-  const { navigate } = useLinkComponent();
+const NetworkTable = ({ networks, isLoading }) => {
+  const { navigate, paths } = useLinkComponent();
   const allNetworks = React.useMemo(
     () => [
       ...networks?.map((network) => ({
@@ -15700,7 +15706,7 @@ const NetworkTable = ({ networks, isLoading, computeLink }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { 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: () => navigate(computeLink(row.original.id)), 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)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(paths.networkLink(row.original.id)), 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 = () => {
@@ -15841,17 +15847,13 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
 };
 
-const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
+const ToolList = ({ tools, agents, isLoading }) => {
   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, computeLink, computeAgentLink });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolListInner, { toolsWithAgents });
 };
-const ToolListInner = ({
-  toolsWithAgents,
-  computeLink,
-  computeAgentLink
-}) => {
+const ToolListInner = ({ toolsWithAgents }) => {
   const [filteredTools, setFilteredTools] = React.useState(toolsWithAgents);
   const [value, setValue] = React.useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsxRuntime.jsx(ToolListEmpty, {});
@@ -15872,22 +15874,22 @@ const ToolListInner = ({
       /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: handleSearch, label: "Search for a tool", placeholder: "Search for a tool" }),
       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, computeLink, computeAgentLink }, 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 }, tool.id)) })
   ] });
 };
-const ToolEntity = ({ tool, computeLink, computeAgentLink }) => {
+const ToolEntity = ({ tool }) => {
   const linkRef = React.useRef(null);
-  const { Link } = useLinkComponent();
+  const { Link, paths } = 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: computeLink(tool.id, tool.agents[0]?.id), children: tool.id }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: paths.toolLink(tool.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: computeAgentLink(tool.id, agent.id),
+            href: paths.agentToolLink(agent.id, tool.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 })
@@ -17869,14 +17871,15 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   );
 }
 
-function getTraceInfo(trace, computeAgentsLink, computeWorkflowsLink) {
+function useTraceInfo(trace) {
+  const { paths } = useLinkComponent();
   if (!trace) {
     return [];
   }
-  const agentsLink = computeAgentsLink ? computeAgentsLink() : "/agents";
-  const workflowsLink = computeWorkflowsLink ? computeWorkflowsLink() : "/workflows";
-  const agentLink = computeAgentsLink ? `${agentsLink}/${trace?.metadata?.resourceId}` : `/agents/${trace?.metadata?.resourceId}`;
-  const workflowLink = computeWorkflowsLink ? `${workflowsLink}/${trace?.metadata?.resourceId}` : `/workflows/${trace?.metadata?.resourceId}`;
+  const agentsLink = paths.agentsLink();
+  const workflowsLink = paths.workflowsLink();
+  const agentLink = paths.agentLink(trace?.metadata?.resourceId);
+  const workflowLink = paths.workflowLink(trace?.metadata?.resourceId);
   return [
     {
       key: "entityId",
@@ -18025,15 +18028,14 @@ function TraceDialog({
   onClose,
   onNext,
   onPrevious,
-  isLoadingSpans,
-  computeAgentsLink,
-  computeWorkflowsLink
+  isLoadingSpans
 }) {
   const { Link } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
   const [selectedSpanId, setSelectedSpanId] = React.useState(void 0);
   const [combinedView, setCombinedView] = React.useState(false);
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
+  const traceInfo = useTraceInfo(traceDetails);
   const hierarchicalSpans = React.useMemo(() => {
     return formatHierarchicalSpans(traceSpans);
   }, [traceSpans]);
@@ -18077,7 +18079,6 @@ function TraceDialog({
     const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
     return currentIndex > 0;
   };
-  const traceInfo = getTraceInfo(traceDetails, computeAgentsLink, computeWorkflowsLink);
   const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18300,7 +18301,7 @@ function MainContentContent({
           "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
           "grid place-items-center": isCentered,
           "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
-          "grid-cols-[auto_1fr_1fr]": isDivided && hasLeftServiceColumn,
+          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
           "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
         },
         className