Account menu + Settings (change password); per-tree home person; full-width tree

- Sidebar bottom-left now shows the signed-in user; clicking opens a menu with
  Settings and Sign out. New /settings page: account info + change password
  (POST /auth/change-password, re-verifies current password). Export/restore/
  delete are stubbed there for the next pass.
- Per-tree default/home person: tree.home_person_id (migration) + TreeUpdate/
  Read; the tree and family views open focused on it; the person page gets a
  "Set as default" control and "Default person" badge. Cleared if that person
  is deleted. Complements the account-level "this is me" link.
- Tree visualization now fills the content area (AppShell drops the max-width
  column on the /tree route); other pages stay centered.
- Audit records are coerced JSON-safe (UUIDs/enums), so PATCHing UUID fields
  like home_person_id audits cleanly.

50 backend tests pass; migration up/down verified; frontend builds.

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

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

@@ -50,15 +50,18 @@ export default function FamilyViewPage() {
       router.push("/login");
       return;
     }
-    const [r, e] = await Promise.all([
+    const [r, e, t] = await Promise.all([
       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 } } }),
+      api.GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } }),
     ]);
     const ppl = p.data ?? [];
+    const home = t.data?.home_person_id ?? null;
+    const homeId = home && ppl.some((x) => x.id === home) ? home : null;
     setPeople(ppl);
     setRels(r.data ?? []);
     setEvents(e.data ?? []);
-    setFocusId((cur) => cur ?? ppl[0]?.id ?? null);
+    setFocusId((cur) => cur ?? homeId ?? ppl[0]?.id ?? null);
     setReady(true);
   }, [router, treeId]);
 

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

@@ -108,6 +108,7 @@ export default function PersonDetailPage() {
   const [people, setPeople] = useState<Person[]>([]);
   const [names, setNames] = useState<Name[]>([]);
   const [me, setMe] = useState<Me | null>(null);
+  const [tree, setTree] = useState<components["schemas"]["TreeRead"] | null>(null);
   const [events, setEvents] = useState<Event[]>([]);
   const [rels, setRels] = useState<Relationship[]>([]);
   const [sources, setSources] = useState<Source[]>([]);
@@ -168,12 +169,13 @@ export default function PersonDetailPage() {
       return;
     }
     setPerson(p.data ?? null);
-    const [all, nm, mine, ev, rl, src, cit] = await Promise.all([
+    const [all, nm, mine, tr, ev, rl, src, cit] = await Promise.all([
       api.GET("/api/v1/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
       api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/names", {
         params: { path: { tree_id: treeId, person_id: personId } },
       }),
       api.GET("/api/v1/users/me"),
+      api.GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } }),
       api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/events", {
         params: { path: { tree_id: treeId, person_id: personId } },
       }),
@@ -186,6 +188,7 @@ export default function PersonDetailPage() {
     setPeople(all.data ?? []);
     setNames(nm.data ?? []);
     setMe(mine.data ?? null);
+    setTree(tr.data ?? null);
     setEvents(ev.data ?? []);
     setRels(rl.data ?? []);
     setSources(src.data ?? []);
@@ -387,6 +390,14 @@ export default function PersonDetailPage() {
     load();
   }
 
+  async function setDefaultPerson(make: boolean) {
+    await api.PATCH("/api/v1/trees/{tree_id}", {
+      params: { path: { tree_id: treeId } },
+      body: { home_person_id: make ? personId : null },
+    });
+    load();
+  }
+
   function startEditPerson(current: Person) {
     const t = (current.primary_name ?? "").trim().split(/\s+/).filter(Boolean);
     setPGiven(t.length > 1 ? t.slice(0, -1).join(" ") : (t[0] ?? ""));
@@ -418,6 +429,7 @@ export default function PersonDetailPage() {
   if (!person) return <p className="text-[var(--muted)]">Not found.</p>;
 
   const isSelf = me?.self_person_id === personId;
+  const isDefault = tree?.home_person_id === personId;
 
   // Inline "cite" control: a badge with count, a toggle, and the picker form.
   function citeControl(key: string, target: Partial<CitationCreate>, cites: Citation[]) {
@@ -561,15 +573,20 @@ export default function PersonDetailPage() {
         </form>
       ) : (
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <h1 className="flex items-center gap-3 text-3xl font-semibold">
+          <h1 className="flex flex-wrap items-center gap-3 text-3xl font-semibold">
             {person.primary_name ?? "Unnamed person"}
             {isSelf && (
               <span className="rounded-full bg-bronze/15 px-2.5 py-1 text-xs font-medium text-bronze">
                 This is you
               </span>
             )}
+            {isDefault && (
+              <span className="rounded-full border border-bronze/40 px-2.5 py-1 text-xs font-medium text-bronze">
+                Default person
+              </span>
+            )}
           </h1>
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center gap-3">
             {citeControl("p", { person_id: personId }, personCites)}
             {isSelf ? (
               <Button variant="ghost" size="sm" onClick={() => setSelf(false)}>
@@ -580,6 +597,11 @@ export default function PersonDetailPage() {
                 This is me
               </Button>
             )}
+            {!isDefault && (
+              <Button variant="outline" size="sm" onClick={() => setDefaultPerson(true)}>
+                Set as default
+              </Button>
+            )}
             <Button variant="outline" size="sm" onClick={() => startEditPerson(person)}>
               Edit
             </Button>

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

@@ -50,16 +50,20 @@ export default function TreePage() {
         router.push("/login");
         return;
       }
-      const [r, e] = await Promise.all([
+      const [r, e, t] = await Promise.all([
         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 } } }),
+        api.GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } }),
       ]);
       if (cancelled) return;
       const ppl = p.data ?? [];
+      const home = t.data?.home_person_id ?? null;
+      const homeId = home && ppl.some((x) => x.id === home) ? home : null;
       setPeople(ppl);
       setRels(r.data ?? []);
       setEvents(e.data ?? []);
-      setFocusId((cur) => cur ?? ppl[0]?.id ?? null);
+      // Open on the tree's default/home person when set, else the first person.
+      setFocusId((cur) => cur ?? homeId ?? ppl[0]?.id ?? null);
       setStatus(ppl.length ? "ready" : "empty");
     })().catch(() => !cancelled && setStatus("error"));
     return () => {