fix: "Set as Primary" photo not updating in UI

Multiple issues prevented the photo from updating after clicking "Set as Primary":

1. getPhotoPath() only checked provider-suffixed photos, not the primary photo
   - Now checks {personId}.jpg first, then falls back to provider photos

2. Photo priority was backwards - showed provider photos before primary
   - PersonDetail header now shows primary photo first
   - SparseTree row always shows primary photo (source of truth)

3. Browser caching "exists" endpoint responses (304 Not Modified)
   - Added Cache-Control: no-cache headers to all photo exists endpoints

4. No FamilySearch-specific photo endpoint
   - Added GET /augment/:personId/familysearch-photo endpoint
   - Added getFsPhotoUrl() and hasFsPhotoProvider() client API methods

5. No cache busting for photo URLs after changes
   - Added photoVersion state that increments on photo change
   - Photo URLs now include ?v={version} parameter

Files changed:
- client/src/components/person/PersonDetail.tsx
- client/src/components/person/ProviderDataTable.tsx
- client/src/services/api.ts
- server/src/routes/augmentation.routes.ts
- server/src/routes/browser.routes.ts
- server/src/services/scraper.service.ts

Author: atomantic

.changelog/v0.6.x.md

@@ -19,6 +19,18 @@ This release normalizes FamilySearch as a downstream provider (equal to Ancestry
 - Provider cache (`data/provider-cache/`) is for comparison only, not a fallback data source
 - All data reads come from SQLite; provider cache shows what providers have vs what SparseTree has
 
+## Bug Fixes
+
+### "Set as Primary" Photo Not Updating (v0.6.x)
+- Fixed photo not updating after clicking "Set as Primary" on provider photos
+- Root causes fixed:
+  - `getPhotoPath()` now checks for primary photo (`{personId}.jpg`) before provider-suffixed photos
+  - Photo priority in PersonDetail header and SparseTree row now shows primary photo first
+  - Added `Cache-Control: no-cache` headers to all photo "exists" endpoints to prevent stale responses
+- Added FamilySearch-specific photo endpoint: `GET /augment/:personId/familysearch-photo`
+- Added client API methods: `getFsPhotoUrl()`, `hasFsPhotoProvider()`
+- Added `photoVersion` state for cache-busting photo URLs after changes
+
 ## Improvements
 
 ### Legacy Code Removal (v0.6.x)

client/src/components/person/PersonDetail.tsx

@@ -113,6 +113,7 @@ export function PersonDetail() {
   const [hasFsPhoto, setHasFsPhoto] = useState(false);
   const [hasWikiPhoto, setHasWikiPhoto] = useState(false);
   const [hasAncestryPhoto, setHasAncestryPhoto] = useState(false);
+  const [photoVersion, setPhotoVersion] = useState(0); // For cache busting
   const [loading, setLoading] = useState(true);
   const [lineageLoading, setLineageLoading] = useState(false);
   const [scrapeLoading, setScrapeLoading] = useState(false);
@@ -425,6 +426,8 @@ export function PersonDetail() {
     setHasAncestryPhoto(ancestryPhotoCheck?.exists ?? false);
     setHasWikiTreePhoto(wikiTreePhotoCheck?.exists ?? false);
     setHasLinkedInPhoto(linkedInPhotoCheck?.exists ?? false);
+    // Increment photo version to bust browser cache
+    setPhotoVersion(v => v + 1);
   }, [personId]);
 
   const handleSavePersonField = useCallback(async (fieldName: string, value: string, originalValue: string | null) => {
@@ -550,17 +553,22 @@ export function PersonDetail() {
   const isRoot = database?.rootId === personId;
   const generations = lineage ? lineage.path.length - 1 : 0;
   const relationship = isRoot ? 'Root Person (You)' : lineage ? getRelationshipLabel(generations) : null;
-  // Photo priority: Ancestry > WikiTree > LinkedIn > Wiki > FamilySearch scraped
-  const photoUrl = hasAncestryPhoto
-    ? api.getAncestryPhotoUrl(personId!)
-    : hasWikiTreePhoto
-      ? api.getWikiTreePhotoUrl(personId!)
-      : hasLinkedInPhoto
-        ? api.getLinkedInPhotoUrl(personId!)
-        : hasWikiPhoto
-          ? api.getWikiPhotoUrl(personId!)
-          : hasPhoto
-            ? api.getPhotoUrl(personId!)
+  // Photo priority: Primary (user-selected) > Ancestry > WikiTree > LinkedIn > Wiki > FamilySearch
+  // Add cache-busting version parameter to force refresh after changing primary photo
+  const cacheBust = photoVersion > 0 ? `?v=${photoVersion}` : '';
+  // Primary photo is at api.getPhotoUrl() - check if it exists by seeing if hasPhoto is true
+  // but we need to distinguish between "has primary" vs "has any photo"
+  // For now, always show the primary photo URL if hasPhoto is true (getPhotoPath returns primary first)
+  const photoUrl = hasPhoto
+    ? api.getPhotoUrl(personId!) + cacheBust
+    : hasAncestryPhoto
+      ? api.getAncestryPhotoUrl(personId!) + cacheBust
+      : hasWikiTreePhoto
+        ? api.getWikiTreePhotoUrl(personId!) + cacheBust
+        : hasLinkedInPhoto
+          ? api.getLinkedInPhotoUrl(personId!) + cacheBust
+          : hasWikiPhoto
+            ? api.getWikiPhotoUrl(personId!) + cacheBust
             : null;
 
   // Get primary description from augmentation

client/src/components/person/ProviderDataTable.tsx

@@ -356,17 +356,10 @@ export function ProviderDataTable({
   };
 
   // Provider photo URLs
-  const sparseTreePhotoUrl = hasAncestryPhoto
-    ? api.getAncestryPhotoUrl(personId)
-    : hasWikiTreePhoto
-      ? api.getWikiTreePhotoUrl(personId)
-      : hasWikiPhoto
-        ? api.getWikiPhotoUrl(personId)
-        : hasPhoto
-          ? api.getPhotoUrl(personId)
-          : null;
-
-  const fsPhotoUrl = hasFsPhoto ? api.getPhotoUrl(personId) : null;
+  // SparseTree row always shows the primary (user-selected) photo - this is our source of truth
+  const sparseTreePhotoUrl = hasPhoto ? api.getPhotoUrl(personId) : null;
+
+  const fsPhotoUrl = hasFsPhoto ? api.getFsPhotoUrl(personId) : null;
   const ancestryPhotoUrl = hasAncestryPhoto ? api.getAncestryPhotoUrl(personId) : null;
   const wikiTreePhotoUrl = hasWikiTreePhoto ? api.getWikiTreePhotoUrl(personId) : null;
   const wikiPhotoUrl = hasWikiPhoto ? api.getWikiPhotoUrl(personId) : null;

client/src/services/api.ts

@@ -327,6 +327,12 @@ export const api = {
 
   getWikiTreePhotoUrl: (personId: string) => `${BASE_URL}/augment/${personId}/wikitree-photo`,
 
+  // FamilySearch photo (provider-specific, not primary)
+  hasFsPhotoProvider: (personId: string) =>
+    fetchJson<{ exists: boolean }>(`/augment/${personId}/familysearch-photo/exists`),
+
+  getFsPhotoUrl: (personId: string) => `${BASE_URL}/augment/${personId}/familysearch-photo`,
+
   // LinkedIn linking
   linkLinkedIn: (personId: string, url: string) =>
     fetchJson<PersonAugmentation>(`/augment/${personId}/linkedin`, {

server/src/routes/augmentation.routes.ts

@@ -93,6 +93,7 @@ router.get('/:personId/wiki-photo', async (req: Request, res: Response) => {
 router.get('/:personId/wiki-photo/exists', async (req: Request, res: Response) => {
   const { personId } = req.params;
   const exists = augmentationService.hasWikiPhoto(personId);
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
   res.json({ success: true, data: { exists } });
 });
 
@@ -144,6 +145,7 @@ router.get('/:personId/ancestry-photo', async (req: Request, res: Response) => {
 router.get('/:personId/ancestry-photo/exists', async (req: Request, res: Response) => {
   const { personId } = req.params;
   const exists = augmentationService.hasAncestryPhoto(personId);
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
   res.json({ success: true, data: { exists } });
 });
 
@@ -195,6 +197,33 @@ router.get('/:personId/wikitree-photo', async (req: Request, res: Response) => {
 router.get('/:personId/wikitree-photo/exists', async (req: Request, res: Response) => {
   const { personId } = req.params;
   const exists = augmentationService.hasWikiTreePhoto(personId);
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+  res.json({ success: true, data: { exists } });
+});
+
+// Serve FamilySearch photo
+router.get('/:personId/familysearch-photo', async (req: Request, res: Response) => {
+  const { personId } = req.params;
+  const photoPath = augmentationService.getFamilySearchPhotoPath(personId);
+
+  if (!photoPath || !fs.existsSync(photoPath)) {
+    res.status(404).json({ success: false, error: 'FamilySearch photo not found' });
+    return;
+  }
+
+  const ext = path.extname(photoPath).toLowerCase();
+  const contentType = ext === '.png' ? 'image/png' : 'image/jpeg';
+
+  res.setHeader('Content-Type', contentType);
+  res.setHeader('Cache-Control', 'public, max-age=86400');
+  fs.createReadStream(photoPath).pipe(res);
+});
+
+// Check if FamilySearch photo exists
+router.get('/:personId/familysearch-photo/exists', async (req: Request, res: Response) => {
+  const { personId } = req.params;
+  const exists = augmentationService.hasFamilySearchPhoto(personId);
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
   res.json({ success: true, data: { exists } });
 });
 
@@ -246,6 +275,7 @@ router.get('/:personId/linkedin-photo', async (req: Request, res: Response) => {
 router.get('/:personId/linkedin-photo/exists', async (req: Request, res: Response) => {
   const { personId } = req.params;
   const exists = augmentationService.hasLinkedInPhoto(personId);
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
   res.json({ success: true, data: { exists } });
 });
 

server/src/routes/browser.routes.ts

@@ -211,6 +211,8 @@ router.get('/photos/:personId/exists', async (req: Request, res: Response) => {
   const { personId } = req.params;
   const exists = scraperService.hasPhoto(personId);
   const fsExists = scraperService.hasFsPhoto(personId);
+  // Disable caching so changes are detected immediately
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
   res.json({ success: true, data: { exists, fsExists } });
 });
 

server/src/services/scraper.service.ts

@@ -90,10 +90,16 @@ export const scraperService = {
   },
 
   getPhotoPath(personId: string): string | null {
-    // Photo patterns: all providers use suffixed naming
-    const suffixes = ['-familysearch', '-wiki', '-ancestry', '-wikitree', '-linkedin'];
     const extensions = ['.jpg', '.png'];
 
+    // First check for primary photo (user-selected, no suffix)
+    for (const ext of extensions) {
+      const primaryPath = path.join(PHOTOS_DIR, `${personId}${ext}`);
+      if (fs.existsSync(primaryPath)) return primaryPath;
+    }
+
+    // Then check provider-specific photos
+    const suffixes = ['-familysearch', '-wiki', '-ancestry', '-wikitree', '-linkedin'];
     for (const suffix of suffixes) {
       for (const ext of extensions) {
         const filePath = path.join(PHOTOS_DIR, `${personId}${suffix}${ext}`);