@motiadev/workbench 0.5.11-beta.120-742949 → 0.5.11-beta.120-110250

package/dist/index.d.ts

@@ -6,3 +6,5 @@ export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
 export type { EventNodeData, ApiNodeData } from './src/types/flow';
 export type { ApiNodeProps, BaseNodeProps, CronNodeProps, EventNodeProps, NoopNodeProps, } from './src/publicComponents/node-props';
+export type { TutorialStep } from './src/components/tutorial/engine/tutorial-types';
+export { workbenchXPath } from './src/components/tutorial/engine/workbench-xpath';

package/dist/index.html

@@ -10,6 +10,10 @@
       href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
     <script>
       window.amplitude.init('ab2408031a38aa5cb85587a27ecfc69c', {
@@ -25,10 +29,26 @@
 
     <!-- Start of Reo Javascript -->
     <script type="text/javascript">
-      !function(){var e,t,n;e="d8f0ce9cae8ae64",t=function(){Reo.init({clientID:"d8f0ce9cae8ae64"})},(n=document.createElement("script")).src="https://static.reo.dev/"+e+"/reo.js",n.defer=!0,n.onload=t,document.head.appendChild(n)}();
+      !(function () {
+        var e, t, n
+        ;(e = 'd8f0ce9cae8ae64'),
+          (t = function () {
+            Reo.init({ clientID: 'd8f0ce9cae8ae64' })
+          }),
+          ((n = document.createElement('script')).src = 'https://static.reo.dev/' + e + '/reo.js'),
+          (n.defer = !0),
+          (n.onload = t),
+          document.head.appendChild(n)
+      })()
     </script>
     <!-- End of Reo Javascript -->
 
+    <script>
+      const importFile = async (path) => {
+        return await import(/* @vite-ignore */ `/@fs/${processCwd}/${path}`)
+      }
+    </script>
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Motia Workbench</title>
   </head>

package/dist/index.js

@@ -4,3 +4,4 @@ export { NoopNode } from './src/publicComponents/noop-node';
 export { BaseNode } from './src/publicComponents/base-node/base-node';
 export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
+export { workbenchXPath } from './src/components/tutorial/engine/workbench-xpath';

package/dist/middleware.js

@@ -8,6 +8,15 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
 const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const processCwdPlugin = () => {
+    return {
+        name: 'html-transform',
+        transformIndexHtml: (html) => {
+            const cwd = process.cwd();
+            return html.replace('</head>', `<script>const processCwd = "${cwd}";</script></head>`);
+        },
+    };
+};
 const applyMiddleware = async (app) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
@@ -17,13 +26,17 @@ const applyMiddleware = async (app) => {
             allowedHosts: true,
             host: true,
             fs: {
-                allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
+                allow: [
+                    __dirname, // workbench root
+                    path_1.default.join(process.cwd(), './steps'), // steps directory
+                    path_1.default.join(process.cwd(), './tutorial.tsx'), // tutorial file
+                ],
             },
         },
         resolve: {
             alias: { '@': path_1.default.resolve(__dirname, './src') },
         },
-        plugins: [(0, plugin_react_1.default)()],
+        plugins: [(0, plugin_react_1.default)(), processCwdPlugin()],
     });
     app.use(vite.middlewares);
     app.use('*', async (req, res, next) => {

package/dist/src/App.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analytics } from '@/lib/analytics';
 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 { useCallback, useMemo } from 'react';
 import { EndpointsPage } from './components/endpoints/endpoints-page';
@@ -12,6 +12,7 @@ import { LogsPage } from './components/logs/logs-page';
 import { TracesPage } from './components/observability/traces-page';
 import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
 import { StatesPage } from './components/states/states-page';
+import { Tutorial } from './components/tutorial/tutorial';
 import { useTabsStore } from './stores/use-tabs-store';
 var TabLocation;
 (function (TabLocation) {
@@ -30,5 +31,5 @@ export const App = () => {
         analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
         tabChangeCallbacks[location](newTab);
     }, [tabChangeCallbacks, tab]);
-    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", className: "cursor-pointer", 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", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", 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 })] }));
+    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", className: "cursor-pointer", 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", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", 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 }), _jsx(Tutorial, {})] }));
 };

package/dist/src/components/endpoints/endpoint-body-panel.d.ts

@@ -6,6 +6,7 @@ type Props = {
     endpoint: ApiEndpoint;
     onChange?: (body: string) => void;
     onValidate?: (isValid: boolean) => void;
+    panelName: string;
 };
 export declare const EndpointBodyPanel: FC<Props>;
 export {};

package/dist/src/components/endpoints/endpoint-body-panel.js

@@ -6,7 +6,7 @@ import ReactJson from 'react18-json-view';
 import 'react18-json-view/src/dark.css';
 import 'react18-json-view/src/style.css';
 import { convertJsonSchemaToJson } from './hooks/utils';
-export const EndpointBodyPanel = ({ endpoint, onChange, onValidate }) => {
+export const EndpointBodyPanel = ({ endpoint, onChange, onValidate, panelName }) => {
     const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
     const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
     const handleBodyChange = (body) => {
@@ -16,5 +16,5 @@ export const EndpointBodyPanel = ({ endpoint, onChange, onValidate }) => {
     if (!shouldHaveBody) {
         return null;
     }
-    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema), theme: "default", enableClipboard: false, style: { backgroundColor: 'transparent' } })) }));
+    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": `endpoint-body-panel__${panelName}`, children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema), theme: "default", enableClipboard: false, style: { backgroundColor: 'transparent' } })) }));
 };

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

@@ -53,5 +53,5 @@ export const EndpointCall = ({ endpoint }) => {
         setExecutionTime(executionTime);
         setIsRequestLoading(false);
     };
-    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint, onChange: setPathParamsValues }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint, onChange: setQueryParamsValues }), _jsx(EndpointBodyPanel, { endpoint: endpoint, 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 })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint, onChange: setPathParamsValues }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint, onChange: setQueryParamsValues }), _jsx(EndpointBodyPanel, { endpoint: endpoint, onChange: setBody, onValidate: setIsBodyValid, panelName: "call" }), _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 })] }));
 };

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

@@ -4,7 +4,7 @@ import { EndpointPathParamsPanel } from './endpoint-path-params-panel';
 import { EndpointQueryParamsPanel } from './endpoint-query-params-panel';
 import { EndpointBodyPanel } from './endpoint-body-panel';
 export const EndpointDescription = ({ endpoint }) => {
-    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint }), _jsx(EndpointBodyPanel, { endpoint: endpoint }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint }), _jsx(EndpointBodyPanel, { endpoint: endpoint, panelName: "details" }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
                     responseCode: status,
                     bodySchema: schema,
                 })) })] }));

package/dist/src/components/flow/hooks/use-get-flow-state.js

@@ -32,6 +32,7 @@ async function importFlow(flow, flowConfig) {
             return;
         }
         try {
+            console.log(path);
             const module = await import(/* @vite-ignore */ `/@fs/${path}`);
             const component = module.Node ?? module.default;
             nodeComponentCache.set(path, component);

package/dist/src/components/flow/node-organizer.js

@@ -1,39 +1,5 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
-import dagre from 'dagre';
 import { useEffect, useRef } from 'react';
-const organizeNodes = (nodes, edges) => {
-    const dagreGraph = new dagre.graphlib.Graph({ compound: true });
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' });
-    nodes.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height });
-    });
-    edges.forEach((edge) => {
-        if (typeof edge.label === 'string') {
-            dagreGraph.setEdge(edge.source, edge.target, {
-                label: edge.label ?? '',
-                width: edge.label.length * 40, // Add width for the label
-                height: 30, // Add height for the label
-                labelpos: 'c', // Position label in center
-            });
-        }
-        else {
-            dagreGraph.setEdge(edge.source, edge.target);
-        }
-    });
-    dagre.layout(dagreGraph);
-    return nodes.map((node) => {
-        if (node.position.x !== 0 || node.position.y !== 0) {
-            return node;
-        }
-        const { x, y } = dagreGraph.node(node.id);
-        const position = {
-            x: x - (node.measured?.width ?? 0) / 2,
-            y: y - (node.measured?.height ?? 0) / 2,
-        };
-        return { ...node, position };
-    });
-};
 export const NodeOrganizer = ({ onInitialized }) => {
     const { setNodes, getNodes, getEdges, fitView } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
@@ -41,10 +7,10 @@ export const NodeOrganizer = ({ onInitialized }) => {
     useEffect(() => {
         if (nodesInitialized && !initialized.current) {
             initialized.current = true;
-            const nodes = getNodes();
-            const edges = getEdges();
-            const organizedNodes = organizeNodes(nodes, edges);
-            setNodes(organizedNodes);
+            // const nodes = getNodes() as Node<EventNodeData | ApiNodeData>[]
+            // const edges = getEdges() as Edge<EdgeData>[]
+            // const organizedNodes = organizeNodes(nodes, edges)
+            // setNodes(organizedNodes)
             onInitialized();
             setTimeout(async () => {
                 await fitView();

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useThemeStore } from '@/stores/use-theme-store';
 import { ThemeToggle } from '../ui/theme-toggle';
-import { TutorialButton } from '../ui/tutorial-button';
+import { TutorialButton } from '../tutorial/tutorial-button';
 export const Header = () => {
     const theme = useThemeStore((state) => state.theme);
     return (_jsxs("header", { className: "min-h-16 px-4 gap-4 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(TutorialButton, {}), _jsx(ThemeToggle, {})] }));

package/dist/src/components/logs/logs-page.js

@@ -22,7 +22,7 @@ export const LogsPage = () => {
                 log.step.toLowerCase().includes(search.toLowerCase()));
         });
     }, [logs, search]);
-    return (_jsxs("div", { className: "h-full flex flex-row", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { className: cn('font-mono font-semibold cursor-pointer border-0', {
+    return (_jsxs("div", { className: "h-full flex flex-row", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { "data-testid": "log-row", className: cn('font-mono font-semibold cursor-pointer border-0', {
                                     'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,
                                     'hover:bg-muted-foreground/10': selectedLogId !== log.id,
                                 }), onClick: () => selectLogId(log.id), children: [_jsxs(TableCell, { "data-testid": `time-${index}`, className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground", children: [_jsx(LogLevelDot, { level: log.level }), formatTimestamp(log.time)] }), _jsx(TableCell, { "data-testid": `trace-${log.traceId}`, className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground", onClick: () => setSearch(log.traceId), children: log.traceId }), _jsx(TableCell, { "data-testid": `step-${index}`, "aria-label": log.step, className: "whitespace-nowrap", children: log.step }), _jsx(TableCell, { "data-testid": `msg-${index}`, "aria-label": log.msg, className: "whitespace-nowrap max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }), _jsx(LogDetail, { log: selectedLog, onClose: () => selectLogId(undefined) })] }));

package/dist/src/components/observability/trace-item/trace-item.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@/lib/utils';
 export const TraceItem = ({ trace, group, groupEndTime, onExpand }) => {
-    return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), children: [_jsx("div", { className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", "data-testid": "trace-timeline-item", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
+    return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), "data-testid": "trace-timeline-item", children: [_jsx("div", { className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
                             'bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]': trace.status === 'running',
                             'bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]': trace.status === 'completed',
                             'bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]': trace.status === 'failed',

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: [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('motia-trace-group 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/components/sidebar/sidebar.js

@@ -35,5 +35,5 @@ export const Sidebar = ({ initialWidth, onClose, ...props }) => {
     }, [sidebarId, onClose]);
     return createPortal(_jsxs("div", { ...getRootProps(), className: "pr-2 py-2 relative", children: [_jsx("div", { ...getHandleProps({
                     reverse: true,
-                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, variant: "outlined", className: "max-h-[calc(100vh-80px)] h-full" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
+                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, variant: "outlined", className: "max-h-[calc(100vh-80px)] h-full", "data-testid": "sidebar-panel" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
 };

package/dist/src/components/tutorial/engine/tutorial-engine.d.ts

@@ -0,0 +1,12 @@
+import { TutorialStep } from './tutorial-types';
+declare class Tutorial {
+    steps: TutorialStep[];
+    private onStepsRegisteredCallbacks;
+    private onOpenCallbacks;
+    register(steps: TutorialStep[]): void;
+    onStepsRegistered(callback: () => void): void;
+    onOpen(callback: () => void): void;
+    open(): void;
+}
+export declare const MotiaTutorial: Tutorial;
+export {};

package/dist/src/components/tutorial/engine/tutorial-engine.js

@@ -0,0 +1,36 @@
+class Tutorial {
+    constructor() {
+        Object.defineProperty(this, "steps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "onStepsRegisteredCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "onOpenCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    register(steps) {
+        this.steps = steps;
+        this.onStepsRegisteredCallbacks.forEach((callback) => callback());
+    }
+    onStepsRegistered(callback) {
+        this.onStepsRegisteredCallbacks.push(callback);
+    }
+    onOpen(callback) {
+        this.onOpenCallbacks.push(callback);
+    }
+    open() {
+        this.onOpenCallbacks.forEach((callback) => callback());
+    }
+}
+export const MotiaTutorial = new Tutorial();

package/dist/src/components/tutorial/engine/tutorial-types.d.ts

@@ -0,0 +1,22 @@
+export type TutorialActionClick = {
+    type: 'click';
+    selector: string;
+    optional?: boolean;
+};
+export type TutorialActionEditor = {
+    type: 'fill-editor';
+    content: Record<string, any>;
+};
+export type TutorialAction = TutorialActionClick | TutorialActionEditor;
+export type TutorialImage = {
+    height: number;
+    src: string;
+};
+export type TutorialStep = {
+    title: string;
+    description: React.FC<void>;
+    image?: TutorialImage;
+    link?: string;
+    elementXpath?: string;
+    before?: TutorialAction[];
+};

package/dist/src/components/tutorial/engine/tutorial-types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/tutorial/engine/workbench-xpath.d.ts

@@ -0,0 +1,39 @@
+export declare const workbenchXPath: {
+    sidebarContainer: string;
+    closePanelButton: string;
+    bottomPanel: string;
+    flows: {
+        feature: (featureId: string) => string;
+        previewButton: (stepId: string) => string;
+        node: (stepId: string) => string;
+    };
+    endpoints: {
+        endpoint: (method: string, path: string) => string;
+        callPanel: string;
+        callTab: string;
+        response: string;
+        playButton: string;
+    };
+    tracing: {
+        trace: (index: number) => string;
+        details: string;
+        timeline: (index: number) => string;
+    };
+    logs: {
+        container: string;
+        searchContainer: string;
+        traceColumn: (index: number) => string;
+        row: string;
+    };
+    states: {
+        container: string;
+        row: (index: number) => string;
+    };
+    links: {
+        flows: string;
+        endpoints: string;
+        tracing: string;
+        logs: string;
+        states: string;
+    };
+};

package/dist/src/components/tutorial/engine/workbench-xpath.js

@@ -0,0 +1,39 @@
+export const workbenchXPath = {
+    sidebarContainer: '//div[@data-testid="sidebar-panel"]',
+    closePanelButton: '//div[@id="app-sidebar-container"]//button[@data-testid="close-panel"]',
+    bottomPanel: '//div[@id="bottom-panel"]',
+    flows: {
+        feature: (featureId) => `//div[@data-feature-id="${featureId}"]`,
+        previewButton: (stepId) => `//button[@data-testid="open-code-preview-button-${stepId}"]`,
+        node: (stepId) => `//div[@data-testid="node-${stepId}"]`,
+    },
+    endpoints: {
+        endpoint: (method, path) => `//div[@data-testid="endpoint-${method}-${path}"]`,
+        callPanel: '//div[@data-testid="endpoint-body-panel__call"]',
+        callTab: '//button[@data-testid="endpoint-call-tab"]',
+        response: '//div[@data-testid="endpoint-response-container"]',
+        playButton: '//button[@data-testid="endpoint-play-button"]',
+    },
+    tracing: {
+        trace: (index) => `(//div[contains(@class, 'motia-trace-group')])[${index}]`,
+        details: '//div[@data-testid="trace-details"]',
+        timeline: (index) => `(//div[@data-testid="trace-timeline-item"])[${index}]`,
+    },
+    logs: {
+        container: '//div[@data-testid="logs-container"]',
+        searchContainer: '//div[@data-testid="logs-search-container"]',
+        traceColumn: (index) => `(//td[starts-with(@data-testid, 'trace')])[${index}]`,
+        row: '//div[@data-testid="log-row"]',
+    },
+    states: {
+        container: '//div[@data-testid="states-container"]',
+        row: (index) => `(//tr[starts-with(@data-testid, 'item-')])[${index}]`,
+    },
+    links: {
+        flows: '//button[@data-testid="flows-link"]',
+        endpoints: '//button[@data-testid="endpoints-link"]',
+        tracing: '//button[@data-testid="traces-link"]',
+        logs: '//button[@data-testid="logs-link"]',
+        states: '//button[@data-testid="states-link"]',
+    },
+};

package/dist/src/components/tutorial/hooks/tutorial-utils.d.ts

@@ -0,0 +1 @@
+export declare const waitForElementByXPath: (xpath: string, optional?: boolean, maxAttempts?: number, delayMs?: number) => Promise<HTMLElement | null>;

package/dist/src/components/tutorial/hooks/tutorial-utils.js

@@ -0,0 +1,17 @@
+export const waitForElementByXPath = async (xpath, optional = false, maxAttempts = 50, delayMs = 50) => {
+    let attempts = 0;
+    while (attempts < maxAttempts) {
+        const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+        const targetElement = result?.singleNodeValue;
+        if (targetElement) {
+            return targetElement;
+        }
+        else if (optional) {
+            return null;
+        }
+        await new Promise((resolve) => setTimeout(resolve, delayMs));
+        attempts++;
+    }
+    console.warn(`Element not found after maximum attempts: ${xpath}`);
+    return null;
+};

package/dist/src/components/tutorial/hooks/use-tutorial-engine.d.ts

@@ -0,0 +1,14 @@
+import { TutorialImage } from '../engine/tutorial-types';
+export declare const useTutorialEngine: () => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    highlighterRef: import("react").RefObject<HTMLDivElement | null>;
+    title: string;
+    description: import("react").ReactNode;
+    image: TutorialImage | undefined;
+    link: string | undefined;
+    currentStep: number;
+    totalSteps: number;
+    onClose: () => void;
+    moveStep: (stepNumber: number) => Promise<void>;
+    currentStepRef: import("react").RefObject<number>;
+};