add following view, no profile / timeline viewing for now

deno.lock

···
     "npm:@atcute/client@^4.1.1": "4.1.1",
     "npm:@atcute/identity-resolver@^1.2.1": "1.2.1_@atcute+identity@1.1.3",
     "npm:@atcute/identity@^1.1.3": "1.1.3",
+    "npm:@atcute/jetstream@^1.1.2": "1.1.2",
     "npm:@atcute/lexicons@^1.2.5": "1.2.5",
     "npm:@atcute/oauth-browser-client@^2.0.3": "2.0.3_@atcute+identity@1.1.3",
     "npm:@atcute/tid@^1.0.3": "1.0.3",
···
     "npm:@tailwindcss/vite@^4.1.18": "4.1.18_vite@7.3.0__@types+node@25.0.3__picomatch@4.0.3_@types+node@25.0.3",
     "npm:@types/node@^25.0.3": "25.0.3",
     "npm:@wora/cache-persist@^2.2.1": "2.2.1",
+    "npm:async-cache-dedupe@^3.4.0": "3.4.0",
     "npm:eslint-config-prettier@^10.1.8": "10.1.8_eslint@9.39.2",
     "npm:eslint-plugin-svelte@^3.13.1": "3.13.1_eslint@9.39.2_svelte@5.46.1__acorn@8.15.0_postcss@8.5.6",
     "npm:eslint@^9.39.2": "9.39.2",
···
       "dependencies": [
         "@atcute/lexicons",
         "@badrap/valita"
+      ]
+    },
+    "@atcute/jetstream@1.1.2": {
+      "integrity": "sha512-u6p/h2xppp7LE6W/9xErAJ6frfN60s8adZuCKtfAaaBBiiYbb1CfpzN8Uc+2qtJZNorqGvuuDb5572Jmh7yHBQ==",
+      "dependencies": [
+        "@atcute/lexicons",
+        "@badrap/valita",
+        "@mary-ext/event-iterator",
+        "@mary-ext/simple-event-emitter",
+        "partysocket",
+        "type-fest",
+        "yocto-queue@1.2.2"
       ]
     },
     "@atcute/lexicons@1.2.5": {
···
         "@jridgewell/sourcemap-codec"
       ]
     },
+    "@mary-ext/event-iterator@1.0.0": {
+      "integrity": "sha512-l6gCPsWJ8aRCe/s7/oCmero70kDHgIK5m4uJvYgwEYTqVxoBOIXbKr5tnkLqUHEg6mNduB4IWvms3h70Hp9ADQ==",
+      "dependencies": [
+        "yocto-queue@1.2.2"
+      ]
+    },
+    "@mary-ext/simple-event-emitter@1.0.0": {
+      "integrity": "sha512-meA/zJZKIN1RVBNEYIbjufkUrW7/tRjHH60FjolpG1ixJKo76TB208qefQLNdOVDA7uIG0CGEDuhmMirtHKLAg=="
+    },
     "@polka/url@1.0.0-next.29": {
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="
     },
···
     "aria-query@5.3.2": {
       "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
     },
+    "async-cache-dedupe@3.4.0": {
+      "integrity": "sha512-RkQr21CpltqMpbYpRaEAmF1BdUO5jnnS/scZkectmLiuWQ81w8u4lYraipbQf8zQ0yYvb3U0N1ozNAYmI4jQ3g==",
+      "dependencies": [
+        "mnemonist",
+        "safe-stable-stringify"
+      ]
+    },
     "axobject-query@4.1.0": {
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
     },
···
     "esutils@2.0.3": {
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
+    "event-target-polyfill@0.0.4": {
+      "integrity": "sha512-Gs6RLjzlLRdT8X9ZipJdIZI/Y6/HhRLyq9RdDlCsnpxr/+Nn6bU2EFGuC94GjxqhM+Nmij2Vcq98yoHrU8uNFQ=="
+    },
     "fast-deep-equal@3.1.3": {
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
···
         "brace-expansion@2.0.2"
       ]
     },
+    "mnemonist@0.40.3": {
+      "integrity": "sha512-Vjyr90sJ23CKKH/qPAgUKicw/v6pRoamxIEDFOF8uSgFME7DqPRpHgRTejWVjkdGg5dXj0/NyxZHZ9bcjH+2uQ==",
+      "dependencies": [
+        "obliterator"
+      ]
+    },
     "mri@1.2.0": {
       "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
     },
···
     "natural-compare@1.4.0": {
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "obliterator@2.0.5": {
+      "integrity": "sha512-42CPE9AhahZRsMNslczq0ctAEtqk8Eka26QofnqC346BZdHDySk3LWka23LI7ULIw11NmltpiLagIq8gBozxTw=="
+    },
     "optionator@0.9.4": {
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dependencies": [
···
     "p-limit@3.1.0": {
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dependencies": [
-        "yocto-queue"
+        "yocto-queue@0.1.0"
       ]
     },
     "p-locate@5.0.0": {
···
         "callsites"
       ]
     },
+    "partysocket@1.1.10": {
+      "integrity": "sha512-ACfn0P6lQuj8/AqB4L5ZDFcIEbpnIteNNObrlxqV1Ge80GTGhjuJ2sNKwNQlFzhGi4kI7fP/C1Eqh8TR78HjDQ==",
+      "dependencies": [
+        "event-target-polyfill"
+      ]
+    },
     "path-exists@4.0.0": {
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
     },
···
       "dependencies": [
         "mri"
       ]
+    },
+    "safe-stable-stringify@2.5.0": {
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA=="
     },
     "semver@7.7.3": {
       "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
···
         "prelude-ls"
       ]
     },
+    "type-fest@4.41.0": {
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="
+    },
     "typescript-eslint@8.50.1_eslint@9.39.2_typescript@5.9.3_@typescript-eslint+parser@8.50.1__eslint@9.39.2__typescript@5.9.3": {
       "integrity": "sha512-ytTHO+SoYSbhAH9CrYnMhiLx8To6PSSvqnvXyPUgPETCvB6eBKmTI9w6XMPS3HsBRGkwTVBX+urA8dYQx6bHfQ==",
       "dependencies": [
···
     "yocto-queue@0.1.0": {
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     },
+    "yocto-queue@1.2.2": {
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ=="
+    },
     "zimmerframe@1.1.4": {
       "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="
     }
···
         "npm:@atcute/client@^4.1.1",
         "npm:@atcute/identity-resolver@^1.2.1",
         "npm:@atcute/identity@^1.1.3",
+        "npm:@atcute/jetstream@^1.1.2",
         "npm:@atcute/lexicons@^1.2.5",
         "npm:@atcute/oauth-browser-client@^2.0.3",
         "npm:@atcute/tid@^1.0.3",
···
         "npm:@tailwindcss/vite@^4.1.18",
         "npm:@types/node@^25.0.3",
         "npm:@wora/cache-persist@^2.2.1",
+        "npm:async-cache-dedupe@^3.4.0",
         "npm:eslint-config-prettier@^10.1.8",
         "npm:eslint-plugin-svelte@^3.13.1",
         "npm:eslint@^9.39.2",

package.json

···
 		"@atcute/client": "^4.1.1",
 		"@atcute/identity": "^1.1.3",
 		"@atcute/identity-resolver": "^1.2.1",
+		"@atcute/jetstream": "^1.1.2",
 		"@atcute/lexicons": "^1.2.5",
 		"@atcute/oauth-browser-client": "^2.0.3",
 		"@atcute/tid": "^1.0.3",
 		"@floating-ui/dom": "^1.7.4",
 		"@soffinal/websocket": "^0.2.1",
 		"@wora/cache-persist": "^2.2.1",
+		"async-cache-dedupe": "^3.4.0",
 		"hash-wasm": "^4.12.0",
 		"lru-cache": "^11.2.4",
 		"svelte-device-info": "^1.0.6",

src/components/AccountSelector.svelte

···
 <script lang="ts">
 	import { generateColorForDid, loggingIn, type Account } from '$lib/accounts';
-	import { AtpClient } from '$lib/at/client';
+	import { AtpClient, resolveHandle } from '$lib/at/client';
 	import type { Handle } from '@atcute/lexicons';
 	import ProfilePicture from './ProfilePicture.svelte';
 	import PfpPlaceholder from './PfpPlaceholder.svelte';
···
 			if (isHandle(loginHandle)) handle = loginHandle;
 			else throw 'handle is invalid';
 
-			let did = await client.resolveHandle(handle);
+			let did = await resolveHandle(handle);
 			if (!did.ok) throw did.error;
 
 			await initiateLogin(did.value, handle);

src/components/BskyPost.svelte

···
 <script lang="ts">
-	import { type AtpClient } from '$lib/at/client';
+	import { resolveDidDoc, type AtpClient } from '$lib/at/client';
 	import {
 		AppBskyActorProfile,
 		AppBskyEmbedExternal,
···
 	import { type AppBskyEmbeds } from '$lib/at/types';
 	import { settings } from '$lib/settings';
 	import RichText from './RichText.svelte';
+	import { getRelativeTime } from '$lib/date';
 
 	interface Props {
 		client: AtpClient;
···
 	const color = generateColorForDid(did);
 
 	let handle: ActorIdentifier = $state(did);
-	const didDoc = client.resolveDidDoc(did).then((res) => {
+	const didDoc = resolveDidDoc(did).then((res) => {
 		if (res.ok) handle = res.value.handle;
 		return res;
 	});
···
 		}
 	};
 
-	const getRelativeTime = (date: Date) => {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const seconds = Math.floor(diff / 1000);
-		const minutes = Math.floor(seconds / 60);
-		const hours = Math.floor(minutes / 60);
-		const days = Math.floor(hours / 24);
-		const months = Math.floor(days / 30);
-		const years = Math.floor(months / 12);
-
-		if (years > 0) return `${years}y`;
-		if (months > 0) return `${months}m`;
-		if (days > 0) return `${days}d`;
-		if (hours > 0) return `${hours}h`;
-		if (minutes > 0) return `${minutes}m`;
-		if (seconds > 0) return `${seconds}s`;
-		return 'now';
-	};
-
 	const findBacklink = $derived(async (toDid: AtprotoDid, source: BacklinksSource) => {
 		const backlinks = await client.getBacklinks(did, 'app.bsky.feed.post', rkey, source);
 		if (!backlinks.ok) return null;
···
 
 		{#if profileDesc.length > 0}
 			<p class="rounded-sm bg-black/25 p-1.5 text-wrap wrap-break-word">
-				<RichText text={profileDesc} {client} />
+				<RichText text={profileDesc} />
 			</p>
 		{/if}
 	</Dropdown>
···
 					</span>
 				</div>
 				<p class="leading-normal text-wrap wrap-break-word">
-					<RichText text={record.text} facets={record.facets ?? []} {client} />
+					<RichText text={record.text} facets={record.facets ?? []} />
 					{#if isOnPostComposer && record.embed}
 						{@render embedBadge(record.embed)}
 					{/if}

src/components/FollowingView.svelte

···
+<script lang="ts">
+	import { follows, getClient, posts } from '$lib/state.svelte';
+	import type { Did } from '@atcute/lexicons';
+	import ProfilePicture from './ProfilePicture.svelte';
+	import { type AtpClient, resolveDidDoc } from '$lib/at/client';
+	import { getRelativeTime } from '$lib/date';
+	import { generateColorForDid } from '$lib/accounts';
+	import { type AtprotoDid } from '@atcute/lexicons/syntax';
+
+	interface Props {
+		selectedDid: Did;
+		selectedClient: AtpClient;
+	}
+
+	const { selectedDid, selectedClient }: Props = $props();
+
+	const burstTimeframeMs = 1000 * 60 * 60; // 1 hour
+
+	type FollowedAccount = {
+		did: Did;
+		lastPostAt: Date;
+		postsInBurst: number;
+	};
+
+	class FollowedUserStats {
+		did: Did;
+		constructor(did: Did) {
+			this.did = did;
+		}
+
+		data = $derived.by(() => {
+			const postsMap = posts.get(this.did);
+			if (!postsMap || postsMap.size === 0) return null;
+
+			let lastPostAtTime = 0;
+			let postsInBurst = 0;
+			const now = Date.now();
+			const timeframe = now - burstTimeframeMs;
+
+			for (const post of postsMap.values()) {
+				const t = new Date(post.record.createdAt).getTime();
+				if (t > lastPostAtTime) lastPostAtTime = t;
+				if (t > timeframe) postsInBurst++;
+			}
+
+			return {
+				did: this.did,
+				lastPostAt: new Date(lastPostAtTime),
+				postsInBurst
+			};
+		});
+	}
+
+	type Sort = 'recent' | 'active';
+	let followingSort: Sort = $state('active' as Sort);
+
+	const followsMap = $derived(follows.get(selectedDid));
+
+	const userStatsList = $derived(
+		followsMap ? Array.from(followsMap.values()).map((f) => new FollowedUserStats(f.subject)) : []
+	);
+
+	const following: FollowedAccount[] = $derived(
+		userStatsList.map((u) => u.data).filter((d): d is FollowedAccount => d !== null)
+	);
+
+	const sortedFollowing = $derived(
+		[...following].sort((a, b) => {
+			if (followingSort === 'recent') {
+				// Sort by last post time descending, then burst descending
+				const timeA = a.lastPostAt.getTime();
+				const timeB = b.lastPostAt.getTime();
+				if (timeA !== timeB) return timeB - timeA;
+				return b.postsInBurst - a.postsInBurst;
+			} else {
+				// Sort by burst descending, then last post time descending
+				if (b.postsInBurst !== a.postsInBurst) return b.postsInBurst - a.postsInBurst;
+				return b.lastPostAt.getTime() - a.lastPostAt.getTime();
+			}
+		})
+	);
+
+	let highlightedDid: Did | undefined = $state(undefined);
+</script>
+
+<div class="p-2">
+	<div class="mb-4 flex items-center justify-between px-2">
+		<div>
+			<h2 class="text-3xl font-bold">following</h2>
+			<div class="mt-2 flex gap-2">
+				<div class="h-1 w-8 rounded-full bg-(--nucleus-accent)"></div>
+				<div class="h-1 w-11 rounded-full bg-(--nucleus-accent2)"></div>
+			</div>
+		</div>
+		<div class="flex gap-2 text-sm">
+			{#each ['recent', 'active'] as Sort[] as type (type)}
+				<button
+					class="rounded-sm px-2 py-1 transition-colors {followingSort === type
+						? 'bg-(--nucleus-accent) text-(--nucleus-bg)'
+						: 'bg-(--nucleus-accent)/10 hover:bg-(--nucleus-accent)/20'}"
+					onclick={() => (followingSort = type)}
+				>
+					{type}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="flex flex-col gap-2">
+		{#if sortedFollowing.length === 0}
+			<div class="flex justify-center py-8">
+				<div
+					class="h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
+					style="border-color: var(--nucleus-accent) var(--nucleus-accent) var(--nucleus-accent) transparent;"
+				></div>
+			</div>
+		{:else}
+			{#each sortedFollowing as user (user.did)}
+				{@const lastPostAt = user.lastPostAt}
+				{@const relTime = getRelativeTime(lastPostAt)}
+				{@const color = generateColorForDid(user.did)}
+				{@const isHighlighted = highlightedDid === user.did}
+				{@const displayName = getClient(user.did as AtprotoDid)
+					.then((client) => client.getProfile())
+					.then((profile) => {
+						if (profile.ok) return profile.value.displayName;
+						return null;
+					})}
+				{@const handle = resolveDidDoc(user.did).then((doc) => {
+					if (doc.ok) return doc.value.handle;
+					return 'handle.invalid';
+				})}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="flex items-center gap-2 rounded-sm bg-(--nucleus-accent)/7 p-3 transition-colors"
+					style={`background-color: ${isHighlighted ? `color-mix(in srgb, ${color} 20%, transparent)` : 'color-mix(in srgb, var(--nucleus-accent) 7%, transparent)'};`}
+					onmouseenter={() => (highlightedDid = user.did)}
+					onmouseleave={() => (highlightedDid = undefined)}
+				>
+					<ProfilePicture client={selectedClient} did={user.did} size={10} />
+					<div class="min-w-0 flex-1">
+						<div
+							class="flex items-baseline gap-2 font-bold transition-colors"
+							style={`${isHighlighted ? `color: ${color};` : ''}`}
+						>
+							{#await Promise.all([displayName, handle]) then [displayName, handle]}
+								<span class="truncate">{displayName || handle}</span>
+								<span class="truncate text-sm opacity-60">@{handle}</span>
+							{/await}
+						</div>
+						<div class="flex gap-2 text-xs opacity-70">
+							<span
+								class={Date.now() - lastPostAt.getTime() < 1000 * 60 * 60 * 2
+									? 'text-(--nucleus-accent)'
+									: ''}
+							>
+								posted {relTime}
+								{relTime !== 'now' ? 'ago' : ''}
+							</span>
+							{#if user.postsInBurst > 0}
+								<span class="font-bold text-(--nucleus-accent2)">
+									{user.postsInBurst} posts / 1h
+								</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>

src/components/PostComposer.svelte

···
 		});
 
 		// Parse rich text (mentions, links, tags)
-		const rt = await parseToRichText(client, text);
+		const rt = await parseToRichText(text);
 
 		const record: AppBskyFeedPost.Main = {
 			$type: 'app.bsky.feed.post',

src/components/ProfilePicture.svelte

···
 		{#if isBlob(record.avatar)}
 			<img
 				class="rounded-sm"
+				loading="lazy"
 				style="width: calc(var(--spacing) * {size}); height: calc(var(--spacing) * {size});"
 				alt="avatar for {did}"
 				src={img('avatar_thumbnail', did, record.avatar.ref.$link)}

src/components/RichText.svelte

···
 <script lang="ts">
-	import type { AtpClient } from '$lib/at/client';
 	import { parseToRichText } from '$lib/richtext';
 	import { settings } from '$lib/settings';
 	import type { BakedRichtext } from '@atcute/bluesky-richtext-builder';
···
 	interface Props {
 		text: string;
 		facets?: Facet[];
-		client: AtpClient;
 	}
 
-	const { text, facets, client }: Props = $props();
+	const { text, facets }: Props = $props();
 
 	const richtext: Promise<BakedRichtext> = $derived(
-		facets ? Promise.resolve({ text, facets }) : parseToRichText(client, text)
+		facets ? Promise.resolve({ text, facets }) : parseToRichText(text)
 	);
 </script>
 

src/components/SettingsView.svelte

···
 <script lang="ts">
 	import { defaultSettings, needsReload, settings } from '$lib/settings';
-	import { handleCache, didDocCache, recordCache } from '$lib/at/client';
 	import { get } from 'svelte/store';
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import Tabs from './Tabs.svelte';
 	import { portal } from 'svelte-portal';
+	import { cache } from '$lib/cache';
 
 	type Tab = 'style' | 'moderation' | 'advanced';
 	let activeTab = $state<Tab>('advanced');
···
 	};
 
 	const handleClearCache = () => {
-		handleCache.clear();
-		didDocCache.clear();
-		recordCache.clear();
+		cache.clear();
 		alert('cache cleared!');
 	};
 </script>
 
-{#snippet divider()}
-	<div class="h-px bg-linear-to-r from-(--nucleus-accent) to-(--nucleus-accent2)"></div>
-{/snippet}
-
 {#snippet advancedTab()}
 	<div class="space-y-3 p-4">
 		<div>
···
 				{@render _input('slingshot', 'slingshot url (for fetching records & resolving identity)')}
 				{@render _input('spacedust', 'spacedust url (for notifications)')}
 				{@render _input('constellation', 'constellation url (for backlinks)')}
+				{@render _input('jetstream', 'jetstream url (for real-time updates)')}
 			</div>
 		</div>
 
···
 
 	<div
 		use:portal={'#app-footer'}
-		class="fixed bottom-[5dvh] z-20 w-full max-w-2xl p-4 pt-2 shadow-[0_-10px_20px_-5px_rgba(0,0,0,0.1)]"
+		class="
+		fixed bottom-[5dvh] z-20 w-full max-w-2xl p-4 pt-2 shadow-[0_-10px_20px_-5px_rgba(0,0,0,0.1)]
+		"
 	>
 		<Tabs
 			tabs={['style', 'moderation', 'advanced']}

src/components/Tabs.svelte

···
 </script>
 
 <div class="flex rounded border-x-3 border-b-3 border-(--nucleus-accent)/20">
-	{#each tabs as tab, idx (tab)}
+	{#each tabs as tab (tab)}
 		{@const isActive = activeTab === tab}
 		<button
 			onclick={() => onTabChange(tab)}

src/lib/at/client.ts

···
 	ComAtprotoRepoGetRecord,
 	ComAtprotoRepoListRecords
 } from '@atcute/atproto';
-import { Client as AtcuteClient } from '@atcute/client';
+import { Client as AtcuteClient, simpleFetchHandler } from '@atcute/client';
 import { safeParse, type Handle, type InferOutput } from '@atcute/lexicons';
 import {
 	isDid,
···
 import { MiniDocQuery, type MiniDoc } from './slingshot';
 import { BacklinksQuery, type Backlinks, type BacklinksSource } from './constellation';
 import type { Records } from '@atcute/lexicons/ambient';
-import { PersistedLRU } from '$lib/cache';
+import { cache as rawCache } from '$lib/cache';
 import { AppBskyActorProfile } from '@atcute/bluesky';
 import { WebSocket } from '@soffinal/websocket';
 import type { Notification } from './stardust';
 import { get } from 'svelte/store';
 import { settings } from '$lib/settings';
 import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
-// import { JetstreamSubscription } from '@atcute/jetstream';
-
-const cacheTtl = 1000 * 60 * 60 * 24;
-export const handleCache = new PersistedLRU<Handle, AtprotoDid>({
-	max: 1000,
-	ttl: cacheTtl,
-	prefix: 'handle'
-});
-export const didDocCache = new PersistedLRU<ActorIdentifier, MiniDoc>({
-	max: 1000,
-	ttl: cacheTtl,
-	prefix: 'didDoc'
-});
-export const recordCache = new PersistedLRU<
-	string,
-	InferOutput<typeof ComAtprotoRepoGetRecord.mainSchema.output.schema>
->({
-	max: 5000,
-	ttl: cacheTtl,
-	prefix: 'record'
-});
 
 export const slingshotUrl: URL = new URL(get(settings).endpoints.slingshot);
 export const spacedustUrl: URL = new URL(get(settings).endpoints.spacedust);
 export const constellationUrl: URL = new URL(get(settings).endpoints.constellation);
 
-type NotificationsStreamEncoder = WebSocket.Encoder<undefined, Notification>;
-export type NotificationsStream = WebSocket<NotificationsStreamEncoder>;
-export type NotificationsStreamEvent = WebSocket.Event<NotificationsStreamEncoder>;
+export type RecordOutput<Output> = { uri: ResourceUri; cid: Cid | undefined; record: Output };
+
+const cacheWithHandles = rawCache.define(
+	'resolveHandle',
+	async (handle: Handle): Promise<AtprotoDid> => {
+		const res = await fetchMicrocosm(slingshotUrl, ComAtprotoIdentityResolveHandle.mainSchema, {
+			handle
+		});
+		if (!res.ok) throw new Error(res.error);
+		return res.value.did as AtprotoDid;
+	}
+);
 
-export type RecordOutput<Output> = { uri: ResourceUri; cid: Cid | undefined; record: Output };
+const cacheWithDidDocs = cacheWithHandles.define(
+	'resolveDidDoc',
+	async (identifier: ActorIdentifier): Promise<MiniDoc> => {
+		const res = await fetchMicrocosm(slingshotUrl, MiniDocQuery, {
+			identifier
+		});
+		if (!res.ok) throw new Error(res.error);
+		return res.value;
+	}
+);
+
+const cacheWithRecords = cacheWithDidDocs.define('fetchRecord', async (uri: ResourceUri) => {
+	const parsedUri = parseResourceUri(uri);
+	if (!parsedUri.ok) throw new Error(`can't parse resource uri: ${parsedUri.error}`);
+	const { repo, collection, rkey } = parsedUri.value;
+	const res = await fetchMicrocosm(slingshotUrl, ComAtprotoRepoGetRecord.mainSchema, {
+		repo,
+		collection: collection!,
+		rkey: rkey!
+	});
+	if (!res.ok) throw new Error(res.error);
+	return res.value;
+});
+
+const cache = cacheWithRecords;
 
 export class AtpClient {
 	public atcute: AtcuteClient | null = null;
···
 		rkey: RecordKey
 	): Promise<Result<RecordOutput<Output>, string>> {
 		const collection = schema.object.shape.$type.expected;
-		const cacheKey = `${repo}:${collection}:${rkey}`;
 
-		const cached = recordCache.get(cacheKey);
-		if (cached) return ok({ uri: cached.uri, cid: cached.cid, record: cached.value as Output });
-		const cachedSignal = recordCache.getSignal(cacheKey);
-
-		const result = await Promise.race([
-			fetchMicrocosm(slingshotUrl, ComAtprotoRepoGetRecord.mainSchema, {
-				repo,
-				collection,
-				rkey
-			}).then((result): Result<RecordOutput<Output>, string> => {
-				if (!result.ok) return result;
-
-				const parsed = safeParse(schema, result.value.value);
-				if (!parsed.ok) return err(parsed.message);
+		try {
+			// Call the cached function
+			const rawValue = await cache.fetchRecord(`at://${repo}/${collection}/${rkey}`);
 
-				recordCache.set(cacheKey, result.value);
+			const parsed = safeParse(schema, rawValue.value);
+			if (!parsed.ok) return err(parsed.message);
 
-				return ok({
-					uri: result.value.uri,
-					cid: result.value.cid,
-					record: parsed.value as Output
-				});
-			}),
-			cachedSignal.then(
-				(d): Result<RecordOutput<Output>, string> =>
-					ok({ uri: d.uri, cid: d.cid, record: d.value as Output })
-			)
-		]);
-
-		if (!result.ok) return result;
-
-		return ok(result.value);
+			return ok({
+				uri: rawValue.uri,
+				cid: rawValue.cid,
+				record: parsed.value as Output
+			});
+		} catch (e) {
+			return err(String(e));
+		}
 	}
 
 	async getProfile(repo?: ActorIdentifier): Promise<Result<AppBskyActorProfile.Main, string>> {
···
 
 	async listRecords<Collection extends keyof Records>(
 		collection: Collection,
-		repo: ActorIdentifier,
 		cursor?: string,
-		limit?: number
+		limit: number = 100
 	): Promise<
 		Result<InferXRPCBodyOutput<(typeof ComAtprotoRepoListRecords.mainSchema)['output']>, string>
 	> {
-		if (!this.atcute) return err('not authenticated');
+		if (!this.atcute || !this.user) return err('not authenticated');
 		const res = await this.atcute.get('com.atproto.repo.listRecords', {
 			params: {
-				repo,
+				repo: this.user.did,
 				collection,
 				cursor,
 				limit
 			}
 		});
 		if (!res.ok) return err(`${res.data.error}: ${res.data.message ?? 'no details'}`);
-		return ok(res.data);
-	}
-
-	async resolveHandle(identifier: ActorIdentifier): Promise<Result<AtprotoDid, string>> {
-		if (isDid(identifier)) return ok(identifier as AtprotoDid);
 
-		const cached = handleCache.get(identifier);
-		if (cached) return ok(cached);
-		const cachedSignal = handleCache.getSignal(identifier);
-
-		const res = await Promise.race([
-			fetchMicrocosm(slingshotUrl, ComAtprotoIdentityResolveHandle.mainSchema, {
-				handle: identifier
-			}),
-			cachedSignal.then((d): Result<{ did: Did }, string> => ok({ did: d }))
-		]);
-
-		const mapped = map(res, (data) => data.did as AtprotoDid);
-
-		if (mapped.ok) handleCache.set(identifier, mapped.value);
-
-		return mapped;
+		for (const record of res.data.records) {
+			await cache.set('fetchRecord', `fetchRecord~${record.uri}`, record, 60 * 60 * 24);
+		}
+		return ok(res.data);
 	}
 
-	async resolveDidDoc(handleOrDid: ActorIdentifier): Promise<Result<MiniDoc, string>> {
-		const cached = didDocCache.get(handleOrDid);
-		if (cached) return ok(cached);
-		const cachedSignal = didDocCache.getSignal(handleOrDid);
+	async listRecordsAll<Collection extends keyof Records>(
+		collection: Collection
+	): Promise<ReturnType<typeof this.listRecords>> {
+		const data: InferXRPCBodyOutput<(typeof ComAtprotoRepoListRecords.mainSchema)['output']> = {
+			records: []
+		};
 
-		const result = await Promise.race([
-			fetchMicrocosm(slingshotUrl, MiniDocQuery, {
-				identifier: handleOrDid
-			}),
-			cachedSignal.then((d): Result<MiniDoc, string> => ok(d))
-		]);
+		let end = false;
+		while (!end) {
+			const res = await this.listRecords(collection, data.cursor);
+			if (!res.ok) return res;
+			data.cursor = res.value.cursor;
+			data.records.push(...res.value.records);
+			end = !res.value.cursor;
+		}
 
-		if (result.ok) didDocCache.set(handleOrDid, result.value);
-
-		return result;
+		return ok(data);
 	}
 
 	async getBacklinksUri(
···
 		repo: ActorIdentifier,
 		collection: Nsid,
 		rkey: RecordKey,
-		source: BacklinksSource
+		source: BacklinksSource,
+		limit?: number
 	): Promise<Result<Backlinks, string>> {
-		const did = await this.resolveHandle(repo);
+		const did = await resolveHandle(repo);
 		if (!did.ok) return err(`cant resolve handle: ${did.error}`);
 
 		const timeout = new Promise<null>((resolve) => setTimeout(() => resolve(null), 2000));
 		const query = fetchMicrocosm(constellationUrl, BacklinksQuery, {
 			subject: `at://${did.value}/${collection}/${rkey}`,
 			source,
-			limit: 100
+			limit: limit || 100
 		});
 
 		const results = await Promise.race([query, timeout]);
···
 
 		return results;
 	}
+}
 
-	streamNotifications(subjects: Did[], ...sources: BacklinksSource[]): NotificationsStream {
-		const url = new URL(spacedustUrl);
-		url.protocol = 'wss:';
-		url.pathname = '/subscribe';
-		const searchParams = [];
-		sources.every((source) => searchParams.push(['wantedSources', source]));
-		subjects.every((subject) => searchParams.push(['wantedSubjectDids', subject]));
-		subjects.every((subject) => searchParams.push(['wantedSubjects', `at://${subject}`]));
-		searchParams.push(['instant', 'true']);
-		url.search = `?${new URLSearchParams(searchParams)}`;
-		// console.log(`streaming notifications: ${url}`);
-		const encoder = WebSocket.getDefaultEncoder<undefined, Notification>();
-		const ws = new WebSocket<typeof encoder>(url.toString(), {
-			encoder
-		});
-		return ws;
+export const newPublicClient = async (ident: ActorIdentifier): Promise<AtpClient> => {
+	const atp = new AtpClient();
+	const didDoc = await resolveDidDoc(ident);
+	if (!didDoc.ok) {
+		console.error('failed to resolve did doc', didDoc.error);
+		return atp;
 	}
+	atp.atcute = new AtcuteClient({ handler: simpleFetchHandler({ service: didDoc.value.pds }) });
+	atp.user = { did: didDoc.value.did, handle: didDoc.value.handle };
+	return atp;
+};
+
+// Wrappers that use the cache
+
+export const resolveHandle = async (
+	identifier: ActorIdentifier
+): Promise<Result<AtprotoDid, string>> => {
+	if (isDid(identifier)) return ok(identifier as AtprotoDid);
+
+	try {
+		const did = await cache.resolveHandle(identifier);
+		return ok(did);
+	} catch (e) {
+		return err(String(e));
+	}
+};
+
+export const resolveDidDoc = async (ident: ActorIdentifier): Promise<Result<MiniDoc, string>> => {
+	try {
+		const doc = await cache.resolveDidDoc(ident);
+		return ok(doc);
+	} catch (e) {
+		return err(String(e));
+	}
+};
 
-	// streamJetstream(subjects: Did[], ...collections: Nsid[]) {
-	// 	return new JetstreamSubscription({
-	// 		url: 'wss://jetstream2.fr.hose.cam',
-	// 		wantedCollections: collections,
-	// 		wantedDids: subjects
-	// 	});
-	// }
-}
+type NotificationsStreamEncoder = WebSocket.Encoder<undefined, Notification>;
+export type NotificationsStream = WebSocket<NotificationsStreamEncoder>;
+export type NotificationsStreamEvent = WebSocket.Event<NotificationsStreamEncoder>;
+
+export const streamNotifications = (
+	subjects: Did[],
+	...sources: BacklinksSource[]
+): NotificationsStream => {
+	const url = new URL(spacedustUrl);
+	url.protocol = 'wss:';
+	url.pathname = '/subscribe';
+	const searchParams = [];
+	sources.every((source) => searchParams.push(['wantedSources', source]));
+	subjects.every((subject) => searchParams.push(['wantedSubjectDids', subject]));
+	subjects.every((subject) => searchParams.push(['wantedSubjects', `at://${subject}`]));
+	searchParams.push(['instant', 'true']);
+	url.search = `?${new URLSearchParams(searchParams)}`;
+	// console.log(`streaming notifications: ${url}`);
+	const encoder = WebSocket.getDefaultEncoder<undefined, Notification>();
+	const ws = new WebSocket<typeof encoder>(url.toString(), {
+		encoder
+	});
+	return ws;
+};
 
 const fetchMicrocosm = async <
 	Schema extends XRPCQueryMetadata,

src/lib/at/fetch.ts

···
 	type Cid,
 	type ResourceUri
 } from '@atcute/lexicons';
-import { recordCache, type AtpClient } from './client';
+import { type AtpClient } from './client';
 import { err, expect, ok, type Result } from '$lib/result';
 import type { Backlinks } from './constellation';
 import { AppBskyFeedPost } from '@atcute/bluesky';
···
 
 export const fetchPostsWithBacklinks = async (
 	client: AtpClient,
-	repo: AtprotoDid,
 	cursor?: string,
 	limit?: number
 ): Promise<Result<{ posts: PostsWithReplyBacklinks; cursor?: string }, string>> => {
-	const recordsList = await client.listRecords('app.bsky.feed.post', repo, cursor, limit);
+	const recordsList = await client.listRecords('app.bsky.feed.post', cursor, limit);
 	if (!recordsList.ok) return err(`can't retrieve posts: ${recordsList.error}`);
 	cursor = recordsList.value.cursor;
 	const records = recordsList.value.records;
···
 	try {
 		const allBacklinks = await Promise.all(
 			records.map(async (r): Promise<PostWithBacklinks> => {
-				recordCache.set(r.uri, r);
 				const replies = await client.getBacklinksUri(r.uri, replySource);
 				if (!replies.ok) throw `cant fetch replies: ${replies.error}`;
 				return {

src/lib/cache.ts

···
-import { Cache, type CacheOptions } from '@wora/cache-persist';
-import { LRUCache } from 'lru-cache';
+import { createCache } from 'async-cache-dedupe';
+
+const DB_NAME = 'nucleus-cache';
+const STORE_NAME = 'keyvalue';
+const DB_VERSION = 1;
+
+type WriteOp =
+	| {
+			type: 'put';
+			key: string;
+			value: { value: unknown; expires: number };
+			resolve: () => void;
+			reject: (err: unknown) => void;
+	  }
+	| { type: 'delete'; key: string; resolve: () => void; reject: (err: unknown) => void };
+type ReadOp = {
+	key: string;
+	resolve: (val: unknown) => void;
+	reject: (err: unknown) => void;
+};
+
+class IDBStorage {
+	private dbPromise: Promise<IDBDatabase> | null = null;
+
+	private getBatch: ReadOp[] = [];
+	private writeBatch: WriteOp[] = [];
+
+	private getFlushScheduled = false;
+	private writeFlushScheduled = false;
+
+	constructor() {
+		if (typeof indexedDB === 'undefined') {
+			return;
+		}
+
+		this.dbPromise = new Promise((resolve, reject) => {
+			const request = indexedDB.open(DB_NAME, DB_VERSION);
 
-export interface PersistedLRUOptions {
-	prefix?: string;
-	max: number;
-	ttl?: number;
-	persistOptions?: CacheOptions;
-}
+			request.onerror = () => {
+				console.error('IDB open error:', request.error);
+				reject(request.error);
+			};
 
-interface PersistedEntry<V> {
-	value: V;
-	addedAt: number;
-}
+			request.onsuccess = () => resolve(request.result);
+
+			request.onupgradeneeded = (event) => {
+				const db = (event.target as IDBOpenDBRequest).result;
+				if (!db.objectStoreNames.contains(STORE_NAME)) {
+					db.createObjectStore(STORE_NAME);
+				}
+			};
+		});
+	}
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export class PersistedLRU<K extends string, V extends {}> {
-	private memory: LRUCache<K, V>;
-	private storage: Cache;
-	private signals: Map<K, ((data: V) => void)[]>;
+	async get(key: string): Promise<unknown> {
+		// checking in-flight writes
+		for (let i = this.writeBatch.length - 1; i >= 0; i--) {
+			const op = this.writeBatch[i];
+			if (op.key === key) {
+				if (op.type === 'delete') return undefined;
+				if (op.type === 'put') {
+					// if expired we dont want it
+					if (op.value.expires < Date.now()) return undefined;
+					return op.value.value;
+				}
+			}
+		}
 
-	private prefix = '';
+		if (!this.dbPromise) return undefined;
 
-	constructor(opts: PersistedLRUOptions) {
-		this.memory = new LRUCache<K, V>({
-			max: opts.max,
-			ttl: opts.ttl
+		return new Promise((resolve, reject) => {
+			this.getBatch.push({ key, resolve, reject });
+			this.scheduleGetFlush();
 		});
-		this.storage = new Cache(opts.persistOptions);
-		this.prefix = opts.prefix ? `${opts.prefix}%` : '';
-		this.signals = new Map();
+	}
 
-		this.init();
+	private scheduleGetFlush() {
+		if (this.getFlushScheduled) return;
+		this.getFlushScheduled = true;
+		queueMicrotask(() => this.flushGetBatch());
 	}
 
-	async init(): Promise<void> {
-		await this.storage.restore();
+	private async flushGetBatch() {
+		this.getFlushScheduled = false;
+		const batch = this.getBatch;
+		this.getBatch = [];
 
-		const state = this.storage.getState();
-		for (const [key, val] of Object.entries(state)) {
-			try {
-				const k = this.unprefix(key) as unknown as K;
+		if (batch.length === 0) return;
+
+		try {
+			const db = await this.dbPromise;
+			if (!db) throw new Error('DB not available');
 
-				if (this.isPersistedEntry(val)) {
-					const entry = val as PersistedEntry<V>;
-					this.memory.set(k, entry.value, { start: entry.addedAt });
-				} else {
-					// Handle legacy data (before this update)
-					this.memory.set(k, val as V);
+			const transaction = db.transaction(STORE_NAME, 'readonly');
+			const store = transaction.objectStore(STORE_NAME);
+
+			batch.forEach(({ key, resolve }) => {
+				try {
+					const request = store.get(key);
+					request.onsuccess = () => {
+						const result = request.result;
+						if (!result) {
+							resolve(undefined);
+							return;
+						}
+						if (result.expires < Date.now()) {
+							// Fire-and-forget removal for expired items
+							this.remove(key).catch(() => {});
+							resolve(undefined);
+							return;
+						}
+						resolve(result.value);
+					};
+					request.onerror = () => resolve(undefined);
+				} catch {
+					resolve(undefined);
 				}
-			} catch (err) {
-				console.warn('skipping invalid persisted entry', key, err);
-			}
+			});
+		} catch (error) {
+			batch.forEach(({ reject }) => reject(error));
 		}
 	}
 
-	get(key: K): V | undefined {
-		return this.memory.get(key);
+	async set(key: string, value: unknown, ttl: number): Promise<void> {
+		if (!this.dbPromise) return;
+
+		const expires = Date.now() + ttl * 1000;
+		const storageValue = { value, expires };
+
+		return new Promise((resolve, reject) => {
+			this.writeBatch.push({ type: 'put', key, value: storageValue, resolve, reject });
+			this.scheduleWriteFlush();
+		});
 	}
 
-	getSignal(key: K): Promise<V> {
-		return new Promise<V>((resolve) => {
-			if (!this.signals.has(key)) {
-				this.signals.set(key, [resolve]);
-				return;
-			}
-			const signals = this.signals.get(key)!;
-			signals.push(resolve);
-			this.signals.set(key, signals);
+	async remove(key: string): Promise<void> {
+		if (!this.dbPromise) return;
+
+		return new Promise((resolve, reject) => {
+			this.writeBatch.push({ type: 'delete', key, resolve, reject });
+			this.scheduleWriteFlush();
 		});
 	}
 
-	set(key: K, value: V): void {
-		const addedAt = performance.now();
-		this.memory.set(key, value, { start: addedAt });
+	private scheduleWriteFlush() {
+		if (this.writeFlushScheduled) return;
+		this.writeFlushScheduled = true;
+		queueMicrotask(() => this.flushWriteBatch());
+	}
+
+	private async flushWriteBatch() {
+		this.writeFlushScheduled = false;
+		const batch = this.writeBatch;
+		this.writeBatch = [];
+
+		if (batch.length === 0) return;
+
+		try {
+			const db = await this.dbPromise;
+			if (!db) throw new Error('DB not available');
 
-		const entry: PersistedEntry<V> = { value, addedAt };
-		this.storage.set(this.prefixed(key), entry);
+			const transaction = db.transaction(STORE_NAME, 'readwrite');
+			const store = transaction.objectStore(STORE_NAME);
 
-		const signals = this.signals.get(key);
-		let signal = signals?.pop();
-		while (signal) {
-			signal(value);
-			signal = signals?.pop();
+			batch.forEach((op) => {
+				try {
+					let request: IDBRequest;
+					if (op.type === 'put') {
+						request = store.put(op.value, op.key);
+					} else {
+						request = store.delete(op.key);
+					}
+
+					request.onsuccess = () => op.resolve();
+					request.onerror = () => op.reject(request.error);
+				} catch (err) {
+					op.reject(err);
+				}
+			});
+		} catch (error) {
+			batch.forEach(({ reject }) => reject(error));
 		}
-		this.storage.flush();
 	}
 
-	has(key: K): boolean {
-		return this.memory.has(key);
-	}
+	async clear(): Promise<void> {
+		if (!this.dbPromise) return;
+		try {
+			const db = await this.dbPromise;
+			return new Promise<void>((resolve, reject) => {
+				const transaction = db.transaction(STORE_NAME, 'readwrite');
+				const store = transaction.objectStore(STORE_NAME);
+				const request = store.clear();
 
-	delete(key: K): void {
-		this.memory.delete(key);
-		this.storage.delete(this.prefixed(key));
-		this.storage.flush();
+				request.onerror = () => reject(request.error);
+				request.onsuccess = () => resolve();
+			});
+		} catch (e) {
+			console.error('IDB clear error', e);
+		}
 	}
 
-	clear(): void {
-		this.memory.clear();
-		this.storage.purge();
-		this.storage.flush();
+	async exists(key: string): Promise<boolean> {
+		return (await this.get(key)) !== undefined;
 	}
 
-	private prefixed(key: K): string {
-		return this.prefix + key;
+	async invalidate(key: string): Promise<void> {
+		return this.remove(key);
 	}
 
-	private unprefix(prefixed: string): string {
-		return prefixed.slice(this.prefix.length);
+	// noops
+	async getTTL(key: string): Promise<void> {
+		return;
 	}
-
-	// Type guard to check if data is our new PersistedEntry format
-	private isPersistedEntry(data: unknown): data is PersistedEntry<V> {
-		return (
-			data !== null &&
-			typeof data === 'object' &&
-			'value' in data &&
-			'addedAt' in data &&
-			typeof data.addedAt === 'number'
-		);
+	async refresh(): Promise<void> {
+		return;
 	}
 }
+
+export const cache = createCache({
+	storage: {
+		type: 'custom',
+		options: {
+			storage: new IDBStorage()
+		}
+	},
+	ttl: 60 * 60 * 24, // 24 hours
+	onError: (err) => console.error(err)
+});

src/lib/date.ts

···
+export const getRelativeTime = (date: Date) => {
+	const now = new Date();
+	const diff = now.getTime() - date.getTime();
+	const seconds = Math.floor(diff / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const months = Math.floor(days / 30);
+	const years = Math.floor(months / 12);
+
+	if (years > 0) return `${years}y`;
+	if (months > 0) return `${months}m`;
+	if (days > 0) return `${days}d`;
+	if (hours > 0) return `${hours}h`;
+	if (minutes > 0) return `${minutes}m`;
+	if (seconds > 0) return `${seconds}s`;
+	return 'now';
+};

src/lib/richtext/index.ts

···
 import RichtextBuilder, { type BakedRichtext } from '@atcute/bluesky-richtext-builder';
 import { tokenize, type Token } from '$lib/richtext/parser';
 import type { Did, GenericUri, Handle } from '@atcute/lexicons';
-import type { AtpClient } from '$lib/at/client';
+import { resolveHandle } from '$lib/at/client';
 
-export const parseToRichText = (
-	client: AtpClient,
-	text: string
-): ReturnType<typeof processTokens> => {
-	const tokens = tokenize(text);
-	return processTokens(client, tokens);
-};
+export const parseToRichText = (text: string): ReturnType<typeof processTokens> =>
+	processTokens(tokenize(text));
 
-const processTokens = async (client: AtpClient, tokens: Token[]): Promise<BakedRichtext> => {
+const processTokens = async (tokens: Token[]): Promise<BakedRichtext> => {
 	const rt = new RichtextBuilder();
 
 	for (const token of tokens) {
···
 				let did: Did | undefined = token.did as Did | undefined;
 				if (!did) {
 					const handle = token.handle as Handle;
-					const result = await client.resolveHandle(handle);
+					const result = await resolveHandle(handle);
 					if (result.ok) did = result.value;
 				}
 				if (did) rt.addMention(token.raw, did);

src/lib/settings.ts

···
 	slingshot: string;
 	spacedust: string;
 	constellation: string;
+	jetstream: string;
 };
 export type Settings = {
 	endpoints: ApiEndpoints;
···
 	endpoints: {
 		slingshot: 'https://slingshot.microcosm.blue',
 		spacedust: 'https://spacedust.microcosm.blue',
-		constellation: 'https://constellation.microcosm.blue'
+		constellation: 'https://constellation.microcosm.blue',
+		jetstream: 'wss://jetstream2.fr.hose.cam'
 	},
 	theme: defaultTheme,
 	socialAppUrl: 'https://bsky.app'
···
 	const stored = localStorage.getItem('settings');
 
 	const initial: Partial<Settings> = stored ? JSON.parse(stored) : defaultSettings;
-	initial.endpoints = initial.endpoints ?? defaultSettings.endpoints;
-	initial.theme = initial.theme ?? defaultSettings.theme;
+	initial.endpoints = { ...defaultSettings.endpoints, ...initial.endpoints };
+	initial.theme = { ...defaultSettings.theme, ...initial.theme };
 	initial.socialAppUrl = initial.socialAppUrl ?? defaultSettings.socialAppUrl;
 
 	const { subscribe, set, update } = writable<Settings>(initial as Settings);
···
 	return (
 		current.endpoints.slingshot !== other.endpoints.slingshot ||
 		current.endpoints.spacedust !== other.endpoints.spacedust ||
-		current.endpoints.constellation !== other.endpoints.constellation
+		current.endpoints.constellation !== other.endpoints.constellation ||
+		current.endpoints.jetstream !== other.endpoints.jetstream
 	);
 };

src/lib/state.svelte.ts

···
 import { writable } from 'svelte/store';
-import { AtpClient, type NotificationsStream } from './at/client';
+import { AtpClient, newPublicClient, type NotificationsStream } from './at/client';
 import { SvelteMap } from 'svelte/reactivity';
-import type { Did, ResourceUri } from '@atcute/lexicons';
+import type { Did, InferOutput, ResourceUri } from '@atcute/lexicons';
 import type { Backlink } from './at/constellation';
-import type { PostWithUri } from './at/fetch';
+import { fetchPostsWithBacklinks, hydratePosts, type PostWithUri } from './at/fetch';
 import type { AtprotoDid } from '@atcute/lexicons/syntax';
-// import type { JetstreamSubscription } from '@atcute/jetstream';
+import { AppBskyFeedPost, type AppBskyGraphFollow } from '@atcute/bluesky';
+import type { ComAtprotoRepoListRecords } from '@atcute/atproto';
+import type { JetstreamSubscription, JetstreamEvent } from '@atcute/jetstream';
 
 export const notificationStream = writable<NotificationsStream | null>(null);
-// export const jetstream = writable<JetstreamSubscription | null>(null);
+export const jetstream = writable<JetstreamSubscription | null>(null);
 
 export type PostActions = {
 	like: Backlink | null;
···
 
 export const viewClient = new AtpClient();
 export const clients = new SvelteMap<AtprotoDid, AtpClient>();
+export const getClient = async (did: AtprotoDid): Promise<AtpClient> => {
+	if (!clients.has(did)) clients.set(did, await newPublicClient(did));
+	return clients.get(did)!;
+};
+
+export const follows = new SvelteMap<Did, SvelteMap<ResourceUri, AppBskyGraphFollow.Main>>();
+
+export const addFollows = (
+	did: Did,
+	followMap: Iterable<[ResourceUri, AppBskyGraphFollow.Main]>
+) => {
+	if (!follows.has(did)) {
+		follows.set(did, new SvelteMap(followMap));
+		return;
+	}
+	const map = follows.get(did)!;
+	for (const [uri, record] of followMap) map.set(uri, record);
+};
+
+export const fetchFollows = async (did: AtprotoDid) => {
+	const client = await getClient(did);
+	const res = await client.listRecordsAll('app.bsky.graph.follow');
+	if (!res.ok) return;
+	addFollows(
+		did,
+		res.value.records.map((follow) => [follow.uri, follow.value as AppBskyGraphFollow.Main])
+	);
+};
+
+export const fetchFollowPosts = async (did: AtprotoDid) => {
+	const client = await getClient(did);
+	const res = await client.listRecords('app.bsky.feed.post');
+	if (!res.ok) return;
+	addPostsRaw(did, res.value);
+};
 
 export const posts = new SvelteMap<Did, SvelteMap<ResourceUri, PostWithUri>>();
 export const cursors = new SvelteMap<Did, { value?: string; end: boolean }>();
+
+export const addPostsRaw = (
+	did: Did,
+	_posts: InferOutput<ComAtprotoRepoListRecords.mainSchema['output']['schema']>
+) => {
+	const postsWithUri = new SvelteMap(
+		_posts.records.map((post) => [
+			post.uri,
+			{ cid: post.cid, uri: post.uri, record: post.value as AppBskyFeedPost.Main } as PostWithUri
+		])
+	);
+	addPosts(did, postsWithUri);
+	cursors.set(did, { value: _posts.cursor, end: _posts.cursor === undefined });
+};
+
+export const addPosts = (did: Did, _posts: Iterable<[ResourceUri, PostWithUri]>) => {
+	if (!posts.has(did)) {
+		posts.set(did, new SvelteMap(_posts));
+		return;
+	}
+	const map = posts.get(did)!;
+	for (const [uri, record] of _posts) map.set(uri, record);
+};
+
+export const fetchTimeline = async (did: AtprotoDid, limit: number = 6) => {
+	const client = await getClient(did);
+
+	const cursor = cursors.get(did);
+	if (cursor && cursor.end) return;
+
+	const accPosts = await fetchPostsWithBacklinks(client, cursor?.value, limit);
+	if (!accPosts.ok) throw `cant fetch posts ${did}: ${accPosts.error}`;
+
+	// if the cursor is undefined, we've reached the end of the timeline
+	if (!accPosts.value.cursor) {
+		cursors.set(did, { ...cursor, end: true });
+		return;
+	}
+
+	cursors.set(did, { value: accPosts.value.cursor, end: false });
+	const hydrated = await hydratePosts(client, did, accPosts.value.posts);
+	if (!hydrated.ok) throw `cant hydrate posts ${did}: ${hydrated.error}`;
+
+	addPosts(did, hydrated.value);
+};
+
+export const handleJetstreamEvent = (event: JetstreamEvent) => {
+	if (event.kind !== 'commit') return;
+
+	const { did, commit } = event;
+	if (commit.collection !== 'app.bsky.feed.post') return;
+
+	const uri: ResourceUri = `at://${did}/${commit.collection}/${commit.rkey}`;
+
+	if (commit.operation === 'create') {
+		const { cid, record } = commit;
+
+		const post: PostWithUri = {
+			uri,
+			cid,
+			// assume record is valid, we trust the jetstream
+			record: record as AppBskyFeedPost.Main
+		};
+
+		addPosts(did, [[uri, post]]);
+	} else if (commit.operation === 'delete') {
+		if (posts.has(did)) {
+			posts.get(did)?.delete(uri);
+		}
+	}
+};

src/lib/thread.ts

···
 	branchParentPost?: ThreadPost;
 };
 
-export const buildThreads = (timelines: Map<Did, Map<ResourceUri, PostWithUri>>): Thread[] => {
+export const buildThreads = (
+	accounts: Did[],
+	posts: Map<Did, Map<ResourceUri, PostWithUri>>
+): Thread[] => {
 	const threadMap = new Map<ResourceUri, ThreadPost[]>();
 
 	// group posts by root uri into "thread" chains
-	for (const [account, timeline] of timelines) {
+	for (const account of accounts) {
+		const timeline = posts.get(account);
+		if (!timeline) continue;
 		for (const [uri, data] of timeline) {
 			const parsedUri = expect(parseCanonicalResourceUri(uri));
 			const rootUri = (data.record.reply?.root.uri as ResourceUri) || uri;

src/routes/+page.svelte

···
 	import AccountSelector from '$components/AccountSelector.svelte';
 	import SettingsView from '$components/SettingsView.svelte';
 	import NotificationsView from '$components/NotificationsView.svelte';
-	import { AtpClient, type NotificationsStreamEvent } from '$lib/at/client';
-	import { accounts, generateColorForDid, type Account } from '$lib/accounts';
-	import { type Did, parseCanonicalResourceUri, type ResourceUri } from '@atcute/lexicons';
+	import FollowingView from '$components/FollowingView.svelte';
+	import { AtpClient, streamNotifications, type NotificationsStreamEvent } from '$lib/at/client';
+	import { accounts, type Account } from '$lib/accounts';
+	import { parseCanonicalResourceUri, type ResourceUri } from '@atcute/lexicons';
 	import { onMount, tick } from 'svelte';
-	import { fetchPostsWithBacklinks, hydratePosts, type PostWithUri } from '$lib/at/fetch';
+	import { hydratePosts } from '$lib/at/fetch';
 	import { expect } from '$lib/result';
 	import { AppBskyFeedPost } from '@atcute/bluesky';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { InfiniteLoader, LoaderState } from 'svelte-infinite';
-	import { clients, cursors, notificationStream, posts, viewClient } from '$lib/state.svelte';
+	import {
+		addPosts,
+		clients,
+		cursors,
+		fetchFollowPosts,
+		fetchFollows,
+		fetchTimeline,
+		follows,
+		getClient,
+		notificationStream,
+		posts,
+		viewClient,
+		jetstream,
+		handleJetstreamEvent
+	} from '$lib/state.svelte';
 	import { get } from 'svelte/store';
 	import Icon from '@iconify/svelte';
 	import { sessions } from '$lib/at/oauth';
-	import type { AtprotoDid } from '@atcute/lexicons/syntax';
+	import type { AtprotoDid, Did } from '@atcute/lexicons/syntax';
 	import type { PageProps } from './+page';
 	import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
+	import { JetstreamSubscription } from '@atcute/jetstream';
+	import { settings } from '$lib/settings';
 
 	const { data: loadData }: PageProps = $props();
 
 	// svelte-ignore state_referenced_locally
 	let errors = $state(loadData.client.ok ? [] : [loadData.client.error]);
 	let errorsOpen = $state(false);
-
 	let selectedDid = $state((localStorage.getItem('selectedDid') ?? null) as AtprotoDid | null);
 	$effect(() => {
-		if (selectedDid) {
-			localStorage.setItem('selectedDid', selectedDid);
-		} else {
-			localStorage.removeItem('selectedDid');
-		}
+		if (selectedDid) localStorage.setItem('selectedDid', selectedDid);
+		else localStorage.removeItem('selectedDid');
 	});
-
 	const selectedClient = $derived(selectedDid ? clients.get(selectedDid) : null);
 
 	const loginAccount = async (account: Account) => {
···
 		}
 		clients.set(account.did, client);
 	};
-
 	const handleAccountSelected = async (did: AtprotoDid) => {
 		selectedDid = did;
 		const account = $accounts.find((acc) => acc.did === did);
···
 		handleAccountSelected(newAccounts[0]?.did);
 	};
 
-	type View = 'timeline' | 'notifications' | 'settings';
+	type View = 'timeline' | 'notifications' | 'following' | 'settings';
 	let currentView = $state<View>('timeline');
 	let animClass = $state('animate-fade-in-scale');
-	let timelineScrollPosition = $state(0);
+	let scrollPositions = new SvelteMap<View, number>();
 
 	const viewOrder: Record<View, number> = {
 		timeline: 0,
-		notifications: 1,
-		settings: 2
+		following: 1,
+		notifications: 2,
+		settings: 3
 	};
 
 	const switchView = async (newView: View) => {
 		if (currentView === newView) return;
-		if (currentView === 'timeline') timelineScrollPosition = window.scrollY;
+		scrollPositions.set(currentView, window.scrollY);
 
 		const direction = viewOrder[newView] > viewOrder[currentView] ? 'right' : 'left';
 		animClass = direction === 'right' ? 'animate-slide-in-right' : 'animate-slide-in-left';
···
 
 		await tick();
 
-		if (newView !== 'timeline') window.scrollTo({ top: 0, behavior: 'instant' });
-		else window.scrollTo({ top: timelineScrollPosition, behavior: 'instant' });
+		window.scrollTo({ top: scrollPositions.get(newView) || 0, behavior: 'instant' });
 	};
-
 	let reverseChronological = $state(true);
 	let viewOwnPosts = $state(true);
 
-	const threads = $derived(filterThreads(buildThreads(posts), $accounts, { viewOwnPosts }));
-
+	const threads = $derived(
+		filterThreads(
+			buildThreads(
+				$accounts.map((account) => account.did),
+				posts
+			),
+			$accounts,
+			{ viewOwnPosts }
+		)
+	);
 	let postComposerState = $state<PostComposerState>({ type: 'null' });
 
 	const expandedThreads = new SvelteSet<ResourceUri>();
 
-	const addPosts = (did: Did, accTimeline: Map<ResourceUri, PostWithUri>) => {
-		if (!posts.has(did)) {
-			posts.set(did, new SvelteMap(accTimeline));
-			return;
-		}
-		const map = posts.get(did)!;
-		for (const [uri, record] of accTimeline) map.set(uri, record);
-	};
-
-	const fetchTimeline = async (account: Account) => {
-		const client = clients.get(account.did);
-		if (!client) return;
-
-		const cursor = cursors.get(account.did);
-		if (cursor && cursor.end) return;
-
-		const accPosts = await fetchPostsWithBacklinks(client, account.did, cursor?.value, 6);
-		if (!accPosts.ok) throw `cant fetch posts @${account.handle}: ${accPosts.error}`;
-
-		// if the cursor is undefined, we've reached the end of the timeline
-		if (!accPosts.value.cursor) {
-			cursors.set(account.did, { ...cursor, end: true });
-			return;
-		}
-
-		cursors.set(account.did, { value: accPosts.value.cursor, end: false });
-		const hydrated = await hydratePosts(client, account.did, accPosts.value.posts);
-		if (!hydrated.ok) throw `cant hydrate posts @${account.handle}: ${hydrated.error}`;
-
-		addPosts(account.did, hydrated.value);
-	};
-
-	const fetchTimelines = (newAccounts: Account[]) => Promise.all(newAccounts.map(fetchTimeline));
+	const fetchTimelines = (newAccounts: Account[]) =>
+		Promise.all(newAccounts.map((acc) => fetchTimeline(acc.did)));
 
 	const handleNotification = async (event: NotificationsStreamEvent) => {
 		if (event.type === 'message') {
-			// console.log(event.data);
 			const parsedSubjectUri = expect(parseCanonicalResourceUri(event.data.link.subject));
-			const subjectPost = await viewClient.getRecord(
+			const did = parsedSubjectUri.repo as AtprotoDid;
+			const client = await getClient(did);
+			const subjectPost = await client.getRecord(
 				AppBskyFeedPost.mainSchema,
-				parsedSubjectUri.repo,
+				did,
 				parsedSubjectUri.rkey
 			);
 			if (!subjectPost.ok) return;
 
 			const parsedSourceUri = expect(parseCanonicalResourceUri(event.data.link.source_record));
-			const hydrated = await hydratePosts(viewClient, parsedSubjectUri.repo as AtprotoDid, [
+			const hydrated = await hydratePosts(client, did, [
 				{
 					record: subjectPost.value.record,
 					uri: event.data.link.subject,
···
 					}
 				}
 			]);
-
 			if (!hydrated.ok) {
-				errors.push(`cant hydrate posts @${parsedSubjectUri.repo}: ${hydrated.error}`);
+				errors.push(`cant hydrate posts ${did}: ${hydrated.error}`);
 				return;
 			}
 
 			// console.log(hydrated);
-			addPosts(parsedSubjectUri.repo, hydrated.value);
+			addPosts(did, hydrated.value);
 		}
 	};
 
···
 	const handleScroll = () => {
 		if (currentView === 'timeline') showScrollToTop = window.scrollY > 300;
 	};
-
 	const scrollToTop = () => {
 		window.scrollTo({ top: 0, behavior: 'smooth' });
 	};
···
 			// jetstream.set(null);
 			if (newAccounts.length === 0) return;
 			notificationStream.set(
-				viewClient.streamNotifications(
+				streamNotifications(
 					newAccounts.map((account) => account.did),
-					'app.bsky.feed.post:reply.parent.uri'
+					'app.bsky.feed.post:reply.parent.uri',
+					'app.bsky.feed.post:embed.record.record.uri',
+					'app.bsky.feed.post:embed.record.uri'
 				)
 			);
 		});
···
 			if (!stream) return;
 			stream.listen(handleNotification);
 		});
+
+		console.log(`creating jetstream subscription to ${$settings.endpoints.jetstream}`);
+		const jetstreamSub = new JetstreamSubscription({
+			url: $settings.endpoints.jetstream,
+			wantedCollections: ['app.bsky.feed.post'],
+			wantedDids: ['did:web:guestbook.gaze.systems'] // initially contain sentinel
+		});
+		jetstream.set(jetstreamSub);
+
+		(async () => {
+			console.log('polling for jetstream...');
+			for await (const event of jetstreamSub) handleJetstreamEvent(event);
+		})();
+
 		if ($accounts.length > 0) {
 			loaderState.status = 'LOADING';
 			if (loadData.client.ok && loadData.client.value) {
···
 				clients.set(loggedInDid, loadData.client.value);
 			}
 			if (!$accounts.some((account) => account.did === selectedDid)) selectedDid = $accounts[0].did;
-			console.log('onMount selectedDid', selectedDid);
+			// console.log('onMount selectedDid', selectedDid);
 			Promise.all($accounts.map(loginAccount)).then(() => {
+				$accounts.forEach((account) =>
+					fetchFollows(account.did).then(() =>
+						follows
+							.get(account.did)
+							?.forEach((follow) => fetchFollowPosts(follow.subject as AtprotoDid))
+					)
+				);
 				loadMore();
 			});
 		} else {
 			selectedDid = null;
 		}
 
-		return () => {
-			window.removeEventListener('scroll', handleScroll);
-		};
+		return () => window.removeEventListener('scroll', handleScroll);
+	});
+
+	$effect(() => {
+		const wantedDids: Did[] = ['did:web:guestbook.gaze.systems'];
+
+		for (const followMap of follows.values())
+			for (const follow of followMap.values()) wantedDids.push(follow.subject);
+		for (const account of $accounts) wantedDids.push(account.did);
+
+		console.log('updating jetstream options:', wantedDids);
+		$jetstream?.updateOptions({ wantedDids });
 	});
 </script>
 
···
 {/snippet}
 
 <div class="mx-auto flex min-h-dvh max-w-2xl flex-col">
-	<!-- Views Container -->
 	<div class="flex-1">
 		<!-- timeline -->
 		<div
 			id="app-thread-list"
-			class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {currentView ===
-			'timeline'
-				? `block ${animClass}`
-				: 'hidden'}"
+			class="
+			min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent]
+			{currentView === 'timeline' ? `${animClass}` : 'hidden'}
+			"
 			bind:this={scrollContainer}
 		>
 			{#if $accounts.length > 0}
···
 				</div>
 			{/if}
 		</div>
-
-		<!-- other views -->
 		{#if currentView === 'settings'}
 			<div class={animClass}>
 				<SettingsView />
 			</div>
-		{:else if currentView === 'notifications'}
+		{/if}
+		{#if currentView === 'notifications'}
 			<div class={animClass}>
 				<NotificationsView />
+			</div>
+		{/if}
+		{#if currentView === 'following'}
+			<div class={animClass}>
+				<FollowingView selectedClient={selectedClient!} selectedDid={selectedDid!} />
 			</div>
 		{/if}
 	</div>
···
 						'timeline',
 						currentView === 'timeline',
 						'heroicons:home-solid'
+					)}
+					{@render appButton(
+						() => switchView('following'),
+						'heroicons:users',
+						'following',
+						currentView === 'following',
+						'heroicons:users-solid'
 					)}
 					{@render appButton(
 						() => switchView('notifications'),