npm - xcomponent-ai - Versions diffs - 0.3.0 → 0.3.2 - Mend

xcomponent-ai 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/QUICKSTART.md +60 -56
package/dist/mermaid-generator.d.ts.map +1 -1
package/dist/mermaid-generator.js +27 -39
package/dist/mermaid-generator.js.map +1 -1
package/package.json +1 -1
package/public/dashboard.html +187 -114

package/QUICKSTART.md CHANGED Viewed

@@ -18,7 +18,7 @@ Use a provided example:
 ls $(npm root -g)/xcomponent-ai/examples/
 # Load an example to see its structure
-xcomponent-ai load examples/trading.yaml
+xcomponent-ai load examples/explicit-transitions-demo.yaml
 ```
 Or create your own project:
@@ -35,7 +35,7 @@ cd my-project
 - ✅ Web dashboard (for real-time visualization)
 ```bash
-xcomponent-ai serve examples/trading.yaml
+xcomponent-ai serve examples/explicit-transitions-demo.yaml
 ```
 **Expected output:**
@@ -43,10 +43,10 @@ xcomponent-ai serve examples/trading.yaml
 🚀 xcomponent-ai Runtime Started
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📦 Component: TradingComponent
+📦 Component: ExplicitTransitionsComponent
    Machines:
-   - OrderEntry (5 states, 7 transitions)
-   - Settlement (3 states, 3 transitions)
+   - Order (6 states, 7 transitions)
+   - RiskMonitor (3 states, 3 transitions)
 🌐 API Server:    http://localhost:3000
 📊 Dashboard:     http://localhost:3000/dashboard.html
@@ -76,21 +76,24 @@ You'll see:
 curl -X POST http://localhost:3000/api/instances \
   -H "Content-Type: application/json" \
   -d '{
-    "machineName": "OrderEntry",
+    "machineName": "Order",
     "context": {
       "orderId": "ORD-001",
-      "amount": 1000,
-      "symbol": "AAPL"
+      "customerId": "CUST-123",
+      "symbol": "AAPL",
+      "totalQuantity": 1000,
+      "side": "BUY",
+      "startTime": 0
     }
   }'
 # Response: {"instanceId": "abc-123"}
-# Send an event
+# Send an event to submit the order
 curl -X POST http://localhost:3000/api/instances/abc-123/events \
   -H "Content-Type: application/json" \
   -d '{
-    "type": "VALIDATE",
+    "type": "SUBMIT",
     "payload": {}
   }'
@@ -101,86 +104,87 @@ curl http://localhost:3000/api/instances/abc-123
 curl http://localhost:3000/api/instances
 ```
-**Option B: Via CLI (interactive mode)**
-```bash
-# Start REPL mode
-xcomponent-ai repl examples/trading.yaml
-# Then type commands:
-> create OrderEntry { orderId: "ORD-001", amount: 1000 }
-Instance created: abc-123
-> send abc-123 VALIDATE
-Transition: Pending → Validated
-> list
-Instances:
-- abc-123 (OrderEntry) : Validated
-> inspect abc-123
-Instance: abc-123
-Machine: OrderEntry
-State: Validated
-Context: { orderId: "ORD-001", amount: 1000, symbol: "AAPL" }
-```
-**Option C: Via Web Dashboard**
+**Option B: Via Web Dashboard**
 1. Open http://localhost:3000/dashboard.html
-2. Click **"Create Instance"** button
-3. Select machine: `OrderEntry`
-4. Enter context: `{ "orderId": "ORD-001", "amount": 1000 }`
-5. Click **"Create"**
-6. Watch the instance appear in the table
-7. Click on instance to send events
+2. Go to the **"FSM Diagram"** tab (default view)
+3. Select machine: `Order` from the dropdown
+4. Fill in the context fields:
+   - orderId: ORD-001
+   - customerId: CUST-123
+   - symbol: AAPL
+   - totalQuantity: 1000
+   - side: BUY (from dropdown)
+   - startTime: 0
+5. Click **"Create Instance"**
+6. Watch the instance appear in the "Active Instances" list
+7. Click on instance to view details
 ## 🔍 Monitor FSM
 ### View real-time logs
-In the terminal where `xcomponent-ai serve` is running:
+In the terminal where `xcomponent-ai serve` is running, you'll see real-time activity:
 ```
-[14:32:15] Instance abc-123 created (OrderEntry)
-[14:32:18] abc-123: Pending → Validated (event: VALIDATE)
-[14:32:20] abc-123: Validated → Executed (event: EXECUTE)
+[14:32:15] Instance abc-123 created (Order)
+[14:32:18] abc-123: Created → Submitted (event: SUBMIT)
+[14:32:20] abc-123: Submitted → PartiallyExecuted (event: EXECUTION_NOTIFICATION)
+[14:32:22] abc-123: PartiallyExecuted → PartiallyExecuted (event: EXECUTION_NOTIFICATION)
+[14:32:22] abc-123: PartiallyExecuted → FullyExecuted (event: FULLY_EXECUTED)
 ```
-### Analyze logs
+### Monitor via Dashboard
+The web dashboard at **http://localhost:3000/dashboard.html** provides:
+- **📊 Event Blotter**: Real-time event stream with filtering
+- **📈 Statistics**: Instance counts by state (active, final, error)
+- **🎨 FSM Diagrams**: Visual state machine representations
+- **🔍 Traceability**: Instance history and transitions
+### Check Instance Status via API
 ```bash
-# In another terminal
-xcomponent-ai logs --component TradingComponent
+# Get specific instance details
+curl http://localhost:3000/api/instances/abc-123
-# Filter by instance
-xcomponent-ai logs --instance abc-123
+# List all instances
+curl http://localhost:3000/api/instances
-# View statistics
-xcomponent-ai stats
+# Get component info
+curl http://localhost:3000/api/components
 ```
 ## 🧪 Test Complete Scenario
 ```bash
 # 1. Start runtime
-xcomponent-ai serve examples/trading.yaml &
+xcomponent-ai serve examples/explicit-transitions-demo.yaml &
 # 2. Create instance
 INSTANCE=$(curl -s -X POST http://localhost:3000/api/instances \
   -H "Content-Type: application/json" \
-  -d '{"machineName": "OrderEntry", "context": {"orderId": "ORD-001"}}' \
+  -d '{"machineName": "Order", "context": {"orderId": "ORD-001", "customerId": "CUST-123", "symbol": "AAPL", "totalQuantity": 1000, "side": "BUY", "startTime": 0}}' \
   | jq -r '.instanceId')
 # 3. Send events in sequence
+# Submit the order
+curl -X POST http://localhost:3000/api/instances/$INSTANCE/events \
+  -H "Content-Type: application/json" \
+  -d '{"type": "SUBMIT", "payload": {}}'
+sleep 1
+# Send execution notification (partial fill)
 curl -X POST http://localhost:3000/api/instances/$INSTANCE/events \
   -H "Content-Type: application/json" \
-  -d '{"type": "VALIDATE"}'
+  -d '{"type": "EXECUTION_NOTIFICATION", "payload": {"quantity": 600, "price": 150.0, "executionId": "EXEC-001"}}'
 sleep 1
+# Send another execution notification (complete fill)
 curl -X POST http://localhost:3000/api/instances/$INSTANCE/events \
   -H "Content-Type: application/json" \
-  -d '{"type": "EXECUTE"}'
+  -d '{"type": "EXECUTION_NOTIFICATION", "payload": {"quantity": 400, "price": 150.5, "executionId": "EXEC-002"}}'
 # 4. Check final state
 curl http://localhost:3000/api/instances/$INSTANCE

package/dist/mermaid-generator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mermaid-generator.d.ts","sourceRoot":"","sources":["../src/mermaid-generator.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,~~CAsDpE~~;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,~~CA4B1E~~"}
1	+ {"version":3,"file":"mermaid-generator.d.ts","sourceRoot":"","sources":["../src/mermaid-generator.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CA0BpE;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CA6C1E"}

package/dist/mermaid-generator.js CHANGED Viewed

@@ -12,13 +12,6 @@ function generateMermaidDiagram(machine) {
     const lines = [];
     lines.push('stateDiagram-v2');
     lines.push('');
-    // Add note at the top if there's a description in metadata
-    if (machine.metadata?.description) {
-        lines.push(`    note right of ${machine.initialState}`);
-        lines.push(`        ${machine.metadata.description}`);
-        lines.push(`    end note`);
-        lines.push('');
-    }
     // Mark initial state
     lines.push(`    [*] --> ${machine.initialState}`);
     lines.push('');
@@ -34,24 +27,6 @@ function generateMermaidDiagram(machine) {
             lines.push(`    ${state.name} --> [*]`);
         }
     });
-    lines.push('');
-    // Add state descriptions as notes
-    machine.states.forEach(state => {
-        if (state.metadata?.description) {
-            const desc = state.metadata.description;
-            lines.push(`    note right of ${state.name}`);
-            // Handle multi-line descriptions
-            if (desc.includes('\n')) {
-                desc.split('\n').forEach((line) => {
-                    lines.push(`        ${line.trim()}`);
-                });
-            }
-            else {
-                lines.push(`        ${desc}`);
-            }
-            lines.push(`    end note`);
-        }
-    });
     return lines.join('\n');
 }
 /**
@@ -60,28 +35,41 @@ function generateMermaidDiagram(machine) {
 function generateStyledMermaidDiagram(machine) {
     const baseDiagram = generateMermaidDiagram(machine);
     const styleLines = [];
-    // Add styling based on state type and metadata
-    machine.states.forEach((state, index) => {
-        const stateClass = `state${index}`;
+    // Define color classes once at the end
+    const usedClasses = new Set();
+    // Collect state styles
+    const stateStyles = [];
+    machine.states.forEach(state => {
+        let className = '';
         if (state.type === 'entry') {
-            styleLines.push(`    class ${state.name} ${stateClass}`);
-            styleLines.push(`    classDef ${stateClass} fill:#FFA500,stroke:#FF8C00,stroke-width:2px,color:#000`);
+            className = 'entryState';
+            usedClasses.add('entryState');
         }
         else if (state.type === 'final') {
-            styleLines.push(`    class ${state.name} ${stateClass}`);
-            styleLines.push(`    classDef ${stateClass} fill:#27ae60,stroke:#229954,stroke-width:2px,color:#fff`);
+            className = 'finalState';
+            usedClasses.add('finalState');
         }
         else if (state.type === 'error') {
-            styleLines.push(`    class ${state.name} ${stateClass}`);
-            styleLines.push(`    classDef ${stateClass} fill:#e74c3c,stroke:#c0392b,stroke-width:2px,color:#fff`);
+            className = 'errorState';
+            usedClasses.add('errorState');
         }
-        else if (state.metadata?.displayColor) {
-            styleLines.push(`    class ${state.name} ${stateClass}`);
-            styleLines.push(`    classDef ${stateClass} fill:${state.metadata.displayColor},stroke-width:2px`);
+        if (className) {
+            stateStyles.push(`    class ${state.name} ${className}`);
         }
     });
-    if (styleLines.length > 0) {
-        return baseDiagram + '\n\n' + styleLines.join('\n');
+    // Add class definitions
+    if (usedClasses.has('entryState')) {
+        styleLines.push(`    classDef entryState fill:#fbbf24,stroke:#f59e0b,stroke-width:3px,color:#000`);
+    }
+    if (usedClasses.has('finalState')) {
+        styleLines.push(`    classDef finalState fill:#10b981,stroke:#059669,stroke-width:3px,color:#fff`);
+    }
+    if (usedClasses.has('errorState')) {
+        styleLines.push(`    classDef errorState fill:#ef4444,stroke:#dc2626,stroke-width:3px,color:#fff`);
+    }
+    // Combine: base diagram + class definitions + state class applications
+    if (styleLines.length > 0 || stateStyles.length > 0) {
+        return baseDiagram + '\n\n' + styleLines.join('\n') + '\n' + stateStyles.join('\n');
     }
     return baseDiagram;
 }

package/dist/mermaid-generator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mermaid-generator.js","sourceRoot":"","sources":["../src/mermaid-generator.ts"],"names":[],"mappings":";AAAA;;GAEG;;AAOH,~~wDAsDC~~;AAKD,~~oEA4BC~~;~~AA1FD~~;;GAEG;AACH,SAAgB,sBAAsB,CAAC,OAAqB;IAC1D,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC9B,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,~~2DAA2D;IAC3D,IAAI,OAAO,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAC;QAClC,KAAK,CAAC,IAAI,CAAC,~~qBAAqB~~,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC~~;~~QACxD,KAAK,CAAC,IAAI,CAAC,WAAW,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;QACtD,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC;IAED,qBAAqB;~~IACrB,KAAK,CAAC,IAAI,CAAC,eAAe,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IAClD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,sBAAsB;IACtB,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACvC,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC;~~QAEzC~~,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,IAAI,QAAQ,UAAU,CAAC,EAAE,KAAK,eAAe,EAAE,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,8BAA8B;IAC9B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC7B,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,UAAU,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,CAAC;~~IAEf~~,~~kCAAkC~~;~~IAClC~~,~~OAAO~~,CAAC,MAAM,CAAC,OAAO,CAAC,~~KAAK,~~CAAC~~,EAAE~~;~~QAC7B~~,~~IAAI~~,~~KAAK~~,~~CAAC~~,~~QAAQ,~~EAAE,~~WAAW,EAAE,~~CAAC;~~YAChC~~,MAAM,IAAI,GAAG,~~KAAK~~,CAAC,~~QAAQ~~,~~CAAC~~,WAAW,CAAC;~~YACxC~~,~~KAAK~~,CAAC,~~IAAI~~,CAAC,~~qBAAqB~~,KAAK,CAAC,~~IAAI,~~EAAE~~,CAAC,CAAC~~;~~YAC9C~~,~~iCAAiC;YACjC,~~IAAI,~~IAAI~~,~~CAAC~~,~~QAAQ,CAAC,IAAI,CAAC,~~EAAE,CAAC;~~gBACxB~~,IAAI,~~CAAC,~~KAAK,CAAC,IAAI,~~CAAC~~,~~CAAC,~~OAAO,~~CAAC~~,CAAC~~,IAAY,EAAE,EAAE~~;~~oBACxC~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,CAAC,WAAW,~~IAAI,~~CAAC,~~IAAI~~,~~EAAE,EAAE,~~CAAC,~~CAAC;gBACvC~~,CAAC,CAAC~~,CAAC~~;~~YACL~~,CAAC;~~iBAAM~~,~~CAAC;gBACN~~,KAAK,CAAC,IAAI,~~CAAC~~,~~WAAW~~,~~IAAI,~~EAAE,CAAC~~,CAAC~~;~~YAChC~~,~~CAAC;YACD~~,~~KAAK~~,~~CAAC~~,~~IAAI,~~CAAC~~,cAAc,CAAC,CAAC~~;~~QAC7B~~,~~CAAC;IACH~~,CAAC,~~CAAC~~,CAAC~~;IAEH~~,~~OAAO~~,~~KAAK,~~CAAC,~~IAAI,~~CAAC~~,IAAI,CAAC,CAAC~~;~~AAC1B~~,CAAC;~~AAED;;GAEG;AACH~~,~~SAAgB~~,~~4BAA4B~~,CAAC,~~OAAqB;IAChE~~,~~MAAM~~,~~WAAW,GAAG,sBAAsB,CAAC,~~OAAO,~~CAAC~~,CAAC;~~IACpD~~,~~MAAM~~,~~UAAU~~,~~GAAa~~,~~EAAE,~~CAAC;~~IAEhC,+CAA+C;IAC/C~~,~~OAAO~~,CAAC,~~MAAM~~,CAAC,~~OAAO~~,CAAC,CAAC~~,KAAK,EAAE,KAAK,EAAE,EAAE~~;~~QACtC~~,~~MAAM,UAAU,GAAG,QAAQ,KAAK,EAAE,~~CAAC;~~QAEnC~~,IAAI,~~KAAK~~,~~CAAC,IAAI,KAAK,OAAO,~~EAAE,CAAC;~~YAC3B~~,~~UAAU~~,CAAC,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,IAAI,~~UAAU~~,EAAE,CAAC,CAAC;~~YACzD~~,~~UAAU,~~CAAC,~~IAAI,~~CAAC,~~gBAAgB,UAAU,0DAA0D,~~CAAC,CAAC;~~QACxG~~,~~CAAC~~;~~aAAM~~,IAAI,~~KAAK~~,CAAC,~~IAAI~~,~~KAAK,OAAO,EAAE,~~CAAC~~;YAClC~~,~~UAAU~~,CAAC,~~IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,IAAI,UAAU,~~EAAE,CAAC~~,CAAC~~;~~YACzD~~,UAAU,CAAC,IAAI,CAAC,~~gBAAgB~~,~~UAAU,0DAA0D,~~CAAC,CAAC;~~QACxG~~,CAAC;~~aAAM~~,IAAI,~~KAAK~~,CAAC,~~IAAI~~,~~KAAK,OAAO,EAAE,~~CAAC~~;YAClC~~,~~UAAU~~,CAAC,~~IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,IAAI,UAAU,~~EAAE,CAAC~~,CAAC~~;~~YACzD~~,UAAU,CAAC,IAAI,CAAC,~~gBAAgB~~,~~UAAU,0DAA0D,~~CAAC,CAAC;~~QACxG~~,CAAC;~~aAAM~~,IAAI,~~KAAK~~,CAAC,~~QAAQ~~,~~EAAE~~,YAAY,EAAE,CAAC;~~YACxC~~,UAAU,CAAC,IAAI,CAAC,~~aAAa~~,~~KAAK,~~CAAC,~~IAAI,IAAI,UAAU,EAAE,~~CAAC,CAAC;~~YACzD~~,~~UAAU~~,~~CAAC,~~IAAI,~~CAAC,gBAAgB,~~UAAU,~~SAAS~~,~~KAAK~~,~~CAAC~~,~~QAAQ,~~CAAC,~~YAAY~~,~~mBAAmB~~,CAAC,~~CAAC;QACrG~~,~~CAAC;IACH~~,CAAC,~~CAAC~~,CAAC;~~IAEH~~,~~IAAI~~,~~UAAU~~,~~CAAC~~,MAAM,GAAG,CAAC,~~EAAE~~,CAAC~~;QAC1B~~,~~OAAO~~,~~WAAW~~,GAAG,~~MAAM~~,GAAG,~~UAAU~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~IACtD~~,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}
1	+ {"version":3,"file":"mermaid-generator.js","sourceRoot":"","sources":["../src/mermaid-generator.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "xcomponent-ai",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "LLM-first framework for AI agents (Claude, GPT) to build apps with sanctuarized business logic. Event-driven FSM runtime with multi-instance state machines, cross-component communication, event sourcing, and production-ready persistence (PostgreSQL, MongoDB)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/dashboard.html CHANGED Viewed

@@ -10,14 +10,14 @@
     /* Reset & Base */
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    /* Animated Gradient Background */
+    /* Dark Background */
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
+      background: linear-gradient(-45deg, #0a0a0a, #1a1a1a, #2d2d2d, #1f1f1f);
       background-size: 400% 400%;
       animation: gradientShift 15s ease infinite;
       min-height: 100vh;
-      color: #1a202c;
+      color: #e0e0e0;
     }
     @keyframes gradientShift {
@@ -143,7 +143,7 @@
       left: 0;
       right: 0;
       height: 4px;
-      background: linear-gradient(90deg, #667eea, #764ba2);
+      background: linear-gradient(90deg, #fbbf24, #f59e0b);
       transform: scaleX(0);
       transition: transform 0.3s ease;
     }
@@ -160,7 +160,7 @@
     .stat-value {
       font-size: 36px;
       font-weight: 800;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -209,7 +209,7 @@
       left: 50%;
       width: 0;
       height: 3px;
-      background: linear-gradient(90deg, #667eea, #764ba2);
+      background: linear-gradient(90deg, #fbbf24, #f59e0b);
       transform: translateX(-50%);
       transition: width 0.3s ease;
     }
@@ -316,8 +316,8 @@
     .form-group textarea:focus {
       outline: none;
       background: rgba(255, 255, 255, 0.2);
-      border-color: #667eea;
-      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+      border-color: #fbbf24;
+      box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
     }
     .form-help {
@@ -360,13 +360,13 @@
     }
     .btn-primary {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
+      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+      color: #1a1a1a;
     }
     .btn-primary:hover {
       transform: translateY(-2px);
-      box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
+      box-shadow: 0 8px 25px 0 rgba(251, 191, 36, 0.4);
     }
     .btn-success {
@@ -437,14 +437,14 @@
       left: 0;
       width: 4px;
       height: 100%;
-      background: linear-gradient(180deg, #667eea, #764ba2);
+      background: linear-gradient(180deg, #fbbf24, #f59e0b);
       opacity: 0;
       transition: opacity 0.3s ease;
     }
     .instance-item:hover {
       background: rgba(255, 255, 255, 0.15);
-      box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
+      box-shadow: 0 8px 30px rgba(251, 191, 36, 0.2);
       transform: translateY(-3px) translateX(4px);
     }
@@ -453,9 +453,9 @@
     }
     .instance-item.selected {
-      border-color: #667eea;
-      background: rgba(102, 126, 234, 0.2);
-      box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
+      border-color: #fbbf24;
+      background: rgba(251, 191, 36, 0.2);
+      box-shadow: 0 8px 30px rgba(251, 191, 36, 0.3);
     }
     .instance-header {
@@ -519,7 +519,7 @@
     }
     .blotter-item {
-      border-left: 4px solid #667eea;
+      border-left: 4px solid #fbbf24;
       background: rgba(255, 255, 255, 0.05);
       padding: 12px 16px;
       margin-bottom: 10px;
@@ -638,14 +638,13 @@
     </div>
     <div class="tabs">
-      <div class="tab active" onclick="switchTab('overview')">Overview</div>
-      <div class="tab" onclick="switchTab('diagram')">FSM Diagram</div>
-      <div class="tab" onclick="switchTab('blotter')">Event Blotter</div>
-      <div class="tab" onclick="switchTab('traceability')">Traceability</div>
-      <div class="tab" onclick="switchTab('create')">Create Instance</div>
+      <div class="tab active" onclick="switchTab('diagram')">🎨 FSM Diagram</div>
+      <div class="tab" onclick="switchTab('overview')">📋 Instances</div>
+      <div class="tab" onclick="switchTab('blotter')">📊 Event Blotter</div>
+      <div class="tab" onclick="switchTab('traceability')">🔍 Traceability</div>
     </div>
-    <div class="tab-content active" id="tab-overview">
+    <div class="tab-content" id="tab-overview">
       <div class="filter-bar">
         <input type="text" id="filter-instance" placeholder="Filter by instance ID..." oninput="filterInstances()">
         <select id="filter-machine" onchange="filterInstances()">
@@ -658,22 +657,48 @@
       <div class="instance-list" id="instance-list">
         <div class="empty-state">
           <div class="empty-state-icon">📭</div>
-          <div>No instances yet. Create one in the "Create Instance" tab.</div>
+          <div>No instances yet. Go to the "FSM Diagram" tab to create one!</div>
         </div>
       </div>
     </div>
-    <div class="tab-content" id="tab-diagram">
-      <div class="form-group">
-        <label for="diagram-machine">State Machine:</label>
-        <select id="diagram-machine" onchange="renderDiagram()">
-          <option value="">Select a state machine...</option>
-        </select>
-      </div>
-      <div class="mermaid-container" id="diagram-container">
-        <div class="empty-state">
-          <div class="empty-state-icon">🎨</div>
-          <div>Select a state machine to view its diagram</div>
+    <div class="tab-content active" id="tab-diagram">
+      <div class="grid-2">
+        <div>
+          <div class="form-group">
+            <label for="diagram-machine">State Machine:</label>
+            <select id="diagram-machine" onchange="renderDiagram()">
+              <option value="">Select a state machine...</option>
+            </select>
+          </div>
+          <div class="mermaid-container" id="diagram-container">
+            <div class="empty-state">
+              <div class="empty-state-icon">🎨</div>
+              <div>Select a state machine to view its diagram</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="card">
+            <h2>Create New Instance</h2>
+            <div id="diagram-create-form">
+              <div class="empty-state" style="padding: 40px 20px;">
+                <div class="empty-state-icon">👈</div>
+                <div>Select a state machine to create an instance</div>
+              </div>
+            </div>
+          </div>
+          <div class="card" style="margin-top: 20px;" id="diagram-instances-card">
+            <h2>Active Instances</h2>
+            <div id="diagram-instances-list">
+              <div class="empty-state" style="padding: 20px;">
+                <div class="empty-state-icon">📭</div>
+                <div>No instances for this state machine</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -710,19 +735,6 @@
       </div>
     </div>
-    <div class="tab-content" id="tab-create">
-      <div class="card">
-        <h2>Create New Instance</h2>
-        <div class="form-group">
-          <label for="create-machine">State Machine *</label>
-          <select id="create-machine" onchange="updateCreateForm()">
-            <option value="">Select a state machine...</option>
-          </select>
-        </div>
-        <div id="create-form-fields"></div>
-        <button class="btn btn-primary" onclick="createInstance()">Create Instance</button>
-      </div>
-    </div>
   </div>
   <script>
@@ -798,6 +810,12 @@
       updateStats();
       renderInstances();
       updateTraceSelector();
+      // Update diagram instances list if a machine is selected
+      const selectedMachine = document.getElementById('diagram-machine')?.value;
+      if (selectedMachine) {
+        updateDiagramInstancesList(selectedMachine);
+      }
     }
     function updateStats() {
@@ -811,7 +829,7 @@
     function renderInstances() {
       const container = document.getElementById('instance-list');
       if (instances.length === 0) {
-        container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📭</div><div>No instances yet. Create one in the "Create Instance" tab.</div></div>';
+        container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📭</div><div>No instances yet. Go to the "FSM Diagram" tab to create one!</div></div>';
         return;
       }
@@ -896,7 +914,11 @@
     async function renderDiagram() {
       const machineName = document.getElementById('diagram-machine').value;
       const component = getCurrentComponent();
-      if (!machineName || !component) return;
+      if (!machineName || !component) {
+        document.getElementById('diagram-create-form').innerHTML = '<div class="empty-state" style="padding: 40px 20px;"><div class="empty-state-icon">👈</div><div>Select a state machine to create an instance</div></div>';
+        document.getElementById('diagram-instances-list').innerHTML = '<div class="empty-state" style="padding: 20px;"><div class="empty-state-icon">📭</div><div>No instances for this state machine</div></div>';
+        return;
+      }
       const machine = component.stateMachines.find(m => m.name === machineName);
       if (!machine) return;
@@ -906,102 +928,154 @@
       const data = await res.json();
       if (data.diagram) {
-        // Use Mermaid v10 API
-        const container = document.getElementById('diagram-container');
-        container.innerHTML = '<pre class="mermaid">' + data.diagram + '</pre>';
-        // Re-render mermaid diagrams
-        await mermaid.run({
-          querySelector: '#diagram-container .mermaid'
-        });
+        try {
+          // Use Mermaid v10 API
+          const container = document.getElementById('diagram-container');
+          container.innerHTML = '<div class="mermaid">' + data.diagram + '</div>';
+          // Re-render mermaid diagrams
+          await mermaid.run({
+            querySelector: '#diagram-container .mermaid'
+          });
+        } catch (error) {
+          console.error('Mermaid rendering error:', error);
+          const container = document.getElementById('diagram-container');
+          container.innerHTML = `
+            <div style="color: #ef4444; padding: 20px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border: 1px solid #ef4444;">
+              <strong>Diagram Rendering Error:</strong> ${error.message || 'Unknown error'}<br><br>
+              <details style="margin-top: 10px;">
+                <summary style="cursor: pointer;">Show diagram source</summary>
+                <pre style="margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow-x: auto;">${data.diagram}</pre>
+              </details>
+            </div>
+          `;
+        }
       }
+      // Populate create instance form for this machine
+      updateDiagramCreateForm(machine);
+      // Show instances for this machine
+      updateDiagramInstancesList(machineName);
     }
-    // Traceability
-    async function loadTrace() {
-      if (!selectedInstance) return;
-      const container = document.getElementById('trace-container');
-      // In real version, fetch from /api/instances/:id/history
-      container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div>Traceability history would appear here</div></div>';
-    }
-    function updateTraceSelector() {
-      const select = document.getElementById('trace-instance');
-      select.innerHTML = '<option value="">Select an instance...</option>' +
-        instances.map(i => `<option value="${i.id}">${i.id.substring(0, 8)} - ${i.machineName}</option>`).join('');
-    }
-    // Create Instance
-    function updateCreateForm() {
-      const machineName = document.getElementById('create-machine').value;
-      const component = getCurrentComponent();
-      if (!machineName || !component) return;
-      const machine = component.stateMachines.find(m => m.name === machineName);
-      if (!machine || !machine.contextSchema) {
-        document.getElementById('create-form-fields').innerHTML = '<div class="form-group"><label>Context (JSON)</label><textarea id="context-json" rows="4"></textarea></div>';
-        return;
-      }
-      // Generate form from schema
+    function updateDiagramCreateForm(machine) {
       let html = '';
-      for (const [key, field] of Object.entries(machine.contextSchema)) {
-        html += `<div class="form-group">`;
-        html += `<label for="ctx_${key}">${field.label || key}${field.required ? ' *' : ''}</label>`;
-        if (field.type === 'select') {
-          html += `<select id="ctx_${key}">`;
-          field.options.forEach(opt => html += `<option value="${opt.value}">${opt.label}</option>`);
-          html += `</select>`;
-        } else {
-          html += `<input type="${field.type || 'text'}" id="ctx_${key}" placeholder="${field.placeholder || ''}" ${field.required ? 'required' : ''}>`;
+      if (!machine.contextSchema) {
+        html = `
+          <div class="form-group">
+            <label>Context (JSON)</label>
+            <textarea id="diagram-context-json" rows="6" placeholder='{"property": "value"}'></textarea>
+            <div class="form-help">Enter a JSON object with the context properties for this instance</div>
+          </div>
+          <button class="btn btn-primary" onclick="createInstanceFromDiagram()">Create Instance</button>
+        `;
+      } else {
+        html = '<div style="background: rgba(251, 191, 36, 0.1); border-left: 3px solid #fbbf24; padding: 12px; margin-bottom: 20px; border-radius: 4px; color: rgba(255,255,255,0.9);"><strong>📝 Context Properties:</strong> Fill in the fields below</div>';
+        for (const [key, field] of Object.entries(machine.contextSchema)) {
+          html += `<div class="form-group">`;
+          html += `<label for="diagram_ctx_${key}">${field.label || key}${field.required ? ' *' : ''}</label>`;
+          if (field.type === 'select') {
+            html += `<select id="diagram_ctx_${key}">`;
+            field.options.forEach(opt => html += `<option value="${opt.value}">${opt.label}</option>`);
+            html += `</select>`;
+          } else {
+            html += `<input type="${field.type || 'text'}" id="diagram_ctx_${key}" placeholder="${field.placeholder || ''}" ${field.required ? 'required' : ''}>`;
+          }
+          if (field.description) html += `<div class="form-help">${field.description}</div>`;
+          html += `</div>`;
         }
-        if (field.description) html += `<div class="form-help">${field.description}</div>`;
-        html += `</div>`;
+        html += `<button class="btn btn-primary" onclick="createInstanceFromDiagram()">Create Instance</button>`;
       }
-      document.getElementById('create-form-fields').innerHTML = html;
+      document.getElementById('diagram-create-form').innerHTML = html;
     }
-    async function createInstance() {
-      const machineName = document.getElementById('create-machine').value;
+    function updateDiagramInstancesList(machineName) {
+      const machineInstances = instances.filter(i => i.machineName === machineName);
+      if (machineInstances.length === 0) {
+        document.getElementById('diagram-instances-list').innerHTML = '<div class="empty-state" style="padding: 20px;"><div class="empty-state-icon">📭</div><div>No instances yet. Create one above!</div></div>';
+        return;
+      }
+      const html = machineInstances.map(inst => `
+        <div class="instance-item" onclick="selectInstance('${inst.id}'); switchTab('overview');" style="margin-bottom: 10px;">
+          <div class="instance-header">
+            <span class="instance-id">${inst.id.substring(0, 8)}</span>
+            <span class="badge ${inst.status}">${inst.currentState}</span>
+          </div>
+        </div>
+      `).join('');
+      document.getElementById('diagram-instances-list').innerHTML = html;
+    }
+    async function createInstanceFromDiagram() {
+      const machineName = document.getElementById('diagram-machine').value;
       const component = getCurrentComponent();
-      if (!machineName) return alert('Please select a state machine');
-      if (!component) return alert('No component loaded');
+      if (!machineName || !component) return alert('Please select a state machine');
       const machine = component.stateMachines.find(m => m.name === machineName);
       let context = {};
       if (machine?.contextSchema) {
         for (const key of Object.keys(machine.contextSchema)) {
-          const input = document.getElementById('ctx_' + key);
+          const input = document.getElementById('diagram_ctx_' + key);
           if (input && input.value) {
             context[key] = input.type === 'number' ? parseFloat(input.value) : input.value;
           }
         }
       } else {
-        const json = document.getElementById('context-json')?.value;
-        if (json) context = JSON.parse(json);
+        const json = document.getElementById('diagram-context-json')?.value;
+        if (json) {
+          try {
+            context = JSON.parse(json);
+          } catch (e) {
+            return alert('Invalid JSON: ' + e.message);
+          }
+        }
       }
       await fetch(`/api/components/${component.name}/instances`, {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({machineName, context})
       });
       // Clear form
       if (machine?.contextSchema) {
         for (const key of Object.keys(machine.contextSchema)) {
-          const input = document.getElementById('ctx_' + key);
+          const input = document.getElementById('diagram_ctx_' + key);
           if (input) input.value = '';
         }
+      } else {
+        const textarea = document.getElementById('diagram-context-json');
+        if (textarea) textarea.value = '';
       }
-      switchTab('overview');
+      // Reload instances to update the list
       loadInstances();
     }
+    // Traceability
+    async function loadTrace() {
+      if (!selectedInstance) return;
+      const container = document.getElementById('trace-container');
+      // In real version, fetch from /api/instances/:id/history
+      container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div>Traceability history would appear here</div></div>';
+    }
+    function updateTraceSelector() {
+      const select = document.getElementById('trace-instance');
+      select.innerHTML = '<option value="">Select an instance...</option>' +
+        instances.map(i => `<option value="${i.id}">${i.id.substring(0, 8)} - ${i.machineName}</option>`).join('');
+    }
     function populateSelectors() {
       if (!componentsData || componentsData.length === 0) return;
@@ -1017,7 +1091,6 @@
         const machines = component.stateMachines.map(m => `<option value="${m.name}">${m.name}</option>`).join('');
         document.getElementById('filter-machine').innerHTML = '<option value="">All Machines</option>' + machines;
         document.getElementById('diagram-machine').innerHTML = '<option value="">Select...</option>' + machines;
-        document.getElementById('create-machine').innerHTML = '<option value="">Select...</option>' + machines;
       }
     }
@@ -1027,8 +1100,8 @@
       console.log('Component selected:', selected);
       // Refresh selectors for the new component
       populateSelectors();
-      // Clear create form when switching components
-      document.getElementById('create-form-fields').innerHTML = '';
+      // Clear diagram create form when switching components
+      document.getElementById('diagram-create-form').innerHTML = '<div class="empty-state" style="padding: 40px 20px;"><div class="empty-state-icon">👈</div><div>Select a state machine to create an instance</div></div>';
     }
     function exportState() {