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/components/app-shell.tsx

@@ -2,6 +2,7 @@
 
 import { Menu } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 import { AppSidebar } from "@/components/app-sidebar";
@@ -12,6 +13,10 @@ import { AppSidebar } from "@/components/app-sidebar";
  */
 export function AppShell({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  // The tree visualization wants the whole canvas; everything else reads better
+  // in a centered, max-width column.
+  const fullWidth = /^\/trees\/[^/]+\/tree$/.test(pathname);
 
   return (
     <div className="flex min-h-screen">
@@ -49,7 +54,15 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           </div>
         )}
 
-        <div className="mx-auto w-full max-w-4xl px-6 py-10 md:px-10">{children}</div>
+        <div
+          className={
+            fullWidth
+              ? "w-full px-4 py-6 md:px-6"
+              : "mx-auto w-full max-w-4xl px-6 py-10 md:px-10"
+          }
+        >
+          {children}
+        </div>
       </div>
     </div>
   );

frontend/components/app-sidebar.tsx

@@ -8,11 +8,12 @@ import {
   Image as ImageIcon,
   LogOut,
   Network,
+  Settings,
   Users,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { api } from "@/lib/api/client";
 import { cn } from "@/lib/utils";
@@ -23,6 +24,9 @@ export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
   const segs = pathname.split("/").filter(Boolean); // ["trees", "<id>", ...]
   const treeId = segs[0] === "trees" && segs[1] ? segs[1] : null;
   const [treeName, setTreeName] = useState<string | null>(null);
+  const [me, setMe] = useState<{ display_name: string | null; email: string } | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!treeId) {
@@ -34,6 +38,18 @@ export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
       .then((r) => setTreeName(r.data?.name ?? null));
   }, [treeId]);
 
+  useEffect(() => {
+    api.GET("/api/v1/users/me").then((r) => setMe(r.data ?? null));
+  }, []);
+
+  useEffect(() => {
+    function onDoc(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
+    }
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+
   async function logout() {
     onNavigate?.();
     await api.POST("/api/v1/auth/logout");
@@ -120,13 +136,41 @@ export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
         </div>
       )}
 
-      <button
-        onClick={logout}
-        className="mt-auto flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-colors hover:bg-bronze/[0.07] hover:text-bronze"
-      >
-        <LogOut className="h-4 w-4 shrink-0" />
-        Sign out
-      </button>
+      <div ref={menuRef} className="relative mt-auto">
+        {menuOpen && (
+          <div className="absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
+            <Link
+              href="/settings"
+              onClick={() => {
+                setMenuOpen(false);
+                onNavigate?.();
+              }}
+              className="flex items-center gap-3 px-3 py-2 text-sm text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-[var(--foreground)]"
+            >
+              <Settings className="h-4 w-4 shrink-0" />
+              Settings
+            </Link>
+            <button
+              onClick={logout}
+              className="flex w-full items-center gap-3 px-3 py-2 text-sm text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-bronze"
+            >
+              <LogOut className="h-4 w-4 shrink-0" />
+              Sign out
+            </button>
+          </div>
+        )}
+        <button
+          onClick={() => setMenuOpen((o) => !o)}
+          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-[var(--foreground)] transition-colors hover:bg-bronze/[0.07]"
+        >
+          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-bronze/15 text-xs font-semibold uppercase text-bronze">
+            {(me?.display_name || me?.email || "?").slice(0, 1)}
+          </span>
+          <span className="min-w-0 flex-1 truncate">
+            {me?.display_name || me?.email || "Account"}
+          </span>
+        </button>
+      </div>
     </nav>
   );
 }