Merge pull request #10 from orus-dev/ui-core-patches

UI and core patches

package-lock.json

@@ -11,6 +11,7 @@
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-progress": "^1.1.8",
@@ -1184,6 +1185,88 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1306,6 +1389,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
@@ -1374,6 +1472,91 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
@@ -1496,6 +1679,102 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -1813,6 +2092,93 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",

package.json

@@ -11,6 +11,7 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",

src/app/applications/page.tsx

@@ -1,23 +1,30 @@
 "use client";
 
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
-import { Card, CardContent } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Play, Square, MoreVertical, Plus, Rocket } from "lucide-react";
+import { MoreVertical, Plus, Rocket } from "lucide-react";
-import { Progress } from "@/components/ui/progress";
 import InstallApplicationDialog from "@/components/dialogs/InstallApplication";
 import { useEffect, useState } from "react";
-import { ImageApp } from "@/lib/types";
 import { getApplications, removeApp } from "@/core/application";
 import RemoveDialog from "@/components/dialogs/Remove";
+import { Application } from "@/lib/types";
 
 export default function ApplicationsPage() {
-  const [applications, setApplications] = useState<ImageApp[]>([]);
+  const [applications, setApplications] = useState<Application[]>([]);
 
   useEffect(() => {
     const fetch = async () => {
-      setApplications(await getApplications());
+      const apps = await getApplications();
+      setApplications(apps);
     };
 
     fetch();
@@ -40,115 +47,44 @@ export default function ApplicationsPage() {
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
         <div className="flex flex-wrap items-center gap-2">
           <Badge>{applications.length} apps</Badge>
-          <Badge>
-            {applications.filter((a) => a.status === "running").length} running
-          </Badge>
         </div>
-
         <InstallApplicationDialog>
           <Button size="sm" className="gap-2 w-full sm:w-auto">
-            <Plus className="w-4 h-4" />
+            <Plus className="w-4 h-4" /> Install Application
-            Install Application
           </Button>
         </InstallApplicationDialog>
       </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {applications.map((app) => (
+          <Card key={app.id}>
+            <CardHeader>
+              <CardTitle>{app.name}</CardTitle>
+              <CardDescription>{app.repo}</CardDescription>
+            </CardHeader>
 
-      <div className="space-y-3">
+            <CardContent className="flex flex-col gap-2">
-        {applications.map((app, i) => (
+              {/* Deployments */}
-          <Card key={i}>
+              <div className="flex justify-between items-center">
-            <CardContent className="p-4">
+                <span className="text-xs text-muted-foreground">
-              <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:items-center">
+                  Deployments
-                {/* Status & Name */}
-                <div className="flex items-center gap-3 md:col-span-3">
-                  {/* {app.status} */}
-                  <div className="min-w-0">
-                    <div className="font-mono text-sm font-medium">
-                      {app.app?.name || app.name}
-                    </div>
-                    <div className="text-xs text-muted-foreground font-mono truncate">
-                      {app.image}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Containers */}
-                <div className="flex justify-between md:block md:col-span-1">
-                  <span className="text-xs text-muted-foreground md:hidden">
-                    Containers
                 </span>
-                  <div className="font-mono text-sm">{app.replicas}</div>
+                <span className="font-mono text-sm">
-                </div>
+                  {app.deployments?.length ?? 0}
-
-                {/* CPU */}
-                <div className="md:col-span-2">
-                  <div className="text-xs text-muted-foreground mb-1">CPU</div>
-                  <div className="flex items-center gap-2">
-                    <Progress value={app.cpu} className="w-full" />
-                    <span className="text-xs font-mono w-8">
-                      {app.cpu.toFixed(1)}%
                 </span>
               </div>
-                </div>
-
-                {/* Memory */}
-                <div className="md:col-span-2">
-                  <div className="text-xs text-muted-foreground mb-1">
-                    Memory
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Progress value={app.memory} className="w-full" />
-                    <span className="text-xs font-mono w-8">
-                      {app.memory.toFixed(1)}%
-                    </span>
-                  </div>
-                </div>
-
-                {/* Network */}
-                <div className="flex justify-between md:block md:col-span-1">
-                  <span className="text-xs text-muted-foreground md:hidden">
-                    Network
-                  </span>
-                  <div className="font-mono text-xs">{app.network}</div>
-                </div>
-
-                {/* Ports */}
-                <div className="md:col-span-2">
-                  <div className="text-xs text-muted-foreground mb-1">
-                    Ports
-                  </div>
-                  <div className="flex gap-1 flex-wrap">
-                    {app.ports?.length > 0 ? (
-                      app.ports.map((port) => (
-                        <Badge key={port} className="text-[10px]">
-                          {port}
-                        </Badge>
-                      ))
-                    ) : (
-                      <span className="text-xs text-muted-foreground">—</span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Actions */}
-                <div className="flex items-center justify-end gap-1 md:col-span-1">
-                  {app.status === "running" ? (
-                    <Button variant="ghost" size="icon-sm">
-                      <Square className="w-3 h-3" />
-                    </Button>
-                  ) : (
-                    <Button variant="ghost" size="icon-sm">
-                      <Rocket className="w-3 h-3" />
-                    </Button>
-                  )}
-                  <RemoveDialog
-                    remove={() => app.app?.id && remove(app.app?.id)}
-                  />
-                  <Button variant="ghost" size="icon-sm">
-                    <MoreVertical className="w-3 h-3" />
-                  </Button>
-                </div>
-              </div>
             </CardContent>
+
+            <CardFooter className="justify-end">
+              <Button variant="ghost" size="icon-sm" aria-label="Deploy">
+                <Rocket className="w-3 h-3" />
+              </Button>
+
+              <RemoveDialog remove={() => remove(app.id)} />
+
+              <Button variant="ghost" size="icon-sm" aria-label="More options">
+                <MoreVertical className="w-3 h-3" />
+              </Button>
+            </CardFooter>
           </Card>
         ))}
       </div>

src/app/containers/page.tsx

@@ -1,270 +0,0 @@
-"use client";
-
-import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { MoreVertical, Play, Square, Container } from "lucide-react";
-import { useEffect, useState } from "react";
-import { getDocker, removeContainer } from "@/core/docker";
-import { getNodes } from "@/core/node";
-import { ContainerInfo } from "dockerode";
-import { formatBytes } from "@/lib/format";
-import {
-  getContainerStats,
-  startContainer,
-  stopContainer,
-} from "@/core/docker";
-import RemoveDialog from "@/components/dialogs/Remove";
-
-type ContainerSummary = {
-  id: string;
-  name: string;
-  image: string;
-  node: string;
-  status: "running" | "stopped";
-  uptime: string;
-  cpu: number;
-  memory: number;
-};
-
-async function summarizeContainer(
-  container: ContainerInfo,
-  nodeName: string
-): Promise<ContainerSummary> {
-  // 1. Shorten the long container ID
-  const shortId = container.Id;
-
-  // 2. Clean the name
-  const name = container.Names[0]?.replace(/^\//, "") ?? "unknown";
-
-  // 3. Normalize status
-  const status = container.State === "running" ? "running" : "stopped";
-
-  // 4. Compute uptime from Status string (if available)
-  const uptime = container.Status?.replace(/^Up\s*/, "") ?? "unknown";
-
-  const stats = await getContainerStats(container.Id);
-
-  return {
-    id: shortId,
-    name,
-    image: container.Image,
-    node: nodeName,
-    status,
-    uptime,
-    cpu: stats?.cpu || 0,
-    memory: stats?.memory || 0,
-  };
-}
-
-export default function ContainersPage() {
-  const [containers, setContainers] = useState<ContainerSummary[]>([]);
-
-  useEffect(() => {
-    const fetchNodes = async () => {
-      const nodes = await getNodes();
-      const dockerNodes = await getDocker(nodes);
-
-      setContainers(
-        await Promise.all(
-          nodes.flatMap((node, i) =>
-            dockerNodes[i].containers.map((c) =>
-              summarizeContainer(c, node.name)
-            )
-          )
-        )
-      );
-    };
-
-    fetchNodes();
-
-    const iid = setInterval(fetchNodes, 3000);
-    return () => clearInterval(iid);
-  }, []);
-
-  return (
-    <DashboardLayout
-      title="Containers"
-      subtitle="View and manage container instances"
-    >
-      {/* Stats */}
-      <div className="flex flex-wrap gap-2 mb-6">
-        <Badge>{containers.length} containers</Badge>
-        <Badge>
-          {containers.filter((c) => c.status === "running").length} running
-        </Badge>
-      </div>
-
-      <Card>
-        <CardContent className="p-0">
-          {/* ================= DESKTOP TABLE ================= */}
-          <div className="hidden xl:block">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-border">
-                  {[
-                    "Container",
-                    "Image",
-                    "Node",
-                    "Status",
-                    "Uptime",
-                    "CPU",
-                    "Memory",
-                    "Actions",
-                  ].map((h) => (
-                    <th
-                      key={h}
-                      className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
-                        h === "Actions" ? "text-right" : ""
-                      }`}
-                    >
-                      {h}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-
-              <tbody>
-                {containers.map((container) => (
-                  <tr key={container.id} className="data-table-row">
-                    <td className="py-3 px-4">
-                      <div className="flex items-center gap-2">
-                        <Container className="w-4 h-4 text-muted-foreground" />
-                        <div>
-                          <div className="font-mono text-sm">
-                            {container.name}
-                          </div>
-                          <div className="text-[10px] text-muted-foreground font-mono">
-                            {container.id.slice(0, 12)}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="py-3 px-4 font-mono text-xs text-muted-foreground">
-                      {container.image}
-                    </td>
-
-                    <td className="py-3 px-4">{container.node}</td>
-
-                    <td className="py-3 px-4">{container.status}</td>
-
-                    <td className="py-3 px-4 font-mono text-xs">
-                      {container.uptime}
-                    </td>
-
-                    <td className="py-3 px-4 font-mono text-xs">
-                      {container.cpu.toFixed(1)}%
-                    </td>
-
-                    <td className="py-3 px-4 font-mono text-xs">
-                      {container.memory.toFixed(1)}%
-                    </td>
-
-                    <td className="py-3 px-4">
-                      <div className="flex justify-end gap-1">
-                        {container.status === "running" ? (
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => stopContainer(container.id)}
-                          >
-                            <Square className="w-3 h-3" />
-                          </Button>
-                        ) : (
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => startContainer(container.id)}
-                          >
-                            <Play className="w-3 h-3" />
-                          </Button>
-                        )}
-                        <RemoveDialog
-                          remove={() => removeContainer(container.id)}
-                        />
-                        <Button variant="ghost" size="icon-sm">
-                          <MoreVertical className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          {/* ================= MOBILE CARDS ================= */}
-          <div className="xl:hidden divide-y divide-border">
-            {containers.map((container) => (
-              <div key={container.id} className="p-4 space-y-3">
-                {/* Header */}
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <Container className="w-4 h-4 text-muted-foreground" />
-                    <span className="font-mono text-sm">{container.name}</span>
-                  </div>
-                  {container.status}
-                </div>
-
-                <div className="text-[10px] font-mono text-muted-foreground">
-                  {container.id}
-                </div>
-
-                <div className="text-xs font-mono text-muted-foreground truncate">
-                  {container.image}
-                </div>
-
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div>
-                    <span className="text-muted-foreground">Node</span>
-                    <div>{container.node}</div>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Uptime</span>
-                    <div className="font-mono">{container.uptime}</div>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">CPU</span>
-                    <div className="font-mono">{container.cpu.toFixed(1)}%</div>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Memory</span>
-                    <div className="font-mono">
-                      {container.memory.toFixed(1)}%
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-1 pt-2">
-                  {container.status === "running" ? (
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      onClick={() => stopContainer(container.id)}
-                    >
-                      <Square className="w-3 h-3" />
-                    </Button>
-                  ) : (
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      onClick={() => startContainer(container.id)}
-                    >
-                      <Play className="w-3 h-3" />
-                    </Button>
-                  )}
-                  <RemoveDialog remove={() => removeContainer(container.id)} />
-                  <Button variant="ghost" size="icon-sm">
-                    <MoreVertical className="w-3 h-3" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </DashboardLayout>
-  );
-}

src/app/deployments/page.tsx

@@ -12,221 +12,93 @@ import {
   Plus,
   GitBranch,
 } from "lucide-react";
-
+import { useEffect, useState } from "react";
-const deployments = [
+import { Application, Deployment } from "@/lib/types";
-  {
+import { getDeployments } from "@/core/server/deployment";
-    id: "dep-001",
+import { getApplications } from "@/core/application";
-    app: "api-gateway",
+import { cn } from "@/lib/utils";
-    version: "v2.4.1",
-    previousVersion: "v2.4.0",
-    status: "running" as const,
-    deployedAt: "2024-01-15 14:32:18",
-    deployedBy: "ci/github-actions",
-    duration: "45s",
-    replicas: "3/3",
-    strategy: "rolling",
-  },
-  {
-    id: "dep-002",
-    app: "auth-service",
-    version: "v1.8.0",
-    previousVersion: "v1.7.9",
-    status: "running" as const,
-    deployedAt: "2024-01-15 14:18:42",
-    deployedBy: "[email protected]",
-    duration: "32s",
-    replicas: "2/2",
-    strategy: "rolling",
-  },
-  {
-    id: "dep-003",
-    app: "worker-queue",
-    version: "v3.1.2",
-    previousVersion: "v3.1.1",
-    status: "pending" as const,
-    deployedAt: "2024-01-15 13:58:05",
-    deployedBy: "ci/github-actions",
-    duration: "—",
-    replicas: "3/4",
-    strategy: "rolling",
-  },
-  {
-    id: "dep-004",
-    app: "metrics-collector",
-    version: "v1.2.0",
-    previousVersion: "v1.1.8",
-    status: "error" as const,
-    deployedAt: "2024-01-15 13:42:11",
-    deployedBy: "ci/github-actions",
-    duration: "—",
-    replicas: "0/2",
-    strategy: "rolling",
-  },
-  {
-    id: "dep-005",
-    app: "postgres-db",
-    version: "15-alpine",
-    previousVersion: "14-alpine",
-    status: "running" as const,
-    deployedAt: "2024-01-10 09:15:33",
-    deployedBy: "[email protected]",
-    duration: "2m 18s",
-    replicas: "1/1",
-    strategy: "recreate",
-  },
-  {
-    id: "dep-006",
-    app: "redis-cache",
-    version: "7-alpine",
-    previousVersion: "7-alpine",
-    status: "running" as const,
-    deployedAt: "2024-01-08 16:45:22",
-    deployedBy: "[email protected]",
-    duration: "18s",
-    replicas: "1/1",
-    strategy: "recreate",
-  },
-];
 
 export default function DeploymentsPage() {
+  const [applications, setApplications] = useState<Application[]>([]);
+  const [deployments, setDeployments] = useState<Deployment[]>([]);
+
+  useEffect(() => {
+    const fetch = async () => {
+      const apps = await getApplications();
+      setApplications(apps);
+      setDeployments((await getDeployments(apps)).filter((d) => d !== null));
+    };
+    fetch();
+  }, []);
+
   return (
     <DashboardLayout
       title="Deployments"
       subtitle="Deployment history and management"
     >
       {/* Header */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
+      <div className="flex flex-row gap-3 items-center justify-between mb-6">
         <Badge>{deployments.length} deployments</Badge>
 
-        <Button size="sm" className="gap-2 self-start sm:self-auto">
+        <Button size="sm" className="gap-2 self-auto">
           <Plus className="w-4 h-4" />
-          <span className="hidden sm:inline">New Deployment</span>
+          New Deployment
         </Button>
       </div>
 
-      <Card>
+      <div className="hidden md:visible space-y-3">
-        <CardContent className="p-0">
-          {/* Desktop table */}
-          <div className="hidden md:block">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-border">
-                  {[
-                    "Application",
-                    "Version",
-                    "Status",
-                    "Replicas",
-                    "Deployed",
-                    "Duration",
-                    "Deployed By",
-                    "Actions",
-                  ].map((h) => (
-                    <th
-                      key={h}
-                      className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
-                        h === "Actions" ? "text-right" : ""
-                      }`}
-                    >
-                      {h}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
         {deployments.map((dep) => (
-                  <tr key={dep.id} className="data-table-row">
+          <div
-                    <td className="py-3 px-4">
+            key={dep.image}
-                      <div className="flex items-center gap-2">
+            className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
-                        <Rocket className="w-4 h-4 text-muted-foreground" />
+          >
-                        <span className="font-mono text-sm">{dep.app}</span>
+            <div className="flex items-center gap-3">
+              <span
+                className={cn(
+                  "size-2 rounded-full",
+                  (dep.status === "running" && "bg-chart-2") ||
+                    (dep.status === "pending" && "bg-chart-1") ||
+                    "bg-slate-400 dark:bg-slate-600"
+                )}
+              />
+              <div>
+                <div className="font-mono text-sm">
+                  {
+                    applications.find((app) =>
+                      app.deployments.includes(dep.image)
+                    )?.name
+                  }
                 </div>
-                    </td>
+                <div className="text-xs text-muted-foreground">
-
+                  {/* {dep.version} */}
-                    <td className="py-3 px-4">
+                </div>
-                      <div className="flex items-center gap-2">
+              </div>
-                        <GitBranch className="w-3 h-3 text-muted-foreground" />
+            </div>
-                        <span className="font-mono text-sm">{dep.version}</span>
+            <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1 sm:mt-0">
-                        <span className="text-[10px] text-muted-foreground">
+              {/* <Clock className="w-3 h-3" /> {dep.time} */}
-                          ← {dep.previousVersion}
-                        </span>
             </div>
-                    </td>
-
-                    <td className="py-3 px-4">{dep.status}</td>
-
-                    <td className="py-3 px-4 font-mono text-sm">
-                      {dep.replicas}
-                    </td>
-
-                    <td className="py-3 px-4 font-mono text-xs text-muted-foreground">
-                      {dep.deployedAt}
-                    </td>
-
-                    <td className="py-3 px-4 font-mono text-xs">
-                      {dep.duration}
-                    </td>
-
-                    <td className="py-3 px-4 text-xs text-muted-foreground">
-                      {dep.deployedBy}
-                    </td>
-
-                    <td className="py-3 px-4">
-                      <div className="flex items-center justify-end gap-1">
-                        <Button variant="ghost" size="icon-sm">
-                          <Eye className="w-3 h-3" />
-                        </Button>
-                        <Button variant="ghost" size="icon-sm">
-                          <RotateCcw className="w-3 h-3" />
-                        </Button>
-                        <Button variant="ghost" size="icon-sm">
-                          <MoreVertical className="w-3 h-3" />
-                        </Button>
           </div>
-                    </td>
-                  </tr>
         ))}
-              </tbody>
-            </table>
       </div>
 
       {/* Mobile cards */}
       <div className="md:hidden divide-y divide-border">
         {deployments.map((dep) => (
-              <div key={dep.id} className="p-4 space-y-3">
+          <div key={dep.image} className="p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Rocket className="w-4 h-4 text-muted-foreground" />
-                    <span className="font-mono text-sm">{dep.app}</span>
+                <span className="font-mono text-sm">{dep.image}</span>
               </div>
               {dep.status}
             </div>
 
-                <div className="flex items-center gap-2 text-xs">
+            {/* <div className="grid grid-cols-2 gap-2 text-xs">
-                  <GitBranch className="w-3 h-3 text-muted-foreground" />
-                  <span className="font-mono">{dep.version}</span>
-                  <span className="text-muted-foreground">
-                    ← {dep.previousVersion}
-                  </span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div>
-                    <span className="text-muted-foreground">Replicas</span>
-                    <div className="font-mono">{dep.replicas}</div>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Duration</span>
-                    <div className="font-mono">{dep.duration}</div>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Deployed</span>
-                    <div className="font-mono">{dep.deployedAt}</div>
-                  </div>
                   <div>
                     <span className="text-muted-foreground">By</span>
                     <div className="truncate">{dep.deployedBy}</div>
                   </div>
-                </div>
+                </div> */}
 
             <div className="flex justify-end gap-1 pt-2">
               <Button variant="ghost" size="icon-sm">
@@ -242,8 +114,6 @@ export default function DeploymentsPage() {
           </div>
         ))}
       </div>
-        </CardContent>
-      </Card>
     </DashboardLayout>
   );
 }

src/app/environment/page.tsx

@@ -4,12 +4,18 @@ import { useEffect, useState } from "react";
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Trash2, Eye, EyeOff, Copy, Save, Lock, Loader2 } from "lucide-react";
 import { Env } from "@/lib/types";
 import { getEnv, setEnv } from "@/core/application";
 import { AddVariableDialog } from "@/components/dialogs/AddVariable";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDown } from "lucide-react";
 
 export default function EnvironmentPage() {
   const [selectedApp, setSelectedApp] = useState("");
@@ -53,49 +59,39 @@ export default function EnvironmentPage() {
       title="Environment"
       subtitle="Manage environment variables"
     >
-      <div className="flex flex-col gap-6 md:flex-row">
-        {/* Sidebar */}
-        <div className="md:w-56 md:shrink-0">
       <Card>
-            <CardHeader className="pb-2">
+        <CardHeader className="flex gap-3 flex-row items-center justify-between">
-              <CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
-                Applications
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 flex gap-2 md:block overflow-x-auto">
-              {Object.entries(envGroups).map(([id, variables]) => (
-                <button
-                  key={id}
-                  onClick={() => setSelectedApp(id)}
-                  className={`
-                    whitespace-nowrap md:w-full text-left px-3 py-2 text-sm font-mono transition-colors
-                    ${
-                      selectedApp === id
-                        ? "bg-secondary text-foreground"
-                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                    }
-                  `}
-                >
-                  {variables.name}
-                  <Badge className="ml-2 text-[10px]">
-                    {variables.variables.length}
-                  </Badge>
-                </button>
-              ))}
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Main */}
-        <div className="flex-1">
-          <Card>
-            <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div>
-                <CardTitle className="font-mono">{selectedApp}</CardTitle>
+            <CardTitle className="font-mono">
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  className="
+                    flex items-center gap-2
+                    font-mono text-lg
+                    hover:text-primary
+                    transition-colors
+                  "
+                >
+                  {currentGroup?.name ?? selectedApp}
+                  <ChevronDown className="w-4 h-4 opacity-60" />
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align="start" className="w-2xs">
+                  {Object.entries(envGroups).map(([id, env]) => (
+                    <DropdownMenuItem
+                      key={env.id}
+                      onClick={() => setSelectedApp(id)}
+                      className={selectedApp === id ? "font-medium" : ""}
+                    >
+                      {env.name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </CardTitle>
             <p className="text-xs text-muted-foreground mt-1">
               {currentGroup?.variables.length} variables •{" "}
-                  {currentGroup?.variables.filter((v) => v.secret).length}{" "}
+              {currentGroup?.variables.filter((v) => v.secret).length} secrets
-                  secrets
             </p>
           </div>
 
@@ -144,9 +140,7 @@ export default function EnvironmentPage() {
               >
                 {/* Key */}
                 <div className="md:col-span-4 flex items-center gap-2">
-                      {variable.secret && (
+                  {variable.secret && <Lock className="w-3 h-3 text-warning" />}
-                        <Lock className="w-3 h-3 text-warning" />
-                      )}
                   <span className="font-mono text-sm">{variable.key}</span>
                 </div>
 
@@ -219,8 +213,6 @@ export default function EnvironmentPage() {
           </div>
         </CardContent>
       </Card>
-        </div>
-      </div>
     </DashboardLayout>
   );
 }

src/app/overview/page.tsx

@@ -12,16 +12,16 @@ import {
   Activity,
   ArrowRight,
   Clock,
+  Rocket,
 } from "lucide-react";
 import { Progress } from "@/components/ui/progress";
 import Link from "next/link";
 import { getLiveNodes } from "@/core/node";
 import { useEffect, useState } from "react";
-import { Docker, Node, NodeLiveData } from "@/lib/types";
+import { Application, Docker, Node, NodeLiveData } from "@/lib/types";
-import axios from "axios";
-import Cookies from "js-cookie";
-import { getSession } from "@/core/auth/session";
 import { getDocker } from "@/core/docker";
+import { getApplications } from "@/core/application";
+import { cn } from "@/lib/utils";
 
 const recentDeployments = [
   {
@@ -54,53 +54,17 @@ const recentDeployments = [
   },
 ];
 
-const applications = [
-  {
-    name: "api-gateway",
-    containers: 3,
-    cpu: 45,
-    memory: 62,
-    status: "running" as const,
-  },
-  {
-    name: "auth-service",
-    containers: 2,
-    cpu: 28,
-    memory: 45,
-    status: "running" as const,
-  },
-  {
-    name: "postgres-db",
-    containers: 1,
-    cpu: 65,
-    memory: 78,
-    status: "running" as const,
-  },
-  {
-    name: "redis-cache",
-    containers: 1,
-    cpu: 12,
-    memory: 34,
-    status: "running" as const,
-  },
-  {
-    name: "worker-queue",
-    containers: 4,
-    cpu: 55,
-    memory: 48,
-    status: "pending" as const,
-  },
-].slice(-5);
-
 export default function OverviewPage() {
   const [nodes, setNodes] = useState<(NodeLiveData & Node)[]>([]);
   const [dockerNodes, setDockerNodes] = useState<Docker[]>([]);
+  const [apps, setApplications] = useState<Application[]>([]);
 
   useEffect(() => {
     const fetchNodes = async () => {
       const nodes = await getLiveNodes();
       setNodes(nodes);
       setDockerNodes(await getDocker(nodes));
+      setApplications(await getApplications());
     };
     fetchNodes();
     const interval = setInterval(fetchNodes, 3000);
@@ -114,10 +78,24 @@ export default function OverviewPage() {
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <StatCard
           title="Applications"
-          value="12"
+          value={apps.length}
-          subtitle="3 pending"
+          subtitle={`${
+            apps.filter((app) => app.deployments.length > 0).length
+          } Deployed`}
           icon={<Box className="w-4 h-4" />}
         />
+        <StatCard
+          title="Deployments"
+          value="0"
+          subtitle="0 running"
+          icon={<Rocket className="w-4 h-4" />}
+        />
+        <StatCard
+          title="Nodes"
+          value={nodes.filter((n) => n.liveData).length}
+          subtitle="online"
+          icon={<Server className="w-4 h-4" />}
+        />
         <StatCard
           title="Containers"
           value={dockerNodes.reduce(
@@ -128,18 +106,6 @@ export default function OverviewPage() {
           subtitle="running"
           icon={<Container className="w-4 h-4" />}
         />
-        <StatCard
-          title="Nodes"
-          value={nodes.filter((n) => n.liveData).length}
-          subtitle="online"
-          icon={<Server className="w-4 h-4" />}
-        />
-        <StatCard
-          title="Uptime"
-          value="99.9%"
-          trend={{ value: 0.2, isPositive: true }}
-          icon={<Activity className="w-4 h-4" />}
-        />
       </div>
 
       {/* Applications & Deployments */}
@@ -155,38 +121,45 @@ export default function OverviewPage() {
             </Link>
           </CardHeader>
           <CardContent className="overflow-x-auto">
-            <div className="space-y-0 min-w-125">
+            <div className="min-w-lg">
-              <div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
+              {/* Header */}
-                <div className="col-span-4">Name</div>
+              <div className="grid grid-cols-12 gap-4 text-xs font-medium text-muted-foreground uppercase tracking-wider py-2 border-b">
-                <div className="col-span-2">Containers</div>
+                <div className="col-span-5">Name</div>
-                <div className="col-span-2">CPU</div>
+                <div className="col-span-4">Deployments</div>
-                <div className="col-span-2">Memory</div>
+                <div className="col-span-3">Node</div>
-                <div className="col-span-2">Status</div>
               </div>
-              {applications.map((app) => (
+
+              {/* Rows */}
+              {apps.slice(-5).length === 0 ? (
+                <div className="py-6 text-sm text-muted-foreground text-center">
+                  No applications yet
+                </div>
+              ) : (
+                apps.slice(-5).map((app) => (
                   <div
                     key={app.name}
-                  className="grid grid-cols-12 gap-4 py-3 items-center data-table-row"
+                    className="
+            grid grid-cols-12 gap-4 py-3 items-center
+            text-sm
+            hover:bg-muted/50
+            transition-colors
+            rounded-md
+          "
                   >
-                  <div className="col-span-4 font-mono text-sm">{app.name}</div>
+                    <div className="col-span-5 font-mono truncate">
-                  <div className="col-span-2 text-sm text-muted-foreground">
+                      {app.name}
-                    {app.containers}
                     </div>
-                  <div className="col-span-2 flex items-center gap-2">
+
-                    <Progress value={app.cpu} className="w-full" />
+                    <div className="col-span-4 text-muted-foreground">
-                    <span className="text-xs text-muted-foreground font-mono w-8">
+                      {app.deployments.length}
-                      {app.cpu}%
-                    </span>
                     </div>
-                  <div className="col-span-2 flex items-center gap-2">
+
-                    <Progress value={app.memory} className="w-full" />
+                    <div className="col-span-3 truncate">
-                    <span className="text-xs text-muted-foreground font-mono w-8">
+                      {nodes.find((n) => n.node_id === app.nodeId)?.name ?? "—"}
-                      {app.memory}%
-                    </span>
                     </div>
-                  <div className="col-span-2">{app.status}</div>
                   </div>
-              ))}
+                ))
+              )}
             </div>
           </CardContent>
         </Card>
@@ -209,7 +182,14 @@ export default function OverviewPage() {
                   className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
                 >
                   <div className="flex items-center gap-3">
-                    {dep.status}
+                    <span
+                      className={cn(
+                        "size-2 rounded-full",
+                        (dep.status === "running" && "bg-chart-2") ||
+                          (dep.status === "pending" && "bg-chart-1") ||
+                          "bg-slate-400 dark:bg-slate-600"
+                      )}
+                    />
                     <div>
                       <div className="font-mono text-sm">{dep.app}</div>
                       <div className="text-xs text-muted-foreground">

src/components/dashboard/DashboardSidebar.tsx

@@ -8,8 +8,6 @@ import {
   FileText,
   Settings,
   Activity,
-  Container,
-  Command,
 } from "lucide-react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
@@ -25,7 +23,6 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
-  useSidebar,
 } from "@/components/ui/sidebar";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
@@ -34,9 +31,8 @@ import { version } from "../../../package.json";
 const navigation = [
   { name: "Overview", href: "/overview", icon: LayoutGrid },
   { name: "Applications", href: "/applications", icon: Box },
-  { name: "Containers", href: "/containers", icon: Container },
-  { name: "Nodes", href: "/nodes", icon: Server },
   { name: "Deployments", href: "/deployments", icon: Rocket },
+  { name: "Nodes", href: "/nodes", icon: Server },
   { name: "Logs", href: "/logs", icon: FileText },
   { name: "Environment", href: "/environment", icon: Settings },
   { name: "Monitoring", href: "/monitoring", icon: Activity },

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/core/application.ts

@@ -3,7 +3,7 @@
 import { verifySession } from "./auth/session";
 import { getNodes } from "./node";
 import axios from "axios";
-import { Env, EnvVariable, ImageApp } from "@/lib/types";
+import { Env, EnvVariable, Application } from "@/lib/types";
 
 export async function installApp(name: string, repo: string, nodeId: string) {
   if (await verifySession()) {
@@ -25,7 +25,7 @@ export async function installApp(name: string, repo: string, nodeId: string) {
   ).data.applications;
 }
 
-export async function getApplications(): Promise<ImageApp[]> {
+export async function getApplications(): Promise<Application[]> {
   const nodes = await getNodes();
 
   return (

src/core/docker.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import axios from "axios";
-import { Docker, Log, Node, SimpleStats } from "@/lib/types";
+import { Deployment, Docker, Log, Node, SimpleStats } from "@/lib/types";
 import { verifySession } from "./auth/session";
 import { getNodes } from "./node";
 

src/core/server/application.ts

@@ -1,80 +1,25 @@
 "use server";
 
-import Docker, { Container, ContainerStats } from "dockerode";
+import Docker from "dockerode";
 import { randomUUID } from "crypto";
 import fs from "fs";
 import path from "path";
 import { exec } from "child_process";
 import util from "util";
-import { Env, EnvVariable, ImageApp } from "@/lib/types";
+import { Application, Env, EnvVariable } from "@/lib/types";
-import { CPUusage } from "@/lib/server/calc";
 
 const docker = new Docker();
 const execAsync = util.promisify(exec);
 const DATA_DIR = path.join(process.cwd(), "data", "apps");
 
-export async function getApplications(): Promise<ImageApp[]> {
+export async function getApplications(): Promise<Application[]> {
-  const images = await docker.listImages();
+  return fs
-  const containers = await docker.listContainers({ all: true });
+    .readdirSync(DATA_DIR)
-
+    .map((appId) =>
-  const apps: ImageApp[] = [];
+      JSON.parse(
-
+        fs.readFileSync(path.join(DATA_DIR, appId, "app.json")).toString()
-  for (const image of images) {
+      )
-    const imageName = image.RepoTags?.[0];
-    if (!imageName) continue;
-
-    const relatedContainers = containers.filter((c) => c.Image === imageName);
-
-    let totalCpu = 0;
-    let totalMem = 0;
-    let running = 0;
-    const ports = new Set<string>();
-
-    for (const containerInfo of relatedContainers) {
-      const container = docker.getContainer(containerInfo.Id);
-
-      if (containerInfo.State === "running") running++;
-
-      containerInfo.Ports?.forEach((p) => {
-        if (p.PublicPort && p.PrivatePort) {
-          ports.add(`${p.PublicPort}:${p.PrivatePort}`);
-        }
-      });
-
-      if (containerInfo.State === "running") {
-        const stats = await container.stats({ stream: false });
-
-        totalMem += (stats.memory_stats.usage / stats.memory_stats.limit) * 100;
-        totalCpu += CPUusage(stats);
-      }
-    }
-
-    const name = imageName.split("/").pop()?.split(":")[0] ?? imageName;
-
-    var app;
-
-    try {
-      app = JSON.parse(
-        fs.readFileSync(path.join(DATA_DIR, name, "app.json")).toString()
     );
-    } catch {}
-
-    apps.push({
-      app,
-      name,
-      id: image.Id.slice(7, 15),
-      image: imageName,
-      containers: relatedContainers.length,
-      replicas: `${running}/${relatedContainers.length}`,
-      cpu: totalCpu,
-      memory: totalMem,
-      network: "—",
-      status: running > 0 ? ("running" as const) : ("stopped" as const),
-      ports: [...ports],
-    });
-  }
-
-  return apps;
 }
 
 export async function installApp(name: string, repo: string, nodeId: string) {
@@ -87,12 +32,13 @@ export async function installApp(name: string, repo: string, nodeId: string) {
   fs.mkdirSync(repoDir, { recursive: true });
 
   // Write app.json
-  const appConfig = {
+  const appConfig: Application = {
     id: appId,
     name,
     repo,
     nodeId,
     createdAt: new Date().toISOString(),
+    deployments: [],
   };
 
   fs.writeFileSync(
@@ -100,6 +46,7 @@ export async function installApp(name: string, repo: string, nodeId: string) {
     JSON.stringify(appConfig, null, 2)
   );
 
+  // Write env.json
   fs.writeFileSync(path.join(appDir, "env.json"), JSON.stringify([], null, 2));
 
   // Clone repository
@@ -115,23 +62,13 @@ export async function installApp(name: string, repo: string, nodeId: string) {
   try {
     fs.accessSync(dockerfilePath);
   } catch {
+    fs.rmSync(appDir, { recursive: true });
     throw new Error("Dockerfile not found in repository root");
   }
 
-  const imageTag = `dockship/${appId}:latest`;
-
-  try {
-    await execAsync(`docker build -t ${imageTag} .`, {
-      cwd: repoDir,
-    });
-  } catch {
-    throw new Error("Docker build failed");
-  }
-
   return {
     success: true,
     appId,
-    image: imageTag,
   };
 }
 
@@ -166,9 +103,26 @@ export async function setEnv(appId: string, variables: EnvVariable[]) {
 }
 
 export async function removeApp(appId: string) {
-  const imageTag = `dockship/${appId}:latest`;
-  const image = docker.getImage(imageTag);
-  await image.remove();
   const appPath = path.join(DATA_DIR, appId);
+
+  const appMeta: Application = JSON.parse(
+    fs.readFileSync(path.join(appPath, "app.json")).toString()
+  );
+
+  appMeta.deployments.forEach(async (imgId) => {
+    // Remove containers
+    (await docker.listContainers({ all: true }))
+      .filter((con) => con.ImageID === imgId)
+      .forEach((con) => {
+        const container = docker.getContainer(con.Id);
+        container.stop();
+        container.remove();
+      });
+
+    // Remove image
+    const image = docker.getImage(imgId);
+    image.remove();
+  });
+
   fs.rmSync(appPath, { recursive: true });
 }

src/core/server/deployment.ts

@@ -0,0 +1,53 @@
+"use server";
+
+import Docker from "dockerode";
+import { Application, Deployment } from "@/lib/types";
+import { CPUusage } from "@/lib/server/calc";
+
+const docker = new Docker();
+
+export async function getDeployments(
+  apps: Application[]
+): Promise<(null | Deployment)[]> {
+  const containers = await docker.listContainers({ all: true });
+
+  return await Promise.all(
+    apps
+      .map((app) => app.deployments)
+      .flat()
+      .map(async (imageId) => {
+        const containerInfo = containers.find(
+          (container) => container.ImageID === imageId
+        );
+
+        if (!containerInfo) return null;
+
+        const container = docker.getContainer(containerInfo.Id);
+
+        let cpu = 0;
+        let memory = 0;
+        let ports: Set<[number, number]> = new Set();
+
+        if (containerInfo.State === "running") {
+          const stats = await container.stats({ stream: false });
+          memory += (stats.memory_stats.usage / stats.memory_stats.limit) * 100;
+          cpu += CPUusage(stats);
+        }
+
+        containerInfo.Ports?.forEach((p) => {
+          if (p.PublicPort && p.PrivatePort) {
+            ports.add([p.PublicPort, p.PrivatePort]);
+          }
+        });
+
+        return {
+          image: containerInfo.ImageID,
+          container: containerInfo.Id,
+          cpu,
+          memory,
+          status: containerInfo.State === "running" ? "running" : "stopped",
+          ports: [...ports],
+        };
+      })
+  );
+}

src/lib/types.ts

@@ -54,20 +54,16 @@ export interface Application {
   repo: string;
   nodeId: string;
   createdAt: string;
+  deployments: string[];
 }
 
-export interface ImageApp {
+export interface Deployment {
-  app?: Application;
-  id: string;
-  name: string;
   image: string;
-  containers: number;
+  container: string;
-  replicas: string;
   cpu: number;
   memory: number;
-  network: string;
+  status: "running" | "stopped" | "pending";
-  status: "running" | "stopped";
+  ports: [number, number][];
-  ports: string[];
 }
 
 export interface SimpleStats {