From 9c54313ff11cb0a2c9169a810e9b1bca1d520d8a Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 23 Apr 2026 00:49:29 +0200
Subject: [PATCH] ui(deploy): surface deployment failure reason in StatusCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DeploymentExecutor already persists errorMessage on FAILED transitions
but the UI never rendered it — users saw "FAILED" with no explanation.
Add a bordered error block above the action row when a deployment is
FAILED, preserving whitespace and wrapping long Docker error bodies
(e.g. 409 conflict JSON).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../AppDeploymentPage.module.css              | 20 +++++++++++++++++++
 .../DeploymentTab/StatusCard.tsx              |  7 +++++++
 2 files changed, 27 insertions(+)

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
index 4b050e0e..425b4db7 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
@@ -252,6 +252,26 @@
 .statusCardGrid { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 13px; }
 .statusCardActions { display: flex; gap: 8px; }
 
+.statusCardError {
+  padding: 10px 12px;
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.statusCardErrorLabel {
+  font-family: var(--font-sans);
+  color: var(--error);
+  font-weight: 600;
+  display: block;
+  margin-bottom: 4px;
+}
+
 /* DeploymentTab */
 .deploymentTab {
   display: flex;
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/StatusCard.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/StatusCard.tsx
index 0c7a2208..617c14e2 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/StatusCard.tsx
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/StatusCard.tsx
@@ -50,6 +50,13 @@ export function StatusCard({ deployment, version, externalUrl, onStop, onStart }
         <span>Deployed</span><span>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : '—'}</span>
       </div>
 
+      {deployment.status === 'FAILED' && deployment.errorMessage && (
+        <div className={styles.statusCardError}>
+          <span className={styles.statusCardErrorLabel}>Failure reason</span>
+          {deployment.errorMessage}
+        </div>
+      )}
+
       <div className={styles.statusCardActions}>
         {(deployment.status === 'RUNNING' || deployment.status === 'STARTING' || deployment.status === 'DEGRADED')
           && <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>}