From 5b6543b167ea931ae7137eb7ec7682c17463d74b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 12 Apr 2026 16:43:05 +0200
Subject: [PATCH] fix: use ConfirmDialog for dismiss, move warning to top of
 page

Replace window.confirm with design system ConfirmDialog for the dismiss
action. Move the "No agents connected" section to the top of the Runtime
page using Alert component with warning variant.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx | 81 ++++++++++++------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index ed13241a..eaa81582 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -5,6 +5,7 @@ import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, DataTable, EventFeed,
   LogViewer, ButtonGroup, SectionHeader, Toggle, Select, Button, useToast,
+  Alert, ConfirmDialog,
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
@@ -111,6 +112,7 @@ export default function AgentHealth() {
   const dismissApp = useDismissApp();
   const catalogEntry = catalogApps?.find((a) => a.slug === appId);
 
+  const [confirmDismissOpen, setConfirmDismissOpen] = useState(false);
   const [configEditing, setConfigEditing] = useState(false);
   const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
 
@@ -292,6 +294,46 @@ export default function AgentHealth() {
 
   return (
     <div className={styles.content}>
+      {/* No agents warning + dismiss — shown when app-scoped, no agents, admin */}
+      {appId && agentList.length === 0 && isAdmin && (
+        <>
+          <Alert variant="warning" title="No agents connected">
+            <span>
+              {catalogEntry?.managed ? 'Managed app' : 'Discovered app'} &mdash; {(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges recorded.
+              {' '}You can dismiss this application to remove it and all associated data.
+            </span>
+            <div style={{ marginTop: 8 }}>
+              <Button variant="danger" size="sm" disabled={dismissApp.isPending}
+                onClick={() => setConfirmDismissOpen(true)}>
+                {dismissApp.isPending ? 'Dismissing\u2026' : 'Dismiss Application'}
+              </Button>
+            </div>
+          </Alert>
+          <ConfirmDialog
+            open={confirmDismissOpen}
+            onClose={() => setConfirmDismissOpen(false)}
+            onConfirm={() => {
+              setConfirmDismissOpen(false);
+              dismissApp.mutate(appId, {
+                onSuccess: () => {
+                  toast({ title: 'Application dismissed', description: `${appId} and all associated data have been deleted`, variant: 'success' });
+                  navigate('/runtime');
+                },
+                onError: (err) => {
+                  toast({ title: 'Dismiss failed', description: err.message, variant: 'error', duration: 86_400_000 });
+                },
+              });
+            }}
+            title="Dismiss Application"
+            message={`This will permanently delete "${appId}" and all associated data (${(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges, logs, diagrams).`}
+            confirmText="This action cannot be undone."
+            confirmLabel="Dismiss"
+            variant="danger"
+            loading={dismissApp.isPending}
+          />
+        </>
+      )}
+
       {/* Stat strip */}
       <div className={styles.statStrip}>
         <StatCard
@@ -476,45 +518,6 @@ export default function AgentHealth() {
         </div>
       )}
 
-      {/* Dismiss application card — shown when app-scoped, no agents, admin */}
-      {appId && agentList.length === 0 && isAdmin && (
-        <div className={`${sectionStyles.section}`} style={{ marginBottom: 16, padding: '16px 20px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <strong>No agents connected</strong>
-              {catalogEntry && (
-                <span style={{ marginLeft: 8, color: 'var(--text-muted)', fontSize: 13 }}>
-                  {catalogEntry.managed ? 'Managed app' : 'Discovered app'} &mdash; {catalogEntry.exchangeCount.toLocaleString()} exchanges recorded
-                </span>
-              )}
-            </div>
-            <Button
-              variant="danger"
-              size="sm"
-              disabled={dismissApp.isPending}
-              onClick={() => {
-                const count = catalogEntry?.exchangeCount ?? 0;
-                const ok = window.confirm(
-                  `Dismiss "${appId}" and permanently delete all data (${count.toLocaleString()} exchanges)?\n\nThis action cannot be undone.`
-                );
-                if (ok) {
-                  dismissApp.mutate(appId, {
-                    onSuccess: () => {
-                      toast({ title: 'Application dismissed', description: `${appId} and all associated data have been deleted`, variant: 'success' });
-                      navigate('/runtime');
-                    },
-                    onError: (err) => {
-                      toast({ title: 'Dismiss failed', description: err.message, variant: 'error', duration: 86_400_000 });
-                    },
-                  });
-                }
-              }}
-            >
-              {dismissApp.isPending ? 'Dismissing\u2026' : 'Dismiss Application'}
-            </Button>
-          </div>
-        </div>
-      )}
 
       {/* Group cards grid */}
       <div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>