@motiadev/workbench 0.0.1

package/src/route-wrapper.tsx

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,109 @@
+/* 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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,44 @@
+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,
+  } = props
+
+  // getSmoothStepPath returns an array: [edgePath, labelX, labelY, etc.]
+  // We just need edgePath here.
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 20, // <— Tweak this for roundness
+    offset: 10,       // <— How far the line extends before curving
+  })
+
+  return (
+    <BaseReactFlowEdge
+      path={edgePath}
+      style={{
+        stroke: 'rgba(100, 100, 100)',
+        strokeWidth: 0.5,
+        shapeRendering: 'geometricPrecision',
+        fill: 'none',
+        mixBlendMode: 'screen',  // or 'screen'
+      }}
+      className="edge-animated"
+    />
+  )
+}

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

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

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

@@ -0,0 +1,72 @@
+import { Background, BackgroundVariant, ReactFlow, Node } 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

@@ -0,0 +1,109 @@
+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; conditional?: boolean }
+
+type FlowStep = {
+  id: string
+  name: string
+  type: 'event' | 'api' | 'noop'
+  description?: string
+  subscribes?: string[]
+  emits: Emit[]
+  action: 'webhook'
+  webhookUrl?: string
+  language?: string
+  nodeComponentPath?: string
+}
+
+export type FlowResponse = {
+  id: string
+  name: string
+  steps: FlowStep[]
+}
+
+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,
+  }
+
+  for (const step of flow.steps) {
+    if (step.nodeComponentPath) {
+      const module = await import(/* @vite-ignore */ step.nodeComponentPath)
+      nodeTypes[step.nodeComponentPath] = module.default
+    }
+  }
+
+  // we need to check all subscribes and emits to connect the nodes using edges
+  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,
+  }))
+
+  const edges: Edge<EdgeData>[] = []
+
+  // For each node that emits events
+  flow.steps.forEach((sourceNode) => {
+    const emits = sourceNode.emits || []
+
+    // Check all other nodes that subscribe to those events
+    flow.steps.forEach((targetNode) => {
+      const subscribes = targetNode.subscribes || []
+
+      // For each matching emit->subscribe, create an edge
+      emits.forEach((emit) => {
+        const emitType = typeof emit === 'string' ? emit : emit.type
+
+        if (subscribes.includes(emitType)) {
+          const label = typeof emit !== 'string' ? emit.label : undefined
+          const variant = typeof emit !== 'string' && emit.conditional ? 'conditional' : 'default'
+          const data: EdgeData = { variant, label }
+
+          edges.push({
+            id: `${sourceNode.id}-${targetNode.id}`,
+            type: 'base',
+            source: sourceNode.id,
+            target: targetNode.id,
+            label,
+            data,
+          })
+        }
+      })
+    })
+  })
+
+  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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,59 @@
+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 renderSwatch = (bgColor: string) => (
+    <div className="relative group">
+      {/* Border gradient container */}
+      <div className="absolute -inset-[1px] rounded bg-gradient-to-r from-white/20 to-white/10" />
+
+      {/* Main swatch */}
+      <div className={`relative ${bgColor} w-8 h-8 rounded border border-white/10`} />
+
+      {/* Stacked effect */}
+      <div className="absolute inset-0 -z-10 translate-y-0.5 translate-x-0.5 bg-black/20 rounded border border-white/5" />
+    </div>
+  )
+
+  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>
+  )
+}

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,6 @@
+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

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