@mastra/playground-ui 6.3.1-alpha.0 → 6.3.1-alpha.2

package/dist/index.cjs.js

@@ -26,7 +26,7 @@ const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
 const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-const colors = require('./colors-DLwJ7rFA.cjs');
+const colors = require('./colors-B_l6leHd.cjs');
 const prettier = require('prettier');
 const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
@@ -4359,7 +4359,7 @@ const Badge$1 = ({ icon, variant = "default", className, children, ...props }) =
     "div",
     {
       className: clsx(
-        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
+        "font-mono bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md shrink-0",
         icon ? "pl-md pr-1.5" : "px-1.5",
         icon || variant === "default" ? "text-icon5" : variantClasses$3[variant],
         className
@@ -4551,8 +4551,7 @@ const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
   );
 };
 
-function convertWorkflowRunStateToWatchResult(runState) {
-  const runId = runState.runId;
+function convertWorkflowRunStateToStreamResult(runState) {
   const steps = {};
   const context = runState.context || {};
   Object.entries(context).forEach(([stepId, stepResult]) => {
@@ -4571,190 +4570,26 @@ function convertWorkflowRunStateToWatchResult(runState) {
       };
     }
   });
-  const status = determineWorkflowStatus(steps);
-  return {
-    type: "watch",
-    payload: {
-      workflowState: {
-        status,
-        steps,
-        result: runState.value,
-        payload: context.input,
-        error: void 0
+  const suspendedStepIds = Object.entries(steps).flatMap(
+    ([stepId, stepResult]) => {
+      if (stepResult?.status === "suspended") {
+        const nestedPath = stepResult?.suspendPayload?.__workflow_meta?.path;
+        return nestedPath ? [[stepId, ...nestedPath]] : [[stepId]];
       }
-    },
-    eventTimestamp: new Date(runState.timestamp),
-    runId
+      return [];
+    }
+  );
+  const suspendedStep = suspendedStepIds?.[0]?.[0];
+  const suspendPayload = suspendedStep ? steps[suspendedStep]?.suspendPayload : void 0;
+  return {
+    input: context.input,
+    steps,
+    status: runState.status,
+    ...runState.status === "success" ? { result: runState.result } : {},
+    ...runState.status === "failed" ? { error: runState.error } : {},
+    ...runState.status === "suspended" ? { suspended: suspendedStepIds, suspendPayload } : {}
   };
 }
-function determineWorkflowStatus(steps) {
-  const stepStatuses = Object.values(steps).map((step) => step.status);
-  if (stepStatuses.includes("failed")) {
-    return "failed";
-  }
-  if (stepStatuses.includes("suspended")) {
-    return "suspended";
-  }
-  if (stepStatuses.every((status) => status === "success")) {
-    return "success";
-  }
-  return "running";
-}
-const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
-  if (chunk.type === "workflow-start") {
-    return {
-      ...prev,
-      runId: chunk.runId,
-      eventTimestamp: /* @__PURE__ */ new Date(),
-      payload: {
-        ...prev?.payload || {},
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "running",
-          steps: prev?.runId === chunk.runId ? prev?.payload?.workflowState?.steps ?? {} : {}
-        }
-      }
-    };
-  }
-  if (chunk.type === "workflow-step-start") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current || {},
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-suspended") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep,
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "suspended",
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current || {},
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-waiting") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep || {},
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "waiting",
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current,
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-result") {
-    const status = chunk.payload.status;
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    const next = {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep || {},
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status,
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current,
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-    return next;
-  }
-  if (chunk.type === "workflow-canceled") {
-    return {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev?.payload,
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "canceled"
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-finish") {
-    return {
-      ...prev,
-      runId: chunk.runId,
-      payload: {
-        ...prev?.payload,
-        currentStep: void 0,
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: chunk.payload.workflowStatus
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  return prev;
-};
 
 const WorkflowRunContext = React.createContext({});
 function WorkflowRunProvider({
@@ -4762,17 +4597,19 @@ function WorkflowRunProvider({
   snapshot
 }) {
   const [result, setResult] = React.useState(
-    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+    () => snapshot ? convertWorkflowRunStateToStreamResult(snapshot) : null
   );
   const [payload, setPayload] = React.useState(() => snapshot?.context?.input ?? null);
+  const [runId, setRunId] = React.useState(() => snapshot?.runId ?? "");
   const clearData = () => {
     setResult(null);
     setPayload(null);
   };
   React.useEffect(() => {
     if (snapshot?.runId) {
-      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+      setResult(convertWorkflowRunStateToStreamResult(snapshot));
       setPayload(snapshot.context?.input);
+      setRunId(snapshot.runId);
     }
   }, [snapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4784,7 +4621,9 @@ function WorkflowRunProvider({
         payload,
         setPayload,
         clearData,
-        snapshot
+        snapshot,
+        runId,
+        setRunId
       },
       children
     }
@@ -5275,22 +5114,22 @@ ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displ
 
 const useCurrentRun = () => {
   const context = React.useContext(WorkflowRunContext);
-  const workflowCurrentSteps = context.result?.payload?.workflowState?.steps ?? {};
+  const workflowCurrentSteps = context.result?.steps ?? {};
   const steps = Object.entries(workflowCurrentSteps).reduce((acc, [key, value]) => {
     return {
       ...acc,
       [key]: {
-        error: value.error,
+        error: "error" in value ? value.error : void 0,
         startedAt: value.startedAt,
-        endedAt: value.endedAt,
+        endedAt: "endedAt" in value ? value.endedAt : void 0,
         status: value.status,
-        output: value.output,
+        output: "output" in value ? value.output : void 0,
         input: value.payload,
-        resumeData: value.resumePayload
+        resumeData: "resumePayload" in value ? value.resumePayload : void 0
       }
     };
   }, {});
-  return { steps, runId: context.result?.runId };
+  return { steps, runId: context.runId };
 };
 
 const sizeClasses = {
@@ -7217,7 +7056,7 @@ function WorkflowTrigger({
   cancelWorkflowRun
 }) {
   const { runtimeContext } = usePlaygroundStore();
-  const { result, setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
+  const { result, setResult, payload, setPayload, setRunId: setContextRunId } = React.useContext(WorkflowRunContext);
   const [isRunning, setIsRunning] = React.useState(false);
   const [innerRunId, setInnerRunId] = React.useState("");
   const [cancelResponse, setCancelResponse] = React.useState(null);
@@ -7231,6 +7070,7 @@ function WorkflowTrigger({
       const { runId } = await createWorkflowRun({ workflowId });
       setRunId?.(runId);
       setInnerRunId(runId);
+      setContextRunId(runId);
       streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
@@ -7255,9 +7095,9 @@ function WorkflowTrigger({
     setCancelResponse(response);
   };
   const streamResultToUse = result ?? streamResult;
-  const suspendedSteps = Object.entries(streamResultToUse?.payload?.workflowState?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
+  const suspendedSteps = Object.entries(streamResultToUse?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
     stepId,
-    runId: streamResultToUse?.runId ?? "",
+    runId: innerRunId,
     suspendPayload: payload2,
     isLoading: false
   }));
@@ -7265,6 +7105,7 @@ function WorkflowTrigger({
     if (paramsRunId && observeWorkflowStream) {
       observeWorkflowStream({ workflowId, runId: paramsRunId });
       setInnerRunId(paramsRunId);
+      setContextRunId(paramsRunId);
     }
   }, [paramsRunId]);
   React.useEffect(() => {
@@ -7284,7 +7125,7 @@ function WorkflowTrigger({
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
-  const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
+  const workflowActivePaths = streamResultToUse?.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: [
@@ -7348,14 +7189,14 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
-      result?.runId && /* @__PURE__ */ jsxRuntime.jsxs(
+      result?.status === "running" && /* @__PURE__ */ jsxRuntime.jsxs(
         Button$1,
         {
           variant: "light",
           className: "w-full",
           size: "lg",
           onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun || result?.payload?.workflowState?.status && doneStatuses.includes(result?.payload?.workflowState?.status),
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun || result?.status && doneStatuses.includes(result?.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"
@@ -7366,8 +7207,13 @@ function WorkflowTrigger({
         /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, { status, output }]) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, step]) => {
+            const { status } = step;
+            let output = {};
+            if (step.status === "success") {
+              output = step.output;
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(WorkflowStatus, { stepId, status, result: output }, stepId);
           }) })
         ] })
       ] })
@@ -7395,16 +7241,15 @@ const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
     queryKey: ["workflow-runs", workflowId],
     queryFn: () => client.getWorkflow(workflowId).runs({ limit: 50 }),
     enabled,
+    refetchInterval: 5e3,
     gcTime: 0,
     staleTime: 0
   });
 };
 
-const WorkflowRuns = ({
+const WorkflowRunDetail = ({
   workflowId,
   runId,
-  onPressRun,
-  onPressBackToRuns,
   observeWorkflowStream,
   ...triggerProps
 }) => {
@@ -7418,43 +7263,23 @@ const WorkflowRuns = ({
   }
   const run = actualRuns.find((run2) => run2.runId === runId);
   const runSnapshot = run?.snapshot;
-  const runResult = runSnapshot && typeof runSnapshot === "object" ? convertWorkflowRunStateToWatchResult(runSnapshot) : null;
-  const runStatus = runResult?.payload?.workflowState?.status;
+  const runResult = runSnapshot && typeof runSnapshot === "object" ? convertWorkflowRunStateToStreamResult(runSnapshot) : null;
+  const runStatus = runResult?.status;
   if (runId) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full grid grid-rows-[1fr_auto]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { onClick: onPressBackToRuns, variant: "light", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}) }),
-        "Back to runs"
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        WorkflowTrigger,
-        {
-          ...triggerProps,
-          streamResult: isObjectEmpty(triggerProps.streamResult ?? {}) ? runResult : triggerProps.streamResult,
-          paramsRunId: runId,
-          workflowId,
-          observeWorkflowStream: () => {
-            if (runStatus !== "success" && runStatus !== "failed" && runStatus !== "canceled") {
-              observeWorkflowStream?.({ workflowId, runId });
-            }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full grid grid-rows-[1fr_auto]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowTrigger,
+      {
+        ...triggerProps,
+        paramsRunId: runId,
+        workflowId,
+        observeWorkflowStream: () => {
+          if (runStatus !== "success" && runStatus !== "failed" && runStatus !== "canceled") {
+            observeWorkflowStream?.({ workflowId, runId, storeRunResult: runResult });
           }
         }
-      )
-    ] });
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "pb-10", children: actualRuns.map((run2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      onClick: () => onPressRun({ workflowId, runId: run2.runId }),
-      className: clsx("px-3 py-2 border-b-sm border-border1 block w-full hover:bg-surface4 text-left", {
-        "bg-surface4": run2.runId === runId
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run2.runId }),
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run2?.snapshot === "string" ? "" : run2?.snapshot?.timestamp ? dateFns.formatDate(run2?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-      ]
-    }
-  ) }, run2.runId)) });
 };
 
 const EmptyState = ({
@@ -7509,7 +7334,7 @@ const Row = React.forwardRef(
       "tr",
       {
         className: clsx(
-          "border-b-sm border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2 last:border-b-0",
+          "border-b-sm border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2",
           selected && "bg-surface4",
           onClick && "cursor-pointer",
           className
@@ -7562,7 +7387,7 @@ const DateTimeCell = ({ dateTime, ...props }) => {
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[14px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
       description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
@@ -7732,7 +7557,9 @@ const LinkComponentContext = React.createContext({
     networkNewThreadLink: () => "",
     networkThreadLink: () => "",
     scorerLink: () => "",
-    toolLink: () => ""
+    toolLink: () => "",
+    mcpServerLink: () => "",
+    workflowRunLink: () => ""
   }
 });
 const LinkComponentProvider = ({ children, Link, navigate, paths }) => {
@@ -7746,17 +7573,16 @@ const useLinkComponent = () => {
   return ctx;
 };
 
-const columns$2 = [
+const columns$4 = [
   {
     id: "name",
     header: "Name",
     cell: ({ row }) => {
-      const { Link } = useLinkComponent();
+      const { Link, paths } = useLinkComponent();
       return /* @__PURE__ */ jsxRuntime.jsx(
         EntryCell,
         {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}),
-          name: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: row.original.link, children: row.original.name }),
+          name: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(row.original.id), children: row.original.name }),
           description: void 0,
           meta: void 0
         }
@@ -7770,43 +7596,111 @@ const columns$2 = [
     id: "stepsCount",
     header: "Steps",
     size: 300,
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, {}), className: "!h-button-md", children: [
-      row.original.stepsCount,
-      " step",
-      row.original.stepsCount > 1 ? "s" : ""
-    ] }) }) })
+    cell: ({ row }) => {
+      const workflow = row.original;
+      const stepsCount = Object.keys(workflow.steps ?? {}).length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, {}), className: "!h-button-md", children: [
+        stepsCount,
+        " step",
+        stepsCount > 1 ? "s" : ""
+      ] }) }) });
+    }
   }
 ];
 
+const themeClasses = {
+  light: "bg-gray-100 border-gray-300 text-gray-700",
+  dark: "bg-surface4 border-border1 text-icon6"
+};
+const Kbd = ({ children, theme = "dark" }) => {
+  const themeClass = themeClasses[theme];
+  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
+const Searchbar = ({ onSearch, label, placeholder }) => {
+  const id = React.useId();
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        input.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const search = formData.get(id);
+    onSearch(search);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: "focus-within:outline focus-within:outline-accent1 -outline-offset-2 border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-icon3 h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              placeholder,
+              className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 outline-none",
+              name: id,
+              ref: inputRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "↵ Enter" }) })
+      ]
+    }
+  );
+};
+const SearchbarWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 border-b-sm border-border1", children });
+};
+
 function WorkflowTable({ workflows, isLoading }) {
+  const [search, setSearch] = React.useState("");
   const { navigate, paths } = useLinkComponent();
   const workflowData = React.useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
-      const workflow = workflows?.[key];
+      const workflow = workflows[key];
       return {
         id: key,
-        name: workflow?.name || "N/A",
-        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
-        link: paths.workflowLink(key)
+        ...workflow
       };
     });
     return _workflowsData;
   }, [workflows]);
   const table = reactTable.useReactTable({
     data: workflowData,
-    columns: columns$2,
+    columns: columns$4,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(WorkflowTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyWorkflowsTable, {});
   }
-  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(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 filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search workflows", placeholder: "Search workflows" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowTableSkeleton, {}) : /* @__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: filteredRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(paths.workflowLink(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 WorkflowTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
@@ -8427,7 +8321,7 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
 );
 
 const NetlifyIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "128", height: "113", viewBox: "0 0 128 113", children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_236_138)", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_236_138)", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -8551,23 +8445,32 @@ const ProviderLogo = ({ providerId, className = "", size = 20 }) => {
   );
 };
 
+const statusClasses = {
+  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200 rounded-lg px-4 py-2 flex gap-4 items-center",
+  default: ""
+};
 const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) => {
   const data = react.useMessage();
   const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
   const modelMetadata = data.metadata?.custom?.modelMetadata;
+  const messageStatus = data.metadata?.custom?.status;
+  const statusClass = statusClasses[messageStatus || "default"];
   const showModelUsed = hasModelList && modelMetadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.MessagePrimitive.Parts,
-      {
-        components: {
-          Text: ErrorAwareText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback },
-          Reasoning
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("text-icon6 text-ui-lg leading-ui-lg", statusClass), children: [
+      messageStatus === "warning" && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.MessagePrimitive.Parts,
+        {
+          components: {
+            Text: ErrorAwareText,
+            tools: { Fallback: ToolFallbackCustom || ToolFallback },
+            Reasoning
+          }
         }
-      }
-    ) }),
+      )
+    ] }),
     !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
       showModelUsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: modelMetadata.modelProvider, size: 14 }),
@@ -9648,6 +9551,25 @@ const handleNetworkMessageFromMemory = (content) => {
 
 const handleStreamChunk = ({ chunk, conversation }) => {
   switch (chunk.type) {
+    case "tripwire": {
+      return [
+        ...conversation,
+        {
+          role: "assistant",
+          metadata: {
+            custom: {
+              status: "warning"
+            }
+          },
+          content: [
+            {
+              type: "text",
+              text: chunk.payload.tripwireReason
+            }
+          ]
+        }
+      ];
+    }
     case "start": {
       const newMessage = {
         role: "assistant",
@@ -9881,7 +9803,7 @@ const handleWorkflowChunk = ({
             ...part.args,
             __mastraMetadata: {
               ...part.args?.__mastraMetadata,
-              workflowFullState: mapWorkflowStreamChunkToWatchResult(
+              workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
                 part.args?.__mastraMetadata?.workflowFullState || {},
                 workflowChunk
               ),
@@ -10027,7 +9949,7 @@ const handleAgentChunk = ({
                   ...agentChunk.payload.args,
                   __mastraMetadata: {
                     ...agentChunk.payload.args?.__mastraMetadata,
-                    workflowFullState: mapWorkflowStreamChunkToWatchResult(
+                    workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
                       lastMastraMessage.args?.__mastraMetadata?.workflowFullState || {},
                       agentChunk.payload.output
                     ),
@@ -10364,8 +10286,16 @@ function MastraRuntimeProvider({
               threadId,
               modelSettings: modelSettingsArgs,
               signal: controller.signal,
-              onFinish: (messages2) => {
-                return messages2.map((message2) => react$3.toAssistantUIMessage(message2));
+              onFinish: ({ messages: messages2, tripwireReason }) => {
+                const next = messages2.length > 0 ? messages2.map((message2) => react$3.toAssistantUIMessage(message2)) : [];
+                if (tripwireReason) {
+                  next.push({
+                    role: "assistant",
+                    content: [{ type: "text", text: tripwireReason }],
+                    metadata: { custom: { status: "warning" } }
+                  });
+                }
+                return next;
               }
             });
             return;
@@ -11556,27 +11486,25 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
   ] });
 };
 
-const NameCell$1 = ({ row }) => {
-  const { Link } = useLinkComponent();
+const NameCell$3 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
     {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
-      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: row.original.link, children: row.original.name }),
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.agentLink(row.original.id), children: row.original.name }),
       description: row.original.instructions
     }
   );
 };
-const columns$1 = [
+const columns$3 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell$1
+    cell: NameCell$3
   },
   {
     header: "Model",
     accessorKey: "model",
-    size: 300,
     cell: ({ row }) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(Cell, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -11607,67 +11535,76 @@ const columns$1 = [
     }
   },
   {
-    size: 160,
-    header: "Tools",
-    accessorKey: "tools",
+    header: "Attached entities",
+    accessorKey: "attachedEntities",
     cell: ({ row }) => {
-      const toolsCount = row.original.tools ? Object.keys(row.original.tools).length : 0;
-      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(ApiIcon, {}), children: [
-        toolsCount,
-        " tool",
-        toolsCount > 1 ? "s" : ""
+      const agent = row.original;
+      const agentsCount = Object.keys(agent.agents || {}).length;
+      const toolsCount = Object.keys(agent.tools || {}).length;
+      const workflowsCount = Object.keys(agent.workflows || {}).length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-row gap-2 w-full items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+          agentsCount,
+          " agent",
+          agentsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-accent6" }), children: [
+          toolsCount,
+          " tool",
+          toolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: [
+          workflowsCount,
+          " workflow",
+          workflowsCount > 1 ? "s" : ""
+        ] })
       ] }) });
     }
   }
 ];
 
 function AgentsTable({ agents, isLoading }) {
+  const [search, setSearch] = React.useState("");
   const { navigate, paths } = useLinkComponent();
   const projectData = React.useMemo(
     () => Object.keys(agents).map((key) => {
       const agent = agents[key];
       return {
         id: key,
-        name: agent.name,
-        instructions: agent.instructions,
-        provider: agent.provider,
-        branch: void 0,
-        executedAt: void 0,
-        repoUrl: void 0,
-        tools: agent.tools,
-        modelId: agent.modelId,
-        link: paths.agentLink(key),
-        modelList: agent.modelList
+        ...agent
       };
     }),
     [agents]
   );
   const table = reactTable.useReactTable({
     data: projectData,
-    columns: columns$1,
+    columns: columns$3,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(AgentsTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyAgentsTable, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { 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(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 filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search agents", placeholder: "Search agents" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(AgentsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { 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.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(paths.agentLink(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 AgentsTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Model" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Tools" })
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Model" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Attached entities" })
   ] }),
   /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { width: 160, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
   ] }, index)) })
 ] });
 const EmptyAgentsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13354,53 +13291,56 @@ const useScorers = () => {
   });
 };
 
-const NameCell = ({ row }) => {
-  const { Link } = useLinkComponent();
+const NameCell$2 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
+  const scorer = row.original;
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
     {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
-      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: row.original.id, children: row.original.name }),
-      description: row.original.description
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.scorerLink(scorer.id), children: scorer.scorer.config.name }),
+      description: scorer.scorer.config.description
     }
   );
 };
-const columns = [
+const columns$2 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell
+    cell: NameCell$2
   }
 ];
 
 function ScorersTable({ scorers, isLoading }) {
   const { navigate, paths } = useLinkComponent();
+  const [search, setSearch] = React.useState("");
   const scorersData = React.useMemo(
     () => Object.keys(scorers).map((key) => {
       const scorer = scorers[key];
       return {
-        id: key,
-        name: scorer.scorer.config.name,
-        description: scorer.scorer.config.description
+        ...scorer,
+        id: key
       };
     }),
     [scorers]
   );
   const table = reactTable.useReactTable({
     data: scorersData,
-    columns,
+    columns: columns$2,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(ScorersTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyScorersTable, {});
   }
-  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(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 filteredRows = rows.filter((row) => row.original.scorer.config.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search scorers", placeholder: "Search scorers" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ScorersTableSkeleton, {}) : /* @__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: filteredRows.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: [
   /* @__PURE__ */ jsxRuntime.jsx(Thead, { children: /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }) }),
@@ -13497,7 +13437,7 @@ const AgentMetadataModelSwitcher = ({
     };
     fetchProviders();
   }, [apiUrl]);
-  const currentModelProvider = selectedProvider;
+  const currentModelProvider = cleanProviderId(selectedProvider);
   const allModels = React.useMemo(() => {
     return providers.flatMap(
       (provider) => provider.models.map((model) => ({
@@ -13566,7 +13506,7 @@ const AgentMetadataModelSwitcher = ({
     }
   };
   const handleProviderSelect = async (provider) => {
-    setSelectedProvider(provider.id);
+    setSelectedProvider(cleanProviderId(provider.id));
     setProviderSearch("");
     setIsSearchingProvider(false);
     setShowProviderSuggestions(false);
@@ -13591,7 +13531,7 @@ const AgentMetadataModelSwitcher = ({
       const providerChanged = currentModelProvider && currentModelProvider !== defaultProvider;
       const modelEmpty = !selectedModel || selectedModel === "";
       if (providerChanged && modelEmpty) {
-        setSelectedProvider(defaultProvider);
+        setSelectedProvider(cleanProviderId(defaultProvider));
         setSelectedModel(defaultModel);
         if (defaultProvider && defaultModel) {
           updateModel({
@@ -14299,13 +14239,14 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
 const ThreadList = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
 };
-const ThreadItem = ({ children, isActive }) => {
+const ThreadItem = ({ children, isActive, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
       className: clsx(
         "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
-        isActive && "bg-surface4"
+        isActive && "bg-surface4",
+        className
       ),
       children
     }
@@ -14402,7 +14343,7 @@ const ChatThreads = ({ threads, isLoading, threadId, onDelete, resourceId, resou
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
         "New Chat"
       ] }) }) }),
-      threads.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!" }),
+      threads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5", children: "Your conversations will appear here once you start chatting!" }),
       threads.map((thread) => {
         const isActive = thread.id === threadId;
         const threadLink = resourceType === "agent" ? paths.agentThreadLink(resourceId, thread.id) : paths.networkThreadLink(resourceId, thread.id);
@@ -14474,190 +14415,39 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
-const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700",
-  dark: "bg-surface4 border-border1 text-icon6"
-};
-const Kbd = ({ children, theme = "dark" }) => {
-  const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
-};
-
-const Searchbar = ({ onSearch, label, placeholder }) => {
-  const id = React.useId();
-  const inputRef = React.useRef(null);
-  React.useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-    const handleKeyDown = (event) => {
-      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
-        event.preventDefault();
-        input.focus();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    const search = formData.get(id);
-    onSearch(search);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-icon3 h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id,
-              type: "text",
-              placeholder,
-              className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 -outline-offset-2",
-              name: id,
-              ref: inputRef
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Enter" }) })
-      ]
-    }
-  );
-};
-
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: (e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      className: clsx(
-        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
-        onClick && "cursor-pointer hover:bg-surface4 transition-all",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
-const EntityIcon = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
-};
-
-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 });
-};
-const ToolListInner = ({ toolsWithAgents }) => {
-  const [filteredTools, setFilteredTools] = React.useState(toolsWithAgents);
-  const [value, setValue] = React.useState("");
-  if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsxRuntime.jsx(ToolListEmpty, {});
-  const handleSearch = (value2) => {
-    setValue(value2);
-    React.startTransition(() => {
-      setFilteredTools(
-        toolsWithAgents.filter(
-          (tool) => tool.id.toLowerCase().includes(value2.toLowerCase()) || tool.description.toLowerCase().includes(value2.toLowerCase()) || tool.agents.some(
-            (agent) => agent.name.toLowerCase().includes(value2.toLowerCase()) || agent.id.toLowerCase().includes(value2.toLowerCase())
-          )
-        )
-      );
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: [
-      /* @__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 }, tool.id)) })
-  ] });
-};
-const ToolEntity = ({ tool }) => {
-  const linkRef = React.useRef(null);
+const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
-  const toolLink = tool.agents.length > 0 ? paths.agentToolLink(tool.agents[0].id, tool.id) : paths.toolLink(tool.id);
-  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: toolLink, 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: 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 })
-          },
-          agent.id
-        );
-      }) })
-    ] })
-  ] });
-};
-const ToolListSkeleton = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10 w-full" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2 xl:grid-cols-3 gap-4 max-w-5xl mx-auto py-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-40 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-40 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-40 w-full" })
-    ] })
-  ] });
-};
-const ToolListEmpty = () => {
+  const tool = row.original;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    EmptyState,
+    EntryCell,
     {
-      iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
-      titleSlot: "Configure Tools",
-      descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
-      actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
-        Button$1,
-        {
-          size: "lg",
-          className: "w-full",
-          variant: "light",
-          as: "a",
-          href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
-          target: "_blank",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
-            "Docs"
-          ]
-        }
-      )
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.toolLink(tool.id), children: tool.id }),
+      description: tool.description
     }
   );
 };
-const prepareAgents = (tools, agents) => {
+const columns$1 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell$1
+  },
+  {
+    header: "Attached entities",
+    accessorKey: "attachedEntities",
+    cell: ({ row }) => {
+      const tool = row.original;
+      const agentsCount = tool.agents.length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+        agentsCount,
+        " agent",
+        agentsCount > 1 ? "s" : ""
+      ] }) });
+    }
+  }
+];
+
+const prepareToolsTable = (tools, agents) => {
   const toolsWithAgents = /* @__PURE__ */ new Map();
   const agentsKeys = Object.keys(agents);
   for (const k of agentsKeys) {
@@ -14672,7 +14462,7 @@ const prepareAgents = (tools, agents) => {
           agents: []
         });
       }
-      toolsWithAgents.get(tool.id).agents.push({ id: k, name: agent.name });
+      toolsWithAgents.get(tool.id).agents.push({ ...agent, id: k });
     }
   }
   for (const [_, tool] of Object.entries(tools)) {
@@ -14686,6 +14476,67 @@ const prepareAgents = (tools, agents) => {
   return Array.from(toolsWithAgents.values());
 };
 
+function ToolTable({ tools, agents, isLoading }) {
+  const [search, setSearch] = React.useState("");
+  const { navigate, paths } = useLinkComponent();
+  const toolData = React.useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
+  const table = reactTable.useReactTable({
+    data: toolData,
+    columns: columns$1,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { 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.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
+        const firstAgent = row.original.agents[0];
+        const link = firstAgent ? paths.agentToolLink(firstAgent.id, row.original.id) : paths.toolLink(row.original.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(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 ToolTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
+    titleSlot: "Configure Tools",
+    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button$1,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -15777,10 +15628,10 @@ const Header = ({ children, border = true }) => {
   );
 };
 const HeaderTitle = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white flex items-center gap-2", children });
 };
 const HeaderAction = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children });
 };
 const HeaderGroup = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-lg flex items-center", children });
@@ -17326,7 +17177,11 @@ const Crumb = ({ className, as, isCurrent, ...props }) => {
       Root,
       {
         "aria-current": isCurrent ? "page" : void 0,
-        className: clsx("text-ui-lg leading-ui-lg font-medium", isCurrent ? "text-white" : "text-icon3", className),
+        className: clsx(
+          "text-ui-lg leading-ui-lg font-medium flex items-center gap-2",
+          isCurrent ? "text-white" : "text-icon3",
+          className
+        ),
         ...props
       }
     ) }),
@@ -17391,6 +17246,41 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100
   )
 ] });
 
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+};
+
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -17798,6 +17688,176 @@ const parseError = (error) => {
   }
 };
 
+const useMCPServerTools = (selectedServer) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["mcpserver-tools", selectedServer?.id],
+    queryFn: async () => {
+      const response = await client.getMcpServerTools(selectedServer?.id);
+      const fetchedToolsArray = response.tools;
+      const transformedTools = {};
+      fetchedToolsArray.forEach((sdkToolInfo) => {
+        transformedTools[sdkToolInfo.id] = sdkToolInfo;
+      });
+      return transformedTools;
+    },
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+
+const NameCell = ({ row }) => {
+  const client = react$3.useMastraClient();
+  const mcp = row.original;
+  const { Link, paths } = useLinkComponent();
+  const effectiveBaseUrl = client.options.baseUrl || "http://localhost:4111";
+  const sseUrl = `${effectiveBaseUrl}/api/mcp/${mcp.id}/sse`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntryCell,
+    {
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.mcpServerLink(row.original.id), children: row.original.name }),
+      description: sseUrl
+    }
+  );
+};
+const columns = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell
+  },
+  {
+    header: "Attached tools",
+    accessorKey: "attachedTools",
+    cell: ({ row }) => {
+      const mcpServer = row.original;
+      const { data: tools, isLoading } = useMCPServerTools(mcpServer);
+      if (isLoading)
+        return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-24" }) });
+      const toolsCount = Object.keys(tools || {}).length;
+      const agentToolsCount = Object.keys(tools || {}).filter((tool) => tools?.[tool]?.toolType === "agent").length;
+      const workflowToolsCount = Object.keys(tools || {}).filter((tool) => tools?.[tool]?.toolType === "workflow").length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-row gap-2 w-full items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+          agentToolsCount,
+          " agent",
+          agentToolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-accent6" }), children: [
+          toolsCount,
+          " tool",
+          toolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: [
+          workflowToolsCount,
+          " workflow",
+          workflowToolsCount > 1 ? "s" : ""
+        ] })
+      ] }) });
+    }
+  }
+];
+
+function MCPTable({ mcpServers, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
+  const [search, setSearch] = React.useState("");
+  const table = reactTable.useReactTable({
+    data: mcpServers,
+    columns,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyMCPTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search MCP servers", placeholder: "Search MCP servers" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MCPTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { 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.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(paths.mcpServerLink(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 MCPTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Model" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Attached entities" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyMCPTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(McpCoinIcon, {}),
+    titleSlot: "Configure MCP servers",
+    descriptionSlot: "MCP servers are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button$1,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/getting-started/mcp-docs-server",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const WorkflowRunList = ({ workflowId, runId }) => {
+  const { Link, paths } = useLinkComponent();
+  const { isLoading, data: runs } = useWorkflowRuns(workflowId);
+  const actualRuns = runs?.runs || [];
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("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: paths.workflowLink(workflowId), 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 workflow run"
+    ] }) }) }),
+    actualRuns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3 py-3 px-5", children: "Your run history will appear here once you run the workflow" }),
+    actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
+      typeof run?.snapshot === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+    ] }) }, run.runId))
+  ] }) }) });
+};
+const WorkflowRunStatusBadge = ({ status }) => {
+  if (status === "running") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}), children: status });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-accent2" }), children: status });
+  }
+  if (status === "canceled") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlash, { className: "text-icon3" }), children: status });
+  }
+  if (status === "pending" || status === "waiting") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "text-icon3" }), children: status });
+  }
+  if (status === "suspended") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-accent3" }), children: status });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "text-accent1" }), children: status });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", children: status });
+};
+
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEntityHeader = AgentEntityHeader;
@@ -17819,7 +17879,6 @@ exports.AgentSettings = AgentSettings;
 exports.AgentSettingsContext = AgentSettingsContext;
 exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentsTable = AgentsTable;
-exports.AgentsTableSkeleton = AgentsTableSkeleton;
 exports.AiIcon = AiIcon;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
@@ -17851,10 +17910,7 @@ exports.DeploymentIcon = DeploymentIcon;
 exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
 exports.DynamicForm = DynamicForm;
-exports.EmptyAgentsTable = EmptyAgentsTable;
-exports.EmptyScorersTable = EmptyScorersTable;
 exports.EmptyState = EmptyState;
-exports.EmptyWorkflowsTable = EmptyWorkflowsTable;
 exports.Entity = Entity;
 exports.EntityContent = EntityContent;
 exports.EntityDescription = EntityDescription;
@@ -17892,6 +17948,7 @@ exports.KeyValueList = KeyValueList;
 exports.LatencyIcon = LatencyIcon;
 exports.LinkComponentProvider = LinkComponentProvider;
 exports.LogsIcon = LogsIcon;
+exports.MCPTable = MCPTable;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
 exports.MastraResizablePanel = MastraResizablePanel;
@@ -17915,10 +17972,10 @@ exports.RuntimeContextWrapper = RuntimeContextWrapper;
 exports.ScoreDialog = ScoreDialog;
 exports.ScoreIcon = ScoreIcon;
 exports.ScorersTable = ScorersTable;
-exports.ScorersTableSkeleton = ScorersTableSkeleton;
 exports.ScoresTools = ScoresTools;
 exports.SearchField = SearchField;
 exports.Searchbar = Searchbar;
+exports.SearchbarWrapper = SearchbarWrapper;
 exports.SelectField = SelectField;
 exports.SettingsIcon = SettingsIcon;
 exports.SideDialog = SideDialog;
@@ -17957,9 +18014,7 @@ exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolFallback = ToolFallback;
-exports.ToolList = ToolList;
-exports.ToolListEmpty = ToolListEmpty;
-exports.ToolListSkeleton = ToolListSkeleton;
+exports.ToolTable = ToolTable;
 exports.ToolsIcon = ToolsIcon;
 exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
@@ -17978,16 +18033,16 @@ exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkflowGraph = WorkflowGraph;
 exports.WorkflowIcon = WorkflowIcon;
 exports.WorkflowRunContext = WorkflowRunContext;
+exports.WorkflowRunDetail = WorkflowRunDetail;
+exports.WorkflowRunList = WorkflowRunList;
 exports.WorkflowRunProvider = WorkflowRunProvider;
-exports.WorkflowRuns = WorkflowRuns;
 exports.WorkflowTable = WorkflowTable;
-exports.WorkflowTableSkeleton = WorkflowTableSkeleton;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.WorkingMemoryContext = WorkingMemoryContext;
 exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.allowedAiSpanAttributes = allowedAiSpanAttributes;
 exports.cleanString = cleanString;
-exports.convertWorkflowRunStateToWatchResult = convertWorkflowRunStateToWatchResult;
+exports.convertWorkflowRunStateToStreamResult = convertWorkflowRunStateToStreamResult;
 exports.formatDuration = formatDuration;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatOtelTimestamp = formatOtelTimestamp;
@@ -17995,7 +18050,6 @@ exports.formatOtelTimestamp2 = formatOtelTimestamp2;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getShortId = getShortId;
 exports.getSpanTypeUi = getSpanTypeUi;
-exports.mapWorkflowStreamChunkToWatchResult = mapWorkflowStreamChunkToWatchResult;
 exports.parseError = parseError;
 exports.providerMapToIcon = providerMapToIcon;
 exports.spanTypePrefixes = spanTypePrefixes;
@@ -18004,6 +18058,7 @@ exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
+exports.useMCPServerTools = useMCPServerTools;
 exports.useModelReset = useModelReset;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;