@motiadev/workbench 0.6.4-beta.130 → 0.6.4-beta.131-595093

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

@@ -17,5 +17,5 @@ export const FlowTabMenuItem = () => {
         selectFlowId(flowId);
         analytics.track('flow_selected', { flow: flowId });
     };
-    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: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] }));
+    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { "data-testid": "flows-dropdown-trigger", className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: _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: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] })] }));
 };

package/dist/src/components/header/deploy-button.d.ts

@@ -0,0 +1 @@
+export declare const DeployButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/header/deploy-button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
+import { Rocket } from 'lucide-react';
+import { useState } from 'react';
+import { analytics } from '@/lib/analytics';
+export const DeployButton = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const onDeployButtonClick = () => {
+        analytics.track('deploy_button_clicked');
+    };
+    const onDeployClick = () => {
+        setIsOpen(false);
+        analytics.track('deploy_button_deploy_clicked');
+    };
+    const onClose = () => {
+        setIsOpen(false);
+        analytics.track('deploy_button_closed');
+    };
+    const onMotiaCloudClick = () => {
+        setIsOpen(true);
+        analytics.track('deploy_button_motia_cloud_clicked');
+    };
+    const onSelfHostedClick = () => {
+        analytics.track('deploy_button_self_hosted_clicked');
+        window.open('https://www.motia.dev/docs/concepts/deployment/self-hosted', '_blank');
+    };
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs("div", { children: [_jsx("div", { className: "fixed inset-0 z-[9999] bg-black/20 backdrop-blur-sm", onClick: () => setIsOpen(false) }), _jsxs("div", { className: "driver-popover w-[600px]! fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[10000] animate-in fade-in-0 zoom-in-95", children: [_jsx("img", { src: "https://oxhhfuuoqzsaqthfairn.supabase.co/storage/v1/object/public/public-images/preview.png", alt: "Motia Cloud", className: "driver-popover-image object-cover", style: { height: 393, width: '100%' } }), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: "Motia Cloud is Live!" }) }), _jsx("div", { className: "driver-popover-description", children: "Deploy to production in minutes, not hours. One click gets your Motia project live with enterprise-grade reliability. Seamlessly scale, rollback instantly, and monitor everything in real-time. Your code deserves infrastructure that just works." }), _jsx("a", { href: "https://www.motia.dev/docs/concepts/deployment/motia-cloud/features", target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more about Motia Cloud" }), _jsx("div", { className: "driver-popover-footer flex items-center justify-end", children: _jsxs("div", { className: "driver-popover-navigation-btns flex gap-6", children: [_jsx("button", { className: "tutorial-opt-out-button text-sm! font-semibold! text-muted-foreground!", onClick: onClose, children: "Close" }), _jsx("a", { href: "https://motia.cloud?utm_source=workbench&utm_medium=referral", target: "_blank", onClick: onDeployClick, children: _jsx("button", { className: "driver-popover-next-btn", children: "Deploy!" }) })] }) })] })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "font-semibold text-sm dark:bg-white dark:text-black dark:hover:bg-white/90 bg-black/90 hover:bg-black/80 text-white", onClick: onDeployButtonClick, children: [_jsx(Rocket, {}), "Deploy"] }) }), _jsxs(DropdownMenuContent, { className: "bg-background text-foreground w-56", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onMotiaCloudClick, children: "Motia Cloud" }), _jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onSelfHostedClick, children: "Self-Hosted (Docker)" })] })] })] }));
+};

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

@@ -2,7 +2,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 '../tutorial/tutorial-button';
+import { DeployButton } from './deploy-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, {})] }));
+    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(ThemeToggle, {}), _jsx(TutorialButton, {}), _jsx(DeployButton, {})] }));
 };

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

@@ -3,10 +3,19 @@ import { TraceTimeline } from '@/components/observability/trace-timeline';
 import { useStreamGroup } from '@motiadev/stream-client-react';
 import { TracesGroups } from '@/components/observability/traces-groups';
 import { useGlobalStore } from '../../stores/use-global-store';
+import { useEffect } from 'react';
 export const TracesPage = () => {
     const selectedGroupId = useGlobalStore((state) => state.selectedTraceGroupId);
     const selectTraceGroupId = useGlobalStore((state) => state.selectTraceGroupId);
     const { data } = useStreamGroup({ streamName: 'motia-trace-group', groupId: 'default' });
     const handleGroupSelect = (group) => selectTraceGroupId(group.id);
+    useEffect(() => {
+        if (data && data.length > 0) {
+            const group = data[data.length - 1];
+            if (group && group.status === 'running' && group.id !== selectedGroupId) {
+                selectTraceGroupId(group.id);
+            }
+        }
+    }, [data]);
     return (_jsxs("div", { className: "flex flex-1 overflow-hidden h-full", children: [_jsx("div", { className: "max-w-1/3 border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: data, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "flex-2 overflow-auto", "data-testid": "trace-details", children: [selectedGroupId && _jsx(TraceTimeline, { groupId: selectedGroupId }), !selectedGroupId && (_jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a trace or trace group to view the timeline" }))] })] }));
 };

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

@@ -13,6 +13,6 @@ export const TutorialStep = forwardRef(({ step, totalSteps, title, description,
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [onClose, onNext]);
-    return (_jsxs("div", { ref: ref, className: "driver-popover", children: [image && (_jsx("img", { src: image.src, alt: "Step visual", className: "driver-popover-image object-cover", style: { height: image.height, width: '100%' } })), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: title }) }), _jsx("div", { className: "driver-popover-description", children: description }), link && (_jsx("a", { href: link, target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more" })), _jsxs("div", { className: "driver-popover-footer flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground font-semibold", children: [step, " ", _jsx("span", { className: "text-foreground", children: "/" }), " ", totalSteps] }), _jsx("div", { className: "driver-popover-navigation-btns flex gap-2", children: _jsx("button", { className: "driver-popover-next-btn", onClick: onNext, children: step < totalSteps ? 'Continue' : 'Finish' }) })] }), step < totalSteps && (_jsx("div", { className: "tutorial-opt-out-container", children: _jsx("button", { className: "tutorial-opt-out-button", onClick: onClose, children: "Close" }) }))] }));
+    return (_jsxs("div", { ref: ref, className: "driver-popover", children: [image && (_jsx("img", { src: image.src, alt: "Step visual", className: "driver-popover-image object-cover", style: { height: image.height, width: '100%' } })), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: title }) }), _jsx("div", { className: "driver-popover-description", children: description }), link && (_jsx("a", { href: link, target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more" })), _jsxs("div", { className: "driver-popover-footer flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground font-semibold", children: [step, " ", _jsx("span", { className: "text-foreground", children: "/" }), " ", totalSteps] }), _jsx("div", { className: "driver-popover-navigation-btns driver-popover-navigation-btns-hint flex gap-2", children: _jsx("button", { className: "driver-popover-next-btn", onClick: onNext, children: step < totalSteps ? 'Continue' : 'Finish' }) })] }), step < totalSteps && (_jsx("div", { className: "tutorial-opt-out-container", children: _jsx("button", { className: "tutorial-opt-out-button", onClick: onClose, children: "Close" }) }))] }));
 });
 TutorialStep.displayName = 'TutorialStep';

package/dist/src/components/tutorial/tutorial.css

@@ -121,7 +121,7 @@
   flex-grow: 0;
 }
 
-.driver-popover-navigation-btns:hover:before {
+.driver-popover-navigation-btns-hint:hover:before {
   content: 'Use arrow keys to navigate';
   position: absolute;
   color: white;
@@ -156,11 +156,18 @@
 }
 
 .driver-popover-next-btn, .driver-popover-next-btn:hover {
-  background-color: var(--accent-1000);
   color: white;
   padding: 16px 32px;
 }
 
+.driver-popover-next-btn {
+  background-color: var(--accent-1000);
+}
+
+.driver-popover-next-btn:hover {
+  background-color: var(--accent-900);
+}
+
 .driver-popover-footer {
   padding: 16px;
 }