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

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessagePart, useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, ChevronLeftIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, TriangleAlert, Info, GripVertical, AlertTriangleIcon, SearchIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, BrainIcon, TriangleAlert, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, Info, GripVertical, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
 import * as React from 'react';
-import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, isValidElement, useId, startTransition } from 'react';
+import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId, isValidElement } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -24,7 +24,7 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { I as IconColors } from './colors-DrbbnW3f.js';
+import { I as IconColors } from './colors-Br49332d.js';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
@@ -37,7 +37,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { format, isValid, formatDate, formatDistanceToNow } from 'date-fns';
+import { format, isValid, formatDistanceToNow, formatDate } from 'date-fns';
 import { useDebouncedCallback } from 'use-debounce';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -47,7 +47,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { useMastraClient, useChat, toAssistantUIMessage } from '@mastra/react';
+import { useMastraClient, mapWorkflowStreamChunkToWatchResult, useChat, toAssistantUIMessage } from '@mastra/react';
 import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -4323,7 +4323,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
@@ -4515,8 +4515,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]) => {
@@ -4535,190 +4534,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 = createContext({});
 function WorkflowRunProvider({
@@ -4726,17 +4561,19 @@ function WorkflowRunProvider({
   snapshot
 }) {
   const [result, setResult] = useState(
-    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+    () => snapshot ? convertWorkflowRunStateToStreamResult(snapshot) : null
   );
   const [payload, setPayload] = useState(() => snapshot?.context?.input ?? null);
+  const [runId, setRunId] = useState(() => snapshot?.runId ?? "");
   const clearData = () => {
     setResult(null);
     setPayload(null);
   };
   useEffect(() => {
     if (snapshot?.runId) {
-      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+      setResult(convertWorkflowRunStateToStreamResult(snapshot));
       setPayload(snapshot.context?.input);
+      setRunId(snapshot.runId);
     }
   }, [snapshot]);
   return /* @__PURE__ */ jsx(
@@ -4748,7 +4585,9 @@ function WorkflowRunProvider({
         payload,
         setPayload,
         clearData,
-        snapshot
+        snapshot,
+        runId,
+        setRunId
       },
       children
     }
@@ -5239,22 +5078,22 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 const useCurrentRun = () => {
   const context = 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 = {
@@ -7181,7 +7020,7 @@ function WorkflowTrigger({
   cancelWorkflowRun
 }) {
   const { runtimeContext } = usePlaygroundStore();
-  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
+  const { result, setResult, payload, setPayload, setRunId: setContextRunId } = useContext(WorkflowRunContext);
   const [isRunning, setIsRunning] = useState(false);
   const [innerRunId, setInnerRunId] = useState("");
   const [cancelResponse, setCancelResponse] = useState(null);
@@ -7195,6 +7034,7 @@ function WorkflowTrigger({
       const { runId } = await createWorkflowRun({ workflowId });
       setRunId?.(runId);
       setInnerRunId(runId);
+      setContextRunId(runId);
       streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
@@ -7219,9 +7059,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
   }));
@@ -7229,6 +7069,7 @@ function WorkflowTrigger({
     if (paramsRunId && observeWorkflowStream) {
       observeWorkflowStream({ workflowId, runId: paramsRunId });
       setInnerRunId(paramsRunId);
+      setContextRunId(paramsRunId);
     }
   }, [paramsRunId]);
   useEffect(() => {
@@ -7248,7 +7089,7 @@ function WorkflowTrigger({
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(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__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
@@ -7312,14 +7153,14 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
-      result?.runId && /* @__PURE__ */ jsxs(
+      result?.status === "running" && /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
             cancelResponse?.message || "Cancel Workflow Run"
@@ -7330,8 +7171,13 @@ function WorkflowTrigger({
         /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-          /* @__PURE__ */ 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__ */ jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
+          /* @__PURE__ */ 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__ */ jsx(WorkflowStatus, { stepId, status, result: output }, stepId);
           }) })
         ] })
       ] })
@@ -7359,16 +7205,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
 }) => {
@@ -7382,43 +7227,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__ */ jsxs("div", { className: "h-full grid grid-rows-[1fr_auto]", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-5 space-y-2", children: /* @__PURE__ */ jsxs(Button$1, { onClick: onPressBackToRuns, variant: "light", children: [
-        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
-        "Back to runs"
-      ] }) }),
-      /* @__PURE__ */ 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__ */ jsx("div", { className: "h-full grid grid-rows-[1fr_auto]", children: /* @__PURE__ */ jsx(
+      WorkflowTrigger,
+      {
+        ...triggerProps,
+        paramsRunId: runId,
+        workflowId,
+        observeWorkflowStream: () => {
+          if (runStatus !== "success" && runStatus !== "failed" && runStatus !== "canceled") {
+            observeWorkflowStream?.({ workflowId, runId, storeRunResult: runResult });
           }
         }
-      )
-    ] });
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("ol", { className: "pb-10", children: actualRuns.map((run2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run2.runId }),
-        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run2?.snapshot === "string" ? "" : run2?.snapshot?.timestamp ? formatDate(run2?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-      ]
-    }
-  ) }, run2.runId)) });
 };
 
 const EmptyState = ({
@@ -7473,7 +7298,7 @@ const Row = 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
@@ -7526,7 +7351,7 @@ const DateTimeCell = ({ dateTime, ...props }) => {
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[14px]", children: [
-    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
+    icon && /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
       /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
       description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
@@ -7696,7 +7521,9 @@ const LinkComponentContext = createContext({
     networkNewThreadLink: () => "",
     networkThreadLink: () => "",
     scorerLink: () => "",
-    toolLink: () => ""
+    toolLink: () => "",
+    mcpServerLink: () => "",
+    workflowRunLink: () => ""
   }
 });
 const LinkComponentProvider = ({ children, Link, navigate, paths }) => {
@@ -7710,17 +7537,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__ */ jsx(
         EntryCell,
         {
-          icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
-          name: /* @__PURE__ */ jsx(Link, { href: row.original.link, children: row.original.name }),
+          name: /* @__PURE__ */ jsx(Link, { href: paths.workflowLink(row.original.id), children: row.original.name }),
           description: void 0,
           meta: void 0
         }
@@ -7734,43 +7560,111 @@ const columns$2 = [
     id: "stepsCount",
     header: "Steps",
     size: 300,
-    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(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__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(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__ */ jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
+const Searchbar = ({ onSearch, label, placeholder }) => {
+  const id = useId();
+  const inputRef = useRef(null);
+  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__ */ 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__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ 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__ */ jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx(Kbd, { children: "↵ Enter" }) })
+      ]
+    }
+  );
+};
+const SearchbarWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b-sm border-border1", children });
+};
+
 function WorkflowTable({ workflows, isLoading }) {
+  const [search, setSearch] = useState("");
   const { navigate, paths } = useLinkComponent();
   const workflowData = 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 = useReactTable({
     data: workflowData,
-    columns: columns$2,
+    columns: columns$4,
     getCoreRowModel: getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsx(WorkflowTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsx(EmptyWorkflowsTable, {});
   }
-  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(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) });
+  const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search workflows", placeholder: "Search workflows" }) }),
+    isLoading ? /* @__PURE__ */ jsx(WorkflowTableSkeleton, {}) : /* @__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: filteredRows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(paths.workflowLink(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 WorkflowTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxs(Thead, { children: [
@@ -8391,7 +8285,7 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxs(
 );
 
 const NetlifyIcon = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "128", height: "113", viewBox: "0 0 128 113", children: [
-  /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_236_138)", ...props, children: [
+  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_236_138)", ...props, children: [
     /* @__PURE__ */ jsx(
       "path",
       {
@@ -8515,23 +8409,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 = 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__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
-    /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
-      MessagePrimitive.Parts,
-      {
-        components: {
-          Text: ErrorAwareText,
-          tools: { Fallback: ToolFallbackCustom || ToolFallback },
-          Reasoning
+    /* @__PURE__ */ jsxs("div", { className: clsx("text-icon6 text-ui-lg leading-ui-lg", statusClass), children: [
+      messageStatus === "warning" && /* @__PURE__ */ jsx(Icon, { size: "lg", children: /* @__PURE__ */ jsx(TriangleAlert, {}) }),
+      /* @__PURE__ */ jsx(
+        MessagePrimitive.Parts,
+        {
+          components: {
+            Text: ErrorAwareText,
+            tools: { Fallback: ToolFallbackCustom || ToolFallback },
+            Reasoning
+          }
         }
-      }
-    ) }),
+      )
+    ] }),
     !isToolCallAndOrReasoning && /* @__PURE__ */ jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
       showModelUsed && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(ProviderLogo, { providerId: modelMetadata.modelProvider, size: 14 }),
@@ -9612,6 +9515,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",
@@ -10328,8 +10250,16 @@ function MastraRuntimeProvider({
               threadId,
               modelSettings: modelSettingsArgs,
               signal: controller.signal,
-              onFinish: (messages2) => {
-                return messages2.map((message2) => toAssistantUIMessage(message2));
+              onFinish: ({ messages: messages2, tripwireReason }) => {
+                const next = messages2.length > 0 ? messages2.map((message2) => toAssistantUIMessage(message2)) : [];
+                if (tripwireReason) {
+                  next.push({
+                    role: "assistant",
+                    content: [{ type: "text", text: tripwireReason }],
+                    metadata: { custom: { status: "warning" } }
+                  });
+                }
+                return next;
               }
             });
             return;
@@ -11520,27 +11450,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__ */ jsx(
     EntryCell,
     {
-      icon: /* @__PURE__ */ jsx(AgentIcon, {}),
-      name: /* @__PURE__ */ jsx(Link, { className: "w-full space-y-0", href: row.original.link, children: row.original.name }),
+      name: /* @__PURE__ */ 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__ */ jsxs(Cell, { children: [
         /* @__PURE__ */ jsx(
@@ -11571,67 +11499,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__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ 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__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("span", { className: "flex flex-row gap-2 w-full items-center", children: [
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(AgentIcon, { className: "text-accent1" }), children: [
+          agentsCount,
+          " agent",
+          agentsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-accent6" }), children: [
+          toolsCount,
+          " tool",
+          toolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: [
+          workflowsCount,
+          " workflow",
+          workflowsCount > 1 ? "s" : ""
+        ] })
       ] }) });
     }
   }
 ];
 
 function AgentsTable({ agents, isLoading }) {
+  const [search, setSearch] = useState("");
   const { navigate, paths } = useLinkComponent();
   const projectData = 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 = useReactTable({
     data: projectData,
-    columns: columns$1,
+    columns: columns$3,
     getCoreRowModel: getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsx(AgentsTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsx(EmptyAgentsTable, {});
   }
-  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { 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(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) }) });
+  const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search agents", placeholder: "Search agents" }) }),
+    isLoading ? /* @__PURE__ */ jsx(AgentsTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsx(Tbody, { children: filteredRows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(paths.agentLink(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 AgentsTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxs(Thead, { children: [
     /* @__PURE__ */ jsx(Th, { children: "Name" }),
-    /* @__PURE__ */ jsx(Th, { width: 160, children: "Model" }),
-    /* @__PURE__ */ jsx(Th, { width: 160, children: "Tools" })
+    /* @__PURE__ */ jsx(Th, { children: "Model" }),
+    /* @__PURE__ */ jsx(Th, { children: "Attached entities" })
   ] }),
   /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
   ] }, index)) })
 ] });
 const EmptyAgentsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
@@ -13318,53 +13255,56 @@ const useScorers = () => {
   });
 };
 
-const NameCell = ({ row }) => {
-  const { Link } = useLinkComponent();
+const NameCell$2 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
+  const scorer = row.original;
   return /* @__PURE__ */ jsx(
     EntryCell,
     {
-      icon: /* @__PURE__ */ jsx(GaugeIcon, {}),
-      name: /* @__PURE__ */ jsx(Link, { className: "w-full space-y-0", href: row.original.id, children: row.original.name }),
-      description: row.original.description
+      name: /* @__PURE__ */ 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] = useState("");
   const scorersData = 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 = useReactTable({
     data: scorersData,
-    columns,
+    columns: columns$2,
     getCoreRowModel: getCoreRowModel()
   });
-  if (isLoading) return /* @__PURE__ */ jsx(ScorersTableSkeleton, {});
   const ths = table.getHeaderGroups()[0];
   const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
+  if (rows.length === 0 && !isLoading) {
     return /* @__PURE__ */ jsx(EmptyScorersTable, {});
   }
-  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(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 filteredRows = rows.filter((row) => row.original.scorer.config.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search scorers", placeholder: "Search scorers" }) }),
+    isLoading ? /* @__PURE__ */ jsx(ScorersTableSkeleton, {}) : /* @__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: filteredRows.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: [
   /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsx(Th, { children: "Name" }) }),
@@ -13461,7 +13401,7 @@ const AgentMetadataModelSwitcher = ({
     };
     fetchProviders();
   }, [apiUrl]);
-  const currentModelProvider = selectedProvider;
+  const currentModelProvider = cleanProviderId(selectedProvider);
   const allModels = useMemo(() => {
     return providers.flatMap(
       (provider) => provider.models.map((model) => ({
@@ -13530,7 +13470,7 @@ const AgentMetadataModelSwitcher = ({
     }
   };
   const handleProviderSelect = async (provider) => {
-    setSelectedProvider(provider.id);
+    setSelectedProvider(cleanProviderId(provider.id));
     setProviderSearch("");
     setIsSearchingProvider(false);
     setShowProviderSuggestions(false);
@@ -13555,7 +13495,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({
@@ -14263,13 +14203,14 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
 const ThreadList = ({ children }) => {
   return /* @__PURE__ */ jsx("ol", { children });
 };
-const ThreadItem = ({ children, isActive }) => {
+const ThreadItem = ({ children, isActive, className }) => {
   return /* @__PURE__ */ 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
     }
@@ -14366,7 +14307,7 @@ const ChatThreads = ({ threads, isLoading, threadId, onDelete, resourceId, resou
         /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
         "New Chat"
       ] }) }) }),
-      threads.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!" }),
+      threads.length === 0 && /* @__PURE__ */ 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);
@@ -14438,190 +14379,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__ */ jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
-};
-
-const Searchbar = ({ onSearch, label, placeholder }) => {
-  const id = useId();
-  const inputRef = useRef(null);
-  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__ */ 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__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-          /* @__PURE__ */ 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__ */ jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx(Kbd, { children: "Enter" }) })
-      ]
-    }
-  );
-};
-
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ 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__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className, children });
-};
-
-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 });
-};
-const ToolListInner = ({ toolsWithAgents }) => {
-  const [filteredTools, setFilteredTools] = useState(toolsWithAgents);
-  const [value, setValue] = useState("");
-  if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsx(ToolListEmpty, {});
-  const handleSearch = (value2) => {
-    setValue(value2);
-    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__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: [
-      /* @__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 }, tool.id)) })
-  ] });
-};
-const ToolEntity = ({ tool }) => {
-  const linkRef = 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__ */ 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: toolLink, 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: 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 })
-          },
-          agent.id
-        );
-      }) })
-    ] })
-  ] });
-};
-const ToolListSkeleton = () => {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 xl:grid-cols-3 gap-4 max-w-5xl mx-auto py-8", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
-    ] })
-  ] });
-};
-const ToolListEmpty = () => {
+  const tool = row.original;
   return /* @__PURE__ */ jsx(
-    EmptyState,
+    EntryCell,
     {
-      iconSlot: /* @__PURE__ */ jsx(ToolCoinIcon, {}),
-      titleSlot: "Configure Tools",
-      descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
-      actionSlot: /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ToolsIcon, {}) }),
-            "Docs"
-          ]
-        }
-      )
+      name: /* @__PURE__ */ 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__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ 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) {
@@ -14636,7 +14426,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)) {
@@ -14650,6 +14440,67 @@ const prepareAgents = (tools, agents) => {
   return Array.from(toolsWithAgents.values());
 };
 
+function ToolTable({ tools, agents, isLoading }) {
+  const [search, setSearch] = useState("");
+  const { navigate, paths } = useLinkComponent();
+  const toolData = useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
+  const table = useReactTable({
+    data: toolData,
+    columns: columns$1,
+    getCoreRowModel: getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsx(EmptyToolsTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
+    isLoading ? /* @__PURE__ */ jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ 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__ */ jsx(Row, { onClick: () => navigate(link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
+      }) })
+    ] }) }) })
+  ] });
+}
+const ToolTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxs(Thead, { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsx(Th, { children: "Used by" })
+  ] }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyToolsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(ToolCoinIcon, {}),
+    titleSlot: "Configure Tools",
+    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ToolsIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -15741,10 +15592,10 @@ const Header = ({ children, border = true }) => {
   );
 };
 const HeaderTitle = ({ children }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white flex items-center gap-2", children });
 };
 const HeaderAction = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children });
 };
 const HeaderGroup = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
@@ -17290,7 +17141,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
       }
     ) }),
@@ -17355,6 +17210,41 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -17762,5 +17652,175 @@ const parseError = (error) => {
   }
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, parseError, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useModelReset, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWorkflow, useWorkflowRuns, useWorkingMemory };
+const useMCPServerTools = (selectedServer) => {
+  const client = useMastraClient();
+  return 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 = 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__ */ jsx(
+    EntryCell,
+    {
+      name: /* @__PURE__ */ 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__ */ jsx(Cell, { children: /* @__PURE__ */ 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__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("span", { className: "flex flex-row gap-2 w-full items-center", children: [
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(AgentIcon, { className: "text-accent1" }), children: [
+          agentToolsCount,
+          " agent",
+          agentToolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-accent6" }), children: [
+          toolsCount,
+          " tool",
+          toolsCount > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: [
+          workflowToolsCount,
+          " workflow",
+          workflowToolsCount > 1 ? "s" : ""
+        ] })
+      ] }) });
+    }
+  }
+];
+
+function MCPTable({ mcpServers, isLoading }) {
+  const { navigate, paths } = useLinkComponent();
+  const [search, setSearch] = useState("");
+  const table = useReactTable({
+    data: mcpServers,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsx(EmptyMCPTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search MCP servers", placeholder: "Search MCP servers" }) }),
+    isLoading ? /* @__PURE__ */ jsx(MCPTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsx(Tbody, { children: filteredRows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(paths.mcpServerLink(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 MCPTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxs(Thead, { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsx(Th, { children: "Model" }),
+    /* @__PURE__ */ jsx(Th, { children: "Attached entities" })
+  ] }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyMCPTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(McpCoinIcon, {}),
+    titleSlot: "Configure MCP servers",
+    descriptionSlot: "MCP servers are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ 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__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  return /* @__PURE__ */ jsx("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: paths.workflowLink(workflowId), 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 workflow run"
+    ] }) }) }),
+    actualRuns.length === 0 && /* @__PURE__ */ 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__ */ jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
+      typeof run?.snapshot === "object" && /* @__PURE__ */ jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
+      /* @__PURE__ */ jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
+      /* @__PURE__ */ jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+    ] }) }, run.runId))
+  ] }) }) });
+};
+const WorkflowRunStatusBadge = ({ status }) => {
+  if (status === "running") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Spinner, {}), children: status });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(X, { className: "text-accent2" }), children: status });
+  }
+  if (status === "canceled") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(CircleSlash, { className: "text-icon3" }), children: status });
+  }
+  if (status === "pending" || status === "waiting") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Clock$1, { className: "text-icon3" }), children: status });
+  }
+  if (status === "suspended") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }), children: status });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Check, { className: "text-accent1" }), children: status });
+  }
+  return /* @__PURE__ */ jsx(Badge$1, { variant: "default", children: status });
+};
+
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresTools, SearchField, Searchbar, SearchbarWrapper, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, parseError, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMCPServerTools, useModelReset, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWorkflow, useWorkflowRuns, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map