feat: PocketVeto v1.0.0 — initial public release

Self-hosted US Congress monitoring platform with AI policy briefs,
bill/member/topic follows, ntfy + RSS + email notifications,
alignment scoring, collections, and draft-letter generator.

Authored by: Jack Levy

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

@@ -0,0 +1,271 @@
+"use client";
+
+import { use } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  ArrowLeft,
+  ExternalLink,
+  MapPin,
+  Phone,
+  Globe,
+  Star,
+  FileText,
+  Users,
+} from "lucide-react";
+import { useMember, useMemberBills, useMemberTrend, useMemberNews } from "@/lib/hooks/useMembers";
+import { TrendChart } from "@/components/bills/TrendChart";
+import { NewsPanel } from "@/components/bills/NewsPanel";
+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);
+  const { data: billsData } = useMemberBills(id);
+  const { data: trendData } = useMemberTrend(id, 30);
+  const { data: newsData } = useMemberNews(id);
+
+  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">
+      {/* 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>
+              )}
+
+              {/* 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>
+      </div>
+
+      <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">
+          {/* Public Interest */}
+          <TrendChart data={trendData ?? []} title="Public Interest" />
+
+          {/* News */}
+          <NewsPanel articles={newsData} />
+
+          {/* 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>
+          )}
+
+          {/* Effectiveness Score */}
+          {member.effectiveness_score != null && (
+            <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-semibold">Effectiveness Score</h3>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Score</span>
+                  <span className="font-medium">{member.effectiveness_score.toFixed(1)}</span>
+                </div>
+                {member.effectiveness_percentile != null && (
+                  <>
+                    <div className="h-1.5 bg-muted rounded overflow-hidden">
+                      <div
+                        className={`h-full rounded transition-all ${
+                          member.effectiveness_percentile >= 66
+                            ? "bg-emerald-500"
+                            : member.effectiveness_percentile >= 33
+                            ? "bg-amber-500"
+                            : "bg-red-500"
+                        }`}
+                        style={{ width: `${member.effectiveness_percentile}%` }}
+                      />
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      {Math.round(member.effectiveness_percentile)}th percentile
+                      {member.effectiveness_tier ? ` among ${member.effectiveness_tier} members` : ""}
+                    </p>
+                  </>
+                )}
+                <p className="text-xs text-muted-foreground leading-relaxed">
+                  Measures legislative output: how far sponsored bills travel, bipartisan support, substance, and committee leadership.
+                </p>
+              </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/app/members/page.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { MapPin, Search, Heart } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { useMembers, useMember } from "@/lib/hooks/useMembers";
+import { useFollows } from "@/lib/hooks/useFollows";
+import { useAuthStore } from "@/stores/authStore";
+import { FollowButton } from "@/components/shared/FollowButton";
+import { membersAPI } from "@/lib/api";
+import { cn, partyBadgeColor } from "@/lib/utils";
+import type { Member } from "@/lib/types";
+
+function MemberCard({ member }: { member: Member }) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-3">
+      <div className="flex items-start gap-3 flex-1 min-w-0">
+        {member.photo_url ? (
+          <img src={member.photo_url} alt={member.name} className="w-10 h-10 rounded-full object-cover shrink-0 border border-border" />
+        ) : (
+          <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-sm font-semibold text-muted-foreground shrink-0">
+            {member.name[0]}
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <Link href={`/members/${member.bioguide_id}`} className="font-medium text-sm hover:text-primary transition-colors">
+            {member.name}
+          </Link>
+          <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+            {member.party && (
+              <span className={cn("px-1.5 py-0.5 rounded text-xs font-medium", partyBadgeColor(member.party))}>
+                {member.party}
+              </span>
+            )}
+            {member.state && <span className="text-xs text-muted-foreground">{member.state}</span>}
+            {member.chamber && <span className="text-xs text-muted-foreground">{member.chamber}</span>}
+          </div>
+          {(member.phone || member.official_url) && (
+            <div className="flex items-center gap-2 mt-1">
+              {member.phone && (
+                <a href={`tel:${member.phone.replace(/\D/g, "")}`} className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                  {member.phone}
+                </a>
+              )}
+              {member.official_url && (
+                <a href={member.official_url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline">
+                  Contact
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <FollowButton type="member" value={member.bioguide_id} />
+    </div>
+  );
+}
+
+function FollowedMemberRow({ bioguideId }: { bioguideId: string }) {
+  const { data: member } = useMember(bioguideId);
+  if (!member) return null;
+  return <MemberCard member={member} />;
+}
+
+export default function MembersPage() {
+  const [q, setQ] = useState("");
+  const [chamber, setChamber] = useState("");
+  const [party, setParty] = useState("");
+  const [page, setPage] = useState(1);
+  const [zipInput, setZipInput] = useState("");
+  const [submittedZip, setSubmittedZip] = useState("");
+
+  const { data, isLoading } = useMembers({
+    ...(q && { q }), ...(chamber && { chamber }), ...(party && { party }),
+    page, per_page: 50,
+  });
+
+  const token = useAuthStore((s) => s.token);
+  const { data: follows } = useFollows();
+  const followedMemberIds = follows?.filter((f) => f.follow_type === "member").map((f) => f.follow_value) ?? [];
+
+  const isValidZip = /^\d{5}$/.test(submittedZip);
+  const { data: myReps, isFetching: repsFetching, error: repsError } = useQuery({
+    queryKey: ["members-by-zip", submittedZip],
+    queryFn: () => membersAPI.byZip(submittedZip),
+    enabled: isValidZip,
+    staleTime: 24 * 60 * 60 * 1000,
+    retry: false,
+  });
+
+  function handleZipSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmittedZip(zipInput.trim());
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Members</h1>
+        <p className="text-muted-foreground text-sm mt-1">Browse current Congress members</p>
+      </div>
+
+      {/* Zip lookup */}
+      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+        <p className="text-sm font-medium flex items-center gap-2">
+          <MapPin className="w-4 h-4 text-primary" />
+          Find your representatives
+        </p>
+        <form onSubmit={handleZipSubmit} className="flex gap-2">
+          <input
+            type="text"
+            value={zipInput}
+            onChange={(e) => setZipInput(e.target.value)}
+            placeholder="Enter ZIP code"
+            maxLength={5}
+            className="px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary w-40"
+          />
+          <button
+            type="submit"
+            disabled={!/^\d{5}$/.test(zipInput.trim())}
+            className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
+          >
+            Find
+          </button>
+        </form>
+
+        {repsFetching && (
+          <p className="text-sm text-muted-foreground">Looking up representatives…</p>
+        )}
+        {repsError && (
+          <p className="text-sm text-destructive">Could not look up representatives. Check your ZIP and try again.</p>
+        )}
+        {isValidZip && !repsFetching && myReps && myReps.length === 0 && (
+          <p className="text-sm text-muted-foreground">No representatives found for {submittedZip}.</p>
+        )}
+        {myReps && myReps.length > 0 && (
+          <div className="space-y-2 pt-1">
+            <p className="text-xs text-muted-foreground">Representatives for ZIP {submittedZip}</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {myReps.map((rep) => (
+                <MemberCard key={rep.bioguide_id} member={rep} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-3 flex-wrap">
+        <div className="relative flex-1 min-w-48">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search by name..."
+            value={q}
+            onChange={(e) => { setQ(e.target.value); setPage(1); }}
+            className="w-full pl-9 pr-3 py-2 text-sm bg-card border border-border rounded-md focus:outline-none"
+          />
+        </div>
+        <select value={chamber} onChange={(e) => { setChamber(e.target.value); setPage(1); }}
+          className="px-3 py-2 text-sm bg-card border border-border rounded-md">
+          <option value="">All Chambers</option>
+          <option value="House of Representatives">House</option>
+          <option value="Senate">Senate</option>
+        </select>
+        <select value={party} onChange={(e) => { setParty(e.target.value); setPage(1); }}
+          className="px-3 py-2 text-sm bg-card border border-border rounded-md">
+          <option value="">All Parties</option>
+          <option value="Democratic">Democratic</option>
+          <option value="Republican">Republican</option>
+          <option value="Independent">Independent</option>
+        </select>
+      </div>
+
+      {token && followedMemberIds.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="font-semibold text-sm flex items-center gap-2">
+            <Heart className="w-4 h-4 text-red-500 fill-red-500" />
+            Following ({followedMemberIds.length})
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {followedMemberIds.map((id) => (
+              <FollowedMemberRow key={id} bioguideId={id} />
+            ))}
+          </div>
+          <div className="border-t border-border pt-2" />
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="text-center py-20 text-muted-foreground">Loading members...</div>
+      ) : (
+        <>
+          <div className="text-sm text-muted-foreground">{data?.total ?? 0} members</div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {data?.items?.map((member) => (
+              <MemberCard key={member.bioguide_id} member={member} />
+            ))}
+          </div>
+          {data && data.pages > 1 && (
+            <div className="flex justify-center gap-2">
+              <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}
+                className="px-4 py-2 text-sm bg-card border border-border rounded-md disabled:opacity-40 hover:bg-accent">Previous</button>
+              <button onClick={() => setPage((p) => Math.min(data.pages, p + 1))} disabled={page === data.pages}
+                className="px-4 py-2 text-sm bg-card border border-border rounded-md disabled:opacity-40 hover:bg-accent">Next</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}