@runflow-ai/cli 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runflow-ai/cli",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Official CLI for RunFlow AI platform - manage agents, deploy code, and interact with AI workflows from your terminal",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,6 +50,8 @@
   },
   "files": [
     "dist/**/*",
+    "static/**/*",
+    "scenarios/**/*",
     "README.md",
     "CLI-DOCS.md"
   ],

package/scenarios/README.md

@@ -0,0 +1,71 @@
+# 🧪 Test Scenarios
+
+Default test scenarios for Runflow CLI test interface.
+
+## 📁 Structure
+
+Each scenario is a JSON file with:
+- **name**: Display name
+- **description**: What this scenario tests
+- **category**: Group (E-commerce, Payments, Testing, etc.)
+- **variables**: Customizable values
+- **payload**: The actual JSON sent to your agent
+
+## 🎯 How It Works
+
+### CLI Default Scenarios
+Located in `core/runflow-cli/scenarios/`:
+- Always available
+- Provided by Runflow
+- Cover common integrations
+
+### Project Custom Scenarios
+Located in your project `test-scenarios/`:
+- Project-specific
+- Custom webhooks
+- Your own test cases
+
+## 📝 Creating Custom Scenarios
+
+In your project root, create `test-scenarios/my-scenario.json`:
+
+```json
+{
+  "name": "My Custom Webhook",
+  "description": "Tests my specific integration",
+  "category": "Custom",
+  "variables": {
+    "userId": "user-123",
+    "action": "signup"
+  },
+  "payload": {
+    "event": "{{action}}",
+    "user": {
+      "id": "{{userId}}"
+    }
+  }
+}
+```
+
+## 🔧 Variable Interpolation
+
+Use `{{variableName}}` in payload:
+- String values: `"{{userName}}"` → `"John"`
+- Numeric values: `{{amount}}` → `99.99`
+- Nested objects: Supported
+
+## 🚀 Using in Test Interface
+
+1. Run `rf test`
+2. Select "Custom JSON payload" mode
+3. Choose scenario from dropdown
+4. Edit variables if needed
+5. Send test
+
+## 📚 Examples Included
+
+- `webhook-shopify.json` - E-commerce webhooks
+- `webhook-stripe.json` - Payment webhooks
+- `memory-conversation.json` - Memory testing with messages[]
+
+Create your own in `test-scenarios/` directory!

package/scenarios/memory-conversation.json

@@ -0,0 +1,23 @@
+{
+  "name": "Memory - Conversation Test",
+  "description": "Test conversation memory with context",
+  "category": "Testing",
+  "variables": {
+    "userName": "João",
+    "userRole": "developer"
+  },
+  "payload": {
+    "message": "What's my name and role?",
+    "messages": [
+      {
+        "role": "user",
+        "content": "My name is {{userName}} and I work as a {{userRole}}"
+      },
+      {
+        "role": "assistant",
+        "content": "Hello {{userName}}! Nice to meet a {{userRole}}!"
+      }
+    ],
+    "sessionId": "memory-test-session"
+  }
+}

package/scenarios/test-messages-array.json

@@ -0,0 +1,19 @@
+{
+  "name": "Messages Array Test",
+  "description": "Test with conversation history using messages[]",
+  "category": "Testing",
+  "variables": {
+    "userName": "Alice",
+    "userQuestion": "What did I tell you about myself?"
+  },
+  "payload": {
+    "message": "{{userQuestion}}",
+    "messages": [
+      {"role": "user", "content": "Hi! My name is {{userName}} and I love coding."},
+      {"role": "assistant", "content": "Hello {{userName}}! That's great that you enjoy coding!"},
+      {"role": "user", "content": "I also work with Python and TypeScript."},
+      {"role": "assistant", "content": "Nice! Python and TypeScript are excellent choices."}
+    ],
+    "sessionId": "messages-test-session"
+  }
+}

package/scenarios/test-metadata-custom.json

@@ -0,0 +1,22 @@
+{
+  "name": "Custom Metadata Test",
+  "description": "Test with custom metadata fields",
+  "category": "Testing",
+  "variables": {
+    "userId": "user-12345",
+    "companyId": "company-67890",
+    "priority": "high",
+    "tags": "urgent,sales"
+  },
+  "payload": {
+    "message": "Process this request",
+    "userId": "{{userId}}",
+    "companyId": "{{companyId}}",
+    "metadata": {
+      "priority": "{{priority}}",
+      "tags": "{{tags}}",
+      "source": "api",
+      "timestamp": "2024-01-01T12:00:00Z"
+    }
+  }
+}

package/scenarios/webhook-hubspot-contact.json

@@ -0,0 +1,40 @@
+{
+  "name": "HubSpot - Contact Created",
+  "description": "Simulates HubSpot webhook for new contact",
+  "category": "CRM",
+  "variables": {
+    "contactId": "12345",
+    "email": "john.doe@example.com",
+    "firstName": "John",
+    "lastName": "Doe",
+    "phone": "+5511999887766"
+  },
+  "payload": {
+    "subscriptionType": "contact.creation",
+    "portalId": 62515,
+    "objectId": {{contactId}},
+    "propertyName": "email",
+    "propertyValue": "{{email}}",
+    "changeSource": "CRM_UI",
+    "eventId": 3816279340,
+    "subscriptionId": 25,
+    "attemptNumber": 0,
+    "contact": {
+      "vid": {{contactId}},
+      "properties": {
+        "email": {
+          "value": "{{email}}"
+        },
+        "firstname": {
+          "value": "{{firstName}}"
+        },
+        "lastname": {
+          "value": "{{lastName}}"
+        },
+        "phone": {
+          "value": "{{phone}}"
+        }
+      }
+    }
+  }
+}

package/scenarios/webhook-meta-messenger.json

@@ -0,0 +1,33 @@
+{
+  "name": "Meta - Messenger Message",
+  "description": "Simulates Meta/Facebook Messenger webhook",
+  "category": "Messaging",
+  "variables": {
+    "senderId": "1234567890",
+    "recipientId": "0987654321",
+    "messageText": "Hey, can you help me?",
+    "timestamp": "1234567890"
+  },
+  "payload": {
+    "object": "page",
+    "entry": [
+      {
+        "messaging": [
+          {
+            "sender": {
+              "id": "{{senderId}}"
+            },
+            "recipient": {
+              "id": "{{recipientId}}"
+            },
+            "timestamp": {{timestamp}},
+            "message": {
+              "mid": "mid.1234567890",
+              "text": "{{messageText}}"
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

package/scenarios/webhook-shopify.json

@@ -0,0 +1,24 @@
+{
+  "name": "Shopify - Order Created",
+  "description": "Simulates Shopify webhook when order is created",
+  "category": "E-commerce",
+  "variables": {
+    "orderId": "12345",
+    "customerName": "John Doe",
+    "total": "299.99",
+    "currency": "USD"
+  },
+  "payload": {
+    "event": "orders/create",
+    "data": {
+      "order": {
+        "id": "{{orderId}}",
+        "customer": {
+          "name": "{{customerName}}"
+        },
+        "total_price": "{{total}}",
+        "currency": "{{currency}}"
+      }
+    }
+  }
+}

package/scenarios/webhook-slack-message.json

@@ -0,0 +1,21 @@
+{
+  "name": "Slack - Message Posted",
+  "description": "Simulates Slack webhook when message is posted",
+  "category": "Messaging",
+  "variables": {
+    "userId": "U1234567890",
+    "channelId": "C0987654321",
+    "text": "Hey team, can someone help?",
+    "timestamp": "1234567890.123456"
+  },
+  "payload": {
+    "type": "event_callback",
+    "event": {
+      "type": "message",
+      "user": "{{userId}}",
+      "channel": "{{channelId}}",
+      "text": "{{text}}",
+      "ts": "{{timestamp}}"
+    }
+  }
+}

package/scenarios/webhook-stripe.json

@@ -0,0 +1,22 @@
+{
+  "name": "Stripe - Payment Success",
+  "description": "Simulates Stripe webhook for successful payment",
+  "category": "Payments",
+  "variables": {
+    "paymentIntentId": "pi_123456",
+    "amount": "29999",
+    "currency": "usd",
+    "customerEmail": "john@example.com"
+  },
+  "payload": {
+    "type": "payment_intent.succeeded",
+    "data": {
+      "object": {
+        "id": "{{paymentIntentId}}",
+        "amount": {{amount}},
+        "currency": "{{currency}}",
+        "receipt_email": "{{customerEmail}}"
+      }
+    }
+  }
+}

package/scenarios/webhook-twilio-sms.json

@@ -0,0 +1,21 @@
+{
+  "name": "Twilio - SMS Received",
+  "description": "Simulates Twilio webhook when SMS is received",
+  "category": "Messaging",
+  "variables": {
+    "from": "+5511999887766",
+    "to": "+5511888776655",
+    "body": "Hello, I need help!",
+    "messageSid": "SM1234567890abcdef"
+  },
+  "payload": {
+    "MessageSid": "{{messageSid}}",
+    "From": "{{from}}",
+    "To": "{{to}}",
+    "Body": "{{body}}",
+    "FromCountry": "BR",
+    "ToCountry": "BR",
+    "FromState": "SP",
+    "ToState": "SP"
+  }
+}

package/scenarios/webhook-twilio-whatsapp.json

@@ -0,0 +1,22 @@
+{
+  "name": "Twilio - WhatsApp Message",
+  "description": "Simulates Twilio WhatsApp webhook",
+  "category": "Messaging",
+  "variables": {
+    "from": "whatsapp:+5511999887766",
+    "to": "whatsapp:+5511888776655",
+    "body": "Oi! Preciso de ajuda",
+    "profileName": "João Silva",
+    "messageSid": "SM9876543210fedcba"
+  },
+  "payload": {
+    "MessageSid": "{{messageSid}}",
+    "From": "{{from}}",
+    "To": "{{to}}",
+    "Body": "{{body}}",
+    "ProfileName": "{{profileName}}",
+    "WaId": "5511999887766",
+    "FromCountry": "BR",
+    "ToCountry": "BR"
+  }
+}

package/scenarios/webhook-zendesk-ticket.json

@@ -0,0 +1,25 @@
+{
+  "name": "Zendesk - Ticket Created",
+  "description": "Simulates Zendesk webhook for new support ticket",
+  "category": "Support",
+  "variables": {
+    "ticketId": "12345",
+    "subject": "Need help with integration",
+    "description": "I'm having trouble setting up the API",
+    "requesterEmail": "customer@example.com",
+    "priority": "high"
+  },
+  "payload": {
+    "type": "ticket_created",
+    "ticket": {
+      "id": {{ticketId}},
+      "subject": "{{subject}}",
+      "description": "{{description}}",
+      "priority": "{{priority}}",
+      "status": "new",
+      "requester": {
+        "email": "{{requesterEmail}}"
+      }
+    }
+  }
+}

package/static/README.md

@@ -0,0 +1,221 @@
+# Runflow Test Interface - Frontend Architecture
+
+## 📚 Overview
+
+The Runflow Test Interface is a professional, modular frontend for testing AI agents. Built with vanilla JavaScript for simplicity and served as static files by the CLI `test` command.
+
+## 🏗️ Architecture
+
+### Module System
+```javascript
+// Simple but effective module pattern
+Runflow.define('ModuleName', ['Dependency1'], (Dep1) => {
+    // Module implementation
+    return { /* public API */ };
+});
+```
+
+### Core Modules
+
+#### 1. **Config**
+- Centralized configuration management
+- API endpoints, UI settings, feature flags
+
+#### 2. **EventBus**
+- Central communication hub
+- Decoupled component interaction
+- Event-driven architecture
+
+#### 3. **StateManager**
+- Centralized state management
+- Subscription-based updates
+- Path-based state access
+
+#### 4. **APIClient**
+- Clean HTTP communication layer
+- Error handling and retries
+- Health check monitoring
+
+#### 5. **UIComponents**
+- Reusable UI elements
+- Message formatting
+- Toast notifications
+- Status indicators
+
+#### 6. **ChatManager**
+- Message handling logic
+- Chat export functionality
+- Message history management
+
+#### 7. **ScenarioManager**
+- Test scenario loading
+- Variable substitution
+- Payload preview
+
+#### 8. **ConnectionMonitor**
+- Health check service
+- Connection status management
+- Auto-reconnection logic
+
+## 🎨 Design System
+
+### Color Palette
+- **Primary**: Brand colors (#4f46e5)
+- **Semantic**: Success, Warning, Error, Info
+- **Neutrals**: Gray scale for UI elements
+
+### Typography
+- **Sans**: Inter for UI text
+- **Mono**: SF Mono for code
+
+### Spacing Scale
+- Consistent spacing system (4px base)
+- Variables from `--space-1` to `--space-10`
+
+### Components
+- **Panels**: Information cards with hover effects
+- **Messages**: Typed message bubbles with animations
+- **Buttons**: Consistent button styles with states
+- **Forms**: Clean input fields with focus states
+
+## 🚀 Features
+
+### Developer Experience
+1. **Modular Architecture**: Clean separation of concerns
+2. **Event-Driven**: Decoupled components via EventBus
+3. **State Management**: Centralized state with subscriptions
+4. **Error Handling**: Comprehensive error management
+5. **Debug Tools**: Available in development mode
+
+### User Experience
+1. **Real-time Updates**: Live connection status
+2. **Keyboard Shortcuts**: Productivity shortcuts
+3. **Export Functionality**: Save chat history
+4. **Test Scenarios**: Pre-configured test cases
+5. **Responsive Design**: Works on all screen sizes
+
+## 📁 File Structure
+
+```
+static/
+├── app.js          # Main application logic (modular)
+├── style.css       # Professional styling
+├── index.html      # Semantic HTML structure
+└── README.md       # This file
+```
+
+## 🛠️ Development
+
+### Adding New Modules
+
+```javascript
+Runflow.define('NewModule', ['Dependency'], (Dep) => {
+    // Private variables
+    let privateVar = 'value';
+    
+    // Private functions
+    function privateFunc() {}
+    
+    // Public API
+    return {
+        publicMethod() {
+            // Implementation
+        }
+    };
+});
+```
+
+### Event Communication
+
+```javascript
+// Emit events
+EventBus.emit('event:name', { data });
+
+// Listen to events
+EventBus.on('event:name', (data) => {
+    // Handle event
+});
+```
+
+### State Management
+
+```javascript
+// Get state
+const value = StateManager.get('path.to.value');
+
+// Set state
+StateManager.set('path.to.value', newValue);
+
+// Subscribe to changes
+StateManager.subscribe('path.to.value', (newValue) => {
+    // React to change
+});
+```
+
+## 🔧 Configuration
+
+The interface automatically configures itself based on:
+- URL parameters (e.g., `?backend=8547`)
+- Default values in the Config module
+- Runtime detection
+
+## 🎯 Best Practices
+
+1. **Module Independence**: Each module should be self-contained
+2. **Event-Driven**: Use EventBus for cross-module communication
+3. **State Management**: Use StateManager for shared state
+4. **Error Handling**: Always handle errors gracefully
+5. **User Feedback**: Provide clear feedback for all actions
+
+## 📊 Performance
+
+- **Lazy Loading**: Components initialize only when needed
+- **Event Delegation**: Efficient event handling
+- **Animation Optimization**: CSS animations for smooth UI
+- **Message Limiting**: Auto-cleanup of old messages
+
+## 🔐 Security
+
+- **Input Validation**: All user inputs are validated
+- **XSS Protection**: Content is properly escaped
+- **CORS Handling**: Proper CORS configuration
+
+## 📱 Responsive Design
+
+- **Desktop**: Full sidebar layout
+- **Tablet**: Grid-based sidebar
+- **Mobile**: Stacked layout
+
+## ⌨️ Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Enter` | Send message |
+| `Ctrl+L` | Clear chat |
+| `Esc` | Clear input |
+| `Ctrl+E` | Export chat |
+| `Ctrl+K` | Focus input |
+
+## 🐛 Debug Mode
+
+When running on localhost, debug tools are available:
+
+```javascript
+window.RunflowDebug = {
+    state: StateManager,
+    events: EventBus,
+    modules: Runflow
+};
+```
+
+## 📈 Future Improvements
+
+- [ ] Theme switcher (dark mode)
+- [ ] Message search functionality
+- [ ] Advanced filtering options
+- [ ] Performance metrics display
+- [ ] WebSocket support for real-time updates
+
+## 📝 License
+
+Part of the Runflow Platform - Built for developers, by developers.