feat(notifications): follow modes, milestone alerts, notification enhancements

Follow Modes (neutral / pocket_veto / pocket_boost):
- Alembic migration 0013 adds follow_mode column to follows table
- FollowButton rewritten as mode-aware dropdown for bills; simple toggle for members/topics
- PATCH /api/follows/{id}/mode endpoint with validation
- Dispatcher filters pocket_veto follows (suppress new_document/new_amendment events)
- Dispatcher adds ntfy Actions header for pocket_boost follows

Change-driven (milestone) Alerts:
- New notification_utils.py with shared emit helpers and 30-min dedup
- congress_poller emits bill_updated events on milestone action text
- llm_processor replaced with shared emit util (also notifies member/topic followers)

Notification Enhancements:
- ntfy priority levels (high for bill_updated, default for others)
- Quiet hours (UTC): dispatcher holds events outside allowed window
- Digest mode (daily/weekly): send_notification_digest Celery beat task
- Notification history endpoint + Recent Alerts UI section
- Enriched following page (bill titles, member photos/details via sub-components)
- Follow mode test buttons in admin settings panel

Infrastructure:
- nginx: switch upstream blocks to set $variable proxy_pass so Docker DNS
  re-resolves upstream IPs after container rebuilds (valid=10s)
- TROUBLESHOOTING.md documenting common Docker/nginx/postgres gotchas

Authored-By: Jack Levy

frontend/app/following/page.tsx

@@ -1,9 +1,120 @@
 "use client";
 
 import Link from "next/link";
-import { Heart, X } from "lucide-react";
+import { Heart, ExternalLink, X } from "lucide-react";
 import { useFollows, useRemoveFollow } from "@/lib/hooks/useFollows";
-import { billLabel } from "@/lib/utils";
+import { useBill } from "@/lib/hooks/useBills";
+import { useMember } from "@/lib/hooks/useMembers";
+import { FollowButton } from "@/components/shared/FollowButton";
+import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor } from "@/lib/utils";
+import type { Follow } from "@/lib/types";
+
+// ── Bill row ────────────────────────────────────────────────────────────────
+
+function BillRow({ follow }: { follow: Follow }) {
+  const { data: bill } = useBill(follow.follow_value);
+  const label = bill ? billLabel(bill.bill_type, bill.bill_number) : follow.follow_value;
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-4">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1 flex-wrap">
+          <span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+            {label}
+          </span>
+          {bill?.chamber && (
+            <span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", chamberBadgeColor(bill.chamber))}>
+              {bill.chamber}
+            </span>
+          )}
+        </div>
+        <Link
+          href={`/bills/${follow.follow_value}`}
+          className="text-sm font-medium hover:text-primary transition-colors line-clamp-2 leading-snug"
+        >
+          {bill ? (bill.short_title || bill.title || label) : <span className="text-muted-foreground">Loading…</span>}
+        </Link>
+        {bill?.latest_action_text && (
+          <p className="text-xs text-muted-foreground mt-1.5 line-clamp-1">
+            {bill.latest_action_date && <span>{formatDate(bill.latest_action_date)} — </span>}
+            {bill.latest_action_text}
+          </p>
+        )}
+      </div>
+      <FollowButton type="bill" value={follow.follow_value} supportsModes />
+    </div>
+  );
+}
+
+// ── Member row ───────────────────────────────────────────────────────────────
+
+function MemberRow({ follow, onRemove }: { follow: Follow; onRemove: () => void }) {
+  const { data: member } = useMember(follow.follow_value);
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 flex items-center gap-4">
+      {/* Photo */}
+      <div className="shrink-0">
+        {member?.photo_url ? (
+          <img
+            src={member.photo_url}
+            alt={member.name}
+            className="w-12 h-12 rounded-full object-cover border border-border"
+          />
+        ) : (
+          <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center text-lg font-semibold text-muted-foreground">
+            {member ? member.name[0] : "?"}
+          </div>
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link
+            href={`/members/${follow.follow_value}`}
+            className="text-sm font-semibold hover:text-primary transition-colors"
+          >
+            {member?.name ?? follow.follow_value}
+          </Link>
+          {member?.party && (
+            <span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", partyBadgeColor(member.party))}>
+              {member.party}
+            </span>
+          )}
+        </div>
+        {(member?.chamber || member?.state || member?.district) && (
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {[member.chamber, member.state, member.district ? `District ${member.district}` : null]
+              .filter(Boolean)
+              .join(" · ")}
+          </p>
+        )}
+        {member?.official_url && (
+          <a
+            href={member.official_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1"
+          >
+            Official site <ExternalLink className="w-3 h-3" />
+          </a>
+        )}
+      </div>
+
+      {/* Unfollow */}
+      <button
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
+        title="Unfollow"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
 
 export default function FollowingPage() {
   const { data: follows = [], isLoading } = useFollows();
@@ -13,33 +124,6 @@ export default function FollowingPage() {
   const members = follows.filter((f) => f.follow_type === "member");
   const topics = follows.filter((f) => f.follow_type === "topic");
 
-  const Section = ({ title, items, renderValue }: {
-    title: string;
-    items: typeof follows;
-    renderValue: (v: string) => React.ReactNode;
-  }) => (
-    <div>
-      <h2 className="font-semibold mb-3">{title} ({items.length})</h2>
-      {!items.length ? (
-        <p className="text-sm text-muted-foreground">Nothing followed yet.</p>
-      ) : (
-        <div className="space-y-2">
-          {items.map((f) => (
-            <div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
-              <div>{renderValue(f.follow_value)}</div>
-              <button
-                onClick={() => remove.mutate(f.id)}
-                className="text-muted-foreground hover:text-destructive transition-colors p-1"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-
   if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading...</div>;
 
   return (
@@ -51,38 +135,58 @@ export default function FollowingPage() {
         <p className="text-muted-foreground text-sm mt-1">Manage what you follow</p>
       </div>
 
-      <Section
-        title="Bills"
-        items={bills}
-        renderValue={(v) => {
-          const [congress, type, num] = v.split("-");
-          return (
-            <Link href={`/bills/${v}`} className="text-sm font-medium hover:text-primary transition-colors">
-              {type && num ? billLabel(type, parseInt(num)) : v}
-            </Link>
-          );
-        }}
-      />
-
-      <Section
-        title="Members"
-        items={members}
-        renderValue={(v) => (
-          <Link href={`/members/${v}`} className="text-sm font-medium hover:text-primary transition-colors">
-            {v}
-          </Link>
+      {/* Bills */}
+      <div>
+        <h2 className="font-semibold mb-3">Bills ({bills.length})</h2>
+        {!bills.length ? (
+          <p className="text-sm text-muted-foreground">No bills followed yet.</p>
+        ) : (
+          <div className="space-y-2">
+            {bills.map((f) => <BillRow key={f.id} follow={f} />)}
+          </div>
         )}
-      />
+      </div>
 
-      <Section
-        title="Topics"
-        items={topics}
-        renderValue={(v) => (
-          <Link href={`/bills?topic=${v}`} className="text-sm font-medium hover:text-primary transition-colors capitalize">
-            {v.replace("-", " ")}
-          </Link>
+      {/* Members */}
+      <div>
+        <h2 className="font-semibold mb-3">Members ({members.length})</h2>
+        {!members.length ? (
+          <p className="text-sm text-muted-foreground">No members followed yet.</p>
+        ) : (
+          <div className="space-y-2">
+            {members.map((f) => (
+              <MemberRow key={f.id} follow={f} onRemove={() => remove.mutate(f.id)} />
+            ))}
+          </div>
         )}
-      />
+      </div>
+
+      {/* Topics */}
+      <div>
+        <h2 className="font-semibold mb-3">Topics ({topics.length})</h2>
+        {!topics.length ? (
+          <p className="text-sm text-muted-foreground">No topics followed yet.</p>
+        ) : (
+          <div className="space-y-2">
+            {topics.map((f) => (
+              <div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
+                <Link
+                  href={`/bills?topic=${f.follow_value}`}
+                  className="text-sm font-medium hover:text-primary transition-colors capitalize"
+                >
+                  {f.follow_value.replace(/-/g, " ")}
+                </Link>
+                <button
+                  onClick={() => remove.mutate(f.id)}
+                  className="text-muted-foreground hover:text-destructive transition-colors p-1"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }