feat: Add additional banner and information about security metrics

apps/web/src/components/SecurityWarningBanner.tsx

@@ -8,28 +8,40 @@ interface SecurityWarningBannerProps {
 }
 
 export function SecurityWarningBanner({status}: SecurityWarningBannerProps) {
-  // Don't show if no warnings or already disabled
+  // Don't show if no warnings or violations
-  if (status.warnings.length === 0 || status.shouldDisable) {
+  const hasCriticalViolations = status.violations.length > 0;
+  const hasWarnings = status.warnings.length > 0;
+
+  if (!hasCriticalViolations && !hasWarnings) {
     return null;
   }
 
+  // Determine severity - critical violations take precedence
+  const variant = hasCriticalViolations ? 'destructive' : 'warning';
+  const title = hasCriticalViolations
+    ? 'Critical Security Violations - Immediate Action Required'
+    : 'Security Warning - Action Required';
+  const issues = hasCriticalViolations ? status.violations : status.warnings;
+  const messageColor = hasCriticalViolations ? 'text-red-800' : 'text-amber-800';
+
   return (
-    <Alert variant="warning">
+    <Alert variant={variant}>
       <AlertTriangle className="h-4 w-4" />
-      <AlertTitle>Security Warning - Action Required</AlertTitle>
+      <AlertTitle>{title}</AlertTitle>
       <AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
         <div className="space-y-2 flex-1">
           <p className="text-sm font-medium">
             Your project has exceeded the following security thresholds:
           </p>
-          <ul className="list-disc list-inside space-y-1 text-sm text-amber-800">
+          <ul className={`list-disc list-inside space-y-1 text-sm ${messageColor}`}>
-            {status.warnings.map((warning, idx) => (
+            {issues.map((issue, idx) => (
-              <li key={idx}>{warning}</li>
+              <li key={idx}>{issue}</li>
             ))}
           </ul>
-          <p className="text-xs text-amber-800 mt-2">
+          <p className={`text-xs ${messageColor} mt-2`}>
-            High bounce or complaint rates can lead to project suspension. Review the detailed metrics
+            {hasCriticalViolations
-            and take action to improve your email quality.
+              ? 'Your project may be suspended soon. Please review the detailed metrics immediately and take action to improve your email quality.'
+              : 'High bounce or complaint rates can lead to project suspension. Review the detailed metrics and take action to improve your email quality.'}
           </p>
         </div>
         <Link href="/settings?tab=security">

apps/web/src/pages/index.tsx

@@ -86,11 +86,32 @@ export default function Index() {
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4" />
               <AlertTitle>Project Disabled - Read-Only Mode</AlertTitle>
-              <AlertDescription>
+              <AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
-                This project has been disabled due to security violations (high bounce or complaint rates). All
+                <div className="space-y-2 flex-1">
-                scheduled campaigns and workflows have been cancelled. The project is now in read-only mode - you can
+                  <p className="text-sm font-medium">
-                view your data but cannot create, update, or delete anything. Please contact support to resolve this
+                    This project has been disabled due to security violations. All scheduled campaigns and workflows
-                issue.
+                    have been cancelled. The project is now in read-only mode - you can view your data but cannot
+                    create, update, or delete anything.
+                  </p>
+                  {securityMetrics && securityMetrics.status.violations.length > 0 && (
+                    <>
+                      <p className="text-sm font-medium mt-3">Security violations that caused suspension:</p>
+                      <ul className="list-disc list-inside space-y-1 text-sm text-red-800">
+                        {securityMetrics.status.violations.map((violation, idx) => (
+                          <li key={idx}>{violation}</li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+                  <p className="text-xs text-red-800 mt-2">
+                    Please contact support to resolve this issue and get your project re-enabled.
+                  </p>
+                </div>
+                <Link href="/settings?tab=security">
+                  <Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
+                    View Details
+                  </Button>
+                </Link>
               </AlertDescription>
             </Alert>
           )}