- ({ source: e.repo, message: e.message, retryable: e.retryable }))} />
-
{/* Column headers */}
- ({ source: e.repo, message: e.message, retryable: e.retryable }))} />
-
{/* Column headers */}
getUnreadCount();
+
const coreRL = () => getCoreRateLimit();
const searchRL = () => getSearchRateLimit();
@@ -20,95 +35,125 @@ export default function Header() {
}
return (
-
-
- GitHub Tracker
-
+ <>
+
+
+ GitHub Tracker
+
-
+
-
-
- Rate Limits
-
- {(u) => (
-
- )}
-
+
+
-
-
-
+
+ 0}>
+
+ {unreadCount() > 9 ? "9+" : unreadCount()}
+
+
+
-
-
+
+
+
+ setDrawerOpen(false)} />
+ 0}>
-
- );
-}
diff --git a/src/app/components/shared/NotificationDrawer.tsx b/src/app/components/shared/NotificationDrawer.tsx
new file mode 100644
index 00000000..0dc847a6
--- /dev/null
+++ b/src/app/components/shared/NotificationDrawer.tsx
@@ -0,0 +1,200 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import {
+ getNotifications,
+ markAllAsRead,
+ clearNotifications,
+ dismissError,
+ addMutedSource,
+} from "../../lib/errors";
+import { relativeTime } from "../../lib/format";
+import { severityConfig } from "./ToastContainer";
+
+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 | undefined;
+ let closeButtonRef: HTMLButtonElement | undefined;
+
+ const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const animDelay = reducedMotion ? 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);
+ queueMicrotask(() => closeButtonRef?.focus());
+ } 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));
+ });
+
+ const sortedNotifications = createMemo(() => getNotifications().slice().reverse());
+
+ function handleDismissAll() {
+ const current = getNotifications();
+ for (const n of current) addMutedSource(n.source);
+ clearNotifications();
+ }
+
+ return (
+
+ <>
+ {/* Overlay */}
+
+ {/* Drawer panel */}
+
+ );
+}
diff --git a/src/app/components/shared/ToastContainer.tsx b/src/app/components/shared/ToastContainer.tsx
new file mode 100644
index 00000000..ddd04434
--- /dev/null
+++ b/src/app/components/shared/ToastContainer.tsx
@@ -0,0 +1,226 @@
+import { createEffect, createSignal, For, onCleanup } from "solid-js";
+import {
+ getNotifications,
+ isMuted,
+ type AppNotification,
+ type NotificationSeverity,
+} from "../../lib/errors";
+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",
+ };
+ }
+}
+
+interface ToastItem {
+ notification: AppNotification;
+ dismissing: boolean;
+}
+
+export default function ToastContainer() {
+ // seenTimestamps: notification ID → last-seen timestamp (detect new/updated)
+ const seenTimestamps = new Map();
+ // lastToastedAt: source → timestamp of last toast shown (cooldown tracking)
+ const lastToastedAt = new Map();
+ // visibleToasts: IDs of toasts currently on screen
+ const [visibleToasts, setVisibleToasts] = createSignal>(new Map());
+ // pending timeout handles: notification ID → timeout handle
+ const timeouts = new Map>();
+ // dismissing animation timeouts
+ const dismissingTimeouts = new Map>();
+
+ const COOLDOWN_MS = 60_000;
+ const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const animDelay = reducedMotion ? 0 : 300;
+
+ function removeToast(id: string) {
+ setVisibleToasts((prev) => {
+ const next = new Map(prev);
+ next.delete(id);
+ return next;
+ });
+ }
+
+ 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);
+ const item = next.get(id);
+ if (item) next.set(id, { ...item, dismissing: true });
+ return next;
+ });
+ // Remove after animation
+ const t = setTimeout(() => {
+ dismissingTimeouts.delete(id);
+ 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 = isMuted(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);
+ }
+
+ // 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);
+ }
+ // 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(() => {
+ for (const t of timeouts.values()) clearTimeout(t);
+ for (const t of dismissingTimeouts.values()) clearTimeout(t);
+ });
+
+ return (
+ ([]);
+// Backward-compat alias
+export type AppError = AppNotification;
+
+const MAX_NOTIFICATIONS = 50;
+
+const [notifications, setNotifications] = createSignal([]);
+
+let notificationCounter = 0;
-let errorCounter = 0;
+// Cycle tracking for poll reconciliation
+let _cycleTracking: Set | null = null;
-export function getErrors(): AppError[] {
- return errors();
+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 {
+ 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();
+}
+
+// Muted sources — suppress toasts for these sources after "Dismiss all"
+// Session-only, reset on page reload and on logout (via resetNotificationState)
+const [_mutedSources, _setMutedSources] = createSignal(new Set());
+
+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());
+}
+
+export function clearNotifications(): void {
+ setNotifications([]);
+}
+
+export function resetNotificationState(): void {
+ setNotifications([]);
+ clearMutedSources();
}
+// Backward-compat alias
export function clearErrors(): void {
- setErrors([]);
+ clearNotifications();
}
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 c7fc95d7..3990de82 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, pushNotification, getNotifications, dismissNotificationBySource, startCycleTracking, endCycleTracking, resetNotificationState } from "../lib/errors";
// ── Types ────────────────────────────────────────────────────────────────────
@@ -44,6 +44,7 @@ function resetPollState(): void {
_notifGateDisabled = false;
_resetNotificationState();
resetEmptyActionRepos();
+ resetNotificationState();
}
// Auto-reset poll state on logout (avoids circular dep with auth.ts)
@@ -97,7 +98,7 @@ async function hasNotificationChanges(): Promise {
(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);
+ pushNotification("notifications", "Notifications API returned 403 — check that the notifications scope is granted", "warning");
_notifGateDisabled = true;
}
return true;
@@ -209,6 +210,9 @@ export async function fetchAllData(): Promise {
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);
@@ -239,31 +243,38 @@ export function createPollCoordinator(
async function doFetch(): Promise {
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/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(() => = {}): ErrorBannerItem {
- return {
- source: "owner/repo",
- message: "Internal server error",
- retryable: true,
- ...overrides,
- };
-}
-
-describe("ErrorBannerList", () => {
- it("renders nothing when errors is undefined", () => {
- const { container } = render(() => );
vi.mocked(fetchIssues).mockResolvedValue(emptyIssueResult);
@@ -514,11 +524,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
diff --git a/tests/services/poll.test.ts b/tests/services/poll.test.ts
index d181ff14..0a81f1e5 100644
--- a/tests/services/poll.test.ts
+++ b/tests/services/poll.test.ts
@@ -5,10 +5,24 @@ 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());
+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(),
+ clearNotifications: vi.fn(),
+ resetNotificationState: vi.fn(),
+ addMutedSource: vi.fn(),
+ isMuted: vi.fn(() => false),
+ clearMutedSources: vi.fn(),
}));
// Mock notifications so doFetch doesn't fail on detectNewItems
@@ -64,6 +78,11 @@ describe("createPollCoordinator", () => {
writable: true,
configurable: true,
});
+ // Reset new mock functions
+ mockDismissNotificationBySource.mockClear();
+ mockStartCycleTracking.mockClear();
+ mockEndCycleTracking.mockClear().mockReturnValue(new Set());
+ mockGetNotifications.mockClear().mockReturnValue([]);
});
afterEach(() => {
@@ -387,22 +406,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,
+ 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: [],
@@ -415,22 +507,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 ──
-
- {(rl) => (
-
- {formatLimit(rl().remaining, 5000, "hr")}
-
- )}
-
-
- {(rl) => (
-
- {formatLimit(rl().remaining, 30, "min")}
-
- )}
-
+
+
-
+
-
+ Rate Limits
+
-
+
+ {(rl) => (
+
+ {formatLimit(rl().remaining, 5000, "hr")}
+
+ )}
+
+
+ {(rl) => (
+
+ {formatLimit(rl().remaining, 30, "min")}
+
+ )}
+
+
-
- {(err, index) => (
-
-
-
-
-
- {err.source}: {err.message}
- {err.retryable && " (will retry)"}
-
-
-
-
-
- )}
-
+ {/* Header */}
+
+
+
+
+
+ {/* Notification list */}
+ + Notifications +
+ + + +
+ 0}
+ fallback={
+
+
+
+ No notifications
+
+ }
+ >
+ -
+
-
+
+ ++ +
+ {notif.source}: {notif.message} + {notif.retryable && ( + + (will retry) + + )} +
++ {relativeTime(new Date(notif.timestamp).toISOString())} +
+
+ );
+ }}
+
+
+ {(item) => {
+ const cfg = severityConfig(item.notification.severity);
+ return (
+
+
+ );
+}
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..53d4e126 100644
--- a/src/app/lib/errors.ts
+++ b/src/app/lib/errors.ts
@@ -1,44 +1,126 @@
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
+
+
+ {item.notification.source}: {item.notification.message}
+ {item.notification.retryable && (
+ (will retry)
+ )}
+
+
+
+ );
+ }}
+