feat(alerts): always-visible dismiss/ack actions + Dismiss all (service, endpoint, UI)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/layout/inbox.tsx

@@ -37,7 +37,12 @@ import { cn } from '@/lib/utils';
 import { useNotifications } from '@/hooks/use-notifications';
 import { NotificationItem } from '@/components/notifications/notification-item';
 import { AlertCard, AlertCardEmpty } from '@/components/alerts/alert-card';
-import { useAlertCount, useAlertList, useAlertRealtime } from '@/components/alerts/use-alerts';
+import {
+  useAlertCount,
+  useAlertList,
+  useAlertRealtime,
+  useDismissAll,
+} from '@/components/alerts/use-alerts';
 
 interface NotificationListResponse {
   data: Array<{
@@ -66,6 +71,7 @@ export function Inbox() {
   const systemCritical = alertCount?.bySeverity.critical ?? 0;
   const systemAlerts = alertList?.data ?? [];
   const systemTop = systemAlerts.slice(0, 8);
+  const dismissAll = useDismissAll();
 
   // ── Personal (notifications) ──
   const { unreadCount: personalUnread } = useNotifications();
@@ -230,13 +236,25 @@ export function Inbox() {
               <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 Active alerts
               </h4>
-              <Link
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                href={portSlug ? (`/${portSlug}/alerts` as any) : ('/alerts' as any)}
-                className="text-xs text-muted-foreground hover:text-foreground"
-              >
-                View all
-              </Link>
+              <div className="flex items-center gap-3">
+                {systemAlerts.length > 0 ? (
+                  <button
+                    type="button"
+                    onClick={() => dismissAll.mutate({})}
+                    disabled={dismissAll.isPending}
+                    className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
+                  >
+                    Dismiss all
+                  </button>
+                ) : null}
+                <Link
+                  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                  href={portSlug ? (`/${portSlug}/alerts` as any) : ('/alerts' as any)}
+                  className="text-xs text-muted-foreground hover:text-foreground"
+                >
+                  View all
+                </Link>
+              </div>
             </div>
             <Separator />
             <ScrollArea className="max-h-[400px]">