@mastra/playground-ui 5.1.2 → 5.1.4-alpha.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useMemo, useRef, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, useId } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize } from 'lucide-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';
@@ -17,6 +17,7 @@ import { jsonLanguage } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror from '@uiw/react-codemirror';
+import { toast } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useShallow } from 'zustand/shallow';
 import { RuntimeContext } from '@mastra/core/di';
@@ -24,7 +25,6 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { toast } from 'sonner';
 import { AnimatePresence } from 'motion/react';
 import { C as Colors } from './colors-CBG_Mm7P.js';
 import { processDataStream } from '@ai-sdk/ui-utils';
@@ -539,8 +539,8 @@ const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
 const isFraction = value => fractionRegex.test(value);
-const isNumber = value => Boolean(value) && !Number.isNaN(Number(value));
-const isInteger = value => Boolean(value) && Number.isInteger(Number(value));
+const isNumber = value => !!value && !Number.isNaN(Number(value));
+const isInteger = value => !!value && Number.isInteger(Number(value));
 const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
 const isTshirtSize = value => tshirtUnitRegex.test(value);
 const isAny = () => true;
@@ -559,7 +559,7 @@ const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isL
 const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
 const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
 const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
-const isArbitraryShadow = value => getIsArbitraryValue(value, isNever, isShadow);
+const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
 const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
 const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
 const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
@@ -589,11 +589,9 @@ const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) =>
   return false;
 };
 // Labels
-const isLabelPosition = label => label === 'position';
-const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
-const isLabelImage = label => imageLabels.has(label);
-const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
-const isLabelSize = label => sizeLabels.has(label);
+const isLabelPosition = label => label === 'position' || label === 'percentage';
+const isLabelImage = label => label === 'image' || label === 'url';
+const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
 const isLabelLength = label => label === 'length';
 const isLabelNumber = label => label === 'number';
 const isLabelFamilyName = label => label === 'family-name';
@@ -616,6 +614,7 @@ const getDefaultConfig = () => {
   const themeRadius = fromTheme('radius');
   const themeShadow = fromTheme('shadow');
   const themeInsetShadow = fromTheme('inset-shadow');
+  const themeTextShadow = fromTheme('text-shadow');
   const themeDropShadow = fromTheme('drop-shadow');
   const themeBlur = fromTheme('blur');
   const themePerspective = fromTheme('perspective');
@@ -630,7 +629,16 @@ const getDefaultConfig = () => {
    */
   /***/
   const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
-  const scalePosition = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
+  const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-top', 'top-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-top', 'bottom-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-bottom', 'bottom-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-bottom'];
+  const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
   const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
   const scaleOverscroll = () => ['auto', 'contain', 'none'];
   const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
@@ -638,25 +646,34 @@ const getDefaultConfig = () => {
   const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartAndEnd = () => ['auto', {
     span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
-  }, isArbitraryVariable, isArbitraryValue];
+  }, isInteger, isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
   const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
-  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'];
-  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'];
+  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
+  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
   const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
-  const scaleGradientStopPosition = () => [isPercent, isArbitraryLength];
+  const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
+    position: [isArbitraryVariable, isArbitraryValue]
+  }];
+  const scaleBgRepeat = () => ['no-repeat', {
+    repeat: ['', 'x', 'y', 'space', 'round']
+  }];
+  const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
+    size: [isArbitraryVariable, isArbitraryValue]
+  }];
+  const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
   const scaleRadius = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
   const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
   const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
   const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
+  const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
   const scaleBlur = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
-  const scaleOrigin = () => ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryVariable, isArbitraryValue];
   const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
@@ -681,6 +698,7 @@ const getDefaultConfig = () => {
       shadow: [isTshirtSize],
       spacing: ['px', isNumber],
       text: [isTshirtSize],
+      'text-shadow': [isTshirtSize],
       tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
     },
     classGroups: {
@@ -783,7 +801,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/object-position
        */
       'object-position': [{
-        object: [...scalePosition(), isArbitraryValue, isArbitraryVariable]
+        object: scalePositionWithArbitrary()
       }],
       /**
        * Overflow
@@ -1090,14 +1108,18 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/align-items
        */
       'align-items': [{
-        items: [...scaleAlignSecondaryAxis(), 'baseline']
+        items: [...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Align Self
        * @see https://tailwindcss.com/docs/align-self
        */
       'align-self': [{
-        self: ['auto', ...scaleAlignSecondaryAxis(), 'baseline']
+        self: ['auto', ...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Place Content
@@ -1312,21 +1334,21 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: ['screen', ...scaleSizing()]
+        h: ['screen', 'lh', ...scaleSizing()]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       'min-h': [{
-        'min-h': ['screen', 'none', ...scaleSizing()]
+        'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       'max-h': [{
-        'max-h': ['screen', ...scaleSizing()]
+        'max-h': ['screen', 'lh', ...scaleSizing()]
       }],
       // ------------------
       // --- Typography ---
@@ -1542,6 +1564,13 @@ const getDefaultConfig = () => {
       break: [{
         break: ['normal', 'words', 'all', 'keep']
       }],
+      /**
+       * Overflow Wrap
+       * @see https://tailwindcss.com/docs/overflow-wrap
+       */
+      wrap: [{
+        wrap: ['break-word', 'anywhere', 'normal']
+      }],
       /**
        * Hyphens
        * @see https://tailwindcss.com/docs/hyphens
@@ -1585,23 +1614,21 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/background-position
        */
       'bg-position': [{
-        bg: [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition]
+        bg: scaleBgPosition()
       }],
       /**
        * Background Repeat
        * @see https://tailwindcss.com/docs/background-repeat
        */
       'bg-repeat': [{
-        bg: ['no-repeat', {
-          repeat: ['', 'x', 'y', 'space', 'round']
-        }]
+        bg: scaleBgRepeat()
       }],
       /**
        * Background Size
        * @see https://tailwindcss.com/docs/background-size
        */
       'bg-size': [{
-        bg: ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize]
+        bg: scaleBgSize()
       }],
       /**
        * Background Image
@@ -1970,7 +1997,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       'outline-color': [{
-        outline: [themeColor]
+        outline: scaleColor()
       }],
       // ---------------
       // --- Effects ---
@@ -1996,7 +2023,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       'inset-shadow': [{
-        'inset-shadow': ['none', isArbitraryVariable, isArbitraryValue, themeInsetShadow]
+        'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
       }],
       /**
        * Inset Box Shadow Color
@@ -2058,6 +2085,20 @@ const getDefaultConfig = () => {
       'inset-ring-color': [{
         'inset-ring': scaleColor()
       }],
+      /**
+       * Text Shadow
+       * @see https://tailwindcss.com/docs/text-shadow
+       */
+      'text-shadow': [{
+        'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Text Shadow Color
+       * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
+       */
+      'text-shadow-color': [{
+        'text-shadow': scaleColor()
+      }],
       /**
        * Opacity
        * @see https://tailwindcss.com/docs/opacity
@@ -2079,6 +2120,202 @@ const getDefaultConfig = () => {
       'bg-blend': [{
         'bg-blend': scaleBlendMode()
       }],
+      /**
+       * Mask Clip
+       * @see https://tailwindcss.com/docs/mask-clip
+       */
+      'mask-clip': [{
+        'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }, 'mask-no-clip'],
+      /**
+       * Mask Composite
+       * @see https://tailwindcss.com/docs/mask-composite
+       */
+      'mask-composite': [{
+        mask: ['add', 'subtract', 'intersect', 'exclude']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image-linear-pos': [{
+        'mask-linear': [isNumber]
+      }],
+      'mask-image-linear-from-pos': [{
+        'mask-linear-from': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-to-pos': [{
+        'mask-linear-to': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-from-color': [{
+        'mask-linear-from': scaleColor()
+      }],
+      'mask-image-linear-to-color': [{
+        'mask-linear-to': scaleColor()
+      }],
+      'mask-image-t-from-pos': [{
+        'mask-t-from': scaleMaskImagePosition()
+      }],
+      'mask-image-t-to-pos': [{
+        'mask-t-to': scaleMaskImagePosition()
+      }],
+      'mask-image-t-from-color': [{
+        'mask-t-from': scaleColor()
+      }],
+      'mask-image-t-to-color': [{
+        'mask-t-to': scaleColor()
+      }],
+      'mask-image-r-from-pos': [{
+        'mask-r-from': scaleMaskImagePosition()
+      }],
+      'mask-image-r-to-pos': [{
+        'mask-r-to': scaleMaskImagePosition()
+      }],
+      'mask-image-r-from-color': [{
+        'mask-r-from': scaleColor()
+      }],
+      'mask-image-r-to-color': [{
+        'mask-r-to': scaleColor()
+      }],
+      'mask-image-b-from-pos': [{
+        'mask-b-from': scaleMaskImagePosition()
+      }],
+      'mask-image-b-to-pos': [{
+        'mask-b-to': scaleMaskImagePosition()
+      }],
+      'mask-image-b-from-color': [{
+        'mask-b-from': scaleColor()
+      }],
+      'mask-image-b-to-color': [{
+        'mask-b-to': scaleColor()
+      }],
+      'mask-image-l-from-pos': [{
+        'mask-l-from': scaleMaskImagePosition()
+      }],
+      'mask-image-l-to-pos': [{
+        'mask-l-to': scaleMaskImagePosition()
+      }],
+      'mask-image-l-from-color': [{
+        'mask-l-from': scaleColor()
+      }],
+      'mask-image-l-to-color': [{
+        'mask-l-to': scaleColor()
+      }],
+      'mask-image-x-from-pos': [{
+        'mask-x-from': scaleMaskImagePosition()
+      }],
+      'mask-image-x-to-pos': [{
+        'mask-x-to': scaleMaskImagePosition()
+      }],
+      'mask-image-x-from-color': [{
+        'mask-x-from': scaleColor()
+      }],
+      'mask-image-x-to-color': [{
+        'mask-x-to': scaleColor()
+      }],
+      'mask-image-y-from-pos': [{
+        'mask-y-from': scaleMaskImagePosition()
+      }],
+      'mask-image-y-to-pos': [{
+        'mask-y-to': scaleMaskImagePosition()
+      }],
+      'mask-image-y-from-color': [{
+        'mask-y-from': scaleColor()
+      }],
+      'mask-image-y-to-color': [{
+        'mask-y-to': scaleColor()
+      }],
+      'mask-image-radial': [{
+        'mask-radial': [isArbitraryVariable, isArbitraryValue]
+      }],
+      'mask-image-radial-from-pos': [{
+        'mask-radial-from': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-to-pos': [{
+        'mask-radial-to': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-from-color': [{
+        'mask-radial-from': scaleColor()
+      }],
+      'mask-image-radial-to-color': [{
+        'mask-radial-to': scaleColor()
+      }],
+      'mask-image-radial-shape': [{
+        'mask-radial': ['circle', 'ellipse']
+      }],
+      'mask-image-radial-size': [{
+        'mask-radial': [{
+          closest: ['side', 'corner'],
+          farthest: ['side', 'corner']
+        }]
+      }],
+      'mask-image-radial-pos': [{
+        'mask-radial-at': scalePosition()
+      }],
+      'mask-image-conic-pos': [{
+        'mask-conic': [isNumber]
+      }],
+      'mask-image-conic-from-pos': [{
+        'mask-conic-from': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-to-pos': [{
+        'mask-conic-to': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-from-color': [{
+        'mask-conic-from': scaleColor()
+      }],
+      'mask-image-conic-to-color': [{
+        'mask-conic-to': scaleColor()
+      }],
+      /**
+       * Mask Mode
+       * @see https://tailwindcss.com/docs/mask-mode
+       */
+      'mask-mode': [{
+        mask: ['alpha', 'luminance', 'match']
+      }],
+      /**
+       * Mask Origin
+       * @see https://tailwindcss.com/docs/mask-origin
+       */
+      'mask-origin': [{
+        'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }],
+      /**
+       * Mask Position
+       * @see https://tailwindcss.com/docs/mask-position
+       */
+      'mask-position': [{
+        mask: scaleBgPosition()
+      }],
+      /**
+       * Mask Repeat
+       * @see https://tailwindcss.com/docs/mask-repeat
+       */
+      'mask-repeat': [{
+        mask: scaleBgRepeat()
+      }],
+      /**
+       * Mask Size
+       * @see https://tailwindcss.com/docs/mask-size
+       */
+      'mask-size': [{
+        mask: scaleBgSize()
+      }],
+      /**
+       * Mask Type
+       * @see https://tailwindcss.com/docs/mask-type
+       */
+      'mask-type': [{
+        'mask-type': ['alpha', 'luminance']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image': [{
+        mask: ['none', isArbitraryVariable, isArbitraryValue]
+      }],
       // ---------------
       // --- Filters ---
       // ---------------
@@ -2119,7 +2356,14 @@ const getDefaultConfig = () => {
       'drop-shadow': [{
         'drop-shadow': [
         // Deprecated since Tailwind CSS v4.0.0
-        '', 'none', themeDropShadow, isArbitraryVariable, isArbitraryValue]
+        '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Drop Shadow Color
+       * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
+       */
+      'drop-shadow-color': [{
+        'drop-shadow': scaleColor()
       }],
       /**
        * Grayscale
@@ -2340,7 +2584,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/perspective-origin
        */
       'perspective-origin': [{
-        'perspective-origin': scaleOrigin()
+        'perspective-origin': scalePositionWithArbitrary()
       }],
       /**
        * Rotate
@@ -2436,7 +2680,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       'transform-origin': [{
-        origin: scaleOrigin()
+        origin: scalePositionWithArbitrary()
       }],
       /**
        * Transform Style
@@ -2804,10 +3048,10 @@ const getDefaultConfig = () => {
       'rounded-b': ['rounded-br', 'rounded-bl'],
       'rounded-l': ['rounded-tl', 'rounded-bl'],
       'border-spacing': ['border-spacing-x', 'border-spacing-y'],
-      'border-w': ['border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
+      'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
       'border-w-x': ['border-w-r', 'border-w-l'],
       'border-w-y': ['border-w-t', 'border-w-b'],
-      'border-color': ['border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
+      'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
       'border-color-x': ['border-color-r', 'border-color-l'],
       'border-color-y': ['border-color-t', 'border-color-b'],
       translate: ['translate-x', 'translate-y', 'translate-none'],
@@ -2826,7 +3070,7 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
-    orderSensitiveModifiers: ['before', 'after', 'placeholder', 'file', 'marker', 'selection', 'first-line', 'first-letter', 'backdrop', '*', '**']
+    orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
@@ -3999,6 +4243,48 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "12
   ) }) })
 ] });
 
+function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      toast.success(copyMessage);
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    }).catch(() => {
+      toast.error("Failed to copy to clipboard.");
+    });
+  }, [text, copyMessage]);
+  return { isCopied, handleCopy };
+}
+
+function CopyButton({ content, copyMessage, className }) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage
+  });
+  return /* @__PURE__ */ jsxs(
+    Button$1,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("relative h-6 w-6", className),
+      "aria-label": "Copy to clipboard",
+      onClick: handleCopy,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
+        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
+      ]
+    }
+  );
+}
+
 const useCodemirrorTheme$1 = () => {
   return useMemo(
     () => draculaInit({
@@ -4015,10 +4301,13 @@ const useCodemirrorTheme$1 = () => {
     []
   );
 };
-const SyntaxHighlighter$1 = ({ data }) => {
+const SyntaxHighlighter$1 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$1();
-  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
+  return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
+    /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2" }),
+    /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
+  ] });
 };
 async function highlight(code, language) {
   const { codeToTokens, bundledLanguages } = await import('shiki');
@@ -4086,7 +4375,7 @@ const AssistantActionBar = () => {
       hideWhenRunning: true,
       autohide: "always",
       autohideFloat: "single-branch",
-      className: "flex gap-1 items-center transition-all",
+      className: "flex gap-1 items-center transition-all relative",
       children: /* @__PURE__ */ jsx(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
         /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsx(CheckIcon$1, {}) }),
         /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsx(CopyIcon, {}) })
@@ -4358,37 +4647,25 @@ const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
   return /* @__PURE__ */ jsxs(ThreadWrapper, { children: [
-    /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(ThreadWelcome, { agentName }),
-        /* @__PURE__ */ jsx(
-          ThreadPrimitive.Messages,
-          {
-            components: {
-              UserMessage,
-              EditComposer,
-              AssistantMessage: WrappedAssistantMessage
-            }
+    /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
+      /* @__PURE__ */ jsx(ThreadWelcome, { agentName }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsx(
+        ThreadPrimitive.Messages,
+        {
+          components: {
+            UserMessage,
+            EditComposer,
+            AssistantMessage: WrappedAssistantMessage
           }
-        )
-      ] }),
+        }
+      ) }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsx(Composer, { hasMemory, showFileSupport })
   ] });
 };
 const ThreadWrapper = ({ children }) => {
-  const hasAttachments = useHasAttachments();
-  return /* @__PURE__ */ jsx(
-    ThreadPrimitive.Root,
-    {
-      className: clsx(
-        "max-w-[568px] w-full mx-auto px-4",
-        hasAttachments ? "h-[calc(100%-208px)]" : "h-[calc(100%-112px)]"
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
 };
 const ThreadWelcome = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
@@ -4407,10 +4684,10 @@ const ThreadWelcome = ({ agentName }) => {
   ] }) });
 };
 const Composer = ({ hasMemory, showFileSupport }) => {
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
-      /* @__PURE__ */ jsx(ComposerAttachments, {}),
-      /* @__PURE__ */ jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-2 py-3", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4", children: [
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -4427,8 +4704,8 @@ const Composer = ({ hasMemory, showFileSupport }) => {
         ] })
       ] })
     ] }),
-    !hasMemory && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
+    !hasMemory && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex gap-2 pt-1 max-w-[568px] w-full mx-auto border-t items-start", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "transform translate-y-[0.1rem]", children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
       "Memory is not enabled. The conversation will not be persisted."
     ] })
   ] });
@@ -4615,22 +4892,26 @@ function MastraRuntimeProvider({
     if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
       if (initialMessages && threadId && memory) {
         const convertedMessages = initialMessages?.map((message) => {
-          if (message?.toolInvocations?.length > 0) {
-            return {
-              ...message,
-              content: [
-                ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
-                ...message.toolInvocations.map((toolInvocation) => ({
-                  type: "tool-call",
-                  toolCallId: toolInvocation?.toolCallId,
-                  toolName: toolInvocation?.toolName,
-                  args: toolInvocation?.args,
-                  result: toolInvocation?.result
-                }))
-              ]
-            };
-          }
-          return message;
+          const toolInvocationsAsContentParts = (message.toolInvocations || []).map((toolInvocation) => ({
+            type: "tool-call",
+            toolCallId: toolInvocation?.toolCallId,
+            toolName: toolInvocation?.toolName,
+            args: toolInvocation?.args,
+            result: toolInvocation?.result
+          }));
+          const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
+            type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
+            mimeType: image.contentType,
+            image: image.url
+          }));
+          return {
+            ...message,
+            content: [
+              ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
+              ...toolInvocationsAsContentParts,
+              ...attachmentsAsContentParts
+            ]
+          };
         }).filter(Boolean);
         setMessages(convertedMessages);
         setCurrentThreadId(threadId);
@@ -5016,7 +5297,7 @@ const AgentChat = ({
       modelSettings,
       chatWithGenerate,
       runtimeContext,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, showFileSupport }) })
+      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, showFileSupport })
     }
   );
 };
@@ -5102,7 +5383,7 @@ const Input = React.forwardRef(
       "input",
       {
         type,
-        className: cn(className, inputVariants({ variant, customSize, className })),
+        className: clsx(className, inputVariants({ variant, customSize, className })),
         "data-testid": testId,
         ref,
         ...props
@@ -6420,48 +6701,6 @@ function MastraNetworkRuntimeProvider({
   ] });
 }
 
-function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef(null);
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(() => {
-      toast.success(copyMessage);
-      setIsCopied(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-      timeoutRef.current = setTimeout(() => {
-        setIsCopied(false);
-      }, 2e3);
-    }).catch(() => {
-      toast.error("Failed to copy to clipboard.");
-    });
-  }, [text, copyMessage]);
-  return { isCopied, handleCopy };
-}
-
-function CopyButton({ content, copyMessage, classname }) {
-  const { isCopied, handleCopy } = useCopyToClipboard({
-    text: content,
-    copyMessage
-  });
-  return /* @__PURE__ */ jsxs(
-    Button$1,
-    {
-      variant: "ghost",
-      size: "icon",
-      className: cn("relative h-6 w-6", classname),
-      "aria-label": "Copy to clipboard",
-      onClick: handleCopy,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
-        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
-      ]
-    }
-  );
-}
-
 function MarkdownRenderer({ children }) {
   const processedText = children.replace(/\\n/g, "\n");
   return /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
@@ -6688,7 +6927,7 @@ function NetworkProvider({ children }) {
 
 const NetworkChat = ({ agentId, memory }) => {
   const { modelSettings } = useContext(NetworkContext);
-  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
+  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) });
 };
 
 function WorkflowTraces({ traces, error, runId, stepName }) {
@@ -9052,7 +9291,8 @@ function DynamicForm({
   onSubmit,
   defaultValues,
   isSubmitLoading,
-  submitButtonLabel
+  submitButtonLabel,
+  className
 }) {
   if (!schema) {
     console.error("no form schema found");
@@ -9070,21 +9310,21 @@ function DynamicForm({
   const formProps = {
     schema: schemaProvider,
     onSubmit: async (values) => {
-      await onSubmit(values?.["​"] || {});
+      await onSubmit?.(values?.["​"] || {});
     },
     defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
       className: ""
     },
     uiComponents: {
-      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children })
+      SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
     },
     formComponents: {
       Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
     },
     withSubmit: true
   };
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(AutoForm, { ...formProps }) });
+  return /* @__PURE__ */ jsx(AutoForm, { ...formProps });
 }
 
 function resolveSerializedZodOutput(obj) {
@@ -9146,7 +9386,7 @@ const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
       header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [
         /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 flex items-center gap-3 font-medium", children: [
           /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(DeploymentIcon, {}) }),
-          "Results"
+          "Workflow Execution (JSON)"
         ] }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -9635,23 +9875,6 @@ function WorkflowGraph({ workflowId, onShowTrace }) {
   ) }) }, snapshot?.runId ?? workflowId);
 }
 
-const WorkflowStatus = ({ stepId, status }) => {
-  return /* @__PURE__ */ jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs(Icon, { children: [
-          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-icon3" }),
-          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
-        ] }),
-        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
-      ] })
-    }
-  );
-};
-
 function WorkflowTrigger({ workflowId, setRunId }) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
@@ -9690,7 +9913,6 @@ function WorkflowTrigger({ workflowId, setRunId }) {
     });
   };
   const watchResultToUse = result ?? watchResult;
-  const workflowActivePaths = watchResultToUse?.payload?.workflowState?.steps ?? {};
   useEffect(() => {
     setIsRunning(isWatchingWorkflow);
   }, [isWatchingWorkflow]);
@@ -9717,81 +9939,134 @@ function WorkflowTrigger({ workflowId, setRunId }) {
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result ?? {};
-  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
-  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
-      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
-    ] }),
-    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-      DynamicForm,
-      {
-        schema: zodInputSchema,
-        defaultValues: payload,
-        isSubmitLoading: isWatchingWorkflow,
-        submitButtonLabel: "Run",
-        onSubmit: (data) => {
-          setPayload(data);
-          handleExecuteWorkflow(data);
-        }
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: "w-full",
-        variant: "light",
-        disabled: isRunning,
-        onClick: () => handleExecuteWorkflow(null),
-        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
-      }
-    ) }),
-    !isWatchingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
-      const stepDefinition = workflow.steps[step.stepId];
-      const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
-        step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          CodeBlockDemo,
-          {
-            className: "w-full overflow-x-auto p-2",
-            code: JSON.stringify(step.suspendPayload, null, 2),
-            language: "json"
+  const { sanitizedOutput, ...restResult } = result || {};
+  return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
+      isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
+        /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
+      ] }),
+      !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+        DynamicForm,
+        {
+          schema: zodInputSchema,
+          defaultValues: payload,
+          isSubmitLoading: isWatchingWorkflow,
+          submitButtonLabel: "Run",
+          onSubmit: (data) => {
+            setPayload(data);
+            handleExecuteWorkflow(data);
           }
-        ) }),
-        /* @__PURE__ */ jsx(
-          DynamicForm,
-          {
-            schema: stepSchema,
-            isSubmitLoading: isResumingWorkflow,
-            submitButtonLabel: "Resume",
-            onSubmit: (data) => {
-              handleResumeWorkflow({
-                stepId: step.stepId,
-                runId: step.runId,
-                suspendPayload: step.suspendPayload,
-                resumeData: data
-              });
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "w-full",
+          variant: "light",
+          disabled: isRunning,
+          onClick: () => handleExecuteWorkflow(null),
+          children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+        }
+      ) }),
+      !isWatchingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
+        const stepDefinition = workflow.steps[step.stepId];
+        const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
+          /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
+          step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            CodeBlockDemo,
+            {
+              className: "w-full overflow-x-auto p-2",
+              code: JSON.stringify(step.suspendPayload, null, 2),
+              language: "json"
             }
-          }
-        )
-      ] });
-    }),
-    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__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 }]) => {
-          return /* @__PURE__ */ jsx(WorkflowStatus, { stepId, status });
-        }) })
-      ] })
+          ) }),
+          /* @__PURE__ */ jsx(
+            DynamicForm,
+            {
+              schema: stepSchema,
+              isSubmitLoading: isResumingWorkflow,
+              submitButtonLabel: "Resume",
+              onSubmit: (data) => {
+                handleResumeWorkflow({
+                  stepId: step.stepId,
+                  runId: step.runId,
+                  suspendPayload: step.suspendPayload,
+                  resumeData: data
+                });
+              }
+            }
+          )
+        ] });
+      })
     ] }),
-    result && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
-    ] })
-  ] }) });
+    result && /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsx(WorkflowJsonDialog, { result: restResult }) }),
+    result && /* @__PURE__ */ jsx(WorkflowResultSection, { result, workflow })
+  ] });
 }
+const WorkflowResultSection = ({ result, workflow }) => {
+  const workflowState = result.payload.workflowState;
+  if (typeof workflowState.result === "string" || typeof workflowState.result === "number" || typeof workflowState.result === "boolean") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Txt, { as: "label", htmlFor: "string-result", variant: "ui-sm", className: "text-icon3", children: "Workflow Result" }) }),
+      /* @__PURE__ */ jsx(Input, { id: "string-result", defaultValue: String(workflowState.result) })
+    ] });
+  }
+  const hasResult = Object.keys(workflowState.result || {}).length > 0;
+  if (!hasResult) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Final Output" }),
+    /* @__PURE__ */ jsx("ul", { className: "pt-4", children: Object.entries(workflowState.result || {}).map(([stepId, stepResult]) => {
+      const stepDefinition = workflow.steps[stepId];
+      return /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: "border-b-sm border-dashed border-border1 last:border-b-0 py-4 first:pt-0 last:pb-0",
+          children: /* @__PURE__ */ jsx(WorkflowResultFinishedStep, { stepResult, stepDefinition })
+        },
+        stepId
+      );
+    }) })
+  ] });
+};
+const WorkflowResultFinishedStep = ({ stepResult, stepDefinition }) => {
+  const id = useId();
+  try {
+    const zodObjectSchema = resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.outputSchema)));
+    if (zodObjectSchema?._def?.typeName === "ZodString") {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Footprints, { className: "text-icon3" }) }),
+          /* @__PURE__ */ jsx(Txt, { as: "label", htmlFor: id, variant: "ui-sm", className: "text-icon3", children: stepDefinition.description })
+        ] }),
+        /* @__PURE__ */ jsx(Input, { id, defaultValue: stepResult })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Footprints, { className: "text-icon3" }) }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: stepDefinition.description })
+      ] }),
+      /* @__PURE__ */ jsx(DynamicForm, { schema: zodObjectSchema, defaultValues: stepResult })
+    ] });
+  } catch (err) {
+    console.error("Error parsing output schema", err);
+    return /* @__PURE__ */ jsx(Txt, { children: "An error occured. Please open an issue on GitHub." });
+  }
+};
+const WorkflowJsonDialog = ({ result }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "light", onClick: () => setOpen(true), className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, { className: "text-icon3" }) }),
+      "Open Workflow Execution (JSON)"
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result, className: "p-4" }) })
+    ] }) }) })
+  ] });
+};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {
@@ -9920,7 +10195,7 @@ const ThreadItem = ({ children, isActive }) => {
     "li",
     {
       className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-5 py-2",
+        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
         isActive && "bg-surface4"
       ),
       children