feat: add multi-platform data comparison and compact UI redesign

- Add multi-platform comparison feature to compare data across
  FamilySearch, Ancestry, WikiTree, and Wikipedia
- Create unified provider cache structure at data/provider-cache/
- Update Ancestry scraper for 2024/2025 DOM structure
- Redesign PersonDetail page with compact layout:
  - Side-by-side Vital Events and Family cards
  - Inline tags for Also Known As and Occupations
  - Unified Platforms & Data section
- Add LinkPlatformDialog modal for linking profiles
- Add new API endpoints for comparison and provider refresh
- Add editable UI components (EditableDate, EditableField, EditableList)
- Add VitalEventCard component for birth/death/burial display

Author: atomantic

.changelog/v0.5.x.md

@@ -0,0 +1,83 @@
+# Release v0.5.x - Multi-Platform Comparison & UI Redesign
+
+Released: 2026-01-25
+
+## Overview
+
+This release adds multi-platform data comparison capabilities, allowing you to compare person data across FamilySearch, Ancestry, WikiTree, and Wikipedia. It also includes a major UI redesign for the person detail page with a more compact, user-friendly layout.
+
+## New Features
+
+### Multi-Platform Data Comparison (v0.5.0)
+- Compare person data across multiple genealogy providers side-by-side
+- Field-by-field comparison with visual indicators: ✓ match, ⚠ different, — missing
+- Unified provider cache structure at `data/provider-cache/{provider}/{externalId}.json`
+- Download/refresh data from providers directly from the UI
+- Collapsible field comparison panel showing divergences
+
+### Compact PersonDetail Layout (v0.5.0)
+- Redesigned person detail page with more efficient use of screen space
+- Side-by-side Vital Events (birth/death/burial) and Family cards at top
+- Inline tags for Also Known As and Occupations
+- Unified Platforms & Data section combining provider links and comparison
+- Compact bio section
+
+### Link Platform Dialog (v0.5.0)
+- New modal dialog for linking Wikipedia, Ancestry, and WikiTree profiles
+- Platform-specific styling and placeholder text
+- Keyboard support (Escape to close, Enter to submit)
+- Auto-focus on URL input when opened
+
+### Ancestry Scraper Updates (v0.5.0)
+- Updated selectors for 2024/2025 Ancestry DOM structure
+- Extracts name from `.userCardTitle`
+- Extracts birth/death from `.userCardEventDetail` spans
+- Extracts parents from Relationships section
+- Extracts profile photo URL
+- Proper handling of "Unknown" and "Living" status values
+
+## New Files
+
+### Client Components
+- `client/src/components/person/UnifiedPlatformSection.tsx` - Combined provider links and comparison table
+- `client/src/components/person/LinkPlatformDialog.tsx` - Modal dialog for linking platforms
+- `client/src/components/person/VitalEventCard.tsx` - Compact vital event display with editing
+- `client/src/components/ui/EditableDate.tsx` - Inline date editor with genealogy format validation
+- `client/src/components/ui/EditableField.tsx` - Inline text field editor
+- `client/src/components/ui/EditableList.tsx` - Inline list editor
+
+### Server Services
+- `server/src/services/multi-platform-comparison.service.ts` - Provider data comparison logic
+- `server/src/services/familysearch-refresh.service.ts` - FamilySearch data refresh
+- `server/src/services/familysearch-upload.service.ts` - Upload changes to FamilySearch
+- `server/src/services/local-override.service.ts` - Local override management
+
+### Scripts
+- `scripts/migrate-provider-cache.ts` - Migration script for unified cache structure
+
+## API Endpoints
+
+### New Endpoints
+- `GET /api/sync/:dbId/:personId/multi-platform-compare` - Get full multi-platform comparison
+- `POST /api/sync/:dbId/:personId/refresh-provider/:provider` - Refresh data from specific provider
+
+## Technical Details
+
+### Provider Cache Structure
+Provider data is now cached in a unified structure:
+```
+data/provider-cache/
+  familysearch/{fsId}.json
+  ancestry/{externalId}.json
+  wikitree/{externalId}.json
+```
+
+### Comparison Algorithm
+- FamilySearch serves as the baseline (primary source)
+- Field comparison uses fuzzy matching for places (contains check)
+- Alternate names are sorted alphabetically before comparison to avoid false differences
+- Missing values are distinguished from empty values
+
+## Full Changelog
+
+**Full Diff**: https://github.com/atomantic/SparseTree/compare/v0.4.16...v0.5.0

client/src/components/Dashboard.tsx

@@ -91,7 +91,7 @@ export function Dashboard() {
   const handleRefreshEvent = useCallback((data: { dbId: string; status: string; personCount?: number; data?: DatabaseInfo; message?: string }) => {
     if (data.status === 'complete' && data.data) {
       setDatabases(prev => prev.map(d => d.id === data.dbId ? data.data! : d));
-      toast.success(`Updated count: ${data.personCount?.toLocaleString()} people`);
+      toast.success(`Updated count: ${data.personCount?.toLocaleString()} parents`);
       setRefreshingId(null);
     } else if (data.status === 'error') {
       toast.error(`Failed to refresh: ${data.message || 'Unknown error'}`);
@@ -213,73 +213,98 @@ export function Dashboard() {
               key={db.id}
               className="bg-app-card rounded-lg border border-app-border p-4 hover:border-app-accent/50 transition-colors"
             >
-              {/* Badges row */}
-              <div className="flex items-center gap-2 mb-2">
-                {db.isSample && (
+              {/* Sample badge */}
+              {db.isSample && (
+                <div className="mb-2">
                   <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-amber-600/20 text-amber-600 dark:text-amber-400">
                     <FlaskConical size={10} />
                     Sample
                   </span>
-                )}
-                {db.sourceProvider && (
-                  (() => {
-                    const colors = platformColors[db.sourceProvider] || { bg: 'bg-app-text-muted/20', text: 'text-app-text-muted' };
-                    return (
-                      <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${colors.bg} ${colors.text}`}>
-                        <Database size={10} />
-                        {db.sourceProvider}
-                      </span>
-                    );
-                  })()
-                )}
-              </div>
+                </div>
+              )}
 
-              {/* Header with name and actions */}
-              <div className="flex items-start justify-between mb-2">
-                <div className="flex-1 min-w-0">
-                  <h2 className="font-semibold text-lg text-app-text truncate">
-                    {db.rootName || 'Unknown Person'}
-                  </h2>
-                  <div className="flex items-center gap-1">
-                    <span className="text-xs text-app-text-muted font-mono">{db.rootExternalId || db.rootId}</span>
-                    <CopyButton text={db.rootExternalId || db.rootId} size={12} />
-                    {db.rootExternalId && (
-                      <Link
-                        to={`/indexer?rootId=${db.rootExternalId}`}
-                        className="p-1 text-app-text-muted hover:text-app-accent hover:bg-app-accent/10 rounded transition-colors"
-                        title="Update from FamilySearch"
-                      >
-                        <Download size={12} />
-                      </Link>
-                    )}
+              {/* Header with photo, name and actions */}
+              <div className="flex items-start gap-3 mb-2">
+                {/* Photo */}
+                {db.hasPhoto && (
+                  <Link to={`/person/${db.id}/${db.rootId}`} className="flex-shrink-0">
+                    <img
+                      src={api.getPhotoUrl(db.rootId)}
+                      alt={db.rootName || 'Root person'}
+                      className="w-16 h-16 rounded-lg object-cover border border-app-border hover:border-app-accent transition-colors"
+                    />
+                  </Link>
+                )}
+                {/* Name and actions */}
+                <div className="flex-1 min-w-0 flex items-start justify-between">
+                  <div className="flex-1 min-w-0">
+                    <h2 className="font-semibold text-lg text-app-text truncate">
+                      {db.rootName || 'Unknown Person'}
+                    </h2>
                   </div>
-                </div>
-                <div className="flex items-center gap-1 flex-shrink-0 ml-2">
-                  <button
-                    onClick={() => handleRefresh(db)}
-                    disabled={refreshingId === db.id}
-                    className="p-1.5 text-app-text-muted hover:text-app-accent hover:bg-app-accent/10 rounded transition-colors disabled:opacity-50"
-                    title="Refresh ancestor count"
-                  >
-                    <RefreshCw size={16} className={refreshingId === db.id ? 'animate-spin' : ''} />
-                  </button>
-                  {!db.isSample && (
+                  <div className="flex items-center gap-1 flex-shrink-0 ml-2">
                     <button
-                      onClick={() => setDeleteTarget(db)}
-                      className="p-1.5 text-app-text-muted hover:text-app-error hover:bg-app-error-subtle rounded transition-colors"
-                      title="Remove root"
+                      onClick={() => handleRefresh(db)}
+                      disabled={refreshingId === db.id}
+                      className="p-1.5 text-app-text-muted hover:text-app-accent hover:bg-app-accent/10 rounded transition-colors disabled:opacity-50"
+                      title="Refresh ancestor count"
                     >
-                      <Trash2 size={16} />
+                      <RefreshCw size={16} className={refreshingId === db.id ? 'animate-spin' : ''} />
                     </button>
-                  )}
+                    {!db.isSample && (
+                      <button
+                        onClick={() => setDeleteTarget(db)}
+                        className="p-1.5 text-app-text-muted hover:text-app-error hover:bg-app-error-subtle rounded transition-colors"
+                        title="Remove root"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
 
+              {/* Platform IDs */}
+              <div className="mb-3 space-y-1">
+                {/* SparseTree canonical ID */}
+                <div className="flex items-center gap-1.5 text-xs">
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-app-accent/10 text-app-accent font-medium min-w-[70px]">
+                    <Database size={10} />
+                    sparsetree
+                  </span>
+                  <span className="font-mono text-app-text-muted truncate">{db.rootId}</span>
+                  <CopyButton text={db.rootId} size={10} />
+                </div>
+                {/* External platform IDs */}
+                {db.externalIds && Object.entries(db.externalIds).map(([platform, extId]) => {
+                  const colors = platformColors[platform] || { bg: 'bg-app-text-muted/20', text: 'text-app-text-muted' };
+                  return (
+                    <div key={platform} className="flex items-center gap-1.5 text-xs">
+                      <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded font-medium min-w-[70px] ${colors.bg} ${colors.text}`}>
+                        <Database size={10} />
+                        {platform}
+                      </span>
+                      <span className="font-mono text-app-text-muted truncate">{extId}</span>
+                      <CopyButton text={extId} size={10} />
+                      {platform === 'familysearch' && (
+                        <Link
+                          to={`/indexer?rootId=${extId}`}
+                          className="p-0.5 text-app-text-muted hover:text-app-accent hover:bg-app-accent/10 rounded transition-colors"
+                          title="Update from FamilySearch"
+                        >
+                          <Download size={10} />
+                        </Link>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
               {/* Stats */}
               <div className="flex items-center gap-4 text-sm text-app-text-muted mb-4">
                 <span className="flex items-center gap-1">
                   <Users size={14} />
-                  {db.personCount.toLocaleString()} people
+                  {db.personCount.toLocaleString()} parents
                 </span>
                 {db.maxGenerations ? (
                   <span className="flex items-center gap-1">

client/src/components/person/LinkPlatformDialog.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useRef } from 'react';
+import { X, Loader2, Link2 } from 'lucide-react';
+
+type Platform = 'wikipedia' | 'ancestry' | 'wikitree';
+
+interface LinkPlatformDialogProps {
+  platform: Platform | null;
+  onClose: () => void;
+  onLink: (platform: Platform, url: string) => Promise<void>;
+  loading?: boolean;
+}
+
+const PLATFORM_CONFIG: Record<Platform, {
+  title: string;
+  placeholder: string;
+  hint: string;
+  color: string;
+  bgColor: string;
+}> = {
+  wikipedia: {
+    title: 'Link Wikipedia Article',
+    placeholder: 'https://en.wikipedia.org/wiki/Person_Name',
+    hint: 'Paste a Wikipedia URL to import photo and description for this person.',
+    color: 'text-blue-600 dark:text-blue-400',
+    bgColor: 'bg-blue-600/10',
+  },
+  ancestry: {
+    title: 'Link Ancestry Profile',
+    placeholder: 'https://www.ancestry.com/family-tree/person/tree/.../person/...',
+    hint: 'Paste an Ancestry profile URL to link this person to their Ancestry tree.',
+    color: 'text-emerald-600 dark:text-emerald-400',
+    bgColor: 'bg-emerald-600/10',
+  },
+  wikitree: {
+    title: 'Link WikiTree Profile',
+    placeholder: 'https://www.wikitree.com/wiki/LastName-123',
+    hint: 'Paste a WikiTree URL to link this person to their WikiTree profile.',
+    color: 'text-purple-600 dark:text-purple-400',
+    bgColor: 'bg-purple-600/10',
+  },
+};
+
+export function LinkPlatformDialog({ platform, onClose, onLink, loading = false }: LinkPlatformDialogProps) {
+  const [url, setUrl] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (platform) {
+      setUrl('');
+      // Focus input when dialog opens
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [platform]);
+
+  if (!platform) return null;
+
+  const config = PLATFORM_CONFIG[platform];
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!url.trim()) return;
+    await onLink(platform, url.trim());
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="bg-app-card rounded-lg border border-app-border shadow-xl max-w-md w-full mx-4">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-app-border">
+          <div className="flex items-center gap-2">
+            <Link2 size={16} className={config.color} />
+            <h3 className="font-semibold text-app-text">{config.title}</h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 text-app-text-muted hover:text-app-text hover:bg-app-hover rounded transition-colors"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit} className="p-4">
+          <div className="space-y-3">
+            <input
+              ref={inputRef}
+              type="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder={config.placeholder}
+              className="w-full px-3 py-2 bg-app-bg border border-app-border rounded text-app-text text-sm focus:outline-none focus:ring-2 focus:ring-app-accent"
+              disabled={loading}
+            />
+            <p className="text-xs text-app-text-subtle">{config.hint}</p>
+          </div>
+
+          <div className="flex justify-end gap-2 mt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={loading}
+              className="px-3 py-1.5 text-sm text-app-text-secondary hover:bg-app-hover rounded transition-colors disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading || !url.trim()}
+              className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded ${config.bgColor} ${config.color} hover:opacity-80 disabled:opacity-50 transition-colors`}
+            >
+              {loading ? (
+                <>
+                  <Loader2 size={14} className="animate-spin" />
+                  Linking...
+                </>
+              ) : (
+                <>
+                  <Link2 size={14} />
+                  Link
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}