@motiadev/workbench 0.3.1-beta.88-041205 → 0.3.1-beta.88-987125

package/dist/src/App.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
 import { ReactFlowProvider } from '@xyflow/react';
+import { analytics } from '@/lib/analytics';
 import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
+import React from 'react';
 import { EndpointsPage } from './components/endpoints/endpoints-page';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
@@ -11,9 +13,22 @@ import { TracesPage } from './components/observability/traces-page';
 import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
 import { StatesPage } from './components/states/states-page';
 import { useTabsStore } from './stores/use-tabs-store';
+var TabLocation;
+(function (TabLocation) {
+    TabLocation["TOP"] = "top";
+    TabLocation["BOTTOM"] = "bottom";
+})(TabLocation || (TabLocation = {}));
 export const App = () => {
     const tab = useTabsStore((state) => state.tab);
     const setTopTab = useTabsStore((state) => state.setTopTab);
     const setBottomTab = useTabsStore((state) => state.setBottomTab);
-    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: setTopTab, header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: setBottomTab, header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+    const tabChangeCallbacks = React.useMemo(() => ({
+        [TabLocation.TOP]: setTopTab,
+        [TabLocation.BOTTOM]: setBottomTab,
+    }), [setTopTab, setBottomTab]);
+    const onTabChange = React.useCallback((location) => (newTab) => {
+        analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
+        tabChangeCallbacks[location](newTab);
+    }, [tabChangeCallbacks]);
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
 };

package/dist/src/components/endpoints/endpoint-call.js

@@ -69,7 +69,7 @@ export const EndpointCall = ({ endpoint, onClose }) => {
                 icon: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }),
                 onClick: onClose,
             },
-        ], children: [endpoint.description && (_jsx("div", { className: "rounded-lg border p-4 font-medium text-muted-foreground", children: endpoint.description })), !!pathParams.length && (_jsx(Panel, { title: "Path params", size: "sm", children: _jsx("table", { children: pathParams.map((param) => (_jsxs("tr", { children: [_jsx("td", { className: "flex flex-col font-bold leading-[36px]", children: param }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) }) })] }, param))) }) })), !!endpoint.queryParams?.length && (_jsx(Panel, { title: "Query params", size: "sm", children: _jsx("table", { children: endpoint.queryParams.map((param) => (_jsxs("tr", { children: [_jsxs("td", { className: "flex flex-col", children: [_jsx("span", { className: "font-bold", children: param.name }), _jsx("span", { className: "text-md text-muted-foreground", children: param.description })] }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) }) })] }, param.name))) }) })), shouldHaveBody && (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", children: _jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: setBody, onValidate: setIsBodyValid }) })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, variant: "accent", "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), _jsx(EndpointResponse, { responseCode: responseCode, responseBody: responseBody, executionTime: executionTime }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
+        ], children: [endpoint.description && (_jsx("div", { className: "rounded-lg border p-4 font-medium text-muted-foreground", children: endpoint.description })), !!pathParams.length && (_jsx(Panel, { title: "Path params", size: "sm", children: _jsx("table", { children: pathParams.map((param) => (_jsxs("tr", { children: [_jsx("td", { className: "flex flex-col font-bold leading-[36px]", children: param }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) }) })] }, param))) }) })), !!endpoint.queryParams?.length && (_jsx(Panel, { title: "Query params", size: "sm", children: _jsx("table", { children: endpoint.queryParams.map((param) => (_jsxs("tr", { children: [_jsxs("td", { className: "flex flex-col justify-start", children: [_jsx("span", { className: "font-bold", children: param.name }), _jsx("span", { className: "text-md text-muted-foreground", children: param.description })] }), _jsx("td", { className: "w-2/3 pl-4 align-top", children: _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) }) })] }, param.name))) }) })), shouldHaveBody && (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: _jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: setBody, onValidate: setIsBodyValid }) })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, variant: "accent", "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), _jsx(EndpointResponse, { responseCode: responseCode, responseBody: responseBody, executionTime: executionTime }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
                     responseCode: status,
                     bodySchema: schema,
                 })) })] }));

package/dist/src/components/endpoints/json-editor.js

@@ -20,12 +20,10 @@ export const JsonEditor = ({ value, schema, onChange, onValidate }) => {
             ],
         });
     }, [monaco, schema]);
-    return (_jsx(Editor, { height: "200px", language: "json", value: value, theme: editorTheme, onChange: (value) => {
+    return (_jsx(Editor, { "data-testid": "json-editor", height: "200px", language: "json", value: value, theme: editorTheme, onChange: (value) => {
+            if (!value) {
+                onValidate(false);
+            }
             onChange(value ?? '');
-        }, onValidate: (markers) => {
-            onValidate(markers.length === 0);
-        }, options: {
-            lineNumbers: 'off',
-            minimap: { enabled: false },
-        } }));
+        }, onValidate: (markers) => onValidate(markers.length === 0), options: { lineNumbers: 'off', minimap: { enabled: false } } }));
 };

package/dist/src/components/flow/flow-tab-menu-item.js

@@ -11,5 +11,5 @@ export const FlowTabMenuItem = () => {
     if (flows.length === 0) {
         return null;
     }
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsx(ChevronsUpDown, { className: "size-4" })] }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground", children: flows.map((item) => (_jsx(DropdownMenuItem, { className: "cursor-pointer gap-2", onClick: () => selectFlowId(item), children: item }, `dropdown-${item}`))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { "data-testid": "flows-dropdown-trigger", className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsx(ChevronsUpDown, { className: "size-4" })] }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onClick: () => selectFlowId(item), children: item }, `dropdown-${item}`))) })] }));
 };

package/dist/src/components/header/header.js

@@ -3,5 +3,5 @@ import { useThemeStore } from '@/stores/use-theme-store';
 import { ThemeToggle } from '../ui/theme-toggle';
 export const Header = () => {
     const theme = useThemeStore((state) => state.theme);
-    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: `/motia-${theme}.png`, className: "h-5" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }));
+    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: `/motia-${theme}.png`, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }));
 };

package/dist/src/components/observability/traces-groups.js

@@ -11,5 +11,5 @@ export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) =>
             return `${duration}ms`;
         return `${(duration / 1000).toFixed(1)}s`;
     };
-    return (_jsx("div", { className: "overflow-auto", children: groups.length > 0 && (_jsx("div", { children: [...groups].reverse().map((group) => (_jsx("div", { "data-testid": `trace-${group.id}`, className: cn('cursor-pointer transition-colors', selectedGroupId === group.id ? 'bg-muted-foreground/10' : 'hover:bg-muted/70'), onClick: () => onGroupSelect(group), children: _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [_jsx("span", { className: "font-semibold text-lg", children: group.name }), _jsx(TraceStatusBadge, { status: group.status, duration: group.endTime ? formatDuration(group.endTime - group.startTime) : undefined })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [group.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(group.endTime - group.startTime)] }), _jsxs("span", { children: [formatDistanceToNow(group.startTime), " ago"] })] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) })) }));
+    return (_jsx("div", { className: "overflow-auto", children: groups.length > 0 && (_jsx("div", { children: [...groups].reverse().map((group) => (_jsx("div", { "data-testid": `trace-${group.id}`, className: cn('cursor-pointer transition-colors', selectedGroupId === group.id ? 'bg-muted-foreground/10' : 'hover:bg-muted/70'), onClick: () => onGroupSelect(group), children: _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [_jsx("span", { className: "font-semibold text-lg", children: group.name }), _jsx(TraceStatusBadge, { status: group.status, duration: group.endTime ? formatDuration(group.endTime - group.startTime) : undefined })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [formatDistanceToNow(group.startTime), " ago"] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) })) }));
 });

package/dist/src/publicComponents/base-node/base-handle.d.ts

@@ -2,7 +2,6 @@ import React, { HTMLAttributes } from 'react';
 import { HandleProps } from '@xyflow/react';
 type Props = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
     isHidden?: boolean;
-    variant?: string | null;
     onTogglePosition?: () => void;
 };
 export declare const BaseHandle: React.FC<Props>;

package/dist/src/publicComponents/base-node/base-handle.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Position, Handle as RFHandle } from '@xyflow/react';
 import clsx from 'clsx';
 export const BaseHandle = (props) => {
-    const { isHidden, position, variant, onTogglePosition, ...rest } = props;
+    const { isHidden, position, onTogglePosition, ...rest } = props;
     const isHorizontal = position === Position.Left || position === Position.Right;
     return (_jsx("div", { className: clsx('absolute w-[6px] h-[6px]', position === Position.Top && '-top-[4px]', position === Position.Bottom && '-bottom-[4px]', position === Position.Left && '-left-[4px]', position === Position.Right && '-right-[4px]', isHorizontal ? 'top-1/2 -mt-[2px]' : 'left-1/2 -ml-[2px]', isHidden && 'hidden'), onClick: onTogglePosition, children: _jsx(RFHandle, { ...rest, position: position, style: { background: 'rgb(30,118,231)' }, className: "\n        bg-white/50\n        !static\n        !w-[6px]\n        !h-[6px]\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
 };

package/dist/src/publicComponents/base-node/base-node.js

@@ -9,5 +9,5 @@ import { NodeSidebar } from './node-sidebar';
 export const BaseNode = ({ title, variant, children, disableSourceHandle, disableTargetHandle, language, subtitle, details, subscribes, emits, data, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const { sourcePosition, targetPosition, toggleTargetPosition, toggleSourcePosition } = useHandlePositions(data);
-    return (_jsxs("div", { className: "p-[1px] rounded-lg max-w-[350px]", children: [_jsx("div", { className: "rounded-lg bg-background border-2 border-muted border-solid border-muted-foreground/10", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsxs(NodeHeader, { text: title, variant: variant, subtitle: subtitle, children: [_jsx(LanguageIndicator, { language: language }), _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "p-[2px] cursor-pointer rounded-md hover:bg-muted-foreground/10", onClick: () => setIsOpen(true), children: _jsx(ChevronUp, { className: "w-4 h-4" }) }) })] }), children && _jsx("div", { className: "border-t-2 border-muted-foreground/10 p-4 space-y-3", children: children }), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, variant: variant, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, variant: variant, onTogglePosition: toggleSourcePosition }))] }) }), _jsx(NodeSidebar, { title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false), details: details, subscribes: subscribes, emits: emits })] }));
+    return (_jsxs("div", { className: "p-[1px] rounded-lg max-w-[350px]", children: [_jsx("div", { className: "rounded-lg bg-background border-2 border-muted border-solid border-muted-foreground/10", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsxs(NodeHeader, { text: title, variant: variant, subtitle: subtitle, children: [_jsx(LanguageIndicator, { language: language }), _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "p-[2px] cursor-pointer rounded-md hover:bg-muted-foreground/10", onClick: () => setIsOpen(true), children: _jsx(ChevronUp, { className: "w-4 h-4" }) }) })] }), children && _jsx("div", { className: "border-t-2 border-muted-foreground/10 p-4 space-y-3", children: children }), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), _jsx(NodeSidebar, { title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false), details: details, subscribes: subscribes, emits: emits })] }));
 };

package/dist/src/publicComponents/event-node.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { EventNodeProps } from './node-props';
 export declare const EventNode: React.FC<PropsWithChildren<EventNodeProps>>;