@motiadev/workbench 0.14.0-beta.165-285707 → 0.15.0-beta.165

package/dist/src/components/flow/nodes/noop-flow-node.tsx

@@ -0,0 +1,6 @@
+import type { NoopNodeProps } from '../../../publicComponents/node-props'
+import { NoopNode } from '../../../publicComponents/noop-node'
+
+export const NoopFlowNode = ({ data }: NoopNodeProps) => {
+  return <NoopNode data={data} />
+}

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

@@ -0,0 +1,110 @@
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui'
+import { Rocket } from 'lucide-react'
+import { useState } from 'react'
+import { motiaAnalytics } from '../../lib/motia-analytics'
+
+export const DeployButton = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onDeployButtonClick = () => {
+    motiaAnalytics.track('deploy_button_clicked')
+  }
+
+  const onDeployClick = () => {
+    setIsOpen(false)
+    motiaAnalytics.track('deploy_button_deploy_clicked')
+  }
+
+  const onClose = () => {
+    setIsOpen(false)
+    motiaAnalytics.track('deploy_button_closed')
+  }
+
+  const onMotiaCloudClick = () => {
+    setIsOpen(true)
+    motiaAnalytics.track('deploy_button_motia_cloud_clicked')
+  }
+
+  const onSelfHostedClick = () => {
+    motiaAnalytics.track('deploy_button_self_hosted_clicked')
+    window.open('https://www.motia.dev/docs/deployment-guide/self-hosted', '_blank')
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <div>
+          {/* backdrop container */}
+          <div className="fixed inset-0 z-[9999] bg-black/20 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
+
+          <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">
+            <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%' }}
+            />
+
+            <div className="driver-popover-title">
+              <h2 className="popover-title">Motia Cloud is Live!</h2>
+            </div>
+
+            <div className="driver-popover-description">
+              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.
+            </div>
+
+            <a
+              href="https://www.motia.dev/docs/deployment-guide/motia-cloud/features"
+              target="_blank"
+              className="text-foreground text-xs font-semibold px-4 hover:underline"
+              rel="noopener"
+            >
+              Learn more about Motia Cloud
+            </a>
+
+            <div className="driver-popover-footer flex items-center justify-end">
+              <div className="driver-popover-navigation-btns flex gap-6">
+                <button
+                  className="tutorial-opt-out-button text-sm! font-semibold! text-muted-foreground!"
+                  onClick={onClose}
+                >
+                  Close
+                </button>
+                <a
+                  href="https://motia.cloud?utm_source=workbench&utm_medium=referral"
+                  target="_blank"
+                  onClick={onDeployClick}
+                  rel="noopener"
+                >
+                  <button className="driver-popover-next-btn">Deploy!</button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <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}
+          >
+            <Rocket />
+            Deploy
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-background text-foreground w-56">
+          <DropdownMenuItem className="cursor-pointer h-10 font-semibold" onClick={onMotiaCloudClick}>
+            Motia Cloud
+          </DropdownMenuItem>
+          <DropdownMenuItem className="cursor-pointer h-10 font-semibold" onClick={onSelfHostedClick}>
+            Self-Hosted (Docker)
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}

package/dist/src/components/header/header.tsx

@@ -0,0 +1,39 @@
+import { useThemeStore } from '@motiadev/ui'
+import type React from 'react'
+import { memo, useEffect } from 'react'
+// @ts-expect-error
+import motiaLogoDark from '../../assets/motia-dark.png'
+// @ts-expect-error
+import motiaLogoLight from '../../assets/motia-light.png'
+import { useMotiaConfigStore } from '../../stores/use-motia-config-store'
+import { Tutorial } from '../tutorial/tutorial'
+import { TutorialButton } from '../tutorial/tutorial-button'
+import { ThemeToggle } from '../ui/theme-toggle'
+import { DeployButton } from './deploy-button'
+
+export const Header: React.FC = memo(() => {
+  const theme = useThemeStore((state) => state.theme)
+  const logo = theme === 'light' ? motiaLogoLight : motiaLogoDark
+
+  const config = useMotiaConfigStore((state) => state.config)
+  const fetchConfig = useMotiaConfigStore((state) => state.fetchConfig)
+
+  useEffect(() => {
+    fetchConfig()
+  }, [])
+
+  const isDevMode = config?.isDev ?? false
+  const isTutorialDisabled = config?.isTutorialDisabled ?? true
+
+  return (
+    <header className="min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b">
+      <img src={logo} className="h-5" id="logo-icon" data-testid="logo-icon" />
+      <div className="flex-1" />
+      <ThemeToggle />
+      {isDevMode && !isTutorialDisabled && <TutorialButton />}
+      {isDevMode && <DeployButton />}
+      {!isTutorialDisabled && <Tutorial />}
+    </header>
+  )
+})
+Header.displayName = 'Header'

package/dist/src/components/root-motia.tsx

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react'
+import { memo } from 'react'
+import { useAnalytics } from '../lib/motia-analytics'
+
+export const RootMotia: React.FC<PropsWithChildren> = memo(({ children }) => {
+  useAnalytics()
+
+  return children
+})
+RootMotia.displayName = 'RootMotia'

package/dist/src/components/top-panel.tsx

@@ -0,0 +1,40 @@
+import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui'
+import { memo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { type AppTabsState, TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store'
+import { useTabsStore } from '../stores/use-tabs-store'
+
+const topTabsSelector = (state: AppTabsState) => state.tabs[TabLocation.TOP]
+const topPanelId = 'top-panel'
+
+export const TopPanel = memo(() => {
+  const defaultTab = useTabsStore((state) => state.tab.top)
+  const setTopTab = useTabsStore((state) => state.setTopTab)
+  const tabs = useAppTabsStore(useShallow(topTabsSelector))
+
+  return (
+    <CollapsiblePanel
+      id={topPanelId}
+      variant={'tabs'}
+      defaultTab={defaultTab}
+      onTabChange={setTopTab}
+      withResizeHandle
+      header={
+        <TabsList>
+          {tabs.map(({ id, tabLabel: Label }) => (
+            <TabsTrigger key={id} value={id} data-testid={`${id.toLowerCase()}-link`} className="cursor-pointer">
+              <Label />
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      }
+    >
+      {tabs.map(({ id, content: Element }) => (
+        <TabsContent key={id} value={id} className="h-full">
+          <Element />
+        </TabsContent>
+      ))}
+    </CollapsiblePanel>
+  )
+})
+TopPanel.displayName = 'TopPanel'

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

@@ -0,0 +1,26 @@
+import type { TutorialStep } from './tutorial-types'
+
+class Tutorial {
+  public steps: TutorialStep[] = []
+  private onStepsRegisteredCallbacks: (() => void)[] = []
+  private onOpenCallbacks: (() => void)[] = []
+
+  register(steps: TutorialStep[]) {
+    this.steps = steps
+    this.onStepsRegisteredCallbacks.forEach((callback) => callback())
+  }
+
+  onStepsRegistered(callback: () => void) {
+    this.onStepsRegisteredCallbacks.push(callback)
+  }
+
+  onOpen(callback: () => void) {
+    this.onOpenCallbacks.push(callback)
+  }
+
+  open() {
+    this.onOpenCallbacks.forEach((callback) => callback())
+  }
+}
+
+export const MotiaTutorial = new Tutorial()

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

@@ -0,0 +1,26 @@
+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/workbench-xpath.ts

@@ -0,0 +1,53 @@
+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: {
+    dropdownFlow: (flowId: string) => `//div[@data-testid="dropdown-${flowId}"]`,
+    feature: (featureId: string) => `//div[@data-feature-id="${featureId}"]`,
+    previewButton: (stepId: string) => `//button[@data-testid="open-code-preview-button-${stepId}"]`,
+    node: (stepId: string) => `//div[@data-testid="node-${stepId}"]`,
+  },
+
+  endpoints: {
+    endpointsList: '//div[@data-testid="endpoints-list"]',
+    endpoint: (method: string, path: string) => `//div[@data-testid="endpoint-${method}-${path}"]`,
+    callPanel: '//div[@data-testid="endpoint-details-panel"]',
+    specButton: '//button[@data-testid="endpoint-spec-button"]',
+
+    bodyTab: '//button[@data-testid="endpoint-body-tab"]',
+    headersTab: '//button[@data-testid="endpoint-headers-tab"]',
+    paramsTab: '//button[@data-testid="endpoint-params-tab"]',
+
+    callTab: '//button[@data-testid="endpoint-body-tab"]', // deprecated
+    response: '//div[@data-testid="endpoint-response-container"]',
+    playButton: '//button[@data-testid="endpoint-play-button"]',
+  },
+
+  tracing: {
+    trace: (index: number) => `(//button[contains(@class, 'motia-trace-group')])[${index}]`,
+    details: '//div[@data-testid="trace-details"]',
+    timeline: (index: number) => `(//div[@data-testid="trace-timeline-item"])[${index}]`,
+  },
+
+  logs: {
+    container: '//div[@data-testid="logs-container"]',
+    searchContainer: '//div[@data-testid="logs-search-container"]',
+    traceColumn: (index: number) => `(//td[starts-with(@data-testid, 'trace')])[${index}]`,
+    row: '//div[@data-testid="log-row"]',
+  },
+
+  states: {
+    container: '//div[@data-testid="states-container"]',
+    row: (index: number) => `(//tr[starts-with(@data-testid, 'item-')])[${index}]`,
+  },
+
+  links: {
+    flows: '//div[@data-testid="flows-dropdown-trigger"]',
+    endpoints: '//button[@data-testid="endpoints-link"]',
+    tracing: '//button[@data-testid="tracing-link"]',
+    logs: '//button[@data-testid="logs-link"]',
+    states: '//button[@data-testid="states-link"]',
+  },
+}

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

@@ -0,0 +1,26 @@
+export const waitForElementByXPath = async (
+  xpath: string,
+  optional: boolean = false,
+  maxAttempts: number = 50,
+  delayMs: number = 50,
+): Promise<HTMLElement | null> => {
+  let attempts = 0
+
+  while (attempts < maxAttempts) {
+    const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
+    const targetElement = result?.singleNodeValue as HTMLElement | undefined
+
+    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.ts

@@ -0,0 +1,213 @@
+import { useEffect, useRef, useState } from 'react'
+import { MotiaTutorial } from '../engine/tutorial-engine'
+import type { TutorialImage } from '../engine/tutorial-types'
+import { waitForElementByXPath } from './tutorial-utils'
+
+export const useTutorialEngine = () => {
+  const ref = useRef<HTMLDivElement>(null)
+  const highlighterRef = useRef<HTMLDivElement>(null)
+
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState<React.ReactNode | undefined>(undefined)
+  const [image, setImage] = useState<TutorialImage | undefined>(undefined)
+  const [link, setLink] = useState<string | undefined>(undefined)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [totalSteps, setTotalSteps] = useState(MotiaTutorial.steps.length)
+
+  const manualOpenRef = useRef(false)
+  const loading = useRef(false)
+  const currentStepRef = useRef(0)
+
+  const moveComponent = (x: number, y: number) => {
+    if (ref.current) {
+      ref.current.style.position = 'absolute'
+      ref.current.style.left = `${x}px`
+      ref.current.style.top = `${y}px`
+    }
+  }
+
+  const moveStep = async (stepNumber: number) => {
+    const container = ref.current
+
+    if (container && !loading.current) {
+      if (stepNumber >= MotiaTutorial.steps.length) {
+        onClose()
+        return
+      }
+
+      if (container.parentElement) {
+        container.style.transition = 'all 0.3s ease-in-out'
+        container.parentElement.style.opacity = '1'
+        container.parentElement.style.display = 'block'
+      }
+
+      loading.current = true
+      currentStepRef.current = stepNumber
+
+      const step = MotiaTutorial.steps[stepNumber]
+
+      // Run any before actions
+      if (step.before) {
+        for (const action of step.before) {
+          const monaco = (window as any).monaco
+          if (action.type === 'click') {
+            const element = await waitForElementByXPath(action.selector, action.optional)
+
+            if (element) {
+              element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+              element.click()
+              element.dispatchEvent(
+                new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 }),
+              )
+            }
+          } else if (action.type === 'fill-editor' && monaco) {
+            monaco.editor?.getEditors?.()?.[0]?.setValue(JSON.stringify(action.content, null, 2))
+          }
+        }
+      }
+
+      setCurrentStep(stepNumber + 1)
+      setTitle(step.title)
+      setDescription(await step.description())
+      setImage(step.image)
+      setLink(step.link)
+
+      setTimeout(async () => {
+        const { height, width } = container.getBoundingClientRect()
+
+        if (step.elementXpath) {
+          const targetElement = await waitForElementByXPath(step.elementXpath)
+
+          if (!targetElement) {
+            console.warn(`Element not found after maximum attempts: ${step.elementXpath}`)
+            loading.current = false
+            return
+          }
+
+          if (targetElement && highlighterRef.current) {
+            const { top, left, width, height } = targetElement.getBoundingClientRect()
+            highlighterRef.current.style.top = `${top - 0}px`
+            highlighterRef.current.style.left = `${left - 0}px`
+            highlighterRef.current.style.width = `${width + 0}px`
+            highlighterRef.current.style.height = `${height + 0}px`
+          }
+
+          // Position tutorial relative to target element
+          if (targetElement) {
+            const targetRect = targetElement.getBoundingClientRect()
+            const spaceBelow = window.innerHeight - targetRect.bottom
+            const spaceAbove = targetRect.top
+            const spaceRight = window.innerWidth - targetRect.right
+            const spaceLeft = targetRect.left
+
+            // Helper function to adjust horizontal position within viewport bounds
+            const adjustHorizontalPosition = (x: number) => {
+              // this is important to avoid the tutorial from overflowing at far left or right
+              return Math.max(20, Math.min(x, window.innerWidth - width - 20))
+            }
+
+            // Try to position below first
+            if (spaceBelow >= height + 20) {
+              const x = targetRect.left + targetRect.width / 2 - width / 2
+              moveComponent(adjustHorizontalPosition(x), targetRect.bottom + 20)
+            }
+            // Try above if not enough space below
+            else if (spaceAbove >= height + 20) {
+              const x = targetRect.left + targetRect.width / 2 - width / 2
+              moveComponent(adjustHorizontalPosition(x), targetRect.top - height - 20)
+            }
+            // Try right side
+            else if (spaceRight >= width + 20) {
+              moveComponent(targetRect.right + 20, targetRect.top + targetRect.height / 2 - height / 2)
+            }
+            // Try left side
+            else if (spaceLeft >= width + 20) {
+              moveComponent(targetRect.left - width - 20, targetRect.top + targetRect.height / 2 - height / 2)
+            }
+          }
+        } else {
+          if (highlighterRef.current) {
+            highlighterRef.current.style.top = '50%'
+            highlighterRef.current.style.left = '50%'
+            highlighterRef.current.style.width = '1px'
+            highlighterRef.current.style.height = '1px'
+          }
+          // Fallback to center of screen
+          moveComponent(window.innerWidth / 2 - width / 2, window.innerHeight / 2 - height / 2)
+        }
+      }, 1)
+
+      loading.current = false
+    }
+  }
+
+  const onClose = () => {
+    if (ref.current?.parentElement) {
+      ref.current.parentElement.style.transition = 'opacity 0.3s ease-out'
+      ref.current.parentElement.style.opacity = '0'
+      localStorage.setItem('motia-tutorial-closed', 'true')
+
+      setTimeout(() => {
+        if (ref.current?.parentElement) {
+          ref.current.parentElement.style.display = 'none'
+          setCurrentStep(0)
+        }
+      }, 300)
+    }
+  }
+
+  useEffect(() => {
+    importFile('tutorial/tutorial.tsx')
+      .then((module) => {
+        if (Array.isArray(module.steps) && module.steps.length > 0) {
+          MotiaTutorial.register(module.steps)
+        }
+      })
+      .catch((error) => {
+        // Tutorial file is optional, so we don't need to throw an error
+        console.log('Tutorial file not found or could not be loaded:', error.message)
+      })
+  }, [])
+
+  useEffect(() => {
+    const container = ref.current
+
+    if (container?.parentElement) {
+      container.parentElement.style.display = 'none'
+    }
+
+    const onOpen = () => {
+      if (container?.parentElement) {
+        setTotalSteps(MotiaTutorial.steps.length)
+        moveStep(0)
+      }
+    }
+
+    MotiaTutorial.onOpen(() => {
+      manualOpenRef.current = true
+      onOpen()
+    })
+
+    MotiaTutorial.onStepsRegistered(() => {
+      if (localStorage.getItem('motia-tutorial-closed') !== 'true') {
+        manualOpenRef.current = false
+        onOpen()
+      }
+    })
+  }, [])
+
+  return {
+    ref,
+    highlighterRef,
+    title,
+    description,
+    image,
+    link,
+    currentStep,
+    totalSteps,
+    onClose,
+    moveStep,
+    currentStepRef,
+    manualOpenRef,
+  }
+}

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

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import { MotiaTutorial } from '../engine/tutorial-engine'
+import type { TutorialStep } from '../engine/tutorial-types'
+
+export const useTutorial = () => {
+  const open = () => MotiaTutorial.open()
+  const [steps, setSteps] = useState<TutorialStep[]>([])
+
+  useEffect(() => {
+    MotiaTutorial.onStepsRegistered(() => setSteps(MotiaTutorial.steps))
+  }, [])
+
+  return { open, steps }
+}

package/dist/src/components/tutorial/tutorial-button.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@motiadev/ui'
+import { Book } from 'lucide-react'
+import type { FC } from 'react'
+import { motiaAnalytics } from '../../lib/motia-analytics'
+import { Tooltip } from '../ui/tooltip'
+import { useTutorial } from './hooks/use-tutorial'
+
+export const TutorialButton: FC = () => {
+  const { open, steps } = useTutorial()
+  const isTutorialFlowMissing = steps.length === 0
+
+  const onTutorialButtonClick = () => {
+    if (!isTutorialFlowMissing) {
+      open()
+    }
+
+    motiaAnalytics.track('tutorial_button_clicked', { isTutorialFlowMissing })
+  }
+
+  const trigger = (
+    <Button data-testid="tutorial-trigger" variant="default" onClick={() => onTutorialButtonClick()}>
+      <Book className="h-4 w-4" />
+      Tutorial
+    </Button>
+  )
+
+  if (isTutorialFlowMissing) {
+    return (
+      <Tooltip
+        content={
+          <div className="flex flex-col gap-4 p-4 max-w-[320px]">
+            <p className="text-sm wrap-break-word p-0 m-0">
+              In order to start the tutorial, you need to download the tutorial steps using the Motia CLI. In your
+              terminal execute the following command to create a new project:
+            </p>
+            <pre className="text-sm font-bold">npx motia@latest create</pre>
+          </div>
+        }
+      >
+        {trigger}
+      </Tooltip>
+    )
+  }
+
+  return trigger
+}