docs(uat): add §5.12e Book New preferredTime formatting test cases (GRO-2218)

Adds UAT playbook coverage for the GRO-2211/GRO-2213 portal booking fix:
slot buttons / confirmation show formatted UTC labels (10:00 AM) and the
booking POST sends preferredTime as HH:MM:SS without the 500.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

.mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "gitea": {
+      "type": "http",
+      "url": "https://git-mcp.farh.net/mcp",
+      "headers": {
+        "Authorization": "Bearer ${GITEA_TOKEN}"
+      }
+    }
+  }
+}

UAT_PLAYBOOK.md

@@ -54,6 +54,8 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.1.3 | Logout | Click logout button | Session cleared, redirected to login page |
 | TC-WEB-5.1.4 | Session indicator | After successful login | User info/initials visible in UI indicating active session |
 | TC-WEB-5.1.5 | Unauthenticated `/login` renders the form (GRO-2011) | In a private/incognito window with no session cookie, navigate to UAT `/login` | React root mounts; the GroomBook sign-in card with the OIDC button is visible. Network tab shows `/api/auth/get-session` 200, `/api/setup/status` 200, and the login form is rendered (NOT a blank white viewport). |
+| TC-WEB-5.1.6 | Swallowed render error surfaces in DOM (GRO-2094) | Trigger a render-time exception in the React tree (e.g. via temporary throw in a child component on a test build) and load `/login` in a clean context | Either the login form renders normally (happy path) OR the top-level `ErrorBoundary` testid `error-boundary` is visible with a populated `error-boundary-message` pre block showing the exception name/message/stack. **NEVER** a blank `<div id="root">` with no error indicator. Browser console must contain either zero render errors or a `[ErrorBoundary]` line plus the raw exception. |
+| TC-WEB-5.1.7 | Global `error` and `unhandledrejection` listeners are wired (GRO-2094) | In a clean browser context, load `/login`, then trigger `setTimeout(() => { throw new Error("synthetic") }, 0)` from the console and `Promise.reject(new Error("synthetic-promise"))` | Browser console shows `[window.error]` and `[unhandledrejection]` log lines with the thrown values. Confirms global listeners are active in production. |
 
 ### 5.2 Authentication — VITE_API_URL Set
 
@@ -180,22 +182,30 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
 | TC-WEB-5.12.1 | Client-facing view | Log in as client persona | Customer portal UI displayed |
-| TC-WEB-5.12.2 | Appointment list | View client portal appointments | List of client's appointments visible |
+| TC-WEB-5.12.2 | Appointment list | View client portal appointments | List of client's appointments visible — each card shows pet name, service, formatted date/time, and groomer (no "Failed to load appointments" error, no blank screen). "Book New" button is visible and clickable. See 5.12d. |
 | TC-WEB-5.12.3 | Confirm appointment | Click confirm on pending appointment | Appointment status updated to confirmed |
 | TC-WEB-5.12.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
 
-#### 5.12b Dynamic Portal Time Slots (GRO-1793)
+#### 5.12b Dynamic Portal Time Slots (GRO-1793, GRO-2105)
 
 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-5.12.5 | BookingFlow dynamic slots | Open Book New, select pet and service, pick a date | Time slots fetched from API; "Checking availability…" shown while loading |
+| TC-WEB-5.12.5 | BookingFlow dynamic slots | Open Book New, select pet and service, pick a date | `GET /api/book/availability?serviceId=<selected>&date=<picked>`; "Checking availability…" shown while loading; slot list rendered |
 | TC-WEB-5.12.6 | BookingFlow slots match wizard | Compare BookingFlow slot times with public booking wizard for same date | Same slots displayed |
-| TC-WEB-5.12.7 | BookingFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
+| TC-WEB-5.12.7 | BookingFlow error state | Mock API failure on availability fetch (4xx/5xx OR a 200 with non-array body) | "Failed to load time slots" error shown and the page stays interactive (no white screen) |
 | TC-WEB-5.12.8 | BookingFlow no slots | Select date with no availability | "No available slots on this date" shown |
-| TC-WEB-5.12.9 | RescheduleFlow dynamic slots | Open reschedule, pick a new date | Time slots fetched from API; loading state shown |
-| TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
+| TC-WEB-5.12.9 | RescheduleFlow dynamic slots | Open reschedule, pick a new date | `GET /api/book/availability?serviceId=<appt.serviceId>&date=<picked>`; loading state shown; slot list rendered |
+| TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch (4xx/5xx OR a 200 with non-array body) | "Failed to load time slots" error shown and the page stays interactive (no white screen) |
 | TC-WEB-5.12.11 | RescheduleFlow no slots | Select date with no availability | "No available slots on this date" shown |
 
+> **GRO-2105 regression note:** prior to the fix, both `BookingFlow` and
+> `RescheduleFlow` called `/api/book/availability` with only `date=…`, so the
+> API responded 400 `{error:"serviceId and date are required"}`. The React
+> handler then `.map()`'d that error object, throwing `TypeError: ee.map is
+> not a function` and wiping `<div id="root">`. The fix ensures both flows
+> include `serviceId` in the query string and surface the API's error string
+> (or "Failed to load time slots") instead of crashing.
+
 #### 5.12c Waitlist/Booking Status Badges (GRO-1795)
 
 | # | Scenario | Steps | Expected |
@@ -207,6 +217,44 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly |
 | TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class |
 
+#### 5.12d Appointment API Shape Normalization (GRO-2180)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.18 | Portal appointments load (regression) | Sign in as `uat-customer@groombook.dev`, open `Appointments` | List renders without the "Failed to load appointments. Please try again." error; "Book New" button is visible and clickable |
+| TC-WEB-5.12.19 | Card fields populated from API | Inspect an appointment card | Pet name, service, formatted date (e.g. "Mon, Jun 1, 2026"), time (e.g. "10:00 AM"), and groomer name render — derived from the API's `startTime`/`endTime`/nested `pet`/`staff` objects |
+| TC-WEB-5.12.20 | Upcoming vs Past split | View both tabs | Future, non-cancelled/non-completed appointments appear under "Upcoming"; past/completed/cancelled under "Past" (classification uses absolute `startTime`) |
+| TC-WEB-5.12.21 | Reschedule from card | Expand an upcoming appointment, click Reschedule, pick a date | `GET /api/book/availability?serviceId=<appt.serviceId>&date=<picked>` fires with a non-empty `serviceId` (sourced from the API's nested `service.id`) |
+
+> **GRO-2180 regression note:** `/api/portal/appointments` returns ISO
+> `startTime`/`endTime` and nested `pet`/`service`/`staff` objects, but the portal
+> client `Appointment` type expected flat `date`/`time`/`petName` fields.
+> `isUpcoming()` read `appt.date`/`appt.time` (both `undefined`), so
+> `parseTimeTo24Hour(undefined)` threw `TypeError`, the `useEffect` `try/catch`
+> set the error state, and the "Book New" button (only rendered in the success
+> path) became unreachable. The fix normalizes the API response into the flat
+> `Appointment` shape at the fetch boundary (`normalizeAppointment`), prefers the
+> absolute `startTime` in `isUpcoming`, and hardens `parseTimeTo24Hour` against
+> blank/undefined input.
+
+#### 5.12e Book New `preferredTime` Formatting (GRO-2211, GRO-2213)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.22 | Slot buttons show formatted label | Sign in as `uat-customer@groombook.dev`, open `Appointments`, click "Book New", select a pet and service, pick a date with availability | Each time-slot button shows a human-readable label like `10:00 AM` (UTC), never a raw ISO timestamp (e.g. not `2026-06-09T10:00:00.000Z`) |
+| TC-WEB-5.12.23 | Confirmation review shows formatted label | Continue the Book New wizard to the Review step | The "Date & Time" summary and the final confirmation both display the formatted slot label (e.g. `10:00 AM`), not a raw ISO string |
+| TC-WEB-5.12.24 | Booking submit succeeds (regression) | Complete the Book New wizard and submit the request | Request succeeds with no `500` / `invalid input syntax for type time` error; the booking POST sends `preferredTime` as `HH:MM:SS` (e.g. `10:00:00`); the new appointment appears in the Upcoming list |
+
+> **GRO-2211/GRO-2213 note:** The Book New wizard previously rendered the raw
+> UTC ISO slot string as the button/confirmation label and submitted that same
+> ISO value as `preferredTime`, which the API rejected with
+> `invalid input syntax for type time` (HTTP 500). The fix adds shared UTC
+> helpers `formatSlotLabel(slot)` (display → `10:00 AM`) and `slotToTime(slot)`
+> (payload → `HH:MM:SS`) in `src/portal/sections/Appointments.tsx`, so the
+> displayed label and the submitted `preferredTime` both derive from the same
+> canonical UTC ISO slot. (The sibling `RescheduleFlow` `startTime` raw-ISO issue
+> on a different endpoint is tracked separately and is out of scope here.)
+
 ### 5.13 Reports UI
 
 | # | Scenario | Steps | Expected |
@@ -354,7 +402,12 @@ These cases cover the `CustomerPortal` initialisation path that bridges an Authe
 
 **Pre-conditions:**
 
-- UAT is configured with Authentik SSO and the `seed-uat-passwords` Secret in `groombook-uat` provides the seeded customer credentials (`uat-seed-password-source` memory).
+- UAT is configured with Authentik SSO. The seeded customer **Authentik** password lives in the `authentik-uat-users-credentials` Secret in the `groombook-uat` namespace (key `uat_customer_password`) — **NOT** in `seed-uat-passwords:customer-password` (that Secret holds the *Better Auth* email+password credential, a separate identity store; see GRO-2089). Pull the Authentik password at the start of every run:
+  ```bash
+  CUSTOMER_AUTHENTIK=$(kubectl get secret authentik-uat-users-credentials -n groombook-uat \
+    -o jsonpath='{.data.uat_customer_password}' | base64 -d)
+  ```
+  The Authentik user is provisioned by Terraform (`infra/terraform/users.tf`); the `lifecycle.ignore_changes = [password]` block means the password is set on initial creation and never auto-rotated, so the value held in the live Secret is the one Authentik itself has. If Authentik rejects it, the user was re-provisioned out-of-band via the Authentik admin UI and the Secret has drifted from the live identity — fix the Secret (or the admin-set password) and re-run.
 - `POST /api/portal/session-from-auth` from [GRO-1866](https://paperclip.farhoodlabs.com/GRO/issues/GRO-1866) is deployed on UAT.
 - Clear cookies and localStorage between cases unless otherwise noted.
 
@@ -372,6 +425,26 @@ These cases cover the `CustomerPortal` initialisation path that bridges an Authe
 | TC-WEB-5.25.10 | Unauthenticated user is sent to login (no infinite loop) | Without signing in, navigate directly to `/`. | `App.tsx` renders the LoginPage. `CustomerPortal` does not render. No `session-from-auth` request is made. |
 | TC-WEB-5.25.11 | Session persists across reload via Better Auth cookie | After TC-WEB-5.25.1 succeeds, reload the page. | Portal dashboard re-renders. A fresh `GET /api/auth/get-session` + `POST /api/portal/session-from-auth` pair runs and yields 200/201. Greeting still reads "Hi, &lt;FirstName&gt;". |
 
+### 5.27 Customer Portal — Authenticated HTML-route cold mount (GRO-2099)
+
+These cases guard against the regression where a customer who had just completed SSO sign-in was bounced back to `/login` (with a blank React root) when navigating directly to `/portal`, `/book`, `/schedule`, or even `/login` itself. Root cause: `Dashboard.tsx`'s `!sessionId && !isImpersonating && !getDevUser()` guard fired during the CustomerPortal's bootstrap — before the SSO bridge resolved `portalSessionId` — and redirected to `/login`. The fix: `CustomerPortal` now shows a loading state while the bootstrap is in flight, so the portal chrome and its `!sessionId` child guards do not mount prematurely. App.tsx additionally redirects an authenticated user at `/login` to `/` instead of rendering `null`.
+
+**Pre-conditions:**
+
+- TC-WEB-5.25.1 — TC-WEB-5.25.3 must pass on the build under test.
+- Clear cookies and localStorage between cases.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.27.1 | Authenticated customer lands on `/portal` after direct nav | 1. From clean state, complete TC-WEB-5.25.1 (SSO sign-in as a customer). 2. Land on `/`. 3. `browser_navigate` (full page load) directly to `/portal`. | Final URL stays at `/portal`. The React root is non-empty. The portal dashboard renders with the customer's name. No `Navigate to /login` fires. |
+| TC-WEB-5.27.2 | Authenticated customer lands on `/book` and `/schedule` after direct nav | From TC-WEB-5.27.1, `browser_navigate` to `/book` then `/schedule` (one fresh navigation each). | Each final URL stays at the navigated path. The portal chrome is visible. The page does not redirect to `/login`. |
+| TC-WEB-5.27.3 | Authenticated customer at `/login` is auto-redirected to `/` | From TC-WEB-5.27.1, `browser_navigate` to `/login`. | The browser ends at `/` (not at a blank `/login`). The portal dashboard renders. No blank React root at `/login`. |
+| TC-WEB-5.27.4 | Loading state is visible during the bootstrap, no portal chrome flash | 1. With the UAT build under test, open DevTools → Network and throttle to Slow 3G. 2. Sign in via SSO. 3. Land on `/`. | A "Loading…" element (`role="status"`) is briefly visible. The portal nav (Home / Appointments / etc.) is NOT visible during the loading window. No `Navigate to /login` fires during the bootstrap. |
+| TC-WEB-5.27.5 | SSO bridge still runs and yields 201 | From TC-WEB-5.27.4 (or TC-WEB-5.27.1), inspect Network. | The same `GET /api/auth/get-session` (200) → `POST /api/portal/session-from-auth` (201) sequence from TC-WEB-5.25.2 still runs. The customer name appears in the greeting. |
+| TC-WEB-5.27.6 | Unauthenticated direct nav to `/portal` still ends at `/login` (no regression) | Clear cookies. `browser_navigate` to `/portal`. | The portal briefly shows the loading state, then `CustomerPortal`'s `!session && !portalSessionId` guard redirects to `/login`. The login form renders. No infinite loop. |
+| TC-WEB-5.27.7 | Groomer SSO still works (no regression) | 1. From clean state, sign in via SSO as the groomer identity (uat-groomer). 2. Land on `/`. | `App.tsx`'s staff check redirects to `/admin`. The groomer nav renders. No `CustomerPortal` flash. No `/portal` redirect loop. |
+| TC-WEB-5.27.8 | Impersonation session still works (no regression) | 1. With an active impersonation session, open `/?sessionId=<id>`. | The amber "STAFF VIEW" chrome renders. The portal loads. No `/login` redirect. |
+
 ### 5.26 Customer Portal — RescheduleFlow under SSO Bridge (GRO-2012)
 
 These cases guard against the regression where an SSO-bridge customer (no `?sessionId=` URL param, no impersonation session) could trigger the RescheduleFlow and have `RescheduleFlow` receive `sessionId={null}`, which caused the internal `/api/book/availability` call to send `X-Impersonation-Session-Id: ` (empty) and return 401. The fix: `CustomerPortal` now passes `sessionId={session?.id ?? portalSessionId}` to `<RescheduleFlow>` (matching the fallback `renderSection()` already used).

src/App.tsx

@@ -378,8 +378,12 @@ export function App() {
     return <Navigate to="/login" replace />;
   }
 
-  // Show login BEFORE checking needsSetup (needsSetup is never set for unauthenticated users)
-  if (!authDisabled && !session) {
+  // Show login BEFORE checking needsSetup (needsSetup is never set for unauthenticated users).
+  // At /login with a valid session, fall through so the staff redirect below can
+  // route staff to /admin and the final render can redirect customers to / (portal).
+  // Previously, an authenticated customer at /login would see a blank page because
+  // the final render returns null at /login (showCustomerPortal is false). See GRO-2099.
+  if (!authDisabled && !session && location.pathname === "/login") {
     return <LoginPage />;
   }
 
@@ -401,6 +405,14 @@ export function App() {
   // Don't render portal chrome at /login — DevLoginSelector is shown instead
   const showCustomerPortal = !location.pathname.startsWith("/admin") && location.pathname !== "/login";
 
+  // At /login with a valid session, redirect to the portal root. Without this,
+  // the final render returns null at /login (showCustomerPortal is false) and
+  // the user sees a blank page after a successful sign-in. Staff are routed
+  // to /admin by the earlier staff check. See GRO-2099.
+  if (!authDisabled && session && location.pathname === "/login") {
+    return <Navigate to="/" replace />;
+  }
+
   return (
     <BrandingProvider>
       {location.pathname.startsWith("/admin") ? (

src/ErrorBoundary.tsx

@@ -0,0 +1,77 @@
+import { Component } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+/**
+ * Top-level ErrorBoundary — renders the error visibly so the actual exception
+ * appears in the DOM (and therefore in the Playwright snapshot) instead of
+ * React 18+ unmounting the entire tree to a blank `<div id="root">`.
+ *
+ * Background: GRO-2094. The bundle was executing but never painting, with
+ * the failure swallowed. Surfacing the error here is the first step; the
+ * real fix is in the underlying component that threw.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Also surface to the console — this is what the test harness greps for.
+    // eslint-disable-next-line no-console
+    console.error("[ErrorBoundary] Uncaught render error:", error, info);
+  }
+
+  render() {
+    if (this.state.error) {
+      const err = this.state.error;
+      return (
+        <div
+          data-testid="error-boundary"
+          style={{
+            padding: "2rem",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            color: "#7f1d1d",
+            background: "#fef2f2",
+            minHeight: "100vh",
+            boxSizing: "border-box",
+          }}
+        >
+          <h1 style={{ fontSize: 18, margin: "0 0 0.5rem" }}>Something went wrong</h1>
+          <p style={{ margin: "0 0 1rem", color: "#991b1b" }}>
+            The app failed to render. The full error is shown below — please share this
+            output when reporting the bug.
+          </p>
+          <pre
+            data-testid="error-boundary-message"
+            style={{
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              background: "#fff",
+              border: "1px solid #fecaca",
+              borderRadius: 6,
+              padding: "0.75rem 1rem",
+              margin: 0,
+              fontSize: 13,
+              lineHeight: 1.4,
+            }}
+          >
+            {err.name}: {err.message}
+            {"\n\n"}
+            {err.stack ?? "(no stack)"}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

src/__tests__/Appointments.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -42,6 +42,84 @@ describe("parseTimeTo24Hour", () => {
     expect(parseTimeTo24Hour("11:00 PM")).toBe("23:00:00");
     expect(parseTimeTo24Hour("12:00 PM")).toBe("12:00:00");
   });
+
+  it("does not throw on undefined/null/empty input (GRO-2180)", () => {
+    expect(() => parseTimeTo24Hour(undefined)).not.toThrow();
+    expect(() => parseTimeTo24Hour(null)).not.toThrow();
+    expect(parseTimeTo24Hour(undefined)).toBe("00:00:00");
+    expect(parseTimeTo24Hour("")).toBe("00:00:00");
+  });
+});
+
+// GRO-2180: `/api/portal/appointments` returns ISO `startTime`/`endTime` + nested
+// pet/service/staff objects, not the flat date/time/petName shape the UI renders.
+describe("normalizeAppointment (API startTime shape — GRO-2180)", () => {
+  const RAW_API_APPT = {
+    id: "a0000001-0000-0000-0000-000000000001",
+    startTime: "2026-06-01T10:00:00.000Z",
+    endTime: "2026-06-01T10:45:00.000Z",
+    status: "completed" as const,
+    confirmationStatus: "confirmed" as const,
+    customerNotes: "Please be gentle",
+    notes: null,
+    pet: { id: "c0000001-0000-0000-0000-000000000001", name: "UAT Pup Alpha", photo: null },
+    service: { id: "b0000001-0000-0000-0000-000000000001", name: "Full Groom" },
+    staff: { id: "00000000-0000-0000-0000-000000000004", name: "UAT Staff Groomer" },
+  };
+
+  it("maps nested pet/service/staff and ISO startTime without throwing", () => {
+    const appt = normalizeAppointment(RAW_API_APPT);
+    expect(appt.id).toBe("a0000001-0000-0000-0000-000000000001");
+    expect(appt.petId).toBe("c0000001-0000-0000-0000-000000000001");
+    expect(appt.serviceId).toBe("b0000001-0000-0000-0000-000000000001");
+    expect(appt.groomerId).toBe("00000000-0000-0000-0000-000000000004");
+    expect(appt.petName).toBe("UAT Pup Alpha");
+    expect(appt.serviceName).toBe("Full Groom");
+    expect(appt.groomerName).toBe("UAT Staff Groomer");
+    expect(appt.startTime).toBe("2026-06-01T10:00:00.000Z");
+    expect(appt.customerNotes).toBe("Please be gentle");
+  });
+
+  it("derives duration in minutes from start/end delta", () => {
+    expect(normalizeAppointment(RAW_API_APPT).duration).toBe(45);
+  });
+
+  it("produces a date/time pair that does not crash isUpcoming or formatDate", () => {
+    const appt = normalizeAppointment(RAW_API_APPT);
+    expect(typeof appt.date).toBe("string");
+    expect(typeof appt.time).toBe("string");
+    expect(() => isUpcoming(appt)).not.toThrow();
+  });
+
+  it("classifies a past completed appointment as not upcoming", () => {
+    expect(isUpcoming(normalizeAppointment(RAW_API_APPT))).toBe(false);
+  });
+
+  it("classifies a future scheduled appointment as upcoming via startTime", () => {
+    const future = normalizeAppointment({
+      ...RAW_API_APPT,
+      startTime: "2099-01-01T10:00:00.000Z",
+      endTime: "2099-01-01T11:00:00.000Z",
+      status: "confirmed",
+    });
+    expect(isUpcoming(future)).toBe(true);
+  });
+
+  it("tolerates null nested objects without throwing", () => {
+    const appt = normalizeAppointment({
+      id: "a2",
+      startTime: "2099-01-01T10:00:00.000Z",
+      endTime: "2099-01-01T11:00:00.000Z",
+      status: "scheduled",
+      pet: null,
+      service: null,
+      staff: null,
+    });
+    expect(appt.petId).toBe("");
+    expect(appt.serviceId).toBe("");
+    expect(appt.groomerId).toBeNull();
+    expect(appt.petName).toBeUndefined();
+  });
 });
 
 describe("isUpcoming", () => {
@@ -530,7 +608,7 @@ describe("RescheduleFlow dynamic time slots", () => {
     });
   });
 
-  it("calls /api/book/availability with the selected date", async () => {
+  it("calls /api/book/availability with the serviceId and selected date", async () => {
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
       json: async () => ["9:00 AM"] as string[],
@@ -544,7 +622,7 @@ describe("RescheduleFlow dynamic time slots", () => {
 
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/api/book/availability?date=2027-02-20",
+        "/api/book/availability?serviceId=service-1&date=2027-02-20",
         expect.objectContaining({
           headers: expect.objectContaining({ "X-Impersonation-Session-Id": "test-session-id" }),
         })
@@ -552,6 +630,41 @@ describe("RescheduleFlow dynamic time slots", () => {
     });
   });
 
+  it("shows error message when API returns a 4xx error object instead of an array", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: false,
+      status: 400,
+      json: async () => ({ error: "serviceId and date are required" }),
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-02-20" } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/serviceId and date are required/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows generic error when API returns 200 but body is not an array", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ error: "serviceId and date are required" }),
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-02-20" } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load time slots/i)).toBeInTheDocument();
+    });
+  });
+
   it("re-fetches slots when date changes", async () => {
     vi.mocked(global.fetch)
       .mockResolvedValueOnce({
@@ -577,4 +690,115 @@ describe("RescheduleFlow dynamic time slots", () => {
       expect(screen.getByText("1:00 PM")).toBeInTheDocument();
     });
   });
-});
+});
+describe("slot helpers (GRO-2213)", () => {
+  it("formatSlotLabel formats a canonical UTC ISO slot to a UTC clock label", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).toBe("10:00 AM");
+    expect(formatSlotLabel("2026-06-09T14:30:00.000Z")).toBe("2:30 PM");
+    expect(formatSlotLabel("2026-06-09T09:00:00.000Z")).toBe("9:00 AM");
+  });
+
+  it("formatSlotLabel never echoes a raw ISO string", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).not.toMatch(/\d{4}-\d{2}-\d{2}T/);
+  });
+
+  it("formatSlotLabel passes through an already-formatted label unchanged", () => {
+    expect(formatSlotLabel("10:00 AM")).toBe("10:00 AM");
+  });
+
+  it("slotToTime extracts the UTC HH:MM:SS time component from an ISO slot", () => {
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toBe("10:00:00");
+    expect(slotToTime("2026-06-09T14:30:00.000Z")).toBe("14:30:00");
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+  });
+
+  it("slotToTime guards a value that is already HH:MM:SS", () => {
+    expect(slotToTime("10:00:00")).toBe("10:00:00");
+  });
+
+  it("slotToTime converts a 12-hour label fallback to HH:MM:SS", () => {
+    expect(slotToTime("9:00 AM")).toBe("09:00:00");
+    expect(slotToTime("2:30 PM")).toBe("14:30:00");
+  });
+});
+
+describe("BookingFlow Book New funnel (GRO-2213)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  function routedFetch(captured: { waitlistBody?: Record<string, unknown> }) {
+    return (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url.includes("/api/portal/pets")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ pets: [{ id: "pet-1", name: "Buddy", breed: "Lab" }] }),
+        } as Response);
+      }
+      if (url.includes("/api/portal/services")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({
+            services: [{ id: "service-1", name: "Bath & Brush", isAddOn: false, duration: 60, price: 50 }],
+          }),
+        } as Response);
+      }
+      if (url.includes("/api/book/availability")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ["2026-06-09T10:00:00.000Z", "2026-06-09T14:30:00.000Z"],
+        } as Response);
+      }
+      if (url.includes("/api/portal/waitlist")) {
+        captured.waitlistBody = JSON.parse((init?.body as string) ?? "{}");
+        return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    };
+  }
+
+  it("renders formatted slot labels (not raw ISO) and submits preferredTime as HH:MM:SS", async () => {
+    const captured: { waitlistBody?: Record<string, unknown> } = {};
+    vi.mocked(global.fetch).mockImplementation(routedFetch(captured) as typeof fetch);
+
+    render(<BookingFlow onClose={() => {}} sessionId="test-session-id" />);
+
+    // Step 1 — pick pet (auto-advances to step 2)
+    await waitFor(() => expect(screen.getByText("Buddy")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Buddy"));
+
+    // Step 2 — pick service, then Next
+    await waitFor(() => expect(screen.getByText("Bath & Brush")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Bath & Brush"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 3 — groomer, Next
+    await waitFor(() => expect(screen.getByText("First Available")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 4 — date + slot
+    await waitFor(() => expect(screen.getByLabelText(/date/i)).toBeInTheDocument());
+    fireEvent.change(screen.getByLabelText(/date/i), { target: { value: "2026-06-09" } });
+
+    // Slot button shows the formatted UTC label, never the raw ISO
+    await waitFor(() => expect(screen.getByText("10:00 AM")).toBeInTheDocument());
+    expect(screen.queryByText(/2026-06-09T10:00:00/)).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("10:00 AM"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 5 — review shows the formatted label
+    await waitFor(() => expect(screen.getByText(/Review & Confirm/i)).toBeInTheDocument());
+    expect(screen.getByText(/10:00 AM/)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Booking/i }));
+
+    await waitFor(() => expect(captured.waitlistBody).toBeDefined());
+    const body = captured.waitlistBody ?? {};
+    expect(body.preferredTime).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+    expect(body.preferredTime).toBe("10:00:00");
+    expect(body.preferredDate).toBe("2026-06-09");
+  });
+});

src/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+function ThrowingChild(): never {
+  throw new Error("synthetic render-time failure for GRO-2094");
+}
+
+function GoodChild() {
+  return <div data-testid="good-child">ok</div>;
+}
+
+describe("ErrorBoundary (GRO-2094)", () => {
+  let errorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    // React 18+ logs caught render errors to console.error via React's own
+    // instrumentation; suppress it so test output is clean but capture it
+    // for an assertion below.
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockRestore();
+    cleanup();
+  });
+
+  it("renders children when nothing throws", () => {
+    render(
+      <ErrorBoundary>
+        <GoodChild />
+      </ErrorBoundary>
+    );
+    expect(screen.getByTestId("good-child")).toBeInTheDocument();
+    expect(screen.queryByTestId("error-boundary")).not.toBeInTheDocument();
+  });
+
+  it("renders the error visibly when a child throws during render", () => {
+    render(
+      <ErrorBoundary>
+        <ThrowingChild />
+      </ErrorBoundary>
+    );
+
+    const fallback = screen.getByTestId("error-boundary");
+    expect(fallback).toBeInTheDocument();
+    const message = screen.getByTestId("error-boundary-message");
+    // The actual exception is shown — no more silent blank root.
+    expect(message.textContent).toContain("synthetic render-time failure for GRO-2094");
+    // The boundary also calls console.error so it shows up in the Playwright
+    // console log even if the DOM-rendered fallback is somehow missed.
+    expect(errorSpy).toHaveBeenCalled();
+  });
+});

src/__tests__/portal.test.tsx

@@ -558,4 +558,58 @@ describe("CustomerPortal SSO bridge", () => {
     expect(lastProps!.sessionId).toBe("sso-sess-1");
     expect(lastProps!.appointment.id).toBe("appt-1");
   });
+
+  // GRO-2099 regression: the portal chrome (and Dashboard's `!sessionId` guard)
+  // must NOT render before the SSO bridge resolves. A loading state must be
+  // shown instead. Previously, the Dashboard's redirect-to-/login guard fired
+  // mid-bootstrap, leaving the user with a blank page after sign-in.
+  it("renders a loading state during the SSO bridge (does not flash portal chrome)", async () => {
+    // Slow bridge: resolve get-session and session-from-auth after a tick so
+    // we can observe the loading state mid-bootstrap.
+    let resolveBridge!: (value: Response) => void;
+    const bridgePromise = new Promise<Response>((resolve) => {
+      resolveBridge = resolve;
+    });
+
+    global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
+        return bridgePromise;
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    // Loading state is visible while the bridge is in flight. The portal nav
+    // (Home / Appointments / etc.) must NOT be present — its presence would
+    // indicate the chrome is rendering with a null session, which is the
+    // pre-GRO-2099 bug.
+    expect(await screen.findByRole("status")).toHaveTextContent(/Loading/i);
+    expect(screen.queryByText("Home")).not.toBeInTheDocument();
+    expect(screen.queryByText("Appointments")).not.toBeInTheDocument();
+
+    // Resolve the bridge and confirm the portal renders normally.
+    resolveBridge({
+      ok: true,
+      status: 201,
+      json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
+    } as Response);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
+    });
+  });
 });

src/main.tsx

@@ -2,9 +2,41 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { App } from "./App.js";
+import { ErrorBoundary } from "./ErrorBoundary.js";
 import { installDevFetchInterceptor } from "./lib/devFetch.js";
 import "./index.css";
 
+// --------------------------------------------------------------------
+// Global error capture (GRO-2094).
+//
+// Symptom: React root stays empty at /login — bundle parses, no console
+// errors, no error boundary fallback. Some failure is being swallowed
+// before it reaches React's commit phase. These listeners make sure any
+// thrown error or unhandled promise rejection is at least visible in
+// the console (and in the Playwright network/console log) instead of
+// vanishing into the void.
+// --------------------------------------------------------------------
+function reportGlobalError(kind: string, payload: unknown): void {
+  // eslint-disable-next-line no-console
+  console.error(`[${kind}]`, payload);
+}
+
+window.addEventListener("error", (event) => {
+  reportGlobalError("window.error", {
+    message: event.message,
+    filename: event.filename,
+    lineno: event.lineno,
+    colno: event.colno,
+    error: event.error,
+  });
+});
+
+window.addEventListener("unhandledrejection", (event) => {
+  reportGlobalError("unhandledrejection", {
+    reason: event.reason,
+  });
+});
+
 installDevFetchInterceptor();
 
 const root = document.getElementById("root");
@@ -12,8 +44,10 @@ if (!root) throw new Error("Root element not found");
 
 createRoot(root).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ErrorBoundary>
   </StrictMode>
 );

src/portal/CustomerPortal.tsx

@@ -241,13 +241,31 @@ export function CustomerPortal() {
 
   const avatarInitials = (clientName.split(" ")[0] || "G").charAt(0).toUpperCase();
 
+  // Show a loading state while the SSO bridge is in progress. The portal chrome
+  // and its sections (e.g. Dashboard) assume a session is established and run
+  // their own auth guards — rendering them before the bridge resolves triggers
+  // a redirect to /login from `Dashboard.tsx`'s `!sessionId` check, breaking the
+  // post-sign-in flow. Once `initComplete` is true we know whether a session was
+  // established and can render the correct branch. See GRO-2099.
+  if (!initComplete) {
+    return (
+      <div
+        className="min-h-screen flex items-center justify-center bg-[#faf8f5]"
+        role="status"
+        aria-live="polite"
+      >
+        <div className="text-stone-500 text-sm">Loading…</div>
+      </div>
+    );
+  }
+
   // After init completes, redirect unauthenticated users to /login and staff to /admin.
   // The portal chrome must NEVER be visible to users without a valid client session.
   // For client dev users, we stay on the portal even if session is null — the dev-session
   // response may not have id set immediately, or there may be timing issues with the
   // session state. Dev users are verified via localStorage and the dev-session flow.
   // SSO customers are recognised by portalSessionId (set by the Better Auth bridge).
-  if (initComplete && !session && !portalSessionId) {
+  if (!session && !portalSessionId) {
     if (authError) {
       // GRO-1867: graceful 404 fallback — authenticated user has no client row.
       return (

src/portal/sections/Appointments.tsx

@@ -2,11 +2,44 @@ import React, { useState, useEffect } from 'react';
 import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
 import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
 
+// ─── Availability fetch helper ───────────────────────────────────────────────
+// Returns ISO startTime strings for the given service/date, or an error message.
+// Validates HTTP status and that the body is actually an array — the API
+// responds with `{error: "..."}` on 4xx, and we must not treat that as slots.
+const AVAILABILITY_ERROR_MESSAGE = 'Failed to load time slots';
+
+async function fetchAvailability(
+  params: { serviceId: string; date: string },
+  sessionId: string | null,
+): Promise<{ times: string[]; error: string | null }> {
+  const url = `/api/book/availability?${new URLSearchParams(params).toString()}`;
+  const headers: Record<string, string> = {};
+  if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId;
+  try {
+    const res = await fetch(url, { headers });
+    if (!res.ok) {
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      return { times: [], error: body.error ?? `${AVAILABILITY_ERROR_MESSAGE} (HTTP ${res.status})` };
+    }
+    const data: unknown = await res.json();
+    if (!Array.isArray(data)) {
+      return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
+    }
+    return { times: data as string[], error: null };
+  } catch {
+    return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
+  }
+}
+
 export interface Appointment {
   id: string;
   petId: string;
   serviceId: string;
   groomerId: string | null;
+  // Absolute ISO instants as returned by `/api/portal/appointments`. `date`/`time`
+  // below are the locally-formatted display strings derived from `startTime`.
+  startTime?: string;
+  endTime?: string;
   date: string;
   time: string;
   status: 'scheduled' | 'confirmed' | 'pending' | 'waitlisted' | 'completed' | 'cancelled' | 'no-show';
@@ -62,25 +95,138 @@ export function formatDate(dateStr: string): string {
   });
 }
 
-export function parseTimeTo24Hour(time: string): string {
-  const parts = time.split(' ');
+export function parseTimeTo24Hour(time: string | null | undefined): string {
+  const parts = (time ?? '').split(' ');
   const hoursMinutes = parts[0] ?? '';
   const period = parts[1] ?? '';
   const [hoursStr, minutesStr] = hoursMinutes.split(':');
-  const hours = parseInt(hoursStr ?? '0', 10);
-  const minutes = parseInt(minutesStr ?? '0', 10);
+  // `|| '0'` (not `?? '0'`) so empty strings from blank/undefined input
+  // fall back to 0 rather than parsing to NaN.
+  const hours = parseInt(hoursStr || '0', 10);
+  const minutes = parseInt(minutesStr || '0', 10);
   let hours24 = hours;
   if (period === 'PM' && hours !== 12) hours24 += 12;
   if (period === 'AM' && hours === 12) hours24 = 0;
   return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
 }
 
+// A booking slot is the canonical UTC ISO instant returned by
+// `/api/book/availability` (e.g. "2026-06-09T10:00:00.000Z" is the 10:00 UTC
+// business slot — see api `src/lib/slots.ts`, which builds them with
+// `setUTCHours`). Display label and submit payload both derive from the slot via
+// these helpers so they never desync. Always format/extract in UTC: slots are
+// generated as UTC business hours, so a browser-local conversion would mislabel
+// the slot and diverge from the stored Postgres `time` column.
+export function formatSlotLabel(slot: string): string {
+  const d = new Date(slot);
+  // Non-ISO input (e.g. an already-formatted "10:00 AM" label) — show as-is.
+  if (Number.isNaN(d.getTime())) return slot;
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+    timeZone: 'UTC',
+  }).format(d);
+}
+
+// Extracts the UTC `HH:MM:SS` time component the api stores in the Postgres
+// `time` column. The api inserts this verbatim, so a full ISO datetime here is
+// an `invalid input syntax for type time` 500 (GRO-2211).
+export function slotToTime(slot: string): string {
+  if (/^\d{2}:\d{2}:\d{2}$/.test(slot)) return slot; // already HH:MM:SS
+  const d = new Date(slot);
+  if (!Number.isNaN(d.getTime())) {
+    const hh = String(d.getUTCHours()).padStart(2, '0');
+    const mm = String(d.getUTCMinutes()).padStart(2, '0');
+    const ss = String(d.getUTCSeconds()).padStart(2, '0');
+    return `${hh}:${mm}:${ss}`;
+  }
+  // "10:00 AM"-style label fallback.
+  return parseTimeTo24Hour(slot);
+}
+
 export function isUpcoming(appt: Appointment): boolean {
   const now = new Date();
-  const apptDate = new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
+  // Prefer the absolute ISO `startTime` from the API; fall back to the
+  // locally-formatted date/time pair for already-normalized/legacy shapes.
+  const apptDate = appt.startTime
+    ? new Date(appt.startTime)
+    : new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
   return apptDate > now && appt.status !== 'cancelled' && appt.status !== 'completed';
 }
 
+// ─── API → UI shape normalization ────────────────────────────────────────────
+// `/api/portal/appointments` returns ISO `startTime`/`endTime` plus nested
+// pet/service/staff objects, NOT the flat `date`/`time`/`petName` shape the
+// portal UI renders. Every field below is optional so the legacy flat shape
+// (used by tests/fixtures) is tolerated unchanged.
+export interface RawApiAppointment {
+  id: string;
+  startTime?: string | null;
+  endTime?: string | null;
+  status: Appointment['status'];
+  confirmationStatus?: Appointment['confirmationStatus'];
+  customerNotes?: string | null;
+  notes?: string | null;
+  pet?: { id?: string | null; name?: string | null; photo?: string | null } | null;
+  service?: { id?: string | null; name?: string | null } | null;
+  staff?: { id?: string | null; name?: string | null } | null;
+  // Legacy / already-flat fields
+  petId?: string;
+  serviceId?: string;
+  groomerId?: string | null;
+  date?: string;
+  time?: string;
+  petName?: string;
+  serviceName?: string;
+  groomerName?: string;
+  duration?: number;
+  price?: number;
+  addOns?: string[];
+}
+
+function toLocalDateString(d: Date): string {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function toLocalTimeString(d: Date): string {
+  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+// Maps a raw API appointment into the flat `Appointment` shape the portal
+// renders. Derives display `date`/`time` from the absolute `startTime` and
+// `duration` from the start/end delta. Tolerates the legacy flat shape.
+export function normalizeAppointment(raw: RawApiAppointment): Appointment {
+  const start = raw.startTime ? new Date(raw.startTime) : null;
+  const end = raw.endTime ? new Date(raw.endTime) : null;
+  const derivedDuration =
+    start && end ? Math.round((end.getTime() - start.getTime()) / 60000) : undefined;
+
+  return {
+    id: raw.id,
+    petId: raw.pet?.id ?? raw.petId ?? '',
+    serviceId: raw.service?.id ?? raw.serviceId ?? '',
+    groomerId: raw.staff?.id ?? raw.groomerId ?? null,
+    startTime: raw.startTime ?? undefined,
+    endTime: raw.endTime ?? undefined,
+    date: start ? toLocalDateString(start) : raw.date ?? '',
+    time: start ? toLocalTimeString(start) : raw.time ?? '',
+    status: raw.status,
+    petName: raw.pet?.name ?? raw.petName,
+    serviceName: raw.service?.name ?? raw.serviceName,
+    groomerName: raw.staff?.name ?? raw.groomerName,
+    duration: raw.duration ?? derivedDuration,
+    price: raw.price,
+    notes: raw.notes ?? undefined,
+    customerNotes: raw.customerNotes ?? undefined,
+    addOns: raw.addOns,
+    confirmationStatus: raw.confirmationStatus,
+  };
+}
+
 const STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
   pending: 'bg-amber-100 text-amber-600',
@@ -144,7 +290,8 @@ export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessio
 
         if (response.ok) {
           const data = await response.json();
-          const fetchedAppointments: Appointment[] = data.appointments || data || [];
+          const rawAppointments: RawApiAppointment[] = data.appointments || data || [];
+          const fetchedAppointments: Appointment[] = rawAppointments.map(normalizeAppointment);
 
           const upcoming = fetchedAppointments.filter((appt) => isUpcoming(appt));
           const past = fetchedAppointments.filter((appt) => !isUpcoming(appt));
@@ -595,19 +742,29 @@ export function RescheduleFlow({
   useEffect(() => {
     if (!selectedDate || !sessionId) {
       setAvailableTimes([]);
+      setSlotsError(null);
       return;
     }
-    const params = new URLSearchParams({ date: selectedDate });
+    if (!appt.serviceId) {
+      setAvailableTimes([]);
+      setSlotsError('Failed to load time slots');
+      return;
+    }
+    let cancelled = false;
     setSlotsLoading(true);
     setSlotsError(null);
-    fetch(`/api/book/availability?${params.toString()}`, {
-      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
-    })
-      .then((r) => r.json() as Promise<string[]>)
-      .then(setAvailableTimes)
-      .catch(() => setSlotsError('Failed to load time slots'))
-      .finally(() => setSlotsLoading(false));
-  }, [selectedDate, sessionId]);
+    fetchAvailability({ serviceId: appt.serviceId, date: selectedDate }, sessionId).then(
+      ({ times, error }) => {
+        if (cancelled) return;
+        setAvailableTimes(times);
+        setSlotsError(error);
+        setSlotsLoading(false);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, sessionId, appt.serviceId]);
 
   async function handleSubmit() {
     if (!selectedDate || !selectedTime) return;
@@ -738,7 +895,7 @@ interface BookingFlowProps {
   sessionId: string | null;
 }
 
-function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
+export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [step, setStep] = useState(1);
   const [pets, setPets] = useState<Pet[]>([]);
   const [services, setServices] = useState<Service[]>([]);
@@ -766,19 +923,30 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   useEffect(() => {
     if (!selectedDate || !sessionId) {
       setAvailableTimes([]);
+      setSlotsError(null);
       return;
     }
-    const params = new URLSearchParams({ date: selectedDate });
+    const serviceId = selectedServices[0]?.id;
+    if (!serviceId) {
+      setAvailableTimes([]);
+      setSlotsError('Failed to load time slots');
+      return;
+    }
+    let cancelled = false;
     setSlotsLoading(true);
     setSlotsError(null);
-    fetch(`/api/book/availability?${params.toString()}`, {
-      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
-    })
-      .then((r) => r.json() as Promise<string[]>)
-      .then(setAvailableTimes)
-      .catch(() => setSlotsError('Failed to load time slots'))
-      .finally(() => setSlotsLoading(false));
-  }, [selectedDate, sessionId]);
+    fetchAvailability({ serviceId, date: selectedDate }, sessionId).then(
+      ({ times, error }) => {
+        if (cancelled) return;
+        setAvailableTimes(times);
+        setSlotsError(error);
+        setSlotsLoading(false);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, sessionId, selectedServices]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -839,7 +1007,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
           addOnIds: selectedAddOns.map((s) => s.id),
           groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
           preferredDate: selectedDate,
-          preferredTime: selectedTime,
+          preferredTime: slotToTime(selectedTime),
           notes: notes || undefined,
           recurring: recurring || undefined,
         }),
@@ -902,7 +1070,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                 Appointment Requested!
               </h3>
               <p className="text-sm text-stone-500 mb-4">
-                {selectedPet?.name} on {formatDate(selectedDate)} at {selectedTime}
+                {selectedPet?.name} on {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
               </p>
               <button
                 onClick={onClose}
@@ -1122,7 +1290,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                               : 'border-stone-200 hover:border-stone-300'
                           }`}
                         >
-                          {time}
+                          {formatSlotLabel(time)}
                         </button>
                       ))}
                     </div>
@@ -1192,7 +1360,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                     <div className="flex justify-between">
                       <span className="text-stone-500">Date & Time</span>
                       <span className="font-medium">
-                        {formatDate(selectedDate)} at {selectedTime}
+                        {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
                       </span>
                     </div>
                     {recurring && (