feat(platform-notifications): PR Fixes

Author: 0ski

apps/webapp/app/components/navigation/NotificationPanel.tsx

@@ -261,14 +261,23 @@ function NotificationCard({
           )}
         </div>
 
-        {image && (
+        {image && isSafeImageUrl(image) && (
           <img src={image} alt="" className="mt-1.5 rounded" />
         )}
       </div>
     </Wrapper>
   );
 }
 
+function isSafeImageUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
 function getMarkdownComponents(onLinkClick: () => void) {
   return {
     p: ({ children }: { children?: React.ReactNode }) => (
@@ -280,7 +289,10 @@ function getMarkdownComponents(onLinkClick: () => void) {
         target="_blank"
         rel="noopener noreferrer"
         className="text-indigo-400 underline hover:text-indigo-300 transition-colors"
-        onClick={onLinkClick}
+        onClick={(e) => {
+          e.stopPropagation();
+          onLinkClick();
+        }}
       >
         {children}
       </a>

apps/webapp/app/routes/admin.api.v1.platform-notifications.ts

@@ -42,7 +42,12 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ error: message }, { status });
   }
 
-  const body = await request.json();
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: "Invalid JSON body" }, { status: 400 });
+  }
   const result = await createPlatformNotification(body as CreatePlatformNotificationInput);
 
   if (result.isErr()) {

apps/webapp/app/routes/admin.notifications.tsx

@@ -712,8 +712,7 @@ function NotificationPreviewCard({
           )}
         </div>
 
-        {/* lgtm[js/xss-through-dom] React JSX sets src via setAttribute, not raw HTML interpolation — safe from XSS */}
-        {image && (
+        {image && isSafeImageUrl(image) && (
           <img src={image} alt="" className="mt-1.5 rounded px-2 pb-2" />
         )}
       </div>
@@ -793,6 +792,15 @@ function defaultEndsAt(): string {
   return toDatetimeLocalUTC(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));
 }
 
+function isSafeImageUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
 type NotificationStatus = "active" | "pending" | "expired" | "archived";
 
 function getNotificationStatus(n: {

apps/webapp/app/routes/resources.platform-notifications.tsx

@@ -34,13 +34,13 @@ const POLL_INTERVAL_MS = 60000; // 1 minute
 
 export function usePlatformNotifications(organizationId: string, projectId: string) {
   const fetcher = useFetcher<typeof loader>();
-  const hasInitiallyFetched = useRef(false);
+  const lastLoadedUrl = useRef<string | null>(null);
 
   useEffect(() => {
     const url = `/resources/platform-notifications?organizationId=${encodeURIComponent(organizationId)}&projectId=${encodeURIComponent(projectId)}`;
 
-    if (!hasInitiallyFetched.current && fetcher.state === "idle") {
-      hasInitiallyFetched.current = true;
+    if (lastLoadedUrl.current !== url && fetcher.state === "idle") {
+      lastLoadedUrl.current = url;
       fetcher.load(url);
     }
 

apps/webapp/app/services/platformNotificationCounter.server.ts

@@ -0,0 +1,45 @@
+import { Redis } from "ioredis";
+import { env } from "~/env.server";
+import { singleton } from "~/utils/singleton";
+import { logger } from "./logger.server";
+
+const KEY_PREFIX = "cli-notif-ctr:";
+const MAX_COUNTER = 1000;
+
+function initializeRedis(): Redis | undefined {
+  const host = env.CACHE_REDIS_HOST;
+  if (!host) return undefined;
+
+  return new Redis({
+    connectionName: "platformNotificationCounter",
+    host,
+    port: env.CACHE_REDIS_PORT,
+    username: env.CACHE_REDIS_USERNAME,
+    password: env.CACHE_REDIS_PASSWORD,
+    keyPrefix: "tr:",
+    enableAutoPipelining: true,
+    ...(env.CACHE_REDIS_TLS_DISABLED === "true" ? {} : { tls: {} }),
+  });
+}
+
+const redis = singleton("platformNotificationCounter", initializeRedis);
+
+/** Increment and return the user's CLI request counter (1-based, wraps at 1001→1). */
+export async function incrementCliRequestCounter(userId: string): Promise<number> {
+  if (!redis) return 1;
+
+  try {
+    const key = `${KEY_PREFIX}${userId}`;
+    const value = await redis.incr(key);
+
+    if (value > MAX_COUNTER) {
+      await redis.set(key, "1");
+      return 1;
+    }
+
+    return value;
+  } catch (error) {
+    logger.error("Failed to increment CLI notification counter", { userId, error });
+    return 1;
+  }
+}

apps/webapp/app/services/platformNotifications.server.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 import { errAsync, fromPromise, type ResultAsync } from "neverthrow";
 import { prisma } from "~/db.server";
 import { type PlatformNotificationScope, type PlatformNotificationSurface } from "@trigger.dev/database";
+import { incrementCliRequestCounter } from "./platformNotificationCounter.server";
 
 // --- Payload schema (spec v1) ---
 
@@ -275,6 +276,9 @@ export async function recordNotificationClicked({
 // --- Read: recent changelogs (for Help & Feedback) ---
 
 export async function getRecentChangelogs({ limit = 2 }: { limit?: number } = {}) {
+  // NOTE: Intentionally not filtering by archivedAt, startsAt, or endsAt.
+  // We want to show archived and expired changelogs in the "What's new" section
+  // so users can still find recent release notes.
   const notifications = await prisma.platformNotification.findMany({
     where: {
       surface: "WEBAPP",
@@ -398,6 +402,11 @@ export async function getNextCliNotification({
 
   const sorted = [...notifications].sort(compareNotifications);
 
+  // Global per-user request counter stored in Redis, used for cliShowEvery modulo.
+  // This is independent of per-notification showCount so that cliMaxShowCount
+  // correctly tracks actual displays, not API encounters.
+  const requestCounter = await incrementCliRequestCounter(userId);
+
   for (const n of sorted) {
     const interaction = n.interactions[0] ?? null;
 
@@ -407,6 +416,12 @@ export async function getNextCliNotification({
     const parsed = PayloadV1Schema.safeParse(n.payload);
     if (!parsed.success) continue;
 
+    // Check cliShowEvery using the global request counter
+    if (n.cliShowEvery !== null && requestCounter % n.cliShowEvery !== 0) {
+      continue;
+    }
+
+    // Only increment showCount when the notification will actually be displayed
     const updated = await prisma.platformNotificationInteraction.upsert({
       where: { notificationId_userId: { notificationId: n.id, userId } },
       update: { showCount: { increment: 1 } },
@@ -418,11 +433,6 @@ export async function getNextCliNotification({
       },
     });
 
-    // If cliShowEvery is set, only return on every N-th request
-    if (n.cliShowEvery !== null && updated.showCount % n.cliShowEvery !== 0) {
-      continue;
-    }
-
     return {
       id: n.id,
       payload: parsed.data,

packages/cli-v3/src/utilities/platformNotifications.ts

@@ -95,26 +95,32 @@ export async function awaitAndDisplayPlatformNotification(
 ): Promise<void> {
   if (!notificationPromise) return;
 
-  // Race against a short delay — if the promise resolves quickly, skip the spinner
-  const pending = Symbol("pending");
-  const raceResult = await Promise.race([
-    notificationPromise,
-    new Promise<typeof pending>((resolve) => setTimeout(() => resolve(pending), SPINNER_DELAY_MS)),
-  ]);
-
-  if (raceResult !== pending) {
-    displayPlatformNotification(raceResult);
-    return;
-  }
+  try {
+    // Race against a short delay — if the promise resolves quickly, skip the spinner
+    const pending = Symbol("pending");
+    const raceResult = await Promise.race([
+      notificationPromise,
+      new Promise<typeof pending>((resolve) =>
+        setTimeout(() => resolve(pending), SPINNER_DELAY_MS)
+      ),
+    ]);
+
+    if (raceResult !== pending) {
+      displayPlatformNotification(raceResult);
+      return;
+    }
 
-  // Still pending after delay — show a spinner while waiting
-  const $spinner = spinner();
-  $spinner.start("Checking for notifications");
-  const notification = await notificationPromise;
+    // Still pending after delay — show a spinner while waiting
+    const $spinner = spinner();
+    $spinner.start("Checking for notifications");
+    const notification = await notificationPromise;
 
-  if (notification) {
-    $spinner.stop(formatNotificationMessage(notification));
-  } else {
-    $spinner.stop("No new notifications");
+    if (notification) {
+      $spinner.stop(formatNotificationMessage(notification));
+    } else {
+      $spinner.stop("No new notifications");
+    }
+  } catch (error) {
+    logger.debug("Platform notification display failed silently", { error });
   }
 }