@almadar/std 6.5.2 → 7.2.0

package/behaviors/registry/organisms/std-api-gateway.orb

@@ -1,14 +1,14 @@
 {
   "name": "std-api-gateway",
   "version": "1.0.0",
-  "description": "API gateway management organism. Composes: stdList(Route) + stdCircuitBreaker(Backend) + stdDisplay(Analytics)",
+  "description": "std-api-gateway as a Function",
   "orbitals": [
     {
       "name": "RouteOrbital",
       "entity": {
         "name": "Route",
-        "persistence": "persistent",
         "collection": "routes",
+        "persistence": "persistent",
         "fields": [
           {
             "name": "id",
@@ -23,7 +23,6 @@
           {
             "name": "method",
             "type": "string",
-            "required": true,
             "values": [
               "GET",
               "POST",
@@ -51,23 +50,79 @@
       "traits": [
         {
           "name": "RouteBrowse",
-          "linkedEntity": "Route",
           "category": "interaction",
+          "linkedEntity": "Route",
+          "emits": [
+            {
+              "event": "RouteLoaded",
+              "description": "Fired when Route finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "path",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "method",
+                  "type": "string"
+                },
+                {
+                  "name": "backend",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "rateLimit",
+                  "type": "number"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "RouteLoadFailed",
+              "description": "Fired when Route fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "listens": [
             {
               "event": "ROUTE_CREATED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "RouteCreate"
+              }
             },
             {
               "event": "ROUTE_UPDATED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "RouteEdit"
+              }
             },
             {
               "event": "ROUTE_DELETED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "RouteDelete"
+              }
             }
           ],
           "stateMachine": {
@@ -83,12 +138,22 @@
                 "name": "Initialize"
               },
               {
-                "key": "CREATE",
-                "name": "CREATE"
+                "key": "RouteLoaded",
+                "name": "Route loaded"
+              },
+              {
+                "key": "RouteLoadFailed",
+                "name": "Route load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               },
               {
                 "key": "VIEW",
-                "name": "VIEW",
+                "name": "View",
                 "payload": [
                   {
                     "name": "id",
@@ -103,7 +168,7 @@
               },
               {
                 "key": "EDIT",
-                "name": "EDIT",
+                "name": "Edit",
                 "payload": [
                   {
                     "name": "id",
@@ -118,7 +183,7 @@
               },
               {
                 "key": "DELETE",
-                "name": "DELETE",
+                "name": "Delete",
                 "payload": [
                   {
                     "name": "id",
@@ -150,9 +215,9 @@
                       "appName": "API Gateway",
                       "navItems": [
                         {
+                          "icon": "git-branch",
                           "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
+                          "href": "/routes"
                         },
                         {
                           "label": "Backends",
@@ -160,56 +225,56 @@
                           "icon": "server"
                         },
                         {
+                          "icon": "bar-chart-2",
                           "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "href": "/analytics"
                         }
                       ],
                       "children": [
                         {
+                          "className": "max-w-5xl mx-auto w-full",
+                          "gap": "lg",
                           "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
-                          "className": "max-w-5xl mx-auto w-full",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "horizontal",
                               "gap": "md",
+                              "type": "stack",
                               "justify": "space-between",
                               "align": "center",
                               "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "sm",
-                                  "align": "center",
                                   "children": [
                                     {
                                       "type": "icon",
-                                      "name": "git-branch",
-                                      "size": "lg"
+                                      "size": "lg",
+                                      "name": "git-branch"
                                     },
                                     {
+                                      "variant": "h2",
                                       "type": "typography",
-                                      "content": "Routes",
-                                      "variant": "h2"
+                                      "content": "Routes"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "sm",
+                                  "type": "stack",
+                                  "align": "center",
+                                  "direction": "horizontal"
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "sm",
                                   "children": [
                                     {
-                                      "type": "button",
-                                      "label": "Create Route",
                                       "event": "CREATE",
-                                      "variant": "primary",
-                                      "icon": "plus"
+                                      "icon": "plus",
+                                      "label": "Create Route",
+                                      "type": "button",
+                                      "variant": "primary"
                                     }
-                                  ]
+                                  ],
+                                  "type": "stack",
+                                  "direction": "horizontal"
                                 }
                               ]
                             },
@@ -217,54 +282,54 @@
                               "type": "divider"
                             },
                             {
-                              "type": "data-list",
-                              "entity": "Route",
-                              "emptyIcon": "inbox",
                               "emptyTitle": "No routes configured",
+                              "columns": [
+                                {
+                                  "variant": "badge",
+                                  "name": "method"
+                                },
+                                {
+                                  "variant": "h3",
+                                  "icon": "git-branch",
+                                  "name": "path"
+                                },
+                                {
+                                  "variant": "body",
+                                  "name": "backend"
+                                },
+                                {
+                                  "name": "rateLimit",
+                                  "format": "number",
+                                  "label": "Rate Limit",
+                                  "variant": "caption"
+                                }
+                              ],
+                              "gap": "sm",
                               "emptyDescription": "Add API routes to your gateway.",
+                              "type": "data-list",
                               "itemActions": [
                                 {
-                                  "label": "View",
                                   "event": "VIEW",
                                   "variant": "ghost",
+                                  "label": "View",
                                   "size": "sm"
                                 },
                                 {
                                   "label": "Edit",
-                                  "event": "EDIT",
+                                  "size": "sm",
                                   "variant": "ghost",
-                                  "size": "sm"
+                                  "event": "EDIT"
                                 },
                                 {
                                   "label": "Delete",
-                                  "event": "DELETE",
                                   "variant": "danger",
-                                  "size": "sm"
-                                }
-                              ],
-                              "columns": [
-                                {
-                                  "name": "method",
-                                  "variant": "badge"
-                                },
-                                {
-                                  "name": "path",
-                                  "variant": "h3",
-                                  "icon": "git-branch"
-                                },
-                                {
-                                  "name": "backend",
-                                  "variant": "body"
-                                },
-                                {
-                                  "name": "rateLimit",
-                                  "label": "Rate Limit",
-                                  "variant": "caption",
-                                  "format": "number"
+                                  "size": "sm",
+                                  "event": "DELETE"
                                 }
                               ],
                               "variant": "card",
-                              "gap": "sm"
+                              "emptyIcon": "inbox",
+                              "entity": "Route"
                             }
                           ]
                         }
@@ -274,20 +339,68 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "RouteCreate",
-          "linkedEntity": "Route",
           "category": "interaction",
+          "linkedEntity": "Route",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "ROUTE_CREATED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "ROUTE_CREATED",
-              "scope": "external"
+              "event": "RouteLoaded",
+              "description": "Fired when Route finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "path",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "method",
+                  "type": "string"
+                },
+                {
+                  "name": "backend",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "rateLimit",
+                  "type": "number"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "RouteLoadFailed",
+              "description": "Fired when Route fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -307,7 +420,7 @@
               },
               {
                 "key": "CREATE",
-                "name": "Open"
+                "name": "Create"
               },
               {
                 "key": "CLOSE",
@@ -323,6 +436,24 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "ROUTE_CREATED",
+                "name": "Route Created"
+              },
+              {
+                "key": "RouteLoaded",
+                "name": "Route loaded"
+              },
+              {
+                "key": "RouteLoadFailed",
+                "name": "Route load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -344,50 +475,56 @@
                 "effects": [
                   [
                     "fetch",
-                    "Route"
+                    "Route",
+                    {
+                      "emit": {
+                        "failure": "RouteLoadFailed",
+                        "success": "RouteLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
-                      "type": "stack",
-                      "direction": "vertical",
-                      "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
                           "children": [
                             {
-                              "type": "icon",
+                              "size": "md",
                               "name": "plus-circle",
-                              "size": "md"
+                              "type": "icon"
                             },
                             {
-                              "type": "typography",
                               "content": "Create Route",
-                              "variant": "h3"
+                              "variant": "h3",
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "form-section",
-                          "entity": "Route",
-                          "mode": "create",
-                          "submitEvent": "SAVE",
-                          "cancelEvent": "CLOSE",
                           "fields": [
                             "path",
                             "method",
                             "backend",
                             "rateLimit"
-                          ]
+                          ],
+                          "mode": "create",
+                          "cancelEvent": "CLOSE",
+                          "type": "form-section",
+                          "entity": "Route",
+                          "submitEvent": "SAVE"
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "type": "stack",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -402,6 +539,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -425,6 +569,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "emit",
                     "ROUTE_CREATED"
@@ -432,20 +583,68 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "RouteEdit",
-          "linkedEntity": "Route",
           "category": "interaction",
+          "linkedEntity": "Route",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "ROUTE_UPDATED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "ROUTE_UPDATED",
-              "scope": "external"
+              "event": "RouteLoaded",
+              "description": "Fired when Route finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "path",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "method",
+                  "type": "string"
+                },
+                {
+                  "name": "backend",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "rateLimit",
+                  "type": "number"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "RouteLoadFailed",
+              "description": "Fired when Route fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -465,7 +664,7 @@
               },
               {
                 "key": "EDIT",
-                "name": "Open",
+                "name": "Edit",
                 "payload": [
                   {
                     "name": "id",
@@ -488,6 +687,24 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "ROUTE_UPDATED",
+                "name": "Route Updated"
+              },
+              {
+                "key": "RouteLoaded",
+                "name": "Route loaded"
+              },
+              {
+                "key": "RouteLoadFailed",
+                "name": "Route load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -511,40 +728,41 @@
                     "fetch",
                     "Route",
                     {
-                      "id": "@payload.id"
+                      "id": "@payload.id",
+                      "emit": {
+                        "success": "RouteLoaded",
+                        "failure": "RouteLoadFailed"
+                      }
                     }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
-                      "type": "stack",
-                      "direction": "vertical",
-                      "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
                           "children": [
                             {
                               "type": "icon",
-                              "name": "edit",
-                              "size": "md"
+                              "size": "md",
+                              "name": "edit"
                             },
                             {
-                              "type": "typography",
+                              "variant": "h3",
                               "content": "Edit Route",
-                              "variant": "h3"
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "type": "stack",
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
+                          "entityId": "@entity.id",
                           "type": "form-section",
-                          "entity": "Route",
                           "mode": "edit",
                           "submitEvent": "SAVE",
                           "cancelEvent": "CLOSE",
@@ -554,9 +772,12 @@
                             "backend",
                             "rateLimit"
                           ],
-                          "entityId": "@entity.id"
+                          "entity": "Route"
                         }
-                      ]
+                      ],
+                      "gap": "md",
+                      "type": "stack",
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -571,6 +792,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -594,6 +822,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "emit",
                     "ROUTE_UPDATED"
@@ -601,16 +836,58 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "RouteView",
-          "linkedEntity": "Route",
           "category": "interaction",
+          "linkedEntity": "Route",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "RouteLoaded",
+              "description": "Fired when Route finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "path",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "method",
+                  "type": "string"
+                },
+                {
+                  "name": "backend",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "rateLimit",
+                  "type": "number"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "RouteLoadFailed",
+              "description": "Fired when Route fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -630,7 +907,7 @@
               },
               {
                 "key": "VIEW",
-                "name": "Open",
+                "name": "View",
                 "payload": [
                   {
                     "name": "id",
@@ -653,6 +930,20 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "RouteLoaded",
+                "name": "Route loaded"
+              },
+              {
+                "key": "RouteLoadFailed",
+                "name": "Route load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -676,7 +967,11 @@
                     "fetch",
                     "Route",
                     {
-                      "id": "@payload.id"
+                      "id": "@payload.id",
+                      "emit": {
+                        "failure": "RouteLoadFailed",
+                        "success": "RouteLoaded"
+                      }
                     }
                   ],
                   [
@@ -685,23 +980,22 @@
                     {
                       "type": "stack",
                       "direction": "vertical",
-                      "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
                           "gap": "sm",
+                          "direction": "horizontal",
+                          "type": "stack",
                           "align": "center",
                           "children": [
                             {
+                              "size": "md",
                               "type": "icon",
-                              "name": "eye",
-                              "size": "md"
+                              "name": "eye"
                             },
                             {
-                              "type": "typography",
+                              "content": "@entity.path",
                               "variant": "h3",
-                              "content": "@entity.path"
+                              "type": "typography"
                             }
                           ]
                         },
@@ -709,98 +1003,99 @@
                           "type": "divider"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
                           "gap": "md",
+                          "direction": "horizontal",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "Path"
+                              "content": "Path",
+                              "type": "typography"
                             },
                             {
+                              "content": "@entity.path",
                               "type": "typography",
-                              "variant": "body",
-                              "content": "@entity.path"
+                              "variant": "body"
                             }
                           ]
                         },
                         {
-                          "type": "stack",
                           "direction": "horizontal",
-                          "gap": "md",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "Method"
+                              "content": "Method",
+                              "type": "typography"
                             },
                             {
                               "type": "typography",
                               "variant": "body",
                               "content": "@entity.method"
                             }
-                          ]
+                          ],
+                          "gap": "md"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
                           "gap": "md",
+                          "direction": "horizontal",
                           "children": [
                             {
+                              "content": "Backend",
                               "type": "typography",
-                              "variant": "caption",
-                              "content": "Backend"
+                              "variant": "caption"
                             },
                             {
                               "type": "typography",
                               "variant": "body",
                               "content": "@entity.backend"
                             }
-                          ]
+                          ],
+                          "type": "stack"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
                           "children": [
                             {
                               "type": "typography",
-                              "variant": "caption",
-                              "content": "Rate Limit"
+                              "content": "Rate Limit",
+                              "variant": "caption"
                             },
                             {
                               "type": "typography",
                               "variant": "body",
                               "content": "@entity.rateLimit"
                             }
-                          ]
+                          ],
+                          "gap": "md",
+                          "direction": "horizontal",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
                           "justify": "end",
+                          "direction": "horizontal",
                           "children": [
                             {
                               "type": "button",
-                              "label": "Edit",
-                              "event": "EDIT",
                               "variant": "primary",
+                              "event": "EDIT",
+                              "label": "Edit",
                               "icon": "edit"
                             },
                             {
-                              "type": "button",
                               "label": "Close",
-                              "event": "CLOSE",
-                              "variant": "ghost"
-                            }
-                          ]
+                              "variant": "ghost",
+                              "type": "button",
+                              "event": "CLOSE"
+                            }
+                          ],
+                          "gap": "sm",
+                          "type": "stack"
                         }
-                      ]
+                      ],
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -815,6 +1110,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -831,24 +1133,79 @@
                     "render-ui",
                     "modal",
                     null
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
                   ]
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "RouteDelete",
-          "linkedEntity": "Route",
           "category": "interaction",
+          "linkedEntity": "Route",
           "emits": [
             {
-              "event": "CONFIRM_DELETE",
-              "scope": "internal"
+              "event": "ROUTE_DELETED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "ROUTE_DELETED",
-              "scope": "external"
+              "event": "RouteLoaded",
+              "description": "Fired when Route finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "path",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "method",
+                  "type": "string"
+                },
+                {
+                  "name": "backend",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "rateLimit",
+                  "type": "number"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "RouteLoadFailed",
+              "description": "Fired when Route fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -868,7 +1225,7 @@
               },
               {
                 "key": "DELETE",
-                "name": "Request Confirmation",
+                "name": "Delete",
                 "payload": [
                   {
                     "name": "id",
@@ -879,7 +1236,7 @@
               },
               {
                 "key": "CONFIRM_DELETE",
-                "name": "Confirm"
+                "name": "Confirm Delete"
               },
               {
                 "key": "CANCEL",
@@ -888,6 +1245,24 @@
               {
                 "key": "CLOSE",
                 "name": "Close"
+              },
+              {
+                "key": "ROUTE_DELETED",
+                "name": "Route Deleted"
+              },
+              {
+                "key": "RouteLoaded",
+                "name": "Route loaded"
+              },
+              {
+                "key": "RouteLoadFailed",
+                "name": "Route load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -916,6 +1291,10 @@
                     "fetch",
                     "Route",
                     {
+                      "emit": {
+                        "success": "RouteLoaded",
+                        "failure": "RouteLoadFailed"
+                      },
                       "id": "@payload.id"
                     }
                   ],
@@ -924,12 +1303,9 @@
                     "modal",
                     {
                       "type": "stack",
-                      "direction": "vertical",
-                      "gap": "md",
                       "children": [
                         {
                           "type": "stack",
-                          "direction": "horizontal",
                           "gap": "sm",
                           "align": "center",
                           "children": [
@@ -939,42 +1315,45 @@
                               "size": "md"
                             },
                             {
-                              "type": "typography",
                               "content": "Delete Route",
+                              "type": "typography",
                               "variant": "h3"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal"
                         },
                         {
                           "type": "divider"
                         },
                         {
                           "type": "alert",
-                          "variant": "danger",
-                          "message": "This action cannot be undone."
+                          "message": "This action cannot be undone.",
+                          "variant": "danger"
                         },
                         {
                           "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
                           "justify": "end",
+                          "gap": "sm",
                           "children": [
                             {
-                              "type": "button",
-                              "label": "Cancel",
                               "event": "CANCEL",
-                              "variant": "ghost"
+                              "variant": "ghost",
+                              "type": "button",
+                              "label": "Cancel"
                             },
                             {
+                              "icon": "check",
                               "type": "button",
-                              "label": "Delete",
                               "event": "CONFIRM_DELETE",
-                              "variant": "danger",
-                              "icon": "check"
+                              "label": "Delete",
+                              "variant": "danger"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal"
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -995,6 +1374,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Route"
@@ -1015,6 +1401,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Route"
@@ -1031,6 +1424,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Route"
@@ -1038,14 +1438,14 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
           "name": "RoutesPage",
           "path": "/routes",
-          "isInitial": true,
           "traits": [
             {
               "ref": "RouteBrowse"
@@ -1097,38 +1497,78 @@
           },
           {
             "name": "failureCount",
-            "type": "number",
-            "default": 0
+            "type": "number"
           },
           {
             "name": "successCount",
-            "type": "number",
-            "default": 0
+            "type": "number"
           },
           {
             "name": "threshold",
-            "type": "number",
-            "default": 5
-          }
-        ],
-        "instances": [
-          {
-            "id": "sn-1",
-            "name": "ServiceNode",
-            "description": "Primary API gateway",
-            "status": "active",
-            "createdAt": "2026-01-10",
-            "failureCount": 783,
-            "successCount": 603,
-            "threshold": 5
+            "type": "number"
           }
         ]
       },
       "traits": [
         {
           "name": "BackendCircuitBreaker",
-          "linkedEntity": "Backend",
           "category": "interaction",
+          "linkedEntity": "Backend",
+          "emits": [
+            {
+              "event": "BackendLoaded",
+              "description": "Fired when Backend finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "name",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "url",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "latency",
+                  "type": "number"
+                },
+                {
+                  "name": "failureCount",
+                  "type": "number"
+                },
+                {
+                  "name": "successCount",
+                  "type": "number"
+                },
+                {
+                  "name": "threshold",
+                  "type": "number"
+                }
+              ]
+            },
+            {
+              "event": "BackendLoadFailed",
+              "description": "Fired when Backend fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
@@ -1162,6 +1602,20 @@
               {
                 "key": "RESET",
                 "name": "Reset"
+              },
+              {
+                "key": "BackendLoaded",
+                "name": "Backend loaded"
+              },
+              {
+                "key": "BackendLoadFailed",
+                "name": "Backend load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -1172,85 +1626,67 @@
                 "effects": [
                   [
                     "fetch",
-                    "Backend"
+                    "Backend",
+                    {
+                      "emit": {
+                        "failure": "BackendLoadFailed",
+                        "success": "BackendLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "API Gateway",
-                      "navItems": [
-                        {
-                          "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
-                        },
-                        {
-                          "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
-                        },
-                        {
-                          "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
                               "justify": "space-between",
+                              "direction": "horizontal",
                               "children": [
                                 {
                                   "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md",
-                                  "align": "center",
                                   "children": [
                                     {
+                                      "size": "lg",
                                       "type": "icon",
-                                      "name": "server",
-                                      "size": "lg"
+                                      "name": "server"
                                     },
                                     {
                                       "type": "typography",
-                                      "content": "Backend",
-                                      "variant": "h2"
+                                      "variant": "h2",
+                                      "content": "Backend"
                                     }
-                                  ]
+                                  ],
+                                  "align": "center",
+                                  "direction": "horizontal",
+                                  "gap": "md"
                                 },
                                 {
                                   "type": "status-dot",
-                                  "status": "success",
+                                  "label": "Circuit Closed",
                                   "pulse": false,
-                                  "label": "Circuit Closed"
+                                  "status": "success"
                                 }
-                              ]
+                              ],
+                              "type": "stack",
+                              "gap": "md",
+                              "align": "center"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "type": "alert",
+                              "message": "Service is healthy. All requests are being processed.",
                               "variant": "success",
-                              "message": "Service is healthy. All requests are being processed."
+                              "type": "alert"
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
                               "children": [
                                 {
-                                  "type": "stat-display",
-                                  "label": "Failures",
                                   "value": [
                                     "object/get",
                                     [
@@ -1258,11 +1694,12 @@
                                       "@entity"
                                     ],
                                     "failureCount"
-                                  ]
+                                  ],
+                                  "type": "stat-display",
+                                  "label": "Failures"
                                 },
                                 {
                                   "type": "stat-display",
-                                  "label": "Successes",
                                   "value": [
                                     "object/get",
                                     [
@@ -1270,9 +1707,11 @@
                                       "@entity"
                                     ],
                                     "successCount"
-                                  ]
+                                  ],
+                                  "label": "Successes"
                                 }
-                              ]
+                              ],
+                              "columns": 2.0
                             },
                             {
                               "type": "meter",
@@ -1284,7 +1723,7 @@
                                 ],
                                 "failureCount"
                               ],
-                              "min": 0,
+                              "min": 0.0,
                               "max": [
                                 "object/get",
                                 [
@@ -1294,7 +1733,28 @@
                                 "threshold"
                               ]
                             }
-                          ]
+                          ],
+                          "type": "stack",
+                          "gap": "lg",
+                          "direction": "vertical"
+                        }
+                      ],
+                      "appName": "API Gateway",
+                      "navItems": [
+                        {
+                          "icon": "git-branch",
+                          "label": "Routes",
+                          "href": "/routes"
+                        },
+                        {
+                          "label": "Backends",
+                          "href": "/backends",
+                          "icon": "server"
+                        },
+                        {
+                          "href": "/analytics",
+                          "icon": "bar-chart-2",
+                          "label": "Analytics"
                         }
                       ]
                     }
@@ -1310,43 +1770,22 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "API Gateway",
-                      "navItems": [
-                        {
-                          "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
-                        },
-                        {
-                          "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
-                        },
-                        {
-                          "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
-                        }
-                      ],
                       "children": [
                         {
+                          "gap": "lg",
                           "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
                               "align": "center",
                               "justify": "space-between",
+                              "direction": "horizontal",
+                              "type": "stack",
+                              "gap": "md",
                               "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md",
                                   "align": "center",
+                                  "gap": "md",
                                   "children": [
                                     {
                                       "type": "icon",
@@ -1354,17 +1793,19 @@
                                       "size": "lg"
                                     },
                                     {
-                                      "type": "typography",
                                       "content": "Backend",
-                                      "variant": "h2"
+                                      "variant": "h2",
+                                      "type": "typography"
                                     }
-                                  ]
+                                  ],
+                                  "direction": "horizontal",
+                                  "type": "stack"
                                 },
                                 {
-                                  "type": "status-dot",
-                                  "status": "error",
                                   "pulse": true,
-                                  "label": "Circuit Open"
+                                  "label": "Circuit Open",
+                                  "status": "error",
+                                  "type": "status-dot"
                                 }
                               ]
                             },
@@ -1377,8 +1818,8 @@
                               "message": "Circuit is open. Requests are being rejected to prevent cascading failures."
                             },
                             {
+                              "columns": 2.0,
                               "type": "simple-grid",
-                              "columns": 2,
                               "children": [
                                 {
                                   "type": "stat-display",
@@ -1407,7 +1848,7 @@
                               ]
                             },
                             {
-                              "type": "meter",
+                              "min": 0.0,
                               "value": [
                                 "object/get",
                                 [
@@ -1416,7 +1857,6 @@
                                 ],
                                 "failureCount"
                               ],
-                              "min": 0,
                               "max": [
                                 "object/get",
                                 [
@@ -1424,17 +1864,37 @@
                                   "@entity"
                                 ],
                                 "threshold"
-                              ]
+                              ],
+                              "type": "meter"
                             },
                             {
-                              "type": "button",
-                              "label": "Reset",
                               "event": "RESET",
+                              "label": "Reset",
+                              "type": "button",
                               "variant": "ghost",
                               "icon": "rotate-ccw"
                             }
                           ]
                         }
+                      ],
+                      "type": "dashboard-layout",
+                      "appName": "API Gateway",
+                      "navItems": [
+                        {
+                          "label": "Routes",
+                          "icon": "git-branch",
+                          "href": "/routes"
+                        },
+                        {
+                          "href": "/backends",
+                          "icon": "server",
+                          "label": "Backends"
+                        },
+                        {
+                          "href": "/analytics",
+                          "label": "Analytics",
+                          "icon": "bar-chart-2"
+                        }
                       ]
                     }
                   ]
@@ -1449,79 +1909,74 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
                       "appName": "API Gateway",
                       "navItems": [
                         {
-                          "label": "Routes",
                           "href": "/routes",
-                          "icon": "git-branch"
+                          "icon": "git-branch",
+                          "label": "Routes"
                         },
                         {
                           "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
+                          "icon": "server",
+                          "href": "/backends"
                         },
                         {
+                          "icon": "bar-chart-2",
                           "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "href": "/analytics"
                         }
                       ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
                               "type": "stack",
                               "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
                               "justify": "space-between",
                               "children": [
                                 {
+                                  "gap": "md",
                                   "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
-                                  "align": "center",
                                   "children": [
                                     {
+                                      "size": "lg",
                                       "type": "icon",
-                                      "name": "server",
-                                      "size": "lg"
+                                      "name": "server"
                                     },
                                     {
                                       "type": "typography",
                                       "content": "Backend",
                                       "variant": "h2"
                                     }
-                                  ]
+                                  ],
+                                  "align": "center"
                                 },
                                 {
                                   "type": "status-dot",
-                                  "status": "success",
                                   "pulse": false,
-                                  "label": "Circuit Closed"
+                                  "label": "Circuit Closed",
+                                  "status": "success"
                                 }
-                              ]
+                              ],
+                              "align": "center",
+                              "gap": "md"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "type": "alert",
                               "variant": "success",
-                              "message": "Service is healthy. All requests are being processed."
+                              "message": "Service is healthy. All requests are being processed.",
+                              "type": "alert"
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
                               "children": [
                                 {
-                                  "type": "stat-display",
-                                  "label": "Failures",
                                   "value": [
                                     "object/get",
                                     [
@@ -1529,7 +1984,9 @@
                                       "@entity"
                                     ],
                                     "failureCount"
-                                  ]
+                                  ],
+                                  "label": "Failures",
+                                  "type": "stat-display"
                                 },
                                 {
                                   "type": "stat-display",
@@ -1543,29 +2000,32 @@
                                     "successCount"
                                   ]
                                 }
-                              ]
+                              ],
+                              "columns": 2.0
                             },
                             {
-                              "type": "meter",
-                              "value": [
+                              "max": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "failureCount"
+                                "threshold"
                               ],
-                              "min": 0,
-                              "max": [
+                              "type": "meter",
+                              "min": 0.0,
+                              "value": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "threshold"
+                                "failureCount"
                               ]
                             }
-                          ]
+                          ],
+                          "type": "stack",
+                          "gap": "lg"
                         }
                       ]
                     }
@@ -1581,43 +2041,20 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "API Gateway",
-                      "navItems": [
-                        {
-                          "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
-                        },
-                        {
-                          "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
-                        },
-                        {
-                          "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
                               "gap": "md",
                               "align": "center",
+                              "direction": "horizontal",
+                              "type": "stack",
                               "justify": "space-between",
                               "children": [
                                 {
+                                  "gap": "md",
                                   "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
-                                  "align": "center",
                                   "children": [
                                     {
                                       "type": "icon",
@@ -1629,13 +2066,14 @@
                                       "content": "Backend",
                                       "variant": "h2"
                                     }
-                                  ]
+                                  ],
+                                  "align": "center"
                                 },
                                 {
-                                  "type": "status-dot",
                                   "status": "warning",
-                                  "pulse": true,
-                                  "label": "Circuit Half-Open"
+                                  "label": "Circuit Half-Open",
+                                  "type": "status-dot",
+                                  "pulse": true
                                 }
                               ]
                             },
@@ -1643,13 +2081,13 @@
                               "type": "divider"
                             },
                             {
+                              "message": "Testing recovery. Limited requests are being allowed through.",
                               "type": "alert",
-                              "variant": "warning",
-                              "message": "Testing recovery. Limited requests are being allowed through."
+                              "variant": "warning"
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
+                              "columns": 2.0,
                               "children": [
                                 {
                                   "type": "stat-display",
@@ -1664,8 +2102,6 @@
                                   ]
                                 },
                                 {
-                                  "type": "stat-display",
-                                  "label": "Successes",
                                   "value": [
                                     "object/get",
                                     [
@@ -1673,11 +2109,35 @@
                                       "@entity"
                                     ],
                                     "successCount"
-                                  ]
+                                  ],
+                                  "type": "stat-display",
+                                  "label": "Successes"
                                 }
                               ]
                             }
-                          ]
+                          ],
+                          "gap": "lg",
+                          "type": "stack",
+                          "direction": "vertical"
+                        }
+                      ],
+                      "appName": "API Gateway",
+                      "type": "dashboard-layout",
+                      "navItems": [
+                        {
+                          "icon": "git-branch",
+                          "label": "Routes",
+                          "href": "/routes"
+                        },
+                        {
+                          "label": "Backends",
+                          "href": "/backends",
+                          "icon": "server"
+                        },
+                        {
+                          "href": "/analytics",
+                          "label": "Analytics",
+                          "icon": "bar-chart-2"
                         }
                       ]
                     }
@@ -1693,79 +2153,76 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "API Gateway",
                       "navItems": [
                         {
-                          "label": "Routes",
                           "href": "/routes",
-                          "icon": "git-branch"
+                          "icon": "git-branch",
+                          "label": "Routes"
                         },
                         {
-                          "label": "Backends",
                           "href": "/backends",
+                          "label": "Backends",
                           "icon": "server"
                         },
                         {
                           "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "icon": "bar-chart-2",
+                          "href": "/analytics"
                         }
                       ],
+                      "appName": "API Gateway",
+                      "type": "dashboard-layout",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
-                              "justify": "space-between",
                               "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md",
-                                  "align": "center",
                                   "children": [
                                     {
-                                      "type": "icon",
                                       "name": "server",
+                                      "type": "icon",
                                       "size": "lg"
                                     },
                                     {
-                                      "type": "typography",
                                       "content": "Backend",
-                                      "variant": "h2"
+                                      "variant": "h2",
+                                      "type": "typography"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "md",
+                                  "direction": "horizontal",
+                                  "type": "stack",
+                                  "align": "center"
                                 },
                                 {
-                                  "type": "status-dot",
                                   "status": "success",
                                   "pulse": false,
-                                  "label": "Circuit Closed"
+                                  "label": "Circuit Closed",
+                                  "type": "status-dot"
                                 }
-                              ]
+                              ],
+                              "align": "center",
+                              "type": "stack",
+                              "justify": "space-between",
+                              "gap": "md",
+                              "direction": "horizontal"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "type": "alert",
                               "variant": "success",
+                              "type": "alert",
                               "message": "Service is healthy. All requests are being processed."
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
+                              "columns": 2.0,
                               "children": [
                                 {
-                                  "type": "stat-display",
                                   "label": "Failures",
+                                  "type": "stat-display",
                                   "value": [
                                     "object/get",
                                     [
@@ -1776,8 +2233,8 @@
                                   ]
                                 },
                                 {
-                                  "type": "stat-display",
                                   "label": "Successes",
+                                  "type": "stat-display",
                                   "value": [
                                     "object/get",
                                     [
@@ -1790,7 +2247,6 @@
                               ]
                             },
                             {
-                              "type": "meter",
                               "value": [
                                 "object/get",
                                 [
@@ -1799,7 +2255,7 @@
                                 ],
                                 "failureCount"
                               ],
-                              "min": 0,
+                              "min": 0.0,
                               "max": [
                                 "object/get",
                                 [
@@ -1807,9 +2263,13 @@
                                   "@entity"
                                 ],
                                 "threshold"
-                              ]
+                              ],
+                              "type": "meter"
                             }
-                          ]
+                          ],
+                          "direction": "vertical",
+                          "type": "stack",
+                          "gap": "lg"
                         }
                       ]
                     }
@@ -1826,7 +2286,6 @@
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "API Gateway",
                       "navItems": [
                         {
                           "label": "Routes",
@@ -1834,66 +2293,66 @@
                           "icon": "git-branch"
                         },
                         {
-                          "label": "Backends",
                           "href": "/backends",
-                          "icon": "server"
+                          "icon": "server",
+                          "label": "Backends"
                         },
                         {
-                          "label": "Analytics",
                           "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "icon": "bar-chart-2",
+                          "label": "Analytics"
                         }
                       ],
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
+                          "type": "stack",
                           "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
                               "justify": "space-between",
                               "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md",
-                                  "align": "center",
                                   "children": [
                                     {
+                                      "size": "lg",
                                       "type": "icon",
-                                      "name": "server",
-                                      "size": "lg"
+                                      "name": "server"
                                     },
                                     {
-                                      "type": "typography",
                                       "content": "Backend",
+                                      "type": "typography",
                                       "variant": "h2"
                                     }
-                                  ]
+                                  ],
+                                  "direction": "horizontal",
+                                  "gap": "md",
+                                  "type": "stack",
+                                  "align": "center"
                                 },
                                 {
                                   "type": "status-dot",
-                                  "status": "success",
+                                  "label": "Circuit Closed",
                                   "pulse": false,
-                                  "label": "Circuit Closed"
+                                  "status": "success"
                                 }
-                              ]
+                              ],
+                              "gap": "md",
+                              "direction": "horizontal",
+                              "type": "stack",
+                              "align": "center"
                             },
                             {
                               "type": "divider"
                             },
                             {
                               "type": "alert",
-                              "variant": "success",
-                              "message": "Service is healthy. All requests are being processed."
+                              "message": "Service is healthy. All requests are being processed.",
+                              "variant": "success"
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
+                              "columns": 2.0,
                               "children": [
                                 {
                                   "type": "stat-display",
@@ -1922,7 +2381,6 @@
                               ]
                             },
                             {
-                              "type": "meter",
                               "value": [
                                 "object/get",
                                 [
@@ -1931,7 +2389,6 @@
                                 ],
                                 "failureCount"
                               ],
-                              "min": 0,
                               "max": [
                                 "object/get",
                                 [
@@ -1939,11 +2396,14 @@
                                   "@entity"
                                 ],
                                 "threshold"
-                              ]
+                              ],
+                              "type": "meter",
+                              "min": 0.0
                             }
                           ]
                         }
-                      ]
+                      ],
+                      "appName": "API Gateway"
                     }
                   ]
                 ]
@@ -1958,7 +2418,6 @@
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "API Gateway",
                       "navItems": [
                         {
                           "label": "Routes",
@@ -1978,58 +2437,54 @@
                       ],
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
                               "align": "center",
-                              "justify": "space-between",
+                              "gap": "md",
                               "children": [
                                 {
                                   "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "align": "center",
                                   "children": [
                                     {
-                                      "type": "icon",
-                                      "name": "alert-triangle",
-                                      "size": "lg"
+                                      "size": "lg",
+                                      "type": "icon",
+                                      "name": "alert-triangle"
                                     },
                                     {
                                       "type": "typography",
                                       "content": "Backend",
                                       "variant": "h2"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "md"
                                 },
                                 {
-                                  "type": "status-dot",
                                   "status": "error",
                                   "pulse": true,
+                                  "type": "status-dot",
                                   "label": "Circuit Open"
                                 }
-                              ]
+                              ],
+                              "type": "stack",
+                              "justify": "space-between",
+                              "direction": "horizontal"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "type": "alert",
                               "variant": "danger",
+                              "type": "alert",
                               "message": "Circuit is open. Requests are being rejected to prevent cascading failures."
                             },
                             {
                               "type": "simple-grid",
-                              "columns": 2,
+                              "columns": 2.0,
                               "children": [
                                 {
                                   "type": "stat-display",
-                                  "label": "Failures",
                                   "value": [
                                     "object/get",
                                     [
@@ -2037,11 +2492,12 @@
                                       "@entity"
                                     ],
                                     "failureCount"
-                                  ]
+                                  ],
+                                  "label": "Failures"
                                 },
                                 {
-                                  "type": "stat-display",
                                   "label": "Successes",
+                                  "type": "stat-display",
                                   "value": [
                                     "object/get",
                                     [
@@ -2054,35 +2510,39 @@
                               ]
                             },
                             {
-                              "type": "meter",
-                              "value": [
+                              "max": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "failureCount"
+                                "threshold"
                               ],
-                              "min": 0,
-                              "max": [
+                              "type": "meter",
+                              "min": 0.0,
+                              "value": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "threshold"
+                                "failureCount"
                               ]
                             },
                             {
-                              "type": "button",
                               "label": "Reset",
-                              "event": "RESET",
+                              "icon": "rotate-ccw",
+                              "type": "button",
                               "variant": "ghost",
-                              "icon": "rotate-ccw"
+                              "event": "RESET"
                             }
-                          ]
+                          ],
+                          "gap": "lg",
+                          "direction": "vertical",
+                          "type": "stack"
                         }
-                      ]
+                      ],
+                      "appName": "API Gateway"
                     }
                   ]
                 ]
@@ -2097,47 +2557,41 @@
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "API Gateway",
                       "navItems": [
                         {
+                          "icon": "git-branch",
                           "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
+                          "href": "/routes"
                         },
                         {
+                          "icon": "server",
                           "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
+                          "href": "/backends"
                         },
                         {
+                          "icon": "bar-chart-2",
                           "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "href": "/analytics"
                         }
                       ],
+                      "appName": "API Gateway",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
-                              "justify": "space-between",
                               "children": [
                                 {
+                                  "gap": "md",
                                   "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "align": "center",
                                   "children": [
                                     {
                                       "type": "icon",
-                                      "name": "server",
-                                      "size": "lg"
+                                      "size": "lg",
+                                      "name": "server"
                                     },
                                     {
                                       "type": "typography",
@@ -2147,12 +2601,17 @@
                                   ]
                                 },
                                 {
-                                  "type": "status-dot",
                                   "status": "success",
+                                  "type": "status-dot",
                                   "pulse": false,
                                   "label": "Circuit Closed"
                                 }
-                              ]
+                              ],
+                              "direction": "horizontal",
+                              "gap": "md",
+                              "align": "center",
+                              "justify": "space-between",
+                              "type": "stack"
                             },
                             {
                               "type": "divider"
@@ -2163,12 +2622,10 @@
                               "message": "Service is healthy. All requests are being processed."
                             },
                             {
-                              "type": "simple-grid",
-                              "columns": 2,
+                              "columns": 2.0,
                               "children": [
                                 {
                                   "type": "stat-display",
-                                  "label": "Failures",
                                   "value": [
                                     "object/get",
                                     [
@@ -2176,11 +2633,11 @@
                                       "@entity"
                                     ],
                                     "failureCount"
-                                  ]
+                                  ],
+                                  "label": "Failures"
                                 },
                                 {
                                   "type": "stat-display",
-                                  "label": "Successes",
                                   "value": [
                                     "object/get",
                                     [
@@ -2188,31 +2645,34 @@
                                       "@entity"
                                     ],
                                     "successCount"
-                                  ]
+                                  ],
+                                  "label": "Successes"
                                 }
-                              ]
+                              ],
+                              "type": "simple-grid"
                             },
                             {
                               "type": "meter",
-                              "value": [
+                              "max": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "failureCount"
+                                "threshold"
                               ],
-                              "min": 0,
-                              "max": [
+                              "min": 0.0,
+                              "value": [
                                 "object/get",
                                 [
                                   "array/first",
                                   "@entity"
                                 ],
-                                "threshold"
+                                "failureCount"
                               ]
                             }
-                          ]
+                          ],
+                          "gap": "lg"
                         }
                       ]
                     }
@@ -2220,12 +2680,13 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
-          "name": "BackendsPage",
+          "name": "Backends",
           "path": "/backends",
           "traits": [
             {
@@ -2269,8 +2730,51 @@
       "traits": [
         {
           "name": "AnalyticsDisplay",
-          "linkedEntity": "Analytics",
           "category": "interaction",
+          "linkedEntity": "Analytics",
+          "emits": [
+            {
+              "event": "AnalyticsLoaded",
+              "description": "Fired when Analytics finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "totalRequests",
+                  "type": "number",
+                  "required": true
+                },
+                {
+                  "name": "errorRate",
+                  "type": "number",
+                  "required": true
+                },
+                {
+                  "name": "avgLatency",
+                  "type": "number"
+                },
+                {
+                  "name": "uptime",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "AnalyticsLoadFailed",
+              "description": "Fired when Analytics fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
@@ -2300,6 +2804,20 @@
               {
                 "key": "REFRESHED",
                 "name": "Refreshed"
+              },
+              {
+                "key": "AnalyticsLoaded",
+                "name": "Analytics loaded"
+              },
+              {
+                "key": "AnalyticsLoadFailed",
+                "name": "Analytics load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -2310,7 +2828,13 @@
                 "effects": [
                   [
                     "fetch",
-                    "Analytics"
+                    "Analytics",
+                    {
+                      "emit": {
+                        "success": "AnalyticsLoaded",
+                        "failure": "AnalyticsLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
@@ -2320,9 +2844,9 @@
                       "appName": "API Gateway",
                       "navItems": [
                         {
-                          "label": "Routes",
                           "href": "/routes",
-                          "icon": "git-branch"
+                          "icon": "git-branch",
+                          "label": "Routes"
                         },
                         {
                           "label": "Backends",
@@ -2330,19 +2854,16 @@
                           "icon": "server"
                         },
                         {
-                          "label": "Analytics",
                           "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "icon": "bar-chart-2",
+                          "label": "Analytics"
                         }
                       ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
@@ -2357,34 +2878,34 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "justify": "space-between",
+                                  "type": "stack",
+                                  "gap": "md",
                                   "children": [
                                     {
                                       "type": "stack",
                                       "direction": "horizontal",
-                                      "gap": "md",
                                       "children": [
                                         {
-                                          "type": "icon",
                                           "name": "bar-chart-2",
-                                          "size": "lg"
+                                          "size": "lg",
+                                          "type": "icon"
                                         },
                                         {
                                           "type": "typography",
                                           "content": "Analytics",
                                           "variant": "h2"
                                         }
-                                      ]
+                                      ],
+                                      "gap": "md"
                                     },
                                     {
                                       "type": "button",
                                       "label": "Refresh",
-                                      "event": "REFRESH",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "icon": "refresh-cw",
+                                      "event": "REFRESH"
                                     }
                                   ]
                                 },
@@ -2392,12 +2913,10 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
+                                      "columns": 3.0,
                                       "children": [
                                         {
                                           "type": "stat-display",
@@ -2412,8 +2931,8 @@
                                           ]
                                         },
                                         {
-                                          "type": "stat-display",
                                           "label": "ErrorRate",
+                                          "type": "stat-display",
                                           "value": [
                                             "object/get",
                                             [
@@ -2440,17 +2959,13 @@
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Uptime"
+                                                  "content": "Uptime",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2458,23 +2973,28 @@
                                                       "@entity"
                                                     ],
                                                     "uptime"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
                                           ]
                                         }
-                                      ]
+                                      ],
+                                      "type": "simple-grid"
                                     }
-                                  ]
+                                  ],
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "columns": 2,
                                   "gap": "md",
+                                  "columns": 2.0,
                                   "children": [
                                     {
                                       "type": "card",
@@ -2487,100 +3007,104 @@
                                       ]
                                     },
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     }
-                                  ]
+                                  ],
+                                  "type": "grid"
                                 },
                                 {
+                                  "title": "Trend",
                                   "type": "line-chart",
+                                  "yKey": "value",
+                                  "xKey": "date",
                                   "data": [
                                     {
                                       "date": "Jan",
-                                      "value": 12
+                                      "value": 12.0
                                     },
                                     {
                                       "date": "Feb",
-                                      "value": 19
+                                      "value": 19.0
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
-                                  ],
-                                  "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  ]
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
                                       "label": "Previous",
                                       "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
                                   "type": "graph-view",
+                                  "height": 200.0,
+                                  "edges": [
+                                    {
+                                      "to": "b",
+                                      "from": "a"
+                                    },
+                                    {
+                                      "from": "b",
+                                      "to": "c"
+                                    }
+                                  ],
+                                  "width": 400.0,
                                   "nodes": [
                                     {
-                                      "id": "a",
+                                      "x": 50.0,
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "y": 100.0,
+                                      "id": "a"
                                     },
                                     {
+                                      "y": 50.0,
                                       "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "x": 200.0
                                     },
                                     {
                                       "id": "c",
+                                      "x": 350.0,
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
-                                    }
-                                  ],
-                                  "edges": [
-                                    {
-                                      "from": "a",
-                                      "to": "b"
-                                    },
-                                    {
-                                      "from": "b",
-                                      "to": "c"
+                                      "y": 100.0
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "gap": "lg",
+                              "type": "stack"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
                         }
                       ]
                     }
@@ -2594,39 +3118,42 @@
                 "effects": [
                   [
                     "fetch",
-                    "Analytics"
+                    "Analytics",
+                    {
+                      "emit": {
+                        "success": "AnalyticsLoaded",
+                        "failure": "AnalyticsLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "API Gateway",
                       "navItems": [
                         {
+                          "icon": "git-branch",
                           "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
+                          "href": "/routes"
                         },
                         {
                           "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
+                          "icon": "server",
+                          "href": "/backends"
                         },
                         {
-                          "label": "Analytics",
                           "href": "/analytics",
-                          "icon": "bar-chart-2"
+                          "icon": "bar-chart-2",
+                          "label": "Analytics"
                         }
                       ],
+                      "type": "dashboard-layout",
+                      "appName": "API Gateway",
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
@@ -2641,51 +3168,47 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "md",
+                                  "type": "stack",
                                   "justify": "space-between",
                                   "children": [
                                     {
-                                      "type": "stack",
                                       "direction": "horizontal",
                                       "gap": "md",
                                       "children": [
                                         {
-                                          "type": "icon",
                                           "name": "bar-chart-2",
-                                          "size": "lg"
+                                          "size": "lg",
+                                          "type": "icon"
                                         },
                                         {
-                                          "type": "typography",
                                           "content": "Analytics",
+                                          "type": "typography",
                                           "variant": "h2"
                                         }
-                                      ]
+                                      ],
+                                      "type": "stack"
                                     },
                                     {
-                                      "type": "button",
                                       "label": "Refresh",
+                                      "icon": "refresh-cw",
                                       "event": "REFRESH",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "type": "button"
                                     }
-                                  ]
+                                  ],
+                                  "direction": "horizontal"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
                                           "type": "stat-display",
-                                          "label": "TotalRequests",
                                           "value": [
                                             "object/get",
                                             [
@@ -2693,7 +3216,8 @@
                                               "@entity"
                                             ],
                                             "totalRequests"
-                                          ]
+                                          ],
+                                          "label": "TotalRequests"
                                         },
                                         {
                                           "type": "stat-display",
@@ -2748,71 +3272,74 @@
                                             }
                                           ]
                                         }
-                                      ]
+                                      ],
+                                      "columns": 3.0,
+                                      "type": "simple-grid"
                                     }
-                                  ]
+                                  ],
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "columns": 2.0,
                                   "type": "grid",
-                                  "columns": 2,
                                   "gap": "md",
                                   "children": [
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
                                           "variant": "caption",
                                           "content": "Chart View"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     },
                                     {
                                       "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
                                       ]
                                     }
                                   ]
                                 },
                                 {
-                                  "type": "line-chart",
+                                  "xKey": "date",
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
                                       "date": "Feb",
-                                      "value": 19
+                                      "value": 19.0
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
                                       "date": "May",
-                                      "value": 22
+                                      "value": 22.0
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
                                   ],
-                                  "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  "type": "line-chart",
+                                  "title": "Trend",
+                                  "yKey": "value"
                                 },
                                 {
                                   "type": "chart-legend",
@@ -2822,33 +3349,35 @@
                                       "color": "primary"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
                                   ]
                                 },
                                 {
                                   "type": "graph-view",
+                                  "height": 200.0,
                                   "nodes": [
                                     {
                                       "id": "a",
-                                      "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "x": 50.0,
+                                      "y": 100.0,
+                                      "label": "Start"
                                     },
                                     {
-                                      "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "x": 200.0,
+                                      "id": "b",
+                                      "y": 50.0
                                     },
                                     {
+                                      "x": 350.0,
                                       "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "y": 100.0
                                     }
                                   ],
+                                  "width": 400.0,
                                   "edges": [
                                     {
                                       "from": "a",
@@ -2858,11 +3387,12 @@
                                       "from": "b",
                                       "to": "c"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "type": "stack",
+                              "gap": "lg",
+                              "direction": "vertical"
                             }
                           ]
                         }
@@ -2878,7 +3408,13 @@
                 "effects": [
                   [
                     "fetch",
-                    "Analytics"
+                    "Analytics",
+                    {
+                      "emit": {
+                        "success": "AnalyticsLoaded",
+                        "failure": "AnalyticsLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
@@ -2888,18 +3424,18 @@
                       "appName": "API Gateway",
                       "navItems": [
                         {
-                          "label": "Routes",
                           "href": "/routes",
-                          "icon": "git-branch"
+                          "icon": "git-branch",
+                          "label": "Routes"
                         },
                         {
-                          "label": "Backends",
                           "href": "/backends",
+                          "label": "Backends",
                           "icon": "server"
                         },
                         {
-                          "label": "Analytics",
                           "href": "/analytics",
+                          "label": "Analytics",
                           "icon": "bar-chart-2"
                         }
                       ],
@@ -2908,49 +3444,47 @@
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "vertical",
                               "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Analytics"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "md",
+                                  "direction": "horizontal",
+                                  "type": "stack",
                                   "justify": "space-between",
                                   "children": [
                                     {
                                       "type": "stack",
-                                      "direction": "horizontal",
-                                      "gap": "md",
                                       "children": [
                                         {
+                                          "size": "lg",
                                           "type": "icon",
-                                          "name": "bar-chart-2",
-                                          "size": "lg"
+                                          "name": "bar-chart-2"
                                         },
                                         {
-                                          "type": "typography",
                                           "content": "Analytics",
+                                          "type": "typography",
                                           "variant": "h2"
                                         }
-                                      ]
+                                      ],
+                                      "direction": "horizontal",
+                                      "gap": "md"
                                     },
                                     {
+                                      "event": "REFRESH",
                                       "type": "button",
                                       "label": "Refresh",
-                                      "event": "REFRESH",
                                       "variant": "secondary",
                                       "icon": "refresh-cw"
                                     }
@@ -2960,15 +3494,11 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
-                                          "type": "stat-display",
                                           "label": "TotalRequests",
                                           "value": [
                                             "object/get",
@@ -2977,7 +3507,8 @@
                                               "@entity"
                                             ],
                                             "totalRequests"
-                                          ]
+                                          ],
+                                          "type": "stat-display"
                                         },
                                         {
                                           "type": "stat-display",
@@ -3004,21 +3535,17 @@
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
                                                 {
+                                                  "content": "Uptime",
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Uptime"
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3026,22 +3553,28 @@
                                                       "@entity"
                                                     ],
                                                     "uptime"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "columns": 3.0,
+                                      "type": "simple-grid"
                                     }
-                                  ]
+                                  ],
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
                                   "type": "grid",
-                                  "columns": 2,
                                   "gap": "md",
                                   "children": [
                                     {
@@ -3049,8 +3582,8 @@
                                       "children": [
                                         {
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Chart View"
+                                          "content": "Chart View",
+                                          "variant": "caption"
                                         }
                                       ]
                                     },
@@ -3058,95 +3591,98 @@
                                       "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
                                       ]
                                     }
-                                  ]
+                                  ],
+                                  "columns": 2.0
                                 },
                                 {
                                   "type": "line-chart",
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
                                       "date": "Feb",
-                                      "value": 19
+                                      "value": 19.0
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
                                   ],
+                                  "title": "Trend",
                                   "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  "yKey": "value"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
+                                  "height": 200.0,
                                   "type": "graph-view",
                                   "nodes": [
                                     {
+                                      "y": 100.0,
                                       "id": "a",
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "x": 50.0
                                     },
                                     {
+                                      "y": 50.0,
                                       "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "x": 200.0
                                     },
                                     {
+                                      "y": 100.0,
                                       "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "x": 350.0
                                     }
                                   ],
                                   "edges": [
                                     {
-                                      "from": "a",
-                                      "to": "b"
+                                      "to": "b",
+                                      "from": "a"
                                     },
                                     {
                                       "from": "b",
                                       "to": "c"
                                     }
                                   ],
-                                  "width": 400,
-                                  "height": 200
+                                  "width": 400.0
                                 }
-                              ]
+                              ],
+                              "direction": "vertical",
+                              "type": "stack"
                             }
                           ]
                         }
@@ -3162,81 +3698,69 @@
                 "effects": [
                   [
                     "fetch",
-                    "Analytics"
+                    "Analytics",
+                    {
+                      "emit": {
+                        "success": "AnalyticsLoaded",
+                        "failure": "AnalyticsLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "API Gateway",
-                      "navItems": [
-                        {
-                          "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
-                        },
-                        {
-                          "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
-                        },
-                        {
-                          "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
-                        }
-                      ],
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "vertical",
+                              "type": "stack",
                               "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Analytics"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
                                   "gap": "md",
                                   "justify": "space-between",
+                                  "type": "stack",
                                   "children": [
                                     {
-                                      "type": "stack",
-                                      "direction": "horizontal",
                                       "gap": "md",
                                       "children": [
                                         {
-                                          "type": "icon",
                                           "name": "bar-chart-2",
-                                          "size": "lg"
+                                          "size": "lg",
+                                          "type": "icon"
                                         },
                                         {
-                                          "type": "typography",
                                           "content": "Analytics",
-                                          "variant": "h2"
+                                          "variant": "h2",
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "type": "stack",
+                                      "direction": "horizontal"
                                     },
                                     {
-                                      "type": "button",
-                                      "label": "Refresh",
+                                      "icon": "refresh-cw",
                                       "event": "REFRESH",
-                                      "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "label": "Refresh",
+                                      "type": "button",
+                                      "variant": "secondary"
                                     }
                                   ]
                                 },
@@ -3248,11 +3772,8 @@
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
-                                          "type": "stat-display",
                                           "label": "TotalRequests",
                                           "value": [
                                             "object/get",
@@ -3261,11 +3782,12 @@
                                               "@entity"
                                             ],
                                             "totalRequests"
-                                          ]
+                                          ],
+                                          "type": "stat-display"
                                         },
                                         {
-                                          "type": "stat-display",
                                           "label": "ErrorRate",
+                                          "type": "stat-display",
                                           "value": [
                                             "object/get",
                                             [
@@ -3276,7 +3798,6 @@
                                           ]
                                         },
                                         {
-                                          "type": "stat-display",
                                           "label": "AvgLatency",
                                           "value": [
                                             "object/get",
@@ -3285,24 +3806,21 @@
                                               "@entity"
                                             ],
                                             "avgLatency"
-                                          ]
+                                          ],
+                                          "type": "stat-display"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Uptime"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -3310,13 +3828,19 @@
                                                       "@entity"
                                                     ],
                                                     "uptime"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "type": "simple-grid",
+                                      "columns": 3.0
                                     }
                                   ]
                                 },
@@ -3324,9 +3848,6 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "columns": 2,
-                                  "gap": "md",
                                   "children": [
                                     {
                                       "type": "card",
@@ -3348,39 +3869,42 @@
                                         }
                                       ]
                                     }
-                                  ]
+                                  ],
+                                  "columns": 2.0,
+                                  "type": "grid",
+                                  "gap": "md"
                                 },
                                 {
-                                  "type": "line-chart",
+                                  "xKey": "date",
+                                  "yKey": "value",
                                   "data": [
                                     {
                                       "date": "Jan",
-                                      "value": 12
+                                      "value": 12.0
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
                                       "date": "Mar",
-                                      "value": 15
+                                      "value": 15.0
                                     },
                                     {
                                       "date": "Apr",
-                                      "value": 25
+                                      "value": 25.0
                                     },
                                     {
                                       "date": "May",
-                                      "value": 22
+                                      "value": 22.0
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
                                   ],
-                                  "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  "title": "Trend",
+                                  "type": "line-chart"
                                 },
                                 {
                                   "type": "chart-legend",
@@ -3390,31 +3914,33 @@
                                       "color": "primary"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
                                   ]
                                 },
                                 {
                                   "type": "graph-view",
+                                  "height": 200.0,
+                                  "width": 400.0,
                                   "nodes": [
                                     {
                                       "id": "a",
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "x": 50.0,
+                                      "y": 100.0
                                     },
                                     {
-                                      "id": "b",
+                                      "y": 50.0,
+                                      "x": 200.0,
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "id": "b"
                                     },
                                     {
-                                      "id": "c",
+                                      "y": 100.0,
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "x": 350.0,
+                                      "id": "c"
                                     }
                                   ],
                                   "edges": [
@@ -3426,15 +3952,31 @@
                                       "from": "b",
                                       "to": "c"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
                               ]
                             }
                           ]
                         }
-                      ]
+                      ],
+                      "navItems": [
+                        {
+                          "href": "/routes",
+                          "icon": "git-branch",
+                          "label": "Routes"
+                        },
+                        {
+                          "label": "Backends",
+                          "href": "/backends",
+                          "icon": "server"
+                        },
+                        {
+                          "href": "/analytics",
+                          "icon": "bar-chart-2",
+                          "label": "Analytics"
+                        }
+                      ],
+                      "appName": "API Gateway"
                     }
                   ]
                 ]
@@ -3446,46 +3988,30 @@
                 "effects": [
                   [
                     "fetch",
-                    "Analytics"
+                    "Analytics",
+                    {
+                      "emit": {
+                        "failure": "AnalyticsLoadFailed",
+                        "success": "AnalyticsLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "API Gateway",
-                      "navItems": [
-                        {
-                          "label": "Routes",
-                          "href": "/routes",
-                          "icon": "git-branch"
-                        },
-                        {
-                          "label": "Backends",
-                          "href": "/backends",
-                          "icon": "server"
-                        },
-                        {
-                          "label": "Analytics",
-                          "href": "/analytics",
-                          "icon": "bar-chart-2"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
                               "type": "stack",
-                              "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Analytics"
@@ -3493,15 +4019,12 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "justify": "space-between",
                                   "children": [
                                     {
-                                      "type": "stack",
                                       "direction": "horizontal",
-                                      "gap": "md",
+                                      "type": "stack",
                                       "children": [
                                         {
                                           "type": "icon",
@@ -3509,35 +4032,36 @@
                                           "size": "lg"
                                         },
                                         {
-                                          "type": "typography",
                                           "content": "Analytics",
+                                          "type": "typography",
                                           "variant": "h2"
                                         }
-                                      ]
+                                      ],
+                                      "gap": "md"
                                     },
                                     {
-                                      "type": "button",
                                       "label": "Refresh",
-                                      "event": "REFRESH",
+                                      "icon": "refresh-cw",
+                                      "type": "button",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "event": "REFRESH"
                                     }
-                                  ]
+                                  ],
+                                  "type": "stack",
+                                  "gap": "md"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
                                   "type": "box",
-                                  "padding": "md",
                                   "children": [
                                     {
+                                      "columns": 3.0,
                                       "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
                                           "type": "stat-display",
-                                          "label": "TotalRequests",
                                           "value": [
                                             "object/get",
                                             [
@@ -3545,11 +4069,10 @@
                                               "@entity"
                                             ],
                                             "totalRequests"
-                                          ]
+                                          ],
+                                          "label": "TotalRequests"
                                         },
                                         {
-                                          "type": "stat-display",
-                                          "label": "ErrorRate",
                                           "value": [
                                             "object/get",
                                             [
@@ -3557,11 +4080,11 @@
                                               "@entity"
                                             ],
                                             "errorRate"
-                                          ]
+                                          ],
+                                          "label": "ErrorRate",
+                                          "type": "stat-display"
                                         },
                                         {
-                                          "type": "stat-display",
-                                          "label": "AvgLatency",
                                           "value": [
                                             "object/get",
                                             [
@@ -3569,23 +4092,21 @@
                                               "@entity"
                                             ],
                                             "avgLatency"
-                                          ]
+                                          ],
+                                          "type": "stat-display",
+                                          "label": "AvgLatency"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Uptime"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -3594,77 +4115,82 @@
                                                       "@entity"
                                                     ],
                                                     "uptime"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "direction": "vertical",
+                                              "gap": "sm"
                                             }
                                           ]
                                         }
                                       ]
                                     }
-                                  ]
+                                  ],
+                                  "padding": "md"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
                                   "type": "grid",
-                                  "columns": 2,
-                                  "gap": "md",
                                   "children": [
                                     {
                                       "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
+                                          "type": "typography",
                                           "content": "Chart View"
                                         }
                                       ]
                                     },
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
+                                          "type": "typography",
                                           "content": "Graph View"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     }
-                                  ]
+                                  ],
+                                  "columns": 2.0,
+                                  "gap": "md"
                                 },
                                 {
                                   "type": "line-chart",
+                                  "title": "Trend",
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
                                       "date": "Apr",
-                                      "value": 25
+                                      "value": 25.0
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
                                   ],
-                                  "xKey": "date",
                                   "yKey": "value",
-                                  "title": "Trend"
+                                  "xKey": "date"
                                 },
                                 {
                                   "type": "chart-legend",
@@ -3680,43 +4206,65 @@
                                   ]
                                 },
                                 {
-                                  "type": "graph-view",
+                                  "height": 200.0,
                                   "nodes": [
                                     {
+                                      "x": 50.0,
                                       "id": "a",
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "y": 100.0
                                     },
                                     {
                                       "id": "b",
-                                      "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "y": 50.0,
+                                      "x": 200.0,
+                                      "label": "Process"
                                     },
                                     {
                                       "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "x": 350.0,
+                                      "y": 100.0
                                     }
                                   ],
+                                  "width": 400.0,
+                                  "type": "graph-view",
                                   "edges": [
                                     {
-                                      "from": "a",
-                                      "to": "b"
+                                      "to": "b",
+                                      "from": "a"
                                     },
                                     {
-                                      "from": "b",
-                                      "to": "c"
+                                      "to": "c",
+                                      "from": "b"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "direction": "vertical",
+                              "gap": "lg"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
+                        }
+                      ],
+                      "type": "dashboard-layout",
+                      "appName": "API Gateway",
+                      "navItems": [
+                        {
+                          "label": "Routes",
+                          "icon": "git-branch",
+                          "href": "/routes"
+                        },
+                        {
+                          "icon": "server",
+                          "href": "/backends",
+                          "label": "Backends"
+                        },
+                        {
+                          "icon": "bar-chart-2",
+                          "label": "Analytics",
+                          "href": "/analytics"
                         }
                       ]
                     }
@@ -3724,12 +4272,13 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
-          "name": "AnalyticsPage",
+          "name": "Analytics",
           "path": "/analytics",
           "traits": [
             {
@@ -3740,4 +4289,4 @@
       ]
     }
   ]
-}
+}