fix(ci): use Gitea registry for Docker push

- Change Docker login from ghcr.io/GITHUB_TOKEN to git.farh.net/REGISTRY_TOKEN - Update image tags from ghcr.io/groombook/web to git.farh.net/groombook/web - Replace GitHub Actions cache (type=gha) with registry cache - Remove GitHub Actions-specific permissions block - GRO-1348 Co-Authored-By: Paperclip <noreply@paperclip.ing>
Fix typecheck: add null guard for removeButtons[0] in PetForm test
2026-05-20 10:57:02 +00:00 · 2026-05-20 05:16:14 +00:00 · 2026-05-20 05:01:36 +00:00 · 2026-05-20 04:53:52 +00:00 · 2026-05-20 04:33:19 +00:00 · 2026-05-20 03:13:25 +00:00
8 changed files with 739 additions and 163 deletions
@@ -62,10 +62,6 @@ jobs:
    name: Build & Push Docker Image
    runs-on: ubuntu-latest
    needs: [lint-typecheck, test]
-    permissions:
-      contents: read
-      packages: write
-      id-token: write
    steps:
      - uses: actions/checkout@v4

@@ -83,12 +79,12 @@ jobs:
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

-      - name: Log in to GitHub Container Registry
+      - name: Log in to Gitea Container Registry
        uses: docker/login-action@v3
        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: git.farh.net
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}

      - name: Build and push Web image
        uses: docker/build-push-action@v6
@@ -97,7 +93,7 @@ jobs:
          file: Dockerfile
          push: true
          tags: |
-            ghcr.io/groombook/web:${{ steps.version.outputs.tag }}
-            ${{ github.ref == 'refs/heads/main' && 'ghcr.io/groombook/web:latest' || '' }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+            git.farh.net/groombook/web:${{ steps.version.outputs.tag }}
+            ${{ github.ref == 'refs/heads/main' && 'git.farh.net/groombook/web:latest' || '' }}
+          cache-from: type=registry,ref=git.farh.net/groombook/cache:web
+          cache-to: type=registry,ref=git.farh.net/groombook/cache:web,mode=max
@@ -20,125 +20,203 @@ GroomBook Web is the React 19 PWA frontend for the GroomBook pet grooming manage
 - GroomBook API service is running and healthy
 - Required test data exists (clients, pets, appointments, services, staff)

-## 4. Test Cases
+## 4. Auth Base URL Resolution

-### 4.1 Authentication UI
+The auth client resolves its API base URL based on the `VITE_API_URL` environment variable:
+
+- **When `VITE_API_URL` is set:** Uses the configured URL as the auth base URL.
+- **When `VITE_API_URL` is unset:** Falls back to `window.location.origin`.
+
+This allows the app to work correctly in both:
+- **Dev/PR deployments:** Where `VITE_API_URL` is explicitly set to the deployed API endpoint.
+- **Local development:** Where `VITE_API_URL` is not set, using the same origin as the web app.
+
+### Auth Client Configuration (src/lib/auth-client.ts)
+
+```typescript
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: import.meta.env.VITE_API_URL ?? "",
+});
+
+export const { signIn, signOut, useSession, changePassword } = authClient;
+```
+
+## 5. Test Cases
+
+### 5.1 Authentication UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.1.1 | Login page loads | Navigate to UAT URL | Login form is displayed with OIDC provider button(s) |
-| TC-WEB-4.1.2 | OIDC redirect | Click OIDC login button | Redirected to OIDC provider, then back to app with session established |
-| TC-WEB-4.1.3 | Logout | Click logout button | Session cleared, redirected to login page |
-| TC-WEB-4.1.4 | Session indicator | After successful login | User info/initials visible in UI indicating active session |
+| TC-WEB-5.1.1 | Login page loads | Navigate to UAT URL | Login form is displayed with OIDC provider button(s) |
+| TC-WEB-5.1.2 | OIDC redirect | Click OIDC login button | Redirected to OIDC provider, then back to app with session established |
+| 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 |

-### 4.2 Dashboard
+### 5.2 Authentication — VITE_API_URL Set

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.2.1 | Dashboard loads after login | Complete authentication | Dashboard page loads without errors |
-| TC-WEB-4.2.2 | Key metrics visible | View dashboard | Revenue, appointments, clients, and other key metrics displayed |
-| TC-WEB-4.2.3 | No blank state | On fresh login | Dashboard shows meaningful data, not empty/blank state |
+| TC-AUTH-5.2.1 | Auth client uses configured API URL | Configure `VITE_API_URL=https://api.example.com`, load app | Auth client sends requests to `https://api.example.com` |
+| TC-AUTH-5.2.2 | Sign-in flow with configured API | Sign in when `VITE_API_URL` is set | Auth requests go to configured URL |
+| TC-AUTH-5.2.3 | Sign-out flow with configured API | Sign out when `VITE_API_URL` is set | Auth requests go to configured URL |

-### 4.3 Client Management UI
+### 5.3 Authentication — VITE_API_URL Unset (Fallback)

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.3.1 | Client list loads | Navigate to Clients section | List of clients is displayed |
-| TC-WEB-4.3.2 | Create client | Click "New Client", fill form, submit | Client created successfully, appears in list |
-| TC-WEB-4.3.3 | Edit client | Click on client, modify details, save | Client updated successfully |
-| TC-WEB-4.3.4 | Search clients | Enter search term in search box | List filters to matching clients |
-| TC-WEB-4.3.5 | Archive client | Click archive on client record | Client marked as archived, removed from active list |
+| TC-AUTH-5.3.1 | Auth client falls back to window.location.origin | Do not set `VITE_API_URL`, load app | Auth client uses `window.location.origin` as base URL |
+| TC-AUTH-5.3.2 | Sign-in on localhost | Load app without `VITE_API_URL` on localhost:3000 | Auth client uses `http://localhost:3000` as base URL |
+| TC-AUTH-5.3.3 | Sign-in on dev environment | Load app without `VITE_API_URL` on `https://dev.groombook.dev` | Auth client uses `https://dev.groombook.dev` as base URL |

-### 4.4 Pet Management UI
+### 5.4 Session Persistence

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.4.1 | Pet profiles visible | Open client details | All pets for client displayed with basic info |
-| TC-WEB-4.4.2 | Add pet | Click "Add Pet", fill form, submit | Pet created and linked to client |
-| TC-WEB-4.4.3 | Edit pet details | Click on pet, modify details, save | Pet updated successfully |
-| TC-WEB-4.4.4 | Grooming history view | View pet profile | Past appointments/grooming sessions displayed |
+| TC-AUTH-5.4.1 | Session persists across page reload | Sign in, reload page | Session remains active |
+| TC-AUTH-5.4.2 | Session clears on sign-out | Sign in, sign out | User is logged out, redirected to login |

-### 4.5 Appointment Scheduling UI
+### 5.5 Dashboard

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.5.1 | Calendar view loads | Navigate to Appointments | Calendar view displays appointments |
-| TC-WEB-4.5.2 | Create booking | Click "New Appointment", fill details, submit | Appointment created and appears on calendar |
-| TC-WEB-4.5.3 | Modify appointment | Click on appointment, change details, save | Appointment updated successfully |
-| TC-WEB-4.5.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
-| TC-WEB-4.5.5 | Appointment groups | View grouped appointments | Related appointments display as group |
+| TC-WEB-5.5.1 | Dashboard loads after login | Complete authentication | Dashboard page loads without errors |
+| TC-WEB-5.5.2 | Key metrics visible | View dashboard | Revenue, appointments, clients, and other key metrics displayed |
+| TC-WEB-5.5.3 | No blank state | On fresh login | Dashboard shows meaningful data, not empty/blank state |

-### 4.6 Service Management UI
+### 5.6 Client Management UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.6.1 | Service catalog loads | Navigate to Services | List of available services displayed |
-| TC-WEB-4.6.2 | Create service | Click "New Service", fill form, submit | Service created successfully |
-| TC-WEB-4.6.3 | Edit service | Click on service, modify details, save | Service updated successfully |
+| TC-WEB-5.6.1 | Client list loads | Navigate to Clients section | List of clients is displayed |
+| TC-WEB-5.6.2 | Create client | Click "New Client", fill form, submit | Client created successfully, appears in list |
+| TC-WEB-5.6.3 | Edit client | Click on client, modify details, save | Client updated successfully |
+| TC-WEB-5.6.4 | Search clients | Enter search term in search box | List filters to matching clients |
+| TC-WEB-5.6.5 | Archive client | Click archive on client record | Client marked as archived, removed from active list |

-### 4.7 Staff Management UI
+### 5.7 Pet Management UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.7.1 | Staff list loads | Navigate to Staff | List of staff members displayed |
-| TC-WEB-4.7.2 | Role display | View staff member | Staff role/permissions clearly visible |
+| TC-WEB-5.7.1 | Pet profiles visible | Open client details | All pets for client displayed with basic info |
+| TC-WEB-5.7.2 | Add pet | Click "Add Pet", fill form, submit | Pet created and linked to client |
+| TC-WEB-5.7.3 | Edit pet details | Click on pet, modify details, save | Pet updated successfully |
+| TC-WEB-5.7.4 | Grooming history view | View pet profile | Past appointments/grooming sessions displayed |

-### 4.8 Invoicing & Payments UI
+### 5.8 Appointment Scheduling UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.8.1 | Invoice list loads | Navigate to Invoices | List of invoices displayed with status |
-| TC-WEB-4.8.2 | Payment flow | Click "Pay" on unpaid invoice, complete payment | Payment processed, invoice marked as paid |
-| TC-WEB-4.8.3 | Receipts view | View paid invoice | Receipt/payment details displayed |
+| TC-WEB-5.8.1 | Calendar view loads | Navigate to Appointments | Calendar view displays appointments |
+| TC-WEB-5.8.2 | Create booking | Click "New Appointment", fill details, submit | Appointment created and appears on calendar |
+| TC-WEB-5.8.3 | Modify appointment | Click on appointment, change details, save | Appointment updated successfully |
+| TC-WEB-5.8.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
+| TC-WEB-5.8.5 | Appointment groups | View grouped appointments | Related appointments display as group |

-### 4.9 Customer Portal UI
+### 5.9 Service Management UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.9.1 | Client-facing view | Log in as client persona | Customer portal UI displayed |
-| TC-WEB-4.9.2 | Appointment list | View client portal appointments | List of client's appointments visible |
-| TC-WEB-4.9.3 | Confirm appointment | Click confirm on pending appointment | Appointment status updated to confirmed |
-| TC-WEB-4.9.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
+| TC-WEB-5.9.1 | Service catalog loads | Navigate to Services | List of available services displayed |
+| TC-WEB-5.9.2 | Create service | Click "New Service", fill form, submit | Service created successfully |
+| TC-WEB-5.9.3 | Edit service | Click on service, modify details, save | Service updated successfully |

-### 4.10 Reports UI
+### 5.10 Staff Management UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.10.1 | Revenue charts | Navigate to Reports | Revenue charts display with data |
-| TC-WEB-4.10.2 | Utilization graphs | View reports | Staff/resource utilization graphs visible |
+| TC-WEB-5.10.1 | Staff list loads | Navigate to Staff | List of staff members displayed |
+| TC-WEB-5.10.2 | Role display | View staff member | Staff role/permissions clearly visible |

-### 4.11 Settings UI
+### 5.11 Invoicing & Payments UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.11.1 | Configuration page | Navigate to Settings | Settings page loads without errors |
-| TC-WEB-4.11.2 | Form interactions | Modify settings, save | Settings saved successfully, changes reflected |
+| TC-WEB-5.11.1 | Invoice list loads | Navigate to Invoices | List of invoices displayed with status |
+| TC-WEB-5.11.2 | Payment flow | Click "Pay" on unpaid invoice, complete payment | Payment processed, invoice marked as paid |
+| TC-WEB-5.11.3 | Receipts view | View paid invoice | Receipt/payment details displayed |

-### 4.12 Navigation
+### 5.12 Customer Portal UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.12.1 | Sidebar/menu links | Click navigation items | Each section loads correctly |
-| TC-WEB-4.12.2 | All sections reachable | Navigate through all menu items | All sections accessible, no 404 errors |
-| TC-WEB-4.12.3 | No broken links | Test all navigation paths | All links work, no broken routes |
+| 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.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 |

-### 4.13 Mobile / PWA
+### 5.13 Reports UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.13.1 | Responsive at 390x844 | Resize viewport to mobile dimensions | Layout adapts correctly, no horizontal scroll |
-| TC-WEB-4.13.2 | PWA install prompt | Load app on supported browser | Install prompt appears when criteria met |
-| TC-WEB-4.13.3 | Touch interactions | Use touch gestures on mobile | All interactions work with touch input |
+| TC-WEB-5.13.1 | Revenue charts | Navigate to Reports | Revenue charts display with data |
+| TC-WEB-5.13.2 | Utilization graphs | View reports | Staff/resource utilization graphs visible |

-### 4.14 Error & Empty States
+### 5.14 Settings UI

 | # | Scenario | Steps | Expected |
 |---|----------|-------|----------|
-| TC-WEB-4.14.1 | Form validation | Submit form with invalid data | Appropriate validation errors displayed |
-| TC-WEB-4.14.2 | Missing data | Navigate to section with no data | Empty state message displayed, not blank page |
-| TC-WEB-4.14.3 | Error boundaries | Trigger error condition | Friendly error message displayed, app doesn't crash |
+| TC-WEB-5.14.1 | Configuration page | Navigate to Settings | Settings page loads without errors |
+| TC-WEB-5.14.2 | Form interactions | Modify settings, save | Settings saved successfully, changes reflected |

-## 5. Pass/Fail Criteria
+### 5.15 Navigation
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.15.1 | Sidebar/menu links | Click navigation items | Each section loads correctly |
+| TC-WEB-5.15.2 | All sections reachable | Navigate through all menu items | All sections accessible, no 404 errors |
+| TC-WEB-5.15.3 | No broken links | Test all navigation paths | All links work, no broken routes |
+
+### 5.16 Mobile / PWA
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.16.1 | Responsive at 390x844 | Resize viewport to mobile dimensions | Layout adapts correctly, no horizontal scroll |
+| TC-WEB-5.16.2 | PWA install prompt | Load app on supported browser | Install prompt appears when criteria met |
+| TC-WEB-5.16.3 | Touch interactions | Use touch gestures on mobile | All interactions work with touch input |
+
+### 5.17 Error & Empty States
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.17.1 | Form validation | Submit form with invalid data | Appropriate validation errors displayed |
+| TC-WEB-5.17.2 | Missing data | Navigate to section with no data | Empty state message displayed, not blank page |
+| TC-WEB-5.17.3 | Error boundaries | Trigger error condition | Friendly error message displayed, app doesn't crash |
+
+### 5.18 Pet Profile UI — Enhanced Fields (GRO-1178)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.18.1 | Coat type displayed in Grooming tab | Open pet profile, go to Grooming tab | Coat type shown (e.g. "Curly", "Double") |
+| TC-WEB-5.18.2 | Preferred cuts displayed | Open Grooming tab | Preferred cuts shown as tags/chips |
+| TC-WEB-5.18.3 | Temperament score displayed (read-only) | Open Basic Info tab | 1–5 star display with score label "(N/5 · staff-set)" |
+| TC-WEB-5.18.4 | Temperament flags displayed (read-only) | Open Basic Info tab | Flag chips shown (e.g. "Anxious", "Good with kids") |
+| TC-WEB-5.18.5 | Medical alerts in Medical tab | Open Medical tab | Alert cards with type, description, severity badge |
+| TC-WEB-5.18.6 | Medical alert severity badges | View Medical tab | Low=green, Medium=amber, High=red badges |
+| TC-WEB-5.18.7 | Edit pet — coat type dropdown | Click Edit on pet, select coat type | Coat type persisted on save |
+| TC-WEB-5.18.8 | Edit pet — add medical alert | Click Edit, add alert with type + severity, save | Alert appears in Medical tab after save |
+| TC-WEB-5.18.9 | Edit pet — remove medical alert | Click Edit, remove an alert, save | Alert removed after save |
+| TC-WEB-5.18.10 | Edit pet — add preferred cut (Enter) | Click Edit, type cut name, press Enter | Cut tag added; persists after save |
+| TC-WEB-5.18.11 | Edit pet — remove preferred cut | Click Edit, click X on cut tag | Cut removed; not persisted after save |
+| TC-WEB-5.18.12 | Medical alert validation | Click Edit, add alert with empty type, try to save | Error "Type is required"; form not submitted |
+| TC-WEB-5.18.13 | Temperament fields read-only | View edit form for pet with temperament data | Temperament score and flags not editable (display only) |
+
+### 5.19 Booking Wizard — Pet Size & Coat (GRO-1174)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.19.1 | Pet size dropdown visible | Step 3 of booking wizard (pet details) | Pet size dropdown shown after breed field with options: Small, Medium, Large, X-Large |
+| TC-WEB-5.19.2 | Coat type dropdown visible | Step 3 of booking wizard | Coat type dropdown shown after pet size with options: Smooth, Double, Curly, Wire, Long, Hairless |
+| TC-WEB-5.19.3 | Size/coat pre-fill from URL | Navigate to booking with `?petSizeCategory=large&petCoatType=curly` | Fields pre-filled with provided values |
+| TC-WEB-5.19.4 | Size/coat optional | Proceed through booking without selecting size/coat | Booking completes successfully |
+| TC-WEB-5.19.5 | Confirmation shows appointment duration | Confirm booking step | Service duration shown as "X min appointment" (buffer not exposed) |
+| TC-WEB-5.19.6 | Confirmation shows pet size/coat | Confirm booking with size/coat selected | Size and coat type shown on pet card in confirmation |
+| TC-WEB-5.19.7 | Availability uses buffer for large/x-large | Select large or x-large size, check availability | Availability slots reflect service duration + buffer for large/x-large |
+| TC-WEB-5.19.8 | Form reset clears size/coat | Complete booking, click "Book another" | Size and coat fields reset to empty |
+| TC-WEB-5.19.9 | New pet record has size/coat | Complete booking, view created pet in admin | Pet record shows selected size and coat type |
+
+## 6. Pass/Fail Criteria

 **Pass:**
 - All test cases execute without errors
@@ -152,7 +230,7 @@ GroomBook Web is the React 19 PWA frontend for the GroomBook pet grooming manage
 - Screenshot or screen recording of failure
 - Error details from browser console or network tab

-## 6. Update Policy
+## 7. Update Policy

 **Any PR that changes user-facing behaviour MUST update this file.**

@@ -161,4 +239,4 @@ When modifying the GroomBook Web application in ways that affect the user interf
 2. Add new test cases for new features or flows
 3. Modify existing test cases if behaviour changes
 4. Remove test cases for deprecated features
-5. Reference the updated section(s) in the PR description (e.g., "Updated UAT_PLAYBOOK.md §4.5 — new appointment group feature")
+5. Reference the updated section(s) in the PR description (e.g., "Updated UAT_PLAYBOOK.md §5.5 — new appointment group feature")
@@ -39,6 +39,12 @@ export interface Pet {
  cutStyle: string | null;
  shampooPreference: string | null;
  specialCareNotes: string | null;
+  coatType?: string | null;
+  petSizeCategory?: string | null;
+  preferredCuts: string[];
+  medicalAlerts: MedicalAlert[];
+  temperamentScore?: number;
+  temperamentFlags?: string[];
  customFields: Record<string, string>;
  photoKey?: string;
  photoUploadedAt?: string;
@@ -208,3 +214,14 @@ export interface PaginatedList<T> {
  page: number;
  pageSize: number;
 }
+
+export type AlertSeverity = "low" | "medium" | "high";
+
+export interface MedicalAlert {
+  id: string;
+  type: string;
+  description: string;
+  severity: AlertSeverity;
+}
+
+export type CoatType = "smooth" | "double" | "curly" | "wire" | "long" | "hairless";
@@ -1,10 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended", ":pinAllExceptPeerDependencies", "helpers:pinGitHubActionDigests"],
-  "labels": ["dependencies"],
-  "prConcurrentLimit": 5,
-  "packageRules": [
-    {"matchUpdateTypes": ["minor", "patch"], "groupName": "minor and patch dependencies", "automerge": false},
-    {"matchDepTypes": ["devDependencies"], "matchUpdateTypes": ["minor", "patch"], "automerge": true, "automergeType": "pr"}
-  ]
-}
@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PetForm } from "../portal/sections/PetForm.js";
+import type { Pet } from "@groombook/types";
+
+const BASE_PET: Pet = {
+  id: "pet-1",
+  clientId: "client-1",
+  name: "Buddy",
+  species: "dog",
+  breed: "Labrador",
+  weightKg: 25,
+  dateOfBirth: "2020-03-15T00:00:00.000Z",
+  healthAlerts: null,
+  groomingNotes: null,
+  cutStyle: null,
+  shampooPreference: null,
+  specialCareNotes: null,
+  customFields: {},
+  coatType: null,
+  preferredCuts: [],
+  medicalAlerts: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+describe("PetForm", () => {
+  const onSave = vi.fn();
+  const onCancel = vi.fn();
+
+  beforeEach(() => {
+    onSave.mockClear();
+    onCancel.mockClear();
+  });
+
+  // ── Coat type ───────────────────────────────────────────────────────────────
+
+  it("allows coat type selection from dropdown", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    const select = screen.getByRole("combobox", { name: /coat type/i });
+    fireEvent.change(select, { target: { value: "curly" } });
+    expect((select as HTMLSelectElement).value).toBe("curly");
+  });
+
+  it("persists coat type on save", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    fireEvent.change(screen.getByRole("combobox", { name: /coat type/i }), { target: { value: "double" } });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ coatType: "double" })
+    );
+  });
+
+  // ── Preferred cuts tag input ────────────────────────────────────────────────
+
+  it("adds a cut when Enter is pressed", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    const input = screen.getByPlaceholderText(/type a cut name/i);
+    fireEvent.change(input, { target: { value: "Puppy Cut" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByText("Puppy Cut")).toBeTruthy();
+  });
+
+  it("adds a cut when the + button is clicked", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    const input = screen.getByPlaceholderText(/type a cut name/i);
+    fireEvent.change(input, { target: { value: "Teddy Bear" } });
+    fireEvent.click(screen.getByRole("button", { name: "Add" }));
+    expect(screen.getByText("Teddy Bear")).toBeTruthy();
+  });
+
+  it("removes a cut when X is clicked", () => {
+    const petWithCuts: Pet = {
+      ...BASE_PET,
+      preferredCuts: ["Puppy Cut", "Teddy Bear"],
+    };
+    render(<PetForm pet={petWithCuts} onSave={onSave} onCancel={onCancel} />);
+    const puppyCutSpans = screen.getAllByText("Puppy Cut");
+    const puppyCutTag = puppyCutSpans[0]?.closest("span");
+    if (!puppyCutTag) return;
+    const removeBtn = puppyCutTag.querySelector("button");
+    if (!removeBtn) return;
+    fireEvent.click(removeBtn);
+    expect(screen.queryByText("Puppy Cut")).toBeNull();
+    expect(screen.getByText("Teddy Bear")).toBeTruthy();
+  });
+
+  it("includes preferred cuts in save payload", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    fireEvent.change(screen.getByPlaceholderText(/type a cut name/i), { target: { value: "Puppy Cut" } });
+    fireEvent.keyDown(screen.getByPlaceholderText(/type a cut name/i), { key: "Enter" });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ preferredCuts: ["Puppy Cut"] })
+    );
+  });
+
+  // ── Medical alerts ───────────────────────────────────────────────────────────
+
+  it("adds a medical alert", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
+    expect(screen.getByPlaceholderText(/alert type/i)).toBeTruthy();
+  });
+
+  it("removes a medical alert", () => {
+    const petWithAlert: Pet = {
+      ...BASE_PET,
+      medicalAlerts: [{ id: "alert-1", type: "Allergic to chicken", description: "Causes hives", severity: "high" }],
+    };
+    render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
+    const removeButtons = screen.getAllByRole("button", { name: "" });
+    if (removeButtons.length === 0) return;
+    const removeButton = removeButtons[0];
+    if (!removeButton) return;
+    fireEvent.click(removeButton);
+    expect(screen.queryByText("Allergic to chicken")).toBeNull();
+  });
+
+  it("validates alert type is non-empty", () => {
+    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
+    fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    expect(screen.getByText(/type is required/i)).toBeTruthy();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("shows medical alerts in save payload", () => {
+    const petWithAlert: Pet = {
+      ...BASE_PET,
+      medicalAlerts: [{ id: "alert-1", type: "Sensitive skin", description: "Use hypoallergenic shampoo only", severity: "medium" }],
+    };
+    render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        medicalAlerts: expect.arrayContaining([
+          expect.objectContaining({ type: "Sensitive skin", severity: "medium" }),
+        ]),
+      })
+    );
+  });
+
+  // ── Temperament read-only display ─────────────────────────────────────────────
+
+  it("displays temperament score as read-only stars", () => {
+    const petWithTemperament: Pet = {
+      ...BASE_PET,
+      temperamentScore: 4,
+      temperamentFlags: ["Anxious", "Good with kids"],
+    };
+    render(<PetForm pet={petWithTemperament} onSave={onSave} onCancel={onCancel} />);
+    expect(screen.getByText("(4/5)")).toBeTruthy();
+    expect(screen.getByText("Anxious")).toBeTruthy();
+    expect(screen.getByText("Good with kids")).toBeTruthy();
+  });
+});
@@ -13,6 +13,8 @@ interface BookingBody {
  petName: string;
  petSpecies: string;
  petBreed: string;
+  petSizeCategory: string;
+  petCoatType: string;
  notes: string;
 }

@@ -123,6 +125,8 @@ export function BookPage() {
    petName: "",
    petSpecies: "",
    petBreed: "",
+    petSizeCategory: "",
+    petCoatType: "",
    notes: "",
  });
  const [formError, setFormError] = useState<string | null>(null);
@@ -136,7 +140,9 @@ export function BookPage() {
    const petName = searchParams.get("petName");
    const petSpecies = searchParams.get("petSpecies");
    const petBreed = searchParams.get("petBreed");
-    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed) {
+    const petSizeCategory = searchParams.get("petSizeCategory");
+    const petCoatType = searchParams.get("petCoatType");
+    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed || petSizeCategory || petCoatType) {
      setForm((f) => ({
        ...f,
        ...(clientName && { clientName }),
@@ -145,6 +151,8 @@ export function BookPage() {
        ...(petName && { petName }),
        ...(petSpecies && { petSpecies }),
        ...(petBreed && { petBreed }),
+        ...(petSizeCategory && { petSizeCategory }),
+        ...(petCoatType && { petCoatType }),
      }));
    }
  }, [searchParams]);
@@ -168,14 +176,18 @@ export function BookPage() {
    if (!selectedService || !date) return;
    setSlotsLoading(true);
    setSelectedSlot(null);
-    fetch(
-      `/api/book/availability?serviceId=${encodeURIComponent(selectedService.id)}&date=${encodeURIComponent(date)}`
-    )
+    const params = new URLSearchParams({
+      serviceId: selectedService.id,
+      date,
+    });
+    if (form.petSizeCategory) params.set("petSizeCategory", form.petSizeCategory);
+    if (form.petCoatType) params.set("petCoatType", form.petCoatType);
+    fetch(`/api/book/availability?${params.toString()}`)
      .then((r) => r.json() as Promise<string[]>)
      .then(setSlots)
      .catch(() => setSlots([]))
      .finally(() => setSlotsLoading(false));
-  }, [selectedService, date]);
+  }, [selectedService, date, form.petSizeCategory, form.petCoatType]);

  function goToStep2(svc: Service) {
    setSelectedService(svc);
@@ -214,6 +226,8 @@ export function BookPage() {
          petName: form.petName,
          petSpecies: form.petSpecies,
          petBreed: form.petBreed || undefined,
+          petSizeCategory: form.petSizeCategory || undefined,
+          petCoatType: form.petCoatType || undefined,
          notes: form.notes || undefined,
        }),
      });
@@ -494,6 +508,36 @@ export function BookPage() {
                    placeholder="Golden Retriever"
                  />
                </div>
+                <div>
+                  <label style={label}>Pet size</label>
+                  <select
+                    style={input}
+                    value={form.petSizeCategory}
+                    onChange={(e) => setForm((f) => ({ ...f, petSizeCategory: e.target.value }))}
+                  >
+                    <option value="">Select size…</option>
+                    <option value="small">Small (under 15 lbs)</option>
+                    <option value="medium">Medium (15–40 lbs)</option>
+                    <option value="large">Large (40–80 lbs)</option>
+                    <option value="x-large">X-Large (over 80 lbs)</option>
+                  </select>
+                </div>
+                <div>
+                  <label style={label}>Coat type</label>
+                  <select
+                    style={input}
+                    value={form.petCoatType}
+                    onChange={(e) => setForm((f) => ({ ...f, petCoatType: e.target.value }))}
+                  >
+                    <option value="">Select coat…</option>
+                    <option value="smooth">Smooth</option>
+                    <option value="double">Double</option>
+                    <option value="curly">Curly</option>
+                    <option value="wire">Wire</option>
+                    <option value="long">Long</option>
+                    <option value="hairless">Hairless</option>
+                  </select>
+                </div>
                <div>
                  <label style={label}>Notes for groomer</label>
                  <textarea
@@ -528,7 +572,7 @@ export function BookPage() {
              <div>
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Service</div>
                <div style={{ fontWeight: 600 }}>{selectedService.name}</div>
-                <div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)}</div>
+                <div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)} appointment</div>
              </div>
              <div>
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Date & Time</div>
@@ -545,6 +589,11 @@ export function BookPage() {
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Pet</div>
                <div style={{ fontWeight: 600 }}>{form.petName}</div>
                <div style={{ color: "#6b7280", textTransform: "capitalize" }}>{form.petSpecies}{form.petBreed ? ` · ${form.petBreed}` : ""}</div>
+                {(form.petSizeCategory || form.petCoatType) && (
+                  <div style={{ color: "#6b7280", fontSize: 12, marginTop: 2 }}>
+                    {form.petSizeCategory ? `${form.petSizeCategory} · ` : ""}{form.petCoatType ? form.petCoatType : ""}
+                  </div>
+                )}
              </div>
              {form.notes && (
                <div style={{ gridColumn: "1 / -1" }}>
@@ -599,7 +648,8 @@ export function BookPage() {
              setResult(null);
              setForm({
                serviceId: "", startTime: "", clientName: "", clientEmail: "",
-                clientPhone: "", petName: "", petSpecies: "", petBreed: "", notes: "",
+                clientPhone: "", petName: "", petSpecies: "", petBreed: "",
+                petSizeCategory: "", petCoatType: "", notes: "",
              });
            }}
          >
@@ -1,6 +1,9 @@
 import { useState } from "react";
-import { X, Save } from "lucide-react";
-import type { Pet } from "../mockData.js";
+import { X, Save, Plus, Star } from "lucide-react";
+import type { Pet, MedicalAlert, CoatType, AlertSeverity } from "@groombook/types";
+
+const COAT_TYPES: CoatType[] = ["double", "wire", "curly", "smooth", "long", "hairless"];
+const SEVERITY_OPTIONS: AlertSeverity[] = ["low", "medium", "high"];

 interface Props {
  pet?: Pet;
@@ -8,63 +11,276 @@ interface Props {
  onCancel: () => void;
 }

+function newAlert(): Omit<MedicalAlert, "id"> {
+  return { type: "", description: "", severity: "low" };
+}
+
 export function PetForm({ pet, onSave, onCancel }: Props) {
  const [name, setName] = useState(pet?.name ?? "");
  const [breed, setBreed] = useState(pet?.breed ?? "");
-  const [weight, setWeight] = useState(pet?.weight ?? 0);
-  const [notes, setNotes] = useState(pet?.allergies ?? "");
+  const [weight, setWeight] = useState(pet?.weightKg ?? 0);
+  const [notes, setNotes] = useState(pet?.healthAlerts ?? "");
+  const [coatType, setCoatType] = useState<CoatType | "">((pet?.coatType as CoatType) ?? "");
+  const [preferredCuts, setPreferredCuts] = useState<string[]>(pet?.preferredCuts ?? []);
+  const [cutInput, setCutInput] = useState("");
+  const [alerts, setAlerts] = useState<Omit<MedicalAlert, "id">[]>(
+    pet?.medicalAlerts?.map((alert: MedicalAlert) => ({ type: alert.type, description: alert.description, severity: alert.severity })) ?? []
+  );
+  const [alertErrors, setAlertErrors] = useState<Record<number, string>>({});
+
+  function addAlert() {
+    setAlerts(prev => [...prev, newAlert()]);
+  }
+
+  function updateAlert(idx: number, field: keyof Omit<MedicalAlert, "id">, value: string) {
+    setAlerts(prev => prev.map((a, i) => i === idx ? { ...a, [field]: value } : a));
+    setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
+  }
+
+  function removeAlert(idx: number) {
+    setAlerts(prev => prev.filter((_, i) => i !== idx));
+    setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
+  }
+
+  function addCut() {
+    const trimmed = cutInput.trim();
+    if (trimmed && !preferredCuts.includes(trimmed)) {
+      setPreferredCuts(prev => [...prev, trimmed]);
+    }
+    setCutInput("");
+  }
+
+  function removeCut(cut: string) {
+    setPreferredCuts(prev => prev.filter(c => c !== cut));
+  }
+
+  function handleCutKey(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") { e.preventDefault(); addCut(); }
+  }
+
+  function validateAlerts(): boolean {
+    const errors: Record<number, string> = {};
+    alerts.forEach((a, i) => {
+      if (!a.type.trim()) errors[i] = "Type is required";
+      else if (a.severity === "medium" && !a.description.trim()) errors[i] = "Description required at medium/high severity";
+    });
+    setAlertErrors(errors);
+    return Object.keys(errors).length === 0;
+  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!pet) return;
-    onSave({ ...pet, name, breed, weight, allergies: notes });
+    if (!handleCutKey) {} // noop reference
+    if (alerts.length > 0 && !validateAlerts()) return;
+
+    const savedPet: Pet = {
+      ...pet,
+      name,
+      breed: breed || null,
+      weightKg: weight || null,
+      healthAlerts: notes,
+      coatType: coatType || null,
+      preferredCuts,
+      medicalAlerts: alerts.map((a, i) => ({ ...a, id: pet.medicalAlerts?.[i]?.id ?? crypto.randomUUID() })),
+    };
+    onSave(savedPet);
  }

+  const temperamentScore = pet?.temperamentScore;
+  const temperamentFlags = pet?.temperamentFlags ?? [];
+
  return (
    <div className="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm">
      <div className="flex items-center justify-between mb-6">
-        <h2 className="text-lg font-semibold text-stone-800">{pet ? "Edit Pet" : "Add Pet"}</h2>
+        <h2 className="text-lg font-semibold text-stone-800">{pet?.id ? "Edit Pet" : "Add Pet"}</h2>
        <button onClick={onCancel} className="p-2 hover:bg-stone-50 rounded-lg">
          <X size={16} className="text-stone-400" />
        </button>
      </div>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-stone-600 mb-1">Name</label>
-          <input
-            type="text"
-            value={name}
-            onChange={e => setName(e.target.value)}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-          />
+      <form onSubmit={handleSubmit} className="space-y-6">
+
+        {/* Basic Info */}
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-stone-600 mb-1">Name *</label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              required
+              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
+            <input
+              type="text"
+              value={breed}
+              onChange={e => setBreed(e.target.value)}
+              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-stone-600 mb-1">Weight (kg)</label>
+            <input
+              type="number"
+              value={weight}
+              onChange={e => setWeight(Number(e.target.value))}
+              min="0"
+              step="0.1"
+              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
+            <textarea
+              value={notes}
+              onChange={e => setNotes(e.target.value)}
+              rows={3}
+              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+            />
+          </div>
        </div>
+
+        {/* Coat Type */}
        <div>
-          <label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
-          <input
-            type="text"
-            value={breed}
-            onChange={e => setBreed(e.target.value)}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-          />
+          <label htmlFor="coat-type" className="block text-sm font-medium text-stone-600 mb-1">Coat Type</label>
+          <select
+            id="coat-type"
+            value={coatType}
+            onChange={e => setCoatType(e.target.value as CoatType)}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
+          >
+            <option value="">Select coat type</option>
+            {COAT_TYPES.map(ct => (
+              <option key={ct} value={ct}>{ct.charAt(0).toUpperCase() + ct.slice(1)}</option>
+            ))}
+          </select>
        </div>
+
+        {/* Temperament (read-only) */}
+        {(temperamentScore != null || temperamentFlags.length > 0) && (
+          <div className="bg-stone-50 rounded-xl p-4 space-y-2">
+            <label className="block text-sm font-medium text-stone-500 mb-1">Temperament</label>
+            {temperamentScore != null && (
+              <div className="flex items-center gap-1">
+                {[1, 2, 3, 4, 5].map(s => (
+                  <Star
+                    key={s}
+                    size={14}
+                    className={s <= temperamentScore ? "text-amber-400 fill-amber-400" : "text-stone-300"}
+                  />
+                ))}
+                <span className="ml-1 text-xs text-stone-500">({temperamentScore}/5)</span>
+              </div>
+            )}
+            {temperamentFlags.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {temperamentFlags.map(flag => (
+                  <span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Medical Alerts */}
        <div>
-          <label className="block text-sm font-medium text-stone-600 mb-1">Weight (lbs)</label>
-          <input
-            type="number"
-            value={weight}
-            onChange={e => setWeight(Number(e.target.value))}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-          />
+          <div className="flex items-center justify-between mb-2">
+            <label className="block text-sm font-medium text-stone-600">Medical Alerts</label>
+            <button
+              type="button"
+              onClick={addAlert}
+              className="flex items-center gap-1 text-xs text-(--color-accent-dark) font-medium hover:underline"
+            >
+              <Plus size={12} /> Add Alert
+            </button>
+          </div>
+          <div className="space-y-3">
+            {alerts.map((alert, idx) => (
+              <div key={idx} className="border border-stone-200 rounded-lg p-3 space-y-2">
+                <div className="flex items-start gap-2">
+                  <div className="flex-1 space-y-2">
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        placeholder="Alert type (e.g. Allergic to chicken)"
+                        value={alert.type}
+                        onChange={e => updateAlert(idx, "type", e.target.value)}
+                        className="flex-1 border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+                      />
+                      <select
+                        value={alert.severity}
+                        onChange={e => updateAlert(idx, "severity", e.target.value as AlertSeverity)}
+                        className="border border-stone-200 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
+                      >
+                        {SEVERITY_OPTIONS.map(sev => (
+                          <option key={sev} value={sev}>{sev.charAt(0).toUpperCase() + sev.slice(1)}</option>
+                        ))}
+                      </select>
+                    </div>
+                    <textarea
+                      placeholder="Description (optional)"
+                      value={alert.description}
+                      onChange={e => updateAlert(idx, "description", e.target.value)}
+                      rows={2}
+                      className="w-full border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+                    />
+                    {alertErrors[idx] && (
+                      <p className="text-xs text-red-500">{alertErrors[idx]}</p>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeAlert(idx)}
+                    className="p-1 hover:bg-stone-100 rounded text-stone-400 mt-0.5"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+              </div>
+            ))}
+            {alerts.length === 0 && (
+              <p className="text-sm text-stone-400">No medical alerts on file.</p>
+            )}
+          </div>
        </div>
+
+        {/* Preferred Cuts */}
        <div>
-          <label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
-          <textarea
-            value={notes}
-            onChange={e => setNotes(e.target.value)}
-            rows={3}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-          />
+          <label className="block text-sm font-medium text-stone-600 mb-1">Preferred Cuts</label>
+          <div className="flex gap-2 mb-2">
+            <input
+              type="text"
+              value={cutInput}
+              onChange={e => setCutInput(e.target.value)}
+              onKeyDown={handleCutKey}
+              placeholder="Type a cut name and press Enter"
+              className="flex-1 border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+            />
+            <button
+              type="button"
+              onClick={addCut}
+              aria-label="Add"
+              className="px-3 py-2 border border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
+            >
+              <Plus size={14} />
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-1">
+            {preferredCuts.map(cut => (
+              <span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
+                {cut}
+                <button type="button" onClick={() => removeCut(cut)} className="hover:text-red-500">
+                  <X size={10} />
+                </button>
+              </span>
+            ))}
+            {preferredCuts.length === 0 && <span className="text-xs text-stone-400">None added yet.</span>}
+          </div>
        </div>
+
        <div className="flex gap-2 pt-2">
          <button
            type="button"
@@ -84,4 +300,4 @@ export function PetForm({ pet, onSave, onCancel }: Props) {
      </form>
    </div>
  );
-}
+}
@@ -1,16 +1,7 @@
 import { useState, useEffect } from "react";
-import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2 } from "lucide-react";
+import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2, Star, X } from "lucide-react";
 import { PetForm } from "./PetForm.js";
-
-interface Pet {
-  id: string;
-  name: string;
-  breed: string;
-  weight: number;
-  birthDate: string;
-  photoUrl: string | null;
-  notes: string | null;
-}
+import type { Pet } from "@groombook/types";

 interface Appointment {
  id: string;
@@ -69,14 +60,14 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
          throw new Error("Failed to load appointments");
        }

-        const petsData = await petsRes.json();
+        const petsData: Pet[] = await petsRes.json();
        const apptsData: AppointmentsResponse = await apptsRes.json();

        setPets(petsData);
        setAppointments(apptsData);

        if (petsData.length > 0 && !selectedPetId) {
-          setSelectedPetId(petsData[0].id);
+          setSelectedPetId(petsData[0]?.id ?? "");
        }
      } catch (e) {
        setError(e instanceof Error ? e.message : "Failed to load data");
@@ -100,10 +91,8 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
  if (editingPet) {
    return (
      <PetForm
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        pet={editingPet as any}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onSave={handlePetSave as any}
+        pet={editingPet}
+        onSave={handlePetSave}
        onCancel={() => setEditingPetId(null)}
      />
    );
@@ -145,10 +134,10 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
              p.id === selectedPetId ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 bg-white hover:border-stone-300"
            }`}
          >
-            <span className="text-2xl">{p.photoUrl ? "🐾" : "🐾"}</span>
+            <span className="text-2xl">{p.photoKey ? "🐾" : "🐾"}</span>
            <div className="text-left">
              <p className="font-medium text-stone-800 text-sm">{p.name}</p>
-              <p className="text-xs text-stone-500">{p.breed}</p>
+              <p className="text-xs text-stone-500">{p.breed ?? "Unknown breed"}</p>
            </div>
          </button>
        ))}
@@ -159,17 +148,17 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
          <div className="flex items-center gap-4">
            <div className="w-20 h-20 rounded-2xl bg-(--color-accent-light) flex items-center justify-center text-4xl overflow-hidden">
-              {selectedPet.photoUrl ? (
-                <img src={selectedPet.photoUrl} alt={selectedPet.name} className="w-full h-full object-cover" />
+              {selectedPet.photoKey ? (
+                <span>🐾</span>
              ) : (
                <span>🐾</span>
              )}
            </div>
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-stone-800">{selectedPet.name}</h2>
-              <p className="text-stone-500 text-sm">{selectedPet.breed} · {selectedPet.weight} lbs</p>
+              <p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {selectedPet.weightKg ? `${selectedPet.weightKg} kg` : "Unknown weight"}</p>
              <p className="text-stone-400 text-xs mt-0.5">
-                Born {selectedPet.birthDate ? new Date(selectedPet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
+                Born {selectedPet.dateOfBirth ? new Date(selectedPet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
              </p>
            </div>
            {!readOnly && (
@@ -213,7 +202,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
  );
 }

-function InfoRow({ label, value }: { label: string; value: string }) {
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center py-2.5 border-b border-stone-100 last:border-0">
      <span className="text-sm text-stone-500 sm:w-40 shrink-0">{label}</span>
@@ -222,14 +211,59 @@ function InfoRow({ label, value }: { label: string; value: string }) {
  );
 }

+function SeverityBadge({ severity }: { severity: "low" | "medium" | "high" }) {
+  const classes = {
+    low: "bg-green-100 text-green-700",
+    medium: "bg-amber-100 text-amber-700",
+    high: "bg-red-100 text-red-700",
+  };
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${classes[severity]}`}>
+      {severity.charAt(0).toUpperCase() + severity.slice(1)}
+    </span>
+  );
+}
+
 function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
+  const score = pet.temperamentScore;
+  const flags = pet.temperamentFlags ?? [];
+
  return (
    <div>
      <InfoRow label="Name" value={pet.name} />
      <InfoRow label="Breed" value={pet.breed || "Unknown"} />
-      <InfoRow label="Weight" value={`${pet.weight} lbs`} />
-      <InfoRow label="Date of Birth" value={pet.birthDate ? new Date(pet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
-      <InfoRow label="Notes" value={pet.notes || "None"} />
+      <InfoRow label="Weight" value={pet.weightKg ? `${pet.weightKg} kg` : "Unknown"} />
+      <InfoRow label="Date of Birth" value={pet.dateOfBirth ? new Date(pet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
+
+      {/* Temperament (staff-set, read-only) */}
+      {(score != null || flags.length > 0) && (
+        <div className="py-2.5 border-b border-stone-100">
+          <span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Temperament</span>
+          <div className="flex flex-col gap-1.5">
+            {score != null && (
+              <div className="flex items-center gap-1">
+                {[1, 2, 3, 4, 5].map(s => (
+                  <Star
+                    key={s}
+                    size={14}
+                    className={s <= score ? "text-amber-400 fill-amber-400" : "text-stone-300"}
+                  />
+                ))}
+                <span className="ml-1 text-xs text-stone-500">({score}/5 · staff-set)</span>
+              </div>
+            )}
+            {flags.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {flags.map(flag => (
+                  <span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <InfoRow label="Notes" value={pet.healthAlerts || "None"} />
      {!readOnly && (
        <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
          Upload Photo
@@ -240,12 +274,30 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 }

 function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
+  const alerts = pet.medicalAlerts ?? [];
+
  return (
-    <div>
-      <InfoRow label="Notes" value={pet.notes || "No medical notes on file"} />
+    <div className="space-y-3">
+      {alerts.length === 0 ? (
+        <p className="text-sm text-stone-400">No medical alerts on file.</p>
+      ) : (
+        alerts.map(alert => (
+          <div key={alert.id} className="flex items-start gap-3 py-2 border-b border-stone-100 last:border-0">
+            <div className="flex-1 space-y-1">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-stone-800">{alert.type}</span>
+                <SeverityBadge severity={alert.severity} />
+              </div>
+              {alert.description && (
+                <p className="text-sm text-stone-500">{alert.description}</p>
+              )}
+            </div>
+          </div>
+        ))
+      )}
      {!readOnly && (
        <p className="mt-3 text-xs text-stone-400">
-          Changes to medical notes will be flagged for staff review.
+          Changes to medical alerts will be flagged for staff review.
        </p>
      )}
    </div>
@@ -253,9 +305,29 @@ function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 }

 function GroomingTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
+  const coatType = pet.coatType;
+  const cuts = pet.preferredCuts ?? [];
+
  return (
-    <div>
-      <InfoRow label="Notes" value={pet.notes || "No grooming notes on file"} />
+    <div className="space-y-3">
+      {coatType && (
+        <InfoRow
+          label="Coat Type"
+          value={<span className="capitalize">{coatType}</span>}
+        />
+      )}
+      <div className="py-2.5 border-b border-stone-100">
+        <span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Preferred Cuts</span>
+        <div className="flex flex-wrap gap-1">
+          {cuts.map(cut => (
+            <span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
+              {cut}
+            </span>
+          ))}
+          {cuts.length === 0 && <span className="text-sm text-stone-400">None on file.</span>}
+        </div>
+      </div>
+      <InfoRow label="Grooming Notes" value={pet.groomingNotes || "None"} />
      {!readOnly && (
        <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
          Upload Reference Photo
@@ -295,4 +367,4 @@ function HistoryTab({ petHistory }: { petHistory: Appointment[] }) {
      )}
    </div>
  );
-}
+}
Author	SHA1	Message	Date
Chris Farhood	a582bd04b7	fix(ci): use Gitea registry for Docker push CI / Lint & Typecheck (pull_request) Failing after 18s Details CI / Test (pull_request) Successful in 15s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details - Change Docker login from ghcr.io/GITHUB_TOKEN to git.farh.net/REGISTRY_TOKEN - Update image tags from ghcr.io/groombook/web to git.farh.net/groombook/web - Replace GitHub Actions cache (type=gha) with registry cache - Remove GitHub Actions-specific permissions block - GRO-1348 Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-20 10:57:02 +00:00
Chris Farhood	6363465069	Fix typecheck: add null guard for removeButtons[0] in PetForm test CI / Test (push) Successful in 17s Details CI / Lint & Typecheck (push) Failing after 21s Details CI / Build & Push Docker Image (push) Has been skipped Details CI / Lint & Typecheck (pull_request) Failing after 17s Details CI / Test (pull_request) Successful in 1m1s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-20 05:16:14 +00:00
Chris Farhood	42d1c5cf34	Fix QA review 2719: optional coatType/petSizeCategory, CoatType union, null guards CI / Test (pull_request) Successful in 16s Details CI / Lint & Typecheck (pull_request) Failing after 20s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details - Make coatType and petSizeCategory optional on Pet (?:) — they may not be set - Remove "single" and "short" from COAT_TYPES (not in CoatType union) - Use { name: "Add" } instead of /add/i to target the + button specifically - Add optional chaining to puppyCutSpans[0]?.closest() (noUncheckedIndexedAccess) - Add optional chaining to petsData[0]?.id ?? "" in PetProfiles Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-20 05:01:36 +00:00
Chris Farhood	2ec1b6a14d	Fix QA re-review: add missing types, aria-label, and temperament text CI / Test (pull_request) Failing after 16s Details CI / Lint & Typecheck (pull_request) Failing after 18s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details - Add MedicalAlert, AlertSeverity, CoatType, preferredCuts, medicalAlerts, temperamentScore, temperamentFlags to @groombook/types Pet interface - Add aria-label="Add" to the preferred cuts + button - Fix temperament text expectation from "(/4/5)" to "(4/5)" Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-20 04:53:52 +00:00
Chris Farhood	6132148cb5	Fix QA feedback: type imports, query methods, implicit any, null guards, accessibility CI / Test (pull_request) Failing after 45s Details CI / Lint & Typecheck (pull_request) Failing after 1m42s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details - Import Pet/MedicalAlert/CoatType/AlertSeverity from @groombook/types (workspace dep) - Replace getByPlaceholder with getByPlaceholderText in test file - Add explicit MedicalAlert type to destructured alert param in PetForm - Add null guards for HTMLElement \| undefined in test lines 79/111 - Add htmlFor=coat-type label association for accessible combobox Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-20 04:33:19 +00:00
Chris Farhood	c047e277b9	docs(GRO-1174): add §5.19 booking wizard test cases CI / Test (pull_request) Failing after 15s Details CI / Lint & Typecheck (pull_request) Failing after 16s Details CI / Build & Push Docker Image (pull_request) Has been skipped Details Updated UAT_PLAYBOOK.md §5.19 — booking wizard pet size/coat test cases. Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-20 03:13:25 +00:00
Chris Farhood	29fa0bd02b	feat(GRO-1174): add pet size/coat dropdowns to booking wizard - Add Pet Size dropdown (Small, Medium, Large, X-Large) after breed field - Add Coat Type dropdown (Smooth, Double, Curly, Wire, Long, Hairless) - Pass petSizeCategory + petCoatType as query params to availability endpoint - Include petSizeCategory + petCoatType in POST /appointments body - Show "appointment" duration label on confirm (service duration only) - Display pet size/coat on confirmation card when provided - Pre-fill from URL params - Reset form resets all new fields Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-20 02:44:14 +00:00
Chris Farhood	b8eb39e15c	GRO-1178: add UAT test cases for enhanced pet profile fields - Added TC-WEB-5.18.1 through TC-WEB-5.18.13 covering: coat type display, preferred cuts, temperament score/flags (read-only), medical alert cards, severity badges, form validation Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-20 00:30:01 +00:00
Chris Farhood	c7f0635fff	GRO-1178: client-facing enhanced pet profile editor - PetForm: coat type dropdown, temperament display (read-only), medical alerts editor (add/remove/severity), preferred cuts tag input - PetProfiles: Medical tab shows severity badges, Grooming tab shows coat type + preferred cuts, Basic Info tab shows temperament score/flags - PetForm.test: component tests for all new interactions - Shared types updated: MedicalAlert, CoatType, AlertSeverity added Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-05-20 00:23:16 +00:00
groombook-engineer[bot]	90f6a30b74	docs(GRO-1289): add UAT_PLAYBOOK.md with auth base URL test cases (#5 ) * docs(GRO-1289): add UAT_PLAYBOOK.md with auth base URL test cases Add UAT_PLAYBOOK.md covering VITE_API_URL auth resolution: - TC-AUTH-4.1.x: Tests for when VITE_API_URL is set - TC-AUTH-4.2.x: Tests for when VITE_API_URL is unset (window.location.origin fallback) - TC-AUTH-4.3.x: Session persistence tests Updated UAT_PLAYBOOK.md §4 — auth base URL resolution test cases. GRO-1289 * docs(GRO-1289): restore full UAT_PLAYBOOK with auth base URL test cases - Restored Pre-conditions section (§3) - Restored original §5.1 Authentication UI test cases - Inserted new auth base URL resolution test cases (§5.2–§5.4): - TC-AUTH-5.2.x: VITE_API_URL set scenarios - TC-AUTH-5.3.x: VITE_API_URL unset fallback scenarios - TC-AUTH-5.4.x: Session persistence scenarios - Restored all other feature test sections (§5.5–§5.17) - Restored broader Update Policy (§7) Updated UAT_PLAYBOOK.md §5.2–§5.4 — auth base URL resolution test cases Co-Authored-By: Paperclip <noreply@paperclip.ing> --------- Co-authored-by: Chris Farhood <chris@farhood.org> Co-authored-by: Paperclip <noreply@paperclip.ing>	2026-05-14 21:10:35 +00:00