Tree search + click-rebuild; searchable relationship picker; gender dropdown

- Tree page: add a "Find a person" search box that jumps the chart to a
  match and rebuilds the hourglass (parents/grandparents/partner/children)
  around them. Clicking any card recenters via family-chart's default
  behavior (setAncestryDepth 3 / setProgenyDepth 2), syncing focus through
  setAfterUpdate for the "Open profile" link.
- Person detail: replace the relationship "add" <select> with a
  type-to-filter PersonCombobox so long people lists are searchable.
- Person detail: gender is now a Male/Female dropdown, not free text.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -9,6 +9,7 @@ import type { components } from "@/lib/api/schema";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { PersonCombobox } from "@/components/person-combobox";
 
 type Person = components["schemas"]["PersonRead"];
 type Event = components["schemas"]["EventRead"];
@@ -431,7 +432,11 @@ export default function PersonDetailPage() {
           <div className="flex flex-wrap gap-2">
             <Input className="w-40" placeholder="Given name" value={pGiven} onChange={(e) => setPGiven(e.target.value)} />
             <Input className="w-40" placeholder="Surname" value={pSurname} onChange={(e) => setPSurname(e.target.value)} />
-            <Input className="w-32" placeholder="Gender" value={pGender} onChange={(e) => setPGender(e.target.value)} />
+            <select className={fieldCls} value={pGender} onChange={(e) => setPGender(e.target.value)}>
+              <option value="">Gender: —</option>
+              <option value="male">Male</option>
+              <option value="female">Female</option>
+            </select>
             <select className={fieldCls} value={pLiving} onChange={(e) => setPLiving(e.target.value)}>
               <option value="unknown">Status: unknown</option>
               <option value="living">Living</option>
@@ -672,14 +677,12 @@ export default function PersonDetailPage() {
                 <option value="partner">partner</option>
                 <option value="sibling">sibling</option>
               </select>
-              <select className={fieldCls} value={relOther} onChange={(e) => setRelOther(e.target.value)}>
-                <option value="">— person —</option>
-                {others.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.primary_name ?? "Unnamed"}
-                  </option>
-                ))}
-              </select>
+              <PersonCombobox
+                people={others}
+                value={relOther}
+                onChange={setRelOther}
+                placeholder="Search for a person…"
+              />
               {(relKind === "parent" || relKind === "child") && (
                 <select className={fieldCls} value={relQual} onChange={(e) => setRelQual(e.target.value as Qualifier)}>
                   {QUALIFIERS.map((q) => (

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

@@ -10,6 +10,7 @@ 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 { Input } from "@/components/ui/input";
 import { FanChart } from "@/components/fan-chart";
 
 type Person = components["schemas"]["PersonRead"];
@@ -28,6 +29,9 @@ export default function TreePage() {
   const params = useParams<{ id: string }>();
   const treeId = params.id;
   const containerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const chartRef = useRef<any>(null);
+  const [query, setQuery] = useState("");
 
   const [people, setPeople] = useState<Person[]>([]);
   const [rels, setRels] = useState<Relationship[]>([]);
@@ -117,19 +121,20 @@ export default function TreePage() {
       if (cancelled || !containerRef.current) return;
       containerRef.current.innerHTML = "";
       const chart = f3.createChart(containerRef.current, data);
-      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();
-          }
-        });
+      chart.setCardHtml().setCardDisplay([["first name", "last name"], ["birthday"]]);
       if (mode === "portrait") chart.setOrientationVertical();
       else chart.setOrientationHorizontal();
+      // Show enough generations that a recenter reveals grandparents + children.
+      chart.setAncestryDepth?.(3);
+      chart.setProgenyDepth?.(2);
+      // Default card click recenters the whole hourglass; sync focus for the
+      // "Open profile" link after every (re)build.
+      chart.setAfterUpdate?.(() => {
+        const md = chart.getMainDatum?.();
+        const id = md?.id ?? md?.data?.id;
+        if (id) setFocusId(id);
+      });
+      chartRef.current = chart;
       if (focusId) chart.updateMainId(focusId);
       chart.updateTree({ initial: true });
     })();
@@ -139,6 +144,27 @@ export default function TreePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status, mode, people, rels, events]);
 
+  // Jump the tree (or fan) to a person and rebuild the hourglass around them.
+  const goTo = useCallback(
+    (id: string) => {
+      setFocusId(id);
+      setQuery("");
+      if (mode !== "fan" && chartRef.current) {
+        chartRef.current.updateMainId?.(id);
+        chartRef.current.updateTree?.();
+      }
+    },
+    [mode],
+  );
+
+  const matches = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return [];
+    return people
+      .filter((p) => (p.primary_name ?? "").toLowerCase().includes(q))
+      .slice(0, 8);
+  }, [query, people]);
+
   const ModeButton = ({ m, label }: { m: Mode; label: string }) => (
     <button
       onClick={() => setMode(m)}
@@ -153,7 +179,34 @@ export default function TreePage() {
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h1 className="text-2xl font-semibold">Tree</h1>
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-semibold">Tree</h1>
+          <div className="relative">
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Find a person…"
+              className="w-56"
+            />
+            {matches.length > 0 && (
+              <ul className="absolute z-20 mt-1 w-72 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
+                {matches.map((p) => (
+                  <li key={p.id}>
+                    <button
+                      onClick={() => goTo(p.id)}
+                      className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))]"
+                    >
+                      <span>{p.primary_name ?? "Unnamed"}</span>
+                      {yearOf(p.id) && (
+                        <span className="text-xs text-[var(--muted)]">{yearOf(p.id)}</span>
+                      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
         <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" />