From c014c2f04f4663540a71bd4fd3958f5901ca7d48 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 11:20:29 -0400
Subject: [PATCH 01/12] fix(website): stop club rank matrix from faking a
 permission save (WEB-W1)

The Ranks & Roles "Operational Permission Matrix" previously waited ~400ms and
showed a "Saved" state without persisting anything. No Firestore document, API
route, or security rule stores or enforces a per-rank capability matrix; club
authorization is role-based (Owner/Admin via getPortalPermissions). Persisting
the matrix would require frozen security-rule changes and would create an
unenforced permission model that misleads owners.

Make the control truthful instead of faking success:
- Render the matrix as a read-only reference of the standard governance model
  by default (persistenceAvailable=false): no Save/Reset controls, disabled
  toggles, a "View-only reference" indicator, and a notice stating that access
  is enforced by Owner/Admin roles and per-rank customization is planned.
- Remove the fake setTimeout save handler and the unconditional success state.
- Retain a forward-compatible editable path behind persistenceAvailable for
  when a backend contract ships.
- Document the precise backend contract required to enable persistence.

Tests: read-only matrix renders no Save control, reports no save, and does not
mutate permissions even for Owner/Admin; editable path still fires toggle/save
/reset when persistenceAvailable=true.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../[clubId]/manage/ranks-roles/page.tsx      | 24 ++---
 .../founder-portal/club-permission-matrix.tsx | 88 +++++++++++++----
 .../club-rank-permissions.md                  | 98 +++++++++++++++++++
 .../club-ranks-roles-interactive.test.tsx     | 61 +++++++++---
 4 files changed, 225 insertions(+), 46 deletions(-)
 create mode 100644 website/docs/backend-contracts/club-rank-permissions.md

diff --git a/website/app/clubs/[clubId]/manage/ranks-roles/page.tsx b/website/app/clubs/[clubId]/manage/ranks-roles/page.tsx
index 6c74f0d..11fa882 100644
--- a/website/app/clubs/[clubId]/manage/ranks-roles/page.tsx
+++ b/website/app/clubs/[clubId]/manage/ranks-roles/page.tsx
@@ -34,7 +34,6 @@ export default function ClubFounderRanksRolesPage({ params }: PageProps) {
   const [members, setMembers] = useState<ClubMember[]>([]);
   const [permissions, setPermissions] = useState(DEFAULT_RANK_PERMISSIONS);
   const [selectedRankId, setSelectedRankId] = useState<string | null>('president');
-  const [isSavingPermissions, setIsSavingPermissions] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [unauthenticated, setUnauthenticated] = useState(false);
@@ -104,16 +103,6 @@ export default function ClubFounderRanksRolesPage({ params }: PageProps) {
     }));
   }
 
-  function handleResetDefaults() {
-    setPermissions(DEFAULT_RANK_PERMISSIONS);
-  }
-
-  async function handleSavePermissions() {
-    setIsSavingPermissions(true);
-    await new Promise((r) => setTimeout(r, 400));
-    setIsSavingPermissions(false);
-  }
-
   if (loading) {
     return (
       <div className="min-h-screen bg-brand-bg telemetry-grid-bg p-6">
@@ -220,16 +209,23 @@ export default function ClubFounderRanksRolesPage({ params }: PageProps) {
         />
 
         {/* Interactive Permission Toggle Switches Matrix */}
+        {/*
+          Per-rank capability permissions have no server-side persistence contract yet.
+          The enforced authorization model is role-based (Owner / Admin) via
+          getPortalPermissions in lib/club-data.ts, not this rank matrix. Rendering the
+          matrix read-only (persistenceAvailable={false}) keeps it truthful: it shows the
+          standard governance conventions without claiming a save that does not occur.
+          See website/docs/backend-contracts/club-rank-permissions.md for the proposed
+          contract that would flip persistenceAvailable to true.
+        */}
         <ClubPermissionMatrix
           ranks={DEFAULT_CLUB_RANKS}
           capabilities={DEFAULT_CLUB_CAPABILITIES}
           permissions={permissions}
           selectedRankId={selectedRankId}
           onTogglePermission={handleTogglePermission}
-          onResetDefaults={handleResetDefaults}
-          onSavePermissions={handleSavePermissions}
-          isSaving={isSavingPermissions}
           canEdit={context.permissions.canManageSettings}
+          persistenceAvailable={false}
         />
       </div>
     </FounderPortalShell>
diff --git a/website/components/founder-portal/club-permission-matrix.tsx b/website/components/founder-portal/club-permission-matrix.tsx
index ebb98d5..86dcfc9 100644
--- a/website/components/founder-portal/club-permission-matrix.tsx
+++ b/website/components/founder-portal/club-permission-matrix.tsx
@@ -9,10 +9,22 @@ interface ClubPermissionMatrixProps {
   permissions: Record<string, Record<ClubCapability, boolean>>;
   selectedRankId: string | null;
   onTogglePermission: (rankId: string, capability: ClubCapability) => void;
-  onResetDefaults: () => void;
-  onSavePermissions: () => Promise<void>;
-  isSaving: boolean;
+  onResetDefaults?: () => void;
+  onSavePermissions?: () => Promise<void>;
+  isSaving?: boolean;
   canEdit: boolean;
+  /**
+   * Whether a server-side persistence contract for per-rank capability
+   * permissions actually exists. Defaults to false.
+   *
+   * The enforced club authorization model is role-based (Owner / Admin), not
+   * rank-based (see getPortalPermissions in lib/club-data.ts). No Firestore
+   * document or API persists this capability matrix today, so by default the
+   * matrix renders as a read-only reference of the standard governance model.
+   * The editable + save path is retained for when a backend contract ships
+   * (see website/docs/backend-contracts/club-rank-permissions.md).
+   */
+  persistenceAvailable?: boolean;
 }
 
 export function ClubPermissionMatrix({
@@ -23,12 +35,19 @@ export function ClubPermissionMatrix({
   onTogglePermission,
   onResetDefaults,
   onSavePermissions,
-  isSaving,
+  isSaving = false,
   canEdit,
+  persistenceAvailable = false,
 }: ClubPermissionMatrixProps) {
   const [saveSuccess, setSaveSuccess] = useState(false);
 
+  // Edit + save controls are only live when the caller both grants edit rights
+  // AND a real persistence backend is wired. Without persistence the matrix is
+  // a truthful read-only reference: it never mutates and never reports a save.
+  const editable = canEdit && persistenceAvailable && typeof onSavePermissions === 'function';
+
   async function handleSave() {
+    if (!editable || !onSavePermissions) return;
     await onSavePermissions();
     setSaveSuccess(true);
     setTimeout(() => setSaveSuccess(false), 2500);
@@ -48,19 +67,21 @@ export function ClubPermissionMatrix({
             </h2>
           </div>
           <p className="font-body text-xs sm:text-sm text-slate-400 mt-1">
-            Configure delegated operational privileges per squad rank. Administrative roles enforce backend limits.
+            Standard delegated operational privileges per squad rank. Administrative roles enforce backend limits.
           </p>
         </div>
 
-        {canEdit && (
+        {editable ? (
           <div className="flex items-center gap-2.5 self-start sm:self-center">
-            <button
-              type="button"
-              onClick={onResetDefaults}
-              className="px-3 py-1.5 rounded-xl text-xs font-mono text-slate-400 hover:text-white bg-surface-container hover:bg-surface-container-high border border-brand-border/60 transition-colors"
-            >
-              Reset Defaults
-            </button>
+            {onResetDefaults && (
+              <button
+                type="button"
+                onClick={onResetDefaults}
+                className="px-3 py-1.5 rounded-xl text-xs font-mono text-slate-400 hover:text-white bg-surface-container hover:bg-surface-container-high border border-brand-border/60 transition-colors"
+              >
+                Reset Defaults
+              </button>
+            )}
             <button
               type="button"
               disabled={isSaving}
@@ -85,9 +106,33 @@ export function ClubPermissionMatrix({
               )}
             </button>
           </div>
+        ) : (
+          <span
+            className="inline-flex items-center gap-1.5 self-start sm:self-center px-3 py-1.5 rounded-xl text-[11px] font-mono text-slate-400 bg-surface-container border border-brand-border/60"
+            title="Per-rank permission customization is not yet available. Software access is enforced by Owner and Admin roles."
+          >
+            <span className="material-symbols-outlined text-[15px]">visibility</span>
+            View-only reference
+          </span>
         )}
       </div>
 
+      {/* Truthful availability notice: shown whenever persistence is not wired. */}
+      {!editable && (
+        <div className="flex items-start gap-2.5 p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-xs font-body text-amber-200/90">
+          <span className="material-symbols-outlined text-[16px] text-amber-400 shrink-0 mt-0.5">
+            info
+          </span>
+          <span>
+            This matrix shows MotorSignal&rsquo;s standard rank conventions for reference. Custom per-rank
+            permissions are not saved yet. Who can actually manage this club is enforced by the{' '}
+            <strong className="font-semibold text-amber-100">Owner</strong> and{' '}
+            <strong className="font-semibold text-amber-100">Admin</strong> roles in the member roster — see
+            Ranks &amp; Roles above. Per-rank customization is planned.
+          </span>
+        </div>
+      )}
+
       {/* Desktop / Tablet Matrix Table */}
       <div className="overflow-x-auto rounded-xl border border-brand-border/60 bg-surface-container/60">
         <table className="w-full text-left border-collapse min-w-[720px]">
@@ -142,17 +187,22 @@ export function ClubPermissionMatrix({
                   {capabilities.map((cap) => {
                     const isGranted = rankPerms[cap.id] ?? false;
                     const isImmutableOwner = rank.id === 'president';
+                    const toggleDisabled = !editable || isImmutableOwner;
 
                     return (
                       <td key={cap.id} className="py-3.5 px-3 text-center">
                         <button
                           type="button"
-                          disabled={!canEdit || isImmutableOwner}
-                          onClick={() => onTogglePermission(rank.id, cap.id)}
-                          aria-label={`Toggle ${cap.label} for ${rank.title}`}
-                          className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-75 disabled:cursor-not-allowed ${
-                            isGranted ? 'bg-brand-cyan' : 'bg-slate-700'
-                          }`}
+                          disabled={toggleDisabled}
+                          aria-readonly={!editable}
+                          onClick={() => {
+                            if (toggleDisabled) return;
+                            onTogglePermission(rank.id, cap.id);
+                          }}
+                          aria-label={`${editable ? 'Toggle' : 'Standard setting:'} ${cap.label} for ${rank.title}`}
+                          className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-75 disabled:cursor-not-allowed ${
+                            editable ? 'cursor-pointer' : 'cursor-default'
+                          } ${isGranted ? 'bg-brand-cyan' : 'bg-slate-700'}`}
                         >
                           <span
                             className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-black shadow ring-0 transition duration-200 ease-in-out ${
diff --git a/website/docs/backend-contracts/club-rank-permissions.md b/website/docs/backend-contracts/club-rank-permissions.md
new file mode 100644
index 0000000..225391f
--- /dev/null
+++ b/website/docs/backend-contracts/club-rank-permissions.md
@@ -0,0 +1,98 @@
+# Backend Contract Proposal — Club Rank Permission Matrix (WEB-W1)
+
+Status: **Proposed / not implemented.** This documents the backend work required
+before the "Operational Permission Matrix" on
+`app/clubs/[clubId]/manage/ranks-roles/page.tsx` can be made editable. Until this
+ships, the matrix is rendered read-only (`persistenceAvailable={false}`).
+
+## Problem
+
+`handleSavePermissions` previously waited ~400 ms and showed a "Saved" state
+without writing anything (confirmed in source prior to this change). There is no
+Firestore document, API route, or security rule that stores or enforces a
+per-rank capability matrix. The enforced club authorization model is **role
+based**, derived solely from the administrative role on the member document:
+
+- `lib/club-data.ts` → `getPortalPermissions(role)` maps `owner`/`admin` →
+  `canManageSettings`, `canInviteMembers`, `canApproveApplications`,
+  `canPlanRides`; `member` → all false.
+- Display rank (`President`, `Road Captain`, …) is cosmetic and explicitly does
+  **not** grant software authority.
+
+Persisting the matrix without enforcement would mislead club owners into
+believing a toggle restricts members when it does nothing. That is prohibited by
+the project rules (no unenforced permission models, no false success).
+
+## Why this was not implemented in the website task
+
+- Enforcement requires **Firestore security rule** changes (out of scope / frozen).
+- A new persistence model must not conflict with the existing Flutter club role
+  model (`owner`/`admin`/`member`). Rank → capability is a different axis and
+  needs a product decision on precedence.
+
+## Proposed contract (for a future, authorized backend change)
+
+### 1. Storage
+
+Document: `clubs/{clubId}/settings/rankPermissions`
+
+```jsonc
+{
+  "version": 1,
+  "updatedAt": "<serverTimestamp>",
+  "updatedByUid": "<uid>",
+  "ranks": {
+    "road_captain": {
+      "planRides": true,
+      "manageApplications": false,
+      "postAnnouncements": true,
+      "moderateWall": true,
+      "manageRoster": false,
+      "editProfile": false
+    }
+    // ... one entry per rank id in DEFAULT_CLUB_RANKS except `president`
+  }
+}
+```
+
+Invariants:
+- `president` is immutable (always full authority); never written or editable.
+- Unknown rank ids and unknown capability keys are rejected.
+- Capability keys are constrained to `DEFAULT_CLUB_CAPABILITIES` ids.
+
+### 2. Security rules (requires authorized change to the frozen rules)
+
+- Read: any active club member.
+- Write: only `clubs/{clubId}.ownerUid == request.auth.uid`, or an active member
+  whose `role == 'admin'`. Validate the written shape (version, allowed rank ids,
+  boolean capability values only). Reject writes that would alter `president`.
+
+### 3. Enforcement precedence (product decision required)
+
+Rank capabilities may only **narrow**, never widen, what the administrative role
+already denies. Administrative `role` remains the hard security boundary enforced
+in rules; rank capabilities are a soft, owner-configurable delegation layer that
+the Flutter and web clients honor for UI affordances. The Flutter club model must
+adopt the same precedence so web and mobile agree.
+
+### 4. Website wiring once the above exists
+
+1. Add `fetchRankPermissions(clubId)` and `saveRankPermissions(clubId, callerUid, matrix)`
+   to `lib/club-data.ts`, mirroring the authorization pattern of
+   `updateClubAccessSettings` (owner/admin check + `updateDoc`).
+2. In `ranks-roles/page.tsx`: load persisted permissions in `loadData`, and
+   implement `handleSavePermissions` to call `saveRankPermissions`, then re-read
+   to confirm the write survived before showing success.
+3. Flip `<ClubPermissionMatrix persistenceAvailable={true} />` and pass
+   `onSavePermissions` / `onResetDefaults` / `isSaving`.
+4. Add tests: persistence round-trip (save → reload → values survive), owner/admin
+   authorization success, member/unauthenticated rejection, `president`
+   immutability, and rejection of unknown rank/capability keys.
+
+## Current truthful behavior (shipped in this branch)
+
+- Matrix renders as a read-only reference of the standard governance model.
+- No Save/Reset controls; a "View-only reference" indicator and an availability
+  notice explain that access is enforced by Owner/Admin roles and that per-rank
+  customization is planned.
+- No save is attempted and no success is reported.
diff --git a/website/tests/club-ranks-roles-interactive.test.tsx b/website/tests/club-ranks-roles-interactive.test.tsx
index 186851a..e5fee8f 100644
--- a/website/tests/club-ranks-roles-interactive.test.tsx
+++ b/website/tests/club-ranks-roles-interactive.test.tsx
@@ -119,10 +119,8 @@ describe('WEB-13: ClubHierarchyBuilder & ClubPermissionMatrix', () => {
     expect(handleUpdateMemberRank).toHaveBeenCalledWith('rider-03', expect.any(String));
   });
 
-  it('renders permission matrix table with capabilities and allows toggling', () => {
+  it('renders permission matrix capabilities for reference', () => {
     const handleToggle = vi.fn();
-    const handleReset = vi.fn();
-    const handleSave = vi.fn().mockResolvedValue(undefined);
 
     render(
       <ClubPermissionMatrix
@@ -131,9 +129,6 @@ describe('WEB-13: ClubHierarchyBuilder & ClubPermissionMatrix', () => {
         permissions={DEFAULT_RANK_PERMISSIONS}
         selectedRankId="road_captain"
         onTogglePermission={handleToggle}
-        onResetDefaults={handleReset}
-        onSavePermissions={handleSave}
-        isSaving={false}
         canEdit={true}
       />
     );
@@ -143,15 +138,50 @@ describe('WEB-13: ClubHierarchyBuilder & ClubPermissionMatrix', () => {
     expect(screen.getByText('Review Applications')).toBeDefined();
     expect(screen.getByText('Post Announcements')).toBeDefined();
     expect(screen.getByText('Moderate Club Wall')).toBeDefined();
-
-    // Find toggle button for road captain and click it
-    const toggleButton = screen.getByRole('button', { name: 'Toggle Plan Club Rides for Road Captain' });
-    fireEvent.click(toggleButton);
-
-    expect(handleToggle).toHaveBeenCalledWith('road_captain', 'planRides');
   });
 
-  it('triggers save matrix and reset defaults', async () => {
+  // WEB-W1 regression: without a persistence backend the matrix must be an honest
+  // read-only reference. It must not offer a Save control, must not report a save,
+  // and must not mutate permissions — even for an Owner/Admin (canEdit=true).
+  it('is read-only and never reports a false save when persistence is unavailable', () => {
+    const handleToggle = vi.fn();
+    const handleSave = vi.fn().mockResolvedValue(undefined);
+
+    render(
+      <ClubPermissionMatrix
+        ranks={DEFAULT_CLUB_RANKS}
+        capabilities={DEFAULT_CLUB_CAPABILITIES}
+        permissions={DEFAULT_RANK_PERMISSIONS}
+        selectedRankId="road_captain"
+        onTogglePermission={handleToggle}
+        onSavePermissions={handleSave}
+        canEdit={true}
+        // persistenceAvailable defaults to false
+      />
+    );
+
+    // No save/reset affordances are rendered.
+    expect(screen.queryByRole('button', { name: /Save Matrix/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /Reset Defaults/i })).toBeNull();
+    expect(screen.queryByText(/Saved/)).toBeNull();
+
+    // A truthful view-only indicator and availability notice are present.
+    expect(screen.getByText(/View-only reference/i)).toBeDefined();
+    expect(screen.getByText(/not saved yet/i)).toBeDefined();
+
+    // Toggles are disabled and do not mutate permissions.
+    const toggleButton = screen.getByRole('button', {
+      name: /Standard setting:\s*Plan Club Rides for Road Captain/i,
+    });
+    expect((toggleButton as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(toggleButton);
+    expect(handleToggle).not.toHaveBeenCalled();
+    expect(handleSave).not.toHaveBeenCalled();
+  });
+
+  // Forward-compatible editable path: when a persistence backend is wired AND the
+  // caller may edit, the matrix exposes real Save/Reset controls and toggles.
+  it('allows editing and saving only when persistence is available and canEdit', async () => {
     const handleToggle = vi.fn();
     const handleReset = vi.fn();
     const handleSave = vi.fn().mockResolvedValue(undefined);
@@ -167,9 +197,14 @@ describe('WEB-13: ClubHierarchyBuilder & ClubPermissionMatrix', () => {
         onSavePermissions={handleSave}
         isSaving={false}
         canEdit={true}
+        persistenceAvailable={true}
       />
     );
 
+    const toggleButton = screen.getByRole('button', { name: 'Toggle Plan Club Rides for Road Captain' });
+    fireEvent.click(toggleButton);
+    expect(handleToggle).toHaveBeenCalledWith('road_captain', 'planRides');
+
     const resetBtn = screen.getByRole('button', { name: /Reset Defaults/i });
     fireEvent.click(resetBtn);
     expect(handleReset).toHaveBeenCalled();

From 217e5a11c06f0423d557ca7039f68b5650187b4c Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:02:18 -0400
Subject: [PATCH 02/12] fix(website): replace fabricated account states with
 truthful ones (W-2FA, W-devices, W-metrics)

The account page asserted several things that were not backed by real state:
- Two-Factor Authentication was hardcoded to "ENABLED" for every signed-in user.
  Now derives from the real Firebase multiFactor enrollment and shows "NOT ENABLED"
  (enroll in the mobile app) unless a factor is actually enrolled.
- "App Connections & Sync" showed a hardcoded connected iOS app (iPhone 16 Pro, v4.1.0,
  "14m ago") and a paired "Cardo Packtalk Edge". Replaced with truthful states: real
  Google account link, authenticated-device count from the real /api/account/sessions
  data, and an honest "Unavailable on web" for Bluetooth comms/accessories (a browser
  cannot observe hardware pairing). Header status reflects real sign-in state.
- Dashboard metrics initialised to fabricated totals (12,480 mi / 184 rides / 56.4 deg).
  Now initialise to zero; AppCloudData replaces them with the rider's real ride totals.
- Dead controls fixed: "Manage Devices" and "Review active sessions" now anchor the real
  Active Device Sessions panel; the telemetry-privacy control no longer presents an
  unverified setting with a no-op "Change" button (managed in the mobile app).

Also adds the Phase 1 website feature audit matrix (docs/).

Tests: account-truthful-states asserts no fabricated device/pairing/sync claims render
and that 2FA is never shown as ENABLED without a real enrolled factor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 website/app/account/page.tsx                  |  67 ++++++----
 .../docs/WEBSITE_FEATURE_AUDIT_2026-10-14.md  | 124 ++++++++++++++++++
 .../tests/account-truthful-states.test.tsx    |  46 +++++++
 3 files changed, 215 insertions(+), 22 deletions(-)
 create mode 100644 website/docs/WEBSITE_FEATURE_AUDIT_2026-10-14.md
 create mode 100644 website/tests/account-truthful-states.test.tsx

diff --git a/website/app/account/page.tsx b/website/app/account/page.tsx
index c500117..bd29499 100644
--- a/website/app/account/page.tsx
+++ b/website/app/account/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { onAuthStateChanged, User } from 'firebase/auth';
+import { onAuthStateChanged, multiFactor, User } from 'firebase/auth';
 import { firebaseAuth } from '../../lib/firebase-client';
 import { AppCloudData } from '../../components/app-cloud-data';
 import { FirebaseLink } from '../../components/firebase-link';
@@ -22,7 +22,10 @@ export default function AccountPage() {
   const [syncTrigger, setSyncTrigger] = useState(0);
   const [isSyncing, setIsSyncing] = useState(false);
   const [lastSynced, setLastSynced] = useState<string | null>(null);
-  const [metrics, setMetrics] = useState({ totalMiles: 12480, rideCount: 184, peakLean: 56.4 });
+  // Initialise to zero; AppCloudData replaces these with real totals from the rider's
+  // Firestore rides (or leaves them at zero when signed out / no rides). Never seed
+  // fabricated stats.
+  const [metrics, setMetrics] = useState({ totalMiles: 0, rideCount: 0, peakLean: 0 });
 
   // Active Device Sessions State
   const [sessions, setSessions] = useState<DeviceSession[]>([]);
@@ -42,6 +45,18 @@ export default function AccountPage() {
     return () => unsubscribe();
   }, []);
 
+  // Truthful 2FA state: reflect the user's actual Firebase multi-factor enrollment.
+  // The web app has no MFA enrollment flow, so this is read-only; enrollment is done in
+  // the mobile app. Never claim 2FA is enabled unless a factor is actually enrolled.
+  const twoFactorEnrolled = (() => {
+    if (!user) return false;
+    try {
+      return multiFactor(user).enrolledFactors.length > 0;
+    } catch {
+      return false;
+    }
+  })();
+
   async function loadSessions() {
     setIsLoadingSessions(true);
     try {
@@ -438,14 +453,14 @@ export default function AccountPage() {
 <div>
 <div className="flex items-center justify-between border-b border-brand-border pb-4 mb-4">
 <span className="text-xs font-mono tracking-normal text-brand-cyan">App Connections &amp; Sync</span>
-<span className="text-xs font-mono text-brand-emerald flex items-center space-x-1.5">
-<span className="w-1.5 h-1.5 rounded-full bg-brand-emerald"></span>
-<span>All Synced</span>
+<span className={`text-xs font-mono flex items-center space-x-1.5 ${user ? 'text-brand-emerald' : 'text-slate-400'}`}>
+<span className={`w-1.5 h-1.5 rounded-full ${user ? 'bg-brand-emerald' : 'bg-slate-500'}`}></span>
+<span>{user ? 'Account linked' : 'Not signed in'}</span>
 </span>
 </div>
 {/*  Sync List  */}
 <div className="space-y-3 font-mono text-xs">
-{/*  Google App Account  */}
+{/*  Google App Account (real: reflects signed-in Firebase user)  */}
 <div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
 <div className="flex items-center space-x-3">
 <div className="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center font-bold text-slate-300">
@@ -460,37 +475,41 @@ export default function AccountPage() {
   {user ? 'Connected' : 'Not Connected'}
 </span>
 </div>
-{/*  MotorSignal Mobile App  */}
+{/*  Authenticated devices (real: from /api/account/sessions)  */}
 <div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
 <div className="flex items-center space-x-3">
 <div className="w-8 h-8 rounded-lg bg-cyan-500/15 text-brand-cyan flex items-center justify-center">
 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path></svg>
 </div>
 <div>
-<span className="text-white block font-sans font-medium">iOS Mobile App</span>
-<span className="text-slate-400 text-[11px]">iPhone 16 Pro • v4.1.0</span>
+<span className="text-white block font-sans font-medium">Authenticated Devices</span>
+<span className="text-slate-400 text-[11px]">
+  {!user ? 'Sign in to view linked devices' : isLoadingSessions ? 'Checking sessions…' : 'Manage in Active Device Sessions below'}
+</span>
 </div>
 </div>
-<span className="text-slate-400 text-[11px]">14m ago</span>
+<span className={`text-[11px] px-2 py-0.5 rounded border ${user && sessions.length > 0 ? 'text-brand-emerald bg-emerald-500/10 border-emerald-500/20' : 'text-slate-400 bg-slate-800 border-slate-700'}`}>
+  {!user ? '—' : isLoadingSessions ? '…' : `${sessions.length} active`}
+</span>
 </div>
-{/*  Comms / Cardo  */}
+{/*  Helmet comms / accessories — Bluetooth pairing is not observable from a browser  */}
 <div className="p-3 bg-brand-cardAlt/70 rounded-lg border border-brand-border flex items-center justify-between">
 <div className="flex items-center space-x-3">
 <div className="w-8 h-8 rounded-lg bg-slate-800 text-slate-300 flex items-center justify-center">
 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 100-6 3 3 0 000 6z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path></svg>
 </div>
 <div>
-<span className="text-white block font-sans font-medium">Helmet Comms Link</span>
-<span className="text-slate-400 text-[11px]">Cardo Packtalk Edge</span>
+<span className="text-white block font-sans font-medium">Helmet Comms &amp; Accessories</span>
+<span className="text-slate-400 text-[11px]">Bluetooth pairing is managed in the mobile app</span>
 </div>
 </div>
-<span className="text-brand-emerald text-[11px] bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">Paired</span>
+<span className="text-slate-400 text-[11px] bg-slate-800 px-2 py-0.5 rounded border border-slate-700">Unavailable on web</span>
 </div>
 </div>
 </div>
 <div className="pt-3 flex items-center justify-between text-xs font-mono">
 <span className="text-slate-400">Apple Watch Companion: <span className="text-slate-400 font-semibold">Not Connected (Unavailable on Web)</span></span>
-<button className="text-brand-cyan hover:underline font-sans font-medium">Manage Devices</button>
+<a href="#active-device-sessions" className="text-brand-cyan hover:underline font-sans font-medium">Manage Devices</a>
 </div>
 </div>
 </section>
@@ -498,7 +517,7 @@ export default function AccountPage() {
 {/*  BEGIN: SecurityAndSessionsGrid  */}
 <section className="grid grid-cols-1 lg:grid-cols-12 gap-6" data-purpose="security-and-session-management">
 {/*  Sessions (7 cols)  */}
-<div className="lg:col-span-7 glass-card rounded-xl border border-brand-border p-6" data-purpose="active-browser-sessions">
+<div id="active-device-sessions" className="lg:col-span-7 glass-card rounded-xl border border-brand-border p-6 scroll-mt-24" data-purpose="active-browser-sessions">
   <div className="flex items-center justify-between border-b border-brand-border pb-4 mb-4">
     <div>
       <h3 className="text-lg font-bold text-white">Active Device Sessions</h3>
@@ -600,27 +619,31 @@ export default function AccountPage() {
 </div>
 <FirebaseLink linked={!!user} />
 </div>
-{/*  2FA State  */}
+{/*  2FA State — reflects real Firebase multi-factor enrollment; enrollment is managed in the mobile app  */}
 <div className="flex items-center justify-between p-3 rounded-lg bg-brand-cardAlt border border-brand-border">
 <div>
 <span className="text-white font-bold block">Two-Factor Authentication (2FA)</span>
-<span className="text-slate-400 text-[11px]">Hardware TOTP Authenticator</span>
+<span className="text-slate-400 text-[11px]">{twoFactorEnrolled ? 'Authenticator enrolled' : 'Enroll in the mobile app'}</span>
 </div>
+{twoFactorEnrolled ? (
 <span className="text-brand-emerald bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 font-bold">ENABLED</span>
+) : (
+<span className="text-slate-400 bg-slate-800 px-2 py-0.5 rounded border border-slate-700 font-bold">NOT ENABLED</span>
+)}
 </div>
-{/*  Leaderboard Privacy  */}
+{/*  Leaderboard Privacy — managed in the mobile app; the web app has no privacy toggle backend  */}
 <div className="flex items-center justify-between p-3 rounded-lg bg-brand-cardAlt border border-brand-border">
 <div>
 <span className="text-white font-bold block">Telemetry Privacy Mode</span>
-<span className="text-slate-400 text-[11px]">Public Leaderboard (Club Trophies)</span>
+<span className="text-slate-400 text-[11px]">Leaderboard visibility is managed in the mobile app</span>
 </div>
-<button className="text-brand-cyan hover:underline">Change</button>
+<span className="text-slate-400 text-[11px] bg-slate-800 px-2 py-0.5 rounded border border-slate-700">In mobile app</span>
 </div>
 </div>
 </div>
 <div className="pt-4 border-t border-brand-border mt-4 flex items-center justify-between text-xs">
 <span className="text-slate-400 font-mono">Telemetry Data Retention: 100% Retained</span>
-<a className="text-brand-cyan hover:underline font-mono" href="/account">Security Logs</a>
+<a className="text-brand-cyan hover:underline font-mono" href="#active-device-sessions">Review active sessions</a>
 </div>
 </div>
 </section>
diff --git a/website/docs/WEBSITE_FEATURE_AUDIT_2026-10-14.md b/website/docs/WEBSITE_FEATURE_AUDIT_2026-10-14.md
new file mode 100644
index 0000000..59133f7
--- /dev/null
+++ b/website/docs/WEBSITE_FEATURE_AUDIT_2026-10-14.md
@@ -0,0 +1,124 @@
+# MotorSignal Website — Feature Audit Matrix
+
+Date: 2026-10-14
+Branch: `fix/website-production-hardening-20261014`
+Baseline: PR #36 integration HEAD `4931920` (`codex/master-consolidation-20261012`)
+Scope: `website/` only (Next.js 16.3.4 / React 19). Flutter, Drift, Firebase rules,
+Cloudflare Worker, and backend production code are out of scope.
+
+Method: classifications below are grounded in the current source (file:line evidence),
+not in filenames or prior docs. "Verified truthful" means the code was read and does a
+real backend operation (or honestly reports unavailability); it does **not** claim any
+live device / motorcycle validation.
+
+Legend — status: ✅ implemented & truthful · 🟠 partial · 🔴 broken / misleading ·
+🏷️ UI-only placeholder · 🔌 backend-dependent · 🗓️ deferred/roadmap.
+Severity: P0 security / data-integrity / misleading success · P1 broken core workflow ·
+P2 incomplete / usability · P3 roadmap.
+
+## Summary
+
+The PR #36 baseline is substantially real. Club governance writes, group-ride
+create/edit/delete/join, the garage/ride-history/export surface, device sessions, the
+billing-portal fallback, and the Formation Radar are all implemented against real
+Firestore/API paths or honestly report unavailability. The genuine defects are a focused
+set of **fake success / fabricated-as-real** spots plus the static Support page.
+
+| # | Defect | File | Severity | Status |
+|---|--------|------|----------|--------|
+| W1 | Rank "permission matrix" faked a save (setTimeout, no write) | `app/clubs/[clubId]/manage/ranks-roles/page.tsx`, `components/founder-portal/club-permission-matrix.tsx` | P0 | ✅ FIXED (commit c014c2f) |
+| W-2FA | Account shows "Two-Factor Authentication ENABLED" hardcoded for every signed-in user | `app/account/page.tsx:603-610` | P0 | 🔴 confirmed |
+| W-devices | Account shows hardcoded "iOS Mobile App iPhone 16 Pro v4.1.0 · 14m ago" and "Cardo Packtalk Edge · Paired" as real connected devices | `app/account/page.tsx:463-488` | P1 | 🔴 confirmed |
+| W-routes | Club routes: empty Firestore collection falls back to `FIXTURE_CLUB_ROUTES` (fake "Coastal Marshes" route + `/fixtures/routes/*.gpx`) in production | `lib/club-community.ts:265-268` | P1 | 🔴 confirmed |
+| W-chat | Club chat: empty channel falls back to `FIXTURE_CHAT_MESSAGES` in production | `lib/club-community.ts:443-447` | P1 | 🔴 confirmed |
+| W-metrics | Account dashboard `metrics` initialises to fabricated `12480 mi / 184 rides / 56.4°` before real data loads (persists if load fails) | `app/account/page.tsx:25` | P2 | 🟠 confirmed |
+| W2 | Support Center is a static hero + `mailto:` only — no FAQ, no validation, no ticketing | `app/support/page.tsx` | P2 | 🔴 confirmed |
+| W-deadctl | Dead/no-op controls: "Change" (telemetry privacy), "Manage Devices", "Security Logs"→`/account`, static "All Synced" | `app/account/page.tsx` | P2/P3 | 🟠 confirmed |
+
+## Feature matrix (by area)
+
+### Public site & navigation
+- Homepage `app/page.tsx` + `components/landing/*` — ✅ marketing content.
+  - 🟠 `components/landing/TelemetryStrip.tsx:10-11` and `app/features/page.tsx:15-20` use
+    `Math.random` for animated counters. Decorative marketing, not presented as a user's
+    real telemetry. P3 — acceptable but worth a "demo" label.
+- Navigation / responsive mobile nav `app/layout.tsx` — ⏳ not yet width-tested (Phase 8).
+
+### Authentication & account
+- Login / register / forgot-password / verify-email — ✅ real (`components/auth-form.tsx`,
+  `api/auth/[action]`); covered by `tests/auth-form.test.tsx`, `auth-recovery-verification`.
+- Account settings `app/account/page.tsx` — ✅ mostly real, with the W-2FA / W-devices /
+  W-metrics / W-deadctl defects above.
+- Device sessions `app/account/page.tsx` + `api/account/sessions` — ✅ real list, revoke &
+  revoke-all, pagination, truthful empty/loading states.
+- Subscription & billing — ✅ truthful: `/api/billing/portal` is unconfigured and the page
+  says so ("managed through the mobile app"); no fake success (`app/account/page.tsx:107-141`).
+
+### Garage & motorcycle management
+- `components/app-cloud-data.tsx` — ✅ real Firestore: add / edit / delete / make-primary /
+  photo upload (`users/{uid}/motorcycles`), image via `/api/motorcycle-image`.
+
+### Ride history, telemetry sessions & export
+- `components/app-cloud-data.tsx` — ✅ real rides from `users/{uid}/rides`, GPX & CSV export
+  handlers, delete, "Show more" pagination. CSV/GPX byte-integrity not yet re-verified (Phase 4/9).
+- Telemetry Forensic Replay `components/web-telemetry-replay-modal.tsx` — ⏳ not yet fully
+  audited (map tiles, progress, playback smoothness — Phase 4). Tests exist
+  (`tests/telemetry-replay-export.test.tsx`, `replay-recorded-data.test.tsx`).
+
+### Clubs / Founder Portal
+- Profile / access-settings / ownership-transfer / archive — ✅ real writes with owner/admin
+  authorization (`lib/club-data.ts`; demo branch uses labelled simulated latency only).
+- Applications approve/decline — ✅ real transactional writes.
+- Member rank assignment — ✅ real (`updateMemberRank`).
+- Rank permission matrix — ✅ FIXED (W1): now a truthful read-only reference.
+- Club routes — 🔴 W-routes fixture fallback.
+- Club chat / wall — 🔴 W-chat fixture fallback (wall send path not yet fully audited).
+
+### Group Rides
+- Public page `app/group-rides/page.tsx` — ✅ splits by auth: signed-out →
+  `GroupRidesShowcase` (clearly labelled "Sample Pack Formations" / "Radar Simulation"),
+  signed-in → `GroupRidesManagement`. Public path exposes no real private rides.
+- Authenticated Hub `components/group-rides/group-rides-management.tsx` — ✅ real:
+  `/api/group-rides` discovery + Firestore `onSnapshot`; create/edit/delete/join/leave write
+  to `group_rides`. 🟠 join/ride identifier generated client-side with `Math.random`
+  (`:1008`) — weak/non-authoritative; 🟠 `INITIAL_GROUP_RIDES` seeds initial state (replaced
+  on first snapshot; can linger if no Firestore). P2.
+- Address autocomplete / route distance / scheduling / join codes / QR — ⏳ not yet fully
+  audited (Phase 3).
+
+### Live Formation Radar
+- `components/group-rides/live-pack-radar.tsx` — ✅ truthful. Real rides subscribe to
+  Firestore `live_presence` with authorization + loading + error states and **no** fixture
+  fallback; `INITIAL_RADAR_RIDERS` is used only for the showcase/demo and is explicitly
+  labelled "Public Demonstration (Simulated Pack)" with "[Simulation Demo]" ping copy. The
+  historical dummy-data concern is already remediated in this baseline.
+
+### Device connections / hardware
+- 🔴 W-devices: account "App Connections" block hardcodes a connected iOS app and a paired
+  Cardo unit. Apple Watch row is truthful ("Not Connected (Unavailable on Web)").
+- Helmet Comms / GoPro / Apple Watch as first-class features — 🗓️ roadmap; must be labelled.
+
+### Support Center
+- 🔴 W2: `app/support/page.tsx` is one static hero + `mailto:`. No public ticket backend
+  exists (the `api/ops/support/tickets/*` routes are the internal operations console, not a
+  public endpoint). Phase 6 remediation: keep email fallback, add grounded FAQ + validated
+  contact UX; do not simulate ticket submission.
+
+### Operations console (`app/api/ops/*`, `components/ops/*`, `app/admin`)
+- Out of the brief's feature list; appears to be a separate internal console. Not modified.
+
+## Remaining P0–P3 work (website)
+
+- **P0** — W-2FA (false security state). Fix: show real MFA state / "managed in mobile app",
+  never a hardcoded "ENABLED".
+- **P1** — W-devices, W-routes, W-chat (fabricated-as-real). Fix: real state or truthful
+  empty/unavailable; never fixtures in production paths.
+- **P2** — W2 Support (FAQ + validation, email fallback), W-metrics (init to loading/0),
+  W-deadctl (wire or remove dead controls), group-ride client-side id generation, mobile
+  responsiveness pass (Phase 8), telemetry replay deep audit (Phase 4).
+- **P3** — marketing `Math.random` counters (label as demo), hardware roadmap labelling.
+
+## Open product questions (do not block P0/P1 truthfulness fixes)
+1. Support: confirm no public ticket backend is planned for this release (default: email + FAQ).
+2. Device-connections block: remove, or convert to a truthful "manage in mobile app" state?
+3. Club routes/chat empty states: plain empty state, or keep clearly-labelled "example" content?
diff --git a/website/tests/account-truthful-states.test.tsx b/website/tests/account-truthful-states.test.tsx
new file mode 100644
index 0000000..cc47479
--- /dev/null
+++ b/website/tests/account-truthful-states.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import AccountPage from '../app/account/page';
+
+// Account page only needs next/navigation stubbed; firebase-client initialises under the
+// staging test env and reports a signed-out user (onAuthStateChanged -> null).
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/account',
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }),
+}));
+
+describe('WEB-W1b/W-2FA/W-devices: account page truthful states', () => {
+  it('does not fabricate a connected mobile device, paired comms, or sync status', async () => {
+    render(<AccountPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('App Connections & Sync')).toBeDefined();
+    });
+
+    // Fabricated device/pairing claims must be gone.
+    expect(screen.queryByText(/iPhone 16 Pro/)).toBeNull();
+    expect(screen.queryByText(/Cardo Packtalk Edge/)).toBeNull();
+    expect(screen.queryByText(/^Paired$/)).toBeNull();
+    expect(screen.queryByText(/^14m ago$/)).toBeNull();
+    expect(screen.queryByText(/^All Synced$/)).toBeNull();
+
+    // Truthful states are present instead.
+    expect(screen.getByText('Authenticated Devices')).toBeDefined();
+    expect(screen.getByText('Helmet Comms & Accessories')).toBeDefined();
+    expect(screen.getAllByText(/Unavailable on web/i).length).toBeGreaterThan(0);
+  });
+
+  it('never shows 2FA as ENABLED unless a factor is actually enrolled (signed-out = NOT ENABLED)', async () => {
+    render(<AccountPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Two-Factor Authentication (2FA)')).toBeDefined();
+    });
+
+    // Exact-match: the badge node reads "NOT ENABLED" for a user with no enrolled factor,
+    // so an exact "ENABLED" node must not exist.
+    expect(screen.getByText('NOT ENABLED')).toBeDefined();
+    expect(screen.queryByText('ENABLED')).toBeNull();
+  });
+});

From 2cb3ef9694106f113941f8079d8c26fa534576aa Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:08:15 -0400
Subject: [PATCH 03/12] fix(website): label fallback club routes and chat as
 examples (W-routes, W-chat)

When a club has no curated routes or a chat channel has no messages, the data layer
returned fixture content with no indication it was sample data, so riders could mistake
MotorSignal's "Coastal Marshes" route or canned chat messages for their club's real data.

Flag fixture-sourced content and label it in the UI:
- Add isExample to ClubRoute and ChatMessage; set it on every fixture fallback path
  (empty Firestore collection/channel and the dev demo preview).
- Founder Routes: amber "Examples" count, an explanatory banner, and a per-card "Example"
  badge when the routes shown are samples.
- Founder Chat: an "Example thread" pill (instead of "Live Connected") and a banner when
  the only messages are examples, so the header never claims a live conversation that
  does not exist.

Tests: example-labelled routes render the banner/badge/count; example-labelled chat
renders the banner and "Example thread" pill and does not claim "Live Connected".
Existing route/chat tests (real data, no isExample) remain green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../founder-portal/founder-chat.tsx           | 28 ++++++++++---
 .../founder-portal/founder-routes.tsx         | 35 +++++++++++++---
 website/lib/club-community.ts                 | 16 ++++---
 website/tests/founder-routes-chat.test.tsx    | 42 +++++++++++++++++++
 4 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/website/components/founder-portal/founder-chat.tsx b/website/components/founder-portal/founder-chat.tsx
index 1e54c20..1707e08 100644
--- a/website/components/founder-portal/founder-chat.tsx
+++ b/website/components/founder-portal/founder-chat.tsx
@@ -60,6 +60,7 @@ export function FounderChat({ context }: FounderChatProps) {
 
   const activeChannel = CHANNELS.find((c) => c.id === activeChannelId) || CHANNELS[0];
   const isRestrictedChannel = activeChannel.requiresOfficer && !isOfficer;
+  const hasExampleMessages = messages.length > 0 && messages.every((m) => m.isExample);
 
   useEffect(() => {
     setError(null);
@@ -67,7 +68,7 @@ export function FounderChat({ context }: FounderChatProps) {
 
     if (isDemoFixture) {
       const channelMsgs = FIXTURE_CHAT_MESSAGES[activeChannelId] || [];
-      setMessages(channelMsgs.map((m) => ({ ...m, clubId: club.id, channelId: activeChannelId })));
+      setMessages(channelMsgs.map((m) => ({ ...m, clubId: club.id, channelId: activeChannelId, isExample: true })));
     } else {
       unsubscribe = subscribeClubChat(
         club.id,
@@ -143,10 +144,17 @@ export function FounderChat({ context }: FounderChatProps) {
             <h1 className="font-heading text-2xl font-bold tracking-wide text-white">
               Squad Live Chat
             </h1>
-            <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 font-semibold flex items-center gap-1.5">
-              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-              Live Connected
-            </span>
+            {hasExampleMessages ? (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold flex items-center gap-1.5">
+                <span className="material-symbols-outlined text-[14px]">visibility</span>
+                Example thread
+              </span>
+            ) : (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 font-semibold flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                Live Connected
+              </span>
+            )}
           </div>
           <p className="font-body text-xs text-slate-400 mt-1 max-w-xl">
             Real-time squad channels for ride organization, road condition warnings, and administrative officer discussions.
@@ -179,6 +187,16 @@ export function FounderChat({ context }: FounderChatProps) {
         </div>
       </div>
 
+      {hasExampleMessages && (
+        <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-200/90 text-xs flex items-center gap-2.5">
+          <span className="material-symbols-outlined text-[16px] text-amber-400 shrink-0">info</span>
+          <span>
+            These are <strong className="font-semibold text-amber-100">example messages</strong> — this
+            channel has no posts yet. Send a message to start the real conversation.
+          </span>
+        </div>
+      )}
+
       {error && (
         <div className="p-4 rounded-xl bg-brand-crimson/10 border border-brand-crimson/30 text-brand-crimson text-xs flex items-center justify-between">
           <span className="flex items-center gap-2">
diff --git a/website/components/founder-portal/founder-routes.tsx b/website/components/founder-portal/founder-routes.tsx
index 9c5c2b5..d4c0a13 100644
--- a/website/components/founder-portal/founder-routes.tsx
+++ b/website/components/founder-portal/founder-routes.tsx
@@ -178,6 +178,8 @@ export function FounderRoutes({ context }: FounderRoutesProps) {
 
   const canCurate = permissions.canPlanRides || permissions.canManageSettings;
 
+  const hasExampleRoutes = routes.length > 0 && routes.every((r) => r.isExample);
+
   return (
     <div className="w-full space-y-6">
       {/* Top Header Card */}
@@ -187,8 +189,14 @@ export function FounderRoutes({ context }: FounderRoutesProps) {
             <h1 className="font-heading text-2xl font-bold tracking-wide text-white">
               Curated Club Routes
             </h1>
-            <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-brand-cyan/15 text-brand-cyan border border-brand-cyan/30 font-semibold">
-              {routes.length} Available
+            <span
+              className={`font-mono text-xs px-2.5 py-0.5 rounded-full border font-semibold ${
+                hasExampleRoutes
+                  ? 'bg-amber-500/15 text-amber-300 border-amber-500/30'
+                  : 'bg-brand-cyan/15 text-brand-cyan border-brand-cyan/30'
+              }`}
+            >
+              {hasExampleRoutes ? `${routes.length} Examples` : `${routes.length} Available`}
             </span>
           </div>
           <p className="font-body text-xs text-slate-400 mt-1 max-w-xl">
@@ -207,6 +215,16 @@ export function FounderRoutes({ context }: FounderRoutesProps) {
         )}
       </div>
 
+      {hasExampleRoutes && (
+        <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-200/90 text-xs flex items-center gap-2.5">
+          <span className="material-symbols-outlined text-[16px] text-amber-400 shrink-0">info</span>
+          <span>
+            These are <strong className="font-semibold text-amber-100">example routes</strong> — your club
+            hasn&rsquo;t curated any yet. Curate a route to replace them with your own.
+          </span>
+        </div>
+      )}
+
       {error && (
         <div className="p-4 rounded-xl bg-brand-crimson/10 border border-brand-crimson/30 text-brand-crimson text-xs flex items-center justify-between">
           <span className="flex items-center gap-2">
@@ -314,9 +332,16 @@ export function FounderRoutes({ context }: FounderRoutesProps) {
                 <div className="space-y-3">
                   {/* Card Header & Badge */}
                   <div className="flex items-start justify-between gap-2">
-                    <h3 className="font-heading text-base font-bold text-white leading-snug">
-                      {route.title}
-                    </h3>
+                    <div className="min-w-0">
+                      <h3 className="font-heading text-base font-bold text-white leading-snug">
+                        {route.title}
+                      </h3>
+                      {route.isExample && (
+                        <span className="inline-flex items-center gap-1 mt-1 font-mono text-[9px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold uppercase tracking-wider">
+                          Example
+                        </span>
+                      )}
+                    </div>
                     <span
                       className={`shrink-0 font-mono text-[10px] px-2 py-0.5 rounded font-semibold border ${
                         isHighCurvature
diff --git a/website/lib/club-community.ts b/website/lib/club-community.ts
index 2bdbc5c..647ca7f 100644
--- a/website/lib/club-community.ts
+++ b/website/lib/club-community.ts
@@ -198,6 +198,8 @@ export interface ClubRoute {
   curatorUid: string;
   curatorName: string;
   createdAt: string;
+  /** True when this is MotorSignal sample/example content, not a real club-curated route. */
+  isExample?: boolean;
 }
 
 export const FIXTURE_CLUB_ROUTES: ClubRoute[] = [
@@ -256,15 +258,16 @@ export const FIXTURE_CLUB_ROUTES: ClubRoute[] = [
 
 export async function fetchClubRoutes(clubId: string, options?: { allowDemoPreview?: boolean }): Promise<ClubRoute[]> {
   if (options?.allowDemoPreview) {
-    return FIXTURE_CLUB_ROUTES.map((r) => ({ ...r, clubId }));
+    return FIXTURE_CLUB_ROUTES.map((r) => ({ ...r, clubId, isExample: true }));
   }
   callerUid();
   const routesRef = collection(firestore, 'clubs', clubId, 'routes');
   const q = query(routesRef, orderBy('createdAt', 'desc'), limit(50));
   const snap = await getDocs(q);
   if (snap.empty) {
-    // Return sample starter routes if no custom routes have been uploaded
-    return FIXTURE_CLUB_ROUTES.map((r) => ({ ...r, clubId }));
+    // No custom routes uploaded yet: surface sample starter routes, explicitly flagged as
+    // examples so the UI can label them and they are never mistaken for real club routes.
+    return FIXTURE_CLUB_ROUTES.map((r) => ({ ...r, clubId, isExample: true }));
   }
   return snap.docs.map((d) => {
     const data = d.data();
@@ -358,6 +361,8 @@ export interface ChatMessage {
   authorRole: ClubRole;
   content: string;
   createdAt: string;
+  /** True when this is MotorSignal sample/example content, not a real posted message. */
+  isExample?: boolean;
 }
 
 export const FIXTURE_CHAT_MESSAGES: Record<string, ChatMessage[]> = {
@@ -441,9 +446,10 @@ export function subscribeClubChat(
     q,
     (snap) => {
       if (snap.empty) {
-        // Fallback to fixture messages if channel has no messages yet
+        // No messages in this channel yet: surface sample messages, explicitly flagged as
+        // examples so the UI can label them and they are never mistaken for real posts.
         const initial = FIXTURE_CHAT_MESSAGES[channelId] || [];
-        onMessages(initial.map((m) => ({ ...m, clubId, channelId })));
+        onMessages(initial.map((m) => ({ ...m, clubId, channelId, isExample: true })));
         return;
       }
       const msgs: ChatMessage[] = snap.docs.map((d) => {
diff --git a/website/tests/founder-routes-chat.test.tsx b/website/tests/founder-routes-chat.test.tsx
index 625c276..fbb481b 100644
--- a/website/tests/founder-routes-chat.test.tsx
+++ b/website/tests/founder-routes-chat.test.tsx
@@ -250,6 +250,18 @@ describe('Founder Routes Management', () => {
       expect(mocks.deleteRoute).toHaveBeenCalledWith('ClubID', 'r1');
     });
   });
+
+  // WEB-W-routes regression: fixture fallback routes must be labelled as examples so a
+  // rider can never mistake sample content for the club's real curated routes.
+  it('labels example routes when the club has none of its own', async () => {
+    mocks.fetchRoutes.mockResolvedValue(sampleRoutes.map((r) => ({ ...r, isExample: true })));
+    render(<FounderRoutes context={mockContext} />);
+    await screen.findByText('Blood Mountain Gap Loop');
+
+    expect(screen.getByText(/example routes/i)).toBeDefined();
+    expect(screen.getByText(/Examples$/)).toBeDefined();
+    expect(screen.getAllByText('Example').length).toBeGreaterThanOrEqual(1);
+  });
 });
 
 describe('Founder Chat Management', () => {
@@ -296,6 +308,36 @@ describe('Founder Chat Management', () => {
     });
   });
 
+  // WEB-W-chat regression: fixture fallback messages must be labelled as examples and the
+  // header must not claim a live connection when only sample content is shown.
+  it('labels example messages when the channel has no real posts', async () => {
+    mocks.subscribeChat.mockImplementation((_clubId, _channelId, onMessages) => {
+      onMessages([
+        {
+          id: 'example-msg-1',
+          clubId: 'ClubID',
+          channelId: 'general',
+          authorUid: 'owner',
+          authorDisplayName: 'Morgan Vance',
+          authorHandle: '@morgan_v',
+          authorDisplayRank: 'President',
+          authorRole: 'owner',
+          content: 'Welcome to squad chat!',
+          createdAt: '2026-06-01T12:00:00Z',
+          isExample: true,
+        },
+      ]);
+      return vi.fn();
+    });
+
+    render(<FounderChat context={mockContext} />);
+    await screen.findByText('Welcome to squad chat!');
+
+    expect(screen.getByText('Example thread')).toBeDefined();
+    expect(screen.getByText(/example messages/i)).toBeDefined();
+    expect(screen.queryByText('Live Connected')).toBeNull();
+  });
+
   it('restricts Officers Lounge channel for non-officers', async () => {
     const memberContext: FounderClubContext = {
       ...mockContext,

From 3cd8bbefa37ca6f030ec7dce3b8be394bea0c17a Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:11:20 -0400
Subject: [PATCH 04/12] feat(website): grounded FAQ and validated contact on
 Support Center (W2)

The Support page was a single static line plus a mailto link. There is no public
ticket backend (only the internal ops console), so rather than simulate ticket
submission, improve the page truthfully:
- Add an FAQ grounded in features that actually ship (offline recording/sync,
  billing + 2FA managed in the mobile app, GPX/CSV export, session revocation,
  radar live-presence rules, public vs authenticated group rides).
- Add a validated contact form (name/email/topic/message) that opens a prefilled
  email in the visitor's own client. It never claims a ticket was filed and states
  plainly that the message is not sent until the visitor sends it.
- Keep support@motorsignal.app as the real, working fallback channel.
- Preserve the existing public-page visual system (content-page / eyebrow / faq-section).

Tests: FAQ + real mailto render; invalid input shows validation errors and no
submission claim; valid input opens a mailto (no simulated ticket) with the topic
and email encoded.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 website/app/support/page.tsx                |  73 +++++++++-
 website/components/support-contact-form.tsx | 153 ++++++++++++++++++++
 website/tests/support-contact.test.tsx      |  74 ++++++++++
 3 files changed, 299 insertions(+), 1 deletion(-)
 create mode 100644 website/components/support-contact-form.tsx
 create mode 100644 website/tests/support-contact.test.tsx

diff --git a/website/app/support/page.tsx b/website/app/support/page.tsx
index 4e09c33..7539bc3 100644
--- a/website/app/support/page.tsx
+++ b/website/app/support/page.tsx
@@ -1 +1,72 @@
-export default function SupportPage() { return <section className="hero"><span className="eyebrow">Support</span><h1>Help for the road ahead.</h1><p>Account and product support will be available here as the MotorSignal web platform comes online.</p><a className="button" href="mailto:support@motorsignal.app">Contact support</a></section>; }
+import { SupportContactForm } from '../../components/support-contact-form';
+
+const SUPPORT_EMAIL = 'support@motorsignal.app';
+
+// Grounded in features that actually ship today. Keep answers truthful: anything managed
+// only in the mobile app, or not yet available on the web, is stated plainly.
+const FAQ: { q: string; a: string }[] = [
+  {
+    q: 'Can I use MotorSignal without an internet connection?',
+    a: 'Yes. Ride recording and telemetry run on-device, so you can record offline and while signed out. Your rides sync to the cloud once you are signed in and back online — nothing is lost in the meantime.',
+  },
+  {
+    q: 'How do I manage my subscription or find my invoices?',
+    a: 'Subscriptions, payment methods, and invoices are managed in the MotorSignal mobile app. The web billing portal is not available yet, so the Account page will point you to the app for billing changes.',
+  },
+  {
+    q: 'How do I turn on two-factor authentication (2FA)?',
+    a: 'Two-factor authentication is enrolled in the mobile app. The web Account page reflects your real 2FA status — it will show “Enabled” only once a factor is actually enrolled.',
+  },
+  {
+    q: 'Can I export my ride data?',
+    a: 'Yes. On the web Account page, each ride can be exported as a GPX track or a CSV of its telemetry. Your historical exports are not altered after the fact.',
+  },
+  {
+    q: 'How do I sign out other devices or browsers?',
+    a: 'Open Account → Active Device Sessions. You can revoke an individual session, or revoke all sessions at once. The session you are currently using is marked “this device”.',
+  },
+  {
+    q: 'Why don’t I see live riders on the web radar?',
+    a: 'The Formation Radar shows live rider positions only for a group ride you are an accepted participant in. Outside of that it displays a clearly labelled demonstration, not real riders.',
+  },
+  {
+    q: 'What’s the difference between the public Group Rides page and my hub?',
+    a: 'Signed out, the Group Rides page is a public showcase with sample formations. Signed in, it becomes your hub where you create, manage, join, and leave real rides.',
+  },
+];
+
+export default function SupportPage() {
+  return (
+    <section className="content-page">
+      <span className="eyebrow">Support</span>
+      <h1>Help for the road ahead.</h1>
+      <p>
+        Search the answers below for the quickest fix. If you still need a hand, send us an email and
+        we&rsquo;ll get back to you.
+      </p>
+
+      <div className="panel" style={{ marginTop: 28 }}>
+        <h2>Contact support</h2>
+        <p>
+          Reach the team at{' '}
+          <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>. Prefer a form? Fill this in and it will
+          open a prefilled email for you to send.
+        </p>
+        <div style={{ marginTop: 20 }}>
+          <SupportContactForm />
+        </div>
+      </div>
+
+      <div className="faq-section">
+        <span className="eyebrow">Common questions</span>
+        <h2>Frequently asked</h2>
+        {FAQ.map((item) => (
+          <details key={item.q}>
+            <summary>{item.q}</summary>
+            <p>{item.a}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/website/components/support-contact-form.tsx b/website/components/support-contact-form.tsx
new file mode 100644
index 0000000..9bc6c9f
--- /dev/null
+++ b/website/components/support-contact-form.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import React, { useState } from 'react';
+
+const SUPPORT_EMAIL = 'support@motorsignal.app';
+
+const CATEGORIES = [
+  'Account & sign-in',
+  'Subscription & billing',
+  'Group rides',
+  'Clubs',
+  'Telemetry & ride data',
+  'Bug report',
+  'Something else',
+] as const;
+
+type Errors = { name?: string; email?: string; message?: string };
+
+// Public support contact. There is no public ticket backend, so this never claims a
+// ticket was filed: it validates input and opens the visitor's own email client with a
+// prefilled message. Email remains the real, working support channel.
+export function SupportContactForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [category, setCategory] = useState<(typeof CATEGORIES)[number]>(CATEGORIES[0]);
+  const [message, setMessage] = useState('');
+  const [errors, setErrors] = useState<Errors>({});
+  const [opened, setOpened] = useState(false);
+
+  function validate(): Errors {
+    const next: Errors = {};
+    if (!name.trim()) next.name = 'Please tell us your name.';
+    // Pragmatic email check: a single @ with a dot in the domain.
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
+      next.email = 'Enter a valid email address so we can reply.';
+    }
+    if (message.trim().length < 10) {
+      next.message = 'Add a few more details (at least 10 characters).';
+    }
+    return next;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const found = validate();
+    setErrors(found);
+    if (Object.keys(found).length > 0) {
+      setOpened(false);
+      return;
+    }
+
+    const subject = `[${category}] Support request from ${name.trim()}`;
+    const body =
+      `Name: ${name.trim()}\n` +
+      `Email: ${email.trim()}\n` +
+      `Category: ${category}\n\n` +
+      `${message.trim()}\n`;
+    const mailto = `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+
+    // Open the visitor's email client. We do not and cannot confirm delivery here.
+    if (typeof window !== 'undefined') {
+      window.location.href = mailto;
+    }
+    setOpened(true);
+  }
+
+  const inputClass =
+    'w-full px-3.5 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant/40 focus:border-primary-container focus:ring-1 focus:ring-primary-container text-white text-sm outline-none transition placeholder:text-slate-500';
+
+  return (
+    <form className="space-y-4 text-left" onSubmit={handleSubmit} noValidate>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="space-y-1.5">
+          <label htmlFor="support-name" className="block text-xs font-mono tracking-wide text-on-surface-variant">
+            Your name
+          </label>
+          <input
+            id="support-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className={inputClass}
+            placeholder="Alex Rider"
+            aria-invalid={Boolean(errors.name)}
+          />
+          {errors.name && <p className="form-error" role="alert">{errors.name}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <label htmlFor="support-email" className="block text-xs font-mono tracking-wide text-on-surface-variant">
+            Email
+          </label>
+          <input
+            id="support-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className={inputClass}
+            placeholder="you@example.com"
+            aria-invalid={Boolean(errors.email)}
+          />
+          {errors.email && <p className="form-error" role="alert">{errors.email}</p>}
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="support-category" className="block text-xs font-mono tracking-wide text-on-surface-variant">
+          Topic
+        </label>
+        <select
+          id="support-category"
+          value={category}
+          onChange={(e) => setCategory(e.target.value as (typeof CATEGORIES)[number])}
+          className={inputClass}
+        >
+          {CATEGORIES.map((c) => (
+            <option key={c} value={c}>{c}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="support-message" className="block text-xs font-mono tracking-wide text-on-surface-variant">
+          How can we help?
+        </label>
+        <textarea
+          id="support-message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={5}
+          className={inputClass}
+          placeholder="Describe what you ran into, including your device and app version if relevant."
+          aria-invalid={Boolean(errors.message)}
+        />
+        {errors.message && <p className="form-error" role="alert">{errors.message}</p>}
+      </div>
+
+      <button type="submit" className="button">Compose support email</button>
+
+      {opened && (
+        <p className="form-message" role="status">
+          Your email app should have opened with the details filled in. If nothing happened, email{' '}
+          <a className="underline" href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> directly.
+        </p>
+      )}
+
+      <p className="form-divider">
+        This opens your own email app — we don&rsquo;t submit a ticket on your behalf, so your message
+        isn&rsquo;t sent until you send it.
+      </p>
+    </form>
+  );
+}
diff --git a/website/tests/support-contact.test.tsx b/website/tests/support-contact.test.tsx
new file mode 100644
index 0000000..eabe85a
--- /dev/null
+++ b/website/tests/support-contact.test.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import SupportPage from '../app/support/page';
+import { SupportContactForm } from '../components/support-contact-form';
+
+describe('WEB-W2: public Support Center', () => {
+  afterEach(cleanup);
+
+  it('renders a grounded FAQ and a real email contact channel', () => {
+    render(<SupportPage />);
+    expect(screen.getByText('Frequently asked')).toBeDefined();
+    expect(screen.getByText(/Can I export my ride data\?/i)).toBeDefined();
+    expect(screen.getByText(/How do I turn on two-factor authentication/i)).toBeDefined();
+    // Email fallback is present as a real mailto link.
+    const mailLinks = screen.getAllByRole('link', { name: /support@motorsignal\.app/i });
+    expect(mailLinks.length).toBeGreaterThan(0);
+    expect(mailLinks[0].getAttribute('href')).toBe('mailto:support@motorsignal.app');
+  });
+
+  it('validates input and does not claim any submission on invalid data', () => {
+    render(<SupportContactForm />);
+    fireEvent.click(screen.getByRole('button', { name: /Compose support email/i }));
+
+    expect(screen.getByText(/tell us your name/i)).toBeDefined();
+    expect(screen.getByText(/valid email address/i)).toBeDefined();
+    expect(screen.getByText(/at least 10 characters/i)).toBeDefined();
+    // No success/opened confirmation on invalid submit.
+    expect(screen.queryByText(/email app should have opened/i)).toBeNull();
+    // Truthful disclaimer is always present.
+    expect(screen.getByText(/don.?t submit a ticket on your behalf/i)).toBeDefined();
+  });
+
+  it('opens a prefilled email (no simulated ticket) when the form is valid', () => {
+    const originalLocation = window.location;
+    const hrefSpy = vi.fn();
+    // Replace window.location with a mock that records href assignments.
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        set href(value: string) {
+          hrefSpy(value);
+        },
+        get href() {
+          return '';
+        },
+      },
+    });
+
+    try {
+      render(<SupportContactForm />);
+      fireEvent.change(screen.getByLabelText('Your name'), { target: { value: 'Alex Rider' } });
+      fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'alex@example.com' } });
+      fireEvent.change(screen.getByLabelText('Topic'), { target: { value: 'Bug report' } });
+      fireEvent.change(screen.getByLabelText(/How can we help/i), {
+        target: { value: 'The replay map tiles are not loading on my ride.' },
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /Compose support email/i }));
+
+      expect(hrefSpy).toHaveBeenCalledTimes(1);
+      const url = hrefSpy.mock.calls[0][0] as string;
+      expect(url.startsWith('mailto:support@motorsignal.app?')).toBe(true);
+      expect(decodeURIComponent(url)).toContain('[Bug report]');
+      expect(decodeURIComponent(url)).toContain('alex@example.com');
+      expect(screen.getByText(/email app should have opened/i)).toBeDefined();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+});

From 4eb2075c7ac01085d5e3751ee87a5c01cba585d2 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:12:02 -0400
Subject: [PATCH 05/12] docs(website): device-connections backend contract for
 the full "build real" feed (W-devices)

Documents the blocker: a richer connected-devices panel (platform, app version, last-seen,
accessory pairing) needs a FastAPI endpoint that does not exist yet. Records the proposed
GET /api/v1/account/connections contract and the website wiring to adopt it, and notes what
already shipped truthfully without a backend change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../backend-contracts/device-connections.md   | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 website/docs/backend-contracts/device-connections.md

diff --git a/website/docs/backend-contracts/device-connections.md b/website/docs/backend-contracts/device-connections.md
new file mode 100644
index 0000000..4499655
--- /dev/null
+++ b/website/docs/backend-contracts/device-connections.md
@@ -0,0 +1,65 @@
+# Backend Contract Proposal — Device Connections feed (W-devices)
+
+Status: **Partially implemented.** The website now shows the device/connection data it can
+truthfully obtain today. A richer "connected devices" view (platform, app version, last-seen,
+accessory pairing) needs a backend feed that does not exist yet.
+
+## What shipped on the website (no backend change)
+
+The account page "App Connections & Sync" block previously hardcoded a connected iOS app
+("iPhone 16 Pro", "v4.1.0", "14m ago") and a paired "Cardo Packtalk Edge". These were
+fabricated. They are now replaced with truthful, real-data states:
+
+- **Google account** — reflects the signed-in Firebase user (real).
+- **Authenticated devices** — count comes from the real `/api/account/sessions` feed
+  (proxied to `${MOTORSIGNAL_API_BASE_URL}/api/v1/auth/sessions`), already rendered in
+  detail in the Active Device Sessions panel.
+- **Helmet comms & accessories** — "Unavailable on web": a browser cannot observe Bluetooth
+  pairing. Managed in the mobile app.
+- **Apple Watch** — "Unavailable on web" (unchanged, already truthful).
+
+## Why the full feature needs a backend
+
+A browser cannot see a rider's paired Bluetooth hardware, installed mobile app build, or
+device platform. Those facts live on the device and in MotorSignal's backend. The auth
+sessions feed is close but does not classify platform / app version / accessory pairing.
+
+Delivering a true "connected devices" panel therefore requires a backend endpoint (FastAPI;
+out of scope for the website task and must be authorized separately).
+
+## Proposed contract
+
+Endpoint: `GET ${MOTORSIGNAL_API_BASE_URL}/api/v1/account/connections`
+Auth: Bearer access token (same as the sessions endpoint).
+
+```jsonc
+{
+  "devices": [
+    {
+      "id": "string",
+      "kind": "mobile_app | web_session | accessory",
+      "platform": "ios | android | web | null",
+      "label": "iPhone 16 Pro",          // human-friendly, backend-provided
+      "appVersion": "4.1.0 | null",
+      "lastSeenAt": "ISO-8601 | null",
+      "pairingStatus": "paired | disconnected | null", // accessories only
+      "current": false
+    }
+  ]
+}
+```
+
+Rules:
+- The backend is the only source of platform / app version / accessory pairing. The web
+  client must render exactly what it returns and must never infer or fabricate these.
+- Absent/empty feed → truthful empty state ("No linked devices"), never sample data.
+- Accessory (Cardo/Sena/GoPro/Apple Watch) rows appear only if the backend reports them;
+  otherwise the web continues to show "Unavailable on web".
+
+## Website wiring once the endpoint exists
+
+1. Add `fetchConnections()` to a lib module, proxied like `/api/account/sessions`.
+2. Replace the current heuristic "Authenticated devices" row with the real feed, grouping by
+   `kind`, showing `label`, `appVersion`, and relative `lastSeenAt`.
+3. Add tests for: real feed rendering, empty feed → empty state, and no fabrication when the
+   endpoint is unavailable.

From ae1980b4ed7bca9c53ac4e5da24ed567ad741efb Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:36:07 -0400
Subject: [PATCH 06/12] fix(website): synchronize telemetry replay playback
 with recorded time (Phase 4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The replay loop advanced the cursor by one sample every 50 ms / speed, assuming a uniform
20 Hz stream. Recorded telemetry is not always uniform (segment breaks and GPS-loss gaps up
to 5 s), so the rider marker drifted out of sync with the elapsed-time readout — which is
derived from real timestamps — and "1x" did not match real time across gaps.

Make playback timestamp-driven:
- Add advancePlaybackIndex(points, fromIndex, budgetMs): a pure helper that consumes a
  budget of virtual recorded time, advancing by the real delta between samples so the
  marker tracks the elapsed-time clock. Disconnected transitions (per
  areTelemetryPointsConnected) are compressed to a single 50 ms step so playback never
  stalls across multi-second dead time. No coordinates are altered.
- Drive the rAF loop with frameDelta * playbackSpeed plus carry-over, resuming from an
  index ref so manual scrubs are honored.

Verified sound without changes: SHA-256-checked R2/inline telemetry load, CSV/GPX parse and
export integrity, loading/error/empty overlays, and tile-provider fallback.

Tests: advancePlaybackIndex covers uniform cadence, carry-over, gap compression, end-clamp,
and empty input. Existing replay/export/corner tests remain green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/web-telemetry-replay-modal.tsx | 44 +++++++-----
 website/lib/telemetry-track.ts                | 35 ++++++++++
 website/tests/telemetry-playback-sync.test.ts | 69 +++++++++++++++++++
 3 files changed, 132 insertions(+), 16 deletions(-)
 create mode 100644 website/tests/telemetry-playback-sync.test.ts

diff --git a/website/components/web-telemetry-replay-modal.tsx b/website/components/web-telemetry-replay-modal.tsx
index d97e489..9349b81 100644
--- a/website/components/web-telemetry-replay-modal.tsx
+++ b/website/components/web-telemetry-replay-modal.tsx
@@ -12,7 +12,7 @@ import {
   analyzeCorners,
 } from '../lib/telemetry-export';
 import { firebaseAuth } from '../lib/firebase-client';
-import { areTelemetryPointsConnected, normalizeTelemetryPoints } from '../lib/telemetry-track';
+import { areTelemetryPointsConnected, normalizeTelemetryPoints, advancePlaybackIndex } from '../lib/telemetry-track';
 import { getAwsSatelliteTileUrl, AWS_MAPS_ATTRIBUTION } from '../lib/aws-maps';
 
 interface WebTelemetryReplayModalProps {
@@ -119,10 +119,18 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
 
   const animationFrameRef = useRef<number | null>(null);
   const lastTimeRef = useRef<number | null>(null);
+  const indexRef = useRef(0);
+  const playbackCarryRef = useRef(0);
 
   const totalPoints = points.length;
   const currentPoint = points[currentIndex] || points[0];
 
+  // Keep a ref mirror of the cursor so the rAF loop resumes from the latest position
+  // (including manual scrubs) without re-subscribing every index change.
+  useEffect(() => {
+    indexRef.current = currentIndex;
+  }, [currentIndex]);
+
   // Dynamically load Leaflet library and CSS with multi-CDN fallback
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -611,30 +619,34 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
     }
   };
 
-  // Handle Playback Loop
+  // Handle Playback Loop — timestamp-driven so the rider marker stays synchronized with the
+  // elapsed-time readout. Advances by real recorded time scaled by playbackSpeed; disconnected
+  // gaps are compressed by advancePlaybackIndex so playback never stalls across dead time.
   useEffect(() => {
     if (!isPlaying) {
       if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
       lastTimeRef.current = null;
+      playbackCarryRef.current = 0;
       return;
     }
 
     const animate = (timestamp: number) => {
-      if (!lastTimeRef.current) lastTimeRef.current = timestamp;
-      const delta = timestamp - lastTimeRef.current;
+      if (lastTimeRef.current == null) lastTimeRef.current = timestamp;
+      const frameDelta = timestamp - lastTimeRef.current;
+      lastTimeRef.current = timestamp;
 
-      // 20 Hz step interval is 50 ms. With playback multiplier:
-      const stepInterval = 50 / playbackSpeed;
+      // Virtual recorded-time budget to consume this frame, at the selected speed.
+      const budget = frameDelta * playbackSpeed + playbackCarryRef.current;
+      const { index, remainingMs } = advancePlaybackIndex(points, indexRef.current, budget);
+      playbackCarryRef.current = index >= totalPoints - 1 ? 0 : remainingMs;
 
-      if (delta >= stepInterval) {
-        lastTimeRef.current = timestamp;
-        setCurrentIndex((prev) => {
-          if (prev >= totalPoints - 1) {
-            setIsPlaying(false);
-            return prev;
-          }
-          return prev + 1;
-        });
+      if (index !== indexRef.current) {
+        indexRef.current = index;
+        setCurrentIndex(index);
+      }
+      if (index >= totalPoints - 1) {
+        setIsPlaying(false);
+        return;
       }
 
       animationFrameRef.current = requestAnimationFrame(animate);
@@ -645,7 +657,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
     return () => {
       if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
     };
-  }, [isPlaying, playbackSpeed, totalPoints]);
+  }, [isPlaying, playbackSpeed, totalPoints, points]);
 
   // Keyboard navigation (Space to toggle play)
   useEffect(() => {
diff --git a/website/lib/telemetry-track.ts b/website/lib/telemetry-track.ts
index f91a149..aff3c4b 100644
--- a/website/lib/telemetry-track.ts
+++ b/website/lib/telemetry-track.ts
@@ -44,6 +44,41 @@ export function areTelemetryPointsConnected(a: TelemetryPoint, b: TelemetryPoint
   return a.segmentId === b.segmentId && delta >= 0 && delta <= 5000;
 }
 
+/**
+ * Advances a replay cursor by a budget of virtual milliseconds, honoring the real time
+ * between recorded samples so the rider marker stays synchronized with the elapsed-time
+ * readout (which is derived from timestamps). Playback is therefore wall-clock accurate at
+ * 1x and correctly scaled at other speeds, even when samples are non-uniform.
+ *
+ * Disconnected transitions (segment breaks or GPS loss, per areTelemetryPointsConnected)
+ * are compressed to a single nominal 20 Hz step (50 ms) so playback never stalls across
+ * dead time instead of waiting out a multi-second gap. No coordinates are altered.
+ *
+ * Returns the new index and the leftover budget to carry into the next frame.
+ */
+export function advancePlaybackIndex(
+  points: TelemetryPoint[],
+  fromIndex: number,
+  budgetMs: number
+): { index: number; remainingMs: number } {
+  if (points.length === 0) return { index: 0, remainingMs: 0 };
+  let i = Math.max(0, Math.min(fromIndex, points.length - 1));
+  let budget = Math.max(0, budgetMs);
+  while (i < points.length - 1) {
+    const connected = areTelemetryPointsConnected(points[i], points[i + 1]);
+    const dt = connected
+      ? Math.max(0, Date.parse(points[i + 1].timestamp) - Date.parse(points[i].timestamp))
+      : 50;
+    if (budget >= dt) {
+      budget -= dt;
+      i++;
+    } else {
+      break;
+    }
+  }
+  return { index: i, remainingMs: i < points.length - 1 ? budget : 0 };
+}
+
 /** Leaflet's geographic API is [latitude, longitude], never normalized screen pixels. */
 export function geographicSegments(points: TelemetryPoint[]): [number, number][][] {
   const segments: [number,number][][] = [];
diff --git a/website/tests/telemetry-playback-sync.test.ts b/website/tests/telemetry-playback-sync.test.ts
new file mode 100644
index 0000000..dc19adf
--- /dev/null
+++ b/website/tests/telemetry-playback-sync.test.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { advancePlaybackIndex } from '../lib/telemetry-track';
+import type { TelemetryPoint } from '../lib/telemetry-export';
+
+const BASE = Date.parse('2026-09-28T14:30:00.000Z');
+
+// Minimal TelemetryPoint builder — advancePlaybackIndex only reads timestamp + segmentId.
+function mk(offsetMs: number, segmentId = 0): TelemetryPoint {
+  return {
+    timestamp: new Date(BASE + offsetMs).toISOString(),
+    latitude: 40,
+    longitude: -74,
+    altitude: 0,
+    speed: 0,
+    heading: 0,
+    gpsAccuracy: 0,
+    leanAngle: 0,
+    pitchAngle: 0,
+    accelX: 0,
+    accelY: 0,
+    accelZ: 0,
+    longitudinalG: 0,
+    lateralG: 0,
+    segmentId,
+  };
+}
+
+describe('advancePlaybackIndex (replay playback synchronization)', () => {
+  const uniform = Array.from({ length: 10 }, (_, i) => mk(i * 50)); // 20 Hz, 50 ms apart
+
+  it('advances in step with real recorded time (1x)', () => {
+    // 200 ms of budget over 50 ms samples = 4 steps.
+    const r = advancePlaybackIndex(uniform, 0, 200);
+    expect(r.index).toBe(4);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('carries leftover budget when it does not cover a full step', () => {
+    // 120 ms consumes two 50 ms steps (100 ms), leaving 20 ms.
+    const r = advancePlaybackIndex(uniform, 0, 120);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(20);
+  });
+
+  it('does not advance when the budget is below one step', () => {
+    const r = advancePlaybackIndex(uniform, 3, 10);
+    expect(r.index).toBe(3);
+    expect(r.remainingMs).toBe(10);
+  });
+
+  it('compresses a multi-second gap to a single 50 ms step so playback never stalls', () => {
+    // Samples 0..2 uniform; sample 3 is 10 s later (disconnected). A 60 ms budget from
+    // index 2 must still cross the gap (treated as a 50 ms step), not wait 10 s.
+    const gapped = [mk(0), mk(50), mk(100), mk(10_100)];
+    const r = advancePlaybackIndex(gapped, 2, 60);
+    expect(r.index).toBe(3);
+    expect(r.remainingMs).toBe(0); // reached the end
+  });
+
+  it('clamps at the final index with no remaining budget', () => {
+    const r = advancePlaybackIndex(uniform, 8, 100_000);
+    expect(r.index).toBe(9);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('is a no-op on empty input', () => {
+    expect(advancePlaybackIndex([], 0, 1000)).toEqual({ index: 0, remainingMs: 0 });
+  });
+});

From 6956e809a3e164a650ab84db9789030045a24666 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 12:49:16 -0400
Subject: [PATCH 07/12] =?UTF-8?q?fix(website):=20truthful=20group-ride=20c?=
 =?UTF-8?q?reation=20=E2=80=94=20no=20false=20success,=20no=20fabricated?=
 =?UTF-8?q?=20GPS=20(Phase=203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Creating a ride from the hub had two integrity problems:
- The "Created … success" toast fired optimistically before the Firestore write, and a
  commit failure was only console.error'd — so a user could be told the ride was created
  when nothing persisted (the ride would then vanish on the next snapshot).
- Every created ride wrote a hardcoded meetingPoint at 34.5378, -83.9849 (Helen, GA)
  regardless of the typed location — fabricated GPS attached to real rides.

Fixes:
- Report success only after `batch.commit()` resolves; on failure, roll back the optimistic
  insert and show an error. When there is no authenticated session / Firestore, keep the
  local entry for responsiveness but make no cloud-success claim.
- Extract buildWebGroupRidePayload (pure): stores the rally point as displayName/address
  text and omits latitude/longitude (the web form has no map picker / geocoder, so we never
  fabricate coordinates). mapFirestoreRideToSummary already treats a missing coordinate as
  "not pinned yet".

Join-by-code, join/leave, edit, and delete flows were reviewed and persist/authorize
correctly; no changes needed there.

Tests: buildWebGroupRidePayload asserts no fabricated lat/lon, rally-point text/fallback,
authoritative organizer/access fields, scheduled-time handling, and club identity. Existing
group-ride UI tests remain green.

Known limitation: true address autocomplete and automatic route-distance calculation require
a geocoding/routing API that does not exist in this codebase; distance and rally point remain
free-text until that backend lands.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../group-rides/group-rides-management.tsx    | 108 +++++++-----------
 website/lib/group-ride-payload.ts             |  81 +++++++++++++
 website/tests/group-ride-payload.test.ts      |  79 +++++++++++++
 3 files changed, 199 insertions(+), 69 deletions(-)
 create mode 100644 website/lib/group-ride-payload.ts
 create mode 100644 website/tests/group-ride-payload.test.ts

diff --git a/website/components/group-rides/group-rides-management.tsx b/website/components/group-rides/group-rides-management.tsx
index 9d7a2f8..8b92257 100644
--- a/website/components/group-rides/group-rides-management.tsx
+++ b/website/components/group-rides/group-rides-management.tsx
@@ -23,6 +23,7 @@ import {
   connectFirestoreEmulator,
 } from 'firebase/firestore';
 import { firestore } from '../../lib/firebase-client';
+import { buildWebGroupRidePayload } from '../../lib/group-ride-payload';
 
 function getActiveFirestore() {
   if (
@@ -1000,12 +1001,12 @@ export function GroupRidesManagement({
   }, [currentUser?.uid]);
 
   // Handlers for Add, Alter, Remove, Join, Leave
-  const handleCreateRide = async (newRide: GroupRideSummary & { visibility?: string; clubId?: string }) => {
+  const handleCreateRide = async (newRide: GroupRideSummary & { visibility?: string; clubId?: string; clubName?: string }) => {
     const uid = currentUser?.uid;
     const now = new Date();
     const rideId = uid
       ? `ride_${now.getTime()}_${uid.substring(0, Math.min(6, uid.length))}`
-      : `MS-${Math.floor(1000 + Math.random() * 9000)}`;
+      : `local_${now.getTime()}`;
 
     const rideWithOrganizer: GroupRideSummary = {
       ...newRide,
@@ -1018,80 +1019,49 @@ export function GroupRidesManagement({
       leadAvatarText: (currentUser?.displayName?.[0] || currentUser?.email?.[0] || 'M').toUpperCase(),
     };
 
-    // Optimistic local update
+    // Optimistic local insert — rolled back below if a backend write is attempted and fails.
     setRides((prev) => [rideWithOrganizer, ...prev]);
-    showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${rideId}`, 'success');
 
-    if (uid && firestore) {
-      try {
-        const leadDisplayName = currentUser.displayName || currentUser.email?.split('@')[0] || 'Organizer';
-        const leadHandle = currentUser.displayName?.toLowerCase().replace(/\s+/g, '_') || currentUser.email?.split('@')[0] || 'rider';
+    // Without an authenticated session and Firestore we cannot persist the ride. Keep the
+    // local entry for responsiveness, but never claim it was saved to the cloud.
+    if (!uid || !firestore) {
+      return;
+    }
 
-        let scheduledStartAt = new Date(now.getTime() + 3600000).toISOString();
-        let departureAt = new Date(now.getTime() + 3600000 + 1800000).toISOString();
+    try {
+      const leadDisplayName = currentUser.displayName || currentUser.email?.split('@')[0] || 'Organizer';
+      const leadHandle = currentUser.displayName?.toLowerCase().replace(/\s+/g, '_') || currentUser.email?.split('@')[0] || 'rider';
 
-        if (newRide.scheduledDate) {
-          const parsed = new Date(`${newRide.scheduledDate} ${newRide.scheduledTime}`);
-          if (!isNaN(parsed.getTime()) && parsed.getTime() > now.getTime() - 86400000) {
-            scheduledStartAt = parsed.toISOString();
-            departureAt = new Date(parsed.getTime() + 30 * 60000).toISOString();
-          }
-        }
+      const firestoreRideData = buildWebGroupRidePayload(newRide, {
+        rideId,
+        uid,
+        leadHandle,
+        leadDisplayName,
+        now,
+      });
 
-        const firestoreRideData: any = {
-          id: rideId,
-          organizerUid: uid,
-          organizerHandle: leadHandle,
-          organizerDisplayName: leadDisplayName,
-          title: newRide.title.trim(),
-          description: newRide.description?.trim() || '',
-          visibility: newRide.visibility || 'public',
-          joinPolicy: newRide.joinPolicy || 'requestToJoin',
-          status: 'scheduled',
-          scheduledStartAt,
-          departureAt,
-          participantLimit: Number(newRide.participantLimit) || 12,
-          participantCount: 1,
-          accessUids: [uid],
-          meetingPoint: {
-            latitude: 34.5378,
-            longitude: -83.9849,
-            displayName: newRide.meetingPoint || newRide.region || 'Designated Rally Point',
-            address: newRide.region || '',
-            locationType: 'meetup',
-            notes: '',
-          },
-          stops: [],
-          createdAt: now.toISOString(),
-          updatedAt: now.toISOString(),
-          paceClassification: newRide.paceClassification || 'Brisk Pace',
-          discipline: newRide.discipline || 'Sport / Canyon',
-          formationProfile: newRide.formationProfile || 'Staggered Dual Column [B]',
-          routeTitle: newRide.routeSnippet || '',
-        };
+      const organizerParticipant = {
+        userId: uid,
+        role: 'organizer',
+        status: 'accepted',
+        riderHandle: leadHandle,
+        riderDisplayName: leadDisplayName,
+        createdAt: now.toISOString(),
+        updatedAt: now.toISOString(),
+      };
 
-        if (newRide.clubId) {
-          firestoreRideData.clubId = newRide.clubId;
-          if (newRide.clubName) firestoreRideData.clubName = newRide.clubName;
-        }
+      const batch = writeBatch(firestore);
+      batch.set(doc(firestore, 'group_rides', rideId), firestoreRideData);
+      batch.set(doc(firestore, 'group_rides', rideId, 'participants', uid), organizerParticipant);
+      await batch.commit();
 
-        const organizerParticipant = {
-          userId: uid,
-          role: 'organizer',
-          status: 'accepted',
-          riderHandle: leadHandle,
-          riderDisplayName: leadDisplayName,
-          createdAt: now.toISOString(),
-          updatedAt: now.toISOString(),
-        };
-
-        const batch = writeBatch(firestore);
-        batch.set(doc(firestore, 'group_rides', rideId), firestoreRideData);
-        batch.set(doc(firestore, 'group_rides', rideId, 'participants', uid), organizerParticipant);
-        await batch.commit();
-      } catch (err: any) {
-        console.error('Failed to persist group ride to Firestore:', err);
-      }
+      // Report success only after the write actually commits.
+      showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${rideId}`, 'success');
+    } catch (err: any) {
+      console.error('Failed to persist group ride to Firestore:', err);
+      // Roll back the optimistic insert and report the failure truthfully.
+      setRides((prev) => prev.filter((r) => r.id !== rideId));
+      showAlert('Could not create the ride. Please check your connection and try again.', 'error');
     }
   };
 
diff --git a/website/lib/group-ride-payload.ts b/website/lib/group-ride-payload.ts
new file mode 100644
index 0000000..60c2d62
--- /dev/null
+++ b/website/lib/group-ride-payload.ts
@@ -0,0 +1,81 @@
+import type { GroupRideSummary } from '../components/group-rides/types';
+
+export interface GroupRidePayloadContext {
+  rideId: string;
+  uid: string;
+  leadHandle: string;
+  leadDisplayName: string;
+  now: Date;
+}
+
+export type WebGroupRideInput = GroupRideSummary & {
+  visibility?: string;
+  clubId?: string;
+  clubName?: string;
+};
+
+/**
+ * Builds the Firestore `group_rides/{id}` document for a ride created from the web hub.
+ *
+ * The web create form captures a free-text rally point only (there is no map picker or
+ * geocoder), so the meeting point stores `displayName`/`address` text and deliberately omits
+ * `latitude`/`longitude`. We never fabricate coordinates: a missing coordinate means
+ * "location not pinned yet", which `mapFirestoreRideToSummary` already handles (it derives
+ * `meetingPointCoords` only when both lat and lon are present).
+ *
+ * Pure and dependency-free so it can be unit-tested without Firebase.
+ */
+export function buildWebGroupRidePayload(
+  newRide: WebGroupRideInput,
+  ctx: GroupRidePayloadContext
+): Record<string, unknown> {
+  const { rideId, uid, leadHandle, leadDisplayName, now } = ctx;
+
+  let scheduledStartAt = new Date(now.getTime() + 3600000).toISOString();
+  let departureAt = new Date(now.getTime() + 3600000 + 1800000).toISOString();
+
+  if (newRide.scheduledDate) {
+    const parsed = new Date(`${newRide.scheduledDate} ${newRide.scheduledTime}`);
+    if (!isNaN(parsed.getTime()) && parsed.getTime() > now.getTime() - 86400000) {
+      scheduledStartAt = parsed.toISOString();
+      departureAt = new Date(parsed.getTime() + 30 * 60000).toISOString();
+    }
+  }
+
+  const payload: Record<string, unknown> = {
+    id: rideId,
+    organizerUid: uid,
+    organizerHandle: leadHandle,
+    organizerDisplayName: leadDisplayName,
+    title: newRide.title.trim(),
+    description: newRide.description?.trim() || '',
+    visibility: newRide.visibility || 'public',
+    joinPolicy: newRide.joinPolicy || 'requestToJoin',
+    status: 'scheduled',
+    scheduledStartAt,
+    departureAt,
+    participantLimit: Number(newRide.participantLimit) || 12,
+    participantCount: 1,
+    accessUids: [uid],
+    meetingPoint: {
+      displayName: newRide.meetingPoint || newRide.region || 'Designated Rally Point',
+      address: newRide.region || '',
+      locationType: 'meetup',
+      notes: '',
+    },
+    stops: [],
+    createdAt: now.toISOString(),
+    updatedAt: now.toISOString(),
+    paceClassification: newRide.paceClassification || 'Brisk Pace',
+    discipline: newRide.discipline || 'Sport / Canyon',
+    formationProfile: newRide.formationProfile || 'Staggered Dual Column [B]',
+    routeTitle: newRide.routeSnippet || '',
+  };
+
+  if (newRide.clubId) {
+    payload.clubId = newRide.clubId;
+    if (newRide.clubName) payload.clubName = newRide.clubName;
+  }
+
+  return payload;
+}
diff --git a/website/tests/group-ride-payload.test.ts b/website/tests/group-ride-payload.test.ts
new file mode 100644
index 0000000..8c9fa6e
--- /dev/null
+++ b/website/tests/group-ride-payload.test.ts
@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { buildWebGroupRidePayload, type WebGroupRideInput } from '../lib/group-ride-payload';
+
+const baseRide: WebGroupRideInput = {
+  id: 'ride-temp',
+  title: '  Canyon Dawn Patrol  ',
+  description: '  Fast sweepers  ',
+  region: 'Santa Cruz Mountains',
+  scheduledDate: '',
+  scheduledTime: '',
+  paceClassification: 'Brisk Pace',
+  discipline: 'Sport / Canyon',
+  formationProfile: 'Staggered Dual Column [B]',
+  joinPolicy: 'requestToJoin',
+  leadHandle: 'You (Organizer)',
+  leadAvatarText: 'YOU',
+  participantCount: 1,
+  participantLimit: 12,
+  distance: '50.0 Miles',
+  meetingPoint: 'Alice’s Restaurant, Skyline Blvd',
+  routeSnippet: 'Skyline > Hwy 9',
+  userStatus: 'joined',
+  status: 'scheduled',
+};
+
+const ctx = {
+  rideId: 'ride_123_abc',
+  uid: 'rider-uid-1',
+  leadHandle: 'rider_one',
+  leadDisplayName: 'Rider One',
+  now: new Date('2026-10-14T12:00:00.000Z'),
+};
+
+describe('buildWebGroupRidePayload (WEB Phase 3 ride creation)', () => {
+  it('never fabricates meeting-point coordinates', () => {
+    const p = buildWebGroupRidePayload(baseRide, ctx) as any;
+    expect(p.meetingPoint.latitude).toBeUndefined();
+    expect(p.meetingPoint.longitude).toBeUndefined();
+    expect('latitude' in p.meetingPoint).toBe(false);
+    expect('longitude' in p.meetingPoint).toBe(false);
+    // The rider's typed rally point is preserved as text.
+    expect(p.meetingPoint.displayName).toBe('Alice’s Restaurant, Skyline Blvd');
+    expect(p.meetingPoint.address).toBe('Santa Cruz Mountains');
+  });
+
+  it('falls back to the region for the rally point when none is typed', () => {
+    const p = buildWebGroupRidePayload({ ...baseRide, meetingPoint: '' }, ctx) as any;
+    expect(p.meetingPoint.displayName).toBe('Santa Cruz Mountains');
+  });
+
+  it('sets authoritative organizer and access fields and trims text', () => {
+    const p = buildWebGroupRidePayload(baseRide, ctx) as any;
+    expect(p.id).toBe('ride_123_abc');
+    expect(p.organizerUid).toBe('rider-uid-1');
+    expect(p.accessUids).toEqual(['rider-uid-1']);
+    expect(p.participantCount).toBe(1);
+    expect(p.title).toBe('Canyon Dawn Patrol');
+    expect(p.description).toBe('Fast sweepers');
+    expect(typeof p.scheduledStartAt).toBe('string');
+    expect(Number.isNaN(Date.parse(p.scheduledStartAt as string))).toBe(false);
+  });
+
+  it('honors a valid future scheduled date/time', () => {
+    const p = buildWebGroupRidePayload(
+      { ...baseRide, scheduledDate: '2026-12-25', scheduledTime: '09:30' },
+      ctx
+    ) as any;
+    expect(p.scheduledStartAt).toBe(new Date('2026-12-25 09:30').toISOString());
+  });
+
+  it('includes club identity only when provided', () => {
+    const withClub = buildWebGroupRidePayload({ ...baseRide, clubId: 'club-1', clubName: 'Apex MC' }, ctx) as any;
+    expect(withClub.clubId).toBe('club-1');
+    expect(withClub.clubName).toBe('Apex MC');
+
+    const withoutClub = buildWebGroupRidePayload(baseRide, ctx) as any;
+    expect('clubId' in withoutClub).toBe(false);
+  });
+});

From dd35b216d1b77aa167061671b01973a6dbc6558e Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 13:12:49 -0400
Subject: [PATCH 08/12] fix(website): persisted-only ride creation and
 reconciled replay timing (PR #38 hardening)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 1 — group ride creation (no phantom rides):
- Check authentication and Firestore availability BEFORE touching UI state; an unauthenticated
  user (or unavailable Firestore) now gets an actionable error and no phantom ride, instead of a
  local entry that was never saved.
- Insert the ride into UI state ONLY after batch.commit() confirms the write; on commit failure
  nothing is inserted and an error is shown.
- Prevent duplicate submissions: the create modal disables its submit button while in flight, and
  the hub guards with a ref.
- The join code remains the real Firestore document id (no fabricated ids).
- Extract commitGroupRide (pure, dependency-injected) so every path is unit-testable.

Phase 2 — replay playback timing:
- The elapsed clock and rider marker both derive from the same cursor, so they cannot drift.
- Manual seeks (scrub, restart, corner jump, arrow keys) go through seekTo(), which reconciles
  playback timing (clears carry/last-frame) so no stale budget is applied after a seek.
- Make gap compression explicit: a caption labels the timeline as recorded elapsed time and warns
  that dead time in multi-segment recordings is skipped during playback.

Tests: commitGroupRide (unauthenticated / unavailable / commit-ok / commit-failed); group-rides
hub now uses an authenticated mock with deterministic Firebase — authenticated create persists,
unauthenticated create is blocked with no phantom, a failed commit leaves no phantom, and the
create modal blocks duplicate submits.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../group-rides/create-ride-modal.tsx         |  23 +++-
 .../group-rides/group-rides-management.tsx    |  89 +++++++-------
 .../components/web-telemetry-replay-modal.tsx |  45 ++++++--
 website/lib/create-group-ride.ts              |  78 +++++++++++++
 website/tests/create-group-ride.test.ts       |  84 ++++++++++++++
 website/tests/group-rides-page.test.tsx       | 109 ++++++++++++++++--
 6 files changed, 359 insertions(+), 69 deletions(-)
 create mode 100644 website/lib/create-group-ride.ts
 create mode 100644 website/tests/create-group-ride.test.ts

diff --git a/website/components/group-rides/create-ride-modal.tsx b/website/components/group-rides/create-ride-modal.tsx
index 458eb51..6e996a3 100644
--- a/website/components/group-rides/create-ride-modal.tsx
+++ b/website/components/group-rides/create-ride-modal.tsx
@@ -6,7 +6,7 @@ import { GroupRideSummary } from './types';
 interface CreateRideModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onCreateRide: (ride: GroupRideSummary) => void;
+  onCreateRide: (ride: GroupRideSummary) => void | Promise<void>;
 }
 
 export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideModalProps) {
@@ -24,6 +24,7 @@ export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideMod
   const [participantLimit, setParticipantLimit] = useState(12);
   const [description, setDescription] = useState('');
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Reset form when modal opens
   useEffect(() => {
@@ -42,6 +43,7 @@ export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideMod
       setParticipantLimit(12);
       setDescription('');
       setErrorMsg(null);
+      setIsSubmitting(false);
     }
   }, [isOpen]);
 
@@ -58,9 +60,12 @@ export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideMod
 
   if (!isOpen) return null;
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    // Prevent duplicate submissions while a create is in flight.
+    if (isSubmitting) return;
+
     if (!title.trim()) {
       setErrorMsg('Please enter a ride title.');
       return;
@@ -92,8 +97,13 @@ export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideMod
       status: 'scheduled',
     };
 
-    onCreateRide(newRide);
-    onClose();
+    setIsSubmitting(true);
+    try {
+      await onCreateRide(newRide);
+      onClose();
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -349,9 +359,10 @@ export function CreateRideModal({ isOpen, onClose, onCreateRide }: CreateRideMod
             </button>
             <button
               type="submit"
-              className="px-space-xl py-2.5 rounded-xl bg-primary-container text-on-primary-container font-headline-sm text-headline-sm hover:shadow-lg transition-all"
+              disabled={isSubmitting}
+              className="px-space-xl py-2.5 rounded-xl bg-primary-container text-on-primary-container font-headline-sm text-headline-sm hover:shadow-lg transition-all disabled:opacity-60 disabled:cursor-not-allowed"
             >
-              Publish Group Ride
+              {isSubmitting ? 'Publishing…' : 'Publish Group Ride'}
             </button>
           </div>
         </form>
diff --git a/website/components/group-rides/group-rides-management.tsx b/website/components/group-rides/group-rides-management.tsx
index 8b92257..f1394f1 100644
--- a/website/components/group-rides/group-rides-management.tsx
+++ b/website/components/group-rides/group-rides-management.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { getApps, initializeApp } from 'firebase/app';
 import { getAuth, connectAuthEmulator } from 'firebase/auth';
@@ -23,7 +23,7 @@ import {
   connectFirestoreEmulator,
 } from 'firebase/firestore';
 import { firestore } from '../../lib/firebase-client';
-import { buildWebGroupRidePayload } from '../../lib/group-ride-payload';
+import { commitGroupRide } from '../../lib/create-group-ride';
 
 function getActiveFirestore() {
   if (
@@ -725,6 +725,8 @@ export function GroupRidesManagement({
   onViewShowcase,
 }: GroupRidesManagementProps) {
   const [rides, setRides] = useState<GroupRideSummary[]>(INITIAL_GROUP_RIDES);
+  // Guards against duplicate create submissions while a write is in flight.
+  const creatingRideRef = useRef(false);
   const [communityRides, setCommunityRides] = useState<GroupRideSummary[]>([]);
   const [isCommunityLoading, setIsCommunityLoading] = useState(false);
   const [communityError, setCommunityError] = useState<string | null>(null);
@@ -1002,66 +1004,55 @@ export function GroupRidesManagement({
 
   // Handlers for Add, Alter, Remove, Join, Leave
   const handleCreateRide = async (newRide: GroupRideSummary & { visibility?: string; clubId?: string; clubName?: string }) => {
+    // Prevent duplicate submissions while a create is already in flight.
+    if (creatingRideRef.current) return;
+
     const uid = currentUser?.uid;
-    const now = new Date();
-    const rideId = uid
-      ? `ride_${now.getTime()}_${uid.substring(0, Math.min(6, uid.length))}`
-      : `local_${now.getTime()}`;
-
-    const rideWithOrganizer: GroupRideSummary = {
-      ...newRide,
-      id: rideId,
-      isOrganizer: true,
-      status: 'scheduled',
-      userStatus: 'joined',
-      rideCode: rideId,
-      leadHandle: currentUser?.displayName || currentUser?.email?.split('@')[0] || 'MyHandle',
-      leadAvatarText: (currentUser?.displayName?.[0] || currentUser?.email?.[0] || 'M').toUpperCase(),
-    };
-
-    // Optimistic local insert — rolled back below if a backend write is attempted and fails.
-    setRides((prev) => [rideWithOrganizer, ...prev]);
-
-    // Without an authenticated session and Firestore we cannot persist the ride. Keep the
-    // local entry for responsiveness, but never claim it was saved to the cloud.
+    // Check authentication and persistence availability BEFORE touching UI state, so an
+    // unauthenticated user (or an unavailable Firestore) never sees a phantom ride that was
+    // never saved. They get an actionable error instead.
     if (!uid || !firestore) {
+      showAlert('Sign in to create a group ride — it could not be saved.', 'error');
       return;
     }
 
+    creatingRideRef.current = true;
     try {
       const leadDisplayName = currentUser.displayName || currentUser.email?.split('@')[0] || 'Organizer';
       const leadHandle = currentUser.displayName?.toLowerCase().replace(/\s+/g, '_') || currentUser.email?.split('@')[0] || 'rider';
 
-      const firestoreRideData = buildWebGroupRidePayload(newRide, {
-        rideId,
+      const result = await commitGroupRide(newRide, {
         uid,
-        leadHandle,
+        firestore,
         leadDisplayName,
-        now,
+        leadHandle,
+        writeBatch: (fs) => writeBatch(fs),
+        docRef: (fs, ...segments) => doc(fs, segments[0], ...segments.slice(1)),
       });
 
-      const organizerParticipant = {
-        userId: uid,
-        role: 'organizer',
-        status: 'accepted',
-        riderHandle: leadHandle,
-        riderDisplayName: leadDisplayName,
-        createdAt: now.toISOString(),
-        updatedAt: now.toISOString(),
-      };
-
-      const batch = writeBatch(firestore);
-      batch.set(doc(firestore, 'group_rides', rideId), firestoreRideData);
-      batch.set(doc(firestore, 'group_rides', rideId, 'participants', uid), organizerParticipant);
-      await batch.commit();
-
-      // Report success only after the write actually commits.
-      showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${rideId}`, 'success');
-    } catch (err: any) {
-      console.error('Failed to persist group ride to Firestore:', err);
-      // Roll back the optimistic insert and report the failure truthfully.
-      setRides((prev) => prev.filter((r) => r.id !== rideId));
-      showAlert('Could not create the ride. Please check your connection and try again.', 'error');
+      if (result.ok) {
+        // Insert into UI state ONLY after Firestore confirms the write — no phantom rides.
+        const rideWithOrganizer: GroupRideSummary = {
+          ...newRide,
+          id: result.rideId,
+          isOrganizer: true,
+          status: 'scheduled',
+          userStatus: 'joined',
+          rideCode: result.rideId,
+          leadHandle: currentUser?.displayName || currentUser?.email?.split('@')[0] || 'MyHandle',
+          leadAvatarText: (currentUser?.displayName?.[0] || currentUser?.email?.[0] || 'M').toUpperCase(),
+        };
+        setRides((prev) => (prev.some((r) => r.id === result.rideId) ? prev : [rideWithOrganizer, ...prev]));
+        showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${result.rideId}`, 'success');
+      } else if (result.reason === 'commit-failed') {
+        console.error('Failed to persist group ride to Firestore:', result.error);
+        showAlert('Could not create the ride. Please check your connection and try again.', 'error');
+      } else {
+        // unauthenticated / unavailable discovered inside the helper (defensive — guarded above).
+        showAlert('Could not create the ride right now. Please try again.', 'error');
+      }
+    } finally {
+      creatingRideRef.current = false;
     }
   };
 
diff --git a/website/components/web-telemetry-replay-modal.tsx b/website/components/web-telemetry-replay-modal.tsx
index 9349b81..a326c77 100644
--- a/website/components/web-telemetry-replay-modal.tsx
+++ b/website/components/web-telemetry-replay-modal.tsx
@@ -131,6 +131,26 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
     indexRef.current = currentIndex;
   }, [currentIndex]);
 
+  // True when the recording has disconnected segments / GPS-loss gaps. Playback compresses
+  // those gaps (advancePlaybackIndex), so the elapsed clock — which shows real recorded time —
+  // will jump forward at a gap even though wall-clock playback does not pause. We surface this
+  // explicitly rather than let the jump look like a glitch.
+  const hasCompressedGaps = useMemo(
+    () => points.some((p, i) => i > 0 && !areTelemetryPointsConnected(points[i - 1], p)),
+    [points]
+  );
+
+  // Manual seek (scrub, restart, corner jump, arrow keys): reconcile playback timing so the
+  // next animation frame does not apply stale budget accumulated before the seek.
+  const seekTo = (index: number) => {
+    const maxIndex = Math.max(0, totalPoints - 1);
+    const clamped = Math.max(0, Math.min(maxIndex, index));
+    playbackCarryRef.current = 0;
+    lastTimeRef.current = null;
+    indexRef.current = clamped;
+    setCurrentIndex(clamped);
+  };
+
   // Dynamically load Leaflet library and CSS with multi-CDN fallback
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -443,7 +463,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
             { direction: 'top' }
           );
           cornerMarker.on('click', () => {
-            setCurrentIndex(corner.apexIndex);
+            seekTo(corner.apexIndex);
           });
           routeGroup.addLayer(cornerMarker);
         }
@@ -666,9 +686,9 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
         e.preventDefault();
         setIsPlaying((prev) => !prev);
       } else if (e.code === 'ArrowRight' && totalPoints > 0) {
-        setCurrentIndex((prev) => Math.min(totalPoints - 1, prev + 20));
+        seekTo(indexRef.current + 20);
       } else if (e.code === 'ArrowLeft') {
-        setCurrentIndex((prev) => Math.max(0, prev - 20));
+        seekTo(indexRef.current - 20);
       } else if (e.code === 'Escape') {
         onClose();
       }
@@ -1064,7 +1084,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
                           key={corner.id}
                           className="hover:bg-brand-cardAlt/50 transition cursor-pointer"
                           onClick={() => {
-                            setCurrentIndex(corner.apexIndex);
+                            seekTo(corner.apexIndex);
                             setActiveTab('map');
                           }}
                         >
@@ -1105,7 +1125,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
                             <button
                               onClick={(e) => {
                                 e.stopPropagation();
-                                setCurrentIndex(corner.apexIndex);
+                                seekTo(corner.apexIndex);
                                 setActiveTab('map');
                               }}
                               className="px-2 py-1 rounded bg-surface-container-high hover:bg-brand-cyan hover:text-black text-[10px] transition cursor-pointer"
@@ -1140,7 +1160,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
               min={0}
               max={Math.max(1, totalPoints - 1)}
               value={currentIndex}
-              onChange={(e) => setCurrentIndex(Number(e.target.value))}
+              onChange={(e) => seekTo(Number(e.target.value))}
               className="flex-1 accent-brand-cyan cursor-pointer h-2 bg-slate-800 rounded-lg"
               data-testid="replay-timeline-slider"
                 disabled={!points.length}
@@ -1148,11 +1168,22 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
             <span className="text-xs font-mono text-slate-400 w-12">{formatTime(totalSeconds)}</span>
           </div>
 
+          {/* Timeline is recorded time. Make the gap-compression behaviour explicit. */}
+          <div className="flex items-center justify-between text-[10px] font-mono text-slate-500">
+            <span>Recorded elapsed time</span>
+            {hasCompressedGaps && (
+              <span className="text-amber-400/80 flex items-center gap-1">
+                <span className="material-symbols-outlined text-[12px]">timer_off</span>
+                Recording has gaps — dead time is skipped during playback
+              </span>
+            )}
+          </div>
+
           {/* Transport Controls */}
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <button
-                onClick={() => setCurrentIndex(0)}
+                onClick={() => seekTo(0)}
                 title="Restart from beginning"
                 className="p-2 rounded-lg bg-surface-container hover:bg-slate-700 text-slate-300 hover:text-white transition cursor-pointer"
               >
diff --git a/website/lib/create-group-ride.ts b/website/lib/create-group-ride.ts
new file mode 100644
index 0000000..f7879ef
--- /dev/null
+++ b/website/lib/create-group-ride.ts
@@ -0,0 +1,78 @@
+import { buildWebGroupRidePayload, type WebGroupRideInput } from './group-ride-payload';
+
+export type CreateRideResult =
+  | { ok: true; rideId: string; payload: Record<string, unknown> }
+  | { ok: false; reason: 'unauthenticated' }
+  | { ok: false; reason: 'unavailable' }
+  | { ok: false; reason: 'commit-failed'; error: unknown };
+
+export interface FirestoreBatchLike {
+  // Loose signatures so the real firebase WriteBatch is assignable here (its set() is
+  // generic over DocumentReference and returns WriteBatch). Tests pass a simple fake.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  set: (ref: any, data: any) => unknown;
+  commit: () => Promise<void>;
+}
+
+export interface CommitGroupRideDeps {
+  uid?: string | null;
+  firestore: unknown | null;
+  leadDisplayName: string;
+  leadHandle: string;
+  /** Injected Firestore primitives so this is unit-testable without the firebase SDK. */
+  writeBatch: (firestore: any) => FirestoreBatchLike;
+  docRef: (firestore: any, ...segments: string[]) => unknown;
+  now?: Date;
+}
+
+/**
+ * Persists a web-created group ride and reports the outcome. It performs the backend write
+ * and resolves ONLY after the batch commit succeeds, so callers can insert into UI state
+ * strictly after confirmation (no phantom rides). It never fabricates coordinates (see
+ * buildWebGroupRidePayload) and the returned rideId is the real Firestore document id used
+ * as the join code.
+ *
+ * Returns a discriminated result instead of throwing, so every failure path is explicit:
+ * - unauthenticated: no uid (an unauthenticated user cannot create a persisted ride)
+ * - unavailable: no Firestore handle
+ * - commit-failed: the write was attempted but rejected (nothing persisted)
+ */
+export async function commitGroupRide(
+  newRide: WebGroupRideInput,
+  deps: CommitGroupRideDeps
+): Promise<CreateRideResult> {
+  const uid = deps.uid;
+  if (!uid) return { ok: false, reason: 'unauthenticated' };
+  if (!deps.firestore) return { ok: false, reason: 'unavailable' };
+
+  const now = deps.now ?? new Date();
+  const rideId = `ride_${now.getTime()}_${uid.substring(0, Math.min(6, uid.length))}`;
+
+  const payload = buildWebGroupRidePayload(newRide, {
+    rideId,
+    uid,
+    leadHandle: deps.leadHandle,
+    leadDisplayName: deps.leadDisplayName,
+    now,
+  });
+
+  const organizerParticipant = {
+    userId: uid,
+    role: 'organizer',
+    status: 'accepted',
+    riderHandle: deps.leadHandle,
+    riderDisplayName: deps.leadDisplayName,
+    createdAt: now.toISOString(),
+    updatedAt: now.toISOString(),
+  };
+
+  try {
+    const batch = deps.writeBatch(deps.firestore);
+    batch.set(deps.docRef(deps.firestore, 'group_rides', rideId), payload);
+    batch.set(deps.docRef(deps.firestore, 'group_rides', rideId, 'participants', uid), organizerParticipant);
+    await batch.commit();
+    return { ok: true, rideId, payload };
+  } catch (error) {
+    return { ok: false, reason: 'commit-failed', error };
+  }
+}
diff --git a/website/tests/create-group-ride.test.ts b/website/tests/create-group-ride.test.ts
new file mode 100644
index 0000000..979be66
--- /dev/null
+++ b/website/tests/create-group-ride.test.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect, vi } from 'vitest';
+import { commitGroupRide } from '../lib/create-group-ride';
+import type { WebGroupRideInput } from '../lib/group-ride-payload';
+
+const baseRide: WebGroupRideInput = {
+  id: 'ride-temp',
+  title: 'Canyon Dawn Patrol',
+  description: 'Fast sweepers',
+  region: 'Santa Cruz Mountains',
+  scheduledDate: '',
+  scheduledTime: '',
+  paceClassification: 'Brisk Pace',
+  discipline: 'Sport / Canyon',
+  formationProfile: 'Staggered Dual Column [B]',
+  joinPolicy: 'requestToJoin',
+  leadHandle: 'You (Organizer)',
+  leadAvatarText: 'YOU',
+  participantCount: 1,
+  participantLimit: 12,
+  distance: '50.0 Miles',
+  meetingPoint: 'Alice’s Restaurant',
+  routeSnippet: 'Skyline > Hwy 9',
+  userStatus: 'joined',
+  status: 'scheduled',
+};
+
+function makeDeps(overrides: Partial<Parameters<typeof commitGroupRide>[1]> = {}) {
+  const setSpy = vi.fn();
+  const commitSpy = vi.fn().mockResolvedValue(undefined);
+  const deps = {
+    uid: 'rider-uid-1' as string | null | undefined,
+    firestore: {} as unknown,
+    leadDisplayName: 'Rider One',
+    leadHandle: 'rider_one',
+    now: new Date('2026-10-14T12:00:00.000Z'),
+    writeBatch: () => ({ set: setSpy, commit: commitSpy }),
+    docRef: (_fs: any, ...segments: string[]) => ({ path: segments.join('/') }),
+    ...overrides,
+  };
+  return { deps, setSpy, commitSpy };
+}
+
+describe('commitGroupRide (WEB Phase 1 — persisted ride creation)', () => {
+  it('refuses to create for an unauthenticated user (no uid) and never writes', async () => {
+    const { deps, commitSpy } = makeDeps({ uid: undefined });
+    const res = await commitGroupRide(baseRide, deps);
+    expect(res).toEqual({ ok: false, reason: 'unauthenticated' });
+    expect(commitSpy).not.toHaveBeenCalled();
+  });
+
+  it('reports unavailable when Firestore is missing and never writes', async () => {
+    const { deps, commitSpy } = makeDeps({ firestore: null });
+    const res = await commitGroupRide(baseRide, deps);
+    expect(res).toEqual({ ok: false, reason: 'unavailable' });
+    expect(commitSpy).not.toHaveBeenCalled();
+  });
+
+  it('persists the ride and participant, then returns the real rideId as the join code', async () => {
+    const { deps, setSpy, commitSpy } = makeDeps();
+    const res = await commitGroupRide(baseRide, deps);
+
+    expect(res.ok).toBe(true);
+    if (!res.ok) return;
+    expect(res.rideId).toMatch(/^ride_\d+_rider-/);
+    // Two writes: the ride document and the organizer participant.
+    expect(setSpy).toHaveBeenCalledTimes(2);
+    expect(commitSpy).toHaveBeenCalledTimes(1);
+    // The persisted payload never fabricates coordinates.
+    const mp = (res.payload as any).meetingPoint;
+    expect('latitude' in mp).toBe(false);
+    expect('longitude' in mp).toBe(false);
+    expect(mp.displayName).toBe('Alice’s Restaurant');
+    expect((res.payload as any).organizerUid).toBe('rider-uid-1');
+  });
+
+  it('returns commit-failed (and does not throw) when the Firestore write rejects', async () => {
+    const boom = new Error('network down');
+    const { deps } = makeDeps({
+      writeBatch: () => ({ set: vi.fn(), commit: vi.fn().mockRejectedValue(boom) }),
+    });
+    const res = await commitGroupRide(baseRide, deps);
+    expect(res).toEqual({ ok: false, reason: 'commit-failed', error: boom });
+  });
+});
diff --git a/website/tests/group-rides-page.test.tsx b/website/tests/group-rides-page.test.tsx
index 5b8c287..6ba311d 100644
--- a/website/tests/group-rides-page.test.tsx
+++ b/website/tests/group-rides-page.test.tsx
@@ -19,12 +19,56 @@ vi.mock('next/navigation', () => ({
   useRouter: () => ({ push: mockPush, replace: mockReplace, back: vi.fn() }),
 }));
 
+// Deterministic Firebase so the authenticated GroupRidesManagement hub renders and persists
+// without real network. `fb.commitImpl` lets individual tests force commit success/failure.
+const fb = vi.hoisted(() => ({ commitImpl: vi.fn(() => Promise.resolve()) }));
+
+vi.mock('firebase/firestore', () => ({
+  collection: vi.fn(() => ({})),
+  query: vi.fn(() => ({})),
+  where: vi.fn(() => ({})),
+  onSnapshot: vi.fn(() => () => {}),
+  doc: vi.fn((_fs: unknown, ...segs: string[]) => ({ path: segs.join('/') })),
+  writeBatch: vi.fn(() => ({ set: vi.fn(), update: vi.fn(), commit: () => fb.commitImpl() })),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  setDoc: vi.fn(() => Promise.resolve()),
+  arrayUnion: vi.fn((x: unknown) => x),
+  arrayRemove: vi.fn((x: unknown) => x),
+  increment: vi.fn((n: unknown) => n),
+  serverTimestamp: vi.fn(() => 'ts'),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => false, data: () => ({}) })),
+  getFirestore: vi.fn(() => ({})),
+  connectFirestoreEmulator: vi.fn(),
+}));
+vi.mock('firebase/app', () => ({
+  getApps: vi.fn(() => []),
+  initializeApp: vi.fn(() => ({ name: 'test' })),
+}));
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({ currentUser: null })),
+  connectAuthEmulator: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn(() => Promise.resolve()),
+  onAuthStateChanged: vi.fn((_auth: unknown, cb: (u: unknown) => void) => {
+    cb(null);
+    return () => {};
+  }),
+}));
+vi.mock('../lib/firebase-client', () => ({ firestore: {}, firebaseAuth: { currentUser: null } }));
+
+// An authenticated organizer: a real Firebase user always has a uid.
+const authedUser = { uid: 'organizer-uid-1', email: 'lead.rider@motorsignal.app', displayName: 'LeadRider' };
+
 import GroupRidesManageRoute from '../app/group-rides/manage/page';
 import GroupRidesShowcaseRoute from '../app/group-rides/showcase/page';
 
 describe('Group Rides Interactive Page & Components', () => {
   beforeEach(() => {
     vi.restoreAllMocks();
+    // Default: Firestore commit succeeds. Individual tests override for failure paths.
+    fb.commitImpl.mockReset();
+    fb.commitImpl.mockResolvedValue(undefined);
   });
 
   // ============================================================
@@ -178,9 +222,9 @@ describe('Group Rides Interactive Page & Components', () => {
       expect(onCreateRide).not.toHaveBeenCalled();
     });
 
-    it('submits valid ride and invokes onCreateRide callback', () => {
+    it('submits valid ride and invokes onCreateRide callback', async () => {
       const onClose = vi.fn();
-      const onCreateRide = vi.fn();
+      const onCreateRide = vi.fn().mockResolvedValue(undefined);
 
       render(<CreateRideModal isOpen={true} onClose={onClose} onCreateRide={onCreateRide} />);
 
@@ -200,7 +244,31 @@ describe('Group Rides Interactive Page & Components', () => {
           userStatus: 'joined',
         })
       );
-      expect(onClose).toHaveBeenCalled();
+      // The modal closes only after onCreateRide resolves (persistence confirmed).
+      await waitFor(() => expect(onClose).toHaveBeenCalled());
+    });
+
+    it('disables the submit button while a create is in flight (no duplicate submissions)', async () => {
+      const onClose = vi.fn();
+      let resolveCreate: () => void = () => {};
+      const onCreateRide = vi.fn(() => new Promise<void>((r) => { resolveCreate = r; }));
+
+      render(<CreateRideModal isOpen={true} onClose={onClose} onCreateRide={onCreateRide} />);
+      fireEvent.change(screen.getByLabelText(/ride title/i), { target: { value: 'Pending Ride' } });
+      fireEvent.change(screen.getByLabelText(/region \/ city/i), { target: { value: 'Nowhere' } });
+
+      const submitBtn = screen.getByRole('button', { name: /publish group ride/i });
+      fireEvent.click(submitBtn);
+
+      // While the create promise is pending, the button is disabled and relabeled.
+      const pendingBtn = await screen.findByRole('button', { name: /publishing/i });
+      expect((pendingBtn as HTMLButtonElement).disabled).toBe(true);
+      // A second click must not trigger another create.
+      fireEvent.click(pendingBtn);
+      expect(onCreateRide).toHaveBeenCalledTimes(1);
+
+      resolveCreate();
+      await waitFor(() => expect(onClose).toHaveBeenCalled());
     });
   });
 
@@ -308,8 +376,7 @@ describe('Group Rides Interactive Page & Components', () => {
 
   describe('GroupRidesManagement (For Logged In Users - View, Add, Remove, Alter)', () => {
     it('allows viewing, adding, altering, canceling, and deleting group rides', async () => {
-      const mockUser = { email: 'lead.rider@motorsignal.app', displayName: 'LeadRider' };
-      render(<GroupRidesManagement currentUser={mockUser} />);
+      render(<GroupRidesManagement currentUser={authedUser} />);
 
       // Header & Console title
       expect(screen.getByText(/Group Rides Management/i)).toBeDefined();
@@ -348,8 +415,8 @@ describe('Group Rides Interactive Page & Components', () => {
       });
       fireEvent.click(screen.getByRole('button', { name: /publish group ride/i }));
 
-      // Verify newly created ride appears in the list
-      expect(screen.getByRole('heading', { name: /High Sierra Alpine Sprint/i })).toBeDefined();
+      // The ride is inserted only after Firestore confirms the write, so wait for it.
+      await screen.findByRole('heading', { name: /High Sierra Alpine Sprint/i });
 
       // 3. ALTER: Edit existing organized ride parameters
       const alterButtons = screen.getAllByRole('button', { name: /alter \/ edit/i });
@@ -394,6 +461,34 @@ describe('Group Rides Interactive Page & Components', () => {
       expect(screen.getByText(/Live Squad Telemetry Stream: Connected/i)).toBeDefined();
       expect(screen.getByText(/Formation session #CA-84-SW/i)).toBeDefined();
     });
+
+    it('blocks ride creation for an unauthenticated user and never shows a phantom ride', async () => {
+      const anonUser = { email: 'anon@motorsignal.app' } as any; // no uid
+      render(<GroupRidesManagement currentUser={anonUser} />);
+
+      fireEvent.click(screen.getByRole('button', { name: /create group ride/i }));
+      fireEvent.change(screen.getByLabelText(/ride title/i), { target: { value: 'Phantom Ride' } });
+      fireEvent.change(screen.getByLabelText(/region \/ city/i), { target: { value: 'Nowhere' } });
+      fireEvent.click(screen.getByRole('button', { name: /publish group ride/i }));
+
+      // Actionable error, and the ride must never appear in the list.
+      await screen.findByText(/could not be saved/i);
+      expect(screen.queryByRole('heading', { name: /Phantom Ride/i })).toBeNull();
+    });
+
+    it('does not leave a phantom ride when the Firestore commit fails', async () => {
+      fb.commitImpl.mockReset();
+      fb.commitImpl.mockRejectedValue(new Error('offline'));
+      render(<GroupRidesManagement currentUser={authedUser} />);
+
+      fireEvent.click(screen.getByRole('button', { name: /create group ride/i }));
+      fireEvent.change(screen.getByLabelText(/ride title/i), { target: { value: 'Doomed Ride' } });
+      fireEvent.change(screen.getByLabelText(/region \/ city/i), { target: { value: 'Nowhere' } });
+      fireEvent.click(screen.getByRole('button', { name: /publish group ride/i }));
+
+      await screen.findByText(/Could not create the ride/i);
+      expect(screen.queryByRole('heading', { name: /Doomed Ride/i })).toBeNull();
+    });
   });
 
   describe('Full GroupRidesPage Smart Routing', () => {

From a709b058b3e0935f0ca2d26ff0d89f73bdc9c695 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 14:45:41 -0400
Subject: [PATCH 09/12] fix(website): replay edge-case resilience and
 concurrent ride submission guards

- Add replay regression test suite covering irregular/jittered timestamps, identical/zero dt, inverted timestamps, large gaps, pause/resume timing reconciliation, manual seek, speed changes, and large datasets (144k points).
- Harden advancePlaybackIndex against non-finite/NaN budget and timestamp delta anomalies.
- Reset lastTimeRef and cap frameDelta in WebTelemetryReplayModal to eliminate sudden jumps on speed switching or background tab resumes.
- Guard group-ride creation with in-flight isSubmitting state and disabled submit button in CreateGroupRideModal; guarantee unique collision-free ride IDs across concurrent submissions.
- Remove obsolete Vercel reference in website/.env.example in favor of Vultr VPS and Caddy; add npm test script.
---
 website/.env.example                          |   2 +-
 .../group-rides/group-rides-management.tsx    |  23 +-
 .../components/web-telemetry-replay-modal.tsx |   4 +-
 website/lib/create-group-ride.ts              |  10 +-
 website/lib/telemetry-track.ts                |   7 +-
 website/package.json                          |   1 +
 website/tests/create-group-ride.test.ts       |  32 +++
 website/tests/group-rides-page.test.tsx       |  37 +++
 website/tests/telemetry-playback-sync.test.ts | 255 ++++++++++++++++++
 9 files changed, 359 insertions(+), 12 deletions(-)

diff --git a/website/.env.example b/website/.env.example
index 2ee1031..d621134 100644
--- a/website/.env.example
+++ b/website/.env.example
@@ -1,7 +1,7 @@
 # MotorSignal Website Environment Configuration
 #
 # Copy this file to .env.local for local development, or configure these
-# variables in your deployment environment (Vercel, Docker, VPS, etc.).
+# variables in your deployment environment (Vultr VPS, Caddy, Docker, etc.).
 #
 # Production Firebase project: motoapp-d22e0
 # Staging Firebase project: motorsignal-staging
diff --git a/website/components/group-rides/group-rides-management.tsx b/website/components/group-rides/group-rides-management.tsx
index f1394f1..50c4423 100644
--- a/website/components/group-rides/group-rides-management.tsx
+++ b/website/components/group-rides/group-rides-management.tsx
@@ -183,7 +183,7 @@ type MyRidesFilter = 'all' | 'organized' | 'joined';
 interface CreateRideModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onCreateRide: (ride: GroupRideSummary) => void;
+  onCreateRide: (ride: GroupRideSummary) => void | Promise<void>;
 }
 
 function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModalProps) {
@@ -222,6 +222,7 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
   const [participantLimit, setParticipantLimit] = useState(12);
   const [description, setDescription] = useState('');
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Reset form when modal opens
   useEffect(() => {
@@ -245,6 +246,7 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
       setParticipantLimit(12);
       setDescription('');
       setErrorMsg(null);
+      setIsSubmitting(false);
     }
   }, [isOpen, defaultDateValues]);
 
@@ -288,8 +290,9 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
     }
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (isSubmitting) return;
     if (!validate()) return;
 
     const newRide: GroupRideSummary & {
@@ -321,8 +324,13 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
       ...(rideType === 'club' && clubName.trim() ? { clubName: clubName.trim(), clubId: `club-${clubName.toLowerCase().replace(/\s+/g, '-')}` } : {}),
     };
 
-    onCreateRide(newRide);
-    onClose();
+    setIsSubmitting(true);
+    try {
+      await onCreateRide(newRide);
+      onClose();
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -708,9 +716,12 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
               <button
                 type="submit"
                 id="btn-publish-ride"
-                className="px-space-xl py-2.5 rounded-xl bg-primary-container hover:bg-primary-fixed text-on-primary-container font-headline-sm text-xs sm:text-sm font-bold shadow-lg hover:shadow-[0_0_20px_rgba(0,242,254,0.4)] transition-all cursor-pointer"
+                disabled={isSubmitting}
+                className={`px-space-xl py-2.5 rounded-xl bg-primary-container hover:bg-primary-fixed text-on-primary-container font-headline-sm text-xs sm:text-sm font-bold shadow-lg hover:shadow-[0_0_20px_rgba(0,242,254,0.4)] transition-all ${
+                  isSubmitting ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'
+                }`}
               >
-                Publish Group Ride
+                {isSubmitting ? 'Publishing…' : 'Publish Group Ride'}
               </button>
             </div>
           </div>
diff --git a/website/components/web-telemetry-replay-modal.tsx b/website/components/web-telemetry-replay-modal.tsx
index a326c77..e736856 100644
--- a/website/components/web-telemetry-replay-modal.tsx
+++ b/website/components/web-telemetry-replay-modal.tsx
@@ -652,7 +652,8 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
 
     const animate = (timestamp: number) => {
       if (lastTimeRef.current == null) lastTimeRef.current = timestamp;
-      const frameDelta = timestamp - lastTimeRef.current;
+      const rawDelta = timestamp - lastTimeRef.current;
+      const frameDelta = Math.max(0, Math.min(rawDelta, 200));
       lastTimeRef.current = timestamp;
 
       // Virtual recorded-time budget to consume this frame, at the selected speed.
@@ -676,6 +677,7 @@ export function WebTelemetryReplayModal({ ride, onClose }: WebTelemetryReplayMod
 
     return () => {
       if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      lastTimeRef.current = null;
     };
   }, [isPlaying, playbackSpeed, totalPoints, points]);
 
diff --git a/website/lib/create-group-ride.ts b/website/lib/create-group-ride.ts
index f7879ef..aafc310 100644
--- a/website/lib/create-group-ride.ts
+++ b/website/lib/create-group-ride.ts
@@ -37,6 +37,12 @@ export interface CommitGroupRideDeps {
  * - unavailable: no Firestore handle
  * - commit-failed: the write was attempted but rejected (nothing persisted)
  */
+let rideIdCounter = 0;
+
+export function resetRideIdCounter(): void {
+  rideIdCounter = 0;
+}
+
 export async function commitGroupRide(
   newRide: WebGroupRideInput,
   deps: CommitGroupRideDeps
@@ -46,7 +52,9 @@ export async function commitGroupRide(
   if (!deps.firestore) return { ok: false, reason: 'unavailable' };
 
   const now = deps.now ?? new Date();
-  const rideId = `ride_${now.getTime()}_${uid.substring(0, Math.min(6, uid.length))}`;
+  const seq = ++rideIdCounter;
+  const seqSuffix = seq > 1 ? `${seq}` : '';
+  const rideId = `ride_${now.getTime()}${seqSuffix}_${uid.substring(0, Math.min(6, uid.length))}`;
 
   const payload = buildWebGroupRidePayload(newRide, {
     rideId,
diff --git a/website/lib/telemetry-track.ts b/website/lib/telemetry-track.ts
index aff3c4b..77f7baa 100644
--- a/website/lib/telemetry-track.ts
+++ b/website/lib/telemetry-track.ts
@@ -63,12 +63,13 @@ export function advancePlaybackIndex(
 ): { index: number; remainingMs: number } {
   if (points.length === 0) return { index: 0, remainingMs: 0 };
   let i = Math.max(0, Math.min(fromIndex, points.length - 1));
-  let budget = Math.max(0, budgetMs);
+  let budget = Number.isFinite(budgetMs) ? Math.max(0, budgetMs) : 0;
   while (i < points.length - 1) {
     const connected = areTelemetryPointsConnected(points[i], points[i + 1]);
-    const dt = connected
-      ? Math.max(0, Date.parse(points[i + 1].timestamp) - Date.parse(points[i].timestamp))
+    const rawDt = connected
+      ? Date.parse(points[i + 1].timestamp) - Date.parse(points[i].timestamp)
       : 50;
+    const dt = Number.isFinite(rawDt) ? Math.max(0, rawDt) : 50;
     if (budget >= dt) {
       budget -= dt;
       i++;
diff --git a/website/package.json b/website/package.json
index c2d233a..e052b22 100644
--- a/website/package.json
+++ b/website/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "vitest run",
     "test:components": "vitest run"
   },
   "dependencies": {
diff --git a/website/tests/create-group-ride.test.ts b/website/tests/create-group-ride.test.ts
index 979be66..b6cdac5 100644
--- a/website/tests/create-group-ride.test.ts
+++ b/website/tests/create-group-ride.test.ts
@@ -81,4 +81,36 @@ describe('commitGroupRide (WEB Phase 1 — persisted ride creation)', () => {
     const res = await commitGroupRide(baseRide, deps);
     expect(res).toEqual({ ok: false, reason: 'commit-failed', error: boom });
   });
+
+  it('guarantees unique ride IDs across concurrent submissions at the same millisecond', async () => {
+    const sharedNow = new Date('2026-10-14T12:00:00.000Z');
+    const { deps: deps1 } = makeDeps({ now: sharedNow });
+    const { deps: deps2 } = makeDeps({ now: sharedNow });
+
+    const [res1, res2] = await Promise.all([
+      commitGroupRide(baseRide, deps1),
+      commitGroupRide(baseRide, deps2),
+    ]);
+
+    expect(res1.ok).toBe(true);
+    expect(res2.ok).toBe(true);
+    if (res1.ok && res2.ok) {
+      expect(res1.rideId).not.toBe(res2.rideId);
+      expect(res1.rideId).toMatch(/^ride_\d+_rider-/);
+      expect(res2.rideId).toMatch(/^ride_\d+_rider-/);
+    }
+  });
+
+  it('handles permission-denied or rejected commit cleanly without throwing', async () => {
+    const permDenied = new Error('permission-denied: caller lacks organizer permission');
+    const { deps } = makeDeps({
+      writeBatch: () => ({ set: vi.fn(), commit: vi.fn().mockRejectedValue(permDenied) }),
+    });
+    const res = await commitGroupRide(baseRide, deps);
+    expect(res.ok).toBe(false);
+    if (!res.ok) {
+      expect(res.reason).toBe('commit-failed');
+      expect((res as any).error).toBe(permDenied);
+    }
+  });
 });
diff --git a/website/tests/group-rides-page.test.tsx b/website/tests/group-rides-page.test.tsx
index 6ba311d..d391d7d 100644
--- a/website/tests/group-rides-page.test.tsx
+++ b/website/tests/group-rides-page.test.tsx
@@ -489,6 +489,43 @@ describe('Group Rides Interactive Page & Components', () => {
       await screen.findByText(/Could not create the ride/i);
       expect(screen.queryByRole('heading', { name: /Doomed Ride/i })).toBeNull();
     });
+
+    it('enforces commit-before-UI: never inserts into UI state while commit is in-flight', async () => {
+      let resolveCommit!: () => void;
+      const pendingCommit = new Promise<void>((res) => {
+        resolveCommit = res;
+      });
+      fb.commitImpl.mockReset();
+      fb.commitImpl.mockImplementation(() => pendingCommit);
+
+      render(<GroupRidesManagement currentUser={authedUser} />);
+
+      fireEvent.click(screen.getByRole('button', { name: /create group ride/i }));
+      fireEvent.change(screen.getByLabelText(/ride title/i), { target: { value: 'In Flight Ride' } });
+      fireEvent.change(screen.getByLabelText(/region \/ city/i), { target: { value: 'Highway 1' } });
+
+      const publishBtn = screen.getByRole('button', { name: /publish group ride/i });
+      fireEvent.click(publishBtn);
+
+      // 1. While in-flight, button disables and shows publishing indicator
+      await waitFor(() => {
+        expect(screen.getByText(/Publishing…/i)).toBeDefined();
+      });
+      // 2. The ride MUST NOT exist in UI state before commit confirms
+      expect(screen.queryByRole('heading', { name: /In Flight Ride/i })).toBeNull();
+
+      // 3. Duplicate clicks while in flight are ignored
+      const inFlightBtn = screen.getByText(/Publishing…/i);
+      fireEvent.click(inFlightBtn);
+      expect(fb.commitImpl).toHaveBeenCalledTimes(1);
+
+      // 4. Resolve the commit
+      resolveCommit();
+
+      // 5. Ride now appears in UI state strictly after commit confirmation
+      await screen.findByRole('heading', { name: /In Flight Ride/i });
+      expect(fb.commitImpl).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('Full GroupRidesPage Smart Routing', () => {
diff --git a/website/tests/telemetry-playback-sync.test.ts b/website/tests/telemetry-playback-sync.test.ts
index dc19adf..effeef2 100644
--- a/website/tests/telemetry-playback-sync.test.ts
+++ b/website/tests/telemetry-playback-sync.test.ts
@@ -67,3 +67,258 @@ describe('advancePlaybackIndex (replay playback synchronization)', () => {
     expect(advancePlaybackIndex([], 0, 1000)).toEqual({ index: 0, remainingMs: 0 });
   });
 });
+
+describe('replay regression tests: irregular timestamps', () => {
+  it('correctly tracks jittered / non-uniform sample intervals', () => {
+    // Non-uniform offsets: 0, 30, 80, 110, 160 ms
+    const jittered = [mk(0), mk(30), mk(80), mk(110), mk(160)];
+    // 25 ms: not enough for step 0->1 (needs 30)
+    let r = advancePlaybackIndex(jittered, 0, 25);
+    expect(r.index).toBe(0);
+    expect(r.remainingMs).toBe(25);
+
+    // Add another 15 ms (total 40 ms): crosses step 0->1 (30 ms), leaves 10 ms (step 1->2 needs 50 ms)
+    r = advancePlaybackIndex(jittered, r.index, 15 + r.remainingMs);
+    expect(r.index).toBe(1);
+    expect(r.remainingMs).toBe(10);
+
+    // Add 60 ms (total 70 ms): crosses step 1->2 (50 ms, leaves 20 ms). Step 2->3 needs 30 ms (20 < 30).
+    r = advancePlaybackIndex(jittered, r.index, 60 + r.remainingMs);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(20);
+  });
+
+  it('steps through identical timestamps (dt === 0) without consuming extraneous budget', () => {
+    // Samples 1 and 2 have the exact same timestamp
+    const dups = [mk(0), mk(50), mk(50), mk(100)];
+    // Budget 50 ms from index 0: covers 0->1 (50 ms) and 1->2 (0 ms)
+    const r = advancePlaybackIndex(dups, 0, 50);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('treats inverted / backwards timestamps as disconnected (50 ms step) instead of looping or stalling', () => {
+    // Sample 2 is out of order (timestamp goes backwards)
+    const backwards = [mk(0), mk(50), mk(30), mk(100)];
+    // From index 1 to 2, delta is -20 ms (disconnected). Should step across with 50 ms step.
+    const r = advancePlaybackIndex(backwards, 1, 50);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('handles unparseable or invalid timestamps gracefully without throwing', () => {
+    const invalidPts: TelemetryPoint[] = [
+      mk(0),
+      { ...mk(50), timestamp: 'invalid-timestamp-string' },
+      mk(100),
+    ];
+    const r = advancePlaybackIndex(invalidPts, 0, 100);
+    expect(r.index).toBe(2);
+  });
+
+  it('safely handles non-finite or NaN budget without freezing', () => {
+    const uniform = [mk(0), mk(50), mk(100)];
+    const rNaN = advancePlaybackIndex(uniform, 0, NaN);
+    expect(rNaN.index).toBe(0);
+    expect(rNaN.remainingMs).toBe(0);
+
+    const rNeg = advancePlaybackIndex(uniform, 0, -500);
+    expect(rNeg.index).toBe(0);
+    expect(rNeg.remainingMs).toBe(0);
+  });
+});
+
+describe('replay regression tests: large gaps & segment breaks', () => {
+  it('compresses a multi-minute gap (>5s) to a single 50 ms step', () => {
+    // 15-minute gap
+    const gapped = [mk(0), mk(50), mk(15 * 60 * 1000)];
+    const r = advancePlaybackIndex(gapped, 1, 50);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('compresses explicit segment boundary transitions to 50 ms', () => {
+    const segments = [mk(0, 0), mk(50, 0), mk(60, 1), mk(110, 1)];
+    // From index 1 to 2, segmentId changes from 0 to 1
+    const r = advancePlaybackIndex(segments, 1, 50);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('handles multiple consecutive disconnected gaps smoothly', () => {
+    // 3 successive gaps of 10 seconds each
+    const multiGapped = [mk(0), mk(10_000), mk(20_000), mk(30_000)];
+    // Each gap is compressed to 50 ms. Total 150 ms crosses all 3 gaps.
+    const r = advancePlaybackIndex(multiGapped, 0, 150);
+    expect(r.index).toBe(3);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('compresses a 24-hour pause in ride without stalling', () => {
+    const dayGap = [mk(0), mk(50), mk(24 * 60 * 60 * 1000)];
+    const r = advancePlaybackIndex(dayGap, 1, 55);
+    expect(r.index).toBe(2);
+    expect(r.remainingMs).toBe(0);
+  });
+});
+
+describe('replay regression tests: pause and resume playback simulation', () => {
+  const points = Array.from({ length: 20 }, (_, i) => mk(i * 50));
+
+  it('simulates play -> pause -> resume without a timing jump', () => {
+    let currentIndex = 0;
+    let carry = 0;
+    let lastTime: number | null = null;
+
+    // Helper simulating an animation frame at 60 fps (16.67 ms frame delta)
+    const tick = (now: number, isPlaying: boolean, speed = 1.0) => {
+      if (!isPlaying) {
+        lastTime = null;
+        carry = 0;
+        return;
+      }
+      if (lastTime == null) lastTime = now;
+      const rawDelta = now - lastTime;
+      const frameDelta = Math.max(0, Math.min(rawDelta, 200));
+      lastTime = now;
+      const budget = frameDelta * speed + carry;
+      const res = advancePlaybackIndex(points, currentIndex, budget);
+      currentIndex = res.index;
+      carry = currentIndex >= points.length - 1 ? 0 : res.remainingMs;
+    };
+
+    // 1. Play for 3 frames (16.67 ms each, ~50 ms total)
+    tick(1000, true); // frame 1: delta 0, index 0, carry 0
+    expect(currentIndex).toBe(0);
+    tick(1016.67, true); // frame 2: delta 16.67, index 0, carry 16.67
+    expect(currentIndex).toBe(0);
+    expect(carry).toBeCloseTo(16.67, 1);
+    tick(1050, true); // frame 3: delta 33.33 + carry 16.67 = 50 ms -> index 1!
+    expect(currentIndex).toBe(1);
+    expect(carry).toBe(0);
+
+    // 2. Pause for 5 seconds (5000 ms wall clock)
+    tick(1060, false); // pause triggered
+    expect(lastTime).toBeNull();
+    expect(carry).toBe(0);
+
+    // 3. Resume 5 seconds later at t=6050
+    tick(6050, true); // first resume frame: lastTime initialized to 6050, delta = 0!
+    expect(currentIndex).toBe(1); // DID NOT JUMP
+    expect(carry).toBe(0);
+
+    // 4. Continue playing after resume
+    tick(6100, true); // 50 ms delta -> index 2!
+    expect(currentIndex).toBe(2);
+    expect(carry).toBe(0);
+  });
+});
+
+describe('replay regression tests: manual seek', () => {
+  const points = Array.from({ length: 50 }, (_, i) => mk(i * 50));
+
+  it('seeks forward and clears carryover', () => {
+    let index = 5;
+    let carry = 25;
+    // Manual seek to 20
+    index = 20;
+    carry = 0;
+    const r = advancePlaybackIndex(points, index, 50 + carry);
+    expect(r.index).toBe(21);
+    expect(r.remainingMs).toBe(0);
+  });
+
+  it('seeks backward and clears carryover', () => {
+    let index = 30;
+    let carry = 40;
+    // Manual seek back to 10
+    index = 10;
+    carry = 0;
+    const r = advancePlaybackIndex(points, index, 100 + carry);
+    expect(r.index).toBe(12);
+  });
+
+  it('clamps out-of-bounds seek indices safely', () => {
+    const rNegative = advancePlaybackIndex(points, -100, 100);
+    expect(rNegative.index).toBe(2); // starts from 0, advances 2 steps
+
+    const rBeyond = advancePlaybackIndex(points, 9999, 100);
+    expect(rBeyond.index).toBe(49); // clamped to length - 1
+    expect(rBeyond.remainingMs).toBe(0);
+  });
+});
+
+describe('replay regression tests: speed changes', () => {
+  const points = Array.from({ length: 100 }, (_, i) => mk(i * 50));
+
+  it('scales budget consumption proportionally to speed', () => {
+    // At 0.5x speed: 100 ms real time = 50 ms virtual budget = 1 step
+    const rHalf = advancePlaybackIndex(points, 0, 100 * 0.5);
+    expect(rHalf.index).toBe(1);
+
+    // At 2x speed: 50 ms real time = 100 ms virtual budget = 2 steps
+    const rDouble = advancePlaybackIndex(points, 0, 50 * 2.0);
+    expect(rDouble.index).toBe(2);
+
+    // At 5x speed: 50 ms real time = 250 ms virtual budget = 5 steps
+    const rFive = advancePlaybackIndex(points, 0, 50 * 5.0);
+    expect(rFive.index).toBe(5);
+
+    // At 10x speed: 50 ms real time = 500 ms virtual budget = 10 steps
+    const rTen = advancePlaybackIndex(points, 0, 50 * 10.0);
+    expect(rTen.index).toBe(10);
+  });
+
+  it('handles speed changes mid-playback without time discontinuity', () => {
+    let index = 10;
+    let carry = 0;
+    let speed = 1.0;
+
+    // 1 frame at 1x (50 ms): advances 1 step
+    let r = advancePlaybackIndex(points, index, 50 * speed + carry);
+    index = r.index;
+    carry = r.remainingMs;
+    expect(index).toBe(11);
+
+    // User switches to 4x speed: reset lastTime (delta = 0 on transition), next frame is 50 ms * 4 = 200 ms
+    speed = 4.0;
+    r = advancePlaybackIndex(points, index, 50 * speed + carry);
+    index = r.index;
+    carry = r.remainingMs;
+    // 200 ms budget over 50 ms steps = 4 steps: 11 + 4 = 15
+    expect(index).toBe(15);
+    expect(carry).toBe(0);
+  });
+});
+
+describe('replay regression tests: large datasets', () => {
+  it('advances efficiently across 10,000 points', () => {
+    const large = Array.from({ length: 10_000 }, (_, i) => mk(i * 50));
+    const start = performance.now();
+    // Advance 500 steps (25,000 ms budget)
+    const r = advancePlaybackIndex(large, 1000, 25_000);
+    const duration = performance.now() - start;
+
+    expect(r.index).toBe(1500);
+    expect(r.remainingMs).toBe(0);
+    expect(duration).toBeLessThan(100);
+  });
+
+  it('handles 144,000 points (full 2-hour 20 Hz recording) without stalling', () => {
+    const huge = Array.from({ length: 144_000 }, (_, i) => mk(i * 50));
+    const start = performance.now();
+
+    // Advance 2,000 steps at high speed
+    const r = advancePlaybackIndex(huge, 100_000, 100_000);
+    const duration = performance.now() - start;
+
+    expect(r.index).toBe(102_000);
+    expect(r.remainingMs).toBe(0);
+    expect(duration).toBeLessThan(100);
+
+    // End of recording clamp
+    const rEnd = advancePlaybackIndex(huge, 143_990, 1_000_000);
+    expect(rEnd.index).toBe(143_999);
+    expect(rEnd.remainingMs).toBe(0);
+  });
+});

From b61d1ebeec077090b57cde2a72f45d5a97468f05 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 15:07:00 -0400
Subject: [PATCH 10/12] fix(website): monotonic timestamp ride IDs, zero-budget
 cursor guard, and modal input preservation

- Guard advancePlaybackIndex against spuriously advancing when budgetMs <= 0 on duplicate timestamps
- Use monotonic millisecond timestamp in commitGroupRide to eliminate timestamp corruption and collision hazards
- Preserve CreateGroupRideModal form inputs on failed commit so users do not lose typed data
- Add regression tests in vitest suites for zero-budget duplicate timestamps, timestamp fidelity, and input preservation
---
 .../group-rides/group-rides-management.tsx    | 17 +++++++-----
 website/lib/create-group-ride.ts              | 11 ++++----
 website/lib/telemetry-track.ts                | 18 ++++++++-----
 website/tests/create-group-ride.test.ts       | 26 +++++++++++++++++--
 website/tests/group-rides-page.test.tsx       |  3 +++
 website/tests/telemetry-playback-sync.test.ts | 11 ++++++++
 6 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/website/components/group-rides/group-rides-management.tsx b/website/components/group-rides/group-rides-management.tsx
index 50c4423..3a0ec1b 100644
--- a/website/components/group-rides/group-rides-management.tsx
+++ b/website/components/group-rides/group-rides-management.tsx
@@ -183,7 +183,7 @@ type MyRidesFilter = 'all' | 'organized' | 'joined';
 interface CreateRideModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onCreateRide: (ride: GroupRideSummary) => void | Promise<void>;
+  onCreateRide: (ride: GroupRideSummary) => void | boolean | Promise<void | boolean>;
 }
 
 function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModalProps) {
@@ -326,8 +326,10 @@ function CreateGroupRideModal({ isOpen, onClose, onCreateRide }: CreateRideModal
 
     setIsSubmitting(true);
     try {
-      await onCreateRide(newRide);
-      onClose();
+      const outcome = await onCreateRide(newRide);
+      if (outcome !== false) {
+        onClose();
+      }
     } finally {
       setIsSubmitting(false);
     }
@@ -1014,9 +1016,9 @@ export function GroupRidesManagement({
   }, [currentUser?.uid]);
 
   // Handlers for Add, Alter, Remove, Join, Leave
-  const handleCreateRide = async (newRide: GroupRideSummary & { visibility?: string; clubId?: string; clubName?: string }) => {
+  const handleCreateRide = async (newRide: GroupRideSummary & { visibility?: string; clubId?: string; clubName?: string }): Promise<boolean> => {
     // Prevent duplicate submissions while a create is already in flight.
-    if (creatingRideRef.current) return;
+    if (creatingRideRef.current) return false;
 
     const uid = currentUser?.uid;
     // Check authentication and persistence availability BEFORE touching UI state, so an
@@ -1024,7 +1026,7 @@ export function GroupRidesManagement({
     // never saved. They get an actionable error instead.
     if (!uid || !firestore) {
       showAlert('Sign in to create a group ride — it could not be saved.', 'error');
-      return;
+      return false;
     }
 
     creatingRideRef.current = true;
@@ -1055,12 +1057,15 @@ export function GroupRidesManagement({
         };
         setRides((prev) => (prev.some((r) => r.id === result.rideId) ? prev : [rideWithOrganizer, ...prev]));
         showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${result.rideId}`, 'success');
+        return true;
       } else if (result.reason === 'commit-failed') {
         console.error('Failed to persist group ride to Firestore:', result.error);
         showAlert('Could not create the ride. Please check your connection and try again.', 'error');
+        return false;
       } else {
         // unauthenticated / unavailable discovered inside the helper (defensive — guarded above).
         showAlert('Could not create the ride right now. Please try again.', 'error');
+        return false;
       }
     } finally {
       creatingRideRef.current = false;
diff --git a/website/lib/create-group-ride.ts b/website/lib/create-group-ride.ts
index aafc310..088dc41 100644
--- a/website/lib/create-group-ride.ts
+++ b/website/lib/create-group-ride.ts
@@ -37,10 +37,10 @@ export interface CommitGroupRideDeps {
  * - unavailable: no Firestore handle
  * - commit-failed: the write was attempted but rejected (nothing persisted)
  */
-let rideIdCounter = 0;
+let lastRideTimestamp = 0;
 
 export function resetRideIdCounter(): void {
-  rideIdCounter = 0;
+  lastRideTimestamp = 0;
 }
 
 export async function commitGroupRide(
@@ -52,9 +52,10 @@ export async function commitGroupRide(
   if (!deps.firestore) return { ok: false, reason: 'unavailable' };
 
   const now = deps.now ?? new Date();
-  const seq = ++rideIdCounter;
-  const seqSuffix = seq > 1 ? `${seq}` : '';
-  const rideId = `ride_${now.getTime()}${seqSuffix}_${uid.substring(0, Math.min(6, uid.length))}`;
+  const rawMs = now.getTime();
+  const timestamp = Math.max(rawMs, lastRideTimestamp + 1);
+  lastRideTimestamp = timestamp;
+  const rideId = `ride_${timestamp}_${uid.substring(0, Math.min(6, uid.length))}`;
 
   const payload = buildWebGroupRidePayload(newRide, {
     rideId,
diff --git a/website/lib/telemetry-track.ts b/website/lib/telemetry-track.ts
index 77f7baa..ec91254 100644
--- a/website/lib/telemetry-track.ts
+++ b/website/lib/telemetry-track.ts
@@ -62,22 +62,26 @@ export function advancePlaybackIndex(
   budgetMs: number
 ): { index: number; remainingMs: number } {
   if (points.length === 0) return { index: 0, remainingMs: 0 };
-  let i = Math.max(0, Math.min(fromIndex, points.length - 1));
-  let budget = Number.isFinite(budgetMs) ? Math.max(0, budgetMs) : 0;
-  while (i < points.length - 1) {
-    const connected = areTelemetryPointsConnected(points[i], points[i + 1]);
+  const i = Math.max(0, Math.min(fromIndex, points.length - 1));
+  if (!Number.isFinite(budgetMs) || budgetMs <= 0) {
+    return { index: i, remainingMs: 0 };
+  }
+  let budget = budgetMs;
+  let curr = i;
+  while (curr < points.length - 1) {
+    const connected = areTelemetryPointsConnected(points[curr], points[curr + 1]);
     const rawDt = connected
-      ? Date.parse(points[i + 1].timestamp) - Date.parse(points[i].timestamp)
+      ? Date.parse(points[curr + 1].timestamp) - Date.parse(points[curr].timestamp)
       : 50;
     const dt = Number.isFinite(rawDt) ? Math.max(0, rawDt) : 50;
     if (budget >= dt) {
       budget -= dt;
-      i++;
+      curr++;
     } else {
       break;
     }
   }
-  return { index: i, remainingMs: i < points.length - 1 ? budget : 0 };
+  return { index: curr, remainingMs: curr < points.length - 1 ? budget : 0 };
 }
 
 /** Leaflet's geographic API is [latitude, longitude], never normalized screen pixels. */
diff --git a/website/tests/create-group-ride.test.ts b/website/tests/create-group-ride.test.ts
index b6cdac5..3a37d1f 100644
--- a/website/tests/create-group-ride.test.ts
+++ b/website/tests/create-group-ride.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from 'vitest';
-import { commitGroupRide } from '../lib/create-group-ride';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { commitGroupRide, resetRideIdCounter } from '../lib/create-group-ride';
 import type { WebGroupRideInput } from '../lib/group-ride-payload';
 
 const baseRide: WebGroupRideInput = {
@@ -41,6 +41,10 @@ function makeDeps(overrides: Partial<Parameters<typeof commitGroupRide>[1]> = {}
 }
 
 describe('commitGroupRide (WEB Phase 1 — persisted ride creation)', () => {
+  beforeEach(() => {
+    resetRideIdCounter();
+  });
+
   it('refuses to create for an unauthenticated user (no uid) and never writes', async () => {
     const { deps, commitSpy } = makeDeps({ uid: undefined });
     const res = await commitGroupRide(baseRide, deps);
@@ -101,6 +105,24 @@ describe('commitGroupRide (WEB Phase 1 — persisted ride creation)', () => {
     }
   });
 
+  it('preserves clean timestamps without string suffix corruption on successive rides', async () => {
+    const t1 = new Date('2026-10-14T12:00:00.000Z');
+    const t2 = new Date('2026-10-14T12:05:00.000Z');
+    const { deps: deps1 } = makeDeps({ now: t1 });
+    const { deps: deps2 } = makeDeps({ now: t2 });
+
+    const res1 = await commitGroupRide(baseRide, deps1);
+    const res2 = await commitGroupRide(baseRide, deps2);
+
+    expect(res1.ok).toBe(true);
+    expect(res2.ok).toBe(true);
+    if (res1.ok && res2.ok) {
+      // Must equal exact millisecond timestamp, NOT corrupted with appended counter digits
+      expect(res1.rideId).toBe(`ride_${t1.getTime()}_rider-`);
+      expect(res2.rideId).toBe(`ride_${t2.getTime()}_rider-`);
+    }
+  });
+
   it('handles permission-denied or rejected commit cleanly without throwing', async () => {
     const permDenied = new Error('permission-denied: caller lacks organizer permission');
     const { deps } = makeDeps({
diff --git a/website/tests/group-rides-page.test.tsx b/website/tests/group-rides-page.test.tsx
index d391d7d..47889ba 100644
--- a/website/tests/group-rides-page.test.tsx
+++ b/website/tests/group-rides-page.test.tsx
@@ -488,6 +488,9 @@ describe('Group Rides Interactive Page & Components', () => {
 
       await screen.findByText(/Could not create the ride/i);
       expect(screen.queryByRole('heading', { name: /Doomed Ride/i })).toBeNull();
+      // Form inputs remain preserved in the modal so the user does not lose their typed data
+      expect(screen.getByLabelText<HTMLInputElement>(/ride title/i).value).toBe('Doomed Ride');
+      expect(screen.getByLabelText<HTMLInputElement>(/region \/ city/i).value).toBe('Nowhere');
     });
 
     it('enforces commit-before-UI: never inserts into UI state while commit is in-flight', async () => {
diff --git a/website/tests/telemetry-playback-sync.test.ts b/website/tests/telemetry-playback-sync.test.ts
index effeef2..e901897 100644
--- a/website/tests/telemetry-playback-sync.test.ts
+++ b/website/tests/telemetry-playback-sync.test.ts
@@ -97,6 +97,17 @@ describe('replay regression tests: irregular timestamps', () => {
     expect(r.remainingMs).toBe(0);
   });
 
+  it('does not advance on zero or negative budget even if adjacent samples have identical timestamp (dt === 0)', () => {
+    const dups = [mk(0), mk(0), mk(50)];
+    const rZero = advancePlaybackIndex(dups, 0, 0);
+    expect(rZero.index).toBe(0);
+    expect(rZero.remainingMs).toBe(0);
+
+    const rNeg = advancePlaybackIndex(dups, 0, -10);
+    expect(rNeg.index).toBe(0);
+    expect(rNeg.remainingMs).toBe(0);
+  });
+
   it('treats inverted / backwards timestamps as disconnected (50 ms step) instead of looping or stalling', () => {
     // Sample 2 is out of order (timestamp goes backwards)
     const backwards = [mk(0), mk(50), mk(30), mk(100)];

From 5e1ce969cc9ba96cf8c9f7e0404e7e2be5124878 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 15:49:12 -0400
Subject: [PATCH 11/12] fix(website): truthful account metrics error states and
 persistent demo chat labeling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace false zero metrics (0 miles / 0 rides / 100% Cloud Synced) on loading, unauthenticated, permission-denied, or network errors with truthful states

- Update AppCloudData to query motorcycles and rides via Promise.allSettled and report granular CloudDataStatus

- Update AccountPage KPI cards to display Loading…, —, or Unavailable with explicit contextual status and error recovery

- Fix founder demo chat to permanently preserve Example thread and example badges during preview=demo simulation instead of flipping to Live Connected

- Add 8 unit/component tests in account-metrics-truthfulness.test.tsx and 6 tests in founder-routes-chat.test.tsx
---
 website/app/account/page.tsx                  | 158 ++++++--
 website/components/app-cloud-data.tsx         | 334 ++++++++++++----
 .../founder-portal/founder-chat.tsx           |  48 ++-
 .../account-metrics-truthfulness.test.tsx     | 371 ++++++++++++++++++
 website/tests/founder-routes-chat.test.tsx    |  99 +++++
 5 files changed, 894 insertions(+), 116 deletions(-)
 create mode 100644 website/tests/account-metrics-truthfulness.test.tsx

diff --git a/website/app/account/page.tsx b/website/app/account/page.tsx
index bd29499..87982fc 100644
--- a/website/app/account/page.tsx
+++ b/website/app/account/page.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { onAuthStateChanged, multiFactor, User } from 'firebase/auth';
 import { firebaseAuth } from '../../lib/firebase-client';
-import { AppCloudData } from '../../components/app-cloud-data';
+import { AppCloudData, type CloudDataStatus } from '../../components/app-cloud-data';
 import { FirebaseLink } from '../../components/firebase-link';
 import { SignOutButton } from '../../components/sign-out-button';
 
@@ -22,10 +22,12 @@ export default function AccountPage() {
   const [syncTrigger, setSyncTrigger] = useState(0);
   const [isSyncing, setIsSyncing] = useState(false);
   const [lastSynced, setLastSynced] = useState<string | null>(null);
-  // Initialise to zero; AppCloudData replaces these with real totals from the rider's
-  // Firestore rides (or leaves them at zero when signed out / no rides). Never seed
-  // fabricated stats.
-  const [metrics, setMetrics] = useState({ totalMiles: 0, rideCount: 0, peakLean: 0 });
+  const [syncError, setSyncError] = useState<string | null>(null);
+  // Truthful metrics & sync states:
+  // Distinguish 'idle', 'loading', 'unauthenticated', 'ready', 'permission-denied', 'unavailable', and 'error'.
+  // Never initialize unavailable information in a way that displays as verified zero metrics or 100% synced.
+  const [metricsStatus, setMetricsStatus] = useState<CloudDataStatus>('loading');
+  const [metrics, setMetrics] = useState<{ totalMiles: number; rideCount: number; peakLean: number } | null>(null);
 
   // Active Device Sessions State
   const [sessions, setSessions] = useState<DeviceSession[]>([]);
@@ -41,6 +43,11 @@ export default function AccountPage() {
     const unsubscribe = onAuthStateChanged(firebaseAuth, (currentUser) => {
       setUser(currentUser);
       setAuthChecked(true);
+      if (!currentUser) {
+        setMetricsStatus('unauthenticated');
+        setMetrics(null);
+        setSyncError(null);
+      }
     });
     return () => unsubscribe();
   }, []);
@@ -161,7 +168,10 @@ export default function AccountPage() {
   }
 
   function handleQuickSync() {
+    if (!user) return;
     setIsSyncing(true);
+    setSyncError(null);
+    setMetricsStatus('loading');
     setSyncTrigger((prev) => prev + 1);
   }
 
@@ -239,7 +249,15 @@ export default function AccountPage() {
           strokeWidth="2"
         ></path>
       </svg>
-      <span>{isSyncing ? 'Syncing...' : lastSynced ? `Synced (${lastSynced})` : 'Quick Sync'}</span>
+      <span>
+        {isSyncing
+          ? 'Syncing...'
+          : syncError
+          ? 'Sync Failed (Retry)'
+          : lastSynced
+          ? `Synced (${lastSynced})`
+          : 'Quick Sync'}
+      </span>
     </button>
     <div className="px-3 py-1.5 rounded-lg bg-brand-cardAlt border border-brand-border text-xs font-mono text-rose-400">
       <SignOutButton />
@@ -262,46 +280,128 @@ export default function AccountPage() {
 {/*  BEGIN: TelemetryKpiGrid  */}
 <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" data-purpose="telemetry-overview-stats">
 {/*  Metric 1: Distance  */}
-<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
+<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200" data-testid="metric-card-distance">
 <div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
 <span>Total Distance Logged</span>
-<span className="text-brand-cyan bg-brand-cyan/10 px-1.5 py-0.5 rounded text-[10px]">Cloud Aggregate</span>
+{metricsStatus === 'loading' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Loading…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Sign in to view</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400 bg-rose-500/10 px-1.5 py-0.5 rounded text-[10px]">Permission denied</span>
+) : metricsStatus === 'unavailable' || metricsStatus === 'error' ? (
+  <span className="text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded text-[10px]">Sync unavailable</span>
+) : (
+  <span className="text-brand-cyan bg-brand-cyan/10 px-1.5 py-0.5 rounded text-[10px]">Cloud Aggregate</span>
+)}
 </div>
 <div className="mt-3 flex items-baseline space-x-2">
-<span className="text-3xl font-extrabold text-white font-mono">{metrics.totalMiles.toLocaleString()}</span>
-<span className="text-sm font-mono text-slate-400">miles</span>
+{metricsStatus === 'ready' && metrics !== null ? (
+  <>
+    <span className="text-3xl font-extrabold text-white font-mono">{metrics.totalMiles.toLocaleString()}</span>
+    <span className="text-sm font-mono text-slate-400">miles</span>
+  </>
+) : metricsStatus === 'loading' ? (
+  <span className="text-2xl font-bold text-slate-400 font-mono animate-pulse">Loading…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-3xl font-bold text-slate-500 font-mono">—</span>
+) : (
+  <span className="text-2xl font-bold text-rose-400 font-mono">Unavailable</span>
+)}
 </div>
 <div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
-<span className="w-1.5 h-1.5 rounded-full bg-brand-emerald"></span>
-<span>All-time telemetry aggregate</span>
+{metricsStatus === 'ready' ? (
+  <>
+    <span className="w-1.5 h-1.5 rounded-full bg-brand-emerald"></span>
+    <span>All-time telemetry aggregate</span>
+  </>
+) : metricsStatus === 'loading' ? (
+  <span>Retrieving telemetry aggregate…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span>Sign in to view telemetry aggregate</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400">Access to cloud telemetry restricted</span>
+) : (
+  <span className="text-amber-400">Telemetry aggregate unavailable</span>
+)}
 </div>
 </div>
 {/*  Metric 2: Sessions  */}
-<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
+<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200" data-testid="metric-card-sessions">
 <div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
 <span>Recorded Sessions</span>
-<span className="text-brand-emerald bg-brand-emerald/10 px-1.5 py-0.5 rounded text-[10px]">100% Cloud Synced</span>
+{metricsStatus === 'loading' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Checking sync…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Sign-in required</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400 bg-rose-500/10 px-1.5 py-0.5 rounded text-[10px]">Permission denied</span>
+) : metricsStatus === 'unavailable' || metricsStatus === 'error' ? (
+  <span className="text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded text-[10px]">Sync status unavailable</span>
+) : metrics !== null && metrics.rideCount > 0 ? (
+  <span className="text-brand-emerald bg-brand-emerald/10 px-1.5 py-0.5 rounded text-[10px]">100% Cloud Synced</span>
+) : (
+  <span className="text-brand-cyan bg-brand-cyan/10 px-1.5 py-0.5 rounded text-[10px]">Cloud Synced</span>
+)}
 </div>
 <div className="mt-3 flex items-baseline space-x-2">
-<span className="text-3xl font-extrabold text-white font-mono">{metrics.rideCount}</span>
-<span className="text-sm font-mono text-slate-400">rides</span>
+{metricsStatus === 'ready' && metrics !== null ? (
+  <>
+    <span className="text-3xl font-extrabold text-white font-mono">{metrics.rideCount}</span>
+    <span className="text-sm font-mono text-slate-400">rides</span>
+  </>
+) : metricsStatus === 'loading' ? (
+  <span className="text-2xl font-bold text-slate-400 font-mono animate-pulse">Loading…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-3xl font-bold text-slate-500 font-mono">—</span>
+) : (
+  <span className="text-2xl font-bold text-rose-400 font-mono">Unavailable</span>
+)}
 </div>
 <div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
-<span>Canyons, Circuits &amp; Commutes</span>
+{metricsStatus === 'ready' && metrics !== null ? (
+  metrics.rideCount > 0 ? (
+    <span>Canyons, Circuits &amp; Commutes</span>
+  ) : (
+    <span>No rides recorded yet</span>
+  )
+) : metricsStatus === 'loading' ? (
+  <span>Checking cloud telemetry sessions…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span>Sign in to load synced rides</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400">Check Firestore permissions</span>
+) : (
+  <span className="text-amber-400">Could not retrieve sessions from cloud</span>
+)}
 </div>
 </div>
 {/*  Metric 3: Lean Angle Peak  */}
-<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200">
+<div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200" data-testid="metric-card-lean">
 <div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
 <span>Peak Lean Angle</span>
-<span className="text-brand-cyan font-mono text-[10px]">Lateral Roll</span>
+<span className="text-brand-cyan font-mono text-[10px]">
+  {metricsStatus === 'permission-denied' || metricsStatus === 'unavailable' || metricsStatus === 'error'
+    ? 'Unavailable'
+    : 'Lateral Roll'}
+</span>
 </div>
 <div className="mt-3 flex items-baseline space-x-2">
-<span className="text-3xl font-extrabold text-brand-cyan font-mono">{metrics.peakLean > 0 ? `${metrics.peakLean}°` : '--'}</span>
+<span className="text-3xl font-extrabold text-brand-cyan font-mono">
+  {metricsStatus === 'ready' && metrics !== null && metrics.peakLean > 0 ? `${metrics.peakLean}°` : '--'}
+</span>
 <span className="text-sm font-mono text-slate-400">lateral roll</span>
 </div>
 <div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
-<span className="text-amber-400">6-Axis IMU Verified</span>
+{metricsStatus === 'ready' && metrics !== null && metrics.peakLean > 0 ? (
+  <span className="text-amber-400">6-Axis IMU Verified</span>
+) : metricsStatus === 'loading' ? (
+  <span>Retrieving lean telemetry…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span>No active session data</span>
+) : (
+  <span className="text-slate-500">No IMU roll data</span>
+)}
 </div>
 </div>
 {/*  Metric 4: Hardware Link  */}
@@ -325,11 +425,23 @@ export default function AccountPage() {
   syncTrigger={syncTrigger}
   onSyncStateChange={(syncing) => {
     setIsSyncing(syncing);
-    if (!syncing) {
+  }}
+  onStatusChange={(status, _err) => {
+    setMetricsStatus(status);
+    if (status === 'ready') {
+      setSyncError(null);
       setLastSynced(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+    } else if (status === 'permission-denied' || status === 'unavailable' || status === 'error') {
+      setSyncError('Sync failed');
+    } else if (status === 'unauthenticated') {
+      setMetrics(null);
+      setSyncError(null);
     }
   }}
-  onMetricsLoaded={(m) => setMetrics(m)}
+  onMetricsLoaded={(m) => {
+    setMetrics(m);
+    setMetricsStatus('ready');
+  }}
 />
 {/*  BEGIN: PlanAndClusterSection  */}
 <section className="grid grid-cols-1 lg:grid-cols-12 gap-6" data-purpose="subscription-and-sync-status">
diff --git a/website/components/app-cloud-data.tsx b/website/components/app-cloud-data.tsx
index cbb32fe..c267736 100644
--- a/website/components/app-cloud-data.tsx
+++ b/website/components/app-cloud-data.tsx
@@ -139,15 +139,40 @@ function StockMotorcycleGraphic({ className = 'w-full h-40' }: { className?: str
   );
 }
 
-interface AppCloudDataProps {
-  syncTrigger?: number;
-  onSyncStateChange?: (syncing: boolean) => void;
-  onMetricsLoaded?: (metrics: { totalMiles: number; rideCount: number; peakLean: number }) => void;
+export interface AccountCloudMetrics {
+  totalMiles: number;
+  rideCount: number;
+  peakLean: number;
 }
 
-export function AppCloudData({ syncTrigger = 0, onSyncStateChange, onMetricsLoaded }: AppCloudDataProps) {
+export type CloudDataStatus =
+  | 'idle'
+  | 'loading'
+  | 'unauthenticated'
+  | 'ready'
+  | 'permission-denied'
+  | 'unavailable'
+  | 'error';
+
+export interface AppCloudDataProps {
+  syncTrigger?: number;
+  onSyncStateChange?: (syncing: boolean) => void;
+  onMetricsLoaded?: (metrics: AccountCloudMetrics) => void;
+  onStatusChange?: (status: CloudDataStatus, error?: unknown) => void;
+}
+
+export function AppCloudData({
+  syncTrigger = 0,
+  onSyncStateChange,
+  onMetricsLoaded,
+  onStatusChange,
+}: AppCloudDataProps) {
   const [motorcycles, setMotorcycles] = useState<Motorcycle[]>([]);
   const [rides, setRides] = useState<Ride[]>([]);
+  const [garageStatus, setGarageStatus] = useState<CloudDataStatus>('loading');
+  const [ridesStatus, setRidesStatus] = useState<CloudDataStatus>('loading');
+  const [garageError, setGarageError] = useState<string | null>(null);
+  const [ridesError, setRidesError] = useState<string | null>(null);
   const [state, setState] = useState('Loading telemetry cloud data...');
   const [user, setUser] = useState<User | null>(null);
 
@@ -331,109 +356,180 @@ export function AppCloudData({ syncTrigger = 0, onSyncStateChange, onMetricsLoad
     if (!currentUser) {
       setMotorcycles([]);
       setRides([]);
+      setGarageStatus('unauthenticated');
+      setRidesStatus('unauthenticated');
+      setGarageError(null);
+      setRidesError(null);
       setState('Sign in or connect your Google account to view your live telemetry.');
-      if (onMetricsLoaded) onMetricsLoaded({ totalMiles: 0, rideCount: 0, peakLean: 0 });
+      if (onStatusChange) onStatusChange('unauthenticated');
       return;
     }
 
+    setGarageStatus('loading');
+    setRidesStatus('loading');
+    setGarageError(null);
+    setRidesError(null);
+    if (onStatusChange) onStatusChange('loading');
     if (onSyncStateChange) onSyncStateChange(true);
+
+    function classifyError(err: unknown): { status: CloudDataStatus; message: string } {
+      const msg = err instanceof Error ? err.message : String(err);
+      const code = (err as { code?: string })?.code;
+      if (
+        code === 'permission-denied' ||
+        msg.includes('permission-denied') ||
+        msg.includes('Missing or insufficient permissions')
+      ) {
+        return { status: 'permission-denied', message: 'Permission denied: unable to access cloud telemetry.' };
+      }
+      if (
+        code === 'unavailable' ||
+        msg.includes('unavailable') ||
+        msg.includes('offline') ||
+        msg.includes('network') ||
+        msg.includes('Failed to fetch')
+      ) {
+        return { status: 'unavailable', message: 'Network offline: unable to reach MotorSignal cloud.' };
+      }
+      return { status: 'error', message: msg || 'An unexpected error occurred while loading cloud telemetry.' };
+    }
+
     try {
-      const [motorcycleSnapshot, rideSnapshot] = await Promise.all([
+      const [motorcycleRes, rideRes] = await Promise.allSettled([
         getDocs(collection(firestore, 'users', currentUser.uid, 'motorcycles')),
         getDocs(collection(firestore, 'users', currentUser.uid, 'rides')),
       ]);
 
-      const loadedMotorcycles: Motorcycle[] = motorcycleSnapshot.docs.map((snapshot) => {
-        const data = snapshot.data();
-        const yearVal = number(data.year) || 0;
-        const makeVal = text(data.makeName) || text(data.make);
-        const modelVal = text(data.modelName) || text(data.model);
-        const variantVal = text(data.variantName) || text(data.variant);
-        const description = [yearVal || '', makeVal, modelVal, variantVal].filter(Boolean).join(' ');
-        return {
-          id: snapshot.id,
-          nickname: text(data.nickname) || description || 'Motorcycle',
-          makeName: makeVal,
-          modelName: modelVal,
-          variantName: variantVal,
-          year: yearVal,
-          description,
-          isDefault: data.isDefault === true,
-          imageUrl: text(data.imageUrl) || undefined,
-          vin: text(data.vin) || text(data.vinNumber) || undefined,
-        };
-      }).sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
+      // Process Motorcycles
+      if (motorcycleRes.status === 'fulfilled') {
+        const loadedMotorcycles: Motorcycle[] = motorcycleRes.value.docs.map((snapshot) => {
+          const data = snapshot.data();
+          const yearVal = number(data.year) || 0;
+          const makeVal = text(data.makeName) || text(data.make);
+          const modelVal = text(data.modelName) || text(data.model);
+          const variantVal = text(data.variantName) || text(data.variant);
+          const description = [yearVal || '', makeVal, modelVal, variantVal].filter(Boolean).join(' ');
+          return {
+            id: snapshot.id,
+            nickname: text(data.nickname) || description || 'Motorcycle',
+            makeName: makeVal,
+            modelName: modelVal,
+            variantName: variantVal,
+            year: yearVal,
+            description,
+            isDefault: data.isDefault === true,
+            imageUrl: text(data.imageUrl) || undefined,
+            vin: text(data.vin) || text(data.vinNumber) || undefined,
+          };
+        }).sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
 
-      let totalMiles = 0;
-      let peakLean = 0;
+        setMotorcycles(loadedMotorcycles);
+        setGarageStatus('ready');
+        setGarageError(null);
+      } else {
+        const classified = classifyError(motorcycleRes.reason);
+        setGarageStatus(classified.status);
+        setGarageError(classified.message);
+        console.error('Error loading motorcycles:', motorcycleRes.reason);
+      }
 
-      const loadedRides: Ride[] = rideSnapshot.docs.map((snapshot) => {
-        const data = snapshot.data();
-        const rawStart = text(data.startTime);
-        const rawEnd = text(data.endTime);
-        const startedAt = rawStart ? new Date(rawStart) : null;
-        const endedAt = rawEnd ? new Date(rawEnd) : null;
-        const dist = number(data.distanceMiles);
-        const leanL = number(data.maxLeanLeft);
-        const leanR = number(data.maxLeanRight);
+      // Process Rides & Metrics
+      if (rideRes.status === 'fulfilled') {
+        let totalMiles = 0;
+        let peakLean = 0;
 
-        totalMiles += dist;
-        if (leanL > peakLean) peakLean = leanL;
-        if (leanR > peakLean) peakLean = leanR;
+        const loadedRides: Ride[] = rideRes.value.docs.map((snapshot) => {
+          const data = snapshot.data();
+          const rawStart = text(data.startTime);
+          const rawEnd = text(data.endTime);
+          const startedAt = rawStart ? new Date(rawStart) : null;
+          const endedAt = rawEnd ? new Date(rawEnd) : null;
+          const dist = number(data.distanceMiles);
+          const leanL = number(data.maxLeanLeft);
+          const leanR = number(data.maxLeanRight);
 
-        const startLat = number(data.startLat) || number(data.startLatitude) || undefined;
-        const startLon = number(data.startLon) || number(data.startLongitude) || undefined;
-        const endLat = number(data.endLat) || number(data.endLatitude) || undefined;
-        const endLon = number(data.endLon) || number(data.endLongitude) || undefined;
-        const bundlePath = text(data.telemetryBundlePath) || text(data.telemetryBundle?.objectKey) || undefined;
+          totalMiles += dist;
+          if (leanL > peakLean) peakLean = leanL;
+          if (leanR > peakLean) peakLean = leanR;
 
-        let ridePoints: TelemetryPoint[] | undefined;
-        if (Array.isArray(data.points) && data.points.length > 0) {
-          ridePoints = data.points;
-        } else if (Array.isArray(data.telemetryPoints) && data.telemetryPoints.length > 0) {
-          ridePoints = data.telemetryPoints;
-        }
+          const startLat = number(data.startLat) || number(data.startLatitude) || undefined;
+          const startLon = number(data.startLon) || number(data.startLongitude) || undefined;
+          const endLat = number(data.endLat) || number(data.endLatitude) || undefined;
+          const endLon = number(data.endLon) || number(data.endLongitude) || undefined;
+          const bundlePath = text(data.telemetryBundlePath) || text(data.telemetryBundle?.objectKey) || undefined;
 
-        return {
-          id: snapshot.id,
-          startedAt: startedAt && !Number.isNaN(startedAt.getTime()) ? startedAt : null,
-          endedAt: endedAt && !Number.isNaN(endedAt.getTime()) ? endedAt : null,
-          distanceMiles: dist,
-          topSpeedMph: number(data.topSpeedMph),
-          averageSpeed: number(data.averageSpeed),
-          maxLeanLeft: leanL,
-          maxLeanRight: leanR,
-          maxAccelG: number(data.maxAccelG),
-          maxBrakingG: number(data.maxBrakingG),
-          movingTime: number(data.movingTime),
-          elevationGain: number(data.elevationGain),
-          qualityScore: number(data.qualityScore) || 100,
-          motorcycle: [number(data.motorcycleYear) || '', text(data.motorcycleMake), text(data.motorcycleModel)].filter(Boolean).join(' '),
-          startLat,
-          startLon,
-          endLat,
-          endLon,
-          points: ridePoints,
-          gpxContent: text(data.gpxContent) || undefined,
-          csvContent: text(data.csvContent) || undefined,
-          telemetryBundlePath: bundlePath,
-        };
-      }).sort((a, b) => (b.startedAt?.getTime() ?? 0) - (a.startedAt?.getTime() ?? 0));
+          let ridePoints: TelemetryPoint[] | undefined;
+          if (Array.isArray(data.points) && data.points.length > 0) {
+            ridePoints = data.points;
+          } else if (Array.isArray(data.telemetryPoints) && data.telemetryPoints.length > 0) {
+            ridePoints = data.telemetryPoints;
+          }
 
-      setMotorcycles(loadedMotorcycles);
-      setRides(loadedRides);
-      setState('');
+          return {
+            id: snapshot.id,
+            startedAt: startedAt && !Number.isNaN(startedAt.getTime()) ? startedAt : null,
+            endedAt: endedAt && !Number.isNaN(endedAt.getTime()) ? endedAt : null,
+            distanceMiles: dist,
+            topSpeedMph: number(data.topSpeedMph),
+            averageSpeed: number(data.averageSpeed),
+            maxLeanLeft: leanL,
+            maxLeanRight: leanR,
+            maxAccelG: number(data.maxAccelG),
+            maxBrakingG: number(data.maxBrakingG),
+            movingTime: number(data.movingTime),
+            elevationGain: number(data.elevationGain),
+            qualityScore: number(data.qualityScore) || 100,
+            motorcycle: [number(data.motorcycleYear) || '', text(data.motorcycleMake), text(data.motorcycleModel)].filter(Boolean).join(' '),
+            startLat,
+            startLon,
+            endLat,
+            endLon,
+            points: ridePoints,
+            gpxContent: text(data.gpxContent) || undefined,
+            csvContent: text(data.csvContent) || undefined,
+            telemetryBundlePath: bundlePath,
+          };
+        }).sort((a, b) => (b.startedAt?.getTime() ?? 0) - (a.startedAt?.getTime() ?? 0));
 
-      if (onMetricsLoaded) {
-        onMetricsLoaded({
+        setRides(loadedRides);
+        setRidesStatus('ready');
+        setRidesError(null);
+
+        const computedMetrics = {
           totalMiles: Math.round(totalMiles),
           rideCount: loadedRides.length,
           peakLean: Number(peakLean.toFixed(1)),
-        });
+        };
+
+        if (onMetricsLoaded) {
+          onMetricsLoaded(computedMetrics);
+        }
+        if (onStatusChange) {
+          onStatusChange('ready');
+        }
+      } else {
+        const classified = classifyError(rideRes.reason);
+        setRidesStatus(classified.status);
+        setRidesError(classified.message);
+        console.error('Error loading telemetry rides:', rideRes.reason);
+        if (onStatusChange) {
+          onStatusChange(classified.status, rideRes.reason);
+        }
+      }
+
+      if (motorcycleRes.status === 'rejected' && rideRes.status === 'rejected') {
+        setState('App cloud data could not be loaded. Please re-authenticate or click Quick Sync.');
+      } else if (motorcycleRes.status === 'rejected' || rideRes.status === 'rejected') {
+        setState('Some cloud telemetry could not be loaded.');
+      } else {
+        setState('');
       }
     } catch (error) {
       console.error('Error loading MotorSignal cloud data:', error);
       setState('App cloud data could not be loaded. Please re-authenticate or click Quick Sync.');
+      if (onStatusChange) {
+        onStatusChange('error', error);
+      }
     } finally {
       if (onSyncStateChange) onSyncStateChange(false);
     }
@@ -855,6 +951,34 @@ export function AppCloudData({ syncTrigger = 0, onSyncStateChange, onMetricsLoad
               </div>
             ))}
           </div>
+        ) : garageStatus === 'loading' ? (
+          <div className="glass-card rounded-2xl border border-slate-800 p-8 text-center space-y-3" data-testid="garage-loading">
+            <div className="w-8 h-8 mx-auto rounded-full border-2 border-brand-cyan/40 border-t-brand-cyan animate-spin"></div>
+            <p className="text-xs text-slate-400 font-mono">Loading motorcycle garage…</p>
+          </div>
+        ) : garageStatus === 'permission-denied' || garageStatus === 'unavailable' || garageStatus === 'error' ? (
+          <div className="glass-card rounded-2xl border border-rose-500/30 bg-rose-500/5 p-8 text-center space-y-3" data-testid="cloud-garage-error">
+            <div className="w-10 h-10 mx-auto rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center font-bold">
+              !
+            </div>
+            <h3 className="text-sm font-bold text-white">
+              {garageStatus === 'permission-denied'
+                ? 'Garage Telemetry Restricted — Permission Denied'
+                : 'Garage Telemetry Unavailable'}
+            </h3>
+            <p className="text-xs text-slate-400 font-mono max-w-md mx-auto">
+              {garageError || (garageStatus === 'permission-denied'
+                ? 'Your account does not have permission to read motorcycles from Firestore.'
+                : 'Unable to load motorcycle garage from cloud. Please verify connection and retry.')}
+            </p>
+            <button
+              type="button"
+              onClick={() => void loadData(user)}
+              className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-mono border border-slate-600 transition cursor-pointer"
+            >
+              Retry Sync
+            </button>
+          </div>
         ) : (
           <div className="glass-card rounded-2xl border border-dashed border-slate-700 p-8 text-center space-y-4">
             <StockMotorcycleGraphic className="max-w-md mx-auto h-36 opacity-60" />
@@ -890,9 +1014,19 @@ export function AppCloudData({ syncTrigger = 0, onSyncStateChange, onMetricsLoad
               </p>
             </div>
           </div>
-          <span className="text-xs font-mono text-brand-emerald bg-brand-emerald/10 border border-brand-emerald/30 px-2.5 py-1 rounded-full">
-            {rides.length} {rides.length === 1 ? 'Session' : 'Sessions'} Recorded
-          </span>
+          {ridesStatus === 'loading' ? (
+            <span className="text-xs font-mono text-slate-400 bg-slate-800 border border-slate-700 px-2.5 py-1 rounded-full">
+              Checking sessions…
+            </span>
+          ) : ridesStatus === 'permission-denied' || ridesStatus === 'unavailable' || ridesStatus === 'error' ? (
+            <span className="text-xs font-mono text-rose-400 bg-rose-500/10 border border-rose-500/30 px-2.5 py-1 rounded-full">
+              Feed Unavailable
+            </span>
+          ) : (
+            <span className="text-xs font-mono text-brand-emerald bg-brand-emerald/10 border border-brand-emerald/30 px-2.5 py-1 rounded-full">
+              {rides.length} {rides.length === 1 ? 'Session' : 'Sessions'} Recorded
+            </span>
+          )}
         </div>
 
         {rides.length > 0 ? (
@@ -1098,6 +1232,34 @@ export function AppCloudData({ syncTrigger = 0, onSyncStateChange, onMetricsLoad
               </div>
             )}
           </div>
+        ) : ridesStatus === 'loading' ? (
+          <div className="glass-card rounded-2xl border border-slate-800 p-8 text-center space-y-3" data-testid="rides-loading">
+            <div className="w-8 h-8 mx-auto rounded-full border-2 border-brand-emerald/40 border-t-brand-emerald animate-spin"></div>
+            <p className="text-xs text-slate-400 font-mono">Loading telemetry sessions…</p>
+          </div>
+        ) : ridesStatus === 'permission-denied' || ridesStatus === 'unavailable' || ridesStatus === 'error' ? (
+          <div className="glass-card rounded-2xl border border-rose-500/30 bg-rose-500/5 p-8 text-center space-y-3" data-testid="cloud-rides-error">
+            <div className="w-10 h-10 mx-auto rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center font-bold">
+              !
+            </div>
+            <h3 className="text-base font-bold text-white">
+              {ridesStatus === 'permission-denied'
+                ? 'Recent Rides Restricted — Permission Denied'
+                : 'Recent Rides Cloud Feed Unavailable'}
+            </h3>
+            <p className="text-xs text-slate-400 font-mono max-w-sm mx-auto">
+              {ridesError || (ridesStatus === 'permission-denied'
+                ? 'Firestore rejected read access to telemetry sessions for this rider.'
+                : 'Unable to retrieve telemetry sessions from MotorSignal cloud. Please check network and retry.')}
+            </p>
+            <button
+              type="button"
+              onClick={() => void loadData(user)}
+              className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-mono border border-slate-600 transition cursor-pointer"
+            >
+              Retry Cloud Sync
+            </button>
+          </div>
         ) : (
           <div className="glass-card rounded-2xl border border-dashed border-slate-700 p-8 text-center space-y-3">
             <div className="w-12 h-12 mx-auto rounded-full bg-surface-container flex items-center justify-center text-slate-500">
diff --git a/website/components/founder-portal/founder-chat.tsx b/website/components/founder-portal/founder-chat.tsx
index 1707e08..58cdd64 100644
--- a/website/components/founder-portal/founder-chat.tsx
+++ b/website/components/founder-portal/founder-chat.tsx
@@ -49,11 +49,15 @@ const CHANNELS: ChannelInfo[] = [
 
 export function FounderChat({ context }: FounderChatProps) {
   const { club, permissions, currentUser, isDemoFixture } = context;
+  const isDemo = Boolean(isDemoFixture);
   const [activeChannelId, setActiveChannelId] = useState<ChannelId>('general');
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [inputText, setInputText] = useState('');
   const [isSending, setIsSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [connectionState, setConnectionState] = useState<'connecting' | 'connected' | 'error'>(
+    isDemo ? 'connected' : 'connecting'
+  );
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const isOfficer = permissions.canManageSettings || currentUser.role === 'owner' || currentUser.role === 'admin';
@@ -61,22 +65,27 @@ export function FounderChat({ context }: FounderChatProps) {
   const activeChannel = CHANNELS.find((c) => c.id === activeChannelId) || CHANNELS[0];
   const isRestrictedChannel = activeChannel.requiresOfficer && !isOfficer;
   const hasExampleMessages = messages.length > 0 && messages.every((m) => m.isExample);
+  const isExampleThread = isDemo || hasExampleMessages;
 
   useEffect(() => {
     setError(null);
     let unsubscribe: () => void = () => {};
 
-    if (isDemoFixture) {
+    if (isDemo) {
+      setConnectionState('connected');
       const channelMsgs = FIXTURE_CHAT_MESSAGES[activeChannelId] || [];
       setMessages(channelMsgs.map((m) => ({ ...m, clubId: club.id, channelId: activeChannelId, isExample: true })));
     } else {
+      setConnectionState('connecting');
       unsubscribe = subscribeClubChat(
         club.id,
         activeChannelId,
         (newMsgs) => {
           setMessages(newMsgs);
+          setConnectionState('connected');
         },
         (err) => {
+          setConnectionState('error');
           setError(sanitizePortalError(err, 'Failed to connect to chat channel.'));
         }
       );
@@ -85,7 +94,7 @@ export function FounderChat({ context }: FounderChatProps) {
     return () => {
       unsubscribe();
     };
-  }, [club.id, activeChannelId, isDemoFixture]);
+  }, [club.id, activeChannelId, isDemo]);
 
   // Auto-scroll on new message
   useEffect(() => {
@@ -103,7 +112,7 @@ export function FounderChat({ context }: FounderChatProps) {
     setError(null);
 
     try {
-      if (isDemoFixture) {
+      if (isDemo) {
         const optimisticMsg: ChatMessage = {
           id: `demo-msg-${Date.now()}`,
           clubId: club.id,
@@ -115,6 +124,7 @@ export function FounderChat({ context }: FounderChatProps) {
           authorRole: currentUser.role,
           content: clean,
           createdAt: new Date().toISOString(),
+          isExample: true,
         };
         setMessages((prev) => [...prev, optimisticMsg]);
       } else {
@@ -144,11 +154,21 @@ export function FounderChat({ context }: FounderChatProps) {
             <h1 className="font-heading text-2xl font-bold tracking-wide text-white">
               Squad Live Chat
             </h1>
-            {hasExampleMessages ? (
+            {isExampleThread ? (
               <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold flex items-center gap-1.5">
                 <span className="material-symbols-outlined text-[14px]">visibility</span>
                 Example thread
               </span>
+            ) : connectionState === 'connecting' ? (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-slate-500/15 text-slate-300 border border-slate-500/30 font-semibold flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-slate-400 animate-pulse" />
+                Connecting…
+              </span>
+            ) : connectionState === 'error' || error ? (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-rose-500/15 text-rose-400 border border-rose-500/30 font-semibold flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-rose-400" />
+                Disconnected
+              </span>
             ) : (
               <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 font-semibold flex items-center gap-1.5">
                 <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
@@ -187,12 +207,21 @@ export function FounderChat({ context }: FounderChatProps) {
         </div>
       </div>
 
-      {hasExampleMessages && (
+      {isExampleThread && (
         <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-200/90 text-xs flex items-center gap-2.5">
           <span className="material-symbols-outlined text-[16px] text-amber-400 shrink-0">info</span>
           <span>
-            These are <strong className="font-semibold text-amber-100">example messages</strong> — this
-            channel has no posts yet. Send a message to start the real conversation.
+            {isDemo ? (
+              <>
+                <strong className="font-semibold text-amber-100">Founder Demo Preview</strong> — this is a
+                simulated conversation thread. Messages are not persisted or sent to club members.
+              </>
+            ) : (
+              <>
+                These are <strong className="font-semibold text-amber-100">example messages</strong> — this
+                channel has no posts yet. Send a message to start the real conversation.
+              </>
+            )}
           </span>
         </div>
       )}
@@ -298,6 +327,11 @@ export function FounderChat({ context }: FounderChatProps) {
                           {msg.authorDisplayRank}
                         </span>
                       )}
+                      {msg.isExample && (
+                        <span className="font-mono px-1.5 py-0.2 rounded bg-amber-500/15 border border-amber-500/30 text-amber-300 text-[9px]">
+                          Example
+                        </span>
+                      )}
                       <span className="text-slate-500 font-mono ml-auto">
                         {msg.createdAt
                           ? new Date(msg.createdAt).toLocaleTimeString([], {
diff --git a/website/tests/account-metrics-truthfulness.test.tsx b/website/tests/account-metrics-truthfulness.test.tsx
new file mode 100644
index 0000000..5255215
--- /dev/null
+++ b/website/tests/account-metrics-truthfulness.test.tsx
@@ -0,0 +1,371 @@
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import AccountPage from '../app/account/page';
+import { AppCloudData } from '../components/app-cloud-data';
+
+const authListeners = new Set<(user: unknown) => void>();
+
+const mocks = vi.hoisted(() => ({
+  getDocs: vi.fn(),
+  deleteDoc: vi.fn(),
+  updateDoc: vi.fn(),
+  addDoc: vi.fn(),
+  writeBatch: vi.fn(() => ({
+    update: vi.fn(),
+    commit: vi.fn().mockResolvedValue(undefined),
+  })),
+}));
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/account',
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }),
+}));
+
+vi.mock('../lib/firebase-client', () => ({
+  firebaseAuth: {},
+  firestore: {},
+}));
+
+vi.mock('firebase/auth', () => ({
+  onAuthStateChanged: (_auth: unknown, deliver: (user: unknown) => void) => {
+    authListeners.add(deliver);
+    return () => {
+      authListeners.delete(deliver);
+    };
+  },
+  multiFactor: () => ({ enrolledFactors: [] }),
+}));
+
+vi.mock('firebase/firestore', () => ({
+  collection: (...args: unknown[]) => ({ path: args.slice(1).join('/') }),
+  doc: (...args: unknown[]) => ({ path: args.slice(1).join('/'), id: args[args.length - 1] }),
+  getDocs: (...args: unknown[]) => mocks.getDocs(...args),
+  deleteDoc: (...args: unknown[]) => mocks.deleteDoc(...args),
+  updateDoc: (...args: unknown[]) => mocks.updateDoc(...args),
+  addDoc: (...args: unknown[]) => mocks.addDoc(...args),
+  writeBatch: () => mocks.writeBatch(),
+}));
+
+function deliverAuth(user: unknown) {
+  authListeners.forEach((listener) => listener(user));
+}
+
+describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
+  afterEach(() => {
+    cleanup();
+    authListeners.clear();
+    vi.clearAllMocks();
+  });
+
+  const authUser = {
+    uid: 'rider-123',
+    email: 'trackday@example.com',
+    displayName: 'Test Rider',
+  };
+
+  it('distinguishes initial loading: shows Loading… and Checking sync…, never 0 miles, 0 rides, or 100% Cloud Synced', async () => {
+    // Keep getDocs pending so it stays in loading state
+    let resolveMotorcycles: (val: unknown) => void;
+    let resolveRides: (val: unknown) => void;
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (colRef.path.includes('motorcycles')) {
+        return new Promise((res) => { resolveMotorcycles = res; });
+      }
+      return new Promise((res) => { resolveRides = res; });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    // Metric 1: Distance must show Loading…, not 0 miles
+    const distanceCard = screen.getByTestId('metric-card-distance');
+    expect(distanceCard.textContent).toContain('Loading…');
+    expect(distanceCard.textContent).not.toContain('0 miles');
+
+    // Metric 2: Sessions must show Checking sync… or Loading…, not 0 rides or 100% Cloud Synced
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('Checking sync…');
+    expect(sessionsCard.textContent).not.toContain('0 rides');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+
+    // Metric 3: Lean Angle Peak must be '--'
+    const leanCard = screen.getByTestId('metric-card-lean');
+    expect(leanCard.textContent).toContain('--');
+  });
+
+  it('truthfully handles signed-out state: shows sign-in required, never 0 miles or 100% Cloud Synced', async () => {
+    render(<AccountPage />);
+    deliverAuth(null);
+
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('Sign in to view');
+      expect(distanceCard.textContent).toContain('—');
+      expect(distanceCard.textContent).not.toContain('0 miles');
+    });
+
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('Sign-in required');
+    expect(sessionsCard.textContent).toContain('—');
+    expect(sessionsCard.textContent).not.toContain('0 rides');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+  });
+
+  it('distinguishes real zero-ride account: shows verified 0 miles, 0 rides, Cloud Synced (NOT 100% Cloud Synced)', async () => {
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      return Promise.resolve({ docs: [], empty: true });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('0');
+      expect(distanceCard.textContent).toContain('miles');
+      expect(distanceCard.textContent).toContain('Cloud Aggregate');
+    });
+
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('0');
+    expect(sessionsCard.textContent).toContain('rides');
+    // Must NOT claim "100% Cloud Synced" on an empty account with no rides
+    expect(sessionsCard.textContent).toContain('Cloud Synced');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+    expect(sessionsCard.textContent).toContain('No rides recorded yet');
+  });
+
+  it('displays real calculated totals for populated accounts and claims 100% Cloud Synced only when rides exist', async () => {
+    const mockRides = [
+      {
+        id: 'ride-1',
+        data: () => ({
+          startTime: '2026-07-01T10:00:00Z',
+          endTime: '2026-07-01T11:00:00Z',
+          distanceMiles: 45.2,
+          topSpeedMph: 72.4,
+          averageSpeed: 45.2,
+          maxLeanLeft: 42.1,
+          maxLeanRight: 45.6,
+          maxAccelG: 0.65,
+          maxBrakingG: 0.82,
+          movingTime: 3600,
+          elevationGain: 850,
+          qualityScore: 98,
+          motorcycleYear: 2024,
+          motorcycleMake: 'Yamaha',
+          motorcycleModel: 'YZF-R7',
+        }),
+      },
+      {
+        id: 'ride-2',
+        data: () => ({
+          startTime: '2026-07-02T14:00:00Z',
+          endTime: '2026-07-02T15:30:00Z',
+          distanceMiles: 54.8,
+          topSpeedMph: 85.0,
+          averageSpeed: 52.0,
+          maxLeanLeft: 48.5,
+          maxLeanRight: 46.0,
+          maxAccelG: 0.75,
+          maxBrakingG: 0.90,
+          movingTime: 5400,
+          elevationGain: 1200,
+          qualityScore: 95,
+          motorcycleYear: 2024,
+          motorcycleMake: 'Yamaha',
+          motorcycleModel: 'YZF-R7',
+        }),
+      },
+    ];
+
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (colRef.path.includes('rides')) {
+        return Promise.resolve({ docs: mockRides, empty: false });
+      }
+      return Promise.resolve({ docs: [], empty: true });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      // 45.2 + 54.8 = 100 miles
+      expect(distanceCard.textContent).toContain('100');
+      expect(distanceCard.textContent).toContain('miles');
+    });
+
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('2');
+    expect(sessionsCard.textContent).toContain('rides');
+    // With real rides loaded, it is confirmed 100% Cloud Synced
+    expect(sessionsCard.textContent).toContain('100% Cloud Synced');
+    expect(sessionsCard.textContent).toContain('Canyons, Circuits & Commutes');
+
+    const leanCard = screen.getByTestId('metric-card-lean');
+    expect(leanCard.textContent).toContain('48.5°');
+    expect(leanCard.textContent).toContain('6-Axis IMU Verified');
+  });
+
+  it('truthfully handles Firestore permission denied: shows Unavailable and Permission denied, never verified zero totals', async () => {
+    mocks.getDocs.mockImplementation(() => {
+      const err = new Error('Missing or insufficient permissions.');
+      (err as unknown as { code: string }).code = 'permission-denied';
+      return Promise.reject(err);
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('Unavailable');
+      expect(distanceCard.textContent).toContain('Permission denied');
+      expect(distanceCard.textContent).not.toContain('0 miles');
+    });
+
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('Unavailable');
+    expect(sessionsCard.textContent).toContain('Permission denied');
+    expect(sessionsCard.textContent).not.toContain('0 rides');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+
+    // AppCloudData error banners
+    expect(screen.getByTestId('cloud-garage-error')).toBeDefined();
+    expect(screen.getByTestId('cloud-rides-error')).toBeDefined();
+    expect(screen.getByText(/Recent Rides Restricted — Permission Denied/i)).toBeDefined();
+  });
+
+  it('truthfully handles network / temporary backend failure: shows Unavailable and Sync status unavailable', async () => {
+    mocks.getDocs.mockImplementation(() => {
+      const err = new Error('Failed to fetch: client is offline');
+      (err as unknown as { code: string }).code = 'unavailable';
+      return Promise.reject(err);
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('Unavailable');
+      expect(distanceCard.textContent).toContain('Sync unavailable');
+      expect(distanceCard.textContent).not.toContain('0 miles');
+    });
+
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('Unavailable');
+    expect(sessionsCard.textContent).toContain('Sync status unavailable');
+    expect(sessionsCard.textContent).not.toContain('0 rides');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+
+    expect(screen.getByTestId('cloud-rides-error')).toBeDefined();
+    expect(screen.getByText(/Recent Rides Cloud Feed Unavailable/i)).toBeDefined();
+  });
+
+  it('handles partial data availability: shows garage when motorcycles load, but keeps rides metrics Unavailable when rides query fails', async () => {
+    const mockBike = {
+      id: 'bike-1',
+      data: () => ({
+        year: 2024,
+        makeName: 'Ducati',
+        modelName: 'Panigale V4',
+        variantName: 'SP2',
+        nickname: 'Red Bullet',
+        isDefault: true,
+      }),
+    };
+
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (colRef.path.includes('motorcycles')) {
+        return Promise.resolve({ docs: [mockBike], empty: false });
+      }
+      const err = new Error('Rides query unavailable');
+      (err as unknown as { code: string }).code = 'unavailable';
+      return Promise.reject(err);
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    await waitFor(() => {
+      // Bike rendered in garage
+      expect(screen.getByText('Red Bullet')).toBeDefined();
+    });
+
+    // But ride metrics MUST show Unavailable, not zero!
+    const sessionsCard = screen.getByTestId('metric-card-sessions');
+    expect(sessionsCard.textContent).toContain('Unavailable');
+    expect(sessionsCard.textContent).not.toContain('0 rides');
+    expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+
+    // Rides feed in AppCloudData shows error
+    expect(screen.getByTestId('cloud-rides-error')).toBeDefined();
+  });
+
+  it('recovers after retry: Quick Sync displays error on failure and updates to Synced on successful retry', async () => {
+    let shouldFail = true;
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (shouldFail) {
+        const err = new Error('Network error');
+        (err as unknown as { code: string }).code = 'unavailable';
+        return Promise.reject(err);
+      }
+      if (colRef.path.includes('rides')) {
+        return Promise.resolve({
+          docs: [
+            {
+              id: 'ride-1',
+              data: () => ({
+                startTime: '2026-07-01T10:00:00Z',
+                endTime: '2026-07-01T11:00:00Z',
+                distanceMiles: 15.0,
+                topSpeedMph: 60,
+                averageSpeed: 35,
+                maxLeanLeft: 30,
+                maxLeanRight: 32,
+                maxAccelG: 0.5,
+                maxBrakingG: 0.6,
+                movingTime: 1200,
+                elevationGain: 200,
+                qualityScore: 90,
+                motorcycleYear: 2024,
+                motorcycleMake: 'Yamaha',
+                motorcycleModel: 'MT-07',
+              }),
+            },
+          ],
+          empty: false,
+        });
+      }
+      return Promise.resolve({ docs: [], empty: true });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    // Initial failure
+    await waitFor(() => {
+      expect(screen.getByText(/Sync Failed \(Retry\)/i)).toBeDefined();
+    });
+
+    // Make next fetch succeed
+    shouldFail = false;
+
+    // Click retry via Quick Sync button
+    const quickSyncBtn = screen.getByRole('button', { name: /Sync Failed \(Retry\)/i });
+    fireEvent.click(quickSyncBtn);
+
+    // Recovered state
+    await waitFor(() => {
+      const sessionsCard = screen.getByTestId('metric-card-sessions');
+      expect(sessionsCard.textContent).toContain('1');
+      expect(sessionsCard.textContent).toContain('rides');
+      expect(sessionsCard.textContent).toContain('100% Cloud Synced');
+    });
+
+    expect(screen.getByText(/Synced \(/i)).toBeDefined();
+  });
+});
diff --git a/website/tests/founder-routes-chat.test.tsx b/website/tests/founder-routes-chat.test.tsx
index fbb481b..8334d64 100644
--- a/website/tests/founder-routes-chat.test.tsx
+++ b/website/tests/founder-routes-chat.test.tsx
@@ -355,6 +355,105 @@ describe('Founder Chat Management', () => {
     await screen.findByText('Officers Lounge Restricted');
     expect(screen.getByText(/strictly reserved for club Founders and Admins/i)).toBeDefined();
   });
+
+  describe('Founder Demo Chat Truthfulness (PR #38 Thread 2)', () => {
+    const demoContext: FounderClubContext = {
+      ...mockContext,
+      isDemoFixture: true,
+    };
+
+    it('displays Example thread and Demo Preview banner on initial demo fixtures', async () => {
+      render(<FounderChat context={demoContext} />);
+      await screen.findByText('Squad Live Chat');
+
+      expect(screen.getByText('Example thread')).toBeDefined();
+      expect(screen.getByText(/Founder Demo Preview/i)).toBeDefined();
+      expect(screen.getByText(/simulated conversation thread/i)).toBeDefined();
+      expect(screen.queryByText('Live Connected')).toBeNull();
+      // subscribeChat must NOT be called in demo mode
+      expect(mocks.subscribeChat).not.toHaveBeenCalled();
+    });
+
+    it('keeps Example thread and does not flip to Live Connected after sending a simulated message', async () => {
+      render(<FounderChat context={demoContext} />);
+      await screen.findByText('Squad Live Chat');
+
+      const input = screen.getByPlaceholderText(/Message #general-squad/i);
+      fireEvent.change(input, { target: { value: 'Testing demo simulated message' } });
+      fireEvent.click(screen.getByRole('button', { name: /Send/i }));
+
+      await screen.findByText('Testing demo simulated message');
+
+      // Crucial: Must NEVER switch to Live Connected
+      expect(screen.getByText('Example thread')).toBeDefined();
+      expect(screen.getByText(/Founder Demo Preview/i)).toBeDefined();
+      expect(screen.queryByText('Live Connected')).toBeNull();
+
+      // Backend send must NOT be called in demo mode
+      expect(mocks.sendChat).not.toHaveBeenCalled();
+
+      // Simulated message has Example badge
+      expect(screen.getAllByText('Example').length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('keeps Example thread after sending multiple simulated messages', async () => {
+      render(<FounderChat context={demoContext} />);
+      await screen.findByText('Squad Live Chat');
+
+      const input = screen.getByPlaceholderText(/Message #general-squad/i);
+
+      fireEvent.change(input, { target: { value: 'First simulated message' } });
+      fireEvent.click(screen.getByRole('button', { name: /Send/i }));
+      await screen.findByText('First simulated message');
+
+      fireEvent.change(input, { target: { value: 'Second simulated message' } });
+      fireEvent.click(screen.getByRole('button', { name: /Send/i }));
+      await screen.findByText('Second simulated message');
+
+      // Still Example thread
+      expect(screen.getByText('Example thread')).toBeDefined();
+      expect(screen.queryByText('Live Connected')).toBeNull();
+      expect(mocks.sendChat).not.toHaveBeenCalled();
+    });
+
+    it('displays Example thread even when demo channel has zero messages', async () => {
+      render(<FounderChat context={demoContext} />);
+      await screen.findByText('Squad Live Chat');
+
+      // Switch to road-intel channel which has empty fixture in our mock
+      fireEvent.click(screen.getByText('#road-intel'));
+
+      await waitFor(() => {
+        expect(screen.getByText(/No messages yet in #road-intel/i)).toBeDefined();
+      });
+
+      // In demo mode, zero messages must still show Example thread, never Live Connected!
+      expect(screen.getByText('Example thread')).toBeDefined();
+      expect(screen.queryByText('Live Connected')).toBeNull();
+    });
+
+    it('shows Live Connected only when real backend subscription delivers messages', async () => {
+      render(<FounderChat context={mockContext} />);
+      await screen.findByText('Welcome to squad chat!');
+
+      expect(screen.getByText('Live Connected')).toBeDefined();
+      expect(screen.queryByText('Example thread')).toBeNull();
+    });
+
+    it('shows Disconnected and error banner when backend subscription fails in real mode', async () => {
+      mocks.subscribeChat.mockImplementation((_clubId, _channelId, _onMsgs, onError) => {
+        onError(new Error('Backend connection failed'));
+        return vi.fn();
+      });
+
+      render(<FounderChat context={mockContext} />);
+      await screen.findByText(/Failed to connect to chat channel/i);
+
+      expect(screen.getByText('Disconnected')).toBeDefined();
+      expect(screen.queryByText('Live Connected')).toBeNull();
+      expect(screen.queryByText('Example thread')).toBeNull();
+    });
+  });
 });
 
 describe('Founder Community Page & Sidebar Integration', () => {

From 04e56a985de1be7ba564ddbe78dd49b04f836222 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Wed, 14 Oct 2026 16:05:37 -0400
Subject: [PATCH 12/12] fix(website): harden account peak-lean states, stale
 metrics hygiene, and demo-chat error precedence

- Handle loading, unauthenticated, permission-denied, and unavailable states truthfully in metric-card-lean (Peak Lean Angle KPI) rather than falling back to '--' and 'No IMU roll data'

- Reset metrics state to null on auth change and in onStatusChange loading/error branches to prevent stale metrics retention

- Add race condition guard in AppCloudData.loadData to discard in-flight results if firebaseAuth.currentUser changed during asynchronous fetch

- Prioritize Disconnected and Connecting states over sample example messages in real club mode in founder-chat.tsx

- Clear chat messages on channel switch in founder-chat.tsx to eliminate cross-channel message bleed, and fix invalid py-0.2 Tailwind classes to py-0.5

- Add regression tests in account-metrics-truthfulness.test.tsx and founder-routes-chat.test.tsx
---
 website/app/account/page.tsx                  |  46 +++++--
 website/components/app-cloud-data.tsx         |   5 +
 .../founder-portal/founder-chat.tsx           |  20 +--
 .../account-metrics-truthfulness.test.tsx     | 114 +++++++++++++++++-
 website/tests/founder-routes-chat.test.tsx    |  46 +++++++
 5 files changed, 212 insertions(+), 19 deletions(-)

diff --git a/website/app/account/page.tsx b/website/app/account/page.tsx
index 87982fc..cf16e95 100644
--- a/website/app/account/page.tsx
+++ b/website/app/account/page.tsx
@@ -47,6 +47,9 @@ export default function AccountPage() {
         setMetricsStatus('unauthenticated');
         setMetrics(null);
         setSyncError(null);
+      } else {
+        setMetricsStatus('loading');
+        setMetrics(null);
       }
     });
     return () => unsubscribe();
@@ -380,17 +383,33 @@ export default function AccountPage() {
 <div className="glass-card p-5 rounded-xl border border-brand-border glow-border-cyan transition duration-200" data-testid="metric-card-lean">
 <div className="flex items-center justify-between text-xs font-mono text-slate-400 tracking-normal">
 <span>Peak Lean Angle</span>
-<span className="text-brand-cyan font-mono text-[10px]">
-  {metricsStatus === 'permission-denied' || metricsStatus === 'unavailable' || metricsStatus === 'error'
-    ? 'Unavailable'
-    : 'Lateral Roll'}
-</span>
+{metricsStatus === 'loading' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Loading…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">Sign in to view</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400 bg-rose-500/10 px-1.5 py-0.5 rounded text-[10px]">Permission denied</span>
+) : metricsStatus === 'unavailable' || metricsStatus === 'error' ? (
+  <span className="text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded text-[10px]">Sync unavailable</span>
+) : (
+  <span className="text-brand-cyan bg-brand-cyan/10 px-1.5 py-0.5 rounded text-[10px]">Lateral Roll</span>
+)}
 </div>
 <div className="mt-3 flex items-baseline space-x-2">
-<span className="text-3xl font-extrabold text-brand-cyan font-mono">
-  {metricsStatus === 'ready' && metrics !== null && metrics.peakLean > 0 ? `${metrics.peakLean}°` : '--'}
-</span>
-<span className="text-sm font-mono text-slate-400">lateral roll</span>
+{metricsStatus === 'ready' && metrics !== null ? (
+  <>
+    <span className="text-3xl font-extrabold text-brand-cyan font-mono">
+      {metrics.peakLean > 0 ? `${metrics.peakLean}°` : '--'}
+    </span>
+    <span className="text-sm font-mono text-slate-400">lateral roll</span>
+  </>
+) : metricsStatus === 'loading' ? (
+  <span className="text-2xl font-bold text-slate-400 font-mono animate-pulse">Loading…</span>
+) : metricsStatus === 'unauthenticated' ? (
+  <span className="text-3xl font-bold text-slate-500 font-mono">—</span>
+) : (
+  <span className="text-2xl font-bold text-rose-400 font-mono">Unavailable</span>
+)}
 </div>
 <div className="mt-2 text-xs text-slate-400 flex items-center space-x-1.5">
 {metricsStatus === 'ready' && metrics !== null && metrics.peakLean > 0 ? (
@@ -398,7 +417,11 @@ export default function AccountPage() {
 ) : metricsStatus === 'loading' ? (
   <span>Retrieving lean telemetry…</span>
 ) : metricsStatus === 'unauthenticated' ? (
-  <span>No active session data</span>
+  <span>Sign in to view lean telemetry</span>
+) : metricsStatus === 'permission-denied' ? (
+  <span className="text-rose-400">Lean telemetry restricted</span>
+) : metricsStatus === 'unavailable' || metricsStatus === 'error' ? (
+  <span className="text-amber-400">Lean telemetry unavailable</span>
 ) : (
   <span className="text-slate-500">No IMU roll data</span>
 )}
@@ -432,10 +455,13 @@ export default function AccountPage() {
       setSyncError(null);
       setLastSynced(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
     } else if (status === 'permission-denied' || status === 'unavailable' || status === 'error') {
+      setMetrics(null);
       setSyncError('Sync failed');
     } else if (status === 'unauthenticated') {
       setMetrics(null);
       setSyncError(null);
+    } else if (status === 'loading') {
+      setMetrics(null);
     }
   }}
   onMetricsLoaded={(m) => {
diff --git a/website/components/app-cloud-data.tsx b/website/components/app-cloud-data.tsx
index c267736..5151ae7 100644
--- a/website/components/app-cloud-data.tsx
+++ b/website/components/app-cloud-data.tsx
@@ -400,6 +400,11 @@ export function AppCloudData({
         getDocs(collection(firestore, 'users', currentUser.uid, 'rides')),
       ]);
 
+      // Guard against race conditions if user logged out or changed while async queries were in-flight
+      if (firebaseAuth.currentUser?.uid !== currentUser.uid) {
+        return;
+      }
+
       // Process Motorcycles
       if (motorcycleRes.status === 'fulfilled') {
         const loadedMotorcycles: Motorcycle[] = motorcycleRes.value.docs.map((snapshot) => {
diff --git a/website/components/founder-portal/founder-chat.tsx b/website/components/founder-portal/founder-chat.tsx
index 58cdd64..d21a46e 100644
--- a/website/components/founder-portal/founder-chat.tsx
+++ b/website/components/founder-portal/founder-chat.tsx
@@ -69,6 +69,7 @@ export function FounderChat({ context }: FounderChatProps) {
 
   useEffect(() => {
     setError(null);
+    setMessages([]);
     let unsubscribe: () => void = () => {};
 
     if (isDemo) {
@@ -154,20 +155,25 @@ export function FounderChat({ context }: FounderChatProps) {
             <h1 className="font-heading text-2xl font-bold tracking-wide text-white">
               Squad Live Chat
             </h1>
-            {isExampleThread ? (
+            {isDemo ? (
               <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold flex items-center gap-1.5">
                 <span className="material-symbols-outlined text-[14px]">visibility</span>
                 Example thread
               </span>
+            ) : connectionState === 'error' || error ? (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-rose-500/15 text-rose-400 border border-rose-500/30 font-semibold flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-rose-400" />
+                Disconnected
+              </span>
             ) : connectionState === 'connecting' ? (
               <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-slate-500/15 text-slate-300 border border-slate-500/30 font-semibold flex items-center gap-1.5">
                 <span className="w-2 h-2 rounded-full bg-slate-400 animate-pulse" />
                 Connecting…
               </span>
-            ) : connectionState === 'error' || error ? (
-              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-rose-500/15 text-rose-400 border border-rose-500/30 font-semibold flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full bg-rose-400" />
-                Disconnected
+            ) : hasExampleMessages ? (
+              <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold flex items-center gap-1.5">
+                <span className="material-symbols-outlined text-[14px]">visibility</span>
+                Example thread
               </span>
             ) : (
               <span className="font-mono text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 font-semibold flex items-center gap-1.5">
@@ -323,12 +329,12 @@ export function FounderChat({ context }: FounderChatProps) {
                         </span>
                       )}
                       {msg.authorDisplayRank && (
-                        <span className="font-mono px-1.5 py-0.2 rounded bg-surface-container border border-brand-border/40 text-brand-cyan text-[9px]">
+                        <span className="font-mono px-1.5 py-0.5 rounded bg-surface-container border border-brand-border/40 text-brand-cyan text-[9px]">
                           {msg.authorDisplayRank}
                         </span>
                       )}
                       {msg.isExample && (
-                        <span className="font-mono px-1.5 py-0.2 rounded bg-amber-500/15 border border-amber-500/30 text-amber-300 text-[9px]">
+                        <span className="font-mono px-1.5 py-0.5 rounded bg-amber-500/15 border border-amber-500/30 text-amber-300 text-[9px]">
                           Example
                         </span>
                       )}
diff --git a/website/tests/account-metrics-truthfulness.test.tsx b/website/tests/account-metrics-truthfulness.test.tsx
index 5255215..da97082 100644
--- a/website/tests/account-metrics-truthfulness.test.tsx
+++ b/website/tests/account-metrics-truthfulness.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import AccountPage from '../app/account/page';
 import { AppCloudData } from '../components/app-cloud-data';
+import { firebaseAuth } from '../lib/firebase-client';
 
 const authListeners = new Set<(user: unknown) => void>();
 
@@ -48,6 +49,7 @@ vi.mock('firebase/firestore', () => ({
 }));
 
 function deliverAuth(user: unknown) {
+  (firebaseAuth as { currentUser?: unknown }).currentUser = user;
   authListeners.forEach((listener) => listener(user));
 }
 
@@ -55,6 +57,7 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
   afterEach(() => {
     cleanup();
     authListeners.clear();
+    (firebaseAuth as { currentUser?: unknown }).currentUser = undefined;
     vi.clearAllMocks();
   });
 
@@ -89,9 +92,10 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
     expect(sessionsCard.textContent).not.toContain('0 rides');
     expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
 
-    // Metric 3: Lean Angle Peak must be '--'
+    // Metric 3: Lean Angle Peak must show Loading…, not 0 or false verified roll
     const leanCard = screen.getByTestId('metric-card-lean');
-    expect(leanCard.textContent).toContain('--');
+    expect(leanCard.textContent).toContain('Loading…');
+    expect(leanCard.textContent).toContain('Retrieving lean telemetry…');
   });
 
   it('truthfully handles signed-out state: shows sign-in required, never 0 miles or 100% Cloud Synced', async () => {
@@ -110,6 +114,10 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
     expect(sessionsCard.textContent).toContain('—');
     expect(sessionsCard.textContent).not.toContain('0 rides');
     expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
+
+    const leanCard = screen.getByTestId('metric-card-lean');
+    expect(leanCard.textContent).toContain('Sign in to view');
+    expect(leanCard.textContent).toContain('—');
   });
 
   it('distinguishes real zero-ride account: shows verified 0 miles, 0 rides, Cloud Synced (NOT 100% Cloud Synced)', async () => {
@@ -232,6 +240,12 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
     expect(sessionsCard.textContent).not.toContain('0 rides');
     expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
 
+    const leanCard = screen.getByTestId('metric-card-lean');
+    expect(leanCard.textContent).toContain('Unavailable');
+    expect(leanCard.textContent).toContain('Permission denied');
+    expect(leanCard.textContent).toContain('Lean telemetry restricted');
+    expect(leanCard.textContent).not.toContain('No IMU roll data');
+
     // AppCloudData error banners
     expect(screen.getByTestId('cloud-garage-error')).toBeDefined();
     expect(screen.getByTestId('cloud-rides-error')).toBeDefined();
@@ -261,6 +275,12 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
     expect(sessionsCard.textContent).not.toContain('0 rides');
     expect(sessionsCard.textContent).not.toContain('100% Cloud Synced');
 
+    const leanCard = screen.getByTestId('metric-card-lean');
+    expect(leanCard.textContent).toContain('Unavailable');
+    expect(leanCard.textContent).toContain('Sync unavailable');
+    expect(leanCard.textContent).toContain('Lean telemetry unavailable');
+    expect(leanCard.textContent).not.toContain('No IMU roll data');
+
     expect(screen.getByTestId('cloud-rides-error')).toBeDefined();
     expect(screen.getByText(/Recent Rides Cloud Feed Unavailable/i)).toBeDefined();
   });
@@ -368,4 +388,94 @@ describe('Account Cloud Metrics Truthfulness (PR #38 Thread 1)', () => {
 
     expect(screen.getByText(/Synced \(/i)).toBeDefined();
   });
+
+  it('guards against race conditions when user logs out or switches accounts during in-flight fetch', async () => {
+    let resolveMotorcycles: (val: unknown) => void;
+    let resolveRides: (val: unknown) => void;
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (colRef.path.includes('motorcycles')) {
+        return new Promise((res) => { resolveMotorcycles = res; });
+      }
+      return new Promise((res) => { resolveRides = res; });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    // Initial loading
+    expect(screen.getByTestId('metric-card-distance').textContent).toContain('Loading…');
+
+    // User logs out while fetch is still in-flight
+    deliverAuth(null);
+
+    // Now the in-flight promise resolves with User A's data
+    resolveMotorcycles!({
+      docs: [{
+        id: 'bike-user-a',
+        data: () => ({ year: 2024, makeName: 'Yamaha', modelName: 'R7', nickname: 'Ghost Bike' }),
+      }],
+      empty: false,
+    });
+    resolveRides!({
+      docs: [{
+        id: 'ride-user-a',
+        data: () => ({ distanceMiles: 50, maxLeanLeft: 35, maxLeanRight: 35, startTime: '2026-07-01T10:00:00Z' }),
+      }],
+      empty: false,
+    });
+
+    // Wait to confirm User A's ghost data does NOT leak into logged-out state
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('Sign in to view');
+      expect(distanceCard.textContent).not.toContain('50');
+      expect(screen.queryByText('Ghost Bike')).toBeNull();
+    });
+  });
+
+  it('clears metrics state when an error occurs so stale metrics from a prior successful sync are not retained', async () => {
+    let shouldFail = false;
+    mocks.getDocs.mockImplementation((colRef: { path: string }) => {
+      if (shouldFail) {
+        const err = new Error('Permission denied on re-sync');
+        (err as unknown as { code: string }).code = 'permission-denied';
+        return Promise.reject(err);
+      }
+      if (colRef.path.includes('rides')) {
+        return Promise.resolve({
+          docs: [{
+            id: 'ride-1',
+            data: () => ({ distanceMiles: 25.0, maxLeanLeft: 30, maxLeanRight: 32, startTime: '2026-07-01T10:00:00Z' }),
+          }],
+          empty: false,
+        });
+      }
+      return Promise.resolve({ docs: [], empty: true });
+    });
+
+    render(<AccountPage />);
+    deliverAuth(authUser);
+
+    // Verify initial successful sync
+    await waitFor(() => {
+      expect(screen.getByTestId('metric-card-distance').textContent).toContain('25');
+    });
+
+    // Now trigger Quick Sync and make it fail
+    shouldFail = true;
+    const quickSyncBtn = screen.getByRole('button', { name: /Synced/i });
+    fireEvent.click(quickSyncBtn);
+
+    // Verify that metrics are immediately cleared and show Unavailable, not the stale 25 miles
+    await waitFor(() => {
+      const distanceCard = screen.getByTestId('metric-card-distance');
+      expect(distanceCard.textContent).toContain('Unavailable');
+      expect(distanceCard.textContent).not.toContain('25');
+      const sessionsCard = screen.getByTestId('metric-card-sessions');
+      expect(sessionsCard.textContent).toContain('Unavailable');
+      expect(sessionsCard.textContent).not.toContain('1 rides');
+      const leanCard = screen.getByTestId('metric-card-lean');
+      expect(leanCard.textContent).toContain('Unavailable');
+    });
+  });
 });
diff --git a/website/tests/founder-routes-chat.test.tsx b/website/tests/founder-routes-chat.test.tsx
index 8334d64..a848c8d 100644
--- a/website/tests/founder-routes-chat.test.tsx
+++ b/website/tests/founder-routes-chat.test.tsx
@@ -453,6 +453,52 @@ describe('Founder Chat Management', () => {
       expect(screen.queryByText('Live Connected')).toBeNull();
       expect(screen.queryByText('Example thread')).toBeNull();
     });
+
+    it('shows Disconnected rather than Example thread when real connection fails even if channel had sample messages', async () => {
+      let triggerError: (err: Error) => void;
+      mocks.subscribeChat.mockImplementation((_clubId, _channelId, onMsgs, onError) => {
+        onMsgs([
+          {
+            id: 'sample-1',
+            clubId: 'club-1',
+            channelId: 'general',
+            authorUid: 'admin',
+            authorDisplayName: 'Admin',
+            authorRole: 'admin',
+            content: 'Sample post',
+            createdAt: '2026-06-01T12:00:00Z',
+            isExample: true,
+          },
+        ]);
+        triggerError = onError;
+        return vi.fn();
+      });
+
+      render(<FounderChat context={mockContext} />);
+      await screen.findByText('Sample post');
+      expect(screen.getByText('Example thread')).toBeDefined();
+
+      // Now connection drops in real mode
+      triggerError!(new Error('Connection interrupted'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Disconnected')).toBeDefined();
+        expect(screen.queryByText('Example thread')).toBeNull();
+      });
+    });
+
+    it('clears message list when switching channels to prevent message bleed', async () => {
+      render(<FounderChat context={demoContext} />);
+      await screen.findByText('Squad Live Chat');
+
+      expect(screen.getByText(/Welcome to squad chat!/i)).toBeDefined();
+
+      fireEvent.click(screen.getByText('#road-intel'));
+
+      await waitFor(() => {
+        expect(screen.queryByText(/Welcome to squad chat!/i)).toBeNull();
+      });
+    });
   });
 });