@motiadev/workbench 0.0.6 → 0.0.7-build.20250529212805

package/src/route-wrapper.tsx

@@ -1,9 +0,0 @@
-import { AppSidebar } from './components/app-sidebar'
-import { SidebarProvider } from './components/ui/sidebar'
-
-export const RouteWrapper = ({ children }: { children: React.ReactNode }) => (
-  <SidebarProvider>
-    <AppSidebar />
-    {children}
-  </SidebarProvider>
-)

package/src/routeTree.gen.ts

@@ -1,109 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-// Import Routes
-
-import { Route as rootRoute } from './routes/__root'
-import { Route as IndexImport } from './routes/index'
-import { Route as FlowIdImport } from './routes/flow/$id'
-
-// Create/Update Routes
-
-const IndexRoute = IndexImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRoute,
-} as any)
-
-const FlowIdRoute = FlowIdImport.update({
-  id: '/flow/$id',
-  path: '/flow/$id',
-  getParentRoute: () => rootRoute,
-} as any)
-
-// Populate the FileRoutesByPath interface
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexImport
-      parentRoute: typeof rootRoute
-    }
-    '/flow/$id': {
-      id: '/flow/$id'
-      path: '/flow/$id'
-      fullPath: '/flow/$id'
-      preLoaderRoute: typeof FlowIdImport
-      parentRoute: typeof rootRoute
-    }
-  }
-}
-
-// Create and export the route tree
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRoutesById {
-  __root__: typeof rootRoute
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/flow/$id'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/flow/$id'
-  id: '__root__' | '/' | '/flow/$id'
-  fileRoutesById: FileRoutesById
-}
-
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  FlowIdRoute: typeof FlowIdRoute
-}
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  FlowIdRoute: FlowIdRoute,
-}
-
-export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/",
-        "/flow/$id"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    },
-    "/flow/$id": {
-      "filePath": "flow/$id.tsx"
-    }
-  }
-}
-ROUTE_MANIFEST_END */

package/src/routes/__root.tsx

@@ -1,26 +0,0 @@
-import { RouteWrapper } from '@/route-wrapper'
-import { createRootRoute, Outlet } from '@tanstack/react-router'
-import React, { Suspense } from 'react'
-
-const TanStackRouterDevtools =
-  process.env.NODE_ENV === 'production'
-    ? () => null // Render nothing in production
-    : React.lazy(() =>
-        // Lazy load in development
-        import('@tanstack/router-devtools').then((res) => ({
-          default: res.TanStackRouterDevtools,
-          // For Embedded Mode
-          // default: res.TanStackRouterDevtoolsPanel
-        })),
-      )
-
-const RouteComponent = () => (
-  <RouteWrapper>
-    <Outlet />
-    <Suspense>
-      <TanStackRouterDevtools />
-    </Suspense>
-  </RouteWrapper>
-)
-
-export const Route = createRootRoute({ component: RouteComponent })

package/src/routes/flow/$id.tsx

@@ -1,21 +0,0 @@
-import { FlowView } from '@/views/flow/flow-view'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/flow/$id')({
-  component: Flow,
-  loader: async ({ params }) => {
-    return fetch(`/flows/${params.id}`)
-      .then((res) => res.json())
-      .then((flow) => ({ flow }))
-  },
-})
-
-function Flow() {
-  const { flow } = Route.useLoaderData()
-
-  return (
-    <div className="w-screen h-screen">
-      <FlowView flow={flow} />
-    </div>
-  )
-}

package/src/routes/index.tsx

@@ -1,13 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/')({
-  component: Index,
-})
-
-function Index() {
-  return (
-    <div className="flex items-center justify-center w-full h-screen">
-      <p className="text-gray-500">Select a flow</p>
-    </div>
-  )
-}

package/src/stores/use-logs.ts

@@ -1,22 +0,0 @@
-import { create } from 'zustand'
-
-export type Log = {
-  level: string
-  time: number
-  msg: string
-  traceId: string
-  flows: string[]
-  [key: string]: any
-}
-
-export type LogsState = {
-  logs: Log[]
-  addLog: (log: Log) => void
-  resetLogs: () => void
-}
-
-export const useLogs = create<LogsState>()((set) => ({
-  logs: [],
-  addLog: (log) => set((state) => ({ ...state, logs: [...state.logs, log] })),
-  resetLogs: () => set({ logs: [] }),
-}))

package/src/views/flow/arrow-head.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-type Props = {
-  color: string
-  id: string
-}
-
-export const ArrowHead: React.FC<Props> = (props) => (
-  <marker id={props.id} viewBox="-5 -5 10 10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10">
-    <line x1={0} y1={0} x2={2} y2={-2} stroke={props.color} strokeWidth="1" strokeOpacity="1" strokeLinecap="round" />
-    <line x1={-2} y1={-2} x2={0} y2={0} stroke={props.color} strokeWidth="1" strokeOpacity="1" strokeLinecap="round" />
-  </marker>
-)

package/src/views/flow/base-edge.tsx

@@ -1,31 +0,0 @@
-import { BaseEdge as BaseReactFlowEdge, EdgeProps, getSmoothStepPath } from '@xyflow/react'
-import React from 'react'
-
-export const BaseEdge: React.FC<EdgeProps> = (props) => {
-  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props
-
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
-    borderRadius: 20,
-    offset: 10,
-  })
-
-  return (
-    <BaseReactFlowEdge
-      path={edgePath}
-      style={{
-        stroke: data?.variant === 'virtual' ? 'rgb(147, 169, 197)' : 'rgb(133, 176, 132)',
-        strokeWidth: 0.5,
-        shapeRendering: 'geometricPrecision',
-        fill: 'none',
-        mixBlendMode: 'screen',
-      }}
-      className="edge-animated"
-    />
-  )
-}

package/src/views/flow/flow-loader.tsx

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

package/src/views/flow/flow-view.tsx

@@ -1,72 +0,0 @@
-import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import { BaseEdge } from './base-edge'
-import { ArrowHead } from './arrow-head'
-import { useGetFlowState, FlowResponse } from './hooks/use-get-flow-state'
-import { useCallback, useEffect, useState } from 'react'
-import { NodeOrganizer } from './node-organizer'
-import { FlowLoader } from './flow-loader'
-import { useLogListener } from '@/hooks/use-log-listener'
-import { LogConsole } from '@/components/log-console'
-import { Legend } from './legend'
-
-const edgeTypes = {
-  base: BaseEdge,
-}
-
-type Props = {
-  flow: FlowResponse
-}
-
-export const FlowView: React.FC<Props> = ({ flow }) => {
-  const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow)
-  const [initialized, setInitialized] = useState(false)
-  const [hoveredType, setHoveredType] = useState<string | null>(null)
-
-  useLogListener()
-
-  useEffect(() => setInitialized(false), [flow])
-  const onInitialized = useCallback(() => {
-    setTimeout(() => setInitialized(true), 10)
-  }, [])
-
-  const highlightClass = (nodeType?: string) => {
-    if (!hoveredType) return ''
-    return nodeType === hoveredType
-      ? 'shadow-[0_0_15px_rgba(255,255,255,0.15)] border border-white/30 scale-[1.02] transition-all duration-300'
-      : 'opacity-30 transition-all duration-300'
-  }
-
-  const nodesWithHighlights = nodes.map((node) => ({
-    ...node,
-    className: highlightClass(node.data.type), // Access type from `data.type`
-  }))
-
-  if (!nodeTypes) {
-    return null
-  }
-
-  return (
-    <div className="w-full h-full relative bg-black">
-      {!initialized && <FlowLoader />}
-      <Legend onHover={setHoveredType} />
-      <ReactFlow
-        nodes={nodesWithHighlights}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-      >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#444" />
-        <NodeOrganizer onInitialized={onInitialized} />
-        <svg>
-          <defs>
-            <ArrowHead color="#B3B3B3" id="arrowhead" />
-          </defs>
-        </svg>
-      </ReactFlow>
-      <LogConsole />
-    </div>
-  )
-}

package/src/views/flow/hooks/use-get-flow-state.tsx

@@ -1,93 +0,0 @@
-import { Edge, Node, useEdgesState, useNodesState } from '@xyflow/react'
-import { useEffect, useState } from 'react'
-import type { EdgeData, NodeData } from '../nodes/nodes.types'
-import { ApiFlowNode } from '../nodes/api-flow-node'
-import { NoopFlowNode } from '../nodes/noop-flow-node'
-import { EventFlowNode } from '../nodes/event-flow-node'
-
-type Emit = string | { type: string; label?: string }
-
-type FlowStep = {
-  id: string
-  name: string
-  type: 'event' | 'api' | 'noop'
-  description?: string
-  subscribes?: string[]
-  emits: Emit[]
-  virtualEmits?: Emit[]
-  action?: 'webhook'
-  webhookUrl?: string
-  language?: string
-  nodeComponentPath?: string
-}
-
-export type FlowResponse = {
-  id: string
-  name: string
-  steps: FlowStep[]
-  edges: FlowEdge[]
-}
-
-type FlowEdge = {
-  id: string
-  source: string
-  target: string
-  data: EdgeData
-}
-
-type FlowState = {
-  nodes: Node<NodeData>[]
-  edges: Edge<EdgeData>[]
-  nodeTypes: Record<string, React.ComponentType<any>>
-}
-
-async function importFlow(flow: FlowResponse): Promise<FlowState> {
-  const nodeTypes: Record<string, React.ComponentType<any>> = {
-    event: EventFlowNode,
-    api: ApiFlowNode,
-    noop: NoopFlowNode,
-  }
-
-  // Load custom node components if they exist
-  for (const step of flow.steps) {
-    if (step.nodeComponentPath) {
-      const module = await import(/* @vite-ignore */ step.nodeComponentPath)
-      nodeTypes[step.nodeComponentPath] = module.default
-    }
-  }
-
-  // Create nodes from steps
-  const nodes: Node<NodeData>[] = flow.steps.map((step) => ({
-    id: step.id,
-    type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
-    position: { x: 0, y: 0 },
-    data: step,
-    language: step.language,
-  }))
-
-  // Use the edges provided by the API, adding required ReactFlow properties
-  const edges: Edge<EdgeData>[] = flow.edges.map((edge) => ({
-    ...edge,
-    type: 'base',
-  }))
-
-  return { nodes, edges, nodeTypes }
-}
-
-export const useGetFlowState = (flow: FlowResponse) => {
-  const [nodeTypes, setNodeTypes] = useState<Record<string, React.ComponentType<any>>>()
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([])
-
-  useEffect(() => {
-    if (!flow) return
-
-    importFlow(flow).then(({ nodes, edges, nodeTypes }) => {
-      setNodes(nodes)
-      setEdges(edges)
-      setNodeTypes(nodeTypes)
-    })
-  }, [flow])
-
-  return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes }
-}

package/src/views/flow/hooks/use-organize-nodes.ts

@@ -1,60 +0,0 @@
-import { Edge, Node } from '@xyflow/react'
-import dagre from 'dagre'
-import { useEffect, useRef } from 'react'
-import { EventNodeData, EdgeData, ApiNodeData } from '../nodes/nodes.types'
-
-const organizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-): Node<EventNodeData | ApiNodeData>[] => {
-  const dagreGraph = new dagre.graphlib.Graph({ compound: true })
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-  // Top-to-bottom layout
-  dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' })
-
-  nodes.forEach((node) => {
-    dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height })
-  })
-
-  edges.forEach((edge) => {
-    if (typeof edge.label === 'string') {
-      dagreGraph.setEdge(edge.source, edge.target, {
-        label: edge.label ?? '',
-        width: edge.label.length * 40, // Add width for the label
-        height: 30, // Add height for the label
-        labelpos: 'c', // Position label in center
-      })
-    } else {
-      dagreGraph.setEdge(edge.source, edge.target)
-    }
-  })
-
-  dagre.layout(dagreGraph)
-
-  return nodes.map((node) => {
-    const { x, y } = dagreGraph.node(node.id)
-    const position = {
-      x: x - (node.measured?.width ?? 0) / 2,
-      y: y - (node.measured?.height ?? 0) / 2,
-    }
-
-    return { ...node, position }
-  })
-}
-
-export const useOrganizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-  setNodes: (nodes: Node<EventNodeData | ApiNodeData>[]) => void,
-) => {
-  const organizedRef = useRef<boolean>(false)
-
-  useEffect(() => {
-    if (!nodes.length || !edges.length || !nodes[0].measured || organizedRef.current) return
-
-    const layoutedNodes = organizeNodes(nodes, edges)
-    setNodes(layoutedNodes)
-    organizedRef.current = true
-  }, [nodes, edges, setNodes])
-}

package/src/views/flow/legend.tsx

@@ -1,96 +0,0 @@
-export const Legend = ({ onHover }: { onHover: (type: string | null) => void }) => {
-  const legendItems = [
-    {
-      label: 'Event (Core)',
-      type: 'event',
-      bgColor: 'bg-green-950/40',
-      description: 'Core logic components that process events.',
-    },
-    {
-      label: 'API',
-      type: 'api',
-      bgColor: 'bg-blue-950/40',
-      description: 'HTTP endpoints that trigger flows.',
-    },
-    {
-      label: 'Noop (Non-Operation)',
-      type: 'noop',
-      bgColor: 'bg-zinc-950/40',
-      description: 'Placeholder nodes for external processes.',
-    },
-  ]
-
-  const edgeLegendItems = [
-    {
-      label: 'Event Edge',
-      color: 'rgb(133, 176, 132)', // Solid green line
-      description: 'Represents an event emitted and subscribed by steps.',
-      dashed: true,
-    },
-    {
-      label: 'Virtual Edge',
-      color: 'rgb(147, 169, 197)', // Dotted blue line
-      description: 'Represents virtual connections.',
-      dashed: true,
-    },
-  ]
-
-  const renderSwatch = (bgColor: string) => (
-    <div className="relative group">
-      <div className="absolute -inset-[1px] rounded bg-gradient-to-r from-white/20 to-white/10" />
-      <div className={`relative ${bgColor} w-8 h-8 rounded border border-white/10`} />
-      <div className="absolute inset-0 -z-10 translate-y-0.5 translate-x-0.5 bg-black/20 rounded border border-white/5" />
-    </div>
-  )
-
-  const renderEdgeSwatch = (color: string, dashed: boolean) => (
-    <svg width="48" height="10" viewBox="0 0 48 10" xmlns="http://www.w3.org/2000/svg">
-      <line
-        x1="0"
-        y1="5"
-        x2="48"
-        y2="5"
-        stroke={color}
-        strokeWidth=".8"
-        strokeDasharray={dashed ? '4 3' : 'none'} // Match the dashed or solid style
-        strokeLinecap="round" // Rounded edges
-      />
-    </svg>
-  )
-
-  return (
-    <div className="absolute right-4 top-4 font-mono rounded-lg border border-white/20 p-4 z-10 shadow-xl">
-      <div className="text-sm text-white mb-3 font-semibold">Flow Legend</div>
-      <div className="flex flex-col gap-3">
-        {legendItems.map((item) => (
-          <div
-            key={item.type}
-            onMouseEnter={() => onHover(item.type)}
-            onMouseLeave={() => onHover(null)}
-            className="group cursor-pointer transition-all hover:bg-white/5 rounded p-1 -mx-1"
-          >
-            <div className="flex items-start gap-3">
-              {renderSwatch(item.bgColor)}
-              <div className="flex-1">
-                <div className="text-white text-xs font-medium">{item.label}</div>
-                <div className="text-white/60 text-xs mt-0.5">{item.description}</div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="text-sm text-white mt-4 mb-3 font-semibold">Edge Legend</div>
-      <div className="flex flex-col gap-3">
-        {edgeLegendItems.map((item) => (
-          <div key={item.label} className="flex items-start gap-3">
-            {renderEdgeSwatch(item.color, item.dashed)}
-            <div className="flex-1">
-              <div className="text-white text-xs font-medium">{item.label}</div>
-              <div className="text-white/60 text-xs mt-0.5">{item.description}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/views/flow/node-organizer.tsx

@@ -1,70 +0,0 @@
-import { Edge, Node, useNodesInitialized, useReactFlow } from '@xyflow/react'
-import dagre from 'dagre'
-import { useEffect } from 'react'
-import { EventNodeData, EdgeData, ApiNodeData } from './nodes/nodes.types'
-
-const organizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-): Node<EventNodeData | ApiNodeData>[] => {
-  const dagreGraph = new dagre.graphlib.Graph({ compound: true })
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-  // Top-to-bottom layout
-  dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' })
-
-  nodes.forEach((node) => {
-    dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height })
-  })
-
-  edges.forEach((edge) => {
-    if (typeof edge.label === 'string') {
-      dagreGraph.setEdge(edge.source, edge.target, {
-        label: edge.label ?? '',
-        width: edge.label.length * 40, // Add width for the label
-        height: 30, // Add height for the label
-        labelpos: 'c', // Position label in center
-      })
-    } else {
-      dagreGraph.setEdge(edge.source, edge.target)
-    }
-  })
-
-  dagre.layout(dagreGraph)
-
-  return nodes.map((node) => {
-    const { x, y } = dagreGraph.node(node.id)
-    const position = {
-      x: x - (node.measured?.width ?? 0) / 2,
-      y: y - (node.measured?.height ?? 0) / 2,
-    }
-
-    return { ...node, position }
-  })
-}
-
-type Props = {
-  onInitialized: () => void
-}
-
-export const NodeOrganizer: React.FC<Props> = ({ onInitialized }) => {
-  const { setNodes, getNodes, getEdges, fitView } = useReactFlow()
-  const nodesInitialized = useNodesInitialized()
-
-  useEffect(() => {
-    if (nodesInitialized) {
-      const nodes = getNodes() as Node<EventNodeData | ApiNodeData>[]
-      const edges = getEdges() as Edge<EdgeData>[]
-      const organizedNodes = organizeNodes(nodes, edges)
-
-      setNodes(organizedNodes)
-      onInitialized()
-
-      setTimeout(async () => {
-        await fitView()
-      }, 1)
-    }
-  }, [nodesInitialized, onInitialized])
-
-  return null
-}

package/src/views/flow/nodes/api-flow-node.tsx

@@ -1,6 +0,0 @@
-import { ApiNode } from '../../../publicComponents/api-node'
-import { ApiNodeData } from './nodes.types'
-
-export const ApiFlowNode = ({ data }: { data: ApiNodeData }) => {
-  return <ApiNode data={data} />
-}

package/src/views/flow/nodes/event-flow-node.tsx

@@ -1,6 +0,0 @@
-import { EventNode } from '../../../publicComponents/event-node'
-import { EventNodeProps } from '../../../publicComponents/node-props'
-
-export const EventFlowNode = ({ data }: EventNodeProps) => {
-  return <EventNode className="relative" data={data}></EventNode>
-}