@almadar/std 6.5.2 → 7.2.0

package/behaviors/registry/organisms/std-cicd-pipeline.orb

@@ -1,14 +1,14 @@
 {
   "name": "std-cicd-pipeline",
   "version": "1.0.0",
-  "description": "CI/CD pipeline organism. Composes: stdList(Build) + stdDisplay(Stage) + stdAsync(Deployment)",
+  "description": "std-cicd-pipeline as a Function",
   "orbitals": [
     {
       "name": "BuildOrbital",
       "entity": {
         "name": "Build",
-        "persistence": "persistent",
         "collection": "builds",
+        "persistence": "persistent",
         "fields": [
           {
             "name": "id",
@@ -23,7 +23,6 @@
           {
             "name": "status",
             "type": "string",
-            "required": true,
             "values": [
               "pending",
               "running",
@@ -49,23 +48,78 @@
       "traits": [
         {
           "name": "BuildBrowse",
-          "linkedEntity": "Build",
           "category": "interaction",
+          "linkedEntity": "Build",
+          "emits": [
+            {
+              "event": "BuildLoaded",
+              "description": "Fired when Build finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "branch",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "commit",
+                  "type": "string"
+                },
+                {
+                  "name": "triggeredBy",
+                  "type": "string"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "BuildLoadFailed",
+              "description": "Fired when Build fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "listens": [
             {
               "event": "BUILD_CREATED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "BuildCreate"
+              }
             },
             {
               "event": "BUILD_UPDATED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "BuildEdit"
+              }
             },
             {
               "event": "BUILD_DELETED",
               "triggers": "INIT",
-              "scope": "external"
+              "source": {
+                "kind": "trait",
+                "trait": "BuildDelete"
+              }
             }
           ],
           "stateMachine": {
@@ -81,12 +135,22 @@
                 "name": "Initialize"
               },
               {
-                "key": "CREATE",
-                "name": "CREATE"
+                "key": "BuildLoaded",
+                "name": "Build loaded"
+              },
+              {
+                "key": "BuildLoadFailed",
+                "name": "Build load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               },
               {
                 "key": "VIEW",
-                "name": "VIEW",
+                "name": "View",
                 "payload": [
                   {
                     "name": "id",
@@ -101,7 +165,7 @@
               },
               {
                 "key": "EDIT",
-                "name": "EDIT",
+                "name": "Edit",
                 "payload": [
                   {
                     "name": "id",
@@ -116,7 +180,7 @@
               },
               {
                 "key": "DELETE",
-                "name": "DELETE",
+                "name": "Delete",
                 "payload": [
                   {
                     "name": "id",
@@ -144,18 +208,16 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
+                          "icon": "hammer",
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "href": "/builds"
                         },
                         {
+                          "icon": "layers",
                           "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
+                          "href": "/stages"
                         },
                         {
                           "label": "Deploy",
@@ -163,24 +225,25 @@
                           "icon": "rocket"
                         }
                       ],
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout",
                       "children": [
                         {
                           "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
                           "className": "max-w-5xl mx-auto w-full",
+                          "direction": "vertical",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
                               "gap": "md",
-                              "justify": "space-between",
                               "align": "center",
+                              "direction": "horizontal",
+                              "type": "stack",
+                              "justify": "space-between",
                               "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "sm",
+                                  "direction": "horizontal",
+                                  "type": "stack",
                                   "align": "center",
                                   "children": [
                                     {
@@ -190,24 +253,24 @@
                                     },
                                     {
                                       "type": "typography",
-                                      "content": "Builds",
-                                      "variant": "h2"
+                                      "variant": "h2",
+                                      "content": "Builds"
                                     }
                                   ]
                                 },
                                 {
                                   "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "sm",
                                   "children": [
                                     {
-                                      "type": "button",
-                                      "label": "Create Build",
                                       "event": "CREATE",
                                       "variant": "primary",
-                                      "icon": "plus"
+                                      "icon": "plus",
+                                      "type": "button",
+                                      "label": "Create Build"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "sm",
+                                  "direction": "horizontal"
                                 }
                               ]
                             },
@@ -215,44 +278,45 @@
                               "type": "divider"
                             },
                             {
-                              "type": "data-list",
-                              "entity": "Build",
-                              "emptyIcon": "inbox",
                               "emptyTitle": "No builds yet",
+                              "variant": "card",
+                              "emptyIcon": "inbox",
+                              "gap": "sm",
+                              "entity": "Build",
                               "emptyDescription": "Trigger a build to get started.",
                               "itemActions": [
                                 {
-                                  "label": "View",
-                                  "event": "VIEW",
                                   "variant": "ghost",
-                                  "size": "sm"
+                                  "size": "sm",
+                                  "event": "VIEW",
+                                  "label": "View"
                                 },
                                 {
+                                  "size": "sm",
                                   "label": "Edit",
-                                  "event": "EDIT",
                                   "variant": "ghost",
-                                  "size": "sm"
+                                  "event": "EDIT"
                                 },
                                 {
-                                  "label": "Delete",
                                   "event": "DELETE",
                                   "variant": "danger",
+                                  "label": "Delete",
                                   "size": "sm"
                                 }
                               ],
                               "columns": [
                                 {
-                                  "name": "branch",
                                   "variant": "h3",
+                                  "name": "branch",
                                   "icon": "git-branch"
                                 },
                                 {
-                                  "name": "status",
-                                  "variant": "badge"
+                                  "variant": "badge",
+                                  "name": "status"
                                 },
                                 {
-                                  "name": "commit",
-                                  "variant": "body"
+                                  "variant": "body",
+                                  "name": "commit"
                                 },
                                 {
                                   "name": "triggeredBy",
@@ -260,10 +324,10 @@
                                   "variant": "caption"
                                 }
                               ],
-                              "variant": "card",
-                              "gap": "sm"
+                              "type": "data-list"
                             }
-                          ]
+                          ],
+                          "gap": "lg"
                         }
                       ]
                     }
@@ -271,20 +335,67 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "BuildCreate",
-          "linkedEntity": "Build",
           "category": "interaction",
+          "linkedEntity": "Build",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "BUILD_CREATED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "BUILD_CREATED",
-              "scope": "external"
+              "event": "BuildLoaded",
+              "description": "Fired when Build finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "branch",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "commit",
+                  "type": "string"
+                },
+                {
+                  "name": "triggeredBy",
+                  "type": "string"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "BuildLoadFailed",
+              "description": "Fired when Build fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -304,7 +415,7 @@
               },
               {
                 "key": "CREATE",
-                "name": "Open"
+                "name": "Create"
               },
               {
                 "key": "CLOSE",
@@ -320,6 +431,24 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "BUILD_CREATED",
+                "name": "Build Created"
+              },
+              {
+                "key": "BuildLoaded",
+                "name": "Build loaded"
+              },
+              {
+                "key": "BuildLoadFailed",
+                "name": "Build load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -341,29 +470,34 @@
                 "effects": [
                   [
                     "fetch",
-                    "Build"
+                    "Build",
+                    {
+                      "emit": {
+                        "failure": "BuildLoadFailed",
+                        "success": "BuildLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
                       "type": "stack",
-                      "direction": "vertical",
                       "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "horizontal",
+                          "type": "stack",
                           "gap": "sm",
                           "children": [
                             {
-                              "type": "icon",
+                              "size": "md",
                               "name": "plus-circle",
-                              "size": "md"
+                              "type": "icon"
                             },
                             {
-                              "type": "typography",
                               "content": "Create Build",
+                              "type": "typography",
                               "variant": "h3"
                             }
                           ]
@@ -373,18 +507,19 @@
                         },
                         {
                           "type": "form-section",
-                          "entity": "Build",
                           "mode": "create",
-                          "submitEvent": "SAVE",
                           "cancelEvent": "CLOSE",
                           "fields": [
                             "branch",
                             "status",
                             "commit",
                             "triggeredBy"
-                          ]
+                          ],
+                          "submitEvent": "SAVE",
+                          "entity": "Build"
                         }
-                      ]
+                      ],
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -399,6 +534,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -422,6 +564,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "emit",
                     "BUILD_CREATED"
@@ -429,20 +578,67 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "BuildEdit",
-          "linkedEntity": "Build",
           "category": "interaction",
+          "linkedEntity": "Build",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "BUILD_UPDATED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "BUILD_UPDATED",
-              "scope": "external"
+              "event": "BuildLoaded",
+              "description": "Fired when Build finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "branch",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "commit",
+                  "type": "string"
+                },
+                {
+                  "name": "triggeredBy",
+                  "type": "string"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "BuildLoadFailed",
+              "description": "Fired when Build fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -462,7 +658,7 @@
               },
               {
                 "key": "EDIT",
-                "name": "Open",
+                "name": "Edit",
                 "payload": [
                   {
                     "name": "id",
@@ -485,6 +681,24 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "BUILD_UPDATED",
+                "name": "Build Updated"
+              },
+              {
+                "key": "BuildLoaded",
+                "name": "Build loaded"
+              },
+              {
+                "key": "BuildLoadFailed",
+                "name": "Build load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -508,33 +722,36 @@
                     "fetch",
                     "Build",
                     {
-                      "id": "@payload.id"
+                      "id": "@payload.id",
+                      "emit": {
+                        "success": "BuildLoaded",
+                        "failure": "BuildLoadFailed"
+                      }
                     }
                   ],
                   [
                     "render-ui",
                     "modal",
                     {
-                      "type": "stack",
-                      "direction": "vertical",
                       "gap": "md",
+                      "type": "stack",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "horizontal",
-                          "gap": "sm",
                           "children": [
                             {
-                              "type": "icon",
                               "name": "edit",
+                              "type": "icon",
                               "size": "md"
                             },
                             {
-                              "type": "typography",
                               "content": "Edit Build",
+                              "type": "typography",
                               "variant": "h3"
                             }
-                          ]
+                          ],
+                          "gap": "sm",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
@@ -542,18 +759,19 @@
                         {
                           "type": "form-section",
                           "entity": "Build",
-                          "mode": "edit",
-                          "submitEvent": "SAVE",
-                          "cancelEvent": "CLOSE",
+                          "entityId": "@entity.id",
                           "fields": [
                             "branch",
                             "status",
                             "commit",
                             "triggeredBy"
                           ],
-                          "entityId": "@entity.id"
+                          "mode": "edit",
+                          "cancelEvent": "CLOSE",
+                          "submitEvent": "SAVE"
                         }
-                      ]
+                      ],
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -568,6 +786,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -591,6 +816,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "emit",
                     "BUILD_UPDATED"
@@ -598,16 +830,57 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "BuildView",
-          "linkedEntity": "Build",
           "category": "interaction",
+          "linkedEntity": "Build",
           "emits": [
             {
-              "event": "SAVE",
-              "scope": "internal"
+              "event": "BuildLoaded",
+              "description": "Fired when Build finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "branch",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "commit",
+                  "type": "string"
+                },
+                {
+                  "name": "triggeredBy",
+                  "type": "string"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "BuildLoadFailed",
+              "description": "Fired when Build fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -627,7 +900,7 @@
               },
               {
                 "key": "VIEW",
-                "name": "Open",
+                "name": "View",
                 "payload": [
                   {
                     "name": "id",
@@ -650,6 +923,20 @@
                     "required": true
                   }
                 ]
+              },
+              {
+                "key": "BuildLoaded",
+                "name": "Build loaded"
+              },
+              {
+                "key": "BuildLoadFailed",
+                "name": "Build load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -673,7 +960,11 @@
                     "fetch",
                     "Build",
                     {
-                      "id": "@payload.id"
+                      "id": "@payload.id",
+                      "emit": {
+                        "success": "BuildLoaded",
+                        "failure": "BuildLoadFailed"
+                      }
                     }
                   ],
                   [
@@ -681,85 +972,82 @@
                     "modal",
                     {
                       "type": "stack",
-                      "direction": "vertical",
                       "gap": "md",
+                      "direction": "vertical",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
                           "align": "center",
                           "children": [
                             {
-                              "type": "icon",
+                              "size": "md",
                               "name": "eye",
-                              "size": "md"
+                              "type": "icon"
                             },
                             {
-                              "type": "typography",
                               "variant": "h3",
-                              "content": "@entity.branch"
+                              "content": "@entity.branch",
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "type": "stack",
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "stack",
                           "direction": "horizontal",
+                          "type": "stack",
                           "gap": "md",
                           "children": [
                             {
                               "type": "typography",
-                              "variant": "caption",
-                              "content": "Branch"
+                              "content": "Branch",
+                              "variant": "caption"
                             },
                             {
                               "type": "typography",
-                              "variant": "body",
-                              "content": "@entity.branch"
+                              "content": "@entity.branch",
+                              "variant": "body"
                             }
                           ]
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
                           "children": [
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "Status"
+                              "content": "Status",
+                              "type": "typography"
                             },
                             {
-                              "type": "typography",
+                              "content": "@entity.status",
                               "variant": "body",
-                              "content": "@entity.status"
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "md"
                         },
                         {
-                          "type": "stack",
                           "direction": "horizontal",
-                          "gap": "md",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "Commit"
+                              "content": "Commit",
+                              "type": "typography"
                             },
                             {
                               "type": "typography",
-                              "variant": "body",
-                              "content": "@entity.commit"
+                              "content": "@entity.commit",
+                              "variant": "body"
                             }
-                          ]
+                          ],
+                          "gap": "md"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
                           "children": [
                             {
                               "type": "typography",
@@ -767,33 +1055,36 @@
                               "content": "Triggered By"
                             },
                             {
-                              "type": "typography",
                               "variant": "body",
-                              "content": "@entity.triggeredBy"
+                              "content": "@entity.triggeredBy",
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "gap": "md",
+                          "type": "stack",
+                          "direction": "horizontal"
                         },
                         {
                           "type": "divider"
                         },
                         {
+                          "gap": "sm",
                           "type": "stack",
                           "direction": "horizontal",
-                          "gap": "sm",
                           "justify": "end",
                           "children": [
                             {
+                              "event": "EDIT",
                               "type": "button",
                               "label": "Edit",
-                              "event": "EDIT",
                               "variant": "primary",
                               "icon": "edit"
                             },
                             {
-                              "type": "button",
                               "label": "Close",
-                              "event": "CLOSE",
-                              "variant": "ghost"
+                              "variant": "ghost",
+                              "type": "button",
+                              "event": "CLOSE"
                             }
                           ]
                         }
@@ -812,6 +1103,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "notify",
                     "Cancelled",
@@ -828,24 +1126,78 @@
                     "render-ui",
                     "modal",
                     null
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
                   ]
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         },
         {
           "name": "BuildDelete",
-          "linkedEntity": "Build",
           "category": "interaction",
+          "linkedEntity": "Build",
           "emits": [
             {
-              "event": "CONFIRM_DELETE",
-              "scope": "internal"
+              "event": "BUILD_DELETED",
+              "scope": "external",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ]
             },
             {
-              "event": "BUILD_DELETED",
-              "scope": "external"
+              "event": "BuildLoaded",
+              "description": "Fired when Build finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "branch",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "commit",
+                  "type": "string"
+                },
+                {
+                  "name": "triggeredBy",
+                  "type": "string"
+                },
+                {
+                  "name": "pendingId",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "BuildLoadFailed",
+              "description": "Fired when Build fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
             }
           ],
           "stateMachine": {
@@ -865,7 +1217,7 @@
               },
               {
                 "key": "DELETE",
-                "name": "Request Confirmation",
+                "name": "Delete",
                 "payload": [
                   {
                     "name": "id",
@@ -876,7 +1228,7 @@
               },
               {
                 "key": "CONFIRM_DELETE",
-                "name": "Confirm"
+                "name": "Confirm Delete"
               },
               {
                 "key": "CANCEL",
@@ -885,6 +1237,24 @@
               {
                 "key": "CLOSE",
                 "name": "Close"
+              },
+              {
+                "key": "BUILD_DELETED",
+                "name": "Build Deleted"
+              },
+              {
+                "key": "BuildLoaded",
+                "name": "Build loaded"
+              },
+              {
+                "key": "BuildLoadFailed",
+                "name": "Build load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -913,6 +1283,10 @@
                     "fetch",
                     "Build",
                     {
+                      "emit": {
+                        "success": "BuildLoaded",
+                        "failure": "BuildLoadFailed"
+                      },
                       "id": "@payload.id"
                     }
                   ],
@@ -920,27 +1294,25 @@
                     "render-ui",
                     "modal",
                     {
-                      "type": "stack",
                       "direction": "vertical",
-                      "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "icon",
                               "name": "alert-triangle",
-                              "size": "md"
+                              "size": "md",
+                              "type": "icon"
                             },
                             {
                               "type": "typography",
                               "content": "Delete Build",
                               "variant": "h3"
                             }
-                          ]
+                          ],
+                          "gap": "sm",
+                          "align": "center",
+                          "type": "stack",
+                          "direction": "horizontal"
                         },
                         {
                           "type": "divider"
@@ -951,27 +1323,29 @@
                           "message": "This action cannot be undone."
                         },
                         {
+                          "justify": "end",
                           "type": "stack",
                           "direction": "horizontal",
-                          "gap": "sm",
-                          "justify": "end",
                           "children": [
                             {
-                              "type": "button",
+                              "variant": "ghost",
                               "label": "Cancel",
                               "event": "CANCEL",
-                              "variant": "ghost"
+                              "type": "button"
                             },
                             {
                               "type": "button",
-                              "label": "Delete",
+                              "icon": "check",
                               "event": "CONFIRM_DELETE",
                               "variant": "danger",
-                              "icon": "check"
+                              "label": "Delete"
                             }
-                          ]
+                          ],
+                          "gap": "sm"
                         }
-                      ]
+                      ],
+                      "type": "stack",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -992,6 +1366,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Build"
@@ -1012,6 +1393,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Build"
@@ -1028,6 +1416,13 @@
                     "modal",
                     null
                   ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "box"
+                    }
+                  ],
                   [
                     "ref",
                     "Build"
@@ -1035,14 +1430,14 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
           "name": "BuildsPage",
           "path": "/builds",
-          "isInitial": true,
           "traits": [
             {
               "ref": "BuildBrowse"
@@ -1082,7 +1477,12 @@
           {
             "name": "status",
             "type": "string",
-            "required": true
+            "values": [
+              "pending",
+              "running",
+              "success",
+              "failed"
+            ]
           },
           {
             "name": "duration",
@@ -1097,8 +1497,50 @@
       "traits": [
         {
           "name": "StageDisplay",
-          "linkedEntity": "Stage",
           "category": "interaction",
+          "linkedEntity": "Stage",
+          "emits": [
+            {
+              "event": "StageLoaded",
+              "description": "Fired when Stage finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "name",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "duration",
+                  "type": "string"
+                },
+                {
+                  "name": "output",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "StageLoadFailed",
+              "description": "Fired when Stage fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
@@ -1128,6 +1570,20 @@
               {
                 "key": "REFRESHED",
                 "name": "Refreshed"
+              },
+              {
+                "key": "StageLoaded",
+                "name": "Stage loaded"
+              },
+              {
+                "key": "StageLoadFailed",
+                "name": "Stage load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -1138,81 +1594,66 @@
                 "effects": [
                   [
                     "fetch",
-                    "Stage"
+                    "Stage",
+                    {
+                      "emit": {
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
-                        },
-                        {
-                          "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Stages"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
                                   "gap": "md",
+                                  "direction": "horizontal",
                                   "justify": "space-between",
+                                  "type": "stack",
                                   "children": [
                                     {
-                                      "type": "stack",
                                       "direction": "horizontal",
                                       "gap": "md",
+                                      "type": "stack",
                                       "children": [
                                         {
-                                          "type": "icon",
                                           "name": "layers",
-                                          "size": "lg"
+                                          "size": "lg",
+                                          "type": "icon"
                                         },
                                         {
-                                          "type": "typography",
+                                          "variant": "h2",
                                           "content": "Stages",
-                                          "variant": "h2"
+                                          "type": "typography"
                                         }
                                       ]
                                     },
                                     {
-                                      "type": "button",
-                                      "label": "Refresh",
                                       "event": "REFRESH",
-                                      "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "icon": "refresh-cw",
+                                      "label": "Refresh",
+                                      "type": "button",
+                                      "variant": "secondary"
                                     }
                                   ]
                                 },
@@ -1220,25 +1661,18 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
+                                                  "content": "Name",
                                                   "variant": "caption",
-                                                  "content": "Name"
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "type": "typography",
@@ -1252,26 +1686,28 @@
                                                     "name"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
                                               "gap": "sm",
+                                              "type": "stack",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Status"
+                                                  "content": "Status",
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1279,27 +1715,26 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3"
                                                 }
                                               ]
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Duration"
+                                                  "content": "Duration",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -1308,17 +1743,18 @@
                                                       "@entity"
                                                     ],
                                                     "duration"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
@@ -1328,8 +1764,6 @@
                                                   "content": "Output"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1337,129 +1771,157 @@
                                                       "@entity"
                                                     ],
                                                     "output"
-                                                  ]
+                                                  ],
+                                                  "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": [
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Chart View"
+                                          "content": "Chart View",
+                                          "variant": "caption"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     },
                                     {
                                       "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "variant": "caption"
                                         }
                                       ]
                                     }
-                                  ]
+                                  ],
+                                  "columns": 2.0,
+                                  "type": "grid"
                                 },
                                 {
-                                  "type": "line-chart",
+                                  "xKey": "date",
+                                  "yKey": "value",
+                                  "title": "Trend",
                                   "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": "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"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
-                                  "type": "graph-view",
                                   "nodes": [
                                     {
-                                      "id": "a",
+                                      "y": 100.0,
+                                      "x": 50.0,
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "id": "a"
                                     },
                                     {
-                                      "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "id": "b",
+                                      "y": 50.0,
+                                      "x": 200.0
                                     },
                                     {
                                       "id": "c",
+                                      "x": 350.0,
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "y": 100.0
                                     }
                                   ],
+                                  "width": 400.0,
+                                  "type": "graph-view",
+                                  "height": 200.0,
                                   "edges": [
                                     {
                                       "from": "a",
                                       "to": "b"
                                     },
                                     {
-                                      "from": "b",
-                                      "to": "c"
+                                      "to": "c",
+                                      "from": "b"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "type": "stack",
+                              "gap": "lg"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
+                        }
+                      ],
+                      "appName": "CI/CD Pipeline",
+                      "navItems": [
+                        {
+                          "icon": "hammer",
+                          "href": "/builds",
+                          "label": "Builds"
+                        },
+                        {
+                          "href": "/stages",
+                          "label": "Stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "icon": "rocket",
+                          "label": "Deploy",
+                          "href": "/deploy"
                         }
                       ]
                     }
@@ -1473,39 +1935,24 @@
                 "effects": [
                   [
                     "fetch",
-                    "Stage"
+                    "Stage",
+                    {
+                      "emit": {
+                        "failure": "StageLoadFailed",
+                        "success": "StageLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
-                        },
-                        {
-                          "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
-                        }
-                      ],
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
@@ -1520,10 +1967,8 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
                                   "gap": "md",
-                                  "justify": "space-between",
                                   "children": [
                                     {
                                       "type": "stack",
@@ -1537,47 +1982,42 @@
                                         },
                                         {
                                           "type": "typography",
-                                          "content": "Stages",
-                                          "variant": "h2"
+                                          "variant": "h2",
+                                          "content": "Stages"
                                         }
                                       ]
                                     },
                                     {
-                                      "type": "button",
                                       "label": "Refresh",
                                       "event": "REFRESH",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "icon": "refresh-cw",
+                                      "type": "button"
                                     }
-                                  ]
+                                  ],
+                                  "justify": "space-between",
+                                  "type": "stack"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
+                                                  "content": "Name",
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Name"
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1585,28 +2025,30 @@
                                                       "@entity"
                                                     ],
                                                     "name"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Status"
+                                                  "content": "Status",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
+                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1616,22 +2058,20 @@
                                                     "status"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
+                                                  "content": "Duration",
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Duration"
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "type": "typography",
@@ -1645,22 +2085,23 @@
                                                     "duration"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical",
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "content": "Output"
+                                                  "content": "Output",
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "type": "typography",
@@ -1674,21 +2115,24 @@
                                                     "output"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "direction": "vertical",
+                                              "gap": "sm"
                                             }
                                           ]
                                         }
-                                      ]
+                                      ],
+                                      "type": "simple-grid",
+                                      "columns": 3.0
                                     }
-                                  ]
+                                  ],
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "columns": 2,
-                                  "gap": "md",
                                   "children": [
                                     {
                                       "type": "card",
@@ -1704,48 +2148,50 @@
                                       "type": "card",
                                       "children": [
                                         {
+                                          "content": "Graph View",
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Graph View"
+                                          "variant": "caption"
                                         }
                                       ]
                                     }
-                                  ]
+                                  ],
+                                  "type": "grid",
+                                  "columns": 2.0,
+                                  "gap": "md"
                                 },
                                 {
                                   "type": "line-chart",
+                                  "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": "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",
@@ -1755,28 +2201,31 @@
                                       "label": "Previous",
                                       "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
+                                  "height": 200.0,
                                   "type": "graph-view",
+                                  "width": 400.0,
                                   "nodes": [
                                     {
-                                      "id": "a",
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "id": "a",
+                                      "y": 100.0,
+                                      "x": 50.0
                                     },
                                     {
+                                      "x": 200.0,
                                       "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "y": 50.0
                                     },
                                     {
                                       "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "y": 100.0,
+                                      "x": 350.0
                                     }
                                   ],
                                   "edges": [
@@ -1788,15 +2237,34 @@
                                       "from": "b",
                                       "to": "c"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "gap": "lg",
+                              "type": "stack"
                             }
                           ]
                         }
-                      ]
+                      ],
+                      "type": "dashboard-layout",
+                      "navItems": [
+                        {
+                          "href": "/builds",
+                          "label": "Builds",
+                          "icon": "hammer"
+                        },
+                        {
+                          "label": "Stages",
+                          "href": "/stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "label": "Deploy",
+                          "icon": "rocket",
+                          "href": "/deploy"
+                        }
+                      ],
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -1808,102 +2276,80 @@
                 "effects": [
                   [
                     "fetch",
-                    "Stage"
+                    "Stage",
+                    {
+                      "emit": {
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
-                        },
-                        {
-                          "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "vertical",
                               "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Stages"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
                                   "gap": "md",
-                                  "justify": "space-between",
                                   "children": [
                                     {
-                                      "type": "stack",
-                                      "direction": "horizontal",
                                       "gap": "md",
                                       "children": [
                                         {
                                           "type": "icon",
-                                          "name": "layers",
-                                          "size": "lg"
+                                          "size": "lg",
+                                          "name": "layers"
                                         },
                                         {
                                           "type": "typography",
-                                          "content": "Stages",
-                                          "variant": "h2"
+                                          "variant": "h2",
+                                          "content": "Stages"
                                         }
-                                      ]
+                                      ],
+                                      "type": "stack",
+                                      "direction": "horizontal"
                                     },
                                     {
-                                      "type": "button",
                                       "label": "Refresh",
-                                      "event": "REFRESH",
                                       "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "type": "button",
+                                      "icon": "refresh-cw",
+                                      "event": "REFRESH"
                                     }
-                                  ]
+                                  ],
+                                  "type": "stack",
+                                  "justify": "space-between"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
                                   "children": [
                                     {
                                       "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
@@ -1911,8 +2357,6 @@
                                                   "content": "Name"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1920,28 +2364,29 @@
                                                       "@entity"
                                                     ],
                                                     "name"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "direction": "vertical",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Status"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1949,28 +2394,30 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Duration"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
+                                                  "type": "typography",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -1980,16 +2427,16 @@
                                                     "duration"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical",
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
                                                 {
@@ -2009,127 +2456,154 @@
                                                     "output"
                                                   ]
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical",
+                                              "type": "stack"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "columns": 3.0
                                     }
-                                  ]
+                                  ],
+                                  "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
                                   "type": "grid",
-                                  "columns": 2,
+                                  "columns": 2.0,
                                   "gap": "md",
                                   "children": [
                                     {
                                       "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
+                                          "type": "typography",
                                           "content": "Chart View"
                                         }
                                       ]
                                     },
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     }
                                   ]
                                 },
                                 {
+                                  "yKey": "value",
                                   "type": "line-chart",
+                                  "title": "Trend",
+                                  "xKey": "date",
                                   "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": "Apr"
                                     },
                                     {
                                       "date": "May",
-                                      "value": 22
+                                      "value": 22.0
                                     },
                                     {
                                       "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",
                                   "nodes": [
                                     {
-                                      "id": "a",
+                                      "y": 100.0,
+                                      "x": 50.0,
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "id": "a"
                                     },
                                     {
+                                      "y": 50.0,
                                       "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "x": 200.0
                                     },
                                     {
-                                      "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "y": 100.0,
+                                      "id": "c",
+                                      "x": 350.0
                                     }
                                   ],
+                                  "height": 200.0,
+                                  "type": "graph-view",
+                                  "width": 400.0,
                                   "edges": [
                                     {
-                                      "from": "a",
-                                      "to": "b"
+                                      "to": "b",
+                                      "from": "a"
                                     },
                                     {
-                                      "from": "b",
-                                      "to": "c"
+                                      "to": "c",
+                                      "from": "b"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "type": "stack",
+                              "direction": "vertical"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
+                        }
+                      ],
+                      "type": "dashboard-layout",
+                      "appName": "CI/CD Pipeline",
+                      "navItems": [
+                        {
+                          "label": "Builds",
+                          "href": "/builds",
+                          "icon": "hammer"
+                        },
+                        {
+                          "label": "Stages",
+                          "href": "/stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "icon": "rocket",
+                          "label": "Deploy",
+                          "href": "/deploy"
                         }
                       ]
                     }
@@ -2143,14 +2617,18 @@
                 "effects": [
                   [
                     "fetch",
-                    "Stage"
+                    "Stage",
+                    {
+                      "emit": {
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
                           "label": "Builds",
@@ -2158,47 +2636,42 @@
                           "icon": "hammer"
                         },
                         {
-                          "label": "Stages",
                           "href": "/stages",
-                          "icon": "layers"
+                          "icon": "layers",
+                          "label": "Stages"
                         },
                         {
-                          "label": "Deploy",
                           "href": "/deploy",
-                          "icon": "rocket"
+                          "icon": "rocket",
+                          "label": "Deploy"
                         }
                       ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Stages"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "justify": "space-between",
+                                  "type": "stack",
+                                  "gap": "md",
                                   "children": [
                                     {
-                                      "type": "stack",
-                                      "direction": "horizontal",
-                                      "gap": "md",
                                       "children": [
                                         {
                                           "type": "icon",
@@ -2206,18 +2679,21 @@
                                           "size": "lg"
                                         },
                                         {
-                                          "type": "typography",
+                                          "variant": "h2",
                                           "content": "Stages",
-                                          "variant": "h2"
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "type": "stack",
+                                      "direction": "horizontal",
+                                      "gap": "md"
                                     },
                                     {
-                                      "type": "button",
+                                      "icon": "refresh-cw",
                                       "label": "Refresh",
+                                      "type": "button",
                                       "event": "REFRESH",
-                                      "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "variant": "secondary"
                                     }
                                   ]
                                 },
@@ -2225,29 +2701,23 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "box",
                                   "padding": "md",
+                                  "type": "box",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
+                                      "columns": 3.0,
                                       "children": [
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Name"
+                                                  "content": "Name",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2255,19 +2725,21 @@
                                                       "@entity"
                                                     ],
                                                     "name"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "type": "typography",
@@ -2275,8 +2747,6 @@
                                                   "content": "Status"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2284,27 +2754,29 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Duration"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -2313,9 +2785,12 @@
                                                       "@entity"
                                                     ],
                                                     "duration"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
                                           ]
                                         },
@@ -2323,17 +2798,16 @@
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
+                                              "type": "stack",
                                               "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "content": "Output"
+                                                  "content": "Output",
+                                                  "type": "typography"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
                                                   "content": [
                                                     "object/get",
@@ -2342,13 +2816,15 @@
                                                       "@entity"
                                                     ],
                                                     "output"
-                                                  ]
+                                                  ],
+                                                  "type": "typography"
                                                 }
                                               ]
                                             }
                                           ]
                                         }
-                                      ]
+                                      ],
+                                      "type": "simple-grid"
                                     }
                                   ]
                                 },
@@ -2356,27 +2832,27 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "columns": 2,
                                   "gap": "md",
+                                  "type": "grid",
+                                  "columns": 2.0,
                                   "children": [
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
+                                          "type": "typography",
                                           "content": "Chart View"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     },
                                     {
                                       "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
                                       ]
                                     }
@@ -2384,89 +2860,93 @@
                                 },
                                 {
                                   "type": "line-chart",
+                                  "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": "Apr"
                                     },
                                     {
                                       "date": "May",
-                                      "value": 22
+                                      "value": 22.0
                                     },
                                     {
                                       "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0
                                     }
                                   ],
-                                  "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  "title": "Trend",
+                                  "xKey": "date"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
                                       "label": "Previous",
                                       "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
+                                  "width": 400.0,
+                                  "height": 200.0,
                                   "type": "graph-view",
                                   "nodes": [
                                     {
-                                      "id": "a",
+                                      "y": 100.0,
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "x": 50.0,
+                                      "id": "a"
                                     },
                                     {
-                                      "id": "b",
+                                      "x": 200.0,
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "id": "b",
+                                      "y": 50.0
                                     },
                                     {
-                                      "id": "c",
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
+                                      "id": "c",
+                                      "y": 100.0,
+                                      "x": 350.0
                                     }
                                   ],
                                   "edges": [
                                     {
-                                      "from": "a",
-                                      "to": "b"
+                                      "to": "b",
+                                      "from": "a"
                                     },
                                     {
                                       "from": "b",
                                       "to": "c"
                                     }
-                                  ],
-                                  "width": 400,
-                                  "height": 200
+                                  ]
                                 }
-                              ]
+                              ],
+                              "direction": "vertical",
+                              "type": "stack",
+                              "gap": "lg"
                             }
                           ]
                         }
-                      ]
+                      ],
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -2478,19 +2958,23 @@
                 "effects": [
                   [
                     "fetch",
-                    "Stage"
+                    "Stage",
+                    {
+                      "emit": {
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
-                          "label": "Builds",
+                          "icon": "hammer",
                           "href": "/builds",
-                          "icon": "hammer"
+                          "label": "Builds"
                         },
                         {
                           "label": "Stages",
@@ -2498,63 +2982,62 @@
                           "icon": "layers"
                         },
                         {
-                          "label": "Deploy",
                           "href": "/deploy",
-                          "icon": "rocket"
+                          "icon": "rocket",
+                          "label": "Deploy"
                         }
                       ],
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout",
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "lg",
                               "children": [
                                 {
-                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Stages"
                                     }
-                                  ]
+                                  ],
+                                  "type": "breadcrumb"
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "md",
-                                  "justify": "space-between",
                                   "children": [
                                     {
-                                      "type": "stack",
-                                      "direction": "horizontal",
                                       "gap": "md",
+                                      "direction": "horizontal",
+                                      "type": "stack",
                                       "children": [
                                         {
-                                          "type": "icon",
                                           "name": "layers",
+                                          "type": "icon",
                                           "size": "lg"
                                         },
                                         {
+                                          "variant": "h2",
                                           "type": "typography",
-                                          "content": "Stages",
-                                          "variant": "h2"
+                                          "content": "Stages"
                                         }
                                       ]
                                     },
                                     {
                                       "type": "button",
                                       "label": "Refresh",
+                                      "icon": "refresh-cw",
                                       "event": "REFRESH",
-                                      "variant": "secondary",
-                                      "icon": "refresh-cw"
+                                      "variant": "secondary"
                                     }
-                                  ]
+                                  ],
+                                  "gap": "md",
+                                  "type": "stack",
+                                  "direction": "horizontal",
+                                  "justify": "space-between"
                                 },
                                 {
                                   "type": "divider"
@@ -2564,25 +3047,19 @@
                                   "padding": "md",
                                   "children": [
                                     {
-                                      "type": "simple-grid",
-                                      "columns": 3,
                                       "children": [
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
+                                                  "type": "typography",
                                                   "content": "Name"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2590,28 +3067,28 @@
                                                       "@entity"
                                                     ],
                                                     "name"
-                                                  ]
+                                                  ],
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "gap": "sm",
+                                              "type": "stack"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
                                               "gap": "sm",
+                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "type": "typography",
+                                                  "content": "Status",
                                                   "variant": "caption",
-                                                  "content": "Status"
+                                                  "type": "typography"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2619,17 +3096,20 @@
                                                       "@entity"
                                                     ],
                                                     "status"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "direction": "vertical",
                                               "gap": "sm",
                                               "children": [
@@ -2639,8 +3119,6 @@
                                                   "content": "Duration"
                                                 },
                                                 {
-                                                  "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2648,28 +3126,28 @@
                                                       "@entity"
                                                     ],
                                                     "duration"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack"
                                             }
                                           ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
                                               "gap": "sm",
+                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "content": "Output"
+                                                  "content": "Output",
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "type": "typography",
-                                                  "variant": "h3",
                                                   "content": [
                                                     "object/get",
                                                     [
@@ -2677,13 +3155,18 @@
                                                       "@entity"
                                                     ],
                                                     "output"
-                                                  ]
+                                                  ],
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "columns": 3.0,
+                                      "type": "simple-grid"
                                     }
                                   ]
                                 },
@@ -2691,113 +3174,116 @@
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
-                                  "columns": 2,
-                                  "gap": "md",
                                   "children": [
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
                                           "type": "typography",
-                                          "variant": "caption",
-                                          "content": "Chart View"
+                                          "content": "Chart View",
+                                          "variant": "caption"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     },
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "type": "typography",
                                           "variant": "caption",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     }
-                                  ]
+                                  ],
+                                  "columns": 2.0,
+                                  "gap": "md",
+                                  "type": "grid"
                                 },
                                 {
                                   "type": "line-chart",
+                                  "yKey": "value",
+                                  "title": "Trend",
                                   "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": "Apr"
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
-                                      "date": "Jun",
-                                      "value": 30
+                                      "value": 30.0,
+                                      "date": "Jun"
                                     }
                                   ],
-                                  "xKey": "date",
-                                  "yKey": "value",
-                                  "title": "Trend"
+                                  "xKey": "date"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
                                       "label": "Current",
                                       "color": "primary"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
+                                  "edges": [
+                                    {
+                                      "to": "b",
+                                      "from": "a"
+                                    },
+                                    {
+                                      "from": "b",
+                                      "to": "c"
+                                    }
+                                  ],
                                   "type": "graph-view",
+                                  "width": 400.0,
                                   "nodes": [
                                     {
-                                      "id": "a",
                                       "label": "Start",
-                                      "x": 50,
-                                      "y": 100
+                                      "id": "a",
+                                      "y": 100.0,
+                                      "x": 50.0
                                     },
                                     {
                                       "id": "b",
                                       "label": "Process",
-                                      "x": 200,
-                                      "y": 50
+                                      "y": 50.0,
+                                      "x": 200.0
                                     },
                                     {
-                                      "id": "c",
+                                      "x": 350.0,
                                       "label": "End",
-                                      "x": 350,
-                                      "y": 100
-                                    }
-                                  ],
-                                  "edges": [
-                                    {
-                                      "from": "a",
-                                      "to": "b"
-                                    },
-                                    {
-                                      "from": "b",
-                                      "to": "c"
+                                      "id": "c",
+                                      "y": 100.0
                                     }
                                   ],
-                                  "width": 400,
-                                  "height": 200
+                                  "height": 200.0
                                 }
-                              ]
+                              ],
+                              "direction": "vertical",
+                              "type": "stack",
+                              "gap": "lg"
                             }
                           ]
                         }
@@ -2807,12 +3293,13 @@
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
-          "name": "StagesPage",
+          "name": "Stages",
           "path": "/stages",
           "traits": [
             {
@@ -2848,23 +3335,65 @@
             "type": "string",
             "values": [
               "pending",
-              "deploying",
+              "running",
               "success",
-              "failed",
-              "rolled-back"
+              "failed"
             ]
           },
           {
             "name": "deployedAt",
-            "type": "date"
+            "type": "datetime"
           }
         ]
       },
       "traits": [
         {
           "name": "DeploymentAsync",
-          "linkedEntity": "Deployment",
           "category": "interaction",
+          "linkedEntity": "Deployment",
+          "emits": [
+            {
+              "event": "DeploymentLoaded",
+              "description": "Fired when Deployment finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "environment",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "version",
+                  "type": "string",
+                  "required": true
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "deployedAt",
+                  "type": "datetime"
+                }
+              ]
+            },
+            {
+              "event": "DeploymentLoadFailed",
+              "description": "Fired when Deployment fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
@@ -2896,29 +3425,35 @@
                 "payload": [
                   {
                     "name": "data",
-                    "type": "object",
-                    "required": true
+                    "type": "string"
                   }
                 ]
               },
               {
                 "key": "FAILED",
-                "name": "Failed",
-                "payload": [
-                  {
-                    "name": "error",
-                    "type": "string",
-                    "required": true
-                  }
-                ]
+                "name": "Failed"
+              },
+              {
+                "key": "RESET",
+                "name": "Reset"
               },
               {
                 "key": "RETRY",
                 "name": "Retry"
               },
               {
-                "key": "RESET",
-                "name": "Reset"
+                "key": "DeploymentLoaded",
+                "name": "Deployment loaded"
+              },
+              {
+                "key": "DeploymentLoadFailed",
+                "name": "Deployment load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -2929,53 +3464,55 @@
                 "effects": [
                   [
                     "fetch",
-                    "Deployment"
+                    "Deployment",
+                    {
+                      "emit": {
+                        "success": "DeploymentLoaded",
+                        "failure": "DeploymentLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
+                          "icon": "hammer",
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "href": "/builds"
                         },
                         {
-                          "label": "Stages",
                           "href": "/stages",
-                          "icon": "layers"
+                          "icon": "layers",
+                          "label": "Stages"
                         },
                         {
+                          "icon": "rocket",
                           "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
+                          "href": "/deploy"
                         }
                       ],
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
                           "gap": "lg",
                           "align": "center",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
                               "gap": "md",
                               "align": "center",
+                              "direction": "horizontal",
+                              "type": "stack",
                               "children": [
                                 {
-                                  "type": "icon",
                                   "name": "upload-cloud",
-                                  "size": "lg"
+                                  "size": "lg",
+                                  "type": "icon"
                                 },
                                 {
                                   "type": "typography",
-                                  "content": "Deployment",
-                                  "variant": "h2"
+                                  "variant": "h2",
+                                  "content": "Deployment"
                                 }
                               ]
                             },
@@ -2983,21 +3520,25 @@
                               "type": "divider"
                             },
                             {
-                              "type": "typography",
-                              "variant": "body",
+                              "content": "Ready to start deployment operation.",
                               "color": "muted",
-                              "content": "Ready to start deployment operation."
+                              "type": "typography",
+                              "variant": "body"
                             },
                             {
                               "type": "button",
-                              "label": "Start",
                               "event": "START",
+                              "label": "Start",
                               "variant": "primary",
                               "icon": "play"
                             }
-                          ]
+                          ],
+                          "type": "stack",
+                          "direction": "vertical"
                         }
-                      ]
+                      ],
+                      "type": "dashboard-layout",
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -3011,30 +3552,11 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
-                        },
-                        {
-                          "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
                           "gap": "lg",
+                          "type": "stack",
                           "align": "center",
                           "children": [
                             {
@@ -3043,11 +3565,30 @@
                               "message": "Processing deployment..."
                             },
                             {
-                              "type": "skeleton",
-                              "variant": "text"
+                              "variant": "text",
+                              "type": "skeleton"
                             }
                           ]
                         }
+                      ],
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout",
+                      "navItems": [
+                        {
+                          "icon": "hammer",
+                          "label": "Builds",
+                          "href": "/builds"
+                        },
+                        {
+                          "href": "/stages",
+                          "icon": "layers",
+                          "label": "Stages"
+                        },
+                        {
+                          "href": "/deploy",
+                          "label": "Deploy",
+                          "icon": "rocket"
+                        }
                       ]
                     }
                   ]
@@ -3068,12 +3609,11 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
                       "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
-                          "label": "Builds",
                           "href": "/builds",
+                          "label": "Builds",
                           "icon": "hammer"
                         },
                         {
@@ -3082,21 +3622,18 @@
                           "icon": "layers"
                         },
                         {
-                          "label": "Deploy",
                           "href": "/deploy",
-                          "icon": "rocket"
+                          "icon": "rocket",
+                          "label": "Deploy"
                         }
                       ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "vertical",
-                          "gap": "lg",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "icon",
                               "name": "check-circle",
+                              "type": "icon",
                               "size": "lg"
                             },
                             {
@@ -3108,18 +3645,22 @@
                               "type": "stack",
                               "direction": "horizontal",
                               "gap": "sm",
-                              "justify": "center",
                               "children": [
                                 {
                                   "type": "button",
-                                  "label": "Reset",
-                                  "event": "RESET",
+                                  "icon": "rotate-ccw",
                                   "variant": "ghost",
-                                  "icon": "rotate-ccw"
+                                  "label": "Reset",
+                                  "event": "RESET"
                                 }
-                              ]
+                              ],
+                              "justify": "center"
                             }
-                          ]
+                          ],
+                          "direction": "vertical",
+                          "type": "stack",
+                          "gap": "lg",
+                          "align": "center"
                         }
                       ]
                     }
@@ -3144,9 +3685,9 @@
                           "icon": "hammer"
                         },
                         {
+                          "icon": "layers",
                           "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
+                          "href": "/stages"
                         },
                         {
                           "label": "Deploy",
@@ -3156,38 +3697,38 @@
                       ],
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
                           "align": "center",
+                          "gap": "lg",
+                          "type": "stack",
                           "children": [
                             {
                               "type": "error-state",
-                              "title": "Operation Failed",
                               "message": "Deployment failed.",
-                              "onRetry": "RETRY"
+                              "onRetry": "RETRY",
+                              "title": "Operation Failed"
                             },
                             {
                               "type": "stack",
                               "direction": "horizontal",
                               "gap": "sm",
-                              "justify": "center",
                               "children": [
                                 {
+                                  "event": "RETRY",
                                   "type": "button",
                                   "label": "Retry",
-                                  "event": "RETRY",
                                   "variant": "primary",
                                   "icon": "refresh-cw"
                                 },
                                 {
                                   "type": "button",
-                                  "label": "Reset",
                                   "event": "RESET",
                                   "variant": "ghost",
+                                  "label": "Reset",
                                   "icon": "rotate-ccw"
                                 }
-                              ]
+                              ],
+                              "justify": "center"
                             }
                           ]
                         }
@@ -3209,43 +3750,43 @@
                       "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
+                          "icon": "hammer",
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "href": "/builds"
                         },
                         {
-                          "label": "Stages",
                           "href": "/stages",
+                          "label": "Stages",
                           "icon": "layers"
                         },
                         {
-                          "label": "Deploy",
                           "href": "/deploy",
+                          "label": "Deploy",
                           "icon": "rocket"
                         }
                       ],
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "vertical",
                           "gap": "lg",
+                          "type": "stack",
                           "align": "center",
                           "children": [
                             {
                               "type": "stack",
+                              "align": "center",
                               "direction": "horizontal",
                               "gap": "md",
-                              "align": "center",
                               "children": [
                                 {
-                                  "type": "icon",
                                   "name": "upload-cloud",
-                                  "size": "lg"
+                                  "size": "lg",
+                                  "type": "icon"
                                 },
                                 {
-                                  "type": "typography",
                                   "content": "Deployment",
-                                  "variant": "h2"
+                                  "variant": "h2",
+                                  "type": "typography"
                                 }
                               ]
                             },
@@ -3254,16 +3795,16 @@
                             },
                             {
                               "type": "typography",
+                              "content": "Ready to start deployment operation.",
                               "variant": "body",
-                              "color": "muted",
-                              "content": "Ready to start deployment operation."
+                              "color": "muted"
                             },
                             {
-                              "type": "button",
-                              "label": "Start",
                               "event": "START",
                               "variant": "primary",
-                              "icon": "play"
+                              "label": "Start",
+                              "icon": "play",
+                              "type": "button"
                             }
                           ]
                         }
@@ -3281,8 +3822,6 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
                           "label": "Builds",
@@ -3290,9 +3829,9 @@
                           "icon": "hammer"
                         },
                         {
-                          "label": "Stages",
+                          "icon": "layers",
                           "href": "/stages",
-                          "icon": "layers"
+                          "label": "Stages"
                         },
                         {
                           "label": "Deploy",
@@ -3300,30 +3839,29 @@
                           "icon": "rocket"
                         }
                       ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
                           "type": "stack",
                           "direction": "vertical",
-                          "gap": "lg",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "horizontal",
                               "gap": "md",
-                              "align": "center",
                               "children": [
                                 {
                                   "type": "icon",
-                                  "name": "upload-cloud",
-                                  "size": "lg"
+                                  "size": "lg",
+                                  "name": "upload-cloud"
                                 },
                                 {
-                                  "type": "typography",
                                   "content": "Deployment",
+                                  "type": "typography",
                                   "variant": "h2"
                                 }
-                              ]
+                              ],
+                              "align": "center",
+                              "type": "stack"
                             },
                             {
                               "type": "divider"
@@ -3336,14 +3874,17 @@
                             },
                             {
                               "type": "button",
-                              "label": "Start",
-                              "event": "START",
                               "variant": "primary",
-                              "icon": "play"
+                              "label": "Start",
+                              "icon": "play",
+                              "event": "START"
                             }
-                          ]
+                          ],
+                          "gap": "lg",
+                          "align": "center"
                         }
-                      ]
+                      ],
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -3357,36 +3898,35 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "icon": "hammer",
+                          "href": "/builds"
                         },
                         {
                           "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
+                          "icon": "layers",
+                          "href": "/stages"
                         },
                         {
-                          "label": "Deploy",
                           "href": "/deploy",
-                          "icon": "rocket"
+                          "icon": "rocket",
+                          "label": "Deploy"
                         }
                       ],
+                      "appName": "CI/CD Pipeline",
                       "children": [
                         {
+                          "align": "center",
                           "type": "stack",
                           "direction": "vertical",
                           "gap": "lg",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "loading-state",
                               "title": "Deploying...",
-                              "message": "Processing deployment..."
+                              "message": "Processing deployment...",
+                              "type": "loading-state"
                             },
                             {
                               "type": "skeleton",
@@ -3394,18 +3934,20 @@
                             }
                           ]
                         }
-                      ]
+                      ],
+                      "type": "dashboard-layout"
                     }
                   ]
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
         {
-          "name": "DeployPage",
+          "name": "Deploy",
           "path": "/deploy",
           "traits": [
             {
@@ -3416,4 +3958,4 @@
       ]
     }
   ]
-}
+}