@motiadev/workbench 0.5.8-beta.116 → 0.5.8-beta.117-718551

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

@@ -1,7 +1,8 @@
 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';
 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", id: "logo-icon", "data-testid": "logo-icon" }), _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(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", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", 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, { 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", 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), 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', {
                             '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/states/states-page.js

@@ -12,7 +12,7 @@ export const StatesPage = () => {
     const selectedItem = useMemo(() => (selectedStateId ? items.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [items, selectedStateId]);
     const handleRowClick = (item) => selectStateId(`${item.groupId}:${item.key}`);
     const onClose = () => selectStateId(undefined);
-    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateSidebar, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", "data-testid": "states-container", children: [selectedItem && _jsx(StateSidebar, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
                                 ? 'bg-muted-foreground/10 hover:bg-muted-foreground/20'
                                 : 'hover:bg-muted-foreground/10'), children: [_jsx(TableCell, { className: "hover:bg-transparent", children: item.groupId }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.key }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.type })] }, `${item.groupId}:${item.key}`))) })] })] }));
 };

package/dist/src/components/ui/tutorial-button.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TutorialButton: FC;

package/dist/src/components/ui/tutorial-button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MotiaTutorial } from '@motiadev/tutorial';
+import { Button } from '@motiadev/ui';
+import { Book } from 'lucide-react';
+import { useStreamItem } from '@motiadev/stream-client-react';
+import { useCallback, useEffect } from 'react';
+import { useFlowStore } from '@/stores/use-flow-store';
+export const TutorialButton = () => {
+    const selectFlowId = useFlowStore((state) => state.selectFlowId);
+    const { data: flowConfig } = useStreamItem({
+        streamName: '__motia.flowsConfig',
+        groupId: 'default',
+        id: 'basic-tutorial',
+    });
+    const startTutorial = useCallback((resetState = false) => {
+        const tutorialStepIndex = new URLSearchParams(window.location.search).get('tutorialStepIndex');
+        const config = {
+            resetSkipState: resetState,
+        };
+        if (tutorialStepIndex && !resetState) {
+            config.initialStepIndex = Number(tutorialStepIndex);
+        }
+        selectFlowId('basic-tutorial');
+        MotiaTutorial.start(config);
+        if (resetState) {
+            const url = new URL(window.location.href);
+            url.searchParams.delete('tutorialStepIndex');
+            window.history.replaceState(null, '', url);
+        }
+    }, [selectFlowId]);
+    useEffect(() => {
+        if (import.meta.env.VITE_MOTIA_TUTORIAL_DISABLED || !flowConfig) {
+            console.log('Tutorial disabled or flow not found');
+            return;
+        }
+        startTutorial();
+        return () => MotiaTutorial.close();
+    }, [flowConfig, startTutorial]);
+    if (import.meta.env.VITE_MOTIA_TUTORIAL_DISABLED) {
+        return null;
+    }
+    return (_jsxs(Button, { "data-testid": "tutorial-trigger", variant: "accent", size: "sm", onClick: () => startTutorial(true), children: [_jsx(Book, { className: "h-4 w-4" }), _jsx("span", { children: "Tutorial" })] }));
+};

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

@@ -22,7 +22,7 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
     }, [data.id, isOpen, fetchContent]);
     return (_jsxs("div", { className: cn('p-1 rounded-lg max-w-[350px]', {
             'bg-muted-foreground/20': isOpen,
-        }), children: [_jsx("div", { className: "rounded-lg bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
+        }), children: [_jsx("div", { className: "rounded-lg bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
                                     'bg-card': variant !== 'noop',
                                 }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
 };