Fix sync replaying stale history on fresh tab

A fresh tab starts with lastEventId = 0, so the first poll to
/api/sync/events asked for "all changes id > 0 AND source != me".
Each tab generates its own crypto.randomUUID() sourceId, so changes
from prior sessions of the same browser are foreign and were returned
— up to 50 rows of history from the last 24 hours.

The client applies each event's `data` (a full row snapshot) over the
current store, so rapid clicks could "snap back" a few seconds later
as old per-item snapshots overwrote the just-clicked state, and
unrelated items would flip on as their old packed snapshots replayed.

On first poll (no Last-Event-ID header) return only the current max
changeLog id as a checkpoint with no events. The initial GET
/trip-items already reflects all prior changes, so we just need a
starting point for forward sync — there's nothing to replay.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: garyo

src/pages/api/sync/events.ts

@@ -1,17 +1,40 @@
 export const prerender = false;
 
 import type { APIRoute } from 'astro';
-import { gt, eq, and, asc, sql } from 'drizzle-orm';
+import { gt, eq, and, asc, sql, max } from 'drizzle-orm';
 import { changeLog } from '../../../../db/schema';
 import { getDatabaseConnection, getUserId } from '../../../lib/api-helpers';
 
+const sseResponse = (body: string) =>
+  new Response(body, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+    },
+  });
+
 export const GET: APIRoute = async (context) => {
   const db = getDatabaseConnection(context.locals);
   const userId = getUserId(context.locals);
 
-  // Last-Event-ID header (sent automatically by EventSource on reconnect)
+  // Last-Event-ID header (sent automatically by EventSource on reconnect).
+  // Absent header = first poll of a fresh tab: don't replay history. Return
+  // the current max id as a checkpoint so subsequent polls only pick up
+  // changes from this point forward. The initial GET /trip-items already
+  // reflects all prior changes.
   const lastEventIdHeader = context.request.headers.get('Last-Event-ID');
-  const parsed = lastEventIdHeader ? parseInt(lastEventIdHeader, 10) : 0;
+  if (lastEventIdHeader === null) {
+    const row = await db
+      .select({ maxId: max(changeLog.id) })
+      .from(changeLog)
+      .where(eq(changeLog.clerk_user_id, userId))
+      .get();
+    const maxId = row?.maxId ?? 0;
+    const body = maxId > 0 ? `retry: 3000\n\nid: ${maxId}\n\n` : 'retry: 3000\n\n:heartbeat\n\n';
+    return sseResponse(body);
+  }
+
+  const parsed = parseInt(lastEventIdHeader, 10);
   const lastEventId = Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;
 
   // Source ID from query param (to filter out own changes)
@@ -55,10 +78,5 @@ export const GET: APIRoute = async (context) => {
     }
   }
 
-  return new Response(body, {
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-    },
-  });
+  return sseResponse(body);
 };