feat(members): add full member bio, contact info, and service history

Lazy-enriches member profiles on first view via Congress.gov detail API.
Adds office address, phone, official website, congress.gov link, birth
year, terms history, leadership roles, and sponsored/cosponsored counts.
Includes DB migration 0007 for new member columns.

Co-Authored-By: Jack Levy

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

@@ -2,12 +2,28 @@
 
 import { use } from "react";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import Image from "next/image";
+import {
+  ArrowLeft,
+  ExternalLink,
+  MapPin,
+  Phone,
+  Globe,
+  Star,
+  FileText,
+  Users,
+} from "lucide-react";
 import { useMember, useMemberBills } from "@/lib/hooks/useMembers";
 import { FollowButton } from "@/components/shared/FollowButton";
 import { BillCard } from "@/components/shared/BillCard";
 import { cn, partyBadgeColor } from "@/lib/utils";
 
+function ordinal(n: number) {
+  const s = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return n + (s[(v - 20) % 10] || s[v] || s[0]);
+}
+
 export default function MemberDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
   const { data: member, isLoading } = useMember(id);
@@ -16,39 +32,193 @@ export default function MemberDetailPage({ params }: { params: Promise<{ id: str
   if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading...</div>;
   if (!member) return <div className="text-center py-20 text-muted-foreground">Member not found.</div>;
 
+  const currentLeadership = member.leadership_json?.filter((l) => l.current);
+  const termsSorted = [...(member.terms_json || [])].reverse();
+
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between">
-        <div className="flex items-start gap-4">
-          <Link href="/members" className="mt-1 text-muted-foreground hover:text-foreground">
-            <ArrowLeft className="w-4 h-4" />
-          </Link>
-          <div>
-            <h1 className="text-2xl font-bold">{member.name}</h1>
-            <div className="flex items-center gap-2 mt-1">
-              {member.party && (
-                <span className={cn("px-2 py-0.5 rounded text-xs font-medium", partyBadgeColor(member.party))}>
-                  {member.party}
-                </span>
+      {/* Back */}
+      <Link href="/members" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
+        <ArrowLeft className="w-4 h-4" />
+        Members
+      </Link>
+
+      {/* Bio header */}
+      <div className="bg-card border border-border rounded-lg p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-5">
+            {member.photo_url ? (
+              <Image
+                src={member.photo_url}
+                alt={member.name}
+                width={96}
+                height={96}
+                className="rounded-lg object-cover shrink-0 border border-border"
+              />
+            ) : (
+              <div className="w-24 h-24 rounded-lg bg-muted flex items-center justify-center shrink-0 border border-border">
+                <Users className="w-8 h-8 text-muted-foreground" />
+              </div>
+            )}
+            <div className="space-y-2">
+              <div>
+                <h1 className="text-2xl font-bold">{member.name}</h1>
+                <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+                  {member.party && (
+                    <span className={cn("px-2 py-0.5 rounded text-xs font-medium", partyBadgeColor(member.party))}>
+                      {member.party}
+                    </span>
+                  )}
+                  {member.chamber && <span className="text-sm text-muted-foreground">{member.chamber}</span>}
+                  {member.state && <span className="text-sm text-muted-foreground">{member.state}</span>}
+                  {member.district && <span className="text-sm text-muted-foreground">District {member.district}</span>}
+                  {member.birth_year && (
+                    <span className="text-sm text-muted-foreground">b. {member.birth_year}</span>
+                  )}
+                </div>
+              </div>
+
+              {/* Leadership */}
+              {currentLeadership && currentLeadership.length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  {currentLeadership.map((l, i) => (
+                    <span key={i} className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 bg-primary/10 text-primary rounded-full">
+                      <Star className="w-3 h-3" />
+                      {l.type}
+                    </span>
+                  ))}
+                </div>
               )}
-              {member.state && <span className="text-sm text-muted-foreground">{member.state}</span>}
-              {member.chamber && <span className="text-sm text-muted-foreground">{member.chamber}</span>}
-              {member.district && <span className="text-sm text-muted-foreground">District {member.district}</span>}
+
+              {/* Contact */}
+              <div className="flex flex-col gap-1.5 text-sm text-muted-foreground">
+                {member.address && (
+                  <div className="flex items-start gap-1.5">
+                    <MapPin className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                    <span>{member.address}</span>
+                  </div>
+                )}
+                {member.phone && (
+                  <div className="flex items-center gap-1.5">
+                    <Phone className="w-3.5 h-3.5 shrink-0" />
+                    <a href={`tel:${member.phone}`} className="hover:text-foreground transition-colors">
+                      {member.phone}
+                    </a>
+                  </div>
+                )}
+                {member.official_url && (
+                  <div className="flex items-center gap-1.5">
+                    <Globe className="w-3.5 h-3.5 shrink-0" />
+                    <a href={member.official_url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors truncate max-w-xs">
+                      {member.official_url.replace(/^https?:\/\//, "")}
+                      <ExternalLink className="w-3 h-3 inline ml-1" />
+                    </a>
+                  </div>
+                )}
+                {member.congress_url && (
+                  <div className="flex items-center gap-1.5">
+                    <ExternalLink className="w-3.5 h-3.5 shrink-0" />
+                    <a href={member.congress_url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                      congress.gov profile
+                      <ExternalLink className="w-3 h-3 inline ml-1" />
+                    </a>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
+
+          <FollowButton type="member" value={member.bioguide_id} />
         </div>
-        <FollowButton type="member" value={member.bioguide_id} />
       </div>
 
-      <div>
-        <h2 className="font-semibold mb-4">Sponsored Bills ({billsData?.total ?? 0})</h2>
-        {!billsData?.items?.length ? (
-          <p className="text-sm text-muted-foreground">No bills found.</p>
-        ) : (
-          <div className="space-y-3">
-            {billsData.items.map((bill) => <BillCard key={bill.bill_id} bill={bill} />)}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Left column */}
+        <div className="md:col-span-2 space-y-6">
+          {/* Sponsored bills */}
+          <div>
+            <h2 className="font-semibold mb-4 flex items-center gap-2">
+              <FileText className="w-4 h-4" />
+              Sponsored Bills
+              {billsData?.total != null && (
+                <span className="text-xs text-muted-foreground font-normal">({billsData.total})</span>
+              )}
+            </h2>
+            {!billsData?.items?.length ? (
+              <p className="text-sm text-muted-foreground">No bills found.</p>
+            ) : (
+              <div className="space-y-3">
+                {billsData.items.map((bill) => <BillCard key={bill.bill_id} bill={bill} />)}
+              </div>
+            )}
           </div>
-        )}
+        </div>
+
+        {/* Right column */}
+        <div className="space-y-4">
+          {/* Legislation stats */}
+          {(member.sponsored_count != null || member.cosponsored_count != null) && (
+            <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-semibold">Legislation</h3>
+              <div className="space-y-2">
+                {member.sponsored_count != null && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Sponsored</span>
+                    <span className="font-medium">{member.sponsored_count.toLocaleString()}</span>
+                  </div>
+                )}
+                {member.cosponsored_count != null && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Cosponsored</span>
+                    <span className="font-medium">{member.cosponsored_count.toLocaleString()}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Service history */}
+          {termsSorted.length > 0 && (
+            <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-semibold">Service History</h3>
+              <div className="space-y-2">
+                {termsSorted.map((term, i) => (
+                  <div key={i} className="text-sm border-l-2 border-border pl-3">
+                    <div className="font-medium">
+                      {term.congress ? `${ordinal(term.congress)} Congress` : ""}
+                      {term.startYear && term.endYear
+                        ? ` (${term.startYear}–${term.endYear})`
+                        : term.startYear
+                        ? ` (${term.startYear}–present)`
+                        : ""}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {[term.chamber, term.partyName, term.stateName].filter(Boolean).join(" · ")}
+                      {term.district ? ` · District ${term.district}` : ""}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* All leadership roles */}
+          {member.leadership_json && member.leadership_json.length > 0 && (
+            <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-semibold">Leadership Roles</h3>
+              <div className="space-y-2">
+                {member.leadership_json.map((l, i) => (
+                  <div key={i} className="flex items-start justify-between gap-2 text-sm">
+                    <span className={l.current ? "font-medium" : "text-muted-foreground"}>{l.type}</span>
+                    <span className="text-xs text-muted-foreground shrink-0">
+                      {l.congress ? `${ordinal(l.congress)}` : ""}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

frontend/lib/types.ts

@@ -1,3 +1,20 @@
+export interface MemberTerm {
+  congress?: number;
+  chamber?: string;
+  partyName?: string;
+  stateCode?: string;
+  stateName?: string;
+  startYear?: number;
+  endYear?: number;
+  district?: number;
+}
+
+export interface MemberLeadership {
+  type?: string;
+  congress?: number;
+  current?: boolean;
+}
+
 export interface Member {
   bioguide_id: string;
   name: string;
@@ -8,6 +25,15 @@ export interface Member {
   chamber?: string;
   district?: string;
   photo_url?: string;
+  official_url?: string;
+  congress_url?: string;
+  birth_year?: string;
+  address?: string;
+  phone?: string;
+  terms_json?: MemberTerm[];
+  leadership_json?: MemberLeadership[];
+  sponsored_count?: number;
+  cosponsored_count?: number;
 }
 
 export interface CitedPoint {