From ecfc9251ecd49128fbe26def3deb8fcc63ee1f1b Mon Sep 17 00:00:00 2001
From: Scott Hadfield <github@scotthadfield.ca>
Date: Sun, 29 Mar 2026 08:56:16 -0700
Subject: [PATCH] Add homepage game discovery and live feed

Redesign homepage with rich game cards showing player handles, status,
move count, and relative time. User's games fetched from Constellation
and deduplicated (challenger's record only. Split into active and
completed sections.

Live feed connects to Jetstream with 2-hour historical cursor to show
active games across the network, visible to all visitors.

Add standalone firehose logger script (npm run firehose) that writes
all game and challenge events to data/firehose.jsonl for future stats.
EOF
)
---
 .gitignore                         |   3 +
 package.json                       |   3 +-
 scripts/firehose-logger.ts         |  70 +++++++++
 src/lib/components/GameCard.svelte |  90 +++++++++++
 src/lib/microcosm.ts               |  11 ++
 src/routes/+page.svelte            | 233 +++++++++++++++++++++++------
 6 files changed, 360 insertions(+), 50 deletions(-)
 create mode 100644 scripts/firehose-logger.ts
 create mode 100644 src/lib/components/GameCard.svelte

diff --git a/.gitignore b/.gitignore
index 3b462cb..51f349b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Firehose logs
+/data
diff --git a/package.json b/package.json
index e9b2e27..ba5dd05 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest run",
-		"test:watch": "vitest"
+		"test:watch": "vitest",
+		"firehose": "npx tsx scripts/firehose-logger.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.10",
diff --git a/scripts/firehose-logger.ts b/scripts/firehose-logger.ts
new file mode 100644
index 0000000..4a772aa
--- /dev/null
+++ b/scripts/firehose-logger.ts
@@ -0,0 +1,70 @@
+import { createWriteStream } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { mkdir } from 'fs/promises';
+
+const JETSTREAM_URL = 'wss://jetstream2.us-east.bsky.network/subscribe';
+const COLLECTIONS = ['blue.checkmate.game', 'blue.checkmate.challenge'];
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const logDir = join(__dirname, '..', 'data');
+const logFile = join(logDir, 'firehose.jsonl');
+
+await mkdir(logDir, { recursive: true });
+const stream = createWriteStream(logFile, { flags: 'a' });
+
+let cursor: number | null = null;
+let reconnectAttempts = 0;
+
+function connect() {
+	const url = new URL(JETSTREAM_URL);
+	for (const c of COLLECTIONS) {
+		url.searchParams.append('wantedCollections', c);
+	}
+	if (cursor) url.searchParams.set('cursor', String(cursor));
+
+	console.log(`[firehose] connecting...${cursor ? ` (cursor: ${cursor})` : ''}`);
+	const ws = new WebSocket(url.toString());
+
+	ws.onopen = () => {
+		console.log('[firehose] connected');
+		reconnectAttempts = 0;
+	};
+
+	ws.onmessage = (event) => {
+		const data = JSON.parse(String(event.data));
+		if (data.time_us) cursor = data.time_us;
+		if (data.kind !== 'commit') return;
+
+		const line = JSON.stringify({
+			time: new Date().toISOString(),
+			time_us: data.time_us,
+			did: data.did,
+			operation: data.commit.operation,
+			collection: data.commit.collection,
+			rkey: data.commit.rkey,
+			record: data.commit.record ?? null,
+		});
+
+		stream.write(line + '\n');
+		console.log(
+			`[firehose] ${data.commit.operation} ${data.commit.collection} ${data.did.slice(0, 24)}...`
+		);
+	};
+
+	ws.onclose = (event: CloseEvent) => {
+		console.log(`[firehose] disconnected: ${event.code} ${event.reason}`);
+		const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30_000);
+		reconnectAttempts++;
+		console.log(`[firehose] reconnecting in ${delay}ms...`);
+		setTimeout(connect, delay);
+	};
+
+	ws.onerror = () => {
+		ws.close();
+	};
+}
+
+console.log(`[firehose] logging to ${logFile}`);
+console.log(`[firehose] watching: ${COLLECTIONS.join(', ')}`);
+connect();
diff --git a/src/lib/components/GameCard.svelte b/src/lib/components/GameCard.svelte
new file mode 100644
index 0000000..f203ded
--- /dev/null
+++ b/src/lib/components/GameCard.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { Chess } from 'chess.js';
+	import { resolveHandle } from '$lib/microcosm';
+	import type { GameRecord } from '$lib/types';
+
+	type Props = {
+		did: string;
+		rkey: string;
+		record: GameRecord;
+		timestamp?: number;
+	};
+
+	let { did, rkey, record, timestamp }: Props = $props();
+
+	let whiteHandle = $state('...');
+	let blackHandle = $state('...');
+
+	let pgnInfo = $derived.by(() => {
+		const chess = new Chess();
+		if (record.pgn) {
+			try { chess.loadPgn(record.pgn); } catch { /* empty pgn is fine */ }
+		}
+		return {
+			moveCount: Math.ceil(chess.history().length / 2),
+			turn: chess.turn() === 'w' ? 'White' : 'Black',
+		};
+	});
+
+	$effect(() => {
+		if (record.white) resolveHandle(record.white).then((h) => (whiteHandle = h));
+		else whiteHandle = '?';
+		if (record.black) resolveHandle(record.black).then((h) => (blackHandle = h));
+		else blackHandle = '?';
+	});
+
+	function statusText(): string {
+		switch (record.status) {
+			case 'waiting':
+				return 'Waiting for opponent';
+			case 'active':
+				return `${pgnInfo.turn} to move \u2013 ${pgnInfo.moveCount} move${pgnInfo.moveCount !== 1 ? 's' : ''}`;
+			case 'completed':
+				return resultText();
+			case 'abandoned':
+				return 'Abandoned';
+			default:
+				return record.status;
+		}
+	}
+
+	function resultText(): string {
+		const reason = record.resultReason?.replace('_', ' ');
+		if (record.result === '1-0') return `White wins${reason ? ` by ${reason}` : ''}`;
+		if (record.result === '0-1') return `Black wins${reason ? ` by ${reason}` : ''}`;
+		if (record.result === '1/2-1/2') return `Draw${reason ? ` \u2013 ${reason}` : ''}`;
+		return 'Completed';
+	}
+
+	function timeAgo(ts?: number | string): string {
+		if (!ts) return '';
+		const ms = typeof ts === 'number' ? ts : new Date(ts).getTime();
+		const seconds = Math.floor((Date.now() - ms) / 1000);
+		if (seconds < 60) return 'just now';
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		return `${Math.floor(seconds / 86400)}d ago`;
+	}
+</script>
+
+<a
+	href="/game/{did}/{rkey}"
+	class="block rounded-lg border border-border bg-bg-secondary px-4 py-3 transition-colors hover:border-accent-blue"
+>
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-2 text-sm">
+			<span class="font-medium">{whiteHandle}</span>
+			<span class="text-text-secondary">vs</span>
+			<span class="font-medium">{blackHandle}</span>
+		</div>
+		{#if record.status === 'active'}
+			<span class="rounded-full bg-success/20 px-2 py-0.5 text-xs text-success">Live</span>
+		{:else if record.status === 'waiting'}
+			<span class="rounded-full bg-warning/20 px-2 py-0.5 text-xs text-warning">Waiting</span>
+		{/if}
+	</div>
+	<div class="mt-1 flex items-center justify-between text-xs text-text-secondary">
+		<span>{statusText()}</span>
+		<span>{timeAgo(timestamp ?? record.createdAt)}</span>
+	</div>
+</a>
diff --git a/src/lib/microcosm.ts b/src/lib/microcosm.ts
index a5cf303..5a7219e 100644
--- a/src/lib/microcosm.ts
+++ b/src/lib/microcosm.ts
@@ -33,3 +33,14 @@ export async function resolveIdentity(identifier: string): Promise<SlingshotProf
 	if (!response.ok) return null;
 	return response.json();
 }
+
+const handleCache = new Map<string, string>();
+
+export async function resolveHandle(did: string): Promise<string> {
+	const cached = handleCache.get(did);
+	if (cached) return cached;
+	const profile = await resolveIdentity(did);
+	const handle = profile?.handle ?? did;
+	handleCache.set(did, handle);
+	return handle;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f44d831..5e0fb88 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,47 +1,144 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { auth } from '$lib/stores/auth.svelte';
-	import { findGamesForPlayer, type ConstellationLink } from '$lib/microcosm';
+	import { findGamesForPlayer } from '$lib/microcosm';
+	import { getGamePublic, COLLECTIONS } from '$lib/atproto';
+	import type { GameRecord } from '$lib/types';
+	import GameCard from '$lib/components/GameCard.svelte';
 	import LoginButton from '$lib/components/LoginButton.svelte';
 
-	let games: ConstellationLink[] = $state([]);
-	let loadingGames = $state(false);
+	interface GameEntry {
+		did: string;
+		rkey: string;
+		record: GameRecord;
+		timestamp: number;
+	}
+
+	let userGames: GameEntry[] = $state([]);
+	let loadingUserGames = $state(false);
+	let liveGames: GameEntry[] = $state([]);
+	let liveConnected = $state(false);
+
+	const JETSTREAM_URL = 'wss://jetstream2.us-east.bsky.network/subscribe';
+	const liveGameMap = new Map<string, GameEntry>();
+	let ws: WebSocket | null = null;
+	let destroyed = false;
+	let cursor = (Date.now() - 7_200_000) * 1000;
+	let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
-		if (auth.isLoggedIn && auth.did) {
-			loadGames(auth.did);
-		}
+		if (auth.isLoggedIn && auth.did) loadUserGames(auth.did);
 	});
 
-	async function loadGames(did: string) {
-		loadingGames = true;
-		try {
-			games = await findGamesForPlayer(did);
-		} catch {
-			games = [];
-		}
-		loadingGames = false;
-	}
+	onMount(() => {
+		connectLiveFeed();
+		return () => {
+			destroyed = true;
+			ws?.close();
+			if (reconnectTimer) clearTimeout(reconnectTimer);
+		};
+	});
 
 	function parseAtUri(uri: string): { did: string; rkey: string } | null {
 		const match = uri.match(/^at:\/\/([^/]+)\/[^/]+\/(.+)$/);
 		if (!match) return null;
 		return { did: match[1], rkey: match[2] };
 	}
+
+	async function loadUserGames(did: string) {
+		loadingUserGames = true;
+		try {
+			const links = await findGamesForPlayer(did);
+			const results = await Promise.all(
+				links.slice(0, 20).map(async (link) => {
+					const parsed = parseAtUri(link.uri);
+					if (!parsed) return null;
+					const record = await getGamePublic(parsed.did, parsed.rkey);
+					if (!record || record.parentGameUri) return null;
+					return {
+						did: parsed.did,
+						rkey: parsed.rkey,
+						record,
+						timestamp: new Date(record.createdAt).getTime(),
+					};
+				})
+			);
+			userGames = results
+				.filter((g): g is GameEntry => g !== null)
+				.sort((a, b) => b.timestamp - a.timestamp);
+		} catch {
+			userGames = [];
+		}
+		loadingUserGames = false;
+	}
+
+	function connectLiveFeed() {
+		if (destroyed) return;
+
+		const url = new URL(JETSTREAM_URL);
+		url.searchParams.set('wantedCollections', COLLECTIONS.game);
+		url.searchParams.set('cursor', String(cursor));
+
+		ws = new WebSocket(url.toString());
+
+		ws.onopen = () => {
+			liveConnected = true;
+		};
+
+		ws.onmessage = (event) => {
+			const data = JSON.parse(event.data);
+			if (data.time_us) cursor = data.time_us;
+			if (data.kind !== 'commit') return;
+
+			const { did, commit } = data;
+			if (commit.collection !== COLLECTIONS.game) return;
+
+			const key = `${did}/${commit.rkey}`;
+
+			if (commit.operation === 'delete') {
+				liveGameMap.delete(key);
+			} else {
+				const record = commit.record as GameRecord;
+				if (!record || record.parentGameUri) return;
+				if (record.status === 'active' || record.status === 'waiting') {
+					liveGameMap.set(key, {
+						did,
+						rkey: commit.rkey,
+						record,
+						timestamp: (data.time_us ?? Date.now() * 1000) / 1000,
+					});
+				} else {
+					liveGameMap.delete(key);
+				}
+			}
+
+			liveGames = [...liveGameMap.values()].sort((a, b) => b.timestamp - a.timestamp);
+		};
+
+		ws.onclose = () => {
+			liveConnected = false;
+			if (!destroyed) {
+				reconnectTimer = setTimeout(connectLiveFeed, 5000);
+			}
+		};
+
+		ws.onerror = () => ws?.close();
+	}
+
+	let activeUserGames = $derived(
+		userGames.filter((g) => g.record.status === 'active' || g.record.status === 'waiting')
+	);
+	let completedUserGames = $derived(
+		userGames.filter((g) => g.record.status === 'completed')
+	);
 </script>
 
-<div class="flex min-h-screen flex-col items-center justify-center gap-6 p-4">
-	<div class="text-center">
+<div class="mx-auto max-w-2xl px-4 py-8">
+	<div class="mb-8 text-center">
 		<h1 class="text-4xl font-bold text-accent-blue">checkmate.blue</h1>
 		<p class="mt-2 text-text-secondary">Chess on the Atmosphere</p>
-	</div>
-
-	{#if auth.isLoggedIn}
-		<div class="flex flex-col items-center gap-4">
-			<p class="text-lg">
-				Signed in as <span class="font-semibold text-accent-blue">{auth.handle}</span>
-			</p>
-			<div class="flex gap-3">
+		{#if auth.isLoggedIn}
+			<div class="mt-4 flex justify-center gap-3">
 				<a
 					href="/play"
 					class="rounded-lg bg-accent-blue px-6 py-2 font-semibold text-white transition-colors hover:bg-accent-blue-hover"
@@ -55,31 +152,69 @@
 					Sign out
 				</button>
 			</div>
-		</div>
-
-		{#if loadingGames}
-			<p class="text-sm text-text-secondary">Loading games...</p>
-		{:else if games.length > 0}
-			<div class="w-full max-w-md">
-				<h2 class="mb-3 text-lg font-semibold">Your Games</h2>
-				<div class="flex flex-col gap-2">
-					{#each games as game}
-						{@const parsed = parseAtUri(game.uri)}
-						{#if parsed}
-							<a
-								href="/game/{parsed.did}/{parsed.rkey}"
-								class="rounded-lg border border-border bg-bg-secondary px-4 py-3 transition-colors hover:border-accent-blue"
-							>
-								<span class="font-mono text-sm text-text-secondary">{parsed.rkey}</span>
-							</a>
-						{/if}
-					{/each}
-				</div>
+		{:else}
+			<div class="mx-auto mt-4 w-full max-w-sm">
+				<LoginButton />
 			</div>
 		{/if}
-	{:else}
-		<div class="w-full max-w-sm">
-			<LoginButton />
-		</div>
+	</div>
+
+	{#if auth.isLoggedIn}
+		{#if loadingUserGames}
+			<p class="mb-8 text-sm text-text-secondary">Loading your games...</p>
+		{:else}
+			{#if activeUserGames.length > 0}
+				<section class="mb-8">
+					<h2 class="mb-3 text-lg font-semibold">Your Active Games</h2>
+					<div class="flex flex-col gap-2">
+						{#each activeUserGames as game}
+							<GameCard did={game.did} rkey={game.rkey} record={game.record} />
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			{#if completedUserGames.length > 0}
+				<section class="mb-8">
+					<h2 class="mb-3 text-lg font-semibold">Completed</h2>
+					<div class="flex flex-col gap-2">
+						{#each completedUserGames.slice(0, 5) as game}
+							<GameCard did={game.did} rkey={game.rkey} record={game.record} />
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			{#if userGames.length === 0}
+				<p class="mb-8 text-center text-sm text-text-secondary">
+					No games yet. <a href="/play" class="text-accent-blue hover:underline">Start one!</a>
+				</p>
+			{/if}
+		{/if}
 	{/if}
+
+	<section>
+		<div class="mb-3 flex items-center gap-2">
+			<h2 class="text-lg font-semibold">Live on the Atmosphere</h2>
+			{#if liveConnected}
+				<span class="h-2 w-2 rounded-full bg-success"></span>
+			{/if}
+		</div>
+		{#if liveGames.length > 0}
+			<div class="flex flex-col gap-2">
+				{#each liveGames.slice(0, 20) as game}
+					<GameCard
+						did={game.did}
+						rkey={game.rkey}
+						record={game.record}
+						timestamp={game.timestamp}
+					/>
+				{/each}
+			</div>
+		{:else}
+			<p class="text-sm text-text-secondary">
+				{liveConnected ? 'No active games right now. Be the first!' : 'Connecting to live feed...'}
+			</p>
+		{/if}
+	</section>
 </div>
-- 
2.51.2