fix(web): apiFetch resilience + auth state guards + double-submit + notification abort

- api.apiFetch: catch network failures (DNS, offline, abort) and wrap as
  ApiError("network_error", 0) instead of letting the raw TypeError fall
  through every call site's instanceof check as an opaque server error.
- api.apiFetch: parse body via text() + safeParseJson so non-JSON responses
  (proxy HTML error pages, empty 5xx bodies) no longer throw SyntaxError that
  bypasses the typed error contract.
- auth.signOut: try/catch around supabase.auth.signOut(). The signOut call can
  reject when the refresh token is already revoked or the network is down;
  without the catch the user is stuck on a half-broken page. The window.location
  redirect runs unconditionally.
- main.bootstrap: try/catch around exchangeCodeForSession. A bad/expired OAuth
  code threw and prevented initAuth() from running, leaving the app stuck in
  status: "loading" — every protected route's beforeLoad treats that as
  authorized and the user stared at a blank screen.
- _authed: treat any status other than "authenticated" as not-yet-authorized
  in both beforeLoad and the layout. Render null until authenticated so we
  don't briefly render protected children with user === null.
- useNotifications: AbortController per refetch — cancel the in-flight request
  when a new one starts (visibility-change-then-timer race) and on unmount.
  Without this, slow first responses can clobber fast second responses since
  both call setItems.
- room-card / room-row: committingRef guard on the inline-rename commit().
  Pressing Enter dispatches the PATCH and synchronously closes the input, which
  fires onBlur and would otherwise issue a duplicate PATCH with the same value.
- delete-room-dialog: e.preventDefault() on the destructive AlertDialogAction
  so Radix doesn't close the dialog before confirm() runs — preserving the
  spinner state and keeping the confirmation visible if delete fails.

Code review pass 5.

Author: justincordova

apps/web/src/components/notifications/use-notifications.ts

@@ -13,21 +13,31 @@ export function useNotifications() {
   // on an unmounted component (React warning + wasted render). Set inside the
   // mount effect below; the closure here captures it.
   const mountedRef = useRef(true);
+  // Aborts the in-flight refetch when a new one starts (visibility change
+  // triggers an immediate refetch while the polling timer fired one moments
+  // before). Without this, a slow first response can clobber a fast second
+  // response since both call setItems.
+  const ctrlRef = useRef<AbortController | null>(null);
 
   async function refetch() {
     const token = useSession.getState().token;
     if (!token) return;
+    ctrlRef.current?.abort();
+    const ctrl = new AbortController();
+    ctrlRef.current = ctrl;
     if (mountedRef.current) setLoading(true);
     try {
-      const data = await apiFetch<ListNotificationsResponse>("/api/notifications");
-      if (!mountedRef.current) return;
+      const data = await apiFetch<ListNotificationsResponse>("/api/notifications", {
+        signal: ctrl.signal,
+      });
+      if (!mountedRef.current || ctrl.signal.aborted) return;
       setItems(data.notifications);
       setUnreadCount(data.unreadCount);
       failCountRef.current = 0;
     } catch {
-      if (mountedRef.current) failCountRef.current++;
+      if (mountedRef.current && !ctrl.signal.aborted) failCountRef.current++;
     } finally {
-      if (mountedRef.current) setLoading(false);
+      if (mountedRef.current && !ctrl.signal.aborted) setLoading(false);
     }
   }
 
@@ -79,6 +89,7 @@ export function useNotifications() {
       stopped = true;
       mountedRef.current = false;
       if (timeoutId) clearTimeout(timeoutId);
+      ctrlRef.current?.abort();
       document.removeEventListener("visibilitychange", onVis);
     };
   }, []);

apps/web/src/components/rooms/delete-room-dialog.tsx

@@ -52,6 +52,11 @@ export function DeleteRoomDialog({ open, onOpenChange, slug }: Props) {
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction
             onClick={(e) => {
+              // preventDefault stops Radix from closing the dialog on click.
+              // Without it the dialog unmounts immediately, the spinner state
+              // is never visible, and a failed delete loses the confirmation
+              // affordance. confirm() closes the dialog on success itself.
+              e.preventDefault();
               e.stopPropagation();
               confirm();
             }}

apps/web/src/components/rooms/room-card.tsx

@@ -71,16 +71,27 @@ export function RoomCard({
     }
   }
 
+  // Guards against the Enter-then-blur double-submit: pressing Enter calls
+  // commit(), which dispatches the PATCH and synchronously calls setEditing(false).
+  // Unmounting the <input> fires onBlur, which would call commit() again
+  // with the same value and issue a duplicate PATCH.
+  const committingRef = useRef(false);
   async function commit() {
+    if (committingRef.current) return;
+    committingRef.current = true;
     const next = draft.trim();
-    if (next !== (room.name ?? "")) {
-      const res = await apiFetch<UpdateRoomResponse>(`/api/rooms/${room.slug}`, {
-        method: "PATCH",
-        body: { name: next || null },
-      });
-      updateRoom(res.room);
+    try {
+      if (next !== (room.name ?? "")) {
+        const res = await apiFetch<UpdateRoomResponse>(`/api/rooms/${room.slug}`, {
+          method: "PATCH",
+          body: { name: next || null },
+        });
+        updateRoom(res.room);
+      }
+      setEditing(false);
+    } finally {
+      committingRef.current = false;
     }
-    setEditing(false);
   }
 
   return (

apps/web/src/components/rooms/room-row.tsx

@@ -71,16 +71,24 @@ export function RoomRow({
     }
   }
 
+  // Same Enter-then-blur double-submit guard as room-title.tsx.
+  const committingRef = useRef(false);
   async function commit() {
+    if (committingRef.current) return;
+    committingRef.current = true;
     const next = draft.trim();
-    if (next !== (room.name ?? "")) {
-      const res = await apiFetch<UpdateRoomResponse>(`/api/rooms/${room.slug}`, {
-        method: "PATCH",
-        body: { name: next || null },
-      });
-      updateRoom(res.room);
+    try {
+      if (next !== (room.name ?? "")) {
+        const res = await apiFetch<UpdateRoomResponse>(`/api/rooms/${room.slug}`, {
+          method: "PATCH",
+          body: { name: next || null },
+        });
+        updateRoom(res.room);
+      }
+      setEditing(false);
+    } finally {
+      committingRef.current = false;
     }
-    setEditing(false);
   }
 
   return (

apps/web/src/lib/api.ts

@@ -37,17 +37,34 @@ async function runRefresh(): Promise<{ ok: boolean }> {
   return { ok: false };
 }
 
+function safeParseJson(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+
 export async function apiFetch<T>(path: string, opts: FetchOpts = {}): Promise<T> {
   const token = useSession.getState().token;
   const headers = new Headers(opts.headers);
   if (opts.body !== undefined) headers.set("Content-Type", "application/json");
   if (token) headers.set("Authorization", `Bearer ${token}`);
 
-  const res = await fetch(`${env.VITE_API_URL}${path}`, {
-    ...opts,
-    headers,
-    body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${env.VITE_API_URL}${path}`, {
+      ...opts,
+      headers,
+      body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
+    });
+  } catch (err) {
+    // Network failure (DNS, offline, CORS preflight, abort, etc.). Without
+    // this branch the raw TypeError propagates as a non-ApiError and every
+    // call site's `instanceof ApiError` check falls through to a generic
+    // "server error" message with no signal it's a connectivity issue.
+    throw new ApiError("network_error", "Network request failed", 0, err);
+  }
 
   if (res.status === 401 && !opts._retried) {
     if (!refreshInFlight) {
@@ -62,10 +79,18 @@ export async function apiFetch<T>(path: string, opts: FetchOpts = {}): Promise<T
     throw new ApiError("unauthorized", "Session expired", 401);
   }
   if (res.status === 204) return undefined as T;
-  const json = await res.json();
+
+  // Body may be empty (some servers return no body on 5xx) or non-JSON (a
+  // proxy returning an HTML error page). Parse defensively so the helper
+  // always throws a typed ApiError instead of a SyntaxError from .json().
+  const text = await res.text();
+  const json = text ? safeParseJson(text) : null;
+
   if (!res.ok) {
-    const body = json as ErrorEnvelope;
-    throw new ApiError(body.error.code, body.error.message, res.status, json);
+    const body = json as ErrorEnvelope | null;
+    const code = body?.error?.code ?? "server_error";
+    const message = body?.error?.message ?? res.statusText ?? "Request failed";
+    throw new ApiError(code, message, res.status, json ?? undefined);
   }
   return json as T;
 }

apps/web/src/lib/auth.ts

@@ -100,6 +100,14 @@ export async function linkProvider(provider: "github" | "google", next = "/setti
 }
 
 export async function signOut() {
-  await supabase.auth.signOut();
+  // signOut() can reject when the refresh token has already been revoked
+  // server-side or the network is unreachable. Either way, we want the user
+  // to land on the public home and a fresh page load to clear any in-memory
+  // session state — don't leave them on a half-broken settings page.
+  try {
+    await supabase.auth.signOut();
+  } catch {
+    // best-effort — local state is wiped by the redirect below
+  }
   window.location.href = "/";
 }

apps/web/src/main.tsx

@@ -28,7 +28,15 @@ async function bootstrap(root: HTMLElement) {
   const params = new URLSearchParams(window.location.search);
   const code = params.get("code");
   if (code) {
-    await supabase.auth.exchangeCodeForSession(code);
+    // A bad/expired code throws here. Previously that prevented initAuth()
+    // from running and left the entire app stuck in status: "loading" — every
+    // protected route's beforeLoad checks for "anonymous" so the user never
+    // got redirected and stared at a blank screen.
+    try {
+      await supabase.auth.exchangeCodeForSession(code);
+    } catch {
+      // fall through to initAuth() so the app boots in anonymous mode
+    }
     params.delete("code");
     const clean = params.toString();
     const next = window.location.pathname + (clean ? `?${clean}` : "");

apps/web/src/routes/_authed.tsx

@@ -4,9 +4,14 @@ import { Outlet, createFileRoute, redirect, useNavigate } from "@tanstack/react-
 import { useEffect } from "react";
 
 export const Route = createFileRoute("/_authed")({
+  // bootstrap() awaits initAuth() before rendering, so by the time the router
+  // runs `status` is either "authenticated" or "anonymous" on the initial
+  // load. The "loading" state only appears during an in-app session reset
+  // (rare). Redirect on anything other than "authenticated" so we never
+  // briefly render a protected child with `user === null`.
   beforeLoad: ({ location }) => {
     const { status } = useSession.getState();
-    if (status === "anonymous") {
+    if (status !== "authenticated") {
       throw redirect({ to: "/sign-in", search: { next: location.pathname } });
     }
   },
@@ -18,12 +23,19 @@ function AuthedLayout() {
   const status = useSession((s) => s.status);
   const navigate = useNavigate();
 
+  // Mid-session sign-out (token revoked, refresh failed) flips status away
+  // from "authenticated" — push the user back to /sign-in immediately and
+  // hold the outlet so we don't render a stale page in the meantime.
   useEffect(() => {
-    if (status === "anonymous") {
-      navigate({ to: "/sign-in", search: { next: "/dashboard" } });
+    if (status !== "authenticated") {
+      navigate({
+        to: "/sign-in",
+        search: { next: window.location.pathname || "/dashboard" },
+      });
     }
   }, [status, navigate]);
 
+  if (status !== "authenticated") return null;
   return <Outlet />;
 }