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

@@ -42,6 +42,8 @@ export default function TreePage() {
   const [events, setEvents] = useState<Event[]>([]);
   const [status, setStatus] = useState<"loading" | "empty" | "ready" | "error">("loading");
   const [focusId, setFocusId] = useState<string | null>(null);
+  // The tree's default/home person — lets us offer a "recenter on default" jump.
+  const [homeId, setHomeId] = useState<string | null>(null);
   const [mode, setMode] = useState<Mode>("landscape");
   const [renderNote, setRenderNote] = useState<string | null>(null);
 
@@ -67,6 +69,7 @@ export default function TreePage() {
       setPeople(ppl);
       setRels(r.data ?? []);
       setEvents(e.data ?? []);
+      setHomeId(homeId);
       // Honor an explicit ?focus first (came from a person page / a shared
       // link), then the tree's default/home person, then the first person.
       const fromUrl = initialFocus.current && ppl.some((x) => x.id === initialFocus.current)
@@ -288,6 +291,16 @@ export default function TreePage() {
               </ul>
             )}
           </div>
+          {homeId && focusId !== homeId && (
+            <button
+              onClick={() => goTo(homeId)}
+              className="text-sm text-bronze hover:underline"
+              title={`Recenter on the tree's default person (${nameOf(homeId)})`}
+            >
+              ↩ Back to default person
+              <span className="text-[var(--muted)]"> · {nameOf(homeId)}</span>
+            </button>
+          )}
         </div>
         <div className="flex items-center gap-3">
           <div className="flex items-center rounded-lg border border-[var(--border)] p-0.5">