@motiadev/workbench 0.8.2-beta.140-628177 → 0.8.2-beta.140-111855

package/motia-plugin/types.ts

@@ -0,0 +1,198 @@
+/**
+ * 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/motia-plugin/utils.ts

@@ -0,0 +1,70 @@
+import path from 'path'
+
+/**
+ * Normalizes a file path by replacing backslashes with forward slashes.
+ * This is useful for consistent path comparisons across different operating systems.
+ *
+ * @param filePath - The file path to normalize
+ * @returns The normalized file path with forward slashes
+ *
+ * @example
+ * ```ts
+ * normalizePath('C:\\Users\\file.ts') // Returns: 'C:/Users/file.ts'
+ * normalizePath('/Users/file.ts')     // Returns: '/Users/file.ts'
+ * ```
+ */
+export function normalizePath(filePath: string): string {
+  return filePath.replace(/\\/g, '/')
+}
+
+/**
+ * Checks if a package name represents a local plugin (starts with ~/).
+ *
+ * @param packageName - The package name to check
+ * @returns True if the package is a local plugin
+ *
+ * @example
+ * ```ts
+ * isLocalPlugin('~/plugins/my-plugin')     // Returns: true
+ * isLocalPlugin('@my-org/my-plugin')       // Returns: false
+ * isLocalPlugin('my-plugin')               // Returns: false
+ * ```
+ */
+export function isLocalPlugin(packageName: string): boolean {
+  return packageName.startsWith('~/')
+}
+
+/**
+ * Resolves a local plugin path to an absolute path.
+ * Strips the ~/ prefix and joins with the current working directory.
+ *
+ * @param packageName - The local plugin package name (must start with ~/)
+ * @returns The absolute path to the local plugin
+ *
+ * @example
+ * ```ts
+ * // If cwd is /Users/project
+ * resolveLocalPath('~/plugins/my-plugin')
+ * // Returns: '/Users/project/plugins/my-plugin'
+ * ```
+ */
+export function resolveLocalPath(packageName: string): string {
+  return path.join(process.cwd(), packageName.replace('~/', ''))
+}
+
+/**
+ * Resolves an npm package path to the node_modules directory.
+ *
+ * @param packageName - The npm package name
+ * @returns The absolute path to the package in node_modules
+ *
+ * @example
+ * ```ts
+ * // If cwd is /Users/project
+ * resolveNpmPath('@my-org/my-plugin')
+ * // Returns: '/Users/project/node_modules/@my-org/my-plugin'
+ * ```
+ */
+export function resolveNpmPath(packageName: string): string {
+  return path.join(process.cwd(), 'node_modules', packageName)
+}

package/motia-plugin/validator.ts

@@ -0,0 +1,197 @@
+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()).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.errors.forEach((err) => {
+        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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@motiadev/workbench",
   "description": "A web-based interface for building and managing Motia workflows.",
-  "version": "0.8.2-beta.140-628177",
+  "version": "0.8.2-beta.140-111855",
   "main": "dist/index.js",
   "dependencies": {
     "@monaco-editor/react": "^4.6.1",
@@ -41,12 +41,11 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
+    "zod": "^3.24.1",
     "zustand": "^5.0.6",
-    "@motiadev/plugin-logs": "0.8.2-beta.140-628177",
-    "@motiadev/plugin-endpoint": "0.8.2-beta.140-628177",
-    "@motiadev/core": "0.8.2-beta.140-628177",
-    "@motiadev/stream-client-react": "0.8.2-beta.140-628177",
-    "@motiadev/ui": "0.8.2-beta.140-628177"
+    "@motiadev/core": "0.8.2-beta.140-111855",
+    "@motiadev/ui": "0.8.2-beta.140-111855",
+    "@motiadev/stream-client-react": "0.8.2-beta.140-111855"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -66,9 +65,10 @@
     "ts-jest": "^29.3.4"
   },
   "scripts": {
-    "lint": "pnpm run lint:ts && pnpm run lint:tsx",
-    "lint:ts": "eslint",
-    "lint:tsx": "eslint --config ../../eslint.config.tsx.js",
+    "lint": "biome check .",
+    "lint:plugins": "pnpm run lint:plugins:ts && pnpm run lint:plugins:tsx",
+    "lint:plugins:ts": "eslint",
+    "lint:plugins:tsx": "eslint --config ../../eslint.config.tsx.js",
     "build": "rm -rf dist && tsc --build && sh post-build.sh",
     "test": "jest",
     "test:watch": "jest --watch"

package/postcss.config.mjs

@@ -1,6 +1,6 @@
-import path from 'path'
 import { dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import path from 'path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 

package/dist/src/components/observability/events/code/function-call.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-type Props = {
-    topLevelClassName?: string;
-    objectName?: string;
-    functionName: string;
-    args: Array<string | object | false | undefined>;
-    callsQuantity?: number;
-};
-export declare const Argument: React.FC<{
-    arg: string | object | false;
-}>;
-export declare const FunctionCall: React.FC<Props>;
-export {};

package/dist/src/components/observability/events/code/function-call.js

@@ -1,16 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export const Argument = ({ arg }) => {
-    if (typeof arg === 'string') {
-        return _jsxs("span", { className: "font-mono text-blue-500", children: ["'", arg, "'"] });
-    }
-    else if (arg === false) {
-        return _jsx("span", { className: "font-mono text-blue-100 font-bold bg-blue-500/50 px-2 rounded-md", children: "value" });
-    }
-    const entries = Object.entries(arg);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-green-500", children: '{ ' }), entries.map(([key, value], index) => (_jsxs("span", { children: [_jsx("span", { className: "font-mono text-green-500", children: key }), _jsx("span", { className: "font-mono text-muted-foreground", children: ":" }), " ", _jsx(Argument, { arg: value }), index < entries.length - 1 && _jsx(_Fragment, { children: ", " })] }, key))), _jsx("span", { className: "font-mono text-green-500", children: ' }' })] }));
-};
-export const FunctionCall = ({ topLevelClassName, objectName, functionName, args, callsQuantity }) => {
-    const hasCalls = callsQuantity && callsQuantity > 1;
-    const filteredArgs = args.filter((arg) => arg !== undefined);
-    return (_jsxs("div", { children: [topLevelClassName && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-pink-500", children: topLevelClassName }), "."] })), objectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-pink-500", children: objectName }), "."] })), _jsx("span", { className: "font-mono text-pink-500", children: functionName }), _jsx("span", { className: "font-mono text-emerald-500", children: "(" }), filteredArgs.map((arg, index) => (_jsxs("span", { children: [_jsx(Argument, { arg: arg }), index < filteredArgs.length - 1 && _jsx(_Fragment, { children: ", " })] }, index))), _jsx("span", { className: "font-mono text-emerald-500", children: ")" }), hasCalls && _jsxs("span", { className: "font-mono text-muted-foreground", children: [" x", callsQuantity] })] }));
-};

package/dist/src/components/observability/events/event-icon.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TraceEvent as TraceEventType } from '@/types/observability';
-type Props = {
-    event: TraceEventType;
-};
-export declare const EventIcon: React.FC<Props>;
-export {};

package/dist/src/components/observability/events/event-icon.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MessageCircle, Package, Radio, ScrollText } from 'lucide-react';
-export const EventIcon = ({ event }) => {
-    if (event.type === 'log') {
-        return _jsx(ScrollText, { className: "w-4 h-4 text-muted-foreground" });
-    }
-    else if (event.type === 'emit') {
-        return _jsx(MessageCircle, { className: "w-4 h-4 text-muted-foreground" });
-    }
-    else if (event.type === 'state') {
-        return _jsx(Package, { className: "w-4 h-4 text-muted-foreground" });
-    }
-    else if (event.type === 'stream') {
-        return _jsx(Radio, { className: "w-4 h-4 text-muted-foreground" });
-    }
-};

package/dist/src/components/observability/events/trace-emit-event.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { EmitEvent } from '@/types/observability';
-export declare const TraceEmitEvent: React.FC<{
-    event: EmitEvent;
-}>;

package/dist/src/components/observability/events/trace-emit-event.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FunctionCall } from './code/function-call';
-export const TraceEmitEvent = ({ event }) => {
-    return _jsx(FunctionCall, { functionName: "emit", args: [{ topic: event.topic, data: false }] });
-};

package/dist/src/components/observability/events/trace-event.d.ts

@@ -1,5 +0,0 @@
-import { TraceEvent as TraceEventType } from '@/types/observability';
-import React from 'react';
-export declare const TraceEvent: React.FC<{
-    event: TraceEventType;
-}>;

package/dist/src/components/observability/events/trace-event.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { TraceEmitEvent } from './trace-emit-event';
-import { TraceLogEvent } from './trace-log-event';
-import { TraceStateEvent } from './trace-state-event';
-import { TraceStreamEvent } from './trace-stream-event';
-export const TraceEvent = memo(({ event }) => {
-    if (event.type === 'log') {
-        return _jsx(TraceLogEvent, { event: event });
-    }
-    else if (event.type === 'emit') {
-        return _jsx(TraceEmitEvent, { event: event });
-    }
-    else if (event.type === 'state') {
-        return _jsx(TraceStateEvent, { event: event });
-    }
-    else if (event.type === 'stream') {
-        return _jsx(TraceStreamEvent, { event: event });
-    }
-});

package/dist/src/components/observability/events/trace-log-event.d.ts

@@ -1,5 +0,0 @@
-import { LogEntry } from '@/types/observability';
-import React from 'react';
-export declare const TraceLogEvent: React.FC<{
-    event: LogEntry;
-}>;

package/dist/src/components/observability/events/trace-log-event.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LevelDot } from '@motiadev/ui';
-export const TraceLogEvent = ({ event }) => {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LevelDot, { level: event.level }), " ", event.message] }));
-};

package/dist/src/components/observability/events/trace-state-event.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { StateEvent } from '@/types/observability';
-export declare const TraceStateEvent: React.FC<{
-    event: StateEvent;
-}>;

package/dist/src/components/observability/events/trace-state-event.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FunctionCall } from './code/function-call';
-export const TraceStateEvent = ({ event }) => {
-    return (_jsx(FunctionCall, { objectName: "state", functionName: event.operation, args: [event.data.traceId, event.data.key, event.data.value ? false : undefined] }));
-};

package/dist/src/components/observability/events/trace-stream-event.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { StreamEvent } from '@/types/observability';
-export declare const TraceStreamEvent: React.FC<{
-    event: StreamEvent;
-}>;

package/dist/src/components/observability/events/trace-stream-event.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FunctionCall } from './code/function-call';
-export const TraceStreamEvent = ({ event }) => {
-    return (_jsx(FunctionCall, { topLevelClassName: "streams", objectName: event.streamName, functionName: event.operation, args: [event.data.groupId, event.data.id, event.data.data ? false : undefined], callsQuantity: event.calls }));
-};

package/dist/src/components/observability/hooks/use-get-endtime.d.ts

@@ -1,2 +0,0 @@
-import { TraceGroup } from '@/types/observability';
-export declare const useGetEndTime: (group: TraceGroup | undefined | null) => number;

package/dist/src/components/observability/hooks/use-get-endtime.js

@@ -1,15 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useGetEndTime = (group) => {
-    const groupEndTime = group?.endTime;
-    const [endTime, setEndTime] = useState(groupEndTime || Date.now());
-    useEffect(() => {
-        if (groupEndTime) {
-            setEndTime(groupEndTime);
-        }
-        else {
-            const interval = setInterval(() => setEndTime(Date.now()), 50);
-            return () => clearInterval(interval);
-        }
-    }, [groupEndTime]);
-    return endTime;
-};