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

package/dist/index.es.js

@@ -4287,7 +4287,10 @@ const useCodemirrorTheme$2 = () => {
     []
   );
 };
-const SyntaxHighlighter$2 = ({ data, className }) => {
+const SyntaxHighlighter$2 = ({
+  data,
+  className
+}) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4460,7 +4463,7 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
+const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
@@ -4468,7 +4471,7 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
   return /* @__PURE__ */ jsx(
     BadgeWrapper,
     {
@@ -4486,9 +4489,13 @@ const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        resultSlot !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
+        ] }),
+        toolOutput.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
+          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput }) })
         ] })
       ] })
     }
@@ -8461,10 +8468,24 @@ const ScrollableContainer = ({
 const LinkComponentContext = createContext({
   Link: forwardRef(() => null),
   navigate: () => {
+  },
+  paths: {
+    agentLink: () => "",
+    agentsLink: () => "",
+    agentToolLink: () => "",
+    agentThreadLink: () => "",
+    agentNewThreadLink: () => "",
+    workflowsLink: () => "",
+    workflowLink: () => "",
+    networkLink: () => "",
+    networkNewThreadLink: () => "",
+    networkThreadLink: () => "",
+    scorerLink: () => "",
+    toolLink: () => ""
   }
 });
-const LinkComponentProvider = ({ children, Link, navigate }) => {
-  return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link, navigate }, children });
+const LinkComponentProvider = ({ children, Link, navigate, paths }) => {
+  return /* @__PURE__ */ jsx(LinkComponentContext.Provider, { value: { Link, navigate, paths }, children });
 };
 const useLinkComponent = () => {
   const ctx = useContext(LinkComponentContext);
@@ -8509,8 +8530,8 @@ const columns$3 = [
   }
 ];
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
-  const { navigate } = useLinkComponent();
+function WorkflowTable({ workflows, legacyWorkflows, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const workflowData = useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
       const workflow = workflows?.[key];
@@ -8519,7 +8540,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) => {
@@ -8529,7 +8550,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];
@@ -8714,6 +8735,7 @@ const ToolFallbackInner = ({ toolName, result, args }) => {
       toolName,
       args,
       result,
+      toolOutput: args?.__mastraMetadata?.toolOutput || [],
       networkMetadata: args?.__mastraMetadata?.networkMetadata
     }
   );
@@ -9862,6 +9884,34 @@ const handleStreamChunk = async ({
     case "tool-output": {
       if (chunk.payload.output?.type.startsWith("workflow-")) {
         handleWorkflowChunk({ workflowChunk: chunk.payload.output, setMessages, entityName: chunk.payload.toolName });
+      } else {
+        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 === chunk.payload.toolCallId) {
+                const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
+                return {
+                  ...part,
+                  args: {
+                    ...part.args,
+                    __mastraMetadata: {
+                      ...part.args?.__mastraMetadata,
+                      toolOutput: [...existingToolOutput, chunk?.payload?.output]
+                    }
+                  }
+                };
+              }
+              return part;
+            });
+            const updatedMessage = {
+              ...lastMessage,
+              content: updatedContent
+            };
+            return [...currentConversation.slice(0, -1), updatedMessage];
+          }
+          return currentConversation;
+        });
       }
       break;
     }
@@ -12241,8 +12291,8 @@ const columns$2 = [
   }
 ];
 
-function AgentsTable({ agents, isLoading, computeLink }) {
-  const { navigate } = useLinkComponent();
+function AgentsTable({ agents, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const projectData = useMemo(
     () => Object.keys(agents).map((key) => {
       const agent = agents[key];
@@ -12256,7 +12306,7 @@ function AgentsTable({ agents, isLoading, computeLink }) {
         repoUrl: void 0,
         tools: agent.tools,
         modelId: agent.modelId,
-        link: computeLink(key)
+        link: paths.agentLink(key)
       };
     }),
     [agents]
@@ -13994,8 +14044,8 @@ const columns$1 = [
   }
 ];
 
-function ScorersTable({ scorers, isLoading, computeScorerLink }) {
-  const { navigate } = useLinkComponent();
+function ScorersTable({ scorers, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
   const scorersData = useMemo(
     () => Object.keys(scorers).map((key) => {
       const scorer = scorers[key];
@@ -14020,7 +14070,7 @@ function ScorersTable({ scorers, isLoading, computeScorerLink }) {
   }
   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)) })
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(paths.scorerLink(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: [
@@ -14305,21 +14355,18 @@ const AgentMetadataModelSwitcher = ({
   ] }) });
 };
 
-const AgentMetadataNetworkList = ({ agents, computeAgentLink }) => {
-  const { Link } = useLinkComponent();
+const AgentMetadataNetworkList = ({ agents }) => {
+  const { Link, paths } = useLinkComponent();
   if (agents.length === 0) {
-    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No agents" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeAgentLink(agent), children: /* @__PURE__ */ jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentLink(agent.id), children: /* @__PURE__ */ jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
 const AgentMetadata = ({
+  agentId,
   agent,
   promptSlot,
   hasMemoryEnabled,
-  computeAgentLink,
-  computeToolLink,
-  computeWorkflowLink,
-  computeScorerLink,
   updateModel,
   modelProviders
 }) => {
@@ -14373,7 +14420,7 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/overview",
           title: "Agents documentation"
         },
-        children: /* @__PURE__ */ jsx(AgentMetadataNetworkList, { agents: networkAgents, computeAgentLink })
+        children: /* @__PURE__ */ jsx(AgentMetadataNetworkList, { agents: networkAgents })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -14384,7 +14431,7 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
           title: "Using Tools and MCP documentation"
         },
-        children: /* @__PURE__ */ jsx(AgentMetadataToolList, { tools, computeToolLink })
+        children: /* @__PURE__ */ jsx(AgentMetadataToolList, { tools, agentId })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -14395,29 +14442,29 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/workflows/overview",
           title: "Workflows documentation"
         },
-        children: /* @__PURE__ */ jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
+        children: /* @__PURE__ */ jsx(AgentMetadataWorkflowList, { workflows })
       }
     ),
-    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT", computeScorerLink }) }),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT" }) }),
     /* @__PURE__ */ 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__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeToolLink(tool), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentToolLink(agentId, tool.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ 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__ */ jsx(AgentMetadataListEmpty, { children: "No workflows" });
   }
-  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)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.workflowLink(workflow.id), 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 AgentMetadataScorerList = ({ entityId, entityType }) => {
+  const { Link, paths } = useLinkComponent();
   const { scorers, isLoading } = useScorers();
   const scorerList = Object.keys(scorers).filter((scorerKey) => {
     const scorer = scorers[scorerKey];
@@ -14432,7 +14479,7 @@ const AgentMetadataScorerList = ({ entityId, entityType, computeScorerLink }) =>
   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)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.scorerLink(scorer.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
 const AgentMetadataPrompt = ({ prompt }) => {
@@ -14565,31 +14612,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] = useState(null);
   if (isLoading) {
     return /* @__PURE__ */ jsx(ChatThreadSkeleton, {});
   }
   const reverseThreads = [...threads].reverse();
+  const newThreadLink = resourceType === "agent" ? paths.agentNewThreadLink(resourceId) : paths.networkNewThreadLink(resourceId);
   return /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
     /* @__PURE__ */ jsx(Threads, { children: /* @__PURE__ */ jsxs(ThreadList, { children: [
-      /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: computeNewThreadLink(), children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: newThreadLink, children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
         /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
         "New Chat"
       ] }) }) }),
       reverseThreads.length === 0 && /* @__PURE__ */ 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__ */ jsxs(ThreadItem, { isActive, children: [
-          /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: computeThreadLink(thread.id), children: [
+          /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: threadLink, children: [
             /* @__PURE__ */ jsx(ThreadTitle, { title: thread.title }),
             /* @__PURE__ */ jsx("span", { children: formatDay(thread.createdAt) })
           ] }),
@@ -15639,8 +15681,8 @@ const columns = [
   }
 ];
 
-const NetworkTable = ({ networks, isLoading, computeLink }) => {
-  const { navigate } = useLinkComponent();
+const NetworkTable = ({ networks, isLoading }) => {
+  const { navigate, paths } = useLinkComponent();
   const allNetworks = useMemo(
     () => [
       ...networks?.map((network) => ({
@@ -15666,7 +15708,7 @@ const NetworkTable = ({ 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)), 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(paths.networkLink(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 = () => {
@@ -15807,17 +15849,13 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className, children });
 };
 
-const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
+const ToolList = ({ tools, agents, isLoading }) => {
   const toolsWithAgents = useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
     return /* @__PURE__ */ jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsx(ToolListSkeleton, {}) });
-  return /* @__PURE__ */ jsx(ToolListInner, { toolsWithAgents, computeLink, computeAgentLink });
+  return /* @__PURE__ */ jsx(ToolListInner, { toolsWithAgents });
 };
-const ToolListInner = ({
-  toolsWithAgents,
-  computeLink,
-  computeAgentLink
-}) => {
+const ToolListInner = ({ toolsWithAgents }) => {
   const [filteredTools, setFilteredTools] = useState(toolsWithAgents);
   const [value, setValue] = useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsx(ToolListEmpty, {});
@@ -15838,22 +15876,22 @@ const ToolListInner = ({
       /* @__PURE__ */ jsx(Searchbar, { onSearch: handleSearch, label: "Search for a tool", placeholder: "Search for a tool" }),
       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, computeLink, computeAgentLink }, 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 }, tool.id)) })
   ] });
 };
-const ToolEntity = ({ tool, computeLink, computeAgentLink }) => {
+const ToolEntity = ({ tool }) => {
   const linkRef = useRef(null);
-  const { Link } = useLinkComponent();
+  const { Link, paths } = 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: computeLink(tool.id, tool.agents[0]?.id), children: tool.id }) }),
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: paths.toolLink(tool.id), children: tool.id }) }),
       /* @__PURE__ */ jsx(EntityDescription, { children: tool.description }),
       /* @__PURE__ */ jsx("div", { className: "inline-flex flex-wrap gap-2 pt-4", children: tool.agents.map((agent) => {
         return /* @__PURE__ */ jsx(
           Link,
           {
-            href: computeAgentLink(tool.id, agent.id),
+            href: paths.agentToolLink(agent.id, tool.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 })
@@ -17835,14 +17873,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",
@@ -17991,15 +18030,14 @@ function TraceDialog({
   onClose,
   onNext,
   onPrevious,
-  isLoadingSpans,
-  computeAgentsLink,
-  computeWorkflowsLink
+  isLoadingSpans
 }) {
   const { Link } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = useState(false);
   const [selectedSpanId, setSelectedSpanId] = useState(void 0);
   const [combinedView, setCombinedView] = useState(false);
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
+  const traceInfo = useTraceInfo(traceDetails);
   const hierarchicalSpans = useMemo(() => {
     return formatHierarchicalSpans(traceSpans);
   }, [traceSpans]);
@@ -18043,7 +18081,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -18266,7 +18303,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