@process.co/element-dev-server 0.0.1-test-3

package/README.md

@@ -0,0 +1,108 @@
+# Process.co Element Dev Server
+
+A CLI tool for developing Process.co elements with an interactive development server.
+
+## Installation
+
+```bash
+pnpm install
+pnpm build
+```
+
+## Usage
+
+The CLI accepts an optional path argument to specify which directory to scan for Process.co element modules:
+
+```bash
+# Use current directory
+process-element
+
+# Use a specific path
+process-element /path/to/your/elements
+
+# Use relative path
+process-element ../my-elements
+```
+
+## Features
+
+- **Interactive UI**: Uses Ink to provide a beautiful terminal interface
+- **Path Validation**: Automatically validates that the provided path exists and is a directory
+- **Element Discovery**: Uses the @process.co/elements library to discover and load element modules
+- **Dev Server Launch**: Launches a Vite development server for the selected element
+- **Smart Directory Detection**: Automatically finds the appropriate dev directory for each element
+
+## How It Works
+
+The CLI uses the `@process.co/elements` library to:
+
+1. **Scan for Elements**: Looks for `.mjs` or `.mts` files in the specified directory
+2. **Load Modules**: Imports each element module using the elements library
+3. **Display Information**: Shows element names and types in an interactive list
+4. **Launch Dev Server**: Starts a Vite server in the appropriate directory
+
+## Development
+
+```bash
+# Build the project
+pnpm build
+
+# Run in development mode
+pnpm cli
+
+# Watch for changes
+pnpm dev
+```
+
+## Requirements
+
+- Node.js 18+
+- A directory containing Process.co element modules (`.mjs` or `.mts` files)
+- Each element should have proper exports with `name` and `type` properties
+- Elements should have a `dev/` directory with a `vite.config.js` file (optional)
+
+## Element Module Format
+
+Elements should be exported as modules with the following structure:
+
+```javascript
+// example-element.mjs
+export default {
+  name: 'Example Element',
+  type: 'app', // or 'action', 'signal', 'credential'
+  description: 'An example element',
+  // ... other properties
+};
+```
+
+## Error Handling
+
+The CLI provides clear error messages for common issues:
+
+- **Path doesn't exist**: Shows the full path that was not found
+- **Path is not a directory**: Validates that the path points to a directory
+- **No elements found**: Provides guidance when no valid element modules are found
+- **Module loading errors**: Shows specific errors when element modules fail to load
+
+## Examples
+
+```bash
+# From a project root with element modules
+process-element
+
+# From anywhere, pointing to a specific project
+process-element ~/projects/my-process-app
+
+# Using relative paths
+process-element ./elements
+```
+
+## Element Discovery
+
+The CLI will automatically discover elements that:
+
+- Are `.mjs` or `.mts` files in the specified directory
+- Have proper exports with `name` and `type` properties
+- Can be successfully imported by the `@process.co/elements` library
+
+Elements are displayed with their name and type for easy identification. 

package/dist/chunk-NT4V5NUJ.js

@@ -0,0 +1 @@
+import{useState as y,useEffect as F,useRef as ie}from"react";import{Box as m,Text as e}from"ink";import W from"ink-select-input";import E from"fs";import u from"path";import{createServer as se}from"vite";import{fileURLToPath as le}from"url";import v from"@process.co/element-dev-support/dist/index.js";import{Fragment as ce,jsx as o,jsxs as r}from"react/jsx-runtime";var he=({rootDir:g})=>{let[P,V]=y([]),[T,z]=y(null),[k,q]=y([]),[_,Q]=y(null),[Y,Z]=y([]),[ee,b]=y(null),[K,te]=y(null),[x,c]=y("loading"),[R,H]=y("elements"),[C,G]=y([]),w=ie(G);w.current=G;let[U,ne]=y(null),[ue,re]=y(null),oe=async(a,t,i)=>{try{let l=E.statSync(a).isDirectory()?a:u.dirname(a),s=i==="action"?"actions":"sources",n=u.join(l,s);if(!E.existsSync(n))return null;let f=(await v.importFolderModulesOfType(s,i,l,["common"])).find(p=>p.key===t);if(!f)return null;let j=E.readdirSync(n).filter(p=>{let h=u.join(n,p);return E.statSync(h).isDirectory()}),S=null,B=null;for(let p of j){let h=u.join(n,p),J=[`${p}.mjs`,`${p}.mts`,`${p}.js`,`${p}.ts`,"index.mjs","index.mts","index.js","index.ts"];for(let L of J){let d=u.join(h,L);if(E.existsSync(d))try{let{module:N}=await v.importFromPath(d);if(N.key===t){S=d,B=h;break}}catch{continue}}if(S)break}if(!S)return null;let A=u.join(l,"ui");return f&&f.ui&&(A=u.join(l,"ui",f.ui)),{modulePath:S,uiDir:A}}catch{return null}};F(()=>{(async()=>{try{try{let s=await v.autoDetectElement(g);if(s!=="pipedream"){let n=await v.loadElementPointers(g,s);V([{label:`${n.name} (${n.elementType})`,value:n.name,info:n,path:g}]),c("ready");return}}catch{}let t=E.readdirSync(g,{withFileTypes:!0}),i=[];for(let s of t){let n=u.join(g,s.name);if(s.isDirectory())try{E.readdirSync(n).some(f=>f.endsWith(".mjs")||f.endsWith(".mts")||f.endsWith(".js")||f.endsWith(".ts")||f.endsWith(".tsx")||f.endsWith(".jsx"))&&i.push(n)}catch{}}if(i.length===0){c("no-elements");return}let l=[];for(let s of i)try{let n=await v.loadElementPointers(s,"auto");l.push({label:`${n.name} (${n.elementType})`,value:n.name,info:n,path:s})}catch{}if(l.length>0){V(l),c("ready");return}else c("no-elements")}catch{c("error")}})()},[g]),F(()=>{U&&x==="launching"&&c("dev-server-running")},[U,x]),F(()=>{},[x]);let M=async(a,t,i)=>{if(!a)return;let l=await oe(a.path,t.value,t.type);if(!l){c("error");return}let s=E.statSync(a.path).isDirectory()?a.path:u.dirname(a.path),n=u.join(s,"dev"),D=E.existsSync(n)?n:s,f=le(import.meta.url),j=u.dirname(f),S=u.resolve(j,"../.process/vite.config.cjs"),B=u.join(D,"vite.config.js"),A=u.join(D,"vite.config.ts"),p=S;E.existsSync(B)?p=B:E.existsSync(A)&&(p=A);let h=await v.loadElementPointers(a.path,"auto"),J=h.actions?.find(d=>d.key===t.value)||h.signals?.find(d=>d.key===t.value);process.env.VITE_ELEMENT_PATH=a.path,process.env.VITE_ELEMENT_TYPE=t.type,process.env.VITE_ELEMENT_NAME=a.info.name,process.env.VITE_ACTION_SIGNAL_KEY=t.value,process.env.VITE_PROPERTY_KEY=i?.propertyKey||"",process.env.VITE_PROPERTY_TYPE=i?.type||"",process.env.VITE_PROPERTY_UI_PATH=i?.uiPath||"",process.env.VITE_MODULE_PATH=l.modulePath,process.env.VITE_UI_DIRECTORY=l.uiDir;let L=1;try{let d=await se({configFile:p,root:u.resolve(j,"../.process"),optimizeDeps:{include:["react","react-dom"],exclude:[a.path]},define:{"import.meta.env.VITE_ELEMENT_PATH":JSON.stringify(a.path),"import.meta.env.VITE_ELEMENT_TYPE":JSON.stringify(t.type),"import.meta.env.VITE_ELEMENT_NAME":JSON.stringify(a.info.name),"import.meta.env.VITE_ACTION_SIGNAL_KEY":JSON.stringify(t.value),"import.meta.env.VITE_PROPERTY_KEY":JSON.stringify(i?.propertyKey||null),"import.meta.env.VITE_PROPERTY_TYPE":JSON.stringify(i?.type||null),"import.meta.env.VITE_PROPERTY_UI_PATH":JSON.stringify(i?.uiPath||null),"import.meta.env.VITE_MODULE_PATH":JSON.stringify(l.modulePath),"import.meta.env.VITE_UI_DIRECTORY":JSON.stringify(l.uiDir),"import.meta.env.VITE_ELEMENT_MODULE":JSON.stringify(h),"import.meta.env.VITE_CURRENT_ACTION_SIGNAL":JSON.stringify(J),"import.meta.env.VITE_SELECTED_PROPERTY":JSON.stringify(i)},logLevel:"info",customLogger:{info(I){w.current(O=>[...O,I].slice(-L))},warn(I){w.current(O=>[...O,`[warn] ${I}`].slice(-L))},error(I){w.current(O=>[...O,`[error] ${I}`].slice(-L))},clearScreen(){},hasWarned:!1,warnOnce(I){},hasErrorLogged:()=>!1}});await d.listen();let N=`http://localhost:${d.config.server?.port||5173}`;ne(N),re(`Dev server running at ${N}`);let X=()=>{d.close()};process.on("SIGINT",X),process.on("SIGTERM",X),d.watcher.on("change",I=>{}),c("dev-server-running"),process.stdin.resume()}catch{c("error")}},$=async a=>{if(R==="elements"){let t=P.find(i=>i.value===a.value);if(!t)return;z(t),c("loading-actions-signals");try{let i=await v.loadElementPointers(t.path,"auto"),l=[];i.actions&&Array.isArray(i.actions)&&i.actions.forEach((s,n)=>{l.push({label:`Action: ${s.name||s.key}`,value:s.key,type:"action",path:t.path,description:s.description})}),i.signals&&Array.isArray(i.signals)&&i.signals.forEach((s,n)=>{l.push({label:`Signal: ${s.name||s.key}`,value:s.key,type:"signal",path:t.path,description:s.description})}),l.length===0&&l.push({label:"Default Component",value:"default",type:"action",path:t.path,description:"Default component from element"}),q(l),H("actions-signals"),c("ready")}catch{c("error")}}else if(R==="actions-signals"){let t=k.find(i=>i.value===a.value);if(!t||!T)return;Q(t),c("loading-properties");try{let i=await v.loadElementPointers(T.path,"auto"),l=i.actions?.find(n=>n.key===t.value)||i.signals?.find(n=>n.key===t.value);if(l&&l.ui){b(t.value),c("launching"),M(T,t,null).catch(n=>{c("error")});return}if(!l||!l.props){b(t.value),c("launching");try{await M(T,t,null)}catch{c("error")}return}let s=[];if(l.props.forEach(n=>{n.ui&&s.push({label:`\u{1F3A8} ${n.key} (${n.ui})`,value:`ui-${n.key}`,propertyKey:n.key,type:"ui-variant",uiPath:n.ui,description:n.description,propertyData:n})}),s.length===0){b(t.value),c("launching"),await M(T,t,null);return}Z(s),H("properties"),c("ready")}catch{c("error")}}else{let t=Y.find(i=>i.value===a.value);if(!t||!_||!T)return;te(t),b(t.value),c("launching"),await M(T,_,t)}};return x==="loading"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{children:["\u{1F50D} Loading elements from: ",o(e,{color:"cyan",children:g})]}),o(e,{children:"Loading..."})]}):x==="no-elements"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{color:"red",children:["\u274C No valid elements found in: ",o(e,{color:"cyan",children:g})]}),o(e,{color:"yellow",children:"Make sure the directory contains valid element modules."}),o(e,{color:"yellow",children:"Supported formats: Pipedream, n8n, Doflo, Process.co"}),o(e,{color:"yellow",children:"Supported file types: .js, .ts, .mjs, .mts, .jsx, .tsx"})]}):x==="error"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{color:"red",children:["\u274C Error loading elements from: ",o(e,{color:"cyan",children:g})]}),o(e,{color:"yellow",children:"Check that the directory contains valid element modules."})]}):x==="loading-actions-signals"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{children:["\u{1F50D} Loading actions and signals for '",o(e,{color:"cyan",children:T?.info.name}),"'..."]}),o(e,{children:"Loading..."})]}):x==="loading-properties"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{children:["\u{1F50D} Loading properties for '",o(e,{color:"cyan",children:_?.label}),"'..."]}),o(e,{children:"Loading..."})]}):x==="launching"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{color:"green",children:["\u{1F680} Launching dev server for '",o(e,{color:"cyan",children:ee}),"'..."]}),r(e,{children:["Directory: ",o(e,{color:"cyan",children:g})]})]}):x==="dev-server-running"?r(ce,{children:[r(m,{flexDirection:"column",flexShrink:1,borderStyle:"round",margin:2,marginBottom:1,paddingX:2,paddingY:1,borderColor:"#8759F2",children:[r(e,{children:["Server Running: ",o(e,{color:"#01D4E7",underline:!0,children:U})]}),r(e,{children:["Element: ",o(e,{color:"#01D4E7",children:T?.info.name})]}),r(e,{children:["Action/Signal: ",o(e,{color:"#01D4E7",children:_?.label})]}),K?r(e,{children:["Property UI: ",o(e,{color:"#01D4E7",children:K.label})]}):r(e,{children:["UI Mode: ",o(e,{color:"#01D4E7",children:"Action/Signal Level"})]}),o(e,{color:"yellow",children:"Press Ctrl+C to stop the server"})]}),r(m,{marginTop:1,marginLeft:4,flexDirection:"column",children:[o(e,{color:"gray",children:"Server Status:"}),C.length>0?C.map((a,t)=>o(e,{color:"gray",children:a},t)):o(e,{color:"gray",children:"Waiting for activity..."})]})]}):R==="properties"?r(m,{flexDirection:"column",children:[r(e,{children:["\u{1F4C1} Element: ",o(e,{color:"cyan",children:T?.info.name})]}),r(e,{children:["\u{1F4CB} Action/Signal: ",o(e,{color:"#01D4E7",children:_?.label})]}),r(e,{children:["Found ",Y.length," property(ies):"]}),o(W,{items:Y,onSelect:$})]}):R==="actions-signals"?r(m,{flexDirection:"column",marginTop:2,marginBottom:2,children:[r(e,{children:["\u{1F4C1} Element: ",o(e,{color:"#01D4E7",children:T?.info.name})]}),r(m,{flexDirection:"column",marginTop:1,children:[r(e,{children:["Found ",k.length," action(s)/signal(s):"]}),o(W,{items:k,onSelect:$})]})]}):r(m,{flexDirection:"column",marginTop:2,marginBottom:2,children:[r(m,{flexDirection:"column",children:[r(e,{children:["\u{1F4C1} Directory: ",o(e,{color:"#01D4E7",children:g})]}),r(m,{flexDirection:"column",marginTop:1,children:[r(e,{children:["Found ",P.length," element(s):"]}),o(W,{items:P,onSelect:$})]})]}),o(ae,{logs:C})]})},ae=({logs:g})=>g.length?r(m,{flexDirection:"column",marginTop:1,children:[o(e,{color:"gray",children:"Output:"}),g.map((P,V)=>o(e,{color:"gray",children:P},V))]}):null;export{he as a};

package/dist/chunk-QPYNK3X7.js

@@ -0,0 +1 @@
+import{Box as t,Text as o}from"ink";import r from"path";import{fileURLToPath as f}from"url";import{readFileSync as n}from"fs";import{Fragment as h,jsx as _,jsxs as e}from"react/jsx-runtime";var x=f(import.meta.url),a=r.dirname(x),c=r.resolve(r.join(a,"../package.json")),i=JSON.parse(n(c,"utf8"));function d(l){return new Array(42-l.length).fill(" ").join("")}function B(){return _(h,{children:e(t,{flexDirection:"column",display:"flex",alignSelf:"flex-start",marginLeft:3,marginTop:1,marginBottom:1,children:[e(t,{flexGrow:1,children:[_(o,{color:"whiteBright",bold:!0,children:"   _ __  _ __ ___   ___ ___  ___ ___"}),_(o,{color:"#dffff",children:"   ___ ___  "})]}),e(t,{flexGrow:1,children:[_(o,{color:"whiteBright",bold:!0,children:"  | '_ \\| '__/ _ \\ / __/ _ \\/ __/ __|"}),_(o,{color:"#dffff",children:" / __/ _ \\"})]}),e(t,{flexGrow:1,children:[_(o,{color:"whiteBright",bold:!0,children:"  | |_) | | | (_) | (_|  __/\\__ \\__ \\"}),_(o,{color:"#dffff",children:"| (_| (_) | "})]}),e(t,{flexGrow:1,children:[_(o,{color:"whiteBright",bold:!0,children:"  | .__/|_|  \\___/ \\___\\___||___/___"}),_(o,{color:"#FF3C82",children:"(_)"}),_(o,{color:"#dffff",children:"___\\___/"})]}),e(t,{flexGrow:1,children:[e(o,{color:"whiteBright",bold:!0,children:["  |_|",d(i.version)]}),e(o,{color:"whiteBright",bold:!0,children:["v",i.version]})]}),_(t,{flexGrow:1,paddingTop:1,children:_(o,{color:"whiteBright",bold:!0,children:"a CLI to aid in the building of process.co elements"})})]})})}export{d as a,B as b};

package/dist/cli.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import{b as t}from"./chunk-QPYNK3X7.js";import{a as r}from"./chunk-NT4V5NUJ.js";import{render as p}from"ink";import c from"meow";import m from"path";import i from"fs";import{Fragment as f,jsx as o,jsxs as d}from"react/jsx-runtime";process.stdout.write("\x1Bc");var s=c(`
+  Usage
+    $ process-element [path]
+
+  Options 
+    --help     Show help
+    --version  Show version
+
+  Examples
+    $ process-element                    # Use current directory
+    $ process-element /path/to/elements  # Use specified path
+    $ process-element ./elements         # Use relative path
+
+  Description
+    Scans the specified directory for Process.co element modules (.mjs/.mts files)
+    and provides an interactive interface to launch development servers.
+`,{importMeta:import.meta}),e=s.input[0]?m.resolve(s.input[0]):process.cwd();i.existsSync(e)||(console.error(`\u274C Error: Path '${e}' does not exist.`),process.exit(1));var a=i.statSync(e);a.isDirectory()||(console.error(`\u274C Error: '${e}' is not a directory.`),process.exit(1));var l=({rootDir:n})=>d(f,{children:[o(t,{}),o(r,{rootDir:n})]});p(o(l,{rootDir:e}));

package/dist/logo.js

@@ -0,0 +1 @@
+import{a,b}from"./chunk-QPYNK3X7.js";export{b as default,a as lengthAsSpace};

package/dist/ui.js

@@ -0,0 +1 @@
+import{a}from"./chunk-NT4V5NUJ.js";export{a as DevUI};

package/dist/version.js

@@ -0,0 +1 @@
+var o="0.0.0-development",v={version:o};export{v as default,o as version};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@process.co/element-dev-server",
+  "version": "0.0.1-test-3",
+  "description": "Helper Library for developing elements for Process.co",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "bin": {
+    "proc-dev": "tsx ./dist/cli.js"
+  },
+  "files": [
+    "dist/*",
+    "src/*",
+    "bundle/*"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "scope": "@process.co"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && echo '{\"version\":'$(jq '.version' ./package.json)'}' > ./src/version.json && tsup && chmod +x ./dist/cli.js",
+    "dev": "tsx src/cli.tsx",
+    "cli": "tsx dist/cli.js",
+    "test": "jest"
+  },
+  "keywords": [
+    "process",
+    "element",
+    "cli",
+    "validation",
+    "compatibility"
+  ],
+  "author": {
+    "name": "Process.co Team",
+    "email": "developers@process.co"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@process.co/element-dev-support": "github:process-co/npm-element-dev-support#main",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.8.4",
+    "ink": "^6.0.1",
+    "ink-select-input": "^6.2.0",
+    "io-ts": "^2.2.22",
+    "meow": "^13.2.0",
+    "querystring": "^0.2.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.0",
+    "tsx": "^4.19.1",
+    "type-fest": "^4.21.0",
+    "vite": "^7.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@repo/config-jest": "workspace:^",
+    "@repo/config-typescript": "workspace:^",
+    "@types/jest": "^29.5.14",
+    "@types/node": "22.13.17",
+    "@types/react": "19.1.0",
+    "@vercel/ncc": "^0.38.1",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.2.6",
+    "typescript": "^5.7.3"
+  },
+  "registry": "https://registry.npmjs.org"
+}

package/src/cli.tsx

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+process.stdout.write('\x1Bc'); // Clear the terminal
+
+import { render } from 'ink';
+import meow from 'meow';
+import React from 'react';
+import path from 'path';
+import fs from 'fs';
+import { DevUI } from './ui.js';
+import Logo from './logo.js';
+
+const cli = meow(`
+  Usage
+    $ process-element [path]
+
+  Options 
+    --help     Show help
+    --version  Show version
+
+  Examples
+    $ process-element                    # Use current directory
+    $ process-element /path/to/elements  # Use specified path
+    $ process-element ./elements         # Use relative path
+
+  Description
+    Scans the specified directory for Process.co element modules (.mjs/.mts files)
+    and provides an interactive interface to launch development servers.
+`, {
+  importMeta: import.meta,
+});
+
+// Get the path from arguments or use current directory
+const targetPath = cli.input[0] ? path.resolve(cli.input[0]) : process.cwd();
+
+// Validate that the path exists
+if (!fs.existsSync(targetPath)) {
+  console.error(`❌ Error: Path '${targetPath}' does not exist.`);
+  process.exit(1);
+}
+
+// Check if it's a directory
+const stats = fs.statSync(targetPath);
+if (!stats.isDirectory()) {
+  console.error(`❌ Error: '${targetPath}' is not a directory.`);
+  process.exit(1);
+}
+
+const App = ({ rootDir }: { rootDir: string }) => (
+  <>
+    <Logo />
+    <DevUI rootDir={rootDir} />
+  </>
+);
+
+render(<App rootDir={targetPath} />);

package/src/logo.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {  Box,  Text } from "ink";
+import path from "path";
+import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageJsonPath = path.resolve(path.join(__dirname, "../package.json"));
+const pack = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as { version: string };
+
+
+export function lengthAsSpace(version:string){
+    return new Array(42 - version.length).fill(" ").join("")
+}
+
+export default function (){
+
+    // const version = pack.version
+    
+return (<>
+        <Box flexDirection="column" display="flex" alignSelf="flex-start" marginLeft={3} marginTop={1} marginBottom={1} >
+            <Box flexGrow={1} ><Text color="whiteBright" bold={true} >   _ __  _ __ ___   ___ ___  ___ ___</Text><Text color="#dffff">   ___ ___  </Text></Box>
+            <Box flexGrow={1}><Text color="whiteBright" bold={true} >  | '_ \| '__/ _ \ / __/ _ \/ __/ __|</Text><Text color="#dffff"> / __/ _ \</Text></Box>
+            <Box flexGrow={1}><Text color="whiteBright" bold={true}>  | |_) | | | (_) | (_|  __/\__ \__ \</Text><Text color="#dffff">| (_| (_) | </Text></Box>
+            <Box flexGrow={1}><Text color="whiteBright" bold={true}>  | .__/|_|  \___/ \___\___||___/___</Text><Text color="#FF3C82">(_)</Text><Text color="#dffff">___\___/</Text></Box>
+            <Box flexGrow={1}><Text color="whiteBright" bold={true}>  |_|{lengthAsSpace(pack.version)}</Text><Text color="whiteBright" bold={true} >v{pack.version}</Text></Box>
+            <Box flexGrow={1} paddingTop={1} ><Text color="whiteBright" bold={true} >a CLI to aid in the building of process.co elements</Text></Box>
+        </Box>
+    </>)
+}

package/src/ui.tsx

@@ -0,0 +1,651 @@
+// src/DevUI.js
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import fs from 'fs';
+import path from 'path';
+import { createServer } from 'vite';
+import { fileURLToPath } from 'url';
+import dev_support from '@process.co/element-dev-support/dist/index.js';
+
+interface ElementItem {
+  label: string;
+  value: string;
+  info: dev_support.IProcessDefinitionUIInfo;
+  path: string;
+}
+
+interface ActionSignalItem {
+  label: string;
+  value: string;
+  type: 'action' | 'signal';
+  path: string;
+  description?: string;
+}
+
+interface PropertyItem {
+  label: string;
+  value: string;
+  propertyKey: string;
+  type: 'standard' | 'ui-variant';
+  uiPath?: string;
+  description?: string;
+  propertyData?: any;
+}
+
+export const DevUI = ({ rootDir }: { rootDir: string }) => {
+  const [elements, setElements] = useState<ElementItem[]>([]);
+  const [selectedElement, setSelectedElement] = useState<ElementItem | null>(null);
+  const [actionsSignals, setActionsSignals] = useState<ActionSignalItem[]>([]);
+  const [selectedActionSignal, setSelectedActionSignal] = useState<ActionSignalItem | null>(null);
+  const [properties, setProperties] = useState<PropertyItem[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [selectedProperty, setSelectedProperty] = useState<PropertyItem | null>(null);
+  const [status, setStatus] = useState<'loading' | 'ready' | 'no-elements' | 'error' | 'loading-actions-signals' | 'loading-properties' | 'launching' | 'dev-server-running'>('loading');
+  const [step, setStep] = useState<'elements' | 'actions-signals' | 'properties'>('elements');
+  const [viteLogs, setViteLogs] = useState<string[]>([]);
+  const viteLogsRef = useRef(setViteLogs);
+  viteLogsRef.current = setViteLogs;
+  const [viteUrl, setViteUrl] = useState<string | null>(null);
+  // Add a serverMessage state for display messages
+  const [serverMessage, setServerMessage] = useState<string | null>(null);
+
+  // Function to get the actual module path for an action/signal
+  const getModulePath = async (elementPath: string, actionSignalKey: string, type: 'action' | 'signal'): Promise<{ modulePath: string; uiDir: string } | null> => {
+    try {
+      // Get the base directory of the element
+      const elementDir = fs.statSync(elementPath).isDirectory()
+        ? elementPath
+        : path.dirname(elementPath);
+
+      // Determine the folder to look in based on type
+      const folderName = type === 'action' ? 'actions' : 'sources';
+      const folderPath = path.join(elementDir, folderName);
+
+      // Check if the folder exists
+      if (!fs.existsSync(folderPath)) {
+        return null;
+      }
+
+      // Get all modules of the specific type to find the one with matching key
+      const modules = await dev_support.importFolderModulesOfType(folderName, type, elementDir, ['common']);
+
+      const targetModule = modules.find(module => module.key === actionSignalKey);
+
+      if (!targetModule) {
+        return null;
+      }
+
+      // The importFolderModulesOfType function already found the module, so we need to get its path
+      // We can do this by looking at the module's structure or by scanning the folder
+      const subfolders = fs.readdirSync(folderPath).filter(item => {
+        const itemPath = path.join(folderPath, item);
+        return fs.statSync(itemPath).isDirectory();
+      });
+
+      let modulePath = null;
+      let moduleDir = null;
+
+      // Look through each subfolder to find the one that contains our module
+      for (const subfolder of subfolders) {
+        const subfolderPath = path.join(folderPath, subfolder);
+
+        // Look for the module file in this subfolder
+        const possibleFiles = [
+          `${subfolder}.mjs`,
+          `${subfolder}.mts`,
+          `${subfolder}.js`,
+          `${subfolder}.ts`,
+          'index.mjs',
+          'index.mts',
+          'index.js',
+          'index.ts'
+        ];
+
+        for (const file of possibleFiles) {
+          const filePath = path.join(subfolderPath, file);
+          if (fs.existsSync(filePath)) {
+            // Import this file to check if it's the right module
+            try {
+              const { module } = await dev_support.importFromPath(filePath);
+
+              // Check if this module has the right key
+              if (module.key === actionSignalKey) {
+                modulePath = filePath;
+                moduleDir = subfolderPath;
+                break;
+              }
+            } catch (importError) {
+              // Continue to next file if import fails
+              continue;
+            }
+          }
+        }
+
+        if (modulePath) break;
+      }
+
+      if (!modulePath) {
+        return null;
+      }
+
+      // Determine the UI directory
+      let uiDir = path.join(elementDir, 'ui');
+      if (targetModule && targetModule.ui) {
+        uiDir = path.join(elementDir, 'ui', targetModule.ui);
+      }
+
+      return { modulePath, uiDir };
+    } catch (error) {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    const loadElements = async () => {
+      try {
+        // First, check if the target directory itself is a valid element
+        try {
+          const elementType = await dev_support.autoDetectElement(rootDir);
+          if (elementType !== 'pipedream') { // If it's a valid element type
+            const elementInfo = await dev_support.loadElementPointers(rootDir, elementType);
+            setElements([{
+              label: `${elementInfo.name} (${elementInfo.elementType})`,
+              value: elementInfo.name,
+              info: elementInfo,
+              path: rootDir
+            }]);
+            setStatus('ready');
+            return;
+          }
+        } catch (error) {
+          // Target directory is not a valid element, continue to scan subdirectories
+        }
+
+        // Scan for potential element directories/files
+        const entries = fs.readdirSync(rootDir, { withFileTypes: true });
+        const potentialElements: string[] = [];
+
+        // Look for directories only (elements are directories, not individual files)
+        for (const entry of entries) {
+          const entryPath = path.join(rootDir, entry.name);
+
+          if (entry.isDirectory()) {
+            // Check if directory contains element files
+            try {
+              const subEntries = fs.readdirSync(entryPath);
+              if (subEntries.some(file =>
+                file.endsWith('.mjs') ||
+                file.endsWith('.mts') ||
+                file.endsWith('.js') ||
+                file.endsWith('.ts') ||
+                file.endsWith('.tsx') ||
+                file.endsWith('.jsx')
+              )) {
+                potentialElements.push(entryPath);
+              }
+            } catch (error) {
+              // Skip directories we can't read
+            }
+          }
+          // Skip individual files - elements are always directories
+        }
+
+        if (potentialElements.length === 0) {
+          setStatus('no-elements');
+          return;
+        }
+
+        // Try to load each potential element
+        const loadedElements: ElementItem[] = [];
+
+        for (const elementPath of potentialElements) {
+          try {
+            const elementInfo = await dev_support.loadElementPointers(elementPath, 'auto');
+            loadedElements.push({
+              label: `${elementInfo.name} (${elementInfo.elementType})`,
+              value: elementInfo.name,
+              info: elementInfo,
+              path: elementPath
+            });
+          } catch (error) {
+            // Skip elements that can't be loaded
+          }
+        }
+
+        if (loadedElements.length > 0) {
+          setElements(loadedElements);
+          setStatus('ready');
+          return;
+        } else {
+          setStatus('no-elements');
+        }
+      } catch (error) {
+        setStatus('error');
+      }
+    };
+
+    loadElements();
+  }, [rootDir]);
+
+  // React to viteUrl changes to show the banner
+  useEffect(() => {
+    if (viteUrl && status === 'launching') {
+      setStatus('dev-server-running');
+    }
+  }, [viteUrl, status]);
+
+  // Debug: log all status changes
+  useEffect(() => {
+    // console.log(`Status changed to: ${status}`);
+  }, [status]);
+
+  const launchDevServer = async (element: ElementItem, actionSignal: ActionSignalItem, property: PropertyItem | null) => {
+    if (!element) return;
+
+    // Get the actual module path and UI directory for the action/signal
+    const moduleInfo = await getModulePath(element.path, actionSignal.value, actionSignal.type);
+
+    if (!moduleInfo) {
+      setStatus('error');
+      return;
+    }
+
+    // Try to find a dev directory or use the element's directory
+    const elementDir = fs.statSync(element.path).isDirectory()
+      ? element.path
+      : path.dirname(element.path);
+
+    const devDir = path.join(elementDir, 'dev');
+
+    // Check if dev directory exists, otherwise use the element directory
+    const workingDir = fs.existsSync(devDir) ? devDir : elementDir;
+
+    // Use the internal Vite config from .process directory
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const internalViteConfig = path.resolve(__dirname, '../.process/vite.config.cjs');
+
+    // Check if user has their own vite config, otherwise use internal one
+    const userViteConfig = path.join(workingDir, 'vite.config.js');
+    const userViteConfigTs = path.join(workingDir, 'vite.config.ts');
+
+    let configToUse = internalViteConfig;
+    if (fs.existsSync(userViteConfig)) {
+      configToUse = userViteConfig;
+    } else if (fs.existsSync(userViteConfigTs)) {
+      configToUse = userViteConfigTs;
+    }
+
+    // Load the complete element data from compatibility module
+    const elementModule = await dev_support.loadElementPointers(element.path, 'auto');
+    const currentActionSignal = (elementModule.actions as any[])?.find(action => action.key === actionSignal.value) ||
+      (elementModule.signals as any[])?.find(signal => signal.key === actionSignal.value);
+
+    // Set process.env variables for Vite config
+    process.env.VITE_ELEMENT_PATH = element.path;
+    process.env.VITE_ELEMENT_TYPE = actionSignal.type;
+    process.env.VITE_ELEMENT_NAME = element.info.name;
+    process.env.VITE_ACTION_SIGNAL_KEY = actionSignal.value;
+    process.env.VITE_PROPERTY_KEY = property?.propertyKey || '';
+    process.env.VITE_PROPERTY_TYPE = property?.type || '';
+    process.env.VITE_PROPERTY_UI_PATH = property?.uiPath || '';
+    process.env.VITE_MODULE_PATH = moduleInfo.modulePath;
+    process.env.VITE_UI_DIRECTORY = moduleInfo.uiDir;
+
+
+    const viteLogLength = 1;
+    // Create Vite server programmatically
+    try {
+      const vite = await createServer({
+        configFile: configToUse,
+        root: path.resolve(__dirname, '../.process'), // Use .process directory as root
+        optimizeDeps: {
+          include: ['react', 'react-dom'],
+          exclude: [element.path] // Exclude the external element from optimization
+        },
+        define: {
+          // Pass complete element data directly to Vite
+          'import.meta.env.VITE_ELEMENT_PATH': JSON.stringify(element.path),
+          'import.meta.env.VITE_ELEMENT_TYPE': JSON.stringify(actionSignal.type),
+          'import.meta.env.VITE_ELEMENT_NAME': JSON.stringify(element.info.name),
+          'import.meta.env.VITE_ACTION_SIGNAL_KEY': JSON.stringify(actionSignal.value),
+          'import.meta.env.VITE_PROPERTY_KEY': JSON.stringify(property?.propertyKey || null),
+          'import.meta.env.VITE_PROPERTY_TYPE': JSON.stringify(property?.type || null),
+          'import.meta.env.VITE_PROPERTY_UI_PATH': JSON.stringify(property?.uiPath || null),
+          // Add the actual module paths
+          'import.meta.env.VITE_MODULE_PATH': JSON.stringify(moduleInfo.modulePath),
+          'import.meta.env.VITE_UI_DIRECTORY': JSON.stringify(moduleInfo.uiDir),
+          // Pass the complete element data from compatibility module
+          'import.meta.env.VITE_ELEMENT_MODULE': JSON.stringify(elementModule),
+          'import.meta.env.VITE_CURRENT_ACTION_SIGNAL': JSON.stringify(currentActionSignal),
+          'import.meta.env.VITE_SELECTED_PROPERTY': JSON.stringify(property)
+        },
+        logLevel: 'info',
+        customLogger: {
+          info(msg) { viteLogsRef.current(logs => [...logs, msg].slice(-viteLogLength)); },
+          warn(msg) { viteLogsRef.current(logs => [...logs, `[warn] ${msg}`].slice(-viteLogLength)); },
+          error(msg) { viteLogsRef.current(logs => [...logs, `[error] ${msg}`].slice(-viteLogLength)); },
+          clearScreen() { },
+          hasWarned: false,
+          warnOnce(msg) { },
+          hasErrorLogged: () => false,
+        }
+      });
+
+      await vite.listen();
+      const serverUrl = `http://localhost:${vite.config.server?.port || 5173}`;
+      setViteUrl(serverUrl); // <-- set the state
+      setServerMessage(`Dev server running at ${serverUrl}`);
+
+      // Keep the server running and handle cleanup
+      const cleanup = () => {
+        vite.close();
+      };
+
+      // Handle process termination
+      process.on('SIGINT', cleanup);
+      process.on('SIGTERM', cleanup);
+
+      // Handle file changes
+      vite.watcher.on('change', (file: string) => {
+        // console.log(`File changed: ${file}`);
+      });
+
+      // Keep the process alive
+      setStatus('dev-server-running');
+
+      // Don't exit - keep the server running
+      process.stdin.resume();
+
+    } catch (error: any) {
+      setStatus('error');
+    }
+  };
+
+  const handleSelect = async (item: { value: string }) => {
+    if (step === 'elements') {
+      // First step: select an element
+      const element = elements.find(el => el.value === item.value);
+      if (!element) return;
+
+      setSelectedElement(element);
+      setStatus('loading-actions-signals');
+
+      try {
+        // Load the element to get its actions and signals
+        const elementModule = await dev_support.loadElementPointers(element.path, 'auto');
+
+        const items: ActionSignalItem[] = [];
+
+        // Add actions
+        if (elementModule.actions && Array.isArray(elementModule.actions)) {
+          elementModule.actions.forEach((action, index) => {
+            items.push({
+              label: `Action: ${action.name || action.key}`,
+              value: action.key,
+              type: 'action',
+              path: element.path,
+              description: action.description
+            });
+          });
+        }
+
+        // Add signals
+        if (elementModule.signals && Array.isArray(elementModule.signals)) {
+          elementModule.signals.forEach((signal, index) => {
+            items.push({
+              label: `Signal: ${signal.name || signal.key}`,
+              value: signal.key,
+              type: 'signal',
+              path: element.path,
+              description: signal.description
+            });
+          });
+        }
+
+        if (items.length === 0) {
+          // If no actions/signals found, create a default item
+          items.push({
+            label: 'Default Component',
+            value: 'default',
+            type: 'action',
+            path: element.path,
+            description: 'Default component from element'
+          });
+        }
+
+        setActionsSignals(items);
+        setStep('actions-signals');
+        setStatus('ready');
+      } catch (error) {
+        setStatus('error');
+      }
+    } else if (step === 'actions-signals') {
+      // Second step: select an action/signal
+      const selectedActionSignal = actionsSignals.find(i => i.value === item.value);
+      if (!selectedActionSignal || !selectedElement) return;
+
+      setSelectedActionSignal(selectedActionSignal);
+      setStatus('loading-properties');
+
+      try {
+        // Load the element to get its properties
+        const elementModule = await dev_support.loadElementPointers(selectedElement.path, 'auto');
+
+        const currentActionSignal = (elementModule.actions as any[])?.find(action => action.key === selectedActionSignal.value) ||
+          (elementModule.signals as any[])?.find(signal => signal.key === selectedActionSignal.value);
+
+        // Check if the action/signal has its own UI
+        if (currentActionSignal && currentActionSignal.ui) {
+          setSelected(selectedActionSignal.value);
+          setStatus('launching');
+          // Launch server without awaiting - let it run in background
+          launchDevServer(selectedElement, selectedActionSignal, null).catch(error => {
+            setStatus('error');
+          });
+          return;
+        }
+
+        // No UI found, check for properties with UI
+        if (!currentActionSignal || !currentActionSignal.props) {
+          setSelected(selectedActionSignal.value);
+          setStatus('launching');
+          try {
+            await launchDevServer(selectedElement, selectedActionSignal, null);
+          } catch (error) {
+            setStatus('error');
+          }
+          return;
+        }
+
+        const propertyItems: PropertyItem[] = [];
+
+        // Add properties that have UI components
+        // props is an array, not an object
+        currentActionSignal.props.forEach((prop: any) => {
+          if (prop.ui) {
+            // Property has a UI variant
+            propertyItems.push({
+              label: `🎨 ${prop.key} (${prop.ui})`,
+              value: `ui-${prop.key}`,
+              propertyKey: prop.key,
+              type: 'ui-variant',
+              uiPath: prop.ui,
+              description: prop.description,
+              propertyData: prop
+            });
+          }
+        });
+
+        if (propertyItems.length === 0) {
+          setSelected(selectedActionSignal.value);
+          setStatus('launching');
+          await launchDevServer(selectedElement, selectedActionSignal, null);
+          return;
+        }
+
+        setProperties(propertyItems);
+        setStep('properties');
+        setStatus('ready');
+      } catch (error) {
+        setStatus('error');
+      }
+    } else {
+      // Third step: select a property (or launch directly)
+      const selectedProperty = properties.find(i => i.value === item.value);
+      if (!selectedProperty || !selectedActionSignal || !selectedElement) return;
+
+      setSelectedProperty(selectedProperty);
+      setSelected(selectedProperty.value);
+      setStatus('launching');
+      await launchDevServer(selectedElement, selectedActionSignal, selectedProperty);
+    }
+  };
+
+  if (status === 'loading') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text>🔍 Loading elements from: <Text color="cyan">{rootDir}</Text></Text>
+        <Text>Loading...</Text>
+      </Box>
+    );
+  }
+
+  if (status === 'no-elements') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text color="red">❌ No valid elements found in: <Text color="cyan">{rootDir}</Text></Text>
+        <Text color="yellow">Make sure the directory contains valid element modules.</Text>
+        <Text color="yellow">Supported formats: Pipedream, n8n, Doflo, Process.co</Text>
+        <Text color="yellow">Supported file types: .js, .ts, .mjs, .mts, .jsx, .tsx</Text>
+      </Box>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text color="red">❌ Error loading elements from: <Text color="cyan">{rootDir}</Text></Text>
+        <Text color="yellow">Check that the directory contains valid element modules.</Text>
+      </Box>
+    );
+  }
+
+  if (status === 'loading-actions-signals') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text>🔍 Loading actions and signals for '<Text color="cyan">{selectedElement?.info.name}</Text>'...</Text>
+        <Text>Loading...</Text>
+      </Box>
+    );
+  }
+
+  if (status === 'loading-properties') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text>🔍 Loading properties for '<Text color="cyan">{selectedActionSignal?.label}</Text>'...</Text>
+        <Text>Loading...</Text>
+      </Box>
+    );
+  }
+
+  if (status === 'launching') {
+    return (
+      <Box flexDirection="column" marginTop={2}>
+        <Text color="green">🚀 Launching dev server for '<Text color="cyan">{selected}</Text>'...</Text>
+        <Text>Directory: <Text color="cyan">{rootDir}</Text></Text>
+      </Box>
+    );
+  }
+
+  if (status === 'dev-server-running') {
+    return (
+      <>
+        <Box flexDirection="column" flexShrink={1} borderStyle={"round"} margin={2} marginBottom={1} paddingX={2} paddingY={1} borderColor="#8759F2" >
+          {/* <ViteBanner url={viteUrl} /> */}
+          {/* <Text color="green">✅ Dev server is running!</Text> */}
+          {/* {serverMessage && <Text>{serverMessage}</Text>} */}
+          <Text>Server Running: <Text color="#01D4E7" underline>{viteUrl}</Text></Text>
+          <Text>Element: <Text color="#01D4E7">{selectedElement?.info.name}</Text></Text>
+          <Text>Action/Signal: <Text color="#01D4E7">{selectedActionSignal?.label}</Text></Text>
+          {selectedProperty ? (
+            <Text>Property UI: <Text color="#01D4E7">{selectedProperty.label}</Text></Text>
+          ) : (
+            <Text>UI Mode: <Text color="#01D4E7">Action/Signal Level</Text></Text>
+          )}
+          <Text color="yellow">Press Ctrl+C to stop the server</Text>
+        </Box>
+        <Box marginTop={1} marginLeft={4} flexDirection="column">
+          <Text color="gray">Server Status:</Text>
+          {viteLogs.length > 0 ? (
+            viteLogs.map((line, i) => (
+              <Text key={i} color="gray">{line}</Text>
+            ))
+          ) : (
+            <Text color="gray">Waiting for activity...</Text>
+          )}
+        </Box></>
+
+    );
+  }
+
+  if (step === 'properties') {
+    return (
+      <Box flexDirection="column">
+        <Text>📁 Element: <Text color="cyan">{selectedElement?.info.name}</Text></Text>
+        <Text>📋 Action/Signal: <Text color="#01D4E7">{selectedActionSignal?.label}</Text></Text>
+        <Text>Found {properties.length} property(ies):</Text>
+        <SelectInput items={properties} onSelect={handleSelect} />
+      </Box>
+    );
+  }
+
+  if (step === 'actions-signals') {
+    return (
+      <Box flexDirection="column" marginTop={2} marginBottom={2}>
+        {/* <Text>Status: {step}</Text> */}
+        <Text>📁 Element: <Text color="#01D4E7">{selectedElement?.info.name}</Text></Text>
+        <Box flexDirection="column" marginTop={1}>
+          <Text>Found {actionsSignals.length} action(s)/signal(s):</Text>
+          <SelectInput items={actionsSignals} onSelect={handleSelect} />
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={2} marginBottom={2}>
+      {/* <ViteBanner url={viteUrl} /> */}
+      <Box flexDirection="column">
+        <Text>📁 Directory: <Text color="#01D4E7">{rootDir}</Text></Text>
+        <Box flexDirection="column" marginTop={1}>
+          <Text>Found {elements.length} element(s):</Text>
+          <SelectInput items={elements} onSelect={handleSelect} /></Box>
+      </Box>
+      <ViteLogPanel logs={viteLogs} />
+    </Box>
+  );
+};
+
+// Vite log panel
+const ViteLogPanel = ({ logs }: { logs: string[] }) => {
+  if (!logs.length) return null;
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color="gray">Output:</Text>
+      {logs.map((line, i) => (
+        <Text key={i} color="gray">{line}</Text>
+      ))}
+    </Box>
+  );
+};
+
+// Vite banner component
+const ViteBanner = ({ url }: { url: string | null }) =>
+  url ? (
+    <Box marginBottom={1} justifyContent="center" borderStyle="double" borderColor="#8759F2" marginX={10}>
+      <Text color="green">🚀 Process Element Server running at: </Text>
+      <Text color="cyan" underline>{url}</Text>
+    </Box>
+  ) : null;

package/src/version.json

@@ -0,0 +1 @@
+{"version":"0.0.0-development"}