Deployment name

src/app/deployments/page.tsx

@@ -70,9 +70,6 @@ export default function DeploymentsPage() {
 
       <div className="divide-y divide-border">
         {deployments.map((dep) => {
-          const appName =
-            appNameByContainer.get(dep.container) ?? "Unknown app";
-
           return (
             <Card key={`${dep.image}-${dep.container ?? "latest"}`}>
               <CardContent>
@@ -85,7 +82,12 @@ export default function DeploymentsPage() {
                           statusDot.stopped,
                       )}
                     />
-                    <CardTitle>{appName}</CardTitle>
+                    <CardTitle>
+                      {dep.name} @{" "}
+                      <span className="text-primary-foreground">
+                        {appNameByContainer.get(dep.container) ?? "Unknown app"}
+                      </span>
+                    </CardTitle>
                     <CardDescription className="flex gap-3">
                       {dep.ports.map(([to, from]) => (
                         <span key={`${from}-${to}`}>