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

package/dist/src/lib/motia-analytics.ts

@@ -0,0 +1,140 @@
+import { useCallback } from 'react'
+
+interface AmplitudeInstance {
+  setOptOut(optOut: boolean): void
+  track(eventName: string, eventProperties?: Record<string, any>): void
+  identify(userId: string, userProperties?: Record<string, any>): void
+  setUserId(userId: string): void
+  getUserId(): string | undefined
+}
+
+declare global {
+  interface Window {
+    amplitude: AmplitudeInstance
+  }
+}
+
+interface AnalyticsUserData {
+  userId: string
+  projectId: string
+  motiaVersion: string
+  analyticsEnabled: boolean
+}
+
+class WorkbenchAnalytics {
+  private isInitialized = false
+  private userIdCache: string | null = null
+  private projectIdCache: string | null = null
+  private motiaVersion: string | null = null
+
+  constructor() {
+    this.initialize()
+  }
+
+  private async initialize() {
+    if (typeof window !== 'undefined' && window.amplitude) {
+      await this.fetchUserData()
+      this.isInitialized = true
+      this.identifyUser()
+    }
+  }
+
+  private async fetchUserData(): Promise<void> {
+    try {
+      const response = await fetch('/motia/analytics/user')
+      if (response.ok) {
+        const data: AnalyticsUserData = await response.json()
+        this.userIdCache = data.userId
+        this.projectIdCache = data.projectId
+        this.motiaVersion = data.motiaVersion
+
+        window.amplitude.setOptOut(!data.analyticsEnabled)
+        // Set the user ID in Amplitude to match backend
+        if (window.amplitude && data.userId) {
+          window.amplitude.setUserId(data.userId)
+        }
+      } else {
+        console.warn('Failed to fetch user data from backend, using fallback')
+        this.userIdCache = this.generateFallbackUserId()
+      }
+    } catch (error) {
+      console.warn('Error fetching user data:', error)
+      this.userIdCache = this.generateFallbackUserId()
+    }
+  }
+
+  private generateFallbackUserId(): string {
+    let userId = localStorage.getItem('motia-user-id')
+    if (!userId) {
+      userId = `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+      localStorage.setItem('motia-user-id', userId)
+    }
+    return userId
+  }
+
+  private identifyUser() {
+    if (!this.isInitialized || !this.userIdCache) return
+
+    try {
+      window.amplitude.identify(this.userIdCache, {
+        project_id: this.projectIdCache,
+        browser: this.getBrowserInfo(),
+        screen_resolution: `${window.screen.width}x${window.screen.height}`,
+        workbench_version: this.motiaVersion,
+      })
+    } catch (error) {
+      console.warn('Analytics user identification failed:', error)
+    }
+  }
+
+  private getBrowserInfo(): string {
+    const ua = navigator.userAgent
+    if (ua.includes('Chrome')) return 'Chrome'
+    if (ua.includes('Firefox')) return 'Firefox'
+    if (ua.includes('Safari')) return 'Safari'
+    if (ua.includes('Edge')) return 'Edge'
+    return 'Unknown'
+  }
+
+  // Method to get current user and project IDs for external use
+  getAnalyticsIds() {
+    return {
+      userId: this.userIdCache,
+      projectId: this.projectIdCache,
+    }
+  }
+
+  // Simple track method that preserves the user binding
+  track(eventName: string, properties?: Record<string, any>) {
+    if (!this.isInitialized) return
+
+    const eventProperties = {
+      project_id: this.projectIdCache,
+      source: 'frontend',
+      ...properties,
+    }
+
+    try {
+      window.amplitude.track(eventName, eventProperties)
+    } catch (error) {
+      console.warn('Analytics tracking failed:', error)
+    }
+  }
+}
+
+export const motiaAnalytics = new WorkbenchAnalytics()
+
+export const useAnalytics = () => {
+  const track = useCallback((eventName: string, properties?: Record<string, any>) => {
+    motiaAnalytics.track(eventName, properties)
+  }, [])
+
+  const getAnalyticsIds = useCallback(() => {
+    return motiaAnalytics.getAnalyticsIds()
+  }, [])
+
+  return {
+    track,
+    getAnalyticsIds,
+  }
+}

package/dist/src/lib/plugins.tsx

@@ -0,0 +1,132 @@
+import { plugins } from 'virtual:motia-plugins'
+import { DynamicIcon, dynamicIconImports, type IconName } from 'lucide-react/dynamic'
+import { memo } from 'react'
+import { type AppTab, TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store'
+import { isValidTabLocation } from './utils'
+
+export const registerPluginTabs = (addTab: (position: TabLocation, tab: AppTab) => void): void => {
+  if (!Array.isArray(plugins)) {
+    console.warn('[Motia] Invalid plugins configuration: expected array')
+    return
+  }
+
+  plugins.forEach((plugin, index) => {
+    try {
+      if (!plugin.label) {
+        console.warn(`[Motia] Plugin at index ${index} missing label, skipping`)
+        return
+      }
+
+      if (!plugin.component) {
+        console.warn(`[Motia] Plugin "${plugin.label}" missing component, skipping`)
+        return
+      }
+
+      const position = plugin.position || 'top'
+      if (!isValidTabLocation(position)) {
+        console.warn(`[Motia] Plugin "${plugin.label}" has invalid position "${position}", defaulting to "top"`)
+      }
+
+      const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP
+
+      const PluginTabLabel = memo(() => {
+        const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon as IconName)
+        const iconName = hasIcon ? (plugin.labelIcon as IconName) : 'toy-brick'
+
+        if (!hasIcon) {
+          console.warn(
+            `[Motia] Plugin "${plugin.label}" has invalid icon "${plugin.labelIcon}", defaulting to "toy-brick"`,
+          )
+        }
+
+        return (
+          <>
+            <DynamicIcon name={iconName} />
+            <span>{plugin.label}</span>
+          </>
+        )
+      })
+      PluginTabLabel.displayName = `${plugin.label}TabLabel`
+
+      const PluginContent = memo(() => {
+        const Component = plugin.component
+        const props = plugin.props || {}
+
+        if (!Component) {
+          return <div>Error: Plugin component not found</div>
+        }
+
+        return <Component {...props} />
+      })
+      PluginContent.displayName = `${plugin.label}Content`
+
+      addTab(tabLocation, {
+        id: plugin.label.toLowerCase(),
+        tabLabel: PluginTabLabel,
+        content: PluginContent,
+      })
+    } catch (error) {
+      console.error(`[Motia] Error registering plugin "${plugin.label}":`, error)
+    }
+  })
+}
+
+const refreshPluginTabs = (nextPlugins: typeof plugins): void => {
+  try {
+    const state = useAppTabsStore.getState()
+    const { removeTab, addTab } = state
+
+    const idsToRefresh = new Set(nextPlugins.map((p) => (p.label || '').toLowerCase()))
+
+    idsToRefresh.forEach((id) => {
+      removeTab(TabLocation.TOP, id)
+      removeTab(TabLocation.BOTTOM, id)
+    })
+
+    nextPlugins.forEach((plugin, index) => {
+      try {
+        if (!plugin.label || !plugin.component) return
+
+        const position = plugin.position || 'top'
+        const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP
+
+        const PluginTabLabel = memo(() => {
+          const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon as IconName)
+          const iconName: IconName = hasIcon ? (plugin.labelIcon as IconName) : 'toy-brick'
+          return (
+            <>
+              <DynamicIcon name={iconName} />
+              <span>{plugin.label}</span>
+            </>
+          )
+        })
+        PluginTabLabel.displayName = `${plugin.label}TabLabel_HMR_${index}`
+
+        const PluginContent = memo(() => {
+          const Component = plugin.component as React.ElementType
+          const props = plugin.props || {}
+          if (!Component) return <div>Error: Plugin component not found</div>
+          return <Component {...props} />
+        })
+        PluginContent.displayName = `${plugin.label}Content_HMR_${index}`
+
+        addTab(tabLocation, {
+          id: plugin.label.toLowerCase(),
+          tabLabel: PluginTabLabel,
+          content: PluginContent,
+        })
+      } catch (error) {
+        console.error(`[Motia] Error refreshing plugin "${plugin.label}":`, error)
+      }
+    })
+  } catch (err) {
+    console.error('[Motia] Failed to refresh plugin tabs via HMR:', err)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept('virtual:motia-plugins', (mod) => {
+    const next = (mod as unknown as { plugins?: typeof plugins })?.plugins || []
+    refreshPluginTabs(next)
+  })
+}

package/dist/src/lib/utils.ts

@@ -0,0 +1,37 @@
+import { TabLocation } from '../stores/use-app-tabs-store'
+
+export const formatDuration = (duration?: number) => {
+  if (duration === undefined || duration === null) return 'N/A'
+  if (duration < 1000) return `${duration}ms`
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`
+  if (duration < 3600000) return `${(duration / 60000).toFixed(1)}min`
+  return `${(duration / 3600000).toFixed(1)}h`
+}
+
+export const formatTimestamp = (time: number) => {
+  const date = new Date(Number(time))
+  return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`
+}
+
+export type ViewMode = 'project' | 'system'
+export const DEFAULT_VIEW_MODE: ViewMode = 'system'
+
+export const getViewModeFromURL = (): ViewMode => {
+  try {
+    const url = new URL(window.location.href)
+    const viewMode = url.searchParams.get('view-mode')
+
+    if (viewMode === 'project' || viewMode === 'system') {
+      return viewMode
+    }
+
+    return DEFAULT_VIEW_MODE
+  } catch (error) {
+    console.error('[Motia] Error parsing URL:', error)
+    return DEFAULT_VIEW_MODE
+  }
+}
+
+export const isValidTabLocation = (position: string): position is TabLocation => {
+  return Object.values(TabLocation).includes(position as TabLocation)
+}

package/dist/src/main.tsx

@@ -0,0 +1,30 @@
+import { MotiaStreamProvider } from '@motiadev/stream-client-react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { App } from './App'
+import { NotFoundPage } from './components/NotFoundPage'
+import { RootMotia } from './components/root-motia'
+import './index.css'
+
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const basePath = workbenchBase
+  const root = createRoot(rootElement)
+  const address = window.location.origin.replace('http', 'ws')
+
+  root.render(
+    <StrictMode>
+      <MotiaStreamProvider address={address}>
+        <RootMotia>
+          <BrowserRouter>
+            <Routes>
+              <Route path={basePath} element={<App />} />
+              <Route path="*" element={<NotFoundPage />} />
+            </Routes>
+          </BrowserRouter>
+        </RootMotia>
+      </MotiaStreamProvider>
+    </StrictMode>,
+  )
+}

package/dist/src/project-view-mode.tsx

@@ -0,0 +1,32 @@
+import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui'
+import { memo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { type AppTabsState, TabLocation, useAppTabsStore } from './stores/use-app-tabs-store'
+
+const topTabs = (state: AppTabsState) => state.tabs[TabLocation.TOP]
+
+export const ProjectViewMode = memo(() => {
+  const tabs = useAppTabsStore(useShallow(topTabs))
+
+  return (
+    <div className="grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ">
+      <main className="m-2 overflow-hidden">
+        <Panel
+          contentClassName={'p-0'}
+          tabs={tabs.map((tab) => {
+            const Element = tab.content
+            const LabelComponent = tab.tabLabel
+            return {
+              label: tab.id,
+              labelComponent: <LabelComponent />,
+              content: <Element />,
+              'data-testid': tab.id,
+            }
+          })}
+        />
+      </main>
+      <div id={APP_SIDEBAR_CONTAINER_ID} />
+    </div>
+  )
+})
+ProjectViewMode.displayName = 'ProjectViewMode'

package/dist/src/publicComponents/api-node.tsx

@@ -0,0 +1,26 @@
+import type { JSX, PropsWithChildren } from 'react'
+import { BaseNode } from './base-node/base-node'
+import type { ApiNodeProps } from './node-props'
+
+type Props = PropsWithChildren<ApiNodeProps>
+
+export const ApiNode = ({ data, children }: Props): JSX.Element => {
+  return (
+    <BaseNode
+      data={data}
+      variant="api"
+      title={data.name}
+      language={data.language}
+      subtitle={data.description}
+      disableSourceHandle={!data.emits?.length && !data.virtualEmits?.length}
+      disableTargetHandle={!data.subscribes?.length && !data.virtualSubscribes?.length}
+    >
+      {data.webhookUrl && (
+        <div className="flex gap-1 items-center text-muted-foreground">
+          <div className="font-mono">{data.webhookUrl}</div>
+        </div>
+      )}
+      {children}
+    </BaseNode>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { type HandleProps, Position, Handle as RFHandle } from '@xyflow/react'
+import clsx from 'clsx'
+import type React from 'react'
+import type { HTMLAttributes } from 'react'
+
+type Props = HandleProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    isHidden?: boolean
+    onTogglePosition?: () => void
+  }
+
+export const BaseHandle: React.FC<Props> = (props) => {
+  const { isHidden, position, onTogglePosition, ...rest } = props
+  const isHorizontal = position === Position.Left || position === Position.Right
+
+  return (
+    <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}
+    >
+      <RFHandle
+        {...rest}
+        position={position}
+        style={{ background: 'rgb(30,118,231)' }}
+        className="
+        bg-white/50
+        !static
+        !w-[6px]
+        !h-[6px]
+        !min-w-[6px]
+        !min-h-[6px]
+        !p-0
+        !border-none
+        !transform-none
+        !rounded-full
+        !outline-none
+        !shadow-none
+      "
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,114 @@
+import { Button, cn } from '@motiadev/ui'
+import { ScanSearch } from 'lucide-react'
+import type React from 'react'
+import { type PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { useHandlePositions } from '../../hooks/use-update-handle-positions'
+import type { Feature } from '../../types/file'
+import type { BaseNodeProps } from '../node-props'
+import { BaseHandle } from './base-handle'
+import { NodeHeader } from './node-header'
+import { NodeSidebar } from './node-sidebar'
+
+type Props = PropsWithChildren<{
+  title: string
+  subtitle?: string
+  variant: 'event' | 'api' | 'noop' | 'cron'
+  language?: string
+  className?: string
+  disableSourceHandle?: boolean
+  disableTargetHandle?: boolean
+  data: BaseNodeProps
+}>
+
+export const BaseNode: React.FC<Props> = ({
+  title,
+  variant,
+  children,
+  disableSourceHandle,
+  disableTargetHandle,
+  language,
+  subtitle,
+  data,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { sourcePosition, targetPosition, toggleTargetPosition, toggleSourcePosition } = useHandlePositions(data)
+
+  const [content, setContent] = useState<string | null>(null)
+  const [features, setFeatures] = useState<Feature[]>([])
+
+  const fetchContent = useCallback(async () => {
+    const response = await fetch(`/__motia/step/${data.id}`)
+    const responseData = await response.json()
+    setContent(responseData.content)
+    setFeatures(responseData.features)
+  }, [data.id])
+
+  useEffect(() => {
+    if (data.id && isOpen) {
+      fetchContent()
+    }
+  }, [data.id, isOpen, fetchContent])
+
+  return (
+    <div
+      className={cn('p-1 rounded-lg max-w-[350px]', {
+        'bg-muted-foreground/20': isOpen,
+      })}
+    >
+      <div
+        className="rounded-lg dark:bg-[#101010] bg-background border-1 border-muted-foreground/30 border-solid"
+        data-testid={`node-${title?.toLowerCase().replace(/ /g, '-')}`}
+      >
+        <div className="group relative">
+          {/* Main node content */}
+          <NodeHeader text={title} variant={variant} className="border-b-2 border-muted-foreground/10">
+            <div className="flex justify-end">
+              <Button
+                data-testid={`open-code-preview-button-${title?.toLowerCase()}`}
+                variant="ghost"
+                className="h-5 p-0.5"
+                onClick={() => setIsOpen(true)}
+              >
+                <ScanSearch className="w-4 h-4" />
+              </Button>
+            </div>
+          </NodeHeader>
+
+          {subtitle && <div className="py-4 px-6 text-sm text-muted-foreground">{subtitle}</div>}
+          {children && (
+            <div className="p-2">
+              <div
+                className={cn('space-y-3 p-4 text-sm text-muted-foreground', {
+                  'bg-card': variant !== 'noop',
+                })}
+              >
+                {children}
+              </div>
+            </div>
+          )}
+
+          {/* Connection points */}
+          {!disableTargetHandle && (
+            <BaseHandle type="target" position={targetPosition} onTogglePosition={toggleTargetPosition} />
+          )}
+          {!disableSourceHandle && (
+            <BaseHandle type="source" position={sourcePosition} onTogglePosition={toggleSourcePosition} />
+          )}
+        </div>
+      </div>
+
+      {content && (
+        <NodeSidebar
+          features={features}
+          content={content}
+          title={title}
+          subtitle={subtitle}
+          variant={variant}
+          language={language}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
+    </div>
+  )
+}

package/dist/src/publicComponents/base-node/code-display.tsx

@@ -0,0 +1,119 @@
+import { useThemeStore } from '@motiadev/ui'
+import type React from 'react'
+import { useRef, useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import type { Feature } from '../../types/file'
+import { FeatureCard } from './feature-card'
+import { LanguageIndicator } from './language-indicator'
+
+type CodeDisplayProps = {
+  code: string
+  language?: string
+  features?: Feature[]
+}
+
+const codeTagProps = {
+  style: {
+    fontFamily: 'DM Mono, monospace',
+    fontSize: '16px',
+  },
+}
+
+const customStyle = {
+  margin: 0,
+  borderRadius: 0,
+  padding: 0,
+}
+
+const isHighlighted = (lines: string[], lineNumber: number) => {
+  return lines.some((line) => {
+    const [start, end] = line.split('-').map((num) => parseInt(num, 10))
+
+    if (end !== undefined) {
+      return lineNumber >= start && lineNumber <= end
+    }
+
+    return lineNumber == start
+  })
+}
+
+const getFirstLineNumber = (line: string) => {
+  const [start] = line.split('-').map((num) => parseInt(num, 10))
+  return start
+}
+
+export const CodeDisplay: React.FC<CodeDisplayProps> = ({ code, language, features }) => {
+  const theme = useThemeStore((state) => state.theme)
+  const themeStyle = theme === 'dark' ? oneDark : oneLight
+  const [highlightedLines, setHighlightedLines] = useState<string[]>([])
+  const [selectedFeature, setSelectedFeature] = useState<Feature | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const handleFeatureClick = (feature: Feature) => {
+    setSelectedFeature(feature)
+    setHighlightedLines(feature.lines)
+    const lineNumber = getFirstLineNumber(feature.lines[0])
+    const line = ref.current?.querySelector(`[data-line-number="${lineNumber}"]`)
+
+    if (line) {
+      line.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex items-center py-2 px-5 dark:bg-[#1e1e1e] gap-2 justify-center">
+        <div className="text-sm text-muted-foreground">Read only</div>
+        <div className="flex-1" />
+        <LanguageIndicator language={language} className="w-4 h-4" size={16} showLabel />
+      </div>
+      <div className="flex flex-row h-[calc(100%-36px)]">
+        {features && features.length > 0 && (
+          <div className="flex flex-col gap-2 p-2 bg-card overflow-y-auto min-w-[200px] w-[300px]">
+            {features.map((feature, index) => (
+              <FeatureCard
+                key={index}
+                feature={feature}
+                highlighted={selectedFeature === feature}
+                onClick={() => handleFeatureClick(feature)}
+                onHover={() => handleFeatureClick(feature)}
+              />
+            ))}
+          </div>
+        )}
+
+        <div className="overflow-y-auto" ref={ref}>
+          <SyntaxHighlighter
+            showLineNumbers
+            language={language}
+            style={themeStyle}
+            codeTagProps={codeTagProps}
+            customStyle={customStyle}
+            wrapLines
+            lineProps={(lineNumber) => {
+              if (isHighlighted(highlightedLines, lineNumber)) {
+                return {
+                  'data-line-number': lineNumber,
+                  style: {
+                    borderLeft: '2px solid var(--accent-1000)',
+                    backgroundColor: 'rgb(from var(--accent-1000) r g b / 0.2)',
+                  },
+                }
+              }
+
+              return {
+                'data-line-number': lineNumber,
+                style: {
+                  borderLeft: '2px solid transparent',
+                },
+              }
+            }}
+          >
+            {code}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  )
+}