ui(deploy): surface deployment failure reason in StatusCard

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>

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;

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>}