From e736cf448b1a18fed71908ef716dc6b63f0ce5a2 Mon Sep 17 00:00:00 2001
From: Adam <adam.gaborjani.szabo@gmail.com>
Date: Mon, 31 Aug 2026 16:21:47 +0000
Subject: [PATCH 1/3] feat(admin): add targeted announcements

---
 e2e/admin-announcements.spec.ts               | 133 +++++++
 src/components/admin/AdminAnnouncements.tsx   | 370 ++++++++++++++++++
 src/components/layout/AnnouncementBanner.tsx  |  62 +++
 src/components/layout/AppLayout.tsx           |  56 ++-
 src/lib/announcements.ts                      | 181 +++++++++
 src/pages/AdminPage.tsx                       |  13 +-
 .../components/AdminAnnouncements.test.tsx    |  77 ++++
 src/test/components/AppLayout.test.tsx        |  77 ++++
 src/test/deno-assert-shim.ts                  |  10 +
 src/test/pages/AdminPage.test.tsx             | 134 +++++++
 supabase/config.toml                          |   3 +
 .../functions/_shared/announcements.test.ts   |  67 ++++
 supabase/functions/_shared/announcements.ts   |  99 +++++
 .../functions/_shared/native-cors.test.ts     |   1 +
 supabase/functions/admin/index.ts             | 110 ++++++
 supabase/functions/announcements/index.ts     | 105 +++++
 .../20260831152911_admin_announcements.sql    |  81 ++++
 .../tests/admin_announcements_rls_test.sql    | 108 +++++
 18 files changed, 1683 insertions(+), 4 deletions(-)
 create mode 100644 e2e/admin-announcements.spec.ts
 create mode 100644 src/components/admin/AdminAnnouncements.tsx
 create mode 100644 src/components/layout/AnnouncementBanner.tsx
 create mode 100644 src/lib/announcements.ts
 create mode 100644 src/test/components/AdminAnnouncements.test.tsx
 create mode 100644 src/test/components/AppLayout.test.tsx
 create mode 100644 supabase/functions/_shared/announcements.test.ts
 create mode 100644 supabase/functions/_shared/announcements.ts
 create mode 100644 supabase/functions/announcements/index.ts
 create mode 100644 supabase/migrations/20260831152911_admin_announcements.sql
 create mode 100644 supabase/tests/admin_announcements_rls_test.sql

diff --git a/e2e/admin-announcements.spec.ts b/e2e/admin-announcements.spec.ts
new file mode 100644
index 000000000..bddd887c4
--- /dev/null
+++ b/e2e/admin-announcements.spec.ts
@@ -0,0 +1,133 @@
+import { expect, test } from '@playwright/test';
+import { stubSupabaseSession } from './helpers/auth';
+
+const ANNOUNCEMENT_ID = 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee';
+const TARGET_USER_ID = '11111111-2222-4333-8444-555555555555';
+
+test.beforeEach(async ({ page }) => {
+  await stubSupabaseSession(page, { userId: '99999999-9999-4999-8999-999999999999' });
+  await page.addInitScript(() => {
+    window.localStorage.setItem('debate-trainer-onboarding', JSON.stringify({
+      state: { hasCompletedOnboarding: true, isTourRunning: false },
+      version: 0,
+    }));
+  });
+});
+
+test('user sees and permanently dismisses an active announcement', async ({ page }) => {
+  let dismissBody: Record<string, unknown> | null = null;
+  await page.route('**/functions/v1/announcements*', async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    if (request.method() === 'POST' && url.searchParams.get('action') === 'dismiss') {
+      dismissBody = request.postDataJSON();
+      await route.fulfill({ json: { success: true } });
+      return;
+    }
+    await route.fulfill({
+      json: {
+        announcements: [{
+          id: ANNOUNCEMENT_ID,
+          title: 'Scheduled maintenance',
+          body: 'DebateLab will be unavailable for ten minutes.',
+          starts_at: '2026-08-31T12:00:00.000Z',
+          expires_at: null,
+          created_at: '2026-08-31T11:00:00.000Z',
+        }],
+      },
+    });
+  });
+
+  await page.goto('/app');
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toBeVisible();
+  await expect(page.getByText('DebateLab will be unavailable for ten minutes.')).toBeVisible();
+
+  await page.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toHaveCount(0);
+  expect(dismissBody).toEqual({ announcementId: ANNOUNCEMENT_ID });
+});
+
+test('admin creates a targeted announcement and deletes it from history', async ({ page }) => {
+  let createBody: Record<string, unknown> | null = null;
+  let deleteBody: Record<string, unknown> | null = null;
+
+  await page.route('**/functions/v1/announcements*', (route) => route.fulfill({ json: { announcements: [] } }));
+  await page.route('**/functions/v1/admin*', async (route) => {
+    const request = route.request();
+    const action = new URL(request.url()).searchParams.get('action');
+
+    if (action === 'stats') {
+      await route.fulfill({ json: { totals: { requests: 0, cost: 0, successRate: 100 }, daily: [], byFeature: {}, byUser: [] } });
+      return;
+    }
+    if (action === 'users') {
+      await route.fulfill({ json: { users: [{ id: TARGET_USER_ID, email: 'target@example.com', createdAt: '2026-08-01T00:00:00.000Z', lastSignIn: '2026-08-31T00:00:00.000Z', requestCount: 2, role: 'user' }] } });
+      return;
+    }
+    if (action === 'promo-codes') {
+      await route.fulfill({ json: { codes: [] } });
+      return;
+    }
+    if (action === 'subscribers') {
+      await route.fulfill({ json: { subscribers: [] } });
+      return;
+    }
+    if (action === 'announcements') {
+      await route.fulfill({ json: { announcements: [] } });
+      return;
+    }
+    if (action === 'create-announcement') {
+      createBody = request.postDataJSON();
+      await route.fulfill({
+        status: 201,
+        json: {
+          announcement: {
+            id: ANNOUNCEMENT_ID,
+            title: 'Targeted note',
+            body: 'This message is only for the selected user.',
+            target_type: 'users',
+            target_user_ids: [TARGET_USER_ID],
+            starts_at: '2026-08-31T12:00:00.000Z',
+            expires_at: null,
+            created_by: '99999999-9999-4999-8999-999999999999',
+            created_at: '2026-08-31T12:00:00.000Z',
+          },
+        },
+      });
+      return;
+    }
+    if (action === 'delete-announcement') {
+      deleteBody = request.postDataJSON();
+      await route.fulfill({ json: { success: true } });
+      return;
+    }
+    await route.fulfill({ status: 400, json: { error: 'Unexpected action' } });
+  });
+
+  await page.goto('/app/admin');
+  await expect(page.getByRole('heading', { name: 'Admin Dashboard' })).toBeVisible();
+  await page.getByRole('tab', { name: 'Announcements' }).click();
+  await expect(page.getByText('No announcements yet')).toBeVisible();
+
+  await page.getByLabel('Title').fill('Targeted note');
+  await page.getByLabel('Message').fill('This message is only for the selected user.');
+  await page.getByLabel('Audience').click();
+  await page.getByRole('option', { name: 'Selected users' }).click();
+  await page.getByRole('checkbox', { name: 'Select target@example.com' }).check();
+  await page.getByRole('button', { name: 'Create announcement' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Targeted note' })).toBeVisible();
+  await expect.poll(() => createBody).toMatchObject({
+    title: 'Targeted note',
+    body: 'This message is only for the selected user.',
+    targetType: 'users',
+    targetUserIds: [TARGET_USER_ID],
+  });
+
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete announcement' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Targeted note' })).toHaveCount(0);
+  await expect.poll(() => deleteBody).toEqual({ announcementId: ANNOUNCEMENT_ID });
+});
diff --git a/src/components/admin/AdminAnnouncements.tsx b/src/components/admin/AdminAnnouncements.tsx
new file mode 100644
index 000000000..8487e8185
--- /dev/null
+++ b/src/components/admin/AdminAnnouncements.tsx
@@ -0,0 +1,370 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Loader2, Megaphone, Search, Trash2 } from 'lucide-react';
+import {
+  createAnnouncement,
+  deleteAnnouncement,
+  listAdminAnnouncements,
+  type AdminAnnouncement,
+  type AnnouncementTargetType,
+} from '@/lib/announcements';
+import { formatEuropeanDateTime } from '@/lib/date-format';
+import { useToast } from '@/hooks/use-toast';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+export interface AnnouncementTargetUser {
+  id: string;
+  email: string;
+  role: string;
+}
+
+interface AdminAnnouncementsProps {
+  users: AnnouncementTargetUser[];
+}
+
+function isTargetType(value: string): value is AnnouncementTargetType {
+  return value === 'all' || value === 'users';
+}
+
+function getStatus(announcement: AdminAnnouncement) {
+  const now = Date.now();
+  if (new Date(announcement.startsAt).getTime() > now) return 'Scheduled';
+  if (announcement.expiresAt && new Date(announcement.expiresAt).getTime() <= now) return 'Expired';
+  return 'Active';
+}
+
+export function AdminAnnouncements({ users }: AdminAnnouncementsProps) {
+  const [announcements, setAnnouncements] = useState<AdminAnnouncement[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<AdminAnnouncement | null>(null);
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [targetType, setTargetType] = useState<AnnouncementTargetType>('all');
+  const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(() => new Set());
+  const [userSearch, setUserSearch] = useState('');
+  const [startsAt, setStartsAt] = useState('');
+  const [expiresAt, setExpiresAt] = useState('');
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const load = async () => {
+      try {
+        setAnnouncements(await listAdminAnnouncements(controller.signal));
+      } catch (error) {
+        if (controller.signal.aborted) return;
+        toast({
+          title: 'Could not load announcements',
+          description: error instanceof Error ? error.message : 'Try again.',
+          variant: 'destructive',
+        });
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    };
+    void load();
+    return () => controller.abort();
+  }, [toast]);
+
+  const filteredUsers = useMemo(() => {
+    const query = userSearch.trim().toLowerCase();
+    if (!query) return users;
+    return users.filter((user) => user.email.toLowerCase().includes(query));
+  }, [userSearch, users]);
+
+  const toggleUser = (userId: string, checked: boolean) => {
+    setSelectedUserIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(userId);
+      else next.delete(userId);
+      return next;
+    });
+  };
+
+  const handleCreate = async () => {
+    if (!title.trim() || !body.trim()) return;
+    if (targetType === 'users' && selectedUserIds.size === 0) {
+      toast({
+        title: 'Select at least one user',
+        description: 'Targeted announcements need a recipient.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      const announcement = await createAnnouncement({
+        title,
+        body,
+        targetType,
+        targetUserIds: targetType === 'users' ? [...selectedUserIds] : undefined,
+        startsAt: startsAt || undefined,
+        expiresAt: expiresAt || undefined,
+      });
+      setAnnouncements((current) => [announcement, ...current]);
+      setTitle('');
+      setBody('');
+      setTargetType('all');
+      setSelectedUserIds(new Set());
+      setStartsAt('');
+      setExpiresAt('');
+      toast({ title: 'Announcement created', description: 'Users will see it when it becomes active.' });
+    } catch (error) {
+      toast({
+        title: 'Could not create announcement',
+        description: error instanceof Error ? error.message : 'Try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      setDeleting(true);
+      await deleteAnnouncement(deleteTarget.id);
+      setAnnouncements((current) => current.filter((item) => item.id !== deleteTarget.id));
+      setDeleteTarget(null);
+      toast({ title: 'Announcement deleted' });
+    } catch (error) {
+      toast({
+        title: 'Could not delete announcement',
+        description: error instanceof Error ? error.message : 'Try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Megaphone className="h-5 w-5" aria-hidden="true" />
+            Compose announcement
+          </CardTitle>
+          <CardDescription>Send a dismissible message to everyone or selected users.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="space-y-2">
+            <Label htmlFor="announcement-title">Title</Label>
+            <Input
+              id="announcement-title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              maxLength={160}
+              placeholder="Scheduled maintenance"
+            />
+            <p className="text-xs text-muted-foreground">{title.length}/160 characters</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="announcement-body">Message</Label>
+            <Textarea
+              id="announcement-body"
+              value={body}
+              onChange={(event) => setBody(event.target.value)}
+              maxLength={5000}
+              rows={6}
+              placeholder="Tell users what changed and what they need to know."
+            />
+            <p className="text-xs text-muted-foreground">{body.length}/5000 characters</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="announcement-audience">Audience</Label>
+            <Select
+              value={targetType}
+              onValueChange={(value) => {
+                if (isTargetType(value)) setTargetType(value);
+              }}
+            >
+              <SelectTrigger id="announcement-audience">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All users</SelectItem>
+                <SelectItem value="users">Selected users</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {targetType === 'users' && (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                <Label>Recipients</Label>
+                <span className="text-xs text-muted-foreground">{selectedUserIds.size} selected</span>
+              </div>
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" aria-hidden="true" />
+                <Input
+                  value={userSearch}
+                  onChange={(event) => setUserSearch(event.target.value)}
+                  className="pl-9"
+                  placeholder="Search by email"
+                  aria-label="Search announcement recipients"
+                />
+              </div>
+              <ScrollArea className="h-52 rounded-lg border">
+                <div className="space-y-1 p-2">
+                  {filteredUsers.map((user) => (
+                    <label
+                      key={user.id}
+                      className="flex min-h-11 cursor-pointer items-center gap-3 rounded-md px-2 py-2 hover:bg-accent"
+                    >
+                      <Checkbox
+                        checked={selectedUserIds.has(user.id)}
+                        onCheckedChange={(checked) => toggleUser(user.id, checked === true)}
+                        aria-label={`Select ${user.email}`}
+                      />
+                      <span className="min-w-0 flex-1 truncate text-sm">{user.email}</span>
+                      <Badge variant="secondary">{user.role}</Badge>
+                    </label>
+                  ))}
+                  {filteredUsers.length === 0 && (
+                    <p className="px-2 py-8 text-center text-sm text-muted-foreground">No users match that search.</p>
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="announcement-start">Starts</Label>
+              <Input
+                id="announcement-start"
+                type="datetime-local"
+                value={startsAt}
+                onChange={(event) => setStartsAt(event.target.value)}
+              />
+              <p className="text-xs text-muted-foreground">Leave blank to start immediately.</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="announcement-expiry">Expires</Label>
+              <Input
+                id="announcement-expiry"
+                type="datetime-local"
+                value={expiresAt}
+                onChange={(event) => setExpiresAt(event.target.value)}
+              />
+              <p className="text-xs text-muted-foreground">Leave blank to keep it active.</p>
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            className="w-full sm:w-auto"
+            onClick={handleCreate}
+            disabled={submitting || !title.trim() || !body.trim()}
+          >
+            {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
+            Create announcement
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Announcement history</CardTitle>
+          <CardDescription>Review scheduled, active, and expired messages.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="flex min-h-48 items-center justify-center text-muted-foreground">
+              <Loader2 className="mr-2 h-5 w-5 animate-spin" aria-hidden="true" />
+              Loading announcements
+            </div>
+          ) : announcements.length === 0 ? (
+            <div className="rounded-lg border border-dashed px-4 py-12 text-center">
+              <Megaphone className="mx-auto mb-3 h-6 w-6 text-muted-foreground" aria-hidden="true" />
+              <p className="font-medium">No announcements yet</p>
+              <p className="mt-1 text-sm text-muted-foreground">Create the first message from the form.</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {announcements.map((announcement) => (
+                <article key={announcement.id} className="rounded-lg border p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h3 className="font-semibold">{announcement.title}</h3>
+                        <Badge variant={getStatus(announcement) === 'Active' ? 'default' : 'secondary'}>
+                          {getStatus(announcement)}
+                        </Badge>
+                        <Badge variant="outline">
+                          {announcement.targetType === 'all'
+                            ? 'All users'
+                            : `${announcement.targetUserIds?.length ?? 0} users`}
+                        </Badge>
+                      </div>
+                      <p className="mt-2 whitespace-pre-wrap break-words text-sm text-muted-foreground">
+                        {announcement.body}
+                      </p>
+                      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                        <span>Starts {formatEuropeanDateTime(announcement.startsAt)}</span>
+                        {announcement.expiresAt && <span>Expires {formatEuropeanDateTime(announcement.expiresAt)}</span>}
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="self-start text-destructive hover:text-destructive"
+                      onClick={() => setDeleteTarget(announcement)}
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
+                      Delete
+                    </Button>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this announcement?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This removes the message for every user and cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
+              Delete announcement
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/src/components/layout/AnnouncementBanner.tsx b/src/components/layout/AnnouncementBanner.tsx
new file mode 100644
index 000000000..654c81b36
--- /dev/null
+++ b/src/components/layout/AnnouncementBanner.tsx
@@ -0,0 +1,62 @@
+import { Loader2, Megaphone, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { UserAnnouncement } from '@/lib/announcements';
+
+interface AnnouncementBannerProps {
+  announcement: UserAnnouncement;
+  position: number;
+  total: number;
+  dismissing: boolean;
+  error: string | null;
+  onDismiss: () => void;
+}
+
+export function AnnouncementBanner({
+  announcement,
+  position,
+  total,
+  dismissing,
+  error,
+  onDismiss,
+}: AnnouncementBannerProps) {
+  return (
+    <section
+      aria-live="polite"
+      aria-label="Announcement"
+      className="border-b border-primary/20 bg-primary/[0.06]"
+    >
+      <div className="container flex items-start gap-3 px-4 py-3 sm:items-center">
+        <Megaphone className="mt-0.5 h-5 w-5 shrink-0 text-primary sm:mt-0" aria-hidden="true" />
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+            <h2 className="font-semibold text-foreground">{announcement.title}</h2>
+            {total > 1 && (
+              <span className="text-xs text-muted-foreground">
+                {position} of {total}
+              </span>
+            )}
+          </div>
+          <p className="whitespace-pre-wrap break-words text-sm text-muted-foreground">
+            {announcement.body}
+          </p>
+          {error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-11 w-11 shrink-0"
+          onClick={onDismiss}
+          disabled={dismissing}
+          aria-label={`Dismiss announcement: ${announcement.title}`}
+        >
+          {dismissing ? (
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+          ) : (
+            <X className="h-4 w-4" aria-hidden="true" />
+          )}
+        </Button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index f532b1244..0e040fb9a 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,6 +1,6 @@
 // src/components/layout/AppLayout.tsx
-import { useState } from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   Home,
@@ -24,6 +24,12 @@ import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+import { AnnouncementBanner } from '@/components/layout/AnnouncementBanner';
+import {
+  dismissAnnouncement,
+  listActiveAnnouncements,
+  type UserAnnouncement,
+} from '@/lib/announcements';
 
 const navItems = [
   { path: '/app', key: 'home', icon: Home },
@@ -42,7 +48,42 @@ const navItems = [
 
 export function AppLayout() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [announcements, setAnnouncements] = useState<UserAnnouncement[]>([]);
+  const [dismissingId, setDismissingId] = useState<string | null>(null);
+  const [dismissError, setDismissError] = useState<string | null>(null);
   const { t } = useTranslation();
+  const location = useLocation();
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const loadAnnouncements = async () => {
+      try {
+        const active = await listActiveAnnouncements(controller.signal);
+        if (!controller.signal.aborted) setAnnouncements(active);
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.warn('[Announcements] Unable to load', error instanceof Error ? error.message : 'Unknown error');
+          setAnnouncements([]);
+        }
+      }
+    };
+    setDismissError(null);
+    void loadAnnouncements();
+    return () => controller.abort();
+  }, [location.pathname]);
+
+  const handleDismissAnnouncement = async (announcementId: string) => {
+    try {
+      setDismissingId(announcementId);
+      setDismissError(null);
+      await dismissAnnouncement(announcementId);
+      setAnnouncements((current) => current.filter((announcement) => announcement.id !== announcementId));
+    } catch (error) {
+      setDismissError(error instanceof Error ? error.message : 'Could not dismiss this announcement.');
+    } finally {
+      setDismissingId(null);
+    }
+  };
 
   return (
     <div className="native-safe-screen flex flex-col bg-background">
@@ -128,6 +169,17 @@ export function AppLayout() {
         )}
       </header>
 
+      {announcements[0] && (
+        <AnnouncementBanner
+          announcement={announcements[0]}
+          position={1}
+          total={announcements.length}
+          dismissing={dismissingId === announcements[0].id}
+          error={dismissError}
+          onDismiss={() => handleDismissAnnouncement(announcements[0].id)}
+        />
+      )}
+
       {/* Main Content */}
       <main className="native-main-content flex-1">
         <Outlet />
diff --git a/src/lib/announcements.ts b/src/lib/announcements.ts
new file mode 100644
index 000000000..dd0461cbe
--- /dev/null
+++ b/src/lib/announcements.ts
@@ -0,0 +1,181 @@
+import { supabase, SUPABASE_URL } from '@/lib/supabase/client';
+import { z } from 'zod';
+
+export type AnnouncementTargetType = 'all' | 'users';
+
+export interface UserAnnouncement {
+  id: string;
+  title: string;
+  body: string;
+  startsAt: string;
+  expiresAt: string | null;
+  createdAt: string;
+}
+
+export interface AdminAnnouncement extends UserAnnouncement {
+  targetType: AnnouncementTargetType;
+  targetUserIds: string[] | null;
+  createdBy: string;
+}
+
+export interface CreateAnnouncementInput {
+  title: string;
+  body: string;
+  targetType: AnnouncementTargetType;
+  targetUserIds?: string[];
+  startsAt?: string;
+  expiresAt?: string;
+}
+
+const AnnouncementRowSchema = z.object({
+  id: z.uuid(),
+  title: z.string(),
+  body: z.string(),
+  starts_at: z.iso.datetime({ offset: true }),
+  expires_at: z.iso.datetime({ offset: true }).nullable(),
+  created_at: z.iso.datetime({ offset: true }),
+});
+
+const AdminAnnouncementRowSchema = AnnouncementRowSchema.extend({
+  target_type: z.enum(['all', 'users']),
+  target_user_ids: z.array(z.uuid()).nullable(),
+  created_by: z.uuid(),
+});
+
+const ActiveAnnouncementsResponseSchema = z.object({
+  announcements: z.array(AnnouncementRowSchema),
+});
+
+const AdminAnnouncementsResponseSchema = z.object({
+  announcements: z.array(AdminAnnouncementRowSchema),
+});
+
+const CreateAnnouncementResponseSchema = z.object({
+  announcement: AdminAnnouncementRowSchema,
+});
+
+type AnnouncementRow = z.infer<typeof AnnouncementRowSchema>;
+type AdminAnnouncementRow = z.infer<typeof AdminAnnouncementRowSchema>;
+
+async function requestFunction({
+  functionName,
+  action,
+  method = 'GET',
+  body,
+  signal,
+}: {
+  functionName: 'admin' | 'announcements';
+  action?: string;
+  method?: 'GET' | 'POST';
+  body?: unknown;
+  signal?: AbortSignal;
+}): Promise<unknown> {
+  const { data: { session } } = await supabase.auth.getSession();
+  if (!session) throw new Error('Not authenticated');
+
+  const query = action ? `?action=${encodeURIComponent(action)}` : '';
+  const response = await fetch(`${SUPABASE_URL}/functions/v1/${functionName}${query}`, {
+    method,
+    headers: {
+      Authorization: `Bearer ${session.access_token}`,
+      'Content-Type': 'application/json',
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+    signal,
+  });
+
+  const text = await response.text();
+  let payload: unknown;
+  try {
+    payload = text ? JSON.parse(text) : {};
+  } catch {
+    payload = {};
+  }
+
+  if (!response.ok) {
+    const message = typeof payload === 'object' && payload !== null && 'error' in payload &&
+      typeof payload.error === 'string'
+      ? payload.error
+      : `Request failed: ${response.status}`;
+    throw new Error(message);
+  }
+
+  return payload;
+}
+
+function normalizeAnnouncement(row: AnnouncementRow): UserAnnouncement {
+  return {
+    id: row.id,
+    title: row.title,
+    body: row.body,
+    startsAt: row.starts_at,
+    expiresAt: row.expires_at,
+    createdAt: row.created_at,
+  };
+}
+
+function normalizeAdminAnnouncement(row: AdminAnnouncementRow): AdminAnnouncement {
+  return {
+    ...normalizeAnnouncement(row),
+    targetType: row.target_type,
+    targetUserIds: row.target_user_ids,
+    createdBy: row.created_by,
+  };
+}
+
+function toIsoOrUndefined(value: string | undefined) {
+  return value ? new Date(value).toISOString() : undefined;
+}
+
+export async function listActiveAnnouncements(signal?: AbortSignal): Promise<UserAnnouncement[]> {
+  const payload = await requestFunction({
+    functionName: 'announcements',
+    signal,
+  });
+  const response = ActiveAnnouncementsResponseSchema.parse(payload);
+  return response.announcements.map(normalizeAnnouncement);
+}
+
+export async function dismissAnnouncement(announcementId: string): Promise<void> {
+  await requestFunction({
+    functionName: 'announcements',
+    action: 'dismiss',
+    method: 'POST',
+    body: { announcementId },
+  });
+}
+
+export async function listAdminAnnouncements(signal?: AbortSignal): Promise<AdminAnnouncement[]> {
+  const payload = await requestFunction({
+    functionName: 'admin',
+    action: 'announcements',
+    signal,
+  });
+  const response = AdminAnnouncementsResponseSchema.parse(payload);
+  return response.announcements.map(normalizeAdminAnnouncement);
+}
+
+export async function createAnnouncement(input: CreateAnnouncementInput): Promise<AdminAnnouncement> {
+  const payload = await requestFunction({
+    functionName: 'admin',
+    action: 'create-announcement',
+    method: 'POST',
+    body: {
+      ...input,
+      targetUserIds: input.targetType === 'users' ? input.targetUserIds : undefined,
+      startsAt: toIsoOrUndefined(input.startsAt),
+      expiresAt: toIsoOrUndefined(input.expiresAt),
+    },
+  });
+  const response = CreateAnnouncementResponseSchema.parse(payload);
+  return normalizeAdminAnnouncement(response.announcement);
+}
+
+export async function deleteAnnouncement(announcementId: string): Promise<void> {
+  await requestFunction({
+    functionName: 'admin',
+    action: 'delete-announcement',
+    method: 'POST',
+    body: { announcementId },
+  });
+}
diff --git a/src/pages/AdminPage.tsx b/src/pages/AdminPage.tsx
index c8d0f7eca..5ce65ab75 100644
--- a/src/pages/AdminPage.tsx
+++ b/src/pages/AdminPage.tsx
@@ -9,7 +9,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { useToast } from '@/hooks/use-toast';
 import { supabase, SUPABASE_URL } from '@/lib/supabase/client';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-import { Activity, Users, DollarSign, AlertCircle, Shield, Settings2, Loader2, Ban, UserCheck, Ticket, CreditCard, Gift } from 'lucide-react';
+import { Activity, Users, DollarSign, AlertCircle, Shield, Settings2, Loader2, Ban, UserCheck, Ticket, CreditCard, Gift, Megaphone } from 'lucide-react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import {
     Dialog,
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog';
 import { formatEuropeanDate } from '@/lib/date-format';
 import { captureProductEvent } from '@/lib/observability';
+import { AdminAnnouncements } from '@/components/admin/AdminAnnouncements';
 
 interface UsageStats {
     totals: { requests: number; cost: number; successRate: number; unknownCostRequests?: number };
@@ -389,9 +390,13 @@ export default function AdminPage() {
                 </div>
 
                 <Tabs defaultValue="usage" className="space-y-6">
-                    <TabsList className="flex-wrap">
+                    <TabsList className="h-auto flex-wrap justify-start">
                         <TabsTrigger value="usage">Usage Analytics</TabsTrigger>
                         <TabsTrigger value="users">User Management</TabsTrigger>
+                        <TabsTrigger value="announcements">
+                            <Megaphone className="h-4 w-4 mr-1" />
+                            Announcements
+                        </TabsTrigger>
                         <TabsTrigger value="promo-codes">
                             <Ticket className="h-4 w-4 mr-1" />
                             Promo Codes
@@ -631,6 +636,10 @@ export default function AdminPage() {
                         </Card>
                     </TabsContent>
 
+                    <TabsContent value="announcements" className="space-y-6">
+                        <AdminAnnouncements users={users} />
+                    </TabsContent>
+
                     {/* Promo Codes Tab */}
                     <TabsContent value="promo-codes" className="space-y-6">
                         <div className="grid gap-6 md:grid-cols-2">
diff --git a/src/test/components/AdminAnnouncements.test.tsx b/src/test/components/AdminAnnouncements.test.tsx
new file mode 100644
index 000000000..46db189c1
--- /dev/null
+++ b/src/test/components/AdminAnnouncements.test.tsx
@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { AdminAnnouncements } from '@/components/admin/AdminAnnouncements';
+
+const {
+  mockCreateAnnouncement,
+  mockDeleteAnnouncement,
+  mockListAdminAnnouncements,
+  mockToast,
+} = vi.hoisted(() => ({
+  mockCreateAnnouncement: vi.fn(),
+  mockDeleteAnnouncement: vi.fn(),
+  mockListAdminAnnouncements: vi.fn(),
+  mockToast: vi.fn(),
+}));
+
+vi.mock('@/lib/announcements', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/announcements')>();
+  return {
+    ...actual,
+    createAnnouncement: mockCreateAnnouncement,
+    deleteAnnouncement: mockDeleteAnnouncement,
+    listAdminAnnouncements: mockListAdminAnnouncements,
+  };
+});
+
+vi.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: mockToast }),
+}));
+
+describe('AdminAnnouncements', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    Element.prototype.scrollIntoView = vi.fn();
+    mockListAdminAnnouncements.mockResolvedValue([]);
+    mockCreateAnnouncement.mockResolvedValue({
+      id: 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee',
+      title: 'Targeted note',
+      body: 'This message is for one user.',
+      targetType: 'users',
+      targetUserIds: ['11111111-2222-4333-8444-555555555555'],
+      startsAt: '2026-08-31T12:00:00.000Z',
+      expiresAt: null,
+      createdBy: 'admin-id',
+      createdAt: '2026-08-31T12:00:00.000Z',
+    });
+  });
+
+  it('creates a targeted announcement with selected user IDs', async () => {
+    render(
+      <AdminAnnouncements
+        users={[{
+          id: '11111111-2222-4333-8444-555555555555',
+          email: 'selected@example.com',
+          role: 'user',
+        }]}
+      />
+    );
+
+    await screen.findByText('No announcements yet');
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Targeted note' } });
+    fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'This message is for one user.' } });
+    fireEvent.click(screen.getByLabelText('Audience'));
+    fireEvent.click(await screen.findByRole('option', { name: 'Selected users' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Select selected@example.com' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Create announcement' }));
+
+    await waitFor(() => expect(mockCreateAnnouncement).toHaveBeenCalledWith({
+      title: 'Targeted note',
+      body: 'This message is for one user.',
+      targetType: 'users',
+      targetUserIds: ['11111111-2222-4333-8444-555555555555'],
+      startsAt: undefined,
+      expiresAt: undefined,
+    }));
+  });
+});
diff --git a/src/test/components/AppLayout.test.tsx b/src/test/components/AppLayout.test.tsx
new file mode 100644
index 000000000..2842cc815
--- /dev/null
+++ b/src/test/components/AppLayout.test.tsx
@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
+import { AppLayout } from '@/components/layout/AppLayout';
+import type { UserAnnouncement } from '@/lib/announcements';
+
+const { mockDismissAnnouncement, mockListActiveAnnouncements } = vi.hoisted(() => ({
+  mockDismissAnnouncement: vi.fn(),
+  mockListActiveAnnouncements: vi.fn(),
+}));
+
+vi.mock('@/lib/announcements', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/announcements')>();
+  return {
+    ...actual,
+    dismissAnnouncement: mockDismissAnnouncement,
+    listActiveAnnouncements: mockListActiveAnnouncements,
+  };
+});
+
+const announcement: UserAnnouncement = {
+  id: 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee',
+  title: 'Scheduled maintenance',
+  body: 'DebateLab will be unavailable for ten minutes.',
+  startsAt: '2026-08-31T12:00:00.000Z',
+  expiresAt: null,
+  createdAt: '2026-08-31T11:00:00.000Z',
+};
+
+function renderLayout() {
+  return render(
+    <MemoryRouter initialEntries={['/app']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <Routes>
+        <Route path="/app" element={<AppLayout />}>
+          <Route index element={<Link to="next">Open next page</Link>} />
+          <Route path="next" element={<p>Next page</p>} />
+        </Route>
+      </Routes>
+    </MemoryRouter>
+  );
+}
+
+describe('AppLayout announcements', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockListActiveAnnouncements.mockResolvedValue([announcement]);
+    mockDismissAnnouncement.mockResolvedValue(undefined);
+  });
+
+  it('shows the active announcement and persists dismissal', async () => {
+    renderLayout();
+
+    expect(await screen.findByText('Scheduled maintenance')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }));
+
+    await waitFor(() => expect(mockDismissAnnouncement).toHaveBeenCalledWith(announcement.id));
+    expect(screen.queryByText('Scheduled maintenance')).not.toBeInTheDocument();
+  });
+
+  it('refreshes announcements on the next page change', async () => {
+    renderLayout();
+    await screen.findByText('Scheduled maintenance');
+
+    fireEvent.click(screen.getByRole('link', { name: 'Open next page' }));
+
+    await screen.findByText('Next page');
+    await waitFor(() => expect(mockListActiveAnnouncements).toHaveBeenCalledTimes(2));
+  });
+
+  it('keeps the app usable when announcements fail to load', async () => {
+    mockListActiveAnnouncements.mockRejectedValue(new Error('Network unavailable'));
+    renderLayout();
+
+    expect(await screen.findByRole('link', { name: 'Open next page' })).toBeInTheDocument();
+    expect(screen.queryByLabelText('Announcement')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/deno-assert-shim.ts b/src/test/deno-assert-shim.ts
index 8764a0666..193915bf8 100644
--- a/src/test/deno-assert-shim.ts
+++ b/src/test/deno-assert-shim.ts
@@ -2,6 +2,8 @@
 // function tests. Mapped over the exact import specifier via resolve.alias in
 // vitest.config.ts. The same files keep working under `deno test`.
 
+import { isDeepStrictEqual } from "node:util";
+
 export function assertStringIncludes(actual: string, expected: string, msg = ""): void {
   if (!actual.includes(expected)) {
     throw new Error(
@@ -9,3 +11,11 @@ export function assertStringIncludes(actual: string, expected: string, msg = "")
     );
   }
 }
+
+export function assertEquals(actual: unknown, expected: unknown, msg = ""): void {
+  if (!isDeepStrictEqual(actual, expected)) {
+    throw new Error(
+      msg || `Expected values to be equal:\n  ${JSON.stringify(expected)}\nActual value:\n  ${JSON.stringify(actual)}`,
+    );
+  }
+}
diff --git a/src/test/pages/AdminPage.test.tsx b/src/test/pages/AdminPage.test.tsx
index 7fd6dc306..f61eba4ce 100644
--- a/src/test/pages/AdminPage.test.tsx
+++ b/src/test/pages/AdminPage.test.tsx
@@ -377,4 +377,138 @@ describe('AdminPage Integration', () => {
         expect(screen.queryByText('$0.0000')).not.toBeInTheDocument();
         expect(screen.getByText('7 requests missing token data')).toBeInTheDocument();
     });
+
+    it('creates an announcement from the admin tab and adds it to history', async () => {
+        const createdBody: Record<string, unknown> = {};
+        const emptyStats = {
+            totals: { requests: 0, cost: 0, successRate: 100 },
+            daily: [] as unknown[],
+            byFeature: {},
+            byUser: [] as unknown[],
+        };
+
+        globalFetch.mockImplementation(async (url: string, init?: RequestInit) => {
+            if (url.includes('action=stats')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify(emptyStats) };
+            }
+            if (url.includes('action=users')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ users: [] }) };
+            }
+            if (url.includes('action=promo-codes')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ codes: [] }) };
+            }
+            if (url.includes('action=subscribers')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ subscribers: [] }) };
+            }
+            if (url.includes('action=announcements')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ announcements: [] }) };
+            }
+            if (url.includes('action=create-announcement')) {
+                Object.assign(createdBody, JSON.parse(String(init?.body ?? '{}')));
+                return {
+                    ok: true,
+                    status: 201,
+                    text: async () => JSON.stringify({
+                        announcement: {
+                            id: 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee',
+                            title: createdBody.title,
+                            body: createdBody.body,
+                            target_type: createdBody.targetType,
+                            target_user_ids: null,
+                            starts_at: '2026-08-31T12:00:00+00:00',
+                            expires_at: null,
+                            created_by: '99999999-9999-4999-8999-999999999999',
+                            created_at: '2026-08-31T12:00:00+00:00',
+                        },
+                    }),
+                };
+            }
+            return { ok: false, status: 404, text: async () => '{}' };
+        });
+
+        render(
+            <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+                <AdminPage />
+            </BrowserRouter>
+        );
+
+        await waitFor(() => expect(screen.getByText('Admin Dashboard')).toBeInTheDocument());
+        fireEvent.mouseDown(screen.getByRole('tab', { name: 'Announcements' }), { button: 0 });
+
+        await screen.findByText('No announcements yet');
+        fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Service update' } });
+        fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'DebateLab is back online.' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Create announcement' }));
+
+        await waitFor(() => expect(createdBody.title).toBe('Service update'));
+        expect(createdBody.body).toBe('DebateLab is back online.');
+        expect(createdBody.targetType).toBe('all');
+        expect(await screen.findByText('Service update')).toBeInTheDocument();
+        expect(screen.getByText('DebateLab is back online.')).toBeInTheDocument();
+    });
+
+    it('lists and deletes an existing announcement after confirmation', async () => {
+        const announcementId = 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee';
+        const emptyStats = {
+            totals: { requests: 0, cost: 0, successRate: 100 },
+            daily: [] as unknown[],
+            byFeature: {},
+            byUser: [] as unknown[],
+        };
+        const deleteBody: Record<string, unknown> = {};
+
+        globalFetch.mockImplementation(async (url: string, init?: RequestInit) => {
+            if (url.includes('action=stats')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify(emptyStats) };
+            }
+            if (url.includes('action=users')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ users: [] }) };
+            }
+            if (url.includes('action=promo-codes')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ codes: [] }) };
+            }
+            if (url.includes('action=subscribers')) {
+                return { ok: true, status: 200, text: async () => JSON.stringify({ subscribers: [] }) };
+            }
+            if (url.includes('action=announcements')) {
+                return {
+                    ok: true,
+                    status: 200,
+                    text: async () => JSON.stringify({
+                        announcements: [{
+                            id: announcementId,
+                            title: 'Remove me',
+                            body: 'This announcement is no longer needed.',
+                            target_type: 'all',
+                            target_user_ids: null,
+                            starts_at: '2026-08-31T12:00:00+00:00',
+                            expires_at: null,
+                            created_by: '99999999-9999-4999-8999-999999999999',
+                            created_at: '2026-08-31T12:00:00+00:00',
+                        }],
+                    }),
+                };
+            }
+            if (url.includes('action=delete-announcement')) {
+                Object.assign(deleteBody, JSON.parse(String(init?.body ?? '{}')));
+                return { ok: true, status: 200, text: async () => JSON.stringify({ success: true }) };
+            }
+            return { ok: false, status: 404, text: async () => '{}' };
+        });
+
+        render(
+            <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+                <AdminPage />
+            </BrowserRouter>
+        );
+
+        await waitFor(() => expect(screen.getByText('Admin Dashboard')).toBeInTheDocument());
+        fireEvent.mouseDown(screen.getByRole('tab', { name: 'Announcements' }), { button: 0 });
+        await screen.findByText('Remove me');
+        fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+        fireEvent.click(await screen.findByRole('button', { name: 'Delete announcement' }));
+
+        await waitFor(() => expect(deleteBody.announcementId).toBe(announcementId));
+        expect(screen.queryByText('Remove me')).not.toBeInTheDocument();
+    });
 });
diff --git a/supabase/config.toml b/supabase/config.toml
index 7dff7aabc..562c86101 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -18,6 +18,9 @@ verify_jwt = false
 [functions.admin]
 verify_jwt = false
 
+[functions.announcements]
+verify_jwt = false
+
 [functions.create-checkout]
 verify_jwt = false
 
diff --git a/supabase/functions/_shared/announcements.test.ts b/supabase/functions/_shared/announcements.test.ts
new file mode 100644
index 000000000..fd79ebce7
--- /dev/null
+++ b/supabase/functions/_shared/announcements.test.ts
@@ -0,0 +1,67 @@
+import { assertEquals } from "https://deno.land/std@0.224.0/assert/mod.ts";
+import {
+  validateAnnouncementId,
+  validateCreateAnnouncement,
+} from "./announcements.ts";
+
+const USER_ID = "11111111-2222-4333-8444-555555555555";
+
+Deno.test("announcement creation trims content and deduplicates target users", () => {
+  const result = validateCreateAnnouncement({
+    title: "  Scheduled maintenance  ",
+    body: "  DebateLab will be unavailable briefly.  ",
+    targetType: "users",
+    targetUserIds: [USER_ID, USER_ID],
+    startsAt: "2026-09-01T10:00:00.000Z",
+    expiresAt: "2026-09-02T10:00:00.000Z",
+  });
+
+  assertEquals(result, {
+    ok: true,
+    value: {
+      title: "Scheduled maintenance",
+      body: "DebateLab will be unavailable briefly.",
+      targetType: "users",
+      targetUserIds: [USER_ID],
+      startsAt: "2026-09-01T10:00:00.000Z",
+      expiresAt: "2026-09-02T10:00:00.000Z",
+    },
+  });
+});
+
+Deno.test("all-user announcements discard client target IDs", () => {
+  const result = validateCreateAnnouncement({
+    title: "New feature",
+    body: "Crossfire is now available.",
+    targetType: "all",
+    targetUserIds: [USER_ID],
+  });
+
+  assertEquals(result.ok, true);
+  if (result.ok) assertEquals(result.value.targetUserIds, null);
+});
+
+Deno.test("announcement creation rejects invalid windows and empty user targeting", () => {
+  assertEquals(validateCreateAnnouncement({
+    title: "Expired",
+    body: "This should fail.",
+    targetType: "all",
+    startsAt: "2026-09-02T10:00:00.000Z",
+    expiresAt: "2026-09-01T10:00:00.000Z",
+  }), { ok: false, error: "Expiry time must be after the start time" });
+
+  assertEquals(validateCreateAnnouncement({
+    title: "Targeted",
+    body: "This should also fail.",
+    targetType: "users",
+    targetUserIds: [],
+  }), { ok: false, error: "Select at least one user" });
+});
+
+Deno.test("announcement dismissal requires a UUID", () => {
+  assertEquals(validateAnnouncementId({ announcementId: USER_ID }), { ok: true, value: USER_ID });
+  assertEquals(validateAnnouncementId({ announcementId: "not-a-uuid" }), {
+    ok: false,
+    error: "A valid announcement ID is required",
+  });
+});
diff --git a/supabase/functions/_shared/announcements.ts b/supabase/functions/_shared/announcements.ts
new file mode 100644
index 000000000..0be7874bf
--- /dev/null
+++ b/supabase/functions/_shared/announcements.ts
@@ -0,0 +1,99 @@
+export const ANNOUNCEMENT_TITLE_MAX_LENGTH = 160;
+export const ANNOUNCEMENT_BODY_MAX_LENGTH = 5000;
+export const ANNOUNCEMENT_TARGET_USERS_MAX = 100;
+
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export type AnnouncementTargetType = "all" | "users";
+
+export type CreateAnnouncementInput = {
+  title: string;
+  body: string;
+  targetType: AnnouncementTargetType;
+  targetUserIds: string[] | null;
+  startsAt: string;
+  expiresAt: string | null;
+};
+
+export type ValidationResult<T> =
+  | { ok: true; value: T }
+  | { ok: false; error: string };
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function parseDate(value: unknown, fallback?: Date): Date | null {
+  if (value === undefined && fallback) return fallback;
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function isUuid(value: unknown): value is string {
+  return typeof value === "string" && UUID_PATTERN.test(value);
+}
+
+export function validateCreateAnnouncement(input: unknown): ValidationResult<CreateAnnouncementInput> {
+  if (!isRecord(input)) return { ok: false, error: "Request body must be an object" };
+
+  const title = typeof input.title === "string" ? input.title.trim() : "";
+  if (!title) return { ok: false, error: "Title is required" };
+  if (title.length > ANNOUNCEMENT_TITLE_MAX_LENGTH) {
+    return { ok: false, error: `Title must be ${ANNOUNCEMENT_TITLE_MAX_LENGTH} characters or fewer` };
+  }
+
+  const body = typeof input.body === "string" ? input.body.trim() : "";
+  if (!body) return { ok: false, error: "Message is required" };
+  if (body.length > ANNOUNCEMENT_BODY_MAX_LENGTH) {
+    return { ok: false, error: `Message must be ${ANNOUNCEMENT_BODY_MAX_LENGTH} characters or fewer` };
+  }
+
+  if (input.targetType !== "all" && input.targetType !== "users") {
+    return { ok: false, error: "Target type must be all or users" };
+  }
+
+  let targetUserIds: string[] | null = null;
+  if (input.targetType === "users") {
+    if (!Array.isArray(input.targetUserIds) || input.targetUserIds.length === 0) {
+      return { ok: false, error: "Select at least one user" };
+    }
+    if (input.targetUserIds.length > ANNOUNCEMENT_TARGET_USERS_MAX) {
+      return { ok: false, error: `Select no more than ${ANNOUNCEMENT_TARGET_USERS_MAX} users` };
+    }
+    if (!input.targetUserIds.every(isUuid)) {
+      return { ok: false, error: "Every targeted user must have a valid ID" };
+    }
+    targetUserIds = [...new Set(input.targetUserIds)];
+  }
+
+  const startsAt = parseDate(input.startsAt, new Date());
+  if (!startsAt) return { ok: false, error: "Start time must be a valid date" };
+
+  const expiresAt = input.expiresAt === null || input.expiresAt === undefined || input.expiresAt === ""
+    ? null
+    : parseDate(input.expiresAt);
+  if (input.expiresAt && !expiresAt) return { ok: false, error: "Expiry time must be a valid date" };
+  if (expiresAt && expiresAt <= startsAt) {
+    return { ok: false, error: "Expiry time must be after the start time" };
+  }
+
+  return {
+    ok: true,
+    value: {
+      title,
+      body,
+      targetType: input.targetType,
+      targetUserIds,
+      startsAt: startsAt.toISOString(),
+      expiresAt: expiresAt?.toISOString() ?? null,
+    },
+  };
+}
+
+export function validateAnnouncementId(input: unknown): ValidationResult<string> {
+  if (!isRecord(input) || !isUuid(input.announcementId)) {
+    return { ok: false, error: "A valid announcement ID is required" };
+  }
+  return { ok: true, value: input.announcementId };
+}
diff --git a/supabase/functions/_shared/native-cors.test.ts b/supabase/functions/_shared/native-cors.test.ts
index 3ac91a04a..0977a7821 100644
--- a/supabase/functions/_shared/native-cors.test.ts
+++ b/supabase/functions/_shared/native-cors.test.ts
@@ -2,6 +2,7 @@ import { assertStringIncludes } from "https://deno.land/std@0.224.0/assert/mod.t
 
 const browserCalledFunctions = [
   "admin",
+  "announcements",
   "ai",
   "ai-stream",
   "create-checkout",
diff --git a/supabase/functions/admin/index.ts b/supabase/functions/admin/index.ts
index eee646c93..2ac50669d 100644
--- a/supabase/functions/admin/index.ts
+++ b/supabase/functions/admin/index.ts
@@ -2,6 +2,10 @@
 // Provides usage statistics, rate limit management, and user management
 
 import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+import {
+    validateAnnouncementId,
+    validateCreateAnnouncement,
+} from "../_shared/announcements.ts";
 
 // SECURITY: Allow specific origins for CORS
 const ALLOWED_ORIGINS = [
@@ -150,6 +154,112 @@ Deno.serve(async (req) => {
     const action = url.searchParams.get("action");
 
     try {
+        // GET /admin?action=announcements - List all announcements for admin review
+        if (action === "announcements" && req.method === "GET") {
+            const { data, error } = await supabase
+                .from("admin_announcements")
+                .select("id,title,body,target_type,target_user_ids,starts_at,expires_at,created_by,created_at")
+                .order("created_at", { ascending: false });
+
+            if (error) {
+                console.error("[ADMIN] Failed to list announcements", error.code);
+                throw new Error("Failed to list announcements");
+            }
+
+            return new Response(JSON.stringify({ announcements: data ?? [] }), {
+                headers: { ...corsHeaders, "Content-Type": "application/json" },
+            });
+        }
+
+        // POST /admin?action=create-announcement - Create an all-user or targeted announcement
+        if (action === "create-announcement" && req.method === "POST") {
+            let body: unknown;
+            try {
+                body = await req.json();
+            } catch {
+                return new Response(JSON.stringify({ error: "Request body must be valid JSON" }), {
+                    status: 400,
+                    headers: { ...corsHeaders, "Content-Type": "application/json" },
+                });
+            }
+
+            const validated = validateCreateAnnouncement(body);
+            if (!validated.ok) {
+                return new Response(JSON.stringify({ error: validated.error }), {
+                    status: 400,
+                    headers: { ...corsHeaders, "Content-Type": "application/json" },
+                });
+            }
+
+            const { value } = validated;
+            const { data, error } = await supabase
+                .from("admin_announcements")
+                .insert({
+                    title: value.title,
+                    body: value.body,
+                    target_type: value.targetType,
+                    target_user_ids: value.targetUserIds,
+                    starts_at: value.startsAt,
+                    expires_at: value.expiresAt,
+                    created_by: user.id,
+                })
+                .select("id,title,body,target_type,target_user_ids,starts_at,expires_at,created_by,created_at")
+                .single();
+
+            if (error) {
+                console.error("[ADMIN] Failed to create announcement", error.code);
+                throw new Error("Failed to create announcement");
+            }
+
+            return new Response(JSON.stringify({ announcement: data }), {
+                status: 201,
+                headers: { ...corsHeaders, "Content-Type": "application/json" },
+            });
+        }
+
+        // POST /admin?action=delete-announcement - Remove an announcement and its dismissals
+        if (action === "delete-announcement" && req.method === "POST") {
+            let body: unknown;
+            try {
+                body = await req.json();
+            } catch {
+                return new Response(JSON.stringify({ error: "Request body must be valid JSON" }), {
+                    status: 400,
+                    headers: { ...corsHeaders, "Content-Type": "application/json" },
+                });
+            }
+
+            const announcementId = validateAnnouncementId(body);
+            if (!announcementId.ok) {
+                return new Response(JSON.stringify({ error: announcementId.error }), {
+                    status: 400,
+                    headers: { ...corsHeaders, "Content-Type": "application/json" },
+                });
+            }
+
+            const { data, error } = await supabase
+                .from("admin_announcements")
+                .delete()
+                .eq("id", announcementId.value)
+                .select("id")
+                .maybeSingle();
+
+            if (error) {
+                console.error("[ADMIN] Failed to delete announcement", error.code);
+                throw new Error("Failed to delete announcement");
+            }
+            if (!data) {
+                return new Response(JSON.stringify({ error: "Announcement not found" }), {
+                    status: 404,
+                    headers: { ...corsHeaders, "Content-Type": "application/json" },
+                });
+            }
+
+            return new Response(JSON.stringify({ success: true }), {
+                headers: { ...corsHeaders, "Content-Type": "application/json" },
+            });
+        }
+
         // GET /admin?action=stats - Get usage statistics
         if (action === "stats") {
             const days = parseInt(url.searchParams.get("days") || "7");
diff --git a/supabase/functions/announcements/index.ts b/supabase/functions/announcements/index.ts
new file mode 100644
index 000000000..0c939a672
--- /dev/null
+++ b/supabase/functions/announcements/index.ts
@@ -0,0 +1,105 @@
+// Supabase Edge Function: authenticated announcement delivery and dismissal.
+
+import { HttpError, jsonError, requireUser } from "../_shared/auth.ts";
+import { validateAnnouncementId } from "../_shared/announcements.ts";
+
+const ALLOWED_ORIGINS = [
+  "https://debate.pi-stack.org",
+  "http://localhost:8080",
+  "http://127.0.0.1:8080",
+  "http://localhost:5173",
+  "http://127.0.0.1:54321",
+  "capacitor://localhost",
+];
+
+function getCorsHeaders(origin: string | null) {
+  const allowedOrigin = origin && ALLOWED_ORIGINS.includes(origin) ? origin : ALLOWED_ORIGINS[0];
+  return {
+    "Access-Control-Allow-Origin": allowedOrigin,
+    "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+  };
+}
+
+function json(data: unknown, status: number, corsHeaders: Record<string, string>) {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { ...corsHeaders, "Content-Type": "application/json" },
+  });
+}
+
+Deno.serve(async (req) => {
+  const corsHeaders = getCorsHeaders(req.headers.get("origin"));
+  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
+
+  try {
+    const { user, userClient } = await requireUser(req);
+    const action = new URL(req.url).searchParams.get("action");
+
+    if (req.method === "GET" && action === null) {
+      const announcementsResult = await userClient
+        .from("admin_announcements")
+        .select("id,title,body,starts_at,expires_at,created_at")
+        .order("starts_at", { ascending: false })
+        .order("created_at", { ascending: false });
+
+      if (announcementsResult.error) {
+        console.error("[ANNOUNCEMENTS] Failed to list", announcementsResult.error.code);
+        throw new HttpError(500, "Unable to load announcements");
+      }
+
+      const activeAnnouncements = announcementsResult.data ?? [];
+      if (activeAnnouncements.length === 0) return json({ announcements: [] }, 200, corsHeaders);
+
+      const dismissalsResult = await userClient
+        .from("user_announcement_dismissals")
+        .select("announcement_id")
+        .eq("user_id", user.id)
+        .in("announcement_id", activeAnnouncements.map((announcement) => announcement.id));
+
+      if (dismissalsResult.error) {
+        console.error("[ANNOUNCEMENTS] Failed to list dismissals", dismissalsResult.error.code);
+        throw new HttpError(500, "Unable to load announcements");
+      }
+
+      const dismissedIds = new Set(
+        (dismissalsResult.data ?? []).map((row) => row.announcement_id),
+      );
+      const announcements = activeAnnouncements.filter(
+        (announcement) => !dismissedIds.has(announcement.id),
+      );
+
+      return json({ announcements }, 200, corsHeaders);
+    }
+
+    if (req.method === "POST" && action === "dismiss") {
+      let body: unknown;
+      try {
+        body = await req.json();
+      } catch {
+        throw new HttpError(400, "Request body must be valid JSON");
+      }
+
+      const announcementId = validateAnnouncementId(body);
+      if (!announcementId.ok) throw new HttpError(400, announcementId.error);
+
+      const { error } = await userClient
+        .from("user_announcement_dismissals")
+        .insert({ announcement_id: announcementId.value, user_id: user.id });
+
+      if (error && error.code !== "23505") {
+        console.error("[ANNOUNCEMENTS] Failed to dismiss", error.code);
+        if (error.code === "42501") {
+          throw new HttpError(404, "Announcement is not available");
+        }
+        throw new HttpError(500, "Unable to dismiss announcement");
+      }
+
+      return json({ success: true }, 200, corsHeaders);
+    }
+
+    throw new HttpError(405, "Method not allowed");
+  } catch (error) {
+    return jsonError(error, corsHeaders);
+  }
+});
diff --git a/supabase/migrations/20260831152911_admin_announcements.sql b/supabase/migrations/20260831152911_admin_announcements.sql
new file mode 100644
index 000000000..c65b907c3
--- /dev/null
+++ b/supabase/migrations/20260831152911_admin_announcements.sql
@@ -0,0 +1,81 @@
+-- Admin-created announcements with per-user, database-backed dismissal state.
+
+CREATE TABLE public.admin_announcements (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  title text NOT NULL CHECK (char_length(btrim(title)) BETWEEN 1 AND 160),
+  body text NOT NULL CHECK (char_length(btrim(body)) BETWEEN 1 AND 5000),
+  target_type text NOT NULL CHECK (target_type IN ('all', 'users')),
+  target_user_ids uuid[],
+  starts_at timestamptz NOT NULL DEFAULT now(),
+  expires_at timestamptz,
+  created_by uuid NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  CONSTRAINT admin_announcements_target_shape CHECK (
+    (target_type = 'all' AND target_user_ids IS NULL)
+    OR
+    (target_type = 'users' AND cardinality(target_user_ids) > 0)
+  ),
+  CONSTRAINT admin_announcements_valid_window CHECK (
+    expires_at IS NULL OR expires_at > starts_at
+  )
+);
+
+CREATE TABLE public.user_announcement_dismissals (
+  announcement_id uuid NOT NULL REFERENCES public.admin_announcements(id) ON DELETE CASCADE,
+  user_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  dismissed_at timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (announcement_id, user_id)
+);
+
+CREATE INDEX admin_announcements_active_window_idx
+  ON public.admin_announcements (starts_at, expires_at);
+CREATE INDEX admin_announcements_target_users_idx
+  ON public.admin_announcements USING gin (target_user_ids)
+  WHERE target_type = 'users';
+CREATE INDEX user_announcement_dismissals_user_idx
+  ON public.user_announcement_dismissals (user_id, dismissed_at DESC);
+
+ALTER TABLE public.admin_announcements ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.user_announcement_dismissals ENABLE ROW LEVEL SECURITY;
+
+REVOKE ALL ON TABLE public.admin_announcements FROM PUBLIC, anon, authenticated;
+REVOKE ALL ON TABLE public.user_announcement_dismissals FROM PUBLIC, anon, authenticated;
+
+GRANT SELECT (id, title, body, starts_at, expires_at, created_at)
+  ON TABLE public.admin_announcements TO authenticated;
+GRANT SELECT, INSERT ON TABLE public.user_announcement_dismissals TO authenticated;
+GRANT ALL ON TABLE public.admin_announcements TO service_role;
+GRANT ALL ON TABLE public.user_announcement_dismissals TO service_role;
+GRANT SELECT ON TABLE public.user_roles TO service_role;
+
+CREATE POLICY "Users read active targeted announcements"
+  ON public.admin_announcements
+  FOR SELECT
+  TO authenticated
+  USING (
+    starts_at <= now()
+    AND (expires_at IS NULL OR expires_at > now())
+    AND (
+      target_type = 'all'
+      OR (SELECT auth.uid()) = ANY(target_user_ids)
+    )
+  );
+
+CREATE POLICY "Users read their announcement dismissals"
+  ON public.user_announcement_dismissals
+  FOR SELECT
+  TO authenticated
+  USING (user_id = (SELECT auth.uid()));
+
+CREATE POLICY "Users dismiss visible announcements"
+  ON public.user_announcement_dismissals
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (
+    user_id = (SELECT auth.uid())
+    AND EXISTS (
+      SELECT 1
+      FROM public.admin_announcements AS announcement
+      WHERE announcement.id = announcement_id
+    )
+  );
diff --git a/supabase/tests/admin_announcements_rls_test.sql b/supabase/tests/admin_announcements_rls_test.sql
new file mode 100644
index 000000000..be4ba7afd
--- /dev/null
+++ b/supabase/tests/admin_announcements_rls_test.sql
@@ -0,0 +1,108 @@
+BEGIN;
+SELECT plan(13);
+
+INSERT INTO auth.users (id)
+VALUES
+  ('11111111-1111-4111-8111-111111111111'),
+  ('22222222-2222-4222-8222-222222222222');
+
+INSERT INTO public.admin_announcements (
+  id,
+  title,
+  body,
+  target_type,
+  target_user_ids,
+  starts_at,
+  expires_at,
+  created_by
+)
+VALUES
+  ('aaaaaaaa-0000-4000-8000-000000000001', 'Everyone', 'Visible to everyone.', 'all', NULL, now() - interval '1 hour', NULL, '99999999-9999-4999-8999-999999999999'),
+  ('aaaaaaaa-0000-4000-8000-000000000002', 'For current user', 'Visible to the current user.', 'users', ARRAY['11111111-1111-4111-8111-111111111111']::uuid[], now() - interval '1 hour', NULL, '99999999-9999-4999-8999-999999999999'),
+  ('aaaaaaaa-0000-4000-8000-000000000003', 'For another user', 'Not visible to the current user.', 'users', ARRAY['22222222-2222-4222-8222-222222222222']::uuid[], now() - interval '1 hour', NULL, '99999999-9999-4999-8999-999999999999'),
+  ('aaaaaaaa-0000-4000-8000-000000000004', 'Future', 'Not active yet.', 'all', NULL, now() + interval '1 day', NULL, '99999999-9999-4999-8999-999999999999'),
+  ('aaaaaaaa-0000-4000-8000-000000000005', 'Expired', 'No longer active.', 'all', NULL, now() - interval '2 days', now() - interval '1 day', '99999999-9999-4999-8999-999999999999');
+
+SELECT ok(
+  has_column_privilege('authenticated', 'public.admin_announcements', 'title', 'SELECT'),
+  'authenticated users can read public announcement fields'
+);
+SELECT ok(
+  NOT has_column_privilege('authenticated', 'public.admin_announcements', 'target_user_ids', 'SELECT'),
+  'authenticated users cannot read recipient UUID arrays'
+);
+SELECT ok(
+  NOT has_table_privilege('anon', 'public.admin_announcements', 'SELECT'),
+  'anonymous callers cannot read announcements'
+);
+
+SET LOCAL ROLE authenticated;
+SELECT set_config('request.jwt.claim.sub', '11111111-1111-4111-8111-111111111111', true);
+SELECT set_config('request.jwt.claim.role', 'authenticated', true);
+
+SELECT results_eq(
+  $$SELECT title FROM public.admin_announcements ORDER BY title$$,
+  ARRAY['Everyone', 'For current user'],
+  'users only read active announcements addressed to them'
+);
+SELECT throws_ok(
+  $$SELECT target_user_ids FROM public.admin_announcements$$,
+  '42501',
+  NULL,
+  'recipient UUID arrays remain private'
+);
+SELECT lives_ok(
+  $$INSERT INTO public.user_announcement_dismissals (announcement_id, user_id)
+    VALUES ('aaaaaaaa-0000-4000-8000-000000000001', '11111111-1111-4111-8111-111111111111')$$,
+  'users can dismiss a visible announcement for themselves'
+);
+SELECT results_eq(
+  $$SELECT count(*)::bigint FROM public.user_announcement_dismissals$$,
+  ARRAY[1::bigint],
+  'users read their own persisted dismissal'
+);
+SELECT throws_ok(
+  $$INSERT INTO public.user_announcement_dismissals (announcement_id, user_id)
+    VALUES ('aaaaaaaa-0000-4000-8000-000000000003', '11111111-1111-4111-8111-111111111111')$$,
+  '42501',
+  NULL,
+  'users cannot dismiss an announcement targeted to someone else'
+);
+SELECT throws_ok(
+  $$INSERT INTO public.user_announcement_dismissals (announcement_id, user_id)
+    VALUES ('aaaaaaaa-0000-4000-8000-000000000005', '11111111-1111-4111-8111-111111111111')$$,
+  '42501',
+  NULL,
+  'users cannot dismiss an expired announcement'
+);
+SELECT throws_ok(
+  $$INSERT INTO public.user_announcement_dismissals (announcement_id, user_id)
+    VALUES ('aaaaaaaa-0000-4000-8000-000000000001', '22222222-2222-4222-8222-222222222222')$$,
+  '42501',
+  NULL,
+  'users cannot write a dismissal for another user'
+);
+SELECT throws_ok(
+  $$UPDATE public.user_announcement_dismissals SET dismissed_at = now()$$,
+  '42501',
+  NULL,
+  'users cannot update dismissals'
+);
+SELECT throws_ok(
+  $$DELETE FROM public.user_announcement_dismissals$$,
+  '42501',
+  NULL,
+  'users cannot delete dismissals'
+);
+
+RESET ROLE;
+SET LOCAL ROLE anon;
+SELECT throws_ok(
+  $$SELECT id FROM public.admin_announcements$$,
+  '42501',
+  NULL,
+  'anonymous callers cannot select announcement rows'
+);
+
+SELECT * FROM finish();
+ROLLBACK;

From 1819a0248e14d3c257a1a215cda7a894fac20f38 Mon Sep 17 00:00:00 2001
From: Adam <adam.gaborjani.szabo@gmail.com>
Date: Mon, 31 Aug 2026 16:44:24 +0000
Subject: [PATCH 2/3] fix(admin): address announcement review findings

---
 e2e/admin-announcements.spec.ts               |  2 +-
 src/components/admin/AdminAnnouncements.tsx   |  1 +
 src/components/layout/AppLayout.tsx           |  9 ++-
 src/lib/announcements.ts                      |  4 +-
 src/test/announcements.test.ts                | 55 +++++++++++++++++++
 src/test/components/AppLayout.test.tsx        | 28 ++++++++++
 src/test/pages/AdminPage.test.tsx             |  2 +-
 .../20260831152911_admin_announcements.sql    |  2 +-
 .../tests/admin_announcements_rls_test.sql    | 10 +++-
 9 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 src/test/announcements.test.ts

diff --git a/e2e/admin-announcements.spec.ts b/e2e/admin-announcements.spec.ts
index bddd887c4..1d189ad15 100644
--- a/e2e/admin-announcements.spec.ts
+++ b/e2e/admin-announcements.spec.ts
@@ -125,7 +125,7 @@ test('admin creates a targeted announcement and deletes it from history', async
     targetUserIds: [TARGET_USER_ID],
   });
 
-  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete announcement: Targeted note' }).click();
   await page.getByRole('button', { name: 'Delete announcement' }).click();
 
   await expect(page.getByRole('heading', { name: 'Targeted note' })).toHaveCount(0);
diff --git a/src/components/admin/AdminAnnouncements.tsx b/src/components/admin/AdminAnnouncements.tsx
index 8487e8185..fc01da1a5 100644
--- a/src/components/admin/AdminAnnouncements.tsx
+++ b/src/components/admin/AdminAnnouncements.tsx
@@ -335,6 +335,7 @@ export function AdminAnnouncements({ users }: AdminAnnouncementsProps) {
                       variant="ghost"
                       size="sm"
                       className="self-start text-destructive hover:text-destructive"
+                      aria-label={`Delete announcement: ${announcement.title}`}
                       onClick={() => setDeleteTarget(announcement)}
                     >
                       <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 0e040fb9a..56662a483 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -50,7 +50,7 @@ export function AppLayout() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [announcements, setAnnouncements] = useState<UserAnnouncement[]>([]);
   const [dismissingId, setDismissingId] = useState<string | null>(null);
-  const [dismissError, setDismissError] = useState<string | null>(null);
+  const [dismissError, setDismissError] = useState<{ announcementId: string; message: string } | null>(null);
   const { t } = useTranslation();
   const location = useLocation();
 
@@ -79,7 +79,10 @@ export function AppLayout() {
       await dismissAnnouncement(announcementId);
       setAnnouncements((current) => current.filter((announcement) => announcement.id !== announcementId));
     } catch (error) {
-      setDismissError(error instanceof Error ? error.message : 'Could not dismiss this announcement.');
+      setDismissError({
+        announcementId,
+        message: error instanceof Error ? error.message : 'Could not dismiss this announcement.',
+      });
     } finally {
       setDismissingId(null);
     }
@@ -175,7 +178,7 @@ export function AppLayout() {
           position={1}
           total={announcements.length}
           dismissing={dismissingId === announcements[0].id}
-          error={dismissError}
+          error={dismissError?.announcementId === announcements[0].id ? dismissError.message : null}
           onDismiss={() => handleDismissAnnouncement(announcements[0].id)}
         />
       )}
diff --git a/src/lib/announcements.ts b/src/lib/announcements.ts
index dd0461cbe..7c440bef8 100644
--- a/src/lib/announcements.ts
+++ b/src/lib/announcements.ts
@@ -124,7 +124,9 @@ function normalizeAdminAnnouncement(row: AdminAnnouncementRow): AdminAnnouncemen
 }
 
 function toIsoOrUndefined(value: string | undefined) {
-  return value ? new Date(value).toISOString() : undefined;
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toISOString();
 }
 
 export async function listActiveAnnouncements(signal?: AbortSignal): Promise<UserAnnouncement[]> {
diff --git a/src/test/announcements.test.ts b/src/test/announcements.test.ts
new file mode 100644
index 000000000..c5f9cc864
--- /dev/null
+++ b/src/test/announcements.test.ts
@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createAnnouncement } from '@/lib/announcements';
+
+const { mockSupabase } = vi.hoisted(() => ({
+  mockSupabase: {
+    auth: {
+      getSession: vi.fn(),
+    },
+  },
+}));
+
+vi.mock('@/lib/supabase/client', () => ({
+  supabase: mockSupabase,
+  SUPABASE_URL: 'http://localhost:54321',
+}));
+
+describe('announcement API client', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSupabase.auth.getSession.mockResolvedValue({
+      data: { session: { access_token: 'test-token' } },
+    });
+  });
+
+  it('passes invalid non-empty dates through for server-side validation', async () => {
+    let requestBody: Record<string, unknown> = {};
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (_input, init) => {
+      requestBody = JSON.parse(String(init?.body ?? '{}'));
+      return new Response(JSON.stringify({
+        announcement: {
+          id: 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee',
+          title: 'Date validation',
+          body: 'The server should reject invalid dates.',
+          target_type: 'all',
+          target_user_ids: null,
+          starts_at: '2026-08-31T12:00:00+00:00',
+          expires_at: null,
+          created_by: '99999999-9999-4999-8999-999999999999',
+          created_at: '2026-08-31T12:00:00+00:00',
+        },
+      }), { status: 201, headers: { 'Content-Type': 'application/json' } });
+    });
+
+    await createAnnouncement({
+      title: 'Date validation',
+      body: 'The server should reject invalid dates.',
+      targetType: 'all',
+      startsAt: 'not-a-date',
+      expiresAt: 'also-not-a-date',
+    });
+
+    expect(requestBody.startsAt).toBe('not-a-date');
+    expect(requestBody.expiresAt).toBe('also-not-a-date');
+  });
+});
diff --git a/src/test/components/AppLayout.test.tsx b/src/test/components/AppLayout.test.tsx
index 2842cc815..215d4aeee 100644
--- a/src/test/components/AppLayout.test.tsx
+++ b/src/test/components/AppLayout.test.tsx
@@ -67,6 +67,34 @@ describe('AppLayout announcements', () => {
     await waitFor(() => expect(mockListActiveAnnouncements).toHaveBeenCalledTimes(2));
   });
 
+  it('does not show a stale dismissal error under the next announcement', async () => {
+    const nextAnnouncement: UserAnnouncement = {
+      ...announcement,
+      id: 'bbbbbbbb-cccc-4ddd-8eee-ffffffffffff',
+      title: 'New announcement',
+      body: 'This message replaced the previous one.',
+    };
+    let rejectDismissal: (reason: Error) => void = () => undefined;
+    const pendingDismissal = new Promise<void>((_resolve, reject) => {
+      rejectDismissal = reject;
+    });
+    mockListActiveAnnouncements
+      .mockResolvedValueOnce([announcement])
+      .mockResolvedValueOnce([nextAnnouncement]);
+    mockDismissAnnouncement.mockReturnValue(pendingDismissal);
+
+    renderLayout();
+    await screen.findByText('Scheduled maintenance');
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }));
+    fireEvent.click(screen.getByRole('link', { name: 'Open next page' }));
+    await screen.findByText('New announcement');
+
+    rejectDismissal(new Error('Could not dismiss the old announcement'));
+
+    await waitFor(() => expect(mockDismissAnnouncement).toHaveBeenCalledWith(announcement.id));
+    expect(screen.queryByText('Could not dismiss the old announcement')).not.toBeInTheDocument();
+  });
+
   it('keeps the app usable when announcements fail to load', async () => {
     mockListActiveAnnouncements.mockRejectedValue(new Error('Network unavailable'));
     renderLayout();
diff --git a/src/test/pages/AdminPage.test.tsx b/src/test/pages/AdminPage.test.tsx
index f61eba4ce..3dd527320 100644
--- a/src/test/pages/AdminPage.test.tsx
+++ b/src/test/pages/AdminPage.test.tsx
@@ -505,7 +505,7 @@ describe('AdminPage Integration', () => {
         await waitFor(() => expect(screen.getByText('Admin Dashboard')).toBeInTheDocument());
         fireEvent.mouseDown(screen.getByRole('tab', { name: 'Announcements' }), { button: 0 });
         await screen.findByText('Remove me');
-        fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Delete announcement: Remove me' }));
         fireEvent.click(await screen.findByRole('button', { name: 'Delete announcement' }));
 
         await waitFor(() => expect(deleteBody.announcementId).toBe(announcementId));
diff --git a/supabase/migrations/20260831152911_admin_announcements.sql b/supabase/migrations/20260831152911_admin_announcements.sql
index c65b907c3..873490cd9 100644
--- a/supabase/migrations/20260831152911_admin_announcements.sql
+++ b/supabase/migrations/20260831152911_admin_announcements.sql
@@ -13,7 +13,7 @@ CREATE TABLE public.admin_announcements (
   CONSTRAINT admin_announcements_target_shape CHECK (
     (target_type = 'all' AND target_user_ids IS NULL)
     OR
-    (target_type = 'users' AND cardinality(target_user_ids) > 0)
+    (target_type = 'users' AND target_user_ids IS NOT NULL AND cardinality(target_user_ids) > 0)
   ),
   CONSTRAINT admin_announcements_valid_window CHECK (
     expires_at IS NULL OR expires_at > starts_at
diff --git a/supabase/tests/admin_announcements_rls_test.sql b/supabase/tests/admin_announcements_rls_test.sql
index be4ba7afd..85607a838 100644
--- a/supabase/tests/admin_announcements_rls_test.sql
+++ b/supabase/tests/admin_announcements_rls_test.sql
@@ -1,5 +1,5 @@
 BEGIN;
-SELECT plan(13);
+SELECT plan(14);
 
 INSERT INTO auth.users (id)
 VALUES
@@ -23,6 +23,14 @@ VALUES
   ('aaaaaaaa-0000-4000-8000-000000000004', 'Future', 'Not active yet.', 'all', NULL, now() + interval '1 day', NULL, '99999999-9999-4999-8999-999999999999'),
   ('aaaaaaaa-0000-4000-8000-000000000005', 'Expired', 'No longer active.', 'all', NULL, now() - interval '2 days', now() - interval '1 day', '99999999-9999-4999-8999-999999999999');
 
+SELECT throws_ok(
+  $$INSERT INTO public.admin_announcements (title, body, target_type, target_user_ids, created_by)
+    VALUES ('Missing recipients', 'This must fail.', 'users', NULL, '99999999-9999-4999-8999-999999999999')$$,
+  '23514',
+  NULL,
+  'targeted announcements require a non-null recipient array'
+);
+
 SELECT ok(
   has_column_privilege('authenticated', 'public.admin_announcements', 'title', 'SELECT'),
   'authenticated users can read public announcement fields'

From fdd3e6cd6f32004ce358c358c0fb424d89a1a196 Mon Sep 17 00:00:00 2001
From: Adam <adam.gaborjani.szabo@gmail.com>
Date: Mon, 31 Aug 2026 17:06:32 +0000
Subject: [PATCH 3/3] fix(announcements): guard against stale dismissal loads

---
 src/components/layout/AppLayout.tsx    | 10 ++++++--
 src/test/components/AppLayout.test.tsx | 32 +++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 56662a483..990ff836e 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,5 +1,5 @@
 // src/components/layout/AppLayout.tsx
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -51,6 +51,7 @@ export function AppLayout() {
   const [announcements, setAnnouncements] = useState<UserAnnouncement[]>([]);
   const [dismissingId, setDismissingId] = useState<string | null>(null);
   const [dismissError, setDismissError] = useState<{ announcementId: string; message: string } | null>(null);
+  const dismissedAnnouncementIds = useRef(new Set<string>());
   const { t } = useTranslation();
   const location = useLocation();
 
@@ -59,7 +60,11 @@ export function AppLayout() {
     const loadAnnouncements = async () => {
       try {
         const active = await listActiveAnnouncements(controller.signal);
-        if (!controller.signal.aborted) setAnnouncements(active);
+        if (!controller.signal.aborted) {
+          setAnnouncements(active.filter(
+            (announcement) => !dismissedAnnouncementIds.current.has(announcement.id),
+          ));
+        }
       } catch (error) {
         if (!controller.signal.aborted) {
           console.warn('[Announcements] Unable to load', error instanceof Error ? error.message : 'Unknown error');
@@ -77,6 +82,7 @@ export function AppLayout() {
       setDismissingId(announcementId);
       setDismissError(null);
       await dismissAnnouncement(announcementId);
+      dismissedAnnouncementIds.current.add(announcementId);
       setAnnouncements((current) => current.filter((announcement) => announcement.id !== announcementId));
     } catch (error) {
       setDismissError({
diff --git a/src/test/components/AppLayout.test.tsx b/src/test/components/AppLayout.test.tsx
index 215d4aeee..96746ddf1 100644
--- a/src/test/components/AppLayout.test.tsx
+++ b/src/test/components/AppLayout.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
 import { AppLayout } from '@/components/layout/AppLayout';
 import type { UserAnnouncement } from '@/lib/announcements';
@@ -95,6 +95,36 @@ describe('AppLayout announcements', () => {
     expect(screen.queryByText('Could not dismiss the old announcement')).not.toBeInTheDocument();
   });
 
+  it('does not restore a dismissed announcement from a stale route load', async () => {
+    let resolveDismissal: () => void = () => undefined;
+    let resolveStaleLoad: (announcements: UserAnnouncement[]) => void = () => undefined;
+    const pendingDismissal = new Promise<void>((resolve) => {
+      resolveDismissal = resolve;
+    });
+    const staleLoad = new Promise<UserAnnouncement[]>((resolve) => {
+      resolveStaleLoad = resolve;
+    });
+    mockListActiveAnnouncements
+      .mockResolvedValueOnce([announcement])
+      .mockReturnValueOnce(staleLoad);
+    mockDismissAnnouncement.mockReturnValue(pendingDismissal);
+
+    renderLayout();
+    await screen.findByText('Scheduled maintenance');
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }));
+    fireEvent.click(screen.getByRole('link', { name: 'Open next page' }));
+    await waitFor(() => expect(mockListActiveAnnouncements).toHaveBeenCalledTimes(2));
+
+    resolveDismissal();
+    await waitFor(() => expect(screen.queryByText('Scheduled maintenance')).not.toBeInTheDocument());
+    await act(async () => {
+      resolveStaleLoad([announcement]);
+      await staleLoad;
+    });
+
+    expect(screen.queryByText('Scheduled maintenance')).not.toBeInTheDocument();
+  });
+
   it('keeps the app usable when announcements fail to load', async () => {
     mockListActiveAnnouncements.mockRejectedValue(new Error('Network unavailable'));
     renderLayout();