@almadar/std 8.2.0 → 8.4.0

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

@@ -398,21 +398,21 @@
                     "render-ui",
                     "main",
                     {
+                      "type": "stack",
                       "align": "center",
+                      "className": "py-12",
+                      "direction": "vertical",
                       "children": [
                         {
                           "type": "spinner"
                         },
                         {
-                          "content": "Loading builds…",
-                          "variant": "caption",
                           "color": "muted",
-                          "type": "typography"
+                          "type": "typography",
+                          "variant": "caption",
+                          "content": "Loading builds…"
                         }
                       ],
-                      "type": "stack",
-                      "className": "py-12",
-                      "direction": "vertical",
                       "gap": "md"
                     }
                   ]
@@ -427,46 +427,65 @@
                     "render-ui",
                     "main",
                     {
+                      "navItems": [
+                        {
+                          "label": "Builds",
+                          "href": "/builds",
+                          "icon": "hammer"
+                        },
+                        {
+                          "href": "/stages",
+                          "icon": "layers",
+                          "label": "Stages"
+                        },
+                        {
+                          "icon": "rocket",
+                          "label": "Deploy",
+                          "href": "/deploy"
+                        }
+                      ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
+                          "gap": "lg",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "horizontal",
+                              "type": "stack",
                               "gap": "md",
-                              "justify": "between",
                               "align": "center",
+                              "justify": "between",
                               "children": [
                                 {
+                                  "type": "stack",
+                                  "direction": "horizontal",
                                   "align": "center",
+                                  "gap": "sm",
                                   "children": [
                                     {
-                                      "type": "icon",
-                                      "name": "package"
+                                      "name": "package",
+                                      "type": "icon"
                                     },
                                     {
                                       "type": "typography",
                                       "content": "Builds",
                                       "variant": "h2"
                                     }
-                                  ],
-                                  "gap": "sm",
-                                  "direction": "horizontal",
-                                  "type": "stack"
+                                  ]
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
-                                  "gap": "sm",
                                   "children": [
                                     {
-                                      "label": "Create Build",
                                       "action": "CREATE",
-                                      "type": "button",
+                                      "label": "Create Build",
                                       "variant": "primary",
-                                      "icon": "plus"
+                                      "icon": "plus",
+                                      "type": "button"
                                     }
-                                  ]
+                                  ],
+                                  "type": "stack",
+                                  "direction": "horizontal",
+                                  "gap": "sm"
                                 }
                               ]
                             },
@@ -474,7 +493,7 @@
                               "type": "divider"
                             },
                             {
-                              "gap": "sm",
+                              "entity": "@payload.data",
                               "itemActions": [
                                 {
                                   "label": "View",
@@ -482,30 +501,29 @@
                                   "variant": "ghost"
                                 },
                                 {
+                                  "variant": "ghost",
                                   "label": "Edit",
-                                  "event": "EDIT",
-                                  "variant": "ghost"
+                                  "event": "EDIT"
                                 },
                                 {
-                                  "variant": "danger",
+                                  "event": "DELETE",
                                   "label": "Delete",
-                                  "event": "DELETE"
+                                  "variant": "danger"
                                 }
                               ],
-                              "type": "data-list",
                               "columns": [
                                 {
-                                  "variant": "h3",
                                   "icon": "git-branch",
-                                  "name": "branch"
+                                  "name": "branch",
+                                  "variant": "h3"
                                 },
                                 {
-                                  "name": "status",
-                                  "variant": "badge"
+                                  "variant": "badge",
+                                  "name": "status"
                                 },
                                 {
-                                  "variant": "body",
-                                  "name": "commit"
+                                  "name": "commit",
+                                  "variant": "body"
                                 },
                                 {
                                   "variant": "caption",
@@ -513,36 +531,18 @@
                                   "label": "Triggered By"
                                 }
                               ],
+                              "type": "data-list",
                               "fields": [],
                               "variant": "card",
-                              "entity": "@payload.data"
+                              "gap": "sm"
                             }
                           ],
-                          "direction": "vertical",
                           "type": "stack",
                           "className": "max-w-5xl mx-auto w-full",
-                          "gap": "lg"
-                        }
-                      ],
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "icon": "hammer",
-                          "label": "Builds",
-                          "href": "/builds"
-                        },
-                        {
-                          "label": "Stages",
-                          "icon": "layers",
-                          "href": "/stages"
-                        },
-                        {
-                          "label": "Deploy",
-                          "icon": "rocket",
-                          "href": "/deploy"
+                          "direction": "vertical"
                         }
                       ],
-                      "type": "dashboard-layout"
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -556,16 +556,13 @@
                     "render-ui",
                     "main",
                     {
-                      "className": "py-12",
-                      "type": "stack",
                       "gap": "md",
-                      "direction": "vertical",
-                      "align": "center",
+                      "className": "py-12",
                       "children": [
                         {
-                          "type": "icon",
                           "name": "alert-triangle",
-                          "color": "destructive"
+                          "color": "destructive",
+                          "type": "icon"
                         },
                         {
                           "content": "Failed to load builds",
@@ -573,19 +570,22 @@
                           "type": "typography"
                         },
                         {
-                          "type": "typography",
-                          "content": "@payload.error",
                           "variant": "body",
-                          "color": "muted"
+                          "color": "muted",
+                          "content": "@payload.error",
+                          "type": "typography"
                         },
                         {
-                          "label": "Retry",
                           "variant": "primary",
                           "icon": "rotate-ccw",
+                          "type": "button",
                           "action": "INIT",
-                          "type": "button"
+                          "label": "Retry"
                         }
-                      ]
+                      ],
+                      "type": "stack",
+                      "direction": "vertical",
+                      "align": "center"
                     }
                   ]
                 ]
@@ -769,8 +769,8 @@
                     "Build",
                     {
                       "emit": {
-                        "success": "BuildLoaded",
-                        "failure": "BuildLoadFailed"
+                        "failure": "BuildLoadFailed",
+                        "success": "BuildLoaded"
                       }
                     }
                   ],
@@ -780,11 +780,10 @@
                     {
                       "type": "stack",
                       "gap": "md",
-                      "direction": "vertical",
                       "children": [
                         {
-                          "gap": "sm",
                           "type": "stack",
+                          "direction": "horizontal",
                           "children": [
                             {
                               "type": "icon",
@@ -796,24 +795,25 @@
                               "content": "Create Build"
                             }
                           ],
-                          "direction": "horizontal"
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
+                          "type": "form-section",
+                          "mode": "create",
+                          "submitEvent": "SAVE",
                           "cancelEvent": "CLOSE",
                           "fields": [
                             "branch",
                             "status",
                             "commit",
                             "triggeredBy"
-                          ],
-                          "type": "form-section",
-                          "submitEvent": "SAVE",
-                          "mode": "create"
+                          ]
                         }
-                      ]
+                      ],
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -1077,11 +1077,11 @@
                     "render-ui",
                     "modal",
                     {
-                      "direction": "vertical",
-                      "type": "stack",
-                      "gap": "md",
                       "children": [
                         {
+                          "gap": "sm",
+                          "type": "stack",
+                          "direction": "horizontal",
                           "children": [
                             {
                               "name": "edit",
@@ -1092,20 +1092,17 @@
                               "content": "Edit Build",
                               "variant": "h3"
                             }
-                          ],
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm"
+                          ]
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "form-section",
                           "entity": "@payload.row",
+                          "type": "form-section",
                           "mode": "edit",
-                          "submitEvent": "SAVE",
                           "cancelEvent": "CLOSE",
+                          "submitEvent": "SAVE",
                           "fields": [
                             "branch",
                             "status",
@@ -1113,7 +1110,10 @@
                             "triggeredBy"
                           ]
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "type": "stack",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -1302,8 +1302,8 @@
                     {
                       "id": "@payload.id",
                       "emit": {
-                        "failure": "BuildLoadFailed",
-                        "success": "BuildLoaded"
+                        "success": "BuildLoaded",
+                        "failure": "BuildLoadFailed"
                       }
                     }
                   ],
@@ -1311,31 +1311,29 @@
                     "render-ui",
                     "modal",
                     {
-                      "direction": "vertical",
                       "children": [
                         {
-                          "align": "center",
-                          "gap": "sm",
+                          "direction": "horizontal",
                           "type": "stack",
                           "children": [
                             {
-                              "name": "eye",
-                              "type": "icon"
+                              "type": "icon",
+                              "name": "eye"
                             },
                             {
-                              "variant": "h3",
                               "type": "typography",
+                              "variant": "h3",
                               "content": "@entity.branch"
                             }
                           ],
-                          "direction": "horizontal"
+                          "align": "center",
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "stack",
-                          "gap": "md",
+                          "direction": "horizontal",
                           "children": [
                             {
                               "variant": "caption",
@@ -1348,32 +1346,33 @@
                               "content": "@entity.branch"
                             }
                           ],
-                          "direction": "horizontal"
+                          "type": "stack",
+                          "gap": "md"
                         },
                         {
+                          "direction": "horizontal",
+                          "gap": "md",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "typography",
                               "content": "Status",
-                              "variant": "caption"
+                              "variant": "caption",
+                              "type": "typography"
                             },
                             {
-                              "variant": "body",
+                              "content": "@entity.status",
                               "type": "typography",
-                              "content": "@entity.status"
+                              "variant": "body"
                             }
-                          ],
-                          "direction": "horizontal",
-                          "type": "stack",
-                          "gap": "md"
+                          ]
                         },
                         {
-                          "gap": "md",
+                          "type": "stack",
                           "direction": "horizontal",
                           "children": [
                             {
-                              "content": "Commit",
                               "type": "typography",
+                              "content": "Commit",
                               "variant": "caption"
                             },
                             {
@@ -1382,10 +1381,11 @@
                               "content": "@entity.commit"
                             }
                           ],
-                          "type": "stack"
+                          "gap": "md"
                         },
                         {
-                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "md",
                           "children": [
                             {
                               "variant": "caption",
@@ -1394,40 +1394,40 @@
                             },
                             {
                               "type": "typography",
-                              "variant": "body",
-                              "content": "@entity.triggeredBy"
+                              "content": "@entity.triggeredBy",
+                              "variant": "body"
                             }
                           ],
-                          "gap": "md",
-                          "direction": "horizontal"
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "stack",
+                          "direction": "horizontal",
                           "gap": "sm",
+                          "type": "stack",
                           "children": [
                             {
-                              "type": "button",
                               "icon": "edit",
-                              "action": "EDIT",
                               "label": "Edit",
-                              "variant": "primary"
+                              "type": "button",
+                              "variant": "primary",
+                              "action": "EDIT"
                             },
                             {
+                              "variant": "ghost",
                               "label": "Close",
                               "action": "CLOSE",
-                              "variant": "ghost",
                               "type": "button"
                             }
                           ],
-                          "justify": "end",
-                          "direction": "horizontal"
+                          "justify": "end"
                         }
                       ],
                       "gap": "md",
-                      "type": "stack"
+                      "type": "stack",
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -1662,11 +1662,11 @@
                     "fetch",
                     "Build",
                     {
+                      "id": "@payload.id",
                       "emit": {
                         "success": "BuildLoaded",
                         "failure": "BuildLoadFailed"
-                      },
-                      "id": "@payload.id"
+                      }
                     }
                   ],
                   [
@@ -1674,13 +1674,10 @@
                     "modal",
                     {
                       "direction": "vertical",
-                      "type": "stack",
-                      "gap": "md",
                       "children": [
                         {
-                          "type": "stack",
                           "direction": "horizontal",
-                          "gap": "sm",
+                          "type": "stack",
                           "align": "center",
                           "children": [
                             {
@@ -1689,41 +1686,44 @@
                             },
                             {
                               "variant": "h3",
-                              "type": "typography",
-                              "content": "Delete Build"
+                              "content": "Delete Build",
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "variant": "error",
                           "message": "This action cannot be undone.",
-                          "type": "alert"
+                          "type": "alert",
+                          "variant": "error"
                         },
                         {
+                          "justify": "end",
+                          "gap": "sm",
+                          "direction": "horizontal",
+                          "type": "stack",
                           "children": [
                             {
-                              "variant": "ghost",
-                              "label": "Cancel",
+                              "type": "button",
                               "action": "CANCEL",
-                              "type": "button"
+                              "label": "Cancel",
+                              "variant": "ghost"
                             },
                             {
-                              "type": "button",
                               "variant": "danger",
+                              "label": "Delete",
                               "icon": "check",
                               "action": "CONFIRM_DELETE",
-                              "label": "Delete"
+                              "type": "button"
                             }
-                          ],
-                          "direction": "horizontal",
-                          "type": "stack",
-                          "gap": "sm",
-                          "justify": "end"
+                          ]
                         }
-                      ]
+                      ],
+                      "gap": "md",
+                      "type": "stack"
                     }
                   ]
                 ]
@@ -1977,8 +1977,8 @@
                     "Stage",
                     {
                       "emit": {
-                        "failure": "StageLoadFailed",
-                        "success": "StageLoaded"
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
                       }
                     }
                   ],
@@ -1986,11 +1986,29 @@
                     "render-ui",
                     "main",
                     {
+                      "navItems": [
+                        {
+                          "href": "/builds",
+                          "icon": "hammer",
+                          "label": "Builds"
+                        },
+                        {
+                          "href": "/stages",
+                          "label": "Stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "label": "Deploy",
+                          "href": "/deploy",
+                          "icon": "rocket"
+                        }
+                      ],
+                      "appName": "CI/CD Pipeline",
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
+                              "type": "stack",
                               "gap": "lg",
                               "children": [
                                 {
@@ -2007,12 +2025,10 @@
                                 },
                                 {
                                   "justify": "between",
-                                  "type": "stack",
                                   "direction": "horizontal",
-                                  "gap": "md",
                                   "children": [
                                     {
-                                      "type": "stack",
+                                      "direction": "horizontal",
                                       "gap": "md",
                                       "children": [
                                         {
@@ -2021,128 +2037,132 @@
                                         },
                                         {
                                           "type": "typography",
-                                          "content": "Stages",
-                                          "variant": "h2"
+                                          "variant": "h2",
+                                          "content": "Stages"
                                         }
                                       ],
-                                      "direction": "horizontal"
+                                      "type": "stack"
                                     },
                                     {
                                       "label": "Refresh",
+                                      "type": "button",
                                       "action": "REFRESH",
                                       "variant": "secondary",
-                                      "type": "button",
                                       "icon": "refresh-cw"
                                     }
-                                  ]
-                                },
-                                {
+                                  ],
+                                  "type": "stack",
+                                  "gap": "md"
+                                },
+                                {
                                   "type": "divider"
                                 },
                                 {
+                                  "padding": "md",
                                   "children": [
                                     {
-                                      "cols": 3.0,
-                                      "type": "simple-grid",
                                       "children": [
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
                                               "direction": "vertical",
+                                              "type": "stack",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "content": "Name",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "content": "Name"
                                                 },
                                                 {
                                                   "content": "@entity.name",
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "gap": "sm",
-                                              "type": "stack"
+                                              "gap": "sm"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "content": "Status",
                                                   "type": "typography",
+                                                  "content": "Status",
                                                   "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
-                                                  "content": "@entity.status"
+                                                  "content": "@entity.status",
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "gap": "sm"
+                                              "direction": "vertical",
+                                              "gap": "sm",
+                                              "type": "stack"
                                             }
                                           ]
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Duration"
+                                                  "content": "Duration",
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "variant": "h3",
-                                                  "type": "typography",
-                                                  "content": "@entity.duration"
+                                                  "content": "@entity.duration",
+                                                  "type": "typography"
                                                 }
                                               ],
+                                              "type": "stack",
                                               "gap": "sm",
-                                              "type": "stack"
+                                              "direction": "vertical"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
                                           "children": [
                                             {
+                                              "type": "stack",
+                                              "gap": "sm",
+                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
+                                                  "content": "Output",
                                                   "type": "typography",
-                                                  "content": "Output"
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "content": "@entity.output",
                                                   "variant": "h3",
+                                                  "content": "@entity.output",
                                                   "type": "typography"
                                                 }
-                                              ],
-                                              "direction": "vertical",
-                                              "gap": "sm",
-                                              "type": "stack"
+                                              ]
                                             }
                                           ],
                                           "type": "card"
                                         }
-                                      ]
+                                      ],
+                                      "cols": 3.0,
+                                      "type": "simple-grid"
                                     }
                                   ],
-                                  "padding": "md",
                                   "type": "box"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "cols": 2.0,
+                                  "gap": "md",
                                   "type": "grid",
                                   "children": [
                                     {
@@ -2159,76 +2179,73 @@
                                       "children": [
                                         {
                                           "variant": "caption",
-                                          "type": "typography",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
                                       ],
                                       "type": "card"
                                     }
-                                  ],
-                                  "gap": "md",
-                                  "cols": 2.0
+                                  ]
                                 },
                                 {
+                                  "type": "line-chart",
                                   "data": [
                                     {
                                       "date": "Jan",
                                       "value": 12.0
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19.0
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
-                                      "value": 15.0,
-                                      "date": "Mar"
+                                      "date": "Mar",
+                                      "value": 15.0
                                     },
                                     {
                                       "date": "Apr",
                                       "value": 25.0
                                     },
                                     {
-                                      "value": 22.0,
-                                      "date": "May"
+                                      "date": "May",
+                                      "value": 22.0
                                     },
                                     {
-                                      "date": "Jun",
-                                      "value": 30.0
+                                      "value": 30.0,
+                                      "date": "Jun"
                                     }
-                                  ],
-                                  "type": "line-chart"
+                                  ]
                                 },
                                 {
                                   "type": "chart-legend",
                                   "items": [
                                     {
-                                      "color": "primary",
-                                      "label": "Current"
+                                      "label": "Current",
+                                      "color": "primary"
                                     },
                                     {
-                                      "color": "muted",
-                                      "label": "Previous"
+                                      "label": "Previous",
+                                      "color": "muted"
                                     }
                                   ]
                                 },
                                 {
+                                  "height": 200.0,
                                   "nodes": [
                                     {
                                       "id": "a",
                                       "label": "Start"
                                     },
                                     {
-                                      "label": "Process",
-                                      "id": "b"
+                                      "id": "b",
+                                      "label": "Process"
                                     },
                                     {
                                       "id": "c",
                                       "label": "End"
                                     }
                                   ],
-                                  "width": 400.0,
                                   "type": "graph-view",
-                                  "height": 200.0,
                                   "edges": [
                                     {
                                       "source": "a",
@@ -2238,31 +2255,14 @@
                                       "source": "b",
                                       "target": "c"
                                     }
-                                  ]
+                                  ],
+                                  "width": 400.0
                                 }
                               ],
-                              "direction": "vertical",
-                              "type": "stack"
+                              "direction": "vertical"
                             }
-                          ]
-                        }
-                      ],
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "icon": "hammer",
-                          "label": "Builds",
-                          "href": "/builds"
-                        },
-                        {
-                          "icon": "layers",
-                          "label": "Stages",
-                          "href": "/stages"
-                        },
-                        {
-                          "href": "/deploy",
-                          "label": "Deploy",
-                          "icon": "rocket"
+                          ],
+                          "type": "scaled-diagram"
                         }
                       ],
                       "type": "dashboard-layout"
@@ -2289,37 +2289,23 @@
                     "render-ui",
                     "main",
                     {
-                      "navItems": [
-                        {
-                          "icon": "hammer",
-                          "href": "/builds",
-                          "label": "Builds"
-                        },
-                        {
-                          "href": "/stages",
-                          "icon": "layers",
-                          "label": "Stages"
-                        },
-                        {
-                          "icon": "rocket",
-                          "href": "/deploy",
-                          "label": "Deploy"
-                        }
-                      ],
                       "type": "dashboard-layout",
+                      "appName": "CI/CD Pipeline",
                       "children": [
                         {
+                          "type": "scaled-diagram",
                           "children": [
                             {
                               "type": "stack",
                               "direction": "vertical",
+                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "href": "/",
-                                      "label": "Home"
+                                      "label": "Home",
+                                      "href": "/"
                                     },
                                     {
                                       "label": "Stages"
@@ -2327,11 +2313,13 @@
                                   ]
                                 },
                                 {
+                                  "gap": "md",
+                                  "type": "stack",
                                   "justify": "between",
                                   "children": [
                                     {
-                                      "direction": "horizontal",
                                       "gap": "md",
+                                      "direction": "horizontal",
                                       "type": "stack",
                                       "children": [
                                         {
@@ -2339,22 +2327,20 @@
                                           "type": "icon"
                                         },
                                         {
+                                          "type": "typography",
                                           "content": "Stages",
-                                          "variant": "h2",
-                                          "type": "typography"
+                                          "variant": "h2"
                                         }
                                       ]
                                     },
                                     {
                                       "label": "Refresh",
-                                      "action": "REFRESH",
-                                      "variant": "secondary",
                                       "type": "button",
-                                      "icon": "refresh-cw"
+                                      "icon": "refresh-cw",
+                                      "variant": "secondary",
+                                      "action": "REFRESH"
                                     }
                                   ],
-                                  "type": "stack",
-                                  "gap": "md",
                                   "direction": "horizontal"
                                 },
                                 {
@@ -2362,6 +2348,7 @@
                                 },
                                 {
                                   "padding": "md",
+                                  "type": "box",
                                   "children": [
                                     {
                                       "children": [
@@ -2369,19 +2356,19 @@
                                           "children": [
                                             {
                                               "type": "stack",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "type": "typography",
-                                                  "content": "Name",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "content": "Name"
                                                 },
                                                 {
+                                                  "content": "@entity.name",
                                                   "type": "typography",
-                                                  "variant": "h3",
-                                                  "content": "@entity.name"
+                                                  "variant": "h3"
                                                 }
                                               ],
+                                              "direction": "vertical",
                                               "gap": "sm"
                                             }
                                           ],
@@ -2391,19 +2378,19 @@
                                           "children": [
                                             {
                                               "direction": "vertical",
+                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "content": "Status",
+                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "type": "typography"
+                                                  "content": "Status"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "content": "@entity.status",
+                                                  "type": "typography",
                                                   "variant": "h3"
                                                 }
                                               ],
-                                              "type": "stack",
                                               "gap": "sm"
                                             }
                                           ],
@@ -2413,20 +2400,20 @@
                                           "type": "card",
                                           "children": [
                                             {
+                                              "gap": "sm",
+                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "content": "Duration",
-                                                  "variant": "caption",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "type": "typography",
+                                                  "content": "@entity.duration",
                                                   "variant": "h3",
-                                                  "content": "@entity.duration"
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "gap": "sm",
-                                              "direction": "vertical",
                                               "type": "stack"
                                             }
                                           ]
@@ -2435,83 +2422,82 @@
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
+                                              "gap": "sm",
                                               "children": [
                                                 {
                                                   "content": "Output",
-                                                  "type": "typography",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "type": "typography"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
-                                                  "content": "@entity.output"
+                                                  "content": "@entity.output",
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "direction": "vertical",
-                                              "gap": "sm"
+                                              "type": "stack",
+                                              "direction": "vertical"
                                             }
                                           ]
                                         }
                                       ],
-                                      "cols": 3.0,
-                                      "type": "simple-grid"
+                                      "type": "simple-grid",
+                                      "cols": 3.0
                                     }
-                                  ],
-                                  "type": "box"
+                                  ]
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "type": "grid",
                                   "gap": "md",
                                   "cols": 2.0,
                                   "children": [
                                     {
-                                      "type": "card",
                                       "children": [
                                         {
-                                          "variant": "caption",
+                                          "content": "Chart View",
                                           "type": "typography",
-                                          "content": "Chart View"
+                                          "variant": "caption"
                                         }
-                                      ]
+                                      ],
+                                      "type": "card"
                                     },
                                     {
                                       "children": [
                                         {
                                           "variant": "caption",
-                                          "type": "typography",
-                                          "content": "Graph View"
+                                          "content": "Graph View",
+                                          "type": "typography"
                                         }
                                       ],
                                       "type": "card"
                                     }
-                                  ]
+                                  ],
+                                  "type": "grid"
                                 },
                                 {
                                   "type": "line-chart",
                                   "data": [
                                     {
-                                      "value": 12.0,
-                                      "date": "Jan"
+                                      "date": "Jan",
+                                      "value": 12.0
                                     },
                                     {
-                                      "value": 19.0,
-                                      "date": "Feb"
+                                      "date": "Feb",
+                                      "value": 19.0
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15.0
-                                    },
+                                      "value": 15.0,
+                                      "date": "Mar"
+                                    },
                                     {
-                                      "value": 25.0,
-                                      "date": "Apr"
+                                      "date": "Apr",
+                                      "value": 25.0
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22.0
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
                                       "date": "Jun",
@@ -2520,7 +2506,6 @@
                                   ]
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
                                       "label": "Current",
@@ -2530,45 +2515,60 @@
                                       "color": "muted",
                                       "label": "Previous"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
-                                  "nodes": [
-                                    {
-                                      "label": "Start",
-                                      "id": "a"
-                                    },
+                                  "width": 400.0,
+                                  "height": 200.0,
+                                  "edges": [
                                     {
-                                      "id": "b",
-                                      "label": "Process"
+                                      "target": "b",
+                                      "source": "a"
                                     },
                                     {
-                                      "id": "c",
-                                      "label": "End"
+                                      "source": "b",
+                                      "target": "c"
                                     }
                                   ],
-                                  "width": 400.0,
-                                  "height": 200.0,
                                   "type": "graph-view",
-                                  "edges": [
+                                  "nodes": [
                                     {
-                                      "target": "b",
-                                      "source": "a"
+                                      "id": "a",
+                                      "label": "Start"
                                     },
                                     {
-                                      "target": "c",
-                                      "source": "b"
+                                      "label": "Process",
+                                      "id": "b"
+                                    },
+                                    {
+                                      "id": "c",
+                                      "label": "End"
                                     }
                                   ]
                                 }
-                              ],
-                              "gap": "lg"
+                              ]
                             }
-                          ],
-                          "type": "scaled-diagram"
+                          ]
                         }
                       ],
-                      "appName": "CI/CD Pipeline"
+                      "navItems": [
+                        {
+                          "icon": "hammer",
+                          "label": "Builds",
+                          "href": "/builds"
+                        },
+                        {
+                          "label": "Stages",
+                          "href": "/stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "label": "Deploy",
+                          "href": "/deploy",
+                          "icon": "rocket"
+                        }
+                      ]
                     }
                   ]
                 ]
@@ -2583,8 +2583,8 @@
                     "Stage",
                     {
                       "emit": {
-                        "failure": "StageLoadFailed",
-                        "success": "StageLoaded"
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
                       }
                     }
                   ],
@@ -2592,20 +2592,19 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
                       "children": [
                         {
                           "children": [
                             {
-                              "gap": "lg",
                               "direction": "vertical",
+                              "gap": "lg",
                               "children": [
                                 {
                                   "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "href": "/",
-                                      "label": "Home"
+                                      "label": "Home",
+                                      "href": "/"
                                     },
                                     {
                                       "label": "Stages"
@@ -2613,88 +2612,88 @@
                                   ]
                                 },
                                 {
-                                  "type": "stack",
-                                  "direction": "horizontal",
+                                  "gap": "md",
                                   "justify": "between",
+                                  "direction": "horizontal",
                                   "children": [
                                     {
-                                      "type": "stack",
                                       "direction": "horizontal",
-                                      "gap": "md",
                                       "children": [
                                         {
-                                          "type": "icon",
-                                          "name": "layers"
+                                          "name": "layers",
+                                          "type": "icon"
                                         },
                                         {
+                                          "variant": "h2",
                                           "content": "Stages",
-                                          "type": "typography",
-                                          "variant": "h2"
+                                          "type": "typography"
                                         }
-                                      ]
+                                      ],
+                                      "gap": "md",
+                                      "type": "stack"
                                     },
                                     {
-                                      "type": "button",
                                       "icon": "refresh-cw",
+                                      "type": "button",
+                                      "action": "REFRESH",
                                       "variant": "secondary",
-                                      "label": "Refresh",
-                                      "action": "REFRESH"
+                                      "label": "Refresh"
                                     }
                                   ],
-                                  "gap": "md"
+                                  "type": "stack"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "padding": "md",
                                   "type": "box",
+                                  "padding": "md",
                                   "children": [
                                     {
                                       "type": "simple-grid",
                                       "cols": 3.0,
                                       "children": [
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "gap": "sm",
                                               "direction": "vertical",
+                                              "type": "stack",
+                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
+                                                  "variant": "caption",
                                                   "content": "Name",
-                                                  "variant": "caption"
+                                                  "type": "typography"
                                                 },
                                                 {
                                                   "type": "typography",
                                                   "variant": "h3",
                                                   "content": "@entity.name"
                                                 }
-                                              ],
-                                              "type": "stack"
+                                              ]
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
+                                              "gap": "sm",
+                                              "direction": "vertical",
+                                              "type": "stack",
                                               "children": [
                                                 {
+                                                  "content": "Status",
                                                   "type": "typography",
-                                                  "variant": "caption",
-                                                  "content": "Status"
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "content": "@entity.status",
+                                                  "variant": "h3",
                                                   "type": "typography",
-                                                  "variant": "h3"
+                                                  "content": "@entity.status"
                                                 }
-                                              ],
-                                              "type": "stack",
-                                              "gap": "sm",
-                                              "direction": "vertical"
+                                              ]
                                             }
                                           ]
                                         },
@@ -2704,9 +2703,9 @@
                                             {
                                               "children": [
                                                 {
+                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "content": "Duration",
-                                                  "type": "typography"
+                                                  "content": "Duration"
                                                 },
                                                 {
                                                   "variant": "h3",
@@ -2723,21 +2722,21 @@
                                         {
                                           "children": [
                                             {
-                                              "direction": "vertical",
+                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "type": "typography",
                                                   "content": "Output",
-                                                  "variant": "caption"
+                                                  "variant": "caption",
+                                                  "type": "typography"
                                                 },
                                                 {
+                                                  "variant": "h3",
                                                   "content": "@entity.output",
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "gap": "sm",
-                                              "type": "stack"
+                                              "type": "stack",
+                                              "direction": "vertical"
                                             }
                                           ],
                                           "type": "card"
@@ -2750,13 +2749,15 @@
                                   "type": "divider"
                                 },
                                 {
+                                  "type": "grid",
+                                  "cols": 2.0,
                                   "children": [
                                     {
                                       "children": [
                                         {
+                                          "variant": "caption",
                                           "content": "Chart View",
-                                          "type": "typography",
-                                          "variant": "caption"
+                                          "type": "typography"
                                         }
                                       ],
                                       "type": "card"
@@ -2765,48 +2766,45 @@
                                       "type": "card",
                                       "children": [
                                         {
-                                          "variant": "caption",
                                           "content": "Graph View",
+                                          "variant": "caption",
                                           "type": "typography"
                                         }
                                       ]
                                     }
                                   ],
-                                  "cols": 2.0,
-                                  "type": "grid",
                                   "gap": "md"
                                 },
                                 {
+                                  "type": "line-chart",
                                   "data": [
                                     {
-                                      "date": "Jan",
-                                      "value": 12.0
+                                      "value": 12.0,
+                                      "date": "Jan"
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19.0
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
-                                      "value": 15.0,
-                                      "date": "Mar"
+                                      "date": "Mar",
+                                      "value": 15.0
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25.0
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22.0
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
-                                      "date": "Jun",
-                                      "value": 30.0
+                                      "value": 30.0,
+                                      "date": "Jun"
                                     }
-                                  ],
-                                  "type": "line-chart"
+                                  ]
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
                                       "color": "primary",
@@ -2816,9 +2814,11 @@
                                       "label": "Previous",
                                       "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
+                                  "width": 400.0,
                                   "nodes": [
                                     {
                                       "id": "a",
@@ -2833,7 +2833,7 @@
                                       "label": "End"
                                     }
                                   ],
-                                  "width": 400.0,
+                                  "type": "graph-view",
                                   "edges": [
                                     {
                                       "source": "a",
@@ -2844,7 +2844,6 @@
                                       "target": "c"
                                     }
                                   ],
-                                  "type": "graph-view",
                                   "height": 200.0
                                 }
                               ],
@@ -2857,21 +2856,22 @@
                       "navItems": [
                         {
                           "label": "Builds",
-                          "icon": "hammer",
-                          "href": "/builds"
+                          "href": "/builds",
+                          "icon": "hammer"
                         },
                         {
-                          "icon": "layers",
+                          "href": "/stages",
                           "label": "Stages",
-                          "href": "/stages"
+                          "icon": "layers"
                         },
                         {
-                          "href": "/deploy",
+                          "label": "Deploy",
                           "icon": "rocket",
-                          "label": "Deploy"
+                          "href": "/deploy"
                         }
                       ],
-                      "appName": "CI/CD Pipeline"
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout"
                     }
                   ]
                 ]
@@ -2886,8 +2886,8 @@
                     "Stage",
                     {
                       "emit": {
-                        "failure": "StageLoadFailed",
-                        "success": "StageLoaded"
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
                       }
                     }
                   ],
@@ -2895,19 +2895,20 @@
                     "render-ui",
                     "main",
                     {
+                      "type": "dashboard-layout",
+                      "appName": "CI/CD Pipeline",
                       "children": [
                         {
-                          "type": "scaled-diagram",
                           "children": [
                             {
-                              "gap": "lg",
+                              "type": "stack",
                               "children": [
                                 {
                                   "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "href": "/",
-                                      "label": "Home"
+                                      "label": "Home",
+                                      "href": "/"
                                     },
                                     {
                                       "label": "Stages"
@@ -2915,96 +2916,94 @@
                                   ]
                                 },
                                 {
-                                  "gap": "md",
-                                  "type": "stack",
-                                  "justify": "between",
                                   "children": [
                                     {
+                                      "gap": "md",
+                                      "type": "stack",
+                                      "direction": "horizontal",
                                       "children": [
                                         {
                                           "type": "icon",
                                           "name": "layers"
                                         },
                                         {
-                                          "variant": "h2",
                                           "content": "Stages",
+                                          "variant": "h2",
                                           "type": "typography"
                                         }
-                                      ],
-                                      "type": "stack",
-                                      "direction": "horizontal",
-                                      "gap": "md"
+                                      ]
                                     },
                                     {
-                                      "type": "button",
-                                      "variant": "secondary",
-                                      "action": "REFRESH",
                                       "icon": "refresh-cw",
-                                      "label": "Refresh"
+                                      "label": "Refresh",
+                                      "action": "REFRESH",
+                                      "type": "button",
+                                      "variant": "secondary"
                                     }
                                   ],
-                                  "direction": "horizontal"
+                                  "type": "stack",
+                                  "direction": "horizontal",
+                                  "gap": "md",
+                                  "justify": "between"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "padding": "md",
+                                  "type": "box",
                                   "children": [
                                     {
-                                      "cols": 3.0,
-                                      "type": "simple-grid",
                                       "children": [
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
+                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "type": "typography",
+                                                  "variant": "caption",
                                                   "content": "Name",
-                                                  "variant": "caption"
+                                                  "type": "typography"
                                                 },
                                                 {
-                                                  "content": "@entity.name",
                                                   "type": "typography",
-                                                  "variant": "h3"
+                                                  "variant": "h3",
+                                                  "content": "@entity.name"
                                                 }
                                               ],
                                               "direction": "vertical",
-                                              "gap": "sm",
-                                              "type": "stack"
+                                              "gap": "sm"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
+                                              "type": "stack",
                                               "direction": "vertical",
+                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "content": "Status",
+                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "type": "typography"
+                                                  "content": "Status"
                                                 },
                                                 {
+                                                  "type": "typography",
                                                   "variant": "h3",
-                                                  "content": "@entity.status",
-                                                  "type": "typography"
+                                                  "content": "@entity.status"
                                                 }
-                                              ],
-                                              "gap": "sm",
-                                              "type": "stack"
+                                              ]
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
                                               "gap": "sm",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
                                                   "content": "Duration",
@@ -3012,47 +3011,51 @@
                                                   "variant": "caption"
                                                 },
                                                 {
-                                                  "variant": "h3",
                                                   "type": "typography",
+                                                  "variant": "h3",
                                                   "content": "@entity.duration"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "direction": "vertical"
                                             }
                                           ]
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
                                               "type": "stack",
                                               "children": [
                                                 {
                                                   "variant": "caption",
-                                                  "content": "Output",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "content": "Output"
                                                 },
                                                 {
                                                   "type": "typography",
-                                                  "content": "@entity.output",
-                                                  "variant": "h3"
+                                                  "variant": "h3",
+                                                  "content": "@entity.output"
                                                 }
                                               ],
-                                              "gap": "sm",
-                                              "direction": "vertical"
+                                              "direction": "vertical",
+                                              "gap": "sm"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         }
-                                      ]
+                                      ],
+                                      "cols": 3.0,
+                                      "type": "simple-grid"
                                     }
-                                  ],
-                                  "type": "box",
-                                  "padding": "md"
+                                  ]
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
+                                  "gap": "md",
                                   "cols": 2.0,
+                                  "type": "grid",
                                   "children": [
                                     {
                                       "children": [
@@ -3074,15 +3077,13 @@
                                         }
                                       ]
                                     }
-                                  ],
-                                  "type": "grid",
-                                  "gap": "md"
+                                  ]
                                 },
                                 {
                                   "data": [
                                     {
-                                      "value": 12.0,
-                                      "date": "Jan"
+                                      "date": "Jan",
+                                      "value": 12.0
                                     },
                                     {
                                       "date": "Feb",
@@ -3093,12 +3094,12 @@
                                       "value": 15.0
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25.0
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
-                                      "date": "May",
-                                      "value": 22.0
+                                      "value": 22.0,
+                                      "date": "May"
                                     },
                                     {
                                       "date": "Jun",
@@ -3108,21 +3109,32 @@
                                   "type": "line-chart"
                                 },
                                 {
-                                  "type": "chart-legend",
                                   "items": [
                                     {
-                                      "label": "Current",
-                                      "color": "primary"
+                                      "color": "primary",
+                                      "label": "Current"
                                     },
                                     {
                                       "label": "Previous",
                                       "color": "muted"
                                     }
-                                  ]
+                                  ],
+                                  "type": "chart-legend"
                                 },
                                 {
-                                  "type": "graph-view",
+                                  "edges": [
+                                    {
+                                      "target": "b",
+                                      "source": "a"
+                                    },
+                                    {
+                                      "source": "b",
+                                      "target": "c"
+                                    }
+                                  ],
                                   "width": 400.0,
+                                  "height": 200.0,
+                                  "type": "graph-view",
                                   "nodes": [
                                     {
                                       "id": "a",
@@ -3133,46 +3145,34 @@
                                       "label": "Process"
                                     },
                                     {
-                                      "label": "End",
-                                      "id": "c"
-                                    }
-                                  ],
-                                  "height": 200.0,
-                                  "edges": [
-                                    {
-                                      "target": "b",
-                                      "source": "a"
-                                    },
-                                    {
-                                      "source": "b",
-                                      "target": "c"
+                                      "id": "c",
+                                      "label": "End"
                                     }
                                   ]
                                 }
                               ],
                               "direction": "vertical",
-                              "type": "stack"
+                              "gap": "lg"
                             }
-                          ]
+                          ],
+                          "type": "scaled-diagram"
                         }
                       ],
-                      "appName": "CI/CD Pipeline",
-                      "type": "dashboard-layout",
                       "navItems": [
                         {
+                          "icon": "hammer",
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "href": "/builds"
                         },
                         {
                           "label": "Stages",
-                          "icon": "layers",
-                          "href": "/stages"
+                          "href": "/stages",
+                          "icon": "layers"
                         },
                         {
+                          "label": "Deploy",
                           "icon": "rocket",
-                          "href": "/deploy",
-                          "label": "Deploy"
+                          "href": "/deploy"
                         }
                       ]
                     }
@@ -3189,8 +3189,8 @@
                     "Stage",
                     {
                       "emit": {
-                        "failure": "StageLoadFailed",
-                        "success": "StageLoaded"
+                        "success": "StageLoaded",
+                        "failure": "StageLoadFailed"
                       }
                     }
                   ],
@@ -3198,32 +3198,35 @@
                     "render-ui",
                     "main",
                     {
+                      "type": "dashboard-layout",
                       "appName": "CI/CD Pipeline",
                       "children": [
                         {
                           "type": "scaled-diagram",
                           "children": [
                             {
+                              "gap": "lg",
+                              "type": "stack",
+                              "direction": "vertical",
                               "children": [
                                 {
+                                  "type": "breadcrumb",
                                   "items": [
                                     {
-                                      "label": "Home",
-                                      "href": "/"
+                                      "href": "/",
+                                      "label": "Home"
                                     },
                                     {
                                       "label": "Stages"
                                     }
-                                  ],
-                                  "type": "breadcrumb"
+                                  ]
                                 },
                                 {
+                                  "type": "stack",
                                   "justify": "between",
-                                  "direction": "horizontal",
                                   "gap": "md",
                                   "children": [
                                     {
-                                      "direction": "horizontal",
                                       "children": [
                                         {
                                           "name": "layers",
@@ -3231,28 +3234,30 @@
                                         },
                                         {
                                           "type": "typography",
-                                          "content": "Stages",
-                                          "variant": "h2"
+                                          "variant": "h2",
+                                          "content": "Stages"
                                         }
                                       ],
-                                      "gap": "md",
-                                      "type": "stack"
+                                      "direction": "horizontal",
+                                      "type": "stack",
+                                      "gap": "md"
                                     },
                                     {
                                       "label": "Refresh",
-                                      "icon": "refresh-cw",
                                       "variant": "secondary",
+                                      "action": "REFRESH",
                                       "type": "button",
-                                      "action": "REFRESH"
+                                      "icon": "refresh-cw"
                                     }
                                   ],
-                                  "type": "stack"
+                                  "direction": "horizontal"
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
                                   "type": "box",
+                                  "padding": "md",
                                   "children": [
                                     {
                                       "children": [
@@ -3260,85 +3265,85 @@
                                           "type": "card",
                                           "children": [
                                             {
+                                              "gap": "sm",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
                                                   "content": "Name",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "variant": "caption"
                                                 },
                                                 {
-                                                  "variant": "h3",
                                                   "type": "typography",
-                                                  "content": "@entity.name"
+                                                  "content": "@entity.name",
+                                                  "variant": "h3"
                                                 }
                                               ],
                                               "direction": "vertical",
-                                              "gap": "sm",
                                               "type": "stack"
                                             }
                                           ]
                                         },
                                         {
+                                          "type": "card",
                                           "children": [
                                             {
-                                              "direction": "vertical",
-                                              "gap": "sm",
+                                              "type": "stack",
                                               "children": [
                                                 {
-                                                  "variant": "caption",
+                                                  "content": "Status",
                                                   "type": "typography",
-                                                  "content": "Status"
+                                                  "variant": "caption"
                                                 },
                                                 {
                                                   "content": "@entity.status",
-                                                  "type": "typography",
-                                                  "variant": "h3"
+                                                  "variant": "h3",
+                                                  "type": "typography"
                                                 }
                                               ],
-                                              "type": "stack"
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
-                                          ],
-                                          "type": "card"
+                                          ]
                                         },
                                         {
-                                          "type": "card",
                                           "children": [
                                             {
-                                              "type": "stack",
-                                              "gap": "sm",
-                                              "direction": "vertical",
                                               "children": [
                                                 {
-                                                  "content": "Duration",
+                                                  "variant": "caption",
                                                   "type": "typography",
-                                                  "variant": "caption"
+                                                  "content": "Duration"
                                                 },
                                                 {
-                                                  "variant": "h3",
                                                   "content": "@entity.duration",
-                                                  "type": "typography"
+                                                  "type": "typography",
+                                                  "variant": "h3"
                                                 }
-                                              ]
+                                              ],
+                                              "type": "stack",
+                                              "gap": "sm",
+                                              "direction": "vertical"
                                             }
-                                          ]
+                                          ],
+                                          "type": "card"
                                         },
                                         {
                                           "children": [
                                             {
-                                              "gap": "sm",
-                                              "type": "stack",
                                               "children": [
                                                 {
+                                                  "type": "typography",
                                                   "variant": "caption",
-                                                  "content": "Output",
-                                                  "type": "typography"
+                                                  "content": "Output"
                                                 },
                                                 {
-                                                  "type": "typography",
                                                   "variant": "h3",
-                                                  "content": "@entity.output"
+                                                  "content": "@entity.output",
+                                                  "type": "typography"
                                                 }
                                               ],
+                                              "gap": "sm",
+                                              "type": "stack",
                                               "direction": "vertical"
                                             }
                                           ],
@@ -3348,38 +3353,37 @@
                                       "type": "simple-grid",
                                       "cols": 3.0
                                     }
-                                  ],
-                                  "padding": "md"
+                                  ]
                                 },
                                 {
                                   "type": "divider"
                                 },
                                 {
-                                  "cols": 2.0,
                                   "children": [
                                     {
+                                      "type": "card",
                                       "children": [
                                         {
-                                          "variant": "caption",
                                           "type": "typography",
-                                          "content": "Chart View"
+                                          "content": "Chart View",
+                                          "variant": "caption"
                                         }
-                                      ],
-                                      "type": "card"
+                                      ]
                                     },
                                     {
                                       "children": [
                                         {
                                           "content": "Graph View",
-                                          "type": "typography",
-                                          "variant": "caption"
+                                          "variant": "caption",
+                                          "type": "typography"
                                         }
                                       ],
                                       "type": "card"
                                     }
                                   ],
-                                  "gap": "md",
-                                  "type": "grid"
+                                  "type": "grid",
+                                  "cols": 2.0,
+                                  "gap": "md"
                                 },
                                 {
                                   "type": "line-chart",
@@ -3389,16 +3393,16 @@
                                       "date": "Jan"
                                     },
                                     {
-                                      "date": "Feb",
-                                      "value": 19.0
+                                      "value": 19.0,
+                                      "date": "Feb"
                                     },
                                     {
-                                      "date": "Mar",
-                                      "value": 15.0
+                                      "value": 15.0,
+                                      "date": "Mar"
                                     },
                                     {
-                                      "date": "Apr",
-                                      "value": 25.0
+                                      "value": 25.0,
+                                      "date": "Apr"
                                     },
                                     {
                                       "date": "May",
@@ -3417,23 +3421,14 @@
                                       "color": "primary"
                                     },
                                     {
-                                      "label": "Previous",
-                                      "color": "muted"
+                                      "color": "muted",
+                                      "label": "Previous"
                                     }
                                   ],
                                   "type": "chart-legend"
                                 },
                                 {
-                                  "edges": [
-                                    {
-                                      "source": "a",
-                                      "target": "b"
-                                    },
-                                    {
-                                      "source": "b",
-                                      "target": "c"
-                                    }
-                                  ],
+                                  "type": "graph-view",
                                   "nodes": [
                                     {
                                       "label": "Start",
@@ -3448,29 +3443,34 @@
                                       "label": "End"
                                     }
                                   ],
+                                  "edges": [
+                                    {
+                                      "target": "b",
+                                      "source": "a"
+                                    },
+                                    {
+                                      "target": "c",
+                                      "source": "b"
+                                    }
+                                  ],
                                   "width": 400.0,
-                                  "height": 200.0,
-                                  "type": "graph-view"
+                                  "height": 200.0
                                 }
-                              ],
-                              "direction": "vertical",
-                              "gap": "lg",
-                              "type": "stack"
+                              ]
                             }
                           ]
                         }
                       ],
-                      "type": "dashboard-layout",
                       "navItems": [
                         {
                           "href": "/builds",
-                          "label": "Builds",
-                          "icon": "hammer"
+                          "icon": "hammer",
+                          "label": "Builds"
                         },
                         {
+                          "icon": "layers",
                           "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
+                          "href": "/stages"
                         },
                         {
                           "label": "Deploy",
@@ -3709,11 +3709,30 @@
                     "render-ui",
                     "main",
                     {
+                      "appName": "CI/CD Pipeline",
+                      "navItems": [
+                        {
+                          "label": "Builds",
+                          "href": "/builds",
+                          "icon": "hammer"
+                        },
+                        {
+                          "label": "Stages",
+                          "href": "/stages",
+                          "icon": "layers"
+                        },
+                        {
+                          "href": "/deploy",
+                          "icon": "rocket",
+                          "label": "Deploy"
+                        }
+                      ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
-                          "direction": "vertical",
                           "gap": "lg",
                           "align": "center",
+                          "type": "stack",
                           "children": [
                             {
                               "children": [
@@ -3722,53 +3741,34 @@
                                   "name": "upload-cloud"
                                 },
                                 {
-                                  "content": "Deployment",
                                   "variant": "h2",
-                                  "type": "typography"
+                                  "type": "typography",
+                                  "content": "Deployment"
                                 }
                               ],
+                              "align": "center",
                               "direction": "horizontal",
-                              "type": "stack",
                               "gap": "md",
-                              "align": "center"
+                              "type": "stack"
                             },
                             {
                               "type": "divider"
                             },
                             {
+                              "color": "muted",
                               "variant": "body",
                               "content": "Ready to start deployment operation.",
-                              "type": "typography",
-                              "color": "muted"
+                              "type": "typography"
                             },
                             {
-                              "variant": "primary",
+                              "type": "button",
                               "label": "Start",
+                              "icon": "play",
                               "action": "START",
-                              "type": "button",
-                              "icon": "play"
+                              "variant": "primary"
                             }
                           ],
-                          "type": "stack"
-                        }
-                      ],
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "label": "Builds",
-                          "icon": "hammer",
-                          "href": "/builds"
-                        },
-                        {
-                          "icon": "layers",
-                          "label": "Stages",
-                          "href": "/stages"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
+                          "direction": "vertical"
                         }
                       ]
                     }
@@ -3784,44 +3784,44 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "dashboard-layout",
-                      "navItems": [
-                        {
-                          "href": "/builds",
-                          "icon": "hammer",
-                          "label": "Builds"
-                        },
-                        {
-                          "icon": "layers",
-                          "href": "/stages",
-                          "label": "Stages"
-                        },
-                        {
-                          "label": "Deploy",
-                          "icon": "rocket",
-                          "href": "/deploy"
-                        }
-                      ],
                       "children": [
                         {
-                          "type": "stack",
                           "children": [
                             {
-                              "type": "loading-state",
                               "title": "Deploying...",
-                              "message": "Processing deployment..."
+                              "message": "Processing deployment...",
+                              "type": "loading-state"
                             },
                             {
                               "type": "skeleton",
                               "variant": "text"
                             }
                           ],
-                          "gap": "lg",
                           "align": "center",
-                          "direction": "vertical"
+                          "type": "stack",
+                          "direction": "vertical",
+                          "gap": "lg"
                         }
                       ],
-                      "appName": "CI/CD Pipeline"
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout",
+                      "navItems": [
+                        {
+                          "icon": "hammer",
+                          "label": "Builds",
+                          "href": "/builds"
+                        },
+                        {
+                          "icon": "layers",
+                          "label": "Stages",
+                          "href": "/stages"
+                        },
+                        {
+                          "label": "Deploy",
+                          "href": "/deploy",
+                          "icon": "rocket"
+                        }
+                      ]
                     }
                   ]
                 ]
@@ -3847,59 +3847,59 @@
                     "render-ui",
                     "main",
                     {
+                      "appName": "CI/CD Pipeline",
+                      "type": "dashboard-layout",
                       "children": [
                         {
+                          "align": "center",
+                          "gap": "lg",
+                          "type": "stack",
                           "direction": "vertical",
                           "children": [
                             {
-                              "type": "icon",
-                              "name": "check-circle"
+                              "name": "check-circle",
+                              "type": "icon"
                             },
                             {
-                              "type": "alert",
                               "message": "Deployment successful.",
+                              "type": "alert",
                               "variant": "success"
                             },
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
                               "gap": "sm",
+                              "type": "stack",
                               "justify": "center",
                               "children": [
                                 {
                                   "icon": "rotate-ccw",
+                                  "label": "Reset",
                                   "variant": "ghost",
                                   "action": "RESET",
-                                  "label": "Reset",
                                   "type": "button"
                                 }
-                              ]
+                              ],
+                              "direction": "horizontal"
                             }
-                          ],
-                          "align": "center",
-                          "gap": "lg",
-                          "type": "stack"
+                          ]
                         }
                       ],
-                      "type": "dashboard-layout",
                       "navItems": [
                         {
                           "label": "Builds",
-                          "href": "/builds",
-                          "icon": "hammer"
+                          "icon": "hammer",
+                          "href": "/builds"
                         },
                         {
-                          "icon": "layers",
                           "label": "Stages",
-                          "href": "/stages"
+                          "href": "/stages",
+                          "icon": "layers"
                         },
                         {
+                          "label": "Deploy",
                           "href": "/deploy",
-                          "icon": "rocket",
-                          "label": "Deploy"
+                          "icon": "rocket"
                         }
-                      ],
-                      "appName": "CI/CD Pipeline"
+                      ]
                     }
                   ]
                 ]
@@ -3913,63 +3913,63 @@
                     "render-ui",
                     "main",
                     {
+                      "appName": "CI/CD Pipeline",
+                      "navItems": [
+                        {
+                          "icon": "hammer",
+                          "label": "Builds",
+                          "href": "/builds"
+                        },
+                        {
+                          "label": "Stages",
+                          "icon": "layers",
+                          "href": "/stages"
+                        },
+                        {
+                          "icon": "rocket",
+                          "label": "Deploy",
+                          "href": "/deploy"
+                        }
+                      ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
-                          "gap": "lg",
+                          "direction": "vertical",
                           "type": "stack",
+                          "gap": "lg",
                           "align": "center",
                           "children": [
                             {
-                              "type": "error-state",
                               "onRetry": "RETRY",
+                              "type": "error-state",
                               "title": "Operation Failed",
                               "message": "Deployment failed."
                             },
                             {
-                              "justify": "center",
                               "children": [
                                 {
-                                  "icon": "refresh-cw",
-                                  "label": "Retry",
+                                  "variant": "primary",
                                   "action": "RETRY",
                                   "type": "button",
-                                  "variant": "primary"
+                                  "label": "Retry",
+                                  "icon": "refresh-cw"
                                 },
                                 {
-                                  "action": "RESET",
+                                  "icon": "rotate-ccw",
                                   "type": "button",
                                   "label": "Reset",
-                                  "variant": "ghost",
-                                  "icon": "rotate-ccw"
+                                  "action": "RESET",
+                                  "variant": "ghost"
                                 }
                               ],
-                              "gap": "sm",
+                              "justify": "center",
                               "type": "stack",
+                              "gap": "sm",
                               "direction": "horizontal"
                             }
-                          ],
-                          "direction": "vertical"
-                        }
-                      ],
-                      "appName": "CI/CD Pipeline",
-                      "navItems": [
-                        {
-                          "href": "/builds",
-                          "icon": "hammer",
-                          "label": "Builds"
-                        },
-                        {
-                          "icon": "layers",
-                          "label": "Stages",
-                          "href": "/stages"
-                        },
-                        {
-                          "label": "Deploy",
-                          "href": "/deploy",
-                          "icon": "rocket"
+                          ]
                         }
-                      ],
-                      "type": "dashboard-layout"
+                      ]
                     }
                   ]
                 ]
@@ -3985,13 +3985,15 @@
                     {
                       "children": [
                         {
+                          "gap": "lg",
+                          "type": "stack",
+                          "direction": "vertical",
                           "children": [
                             {
-                              "direction": "horizontal",
                               "children": [
                                 {
-                                  "type": "icon",
-                                  "name": "upload-cloud"
+                                  "name": "upload-cloud",
+                                  "type": "icon"
                                 },
                                 {
                                   "content": "Deployment",
@@ -3999,6 +4001,7 @@
                                   "variant": "h2"
                                 }
                               ],
+                              "direction": "horizontal",
                               "gap": "md",
                               "align": "center",
                               "type": "stack"
@@ -4008,24 +4011,22 @@
                             },
                             {
                               "type": "typography",
+                              "variant": "body",
                               "color": "muted",
-                              "content": "Ready to start deployment operation.",
-                              "variant": "body"
+                              "content": "Ready to start deployment operation."
                             },
                             {
-                              "icon": "play",
                               "variant": "primary",
                               "type": "button",
-                              "action": "START",
-                              "label": "Start"
+                              "icon": "play",
+                              "label": "Start",
+                              "action": "START"
                             }
                           ],
-                          "align": "center",
-                          "type": "stack",
-                          "gap": "lg",
-                          "direction": "vertical"
+                          "align": "center"
                         }
                       ],
+                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
                           "label": "Builds",
@@ -4033,18 +4034,17 @@
                           "href": "/builds"
                         },
                         {
-                          "label": "Stages",
                           "href": "/stages",
+                          "label": "Stages",
                           "icon": "layers"
                         },
                         {
-                          "href": "/deploy",
+                          "label": "Deploy",
                           "icon": "rocket",
-                          "label": "Deploy"
+                          "href": "/deploy"
                         }
                       ],
-                      "type": "dashboard-layout",
-                      "appName": "CI/CD Pipeline"
+                      "type": "dashboard-layout"
                     }
                   ]
                 ]
@@ -4058,55 +4058,55 @@
                     "render-ui",
                     "main",
                     {
-                      "appName": "CI/CD Pipeline",
                       "navItems": [
                         {
+                          "label": "Builds",
                           "href": "/builds",
-                          "icon": "hammer",
-                          "label": "Builds"
+                          "icon": "hammer"
                         },
                         {
                           "label": "Stages",
-                          "href": "/stages",
-                          "icon": "layers"
+                          "icon": "layers",
+                          "href": "/stages"
                         },
                         {
-                          "icon": "rocket",
+                          "href": "/deploy",
                           "label": "Deploy",
-                          "href": "/deploy"
+                          "icon": "rocket"
                         }
                       ],
+                      "type": "dashboard-layout",
                       "children": [
                         {
                           "direction": "vertical",
-                          "type": "stack",
-                          "align": "center",
                           "gap": "lg",
+                          "align": "center",
+                          "type": "stack",
                           "children": [
                             {
-                              "gap": "md",
                               "direction": "horizontal",
-                              "align": "center",
-                              "type": "stack",
                               "children": [
                                 {
                                   "name": "upload-cloud",
                                   "type": "icon"
                                 },
                                 {
-                                  "variant": "h2",
                                   "type": "typography",
-                                  "content": "Deployment"
+                                  "content": "Deployment",
+                                  "variant": "h2"
                                 }
-                              ]
+                              ],
+                              "align": "center",
+                              "gap": "md",
+                              "type": "stack"
                             },
                             {
                               "type": "divider"
                             },
                             {
-                              "variant": "body",
                               "content": "Ready to start deployment operation.",
                               "type": "typography",
+                              "variant": "body",
                               "color": "muted"
                             },
                             {
@@ -4119,7 +4119,7 @@
                           ]
                         }
                       ],
-                      "type": "dashboard-layout"
+                      "appName": "CI/CD Pipeline"
                     }
                   ]
                 ]
@@ -4133,43 +4133,43 @@
                     "render-ui",
                     "main",
                     {
-                      "children": [
-                        {
-                          "align": "center",
-                          "gap": "lg",
-                          "direction": "vertical",
-                          "type": "stack",
-                          "children": [
-                            {
-                              "type": "loading-state",
-                              "message": "Processing deployment...",
-                              "title": "Deploying..."
-                            },
-                            {
-                              "variant": "text",
-                              "type": "skeleton"
-                            }
-                          ]
-                        }
-                      ],
-                      "appName": "CI/CD Pipeline",
                       "type": "dashboard-layout",
                       "navItems": [
                         {
-                          "icon": "hammer",
                           "label": "Builds",
+                          "icon": "hammer",
                           "href": "/builds"
                         },
                         {
-                          "label": "Stages",
                           "icon": "layers",
-                          "href": "/stages"
+                          "href": "/stages",
+                          "label": "Stages"
                         },
                         {
                           "icon": "rocket",
                           "label": "Deploy",
                           "href": "/deploy"
                         }
+                      ],
+                      "appName": "CI/CD Pipeline",
+                      "children": [
+                        {
+                          "type": "stack",
+                          "gap": "lg",
+                          "align": "center",
+                          "direction": "vertical",
+                          "children": [
+                            {
+                              "message": "Processing deployment...",
+                              "title": "Deploying...",
+                              "type": "loading-state"
+                            },
+                            {
+                              "variant": "text",
+                              "type": "skeleton"
+                            }
+                          ]
+                        }
                       ]
                     }
                   ]
@@ -4193,4 +4193,4 @@
       ]
     }
   ]
-}
+}