From b7c0a225f5a1c032875a5ef096df3fe0442e6cae Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:59:11 +0200
Subject: [PATCH] ui(deploy): LiveBanner component for live-apply tabs

Adds a warning banner that communicates live-apply semantics (changes
bypass the Save/Redeploy cycle). Uses --warning-bg / --warning-border
DS tokens. CSS class .liveBanner added to AppDeploymentPage.module.css.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../AppDeploymentPage/AppDeploymentPage.module.css | 13 +++++++++++++
 .../AppDeploymentPage/ConfigTabs/LiveBanner.tsx    | 14 ++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
index b75e13c3..b6e70075 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
@@ -206,6 +206,19 @@
   cursor: default;
 }
 
+.liveBanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
 /* Env vars list */
 .envVarsList {
   display: flex;
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx
new file mode 100644
index 00000000..f8972a30
--- /dev/null
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx
@@ -0,0 +1,14 @@
+import { Info } from 'lucide-react';
+import styles from '../AppDeploymentPage.module.css';
+
+export function LiveBanner() {
+  return (
+    <div className={styles.liveBanner}>
+      <Info size={14} />
+      <span>
+        <strong>Live controls.</strong> Changes apply immediately to running agents and do
+        not participate in the Save/Redeploy cycle.
+      </span>
+    </div>
+  );
+}