Tree layout toggles (landscape/portrait/fan), card->profile, server search

Tree page gets Landscape/Portrait/Fan toggles: landscape & portrait via family-chart's orientation; a hand-rolled radial Fan chart of ancestors (rings per generation, click to recenter). Clicking a card recenters and updates an 'Open <name> →' link to that person's profile. The People directory search now hits the server-side pg_trgm fuzzy endpoint (debounced) so it spans the whole tree, not just the loaded page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>

backend/app/api/v1/persons.py

@@ -36,10 +36,18 @@ async def create_person(
 
 @router.get("/{tree_id}/persons", response_model=list[PersonRead])
 async def list_persons(
-    tree_id: uuid.UUID, session: SessionDep, current: CurrentUser, deleted: bool = False
+    tree_id: uuid.UUID,
+    session: SessionDep,
+    current: CurrentUser,
+    deleted: bool = False,
+    q: str | None = None,
 ) -> list[PersonRead]:
     tree = await tree_service.get_tree(session, viewer_id=current.id, tree_id=tree_id)
-    if deleted:
+    if q:
+        persons = await person_service.search_persons(
+            session, viewer_id=current.id, tree=tree, query=q
+        )
+    elif deleted:
         persons = await person_service.list_deleted_persons(
             session, viewer_id=current.id, tree=tree
         )

backend/app/models/person.py

@@ -7,7 +7,7 @@ aliases) so name changes over time are first-class.
 
 import uuid
 
-from sqlalchemy import Boolean, ForeignKey, Integer, String, Text, text
+from sqlalchemy import Boolean, ForeignKey, Index, Integer, String, Text, text
 from sqlalchemy import Enum as SAEnum
 from sqlalchemy.orm import Mapped, mapped_column
 
@@ -33,6 +33,22 @@ class Person(Base, UUIDPrimaryKey, TenantScoped, Timestamps, SoftDelete):
 
 class Name(Base, UUIDPrimaryKey, TenantScoped, Timestamps, SoftDelete):
     __tablename__ = "names"
+    # Trigram indexes for fuzzy name search (Mueller/Müller/Muller). Requires the
+    # pg_trgm extension (enabled in the accompanying migration).
+    __table_args__ = (
+        Index(
+            "ix_names_given_trgm",
+            "given",
+            postgresql_using="gin",
+            postgresql_ops={"given": "gin_trgm_ops"},
+        ),
+        Index(
+            "ix_names_surname_trgm",
+            "surname",
+            postgresql_using="gin",
+            postgresql_ops={"surname": "gin_trgm_ops"},
+        ),
+    )
 
     person_id: Mapped[uuid.UUID] = mapped_column(
         ForeignKey("persons.id", ondelete="CASCADE"), index=True

backend/app/services/person_service.py

@@ -6,7 +6,7 @@ person through the privacy engine. Each returned Person gets a transient
 import uuid
 from datetime import UTC, datetime
 
-from sqlalchemy import select
+from sqlalchemy import func, or_, select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.enums import PersonPrivacy
@@ -25,6 +25,14 @@ def _format_name(name: Name) -> str | None:
     return joined or name.display_name
 
 
+def _redact(person: Person) -> None:
+    """Minimise a possibly-living person for a non-member view (transient only —
+    never committed)."""
+    person.primary_name = "Living person"
+    person.gender = None
+    person.is_living = True
+
+
 async def _attach_primary_name(session: AsyncSession, person: Person) -> None:
     stmt = (
         select(Name)
@@ -104,11 +112,14 @@ async def get_person(
     if person is None:
         raise NotFound("person not found")
     # Run the single person through the privacy engine (redaction lands Phase 2).
-    if (
-        await privacy.person_visibility(session, user_id=viewer_id, tree=tree, person=person)
-        == Visibility.hidden
-    ):
+    vis = await privacy.person_visibility(
+        session, user_id=viewer_id, tree=tree, person=person
+    )
+    if vis == Visibility.hidden:
         raise NotFound("person not found")
+    if vis == Visibility.redacted:
+        _redact(person)
+    else:
         await _attach_primary_name(session, person)
     return person
 
@@ -199,13 +210,66 @@ async def list_persons(
 
     visible: list[Person] = []
     for person in persons:
-        if (
-            await privacy.person_visibility(
+        vis = await privacy.person_visibility(
             session, user_id=viewer_id, tree=tree, person=person
         )
-            == Visibility.hidden
-        ):
+        if vis == Visibility.hidden:
             continue
+        if vis == Visibility.redacted:
+            _redact(person)
+        else:
             await _attach_primary_name(session, person)
         visible.append(person)
     return visible
+
+
+async def search_persons(
+    session: AsyncSession, *, viewer_id: uuid.UUID, tree: Tree, query: str, limit: int = 50
+) -> list[Person]:
+    if not await privacy.can_view_tree(session, user_id=viewer_id, tree=tree):
+        raise Forbidden("not permitted to view this tree")
+    q = query.strip()
+    if not q:
+        return []
+    like = f"%{q}%"
+    score = func.greatest(
+        func.similarity(func.coalesce(Name.given, ""), q),
+        func.similarity(func.coalesce(Name.surname, ""), q),
+    )
+    sub = (
+        select(Name.person_id.label("pid"), func.max(score).label("score"))
+        .where(
+            Name.tree_id == tree.id,
+            Name.deleted_at.is_(None),
+            or_(
+                Name.given.op("%")(q),
+                Name.surname.op("%")(q),
+                Name.given.ilike(like),
+                Name.surname.ilike(like),
+            ),
+        )
+        .group_by(Name.person_id)
+        .order_by(func.max(score).desc())
+        .limit(limit)
+        .subquery()
+    )
+    stmt = (
+        select(Person)
+        .join(sub, sub.c.pid == Person.id)
+        .where(Person.tree_id == tree.id, Person.deleted_at.is_(None))
+        .order_by(sub.c.score.desc())
+    )
+    persons = list((await session.execute(stmt)).scalars().all())
+    out: list[Person] = []
+    for person in persons:
+        vis = await privacy.person_visibility(
+            session, user_id=viewer_id, tree=tree, person=person
+        )
+        if vis == Visibility.hidden:
+            continue
+        if vis == Visibility.redacted:
+            _redact(person)
+        else:
+            await _attach_primary_name(session, person)
+        out.append(person)
+    return out

backend/app/services/privacy.py

@@ -8,14 +8,20 @@ tree's visibility, the per-person override, and (Phase 2) living-person status.
 
 import enum
 import uuid
+from datetime import UTC, datetime
 
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.enums import MembershipRole, PersonPrivacy, TreeVisibility
+from app.models.event import Event
 from app.models.person import Person
 from app.models.tree import Tree, TreeMembership
 
+# A person with no death fact whose birth is within this window (or unknown) is
+# treated as possibly living and redacted from non-members (ARCHITECTURE §6).
+LIVING_RECENCY_YEARS = 100
+
 
 class Visibility(enum.StrEnum):
     full = "full"
@@ -48,15 +54,56 @@ async def can_edit_tree(session: AsyncSession, *, user_id: uuid.UUID | None, tre
     return role in (MembershipRole.owner, MembershipRole.editor)
 
 
+async def is_possibly_living(session: AsyncSession, person: Person) -> bool:
+    """True if the person should be treated as living: explicit flag, or (absent
+    a death fact) a birth within the recency window or an unknown birth."""
+    if person.is_living is True:
+        return True
+    if person.is_living is False:
+        return False
+    death = (
+        await session.execute(
+            select(Event.id)
+            .where(
+                Event.person_id == person.id,
+                Event.event_type == "death",
+                Event.deleted_at.is_(None),
+            )
+            .limit(1)
+        )
+    ).scalar_one_or_none()
+    if death is not None:
+        return False
+    birth = (
+        await session.execute(
+            select(Event.date_start)
+            .where(
+                Event.person_id == person.id,
+                Event.event_type == "birth",
+                Event.date_start.is_not(None),
+                Event.deleted_at.is_(None),
+            )
+            .order_by(Event.date_start)
+            .limit(1)
+        )
+    ).scalar_one_or_none()
+    if birth is None:
+        return True  # unknown birth → treat as possibly living
+    return (datetime.now(UTC).year - birth.year) < LIVING_RECENCY_YEARS
+
+
 async def person_visibility(
     session: AsyncSession, *, user_id: uuid.UUID | None, tree: Tree, person: Person
 ) -> Visibility:
     if not await can_view_tree(session, user_id=user_id, tree=tree):
         return Visibility.hidden
     if await get_membership_role(session, user_id, tree.id) is not None:
-        return Visibility.full
+        return Visibility.full  # members see everyone in their tree
     # Non-member viewing a public/unlisted tree:
     if person.privacy == PersonPrivacy.private:
         return Visibility.hidden
-    # TODO(Phase 2): redact living people for non-members (ARCHITECTURE §6).
+    if person.privacy == PersonPrivacy.public:
+        return Visibility.full  # explicit per-person opt-in
+    if await is_possibly_living(session, person):
+        return Visibility.redacted  # living people are protected by default
     return Visibility.full

backend/migrations/versions/9a2b1c7d4e10_pg_trgm_name_search.py

@@ -0,0 +1,33 @@
+"""pg_trgm extension + trigram name indexes for fuzzy search
+
+Revision ID: 9a2b1c7d4e10
+Revises: 7fc7024ef432
+Create Date: 2026-06-07
+
+"""
+from collections.abc import Sequence
+
+from alembic import op
+
+revision: str = "9a2b1c7d4e10"
+down_revision: str | None = "7fc7024ef432"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    op.execute("CREATE EXTENSION IF NOT EXISTS pg_trgm")
+    op.execute(
+        "CREATE INDEX IF NOT EXISTS ix_names_given_trgm "
+        "ON names USING gin (given gin_trgm_ops)"
+    )
+    op.execute(
+        "CREATE INDEX IF NOT EXISTS ix_names_surname_trgm "
+        "ON names USING gin (surname gin_trgm_ops)"
+    )
+
+
+def downgrade() -> None:
+    op.execute("DROP INDEX IF EXISTS ix_names_surname_trgm")
+    op.execute("DROP INDEX IF EXISTS ix_names_given_trgm")
+    # Leave the pg_trgm extension in place; other features may rely on it.

backend/tests/conftest.py

@@ -11,6 +11,7 @@ import os
 import pytest
 import pytest_asyncio
 from httpx import ASGITransport, AsyncClient
+from sqlalchemy import text
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 
 import app.models  # noqa: F401 — register all models on Base.metadata
@@ -72,6 +73,7 @@ async def client():
 
     engine = create_async_engine(TEST_DATABASE_URL)
     async with engine.begin() as conn:
+        await conn.execute(text("CREATE EXTENSION IF NOT EXISTS pg_trgm"))
         await conn.run_sync(Base.metadata.drop_all)
         await conn.run_sync(Base.metadata.create_all)
 

backend/tests/test_privacy_living.py

@@ -0,0 +1,36 @@
+"""Living-person protection: living people are redacted from non-members."""
+
+from tests.conftest import auth, register
+
+
+async def test_living_person_redacted_for_non_members(client):
+    owner = auth(await register(client, "pub-owner@example.com"))
+    tid = (
+        await client.post(
+            "/api/v1/trees", json={"name": "Public", "visibility": "public"}, headers=owner
+        )
+    ).json()["id"]
+    await client.post(
+        f"/api/v1/trees/{tid}/persons",
+        json={"given": "Old", "surname": "Ancestor", "is_living": False},
+        headers=owner,
+    )
+    await client.post(
+        f"/api/v1/trees/{tid}/persons",
+        json={"given": "Young", "surname": "Living", "is_living": True},
+        headers=owner,
+    )
+
+    other = auth(await register(client, "pub-viewer@example.com"))
+    people = (await client.get(f"/api/v1/trees/{tid}/persons", headers=other)).json()
+    names = {p["primary_name"] for p in people}
+    assert "Old Ancestor" in names  # deceased is visible
+    assert "Living person" in names  # living is redacted
+    assert "Young Living" not in names  # the real living name is hidden
+    # The redacted person leaks no gender.
+    living = next(p for p in people if p["primary_name"] == "Living person")
+    assert living["gender"] is None
+
+    # The owner (a member) sees real names.
+    owner_people = (await client.get(f"/api/v1/trees/{tid}/persons", headers=owner)).json()
+    assert "Young Living" in {p["primary_name"] for p in owner_people}

backend/tests/test_search.py

@@ -0,0 +1,24 @@
+"""Fuzzy name search (pg_trgm)."""
+
+from tests.conftest import auth, register
+
+
+async def test_fuzzy_name_search(client):
+    h = auth(await register(client, "search@example.com"))
+    tid = (await client.post("/api/v1/trees", json={"name": "S"}, headers=h)).json()["id"]
+    for given, surname in [("Hans", "Mueller"), ("John", "Smith"), ("Anna", "Vogel")]:
+        await client.post(
+            f"/api/v1/trees/{tid}/persons",
+            json={"given": given, "surname": surname},
+            headers=h,
+        )
+
+    # Trigram fuzziness: "muller" should find "Mueller" (not a substring match).
+    r = await client.get(f"/api/v1/trees/{tid}/persons", params={"q": "muller"}, headers=h)
+    assert r.status_code == 200
+    names = [p["primary_name"] or "" for p in r.json()]
+    assert any("Mueller" in n for n in names)
+
+    # Substring search still works.
+    r2 = await client.get(f"/api/v1/trees/{tid}/persons", params={"q": "smi"}, headers=h)
+    assert any("Smith" in (p["primary_name"] or "") for p in r2.json())

frontend/app/trees/[id]/page.tsx

@@ -34,6 +34,7 @@ export default function FamilyViewPage() {
   const [ready, setReady] = useState(false);
   const [focusId, setFocusId] = useState<string | null>(null);
   const [search, setSearch] = useState("");
+  const [results, setResults] = useState<Person[] | null>(null); // server fuzzy search
   const [firstName, setFirstName] = useState("");
   // Inline add-relative form: which anchor + kind is open, and the typed name.
   // `key` keeps each empty slot's inline form independent (a person has 2
@@ -65,6 +66,22 @@ export default function FamilyViewPage() {
     load();
   }, [load]);
 
+  // Debounced server-side fuzzy search (pg_trgm) across the whole tree.
+  useEffect(() => {
+    const q = search.trim();
+    if (!q) {
+      setResults(null);
+      return;
+    }
+    const t = setTimeout(async () => {
+      const { data } = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId }, query: { q } },
+      });
+      setResults(data ?? []);
+    }, 250);
+    return () => clearTimeout(t);
+  }, [search, treeId]);
+
   const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
   const parentsOf = (id: string) =>
     rels.filter((r) => r.type === "parent_child" && r.person_to_id === id).map((r) => r.person_from_id);
@@ -265,10 +282,9 @@ export default function FamilyViewPage() {
   const sorted = [...people].sort((a, b) =>
     (a.primary_name ?? "").localeCompare(b.primary_name ?? ""),
   );
-  const matches = search
-    ? sorted.filter((p) => (p.primary_name ?? "").toLowerCase().includes(search.toLowerCase()))
-    : sorted;
-  const shown = matches.slice(0, 200); // cap DOM nodes; refine search to narrow
+  // Server fuzzy results when searching; otherwise the loaded set.
+  const directory = results ?? sorted;
+  const shown = directory.slice(0, 200); // cap DOM nodes; refine search to narrow
 
   return (
     <div className="space-y-8">
@@ -358,9 +374,9 @@ export default function FamilyViewPage() {
               ))
             )}
           </div>
-          {matches.length > shown.length && (
+          {directory.length > shown.length && (
             <div className="border-t border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs text-[var(--muted)]">
-              Showing {shown.length} of {matches.length} — refine your search to narrow.
+              Showing {shown.length} of {directory.length} — refine your search to narrow.
             </div>
           )}
         </Card>

frontend/app/trees/[id]/tree/page.tsx

@@ -3,14 +3,19 @@
 // Vendored from family-chart/dist/styles (the package blocks the CSS subpath export).
 import "./chart.css";
 
+import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { api } from "@/lib/api/client";
 import type { components } from "@/lib/api/schema";
+import { Button } from "@/components/ui/button";
+import { FanChart } from "@/components/fan-chart";
 
+type Person = components["schemas"]["PersonRead"];
 type Relationship = components["schemas"]["RelationshipRead"];
 type Event = components["schemas"]["EventRead"];
+type Mode = "landscape" | "portrait" | "fan";
 
 function splitName(name: string | null | undefined): [string, string] {
   const t = (name ?? "").trim().split(/\s+/).filter(Boolean);
@@ -23,11 +28,16 @@ export default function TreePage() {
   const params = useParams<{ id: string }>();
   const treeId = params.id;
   const containerRef = useRef<HTMLDivElement>(null);
+
+  const [people, setPeople] = useState<Person[]>([]);
+  const [rels, setRels] = useState<Relationship[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
   const [status, setStatus] = useState<"loading" | "empty" | "ready" | "error">("loading");
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>("landscape");
 
   useEffect(() => {
     let cancelled = false;
-
     (async () => {
       const p = await api.GET("/api/v1/trees/{tree_id}/persons", {
         params: { path: { tree_id: treeId } },
@@ -40,31 +50,56 @@ export default function TreePage() {
         api.GET("/api/v1/trees/{tree_id}/relationships", { params: { path: { tree_id: treeId } } }),
         api.GET("/api/v1/trees/{tree_id}/events", { params: { path: { tree_id: treeId } } }),
       ]);
-      const people = p.data ?? [];
-      const rels: Relationship[] = r.data ?? [];
-      const events: Event[] = e.data ?? [];
-      if (people.length === 0) {
-        if (!cancelled) setStatus("empty");
-        return;
-      }
+      if (cancelled) return;
+      const ppl = p.data ?? [];
+      setPeople(ppl);
+      setRels(r.data ?? []);
+      setEvents(e.data ?? []);
+      setFocusId((cur) => cur ?? ppl[0]?.id ?? null);
+      setStatus(ppl.length ? "ready" : "empty");
+    })().catch(() => !cancelled && setStatus("error"));
+    return () => {
+      cancelled = true;
+    };
+  }, [router, treeId]);
 
-      const parentsOf = (id: string) =>
-        rels.filter((x) => x.type === "parent_child" && x.person_to_id === id).map((x) => x.person_from_id);
-      const childrenOf = (id: string) =>
-        rels.filter((x) => x.type === "parent_child" && x.person_from_id === id).map((x) => x.person_to_id);
-      const partnersOf = (id: string) =>
+  const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
+  const parentsOf = useCallback(
+    (id: string) =>
+      rels.filter((x) => x.type === "parent_child" && x.person_to_id === id).map((x) => x.person_from_id),
+    [rels],
+  );
+  const childrenOf = useCallback(
+    (id: string) =>
+      rels.filter((x) => x.type === "parent_child" && x.person_from_id === id).map((x) => x.person_to_id),
+    [rels],
+  );
+  const partnersOf = useCallback(
+    (id: string) =>
       rels
         .filter((x) => x.type === "partnership" && (x.person_from_id === id || x.person_to_id === id))
-          .map((x) => (x.person_from_id === id ? x.person_to_id : x.person_from_id));
-
-      const birthYear = new Map<string, string>();
+        .map((x) => (x.person_from_id === id ? x.person_to_id : x.person_from_id)),
+    [rels],
+  );
+  const years = useMemo(() => {
+    const m = new Map<string, string>();
     for (const ev of events) {
-        if (ev.person_id && ev.event_type === "birth" && !birthYear.has(ev.person_id)) {
+      if (ev.person_id && ev.event_type === "birth" && !m.has(ev.person_id)) {
         const y = ev.date_start ? ev.date_start.slice(0, 4) : ev.date_value ?? "";
-          if (y) birthYear.set(ev.person_id, y);
+        if (y) m.set(ev.person_id, y);
       }
     }
+    return m;
+  }, [events]);
+  const nameOf = useCallback((id: string) => byId.get(id)?.primary_name ?? "Unknown", [byId]);
+  const yearOf = useCallback((id: string) => years.get(id) ?? "", [years]);
 
+  // family-chart for landscape/portrait. Intentionally not keyed on focusId —
+  // card clicks recenter via updateMainId without rebuilding the chart.
+  useEffect(() => {
+    if (status !== "ready" || mode === "fan" || !containerRef.current) return;
+    let cancelled = false;
+    (async () => {
       const data = people.map((pp) => {
         const [fn, ln] = splitName(pp.primary_name);
         return {
@@ -72,56 +107,98 @@ export default function TreePage() {
           data: {
             "first name": fn || "Unnamed",
             "last name": ln,
-            birthday: birthYear.get(pp.id) ?? "",
+            birthday: years.get(pp.id) ?? "",
             gender: pp.gender === "female" ? "F" : "M",
           },
-          rels: {
-            spouses: partnersOf(pp.id),
-            parents: parentsOf(pp.id),
-            children: childrenOf(pp.id),
-          },
+          rels: { spouses: partnersOf(pp.id), parents: parentsOf(pp.id), children: childrenOf(pp.id) },
         };
       });
-
-      if (cancelled || !containerRef.current) return;
-      try {
       const f3 = await import("family-chart");
+      if (cancelled || !containerRef.current) return;
       containerRef.current.innerHTML = "";
       const chart = f3.createChart(containerRef.current, data);
-        chart.setCardHtml().setCardDisplay([["first name", "last name"], ["birthday"]]);
-        chart.updateTree({ initial: true });
-        if (!cancelled) setStatus("ready");
-      } catch {
-        if (!cancelled) setStatus("error");
+      chart
+        .setCardHtml()
+        .setCardDisplay([["first name", "last name"], ["birthday"]])
+        .setOnCardClick((_e: unknown, d: { data?: { id?: string } }) => {
+          const id = d?.data?.id;
+          if (id) {
+            setFocusId(id);
+            chart.updateMainId(id);
+            chart.updateTree();
           }
-    })().catch(() => {
-      if (!cancelled) setStatus("error");
         });
-
+      if (mode === "portrait") chart.setOrientationVertical();
+      else chart.setOrientationHorizontal();
+      if (focusId) chart.updateMainId(focusId);
+      chart.updateTree({ initial: true });
+    })();
     return () => {
       cancelled = true;
     };
-  }, [router, treeId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, mode, people, rels, events]);
+
+  const ModeButton = ({ m, label }: { m: Mode; label: string }) => (
+    <button
+      onClick={() => setMode(m)}
+      className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
+        mode === m ? "bg-bronze text-paper" : "text-[var(--muted)] hover:text-[var(--foreground)]"
+      }`}
+    >
+      {label}
+    </button>
+  );
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-3">
         <h1 className="text-2xl font-semibold">Tree</h1>
-        <span className="text-sm text-[var(--muted)]">
-          Drag to pan · scroll to zoom · click a person to recenter
-        </span>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center rounded-lg border border-[var(--border)] p-0.5">
+            <ModeButton m="landscape" label="Landscape" />
+            <ModeButton m="portrait" label="Portrait" />
+            <ModeButton m="fan" label="Fan" />
           </div>
+          {focusId && (
+            <Link
+              href={`/trees/${treeId}/persons/${focusId}`}
+              className="text-sm text-bronze hover:underline"
+            >
+              Open {nameOf(focusId)} →
+            </Link>
+          )}
+        </div>
+      </div>
+
       {status === "empty" && (
-        <p className="text-[var(--muted)]">
-          No people yet — add some under People, or import a GEDCOM.
-        </p>
+        <p className="text-[var(--muted)]">No people yet — add some under People, or import a GEDCOM.</p>
       )}
       {status === "error" && <p className="text-[var(--muted)]">Could not render the tree.</p>}
+
+      {status === "ready" && mode === "fan" && focusId ? (
+        <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4">
+          <FanChart
+            focusId={focusId}
+            parentsOf={parentsOf}
+            nameOf={nameOf}
+            yearOf={yearOf}
+            onSelect={setFocusId}
+          />
+        </div>
+      ) : (
         <div
           ref={containerRef}
           className="f3 rounded-xl border border-[var(--border)]"
           style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
         />
+      )}
+
+      <p className="text-sm text-[var(--muted)]">
+        {mode === "fan"
+          ? "Click an ancestor to recenter the fan."
+          : "Drag to pan · scroll to zoom · click a person to recenter."}
+      </p>
     </div>
   );
 }

frontend/components/fan-chart.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+// Radial fan chart of a focus person's ancestors (family-chart has no fan).
+// Each generation is a ring; slot p in generation g descends from slot floor(p/2)
+// in g-1. Click a wedge to refocus.
+
+type Props = {
+  focusId: string;
+  parentsOf: (id: string) => string[];
+  nameOf: (id: string) => string;
+  yearOf: (id: string) => string;
+  onSelect: (id: string) => void;
+  generations?: number;
+};
+
+const SIZE = 720;
+const CENTER = SIZE / 2;
+const FOCUS_R = 46;
+const SPAN = Math.PI * 1.6; // 288° fan
+
+function polar(r: number, a: number): [number, number] {
+  // a = 0 points up, increasing clockwise.
+  return [CENTER + r * Math.sin(a), CENTER - r * Math.cos(a)];
+}
+
+function sector(r0: number, r1: number, a0: number, a1: number): string {
+  const [x0, y0] = polar(r1, a0);
+  const [x1, y1] = polar(r1, a1);
+  const [x2, y2] = polar(r0, a1);
+  const [x3, y3] = polar(r0, a0);
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  return `M${x0} ${y0} A${r1} ${r1} 0 ${large} 1 ${x1} ${y1} L${x2} ${y2} A${r0} ${r0} 0 ${large} 0 ${x3} ${y3} Z`;
+}
+
+function clip(s: string, n: number): string {
+  return s.length > n ? s.slice(0, n - 1) + "…" : s;
+}
+
+export function FanChart({
+  focusId,
+  parentsOf,
+  nameOf,
+  yearOf,
+  onSelect,
+  generations = 4,
+}: Props) {
+  const gens: (string | null)[][] = [[focusId]];
+  for (let g = 1; g <= generations; g++) {
+    const row: (string | null)[] = [];
+    for (const slot of gens[g - 1]) {
+      const ps = slot ? parentsOf(slot) : [];
+      row.push(ps[0] ?? null, ps[1] ?? null);
+    }
+    gens.push(row);
+  }
+
+  const ringT = (CENTER - 60 - FOCUS_R) / generations;
+  const start = -SPAN / 2;
+  const wedges: React.ReactNode[] = [];
+
+  for (let g = 1; g <= generations; g++) {
+    const row = gens[g];
+    const w = SPAN / row.length;
+    const r0 = FOCUS_R + (g - 1) * ringT;
+    const r1 = FOCUS_R + g * ringT;
+    row.forEach((id, i) => {
+      const a0 = start + i * w;
+      const a1 = start + (i + 1) * w;
+      const mid = (a0 + a1) / 2;
+      const [tx, ty] = polar((r0 + r1) / 2, mid);
+      let deg = (mid * 180) / Math.PI;
+      if (deg > 90 || deg < -90) deg += 180; // keep text upright
+      wedges.push(
+        <g
+          key={`${g}-${i}`}
+          onClick={() => id && onSelect(id)}
+          style={{ cursor: id ? "pointer" : "default" }}
+        >
+          <path
+            d={sector(r0 + 1, r1 - 1, a0 + 0.004, a1 - 0.004)}
+            fill={id ? "var(--surface)" : "transparent"}
+            stroke="var(--border)"
+          />
+          {id && (
+            <text
+              x={tx}
+              y={ty}
+              transform={`rotate(${deg} ${tx} ${ty})`}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              style={{ fontSize: g >= 3 ? 9 : 11, fill: "var(--foreground)" }}
+            >
+              {clip(nameOf(id), g >= 3 ? 12 : 18)}
+            </text>
+          )}
+        </g>,
+      );
+    });
+  }
+
+  const [fx, fy] = [CENTER, CENTER];
+  return (
+    <div className="overflow-auto">
+      <svg viewBox={`0 0 ${SIZE} ${SIZE}`} className="mx-auto block w-full max-w-3xl">
+        {wedges}
+        <circle cx={fx} cy={fy} r={FOCUS_R} fill="var(--color-bronze)" />
+        <text
+          x={fx}
+          y={fy - 4}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 12, fill: "var(--color-paper)", fontWeight: 600 }}
+        >
+          {clip(nameOf(focusId), 12)}
+        </text>
+        <text
+          x={fx}
+          y={fy + 12}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 10, fill: "var(--color-paper)" }}
+        >
+          {yearOf(focusId)}
+        </text>
+      </svg>
+    </div>
+  );
+}

frontend/lib/api/schema.d.ts

@@ -1412,6 +1412,7 @@ export interface operations {
         parameters: {
             query?: {
                 deleted?: boolean;
+                q?: string | null;
             };
             header?: never;
             path: {

frontend/openapi.json

@@ -564,6 +564,22 @@
               "default": false,
               "title": "Deleted"
             }
+          },
+          {
+            "name": "q",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "type": "null"
+                }
+              ],
+              "title": "Q"
+            }
           }
         ],
         "responses": {