From 38b1b31399cbf8a934b05a491ef91de77ae47ffc Mon Sep 17 00:00:00 2001
From: TSVRN9 <66744142+TSVRN9@users.noreply.github.com>
Date: Wed, 19 Aug 2026 13:15:00 -0400
Subject: [PATCH 1/3] web: social activity feed (pings + sightings)

Evolves /notifications into a unified, chronological activity feed
(pings + favorited-food sightings), with "ping a friend" as a
first-class action there instead of buried in /friends' accepted-
friends list. /friends stays scoped to search/request/accept.

- No schema changes: `pings` has no read_at column, so ping unread
  state is derived from a device-local "last viewed the feed" marker
  (web/src/lib/feedLastSeen.ts, localStorage, same shape as
  preferences.ts) rather than a server flag. Sightings keep their
  existing server-persisted read_at.
- Closes #62: sighting mark-as-read is now a real <button> (keyboard-
  reachable via focus+Enter), alongside the pre-existing onmouseenter
  for mouse users, which is unchanged.
- Signed-out: feed shell + sign-in value prop pointing at the header's
  existing "Sign in with Google" control (no duplicate button).
- Carry-over from PR #69's review (issue #66 comment): replaced
  home-dashboard.spec.ts's `**/api/**`-only residency guard with a
  page.on("request") listener flagging any same-origin /api/ path or
  disallowed cross-origin request (fires for no-cors fetches too,
  which the old glob-based route() interception missed). Explicit
  allow-list for the Google Fonts cross-origin request app.css (#42)
  already makes on every page. Proven red-first via mutation
  (temporary no-cors fetch in +page.svelte, reverted -- diff to that
  file is empty).
- Fixed friends-notifications.spec.ts's two known nits: cookie name
  now derived from PUBLIC_SUPABASE_URL instead of hardcoded
  "your-project-ref", and the unawaited-PATCH race (both the
  friendships Accept instance and its unfixed twin on the
  notifications toggle) replaced with expect.poll.

Red-green TDD throughout; see issue #66 for the full red/green log.
---
 web/e2e/friends-notifications.spec.ts     | 213 +++++++++++++++++-----
 web/e2e/home-dashboard.spec.ts            |  29 ++-
 web/src/lib/feedLastSeen.ts               |  13 ++
 web/src/routes/friends/+page.svelte       |  91 ++-------
 web/src/routes/notifications/+page.svelte | 187 ++++++++++++++++---
 5 files changed, 375 insertions(+), 158 deletions(-)
 create mode 100644 web/src/lib/feedLastSeen.ts

diff --git a/web/e2e/friends-notifications.spec.ts b/web/e2e/friends-notifications.spec.ts
index 96583463..32be538e 100644
--- a/web/e2e/friends-notifications.spec.ts
+++ b/web/e2e/friends-notifications.spec.ts
@@ -1,11 +1,15 @@
+import { readFileSync, existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
 import { test, expect, type Page, type Route } from "@playwright/test";
 
-// Coverage for #39: styling on the friends/pings and notifications screens (src/routes/friends,
-// src/routes/notifications). Both are gated on a signed-in session (see CLAUDE.md — friends, pings
-// and profile are the only legitimately server-backed features), so this spec has two halves per
-// page: a real, unmocked signed-out check (no session cookie at all — proves the sign-in prompt
-// renders instead of crashing), and a signed-in check that mocks the Supabase session and REST
-// responses so nothing here ever touches the live project.
+// Coverage for #39 (styling) and #66 (social activity feed: pings + favorited-food sightings
+// merged into one feed on src/routes/notifications, "ping a friend" moved off src/routes/friends).
+// Both pages are gated on a signed-in session (see CLAUDE.md — friends, pings and profile are the
+// only legitimately server-backed features), so this spec has two halves per page: a real,
+// unmocked signed-out check (no session cookie at all — proves the sign-in prompt renders instead
+// of crashing), and a signed-in check that mocks the Supabase session and REST responses so nothing
+// here ever touches the live project.
 //
 // Session mocking: @supabase/ssr's browser client stores its session as a cookie
 // (`sb-<project-ref>-auth-token`, base64url-JSON, see node_modules/@supabase/ssr/dist/main/cookies.js),
@@ -22,6 +26,24 @@ import { test, expect, type Page, type Route } from "@playwright/test";
 const USER_ID = "11111111-1111-4111-8111-111111111111";
 const FRIEND_ID = "22222222-2222-4222-8222-222222222222";
 const REQUESTER_ID = "33333333-3333-4333-8333-333333333333";
+const HAMPSHIRE_TID = 3;
+const WORCESTER_TID = 1;
+
+const WEB_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+/** Reads PUBLIC_SUPABASE_URL from web/.env (falling back to .env.example, since local runs may
+ * not have copied it yet — CI's e2e job does `cp web/.env.example web/.env` first) and derives the
+ * project ref the same way @supabase/supabase-js itself does for its default cookie/storage key
+ * (see node_modules/@supabase/supabase-js/dist/index.mjs: `sb-${new URL(supabaseUrl).hostname.split(".")[0]}-auth-token`).
+ * Was previously hardcoded as "your-project-ref" (only correct because that happens to be the
+ * .env.example placeholder) — deriving it means this spec doesn't silently drift from the client. */
+function supabaseCookieName(): string {
+	const envPath = existsSync(path.join(WEB_DIR, ".env")) ? path.join(WEB_DIR, ".env") : path.join(WEB_DIR, ".env.example");
+	const match = readFileSync(envPath, "utf-8").match(/^PUBLIC_SUPABASE_URL=(.+)$/m);
+	if (!match) throw new Error(`PUBLIC_SUPABASE_URL not found in ${envPath}`);
+	const projectRef = new URL(match[1].trim()).hostname.split(".")[0];
+	return `sb-${projectRef}-auth-token`;
+}
 
 function fakeSessionCookie(): [string, string] {
 	const now = Math.floor(Date.now() / 1000);
@@ -44,10 +66,10 @@ function fakeSessionCookie(): [string, string] {
 			created_at: new Date().toISOString(),
 		},
 	};
-	return ["sb-your-project-ref-auth-token", "base64-" + Buffer.from(JSON.stringify(session)).toString("base64url")];
+	return [supabaseCookieName(), "base64-" + Buffer.from(JSON.stringify(session)).toString("base64url")];
 }
 
-type CapturedRequest = { table: string; method: string; url: URL };
+type CapturedRequest = { table: string; method: string; url: URL; body: unknown };
 
 /** Seeds the fake session cookie and wires up a REST mock router + a realtime no-op, so a
  * signed-in test never reaches the live project. `handlers` maps a `rest/v1/<table>` path segment
@@ -63,7 +85,11 @@ async function signInAndMockSupabase(page: Page, handlers: Record<string, (route
 	await page.route("**/rest/v1/**", async (route) => {
 		const url = new URL(route.request().url());
 		const table = url.pathname.replace("/rest/v1/", "");
-		requests.push({ table, method: route.request().method(), url });
+		const method = route.request().method();
+		// postDataJSON() throws on bodyless requests (GET/DELETE-without-body) -- only POST/PATCH here
+		// ever carry one.
+		const body = method === "POST" || method === "PATCH" ? route.request().postDataJSON() : null;
+		requests.push({ table, method, url, body });
 		const handler = handlers[table];
 		if (handler) {
 			await handler(route, url);
@@ -74,14 +100,35 @@ async function signInAndMockSupabase(page: Page, handlers: Record<string, (route
 	// Belt-and-braces: nothing should hit real auth (getSession() is satisfied from the cookie), but
 	// if something did call it, this keeps it from reaching the live project.
 	await page.route("**/auth/v1/**", (route) => route.fulfill({ json: {} }));
-	// friends/+page.svelte opens a realtime channel for the pings inbox -- page.route doesn't cover
-	// WebSockets, so this closes the connection immediately instead of letting it hit the live
+	// notifications/+page.svelte opens a realtime channel for the pings inbox -- page.route doesn't
+	// cover WebSockets, so this closes the connection immediately instead of letting it hit the live
 	// project's realtime endpoint.
 	await page.routeWebSocket(/realtime/, (ws) => ws.close());
 
 	return requests;
 }
 
+/** profiles is queried two different shapes on notifications/+page.svelte: `.eq("user_id",
+ * me).single()` for the notifications toggle, and `.in("user_id", otherIds)` for friend names. Both
+ * hit the same `rest/v1/profiles` path, so the mock has to branch on the query string instead of
+ * the table name. */
+function profilesHandler(single: Record<string, unknown>, friendRows: { user_id: string; display_name: string }[] = []) {
+	return (route: Route, url: URL) => {
+		const userIdParam = url.searchParams.get("user_id") ?? "";
+		if (userIdParam.startsWith("in.")) return route.fulfill({ json: friendRows });
+		return route.fulfill({ json: single });
+	};
+}
+
+async function waitForRequest(requests: CapturedRequest[], table: string, method: string): Promise<CapturedRequest> {
+	await expect
+		.poll(() => requests.some((r) => r.table === table && r.method === method), {
+			message: `expected a ${method} to ${table} — click handlers are async and Playwright's .click() doesn't wait for them`,
+		})
+		.toBe(true);
+	return requests.find((r) => r.table === table && r.method === method)!;
+}
+
 test.describe("Friends — signed out", () => {
 	test("shows a styled sign-in prompt instead of the friends UI", async ({ page }) => {
 		await page.goto("/friends");
@@ -96,14 +143,20 @@ test.describe("Friends — signed out", () => {
 });
 
 test.describe("Notifications — signed out", () => {
-	test("shows a styled sign-in prompt instead of the notifications UI", async ({ page }) => {
+	test("shows the feed shell with a sign-in value prop, not a dead end", async ({ page }) => {
 		await page.goto("/notifications");
 
 		await expect(page.getByRole("heading", { name: "Notifications", level: 1 })).toHaveClass(/page-title/);
 		const prompt = page.locator(".empty-state");
 		await expect(prompt).toBeVisible();
-		await expect(prompt).toContainText("Sign in to enable favorited-food alerts.");
-		await expect(page.getByRole("heading", { name: "Sightings" })).toHaveCount(0);
+		await expect(prompt).toContainText("Sign in to see this feed");
+		await expect(prompt).toContainText("pings from friends and favorited-dish alerts");
+		// No crash: none of the signed-in-only sections render.
+		await expect(page.getByRole("heading", { name: "Activity" })).toHaveCount(0);
+		await expect(page.getByRole("heading", { name: "Ping a friend" })).toHaveCount(0);
+		// The value prop points at the header's own control -- it must not add a second one (that
+		// would make every getByRole("button", { name: /Sign in/ }) locator ambiguous).
+		await expect(page.getByRole("button", { name: /Sign in/ })).toHaveCount(1);
 	});
 });
 
@@ -129,7 +182,6 @@ test.describe("Friends — signed in", () => {
 						{ user_id: REQUESTER_ID, display_name: "Riley Requested" },
 					],
 				}),
-			pings: (route) => route.fulfill({ json: [] }),
 		});
 
 		await page.goto("/friends");
@@ -147,18 +199,19 @@ test.describe("Friends — signed in", () => {
 		await expect(outgoingRow.getByRole("button", { name: "Accept" })).toHaveCount(0);
 
 		await acceptButton.click();
-		const patch = requests.find((r) => r.table === "friendships" && r.method === "PATCH");
-		expect(patch, "Accept should PATCH the friendships row").toBeTruthy();
-		expect(patch!.url.searchParams.get("user_a")).toBe(`eq.${friendships[0].user_a}`);
-		expect(patch!.url.searchParams.get("user_b")).toBe(`eq.${friendships[0].user_b}`);
+		// Playwright's click() resolves once the click is dispatched, not once acceptFriend()'s async
+		// PATCH has round-tripped through the mock router -- polling instead of reading requests
+		// synchronously closes that race (previously ~L149).
+		const patch = await waitForRequest(requests, "friendships", "PATCH");
+		expect(patch.url.searchParams.get("user_a")).toBe(`eq.${friendships[0].user_a}`);
+		expect(patch.url.searchParams.get("user_b")).toBe(`eq.${friendships[0].user_b}`);
 	});
 
-	test("accepted friends get ping controls in a card, badged distinctly from requests", async ({ page }) => {
+	test("accepted friends are shown without ping controls -- pinging moved to the activity feed (#66)", async ({ page }) => {
 		const friendship = { user_a: USER_ID < FRIEND_ID ? USER_ID : FRIEND_ID, user_b: USER_ID < FRIEND_ID ? FRIEND_ID : USER_ID, status: "accepted", requested_by: FRIEND_ID };
 		await signInAndMockSupabase(page, {
 			friendships: (route) => route.fulfill({ json: [friendship] }),
 			profiles: (route) => route.fulfill({ json: [{ user_id: FRIEND_ID, display_name: "Casey Friend" }] }),
-			pings: (route) => route.fulfill({ json: [{ id: "ping-1", sender_id: FRIEND_ID, receiver_id: USER_ID, hall_tid: 3, message: "meet up?", created_at: new Date().toISOString() }] }),
 		});
 
 		await page.goto("/friends");
@@ -166,58 +219,130 @@ test.describe("Friends — signed in", () => {
 
 		const friendRow = page.locator("li.card", { hasText: "Casey Friend" });
 		await expect(friendRow.locator(".badge", { hasText: "Friend" })).toBeVisible();
-		const pingButton = friendRow.getByRole("button", { name: /Ping/ });
-		await expect(pingButton).toHaveClass(/btn-secondary/);
-
-		const inboxEntry = page.locator("li", { hasText: "meet up?" });
-		await expect(inboxEntry).toBeVisible();
-		await expect(inboxEntry.locator(".badge")).toHaveText("Hampshire");
+		await expect(friendRow.getByRole("button", { name: /Ping/ })).toHaveCount(0);
+		await expect(page.getByRole("heading", { name: "Pings you've received" })).toHaveCount(0);
+		await expect(page.getByRole("link", { name: "Notifications feed" })).toBeVisible();
 	});
 });
 
 test.describe("Notifications — signed in", () => {
 	test("the alert toggle is visually clear and flips state with the right PATCH", async ({ page }) => {
 		const requests = await signInAndMockSupabase(page, {
-			profiles: (route) => route.fulfill({ json: { notifications_enabled: false } }),
+			profiles: profilesHandler({ notifications_enabled: false }),
 			food_sightings: (route) => route.fulfill({ json: [] }),
+			pings: (route) => route.fulfill({ json: [] }),
+			friendships: (route) => route.fulfill({ json: [] }),
 			favorited_foods: (route) => route.fulfill({ json: [] }),
 		});
 
 		await page.goto("/notifications");
 
-		const badge = page.locator(".badge");
+		const badge = page.locator(".badge").first();
 		await expect(badge).toHaveText("Alerts off", { timeout: 15_000 }); // hydration proof: reflects the mocked profile fetch
 
 		const toggle = page.getByRole("checkbox");
 		await toggle.click();
 		await expect(badge).toHaveText("Alerts on");
 
-		const patch = requests.find((r) => r.table === "profiles" && r.method === "PATCH");
-		expect(patch, "toggling should PATCH the profile row").toBeTruthy();
-		expect(patch!.url.searchParams.get("user_id")).toBe(`eq.${USER_ID}`);
+		// Same race as the friendships Accept PATCH above (previously ~L195, unfixed twin of ~L149).
+		const patch = await waitForRequest(requests, "profiles", "PATCH");
+		expect(patch.url.searchParams.get("user_id")).toBe(`eq.${USER_ID}`);
 	});
 
-	test("unread sightings are badged New, hall names are badged, both use the design tokens", async ({ page }) => {
+	test("feed mixes pings and sightings newest-first, both badged New when unread", async ({ page }) => {
+		const older = new Date(Date.now() - 60_000).toISOString();
+		const newer = new Date().toISOString();
 		await signInAndMockSupabase(page, {
-			profiles: (route) => route.fulfill({ json: { notifications_enabled: true } }),
+			profiles: profilesHandler({ notifications_enabled: true }, [{ user_id: FRIEND_ID, display_name: "Casey Friend" }]),
+			friendships: (route) => route.fulfill({ json: [{ user_a: USER_ID < FRIEND_ID ? USER_ID : FRIEND_ID, user_b: USER_ID < FRIEND_ID ? FRIEND_ID : USER_ID, status: "accepted" }] }),
 			food_sightings: (route) =>
-				route.fulfill({
-					json: [
-						{ id: "s1", dish_name: "French Toast", hall_tid: 3, sighted_date: "2026-08-19", read_at: null, created_at: new Date().toISOString() },
-						{ id: "s2", dish_name: "Fried Plantain", hall_tid: 1, sighted_date: "2026-08-18", read_at: new Date().toISOString(), created_at: new Date().toISOString() },
-					],
-				}),
+				route.fulfill({ json: [{ id: "s1", dish_name: "French Toast", hall_tid: HAMPSHIRE_TID, sighted_date: "2026-08-19", read_at: null, created_at: older }] }),
+			pings: (route) => route.fulfill({ json: [{ id: "p1", sender_id: FRIEND_ID, hall_tid: WORCESTER_TID, message: "come eat?", created_at: newer }] }),
 		});
 
 		await page.goto("/notifications");
-		await expect(page.getByRole("heading", { name: "Sightings" })).toBeVisible({ timeout: 15_000 });
+		const feed = page.getByRole("list", { name: "Activity feed" });
+		const items = feed.getByRole("listitem");
+		await expect(items).toHaveCount(2, { timeout: 15_000 }); // hydration proof
+
+		// Newest (the ping) first.
+		await expect(items.nth(0)).toContainText("Casey Friend");
+		await expect(items.nth(0)).toContainText("come eat?");
+		await expect(items.nth(1)).toContainText("French Toast");
+
+		// Both unread: the ping (no last-seen marker yet on a fresh browser context) and the sighting
+		// (read_at is null).
+		await expect(items.nth(0).locator(".badge", { hasText: "New" })).toBeVisible();
+		await expect(items.nth(1).locator(".badge", { hasText: "New" })).toBeVisible();
+	});
 
-		const unreadRow = page.locator("li", { hasText: "French Toast" });
-		await expect(unreadRow.locator(".badge", { hasText: "New" })).toBeVisible();
-		await expect(unreadRow.locator(".badge", { hasText: "Hampshire" })).toBeVisible();
+	test("ping a friend from the feed sends the right insert", async ({ page }) => {
+		const requests = await signInAndMockSupabase(page, {
+			profiles: profilesHandler({ notifications_enabled: false }, [{ user_id: FRIEND_ID, display_name: "Casey Friend" }]),
+			friendships: (route) => route.fulfill({ json: [{ user_a: USER_ID < FRIEND_ID ? USER_ID : FRIEND_ID, user_b: USER_ID < FRIEND_ID ? FRIEND_ID : USER_ID, status: "accepted" }] }),
+			food_sightings: (route) => route.fulfill({ json: [] }),
+			pings: async (route) => {
+				if (route.request().method() === "POST") {
+					return route.fulfill({ json: [{ id: "ping-new", sender_id: USER_ID, receiver_id: FRIEND_ID, hall_tid: HAMPSHIRE_TID, message: "omw", created_at: new Date().toISOString() }] });
+				}
+				return route.fulfill({ json: [] });
+			},
+		});
 
+		await page.goto("/notifications");
+		await expect(page.getByRole("heading", { name: "Ping a friend" })).toBeVisible({ timeout: 15_000 });
+
+		await page.getByLabel("Friend").selectOption(FRIEND_ID);
+		await page.getByLabel("Hall").selectOption(String(HAMPSHIRE_TID));
+		await page.getByLabel("Message (optional)").fill("omw");
+		await page.getByRole("button", { name: "Send ping" }).click();
+
+		const post = await waitForRequest(requests, "pings", "POST");
+		expect(post.body).toMatchObject({ sender_id: USER_ID, receiver_id: FRIEND_ID, hall_tid: HAMPSHIRE_TID, message: "omw" });
+		await expect(page.getByRole("status")).toHaveText("Ping sent");
+	});
+
+	test("unread sighting mark-as-read is reachable by keyboard, not just onmouseenter (closes #62)", async ({ page }) => {
+		const requests = await signInAndMockSupabase(page, {
+			profiles: profilesHandler({ notifications_enabled: true }),
+			friendships: (route) => route.fulfill({ json: [] }),
+			pings: (route) => route.fulfill({ json: [] }),
+			food_sightings: async (route) => {
+				if (route.request().method() === "PATCH") return route.fulfill({ json: [] });
+				return route.fulfill({ json: [{ id: "s1", dish_name: "French Toast", hall_tid: HAMPSHIRE_TID, sighted_date: "2026-08-19", read_at: null, created_at: new Date().toISOString() }] });
+			},
+		});
+
+		await page.goto("/notifications");
+		const row = page.locator("li", { hasText: "French Toast" });
+		await expect(row.locator(".badge", { hasText: "New" })).toBeVisible({ timeout: 15_000 });
+
+		// Keyboard only: focus the button and press Enter, never a mouse event.
+		const markReadButton = row.getByRole("button", { name: "Mark as read" });
+		await markReadButton.focus();
+		await markReadButton.press("Enter");
+
+		const patch = await waitForRequest(requests, "food_sightings", "PATCH");
+		expect(patch.url.searchParams.get("id")).toBe("eq.s1");
+		await expect(row.locator(".badge", { hasText: "New" })).toHaveCount(0);
+	});
+
+	test("read sightings stay visually de-emphasized and don't offer mark-as-read again", async ({ page }) => {
+		await signInAndMockSupabase(page, {
+			profiles: profilesHandler({ notifications_enabled: true }),
+			friendships: (route) => route.fulfill({ json: [] }),
+			pings: (route) => route.fulfill({ json: [] }),
+			food_sightings: (route) =>
+				route.fulfill({
+					json: [{ id: "s2", dish_name: "Fried Plantain", hall_tid: WORCESTER_TID, sighted_date: "2026-08-18", read_at: new Date().toISOString(), created_at: new Date().toISOString() }],
+				}),
+		});
+
+		await page.goto("/notifications");
 		const readRow = page.locator("li", { hasText: "Fried Plantain" });
+		await expect(readRow).toBeVisible({ timeout: 15_000 });
 		await expect(readRow.locator(".badge", { hasText: "New" })).toHaveCount(0);
 		await expect(readRow.locator(".badge", { hasText: "Worcester" })).toBeVisible();
+		await expect(readRow.getByRole("button", { name: "Mark as read" })).toHaveCount(0);
 	});
 });
diff --git a/web/e2e/home-dashboard.spec.ts b/web/e2e/home-dashboard.spec.ts
index 23061ddd..f173c96e 100644
--- a/web/e2e/home-dashboard.spec.ts
+++ b/web/e2e/home-dashboard.spec.ts
@@ -101,11 +101,28 @@ test("quick links reach Rank and Favorites without ambiguity against the primary
 	await expect(page.getByRole("heading", { name: "Favorites", level: 1 })).toBeVisible();
 });
 
-test("home issues zero API requests -- macro stats are device-local, not a server call", async ({ page }) => {
-	let apiRequests = 0;
-	await page.route("**/api/**", (route) => {
-		apiRequests++;
-		return route.continue();
+// app.css (#42) @imports Google Fonts, so every page -- including this one -- legitimately makes a
+// cross-origin request for it. Not a residency leak: it's a stylesheet fetch, not data leaving the
+// device. Anything else cross-origin, or any same-origin /api/ path, is what this guard exists to
+// catch.
+const ALLOWED_CROSS_ORIGIN_HOSTS = new Set(["fonts.googleapis.com", "fonts.gstatic.com"]);
+
+test("home issues zero API/cross-origin requests -- macro stats are device-local, not a server call", async ({ page, baseURL }) => {
+	// Carry-over from PR #69's review (see issue #66's tracker comment): a page.route("**/api/**")
+	// guard only ever sees requests matching that glob, so a direct cross-origin fetch to
+	// *.supabase.co silently passes it -- proven by mutating this page with a
+	// fetch(..., { mode: "no-cors" }) call and watching the old guard stay green. page.on("request")
+	// fires for every request the page issues, no-cors included, so nothing routes around it.
+	const offenders: string[] = [];
+	const sameOrigin = new URL(baseURL!).origin;
+	page.on("request", (req) => {
+		const url = new URL(req.url());
+		if (url.protocol !== "http:" && url.protocol !== "https:") return; // data:/blob: aren't egress
+		if (url.origin === sameOrigin) {
+			if (url.pathname.includes("/api/")) offenders.push(req.url());
+			return;
+		}
+		if (!ALLOWED_CROSS_ORIGIN_HOSTS.has(url.hostname)) offenders.push(req.url());
 	});
 
 	await page.goto("/");
@@ -113,5 +130,5 @@ test("home issues zero API requests -- macro stats are device-local, not a serve
 
 	// Give any accidental fetch a beat to land before asserting its absence.
 	await page.waitForTimeout(500);
-	expect(apiRequests).toBe(0);
+	expect(offenders, `unexpected /api/ or cross-origin request(s): ${offenders.join(", ")}`).toEqual([]);
 });
diff --git a/web/src/lib/feedLastSeen.ts b/web/src/lib/feedLastSeen.ts
new file mode 100644
index 00000000..9b499d93
--- /dev/null
+++ b/web/src/lib/feedLastSeen.ts
@@ -0,0 +1,13 @@
+// Device-local "last viewed the activity feed" marker. `pings` has no `read_at` column (see
+// CLAUDE.md's residency table and issue #66 — no schema changes), so ping unread state is derived
+// from this instead of a server flag. It's UI state, not health/food data, so localStorage is fine
+// per the residency doc. Same shape as preferences.ts.
+const KEY = "udine-feed-last-seen";
+
+export function loadFeedLastSeen(): string {
+	return localStorage.getItem(KEY) ?? new Date(0).toISOString();
+}
+
+export function saveFeedLastSeen(iso: string): void {
+	localStorage.setItem(KEY, iso);
+}
diff --git a/web/src/routes/friends/+page.svelte b/web/src/routes/friends/+page.svelte
index 4a35348c..745a22d9 100644
--- a/web/src/routes/friends/+page.svelte
+++ b/web/src/routes/friends/+page.svelte
@@ -1,26 +1,17 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
-	import { DINING_HALLS } from "@udine/shared";
 
 	type Profile = { user_id: string; display_name: string };
 	type Friendship = { user_a: string; user_b: string; status: "pending" | "accepted"; requested_by: string };
-	type Ping = { id: string; sender_id: string; receiver_id: string; hall_tid: number | null; message: string | null; created_at: string };
 
 	let query = $state("");
 	let searchResults: Profile[] = $state([]);
 	let friendships: Friendship[] = $state([]);
 	let profilesById: Map<string, Profile> = $state(new Map());
-	let inbox: Ping[] = $state([]);
-	let pingHallTid: Record<string, string> = $state({});
-	let pingMessage: Record<string, string> = $state({});
 	let pending = $derived(friendships.filter((f) => f.status === "pending"));
 	let accepted = $derived(friendships.filter((f) => f.status === "accepted"));
 
-	function hallName(hallTid: number | null): string {
-		return DINING_HALLS.find((h) => h.tid === hallTid)?.name ?? "somewhere";
-	}
-
 	function otherUserId(f: Friendship, myId: string): string {
 		return f.user_a === myId ? f.user_b : f.user_a;
 	}
@@ -38,27 +29,9 @@
 			const { data: profs } = await supabase.from("profiles").select("user_id, display_name").in("user_id", otherIds);
 			profilesById = new Map((profs ?? []).map((p) => [p.user_id, p]));
 		}
-
-		const { data: pings } = await supabase.from("pings").select("*").eq("receiver_id", myId).order("created_at", { ascending: false });
-		inbox = pings ?? [];
 	}
 
-	onMount(() => {
-		refresh();
-
-		const supabase = page.data.supabase;
-		const myId = page.data.session?.user.id;
-		if (!supabase || !myId) return;
-
-		const channel = supabase
-			.channel("pings-inbox")
-			.on("postgres_changes", { event: "INSERT", schema: "public", table: "pings", filter: `receiver_id=eq.${myId}` }, refresh)
-			.subscribe();
-
-		return () => {
-			supabase.removeChannel(channel);
-		};
-	});
+	onMount(refresh);
 
 	async function search() {
 		const supabase = page.data.supabase;
@@ -82,14 +55,6 @@
 		await page.data.supabase?.from("friendships").update({ status: "accepted" }).eq("user_a", f.user_a).eq("user_b", f.user_b);
 		await refresh();
 	}
-
-	async function sendPing(otherId: string) {
-		const myId = page.data.session?.user.id;
-		if (!page.data.supabase || !myId) return;
-		const hallTid = pingHallTid[otherId] ? Number(pingHallTid[otherId]) : null;
-		await page.data.supabase.from("pings").insert({ sender_id: myId, receiver_id: otherId, hall_tid: hallTid, message: pingMessage[otherId] || null });
-		pingMessage[otherId] = "";
-	}
 </script>
 
 <h1 class="page-title">Friends</h1>
@@ -145,58 +110,26 @@
 		{/if}
 	</section>
 
-	<section class="mb-6">
+	<section>
 		<h2 class="section-title mb-3">Your friends</h2>
 		{#if accepted.length === 0}
 			<div class="empty-state">No friends yet — search above to add some.</div>
 		{:else}
-			<ul class="space-y-3">
+			<!-- No ping controls here (#66) -- pinging a friend is a first-class action on the
+			     Notifications activity feed now, not buried in this list. -->
+			<ul class="space-y-2">
 				{#each accepted as f (f.user_a + f.user_b)}
 					{@const myId = page.data.session.user.id}
-					{@const otherId = otherUserId(f, myId)}
-					{@const other = profilesById.get(otherId)}
-					<li class="card p-3">
-						<div class="flex flex-wrap items-center gap-2">
-							<span class="badge">Friend</span>
-							<strong>{other?.display_name ?? "…"}</strong>
-						</div>
-						<!-- .btn-secondary: app.css calls out "ping" by name as its equal-weight-alternative example. -->
-						<div class="mt-3 flex flex-wrap items-end gap-2">
-							<div>
-								<label class="field-label" for={`hall-${otherId}`}>Hall</label>
-								<select id={`hall-${otherId}`} class="input" bind:value={pingHallTid[otherId]}>
-									<option value="">(no hall)</option>
-									{#each DINING_HALLS as hall (hall.tid)}
-										<option value={hall.tid}>{hall.name}</option>
-									{/each}
-								</select>
-							</div>
-							<div class="flex-1">
-								<label class="field-label" for={`msg-${otherId}`}>Message (optional)</label>
-								<input id={`msg-${otherId}`} class="input w-full" bind:value={pingMessage[otherId]} placeholder="message (optional)" />
-							</div>
-							<button class="btn btn-secondary btn-sm" onclick={() => sendPing(otherId)}>Ping "come eat with me"</button>
-						</div>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</section>
-
-	<section>
-		<h2 class="section-title mb-3">Pings you've received</h2>
-		{#if inbox.length === 0}
-			<div class="empty-state">No pings yet.</div>
-		{:else}
-			<ul class="space-y-2">
-				{#each inbox as p (p.id)}
-					<li class="card p-3">
-						<strong>{profilesById.get(p.sender_id)?.display_name ?? "Someone"}</strong> wants to eat
-						{#if p.hall_tid}<span class="badge">{hallName(p.hall_tid)}</span>{/if}
-						{#if p.message}<span class="block text-ink-900/70">&mdash; "{p.message}"</span>{/if}
+					{@const other = profilesById.get(otherUserId(f, myId))}
+					<li class="card flex items-center gap-2 p-3">
+						<span class="badge">Friend</span>
+						<strong>{other?.display_name ?? "…"}</strong>
 					</li>
 				{/each}
 			</ul>
+			<p class="mt-3 text-sm text-ink-900/60">
+				Want to say "come eat with me"? Ping friends from the <a href="/notifications">Notifications feed</a>.
+			</p>
 		{/if}
 	</section>
 {/if}
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 7ac547e9..f47b6a94 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -4,9 +4,16 @@
 	import type { SupabaseClient } from "@supabase/supabase-js";
 	import { DINING_HALLS, syncFavoritedFoods, type Favorite } from "@udine/shared";
 	import { IndexedDbFavoritesStorage } from "$lib/favoritesStorage";
+	import { loadFeedLastSeen, saveFeedLastSeen } from "$lib/feedLastSeen";
 	import { PUBLIC_VAPID_KEY } from "$env/static/public";
 
 	type Sighting = { id: string; dish_name: string; hall_tid: number; sighted_date: string; read_at: string | null; created_at: string };
+	type Ping = { id: string; sender_id: string; hall_tid: number | null; message: string | null; created_at: string };
+	type Profile = { user_id: string; display_name: string };
+
+	type FeedItem =
+		| { kind: "sighting"; id: string; createdAt: string; dishName: string; hallTid: number; sightedDate: string; readAt: string | null }
+		| { kind: "ping"; id: string; createdAt: string; senderName: string; hallTid: number | null; message: string | null };
 
 	// Standard urlBase64-to-Uint8Array conversion PushManager.subscribe needs for applicationServerKey.
 	function urlBase64ToUint8Array(base64: string): Uint8Array {
@@ -63,31 +70,92 @@
 
 	let notificationsEnabled = $state(false);
 	let sightings: Sighting[] = $state([]);
+	let pings: Ping[] = $state([]);
+	// Accepted friends only — enough to populate the "ping a friend" composer and to resolve a
+	// ping's sender name. Friend search/request/accept itself stays on /friends (see #66).
+	let friends: Profile[] = $state([]);
+	// Snapshot of "last time this feed was viewed", read once at mount before it's overwritten below
+	// -- deliberately a plain variable, not $state, so a ping's unread badge doesn't flip off mid-visit.
+	let feedLastSeenAt = "";
+
+	let selectedFriendId = $state("");
+	let pingHallTid = $state("");
+	let pingMessage = $state("");
+	let pingSent = $state(false);
+
+	function hallName(hallTid: number | null): string {
+		return DINING_HALLS.find((h) => h.tid === hallTid)?.name ?? "somewhere";
+	}
+
+	let friendNameById = $derived(new Map(friends.map((f) => [f.user_id, f.display_name])));
 
-	function hallName(hallTid: number): string {
-		return DINING_HALLS.find((h) => h.tid === hallTid)?.name ?? `Hall ${hallTid}`;
+	let feedItems: FeedItem[] = $derived(
+		[
+			...sightings.map(
+				(s): FeedItem => ({ kind: "sighting", id: s.id, createdAt: s.created_at, dishName: s.dish_name, hallTid: s.hall_tid, sightedDate: s.sighted_date, readAt: s.read_at }),
+			),
+			...pings.map(
+				(p): FeedItem => ({ kind: "ping", id: p.id, createdAt: p.created_at, senderName: friendNameById.get(p.sender_id) ?? "A friend", hallTid: p.hall_tid, message: p.message }),
+			),
+		].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1)),
+	);
+
+	function isUnread(item: FeedItem): boolean {
+		if (item.kind === "sighting") return item.readAt === null;
+		return item.createdAt > feedLastSeenAt;
 	}
 
 	async function refresh() {
 		const supabase = page.data.supabase;
 		const session = page.data.session;
 		if (!supabase || !session) return;
+		const myId = session.user.id;
 
-		const { data: profile } = await supabase.from("profiles").select("notifications_enabled").eq("user_id", session.user.id).single();
+		const { data: profile } = await supabase.from("profiles").select("notifications_enabled").eq("user_id", myId).single();
 		notificationsEnabled = profile?.notifications_enabled ?? false;
 
 		// Browser permission can be revoked outside this page (browser settings) without us hearing
 		// about it — if that happened, the stored push_tokens row is now dead, so clear it. The
 		// in-app notifications_enabled flag (and food_sightings feed) is untouched either way.
 		if (notificationsEnabled && pushSupported() && Notification.permission !== "granted") {
-			await clearStoredPushTokens(supabase, session.user.id);
+			await clearStoredPushTokens(supabase, myId);
 		}
 
-		const { data } = await supabase.from("food_sightings").select("*").eq("user_id", session.user.id).order("created_at", { ascending: false });
-		sightings = data ?? [];
+		const { data: sightingRows } = await supabase.from("food_sightings").select("*").eq("user_id", myId).order("created_at", { ascending: false });
+		sightings = sightingRows ?? [];
+
+		const { data: pingRows } = await supabase.from("pings").select("*").eq("receiver_id", myId).order("created_at", { ascending: false });
+		pings = pingRows ?? [];
+
+		const { data: fs } = await supabase.from("friendships").select("*").or(`user_a.eq.${myId},user_b.eq.${myId}`).eq("status", "accepted");
+		const otherIds = (fs ?? []).map((f: { user_a: string; user_b: string }) => (f.user_a === myId ? f.user_b : f.user_a));
+		if (otherIds.length > 0) {
+			const { data: profs } = await supabase.from("profiles").select("user_id, display_name").in("user_id", otherIds);
+			friends = profs ?? [];
+		} else {
+			friends = [];
+		}
 	}
 
-	onMount(refresh);
+	onMount(() => {
+		feedLastSeenAt = loadFeedLastSeen();
+		refresh().then(() => saveFeedLastSeen(new Date().toISOString()));
+
+		const supabase = page.data.supabase;
+		const myId = page.data.session?.user.id;
+		if (!supabase || !myId) return;
+
+		// Moved here from /friends (#66) — the pings inbox now lives in this feed, not buried in the
+		// friends page's accepted-friends list.
+		const channel = supabase
+			.channel("pings-inbox")
+			.on("postgres_changes", { event: "INSERT", schema: "public", table: "pings", filter: `receiver_id=eq.${myId}` }, refresh)
+			.subscribe();
+
+		return () => {
+			supabase.removeChannel(channel);
+		};
+	});
 
 	async function toggleNotifications() {
 		const supabase = page.data.supabase;
@@ -110,13 +178,29 @@
 		}
 	}
 
-	async function markRead(sighting: Sighting) {
+	async function markRead(sightingId: string) {
 		const supabase = page.data.supabase;
-		if (!supabase || sighting.read_at) return;
+		const sighting = sightings.find((s) => s.id === sightingId);
+		if (!supabase || !sighting || sighting.read_at) return;
 		const readAt = new Date().toISOString();
-		await supabase.from("food_sightings").update({ read_at: readAt }).eq("id", sighting.id);
+		await supabase.from("food_sightings").update({ read_at: readAt }).eq("id", sightingId);
 		sighting.read_at = readAt;
 	}
+
+	async function sendPing() {
+		const supabase = page.data.supabase;
+		const myId = page.data.session?.user.id;
+		if (!supabase || !myId || !selectedFriendId) return;
+		await supabase.from("pings").insert({
+			sender_id: myId,
+			receiver_id: selectedFriendId,
+			hall_tid: pingHallTid ? Number(pingHallTid) : null,
+			message: pingMessage || null,
+		});
+		pingMessage = "";
+		pingSent = true;
+		setTimeout(() => (pingSent = false), 1500);
+	}
 </script>
 
 <h1 class="page-title">Notifications</h1>
@@ -124,12 +208,13 @@
 
 {#if !page.data.session}
 	<div class="empty-state">
-		<p>Sign in to enable favorited-food alerts.</p>
+		<p>Sign in to see this feed — pings from friends and favorited-dish alerts, all in one place.</p>
+		<p class="mt-2 text-sm text-ink-900/70">Use "Sign in with Google" above to get started.</p>
 	</div>
 {:else}
 	<!-- .badge carries the on/off state in words, not just the checkbox, per #39's "notification
 	     toggle visually clear" criterion. -->
-	<section class="card mb-2 flex flex-wrap items-center justify-between gap-3 p-4">
+	<section class="card mb-6 flex flex-wrap items-center justify-between gap-3 p-4">
 		<div>
 			<label class="field-label" for="notif-toggle">Favorited-dish alerts</label>
 			<p class="mt-1 text-sm text-ink-900/70">Notify me when a favorited dish shows up on the menu.</p>
@@ -139,25 +224,69 @@
 			<input id="notif-toggle" type="checkbox" class="h-4 w-4" checked={notificationsEnabled} onchange={toggleNotifications} />
 		</div>
 	</section>
-	<p class="mb-6 text-sm text-ink-900/60">
-		Turning this on will ask your browser for notification permission and register a push subscription. This page is always the notification feed either way.
-	</p>
 
-	<h2 class="section-title mb-3">Sightings</h2>
-	{#if sightings.length === 0}
-		<div class="empty-state">No favorited-food sightings yet.</div>
+	<!-- "Ping a friend" as a first-class action of the feed itself (#66), not buried in the friends
+	     page's accepted-friends list. -->
+	<section class="card mb-6 p-4">
+		<h2 class="section-title mb-3">Ping a friend</h2>
+		{#if friends.length === 0}
+			<p class="text-sm text-ink-900/60">Add friends on the <a href="/friends">Friends page</a> to send pings.</p>
+		{:else}
+			<div class="flex flex-wrap items-end gap-2">
+				<div>
+					<label class="field-label" for="ping-friend">Friend</label>
+					<select id="ping-friend" class="input" bind:value={selectedFriendId}>
+						<option value="">Choose a friend</option>
+						{#each friends as f (f.user_id)}
+							<option value={f.user_id}>{f.display_name}</option>
+						{/each}
+					</select>
+				</div>
+				<div>
+					<label class="field-label" for="ping-hall">Hall</label>
+					<select id="ping-hall" class="input" bind:value={pingHallTid}>
+						<option value="">(no hall)</option>
+						{#each DINING_HALLS as hall (hall.tid)}
+							<option value={hall.tid}>{hall.name}</option>
+						{/each}
+					</select>
+				</div>
+				<div class="flex-1">
+					<label class="field-label" for="ping-message">Message (optional)</label>
+					<input id="ping-message" class="input w-full" bind:value={pingMessage} placeholder="message (optional)" />
+				</div>
+				<button class="btn btn-primary btn-sm" onclick={sendPing} disabled={!selectedFriendId}>Send ping</button>
+			</div>
+			{#if pingSent}<p role="status" class="badge mt-2">Ping sent</p>{/if}
+		{/if}
+	</section>
+
+	<h2 class="section-title mb-3">Activity</h2>
+	{#if feedItems.length === 0}
+		<div class="empty-state">Nothing here yet — pings from friends and favorited-dish sightings will show up here.</div>
 	{:else}
-		<ul class="space-y-2">
-			{#each sightings as s (s.id)}
-				<!-- opacity-60 (a Tailwind utility, not a new color) replaces the old inline style for
-				     read rows; .badge marks unread ones "New" instead. onmouseenter-only markRead is
-				     pre-existing behavior, unchanged here -- keyboard users can't trigger it, but fixing
-				     that isn't in #39's scope. -->
-				<li class="card flex flex-wrap items-center gap-2 p-3 {s.read_at ? 'opacity-60' : ''}" onmouseenter={() => markRead(s)}>
-					{#if !s.read_at}<span class="badge">New</span>{/if}
-					<strong>{s.dish_name}</strong>
-					<span class="badge">{hallName(s.hall_tid)}</span>
-					<span class="text-sm text-ink-900/60">on {s.sighted_date}</span>
+		<ul class="space-y-2" aria-label="Activity feed">
+			{#each feedItems as item (item.kind + item.id)}
+				{@const unread = isUnread(item)}
+				<!-- opacity-60 (a Tailwind utility, not a new color) marks read rows; .badge marks
+				     unread ones "New". Sightings get an explicit "Mark as read" button (keyboard
+				     reachable, closes #62) alongside the pre-existing onmouseenter, which stays for
+				     mouse users. -->
+				<li class="card flex flex-wrap items-center gap-2 p-3 {unread ? '' : 'opacity-60'}" onmouseenter={item.kind === "sighting" ? () => markRead(item.id) : undefined}>
+					{#if unread}<span class="badge">New</span>{/if}
+					{#if item.kind === "sighting"}
+						<strong>{item.dishName}</strong>
+						<span class="badge">{hallName(item.hallTid)}</span>
+						<span class="text-sm text-ink-900/60">spotted on {item.sightedDate}</span>
+						{#if unread}
+							<button class="btn btn-secondary btn-sm" onclick={() => markRead(item.id)}>Mark as read</button>
+						{/if}
+					{:else}
+						<span class="badge">Ping</span>
+						<strong>{item.senderName}</strong> wants to eat
+						{#if item.hallTid}<span class="badge">{hallName(item.hallTid)}</span>{/if}
+						{#if item.message}<span class="block text-ink-900/70">&mdash; "{item.message}"</span>{/if}
+					{/if}
 				</li>
 			{/each}
 		</ul>

From 7febe8de648705bd6edc1e0a2373ed2b64353160 Mon Sep 17 00:00:00 2001
From: TSVRN9 <66744142+TSVRN9@users.noreply.github.com>
Date: Wed, 19 Aug 2026 13:21:54 -0400
Subject: [PATCH 2/3] review follow-up: tighten keyboard/badge assertions, fix
 a refresh() race

- friends-notifications.spec.ts: #62's keyboard test now asserts
  toBeFocused() before pressing Enter (proves the button is actually
  in the tab order, matching #62's "keyboard-only walkthrough"
  wording, not just that it's clickable-when-focused). The alert
  toggle's badge locator is now scoped to its own section instead of
  ".badge".first(), which would have silently started matching the
  wrong badge if the feed's own "New" badges ever preceded it in DOM
  order.
- notifications/+page.svelte: refresh() now resolves friends before
  assigning pings, so a ping can no longer render with the "A friend"
  fallback for one tick before its sender's name loads.

Full suite (45/45), check, and build all still green after these.
---
 web/e2e/friends-notifications.spec.ts     | 9 +++++++--
 web/src/routes/notifications/+page.svelte | 9 ++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/e2e/friends-notifications.spec.ts b/web/e2e/friends-notifications.spec.ts
index 32be538e..bf11a37c 100644
--- a/web/e2e/friends-notifications.spec.ts
+++ b/web/e2e/friends-notifications.spec.ts
@@ -237,7 +237,10 @@ test.describe("Notifications — signed in", () => {
 
 		await page.goto("/notifications");
 
-		const badge = page.locator(".badge").first();
+		// Scoped to the toggle's own section rather than ".badge".first() -- the feed below can also
+		// render "New" badges, and .first() would silently start matching the wrong one if their DOM
+		// order ever changed instead of failing loudly.
+		const badge = page.locator("section", { hasText: "Favorited-dish alerts" }).locator(".badge");
 		await expect(badge).toHaveText("Alerts off", { timeout: 15_000 }); // hydration proof: reflects the mocked profile fetch
 
 		const toggle = page.getByRole("checkbox");
@@ -317,9 +320,11 @@ test.describe("Notifications — signed in", () => {
 		const row = page.locator("li", { hasText: "French Toast" });
 		await expect(row.locator(".badge", { hasText: "New" })).toBeVisible({ timeout: 15_000 });
 
-		// Keyboard only: focus the button and press Enter, never a mouse event.
+		// Keyboard only: focus the button (proving it's actually in the tab order, not just
+		// clickable) and press Enter, never a mouse event -- #62 asks for a keyboard-only walkthrough.
 		const markReadButton = row.getByRole("button", { name: "Mark as read" });
 		await markReadButton.focus();
+		await expect(markReadButton).toBeFocused();
 		await markReadButton.press("Enter");
 
 		const patch = await waitForRequest(requests, "food_sightings", "PATCH");
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index f47b6a94..0fb8487a 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -124,9 +124,9 @@
 		const { data: sightingRows } = await supabase.from("food_sightings").select("*").eq("user_id", myId).order("created_at", { ascending: false });
 		sightings = sightingRows ?? [];
 
-		const { data: pingRows } = await supabase.from("pings").select("*").eq("receiver_id", myId).order("created_at", { ascending: false });
-		pings = pingRows ?? [];
-
+		// Friends resolved *before* pings assigns below -- friendNameById needs to already be
+		// populated when a ping first renders, or a sender briefly shows as the "A friend" fallback
+		// until this catches up.
 		const { data: fs } = await supabase.from("friendships").select("*").or(`user_a.eq.${myId},user_b.eq.${myId}`).eq("status", "accepted");
 		const otherIds = (fs ?? []).map((f: { user_a: string; user_b: string }) => (f.user_a === myId ? f.user_b : f.user_a));
 		if (otherIds.length > 0) {
@@ -135,6 +135,9 @@
 		} else {
 			friends = [];
 		}
+
+		const { data: pingRows } = await supabase.from("pings").select("*").eq("receiver_id", myId).order("created_at", { ascending: false });
+		pings = pingRows ?? [];
 	}
 
 	onMount(() => {

From 6ab1618ce296709df1a393a77fef11151506e4af Mon Sep 17 00:00:00 2001
From: TSVRN9 <66744142+TSVRN9@users.noreply.github.com>
Date: Wed, 19 Aug 2026 14:05:07 -0400
Subject: [PATCH 3/3] notifications: fix silent watermark stamp, add
 discriminating feed-unread coverage (#75 review)

F1 (blocking): refresh().then(() => saveFeedLastSeen(...)) ran unconditionally, even when
refresh() early-returned with no session -- a signed-out visit silently stamped the
device-local unread watermark. Now only stamps when a session exists, and stamps from the
newest rendered item's own created_at (Postgres clock) instead of the browser clock.

F2 (blocking): feedLastSeen.ts had no test that would fail if isUnread()'s ping branch were
hardcoded to `return true`, or if the saveFeedLastSeen() call were deleted outright. Added two
tests to friends-notifications.spec.ts: a seeded watermark correctly splits an older/newer ping
pair into read/unread, and a signed-out visit leaves the watermark key unset. Both were shown
red against pristine pre-fix code, and against each of the two named mutations independently
(verified locally, reverted after).

Nits: fixed the sort comparator (previously returned -1 for both orderings of two equal
timestamps, an invalid comparator); sendPing() now checks the insert's error and shows a
failure state instead of an unconditional "Ping sent" (also made pingSent/pingError mutually
exclusive so a fast retry can't show both at once). Added a red-first test for the failure
state.

Optional: feedLastSeen's localStorage key is now scoped by user id, so a second account on the
same browser doesn't inherit the first account's watermark.
---
 web/e2e/friends-notifications.spec.ts     | 102 ++++++++++++++++++++++
 web/src/lib/feedLastSeen.ts               |  13 +--
 web/src/routes/notifications/+page.svelte |  33 +++++--
 3 files changed, 138 insertions(+), 10 deletions(-)

diff --git a/web/e2e/friends-notifications.spec.ts b/web/e2e/friends-notifications.spec.ts
index bf11a37c..b37e4893 100644
--- a/web/e2e/friends-notifications.spec.ts
+++ b/web/e2e/friends-notifications.spec.ts
@@ -305,6 +305,36 @@ test.describe("Notifications — signed in", () => {
 		await expect(page.getByRole("status")).toHaveText("Ping sent");
 	});
 
+	// Review nit on #75: sendPing() previously set pingSent = true unconditionally, without
+	// checking the insert's result -- an RLS rejection (not actually friends any more, blocked,
+	// etc.) still showed "Ping sent".
+	test("a failed ping insert (RLS rejection) shows a failure state, not a false 'Ping sent'", async ({ page }) => {
+		await signInAndMockSupabase(page, {
+			profiles: profilesHandler({ notifications_enabled: false }, [{ user_id: FRIEND_ID, display_name: "Casey Friend" }]),
+			friendships: (route) => route.fulfill({ json: [{ user_a: USER_ID < FRIEND_ID ? USER_ID : FRIEND_ID, user_b: USER_ID < FRIEND_ID ? FRIEND_ID : USER_ID, status: "accepted" }] }),
+			food_sightings: (route) => route.fulfill({ json: [] }),
+			pings: async (route) => {
+				if (route.request().method() === "POST") {
+					// Shape of a real PostgREST/RLS rejection: non-2xx status, PostgrestError-shaped body.
+					return route.fulfill({
+						status: 403,
+						json: { code: "42501", message: 'new row violates row-level security policy for table "pings"', details: null, hint: null },
+					});
+				}
+				return route.fulfill({ json: [] });
+			},
+		});
+
+		await page.goto("/notifications");
+		await expect(page.getByRole("heading", { name: "Ping a friend" })).toBeVisible({ timeout: 15_000 });
+
+		await page.getByLabel("Friend").selectOption(FRIEND_ID);
+		await page.getByRole("button", { name: "Send ping" }).click();
+
+		await expect(page.getByRole("alert")).toBeVisible();
+		await expect(page.getByText("Ping sent")).toHaveCount(0);
+	});
+
 	test("unread sighting mark-as-read is reachable by keyboard, not just onmouseenter (closes #62)", async ({ page }) => {
 		const requests = await signInAndMockSupabase(page, {
 			profiles: profilesHandler({ notifications_enabled: true }),
@@ -350,4 +380,76 @@ test.describe("Notifications — signed in", () => {
 		await expect(readRow.locator(".badge", { hasText: "Worcester" })).toBeVisible();
 		await expect(readRow.getByRole("button", { name: "Mark as read" })).toHaveCount(0);
 	});
+
+	// Review findings on #66's PR (#75), F1 + F2: the previous `refresh().then(() =>
+	// saveFeedLastSeen(new Date().toISOString()))` stamped the device-local unread watermark
+	// unconditionally -- including when refresh() early-returned with no session -- and
+	// feedLastSeen.ts itself had no test that would fail if isUnread()'s ping branch were hardcoded
+	// to `return true` or if the saveFeedLastSeen() call were deleted outright. These two tests
+	// close both gaps.
+	test("a seeded watermark suppresses the New badge on an older ping while a newer ping stays badged", async ({ page }) => {
+		const older = new Date(Date.now() - 60_000).toISOString();
+		const watermark = new Date(Date.now() - 30_000).toISOString();
+		const newer = new Date().toISOString();
+
+		// Seed the watermark before any app script runs, same technique as the session cookie below.
+		// Key format (`${prefix}:${userId}`) must match feedLastSeen.ts.
+		await page.addInitScript(
+			([key, value]) => localStorage.setItem(key, value),
+			[`udine-feed-last-seen:${USER_ID}`, watermark],
+		);
+
+		await signInAndMockSupabase(page, {
+			profiles: profilesHandler({ notifications_enabled: true }, [{ user_id: FRIEND_ID, display_name: "Casey Friend" }]),
+			friendships: (route) => route.fulfill({ json: [{ user_a: USER_ID < FRIEND_ID ? USER_ID : FRIEND_ID, user_b: USER_ID < FRIEND_ID ? FRIEND_ID : USER_ID, status: "accepted" }] }),
+			food_sightings: (route) => route.fulfill({ json: [] }),
+			pings: (route) =>
+				route.fulfill({
+					json: [
+						{ id: "p-old", sender_id: FRIEND_ID, hall_tid: null, message: "old ping", created_at: older },
+						{ id: "p-new", sender_id: FRIEND_ID, hall_tid: null, message: "new ping", created_at: newer },
+					],
+				}),
+		});
+
+		await page.goto("/notifications");
+		const feed = page.getByRole("list", { name: "Activity feed" });
+		const items = feed.getByRole("listitem");
+		await expect(items).toHaveCount(2, { timeout: 15_000 }); // hydration proof
+
+		// Newest first (sort order, unrelated to this test's point, but asserted so nth(0)/nth(1) below
+		// are unambiguous).
+		const newItem = items.nth(0);
+		const oldItem = items.nth(1);
+		await expect(newItem).toContainText("new ping");
+		await expect(oldItem).toContainText("old ping");
+
+		// The point: older-than-watermark ping is read, newer-than-watermark ping is unread.
+		await expect(newItem.locator(".badge", { hasText: "New" })).toBeVisible();
+		await expect(oldItem.locator(".badge", { hasText: "New" })).toHaveCount(0);
+
+		// Also catches the other mutation the review proved green under the old suite: deleting the
+		// saveFeedLastSeen() call outright. If that call were gone, the seeded watermark above would
+		// still sit untouched at 30s-ago instead of advancing to the newest item's own created_at.
+		await expect
+			.poll(() => page.evaluate((k) => localStorage.getItem(k), `udine-feed-last-seen:${USER_ID}`))
+			.toBe(newer);
+	});
+
+	test("a signed-out visit does not stamp the feed-last-seen watermark", async ({ page }) => {
+		await page.goto("/notifications");
+		await expect(page.locator(".empty-state")).toBeVisible();
+
+		// This branch renders identically whether or not onMount/hydration has run yet (nothing here
+		// is session-gated content that would prove hydration, unlike other specs' star-click proof),
+		// so give onMount's async refresh().then() a real beat to land before asserting its absence --
+		// same idea as home-dashboard.spec.ts's post-hydration `waitForTimeout(500)`, just longer since
+		// there's no separate hydration-proof step here to already have consumed that time.
+		await page.waitForTimeout(1500);
+
+		// Regression check for the finding above: refresh() early-returns with no session (nothing
+		// rendered), so nothing should be written to localStorage at all.
+		const keys = await page.evaluate(() => Object.keys(localStorage));
+		expect(keys.some((k) => k.startsWith("udine-feed-last-seen"))).toBe(false);
+	});
 });
diff --git a/web/src/lib/feedLastSeen.ts b/web/src/lib/feedLastSeen.ts
index 9b499d93..239e982e 100644
--- a/web/src/lib/feedLastSeen.ts
+++ b/web/src/lib/feedLastSeen.ts
@@ -2,12 +2,15 @@
 // CLAUDE.md's residency table and issue #66 — no schema changes), so ping unread state is derived
 // from this instead of a server flag. It's UI state, not health/food data, so localStorage is fine
 // per the residency doc. Same shape as preferences.ts.
-const KEY = "udine-feed-last-seen";
+//
+// Keyed per user id (not a single global key) so a second account signing in on the same browser
+// doesn't inherit the first account's watermark and silently mark its own unread pings as seen.
+const KEY_PREFIX = "udine-feed-last-seen";
 
-export function loadFeedLastSeen(): string {
-	return localStorage.getItem(KEY) ?? new Date(0).toISOString();
+export function loadFeedLastSeen(userId: string): string {
+	return localStorage.getItem(`${KEY_PREFIX}:${userId}`) ?? new Date(0).toISOString();
 }
 
-export function saveFeedLastSeen(iso: string): void {
-	localStorage.setItem(KEY, iso);
+export function saveFeedLastSeen(userId: string, iso: string): void {
+	localStorage.setItem(`${KEY_PREFIX}:${userId}`, iso);
 }
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 0fb8487a..c0417227 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -82,6 +82,7 @@
 	let pingHallTid = $state("");
 	let pingMessage = $state("");
 	let pingSent = $state(false);
+	let pingError = $state(false);
 
 	function hallName(hallTid: number | null): string {
 		return DINING_HALLS.find((h) => h.tid === hallTid)?.name ?? "somewhere";
@@ -97,7 +98,11 @@
 			...pings.map(
 				(p): FeedItem => ({ kind: "ping", id: p.id, createdAt: p.created_at, senderName: friendNameById.get(p.sender_id) ?? "A friend", hallTid: p.hall_tid, message: p.message }),
 			),
-		].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1)),
+			// b.localeCompare(a) for descending (newest-first) order. The previous `a < b ? 1 : -1`
+			// returned -1 for BOTH orderings of two equal-timestamp items (cmp(a,b) and cmp(b,a) both
+			// said "I go first"), an invalid comparator that Array.sort doesn't guarantee stable/correct
+			// results for.
+		].sort((a, b) => b.createdAt.localeCompare(a.createdAt)),
 	);
 
 	function isUnread(item: FeedItem): boolean {
@@ -141,11 +146,19 @@
 	}
 
 	onMount(() => {
-		feedLastSeenAt = loadFeedLastSeen();
-		refresh().then(() => saveFeedLastSeen(new Date().toISOString()));
+		const myId = page.data.session?.user.id;
+		feedLastSeenAt = myId ? loadFeedLastSeen(myId) : "";
+		refresh().then(() => {
+			// Only stamp when a session actually exists -- refresh() early-returns with no session
+			// (nothing rendered), and previously this ran unconditionally, silently marking every
+			// older ping as seen on a zero-item anonymous visit. Stamp from the newest rendered item's
+			// own created_at (Postgres clock), not the browser's clock -- avoids drift between the two
+			// making a just-created ping look already-seen.
+			const newestCreatedAt = feedItems[0]?.createdAt;
+			if (myId && newestCreatedAt) saveFeedLastSeen(myId, newestCreatedAt);
+		});
 
 		const supabase = page.data.supabase;
-		const myId = page.data.session?.user.id;
 		if (!supabase || !myId) return;
 
 		// Moved here from /friends (#66) — the pings inbox now lives in this feed, not buried in the
@@ -194,13 +207,22 @@
 		const supabase = page.data.supabase;
 		const myId = page.data.session?.user.id;
 		if (!supabase || !myId || !selectedFriendId) return;
-		await supabase.from("pings").insert({
+		const { error } = await supabase.from("pings").insert({
 			sender_id: myId,
 			receiver_id: selectedFriendId,
 			hall_tid: pingHallTid ? Number(pingHallTid) : null,
 			message: pingMessage || null,
 		});
+		if (error) {
+			// e.g. RLS rejects the insert (not actually friends, receiver blocked). Previously this was
+			// never checked -- "Ping sent" showed unconditionally even when nothing was sent.
+			pingSent = false; // in case a still-live success badge from an earlier attempt is showing
+			pingError = true;
+			setTimeout(() => (pingError = false), 3000);
+			return;
+		}
 		pingMessage = "";
+		pingError = false; // in case a still-live failure badge from an earlier attempt is showing
 		pingSent = true;
 		setTimeout(() => (pingSent = false), 1500);
 	}
@@ -261,6 +283,7 @@
 				<button class="btn btn-primary btn-sm" onclick={sendPing} disabled={!selectedFriendId}>Send ping</button>
 			</div>
 			{#if pingSent}<p role="status" class="badge mt-2">Ping sent</p>{/if}
+			{#if pingError}<p role="alert" class="badge mt-2">Couldn't send ping — try again.</p>{/if}
 		{/if}
 	</section>