From bd516d8868ce448d145304828235ba8e74171c4e Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Thu, 20 Aug 2026 15:48:52 +0300
Subject: [PATCH] web: load notifications from deliberi instead of mock
 fixtures

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 deliberi/readme.md                            |   2 +
 web/src/lib/api/notifications.ts              | 184 +++++++++++++++++-
 .../NotificationBell.stories.svelte           |   1 +
 .../notifications/NotificationBell.svelte     |  78 ++++++--
 .../NotificationItem.stories.svelte           |   2 +-
 .../notifications/NotificationItem.svelte     |   6 +-
 .../notifications/NotificationList.svelte     |   4 +-
 web/src/lib/components/notifications/mock.ts  | 149 +++++++-------
 .../components/notifications/notification.ts  |   2 +-
 web/src/lib/components/notifications/types.ts |   6 +-
 web/src/lib/oauth-client-metadata.json        |  15 +-
 web/src/routes/notifications/+page.svelte     |  61 +++++-
 web/src/routes/notifications/+page.ts         |  18 +-
 13 files changed, 397 insertions(+), 131 deletions(-)
 create mode 100644 deliberi/readme.md

diff --git a/deliberi/readme.md b/deliberi/readme.md
new file mode 100644
index 00000000..311913a0
--- /dev/null
+++ b/deliberi/readme.md
@@ -0,0 +1,2 @@
+deliberi is the off-protocol data server. It handles notifications fan-out and
+their preferences, and email delivery.
diff --git a/web/src/lib/api/notifications.ts b/web/src/lib/api/notifications.ts
index 66e3880e..fb2ff53d 100644
--- a/web/src/lib/api/notifications.ts
+++ b/web/src/lib/api/notifications.ts
@@ -1,7 +1,19 @@
 import { authedGet, authedPost, type DeliberiContext } from "./deliberi";
-import type { XrpcRequestInit } from "./client";
+import type { BobbinContext, QueryValue, XrpcRequestInit } from "./client";
+import { resolveMiniDoc } from "./identity";
+import { getReposByRepoDids } from "./records";
+import { getIssues } from "./issue";
+import { getPulls } from "./records";
+import { didFromUri, rkeyFromUri } from "./uri";
+import type {
+	NotificationActor,
+	NotificationRepo,
+	NotificationSubject,
+	NotificationSummary,
+	NotificationType
+} from "$lib/components/notifications/types";
 
-// mirrors org.tangled.temp.notification.getPreferences#preferences
+/** mirrors org.tangled.temp.notification.getPreferences#preferences */
 export interface NotificationPreferences {
 	repoStarred: boolean;
 	issueCreated: boolean;
@@ -24,9 +36,175 @@ export const getNotificationPreferences = (
 ): Promise<NotificationPreferences> =>
 	authedGet<NotificationPreferences>(ctx, GET_PREFERENCES, undefined, init);
 
-// only the provided fields are updated server-side.
+/** only the provided fields are updated server-side. */
 export const updateNotificationPreferences = (
 	ctx: DeliberiContext,
 	patch: Partial<NotificationPreferences>,
 	init?: XrpcRequestInit
 ): Promise<void> => authedPost(ctx, UPDATE_PREFERENCES, patch, init).then(() => undefined);
+
+/** raw notification row returned by deliberi */
+export interface NotificationItem {
+	uri: string;
+	type: string;
+	category: string;
+	actorDid: string;
+	read: boolean;
+	createdAt: string;
+	repoDid?: string;
+	issueAt?: string;
+	pullAt?: string;
+}
+
+export interface NotificationListOutput {
+	notifications: NotificationItem[];
+	socialUnreadCount: number;
+	workUnreadCount: number;
+}
+
+const LIST_NOTIFICATIONS = "org.tangled.temp.notification.listNotifications";
+
+export const listNotifications = (
+	ctx: DeliberiContext,
+	params?: { read?: string; category?: string; limit?: number },
+	init?: XrpcRequestInit
+): Promise<NotificationListOutput> =>
+	authedGet<NotificationListOutput>(
+		ctx,
+		LIST_NOTIFICATIONS,
+		params as Record<string, QueryValue>,
+		init
+	);
+
+const UPDATE_SEEN = "org.tangled.temp.notification.updateSeen";
+const MARK_ALL_READ = "org.tangled.temp.notification.markAllRead";
+const MARK_ENTITY_READ = "org.tangled.temp.notification.markEntityRead";
+const GET_UNREAD = "org.tangled.temp.notification.getUnreadCount";
+
+export const updateNotificationSeen = (
+	ctx: DeliberiContext,
+	input: { uri: string; read: boolean }
+): Promise<void> => authedPost(ctx, UPDATE_SEEN, input).then(() => undefined);
+
+export const markAllNotificationsRead = (ctx: DeliberiContext): Promise<void> =>
+	authedPost(ctx, MARK_ALL_READ, {}).then(() => undefined);
+
+export const markEntityNotificationsRead = (
+	ctx: DeliberiContext,
+	entityAt: string
+): Promise<void> => authedPost(ctx, MARK_ENTITY_READ, { entityAt }).then(() => undefined);
+
+
+export const getUnreadCount = (
+	ctx: DeliberiContext
+): Promise<{ count: number }> =>
+	authedGet(ctx, GET_UNREAD);
+
+const subjectFromUri = (
+	uri: string,
+	kind: "issue" | "pull",
+	title?: string
+): NotificationSubject => ({
+	kind,
+	uri,
+	number: rkeyFromUri(uri),
+	title: title ?? rkeyFromUri(uri)
+});
+
+/** resolve rows best-effort: missing actor, repo, or entity falls back to the raw value */
+export const hydrateNotifications = async (
+	ctx: BobbinContext,
+	items: NotificationItem[]
+): Promise<NotificationSummary[]> => {
+	if (items.length === 0) return [];
+
+	const actorDids = [...new Set(items.map((n) => n.actorDid))];
+
+	const repoDids = [...new Set(items.map((n) => n.repoDid).filter((d): d is string => !!d))];
+
+	const issueUris = [
+		...new Set(items.map((n) => n.issueAt).filter((u): u is string => !!u))
+	];
+	const pullUris = [
+		...new Set(items.map((n) => n.pullAt).filter((u): u is string => !!u))
+	];
+
+	const [actorDocs, repoList, issueList, pullList] = await Promise.all([
+		Promise.all(
+			actorDids.map((did) =>
+				resolveMiniDoc(ctx, did).catch(() => null)
+			)
+		),
+		repoDids.length > 0
+			? getReposByRepoDids(ctx, repoDids).catch(() => ({ items: [] }))
+			: Promise.resolve({ items: [] }),
+		issueUris.length > 0
+			? getIssues(ctx, issueUris).catch(() => ({ items: [] }))
+			: Promise.resolve({ items: [] }),
+		pullUris.length > 0
+			? getPulls(ctx, pullUris).catch(() => ({ items: [] }))
+			: Promise.resolve({ items: [] })
+	]);
+	const ownerDids = [...new Set(repoList.items.map((r) => didFromUri(r.uri)))];
+	const ownerDocs = await Promise.all(
+		ownerDids.map((did) => resolveMiniDoc(ctx, did).catch(() => null))
+	);
+	const ownerMap = new Map<string, string>();
+	for (const doc of ownerDocs) {
+		if (doc) ownerMap.set(doc.did, doc.handle);
+	}
+
+	const actorMap = new Map<string, NotificationActor>();
+	for (const doc of actorDocs) {
+		if (doc) actorMap.set(doc.did, { did: doc.did, handle: doc.handle });
+	}
+
+	const repoMap = new Map<string, NotificationRepo>();
+	for (const record of repoList.items) {
+		const repoDid = record.value.repoDid;
+		if (!repoDid) continue;
+		const ownerDid = didFromUri(record.uri);
+		const ownerHandle = ownerMap.get(ownerDid) ?? ownerDid;
+		repoMap.set(repoDid, {
+			ownerHandle,
+			name: record.value.name ?? repoDid
+		});
+	}
+	for (const repoDid of repoDids) {
+		if (!repoMap.has(repoDid)) {
+			repoMap.set(repoDid, { ownerHandle: repoDid, name: repoDid });
+		}
+	}
+
+	const titleMap = new Map<string, string>();
+	for (const record of issueList.items) {
+		titleMap.set(record.uri, record.value.title);
+	}
+	for (const record of pullList.items) {
+		titleMap.set(record.uri, record.value.title);
+	}
+
+	return items.map((item): NotificationSummary => {
+		const actor = actorMap.get(item.actorDid) ?? {
+			did: item.actorDid,
+			handle: item.actorDid
+		};
+		const repo = item.repoDid ? repoMap.get(item.repoDid) : undefined;
+		let subject: NotificationSubject | undefined;
+		if (item.issueAt) {
+			subject = subjectFromUri(item.issueAt, "issue", titleMap.get(item.issueAt));
+		} else if (item.pullAt) {
+			subject = subjectFromUri(item.pullAt, "pull", titleMap.get(item.pullAt));
+		}
+
+		return {
+			uri: item.uri,
+			type: item.type as NotificationType,
+			read: item.read,
+			createdAt: item.createdAt,
+			actor,
+			repo,
+			subject
+		};
+	});
+};
diff --git a/web/src/lib/components/notifications/NotificationBell.stories.svelte b/web/src/lib/components/notifications/NotificationBell.stories.svelte
index 149a3215..b1a0229f 100644
--- a/web/src/lib/components/notifications/NotificationBell.stories.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.stories.svelte
@@ -9,6 +9,7 @@
 	const many = Array.from({ length: 120 }, (_, index) => ({
 		...notifications[index % notifications.length],
 		id: index + 1,
+		uri: `at://mock/notif/${index + 1}`,
 		read: false
 	}));
 
diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index d63c3df5..c4d7a359 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -1,22 +1,34 @@
 <script lang="ts">
+	import { page } from "$app/state";
 	import { resolve } from "$app/paths";
 	import ArrowRight from "$icon/arrow-right";
 	import Bell from "$icon/bell";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
-	import { notifications as fixtures } from "./mock";
+	import { createBobbinClient } from "$lib/api/client";
+	import { createDeliberiClient } from "$lib/api/deliberi";
+	import {
+		getUnreadCount,
+		hydrateNotifications,
+		listNotifications,
+		markAllNotificationsRead,
+		updateNotificationSeen
+	} from "$lib/api/notifications";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createLoad } from "$lib/action.svelte";
 	import { notificationCategory } from "./notification";
 	import NotificationList from "./NotificationList.svelte";
 	import NotificationToolbar from "./NotificationToolbar.svelte";
 	import type { CategoryFilter, NotificationSummary, ReadFilter } from "./types";
 
 	interface Props {
-		// same fixtures the /notifications page loads: the xrpc method returns
-		// at-uris where these rows need a repo name, a number and a title.
+		/** optional fixture override for storybook; omitted → loads from deliberi */
 		notifications?: NotificationSummary[];
 	}
 
-	let { notifications = fixtures }: Props = $props();
+	let { notifications: fixtures }: Props = $props();
+
+	const auth = getAuth();
 
 	// the appview preview serves five rows and sends the rest to the full page
 	const PREVIEW_LIMIT = 5;
@@ -24,26 +36,48 @@
 	let readFilter = $state<ReadFilter>("unread");
 	let categoryFilter = $state<CategoryFilter>("all");
 
-	// read state lives here while the dropdown runs on fixtures; a wired bell would
-	// post org.tangled.temp.notification.updateSeen and refetch instead.
-	let overrides = $state<Record<number, boolean>>({});
+	let overrides = $state<Record<string, boolean>>({});
+
+	const previewLoad = createLoad(async () => {
+		if (fixtures) {
+			const unread = fixtures.filter((n) => !n.read).length;
+			return { summaries: fixtures, totalUnread: unread };
+		}
+		const agent = auth.agent;
+		const config = page.data.publicConfig;
+		if (!agent || !config?.deliberiUrl || !config?.bobbinUrl) throw new Error("Not ready");
+
+		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
+		const bobbin = createBobbinClient({ serviceUrl: config.bobbinUrl });
+
+		const [countResult, listResult] = await Promise.all([
+			getUnreadCount(deliberi),
+			listNotifications(deliberi, { read: readFilter, limit: PREVIEW_LIMIT }).then((r) =>
+				hydrateNotifications(bobbin, r.notifications)
+			)
+		]);
+		return { summaries: listResult, totalUnread: countResult.count };
+	});
+
+	const notifications = $derived(previewLoad.data?.summaries ?? []);
+	const totalUnread = $derived(previewLoad.data?.totalUnread ?? 0);
 
 	const all = $derived(
-		notifications.map((n) => (n.id in overrides ? { ...n, read: overrides[n.id] } : n))
+		notifications.map((n) => (n.uri in overrides ? { ...n, read: overrides[n.uri] } : n))
 	);
 
 	// the badge counts everything unread, not the rows this filter shows
-	const unreadCount = $derived(all.filter((n) => !n.read).length);
+	const unreadCount = $derived(totalUnread);
 	const badge = $derived(unreadCount > 99 ? "99+" : String(unreadCount));
 
 	// the unread tab filters on the data as it loaded, never on the local read
 	// state, so toggling a row restyles it in place instead of dropping it out of
 	// the list under the cursor.
-	const unreadOnLoad = $derived(new Set(notifications.filter((n) => !n.read).map((n) => n.id)));
+	const unreadOnLoad = $derived(new Set(notifications.filter((n) => !n.read).map((n) => n.uri)));
 
 	const filtered = $derived(
 		all
-			.filter((n) => readFilter !== "unread" || unreadOnLoad.has(n.id))
+			.filter((n) => readFilter !== "unread" || unreadOnLoad.has(n.uri))
 			.filter(
 				(n) => categoryFilter === "all" || notificationCategory(n.type) === categoryFilter
 			)
@@ -53,12 +87,26 @@
 
 	const allRead = $derived(filtered.every((n) => n.read));
 
-	const toggleRead = (id: number, read: boolean) => {
-		overrides[id] = read;
+	const toggleRead = async (uri: string, read: boolean) => {
+		overrides = { ...overrides, [uri]: read };
+		if (fixtures) return;
+		const agent = auth.agent;
+		const config = page.data.publicConfig;
+		if (!agent || !config?.deliberiUrl) return;
+		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
+		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
 	};
 
-	const markAll = (read: boolean) => {
-		for (const n of filtered) overrides[n.id] = read;
+	const markAll = async (read: boolean) => {
+		const next: Record<string, boolean> = {};
+		for (const n of filtered) next[n.uri] = read;
+		overrides = { ...overrides, ...next };
+		if (!read || fixtures) return;
+		const agent = auth.agent;
+		const config = page.data.publicConfig;
+		if (!agent || !config?.deliberiUrl) return;
+		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
+		await markAllNotificationsRead(deliberi).catch(() => {});
 	};
 
 	// the popover survives a client-side navigation unless something closes it
diff --git a/web/src/lib/components/notifications/NotificationItem.stories.svelte b/web/src/lib/components/notifications/NotificationItem.stories.svelte
index 353ff4d0..eec4520f 100644
--- a/web/src/lib/components/notifications/NotificationItem.stories.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.stories.svelte
@@ -56,7 +56,7 @@
 <Story name="Every type">
 	{#snippet template()}
 		<div class={frame}>
-			{#each notifications as notification (notification.id)}
+			{#each notifications as notification (notification.uri)}
 				<NotificationItem {notification} onToggleRead={() => {}} />
 			{/each}
 		</div>
diff --git a/web/src/lib/components/notifications/NotificationItem.svelte b/web/src/lib/components/notifications/NotificationItem.svelte
index 3b250f85..8523605d 100644
--- a/web/src/lib/components/notifications/NotificationItem.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.svelte
@@ -51,7 +51,7 @@
 
 	interface Props {
 		notification: NotificationSummary;
-		onToggleRead?: (id: number, read: boolean) => void;
+		onToggleRead?: (uri: string, read: boolean) => void;
 	}
 
 	let { notification, onToggleRead }: Props = $props();
@@ -65,13 +65,13 @@
 	const toggle = (event: MouseEvent) => {
 		event.preventDefault();
 		event.stopPropagation();
-		onToggleRead?.(notification.id, !notification.read);
+		onToggleRead?.(notification.uri, !notification.read);
 	};
 
 	// client-side navigation leaves a popover open, so a row inside the topbar
 	// dropdown has to dismiss it on the way out
 	const open = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {
-		onToggleRead?.(notification.id, true);
+		onToggleRead?.(notification.uri, true);
 		const popover = event.currentTarget.closest("[popover]");
 		if (popover instanceof HTMLElement) popover.hidePopover();
 	};
diff --git a/web/src/lib/components/notifications/NotificationList.svelte b/web/src/lib/components/notifications/NotificationList.svelte
index bd425f2f..83af8eae 100644
--- a/web/src/lib/components/notifications/NotificationList.svelte
+++ b/web/src/lib/components/notifications/NotificationList.svelte
@@ -16,7 +16,7 @@
 		// is too short for the date headings to earn their space
 		border?: boolean;
 		grouped?: boolean;
-		onToggleRead?: (id: number, read: boolean) => void;
+		onToggleRead?: (uri: string, read: boolean) => void;
 	}
 
 	let {
@@ -93,7 +93,7 @@
 						{section.label}
 					</div>
 				{/if}
-				{#each section.items as notification (notification.id)}
+				{#each section.items as notification (notification.uri)}
 					<NotificationItem {notification} {onToggleRead} />
 				{/each}
 			{/if}
diff --git a/web/src/lib/components/notifications/mock.ts b/web/src/lib/components/notifications/mock.ts
index f073e1f0..573d0bac 100644
--- a/web/src/lib/components/notifications/mock.ts
+++ b/web/src/lib/components/notifications/mock.ts
@@ -18,162 +18,147 @@ const dave = { did: "did:plc:kx4mzvhqrjpwqmvlbdxdlbnn", handle: "dave.tngl.sh" }
 const core = { ownerHandle: "tangled.org", name: "core" };
 const knot = { ownerHandle: "tangled.org", name: "knot" };
 
+const subjectUri = (kind: "issue" | "pull", number: string) =>
+	`at://did:plc:mock/sh.tangled.repo.${kind}/${number}`;
+
 export const notifications: NotificationSummary[] = [
-	{
-		id: 1,
-		type: "user_mentioned",
+	{ uri: `at://mock/notif/${1}`, id: 1, type: "user_mentioned",
 		read: false,
 		createdAt: ago(4),
 		actor: alice,
 		repo: core,
 		subject: {
 			kind: "pull",
-			number: 214,
+			uri: subjectUri("pull", "214"),
+			number: "214",
 			title: "spindle: retry a workflow after a knot timeout"
-		}
-	},
-	{
-		id: 2,
-		type: "pull_created",
+		} },
+	{ uri: `at://mock/notif/${2}`, id: 2, type: "pull_created",
 		read: false,
 		createdAt: ago(26),
 		actor: bob,
 		repo: core,
-		subject: { kind: "pull", number: 213, title: "web: port the notifications page to svelte" }
-	},
-	{
-		id: 3,
-		type: "repo_starred",
+		subject: {
+			kind: "pull",
+			uri: subjectUri("pull", "213"),
+			number: "213",
+			title: "web: port the notifications page to svelte"
+		} },
+	{ uri: `at://mock/notif/${3}`, id: 3, type: "repo_starred",
 		read: false,
 		createdAt: ago(51),
 		actor: carol,
-		repo: core
-	},
-	{
-		id: 4,
-		type: "issue_commented",
+		repo: core },
+	{ uri: `at://mock/notif/${4}`, id: 4, type: "issue_commented",
 		read: true,
 		createdAt: ago(190),
 		actor: dave,
 		repo: knot,
 		subject: {
 			kind: "issue",
-			number: 87,
+			uri: subjectUri("issue", "87"),
+			number: "87",
 			title: "packfile upload stalls on large repositories"
-		}
-	},
-	{
-		id: 5,
-		type: "followed",
+		} },
+	{ uri: `at://mock/notif/${5}`, id: 5, type: "followed",
 		read: false,
 		createdAt: ago(320),
-		actor: dave
-	},
-	{
-		id: 6,
-		type: "issue_assigned",
+		actor: dave },
+	{ uri: `at://mock/notif/${6}`, id: 6, type: "issue_assigned",
 		read: true,
 		createdAt: ago(60 * 26),
 		actor: alice,
 		repo: core,
 		subject: {
 			kind: "issue",
-			number: 402,
+			uri: subjectUri("issue", "402"),
+			number: "402",
 			title: "settings: the email tab drops its drill-down"
-		}
-	},
-	{
-		id: 7,
-		type: "pull_merged",
+		} },
+	{ uri: `at://mock/notif/${7}`, id: 7, type: "pull_merged",
 		read: true,
 		createdAt: ago(60 * 30),
 		actor: bob,
 		repo: core,
 		subject: {
 			kind: "pull",
-			number: 208,
+			uri: subjectUri("pull", "208"),
+			number: "208",
 			title: "appview: resolve handles inside the timeline feed"
-		}
-	},
-	{
-		id: 8,
-		type: "followed",
+		} },
+	{ uri: `at://mock/notif/${8}`, id: 8, type: "followed",
 		read: true,
 		createdAt: ago(60 * 40),
-		actor: carol
-	},
-	{
-		id: 9,
-		type: "issue_created",
+		actor: carol },
+	{ uri: `at://mock/notif/${9}`, id: 9, type: "issue_created",
 		read: false,
 		createdAt: ago(60 * 55),
 		actor: carol,
 		repo: knot,
 		subject: {
 			kind: "issue",
-			number: 91,
+			uri: subjectUri("issue", "91"),
+			number: "91",
 			title: "git hooks reject a push with no error message"
-		}
-	},
-	{
-		id: 10,
-		type: "pull_closed",
+		} },
+	{ uri: `at://mock/notif/${10}`, id: 10, type: "pull_closed",
 		read: true,
 		createdAt: ago(60 * 24 * 5),
 		actor: dave,
 		repo: core,
-		subject: { kind: "pull", number: 199, title: "drop the legacy avatar worker" }
-	},
-	{
-		id: 11,
-		type: "repo_starred",
+		subject: {
+			kind: "pull",
+			uri: subjectUri("pull", "199"),
+			number: "199",
+			title: "drop the legacy avatar worker"
+		} },
+	{ uri: `at://mock/notif/${11}`, id: 11, type: "repo_starred",
 		read: true,
 		createdAt: ago(60 * 24 * 6),
 		actor: alice,
-		repo: knot
-	},
-	{
-		id: 12,
-		type: "issue_closed",
+		repo: knot },
+	{ uri: `at://mock/notif/${12}`, id: 12, type: "issue_closed",
 		read: true,
 		createdAt: ago(60 * 24 * 9),
 		actor: bob,
 		repo: core,
-		subject: { kind: "issue", number: 377, title: "dark mode inverts the button group seam" }
-	},
-	{
-		id: 13,
-		type: "pull_commented",
+		subject: {
+			kind: "issue",
+			uri: subjectUri("issue", "377"),
+			number: "377",
+			title: "dark mode inverts the button group seam"
+		} },
+	{ uri: `at://mock/notif/${13}`, id: 13, type: "pull_commented",
 		read: true,
 		createdAt: ago(60 * 24 * 12),
 		actor: alice,
 		repo: knot,
 		subject: {
 			kind: "pull",
-			number: 64,
+			uri: subjectUri("pull", "64"),
+			number: "64",
 			title: "knot: verify the owner signature before a fetch"
-		}
-	},
-	{
-		id: 14,
-		type: "issue_reopen",
+		} },
+	{ uri: `at://mock/notif/${14}`, id: 14, type: "issue_reopen",
 		read: true,
 		createdAt: ago(60 * 24 * 15),
 		actor: carol,
 		repo: core,
 		subject: {
 			kind: "issue",
-			number: 311,
+			uri: subjectUri("issue", "311"),
+			number: "311",
 			title: "pipelines tab shows a stale workflow status"
-		}
-	},
-	{
-		id: 15,
-		type: "pull_unassigned",
+		} },
+	{ uri: `at://mock/notif/${15}`, id: 15, type: "pull_unassigned",
 		read: true,
 		createdAt: ago(60 * 24 * 21),
 		actor: bob,
 		repo: core,
-		subject: { kind: "pull", number: 180, title: "camo: cache remote images for a week" }
-	}
+		subject: {
+			kind: "pull",
+			uri: subjectUri("pull", "180"),
+			number: "180",
+			title: "camo: cache remote images for a week"
+		} }
 ];
diff --git a/web/src/lib/components/notifications/notification.ts b/web/src/lib/components/notifications/notification.ts
index ee117b55..8b2b9921 100644
--- a/web/src/lib/components/notifications/notification.ts
+++ b/web/src/lib/components/notifications/notification.ts
@@ -123,7 +123,7 @@ export const notificationTarget = (notification: NotificationSummary): string =>
 export const notificationHref = (notification: NotificationSummary): string => {
 	if (notification.type === "followed") return `/${notification.actor.handle}`;
 	const repo = notification.repo;
-	if (!repo) return "";
+	if (!repo) return `/${notification.actor.handle}`;
 	const base = `/${repo.ownerHandle}/${repo.name}`;
 	const subject = notification.subject;
 	if (!subject) return base;
diff --git a/web/src/lib/components/notifications/types.ts b/web/src/lib/components/notifications/types.ts
index 942f82e3..39ba6777 100644
--- a/web/src/lib/components/notifications/types.ts
+++ b/web/src/lib/components/notifications/types.ts
@@ -38,12 +38,14 @@ export interface NotificationRepo {
 
 export interface NotificationSubject {
 	kind: "issue" | "pull";
-	number: number;
+	uri: string;
+	number: string;
 	title: string;
 }
 
 export interface NotificationSummary {
-	id: number;
+	uri: string;
+	id?: number;
 	type: NotificationType;
 	read: boolean;
 	createdAt: string;
diff --git a/web/src/lib/oauth-client-metadata.json b/web/src/lib/oauth-client-metadata.json
index 3ba341b4..49966103 100644
--- a/web/src/lib/oauth-client-metadata.json
+++ b/web/src/lib/oauth-client-metadata.json
@@ -2,10 +2,17 @@
 	"client_id": "https://tangled.org/oauth-client-metadata.json",
 	"client_name": "Tangled",
 	"client_uri": "https://tangled.org",
-	"redirect_uris": ["https://tangled.org/oauth/callback"],
-	"scope": "atproto repo:org.tangled.feed.subscription repo:sh.tangled.actor.profile repo:sh.tangled.feed.comment repo:sh.tangled.feed.reaction repo:sh.tangled.feed.star repo:sh.tangled.graph.follow repo:sh.tangled.graph.vouch repo:sh.tangled.knot repo:sh.tangled.knot.member repo:sh.tangled.label.definition repo:sh.tangled.label.op repo:sh.tangled.publicKey repo:sh.tangled.repo repo:sh.tangled.repo.artifact repo:sh.tangled.repo.collaborator repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status repo:sh.tangled.spindle repo:sh.tangled.spindle.member repo:sh.tangled.string blob:*/* rpc:sh.tangled.graph.listNetworkVouches?aud=* rpc:sh.tangled.knot.addMember?aud=* rpc:sh.tangled.knot.removeMember?aud=* rpc:sh.tangled.ci.triggerPipeline?aud=* rpc:sh.tangled.ci.cancelPipeline?aud=* rpc:sh.tangled.repo.addCollaborator?aud=* rpc:sh.tangled.repo.addSecret?aud=* rpc:sh.tangled.repo.create?aud=* rpc:sh.tangled.repo.delete?aud=* rpc:sh.tangled.repo.deleteBranch?aud=* rpc:sh.tangled.repo.forkStatus?aud=* rpc:sh.tangled.repo.forkSync?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* rpc:sh.tangled.repo.listSecrets?aud=* rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.mergeCheck?aud=* rpc:sh.tangled.repo.removeCollaborator?aud=* rpc:sh.tangled.repo.removeSecret?aud=* rpc:sh.tangled.repo.setDefaultBranch?aud=* rpc:org.tangled.temp.notification.getPreferences?aud=* rpc:org.tangled.temp.notification.updatePreferences?aud=* rpc:org.tangled.temp.site.getDomainClaim?aud=* rpc:org.tangled.temp.site.claimDomain?aud=* rpc:org.tangled.temp.site.releaseDomain?aud=* rpc:sh.tangled.git.keepCommit?aud=* rpc:sh.tangled.git.mergeCommit?aud=* rpc:com.atproto.moderation.createReport?aud=*",
-	"grant_types": ["authorization_code", "refresh_token"],
-	"response_types": ["code"],
+	"redirect_uris": [
+		"https://tangled.org/oauth/callback"
+	],
+	"scope": "atproto repo:sh.tangled.actor.profile repo:org.tangled.feed.subscription repo:sh.tangled.feed.comment repo:sh.tangled.feed.reaction repo:sh.tangled.feed.star repo:sh.tangled.graph.follow repo:sh.tangled.graph.vouch repo:sh.tangled.knot repo:sh.tangled.knot.member repo:sh.tangled.label.definition repo:sh.tangled.label.op repo:sh.tangled.publicKey repo:sh.tangled.repo repo:sh.tangled.repo.artifact repo:sh.tangled.repo.collaborator repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status repo:sh.tangled.spindle repo:sh.tangled.spindle.member repo:sh.tangled.string blob:*/* rpc:sh.tangled.graph.listNetworkVouches?aud=* rpc:sh.tangled.knot.addMember?aud=* rpc:sh.tangled.knot.removeMember?aud=* rpc:sh.tangled.ci.triggerPipeline?aud=* rpc:sh.tangled.ci.cancelPipeline?aud=* rpc:sh.tangled.repo.addCollaborator?aud=* rpc:sh.tangled.repo.addSecret?aud=* rpc:sh.tangled.repo.create?aud=* rpc:sh.tangled.repo.delete?aud=* rpc:sh.tangled.repo.deleteBranch?aud=* rpc:sh.tangled.repo.forkStatus?aud=* rpc:sh.tangled.repo.forkSync?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* rpc:sh.tangled.repo.listSecrets?aud=* rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.mergeCheck?aud=* rpc:sh.tangled.repo.removeCollaborator?aud=* rpc:sh.tangled.repo.removeSecret?aud=* rpc:sh.tangled.repo.setDefaultBranch?aud=* rpc:org.tangled.temp.notification.getPreferences?aud=* rpc:org.tangled.temp.notification.updatePreferences?aud=* rpc:org.tangled.temp.notification.getUnreadCount?aud=* rpc:org.tangled.temp.notification.listNotifications?aud=* rpc:org.tangled.temp.notification.markAllRead?aud=* rpc:org.tangled.temp.notification.markEntityRead?aud=* rpc:org.tangled.temp.notification.updateSeen?aud=* rpc:org.tangled.temp.site.getDomainClaim?aud=* rpc:org.tangled.temp.site.claimDomain?aud=* rpc:org.tangled.temp.site.releaseDomain?aud=* rpc:sh.tangled.git.keepCommit?aud=* rpc:sh.tangled.git.mergeCommit?aud=* rpc:com.atproto.moderation.createReport?aud=*",
+	"grant_types": [
+		"authorization_code",
+		"refresh_token"
+	],
+	"response_types": [
+		"code"
+	],
 	"token_endpoint_auth_method": "none",
 	"application_type": "web",
 	"dpop_bound_access_tokens": true
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 70660c43..82d66d77 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -1,29 +1,59 @@
 <script lang="ts">
+	import { createBobbinClient } from "$lib/api/client";
+	import { createDeliberiClient } from "$lib/api/deliberi";
+	import {
+		hydrateNotifications,
+		listNotifications,
+		markAllNotificationsRead,
+		updateNotificationSeen
+	} from "$lib/api/notifications";
 	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 	import NotificationToolbar from "$lib/components/notifications/NotificationToolbar.svelte";
 	import { notificationCategory } from "$lib/components/notifications/notification";
 	import type { NotificationSummary } from "$lib/components/notifications/types";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createLoad } from "$lib/action.svelte";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
 
-	// read state lives here while the page runs on fixtures; a wired page would
-	// post org.tangled.temp.notification.updateSeen and reload instead.
-	let overrides = $state<Record<number, boolean>>({});
+	const auth = getAuth();
 
+	// local read-state overrides keyed by notification uri so toggling a row
+	// restyles it in place instead of dropping it out of the list. the server
+	// call fires optimistically and a reload re-derives the canonical set.
+	let overrides = $state<Record<string, boolean>>({});
+
+	const loaded = createLoad(async () => {
+		const agent = auth.agent;
+		const deliberiUrl = data.deliberiUrl;
+		const bobbinUrl = data.bobbinUrl;
+		if (!agent || !deliberiUrl || !bobbinUrl) throw new Error("Not ready");
+
+		const deliberi = createDeliberiClient({ deliberiUrl, agent });
+		const bobbin = createBobbinClient({ serviceUrl: bobbinUrl });
+
+		const result = await listNotifications(deliberi, {
+			read: data.readFilter,
+			category: data.categoryFilter === "all" ? undefined : data.categoryFilter
+		});
+		return hydrateNotifications(bobbin, result.notifications);
+	});
 	const all = $derived(
-		data.notifications.map((n) => (n.id in overrides ? { ...n, read: overrides[n.id] } : n))
+		(loaded.data ?? []).map((n) =>
+			n.uri in overrides ? { ...n, read: overrides[n.uri] } : n
+		)
 	);
 
 	// the unread tab filters on the data as it loaded, never on the local read
 	// state, so toggling a row restyles it in place instead of dropping it out of
 	// the list under the cursor. the next load re-derives the set.
 	const unreadOnLoad = $derived(
-		new Set(data.notifications.filter((n) => !n.read).map((n) => n.id))
+		new Set((loaded.data ?? []).filter((n) => !n.read).map((n) => n.uri))
 	);
 
 	const visible = $derived(
-		data.readFilter === "unread" ? all.filter((n) => unreadOnLoad.has(n.id)) : all
+		data.readFilter === "unread" ? all.filter((n) => unreadOnLoad.has(n.uri)) : all
 	);
 
 	const work = $derived(visible.filter((n) => notificationCategory(n.type) === "work"));
@@ -45,8 +75,12 @@
 	// takes the full width instead
 	const showSocial = $derived(data.readFilter !== "unread" || social.length > 0);
 
-	const toggleRead = (id: number, read: boolean) => {
-		overrides[id] = read;
+	const toggleRead = async (uri: string, read: boolean) => {
+		overrides = { ...overrides, [uri]: read };
+		const agent = auth.agent;
+		if (!agent || !data.deliberiUrl) return;
+		const deliberi = createDeliberiClient({ deliberiUrl: data.deliberiUrl, agent });
+		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
 	};
 
 	// once everything is read the button offers the way back, so the action reads
@@ -55,8 +89,15 @@
 	// holds.
 	const allRead = $derived(visible.every((n) => n.read));
 
-	const markAll = (read: boolean) => {
-		for (const n of visible) overrides[n.id] = read;
+	const markAll = async (read: boolean) => {
+		const next: Record<string, boolean> = {};
+		for (const n of visible) next[n.uri] = read;
+		overrides = { ...overrides, ...next };
+		if (!read) return;
+		const agent = auth.agent;
+		if (!agent || !data.deliberiUrl) return;
+		const deliberi = createDeliberiClient({ deliberiUrl: data.deliberiUrl, agent });
+		await markAllNotificationsRead(deliberi).catch(() => {});
 	};
 </script>
 
diff --git a/web/src/routes/notifications/+page.ts b/web/src/routes/notifications/+page.ts
index 91dd8b63..f7be72f9 100644
--- a/web/src/routes/notifications/+page.ts
+++ b/web/src/routes/notifications/+page.ts
@@ -1,14 +1,16 @@
-import { notifications } from "$lib/components/notifications/mock";
-import type { ReadFilter } from "$lib/components/notifications/types";
+import type { CategoryFilter, ReadFilter } from "$lib/components/notifications/types";
 import type { PageLoad } from "./$types";
 
-// org.tangled.temp.notification.listNotifications already serves this page's
-// data, but it returns at-uris where the rows need a repo name, an issue number
-// and a title. until something hydrates those, the fixtures stand in.
-export const load: PageLoad = (event) => {
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
 	const read: ReadFilter = event.url.searchParams.get("read") === "unread" ? "unread" : "inbox";
 	const requested = event.url.searchParams.get("category");
-	const category = requested === "work" || requested === "social" ? requested : "all";
+	const category: CategoryFilter = requested === "work" || requested === "social" ? requested : "all";
 
-	return { notifications, readFilter: read, categoryFilter: category };
+	return {
+		readFilter: read,
+		categoryFilter: category,
+		deliberiUrl: parent.publicConfig.deliberiUrl,
+		bobbinUrl: parent.publicConfig.bobbinUrl
+	};
 };
-- 
2.51.2