@process.co/element-dev-server 0.0.1 → 0.0.3

package/.process/eds.css

@@ -0,0 +1,18 @@
+body {
+    background-color: #f0f0f0;
+}
+
+.eds-container {
+    background-color: #f0f0f0;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.eds-container h2 {
+    color: #333;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    text-align: center;
+}

package/.process/index.tsx

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+import { DevProvider, DevToolbar } from '@process.co/ui/dev';
+import { Button } from '@process.co/ui';
 
-
+// Import the CSS from @process.co/ui so it's available for all components
+import '@process.co/ui/styles';
+import './eds.css';
 
 // This will be dynamically loaded based on the selected element
 interface ElementComponent {
@@ -9,6 +14,9 @@ interface ElementComponent {
   [key: string]: any;
 }
 
+// Storage key for persisting component value
+const VALUE_STORAGE_KEY = 'process-dev:component-value';
+
 function DevServer() {
   const [ElementComponent, setElementComponent] = useState<any>(null);
   const [loading, setLoading] = useState(true);
@@ -16,26 +24,66 @@ function DevServer() {
 
 
   const [readonly, setReadonly] = useState(false);
-  const [value, setValue] = useState<any>({});
+
+  // Persist value to localStorage for stable IDs across reloads
+  const [value, setValue] = useState<any>(() => {
+    try {
+      const stored = localStorage.getItem(VALUE_STORAGE_KEY);
+      if (stored) {
+        return JSON.parse(stored);
+      }
+    } catch (e) {
+      console.warn('Failed to load value from localStorage:', e);
+    }
+    return {};
+  });
+
+  // Save value to localStorage when it changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(VALUE_STORAGE_KEY, JSON.stringify(value));
+    } catch (e) {
+      console.warn('Failed to save value to localStorage:', e);
+    }
+  }, [value]);
 
   const handleReadonly = () => {
     setReadonly(!readonly);
   }
 
+  interface ImportMetaEnv {
+    // readonly VITE_ELEMENT?: string;
+    readonly VITE_ELEMENT_PATH?: string;
+    readonly VITE_ELEMENT_TYPE?: string;
+    readonly VITE_ELEMENT_NAME?: string;
+    readonly VITE_ACTION_SIGNAL_KEY?: string;
+    readonly VITE_PROPERTY_KEY?: string;
+    readonly VITE_PROPERTY_TYPE?: string;
+    readonly VITE_PROPERTY_UI_PATH?: string;
+    readonly VITE_MODULE_PATH?: string;
+    readonly VITE_UI_DIRECTORY?: string;
+    readonly VITE_ELEMENT_MODULE?: { actions: any[], signals: any[] };
+    readonly VITE_CURRENT_ACTION_SIGNAL?: { ui: string };
+    readonly VITE_SELECTED_PROPERTY?: { propertyKey: string, type: string, uiPath: string, propertyData: any };
+  }
+
+
   useEffect(() => {
     const loadElement = async () => {
       try {
 
+        const env = (import.meta as any).env as ImportMetaEnv;
+
         // Get element path and type from environment variables (passed by CLI)
-        const elementPath = import.meta.env.VITE_ELEMENT_PATH;
-        const elementType = import.meta.env.VITE_ELEMENT_TYPE || 'action';
-        const elementName = import.meta.env.VITE_ELEMENT_NAME;
-        const actionSignalKey = import.meta.env.VITE_ACTION_SIGNAL_KEY;
-        const propertyKey = import.meta.env.VITE_PROPERTY_KEY;
-        const propertyType = import.meta.env.VITE_PROPERTY_TYPE;
-        const propertyUIPath = import.meta.env.VITE_PROPERTY_UI_PATH;
-        const modulePath = import.meta.env.VITE_MODULE_PATH;
-        const uiDirectory = import.meta.env.VITE_UI_DIRECTORY;
+        const elementPath = env.VITE_ELEMENT_PATH;
+        const elementType = env.VITE_ELEMENT_TYPE || 'action';
+        const elementName = env.VITE_ELEMENT_NAME;
+        const actionSignalKey = env.VITE_ACTION_SIGNAL_KEY;
+        const propertyKey = env.VITE_PROPERTY_KEY;
+        const propertyType = env.VITE_PROPERTY_TYPE;
+        const propertyUIPath = env.VITE_PROPERTY_UI_PATH;
+        const modulePath = env.VITE_MODULE_PATH;
+        const uiDirectory = env.VITE_UI_DIRECTORY;
 
         // console.log('Element data:', { 
         //   elementPath, 
@@ -67,9 +115,9 @@ function DevServer() {
         // debugger;
 
         // Use the complete element data from the compatibility module passed via environment variables
-        const elementModule = import.meta.env.VITE_ELEMENT_MODULE || {};
-        const currentActionSignal = import.meta.env.VITE_CURRENT_ACTION_SIGNAL || {};
-        const selectedProperty = import.meta.env.VITE_SELECTED_PROPERTY || {};
+        const elementModule = env.VITE_ELEMENT_MODULE || {} as { actions: any[], signals: any[] };
+        const currentActionSignal = env.VITE_CURRENT_ACTION_SIGNAL || {} as { ui: string };
+        const selectedProperty = env.VITE_SELECTED_PROPERTY || {} as { propertyKey: string, type: string, uiPath: string, propertyData: any };
 
         // console.log('Element module from compatibility:', elementModule);
         // console.log('Current action/signal:', currentActionSignal);
@@ -226,52 +274,210 @@ function DevServer() {
       <h2>Element Development Server</h2>
 
       <h3>Rendered Component</h3>
-      <div style={{ marginBottom: '10px' }}>
-        <button
+      <div style={{ marginBottom: '10px', display: 'flex', gap: '8px' }}>
+        <Button variant="outline"
+          size="sm"
           onClick={handleReadonly}
         >
           {readonly ? 'Make Editable' : 'Make Read Only'}
-        </button>
-      </div>
-      <div style={{ border: '2px solid #007acc', padding: '20px', borderRadius: '8px', backgroundColor: '#f8f9fa' }}>
-        {typeof ElementComponent === 'function' ? (
-          <ElementComponent
-            value={value}
-            onChange={(newValue: any) => setValue(newValue)}
-            onBlur={() => console.log('Component onBlur')}
-            readonly={readonly}
-          />
-        ) : React.isValidElement(ElementComponent) ? (
-          ElementComponent
-        ) : (
-          <div style={{ color: '#666', fontStyle: 'italic' }}>
-            Component is not a valid React component. Type: {typeof ElementComponent}
-            <br />
-            <small>This might be the element metadata instead of the UI component.</small>
-          </div>
-        )}
-      </div>
-      <div style={{ marginBottom: '10px' }}>
-        <h3>Value</h3>
-        <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
-          {JSON.stringify(value, null, 2)}
-        </pre>
-      </div>
-      <div style={{ border: '1px solid #ccc', padding: '20px', marginTop: '20px', marginBottom: '20px', backgroundColor: '#f8f9fa' }}>
-        <h3>Loaded Component Information</h3>
-        <p><strong>Element:</strong> {import.meta.env.VITE_ELEMENT_NAME}</p>
-        <p><strong>Type:</strong> {import.meta.env.VITE_ELEMENT_TYPE}</p>
-        <p><strong>Action/Signal:</strong> {import.meta.env.VITE_ACTION_SIGNAL_KEY}</p>
-        <p><strong>Module Path:</strong> {import.meta.env.VITE_ELEMENT_PATH}</p>
-        <p><strong>UI Directory:</strong> {import.meta.env.VITE_UI_DIRECTORY || 'Not available'}</p>
-
-        <h3>Component Details</h3>
-        <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
-          {JSON.stringify(ElementComponent, null, 2)}
-        </pre>
-
+        </Button>
+        {/* <Button
+          onClick={() => {
+            if (confirm('Clear component value? This will reset all data and IDs.')) {
+              setValue({});
+              localStorage.removeItem(VALUE_STORAGE_KEY);
+            }
+          }}
+          style={{ backgroundColor: '#fee2e2', color: '#991b1b' }}
+        >
+          Clear Value
+        </Button> */}
       </div>
-    </div>
+      <DevProvider storageKey="process-dev" >
+        <div style={{ border: '2px solid #007acc', padding: '20px', borderRadius: '8px', backgroundColor: '#f8f9fa' }}>
+
+          <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
+
+
+            <div style={{
+              border: '2px solid #dc2626',
+              borderRadius: '8px',
+              padding: '20px',
+              margin: '10px 0',
+              backgroundColor: '#fef2f2',
+              fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+              fontSize: '14px'
+            }}>
+              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
+                <span style={{
+                  fontSize: '20px',
+                  marginRight: '8px'
+                }}>💥</span>
+                <h3 style={{
+                  margin: 0,
+                  color: '#dc2626',
+                  fontSize: '18px',
+                  fontWeight: 'bold'
+                }}>
+                  Component Error
+                </h3>
+              </div>
+
+              <div style={{
+                backgroundColor: '#1f2937',
+                color: '#f9fafb',
+                padding: '16px',
+                borderRadius: '4px',
+                marginBottom: '16px',
+                overflow: 'auto',
+                maxHeight: '300px'
+              }}>
+                <div style={{ color: '#fca5a5', fontWeight: 'bold', marginBottom: '8px' }}>
+                  {error.name}: {error.message}
+                </div>
+                {error.stack && (
+                  <pre style={{
+                    margin: 0,
+                    whiteSpace: 'pre-wrap',
+                    fontSize: '12px',
+                    lineHeight: '1.4'
+                  }}>
+                    {error.stack}
+                  </pre>
+                )}
+              </div>
+
+              <div style={{ marginBottom: '16px' }}>
+                <h4 style={{ margin: '0 0 8px 0', color: '#374151', fontSize: '14px' }}>
+                  Error Details:
+                </h4>
+                <div style={{
+                  backgroundColor: '#f9fafb',
+                  padding: '12px',
+                  borderRadius: '4px',
+                  fontSize: '12px'
+                }}>
+                  <div><strong>Error Type:</strong> {error.name}</div>
+                  <div><strong>Message:</strong> {error.message}</div>
+                  {error.cause && <div><strong>Cause:</strong> {String(error.cause)}</div>}
+                  <div><strong>Timestamp:</strong> {new Date().toISOString()}</div>
+                </div>
+              </div>
+
+              <div style={{
+                display: 'flex',
+                gap: '12px',
+                alignItems: 'center'
+              }}>
+                <button
+                  onClick={resetErrorBoundary}
+                  style={{
+                    backgroundColor: '#dc2626',
+                    color: 'white',
+                    border: 'none',
+                    padding: '8px 16px',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    fontWeight: '500'
+                  }}
+                  onMouseOver={(e) => (e.target as HTMLElement).style.backgroundColor = '#b91c1c'}
+                  onMouseOut={(e) => (e.target as HTMLElement).style.backgroundColor = '#dc2626'}
+                >
+                  🔄 Try Again
+                </button>
+
+                <button
+                  onClick={() => {
+                    console.error('Component Error Details:', {
+                      error,
+                      stack: error.stack,
+                      timestamp: new Date().toISOString(),
+                      userAgent: navigator.userAgent,
+                      url: window.location.href
+                    });
+                    alert('Error details logged to console');
+                  }}
+                  style={{
+                    backgroundColor: '#6b7280',
+                    color: 'white',
+                    border: 'none',
+                    padding: '8px 16px',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    fontWeight: '500'
+                  }}
+                  onMouseOver={(e) => (e.target as HTMLElement).style.backgroundColor = '#4b5563'}
+                  onMouseOut={(e) => (e.target as HTMLElement).style.backgroundColor = '#6b7280'}
+                >
+                  📋 Log to Console
+                </button>
+              </div>
+
+              <div style={{
+                marginTop: '16px',
+                padding: '12px',
+                backgroundColor: '#eff6ff',
+                borderRadius: '4px',
+                fontSize: '12px',
+                color: '#1e40af'
+              }}>
+                <strong>💡 Debug Tips:</strong>
+                <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
+                  <li>Check the console for detailed error information</li>
+                  <li>Verify all required props are being passed to the component</li>
+                  <li>Check for undefined variables or missing imports</li>
+                  <li>Use browser dev tools to inspect the component state</li>
+                </ul>
+              </div>
+            </div>
+          )}>
+            {typeof ElementComponent === 'function' ? (
+              <ElementComponent
+                fieldName="devField"
+                fieldId="dev-field-1"
+                value={value}
+                onChange={(newValue: any) => setValue(newValue)}
+                onBlur={() => console.log('Component onBlur')}
+                readonly={readonly}
+              />
+            ) : (
+              <div style={{ color: '#666', fontStyle: 'italic' }}>
+                Component is not a valid React component. Type: {typeof ElementComponent}
+                <br />
+                <small>This might be the element metadata instead of the UI component.</small>
+              </div>
+            )}
+          </ErrorBoundary>
+        </div>
+        {/* <div style={{ marginBottom: '10px' }}>
+          <h3>Value</h3>
+          <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
+            {JSON.stringify(value, null, 2)}
+          </pre>
+        </div> */}
+        <div style={{ marginTop: '10px' }}>
+          <DevToolbar />
+        </div>
+
+        <div style={{ border: '1px solid #ccc', padding: '20px', marginTop: '20px', marginBottom: '20px', backgroundColor: '#f8f9fa' }}>
+          <h3>Loaded Component Information</h3>
+          <p><strong>Element:</strong> {import.meta.env.VITE_ELEMENT_NAME}</p>
+          <p><strong>Type:</strong> {import.meta.env.VITE_ELEMENT_TYPE}</p>
+          <p><strong>Action/Signal:</strong> {import.meta.env.VITE_ACTION_SIGNAL_KEY}</p>
+          <p><strong>Module Path:</strong> {import.meta.env.VITE_ELEMENT_PATH}</p>
+          <p><strong>UI Directory:</strong> {import.meta.env.VITE_UI_DIRECTORY || 'Not available'}</p>
+
+          <h3>Component Details</h3>
+          <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
+            {JSON.stringify(ElementComponent, null, 2)}
+          </pre>
+
+        </div>
+      </DevProvider>
+
+    </div >
   );
 }
 

package/.process/vite-env.d.ts

@@ -11,6 +11,9 @@ interface ImportMetaEnv {
   readonly VITE_PROPERTY_UI_PATH?: string;
   readonly VITE_MODULE_PATH?: string;
   readonly VITE_UI_DIRECTORY?: string;
+  readonly VITE_ELEMENT_MODULE?: string;
+  readonly VITE_CURRENT_ACTION_SIGNAL?: string;
+  readonly VITE_SELECTED_PROPERTY?: string;
 }
 
 interface ImportMeta {

package/.process/vite.config.cjs

@@ -4,6 +4,66 @@ const { defineConfig } = require('vite');
 const react = require('@vitejs/plugin-react');
 const path = require('path');
 const fs = require('fs');
+
+// Find where element-dev-server is installed
+// This could be in the user's node_modules or in a monorepo
+const elementDevServerRoot = path.resolve(__dirname, '..');
+
+// Debug mode - set PROC_DEV_DEBUG=true to see detailed logging
+const DEBUG = process.env.PROC_DEV_DEBUG === 'true';
+
+// Find the local @process.co/ui source for development (monorepo override)
+const localUISource = path.resolve(elementDevServerRoot, '..', 'ui', 'src');
+const localUIPackageRoot = path.resolve(elementDevServerRoot, '..', 'ui');
+const localUIBuiltCSS = path.resolve(localUIPackageRoot, 'css', 'ui.css');
+const hasLocalUISource = fs.existsSync(localUISource);
+if (DEBUG) {
+  if (hasLocalUISource) {
+    console.log('🎨 Using local @process.co/ui source from monorepo');
+    console.log('   Source:', localUISource);
+    console.log('   CSS:', localUIBuiltCSS);
+    console.log('   CSS exists?', fs.existsSync(localUIBuiltCSS));
+  } else {
+    console.log('📦 Using published @process.co/ui from npm');
+  }
+}
+
+// Find the local @process.co/utilities source for development (monorepo override)
+const localUtilitiesSource = path.resolve(elementDevServerRoot, '..', 'utilities', 'src');
+const hasLocalUtilitiesSource = fs.existsSync(localUtilitiesSource);
+if (DEBUG) {
+  if (hasLocalUtilitiesSource) {
+    console.log('🔧 Using local @process.co/utilities source from monorepo');
+    console.log('   Source:', localUtilitiesSource);
+  } else {
+    console.log('📦 Using published @process.co/utilities from npm');
+  }
+}
+
+// Function to find node_modules that contains our dependencies
+function findNodeModulesWithDeps() {
+  const possiblePaths = [
+    // In the element-dev-server package itself
+    path.join(elementDevServerRoot, 'node_modules'),
+    // One level up (for pnpm hoisting in user's project)
+    path.join(elementDevServerRoot, '..', '..'),
+    // Two levels up (for npm/yarn in user's project)
+    path.join(elementDevServerRoot, '..', '..', '..'),
+  ];
+  
+  for (const basePath of possiblePaths) {
+    const testPath = path.join(basePath, '@radix-ui', 'react-slot');
+    if (fs.existsSync(testPath)) {
+      return basePath;
+    }
+  }
+  
+  // Default to element-dev-server's node_modules
+  return path.join(elementDevServerRoot, 'node_modules');
+}
+
+const depsNodeModules = findNodeModulesWithDeps();
+if (DEBUG) console.log('🔍 Resolving UI dependencies from:', depsNodeModules);
  
 // Access environment variables passed from CLI
 const elementPath = process.env.VITE_ELEMENT_PATH;
@@ -28,11 +88,93 @@ const propertyUIPath = process.env.VITE_PROPERTY_UI_PATH;
 // console.log('Vite config index.html path:', path.resolve(__dirname, 'index.html'));
 // console.log('Vite config index.tsx path:', path.resolve(__dirname, 'index.tsx'));
 
-module.exports = defineConfig({
-  plugins: [
-    react(),
-    {
-      name: 'element-virtual-modules',
+// Build plugins array
+const plugins = [react()];
+
+// Add CSS resolver if in monorepo
+if (hasLocalUISource) {
+  if (DEBUG) console.log('🔧 Adding ui-css-resolver plugin');
+  plugins.push({
+    name: 'ui-css-resolver',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      if (DEBUG) console.log('🔍 ui-css-resolver checking:', source);
+      if (source === '@process.co/ui/styles') {
+        if (DEBUG) console.log('✅ Resolving @process.co/ui/styles to:', localUIBuiltCSS);
+        return localUIBuiltCSS;
+      }
+      return null;
+    }
+  });
+  if (DEBUG) console.log('✅ ui-css-resolver plugin added, total plugins:', plugins.length);
+}
+
+// Add UI package alias resolver if in monorepo
+if (hasLocalUISource) {
+  plugins.push({
+      name: 'ui-package-alias-resolver',
+      enforce: 'pre',
+      resolveId(source, importer) {
+        // Only process @/ imports
+        if (!source.startsWith('@/')) return null;
+        
+        // Only process if importer is from the UI source
+        if (!importer) return null;
+        
+        // Convert importer to absolute path if it's relative
+        let absoluteImporter = importer;
+        if (!path.isAbsolute(importer)) {
+          // If it's a relative path like "../../ui/src/...", resolve it from the .process directory
+          // __dirname is the .process directory where this config file lives
+          absoluteImporter = path.resolve(__dirname, importer);
+        }
+        
+        const normalizedImporter = path.normalize(absoluteImporter);
+        const normalizedUISource = path.normalize(localUISource);
+        
+        // Check if the importer is from the UI source
+        if (!normalizedImporter.includes(normalizedUISource)) return null;
+        
+        const relativePath = source.substring(2); // Remove '@/'
+        const resolvedPath = path.join(localUISource, relativePath);
+        
+        // Try common extensions
+        const extensions = ['.ts', '.tsx', '.js', '.jsx'];
+        for (const ext of extensions) {
+          const testPath = resolvedPath + ext;
+          if (fs.existsSync(testPath)) {
+            const stats = fs.statSync(testPath);
+            if (stats.isFile()) {
+              return testPath;
+            }
+          }
+        }
+        
+        // Try without extension (might already have one)
+        if (fs.existsSync(resolvedPath)) {
+          const stats = fs.statSync(resolvedPath);
+          if (stats.isFile()) {
+            return resolvedPath;
+          }
+          
+          // It's a directory, try index files
+          if (stats.isDirectory()) {
+            for (const indexFile of ['index.ts', 'index.tsx', 'index.js', 'index.jsx']) {
+              const indexPath = path.join(resolvedPath, indexFile);
+              if (fs.existsSync(indexPath)) {
+                return indexPath;
+              }
+            }
+          }
+        }
+        
+        return null;
+      }
+    });
+}
+
+plugins.push({
+  name: 'element-virtual-modules',
       resolveId(source) {
         // Main element module
         if (source === '/element-main') {
@@ -77,9 +219,10 @@ module.exports = defineConfig({
         }
         return null;
       }
-    },
-    {
-      name: 'external-element-loader',
+    });
+
+plugins.push({
+  name: 'external-element-loader',
 
       configureServer(server) {
         // Set up file watching for the element directory
@@ -113,6 +256,99 @@ module.exports = defineConfig({
             }
           });
         }
+        
+        // Also watch the local @process.co/ui source for hot reloading
+        if (hasLocalUISource) {
+          if (DEBUG) console.log(`🔍 Setting up file watching for @process.co/ui source: ${localUISource}`);
+          server.watcher.add(localUISource);
+          
+          // Watch CSS source files and trigger rebuild
+          const cssSourceFiles = [
+            path.join(localUISource, 'styles'),
+            path.join(localUISource, 'themes')
+          ];
+          cssSourceFiles.forEach(dir => {
+            if (fs.existsSync(dir)) {
+              server.watcher.add(dir);
+            }
+          });
+          
+          let cssRebuildTimeout = null;
+          
+          server.watcher.on('change', (file) => {
+            if (file.startsWith(localUISource)) {
+              if (DEBUG) console.log(`🎨 @process.co/ui source file changed: ${file}`);
+              
+              // Check if it's a CSS-related file
+              const isCSSFile = file.includes('/styles/') || file.includes('/themes/') || file.endsWith('.css');
+              
+              if (isCSSFile) {
+                console.log(`🎨 CSS source changed, rebuilding...`);
+                
+                // Debounce CSS rebuilds
+                clearTimeout(cssRebuildTimeout);
+                cssRebuildTimeout = setTimeout(async () => {
+                  try {
+                    const { exec } = require('child_process');
+                    const { promisify } = require('util');
+                    const execAsync = promisify(exec);
+                    
+                    if (DEBUG) console.log('📦 Rebuilding CSS...');
+                    await execAsync('pnpm run generate:css', { cwd: localUIPackageRoot });
+                    console.log('✅ CSS rebuilt');
+                    
+                    // Invalidate the CSS module and trigger full reload
+                    const cssModule = server.moduleGraph.getModuleById(localUIBuiltCSS);
+                    if (cssModule) {
+                      server.moduleGraph.invalidateModule(cssModule);
+                    }
+                    
+                    server.ws.send({
+                      type: 'full-reload',
+                      path: '*'
+                    });
+                  } catch (error) {
+                    console.error('❌ Failed to rebuild CSS:', error.message);
+                  }
+                }, 500);
+              } else {
+                // For non-CSS files, just trigger HMR
+                const module = server.moduleGraph.getModuleById(file);
+                if (module) {
+                  server.moduleGraph.invalidateModule(module);
+                }
+                
+                server.ws.send({
+                  type: 'full-reload',
+                  path: '*'
+                });
+              }
+            }
+          });
+        }
+        
+        // Also watch the local @process.co/utilities source for hot reloading
+        if (hasLocalUtilitiesSource) {
+          if (DEBUG) console.log(`🔍 Setting up file watching for @process.co/utilities source: ${localUtilitiesSource}`);
+          server.watcher.add(localUtilitiesSource);
+          
+          server.watcher.on('change', (file) => {
+            if (file.startsWith(localUtilitiesSource)) {
+              if (DEBUG) console.log(`🔧 @process.co/utilities source file changed: ${file}`);
+              
+              // Trigger HMR
+              const module = server.moduleGraph.getModuleById(file);
+              if (module) {
+                server.moduleGraph.invalidateModule(module);
+              }
+              
+              server.ws.send({
+                type: 'full-reload',
+                path: '*'
+              });
+            }
+          });
+        }
       },
 
       resolveId(source, importer) {
@@ -230,16 +466,28 @@ module.exports = defineConfig({
         
         return ctx.modules;
       }
-    }
-  ],
+    });
+
+module.exports = defineConfig({
+  plugins,
   // root is set programmatically in the CLI
   server: {
     port: 5173,
     open: true,
     host: true,
     fs: {
-      // Allow serving files from outside the root
-      allow: ['..']
+      // Allow serving files from outside the root, including our deps node_modules
+      allow: [
+        '..',
+        elementDevServerRoot,
+        depsNodeModules,
+        // Allow the user's element directory
+        ...(elementPath ? [elementPath, path.dirname(elementPath)] : []),
+        // Allow the local @process.co/ui source for hot reloading
+        ...(hasLocalUISource ? [localUISource, path.dirname(localUISource)] : []),
+        // Allow the local @process.co/utilities source for hot reloading
+        ...(hasLocalUtilitiesSource ? [localUtilitiesSource, path.dirname(localUtilitiesSource)] : [])
+      ]
     },
     watch: {
       // Watch external directories for changes
@@ -257,6 +505,19 @@ module.exports = defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(process.cwd(), 'src'),
+      // Override @process.co/ui with local monorepo source in dev mode
+      // ORDER MATTERS: More specific paths must come BEFORE more general ones!
+      ...(hasLocalUISource && {
+        // Put subpath exports FIRST so they match before the general @process.co/ui
+        '@process.co/ui/styles': localUIBuiltCSS,
+        '@process.co/ui/fields': path.join(localUISource, 'components', 'fields'),
+        '@process.co/ui/dev': path.join(localUISource, 'components', 'dev'),
+        '@process.co/ui': localUISource
+      }),
+      // Override @process.co/utilities with local monorepo source in dev mode
+      ...(hasLocalUtilitiesSource && {
+        '@process.co/utilities': localUtilitiesSource
+      }),
       // Dynamically map element paths based on the elementPath from CLI
       ...(elementPath && {
         // Map the element directory to a virtual path that Vite can resolve
@@ -267,10 +528,27 @@ module.exports = defineConfig({
           'ui'
         )
       })
-    }
+    },
+    // Resolve modules from the element-dev-server's node_modules
+    // This allows the dev server to provide all dependencies
+    preserveSymlinks: false,
   },
+  // Tell Vite where to find dependencies - use the discovered node_modules
+  cacheDir: path.join(depsNodeModules, '.vite'),
   optimizeDeps: {
-    include: ['react', 'react-dom']
+    include: ['react', 'react-dom', 'clsx', 'tailwind-merge', 'zustand', 'uuid', '@monaco-editor/react', '@fortawesome/react-fontawesome', '@fortawesome/pro-regular-svg-icons', '@fortawesome/pro-solid-svg-icons', '@fortawesome/pro-duotone-svg-icons', '@fortawesome/pro-light-svg-icons', '@radix-ui/react-slot', '@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-separator', '@radix-ui/react-tooltip', '@radix-ui/react-popover', '@radix-ui/react-accordion', '@radix-ui/react-tabs', '@radix-ui/react-toggle', '@radix-ui/react-toggle-group', '@radix-ui/react-progress', '@radix-ui/react-radio-group', '@radix-ui/react-scroll-area', '@radix-ui/react-select', '@radix-ui/react-slider', '@radix-ui/react-switch'],
+    // Exclude local UI source, utilities source, and external elements from optimization for hot reloading
+    exclude: [
+      ...(hasLocalUISource ? ['@process.co/ui'] : []),
+      ...(hasLocalUtilitiesSource ? ['@process.co/utilities'] : []),
+      ...(elementPath ? [elementPath] : [])
+    ],
+    // Force Vite to look in element-dev-server's node_modules for these deps
+    esbuildOptions: {
+      resolveExtensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
+      // Use the discovered node_modules path
+      nodePaths: [depsNodeModules]
+    }
   },
   // Environment variables will be passed programmatically
 });

package/README.md

@@ -1,107 +1,228 @@
-# Process.co Element Dev Server
+# @process.co/element-dev-server
 
-A CLI tool for developing Process.co elements with an interactive development server.
+A development harness for previewing and testing Process.co element UI components without needing to set up a full development environment.
 
-## Installation
+## ✨ Features
 
-```bash
+- **Zero Configuration**: Just install and run - no need to install UI dependencies separately
+- **Auto-Discovery**: Automatically finds and serves all required UI library dependencies
+- **FontAwesome Pro Included**: All FontAwesome Pro icon sets bundled (if you have access)
+- **Hot Reload**: Instant updates as you modify your element UI components
+- **Interactive Selection**: Visual interface to select elements, actions, and properties to test
 
-npm i @process.co/element-dev-server -g
+## 📦 Installation
 
+```bash
+# In your element project
+pnpm add -D @process.co/element-dev-server
 ```
 
-## Usage
+That's it! No need to install:
+- ❌ `@process.co/ui`
+- ❌ `@radix-ui/*` components
+- ❌ `@fortawesome/*` packages
+- ❌ `zustand`, `@monaco-editor/react`, etc.
 
-The CLI accepts an optional path argument to specify which directory to scan for Process.co element modules:
+All dependencies are automatically provided by the dev server! 🎉
 
-or you can run from within your element's directory or one directory above run the following command
+## 🚀 Usage
+
+### Basic Usage
 
 ```bash
+npx proc-dev
+```
 
-proc-dev
+This will:
+1. Scan your project for elements
+2. Show an interactive menu to select an element
+3. Let you choose an action/signal and property to preview
+4. Launch a Vite dev server at `http://localhost:5173`
 
+### What You'll See
+
+```
+╭─────────────────────────────────────────╮
+│ Process.co Element Development Server  │
+╰─────────────────────────────────────────╯
+
+Select an element to develop:
+> process_internal
+  my-custom-element
+  another-element
+
+Select an action/signal:
+> Action: Switch
+  Action: Transform
+  Signal: DataReceived
+
+Select a property to preview:
+> cases (ui.switch)
+  defaultValue (text)
 ```
 
+The dev server will then launch with your selected UI component loaded and ready to test!
 
-## Features
+## 🔍 How It Works
 
-- **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
+### Automatic Dependency Resolution
 
-## How It Works
+The dev server uses a smart resolution strategy to find UI dependencies:
 
-The CLI uses the `@process.co/elements` library to:
+1. **Searches multiple locations**:
+   - In the element-dev-server package itself
+   - One level up (for pnpm hoisting)
+   - Two levels up (for npm/yarn nesting)
 
-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
+2. **Provides all dependencies** including:
+   - ✅ `@process.co/ui` - Complete UI library
+   - ✅ All `@radix-ui/*` components (18+ packages)
+   - ✅ FontAwesome Pro icons (regular, solid, light, duotone)
+   - ✅ `@monaco-editor/react` - Code editor
+   - ✅ `zustand` - State management
+   - ✅ Common utilities (bundled: `clsx`, `tailwind-merge`, `class-variance-authority`)
 
-## Development
+3. **Logs the resolution**:
+   ```
+   🔍 Resolving UI dependencies from: /path/to/node_modules
+   ```
 
-```bash
-# Build the project
-pnpm build
+### Vite Configuration
+
+The dev server automatically configures Vite to:
+- Allow serving files from outside the project root
+- Resolve modules from the discovered dependency location
+- Pre-bundle and optimize all UI dependencies
+- Watch your element files for changes and hot-reload
 
-# Run in development mode
-pnpm cli
+## 📁 Project Structure Expected
 
-# Watch for changes
-pnpm dev
+Your element project should have this structure:
+
+```
+your-element-project/
+├── package.json
+├── node_modules/
+│   └── @process.co/element-dev-server/  # Installed here
+└── elements/
+    └── your-element/
+        ├── index.ts (or .mts)
+        ├── actions/
+        │   └── someAction/
+        │       ├── index.ts
+        │       └── ui/
+        │           └── someProperty.tsx  # Your UI component
+        └── signals/
+            └── someSignal/
+                ├── index.ts
+                └── ui/
+                    └── someProperty.tsx
 ```
 
-## Requirements
+## 🎨 Developing UI Components
+
+### Example UI Component
+
+```typescript
+// elements/your-element/actions/transform/ui/config.tsx
+import { Button, Input } from '@process.co/ui';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWand } from '@fortawesome/pro-solid-svg-icons';
+
+export default function ConfigUI({ value, onChange, readonly }) {
+  return (
+    <div className="space-y-4">
+      <Input
+        value={value.name}
+        onChange={(e) => onChange({ ...value, name: e.target.value })}
+        disabled={readonly}
+        placeholder="Enter name..."
+      />
+      <Button onClick={() => console.log('Transform!')}>
+        <FontAwesomeIcon icon={faWand} className="mr-2" />
+        Transform
+      </Button>
+    </div>
+  );
+}
+```
 
-- 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)
+All imports work automatically - no additional setup required!
 
-## Element Module Format
+## 🛠️ Troubleshooting
 
-Elements should be exported as modules with the following structure:
+### Dependencies Not Found
 
-```javascript
-// example-element.mjs
-export default {
-  name: 'Example Element',
-  type: 'app', // or 'action', 'signal', 'credential'
-  description: 'An example element',
-  // ... other properties
-};
+If you see errors like:
+```
+ERROR: Could not resolve "@radix-ui/react-slot"
 ```
 
-## Error Handling
+**Solution**: Check the console output for the dependency resolution path:
+```
+🔍 Resolving UI dependencies from: /path/to/node_modules
+```
 
-The CLI provides clear error messages for common issues:
+Verify that path contains the expected packages. If not, try:
+```bash
+rm -rf node_modules
+pnpm install
+```
 
-- **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
+### Vite Port Already in Use
 
-## Examples
+The dev server uses port `5173` by default. If it's in use, you'll see an error.
 
-```bash
-# From a project root with element modules
-process-element
+**Solution**: Stop any other Vite servers or modify the port in `.process/vite.config.cjs`
+
+### FontAwesome Icons Not Working
+
+If you don't have FontAwesome Pro access, some icons won't be available.
+
+**Solution**: The dev server gracefully handles missing FontAwesome packages. If you need specific icon sets, ensure you have access to FontAwesome Pro and they're installed in the monorepo.
+
+## 📝 Package Manager Compatibility
+
+### pnpm (Recommended) ✅
+Works perfectly with pnpm's hoisting strategy.
 
-# From anywhere, pointing to a specific project
-process-element ~/projects/my-process-app
+### npm ✅
+Works with npm's nested node_modules.
 
-# Using relative paths
-process-element ./elements
+### yarn ✅
+Works with yarn's hoisting.
+
+## 🔐 FontAwesome Pro
+
+If you have FontAwesome Pro access configured in your `.npmrc`:
+
+```ini
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=YOUR-TOKEN
 ```
 
-## Element Discovery
+The dev server automatically includes these icon sets:
+- `@fortawesome/pro-regular-svg-icons`
+- `@fortawesome/pro-solid-svg-icons`
+- `@fortawesome/pro-light-svg-icons`
+- `@fortawesome/pro-duotone-svg-icons`
+
+## 📚 Additional Documentation
+
+- [Dependency Resolution](./DEPENDENCY-RESOLUTION.md) - Deep dive into how dependencies are discovered and served
+- [UI Library Peer Dependencies](../ui/PEER_DEPENDENCIES.md) - Complete list of available UI components
+
+## 🤝 Contributing
+
+When publishing to npm, this package should include:
+- All Radix UI components
+- FontAwesome React wrapper
+- Monaco Editor
+- Zustand
+- The `.process/` directory with Vite config
 
-The CLI will automatically discover elements that:
+The `tsup` build only bundles the CLI code - dependencies are included via package.json.
 
-- 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
+## 📄 License
 
-Elements are displayed with their name and type for easy identification. 
+ISC

package/dist/chunk-JIIM2FST.js

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

package/dist/chunk-TP2HSEPI.js

@@ -0,0 +1 @@
+import{useState as d,useEffect as H,useRef as ce}from"react";import{Box as m,Text as e}from"ink";import W from"ink-select-input";import y from"fs";import u from"path";import{createServer as ue}from"vite";import{fileURLToPath as me}from"url";import S from"@process.co/element-dev-support/dist/index.js";import{Fragment as ge,jsx as o,jsxs as r}from"react/jsx-runtime";var Pe=({rootDir:f})=>{let[L,V]=d([]),[T,Q]=d(null),[k,Z]=d([]),[A,ee]=d(null),[B,te]=d([]),[ne,R]=d(null),[K,re]=d(null),[x,c]=d("loading"),[w,G]=d("elements"),[C,X]=d([]),U=ce(X);U.current=X;let[$,oe]=d(null),[pe,ie]=d(null),[se,le]=d(!1),ae=async(a,t,i)=>{try{let l=y.statSync(a).isDirectory()?a:u.dirname(a),s=i==="action"?"actions":"sources",n=u.join(l,s);if(!y.existsSync(n))return null;let g=(await S.importFolderModulesOfType(s,i,l,["common"])).find(p=>p.key===t);if(!g)return null;let P=y.readdirSync(n).filter(p=>{let h=u.join(n,p);return y.statSync(h).isDirectory()}),_=null,j=null;for(let p of P){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 F of J){let I=u.join(h,F);if(y.existsSync(I))try{let{module:D}=await S.importFromPath(I);if(D.key===t){_=I,j=h;break}}catch{continue}}if(_)break}if(!_)return null;let N=u.join(l,"ui");return g&&g.ui&&(N=u.join(l,"ui",g.ui)),{modulePath:_,uiDir:N}}catch{return null}};H(()=>{(async()=>{try{try{let s=await S.autoDetectElement(f);if(s!=="pipedream"){let n=await S.loadElementPointers(f,s);V([{label:`${n.name} (${n.elementType})`,value:n.name,info:n,path:f}]),c("ready");return}}catch{}let t=y.readdirSync(f,{withFileTypes:!0}),i=[];for(let s of t){let n=u.join(f,s.name);if(s.isDirectory())try{y.readdirSync(n).some(g=>g.endsWith(".mjs")||g.endsWith(".mts")||g.endsWith(".js")||g.endsWith(".ts")||g.endsWith(".tsx")||g.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 S.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")}})()},[f]),H(()=>{$&&x==="launching"&&c("dev-server-running")},[$,x]),H(()=>{},[x]);let M=async(a,t,i)=>{if(!a)return;let l=await ae(a.path,t.value,t.type);if(!l){c("error");return}let s=y.statSync(a.path).isDirectory()?a.path:u.dirname(a.path),n=u.join(s,"dev"),O=y.existsSync(n)?n:s,g=me(import.meta.url),P=u.dirname(g),_=u.resolve(P,"../.process/vite.config.cjs"),j=u.join(O,"vite.config.js"),N=u.join(O,"vite.config.ts"),p=_;y.existsSync(j)?p=j:y.existsSync(N)&&(p=N);let h=await S.loadElementPointers(a.path,"auto"),J=h.actions?.find(E=>E.key===t.value)||h.signals?.find(E=>E.key===t.value),F=[u.resolve(process.cwd(),"process-co","ui","src"),u.resolve(P,"..","..","ui","src"),u.resolve(P,"..","ui","src")],I=!1;for(let E of F)if(y.existsSync(E)){I=!0;break}le(I),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,process.env.VITE_HAS_LOCAL_UI_SOURCE=I?"true":"false";let D=1;try{let E=await ue({configFile:p,root:u.resolve(P,"../.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),"import.meta.env.VITE_HAS_LOCAL_UI_SOURCE":JSON.stringify(I)},logLevel:"info",customLogger:{info(v){U.current(b=>[...b,v].slice(-D))},warn(v){console.warn(`[warn] ${v}`),U.current(b=>[...b,`[warn] ${v}`].slice(-D))},error(v){console.error(`[error] ${v}`),U.current(b=>[...b,`[error] ${v}`].slice(-D))},clearScreen(){},hasWarned:!1,warnOnce(v){},hasErrorLogged:()=>!1}});await E.listen();let z=`http://localhost:${E.config.server?.port||5173}`;oe(z),ie(`Dev server running at ${z}`);let q=()=>{E.close()};process.on("SIGINT",q),process.on("SIGTERM",q),E.watcher.on("change",v=>{}),c("dev-server-running"),process.stdin.resume()}catch{c("error")}},Y=async a=>{if(w==="elements"){let t=L.find(i=>i.value===a.value);if(!t)return;Q(t),c("loading-actions-signals");try{let i=await S.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"}),Z(l),G("actions-signals"),c("ready")}catch{c("error")}}else if(w==="actions-signals"){let t=k.find(i=>i.value===a.value);if(!t||!T)return;ee(t),c("loading-properties");try{let i=await S.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){R(t.value),c("launching"),M(T,t,null).catch(n=>{c("error")});return}if(!l||!l.props){R(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){R(t.value),c("launching"),await M(T,t,null);return}te(s),G("properties"),c("ready")}catch{c("error")}}else{let t=B.find(i=>i.value===a.value);if(!t||!A||!T)return;re(t),R(t.value),c("launching"),await M(T,A,t)}};return x==="loading"?r(m,{flexDirection:"column",marginTop:2,children:[r(e,{children:["\u{1F50D} Loading elements from: ",o(e,{color:"cyan",children:f})]}),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:f})]}),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:f})]}),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:A?.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:ne}),"'..."]}),r(e,{children:["Directory: ",o(e,{color:"cyan",children:f})]})]}):x==="dev-server-running"?r(ge,{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:$})]}),r(e,{children:["Element: ",o(e,{color:"#01D4E7",children:T?.info.name})]}),r(e,{children:["Action/Signal: ",o(e,{color:"#01D4E7",children:A?.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"})]}),se&&r(e,{children:["UI Source: ",o(e,{color:"#8759F2",children:"Local Monorepo (Hot Reload Enabled)"})]}),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..."})]})]}):w==="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:A?.label})]}),r(e,{children:["Found ",B.length," property(ies):"]}),o(W,{items:B,onSelect:Y})]}):w==="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:Y})]})]}):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:f})]}),r(m,{flexDirection:"column",marginTop:1,children:[r(e,{children:["Found ",L.length," element(s):"]}),o(W,{items:L,onSelect:Y})]})]}),o(fe,{logs:C})]})},fe=({logs:f})=>f.length?r(m,{flexDirection:"column",marginTop:1,children:[o(e,{color:"gray",children:"Output:"}),f.map((L,V)=>o(e,{color:"gray",children:L},V))]}):null;export{Pe as a};

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/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(`
+import{b as t}from"./chunk-QPYNK3X7.js";import{a as r}from"./chunk-TP2HSEPI.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]
 

package/dist/ui.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@process.co/element-dev-server",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Helper Library for developing elements for Process.co",
   "type": "module",
   "main": "dist/index.js",
@@ -22,6 +22,10 @@
     "registry": "https://registry.npmjs.org",
     "scope": "@process.co"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/process-co/npm-element-dev-server.git"
+  },
   "release": {
     "branches": [
       "main"
@@ -46,9 +50,36 @@
   },
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/pro-duotone-svg-icons": "^6.7.2",
+    "@fortawesome/pro-light-svg-icons": "^6.7.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@monaco-editor/react": "^4.7.0",
     "@process.co/element-dev-support": "github:process-co/npm-element-dev-support#main",
+    "@process.co/ui": "^0.0.14",
+    "@process.co/utilities": "^0.0.1",
+    "uuid": "^11.1.0",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "ink": "^6.0.1",
     "ink-select-input": "^6.2.0",
     "io-ts": "^2.2.22",
@@ -56,17 +87,18 @@
     "querystring": "^0.2.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-error-boundary": "^5.0.0",
+    "tailwind-merge": "^3.0.2",
     "tsup": "^8.5.0",
     "tsx": "^4.19.1",
     "type-fest": "^4.21.0",
-    "vite": "^7.0.2"
+    "vite": "^7.0.2",
+    "zustand": "^5.0.3"
   },
   "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",
@@ -77,4 +109,4 @@
     "typescript": "^5.7.3"
   },
   "registry": "https://registry.npmjs.org"
-}
+}

package/src/ui.tsx

@@ -49,6 +49,7 @@ export const DevUI = ({ rootDir }: { rootDir: string }) => {
   const [viteUrl, setViteUrl] = useState<string | null>(null);
   // Add a serverMessage state for display messages
   const [serverMessage, setServerMessage] = useState<string | null>(null);
+  const [usingLocalUI, setUsingLocalUI] = useState<boolean>(false);
 
   // 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> => {
@@ -282,6 +283,25 @@ export const DevUI = ({ rootDir }: { rootDir: string }) => {
     const currentActionSignal = (elementModule.actions as any[])?.find(action => action.key === actionSignal.value) ||
       (elementModule.signals as any[])?.find(signal => signal.key === actionSignal.value);
 
+    // Check if we're in monorepo with local UI source (from Node.js context)
+    // Try multiple possible paths to find the UI source
+    const possibleUIPaths = [
+      path.resolve(process.cwd(), 'process-co', 'ui', 'src'),
+      path.resolve(__dirname, '..', '..', 'ui', 'src'),
+      path.resolve(__dirname, '..', 'ui', 'src'),
+    ];
+    
+    let hasLocalUISource = false;
+    for (const uiPath of possibleUIPaths) {
+      if (fs.existsSync(uiPath)) {
+        hasLocalUISource = true;
+        break;
+      }
+    }
+    
+    // Update state to show in banner
+    setUsingLocalUI(hasLocalUISource);
+    
     // Set process.env variables for Vite config
     process.env.VITE_ELEMENT_PATH = element.path;
     process.env.VITE_ELEMENT_TYPE = actionSignal.type;
@@ -292,6 +312,7 @@ export const DevUI = ({ rootDir }: { rootDir: string }) => {
     process.env.VITE_PROPERTY_UI_PATH = property?.uiPath || '';
     process.env.VITE_MODULE_PATH = moduleInfo.modulePath;
     process.env.VITE_UI_DIRECTORY = moduleInfo.uiDir;
+    process.env.VITE_HAS_LOCAL_UI_SOURCE = hasLocalUISource ? 'true' : 'false';
 
 
     const viteLogLength = 1;
@@ -319,13 +340,25 @@ export const DevUI = ({ rootDir }: { rootDir: string }) => {
           // 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)
+          'import.meta.env.VITE_SELECTED_PROPERTY': JSON.stringify(property),
+          'import.meta.env.VITE_HAS_LOCAL_UI_SOURCE': JSON.stringify(hasLocalUISource)
         },
         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)); },
+          info(msg) { 
+            // Only capture in UI, don't output to console (prevents HMR noise)
+            viteLogsRef.current(logs => [...logs, msg].slice(-viteLogLength)); 
+          },
+          warn(msg) { 
+            // Show warnings in console
+            console.warn(`[warn] ${msg}`);
+            viteLogsRef.current(logs => [...logs, `[warn] ${msg}`].slice(-viteLogLength)); 
+          },
+          error(msg) { 
+            // Show errors in console
+            console.error(`[error] ${msg}`);
+            viteLogsRef.current(logs => [...logs, `[error] ${msg}`].slice(-viteLogLength)); 
+          },
           clearScreen() { },
           hasWarned: false,
           warnOnce(msg) { },
@@ -574,6 +607,7 @@ export const DevUI = ({ rootDir }: { rootDir: string }) => {
           ) : (
             <Text>UI Mode: <Text color="#01D4E7">Action/Signal Level</Text></Text>
           )}
+          {usingLocalUI && <Text>UI Source: <Text color="#8759F2">Local Monorepo (Hot Reload Enabled)</Text></Text>}
           <Text color="yellow">Press Ctrl+C to stop the server</Text>
         </Box>
         <Box marginTop={1} marginLeft={4} flexDirection="column">