feat: Add Trusted Circle management UI in settings

backend/routes/trusted_circle.py

@@ -92,3 +92,36 @@ async def invite_trusted_member(
             )
             
     return {"success": True, "message": "Invitation sent successfully."}
+
+@router.get("/trusted-circle")
+async def get_trusted_members(
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    members = db.query(TrustedMember).filter(
+        TrustedMember.user_id == current_user.id,
+        TrustedMember.is_active == True
+    ).order_by(TrustedMember.joined_at.desc()).all()
+    
+    return [{"id": m.id, "email": m.email, "joined_at": m.joined_at.isoformat()} for m in members]
+
+@router.delete("/trusted-circle/{member_id}")
+async def remove_trusted_member(
+    member_id: int,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    member = db.query(TrustedMember).filter(
+        TrustedMember.id == member_id,
+        TrustedMember.user_id == current_user.id
+    ).first()
+    
+    if not member:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="Member not found."
+        )
+        
+    db.delete(member)
+    db.commit()
+    return {"success": True, "message": "Member removed."}

frontend/app/settings/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { useTheme } from "@/contexts/ThemeContext";
 import { useAuth } from "@/contexts/AuthContext";
-import { Moon, Sun, LogOut } from "lucide-react";
-import { useState } from "react";
+import { Moon, Sun, LogOut, Trash2 } from "lucide-react";
+import { useState, useEffect } from "react";
 import { api } from "@/lib/api";
 
 export default function SettingsPage() {
@@ -12,6 +12,22 @@ export default function SettingsPage() {
   const [isInviting, setIsInviting] = useState(false);
   const [inviteSuccess, setInviteSuccess] = useState(false);
   const [inviteError, setInviteError] = useState("");
+  const [trustedMembers, setTrustedMembers] = useState<{id: number, email: string}[]>([]);
+
+  const fetchMembers = async () => {
+    try {
+      const data = await api.getTrustedMembers();
+      setTrustedMembers(data);
+    } catch (e) {
+      console.error("Failed to load trusted members", e);
+    }
+  };
+
+  useEffect(() => {
+    if (user) {
+      fetchMembers();
+    }
+  }, [user]);
 
   const handleInvite = async () => {
     if (!trustedEmail) return;
@@ -21,6 +37,7 @@ export default function SettingsPage() {
       await api.inviteTrustedMember(trustedEmail);
       setInviteSuccess(true);
       setTrustedEmail("");
+      fetchMembers();
       setTimeout(() => setInviteSuccess(false), 3000);
     } catch (e: any) {
       setInviteError(e.message || "Failed to send invitation.");
@@ -29,6 +46,15 @@ export default function SettingsPage() {
     }
   };
 
+  const handleRemoveMember = async (id: number) => {
+    try {
+      await api.removeTrustedMember(id);
+      fetchMembers();
+    } catch (e) {
+      console.error("Failed to remove member", e);
+    }
+  };
+
   return (
     <div className="p-6 md:p-10 pt-20 md:pt-10 max-w-2xl mx-auto space-y-8 min-h-screen">
       <h1 className="text-3xl font-bold">Settings</h1>
@@ -124,6 +150,23 @@ export default function SettingsPage() {
             </button>
           </div>
           {inviteError && <p className="text-red-400 text-xs mt-2">{inviteError}</p>}
+          
+          {trustedMembers.length > 0 && (
+            <div className="mt-6 space-y-2">
+              <div className="text-xs uppercase tracking-widest text-white/30 font-semibold mb-3">Active Members</div>
+              {trustedMembers.map((member) => (
+                <div key={member.id} className="flex items-center justify-between bg-white/5 border border-white/10 rounded-lg p-3">
+                  <span className="text-sm text-white/80">{member.email}</span>
+                  <button 
+                    onClick={() => handleRemoveMember(member.id)}
+                    className="p-1.5 text-white/40 hover:text-red-400 hover:bg-red-400/10 rounded-md transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
         </section>
 
         {/* Crisis Resources */}

frontend/lib/api.ts

@@ -36,6 +36,15 @@ export async function apiPut<T>(path: string, body?: unknown): Promise<T> {
   return res.json();
 }
 
+export async function apiDelete<T>(path: string): Promise<T> {
+  const res = await fetch(`${API_URL}${path}`, {
+    method: "DELETE",
+    headers: { ...getAuthHeader() },
+  });
+  if (!res.ok) throw new Error(`API Error ${res.status}: ${await res.text()}`);
+  return res.json();
+}
+
 // ── Typed API functions ───────────────────────────────────────────────────────
 
 export interface VoiceEntry {
@@ -144,6 +153,12 @@ export const api = {
   inviteTrustedMember: (email: string) =>
     apiPost<{ success: boolean; message: string }>("/api/trusted-circle/invite", { email }),
 
+  getTrustedMembers: () =>
+    apiGet<{ id: number; email: string; joined_at: string }[]>("/api/trusted-circle"),
+
+  removeTrustedMember: (id: number) =>
+    apiDelete<{ success: boolean; message: string }>(`/api/trusted-circle/${id}`),
+
   broadcastWeeklyReport: () =>
     apiPost<{ success: boolean; sent_count: number; errors?: string[] }>("/api/weekly-report/broadcast", {}),