@mastra/playground-ui 59.0.0 → 60.0.0-alpha.1

package/dist/domains/traces/components/trace-time-range-chip.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_traceFilters = require('../trace-filters.cjs.js');
-const dateTimeRangePicker = require('../../../date-time-range-picker-sT5qAW-_.cjs');
+const dateTimeRangePicker = require('../../../date-time-range-picker-DRKmikCe.cjs');
 const filterBarChip = require('../../../filter-bar-chip-BdZHI76J.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 

package/dist/domains/traces/components/trace-time-range-chip.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters.es.js';
-import { D as DateTimeRangePicker } from '../../../date-time-range-picker-Bnviv7s-.js';
+import { D as DateTimeRangePicker } from '../../../date-time-range-picker-D2OD8zbg.js';
 import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-7X4Aw_WH.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 

package/dist/domains/workflows/components/workflow-combobox.cjs.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const domains_workflows_hooks_useWorkflows = require('../hooks/use-workflows.cjs.js');
+const combobox = require('../../../combobox-DqDTf4r9.cjs');
+require('@base-ui/react/combobox');
+const lib_framework = require('../../../lib/framework.cjs.js');
+const toast = require('../../../toast-nm-fM7BR.cjs');
+
+function WorkflowCombobox({
+  value,
+  onValueChange,
+  placeholder = "Select a workflow...",
+  searchPlaceholder = "Search workflows...",
+  emptyText = "No workflows found.",
+  className,
+  disabled = false,
+  variant,
+  size,
+  "aria-label": ariaLabel,
+  align,
+  requestContext
+}) {
+  const { data: workflows = {}, isLoading, isError, error } = domains_workflows_hooks_useWorkflows.useWorkflows({ requestContext });
+  const { navigate, paths } = lib_framework.useLinkComponent();
+  React.useEffect(() => {
+    if (isError) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load workflows";
+      toast.toast.error(`Error loading workflows: ${errorMessage}`);
+    }
+  }, [isError, error]);
+  const workflowOptions = Object.keys(workflows).map((key) => ({
+    label: workflows[key]?.name || key,
+    value: key
+  }));
+  const handleValueChange = (newWorkflowId) => {
+    if (onValueChange) {
+      onValueChange(newWorkflowId);
+    } else if (newWorkflowId && newWorkflowId !== value) {
+      navigate(paths.workflowLink(newWorkflowId));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox,
+    {
+      options: workflowOptions,
+      value,
+      onValueChange: handleValueChange,
+      placeholder: isLoading ? "Loading workflows..." : placeholder,
+      searchPlaceholder,
+      emptyText,
+      className,
+      disabled: disabled || isLoading || isError,
+      variant,
+      size,
+      "aria-label": ariaLabel,
+      align
+    }
+  );
+}
+
+exports.WorkflowCombobox = WorkflowCombobox;
+//# sourceMappingURL=workflow-combobox.cjs.js.map

package/dist/domains/workflows/components/workflow-combobox.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-combobox.cjs.js","sources":["../../../../src/domains/workflows/components/workflow-combobox.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useWorkflows } from '../hooks/use-workflows';\nimport { Combobox } from '@/ds/components/Combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox';\nimport { useLinkComponent } from '@/lib/framework';\nimport { toast } from '@/utils/toast';\n\nexport interface WorkflowComboboxProps {\n  requestContext?: Record<string, any>;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxProps['variant'];\n  size?: ComboboxProps['size'];\n  'aria-label'?: string;\n  align?: ComboboxProps['align'];\n}\n\nexport function WorkflowCombobox({\n  value,\n  onValueChange,\n  placeholder = 'Select a workflow...',\n  searchPlaceholder = 'Search workflows...',\n  emptyText = 'No workflows found.',\n  className,\n  disabled = false,\n  variant,\n  size,\n  'aria-label': ariaLabel,\n  align,\n  requestContext,\n}: WorkflowComboboxProps) {\n  const { data: workflows = {}, isLoading, isError, error } = useWorkflows({ requestContext });\n  const { navigate, paths } = useLinkComponent();\n\n  useEffect(() => {\n    if (isError) {\n      const errorMessage = error instanceof Error ? error.message : 'Failed to load workflows';\n      toast.error(`Error loading workflows: ${errorMessage}`);\n    }\n  }, [isError, error]);\n\n  const workflowOptions = Object.keys(workflows).map(key => ({\n    label: workflows[key]?.name || key,\n    value: key,\n  }));\n\n  const handleValueChange = (newWorkflowId: string) => {\n    if (onValueChange) {\n      onValueChange(newWorkflowId);\n    } else if (newWorkflowId && newWorkflowId !== value) {\n      navigate(paths.workflowLink(newWorkflowId));\n    }\n  };\n\n  return (\n    <Combobox\n      options={workflowOptions}\n      value={value}\n      onValueChange={handleValueChange}\n      placeholder={isLoading ? 'Loading workflows...' : placeholder}\n      searchPlaceholder={searchPlaceholder}\n      emptyText={emptyText}\n      className={className}\n      disabled={disabled || isLoading || isError}\n      variant={variant}\n      size={size}\n      aria-label={ariaLabel}\n      align={align}\n    />\n  );\n}\n"],"names":["useWorkflows","useLinkComponent","useEffect","toast","jsx","Combobox"],"mappings":";;;;;;;;;;;;AAsBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,KAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA,GAAc,sBAAA;AAAA,EACd,iBAAA,GAAoB,qBAAA;AAAA,EACpB,SAAA,GAAY,qBAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,KAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,GAAY,EAAC,EAAG,SAAA,EAAW,OAAA,EAAS,KAAA,EAAM,GAAIA,iDAAA,CAAa,EAAE,cAAA,EAAgB,CAAA;AAC3F,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAM,GAAIC,8BAAA,EAAiB;AAE7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,MAAM,YAAA,GAAe,KAAA,YAAiB,KAAA,GAAQ,KAAA,CAAM,OAAA,GAAU,0BAAA;AAC9D,MAAAC,WAAA,CAAM,KAAA,CAAM,CAAA,yBAAA,EAA4B,YAAY,CAAA,CAAE,CAAA;AAAA,IACxD;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,KAAK,CAAC,CAAA;AAEnB,EAAA,MAAM,kBAAkB,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAA,GAAA,MAAQ;AAAA,IACzD,KAAA,EAAO,SAAA,CAAU,GAAG,CAAA,EAAG,IAAA,IAAQ,GAAA;AAAA,IAC/B,KAAA,EAAO;AAAA,GACT,CAAE,CAAA;AAEF,EAAA,MAAM,iBAAA,GAAoB,CAAC,aAAA,KAA0B;AACnD,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,aAAA,CAAc,aAAa,CAAA;AAAA,IAC7B,CAAA,MAAA,IAAW,aAAA,IAAiB,aAAA,KAAkB,KAAA,EAAO;AACnD,MAAA,QAAA,CAAS,KAAA,CAAM,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,IAC5C;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,eAAA;AAAA,MACT,KAAA;AAAA,MACA,aAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAa,YAAY,sBAAA,GAAyB,WAAA;AAAA,MAClD,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,YAAY,SAAA,IAAa,OAAA;AAAA,MACnC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-combobox.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workflows/components/workflow-combobox'
+export {}

package/dist/domains/workflows/components/workflow-combobox.es.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useWorkflows } from '../hooks/use-workflows.es.js';
+import { C as Combobox } from '../../../combobox-BOVQDVmX.js';
+import '@base-ui/react/combobox';
+import { useLinkComponent } from '../../../lib/framework.es.js';
+import { t as toast } from '../../../toast-c5kCpyWt.js';
+
+function WorkflowCombobox({
+  value,
+  onValueChange,
+  placeholder = "Select a workflow...",
+  searchPlaceholder = "Search workflows...",
+  emptyText = "No workflows found.",
+  className,
+  disabled = false,
+  variant,
+  size,
+  "aria-label": ariaLabel,
+  align,
+  requestContext
+}) {
+  const { data: workflows = {}, isLoading, isError, error } = useWorkflows({ requestContext });
+  const { navigate, paths } = useLinkComponent();
+  useEffect(() => {
+    if (isError) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load workflows";
+      toast.error(`Error loading workflows: ${errorMessage}`);
+    }
+  }, [isError, error]);
+  const workflowOptions = Object.keys(workflows).map((key) => ({
+    label: workflows[key]?.name || key,
+    value: key
+  }));
+  const handleValueChange = (newWorkflowId) => {
+    if (onValueChange) {
+      onValueChange(newWorkflowId);
+    } else if (newWorkflowId && newWorkflowId !== value) {
+      navigate(paths.workflowLink(newWorkflowId));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      options: workflowOptions,
+      value,
+      onValueChange: handleValueChange,
+      placeholder: isLoading ? "Loading workflows..." : placeholder,
+      searchPlaceholder,
+      emptyText,
+      className,
+      disabled: disabled || isLoading || isError,
+      variant,
+      size,
+      "aria-label": ariaLabel,
+      align
+    }
+  );
+}
+
+export { WorkflowCombobox };
+//# sourceMappingURL=workflow-combobox.es.js.map

package/dist/domains/workflows/components/workflow-combobox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-combobox.es.js","sources":["../../../../src/domains/workflows/components/workflow-combobox.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useWorkflows } from '../hooks/use-workflows';\nimport { Combobox } from '@/ds/components/Combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox';\nimport { useLinkComponent } from '@/lib/framework';\nimport { toast } from '@/utils/toast';\n\nexport interface WorkflowComboboxProps {\n  requestContext?: Record<string, any>;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxProps['variant'];\n  size?: ComboboxProps['size'];\n  'aria-label'?: string;\n  align?: ComboboxProps['align'];\n}\n\nexport function WorkflowCombobox({\n  value,\n  onValueChange,\n  placeholder = 'Select a workflow...',\n  searchPlaceholder = 'Search workflows...',\n  emptyText = 'No workflows found.',\n  className,\n  disabled = false,\n  variant,\n  size,\n  'aria-label': ariaLabel,\n  align,\n  requestContext,\n}: WorkflowComboboxProps) {\n  const { data: workflows = {}, isLoading, isError, error } = useWorkflows({ requestContext });\n  const { navigate, paths } = useLinkComponent();\n\n  useEffect(() => {\n    if (isError) {\n      const errorMessage = error instanceof Error ? error.message : 'Failed to load workflows';\n      toast.error(`Error loading workflows: ${errorMessage}`);\n    }\n  }, [isError, error]);\n\n  const workflowOptions = Object.keys(workflows).map(key => ({\n    label: workflows[key]?.name || key,\n    value: key,\n  }));\n\n  const handleValueChange = (newWorkflowId: string) => {\n    if (onValueChange) {\n      onValueChange(newWorkflowId);\n    } else if (newWorkflowId && newWorkflowId !== value) {\n      navigate(paths.workflowLink(newWorkflowId));\n    }\n  };\n\n  return (\n    <Combobox\n      options={workflowOptions}\n      value={value}\n      onValueChange={handleValueChange}\n      placeholder={isLoading ? 'Loading workflows...' : placeholder}\n      searchPlaceholder={searchPlaceholder}\n      emptyText={emptyText}\n      className={className}\n      disabled={disabled || isLoading || isError}\n      variant={variant}\n      size={size}\n      aria-label={ariaLabel}\n      align={align}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAsBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,KAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA,GAAc,sBAAA;AAAA,EACd,iBAAA,GAAoB,qBAAA;AAAA,EACpB,SAAA,GAAY,qBAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,KAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,GAAY,EAAC,EAAG,SAAA,EAAW,OAAA,EAAS,KAAA,EAAM,GAAI,YAAA,CAAa,EAAE,cAAA,EAAgB,CAAA;AAC3F,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAM,GAAI,gBAAA,EAAiB;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,MAAM,YAAA,GAAe,KAAA,YAAiB,KAAA,GAAQ,KAAA,CAAM,OAAA,GAAU,0BAAA;AAC9D,MAAA,KAAA,CAAM,KAAA,CAAM,CAAA,yBAAA,EAA4B,YAAY,CAAA,CAAE,CAAA;AAAA,IACxD;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,KAAK,CAAC,CAAA;AAEnB,EAAA,MAAM,kBAAkB,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAA,GAAA,MAAQ;AAAA,IACzD,KAAA,EAAO,SAAA,CAAU,GAAG,CAAA,EAAG,IAAA,IAAQ,GAAA;AAAA,IAC/B,KAAA,EAAO;AAAA,GACT,CAAE,CAAA;AAEF,EAAA,MAAM,iBAAA,GAAoB,CAAC,aAAA,KAA0B;AACnD,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,aAAA,CAAc,aAAa,CAAA;AAAA,IAC7B,CAAA,MAAA,IAAW,aAAA,IAAiB,aAAA,KAAkB,KAAA,EAAO;AACnD,MAAA,QAAA,CAAS,KAAA,CAAM,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,IAC5C;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,eAAA;AAAA,MACT,KAAA;AAAA,MACA,aAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAa,YAAY,sBAAA,GAAyB,WAAA;AAAA,MAClD,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,YAAY,SAAA,IAAa,OAAA;AAAA,MACnC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-entity-header.cjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const domains_workflows_hooks_useWorkflow = require('../hooks/use-workflow.cjs.js');
+const Badge = require('../../../Badge-DFNxcz-r.cjs');
+const entityHeader = require('../../../entity-header-DEjkHoqj.cjs');
+const tooltip = require('../../../tooltip-FvWL16Xn.cjs');
+const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');
+const hooks_useCopyToClipboard = require('../../../hooks/use-copy-to-clipboard.cjs.js');
+
+const WorkflowEntityHeader = ({ workflowId, requestContext }) => {
+  const { data: workflow, isLoading } = domains_workflows_hooks_useWorkflow.useWorkflow(workflowId, requestContext);
+  const { handleCopy } = hooks_useCopyToClipboard.useCopyToClipboard({ text: workflowId });
+  const workflowName = workflow?.name || workflowId;
+  const stepsCount = Object.keys(workflow?.steps ?? {}).length;
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(entityHeader.EntityHeader, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons_WorkflowIcon.WorkflowIcon, {}), title: workflowName, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), children: workflowId }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Copy Workflow ID for use in code" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { children: [
+      stepsCount,
+      " step",
+      stepsCount === 1 ? "" : "s"
+    ] }),
+    workflow?.isProcessorWorkflow && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cpu, {}), variant: "purple", children: "Processor" }),
+    workflow?.origin === "dynamic" && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        tooltip.TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          role: "note",
+          tabIndex: 0,
+          "aria-label": "Dynamic workflow",
+          className: "rounded-[7px] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, {}), variant: "blue", children: "Dynamic" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Registered via the dynamic-workflows API — lives in storage" })
+    ] })
+  ] }) }) });
+};
+
+exports.WorkflowEntityHeader = WorkflowEntityHeader;
+//# sourceMappingURL=workflow-entity-header.cjs.js.map

package/dist/domains/workflows/components/workflow-entity-header.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-entity-header.cjs.js","sources":["../../../../src/domains/workflows/components/workflow-entity-header.tsx"],"sourcesContent":["import { CopyIcon, Cpu, Database } from 'lucide-react';\nimport { useWorkflow } from '@/domains/workflows/hooks/use-workflow';\nimport { Badge } from '@/ds/components/Badge';\nimport { EntityHeader } from '@/ds/components/EntityHeader';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport interface WorkflowEntityHeaderProps {\n  requestContext?: Record<string, any>;\n  workflowId: string;\n}\n\nexport const WorkflowEntityHeader = ({ workflowId, requestContext }: WorkflowEntityHeaderProps) => {\n  const { data: workflow, isLoading } = useWorkflow(workflowId, requestContext);\n  const { handleCopy } = useCopyToClipboard({ text: workflowId });\n\n  const workflowName = workflow?.name || workflowId;\n  const stepsCount = Object.keys(workflow?.steps ?? {}).length;\n\n  return (\n    <TooltipProvider>\n      <EntityHeader icon={<WorkflowIcon />} title={workflowName} isLoading={isLoading}>\n        <div className=\"flex flex-wrap items-center gap-x-2 gap-y-3\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button type=\"button\" onClick={handleCopy} className=\"h-badge-default shrink-0\">\n                <Badge icon={<CopyIcon />}>{workflowId}</Badge>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent>Copy Workflow ID for use in code</TooltipContent>\n          </Tooltip>\n\n          <Badge>\n            {stepsCount} step{stepsCount === 1 ? '' : 's'}\n          </Badge>\n\n          {workflow?.isProcessorWorkflow && (\n            <Badge icon={<Cpu />} variant=\"purple\">\n              Processor\n            </Badge>\n          )}\n\n          {workflow?.origin === 'dynamic' && (\n            <Tooltip>\n              <TooltipTrigger\n                render={<span />}\n                role=\"note\"\n                tabIndex={0}\n                aria-label=\"Dynamic workflow\"\n                className=\"rounded-[7px] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid\"\n              >\n                <Badge icon={<Database />} variant=\"blue\">\n                  Dynamic\n                </Badge>\n              </TooltipTrigger>\n              <TooltipContent>Registered via the dynamic-workflows API — lives in storage</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </EntityHeader>\n    </TooltipProvider>\n  );\n};\n"],"names":["useWorkflow","useCopyToClipboard","jsx","TooltipProvider","EntityHeader","WorkflowIcon","jsxs","Tooltip","TooltipTrigger","Badge","CopyIcon","TooltipContent","Cpu","Database"],"mappings":";;;;;;;;;;;;;AAaO,MAAM,oBAAA,GAAuB,CAAC,EAAE,UAAA,EAAY,gBAAe,KAAiC;AACjG,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,GAAIA,+CAAA,CAAY,YAAY,cAAc,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,4CAAmB,EAAE,IAAA,EAAM,YAAY,CAAA;AAE9D,EAAA,MAAM,YAAA,GAAe,UAAU,IAAA,IAAQ,UAAA;AACvC,EAAA,MAAM,aAAa,MAAA,CAAO,IAAA,CAAK,UAAU,KAAA,IAAS,EAAE,CAAA,CAAE,MAAA;AAEtD,EAAA,uBACEC,cAAA,CAACC,uBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA,CAACE,yBAAA,EAAA,EAAa,sBAAMF,cAAA,CAACG,+BAAA,EAAA,EAAa,CAAA,EAAI,KAAA,EAAO,YAAA,EAAc,SAAA,EACzD,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAACC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAL,cAAA,CAACM,0BAAe,OAAA,EAAO,IAAA,EACrB,yCAAC,QAAA,EAAA,EAAO,IAAA,EAAK,UAAS,OAAA,EAAS,UAAA,EAAY,WAAU,0BAAA,EACnD,QAAA,kBAAAN,cAAA,CAACO,eAAM,IAAA,kBAAMP,cAAA,CAACQ,wBAAS,CAAA,EAAK,QAAA,EAAA,UAAA,EAAW,GACzC,CAAA,EACF,CAAA;AAAA,sBACAR,cAAA,CAACS,0BAAe,QAAA,EAAA,kCAAA,EAAgC;AAAA,KAAA,EAClD,CAAA;AAAA,oCAECF,WAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MAAW,OAAA;AAAA,MAAM,UAAA,KAAe,IAAI,EAAA,GAAK;AAAA,KAAA,EAC5C,CAAA;AAAA,IAEC,QAAA,EAAU,mBAAA,oBACTP,cAAA,CAACO,WAAA,EAAA,EAAM,IAAA,iCAAOG,eAAA,EAAA,EAAI,CAAA,EAAI,OAAA,EAAQ,QAAA,EAAS,QAAA,EAAA,WAAA,EAEvC,CAAA;AAAA,IAGD,QAAA,EAAU,MAAA,KAAW,SAAA,oBACpBN,eAAA,CAACC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAL,cAAA;AAAA,QAACM,sBAAA;AAAA,QAAA;AAAA,UACC,MAAA,iCAAS,MAAA,EAAA,EAAK,CAAA;AAAA,UACd,IAAA,EAAK,MAAA;AAAA,UACL,QAAA,EAAU,CAAA;AAAA,UACV,YAAA,EAAW,kBAAA;AAAA,UACX,SAAA,EAAU,qIAAA;AAAA,UAEV,QAAA,kBAAAN,cAAA,CAACO,eAAM,IAAA,kBAAMP,cAAA,CAACW,wBAAS,CAAA,EAAI,OAAA,EAAQ,QAAO,QAAA,EAAA,SAAA,EAE1C;AAAA;AAAA,OACF;AAAA,sBACAX,cAAA,CAACS,0BAAe,QAAA,EAAA,6DAAA,EAA2D;AAAA,KAAA,EAC7E;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-entity-header.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workflows/components/workflow-entity-header'
+export {}

package/dist/domains/workflows/components/workflow-entity-header.es.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CopyIcon, Cpu, Database } from 'lucide-react';
+import { useWorkflow } from '../hooks/use-workflow.es.js';
+import { B as Badge } from '../../../Badge-Bzn8Z-_I.js';
+import { E as EntityHeader } from '../../../entity-header-9qzr-3xQ.js';
+import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-BrDiP0RI.js';
+import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';
+import { useCopyToClipboard } from '../../../hooks/use-copy-to-clipboard.es.js';
+
+const WorkflowEntityHeader = ({ workflowId, requestContext }) => {
+  const { data: workflow, isLoading } = useWorkflow(workflowId, requestContext);
+  const { handleCopy } = useCopyToClipboard({ text: workflowId });
+  const workflowName = workflow?.name || workflowId;
+  const stepsCount = Object.keys(workflow?.steps ?? {}).length;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EntityHeader, { icon: /* @__PURE__ */ jsx(WorkflowIcon, {}), title: workflowName, isLoading, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), children: workflowId }) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Workflow ID for use in code" })
+    ] }),
+    /* @__PURE__ */ jsxs(Badge, { children: [
+      stepsCount,
+      " step",
+      stepsCount === 1 ? "" : "s"
+    ] }),
+    workflow?.isProcessorWorkflow && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Cpu, {}), variant: "purple", children: "Processor" }),
+    workflow?.origin === "dynamic" && /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx("span", {}),
+          role: "note",
+          tabIndex: 0,
+          "aria-label": "Dynamic workflow",
+          className: "rounded-[7px] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+          children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Database, {}), variant: "blue", children: "Dynamic" })
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Registered via the dynamic-workflows API — lives in storage" })
+    ] })
+  ] }) }) });
+};
+
+export { WorkflowEntityHeader };
+//# sourceMappingURL=workflow-entity-header.es.js.map

package/dist/domains/workflows/components/workflow-entity-header.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-entity-header.es.js","sources":["../../../../src/domains/workflows/components/workflow-entity-header.tsx"],"sourcesContent":["import { CopyIcon, Cpu, Database } from 'lucide-react';\nimport { useWorkflow } from '@/domains/workflows/hooks/use-workflow';\nimport { Badge } from '@/ds/components/Badge';\nimport { EntityHeader } from '@/ds/components/EntityHeader';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport interface WorkflowEntityHeaderProps {\n  requestContext?: Record<string, any>;\n  workflowId: string;\n}\n\nexport const WorkflowEntityHeader = ({ workflowId, requestContext }: WorkflowEntityHeaderProps) => {\n  const { data: workflow, isLoading } = useWorkflow(workflowId, requestContext);\n  const { handleCopy } = useCopyToClipboard({ text: workflowId });\n\n  const workflowName = workflow?.name || workflowId;\n  const stepsCount = Object.keys(workflow?.steps ?? {}).length;\n\n  return (\n    <TooltipProvider>\n      <EntityHeader icon={<WorkflowIcon />} title={workflowName} isLoading={isLoading}>\n        <div className=\"flex flex-wrap items-center gap-x-2 gap-y-3\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button type=\"button\" onClick={handleCopy} className=\"h-badge-default shrink-0\">\n                <Badge icon={<CopyIcon />}>{workflowId}</Badge>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent>Copy Workflow ID for use in code</TooltipContent>\n          </Tooltip>\n\n          <Badge>\n            {stepsCount} step{stepsCount === 1 ? '' : 's'}\n          </Badge>\n\n          {workflow?.isProcessorWorkflow && (\n            <Badge icon={<Cpu />} variant=\"purple\">\n              Processor\n            </Badge>\n          )}\n\n          {workflow?.origin === 'dynamic' && (\n            <Tooltip>\n              <TooltipTrigger\n                render={<span />}\n                role=\"note\"\n                tabIndex={0}\n                aria-label=\"Dynamic workflow\"\n                className=\"rounded-[7px] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid\"\n              >\n                <Badge icon={<Database />} variant=\"blue\">\n                  Dynamic\n                </Badge>\n              </TooltipTrigger>\n              <TooltipContent>Registered via the dynamic-workflows API — lives in storage</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </EntityHeader>\n    </TooltipProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,oBAAA,GAAuB,CAAC,EAAE,UAAA,EAAY,gBAAe,KAAiC;AACjG,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,GAAI,WAAA,CAAY,YAAY,cAAc,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,mBAAmB,EAAE,IAAA,EAAM,YAAY,CAAA;AAE9D,EAAA,MAAM,YAAA,GAAe,UAAU,IAAA,IAAQ,UAAA;AACvC,EAAA,MAAM,aAAa,MAAA,CAAO,IAAA,CAAK,UAAU,KAAA,IAAS,EAAE,CAAA,CAAE,MAAA;AAEtD,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,sBAAM,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAI,KAAA,EAAO,YAAA,EAAc,SAAA,EACzD,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,OAAA,EAAO,IAAA,EACrB,8BAAC,QAAA,EAAA,EAAO,IAAA,EAAK,UAAS,OAAA,EAAS,UAAA,EAAY,WAAU,0BAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,SAAM,IAAA,kBAAM,GAAA,CAAC,YAAS,CAAA,EAAK,QAAA,EAAA,UAAA,EAAW,GACzC,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,kCAAA,EAAgC;AAAA,KAAA,EAClD,CAAA;AAAA,yBAEC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MAAW,OAAA;AAAA,MAAM,UAAA,KAAe,IAAI,EAAA,GAAK;AAAA,KAAA,EAC5C,CAAA;AAAA,IAEC,QAAA,EAAU,mBAAA,oBACT,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,sBAAO,GAAA,EAAA,EAAI,CAAA,EAAI,OAAA,EAAQ,QAAA,EAAS,QAAA,EAAA,WAAA,EAEvC,CAAA;AAAA,IAGD,QAAA,EAAU,MAAA,KAAW,SAAA,oBACpB,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,MAAA,sBAAS,MAAA,EAAA,EAAK,CAAA;AAAA,UACd,IAAA,EAAK,MAAA;AAAA,UACL,QAAA,EAAU,CAAA;AAAA,UACV,YAAA,EAAW,kBAAA;AAAA,UACX,SAAA,EAAU,qIAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,SAAM,IAAA,kBAAM,GAAA,CAAC,YAAS,CAAA,EAAI,OAAA,EAAQ,QAAO,QAAA,EAAA,SAAA,EAE1C;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,6DAAA,EAA2D;AAAA,KAAA,EAC7E;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-information.cjs.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_workflows_context_useWorkflowSelectedStep = require('../context/use-workflow-selected-step.cjs.js');
+const domains_workflows_context_workflowRunContext = require('../context/workflow-run-context.cjs.js');
+const domains_workflows_runs_workflowRunDetails = require('../runs/workflow-run-details.cjs.js');
+const domains_workflows_runs_workflowRunList = require('../runs/workflow-run-list.cjs.js');
+const domains_workflows_workflow_workflowRunHeader = require('../workflow/workflow-run-header.cjs.js');
+const domains_workflows_workflow_workflowTrigger = require('../workflow/workflow-trigger.cjs.js');
+const domains_workflows_components_workflowLayout = require('./workflow-layout.cjs.js');
+const domains_workflows_hooks_useWorkflow = require('../hooks/use-workflow.cjs.js');
+const Button = require('../../../Button-BAMnPqos.cjs');
+const collapsible = require('../../../collapsible-BFSJouuI.cjs');
+const scrollArea = require('../../../scroll-area-BzOyuS8Y.cjs');
+const lib_framework = require('../../../lib/framework.cjs.js');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const toast = require('../../../toast-nm-fM7BR.cjs');
+
+const FLOATING_PANEL_SURFACE = utils_cn.cn(domains_workflows_components_workflowLayout.panelSurfaceStyle, "pointer-events-auto");
+function FloatingPanel({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("relative flex min-h-0 min-w-0 flex-col", className), children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_components_workflowLayout.WorkflowPanelResizeHandle, {})
+  ] });
+}
+function NewWorkflowRunButton({ workflowId, onClick }) {
+  const { Link, paths } = lib_framework.useLinkComponent();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: `${paths.workflowLink(workflowId)}/graph` }),
+      variant: "ghost",
+      size: "icon-md",
+      tooltip: "New workflow run",
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {})
+    }
+  );
+}
+function WorkflowInformationTopSection({
+  children,
+  workflowId,
+  showNewRunButton,
+  onNewRun
+}) {
+  const { result } = React.useContext(domains_workflows_context_workflowRunContext.WorkflowRunContext);
+  const [isOpen, setIsOpen] = React.useState(true);
+  return /* @__PURE__ */ jsxRuntime.jsx(FloatingPanel, { className: "max-h-[75%] flex-initial", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    collapsible.Collapsible,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx("section", {}),
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      "data-testid": "workflow-information-top-section",
+      className: utils_cn.cn(FLOATING_PANEL_SURFACE, "flex min-h-0 min-w-0 flex-col overflow-hidden"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1 pr-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { className: "flex min-w-0 flex-1 items-center gap-2 px-4 py-3 text-column text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground motion-reduce:transition-none" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Workflow run" }),
+            !isOpen && result?.status && /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_workflow_workflowRunHeader.WorkflowRunStatusBadge, { status: result.status })
+          ] }),
+          showNewRunButton && /* @__PURE__ */ jsxRuntime.jsx(
+            NewWorkflowRunButton,
+            {
+              workflowId,
+              onClick: () => {
+                setIsOpen(true);
+                onNewRun();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { keepMounted: true, fill: true, className: "flex min-h-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+          scrollArea.ScrollArea,
+          {
+            "data-testid": "workflow-information-top-scroll-area",
+            className: "min-h-0 flex-1 border-t border-border/50",
+            viewPortClassName: "h-full",
+            mask: { top: false, bottom: false },
+            children
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function InitialWorkflowSidebar(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_workflow_workflowTrigger.WorkflowTrigger, { ...props });
+}
+function RunWorkflowSidebar({ runId, observeWorkflowStream, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_runs_workflowRunDetails.WorkflowRunDetail, { ...props, runId, observeWorkflowStream });
+}
+function RecentWorkflowRunsSection({
+  workflowId,
+  activeRunId,
+  canDelete
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FloatingPanel, { className: "mt-auto max-h-[min(35%,280px)] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: utils_cn.cn(FLOATING_PANEL_SURFACE, "flex min-h-0 min-w-0 flex-col overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_runs_workflowRunList.WorkflowRecentRuns, { workflowId, runId: activeRunId, canDelete }) }) });
+}
+function WorkflowInformation({
+  workflowId,
+  initialRunId,
+  requestContext,
+  onRequestContextChange,
+  canExecute,
+  canDelete
+}) {
+  const { data: workflow, isLoading, error } = domains_workflows_hooks_useWorkflow.useWorkflow(workflowId, requestContext);
+  const {
+    createWorkflowRun,
+    streamWorkflow,
+    isStreamingWorkflow,
+    observeWorkflowStream,
+    resumeWorkflow,
+    cancelWorkflowRun,
+    isCancellingWorkflowRun,
+    clearData,
+    runId: contextRunId
+  } = React.useContext(domains_workflows_context_workflowRunContext.WorkflowRunContext);
+  const { setSelectedStepId } = domains_workflows_context_useWorkflowSelectedStep.useWorkflowSelectedStep();
+  const activeRunId = initialRunId || contextRunId;
+  const actionProps = {
+    workflowId,
+    workflow: workflow ?? void 0,
+    isLoading,
+    createWorkflowRun,
+    streamWorkflow,
+    resumeWorkflow,
+    isStreamingWorkflow,
+    isCancellingWorkflowRun,
+    cancelWorkflowRun,
+    requestContext,
+    onRequestContextChange,
+    canExecute
+  };
+  React.useEffect(() => {
+    if (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load workflow";
+      toast.toast.error(`Error loading workflow: ${errorMessage}`);
+    }
+  }, [error]);
+  if (error) {
+    return null;
+  }
+  if (!workflowId) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "workflow-information-panel",
+        className: "workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2"
+      }
+    );
+  }
+  const resetToNewRun = () => {
+    clearData();
+    setSelectedStepId(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "workflow-information-panel",
+      className: "workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          WorkflowInformationTopSection,
+          {
+            workflowId,
+            showNewRunButton: Boolean(activeRunId),
+            onNewRun: resetToNewRun,
+            children: initialRunId ? /* @__PURE__ */ jsxRuntime.jsx(RunWorkflowSidebar, { ...actionProps, runId: initialRunId, observeWorkflowStream }) : /* @__PURE__ */ jsxRuntime.jsx(InitialWorkflowSidebar, { ...actionProps })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(RecentWorkflowRunsSection, { workflowId, activeRunId, canDelete })
+      ]
+    }
+  );
+}
+
+exports.WorkflowInformation = WorkflowInformation;
+//# sourceMappingURL=workflow-information.cjs.js.map

package/dist/domains/workflows/components/workflow-information.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-information.cjs.js","sources":["../../../../src/domains/workflows/components/workflow-information.tsx"],"sourcesContent":["import type { GetWorkflowResponse } from '@mastra/client-js';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { ContextType, ReactNode } from 'react';\nimport { useEffect, useContext, useState } from 'react';\n\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { WorkflowRunContext } from '../context/workflow-run-context';\nimport { WorkflowRunDetail } from '../runs/workflow-run-details';\nimport { WorkflowRecentRuns } from '../runs/workflow-run-list';\nimport { WorkflowRunStatusBadge } from '../workflow/workflow-run-header';\nimport { WorkflowTrigger } from '../workflow/workflow-trigger';\nimport { panelSurfaceStyle, WorkflowPanelResizeHandle } from './workflow-layout';\n\nimport { useWorkflow } from '@/domains/workflows/hooks/use-workflow';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { useLinkComponent } from '@/lib/framework';\nimport { cn } from '@/utils/cn';\nimport { toast } from '@/utils/toast';\n\nexport interface WorkflowInformationProps {\n  workflowId: string;\n  initialRunId?: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n  canExecute: boolean;\n  canDelete: boolean;\n}\n\ntype WorkflowActionProps = Pick<\n  ContextType<typeof WorkflowRunContext>,\n  | 'createWorkflowRun'\n  | 'streamWorkflow'\n  | 'resumeWorkflow'\n  | 'isStreamingWorkflow'\n  | 'isCancellingWorkflowRun'\n  | 'cancelWorkflowRun'\n>;\n\ntype InitialWorkflowSidebarProps = WorkflowActionProps & {\n  workflowId: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n  canExecute: boolean;\n  workflow?: GetWorkflowResponse;\n  isLoading: boolean;\n};\n\ntype RunWorkflowSidebarProps = InitialWorkflowSidebarProps & {\n  runId: string;\n  observeWorkflowStream?: ContextType<typeof WorkflowRunContext>['observeWorkflowStream'];\n};\n\nconst FLOATING_PANEL_SURFACE = cn(panelSurfaceStyle, 'pointer-events-auto');\n\nfunction FloatingPanel({ className, children }: { className: string; children: ReactNode }) {\n  return (\n    <div className={cn('relative flex min-h-0 min-w-0 flex-col', className)}>\n      {children}\n      <WorkflowPanelResizeHandle />\n    </div>\n  );\n}\n\nfunction NewWorkflowRunButton({ workflowId, onClick }: { workflowId: string; onClick: () => void }) {\n  const { Link, paths } = useLinkComponent();\n\n  return (\n    <Button\n      render={<Link href={`${paths.workflowLink(workflowId)}/graph`} />}\n\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"New workflow run\"\n      onClick={onClick}\n    >\n      <Plus />\n    </Button>\n  );\n}\n\nfunction WorkflowInformationTopSection({\n  children,\n  workflowId,\n  showNewRunButton,\n  onNewRun,\n}: {\n  children: ReactNode;\n  workflowId: string;\n  showNewRunButton: boolean;\n  onNewRun: () => void;\n}) {\n  const { result } = useContext(WorkflowRunContext);\n  const [isOpen, setIsOpen] = useState(true);\n  return (\n    <FloatingPanel className=\"max-h-[75%] flex-initial\">\n      <Collapsible\n        render={<section />}\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        data-testid=\"workflow-information-top-section\"\n        className={cn(FLOATING_PANEL_SURFACE, 'flex min-h-0 min-w-0 flex-col overflow-hidden')}\n      >\n        <div className=\"flex shrink-0 items-center gap-1 pr-2\">\n          <CollapsibleTrigger className=\"flex min-w-0 flex-1 items-center gap-2 px-4 py-3 text-column text-muted-foreground\">\n            <ChevronRight aria-hidden className=\"size-4 shrink-0 text-muted-foreground motion-reduce:transition-none\" />\n            <span>Workflow run</span>\n            {!isOpen && result?.status && <WorkflowRunStatusBadge status={result.status} />}\n          </CollapsibleTrigger>\n          {showNewRunButton && (\n            <NewWorkflowRunButton\n              workflowId={workflowId}\n              onClick={() => {\n                setIsOpen(true);\n                onNewRun();\n              }}\n            />\n          )}\n        </div>\n        <CollapsibleContent keepMounted fill className=\"flex min-h-0 flex-col\">\n          <ScrollArea\n            data-testid=\"workflow-information-top-scroll-area\"\n            className=\"min-h-0 flex-1 border-t border-border/50\"\n            viewPortClassName=\"h-full\"\n            mask={{ top: false, bottom: false }}\n          >\n            {children}\n          </ScrollArea>\n        </CollapsibleContent>\n      </Collapsible>\n    </FloatingPanel>\n  );\n}\n\nfunction InitialWorkflowSidebar(props: InitialWorkflowSidebarProps) {\n  return <WorkflowTrigger {...props} />;\n}\n\nfunction RunWorkflowSidebar({ runId, observeWorkflowStream, ...props }: RunWorkflowSidebarProps) {\n  return <WorkflowRunDetail {...props} runId={runId} observeWorkflowStream={observeWorkflowStream} />;\n}\n\nfunction RecentWorkflowRunsSection({\n  workflowId,\n  activeRunId,\n  canDelete,\n}: {\n  workflowId: string;\n  activeRunId?: string;\n  canDelete: boolean;\n}) {\n  return (\n    <FloatingPanel className=\"mt-auto max-h-[min(35%,280px)] shrink-0\">\n      <section className={cn(FLOATING_PANEL_SURFACE, 'flex min-h-0 min-w-0 flex-col overflow-hidden')}>\n        <WorkflowRecentRuns workflowId={workflowId} runId={activeRunId} canDelete={canDelete} />\n      </section>\n    </FloatingPanel>\n  );\n}\n\nexport function WorkflowInformation({\n  workflowId,\n  initialRunId,\n  requestContext,\n  onRequestContextChange,\n  canExecute,\n  canDelete,\n}: WorkflowInformationProps) {\n  const { data: workflow, isLoading, error } = useWorkflow(workflowId, requestContext);\n\n  const {\n    createWorkflowRun,\n    streamWorkflow,\n    isStreamingWorkflow,\n    observeWorkflowStream,\n    resumeWorkflow,\n    cancelWorkflowRun,\n    isCancellingWorkflowRun,\n    clearData,\n    runId: contextRunId,\n  } = useContext(WorkflowRunContext);\n\n  const { setSelectedStepId } = useWorkflowSelectedStep();\n\n  const activeRunId = initialRunId || contextRunId;\n\n  const actionProps = {\n    workflowId,\n    workflow: workflow ?? undefined,\n    isLoading,\n    createWorkflowRun,\n    streamWorkflow,\n    resumeWorkflow,\n    isStreamingWorkflow,\n    isCancellingWorkflowRun,\n    cancelWorkflowRun,\n    requestContext,\n    onRequestContextChange,\n    canExecute,\n  };\n\n  useEffect(() => {\n    if (error) {\n      const errorMessage = error instanceof Error ? error.message : 'Failed to load workflow';\n      toast.error(`Error loading workflow: ${errorMessage}`);\n    }\n  }, [error]);\n\n  if (error) {\n    return null;\n  }\n\n  if (!workflowId) {\n    return (\n      <div\n        data-testid=\"workflow-information-panel\"\n        className=\"workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2\"\n      />\n    );\n  }\n\n  const resetToNewRun = () => {\n    clearData();\n    setSelectedStepId(null);\n  };\n\n  return (\n    <div\n      data-testid=\"workflow-information-panel\"\n      className=\"workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2\"\n    >\n      <WorkflowInformationTopSection\n        workflowId={workflowId}\n        showNewRunButton={Boolean(activeRunId)}\n        onNewRun={resetToNewRun}\n      >\n        {initialRunId ? (\n          <RunWorkflowSidebar {...actionProps} runId={initialRunId} observeWorkflowStream={observeWorkflowStream} />\n        ) : (\n          <InitialWorkflowSidebar {...actionProps} />\n        )}\n      </WorkflowInformationTopSection>\n\n      <RecentWorkflowRunsSection workflowId={workflowId} activeRunId={activeRunId} canDelete={canDelete} />\n    </div>\n  );\n}\n"],"names":["cn","panelSurfaceStyle","WorkflowPanelResizeHandle","useLinkComponent","jsx","Button","Plus","useContext","WorkflowRunContext","useState","jsxs","Collapsible","CollapsibleTrigger","ChevronRight","WorkflowRunStatusBadge","CollapsibleContent","ScrollArea","WorkflowTrigger","WorkflowRunDetail","WorkflowRecentRuns","useWorkflow","useWorkflowSelectedStep","useEffect","toast"],"mappings":"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"}

package/dist/domains/workflows/components/workflow-information.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workflows/components/workflow-information'
+export {}