From 2f2ad6eb9544ef2537dbb7e2ba91e9c764543fdf Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Tue, 3 Mar 2026 12:08:48 +0100
Subject: [PATCH] feat: Add remove account button to health page UI

---
 apps/web/src/components/AccountCard.tsx | 21 +++++++++++++++++++--
 apps/web/src/routes/settings/health.tsx | 21 ++++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/AccountCard.tsx b/apps/web/src/components/AccountCard.tsx
index 46b9a1b..5ec5bf0 100644
--- a/apps/web/src/components/AccountCard.tsx
+++ b/apps/web/src/components/AccountCard.tsx
@@ -1,6 +1,7 @@
-import { CheckCircle2, XCircle, AlertTriangle } from "lucide-react";
+import { CheckCircle2, XCircle, AlertTriangle, Trash2 } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 
 function formatResetTime(isoDate: string): string {
   const now = Date.now();
@@ -92,7 +93,13 @@ export type AccountData = {
   activeAgentCount: number;
 };
 
-export function AccountCard({ account }: { account: AccountData }) {
+export function AccountCard({
+  account,
+  onDelete,
+}: {
+  account: AccountData;
+  onDelete?: (e: React.MouseEvent) => void;
+}) {
   const hasWarning = account.credentialsValid && !account.isExhausted && account.error;
 
   const statusIcon = !account.credentialsValid ? (
@@ -140,6 +147,16 @@ export function AccountCard({ account }: { account: AccountData }) {
               <span>{statusText}</span>
             </div>
           </div>
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="shrink-0 text-muted-foreground hover:text-destructive"
+              onClick={onDelete}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
         </div>
 
         {/* Usage bars */}
diff --git a/apps/web/src/routes/settings/health.tsx b/apps/web/src/routes/settings/health.tsx
index d0a61b2..0fb8e42 100644
--- a/apps/web/src/routes/settings/health.tsx
+++ b/apps/web/src/routes/settings/health.tsx
@@ -5,6 +5,7 @@ import {
   RefreshCw,
   Server,
 } from 'lucide-react'
+import { toast } from 'sonner'
 import { trpc } from '@/lib/trpc'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
@@ -30,9 +31,19 @@ function formatUptime(seconds: number): string {
 }
 
 function HealthCheckPage() {
+  const utils = trpc.useUtils()
   const healthQuery = trpc.systemHealthCheck.useQuery(undefined, {
     refetchInterval: 30_000,
   })
+  const removeAccount = trpc.removeAccount.useMutation({
+    onSuccess: () => {
+      void utils.systemHealthCheck.invalidate()
+      toast.success('Account removed')
+    },
+    onError: (err) => {
+      toast.error(`Failed to remove account: ${err.message}`)
+    },
+  })
 
   const { data, isLoading, isError, error, refetch } = healthQuery
 
@@ -128,7 +139,15 @@ function HealthCheckPage() {
           </Card>
         ) : (
           accounts.map((account) => (
-            <AccountCard key={account.id} account={account} />
+            <AccountCard
+              key={account.id}
+              account={account}
+              onDelete={(e) => {
+                if (e.shiftKey || window.confirm(`Remove account "${account.email}"?`)) {
+                  removeAccount.mutate({ id: account.id })
+                }
+              }}
+            />
           ))
         )}
       </div>