From 3e682d15d2779ced47ccd4df48ab2746c27c3533 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:49:31 -0400
Subject: [PATCH 01/14] feat(notifications): expands error store to
 notification store with severity and read state

---
 src/app/index.css           |  64 +++++++++++
 src/app/lib/errors.ts       | 103 +++++++++++++----
 tests/lib/errors.test.ts    | 220 +++++++++++++++++++++++++++++++++++-
 tests/services/poll.test.ts |   2 +
 4 files changed, 367 insertions(+), 22 deletions(-)

diff --git a/src/app/index.css b/src/app/index.css
index 9c0f8146..e6db9168 100644
--- a/src/app/index.css
+++ b/src/app/index.css
@@ -1,3 +1,67 @@
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Notification animations ──────────────────────────────────────────────── */
+
+@keyframes toast-slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes toast-slide-out {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes drawer-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes overlay-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes overlay-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@utility animate-toast-in {
+  animation: toast-slide-in 0.3s ease-out forwards;
+}
+
+@utility animate-toast-out {
+  animation: toast-slide-out 0.3s ease-in forwards;
+}
+
+@utility animate-drawer-in {
+  animation: drawer-slide-in 0.3s ease-out forwards;
+}
+
+@utility animate-drawer-out {
+  animation: drawer-slide-out 0.3s ease-in forwards;
+}
+
+@utility animate-overlay-in {
+  animation: overlay-fade-in 0.3s ease-out forwards;
+}
+
+@utility animate-overlay-out {
+  animation: overlay-fade-out 0.3s ease-in forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-toast-in, .animate-toast-out,
+  .animate-drawer-in, .animate-drawer-out,
+  .animate-overlay-in, .animate-overlay-out {
+    animation: none;
+  }
+}
diff --git a/src/app/lib/errors.ts b/src/app/lib/errors.ts
index 9e24ff98..97880cdd 100644
--- a/src/app/lib/errors.ts
+++ b/src/app/lib/errors.ts
@@ -1,44 +1,105 @@
 import { createSignal } from "solid-js";
 
-export interface AppError {
+export type NotificationSeverity = "error" | "warning" | "info";
+
+export interface AppNotification {
   id: string;
   source: string;
   message: string;
   timestamp: number;
   retryable: boolean;
+  severity: NotificationSeverity;
+  read: boolean;
 }
 
-const [errors, setErrors] = createSignal<AppError[]>([]);
+// Backward-compat alias
+export type AppError = AppNotification;
+
+const MAX_NOTIFICATIONS = 50;
+
+const [notifications, setNotifications] = createSignal<AppNotification[]>([]);
 
-let errorCounter = 0;
+let notificationCounter = 0;
 
-export function getErrors(): AppError[] {
-  return errors();
+// Cycle tracking for poll reconciliation
+let _cycleTracking: Set<string> | null = null;
+
+export function startCycleTracking(): void {
+  _cycleTracking = new Set();
 }
 
-export function pushError(source: string, message: string, retryable = false): void {
-  // Intentional design: deduplicate by source to prevent banner spam from repeated
-  // rate limit retries or polling cycles. Trade-off: if two different errors share
-  // a source (e.g., "search" for both "incomplete" and "capped"), only the latest
-  // message survives. This is acceptable because the latest error is the most actionable.
-  setErrors((prev) => {
-    const existing = prev.find((e) => e.source === source);
+export function endCycleTracking(): Set<string> {
+  const result = _cycleTracking ?? new Set();
+  _cycleTracking = null;
+  return result;
+}
+
+export function pushNotification(
+  source: string,
+  message: string,
+  severity: NotificationSeverity,
+  retryable = false
+): void {
+  // Record source in cycle tracking even for no-ops
+  if (_cycleTracking) _cycleTracking.add(source);
+
+  setNotifications((prev) => {
+    const existing = prev.find((n) => n.source === source);
     if (existing) {
-      return prev.map((e) =>
-        e.source === source
-          ? { ...e, message, timestamp: Date.now(), retryable }
-          : e
-      );
+      if (existing.message === message) {
+        // Same source + same message: no-op — prevents toast spam
+        return prev;
+      }
+      // Same source + different message: update, reset read, update timestamp
+      return prev
+        .map((n) =>
+          n.source === source
+            ? { ...n, message, severity, retryable, read: false, timestamp: Date.now() }
+            : n
+        )
+        .slice(-MAX_NOTIFICATIONS);
     }
-    const id = `err-${++errorCounter}-${Date.now()}`;
-    return [...prev, { id, source, message, timestamp: Date.now(), retryable }];
+    const id = `notif-${++notificationCounter}-${Date.now()}`;
+    return [...prev, { id, source, message, timestamp: Date.now(), retryable, severity, read: false }].slice(
+      -MAX_NOTIFICATIONS
+    );
   });
 }
 
+export function pushError(source: string, message: string, retryable = false): void {
+  pushNotification(source, message, "error", retryable);
+}
+
 export function dismissError(id: string): void {
-  setErrors((prev) => prev.filter((e) => e.id !== id));
+  setNotifications((prev) => prev.filter((n) => n.id !== id));
+}
+
+export function dismissNotificationBySource(source: string): void {
+  setNotifications((prev) => prev.filter((n) => n.source !== source));
+}
+
+export function markAllAsRead(): void {
+  setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+}
+
+export function getUnreadCount(): number {
+  return notifications().filter((n) => !n.read).length;
+}
+
+export function getNotifications(): AppNotification[] {
+  return notifications();
+}
+
+// Backward-compat alias
+export function getErrors(): AppNotification[] {
+  return notifications();
+}
+
+export function clearNotifications(): void {
+  setNotifications([]);
 }
 
+// Backward-compat alias
 export function clearErrors(): void {
-  setErrors([]);
+  clearNotifications();
 }
diff --git a/tests/lib/errors.test.ts b/tests/lib/errors.test.ts
index bd7df50e..605b0b34 100644
--- a/tests/lib/errors.test.ts
+++ b/tests/lib/errors.test.ts
@@ -1,9 +1,17 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import {
   getErrors,
+  getNotifications,
+  getUnreadCount,
   pushError,
+  pushNotification,
   dismissError,
+  dismissNotificationBySource,
+  markAllAsRead,
   clearErrors,
+  clearNotifications,
+  startCycleTracking,
+  endCycleTracking,
 } from "../../src/app/lib/errors";
 import { createRoot } from "solid-js";
 
@@ -11,6 +19,8 @@ import { createRoot } from "solid-js";
 // to prevent state leaking between tests.
 beforeEach(() => {
   clearErrors();
+  // Also end any stale cycle tracking
+  endCycleTracking();
 });
 
 describe("getErrors", () => {
@@ -22,6 +32,17 @@ describe("getErrors", () => {
   });
 });
 
+describe("getNotifications", () => {
+  it("returns same signal as getErrors", () => {
+    createRoot((dispose) => {
+      pushError("api", "test");
+      expect(getNotifications()).toHaveLength(1);
+      expect(getErrors()).toHaveLength(1);
+      dispose();
+    });
+  });
+});
+
 describe("pushError", () => {
   it("adds an error with auto-generated id and timestamp", () => {
     createRoot((dispose) => {
@@ -73,6 +94,94 @@ describe("pushError", () => {
       dispose();
     });
   });
+
+  it("creates notification with severity 'error'", () => {
+    createRoot((dispose) => {
+      pushError("api", "Error happened");
+      expect(getErrors()[0].severity).toBe("error");
+      dispose();
+    });
+  });
+
+  it("creates notification with read: false", () => {
+    createRoot((dispose) => {
+      pushError("api", "Error happened");
+      expect(getErrors()[0].read).toBe(false);
+      dispose();
+    });
+  });
+});
+
+describe("pushNotification", () => {
+  it("creates notification with correct severity and read: false", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "Results may be incomplete", "warning");
+      const notifs = getNotifications();
+      expect(notifs).toHaveLength(1);
+      expect(notifs[0].source).toBe("search");
+      expect(notifs[0].message).toBe("Results may be incomplete");
+      expect(notifs[0].severity).toBe("warning");
+      expect(notifs[0].read).toBe(false);
+      dispose();
+    });
+  });
+
+  it("supports info severity", () => {
+    createRoot((dispose) => {
+      pushNotification("graphql", "Using REST fallback", "info", true);
+      const notifs = getNotifications();
+      expect(notifs[0].severity).toBe("info");
+      expect(notifs[0].retryable).toBe(true);
+      dispose();
+    });
+  });
+
+  it("deduplicates by source: resets read and updates timestamp when message changes", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "First message", "warning");
+      const firstNotif = getNotifications()[0];
+      // Mark as read to verify it gets reset
+      markAllAsRead();
+      expect(getNotifications()[0].read).toBe(true);
+
+      pushNotification("search", "Updated message", "warning");
+      const notifs = getNotifications();
+      expect(notifs).toHaveLength(1);
+      expect(notifs[0].message).toBe("Updated message");
+      expect(notifs[0].read).toBe(false); // reset to unread
+      expect(notifs[0].id).toBe(firstNotif.id); // same id preserved
+      dispose();
+    });
+  });
+
+  it("dedup with same message: no-op — timestamp and read state unchanged", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "Same message", "warning");
+      markAllAsRead();
+      const firstTimestamp = getNotifications()[0].timestamp;
+
+      pushNotification("search", "Same message", "warning");
+      const notifs = getNotifications();
+      expect(notifs).toHaveLength(1);
+      expect(notifs[0].read).toBe(true); // NOT reset — same message is no-op
+      expect(notifs[0].timestamp).toBe(firstTimestamp); // timestamp unchanged
+      dispose();
+    });
+  });
+
+  it("FIFO cap: push 51 notifications, oldest is dropped", () => {
+    createRoot((dispose) => {
+      for (let i = 0; i < 51; i++) {
+        pushNotification(`source-${i}`, `Message ${i}`, "info");
+      }
+      const notifs = getNotifications();
+      expect(notifs).toHaveLength(50);
+      // Oldest (source-0) should be dropped, newest (source-50) should be present
+      expect(notifs.find((n) => n.source === "source-0")).toBeUndefined();
+      expect(notifs.find((n) => n.source === "source-50")).toBeDefined();
+      dispose();
+    });
+  });
 });
 
 describe("dismissError", () => {
@@ -110,7 +219,60 @@ describe("dismissError", () => {
   });
 });
 
-describe("clearErrors", () => {
+describe("dismissNotificationBySource", () => {
+  it("removes all notifications with given source", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "Warning 1", "warning");
+      pushNotification("graphql", "Info 1", "info");
+      dismissNotificationBySource("search");
+      const notifs = getNotifications();
+      expect(notifs).toHaveLength(1);
+      expect(notifs[0].source).toBe("graphql");
+      dispose();
+    });
+  });
+
+  it("is a no-op for unknown source", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "Warning", "warning");
+      dismissNotificationBySource("nonexistent");
+      expect(getNotifications()).toHaveLength(1);
+      dispose();
+    });
+  });
+});
+
+describe("markAllAsRead", () => {
+  it("sets all read to true and getUnreadCount returns 0", () => {
+    createRoot((dispose) => {
+      pushNotification("a", "msg1", "error");
+      pushNotification("b", "msg2", "warning");
+      pushNotification("c", "msg3", "info");
+      expect(getUnreadCount()).toBe(3);
+      markAllAsRead();
+      expect(getUnreadCount()).toBe(0);
+      expect(getNotifications().every((n) => n.read)).toBe(true);
+      dispose();
+    });
+  });
+});
+
+describe("getUnreadCount", () => {
+  it("returns count of unread notifications", () => {
+    createRoot((dispose) => {
+      pushNotification("a", "msg1", "error");
+      pushNotification("b", "msg2", "warning");
+      expect(getUnreadCount()).toBe(2);
+      markAllAsRead();
+      expect(getUnreadCount()).toBe(0);
+      pushNotification("c", "msg3", "info");
+      expect(getUnreadCount()).toBe(1);
+      dispose();
+    });
+  });
+});
+
+describe("clearErrors / clearNotifications", () => {
   it("removes all errors", () => {
     createRoot((dispose) => {
       pushError("api", "Error 1");
@@ -128,4 +290,60 @@ describe("clearErrors", () => {
       dispose();
     });
   });
+
+  it("clearNotifications also clears the store", () => {
+    createRoot((dispose) => {
+      pushNotification("a", "msg", "info");
+      clearNotifications();
+      expect(getNotifications()).toHaveLength(0);
+      dispose();
+    });
+  });
+});
+
+describe("cycle tracking", () => {
+  it("startCycleTracking + endCycleTracking tracks pushed sources", () => {
+    createRoot((dispose) => {
+      startCycleTracking();
+      pushNotification("search", "Results incomplete", "warning");
+      pushNotification("graphql", "REST fallback", "info");
+      const tracked = endCycleTracking();
+      expect(tracked.has("search")).toBe(true);
+      expect(tracked.has("graphql")).toBe(true);
+      dispose();
+    });
+  });
+
+  it("tracks same-message no-ops (still records source)", () => {
+    createRoot((dispose) => {
+      pushNotification("search", "Same message", "warning");
+      startCycleTracking();
+      // Same message push is a no-op in dedup, but source should still be tracked
+      pushNotification("search", "Same message", "warning");
+      const tracked = endCycleTracking();
+      expect(tracked.has("search")).toBe(true);
+      dispose();
+    });
+  });
+
+  it("endCycleTracking is safe to call twice (returns empty Set on second call)", () => {
+    createRoot((dispose) => {
+      startCycleTracking();
+      pushNotification("a", "msg", "info");
+      endCycleTracking();
+      const second = endCycleTracking();
+      expect(second.size).toBe(0); // returns empty Set when tracking already ended
+      dispose();
+    });
+  });
+
+  it("tracks nothing when not started", () => {
+    createRoot((dispose) => {
+      // No startCycleTracking call
+      pushNotification("a", "msg", "info");
+      const result = endCycleTracking();
+      expect(result.size).toBe(0);
+      dispose();
+    });
+  });
 });
diff --git a/tests/services/poll.test.ts b/tests/services/poll.test.ts
index d181ff14..1999b9e8 100644
--- a/tests/services/poll.test.ts
+++ b/tests/services/poll.test.ts
@@ -398,6 +398,8 @@ describe("createPollCoordinator", () => {
       message: "Rate limited",
       timestamp: Date.now(),
       retryable: true,
+      severity: "error" as const,
+      read: false,
     };
 
     // Swap getErrors to return a pre-existing error for this test

From 75447da3f49b721dd3ba5ff3eba548ebb30b7013 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:51:53 -0400
Subject: [PATCH 02/14] feat(notifications): adds ToastContainer with
 auto-dismiss

---
 src/app/components/shared/ToastContainer.tsx  | 199 ++++++++++++++++++
 .../components/shared/ToastContainer.test.tsx | 131 ++++++++++++
 2 files changed, 330 insertions(+)
 create mode 100644 src/app/components/shared/ToastContainer.tsx
 create mode 100644 tests/components/shared/ToastContainer.test.tsx

diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
new file mode 100644
index 00000000..68b2634c
--- /dev/null
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -0,0 +1,199 @@
+import { createEffect, createSignal, For, onCleanup } from "solid-js";
+import {
+  getNotifications,
+  type AppNotification,
+  type NotificationSeverity,
+} from "../../lib/errors";
+
+// Severity configuration — shared with NotificationDrawer (imported there after C4)
+export interface SeverityConfig {
+  path: string;
+  secondaryPath?: string;
+  iconClass: string;
+  borderClass: string;
+  bgClass: string;
+  textClass: string;
+  borderColorClass: string;
+}
+
+export function severityConfig(severity: NotificationSeverity): SeverityConfig {
+  switch (severity) {
+    case "error":
+      return {
+        path: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+        iconClass: "text-red-500 dark:text-red-400",
+        borderClass: "border-l-red-400",
+        bgClass: "bg-red-50 dark:bg-red-900/30",
+        textClass: "text-red-800 dark:text-red-200",
+        borderColorClass: "border-red-200 dark:border-red-800",
+      };
+    case "warning":
+      return {
+        path: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495z",
+        secondaryPath:
+          "M10 12a.75.75 0 01-.75-.75v-3.5a.75.75 0 011.5 0v3.5A.75.75 0 0110 12zm0 3a1 1 0 100-2 1 1 0 000 2z",
+        iconClass: "text-yellow-500 dark:text-yellow-400",
+        borderClass: "border-l-yellow-400",
+        bgClass: "bg-yellow-50 dark:bg-yellow-900/30",
+        textClass: "text-yellow-800 dark:text-yellow-200",
+        borderColorClass: "border-yellow-200 dark:border-yellow-800",
+      };
+    case "info":
+      return {
+        path: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+        iconClass: "text-blue-500 dark:text-blue-400",
+        borderClass: "border-l-blue-400",
+        bgClass: "bg-blue-50 dark:bg-blue-900/30",
+        textClass: "text-blue-800 dark:text-blue-200",
+        borderColorClass: "border-blue-200 dark:border-blue-800",
+      };
+  }
+}
+
+// Placeholder — will be replaced with import from NotificationDrawer after C4
+// Uses a module-level mutable reference so ToastContainer.test can override it
+export let getMutedSources: () => Set<string> = () => new Set();
+
+interface ToastItem {
+  notification: AppNotification;
+  dismissing: boolean;
+}
+
+export default function ToastContainer() {
+  // seenTimestamps: notification ID → last-seen timestamp (detect new/updated)
+  const seenTimestamps = new Map<string, number>();
+  // lastToastedAt: source → timestamp of last toast shown (cooldown tracking)
+  const lastToastedAt = new Map<string, number>();
+  // visibleToasts: IDs of toasts currently on screen
+  const [visibleToasts, setVisibleToasts] = createSignal<Map<string, ToastItem>>(new Map());
+  // pending timeout handles: notification ID → timeout handle
+  const timeouts = new Map<string, ReturnType<typeof setTimeout>>();
+  // dismissing animation timeouts
+  const dismissingTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+  const COOLDOWN_MS = 60_000;
+  const animDelay = () =>
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+
+  function removeToast(id: string) {
+    setVisibleToasts((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }
+
+  function startDismissAnimation(id: string) {
+    // Switch to dismiss animation
+    setVisibleToasts((prev) => {
+      const next = new Map(prev);
+      const item = next.get(id);
+      if (item) next.set(id, { ...item, dismissing: true });
+      return next;
+    });
+    // Remove after animation
+    const t = setTimeout(() => removeToast(id), animDelay());
+    dismissingTimeouts.set(id, t);
+  }
+
+  function dismissToast(id: string) {
+    // Clear auto-dismiss timeout
+    const autoTimeout = timeouts.get(id);
+    if (autoTimeout !== undefined) {
+      clearTimeout(autoTimeout);
+      timeouts.delete(id);
+    }
+    startDismissAnimation(id);
+  }
+
+  function scheduleAutoDismiss(notification: AppNotification) {
+    const delay = notification.severity === "error" ? 10_000 : 5_000;
+    const t = setTimeout(() => {
+      timeouts.delete(notification.id);
+      startDismissAnimation(notification.id);
+    }, delay);
+    timeouts.set(notification.id, t);
+  }
+
+  createEffect(() => {
+    const notifs = getNotifications();
+    for (const notif of notifs) {
+      const lastSeen = seenTimestamps.get(notif.id);
+      const isNew = lastSeen === undefined;
+      const isUpdated = lastSeen !== undefined && notif.timestamp > lastSeen;
+
+      if (!isNew && !isUpdated) continue;
+
+      // Always update seenTimestamps
+      seenTimestamps.set(notif.id, notif.timestamp);
+
+      // Check suppression conditions
+      const lastToasted = lastToastedAt.get(notif.source);
+      const inCooldown = lastToasted !== undefined && Date.now() - lastToasted < COOLDOWN_MS;
+      const muted = getMutedSources().has(notif.source);
+
+      if (inCooldown || muted) continue;
+
+      // Show toast
+      lastToastedAt.set(notif.source, Date.now());
+      setVisibleToasts((prev) => {
+        const next = new Map(prev);
+        next.set(notif.id, { notification: notif, dismissing: false });
+        return next;
+      });
+      scheduleAutoDismiss(notif);
+    }
+  });
+
+  onCleanup(() => {
+    for (const t of timeouts.values()) clearTimeout(t);
+    for (const t of dismissingTimeouts.values()) clearTimeout(t);
+  });
+
+  return (
+    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-96">
+      <For each={[...visibleToasts().values()]}>
+        {(item) => {
+          const cfg = severityConfig(item.notification.severity);
+          return (
+            <div
+              role="alert"
+              class={`flex items-start gap-3 rounded-lg border p-3 shadow-lg ${cfg.bgClass} ${cfg.textClass} ${cfg.borderColorClass} ${item.dismissing ? "animate-toast-out" : "animate-toast-in"}`}
+            >
+              <svg
+                class={`h-5 w-5 shrink-0 ${cfg.iconClass}`}
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path fill-rule="evenodd" d={cfg.path} clip-rule="evenodd" />
+                {cfg.secondaryPath && (
+                  <path fill-rule="evenodd" d={cfg.secondaryPath} clip-rule="evenodd" />
+                )}
+              </svg>
+              <span class="flex-1 text-sm">
+                <strong>{item.notification.source}:</strong> {item.notification.message}
+                {item.notification.retryable && (
+                  <span class="ml-1 opacity-75">(will retry)</span>
+                )}
+              </span>
+              <button
+                onClick={() => dismissToast(item.notification.id)}
+                class="shrink-0 opacity-60 hover:opacity-100 transition-opacity"
+                aria-label="Dismiss notification"
+              >
+                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                  <path
+                    fill-rule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+          );
+        }}
+      </For>
+    </div>
+  );
+}
diff --git a/tests/components/shared/ToastContainer.test.tsx b/tests/components/shared/ToastContainer.test.tsx
new file mode 100644
index 00000000..6f0a9382
--- /dev/null
+++ b/tests/components/shared/ToastContainer.test.tsx
@@ -0,0 +1,131 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import {
+  pushNotification,
+  clearNotifications,
+} from "../../../src/app/lib/errors";
+import ToastContainer from "../../../src/app/components/shared/ToastContainer";
+
+beforeEach(() => {
+  clearNotifications();
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe("ToastContainer", () => {
+  it("renders no toasts when notification store is empty", () => {
+    const { container } = render(() => <ToastContainer />);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
+
+  it("renders a toast when pushNotification is called", () => {
+    render(() => <ToastContainer />);
+    pushNotification("api", "Something failed", "error");
+    expect(screen.getByRole("alert")).toBeDefined();
+    expect(screen.getByRole("alert").textContent).toContain("api");
+    expect(screen.getByRole("alert").textContent).toContain("Something failed");
+  });
+
+  it("shows source and message in toast", () => {
+    render(() => <ToastContainer />);
+    pushNotification("search", "Results incomplete", "warning");
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain("search");
+    expect(alert.textContent).toContain("Results incomplete");
+  });
+
+  it("applies bg-red-50 class for error severity", () => {
+    render(() => <ToastContainer />);
+    pushNotification("api", "Error happened", "error");
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("bg-red-50");
+  });
+
+  it("applies bg-yellow-50 class for warning severity", () => {
+    render(() => <ToastContainer />);
+    pushNotification("search", "Warning here", "warning");
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("bg-yellow-50");
+  });
+
+  it("applies bg-blue-50 class for info severity", () => {
+    render(() => <ToastContainer />);
+    pushNotification("graphql", "Info message", "info");
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("bg-blue-50");
+  });
+
+  it("shows (will retry) for retryable notifications", () => {
+    render(() => <ToastContainer />);
+    pushNotification("api", "Network error", "error", true);
+    expect(screen.getByRole("alert").textContent).toContain("(will retry)");
+  });
+
+  it("does not show (will retry) for non-retryable notifications", () => {
+    render(() => <ToastContainer />);
+    pushNotification("api", "Not found", "error", false);
+    expect(screen.getByRole("alert").textContent).not.toContain("(will retry)");
+  });
+
+  it("manual dismiss starts dismiss animation and removes toast after delay", () => {
+    const { container } = render(() => <ToastContainer />);
+    pushNotification("api", "Error", "error");
+    const dismissBtn = screen.getByLabelText("Dismiss notification");
+    fireEvent.click(dismissBtn);
+    // Should switch to animate-toast-out
+    const alert = container.querySelector("[role='alert']");
+    expect(alert?.className).toContain("animate-toast-out");
+    // After 300ms, toast should be removed
+    vi.advanceTimersByTime(300);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
+
+  it("auto-dismisses error toasts after 10 seconds", () => {
+    const { container } = render(() => <ToastContainer />);
+    pushNotification("api", "Error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+    // At 9999ms, still visible
+    vi.advanceTimersByTime(9999);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+    // At 10s + animation delay (300ms), should be gone
+    vi.advanceTimersByTime(1 + 300);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
+
+  it("auto-dismisses warning/info toasts after 5 seconds", () => {
+    const { container } = render(() => <ToastContainer />);
+    pushNotification("search", "Warning", "warning");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+    vi.advanceTimersByTime(4999);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+    vi.advanceTimersByTime(1 + 300);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
+
+  it("cooldown: no new toast within 60s for same source with different message", () => {
+    const { container } = render(() => <ToastContainer />);
+    pushNotification("api", "First error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+
+    // Manually dismiss so toast is gone from screen
+    const dismissBtn = screen.getByLabelText("Dismiss notification");
+    fireEvent.click(dismissBtn);
+    vi.advanceTimersByTime(300);
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+
+    // Push different message within 60s — should NOT show new toast (cooldown)
+    pushNotification("api", "Second error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+
+    // Advance past cooldown (60s)
+    vi.advanceTimersByTime(60_001);
+
+    // Push again — should show toast now
+    pushNotification("api", "Third error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+  });
+});

From fd04abe63927033b7beb01c39ba0f3f88f60e5b5 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:53:38 -0400
Subject: [PATCH 03/14] feat(notifications): adds NotificationDrawer slide-out
 panel

---
 .../components/shared/NotificationDrawer.tsx  | 198 ++++++++++++++++++
 src/app/components/shared/ToastContainer.tsx  |   7 +-
 .../shared/NotificationDrawer.test.tsx        | 164 +++++++++++++++
 3 files changed, 365 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/shared/NotificationDrawer.tsx
 create mode 100644 tests/components/shared/NotificationDrawer.test.tsx

diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
new file mode 100644
index 00000000..bdf4a115
--- /dev/null
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -0,0 +1,198 @@
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import {
+  getNotifications,
+  markAllAsRead,
+  clearNotifications,
+  dismissError,
+  type NotificationSeverity,
+} from "../../lib/errors";
+import { relativeTime } from "../../lib/format";
+import { severityConfig } from "./ToastContainer";
+
+// Module-level muted sources — session only, resets on page reload
+export const mutedSources = new Set<string>();
+
+export type { NotificationSeverity };
+export { severityConfig };
+
+interface NotificationDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function NotificationDrawer(props: NotificationDrawerProps) {
+  const [visible, setVisible] = createSignal(false);
+  const [closing, setClosing] = createSignal(false);
+  let closeTimeoutHandle: ReturnType<typeof setTimeout> | undefined;
+  let closeButtonRef: HTMLButtonElement | undefined;
+
+  const animDelay = () =>
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+
+  createEffect(() => {
+    if (props.open) {
+      // Clear any pending close timeout on re-open
+      if (closeTimeoutHandle !== undefined) {
+        clearTimeout(closeTimeoutHandle);
+        closeTimeoutHandle = undefined;
+      }
+      setClosing(false);
+      setVisible(true);
+    } else {
+      if (visible()) {
+        setClosing(true);
+        closeTimeoutHandle = setTimeout(() => {
+          setVisible(false);
+          closeTimeoutHandle = undefined;
+        }, animDelay());
+      }
+    }
+  });
+
+  onCleanup(() => {
+    if (closeTimeoutHandle !== undefined) clearTimeout(closeTimeoutHandle);
+  });
+
+  // Escape key handler
+  createEffect(() => {
+    if (!visible()) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") props.onClose();
+    };
+    document.addEventListener("keydown", handler);
+    onCleanup(() => document.removeEventListener("keydown", handler));
+  });
+
+  function handleDismissAll() {
+    const current = getNotifications();
+    for (const n of current) mutedSources.add(n.source);
+    clearNotifications();
+  }
+
+  return (
+    <Show when={visible()}>
+      <>
+        {/* Overlay */}
+        <div
+          class="fixed inset-0 z-[70] bg-black/40"
+          classList={{
+            "animate-overlay-in": !closing(),
+            "animate-overlay-out": closing(),
+          }}
+          onClick={props.onClose}
+          aria-hidden="true"
+        />
+        {/* Drawer panel */}
+        <div
+          role="dialog"
+          aria-label="Notifications"
+          class="fixed top-0 right-0 h-full w-80 sm:w-96 bg-white dark:bg-gray-800 shadow-xl z-[71] flex flex-col"
+          classList={{
+            "animate-drawer-in": !closing(),
+            "animate-drawer-out": closing(),
+          }}
+        >
+          {/* Header */}
+          <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex-1">
+              Notifications
+            </h2>
+            <button
+              onClick={markAllAsRead}
+              class="text-sm text-blue-500 hover:text-blue-700 dark:hover:text-blue-300"
+            >
+              Mark all as read
+            </button>
+            <button
+              onClick={handleDismissAll}
+              class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              Dismiss all
+            </button>
+            <button
+              ref={closeButtonRef}
+              onClick={props.onClose}
+              aria-label="Close notifications"
+              class="ml-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+
+          {/* Notification list */}
+          <div class="flex-1 overflow-y-auto">
+            <Show
+              when={getNotifications().length > 0}
+              fallback={
+                <div class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
+                  No notifications
+                </div>
+              }
+            >
+              <ul>
+                <For each={getNotifications().slice().reverse()}>
+                  {(notif) => {
+                    const cfg = severityConfig(notif.severity);
+                    return (
+                      <li
+                        class={`flex items-start gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-700 border-l-4 ${cfg.borderClass} ${!notif.read ? "bg-blue-50/50 dark:bg-blue-900/10" : ""}`}
+                      >
+                        <svg
+                          class={`h-5 w-5 shrink-0 mt-0.5 ${cfg.iconClass}`}
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                        >
+                          <path fill-rule="evenodd" d={cfg.path} clip-rule="evenodd" />
+                          {cfg.secondaryPath && (
+                            <path
+                              fill-rule="evenodd"
+                              d={cfg.secondaryPath}
+                              clip-rule="evenodd"
+                            />
+                          )}
+                        </svg>
+                        <div class="flex-1 min-w-0">
+                          <p class="text-sm text-gray-800 dark:text-gray-200">
+                            <strong>{notif.source}:</strong> {notif.message}
+                            {notif.retryable && (
+                              <span class="ml-1 text-gray-500 dark:text-gray-400 text-xs">
+                                (will retry)
+                              </span>
+                            )}
+                          </p>
+                          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                            {relativeTime(new Date(notif.timestamp).toISOString())}
+                          </p>
+                        </div>
+                        <button
+                          onClick={() => dismissError(notif.id)}
+                          aria-label="Dismiss notification"
+                          class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 mt-0.5"
+                        >
+                          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                            <path
+                              fill-rule="evenodd"
+                              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                        </button>
+                      </li>
+                    );
+                  }}
+                </For>
+              </ul>
+            </Show>
+          </div>
+        </div>
+      </>
+    </Show>
+  );
+}
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index 68b2634c..a43db3ac 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -50,9 +50,8 @@ export function severityConfig(severity: NotificationSeverity): SeverityConfig {
   }
 }
 
-// Placeholder — will be replaced with import from NotificationDrawer after C4
-// Uses a module-level mutable reference so ToastContainer.test can override it
-export let getMutedSources: () => Set<string> = () => new Set();
+// Import mutedSources from NotificationDrawer — shared session-only mute set
+import { mutedSources } from "./NotificationDrawer";
 
 interface ToastItem {
   notification: AppNotification;
@@ -130,7 +129,7 @@ export default function ToastContainer() {
       // Check suppression conditions
       const lastToasted = lastToastedAt.get(notif.source);
       const inCooldown = lastToasted !== undefined && Date.now() - lastToasted < COOLDOWN_MS;
-      const muted = getMutedSources().has(notif.source);
+      const muted = mutedSources.has(notif.source);
 
       if (inCooldown || muted) continue;
 
diff --git a/tests/components/shared/NotificationDrawer.test.tsx b/tests/components/shared/NotificationDrawer.test.tsx
new file mode 100644
index 00000000..73daac98
--- /dev/null
+++ b/tests/components/shared/NotificationDrawer.test.tsx
@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import {
+  pushNotification,
+  clearNotifications,
+  markAllAsRead,
+} from "../../../src/app/lib/errors";
+import NotificationDrawer, { mutedSources } from "../../../src/app/components/shared/NotificationDrawer";
+
+beforeEach(() => {
+  clearNotifications();
+  mutedSources.clear();
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function renderDrawer(open = true, onClose = vi.fn()) {
+  const [isOpen, setIsOpen] = createSignal(open);
+  const close = () => {
+    onClose();
+    setIsOpen(false);
+  };
+  const result = render(() => <NotificationDrawer open={isOpen()} onClose={close} />);
+  return { ...result, onClose, setIsOpen };
+}
+
+describe("NotificationDrawer", () => {
+  it("does not render when open is false", () => {
+    const { container } = render(() => (
+      <NotificationDrawer open={false} onClose={vi.fn()} />
+    ));
+    expect(container.querySelector("[role='dialog']")).toBeNull();
+  });
+
+  it("renders drawer with Notifications heading when open is true", () => {
+    renderDrawer(true);
+    // advance timers so effect runs
+    vi.advanceTimersByTime(0);
+    expect(screen.getByRole("dialog")).toBeDefined();
+    expect(screen.getByText("Notifications")).toBeDefined();
+  });
+
+  it("shows notification items when store has notifications", () => {
+    pushNotification("api", "Something failed", "error");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    expect(screen.getByText(/Something failed/)).toBeDefined();
+    expect(screen.getByText(/api/)).toBeDefined();
+  });
+
+  it("shows newest notification first in the list", () => {
+    pushNotification("first", "First message", "info");
+    pushNotification("second", "Second message", "warning");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const items = screen.getAllByRole("listitem");
+    // Newest (second) should appear first
+    expect(items[0].textContent).toContain("second");
+    expect(items[1].textContent).toContain("first");
+  });
+
+  it("dismiss button on an item removes it from the list", () => {
+    pushNotification("api", "Error A", "error");
+    pushNotification("poll", "Error B", "error");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const dismissBtns = screen.getAllByLabelText("Dismiss notification");
+    expect(dismissBtns).toHaveLength(2);
+    fireEvent.click(dismissBtns[0]);
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+  });
+
+  it("Mark all as read keeps notifications but removes unread styling", () => {
+    pushNotification("api", "Unread error", "error");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+
+    const items = screen.getAllByRole("listitem");
+    expect(items[0].className).toContain("bg-blue-50/50");
+
+    fireEvent.click(screen.getByText("Mark all as read"));
+    // Notifications still present
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    // Unread background class removed
+    expect(screen.getAllByRole("listitem")[0].className).not.toContain("bg-blue-50/50");
+  });
+
+  it("Dismiss all empties the list and mutes sources", () => {
+    pushNotification("api", "Error", "error");
+    pushNotification("search", "Warning", "warning");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+
+    fireEvent.click(screen.getByText("Dismiss all"));
+    // List is empty
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+    expect(screen.getByText("No notifications")).toBeDefined();
+    // Sources are muted
+    expect(mutedSources.has("api")).toBe(true);
+    expect(mutedSources.has("search")).toBe(true);
+  });
+
+  it("calls onClose when overlay backdrop is clicked", () => {
+    const onClose = vi.fn();
+    render(() => <NotificationDrawer open={true} onClose={onClose} />);
+    vi.advanceTimersByTime(0);
+    // The overlay is the element with bg-black/40
+    const overlay = document.querySelector("[aria-hidden='true']") as HTMLElement;
+    expect(overlay).not.toBeNull();
+    fireEvent.click(overlay);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("calls onClose when X button is clicked", () => {
+    const onClose = vi.fn();
+    render(() => <NotificationDrawer open={true} onClose={onClose} />);
+    vi.advanceTimersByTime(0);
+    fireEvent.click(screen.getByLabelText("Close notifications"));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("shows empty state text when no notifications", () => {
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    expect(screen.getByText("No notifications")).toBeDefined();
+  });
+
+  it("unread notifications have bg-blue-50/50 background class", () => {
+    pushNotification("api", "Unread notification", "error");
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const item = screen.getByRole("listitem");
+    expect(item.className).toContain("bg-blue-50/50");
+  });
+
+  it("read notifications do not have bg-blue-50/50 background class", () => {
+    pushNotification("api", "Read notification", "error");
+    markAllAsRead();
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const item = screen.getByRole("listitem");
+    expect(item.className).not.toContain("bg-blue-50/50");
+  });
+
+  it("has role=dialog and proper aria labels", () => {
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const dialog = screen.getByRole("dialog");
+    expect(dialog.getAttribute("aria-label")).toBe("Notifications");
+    expect(screen.getByLabelText("Close notifications")).toBeDefined();
+  });
+
+  it("Escape key calls onClose", () => {
+    const onClose = vi.fn();
+    render(() => <NotificationDrawer open={true} onClose={onClose} />);
+    vi.advanceTimersByTime(0);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(onClose).toHaveBeenCalled();
+  });
+});

From 36385578e2f738f8af26f9ffd598299a225663d1 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:55:04 -0400
Subject: [PATCH 04/14] fix(notifications): moves mutedSources export to
 ToastContainer, removes circular import

---
 src/app/components/shared/ToastContainer.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index a43db3ac..81b23983 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -50,8 +50,9 @@ export function severityConfig(severity: NotificationSeverity): SeverityConfig {
   }
 }
 
-// Import mutedSources from NotificationDrawer — shared session-only mute set
-import { mutedSources } from "./NotificationDrawer";
+// Module-level muted sources — session only, resets on page reload
+// Populated by NotificationDrawer's "Dismiss all" action
+export const mutedSources = new Set<string>();
 
 interface ToastItem {
   notification: AppNotification;

From cd9780153f901e12b70d7fb16ffab32f865ca966 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:55:49 -0400
Subject: [PATCH 05/14] feat(notifications): adds bell icon with unread badge
 to header

---
 src/app/components/layout/Header.tsx          | 203 +++++++++++-------
 .../components/shared/NotificationDrawer.tsx  |   9 +-
 tests/components/DashboardPage.test.tsx       |   6 +
 tests/components/layout/Header.test.tsx       |  48 +++++
 .../shared/NotificationDrawer.test.tsx        |   3 +-
 5 files changed, 178 insertions(+), 91 deletions(-)

diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index 4852ff02..8ac9ab24 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -1,16 +1,29 @@
-import { Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { user, clearAuth } from "../../stores/auth";
 import { getCoreRateLimit, getSearchRateLimit } from "../../services/github";
+import { getUnreadCount, markAllAsRead } from "../../lib/errors";
+import NotificationDrawer from "../shared/NotificationDrawer";
+import ToastContainer from "../shared/ToastContainer";
 
 export default function Header() {
   const navigate = useNavigate();
+  const [drawerOpen, setDrawerOpen] = createSignal(false);
 
   function handleLogout() {
     clearAuth();
     navigate("/login");
   }
 
+  function toggleDrawer() {
+    if (!drawerOpen()) {
+      markAllAsRead();
+      setDrawerOpen(true);
+    } else {
+      setDrawerOpen(false);
+    }
+  }
+
   const coreRL = () => getCoreRateLimit();
   const searchRL = () => getSearchRateLimit();
 
@@ -20,95 +33,121 @@ export default function Header() {
   }
 
   return (
-    <header class="fixed top-0 left-0 right-0 z-50 h-14 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 gap-4">
-      <span class="font-semibold text-gray-900 dark:text-gray-100 text-lg shrink-0">
-        GitHub Tracker
-      </span>
+    <>
+      <header class="fixed top-0 left-0 right-0 z-50 h-14 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 gap-4">
+        <span class="font-semibold text-gray-900 dark:text-gray-100 text-lg shrink-0">
+          GitHub Tracker
+        </span>
 
-      <div class="flex-1" />
+        <div class="flex-1" />
 
-      <Show when={coreRL() || searchRL()}>
-        <div class="flex items-center gap-2 shrink-0">
-          <span class="text-xs font-medium text-gray-400 dark:text-gray-500">Rate Limits</span>
-          <div class="flex flex-col items-end text-xs tabular-nums leading-tight gap-0.5">
-            <Show when={coreRL()}>
-              {(rl) => (
-                <span
-                  class={rl().remaining < 500 ? "text-amber-600 dark:text-amber-400" : "text-gray-500 dark:text-gray-400"}
-                  title={`Core rate limit resets at ${rl().resetAt.toLocaleTimeString()}`}
-                >
-                  {formatLimit(rl().remaining, 5000, "hr")}
-                </span>
-              )}
-            </Show>
-            <Show when={searchRL()}>
-              {(rl) => (
-                <span
-                  class={rl().remaining < 5 ? "text-amber-600 dark:text-amber-400" : "text-gray-500 dark:text-gray-400"}
-                  title={`Search rate limit resets at ${rl().resetAt.toLocaleTimeString()}`}
-                >
-                  {formatLimit(rl().remaining, 30, "min")}
-                </span>
-              )}
-            </Show>
+        <Show when={coreRL() || searchRL()}>
+          <div class="flex items-center gap-2 shrink-0">
+            <span class="text-xs font-medium text-gray-400 dark:text-gray-500">Rate Limits</span>
+            <div class="flex flex-col items-end text-xs tabular-nums leading-tight gap-0.5">
+              <Show when={coreRL()}>
+                {(rl) => (
+                  <span
+                    class={rl().remaining < 500 ? "text-amber-600 dark:text-amber-400" : "text-gray-500 dark:text-gray-400"}
+                    title={`Core rate limit resets at ${rl().resetAt.toLocaleTimeString()}`}
+                  >
+                    {formatLimit(rl().remaining, 5000, "hr")}
+                  </span>
+                )}
+              </Show>
+              <Show when={searchRL()}>
+                {(rl) => (
+                  <span
+                    class={rl().remaining < 5 ? "text-amber-600 dark:text-amber-400" : "text-gray-500 dark:text-gray-400"}
+                    title={`Search rate limit resets at ${rl().resetAt.toLocaleTimeString()}`}
+                  >
+                    {formatLimit(rl().remaining, 30, "min")}
+                  </span>
+                )}
+              </Show>
+            </div>
           </div>
-        </div>
-      </Show>
+        </Show>
 
-      <Show when={user()}>
-        {(u) => (
-          <div class="flex items-center gap-2 shrink-0">
-            <img
-              src={u().avatar_url}
-              alt={u().login}
-              class="h-7 w-7 rounded-full"
+        <Show when={user()}>
+          {(u) => (
+            <div class="flex items-center gap-2 shrink-0">
+              <img
+                src={u().avatar_url}
+                alt={u().login}
+                class="h-7 w-7 rounded-full"
+              />
+              <span class="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline">
+                {u().name ?? u().login}
+              </span>
+            </div>
+          )}
+        </Show>
+
+        <a
+          href="/settings"
+          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0"
+          aria-label="Settings"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+              clip-rule="evenodd"
             />
-            <span class="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline">
-              {u().name ?? u().login}
-            </span>
-          </div>
-        )}
-      </Show>
+          </svg>
+        </a>
 
-      <a
-        href="/settings"
-        class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0"
-        aria-label="Settings"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+        {/* Bell icon with unread badge */}
+        <button
+          onClick={toggleDrawer}
+          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0 relative"
+          aria-label="Notifications"
         >
-          <path
-            fill-rule="evenodd"
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </a>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+          </svg>
+          <Show when={getUnreadCount() > 0}>
+            <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
+              {getUnreadCount() > 9 ? "9+" : getUnreadCount()}
+            </span>
+          </Show>
+        </button>
 
-      <button
-        onClick={handleLogout}
-        class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0"
-        aria-label="Sign out"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+        <button
+          onClick={handleLogout}
+          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0"
+          aria-label="Sign out"
         >
-          <path
-            fill-rule="evenodd"
-            d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </header>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </header>
+      <NotificationDrawer open={drawerOpen()} onClose={() => setDrawerOpen(false)} />
+      <ToastContainer />
+    </>
   );
 }
diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
index bdf4a115..decd77b3 100644
--- a/src/app/components/shared/NotificationDrawer.tsx
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -4,16 +4,9 @@ import {
   markAllAsRead,
   clearNotifications,
   dismissError,
-  type NotificationSeverity,
 } from "../../lib/errors";
 import { relativeTime } from "../../lib/format";
-import { severityConfig } from "./ToastContainer";
-
-// Module-level muted sources — session only, resets on page reload
-export const mutedSources = new Set<string>();
-
-export type { NotificationSeverity };
-export { severityConfig };
+import { severityConfig, mutedSources } from "./ToastContainer";
 
 interface NotificationDrawerProps {
   open: boolean;
diff --git a/tests/components/DashboardPage.test.tsx b/tests/components/DashboardPage.test.tsx
index 3d25421f..84a838ee 100644
--- a/tests/components/DashboardPage.test.tsx
+++ b/tests/components/DashboardPage.test.tsx
@@ -42,9 +42,15 @@ vi.mock("../../src/app/services/github", () => ({
 // Mock errors lib — return empty by default
 vi.mock("../../src/app/lib/errors", () => ({
   getErrors: vi.fn().mockReturnValue([]),
+  getNotifications: vi.fn().mockReturnValue([]),
+  getUnreadCount: vi.fn().mockReturnValue(0),
+  markAllAsRead: vi.fn(),
   dismissError: vi.fn(),
+  dismissNotificationBySource: vi.fn(),
   pushError: vi.fn(),
+  pushNotification: vi.fn(),
   clearErrors: vi.fn(),
+  clearNotifications: vi.fn(),
 }));
 
 // capturedFetchAll is populated by the createPollCoordinator mock each time
diff --git a/tests/components/layout/Header.test.tsx b/tests/components/layout/Header.test.tsx
index e8b1c9a0..9dac3f31 100644
--- a/tests/components/layout/Header.test.tsx
+++ b/tests/components/layout/Header.test.tsx
@@ -33,14 +33,31 @@ vi.mock("../../../src/app/services/github", () => ({
   getRateLimit: () => null,
 }));
 
+// Mock errors module so Header's notification imports work
+vi.mock("../../../src/app/lib/errors", () => ({
+  getUnreadCount: vi.fn(() => 0),
+  markAllAsRead: vi.fn(),
+  getNotifications: vi.fn(() => []),
+  clearNotifications: vi.fn(),
+  pushNotification: vi.fn(),
+  pushError: vi.fn(),
+  dismissError: vi.fn(),
+  dismissNotificationBySource: vi.fn(),
+  getErrors: vi.fn(() => []),
+  clearErrors: vi.fn(),
+}));
+
 import Header from "../../../src/app/components/layout/Header";
 import * as authStore from "../../../src/app/stores/auth";
 import * as githubService from "../../../src/app/services/github";
+import * as errorsModule from "../../../src/app/lib/errors";
 import { render } from "@solidjs/testing-library";
 
 beforeEach(() => {
   mockNavigate.mockClear();
   vi.mocked(authStore.clearAuth).mockClear();
+  vi.mocked(errorsModule.getUnreadCount).mockReturnValue(0);
+  vi.mocked(errorsModule.markAllAsRead).mockClear();
 });
 
 describe("Header", () => {
@@ -101,4 +118,35 @@ describe("Header", () => {
     render(() => <Header />);
     screen.getByLabelText("Sign out");
   });
+
+  it("bell button renders with aria-label Notifications", () => {
+    render(() => <Header />);
+    expect(screen.getByLabelText("Notifications")).toBeDefined();
+  });
+
+  it("unread badge hidden when unread count is 0", () => {
+    vi.mocked(errorsModule.getUnreadCount).mockReturnValue(0);
+    render(() => <Header />);
+    expect(screen.queryByText("1")).toBeNull();
+  });
+
+  it("unread badge shows count when getUnreadCount > 0", () => {
+    vi.mocked(errorsModule.getUnreadCount).mockReturnValue(3);
+    render(() => <Header />);
+    expect(screen.getByText("3")).toBeDefined();
+  });
+
+  it("badge shows 9+ when unread count exceeds 9", () => {
+    vi.mocked(errorsModule.getUnreadCount).mockReturnValue(10);
+    render(() => <Header />);
+    expect(screen.getByText("9+")).toBeDefined();
+  });
+
+  it("clicking bell button calls markAllAsRead", async () => {
+    const user = userEvent.setup();
+    render(() => <Header />);
+    const bellBtn = screen.getByLabelText("Notifications");
+    await user.click(bellBtn);
+    expect(errorsModule.markAllAsRead).toHaveBeenCalled();
+  });
 });
diff --git a/tests/components/shared/NotificationDrawer.test.tsx b/tests/components/shared/NotificationDrawer.test.tsx
index 73daac98..375c6880 100644
--- a/tests/components/shared/NotificationDrawer.test.tsx
+++ b/tests/components/shared/NotificationDrawer.test.tsx
@@ -6,7 +6,8 @@ import {
   clearNotifications,
   markAllAsRead,
 } from "../../../src/app/lib/errors";
-import NotificationDrawer, { mutedSources } from "../../../src/app/components/shared/NotificationDrawer";
+import NotificationDrawer from "../../../src/app/components/shared/NotificationDrawer";
+import { mutedSources } from "../../../src/app/components/shared/ToastContainer";
 
 beforeEach(() => {
   clearNotifications();

From db694b457b5c234890a937fc5c9d2933fc47103f Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 21:58:15 -0400
Subject: [PATCH 06/14] refactor(notifications): replaces clear-and-repush with
 reconciliation

---
 src/app/services/poll.ts    |  38 +++++++----
 tests/services/poll.test.ts | 124 +++++++++++++++++++++++++++++-------
 2 files changed, 125 insertions(+), 37 deletions(-)

diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index c7fc95d7..98f097b3 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -13,7 +13,7 @@ import {
   resetEmptyActionRepos,
 } from "./api";
 import { detectNewItems, dispatchNotifications, _resetNotificationState } from "../lib/notifications";
-import { pushError, clearErrors, getErrors } from "../lib/errors";
+import { pushError, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking } from "../lib/errors";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -97,7 +97,7 @@ async function hasNotificationChanges(): Promise<boolean> {
       (err as { status?: number }).status === 403
     ) {
       console.warn("[poll] Notifications API returned 403 — disabling gate");
-      pushError("notifications", "Notifications API returned 403 — check that the notifications scope is granted", false);
+      pushError("notifications", "Notifications API returned 403 — check that the notifications scope is granted", false); // kept as pushError — this is a real error
       _notifGateDisabled = true;
     }
     return true;
@@ -236,34 +236,44 @@ export function createPollCoordinator(
   let hiddenAt: number | null = null;
   let destroyed = false;
 
+  // Sources managed by the poll coordinator — used for reconciliation
+  const POLL_MANAGED_SOURCES = new Set(["poll", "search", "graphql", "rate-limit", "notifications"]);
+
   async function doFetch(): Promise<void> {
     if (destroyed || isRefreshing()) return;
     setIsRefreshing(true);
+
+    // Snapshot sources of notifications from previous cycle (for reconciliation)
+    const previousSources = new Set(
+      getNotifications()
+        .filter((n) => POLL_MANAGED_SOURCES.has(n.source) || n.source.includes("/"))
+        .map((n) => n.source)
+    );
+    startCycleTracking();
+
     try {
-      // Snapshot previous errors before clearing so they can be restored on skip.
-      // Clear before fetchAll so informational pushError calls during the fetch survive.
-      const previousErrors = getErrors();
-      clearErrors();
       const data = await fetchAll();
-      // When notifications gate determined nothing changed, restore previous errors
-      // (the repos that were failing are still failing) and skip all processing.
-      if (data.skipped) {
-        for (const err of previousErrors) {
-          pushError(err.source, err.message, err.retryable);
-        }
-        return;
-      }
+      if (data.skipped) return; // finally handles endCycleTracking + setIsRefreshing
       setLastRefreshAt(new Date());
       // Surface per-repo API errors globally
       for (const err of data.errors) {
         pushError(err.repo, err.message, err.retryable);
       }
+      // Reconcile: dismiss notifications for sources that didn't push this cycle
+      const pushedThisCycle = endCycleTracking();
+      for (const source of previousSources) {
+        if (!pushedThisCycle.has(source)) {
+          dismissNotificationBySource(source);
+        }
+      }
       const newItems = detectNewItems(data);
       dispatchNotifications(newItems, config);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Unknown error during data fetch";
       pushError("poll", message, true);
+      // No reconciliation on catch — can't know what resolved
     } finally {
+      endCycleTracking(); // Safe to call twice (returns empty Set if already ended)
       setIsRefreshing(false);
     }
   }
diff --git a/tests/services/poll.test.ts b/tests/services/poll.test.ts
index 1999b9e8..0316abeb 100644
--- a/tests/services/poll.test.ts
+++ b/tests/services/poll.test.ts
@@ -5,10 +5,19 @@ import { createPollCoordinator, type DashboardData } from "../../src/app/service
 
 // Mock pushError so we can spy on it
 const mockPushError = vi.fn();
+const mockDismissNotificationBySource = vi.fn();
+const mockStartCycleTracking = vi.fn();
+const mockEndCycleTracking = vi.fn(() => new Set<string>());
+const mockGetNotifications = vi.fn(() => [] as import("../../src/app/lib/errors").AppNotification[]);
 vi.mock("../../src/app/lib/errors", () => ({
   pushError: (...args: unknown[]) => mockPushError(...args),
   clearErrors: vi.fn(),
   getErrors: vi.fn(() => []),
+  getNotifications: () => mockGetNotifications(),
+  dismissNotificationBySource: (source: string) => mockDismissNotificationBySource(source),
+  startCycleTracking: () => mockStartCycleTracking(),
+  endCycleTracking: () => mockEndCycleTracking(),
+  pushNotification: vi.fn(),
 }));
 
 // Mock notifications so doFetch doesn't fail on detectNewItems
@@ -64,6 +73,11 @@ describe("createPollCoordinator", () => {
       writable: true,
       configurable: true,
     });
+    // Reset new mock functions
+    mockDismissNotificationBySource.mockClear();
+    mockStartCycleTracking.mockClear();
+    mockEndCycleTracking.mockClear().mockReturnValue(new Set<string>());
+    mockGetNotifications.mockClear().mockReturnValue([]);
   });
 
   afterEach(() => {
@@ -387,24 +401,95 @@ describe("createPollCoordinator", () => {
     });
   });
 
-  // ── qa-3: doFetch error-restore-on-skip ──────────────────────────────────────
+  // ── qa-3: doFetch skipped path — no restore (reconciliation replaces snapshot/restore) ──
 
-  it("restores previous errors via pushError when fetchAll returns skipped:true", async () => {
+  it("skipped fetch does NOT call pushError for previous errors (no restore logic)", async () => {
     mockPushError.mockClear();
 
-    const previousError = {
-      id: "err1",
-      source: "graphql",
-      message: "Rate limited",
-      timestamp: Date.now(),
-      retryable: true,
-      severity: "error" as const,
-      read: false,
+    const skippedData: DashboardData = {
+      issues: [],
+      pullRequests: [],
+      workflowRuns: [],
+      errors: [],
+      skipped: true,
     };
+    const fetchAll = vi.fn().mockResolvedValue(skippedData);
+
+    await createRoot(async (dispose) => {
+      createPollCoordinator(makeGetInterval(0), fetchAll);
+
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
 
-    // Swap getErrors to return a pre-existing error for this test
-    const { getErrors } = await import("../../src/app/lib/errors");
-    vi.mocked(getErrors).mockReturnValue([previousError]);
+      // No pushError calls on skip — notifications persist naturally
+      expect(mockPushError).not.toHaveBeenCalled();
+      dispose();
+    });
+  });
+
+  // ── qa-3b: reconciliation — resolved error is dismissed ───────────────────────
+
+  it("dismisses resolved errors: source in previous cycle but not pushed in current cycle", async () => {
+    mockPushError.mockClear();
+    mockDismissNotificationBySource.mockClear();
+
+    // Simulate "graphql" was present in previous cycle
+    mockGetNotifications.mockReturnValue([
+      { id: "n1", source: "graphql", message: "Rate limited", timestamp: Date.now(), retryable: true, severity: "error" as const, read: false },
+    ]);
+    // endCycleTracking returns only "poll" — "graphql" was NOT pushed this cycle
+    mockEndCycleTracking.mockReturnValue(new Set(["poll"]));
+
+    const fetchAll = vi.fn().mockResolvedValue(emptyData);
+
+    await createRoot(async (dispose) => {
+      createPollCoordinator(makeGetInterval(0), fetchAll);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(mockDismissNotificationBySource).toHaveBeenCalledWith("graphql");
+      dispose();
+    });
+
+    mockGetNotifications.mockReturnValue([]);
+    mockEndCycleTracking.mockReturnValue(new Set());
+  });
+
+  // ── qa-3c: reconciliation — persistent error not dismissed ────────────────────
+
+  it("does not dismiss persistent errors pushed in both cycles", async () => {
+    mockDismissNotificationBySource.mockClear();
+
+    // "graphql" in previous cycle
+    mockGetNotifications.mockReturnValue([
+      { id: "n1", source: "graphql", message: "Rate limited", timestamp: Date.now(), retryable: true, severity: "error" as const, read: false },
+    ]);
+    // endCycleTracking includes "graphql" — it was pushed this cycle too
+    mockEndCycleTracking.mockReturnValue(new Set(["graphql"]));
+
+    const fetchAll = vi.fn().mockResolvedValue(emptyData);
+
+    await createRoot(async (dispose) => {
+      createPollCoordinator(makeGetInterval(0), fetchAll);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(mockDismissNotificationBySource).not.toHaveBeenCalledWith("graphql");
+      dispose();
+    });
+
+    mockGetNotifications.mockReturnValue([]);
+    mockEndCycleTracking.mockReturnValue(new Set());
+  });
+
+  // ── qa-3d: endCycleTracking called on skipped path ────────────────────────────
+
+  it("endCycleTracking is called on skipped path (no tracking state leak)", async () => {
+    mockEndCycleTracking.mockClear();
+    mockStartCycleTracking.mockClear();
 
     const skippedData: DashboardData = {
       issues: [],
@@ -417,22 +502,15 @@ describe("createPollCoordinator", () => {
 
     await createRoot(async (dispose) => {
       createPollCoordinator(makeGetInterval(0), fetchAll);
-
       await Promise.resolve();
       await Promise.resolve();
       await Promise.resolve();
 
-      // pushError must have been called to restore the previous error
-      expect(mockPushError).toHaveBeenCalledWith(
-        previousError.source,
-        previousError.message,
-        previousError.retryable
-      );
+      // startCycleTracking called, endCycleTracking called in finally
+      expect(mockStartCycleTracking).toHaveBeenCalled();
+      expect(mockEndCycleTracking).toHaveBeenCalled();
       dispose();
     });
-
-    // Restore getErrors to default for other tests
-    vi.mocked(getErrors).mockReturnValue([]);
   });
 
   // ── qa-11: Jitter test with fixed Math.random to make interval deterministic ──

From 06945c9c0a235e6ab4fd302f225e6aae12d34b47 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 22:00:29 -0400
Subject: [PATCH 07/14] refactor(notifications): migrates callers to
 appropriate severity

---
 src/app/services/api.ts                  |  8 ++++----
 src/app/services/github.ts               |  6 +++---
 src/app/services/poll.ts                 |  4 ++--
 tests/services/poll-fetchAllData.test.ts | 14 ++++++++++----
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/services/api.ts b/src/app/services/api.ts
index 47565b3b..e01404a9 100644
--- a/src/app/services/api.ts
+++ b/src/app/services/api.ts
@@ -1,6 +1,6 @@
 import { getClient, cachedRequest, updateRateLimitFromHeaders } from "./github";
 import { evictByPrefix } from "../stores/cache";
-import { pushError } from "../lib/errors";
+import { pushNotification } from "../lib/errors";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -274,13 +274,13 @@ async function searchAllPages(
         console.warn(
           `[api] Search results incomplete for: ${query.slice(0, 80)}…`
         );
-        pushError("search", "Search results may be incomplete — GitHub returned partial data", false);
+        pushNotification("search", "Search results may be incomplete — GitHub returned partial data", "warning");
       }
       if (items.length >= 1000 && data.total_count > 1000) {
         console.warn(
           `[api] Search results capped at 1000 (${data.total_count} total) for: ${query.slice(0, 80)}…`
         );
-        pushError("search", `Search results capped at 1,000 of ${data.total_count.toLocaleString()} total — some items are hidden`, false);
+        pushNotification("search", `Search results capped at 1,000 of ${data.total_count.toLocaleString()} total — some items are hidden`, "warning");
       }
       break;
     }
@@ -749,7 +749,7 @@ async function batchFetchCheckStatuses(
   // REST uses the core rate limit (5000/hr, separate from GraphQL 5000 pts/hr).
   // ETag caching via cachedRequest means unchanged PRs return 304 (free).
   if (failedPrs.length > 0) {
-    pushError("graphql", `Fetching check/review data via REST for ${failedPrs.length} PR(s) — GraphQL rate limited`, true);
+    pushNotification("graphql", `Fetching check/review data via REST for ${failedPrs.length} PR(s) — GraphQL rate limited`, "info", true);
     await restFallbackCheckStatuses(octokit, failedPrs, results);
   }
 
diff --git a/src/app/services/github.ts b/src/app/services/github.ts
index 8a546e77..4dbe401c 100644
--- a/src/app/services/github.ts
+++ b/src/app/services/github.ts
@@ -5,7 +5,7 @@ import { retry } from "@octokit/plugin-retry";
 import { paginateRest } from "@octokit/plugin-paginate-rest";
 import { cachedFetch, type ConditionalHeaders } from "../stores/cache";
 import { token } from "../stores/auth";
-import { pushError } from "../lib/errors";
+import { pushNotification } from "../lib/errors";
 
 // ── Plugin-extended Octokit class ────────────────────────────────────────────
 
@@ -73,7 +73,7 @@ export function createGitHubClient(token: string): GitHubOctokitInstance {
         console.warn(
           `[github] Rate limit hit for ${options.method} ${options.url}. Retry after ${retryAfter}s.`
         );
-        pushError("rate-limit", `Rate limit hit — retrying in ${retryAfter}s`, true);
+        pushNotification("rate-limit", `Rate limit hit — retrying in ${retryAfter}s`, "warning", true);
         return retryCount < 1;
       },
       onSecondaryRateLimit: (
@@ -85,7 +85,7 @@ export function createGitHubClient(token: string): GitHubOctokitInstance {
         console.warn(
           `[github] Secondary rate limit for ${options.method} ${options.url}. Retry after ${retryAfter}s.`
         );
-        pushError("rate-limit", `Secondary rate limit — retrying in ${retryAfter}s. Consider reducing tracked repos.`, true);
+        pushNotification("rate-limit", `Secondary rate limit — retrying in ${retryAfter}s. Consider reducing tracked repos.`, "warning", true);
         return retryCount < 1;
       },
     },
diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index 98f097b3..fd91513a 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -13,7 +13,7 @@ import {
   resetEmptyActionRepos,
 } from "./api";
 import { detectNewItems, dispatchNotifications, _resetNotificationState } from "../lib/notifications";
-import { pushError, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking } from "../lib/errors";
+import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking } from "../lib/errors";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -97,7 +97,7 @@ async function hasNotificationChanges(): Promise<boolean> {
       (err as { status?: number }).status === 403
     ) {
       console.warn("[poll] Notifications API returned 403 — disabling gate");
-      pushError("notifications", "Notifications API returned 403 — check that the notifications scope is granted", false); // kept as pushError — this is a real error
+      pushNotification("notifications", "Notifications API returned 403 — check that the notifications scope is granted", "warning");
       _notifGateDisabled = true;
     }
     return true;
diff --git a/tests/services/poll-fetchAllData.test.ts b/tests/services/poll-fetchAllData.test.ts
index b0b401dc..672d3e97 100644
--- a/tests/services/poll-fetchAllData.test.ts
+++ b/tests/services/poll-fetchAllData.test.ts
@@ -41,8 +41,14 @@ vi.mock("../../src/app/lib/notifications", () => ({
 // Mock errors store
 vi.mock("../../src/app/lib/errors", () => ({
   pushError: vi.fn(),
+  pushNotification: vi.fn(),
   clearErrors: vi.fn(),
+  clearNotifications: vi.fn(),
   getErrors: vi.fn(() => []),
+  getNotifications: vi.fn(() => []),
+  dismissNotificationBySource: vi.fn(),
+  startCycleTracking: vi.fn(),
+  endCycleTracking: vi.fn(() => new Set()),
 }));
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -496,7 +502,7 @@ describe("fetchAllData — notification gate 403 auto-disable", () => {
 
     const { getClient } = await import("../../src/app/services/github");
     const { fetchIssues, fetchPullRequests, fetchWorkflowRuns } = await import("../../src/app/services/api");
-    const { pushError } = await import("../../src/app/lib/errors");
+    const { pushNotification } = await import("../../src/app/lib/errors");
     const mockOctokit = makeMockOctokit();
     vi.mocked(getClient).mockReturnValue(mockOctokit as unknown as ReturnType<typeof getClient>);
     vi.mocked(fetchIssues).mockResolvedValue(emptyIssueResult);
@@ -514,11 +520,11 @@ describe("fetchAllData — notification gate 403 auto-disable", () => {
     mockOctokit.request.mockRejectedValueOnce({ status: 403 });
     await fetchAllData();
 
-    // Gate received 403 → _notifGateDisabled = true → pushError called
-    expect(pushError).toHaveBeenCalledWith(
+    // Gate received 403 → _notifGateDisabled = true → pushNotification called
+    expect(pushNotification).toHaveBeenCalledWith(
       "notifications",
       expect.stringContaining("403"),
-      false
+      "warning"
     );
 
     // Third call — gate should be DISABLED, no notifications request

From 72060e1878e2cf2720d69eb858ea9755dfcb344f Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 22:03:35 -0400
Subject: [PATCH 08/14] refactor(notifications): removes ErrorBannerList for
 toast/drawer

---
 src/app/components/dashboard/ActionsTab.tsx   |  4 --
 .../components/dashboard/DashboardPage.tsx    |  8 ---
 src/app/components/dashboard/IssuesTab.tsx    |  3 -
 .../components/dashboard/PullRequestsTab.tsx  |  3 -
 src/app/components/shared/ErrorBannerList.tsx | 59 -------------------
 tests/components/ActionsTab.test.tsx          |  9 ---
 tests/components/IssuesTab.test.tsx           | 20 +------
 tests/components/PullRequestsTab.test.tsx     | 20 +------
 .../shared/ErrorBannerList.test.tsx           | 52 ----------------
 9 files changed, 2 insertions(+), 176 deletions(-)
 delete mode 100644 src/app/components/shared/ErrorBannerList.tsx
 delete mode 100644 tests/components/shared/ErrorBannerList.test.tsx

diff --git a/src/app/components/dashboard/ActionsTab.tsx b/src/app/components/dashboard/ActionsTab.tsx
index 62be2dea..2a8f3d9f 100644
--- a/src/app/components/dashboard/ActionsTab.tsx
+++ b/src/app/components/dashboard/ActionsTab.tsx
@@ -5,7 +5,6 @@ import { config } from "../../stores/config";
 import { viewState, setViewState, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type ActionsFilterField } from "../../stores/view";
 import WorkflowRunRow from "./WorkflowRunRow";
 import IgnoreBadge from "./IgnoreBadge";
-import ErrorBannerList from "../shared/ErrorBannerList";
 import SkeletonRows from "../shared/SkeletonRows";
 import FilterChips from "../shared/FilterChips";
 import type { FilterChipGroupDef } from "../shared/FilterChips";
@@ -199,9 +198,6 @@ export default function ActionsTab(props: ActionsTabProps) {
         <SkeletonRows label="Loading workflow runs" />
       </Show>
 
-      {/* Error */}
-      <ErrorBannerList errors={props.errors?.map((e) => ({ source: e.repo, message: e.message, retryable: e.retryable }))} />
-
       {/* Empty */}
       <Show
         when={
diff --git a/src/app/components/dashboard/DashboardPage.tsx b/src/app/components/dashboard/DashboardPage.tsx
index 395e9ee2..e7c5ea9d 100644
--- a/src/app/components/dashboard/DashboardPage.tsx
+++ b/src/app/components/dashboard/DashboardPage.tsx
@@ -11,8 +11,6 @@ import { viewState, updateViewState } from "../../stores/view";
 import type { Issue, PullRequest, WorkflowRun, ApiError } from "../../services/api";
 import { createPollCoordinator, fetchAllData, type DashboardData } from "../../services/poll";
 import { clearAuth, user, onAuthCleared, DASHBOARD_STORAGE_KEY } from "../../stores/auth";
-import { getErrors, dismissError } from "../../lib/errors";
-import ErrorBannerList from "../shared/ErrorBannerList";
 
 // ── Shared dashboard store (module-level to survive navigation) ─────────────
 
@@ -191,12 +189,6 @@ export default function DashboardPage() {
           onRefresh={() => _coordinator()?.manualRefresh()}
         />
 
-        {/* Global error banner */}
-        <ErrorBannerList
-          errors={getErrors().map((e) => ({ source: e.source, message: e.message, retryable: e.retryable }))}
-          onDismiss={(index) => dismissError(getErrors()[index].id)}
-        />
-
         <main class="flex-1 overflow-auto">
           <Switch>
             <Match when={activeTab() === "issues"}>
diff --git a/src/app/components/dashboard/IssuesTab.tsx b/src/app/components/dashboard/IssuesTab.tsx
index 356ebb70..455a9890 100644
--- a/src/app/components/dashboard/IssuesTab.tsx
+++ b/src/app/components/dashboard/IssuesTab.tsx
@@ -6,7 +6,6 @@ import type { Issue, ApiError } from "../../services/api";
 import ItemRow from "./ItemRow";
 import IgnoreBadge from "./IgnoreBadge";
 import SortIcon from "../shared/SortIcon";
-import ErrorBannerList from "../shared/ErrorBannerList";
 import PaginationControls from "../shared/PaginationControls";
 import FilterChips from "../shared/FilterChips";
 import type { FilterChipGroupDef } from "../shared/FilterChips";
@@ -162,8 +161,6 @@ export default function IssuesTab(props: IssuesTabProps) {
 
   return (
     <div class="flex flex-col h-full">
-      <ErrorBannerList errors={props.errors?.map((e) => ({ source: e.repo, message: e.message, retryable: e.retryable }))} />
-
       {/* Column headers */}
       <div
         role="rowgroup"
diff --git a/src/app/components/dashboard/PullRequestsTab.tsx b/src/app/components/dashboard/PullRequestsTab.tsx
index d91eee0c..89dc748f 100644
--- a/src/app/components/dashboard/PullRequestsTab.tsx
+++ b/src/app/components/dashboard/PullRequestsTab.tsx
@@ -8,7 +8,6 @@ import ItemRow from "./ItemRow";
 import StatusDot from "../shared/StatusDot";
 import IgnoreBadge from "./IgnoreBadge";
 import SortIcon from "../shared/SortIcon";
-import ErrorBannerList from "../shared/ErrorBannerList";
 import PaginationControls from "../shared/PaginationControls";
 import FilterChips from "../shared/FilterChips";
 import type { FilterChipGroupDef } from "../shared/FilterChips";
@@ -244,8 +243,6 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
 
   return (
     <div class="flex flex-col h-full">
-      <ErrorBannerList errors={props.errors?.map((e) => ({ source: e.repo, message: e.message, retryable: e.retryable }))} />
-
       {/* Column headers */}
       <div
         role="rowgroup"
diff --git a/src/app/components/shared/ErrorBannerList.tsx b/src/app/components/shared/ErrorBannerList.tsx
deleted file mode 100644
index 11b3124e..00000000
--- a/src/app/components/shared/ErrorBannerList.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { For, Show } from "solid-js";
-
-export interface ErrorBannerItem {
-  source: string;
-  message: string;
-  retryable?: boolean;
-}
-
-export default function ErrorBannerList(props: {
-  errors?: ErrorBannerItem[];
-  onDismiss?: (index: number) => void;
-}) {
-  return (
-    <Show when={props.errors && props.errors.length > 0}>
-      <div class="px-4 pt-3 space-y-1">
-        <For each={props.errors}>
-          {(err, index) => (
-            <div
-              role="alert"
-              class="flex items-center gap-2 rounded-md bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 px-3 py-2 text-sm text-red-700 dark:text-red-300"
-            >
-              <svg
-                class="h-4 w-4 shrink-0"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <span class="flex-1">
-                <strong>{err.source}:</strong> {err.message}
-                {err.retryable && " (will retry)"}
-              </span>
-              <Show when={props.onDismiss}>
-                <button
-                  onClick={() => props.onDismiss!(index())}
-                  class="shrink-0 text-red-400 hover:text-red-600 dark:hover:text-red-200"
-                  aria-label="Dismiss error"
-                >
-                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </Show>
-            </div>
-          )}
-        </For>
-      </div>
-    </Show>
-  );
-}
diff --git a/tests/components/ActionsTab.test.tsx b/tests/components/ActionsTab.test.tsx
index 0b1f9dc0..ebd6b60c 100644
--- a/tests/components/ActionsTab.test.tsx
+++ b/tests/components/ActionsTab.test.tsx
@@ -2,7 +2,6 @@ import { describe, it, expect, beforeEach } from "vitest";
 import { render, screen } from "@solidjs/testing-library";
 import userEvent from "@testing-library/user-event";
 import ActionsTab from "../../src/app/components/dashboard/ActionsTab";
-import type { ApiError } from "../../src/app/services/api";
 import * as viewStore from "../../src/app/stores/view";
 import { makeWorkflowRun, resetViewStore } from "../helpers/index";
 
@@ -22,14 +21,6 @@ describe("ActionsTab", () => {
     expect(screen.queryByText("No workflow runs found.")).toBeNull();
   });
 
-  it("shows error banners when errors provided", () => {
-    const errors: ApiError[] = [
-      { repo: "owner/repo", statusCode: 500, message: "Server error", retryable: false },
-    ];
-    render(() => <ActionsTab workflowRuns={[]} errors={errors} />);
-    screen.getByText(/Server error/i);
-  });
-
   it("groups runs by repository", () => {
     const runs = [
       makeWorkflowRun({ repoFullName: "owner/repo-a", workflowId: 1, name: "CI" }),
diff --git a/tests/components/IssuesTab.test.tsx b/tests/components/IssuesTab.test.tsx
index c8ea15b1..2745f29d 100644
--- a/tests/components/IssuesTab.test.tsx
+++ b/tests/components/IssuesTab.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@solidjs/testing-library";
 import userEvent from "@testing-library/user-event";
 import { createSignal } from "solid-js";
 import IssuesTab from "../../src/app/components/dashboard/IssuesTab";
-import type { Issue, ApiError } from "../../src/app/services/api";
+import type { Issue } from "../../src/app/services/api";
 import { makeIssue, resetViewStore } from "../helpers/index";
 import * as viewStore from "../../src/app/stores/view";
 import { updateConfig, resetConfig } from "../../src/app/stores/config";
@@ -37,24 +37,6 @@ describe("IssuesTab", () => {
     expect(screen.queryByText(/No open issues/i)).toBeNull();
   });
 
-  it("shows error banners for each ApiError", () => {
-    const errors: ApiError[] = [
-      { repo: "owner/repo", statusCode: 500, message: "Server error", retryable: true },
-      { repo: "owner/other", statusCode: 403, message: "Forbidden", retryable: false },
-    ];
-    render(() => <IssuesTab issues={[]} errors={errors} userLogin="" />);
-    screen.getByText(/Server error/i);
-    screen.getByText(/Forbidden/i);
-  });
-
-  it("shows '(will retry)' for retryable errors", () => {
-    const errors: ApiError[] = [
-      { repo: "owner/repo", statusCode: 500, message: "Server error", retryable: true },
-    ];
-    render(() => <IssuesTab issues={[]} errors={errors} userLogin="" />);
-    screen.getByText(/will retry/i);
-  });
-
   it("filters out ignored issues", () => {
     const issue = makeIssue({ id: 99, title: "Should be hidden" });
     viewStore.ignoreItem({
diff --git a/tests/components/PullRequestsTab.test.tsx b/tests/components/PullRequestsTab.test.tsx
index d118f44b..8e5842b8 100644
--- a/tests/components/PullRequestsTab.test.tsx
+++ b/tests/components/PullRequestsTab.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@solidjs/testing-library";
 import userEvent from "@testing-library/user-event";
 import { createSignal } from "solid-js";
 import PullRequestsTab from "../../src/app/components/dashboard/PullRequestsTab";
-import type { PullRequest, ApiError } from "../../src/app/services/api";
+import type { PullRequest } from "../../src/app/services/api";
 import * as viewStore from "../../src/app/stores/view";
 import { makePullRequest, resetViewStore } from "../helpers/index";
 import { updateConfig, resetConfig } from "../../src/app/stores/config";
@@ -36,24 +36,6 @@ describe("PullRequestsTab", () => {
     expect(screen.queryByText(/No open pull requests/i)).toBeNull();
   });
 
-  it("shows error banners for each ApiError", () => {
-    const errors: ApiError[] = [
-      { repo: "owner/repo", statusCode: 500, message: "Server error", retryable: true },
-      { repo: "owner/other", statusCode: 403, message: "Forbidden", retryable: false },
-    ];
-    render(() => <PullRequestsTab pullRequests={[]} errors={errors} userLogin="" />);
-    screen.getByText(/Server error/i);
-    screen.getByText(/Forbidden/i);
-  });
-
-  it("shows '(will retry)' for retryable errors", () => {
-    const errors: ApiError[] = [
-      { repo: "owner/repo", statusCode: 500, message: "Server error", retryable: true },
-    ];
-    render(() => <PullRequestsTab pullRequests={[]} errors={errors} userLogin="" />);
-    screen.getByText(/will retry/i);
-  });
-
   it("filters out ignored PRs", () => {
     const pr = makePullRequest({ id: 99, title: "Should be hidden" });
     viewStore.ignoreItem({
diff --git a/tests/components/shared/ErrorBannerList.test.tsx b/tests/components/shared/ErrorBannerList.test.tsx
deleted file mode 100644
index 63a15cf3..00000000
--- a/tests/components/shared/ErrorBannerList.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@solidjs/testing-library";
-import ErrorBannerList, { type ErrorBannerItem } from "../../../src/app/components/shared/ErrorBannerList";
-
-function makeErrorBanner(overrides: Partial<ErrorBannerItem> = {}): ErrorBannerItem {
-  return {
-    source: "owner/repo",
-    message: "Internal server error",
-    retryable: true,
-    ...overrides,
-  };
-}
-
-describe("ErrorBannerList", () => {
-  it("renders nothing when errors is undefined", () => {
-    const { container } = render(() => <ErrorBannerList />);
-    expect(container.querySelector("[role='alert']")).toBeNull();
-  });
-
-  it("renders nothing when errors is empty array", () => {
-    const { container } = render(() => <ErrorBannerList errors={[]} />);
-    expect(container.querySelector("[role='alert']")).toBeNull();
-  });
-
-  it("renders one alert per error with source name and message", () => {
-    const errors = [
-      makeErrorBanner({ source: "owner/repo-a", message: "Not found", retryable: false }),
-      makeErrorBanner({ source: "owner/repo-b", message: "Server error", retryable: false }),
-    ];
-    render(() => <ErrorBannerList errors={errors} />);
-    const alerts = screen.getAllByRole("alert");
-    expect(alerts).toHaveLength(2);
-    expect(alerts[0].textContent).toContain("owner/repo-a");
-    expect(alerts[0].textContent).toContain("Not found");
-    expect(alerts[1].textContent).toContain("owner/repo-b");
-    expect(alerts[1].textContent).toContain("Server error");
-  });
-
-  it('shows "(will retry)" for retryable errors', () => {
-    const errors = [makeErrorBanner({ retryable: true, message: "Timeout" })];
-    render(() => <ErrorBannerList errors={errors} />);
-    const alert = screen.getByRole("alert");
-    expect(alert.textContent).toContain("(will retry)");
-  });
-
-  it('does not show "(will retry)" for non-retryable errors', () => {
-    const errors = [makeErrorBanner({ retryable: false, message: "Forbidden" })];
-    render(() => <ErrorBannerList errors={errors} />);
-    const alert = screen.getByRole("alert");
-    expect(alert.textContent).not.toContain("(will retry)");
-  });
-});

From 3b84dae5f23cb1badc82225af0dfa27b7f868962 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Tue, 24 Mar 2026 22:07:16 -0400
Subject: [PATCH 09/14] fix(notifications): prune maps, hoist constant, memo,
 focus

---
 src/app/components/layout/Header.tsx             |  8 +++++---
 src/app/components/shared/NotificationDrawer.tsx |  1 +
 src/app/components/shared/ToastContainer.tsx     | 10 ++++++++++
 src/app/services/poll.ts                         |  5 +++--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index 8ac9ab24..c7fca2e1 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -1,4 +1,4 @@
-import { createSignal, Show } from "solid-js";
+import { createMemo, createSignal, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { user, clearAuth } from "../../stores/auth";
 import { getCoreRateLimit, getSearchRateLimit } from "../../services/github";
@@ -24,6 +24,8 @@ export default function Header() {
     }
   }
 
+  const unreadCount = createMemo(() => getUnreadCount());
+
   const coreRL = () => getCoreRateLimit();
   const searchRL = () => getSearchRateLimit();
 
@@ -119,9 +121,9 @@ export default function Header() {
           >
             <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
           </svg>
-          <Show when={getUnreadCount() > 0}>
+          <Show when={unreadCount() > 0}>
             <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
-              {getUnreadCount() > 9 ? "9+" : getUnreadCount()}
+              {unreadCount() > 9 ? "9+" : unreadCount()}
             </span>
           </Show>
         </button>
diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
index decd77b3..958dde35 100644
--- a/src/app/components/shared/NotificationDrawer.tsx
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -31,6 +31,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
       }
       setClosing(false);
       setVisible(true);
+      queueMicrotask(() => closeButtonRef?.focus());
     } else {
       if (visible()) {
         setClosing(true);
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index 81b23983..ecd5225c 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -143,6 +143,16 @@ export default function ToastContainer() {
       });
       scheduleAutoDismiss(notif);
     }
+
+    // Prune stale entries from tracking Maps (IDs/sources no longer in store)
+    const currentIds = new Set(notifs.map(n => n.id));
+    for (const id of seenTimestamps.keys()) {
+      if (!currentIds.has(id)) seenTimestamps.delete(id);
+    }
+    const currentSources = new Set(notifs.map(n => n.source));
+    for (const source of lastToastedAt.keys()) {
+      if (!currentSources.has(source)) lastToastedAt.delete(source);
+    }
   });
 
   onCleanup(() => {
diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index fd91513a..8c29a5fe 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -209,6 +209,9 @@ export async function fetchAllData(): Promise<DashboardData> {
 const REJITTER_WINDOW_MS = 30_000; // ±30 seconds jitter
 const REVISIT_THRESHOLD_MS = 2 * 60 * 1000; // 2 minutes
 
+// Sources managed by the poll coordinator — used for reconciliation
+const POLL_MANAGED_SOURCES = new Set(["poll", "search", "graphql", "rate-limit", "notifications"]);
+
 function withJitter(intervalMs: number): number {
   const jitter = (Math.random() * 2 - 1) * REJITTER_WINDOW_MS;
   return Math.max(intervalMs + jitter, 1000);
@@ -236,8 +239,6 @@ export function createPollCoordinator(
   let hiddenAt: number | null = null;
   let destroyed = false;
 
-  // Sources managed by the poll coordinator — used for reconciliation
-  const POLL_MANAGED_SOURCES = new Set(["poll", "search", "graphql", "rate-limit", "notifications"]);
 
   async function doFetch(): Promise<void> {
     if (destroyed || isRefreshing()) return;

From 4bd510c9e00e820c5d8431180d10dc310ee15c6b Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Wed, 25 Mar 2026 06:35:50 -0400
Subject: [PATCH 10/14] fix(notifications): fixes dismiss timeout leak,
 double-dismiss guard, and adds aria-modal

---
 src/app/components/shared/NotificationDrawer.tsx | 1 +
 src/app/components/shared/ToastContainer.tsx     | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
index 958dde35..aacd71a5 100644
--- a/src/app/components/shared/NotificationDrawer.tsx
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -79,6 +79,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
         {/* Drawer panel */}
         <div
           role="dialog"
+          aria-modal="true"
           aria-label="Notifications"
           class="fixed top-0 right-0 h-full w-80 sm:w-96 bg-white dark:bg-gray-800 shadow-xl z-[71] flex flex-col"
           classList={{
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index ecd5225c..fd9a37b9 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -84,6 +84,10 @@ export default function ToastContainer() {
   }
 
   function startDismissAnimation(id: string) {
+    // Guard: if already dismissing, don't create a duplicate timeout
+    const existing = dismissingTimeouts.get(id);
+    if (existing !== undefined) return;
+
     // Switch to dismiss animation
     setVisibleToasts((prev) => {
       const next = new Map(prev);
@@ -92,7 +96,10 @@ export default function ToastContainer() {
       return next;
     });
     // Remove after animation
-    const t = setTimeout(() => removeToast(id), animDelay());
+    const t = setTimeout(() => {
+      dismissingTimeouts.delete(id);
+      removeToast(id);
+    }, animDelay());
     dismissingTimeouts.set(id, t);
   }
 

From 845b6394981aa0017d0a3ce897a2210996ea4c55 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Wed, 25 Mar 2026 06:56:31 -0400
Subject: [PATCH 11/14] fix(notifications): clears notification state on
 logout, removes orphaned toasts on dismiss

---
 src/app/components/shared/ToastContainer.tsx | 10 ++++++++++
 src/app/services/poll.ts                     |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index fd9a37b9..699679b0 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -160,6 +160,16 @@ export default function ToastContainer() {
     for (const source of lastToastedAt.keys()) {
       if (!currentSources.has(source)) lastToastedAt.delete(source);
     }
+    // Remove visible toasts whose notifications were dismissed from the store
+    for (const id of visibleToasts().keys()) {
+      if (!currentIds.has(id)) {
+        const t = timeouts.get(id);
+        if (t !== undefined) { clearTimeout(t); timeouts.delete(id); }
+        const dt = dismissingTimeouts.get(id);
+        if (dt !== undefined) { clearTimeout(dt); dismissingTimeouts.delete(id); }
+        removeToast(id);
+      }
+    }
   });
 
   onCleanup(() => {
diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index 8c29a5fe..c976ed02 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -13,7 +13,8 @@ import {
   resetEmptyActionRepos,
 } from "./api";
 import { detectNewItems, dispatchNotifications, _resetNotificationState } from "../lib/notifications";
-import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking } from "../lib/errors";
+import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, clearNotifications } from "../lib/errors";
+import { mutedSources } from "../components/shared/ToastContainer";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -44,6 +45,8 @@ function resetPollState(): void {
   _notifGateDisabled = false;
   _resetNotificationState();
   resetEmptyActionRepos();
+  clearNotifications();
+  mutedSources.clear();
 }
 
 // Auto-reset poll state on logout (avoids circular dep with auth.ts)

From 27445c28d633fc3bf47fa4de481df436646edca1 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Wed, 25 Mar 2026 07:05:58 -0400
Subject: [PATCH 12/14] fix(notifications): moves mutedSources to errors.ts,
 adds aria attrs, fixes responsive width, caches matchMedia, clears state on
 logout

---
 src/app/components/layout/Header.tsx                |  5 ++++-
 src/app/components/shared/NotificationDrawer.tsx    |  9 +++++----
 src/app/components/shared/ToastContainer.tsx        | 13 +++++--------
 src/app/lib/errors.ts                               |  9 +++++++++
 src/app/services/poll.ts                            |  6 ++----
 tests/components/DashboardPage.test.tsx             |  1 +
 tests/components/layout/Header.test.tsx             |  1 +
 tests/components/shared/NotificationDrawer.test.tsx |  2 +-
 tests/services/poll-fetchAllData.test.ts            |  2 ++
 tests/services/poll.test.ts                         |  3 +++
 10 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index c7fca2e1..059d60a8 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -108,9 +108,12 @@ export default function Header() {
 
         {/* Bell icon with unread badge */}
         <button
+          type="button"
           onClick={toggleDrawer}
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0 relative"
-          aria-label="Notifications"
+          aria-label={unreadCount() > 0 ? `Notifications, ${unreadCount()} unread` : "Notifications"}
+          aria-expanded={drawerOpen()}
+          aria-haspopup="dialog"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
index aacd71a5..5fdaf191 100644
--- a/src/app/components/shared/NotificationDrawer.tsx
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -4,9 +4,10 @@ import {
   markAllAsRead,
   clearNotifications,
   dismissError,
+  mutedSources,
 } from "../../lib/errors";
 import { relativeTime } from "../../lib/format";
-import { severityConfig, mutedSources } from "./ToastContainer";
+import { severityConfig } from "./ToastContainer";
 
 interface NotificationDrawerProps {
   open: boolean;
@@ -19,8 +20,8 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
   let closeTimeoutHandle: ReturnType<typeof setTimeout> | undefined;
   let closeButtonRef: HTMLButtonElement | undefined;
 
-  const animDelay = () =>
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const animDelay = reducedMotion ? 0 : 300;
 
   createEffect(() => {
     if (props.open) {
@@ -38,7 +39,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
         closeTimeoutHandle = setTimeout(() => {
           setVisible(false);
           closeTimeoutHandle = undefined;
-        }, animDelay());
+        }, animDelay);
       }
     }
   });
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index 699679b0..ae4d1c34 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -1,6 +1,7 @@
 import { createEffect, createSignal, For, onCleanup } from "solid-js";
 import {
   getNotifications,
+  mutedSources,
   type AppNotification,
   type NotificationSeverity,
 } from "../../lib/errors";
@@ -50,10 +51,6 @@ export function severityConfig(severity: NotificationSeverity): SeverityConfig {
   }
 }
 
-// Module-level muted sources — session only, resets on page reload
-// Populated by NotificationDrawer's "Dismiss all" action
-export const mutedSources = new Set<string>();
-
 interface ToastItem {
   notification: AppNotification;
   dismissing: boolean;
@@ -72,8 +69,8 @@ export default function ToastContainer() {
   const dismissingTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
   const COOLDOWN_MS = 60_000;
-  const animDelay = () =>
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const animDelay = reducedMotion ? 0 : 300;
 
   function removeToast(id: string) {
     setVisibleToasts((prev) => {
@@ -99,7 +96,7 @@ export default function ToastContainer() {
     const t = setTimeout(() => {
       dismissingTimeouts.delete(id);
       removeToast(id);
-    }, animDelay());
+    }, animDelay);
     dismissingTimeouts.set(id, t);
   }
 
@@ -178,7 +175,7 @@ export default function ToastContainer() {
   });
 
   return (
-    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-96">
+    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-[calc(100vw-2rem)] max-w-96" aria-live="assertive" aria-atomic="false">
       <For each={[...visibleToasts().values()]}>
         {(item) => {
           const cfg = severityConfig(item.notification.severity);
diff --git a/src/app/lib/errors.ts b/src/app/lib/errors.ts
index 97880cdd..91359eb5 100644
--- a/src/app/lib/errors.ts
+++ b/src/app/lib/errors.ts
@@ -95,10 +95,19 @@ export function getErrors(): AppNotification[] {
   return notifications();
 }
 
+// Muted sources — suppress toasts for these sources after "Dismiss all"
+// Session-only, reset on page reload and on logout (via resetNotificationState)
+export const mutedSources = new Set<string>();
+
 export function clearNotifications(): void {
   setNotifications([]);
 }
 
+export function resetNotificationState(): void {
+  setNotifications([]);
+  mutedSources.clear();
+}
+
 // Backward-compat alias
 export function clearErrors(): void {
   clearNotifications();
diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index c976ed02..bf826b03 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -13,8 +13,7 @@ import {
   resetEmptyActionRepos,
 } from "./api";
 import { detectNewItems, dispatchNotifications, _resetNotificationState } from "../lib/notifications";
-import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, clearNotifications } from "../lib/errors";
-import { mutedSources } from "../components/shared/ToastContainer";
+import { pushError, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, resetNotificationState } from "../lib/errors";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -45,8 +44,7 @@ function resetPollState(): void {
   _notifGateDisabled = false;
   _resetNotificationState();
   resetEmptyActionRepos();
-  clearNotifications();
-  mutedSources.clear();
+  resetNotificationState();
 }
 
 // Auto-reset poll state on logout (avoids circular dep with auth.ts)
diff --git a/tests/components/DashboardPage.test.tsx b/tests/components/DashboardPage.test.tsx
index 84a838ee..2fe22ae5 100644
--- a/tests/components/DashboardPage.test.tsx
+++ b/tests/components/DashboardPage.test.tsx
@@ -51,6 +51,7 @@ vi.mock("../../src/app/lib/errors", () => ({
   pushNotification: vi.fn(),
   clearErrors: vi.fn(),
   clearNotifications: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // capturedFetchAll is populated by the createPollCoordinator mock each time
diff --git a/tests/components/layout/Header.test.tsx b/tests/components/layout/Header.test.tsx
index 9dac3f31..1f85d5cd 100644
--- a/tests/components/layout/Header.test.tsx
+++ b/tests/components/layout/Header.test.tsx
@@ -45,6 +45,7 @@ vi.mock("../../../src/app/lib/errors", () => ({
   dismissNotificationBySource: vi.fn(),
   getErrors: vi.fn(() => []),
   clearErrors: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 import Header from "../../../src/app/components/layout/Header";
diff --git a/tests/components/shared/NotificationDrawer.test.tsx b/tests/components/shared/NotificationDrawer.test.tsx
index 375c6880..fd26db40 100644
--- a/tests/components/shared/NotificationDrawer.test.tsx
+++ b/tests/components/shared/NotificationDrawer.test.tsx
@@ -5,9 +5,9 @@ import {
   pushNotification,
   clearNotifications,
   markAllAsRead,
+  mutedSources,
 } from "../../../src/app/lib/errors";
 import NotificationDrawer from "../../../src/app/components/shared/NotificationDrawer";
-import { mutedSources } from "../../../src/app/components/shared/ToastContainer";
 
 beforeEach(() => {
   clearNotifications();
diff --git a/tests/services/poll-fetchAllData.test.ts b/tests/services/poll-fetchAllData.test.ts
index 672d3e97..fe301fe3 100644
--- a/tests/services/poll-fetchAllData.test.ts
+++ b/tests/services/poll-fetchAllData.test.ts
@@ -49,6 +49,8 @@ vi.mock("../../src/app/lib/errors", () => ({
   dismissNotificationBySource: vi.fn(),
   startCycleTracking: vi.fn(),
   endCycleTracking: vi.fn(() => new Set()),
+  resetNotificationState: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
diff --git a/tests/services/poll.test.ts b/tests/services/poll.test.ts
index 0316abeb..c5044c71 100644
--- a/tests/services/poll.test.ts
+++ b/tests/services/poll.test.ts
@@ -18,6 +18,9 @@ vi.mock("../../src/app/lib/errors", () => ({
   startCycleTracking: () => mockStartCycleTracking(),
   endCycleTracking: () => mockEndCycleTracking(),
   pushNotification: vi.fn(),
+  clearNotifications: vi.fn(),
+  resetNotificationState: vi.fn(),
+  mutedSources: new Set(),
 }));
 
 // Mock notifications so doFetch doesn't fail on detectNewItems

From d6e493c7a3db18e360f2aabfdf0c4daec81a07b1 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Wed, 25 Mar 2026 10:34:16 -0400
Subject: [PATCH 13/14] fix(notifications): addresses PR review findings

- wraps mutedSources in createSignal for proper SolidJS reactivity
- swaps markAllAsRead/setDrawerOpen order so unread highlights render
- removes dead errors prop from tab components and DashboardStore
- adds type="button" to all notification drawer and toast buttons
- adds createMemo for sorted notifications, classList consistency
- adds 8 new tests: muting, pruning, aria-expanded, reset, cycling
---
 src/app/components/dashboard/ActionsTab.tsx   |  5 +-
 .../components/dashboard/DashboardPage.tsx    |  9 +--
 src/app/components/dashboard/IssuesTab.tsx    |  3 +-
 .../components/dashboard/PullRequestsTab.tsx  |  3 +-
 src/app/components/layout/Header.tsx          | 10 ++--
 .../components/shared/NotificationDrawer.tsx  | 16 +++--
 src/app/components/shared/ToastContainer.tsx  | 13 +++--
 src/app/lib/errors.ts                         | 16 ++++-
 src/app/services/poll.ts                      |  1 -
 tests/components/DashboardPage.test.tsx       |  4 +-
 tests/components/layout/Header.test.tsx       | 25 +++++++-
 .../shared/NotificationDrawer.test.tsx        |  9 +--
 .../components/shared/ToastContainer.test.tsx | 32 ++++++++++
 tests/lib/errors.test.ts                      | 58 +++++++++++++++++++
 tests/services/poll-fetchAllData.test.ts      |  4 +-
 tests/services/poll.test.ts                   |  4 +-
 16 files changed, 171 insertions(+), 41 deletions(-)

diff --git a/src/app/components/dashboard/ActionsTab.tsx b/src/app/components/dashboard/ActionsTab.tsx
index 2a8f3d9f..3a486c88 100644
--- a/src/app/components/dashboard/ActionsTab.tsx
+++ b/src/app/components/dashboard/ActionsTab.tsx
@@ -1,6 +1,6 @@
 import { createMemo, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
-import type { WorkflowRun, ApiError } from "../../services/api";
+import type { WorkflowRun } from "../../services/api";
 import { config } from "../../stores/config";
 import { viewState, setViewState, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type ActionsFilterField } from "../../stores/view";
 import WorkflowRunRow from "./WorkflowRunRow";
@@ -13,7 +13,6 @@ import ChevronIcon from "../shared/ChevronIcon";
 interface ActionsTabProps {
   workflowRuns: WorkflowRun[];
   loading?: boolean;
-  errors?: ApiError[];
 }
 
 interface WorkflowGroup {
@@ -201,7 +200,7 @@ export default function ActionsTab(props: ActionsTabProps) {
       {/* Empty */}
       <Show
         when={
-          !props.loading && (!props.errors || props.errors.length === 0) && repoGroups().length === 0
+          !props.loading && repoGroups().length === 0
         }
       >
         <div class="p-8 text-center text-gray-500 dark:text-gray-400">
diff --git a/src/app/components/dashboard/DashboardPage.tsx b/src/app/components/dashboard/DashboardPage.tsx
index e7c5ea9d..7b148e50 100644
--- a/src/app/components/dashboard/DashboardPage.tsx
+++ b/src/app/components/dashboard/DashboardPage.tsx
@@ -8,7 +8,7 @@ import IssuesTab from "./IssuesTab";
 import PullRequestsTab from "./PullRequestsTab";
 import { config } from "../../stores/config";
 import { viewState, updateViewState } from "../../stores/view";
-import type { Issue, PullRequest, WorkflowRun, ApiError } from "../../services/api";
+import type { Issue, PullRequest, WorkflowRun } from "../../services/api";
 import { createPollCoordinator, fetchAllData, type DashboardData } from "../../services/poll";
 import { clearAuth, user, onAuthCleared, DASHBOARD_STORAGE_KEY } from "../../stores/auth";
 
@@ -20,7 +20,6 @@ interface DashboardStore {
   issues: Issue[];
   pullRequests: PullRequest[];
   workflowRuns: WorkflowRun[];
-  errors: ApiError[];
   loading: boolean;
   lastRefreshedAt: Date | null;
 }
@@ -29,7 +28,6 @@ const initialDashboardState: DashboardStore = {
   issues: [],
   pullRequests: [],
   workflowRuns: [],
-  errors: [],
   loading: true,
   lastRefreshedAt: null,
 };
@@ -49,7 +47,6 @@ function loadCachedDashboard(): DashboardStore {
       issues: parsed.issues as Issue[],
       pullRequests: parsed.pullRequests as PullRequest[],
       workflowRuns: parsed.workflowRuns as WorkflowRun[],
-      errors: [],
       loading: false,
       lastRefreshedAt: typeof parsed.lastRefreshedAt === "string" ? new Date(parsed.lastRefreshedAt) : null,
     };
@@ -91,7 +88,6 @@ async function pollFetch(): Promise<DashboardData> {
         issues: data.issues,
         pullRequests: data.pullRequests,
         workflowRuns: data.workflowRuns,
-        errors: data.errors,
         loading: false,
         lastRefreshedAt: now,
       });
@@ -195,7 +191,6 @@ export default function DashboardPage() {
               <IssuesTab
                 issues={dashboardData.issues}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
                 userLogin={userLogin()}
               />
             </Match>
@@ -203,7 +198,6 @@ export default function DashboardPage() {
               <PullRequestsTab
                 pullRequests={dashboardData.pullRequests}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
                 userLogin={userLogin()}
               />
             </Match>
@@ -211,7 +205,6 @@ export default function DashboardPage() {
               <ActionsTab
                 workflowRuns={dashboardData.workflowRuns}
                 loading={dashboardData.loading}
-                errors={dashboardData.errors}
               />
             </Match>
           </Switch>
diff --git a/src/app/components/dashboard/IssuesTab.tsx b/src/app/components/dashboard/IssuesTab.tsx
index 455a9890..bcfa1d08 100644
--- a/src/app/components/dashboard/IssuesTab.tsx
+++ b/src/app/components/dashboard/IssuesTab.tsx
@@ -2,7 +2,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
 import { viewState, setSortPreference, setTabFilter, resetTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, type IssueFilterField } from "../../stores/view";
-import type { Issue, ApiError } from "../../services/api";
+import type { Issue } from "../../services/api";
 import ItemRow from "./ItemRow";
 import IgnoreBadge from "./IgnoreBadge";
 import SortIcon from "../shared/SortIcon";
@@ -18,7 +18,6 @@ import { groupByRepo, computePageLayout, slicePageGroups } from "../../lib/group
 export interface IssuesTabProps {
   issues: Issue[];
   loading?: boolean;
-  errors?: ApiError[];
   userLogin: string;
 }
 
diff --git a/src/app/components/dashboard/PullRequestsTab.tsx b/src/app/components/dashboard/PullRequestsTab.tsx
index 89dc748f..d77d095e 100644
--- a/src/app/components/dashboard/PullRequestsTab.tsx
+++ b/src/app/components/dashboard/PullRequestsTab.tsx
@@ -2,7 +2,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import { config } from "../../stores/config";
 import { viewState, setSortPreference, ignoreItem, unignoreItem, setTabFilter, resetTabFilter, resetAllTabFilters, type PullRequestFilterField } from "../../stores/view";
-import type { PullRequest, ApiError } from "../../services/api";
+import type { PullRequest } from "../../services/api";
 import { deriveInvolvementRoles, prSizeCategory } from "../../lib/format";
 import ItemRow from "./ItemRow";
 import StatusDot from "../shared/StatusDot";
@@ -21,7 +21,6 @@ import { groupByRepo, computePageLayout, slicePageGroups } from "../../lib/group
 export interface PullRequestsTabProps {
   pullRequests: PullRequest[];
   loading?: boolean;
-  errors?: ApiError[];
   userLogin: string;
 }
 
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index 059d60a8..fc3e15a6 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -1,4 +1,4 @@
-import { createMemo, createSignal, Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { user, clearAuth } from "../../stores/auth";
 import { getCoreRateLimit, getSearchRateLimit } from "../../services/github";
@@ -15,16 +15,16 @@ export default function Header() {
     navigate("/login");
   }
 
-  function toggleDrawer() {
+  function handleBellClick() {
     if (!drawerOpen()) {
-      markAllAsRead();
       setDrawerOpen(true);
+      markAllAsRead();
     } else {
       setDrawerOpen(false);
     }
   }
 
-  const unreadCount = createMemo(() => getUnreadCount());
+  const unreadCount = () => getUnreadCount();
 
   const coreRL = () => getCoreRateLimit();
   const searchRL = () => getSearchRateLimit();
@@ -109,7 +109,7 @@ export default function Header() {
         {/* Bell icon with unread badge */}
         <button
           type="button"
-          onClick={toggleDrawer}
+          onClick={handleBellClick}
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0 relative"
           aria-label={unreadCount() > 0 ? `Notifications, ${unreadCount()} unread` : "Notifications"}
           aria-expanded={drawerOpen()}
diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
index 5fdaf191..0dc847a6 100644
--- a/src/app/components/shared/NotificationDrawer.tsx
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -1,10 +1,10 @@
-import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import {
   getNotifications,
   markAllAsRead,
   clearNotifications,
   dismissError,
-  mutedSources,
+  addMutedSource,
 } from "../../lib/errors";
 import { relativeTime } from "../../lib/format";
 import { severityConfig } from "./ToastContainer";
@@ -58,9 +58,11 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
     onCleanup(() => document.removeEventListener("keydown", handler));
   });
 
+  const sortedNotifications = createMemo(() => getNotifications().slice().reverse());
+
   function handleDismissAll() {
     const current = getNotifications();
-    for (const n of current) mutedSources.add(n.source);
+    for (const n of current) addMutedSource(n.source);
     clearNotifications();
   }
 
@@ -94,18 +96,21 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
               Notifications
             </h2>
             <button
+              type="button"
               onClick={markAllAsRead}
               class="text-sm text-blue-500 hover:text-blue-700 dark:hover:text-blue-300"
             >
               Mark all as read
             </button>
             <button
+              type="button"
               onClick={handleDismissAll}
               class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
             >
               Dismiss all
             </button>
             <button
+              type="button"
               ref={closeButtonRef}
               onClick={props.onClose}
               aria-label="Close notifications"
@@ -124,7 +129,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
           {/* Notification list */}
           <div class="flex-1 overflow-y-auto">
             <Show
-              when={getNotifications().length > 0}
+              when={sortedNotifications().length > 0}
               fallback={
                 <div class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
                   No notifications
@@ -132,7 +137,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
               }
             >
               <ul>
-                <For each={getNotifications().slice().reverse()}>
+                <For each={sortedNotifications()}>
                   {(notif) => {
                     const cfg = severityConfig(notif.severity);
                     return (
@@ -168,6 +173,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
                           </p>
                         </div>
                         <button
+                          type="button"
                           onClick={() => dismissError(notif.id)}
                           aria-label="Dismiss notification"
                           class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 mt-0.5"
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
index ae4d1c34..ddd04434 100644
--- a/src/app/components/shared/ToastContainer.tsx
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -1,12 +1,10 @@
 import { createEffect, createSignal, For, onCleanup } from "solid-js";
 import {
   getNotifications,
-  mutedSources,
+  isMuted,
   type AppNotification,
   type NotificationSeverity,
 } from "../../lib/errors";
-
-// Severity configuration — shared with NotificationDrawer (imported there after C4)
 export interface SeverityConfig {
   path: string;
   secondaryPath?: string;
@@ -134,7 +132,7 @@ export default function ToastContainer() {
       // Check suppression conditions
       const lastToasted = lastToastedAt.get(notif.source);
       const inCooldown = lastToasted !== undefined && Date.now() - lastToasted < COOLDOWN_MS;
-      const muted = mutedSources.has(notif.source);
+      const muted = isMuted(notif.source);
 
       if (inCooldown || muted) continue;
 
@@ -182,7 +180,11 @@ export default function ToastContainer() {
           return (
             <div
               role="alert"
-              class={`flex items-start gap-3 rounded-lg border p-3 shadow-lg ${cfg.bgClass} ${cfg.textClass} ${cfg.borderColorClass} ${item.dismissing ? "animate-toast-out" : "animate-toast-in"}`}
+              class={`flex items-start gap-3 rounded-lg border p-3 shadow-lg ${cfg.bgClass} ${cfg.textClass} ${cfg.borderColorClass}`}
+              classList={{
+                "animate-toast-in": !item.dismissing,
+                "animate-toast-out": item.dismissing,
+              }}
             >
               <svg
                 class={`h-5 w-5 shrink-0 ${cfg.iconClass}`}
@@ -202,6 +204,7 @@ export default function ToastContainer() {
                 )}
               </span>
               <button
+                type="button"
                 onClick={() => dismissToast(item.notification.id)}
                 class="shrink-0 opacity-60 hover:opacity-100 transition-opacity"
                 aria-label="Dismiss notification"
diff --git a/src/app/lib/errors.ts b/src/app/lib/errors.ts
index 91359eb5..53d4e126 100644
--- a/src/app/lib/errors.ts
+++ b/src/app/lib/errors.ts
@@ -97,7 +97,19 @@ export function getErrors(): AppNotification[] {
 
 // Muted sources — suppress toasts for these sources after "Dismiss all"
 // Session-only, reset on page reload and on logout (via resetNotificationState)
-export const mutedSources = new Set<string>();
+const [_mutedSources, _setMutedSources] = createSignal(new Set<string>());
+
+export function addMutedSource(source: string): void {
+  _setMutedSources((prev) => new Set([...prev, source]));
+}
+
+export function isMuted(source: string): boolean {
+  return _mutedSources().has(source);
+}
+
+export function clearMutedSources(): void {
+  _setMutedSources(new Set<string>());
+}
 
 export function clearNotifications(): void {
   setNotifications([]);
@@ -105,7 +117,7 @@ export function clearNotifications(): void {
 
 export function resetNotificationState(): void {
   setNotifications([]);
-  mutedSources.clear();
+  clearMutedSources();
 }
 
 // Backward-compat alias
diff --git a/src/app/services/poll.ts b/src/app/services/poll.ts
index bf826b03..3990de82 100644
--- a/src/app/services/poll.ts
+++ b/src/app/services/poll.ts
@@ -240,7 +240,6 @@ export function createPollCoordinator(
   let hiddenAt: number | null = null;
   let destroyed = false;
 
-
   async function doFetch(): Promise<void> {
     if (destroyed || isRefreshing()) return;
     setIsRefreshing(true);
diff --git a/tests/components/DashboardPage.test.tsx b/tests/components/DashboardPage.test.tsx
index 2fe22ae5..227e91bf 100644
--- a/tests/components/DashboardPage.test.tsx
+++ b/tests/components/DashboardPage.test.tsx
@@ -51,7 +51,9 @@ vi.mock("../../src/app/lib/errors", () => ({
   pushNotification: vi.fn(),
   clearErrors: vi.fn(),
   clearNotifications: vi.fn(),
-  mutedSources: new Set(),
+  addMutedSource: vi.fn(),
+  isMuted: vi.fn(() => false),
+  clearMutedSources: vi.fn(),
 }));
 
 // capturedFetchAll is populated by the createPollCoordinator mock each time
diff --git a/tests/components/layout/Header.test.tsx b/tests/components/layout/Header.test.tsx
index 1f85d5cd..3c819553 100644
--- a/tests/components/layout/Header.test.tsx
+++ b/tests/components/layout/Header.test.tsx
@@ -45,7 +45,9 @@ vi.mock("../../../src/app/lib/errors", () => ({
   dismissNotificationBySource: vi.fn(),
   getErrors: vi.fn(() => []),
   clearErrors: vi.fn(),
-  mutedSources: new Set(),
+  addMutedSource: vi.fn(),
+  isMuted: vi.fn(() => false),
+  clearMutedSources: vi.fn(),
 }));
 
 import Header from "../../../src/app/components/layout/Header";
@@ -150,4 +152,25 @@ describe("Header", () => {
     await user.click(bellBtn);
     expect(errorsModule.markAllAsRead).toHaveBeenCalled();
   });
+
+  it("bell button aria-expanded toggles on click", async () => {
+    const user = userEvent.setup();
+    render(() => <Header />);
+    const bellBtn = screen.getByLabelText("Notifications");
+    expect(bellBtn.getAttribute("aria-expanded")).toBe("false");
+    await user.click(bellBtn);
+    expect(bellBtn.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("clicking bell twice closes the drawer", async () => {
+    const user = userEvent.setup();
+    render(() => <Header />);
+    const bellBtn = screen.getByLabelText("Notifications");
+    await user.click(bellBtn);
+    expect(bellBtn.getAttribute("aria-expanded")).toBe("true");
+    await user.click(bellBtn);
+    expect(bellBtn.getAttribute("aria-expanded")).toBe("false");
+    // markAllAsRead called only once (on open, not on close)
+    expect(errorsModule.markAllAsRead).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/tests/components/shared/NotificationDrawer.test.tsx b/tests/components/shared/NotificationDrawer.test.tsx
index fd26db40..b8dd488c 100644
--- a/tests/components/shared/NotificationDrawer.test.tsx
+++ b/tests/components/shared/NotificationDrawer.test.tsx
@@ -5,13 +5,14 @@ import {
   pushNotification,
   clearNotifications,
   markAllAsRead,
-  mutedSources,
+  isMuted,
+  clearMutedSources,
 } from "../../../src/app/lib/errors";
 import NotificationDrawer from "../../../src/app/components/shared/NotificationDrawer";
 
 beforeEach(() => {
   clearNotifications();
-  mutedSources.clear();
+  clearMutedSources();
   vi.useFakeTimers();
 });
 
@@ -101,8 +102,8 @@ describe("NotificationDrawer", () => {
     expect(screen.queryAllByRole("listitem")).toHaveLength(0);
     expect(screen.getByText("No notifications")).toBeDefined();
     // Sources are muted
-    expect(mutedSources.has("api")).toBe(true);
-    expect(mutedSources.has("search")).toBe(true);
+    expect(isMuted("api")).toBe(true);
+    expect(isMuted("search")).toBe(true);
   });
 
   it("calls onClose when overlay backdrop is clicked", () => {
diff --git a/tests/components/shared/ToastContainer.test.tsx b/tests/components/shared/ToastContainer.test.tsx
index 6f0a9382..64bf44a7 100644
--- a/tests/components/shared/ToastContainer.test.tsx
+++ b/tests/components/shared/ToastContainer.test.tsx
@@ -3,12 +3,19 @@ import { render, screen, fireEvent } from "@solidjs/testing-library";
 import {
   pushNotification,
   clearNotifications,
+  addMutedSource,
+  clearMutedSources,
+  dismissError,
+  getNotifications,
 } from "../../../src/app/lib/errors";
 import ToastContainer from "../../../src/app/components/shared/ToastContainer";
 
 beforeEach(() => {
   clearNotifications();
+  clearMutedSources();
   vi.useFakeTimers();
+  // Ensure matchMedia returns non-reduced-motion (animDelay=300)
+  vi.spyOn(window, "matchMedia").mockReturnValue({ matches: false } as MediaQueryList);
 });
 
 afterEach(() => {
@@ -128,4 +135,29 @@ describe("ToastContainer", () => {
     pushNotification("api", "Third error", "error");
     expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
   });
+
+  it("muted source suppresses toast", () => {
+    const { container } = render(() => <ToastContainer />);
+    addMutedSource("api");
+    pushNotification("api", "Muted error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
+
+  it("toast removed when notification dismissed from store during animation", () => {
+    const { container } = render(() => <ToastContainer />);
+    pushNotification("api", "Error", "error");
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(1);
+
+    // Start dismiss animation
+    const dismissBtn = screen.getByLabelText("Dismiss notification");
+    fireEvent.click(dismissBtn);
+    expect(container.querySelector("[role='alert']")?.className).toContain("animate-toast-out");
+
+    // While animation is in progress, dismiss from store externally
+    const notifId = getNotifications()[0].id;
+    dismissError(notifId);
+
+    // Toast should be removed immediately (store pruning path)
+    expect(container.querySelectorAll("[role='alert']")).toHaveLength(0);
+  });
 });
diff --git a/tests/lib/errors.test.ts b/tests/lib/errors.test.ts
index 605b0b34..3a0a1b42 100644
--- a/tests/lib/errors.test.ts
+++ b/tests/lib/errors.test.ts
@@ -10,8 +10,12 @@ import {
   markAllAsRead,
   clearErrors,
   clearNotifications,
+  resetNotificationState,
   startCycleTracking,
   endCycleTracking,
+  addMutedSource,
+  isMuted,
+  clearMutedSources,
 } from "../../src/app/lib/errors";
 import { createRoot } from "solid-js";
 
@@ -19,6 +23,7 @@ import { createRoot } from "solid-js";
 // to prevent state leaking between tests.
 beforeEach(() => {
   clearErrors();
+  clearMutedSources();
   // Also end any stale cycle tracking
   endCycleTracking();
 });
@@ -346,4 +351,57 @@ describe("cycle tracking", () => {
       dispose();
     });
   });
+
+  it("startCycleTracking called twice discards first tracking set", () => {
+    createRoot((dispose) => {
+      startCycleTracking();
+      pushNotification("a", "msg1", "info");
+      startCycleTracking(); // replaces tracking set — "a" is lost
+      pushNotification("b", "msg2", "warning");
+      const tracked = endCycleTracking();
+      expect(tracked.has("b")).toBe(true);
+      expect(tracked.has("a")).toBe(false);
+      dispose();
+    });
+  });
+});
+
+describe("resetNotificationState", () => {
+  it("clears both notifications and muted sources", () => {
+    createRoot((dispose) => {
+      pushNotification("api", "Error", "error");
+      addMutedSource("api");
+      expect(getNotifications()).toHaveLength(1);
+      expect(isMuted("api")).toBe(true);
+
+      resetNotificationState();
+
+      expect(getNotifications()).toHaveLength(0);
+      expect(isMuted("api")).toBe(false);
+      dispose();
+    });
+  });
+});
+
+describe("mutedSources", () => {
+  it("addMutedSource and isMuted work together", () => {
+    createRoot((dispose) => {
+      expect(isMuted("api")).toBe(false);
+      addMutedSource("api");
+      expect(isMuted("api")).toBe(true);
+      expect(isMuted("search")).toBe(false);
+      dispose();
+    });
+  });
+
+  it("clearMutedSources resets all muted sources", () => {
+    createRoot((dispose) => {
+      addMutedSource("api");
+      addMutedSource("search");
+      clearMutedSources();
+      expect(isMuted("api")).toBe(false);
+      expect(isMuted("search")).toBe(false);
+      dispose();
+    });
+  });
 });
diff --git a/tests/services/poll-fetchAllData.test.ts b/tests/services/poll-fetchAllData.test.ts
index fe301fe3..afdc934b 100644
--- a/tests/services/poll-fetchAllData.test.ts
+++ b/tests/services/poll-fetchAllData.test.ts
@@ -50,7 +50,9 @@ vi.mock("../../src/app/lib/errors", () => ({
   startCycleTracking: vi.fn(),
   endCycleTracking: vi.fn(() => new Set()),
   resetNotificationState: vi.fn(),
-  mutedSources: new Set(),
+  addMutedSource: vi.fn(),
+  isMuted: vi.fn(() => false),
+  clearMutedSources: vi.fn(),
 }));
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
diff --git a/tests/services/poll.test.ts b/tests/services/poll.test.ts
index c5044c71..0a81f1e5 100644
--- a/tests/services/poll.test.ts
+++ b/tests/services/poll.test.ts
@@ -20,7 +20,9 @@ vi.mock("../../src/app/lib/errors", () => ({
   pushNotification: vi.fn(),
   clearNotifications: vi.fn(),
   resetNotificationState: vi.fn(),
-  mutedSources: new Set(),
+  addMutedSource: vi.fn(),
+  isMuted: vi.fn(() => false),
+  clearMutedSources: vi.fn(),
 }));
 
 // Mock notifications so doFetch doesn't fail on detectNewItems

From 755ab26ab271266a349271d49ced6c32d681a5b5 Mon Sep 17 00:00:00 2001
From: testvalue <wgordon@redhat.com>
Date: Wed, 25 Mar 2026 10:53:13 -0400
Subject: [PATCH 14/14] fix(notifications): adds type=button to logout, mocks
 matchMedia

---
 src/app/components/layout/Header.tsx                | 1 +
 tests/components/shared/NotificationDrawer.test.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index fc3e15a6..e8ca9e85 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -132,6 +132,7 @@ export default function Header() {
         </button>
 
         <button
+          type="button"
           onClick={handleLogout}
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shrink-0"
           aria-label="Sign out"
diff --git a/tests/components/shared/NotificationDrawer.test.tsx b/tests/components/shared/NotificationDrawer.test.tsx
index b8dd488c..1b8271d0 100644
--- a/tests/components/shared/NotificationDrawer.test.tsx
+++ b/tests/components/shared/NotificationDrawer.test.tsx
@@ -14,10 +14,12 @@ beforeEach(() => {
   clearNotifications();
   clearMutedSources();
   vi.useFakeTimers();
+  vi.spyOn(window, "matchMedia").mockReturnValue({ matches: false } as MediaQueryList);
 });
 
 afterEach(() => {
   vi.useRealTimers();
+  vi.restoreAllMocks();
 });
 
 function renderDrawer(open = true, onClose = vi.fn()) {