From 25d2a3014a8f64dfe5b2f4cab0168aebe403c778 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:43:15 +0200
Subject: [PATCH] refactor(ui): DiffView CSS module + drop duplicate snapshot
 type

---
 .../CheckpointDetailDrawer.module.css         | 27 +++++++++++++++++++
 .../CheckpointDetailDrawer/ConfigPanel.tsx    | 26 ++++--------------
 .../CheckpointDetailDrawer/snapshotToForm.ts  |  8 ++----
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/CheckpointDetailDrawer.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/CheckpointDetailDrawer.module.css
index 5a0d074c..3a715933 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/CheckpointDetailDrawer.module.css
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/CheckpointDetailDrawer.module.css
@@ -63,3 +63,30 @@
 .logTimestamp {
   color: var(--text-muted);
 }
+
+/* ConfigPanel.tsx / DiffView */
+.diffList {
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.diffEntry {
+  margin-bottom: 8px;
+}
+
+.diffPath {
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+
+.diffRemoved {
+  background: var(--red-bg, rgba(239, 68, 68, 0.15));
+  border-left: 2px solid var(--red, #ef4444);
+  padding: 2px 6px;
+}
+
+.diffAdded {
+  background: var(--green-bg, rgba(34, 197, 94, 0.15));
+  border-left: 2px solid var(--green, #22c55e);
+  padding: 2px 6px;
+}
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/ConfigPanel.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/ConfigPanel.tsx
index 0cb81360..fd00828c 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/ConfigPanel.tsx
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/ConfigPanel.tsx
@@ -115,28 +115,12 @@ function DiffView({ diffs }: { diffs: FieldDiff[] }) {
     return <div className={styles.emptyState}>No differences in this section.</div>;
   }
   return (
-    <div style={{ fontFamily: 'monospace', fontSize: 12 }}>
+    <div className={styles.diffList}>
       {diffs.map((d) => (
-        <div key={d.path} style={{ marginBottom: 8 }}>
-          <div style={{ color: 'var(--text-muted)' }}>{d.path}</div>
-          <div
-            style={{
-              background: 'var(--red-bg, rgba(239,68,68,0.15))',
-              borderLeft: '2px solid var(--red, #ef4444)',
-              padding: '2px 6px',
-            }}
-          >
-            - {JSON.stringify(d.oldValue)}
-          </div>
-          <div
-            style={{
-              background: 'var(--green-bg, rgba(34,197,94,0.15))',
-              borderLeft: '2px solid var(--green, #22c55e)',
-              padding: '2px 6px',
-            }}
-          >
-            + {JSON.stringify(d.newValue)}
-          </div>
+        <div key={d.path} className={styles.diffEntry}>
+          <div className={styles.diffPath}>{d.path}</div>
+          <div className={styles.diffRemoved}>- {JSON.stringify(d.oldValue)}</div>
+          <div className={styles.diffAdded}>+ {JSON.stringify(d.newValue)}</div>
         </div>
       ))}
     </div>
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/snapshotToForm.ts b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/snapshotToForm.ts
index bacc2506..4c3d64b6 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/snapshotToForm.ts
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/snapshotToForm.ts
@@ -1,11 +1,7 @@
+import type { Deployment } from '../../../../api/queries/admin/apps';
 import type { DeploymentPageFormState } from '../hooks/useDeploymentPageState';
 
-interface DeployedConfigSnapshot {
-  jarVersionId: string;
-  agentConfig: Record<string, unknown> | null;
-  containerConfig: Record<string, unknown>;
-  sensitiveKeys: string[] | null;
-}
+type DeployedConfigSnapshot = NonNullable<Deployment['deployedConfigSnapshot']>;
 
 /**
  * Maps a deployment snapshot to the page's form-state shape.