@motiadev/workbench 0.13.0-beta.162-850424 → 0.13.0-beta.162-080298

package/dist/motia-plugin/types.ts

@@ -1,198 +0,0 @@
-/**
- * Configuration for a single workbench plugin.
- * This interface defines how plugins are registered and configured in the Motia workbench.
- */
-export interface WorkbenchPlugin {
-  /**
-   * The package name or local path to the plugin.
-   * - For npm packages: use the package name (e.g., '@my-org/my-plugin')
-   * - For local plugins: use the tilde prefix (e.g., '~/plugins/my-plugin')
-   */
-  packageName: string
-
-  /**
-   * Optional named export to use from the plugin package.
-   * If not specified, the default export will be used.
-   * Can be overridden by the plugin's own config.
-   */
-  componentName?: string
-
-  /**
-   * Position where the plugin tab should appear in the workbench.
-   * - 'top': Display in the top tab bar
-   * - 'bottom': Display in the bottom tab bar
-   * @default 'top'
-   */
-  position?: 'top' | 'bottom'
-
-  /**
-   * Display label for the plugin tab.
-   * Can be overridden by the plugin's own config.
-   */
-  label?: string
-
-  /**
-   * Icon name from lucide-react to display next to the label.
-   * Can be overridden by the plugin's own config.
-   * @default 'toy-brick'
-   */
-  labelIcon?: string
-
-  /**
-   * Array of CSS package imports to inject into the workbench.
-   * These will be added to the main index.css file.
-   * Example: ['@my-org/my-plugin/styles.css']
-   */
-  cssImports?: string[]
-
-  /**
-   * Props to pass to the plugin component when it's rendered.
-   * Can be overridden by the plugin's own config.
-   */
-  props?: Record<string, any>
-}
-
-/**
- * Result of validating a plugin configuration.
- */
-export interface ValidationResult {
-  /**
-   * Whether the validation passed
-   */
-  valid: boolean
-
-  /**
-   * Array of error messages if validation failed
-   */
-  errors: string[]
-
-  /**
-   * Array of warning messages for non-critical issues
-   */
-  warnings: string[]
-
-  /**
-   * The validated and normalized plugin configuration (if valid)
-   */
-  plugin?: WorkbenchPlugin
-}
-
-/**
- * Context object passed to various plugin internals functions.
- * Contains shared state and configuration.
- */
-export interface PluginContext {
-  /**
-   * Array of plugin configurations
-   */
-  plugins: WorkbenchPlugin[]
-
-  /**
-   * Vite dev server instance (only available in dev mode)
-   */
-  server?: any
-}
-
-/**
- * Package resolution result.
- */
-export interface ResolvedPackage {
-  /**
-   * The original package name from the configuration
-   */
-  packageName: string
-
-  /**
-   * Resolved absolute path to the package
-   */
-  resolvedPath: string
-
-  /**
-   * Whether this is a local plugin (starts with ~/)
-   */
-  isLocal: boolean
-
-  /**
-   * Alias to use for imports
-   */
-  alias: string
-}
-
-/**
- * Generated virtual module exports interface.
- * This is what consumers will import from 'virtual:motia-plugins'.
- */
-export interface VirtualModuleExports {
-  /**
-   * Array of processed plugin configurations ready to be registered
-   */
-  plugins: ProcessedPlugin[]
-}
-
-/**
- * A plugin configuration after processing and normalization.
- * This is the format used by the workbench to register tabs.
- */
-export interface ProcessedPlugin {
-  /**
-   * Display label for the plugin tab
-   */
-  label: string
-
-  /**
-   * Icon name from lucide-react
-   */
-  labelIcon: string
-
-  /**
-   * Position in the workbench ('top' or 'bottom')
-   */
-  position: 'top' | 'bottom'
-
-  /**
-   * Props to pass to the component
-   */
-  props: Record<string, any>
-
-  /**
-   * The React component to render
-   */
-  component: any
-}
-
-/**
- * Type guard to check if position is valid.
- */
-export function isValidPosition(position: any): position is 'top' | 'bottom' {
-  return position === 'top' || position === 'bottom'
-}
-
-/**
- * Constants used throughout the plugin system.
- */
-export const CONSTANTS = {
-  /**
-   * Virtual module ID for importing plugins
-   */
-  VIRTUAL_MODULE_ID: 'virtual:motia-plugins',
-
-  /**
-   * Resolved virtual module ID (with null byte prefix for Vite)
-   */
-  RESOLVED_VIRTUAL_MODULE_ID: '\0virtual:motia-plugins',
-
-  /**
-   * Log prefix for all plugin messages
-   */
-  LOG_PREFIX: '[motia-plugins]',
-
-  /**
-   * Default values for optional plugin fields
-   */
-  DEFAULTS: {
-    POSITION: 'top' as const,
-    LABEL: 'Plugin label',
-    ICON: 'toy-brick',
-    PROPS: {},
-  },
-} as const

package/dist/motia-plugin/validator.ts

@@ -1,197 +0,0 @@
-import { existsSync } from 'fs'
-import { z } from 'zod'
-import type { ValidationResult, WorkbenchPlugin } from './types'
-import { CONSTANTS, isValidPosition } from './types'
-import { isLocalPlugin, resolveLocalPath } from './utils'
-
-/**
- * Zod schema for WorkbenchPlugin configuration.
- * Provides runtime type validation with detailed error messages.
- */
-const WorkbenchPluginSchema = z.object({
-  packageName: z
-    .string()
-    .min(1, 'packageName is required and cannot be empty')
-    .refine((name) => name.startsWith('~/') || name.startsWith('@') || /^[a-z0-9-_]+$/i.test(name), {
-      message: 'packageName must be a valid npm package name or local path (starting with ~/)',
-    }),
-
-  componentName: z.string().optional(),
-
-  position: z
-    .enum(['top', 'bottom'])
-    .optional()
-    .refine((pos) => pos === undefined || isValidPosition(pos), {
-      message: 'position must be either "top" or "bottom"',
-    }),
-
-  label: z.string().optional(),
-
-  labelIcon: z.string().optional(),
-
-  cssImports: z.array(z.string()).optional(),
-
-  props: z.record(z.any(), z.any()).optional(),
-})
-
-/**
- * Validates a single plugin configuration.
- *
- * @param plugin - The plugin configuration to validate
- * @param index - The index of the plugin in the array (for error messages)
- * @returns A validation result with errors, warnings, and normalized plugin
- */
-export function validatePluginConfig(plugin: any, index: number): ValidationResult {
-  const errors: string[] = []
-  const warnings: string[] = []
-
-  if (typeof plugin !== 'object' || plugin === null) {
-    return {
-      valid: false,
-      errors: [`Plugin at index ${index}: expected object, got ${typeof plugin}`],
-      warnings: [],
-    }
-  }
-
-  try {
-    const result = WorkbenchPluginSchema.safeParse(plugin)
-
-    if (!result.success) {
-      result.error.issues.forEach((err: z.core.$ZodIssue) => {
-        const path = err.path.join('.')
-        errors.push(`Plugin at index ${index}, field "${path}": ${err.message}`)
-      })
-
-      return { valid: false, errors, warnings }
-    }
-
-    const validatedPlugin = result.data as WorkbenchPlugin
-
-    if (isLocalPlugin(validatedPlugin.packageName)) {
-      const resolvedPath = resolveLocalPath(validatedPlugin.packageName)
-      if (!existsSync(resolvedPath)) {
-        warnings.push(
-          `Plugin at index ${index}: local path "${validatedPlugin.packageName}" does not exist at "${resolvedPath}". ` +
-            `Make sure the path is correct relative to the project root.`,
-        )
-      }
-    }
-
-    if (!validatedPlugin.label) {
-      warnings.push(`Plugin at index ${index}: "label" not specified, will use default "${CONSTANTS.DEFAULTS.LABEL}"`)
-    }
-
-    if (!validatedPlugin.labelIcon) {
-      warnings.push(
-        `Plugin at index ${index}: "labelIcon" not specified, will use default "${CONSTANTS.DEFAULTS.ICON}"`,
-      )
-    }
-
-    if (!validatedPlugin.position) {
-      warnings.push(
-        `Plugin at index ${index}: "position" not specified, will use default "${CONSTANTS.DEFAULTS.POSITION}"`,
-      )
-    }
-
-    if (validatedPlugin.props && Object.keys(validatedPlugin.props).length === 0) {
-      warnings.push(`Plugin at index ${index}: "props" is an empty object`)
-    }
-
-    if (validatedPlugin.cssImports) {
-      if (validatedPlugin.cssImports.length === 0) {
-        warnings.push(`Plugin at index ${index}: "cssImports" is an empty array`)
-      }
-
-      validatedPlugin.cssImports.forEach((cssImport, cssIndex) => {
-        if (!cssImport || cssImport.trim() === '') {
-          warnings.push(`Plugin at index ${index}: cssImport at index ${cssIndex} is empty or whitespace`)
-        }
-      })
-    }
-
-    return {
-      valid: true,
-      errors: [],
-      warnings,
-      plugin: validatedPlugin,
-    }
-  } catch (error) {
-    return {
-      valid: false,
-      errors: [`Plugin at index ${index}: unexpected validation error: ${error}`],
-      warnings: [],
-    }
-  }
-}
-
-/**
- * Validates an array of plugin configurations.
- *
- * @param plugins - Array of plugin configurations to validate
- * @param options - Validation options
- * @returns Combined validation result for all plugins
- */
-export function validatePlugins(plugins: any[], options: { failFast?: boolean } = {}): ValidationResult {
-  const allErrors: string[] = []
-  const allWarnings: string[] = []
-  const validatedPlugins: WorkbenchPlugin[] = []
-
-  if (!Array.isArray(plugins)) {
-    return {
-      valid: false,
-      errors: [`Expected plugins to be an array, got ${typeof plugins}`],
-      warnings: [],
-    }
-  }
-
-  if (plugins.length === 0) {
-    console.warn('[motia-plugins] No plugins provided to validate')
-    return {
-      valid: true,
-      errors: [],
-      warnings: ['No plugins configured'],
-    }
-  }
-
-  for (let i = 0; i < plugins.length; i++) {
-    const result = validatePluginConfig(plugins[i], i)
-
-    allErrors.push(...result.errors)
-    allWarnings.push(...result.warnings)
-
-    if (result.valid && result.plugin) {
-      validatedPlugins.push(result.plugin)
-    }
-
-    if (options.failFast && result.errors.length > 0) {
-      break
-    }
-  }
-
-  const packageNames = validatedPlugins.map((p) => p.packageName)
-  const duplicates = packageNames.filter((name, index) => packageNames.indexOf(name) !== index)
-
-  if (duplicates.length > 0) {
-    const uniqueDuplicates = [...new Set(duplicates)]
-    uniqueDuplicates.forEach((dup) => {
-      allWarnings.push(`Duplicate package name found: "${dup}". This may cause conflicts.`)
-    })
-  }
-
-  const valid = allErrors.length === 0
-
-  if (valid) {
-    console.log(`[motia-plugins] ✓ Validated ${validatedPlugins.length} plugin(s) successfully`)
-    if (allWarnings.length > 0) {
-      console.warn(`[motia-plugins] Found ${allWarnings.length} warning(s)`)
-    }
-  } else {
-    console.error(`[motia-plugins] ✗ Validation failed with ${allErrors.length} error(s)`)
-  }
-
-  return {
-    valid,
-    errors: allErrors,
-    warnings: allWarnings,
-  }
-}

package/dist/src/App.tsx

@@ -1,41 +0,0 @@
-import { type FC, memo, useEffect, useMemo } from 'react'
-import { FlowPage } from './components/flow/flow-page'
-import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item'
-import { registerPluginTabs } from './lib/plugins'
-import { getViewModeFromURL, type ViewMode } from './lib/utils'
-import { ProjectViewMode } from './project-view-mode'
-import { type AppTab, TabLocation, useAppTabsStore } from './stores/use-app-tabs-store'
-import { SystemViewMode } from './system-view-mode'
-
-const TAB_IDS = {
-  FLOW: 'flow',
-  LOGS: 'logs',
-} as const
-
-const topTabs: AppTab[] = [
-  {
-    id: TAB_IDS.FLOW,
-    tabLabel: FlowTabMenuItem,
-    content: FlowPage,
-  },
-]
-
-export const App: FC = memo(() => {
-  const setTabs = useAppTabsStore((state) => state.setTabs)
-  const addTab = useAppTabsStore((state) => state.addTab)
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setTabs(TabLocation.TOP, topTabs)
-      registerPluginTabs(addTab)
-    }, 10)
-    return () => clearTimeout(timeout)
-  }, [setTabs, addTab])
-
-  const viewMode = useMemo<ViewMode>(getViewModeFromURL, [])
-
-  const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode
-
-  return <ViewComponent />
-})
-App.displayName = 'App'

package/dist/src/components/NotFoundPage.tsx

@@ -1,11 +0,0 @@
-import { Header } from './header/header'
-
-export const NotFoundPage = () => (
-  <div className="grid grid-rows-[auto_1fr] h-screen bg-background text-foreground">
-    <Header />
-    <div className="flex flex-col items-center justify-center">
-      <h1 className="text-4xl font-bold mb-4">404 – Page Not Found</h1>
-      <p className="text-lg opacity-80 mb-6">This route doesn’t exist.</p>
-    </div>
-  </div>
-)

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

@@ -1,39 +0,0 @@
-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 bottomTabsSelector = (state: AppTabsState) => state.tabs[TabLocation.BOTTOM]
-const bottomPanelId = 'bottom-panel'
-
-export const BottomPanel = memo(() => {
-  const defaultTab = useTabsStore((state) => state.tab.bottom)
-  const setBottomTab = useTabsStore((state) => state.setBottomTab)
-  const tabs = useAppTabsStore(useShallow(bottomTabsSelector))
-
-  return (
-    <CollapsiblePanel
-      id={bottomPanelId}
-      variant={'tabs'}
-      defaultTab={defaultTab}
-      onTabChange={setBottomTab}
-      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>
-  )
-})
-BottomPanel.displayName = 'BottomPanel'

package/dist/src/components/flow/base-edge.tsx

@@ -1,61 +0,0 @@
-import { cn, useThemeStore } from '@motiadev/ui'
-import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from '@xyflow/react'
-import { cva } from 'class-variance-authority'
-import type React from 'react'
-
-const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
-  variants: {
-    color: {
-      default: 'border-[#b3b3b3] bg-[#060014] text-gray-100 font-semibold border-solid rounded-full',
-      conditional: 'bg-amber-300 border-amber-950 text-amber-950 border-solid font-semibold italic rounded-lg',
-    },
-  },
-  defaultVariants: {
-    color: 'default',
-  },
-})
-
-export const BaseEdge: React.FC<EdgeProps> = (props: EdgeProps) => {
-  const theme = useThemeStore((state) => state.theme)
-  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props
-  const label = data?.label as string | undefined
-  const labelVariant = data?.labelVariant as 'default' | 'conditional' | null | undefined
-  const virtualColor = theme === 'dark' ? 'rgb(225, 225, 225)' : 'rgb(85, 85, 85)'
-
-  const [edgePath, labelX, labelY] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
-    borderRadius: 20,
-    offset: 10,
-  })
-
-  return (
-    <>
-      <BaseReactFlowEdge
-        path={edgePath}
-        style={{
-          stroke: data?.variant === 'virtual' ? virtualColor : '#0094FF',
-          strokeWidth: 2,
-          shapeRendering: 'geometricPrecision',
-          fill: 'none',
-          mixBlendMode: 'screen',
-        }}
-        className="edge-animated"
-      />
-      {label && (
-        <EdgeLabelRenderer>
-          <div
-            className={cn(labelVariants({ color: labelVariant }))}
-            style={{ transform: `translateX(-50%) translateY(-50%) translate(${labelX}px, ${labelY}px)` }}
-          >
-            <div className="text-xs font-mono">{label}</div>
-          </div>
-        </EdgeLabelRenderer>
-      )}
-    </>
-  )
-}

package/dist/src/components/flow/flow-loader.tsx

@@ -1,3 +0,0 @@
-export const FlowLoader = () => {
-  return <div className="absolute z-10 inset-0 w-full h-full bg-background" />
-}

package/dist/src/components/flow/flow-page.tsx

@@ -1,75 +0,0 @@
-import { useStreamItem } from '@motiadev/stream-client-react'
-import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@motiadev/ui'
-import { ReactFlowProvider } from '@xyflow/react'
-import { ExternalLink, Workflow } from 'lucide-react'
-import { memo, useMemo } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-import { motiaAnalytics } from '../../lib/motia-analytics'
-import { useFlowStore } from '../../stores/use-flow-store'
-import type { FlowConfigResponse, FlowResponse } from '../../types/flow'
-import { FlowView } from './flow-view'
-
-export const FlowPage = memo(() => {
-  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)
-  const flows = useFlowStore(useShallow((state) => Object.values(state.flows)))
-
-  const streamItemArgs = useMemo(
-    () => ({ streamName: '__motia.flows', groupId: 'default', id: selectedFlowId ?? '' }),
-    [selectedFlowId],
-  )
-  const { data: flow } = useStreamItem<FlowResponse>(streamItemArgs)
-
-  const streamItemArgsConfig = useMemo(
-    () => ({ streamName: '__motia.flowsConfig', groupId: 'default', id: selectedFlowId ?? '' }),
-    [selectedFlowId],
-  )
-  const { data: flowConfig } = useStreamItem<FlowConfigResponse>(streamItemArgsConfig)
-
-  if (flows.length === 0 || flow?.error) {
-    return (
-      <div className="flex w-full h-full bg-background">
-        <Empty>
-          <EmptyHeader>
-            <EmptyMedia variant="icon">
-              <Workflow />
-            </EmptyMedia>
-            {flow?.error ? (
-              <>
-                <EmptyTitle>Error loading flow</EmptyTitle>
-                <EmptyDescription>{flow.error}</EmptyDescription>
-              </>
-            ) : (
-              <>
-                <EmptyTitle>No flows registered</EmptyTitle>
-                <EmptyDescription>
-                  You haven't registered any flows yet. Get started by registering your first flow.
-                </EmptyDescription>
-              </>
-            )}
-          </EmptyHeader>
-          <EmptyContent>
-            <Button variant="link" asChild size="sm">
-              <a
-                href="https://www.motia.dev/docs/development-guide/flows"
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={() => motiaAnalytics.track('flows_docs_link_clicked')}
-              >
-                Learn more <ExternalLink />
-              </a>
-            </Button>
-          </EmptyContent>
-        </Empty>
-      </div>
-    )
-  }
-
-  if (!flow) return null
-
-  return (
-    <ReactFlowProvider>
-      <FlowView flow={flow} flowConfig={flowConfig!} />
-    </ReactFlowProvider>
-  )
-})
-FlowPage.displayName = 'FlowPage'

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

@@ -1,50 +0,0 @@
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui'
-import { ChevronsUpDown, Workflow } from 'lucide-react'
-import { useShallow } from 'zustand/react/shallow'
-import { useFetchFlows } from '../../hooks/use-fetch-flows'
-import { motiaAnalytics } from '../../lib/motia-analytics'
-import { useFlowStore } from '../../stores/use-flow-store'
-
-export const FlowTabMenuItem = () => {
-  useFetchFlows()
-
-  const selectFlowId = useFlowStore((state) => state.selectFlowId)
-  const flows = useFlowStore(useShallow((state) => Object.values(state.flows)))
-  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)
-
-  const handleFlowSelect = (flowId: string) => {
-    selectFlowId(flowId)
-    motiaAnalytics.track('flow_selected', { flow: flowId })
-  }
-
-  return (
-    <div className="flex flex-row justify-center items-center gap-2 cursor-pointer">
-      <Workflow />
-      {flows.length > 0 && selectedFlowId ? selectedFlowId : 'Flows'}
-      {flows.length > 0 && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <div
-              className="flex flex-row justify-center items-center gap-2 cursor-pointer"
-              data-testid="flows-dropdown-trigger"
-            >
-              <ChevronsUpDown className="size-4" />
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="bg-background text-foreground flows-dropdown">
-            {flows.map((item) => (
-              <DropdownMenuItem
-                data-testid={`dropdown-${item}`}
-                key={`dropdown-${item}`}
-                className="cursor-pointer gap-2 flow-link"
-                onClick={() => handleFlowSelect(item)}
-              >
-                {item}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </div>
-  )
-}