STAMMBAUM-AVATAR: Tier-Foto als Avatar in Pedigree-Karte, GerbilIcon-Fallback (profilePhotoUrl-Contract)

gerbil-manager-web/e2e/farbschlag-sync.spec.ts

@@ -0,0 +1,79 @@
+/** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
+import { de, expect, skipUnlessMock, test } from './fixtures'
+
+const t = de.pages.gerbils
+
+test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Vor der Auswahl ist das Gencode-Feld leer.
+  await expect(genotypeInput).toHaveValue('')
+
+  // 'Agouti' wählen → Gencode wird automatisch befüllt.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
+})
+
+test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
+  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('cv-schwarz')
+})
+
+test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
+  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
+  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})
+
+test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  await farbschlagSelect.selectOption({ label: 'Blau' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
+  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})

gerbil-manager-web/e2e/mock-data.ts

@@ -108,6 +108,7 @@ function gerbil(
     notes: null,
     // BESTAND-FILTER: default = eigener Bestand; einzelne externe Ahnen unten gesetzt.
     isResident: true,
+    profilePhotoUrl: null,
   }
 }
 
@@ -120,7 +121,7 @@ export function seedDb(): MockDb {
       originContactId: 'con-meier',
       originBreeder: 'Clan-Kleine-Chaoten',
     },
-    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier' },
+    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier', profilePhotoUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==' },
     gerbil('luna', 'Luna', 'female', '2023-08-15', 'w-luna', 'cv-gold', 'AA CC DD EE GG pp spsp rere'),
     gerbil('balu', 'Balu', 'male', '2021-04-20', 'w-balu', 'cv-agouti'),
     gerbil('maja', 'Maja', 'female', '2021-06-11', null, 'cv-schwarz-schecke', 'aa CC DD EE GG PP Spsp rere'),

gerbil-manager-web/e2e/stammbaum.spec.ts

@@ -154,3 +154,20 @@ test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ p
   const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
   await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
 })
+
+test('Tier mit Foto zeigt Avatar-Bild, Tier ohne Foto zeigt Rennmaus-Icon (STAMMBAUM-AVATAR)', async ({ page }) => {
+  skipUnlessMock()
+  // Fridolin hat profilePhotoUrl (data URI) → <img.pedigree-card__avatar> sichtbar
+  // Krümel hat profilePhotoUrl=null → kein img, SVG-Icon sichtbar
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  // Fridolin ist Vater von Krümel → seine Karte enthält ein <img>
+  const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
+  await expect(fridolinCard.locator('img.pedigree-card__avatar')).toBeVisible()
+
+  // Krümel (root) hat kein Foto → SVG-Icon im Foto-Slot
+  const rootCard = page.locator('.pedigree-card.pedigree-card--root')
+  await expect(rootCard.locator('img.pedigree-card__avatar')).not.toBeAttached()
+  await expect(rootCard.locator('svg[role="img"]')).toBeVisible()
+})

gerbil-manager-web/src/api/types.ts

@@ -56,6 +56,8 @@ export interface Gerbil {
   isResident?: boolean
   /** FORM-FIELDS-1: true=gehörlos, false=hörend, null=unbekannt. */
   isDeaf?: boolean | null
+  /** STAMMBAUM-AVATAR: URL des Profilfotos (erstes Foto nach sortOrder); null = kein Foto. API-relativ oder absolut. */
+  profilePhotoUrl?: string | null
 }
 
 /** Payload for POST /gerbils. */

gerbil-manager-web/src/pages/GerbilFormPage.tsx

@@ -6,7 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import NameSuggestPanel from '../components/NameSuggestPanel'
 import '../components/NameSuggestPanel.css'
@@ -307,7 +307,14 @@ export default function GerbilFormPage() {
           <span className="farbschlag-value">
             <select
               value={form.colorVarietyId}
-              onChange={(e) => set('colorVarietyId', e.target.value)}
+              onChange={(e) => {
+                const newId = e.target.value
+                set('colorVarietyId', newId)
+                if (newId) {
+                  const variety = (colorVarieties.data ?? []).find((cv) => cv.id === newId)
+                  if (variety?.canonicalGenotype) set('genotype', variety.canonicalGenotype)
+                }
+              }}
             >
               <option value="">{t.form.none}</option>
               {(colorVarieties.data ?? []).map((cv) => (
@@ -387,7 +394,23 @@ export default function GerbilFormPage() {
             className="input"
             value={form.genotype}
             placeholder="Aa CC Dd EE GG Pp Spsp rere"
-            onChange={(e) => set('genotype', e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value
+              set('genotype', val)
+              if (val.trim() !== '' && isGenotypeValid(val)) {
+                try {
+                  const name = genotypeToFarbschlag(fromDisplayString(val))
+                  if (name === UNKNOWN_FARBSCHLAG) {
+                    set('colorVarietyId', '')
+                  } else {
+                    const match = (colorVarieties.data ?? []).find((cv) => cv.name === name)
+                    set('colorVarietyId', match?.id ?? '')
+                  }
+                } catch {
+                  // invalid while typing — leave colorVarietyId unchanged
+                }
+              }
+            }}
             aria-invalid={Boolean(errors.genotype)}
           />
           <small className={errors.genotype ? 'error-text' : 'muted'}>

gerbil-manager-web/src/pages/StammbaumPage.tsx

@@ -21,7 +21,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'
 import Tree from 'react-d3-tree'
 import type { CustomNodeElementProps, Point, RawNodeDatum } from 'react-d3-tree'
 import { de } from '../strings/de'
-import { ApiError } from '../api/client'
+import { API_BASE_URL, ApiError } from '../api/client'
 import { listLitters } from '../api/litters'
 import { listColorVarieties } from '../api/lookups'
 import { getInbreedingCoefficient } from '../api/pedigree'
@@ -381,6 +381,14 @@ function PedigreeCard({
   const g = node.gerbil
   const chip = farbschlag ? chipColorFor(farbschlag) : null
   const dob = g.dateOfBirth ? formatDate(g.dateOfBirth) : null
+  const [imgError, setImgError] = useState(false)
+  useEffect(() => setImgError(false), [g.id])
+  const photoUrl =
+    !imgError && g.profilePhotoUrl
+      ? /^(https?:|data:|\/\/)/.test(g.profilePhotoUrl)
+        ? g.profilePhotoUrl
+        : `${API_BASE_URL}${g.profilePhotoUrl}`
+      : null
   return (
     <div
       className={isRoot ? 'pedigree-card pedigree-card--root' : 'pedigree-card'}
@@ -388,9 +396,17 @@ function PedigreeCard({
       role={isRoot ? undefined : 'button'}
       title={isRoot ? undefined : t.tapHint}
     >
-      {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
+      <div className="pedigree-card__photo" aria-hidden={!photoUrl || undefined}>
-      <div className="pedigree-card__photo" aria-hidden="true">
+        {photoUrl ? (
-        <GerbilIcon size="1.6rem" />
+          <img
+            src={photoUrl}
+            alt={g.name || ''}
+            className="pedigree-card__avatar"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <GerbilIcon size="1.6rem" aria-hidden="true" />
+        )}
       </div>
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">

gerbil-manager-web/src/pages/stammbaum.css

@@ -236,6 +236,7 @@
   width: 42px;
   height: 42px;
   border-radius: 50%;
+  overflow: hidden;
   background: var(--color-accent-soft);
   display: flex;
   align-items: center;
@@ -243,6 +244,13 @@
   font-size: 1.4rem;
 }
 
+.pedigree-card__avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .pedigree-card__body {
   min-width: 0;
   display: flex;