From 34b31577275b7e283ab94f579cf57f16c6694042 Mon Sep 17 00:00:00 2001
From: slarson <stephen.larson@gmail.com>
Date: Tue, 24 Mar 2026 20:24:08 -0400
Subject: [PATCH 01/25] fix: redirect logged-out users to login when clicking
 Follow button

When a logged-out user clicks the Follow button on the Testimony Detail
page, the action silently fails because uid is undefined and Firestore
rejects the operation with "Missing or insufficient permissions." This
adds an auth guard that redirects to /login?redirect=currentPath, matching
the existing auth redirect pattern used elsewhere in the app.

Closes #2059

Co-authored-with: Claude Code
---
 components/shared/FollowButton.tsx                         | 7 +++++++
 components/testimony/TestimonyDetailPage/PolicyActions.tsx | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/components/shared/FollowButton.tsx b/components/shared/FollowButton.tsx
index 87fa5ec81..0d227d1a9 100644
--- a/components/shared/FollowButton.tsx
+++ b/components/shared/FollowButton.tsx
@@ -1,5 +1,6 @@
 import { StyledImage } from "components/ProfilePage/StyledProfileComponents"
 import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
 import { useEffect, useContext } from "react"
 import { Button } from "react-bootstrap"
 import { useAuth } from "../auth"
@@ -22,6 +23,7 @@ export const BaseFollowButton = ({
 
   const { user } = useAuth()
   const uid = user?.uid
+  const router = useRouter()
 
   const { followStatus, setFollowStatus } = useContext(FollowContext)
 
@@ -52,6 +54,11 @@ export const BaseFollowButton = ({
   ) : null
   const handleClick = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
+    if (!uid) {
+      const currentPath = router.asPath
+      router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
+      return
+    }
     isFollowing ? UnfollowClick() : FollowClick()
   }
 
diff --git a/components/testimony/TestimonyDetailPage/PolicyActions.tsx b/components/testimony/TestimonyDetailPage/PolicyActions.tsx
index 90d8c4d52..bd979c465 100644
--- a/components/testimony/TestimonyDetailPage/PolicyActions.tsx
+++ b/components/testimony/TestimonyDetailPage/PolicyActions.tsx
@@ -5,6 +5,7 @@ import { formUrl } from "components/publish"
 import { FC, ReactElement, useContext, useEffect } from "react"
 import { useCurrentTestimonyDetails } from "./testimonyDetailSlice"
 import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
 import { useAuth } from "components/auth"
 import { TopicQuery } from "components/shared/FollowingQueries"
 import { StyledImage } from "components/ProfilePage/StyledProfileComponents"
@@ -39,6 +40,7 @@ export const PolicyActions: FC<React.PropsWithChildren<PolicyActionsProps>> = ({
 
   const { user } = useAuth()
   const uid = user?.uid
+  const router = useRouter()
 
   const { followStatus, setFollowStatus } = useContext(FollowContext)
 
@@ -69,6 +71,11 @@ export const PolicyActions: FC<React.PropsWithChildren<PolicyActionsProps>> = ({
   ) : null
   const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
     event.preventDefault()
+    if (!uid) {
+      const currentPath = router.asPath
+      router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
+      return
+    }
     isFollowing ? UnfollowClick() : FollowClick()
   }
 

From 2e2de7af9a26ce6a1b2a58bc986e6c65c0ee1f3a Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 7 Jul 2026 11:31:19 -0400
Subject: [PATCH 02/25] feat: lobbying explorer Phase 1 foundation

- Extend LobbyingFiling type with registrantId; add LobbyingStats,
  LobbyingClientSummary, LobbyingPositionCounts aggregate types using
  Dictionary for string-keyed maps (runtypes v5 compat)
- Add lobbyingMeta/stats singleton collection constants; add CLIENTS_COLLECTION
- Add Firestore composite indexes for registrantId+year and clientNameNorm+year
  (DESCENDING) on lobbyingFilings to support firm and client detail queries
- Add data hooks (useLobbyingFilingsForBill, useLobbyingRegistrant, etc.)
  in components/db/lobbying.ts following existing useAsync pattern
- Add lobbying.json locale namespace; add navigation.lobbying to common.json
- Add NavbarLinkLobbying component; wire into Navbar behind lobbyingTable flag
- Add LobbyingPositionChip (support/oppose/neutral/none pill),
  LobbyingFilingsTable (configurable columns), LobbyingBillCard (sidebar card
  with position stacked bar, truncated table, explorer link)
- Replace dummy LobbyingTable in BillDetails with LobbyingBillCard
- Enable lobbyingTable feature flag in development env
- Install recharts (v3); update chartTheme.tsx for v3 TooltipContentProps API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Navbar.tsx                        |  10 +
 components/NavbarComponents.tsx              |  21 +
 components/bill/BillDetails.tsx              |   8 +-
 components/db/lobbying.ts                    | 164 ++++++++
 components/featureFlags.ts                   |   2 +-
 components/lobbying/LobbyingBillCard.tsx     | 238 +++++++++++
 components/lobbying/LobbyingFilingsTable.tsx | 126 ++++++
 components/lobbying/LobbyingPositionChip.tsx |  74 ++++
 components/lobbying/chartTheme.tsx           | 317 ++++++++++++++
 docs/lobbying-frontend-plan.md               | 416 +++++++++++++++++++
 firestore.indexes.json                       |  28 ++
 functions/src/lobbying/types.ts              |  54 +++
 package.json                                 |   1 +
 public/locales/en/common.json                |   1 +
 public/locales/en/lobbying.json              |  54 +++
 yarn.lock                                    | 239 +++++++++++
 16 files changed, 1750 insertions(+), 3 deletions(-)
 create mode 100644 components/db/lobbying.ts
 create mode 100644 components/lobbying/LobbyingBillCard.tsx
 create mode 100644 components/lobbying/LobbyingFilingsTable.tsx
 create mode 100644 components/lobbying/LobbyingPositionChip.tsx
 create mode 100644 components/lobbying/chartTheme.tsx
 create mode 100644 docs/lobbying-frontend-plan.md
 create mode 100644 public/locales/en/lobbying.json

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 3c68cdd44..a8b708eae 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -15,6 +15,7 @@ import {
   NavbarLinkAiTools,
   NavbarLinkBills,
   NavbarLinkHearings,
+  NavbarLinkLobbying,
   NavbarLinkEditProfile,
   NavbarLinkEffective,
   NavbarLinkFAQ,
@@ -72,6 +73,9 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
     return (
       <Nav className="my-4">
         <NavbarLinkBills handleClick={closeNav} />
+        {flags().lobbyingTable ? (
+          <NavbarLinkLobbying handleClick={closeNav} />
+        ) : null}
         {flags().ballotQuestions ? (
           <NavbarLinkBallotQuestions handleClick={closeNav} />
         ) : null}
@@ -215,6 +219,12 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         <NavbarLinkBills />
       </div>
 
+      {flags().lobbyingTable ? (
+        <div className={`align-self-center`}>
+          <NavbarLinkLobbying />
+        </div>
+      ) : null}
+
       {flags().ballotQuestions ? (
         <div className={`align-self-center`}>
           <NavbarLinkBallotQuestions />
diff --git a/components/NavbarComponents.tsx b/components/NavbarComponents.tsx
index a378acaed..e8f121e80 100644
--- a/components/NavbarComponents.tsx
+++ b/components/NavbarComponents.tsx
@@ -142,6 +142,27 @@ export const NavbarLinkBills: React.FC<
   )
 }
 
+export const NavbarLinkLobbying: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth"])
+  return (
+    <Nav.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : DESKTOP_NAV_ITEM_CLASS}
+        href="/lobbying"
+        {...other}
+      >
+        {t("navigation.lobbying")}
+      </NavLink>
+    </Nav.Item>
+  )
+}
+
 export const NavbarLinkBallotQuestions: React.FC<
   React.PropsWithChildren<{
     handleClick?: any
diff --git a/components/bill/BillDetails.tsx b/components/bill/BillDetails.tsx
index d4d8a363a..65d941b49 100644
--- a/components/bill/BillDetails.tsx
+++ b/components/bill/BillDetails.tsx
@@ -6,7 +6,7 @@ import { Banner } from "../shared/StyledSharedComponents"
 import { BillNumber, Styled } from "./BillNumber"
 import { BillTestimonies } from "./BillTestimonies"
 import BillTrackerConnectedView from "./BillTracker"
-import { LobbyingTable } from "./LobbyingTable"
+import { LobbyingBillCard } from "components/lobbying/LobbyingBillCard"
 import { Committees, Hearing, Sponsors } from "./SponsorsAndCommittees"
 import { Status } from "./Status"
 import { Summary } from "./Summary"
@@ -99,7 +99,11 @@ export const BillDetails = ({ bill }: BillProps) => {
 
             <BillTestimonies bill={bill} className="mt-4" />
             {flags.lobbyingTable && (
-              <LobbyingTable bill={bill} className="mt-4 pb-1" />
+              <LobbyingBillCard
+                court={bill.court}
+                billId={bill.id}
+                className="mt-4 pb-1"
+              />
             )}
           </Col>
           <Col md={4}>
diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
new file mode 100644
index 000000000..4bd63ad3a
--- /dev/null
+++ b/components/db/lobbying.ts
@@ -0,0 +1,164 @@
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  limit,
+  orderBy,
+  query,
+  where
+} from "firebase/firestore"
+import { useAsync } from "react-async-hook"
+import type {
+  LobbyingClientSummary,
+  LobbyingFiling,
+  LobbyingRegistrant,
+  LobbyingStats
+} from "functions/src/lobbying/types"
+import {
+  CLIENTS_COLLECTION,
+  FILINGS_COLLECTION,
+  LOBBYING_STATS_COLLECTION,
+  LOBBYING_STATS_DOC_ID,
+  REGISTRANTS_COLLECTION
+} from "functions/src/lobbying/types"
+import { firestore } from "../firebase"
+
+// ── Internal fetchers ─────────────────────────────────────────────────────────
+
+async function fetchLobbyingStats(): Promise<LobbyingStats | undefined> {
+  const snap = await getDoc(
+    doc(firestore, LOBBYING_STATS_COLLECTION, LOBBYING_STATS_DOC_ID)
+  )
+  return snap.exists() ? (snap.data() as LobbyingStats) : undefined
+}
+
+async function fetchFilingsForBill(
+  court: number,
+  billId: string
+): Promise<LobbyingFiling[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, FILINGS_COLLECTION),
+      where("generalCourt", "==", court),
+      where("billId", "==", billId)
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingFiling)
+}
+
+async function fetchRegistrants(opts: {
+  regType?: "Lobbyist" | "Employer"
+  year?: number
+  pageSize?: number
+}): Promise<LobbyingRegistrant[]> {
+  const constraints = [
+    opts.regType ? where("regType", "==", opts.regType) : undefined,
+    opts.year ? where("year", "==", opts.year) : undefined,
+    orderBy("entityNameNorm"),
+    limit(opts.pageSize ?? 50)
+  ].filter(Boolean) as Parameters<typeof query>[1][]
+
+  const snap = await getDocs(
+    query(collection(firestore, REGISTRANTS_COLLECTION), ...constraints)
+  )
+  return snap.docs.map(d => d.data() as LobbyingRegistrant)
+}
+
+async function fetchRegistrant(
+  registrantId: string
+): Promise<LobbyingRegistrant | undefined> {
+  const snap = await getDoc(
+    doc(firestore, REGISTRANTS_COLLECTION, registrantId)
+  )
+  return snap.exists() ? (snap.data() as LobbyingRegistrant) : undefined
+}
+
+async function fetchFilingsForRegistrant(
+  registrantId: string
+): Promise<LobbyingFiling[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, FILINGS_COLLECTION),
+      where("registrantId", "==", registrantId),
+      orderBy("year", "desc")
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingFiling)
+}
+
+async function fetchClients(opts: {
+  year?: number
+  pageSize?: number
+}): Promise<LobbyingClientSummary[]> {
+  const constraints = [
+    opts.year ? where("years", "array-contains", opts.year) : undefined,
+    orderBy("clientNameNorm"),
+    limit(opts.pageSize ?? 50)
+  ].filter(Boolean) as Parameters<typeof query>[1][]
+
+  const snap = await getDocs(
+    query(collection(firestore, CLIENTS_COLLECTION), ...constraints)
+  )
+  return snap.docs.map(d => d.data() as LobbyingClientSummary)
+}
+
+async function fetchClient(
+  clientSlug: string
+): Promise<LobbyingClientSummary | undefined> {
+  const snap = await getDoc(doc(firestore, CLIENTS_COLLECTION, clientSlug))
+  return snap.exists() ? (snap.data() as LobbyingClientSummary) : undefined
+}
+
+async function fetchFilingsForClient(
+  clientNameNorm: string
+): Promise<LobbyingFiling[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, FILINGS_COLLECTION),
+      where("clientNameNorm", "==", clientNameNorm),
+      orderBy("year", "desc")
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingFiling)
+}
+
+// ── Public hooks ──────────────────────────────────────────────────────────────
+
+export function useLobbyingStats() {
+  return useAsync(fetchLobbyingStats, [])
+}
+
+export function useLobbyingFilingsForBill(court: number, billId: string) {
+  return useAsync(fetchFilingsForBill, [court, billId])
+}
+
+export function useLobbyingRegistrants(opts: {
+  regType?: "Lobbyist" | "Employer"
+  year?: number
+  pageSize?: number
+}) {
+  return useAsync(fetchRegistrants, [opts])
+}
+
+export function useLobbyingRegistrant(registrantId: string) {
+  return useAsync(fetchRegistrant, [registrantId])
+}
+
+export function useLobbyingFilingsForRegistrant(registrantId: string) {
+  return useAsync(fetchFilingsForRegistrant, [registrantId])
+}
+
+export function useLobbyingClients(
+  opts: { year?: number; pageSize?: number } = {}
+) {
+  return useAsync(fetchClients, [opts])
+}
+
+export function useLobbyingClient(clientSlug: string) {
+  return useAsync(fetchClient, [clientSlug])
+}
+
+export function useLobbyingFilingsForClient(clientNameNorm: string) {
+  return useAsync(fetchFilingsForClient, [clientNameNorm])
+}
diff --git a/components/featureFlags.ts b/components/featureFlags.ts
index 83041ebcd..b3afb0ba9 100644
--- a/components/featureFlags.ts
+++ b/components/featureFlags.ts
@@ -37,7 +37,7 @@ const defaults: Record<Env, FeatureFlags> = {
     notifications: true,
     billTracker: true,
     followOrg: true,
-    lobbyingTable: false,
+    lobbyingTable: true,
     hearingsAndTranscriptions: true,
     phoneVerificationUI: true,
     ballotQuestions: true,
diff --git a/components/lobbying/LobbyingBillCard.tsx b/components/lobbying/LobbyingBillCard.tsx
new file mode 100644
index 000000000..5e2234400
--- /dev/null
+++ b/components/lobbying/LobbyingBillCard.tsx
@@ -0,0 +1,238 @@
+import React from "react"
+import { useTranslation } from "next-i18next"
+import { useLobbyingFilingsForBill } from "components/db/lobbying"
+import { LobbyingFilingsTable } from "./LobbyingFilingsTable"
+import { MAPLE_COLORS } from "./chartTheme"
+import { normalizePosition } from "./LobbyingPositionChip"
+
+interface LobbyingBillCardProps {
+  court: number
+  billId: string
+  className?: string
+}
+
+export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
+  court,
+  billId,
+  className
+}) => {
+  const { t } = useTranslation(["lobbying", "common"])
+  const { result: filings, status } = useLobbyingFilingsForBill(court, billId)
+
+  if (status === "loading") {
+    return (
+      <div style={cardStyle} className={className}>
+        <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14, margin: 0 }}>
+          {t("lobbying:loading")}
+        </p>
+      </div>
+    )
+  }
+
+  if (!filings || filings.length === 0) return null
+
+  const counts = { support: 0, oppose: 0, neutral: 0, none: 0 }
+  for (const f of filings) {
+    const pos = normalizePosition(f.position)
+    counts[pos]++
+  }
+  const total = filings.length
+
+  const explorerHref = `/lobbying/bills?bill=${billId}&gc=${court}`
+
+  return (
+    <div style={cardStyle} className={className}>
+      <div style={headerStyle}>
+        <span style={titleStyle}>{t("lobbying:titles.overview")}</span>
+        <span style={countStyle}>
+          {t("lobbying:billCard.filingCount_other", { count: total })}
+        </span>
+      </div>
+
+      <PositionBar counts={counts} total={total} />
+
+      <div style={legendRowStyle}>
+        <LegendItem
+          label={t("lobbying:position.support")}
+          color={MAPLE_COLORS.green}
+          count={counts.support}
+        />
+        <LegendItem
+          label={t("lobbying:position.oppose")}
+          color={MAPLE_COLORS.danger}
+          count={counts.oppose}
+        />
+        <LegendItem
+          label={t("lobbying:position.neutral")}
+          color={MAPLE_COLORS.textMuted}
+          count={counts.neutral}
+        />
+      </div>
+
+      <LobbyingFilingsTable
+        filings={filings}
+        showBill={false}
+        showClient
+        showFirm
+        showAmount={false}
+        maxRows={5}
+        onViewAll={() => window.open(explorerHref, "_self")}
+      />
+
+      <a href={explorerHref} style={viewAllLinkStyle}>
+        {t("lobbying:billCard.viewAll")}
+      </a>
+    </div>
+  )
+}
+
+const PositionBar: React.FC<{
+  counts: { support: number; oppose: number; neutral: number; none: number }
+  total: number
+}> = ({ counts, total }) => {
+  if (total === 0) return null
+  const pct = (n: number) => `${((n / total) * 100).toFixed(1)}%`
+  return (
+    <div style={barContainerStyle} title="Support / Oppose / Neutral">
+      {counts.support > 0 && (
+        <div
+          style={{
+            ...barSegmentStyle,
+            width: pct(counts.support),
+            background: MAPLE_COLORS.green,
+            borderRadius:
+              counts.oppose === 0 && counts.neutral === 0
+                ? "4px"
+                : "4px 0 0 4px"
+          }}
+        />
+      )}
+      {counts.oppose > 0 && (
+        <div
+          style={{
+            ...barSegmentStyle,
+            width: pct(counts.oppose),
+            background: MAPLE_COLORS.danger,
+            borderRadius:
+              counts.support === 0 && counts.neutral === 0
+                ? "4px"
+                : counts.support === 0
+                ? "4px 0 0 4px"
+                : counts.neutral === 0
+                ? "0 4px 4px 0"
+                : "0"
+          }}
+        />
+      )}
+      {counts.neutral > 0 && (
+        <div
+          style={{
+            ...barSegmentStyle,
+            width: pct(counts.neutral),
+            background: MAPLE_COLORS.textMuted,
+            borderRadius: "0 4px 4px 0"
+          }}
+        />
+      )}
+      {counts.none > 0 && (
+        <div
+          style={{
+            ...barSegmentStyle,
+            width: pct(counts.none),
+            background: MAPLE_COLORS.graySubtleBorder,
+            borderRadius: "0 4px 4px 0"
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+const LegendItem: React.FC<{
+  label: string
+  color: string
+  count: number
+}> = ({ label, color, count }) => {
+  if (count === 0) return null
+  return (
+    <span style={legendItemStyle}>
+      <span
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          background: color,
+          display: "inline-block",
+          marginRight: 4
+        }}
+      />
+      {label} ({count})
+    </span>
+  )
+}
+
+const cardStyle: React.CSSProperties = {
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  boxShadow: "0 0.25rem 1rem rgba(15, 23, 42, 0.06)",
+  padding: "1rem"
+}
+
+const headerStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "baseline",
+  marginBottom: "0.75rem"
+}
+
+const titleStyle: React.CSSProperties = {
+  fontFamily: "Nunito, system-ui, sans-serif",
+  fontWeight: 700,
+  fontSize: 13,
+  color: MAPLE_COLORS.textMuted,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em"
+}
+
+const countStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted
+}
+
+const barContainerStyle: React.CSSProperties = {
+  display: "flex",
+  height: 8,
+  borderRadius: 4,
+  overflow: "hidden",
+  marginBottom: "0.5rem",
+  background: MAPLE_COLORS.graySubtleBorder
+}
+
+const barSegmentStyle: React.CSSProperties = {
+  height: "100%",
+  transition: "width 0.2s ease"
+}
+
+const legendRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "0.75rem",
+  marginBottom: "0.75rem",
+  flexWrap: "wrap"
+}
+
+const legendItemStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted
+}
+
+const viewAllLinkStyle: React.CSSProperties = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 600,
+  color: MAPLE_COLORS.primary,
+  textDecoration: "none",
+  marginTop: "0.5rem"
+}
diff --git a/components/lobbying/LobbyingFilingsTable.tsx b/components/lobbying/LobbyingFilingsTable.tsx
new file mode 100644
index 000000000..c2eed2fb7
--- /dev/null
+++ b/components/lobbying/LobbyingFilingsTable.tsx
@@ -0,0 +1,126 @@
+import React from "react"
+import { Table } from "react-bootstrap"
+import { useTranslation } from "next-i18next"
+import type { LobbyingFiling } from "functions/src/lobbying/types"
+import { LobbyingPositionChip } from "./LobbyingPositionChip"
+import { MAPLE_COLORS } from "./chartTheme"
+
+interface LobbyingFilingsTableProps {
+  filings: LobbyingFiling[]
+  showBill?: boolean
+  showClient?: boolean
+  showFirm?: boolean
+  showAmount?: boolean
+  maxRows?: number
+  onViewAll?: () => void
+}
+
+export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
+  filings,
+  showBill = false,
+  showClient = true,
+  showFirm = true,
+  showAmount = true,
+  maxRows,
+  onViewAll
+}) => {
+  const { t } = useTranslation("lobbying")
+  const rows = maxRows ? filings.slice(0, maxRows) : filings
+  const truncated = maxRows != null && filings.length > maxRows
+
+  if (filings.length === 0) {
+    return (
+      <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+        {t("noData")}
+      </p>
+    )
+  }
+
+  return (
+    <div>
+      <Table hover responsive size="sm" style={tableStyle}>
+        <thead>
+          <tr style={theadRowStyle}>
+            {showBill && <th>{t("fields.bills")}</th>}
+            {showClient && <th>{t("fields.clientName")}</th>}
+            {showFirm && <th>{t("fields.firmName")}</th>}
+            <th>{t("filters.position")}</th>
+            {showAmount && (
+              <th style={{ textAlign: "right" }}>{t("fields.amount")}</th>
+            )}
+            <th>{t("fields.year")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(f => (
+            <tr key={f.filingId}>
+              {showBill && (
+                <td style={cellStyle}>
+                  {f.billId ? (
+                    <a href={`/bills/${f.generalCourt}/${f.billId}`}>
+                      {f.billId}
+                    </a>
+                  ) : (
+                    <span style={{ color: MAPLE_COLORS.textMuted }}>—</span>
+                  )}
+                </td>
+              )}
+              {showClient && <td style={cellStyle}>{f.clientName}</td>}
+              {showFirm && <td style={cellStyle}>{f.entityName}</td>}
+              <td style={cellStyle}>
+                <LobbyingPositionChip position={f.position} />
+              </td>
+              {showAmount && (
+                <td style={{ ...cellStyle, textAlign: "right" }}>
+                  {f.amount != null
+                    ? f.amount.toLocaleString("en-US", {
+                        style: "currency",
+                        currency: "USD",
+                        maximumFractionDigits: 0
+                      })
+                    : "—"}
+                </td>
+              )}
+              <td style={cellStyle}>{f.year}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {truncated && onViewAll && (
+        <button onClick={onViewAll} style={viewAllStyle}>
+          {t("billCard.viewAll")}
+        </button>
+      )}
+    </div>
+  )
+}
+
+const tableStyle: React.CSSProperties = {
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody
+}
+
+const theadRowStyle: React.CSSProperties = {
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: MAPLE_COLORS.textMuted,
+  borderBottom: `2px solid ${MAPLE_COLORS.borderDefault}`
+}
+
+const cellStyle: React.CSSProperties = {
+  verticalAlign: "middle",
+  padding: "0.4rem 0.5rem"
+}
+
+const viewAllStyle: React.CSSProperties = {
+  background: "none",
+  border: "none",
+  color: MAPLE_COLORS.primary,
+  fontSize: 13,
+  fontWeight: 600,
+  cursor: "pointer",
+  padding: 0,
+  textDecoration: "underline"
+}
diff --git a/components/lobbying/LobbyingPositionChip.tsx b/components/lobbying/LobbyingPositionChip.tsx
new file mode 100644
index 000000000..c88b578b1
--- /dev/null
+++ b/components/lobbying/LobbyingPositionChip.tsx
@@ -0,0 +1,74 @@
+import React from "react"
+import { useTranslation } from "next-i18next"
+import { POSITION_COLORS } from "./chartTheme"
+
+type Position = "support" | "oppose" | "neutral" | "none"
+
+const CHIP_STYLES: Record<Position, React.CSSProperties> = {
+  support: {
+    background: "#e8f6ea",
+    color: "#1d5d2d",
+    border: "1px solid #3d9922"
+  },
+  oppose: {
+    background: "#fde8ef",
+    color: "#902141",
+    border: "1px solid #c71e32"
+  },
+  neutral: {
+    background: "#f1f5f9",
+    color: "#475569",
+    border: "1px solid #cbd5e1"
+  },
+  none: {
+    background: "#f1f5f9",
+    color: "#64748b",
+    border: "1px solid #d7e0ea"
+  }
+}
+
+function normalizePosition(raw: string): Position {
+  const lower = raw.toLowerCase()
+  if (lower.includes("support")) return "support"
+  if (lower.includes("oppose") || lower.includes("against")) return "oppose"
+  if (lower.includes("neutral")) return "neutral"
+  return "none"
+}
+
+interface LobbyingPositionChipProps {
+  position: string
+  className?: string
+}
+
+export const LobbyingPositionChip: React.FC<LobbyingPositionChipProps> = ({
+  position,
+  className
+}) => {
+  const { t } = useTranslation("lobbying")
+  const key = normalizePosition(position)
+
+  return (
+    <span
+      className={className}
+      style={{
+        ...chipBaseStyle,
+        ...CHIP_STYLES[key]
+      }}
+    >
+      {t(`position.${key}`)}
+    </span>
+  )
+}
+
+const chipBaseStyle: React.CSSProperties = {
+  display: "inline-block",
+  padding: "0.15rem 0.55rem",
+  borderRadius: 999,
+  fontSize: 12,
+  fontWeight: 600,
+  letterSpacing: "0.01em",
+  whiteSpace: "nowrap"
+}
+
+export { normalizePosition }
+export type { Position }
diff --git a/components/lobbying/chartTheme.tsx b/components/lobbying/chartTheme.tsx
new file mode 100644
index 000000000..7e1aea0f8
--- /dev/null
+++ b/components/lobbying/chartTheme.tsx
@@ -0,0 +1,317 @@
+/**
+ * Recharts visual theme for MAPLE lobbying charts.
+ *
+ * All values are derived from the design tokens in styles/bootstrap.scss.
+ * CSS custom properties (var(--maple-*)) are not used here because Recharts
+ * renders into SVG/Canvas where CSS vars are not reliably resolved — hard-coded
+ * hex values that match the SCSS source of truth are the correct approach.
+ */
+
+import React from "react"
+import { TooltipContentProps } from "recharts"
+import type {
+  NameType,
+  Payload,
+  ValueType
+} from "recharts/types/component/DefaultTooltipContent"
+
+// ── Token mirrors ─────────────────────────────────────────────────────────────
+// Keep in sync with styles/bootstrap.scss.
+
+export const MAPLE_COLORS = {
+  // Brand
+  primary: "#1a3185",
+  primaryStrong: "#12266f",
+  accent: "#ff8600",
+  danger: "#c71e32",
+  green: "#3d9922",
+  stagePast: "#8ebc81",
+  periwinkle: "#8c98c2",
+
+  // Text
+  textBody: "#334155",
+  textMuted: "#64748b",
+  textStrong: "#1e293b",
+
+  // Surfaces & borders
+  surfaceBase: "#ffffff",
+  surfacePage: "#eae7e7",
+  surfaceMuted: "#f8fafc",
+  borderDefault: "rgba(15, 23, 42, 0.15)",
+  borderSubtle: "rgba(15, 23, 42, 0.08)",
+
+  // Semantic subtle tints
+  blueSubtleBg: "#e8efff",
+  blueSubtleText: "#1d3f8a",
+  greenSubtleBg: "#e8f6ea",
+  greenSubtleText: "#1d5d2d",
+  redSubtleBg: "#fde8ef",
+  redSubtleText: "#902141",
+  graySubtleBg: "#f1f5f9",
+  graySubtleText: "#475569",
+  graySubtleBorder: "#d7e0ea"
+} as const
+
+// ── Data palettes ─────────────────────────────────────────────────────────────
+
+/** Ordered series palette: navy → orange → green → periwinkle → soft green → red */
+export const DATA_PALETTE: readonly string[] = [
+  MAPLE_COLORS.primary,
+  MAPLE_COLORS.accent,
+  MAPLE_COLORS.green,
+  MAPLE_COLORS.periwinkle,
+  MAPLE_COLORS.stagePast,
+  MAPLE_COLORS.danger
+]
+
+/** Lobbying position colours. Use across all position visualisations. */
+export const POSITION_COLORS = {
+  support: MAPLE_COLORS.green,
+  oppose: MAPLE_COLORS.danger,
+  neutral: MAPLE_COLORS.textMuted,
+  none: MAPLE_COLORS.graySubtleBorder
+} as const
+
+export type LobbyingPosition = keyof typeof POSITION_COLORS
+
+// ── Axis / grid props ─────────────────────────────────────────────────────────
+// Spread directly onto <XAxis>, <YAxis>, <CartesianGrid>.
+
+const TICK_STYLE = {
+  fill: MAPLE_COLORS.textMuted,
+  fontSize: 12,
+  fontFamily: "Nunito, system-ui, sans-serif"
+}
+
+export const X_AXIS_PROPS = {
+  tick: TICK_STYLE,
+  axisLine: { stroke: MAPLE_COLORS.borderDefault },
+  tickLine: { stroke: MAPLE_COLORS.borderDefault },
+  padding: { left: 4, right: 4 } as const
+}
+
+export const Y_AXIS_PROPS = {
+  tick: TICK_STYLE,
+  axisLine: false as const,
+  tickLine: false as const,
+  width: 60
+}
+
+export const GRID_PROPS = {
+  strokeDasharray: "3 3",
+  stroke: MAPLE_COLORS.borderSubtle,
+  vertical: false
+}
+
+// ── Line styles ───────────────────────────────────────────────────────────────
+
+/** Standard line. Spread onto <Line>. */
+export const LINE_PROPS = {
+  strokeWidth: 2,
+  dot: false as const,
+  activeDot: { r: 5, strokeWidth: 2, stroke: MAPLE_COLORS.surfaceBase }
+}
+
+/** Emphasis line (e.g. total / primary series on a dual-axis chart). */
+export const LINE_PROPS_EMPHASIS = {
+  ...LINE_PROPS,
+  strokeWidth: 2.5
+}
+
+/** Dashed reference or secondary line. */
+export const LINE_PROPS_DASHED = {
+  ...LINE_PROPS,
+  strokeDasharray: "5 3",
+  strokeWidth: 1.5
+}
+
+// ── Bar styles ────────────────────────────────────────────────────────────────
+
+/** Rounded top corners matching $maple-radius-sm (4 px). Spread onto <Bar>. */
+export const BAR_PROPS = {
+  radius: [4, 4, 0, 0] as [number, number, number, number],
+  maxBarSize: 48
+}
+
+/** Tighter bar for dense / stacked charts. */
+export const BAR_PROPS_COMPACT = {
+  radius: [2, 2, 0, 0] as [number, number, number, number],
+  maxBarSize: 32
+}
+
+// ── Area fill gradients ───────────────────────────────────────────────────────
+
+/**
+ * Returns an SVG <defs> block defining a vertical gradient for each data series.
+ * Place inside the Recharts <AreaChart> / <ComposedChart> and reference with
+ * `fill="url(#gradient-primary)"` on each <Area>.
+ *
+ * Usage:
+ *   <AreaChart ...>
+ *     <defs>{AREA_GRADIENT_DEFS}</defs>
+ *     <Area fill="url(#gradient-primary)" stroke={MAPLE_COLORS.primary} ... />
+ *   </AreaChart>
+ */
+export const AREA_GRADIENT_DEFS = (
+  <>
+    {DATA_PALETTE.map((color, i) => (
+      <linearGradient
+        key={i}
+        id={`maple-gradient-${i}`}
+        x1="0"
+        y1="0"
+        x2="0"
+        y2="1"
+      >
+        <stop offset="5%" stopColor={color} stopOpacity={0.18} />
+        <stop offset="95%" stopColor={color} stopOpacity={0.02} />
+      </linearGradient>
+    ))}
+  </>
+)
+
+/** Convenience: gradient fill ID for the nth series in DATA_PALETTE. */
+export const gradientFill = (index: number) => `url(#maple-gradient-${index})`
+
+// ── Legend props ──────────────────────────────────────────────────────────────
+
+export const LEGEND_PROPS = {
+  wrapperStyle: {
+    fontSize: 12,
+    fontFamily: "Nunito, system-ui, sans-serif",
+    color: MAPLE_COLORS.textMuted,
+    paddingTop: 8
+  },
+  iconSize: 10,
+  iconType: "circle" as const
+}
+
+// ── Tooltip ───────────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in replacement for Recharts' default tooltip.
+ * Matches MAPLE card styling: white surface, subtle border and shadow, Nunito.
+ *
+ * Usage:
+ *   <Tooltip content={<MapleTooltip />} />
+ *   <Tooltip content={<MapleTooltip labelFormatter={d => `Year: ${d}`} />} />
+ */
+export const MapleTooltip: React.FC<
+  TooltipContentProps<ValueType, NameType> & {
+    labelFormatter?: (label: string | number) => React.ReactNode
+    valueFormatter?: (value: ValueType) => string
+  }
+> = ({ active, payload, label, labelFormatter, valueFormatter }) => {
+  if (!active || !payload?.length) return null
+
+  const displayLabel =
+    labelFormatter && label != null ? labelFormatter(label) : label
+  const fmt = valueFormatter ?? ((v: ValueType | undefined) => String(v ?? ""))
+
+  return (
+    <div style={tooltipContainerStyle}>
+      {displayLabel != null && (
+        <div style={tooltipLabelStyle}>{displayLabel}</div>
+      )}
+      {payload.map((entry: Payload<ValueType, NameType>, i: number) => (
+        <div key={i} style={tooltipRowStyle}>
+          <span style={{ color: entry.color ?? MAPLE_COLORS.textMuted }}>
+            {entry.name}
+          </span>
+          <span style={{ fontWeight: 600 }}>
+            {entry.value != null ? fmt(entry.value) : ""}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const tooltipContainerStyle: React.CSSProperties = {
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  boxShadow: "0 0.5rem 1.5rem rgba(15, 23, 42, 0.06)",
+  padding: "0.5rem 0.75rem",
+  fontFamily: "Nunito, system-ui, sans-serif",
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody,
+  minWidth: 140
+}
+
+const tooltipLabelStyle: React.CSSProperties = {
+  fontWeight: 700,
+  color: MAPLE_COLORS.textStrong,
+  marginBottom: "0.25rem",
+  fontSize: 12,
+  textTransform: "uppercase",
+  letterSpacing: "0.04em"
+}
+
+const tooltipRowStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  gap: "1rem",
+  lineHeight: 1.6
+}
+
+// ── Chart container ───────────────────────────────────────────────────────────
+
+/**
+ * Wrapper div that gives a Recharts chart the same surface treatment as a
+ * MAPLE card: white background, subtle border, sm shadow, md border-radius.
+ * Accepts an optional title rendered above the chart area.
+ */
+export const ChartContainer: React.FC<
+  React.PropsWithChildren<{
+    title?: string
+    height?: number | string
+    className?: string
+    style?: React.CSSProperties
+  }>
+> = ({ title, height = 260, children, className, style }) => (
+  <div style={{ ...chartContainerStyle, ...style }} className={className}>
+    {title && <div style={chartTitleStyle}>{title}</div>}
+    <div style={{ height }}>{children}</div>
+  </div>
+)
+
+const chartContainerStyle: React.CSSProperties = {
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  boxShadow: "0 0.25rem 1rem rgba(15, 23, 42, 0.06)",
+  padding: "1rem 1rem 0.5rem"
+}
+
+const chartTitleStyle: React.CSSProperties = {
+  fontFamily: "Nunito, system-ui, sans-serif",
+  fontWeight: 700,
+  fontSize: 13,
+  color: MAPLE_COLORS.textMuted,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  marginBottom: "0.75rem"
+}
+
+// ── Formatters ────────────────────────────────────────────────────────────────
+
+const currencyFmt = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 0
+})
+
+export const formatCurrency = (v: number): string => currencyFmt.format(v)
+
+const compactFmt = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: "compact",
+  maximumFractionDigits: 1
+})
+
+/** Compact axis tick labels: $1.2M, $450K */
+export const formatCurrencyCompact = (v: number): string => compactFmt.format(v)
+
+export const formatCount = (v: number): string => v.toLocaleString("en-US")
diff --git a/docs/lobbying-frontend-plan.md b/docs/lobbying-frontend-plan.md
new file mode 100644
index 000000000..df86046fa
--- /dev/null
+++ b/docs/lobbying-frontend-plan.md
@@ -0,0 +1,416 @@
+# Lobbying Explorer — Frontend Plan
+
+_Living document. Update as implementation progresses._
+
+---
+
+## Overview
+
+A dedicated **Lobbying Explorer** section of MAPLE, surfacing OCPF lobbying disclosure
+data as a first-class feature alongside bills and testimony. The explorer is a new
+top-level nav item that provides four browsable entity views (overview, bills, clients,
+firms) and integrates lightly into existing bill detail pages. Full visual design is
+deferred to the design team; this phase establishes the data layer, routing skeleton,
+i18n scaffolding, and placeholder UI.
+
+---
+
+## Routes
+
+```
+/lobbying                         — overview: stats, search, entry cards
+/lobbying/bills                   — browse all lobbied bills
+/lobbying/clients                 — browse clients / sponsors
+/lobbying/clients/[clientSlug]    — client detail
+/lobbying/firms                   — browse lobbying firms (registrants)
+/lobbying/firms/[registrantId]    — firm detail
+```
+
+Existing bill detail pages get one lightweight sidebar card (filing count + link to
+`/lobbying/bills?bill=H1234&gc=193`). No other pages are touched.
+
+---
+
+## Navigation
+
+Add **Lobbying** as a new top-level item in the primary navbar, between Bills and Learn.
+
+```tsx
+// components/NavbarComponents.tsx — new export
+export const NavbarLinkLobbying: React.FC<...> = ({ handleClick }) => {
+  const { t } = useTranslation("common")
+  return (
+    <NavbarDropdownLink href="/lobbying" handleClick={handleClick}>
+      {t("navigation.lobbying")}
+    </NavbarDropdownLink>
+  )
+}
+```
+
+Add `"navigation.lobbying": "Lobbying"` to `public/locales/en/common.json`.
+
+---
+
+## Data Model
+
+### Firestore schema (current — from `lobbying-data-pipeline`)
+
+| Collection            | Doc ID           | Key fields                                                                                                      |
+| --------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------- |
+| `lobbyingRegistrants` | `{registrantId}` | `entityName`, `regType`, `year`, `generalCourt`, `clients[]`, `disclosureUrls[]`                                |
+| `lobbyingFilings`     | `{filingId}`     | `billId`, `generalCourt`, `entityName`, `clientName`, `clientNameNorm`, `position`, `amount`, `year`, `chamber` |
+
+### Required additions
+
+**1. Add `registrantId` to `LobbyingFiling`**
+
+`lobbyingFilings` currently stores `entityName` (string) but not the registrant document
+ID. Without this, querying all filings for a firm requires a `where("entityName", "==", x)`
+string match instead of an indexed ID lookup. Add `registrantId: string` to
+`LobbyingFiling` type and populate it in the scraper.
+
+**2. Add `lobbyingStats` singleton document**
+
+Pre-computed by the ingest pipeline. Avoids expensive client-side aggregations on the
+overview page.
+
+```ts
+// functions/src/lobbying/types.ts
+export const LobbyingStats = Record({
+  totalFilings: Number,
+  totalRegistrants: Number,
+  totalClients: Number, // distinct clientNameNorm
+  totalBillsWithFilings: Number, // distinct (billId, generalCourt) pairs
+  courtsWithData: Array(Number), // sorted list of general court numbers
+  spendByYear: Record(String, Number), // { "2023": 88775472, ... }
+  filingsByYear: Record(String, Number) // { "2023": 42000, ... }
+})
+export type LobbyingStats = Static<typeof LobbyingStats>
+export const LOBBYING_STATS_DOC = "lobbyingStats" // top-level doc
+```
+
+**3. Add `lobbyingClients` collection**
+
+Clients are currently embedded in `registrants.clients[]`. A flat collection enables
+efficient browse, search, and pagination.
+
+```ts
+export const LobbyingClientSummary = Record({
+  clientSlug: String, // derived from clientNameNorm — strip residual non-URL chars
+  clientName: String,
+  clientNameNorm: String,
+  totalFilings: Number,
+  totalAmount: Null.Or(Number),
+  years: Array(Number),
+  generalCourts: Array(Number),
+  positionCounts: Record({
+    // { support: N, oppose: N, neutral: N, none: N }
+    support: Number,
+    oppose: Number,
+    neutral: Number,
+    none: Number
+  }),
+  registrantIds: Array(String) // firms they have worked with
+})
+export const CLIENTS_COLLECTION = "lobbyingClients"
+```
+
+**4. Required Firestore indexes**
+
+Add to `firestore.indexes.json`:
+
+```json
+{ "collectionGroup": "lobbyingFilings",
+  "fields": [{"fieldPath": "billId"}, {"fieldPath": "generalCourt"}] },
+{ "collectionGroup": "lobbyingFilings",
+  "fields": [{"fieldPath": "registrantId"}, {"fieldPath": "year", "order": "DESCENDING"}] },
+{ "collectionGroup": "lobbyingFilings",
+  "fields": [{"fieldPath": "clientNameNorm"}, {"fieldPath": "year", "order": "DESCENDING"}] },
+{ "collectionGroup": "lobbyingFilings",
+  "fields": [{"fieldPath": "generalCourt"}, {"fieldPath": "year", "order": "DESCENDING"}] }
+```
+
+---
+
+## Data hooks (`components/db/lobbying.ts`, new file)
+
+All hooks use `useAsync` pattern with loading/error states, following existing
+conventions in `components/db/`.
+
+```ts
+// Overview stats (reads lobbyingStats singleton)
+useLobbyingStats(): AsyncResult<LobbyingStats>
+
+// Filings for a specific bill — used in bill sidebar and lobbying/bills?bill=
+useLobbyingFilingsForBill(court: number, billId: string): AsyncResult<LobbyingFiling[]>
+
+// Paginated registrant browse
+useLobbyingRegistrants(opts: {
+  regType?: "Lobbyist" | "Employer"
+  year?: number
+  pageSize?: number
+}): AsyncResult<LobbyingRegistrant[]>
+
+// Single registrant + their filings
+useLobbyingRegistrant(registrantId: string): AsyncResult<LobbyingRegistrant>
+useLobbyingFilingsForRegistrant(registrantId: string): AsyncResult<LobbyingFiling[]>
+
+// Client browse and detail
+useLobbyingClients(opts?: { year?: number }): AsyncResult<LobbyingClientSummary[]>
+useLobbyingClient(clientSlug: string): AsyncResult<LobbyingClientSummary>
+useLobbyingFilingsForClient(clientNameNorm: string): AsyncResult<LobbyingFiling[]>
+```
+
+---
+
+## i18n
+
+New namespace `lobbying` in `public/locales/en/lobbying.json`. All standalone lobbying
+pages use `createGetStaticTranslationProps(["auth", "common", "footer", "lobbying"])`.
+
+The bill sidebar card reuses existing `common` namespace keys (`bill.lobbying_parties`,
+`bill.client_name`, `bill.position`, `bill.disclosure_date`, `bill.pro`, `bill.neutral`).
+
+```json
+{
+  "title": "Lobbying Explorer",
+  "subtitle": "Browse Massachusetts lobbying disclosures filed with the Secretary of State.",
+  "stats": {
+    "totalBills": "Lobbied bills",
+    "totalClients": "Clients",
+    "sessionsCovered": "Sessions covered",
+    "totalSpend": "Total compensation reported"
+  },
+  "sections": {
+    "bills": "Bills",
+    "clients": "Clients",
+    "firms": "Lobbying Firms"
+  },
+  "filters": {
+    "session": "Session",
+    "year": "Year",
+    "position": "Position",
+    "allSessions": "All sessions",
+    "allPositions": "All positions",
+    "search": "Search…"
+  },
+  "position": {
+    "support": "Support",
+    "oppose": "Oppose",
+    "neutral": "Neutral",
+    "none": "No position"
+  },
+  "fields": {
+    "clientName": "Client",
+    "firmName": "Lobbying Firm",
+    "amount": "Compensation",
+    "year": "Year",
+    "filings": "Filings",
+    "bills": "Bills lobbied",
+    "clients": "Clients represented"
+  },
+  "attribution": "Data from the <0>MA Secretary of State Lobbyist Public Search</0>.",
+  "noData": "No lobbying filings found.",
+  "loading": "Loading lobbying data…",
+  "titles": {
+    "overview": "Lobbying Explorer",
+    "bills": "Lobbied Bills",
+    "clients": "Clients & Sponsors",
+    "firms": "Lobbying Firms",
+    "client": "Client Profile",
+    "firm": "Firm Profile"
+  },
+  "billCard": {
+    "filingCount_one": "{{count}} lobbying filing",
+    "filingCount_other": "{{count}} lobbying filings",
+    "viewAll": "View all lobbying activity →"
+  }
+}
+```
+
+---
+
+## Components
+
+All in a new `components/lobbying/` directory. These are functional placeholders
+designed to be restyled by the design team without changing props or data dependencies.
+
+### `LobbyingStatsBar`
+
+Overview stats (total bills, clients, sessions, spend) displayed as `TitledSectionCard`
+stat boxes. Reads from `useLobbyingStats()`.
+
+### `LobbyingPositionChip`
+
+Inline pill showing position: Support (green) / Oppose (red) / Neutral (grey) / None.
+Used throughout tables and detail pages.
+
+```tsx
+<LobbyingPositionChip position="support" /> // → "Support" pill
+```
+
+### `LobbyingFilingsTable`
+
+Shared table component used across bill sidebar, client detail, and firm detail.
+Columns configurable via props — different views show different subsets.
+
+```tsx
+interface LobbyingFilingsTableProps {
+  filings: LobbyingFiling[]
+  showBill?: boolean // show Bill ID + title column (off for bill-scoped view)
+  showClient?: boolean // show Client column
+  showFirm?: boolean // show Firm column
+  showAmount?: boolean
+  maxRows?: number // truncate with "View all" link
+}
+```
+
+### `LobbyingBillCard`
+
+Lightweight sidebar card for bill detail pages. Shows filing count, stacked
+support/oppose/neutral bar, and a "View all lobbying activity →" link.
+
+```tsx
+interface LobbyingBillCardProps {
+  court: number
+  billId: string
+  className?: string
+}
+```
+
+Replaces the dummy `LobbyingTable` component. Enabled by updating the
+`lobbyingTable` feature flag to `true` in dev.
+
+### `LobbyingEntityCard`
+
+Summary card for browse lists (one card per client or firm). Shows name, filing count,
+year range, and a position summary bar. Reused in both `/lobbying/clients` and
+`/lobbying/firms` list views.
+
+---
+
+## Visualizations
+
+These are proposed charts for detail and overview pages. Implementation uses
+**Recharts** (to be added as a dependency) — lightweight, React-native, composable.
+
+| Chart                              | Location                              | Type                   | Data                                                |
+| ---------------------------------- | ------------------------------------- | ---------------------- | --------------------------------------------------- |
+| Support/oppose/neutral stacked bar | Bill sidebar card, lobbied-bills list | Horizontal stacked bar | `n_supporters`, `n_opposers`, `n_neutrals` per bill |
+| Position donut                     | Client detail, Firm detail            | Doughnut               | Filing position breakdown                           |
+| Spend by year                      | Client detail, Firm detail            | Bar                    | `spendByYear` from filings                          |
+| Total spend + filings over time    | Overview page                         | Dual-axis line         | `LobbyingStats.spendByYear` + `filingsByYear`       |
+| Top tags horizontal bar            | Client detail                         | Horizontal bar         | MAPLE bill tags from filings for that client        |
+| Position heatmap by session        | Client detail (optional)              | Grid heatmap           | Position per general court                          |
+
+All charts are conditionally rendered only when data is loaded and non-empty. The
+position stacked bar on the bill sidebar is the highest-value chart — it answers
+"who is on which side" at a glance and should be treated as the MVP chart.
+
+---
+
+## Pages
+
+### `/lobbying` — Overview (`pages/lobbying/index.tsx`)
+
+- `getStaticProps` with ISR (`revalidate: 3600`)
+- Reads `LobbyingStats` at build time
+- Client-side: global search input querying `lobbyingFilings` for bill IDs / client names
+- Sections: stat cards, three entry cards (Bills / Clients / Firms), attribution bar
+- Data source attribution to MA Secretary of State required on every lobbying page
+
+### `/lobbying/bills` — Lobbied bills browse (`pages/lobbying/bills.tsx`)
+
+- `getStaticProps` (ISR)
+- Client-side filterable table: session (general court), position filter, text search
+- Columns: Bill ID (→ bill detail), Title, Session, Top tags (MAPLE bill tags), Position bar, Filings count
+- Default sort: most filings first
+- Clicking a bill row links to bill detail page (`/bills/[court]/[billId]`), not a lobbying sub-page
+
+### `/lobbying/clients` — Client browse (`pages/lobbying/clients/index.tsx`)
+
+- Client-side filterable list using `useLobbyingClients()`
+- Columns: Client name, Total filings, Bills, Years active, Position breakdown
+- Text search on client name
+
+### `/lobbying/clients/[clientSlug]` — Client detail (`pages/lobbying/clients/[clientSlug].tsx`)
+
+- `getServerSideProps`; fetch `LobbyingClientSummary` + filings by `clientNameNorm`
+- Sections: stats bar, position donut, spend by year bar, bills lobbied table (with MAPLE tags)
+- Bills table columns: Bill ID, Title, Session, MAPLE tags, Position, Year
+
+### `/lobbying/firms` — Firms browse (`pages/lobbying/firms/index.tsx`)
+
+- Same pattern as clients; filters by `regType` (Lobbyist / Employer / all)
+- Columns: Firm name, Type, Clients, Bills, Years active
+
+### `/lobbying/firms/[registrantId]` — Firm detail (`pages/lobbying/firms/[registrantId].tsx`)
+
+- `getServerSideProps`; fetch `LobbyingRegistrant` + filings
+- Sections: stats bar, position donut, clients represented table, bills lobbied table, compensation by year bar
+
+---
+
+## Bill Page Integration
+
+In `components/bill/BillDetails.tsx`, replace the existing dummy `LobbyingTable` with
+`LobbyingBillCard`. The feature flag `lobbyingTable` stays as the gate.
+
+```tsx
+{
+  flags.lobbyingTable && (
+    <LobbyingBillCard
+      court={bill.court}
+      billId={bill.id}
+      className="mt-4 pb-1"
+    />
+  )
+}
+```
+
+The card is intentionally lightweight: one line of filing count, one stacked bar, one
+link. The bill page is not the primary place for lobbying exploration.
+
+---
+
+## Implementation Phases
+
+### Phase 1 — Foundation (complete)
+
+- [x] Add Firestore schema additions (`registrantId` on filings, `lobbyingStats`, `lobbyingClients`)
+- [x] Add Firestore indexes to `firestore.indexes.json`
+- [x] Add data hooks (`components/db/lobbying.ts`)
+- [x] Add `lobbying.json` locale file
+- [x] Add `NavbarLinkLobbying` to navbar
+- [x] Build `LobbyingBillCard` (replaces dummy `LobbyingTable` in bill detail)
+- [x] Enable `lobbyingTable` feature flag in dev
+- [x] Build `LobbyingPositionChip` and `LobbyingFilingsTable` shared components
+
+### Phase 2 — Browse pages (after design)
+
+- [x] Install Recharts
+- [ ] Overview page with stats and search
+- [ ] Bills browse page
+- [ ] Clients browse + detail pages
+- [ ] Firms browse + detail pages
+- [ ] Add position stacked bar chart to bill card
+
+### Phase 3 — Polish
+
+- [ ] Mobile responsive layouts
+- [ ] Pagination and loading states
+- [ ] Attribution links to SoS on every lobbying page
+- [ ] Empty states and error states
+- [ ] Run `firestore.indexes.json` deploy
+
+---
+
+## Decisions
+
+| Decision              | Resolution                                                                                  |
+| --------------------- | ------------------------------------------------------------------------------------------- |
+| Navbar label          | "Lobbying" (short); full page title "Lobbying Explorer"                                     |
+| Bill page flag        | Enable in dev in Phase 1; no design sign-off gate required                                  |
+| Charting library      | **Recharts** — pure React/SVG, no canvas lifecycle management needed                        |
+| Client slug           | Derived from `clientNameNorm` (strip any residual non-URL chars)                            |
+| SoS attribution links | Use `disclosureUrls[]` from `LobbyingRegistrant` for direct deep-links on firm detail pages |
diff --git a/firestore.indexes.json b/firestore.indexes.json
index c267a6868..8d2a60f72 100644
--- a/firestore.indexes.json
+++ b/firestore.indexes.json
@@ -975,6 +975,34 @@
           "order": "ASCENDING"
         }
       ]
+    },
+    {
+      "collectionGroup": "lobbyingFilings",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "registrantId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "year",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "lobbyingFilings",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "clientNameNorm",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "year",
+          "order": "DESCENDING"
+        }
+      ]
     }
   ],
   "fieldOverrides": [
diff --git a/functions/src/lobbying/types.ts b/functions/src/lobbying/types.ts
index 83eaab761..c5e6ae936 100644
--- a/functions/src/lobbying/types.ts
+++ b/functions/src/lobbying/types.ts
@@ -1,5 +1,6 @@
 import {
   Array,
+  Dictionary,
   InstanceOf,
   Literal,
   Number,
@@ -44,6 +45,9 @@ export const LobbyingRegistrant = Record({
 export type LobbyingFiling = Static<typeof LobbyingFiling>
 export const LobbyingFiling = Record({
   filingId: String,
+  // ID of the parent lobbyingRegistrants document — enables indexed queries
+  // by firm without a string-equality scan on entityName.
+  registrantId: String,
   entityName: String,
   entityNameNorm: String,
   clientName: String,
@@ -60,6 +64,56 @@ export const LobbyingFiling = Record({
   fetchedAt: InstanceOf(Timestamp)
 })
 
+// ── Pre-computed aggregates ───────────────────────────────────────────────────
+
+export type LobbyingPositionCounts = Static<typeof LobbyingPositionCounts>
+export const LobbyingPositionCounts = Record({
+  support: Number,
+  oppose: Number,
+  neutral: Number,
+  none: Number
+})
+
+/**
+ * Singleton document written by the ingest pipeline after each scrape run.
+ * Stored at /lobbyingStats (top-level document, no collection).
+ * Avoids expensive client-side fan-out on the Lobbying Explorer overview page.
+ */
+export type LobbyingStats = Static<typeof LobbyingStats>
+export const LobbyingStats = Record({
+  totalFilings: Number,
+  totalRegistrants: Number,
+  totalClients: Number,
+  totalBillsWithFilings: Number,
+  courtsWithData: Array(Number),
+  spendByYear: Dictionary(Number),
+  filingsByYear: Dictionary(Number)
+})
+
+/**
+ * One document per unique client/sponsor in the lobbyingClients collection.
+ * Written by the ingest pipeline; enables paginated client browse without
+ * scanning the full lobbyingFilings collection.
+ */
+export type LobbyingClientSummary = Static<typeof LobbyingClientSummary>
+export const LobbyingClientSummary = Record({
+  clientSlug: String,
+  clientName: String,
+  clientNameNorm: String,
+  totalFilings: Number,
+  totalAmount: Null.Or(Number),
+  years: Array(Number),
+  generalCourts: Array(Number),
+  positionCounts: LobbyingPositionCounts,
+  registrantIds: Array(String)
+})
+
+/** Firestore path for the pre-computed stats singleton: collection/docId */
+export const LOBBYING_STATS_COLLECTION = "lobbyingMeta"
+export const LOBBYING_STATS_DOC_ID = "stats"
+
+export const CLIENTS_COLLECTION = "lobbyingClients"
+
 /** Firestore path for lobbying registrant documents */
 export const REGISTRANTS_COLLECTION = "lobbyingRegistrants"
 
diff --git a/package.json b/package.json
index 9a0329989..6d2d70fd3 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^8.0.2",
     "react-select": "^5.2.2",
+    "recharts": "^3.9.2",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^3.1.0",
     "runtypes": "6.6.0",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index ea6789c8f..e973b506e 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -141,6 +141,7 @@
     "viewProfile": "View Profile",
     "whyUseMaple": "Why Use MAPLE",
     "inTheNews": "In The News",
+    "lobbying": "Lobbying",
     "login": "Login"
   },
   "new_feature": "*NEW*",
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
new file mode 100644
index 000000000..e87b94c54
--- /dev/null
+++ b/public/locales/en/lobbying.json
@@ -0,0 +1,54 @@
+{
+  "title": "Lobbying Explorer",
+  "subtitle": "Browse Massachusetts lobbying disclosures filed with the Secretary of State.",
+  "stats": {
+    "totalBills": "Lobbied bills",
+    "totalClients": "Clients",
+    "sessionsCovered": "Sessions covered",
+    "totalSpend": "Total compensation reported"
+  },
+  "sections": {
+    "bills": "Bills",
+    "clients": "Clients",
+    "firms": "Lobbying Firms"
+  },
+  "filters": {
+    "session": "Session",
+    "year": "Year",
+    "position": "Position",
+    "allSessions": "All sessions",
+    "allPositions": "All positions",
+    "search": "Search…"
+  },
+  "position": {
+    "support": "Support",
+    "oppose": "Oppose",
+    "neutral": "Neutral",
+    "none": "No position"
+  },
+  "fields": {
+    "clientName": "Client",
+    "firmName": "Lobbying Firm",
+    "amount": "Compensation",
+    "year": "Year",
+    "filings": "Filings",
+    "bills": "Bills lobbied",
+    "clients": "Clients represented"
+  },
+  "attribution": "Data from the <0>MA Secretary of State Lobbyist Public Search</0>.",
+  "noData": "No lobbying filings found.",
+  "loading": "Loading lobbying data…",
+  "titles": {
+    "overview": "Lobbying Explorer",
+    "bills": "Lobbied Bills",
+    "clients": "Clients & Sponsors",
+    "firms": "Lobbying Firms",
+    "client": "Client Profile",
+    "firm": "Firm Profile"
+  },
+  "billCard": {
+    "filingCount_one": "{{count}} lobbying filing",
+    "filingCount_other": "{{count}} lobbying filings",
+    "viewAll": "View all lobbying activity →"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 2d0c0348b..03bd7ee1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3406,6 +3406,18 @@
     redux-thunk "^2.4.2"
     reselect "^4.1.8"
 
+"@reduxjs/toolkit@^1.9.0 || 2.x.x":
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.12.0.tgz#e62787503a38561e04bb8f39e29ca8db689590f9"
+  integrity sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==
+  dependencies:
+    "@standard-schema/spec" "^1.0.0"
+    "@standard-schema/utils" "^0.3.0"
+    immer "^11.0.0"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
+
 "@remix-run/router@1.13.1":
   version "1.13.1"
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz"
@@ -3484,6 +3496,16 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@standard-schema/spec@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.1.0.tgz#a79b55dbaf8604812f52d140b2c9ab41bc150bb8"
+  integrity sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==
+
+"@standard-schema/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/utils/-/utils-0.3.0.tgz#3d5e608f16c2390c10528e98e59aef6bf73cae7b"
+  integrity sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==
+
 "@storybook/addon-actions@7.6.4", "@storybook/addon-actions@^7.6.4":
   version "7.6.4"
   resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.4.tgz"
@@ -4632,6 +4654,57 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@^3.0.3":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.2.tgz#e02151464d02d4a1b44646d0fcdb93faf88fde8c"
+  integrity sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.1.tgz#f632b380c3aca1dba8e34aa049bcd6a4af23df8a"
+  integrity sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.9.tgz#57a2f707242e6fe1de81ad7bfcccaaf606179afb"
+  integrity sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.8.tgz#d1516cc508753be06852cd06758e3bb54a22b0e3"
+  integrity sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
+  integrity sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
 "@types/debounce-promise@^3.1.1":
   version "3.1.9"
   resolved "https://registry.npmjs.org/@types/debounce-promise/-/debounce-promise-3.1.9.tgz"
@@ -5125,6 +5198,11 @@
   resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/use-sync-external-store@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
+  integrity sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==
+
 "@types/uuid@^9.0.1":
   version "9.0.7"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz"
@@ -7578,6 +7656,77 @@ csv-parse@^5.0.4:
   resolved "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.3.tgz"
   integrity sha512-v0KW6C0qlZzoGjk6u5tLmVfyZxNgPGXZsWTXshpAgKVGmGXzaVWGdlCFxNx5iuzcXT/oJN1HHM9DZKwtAtYa+A==
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.2.tgz#01fdb46b58beb1f55b10b42ad70b6e344d5eb2ae"
+  integrity sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -7691,6 +7840,11 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
+decimal.js-light@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 decimal.js@^10.4.2:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
@@ -8551,6 +8705,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-toolkit@^1.39.3:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/es-toolkit/-/es-toolkit-1.49.0.tgz#93c5b031865792fc03cbf5bd20c132a4f976a52a"
+  integrity sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==
+
 esbuild-plugin-alias@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz"
@@ -8911,6 +9070,11 @@ eventemitter3@^4.0.7:
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+eventemitter3@^5.0.1:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.4.tgz#a86d66170433712dde814707ac52b5271ceb1feb"
+  integrity sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==
+
 events-listener@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/events-listener/-/events-listener-1.1.0.tgz"
@@ -10690,6 +10854,11 @@ immediate@~3.0.5:
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
+immer@^11.0.0, immer@^11.1.8:
+  version "11.1.11"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-11.1.11.tgz#bbf825a333ae1b16fd450d8da5f61d54de6a553d"
+  integrity sha512-qzXuyXAkPySAGYkfsAwodDPWT8Zm7/Uo5BNt4BjhMhG5WlWyZZ4wQqnWwdS8kjlQ1Cwu6gjw3A6+0gTQwlyYtw==
+
 immer@^9.0.21:
   version "9.0.21"
   resolved "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz"
@@ -10931,6 +11100,11 @@ internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -15371,6 +15545,14 @@ react-query@^3.32.1, react-query@^3.39.3:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
+"react-redux@8.x.x || 9.x.x":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.3.0.tgz#a30113bb6d95c0a715d54dda4308d450fca6ce09"
+  integrity sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==
+  dependencies:
+    "@types/use-sync-external-store" "^0.0.6"
+    use-sync-external-store "^1.4.0"
+
 react-redux@^8.0.2:
   version "8.1.3"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz"
@@ -15540,6 +15722,23 @@ recast@^0.23.1, recast@^0.23.3:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+recharts@^3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-3.9.2.tgz#ccdadd197335102a91bd64d51fafc6c9a5b69ebb"
+  integrity sha512-G4fy+Pk46RaXgwWMh+Nzhyo/lbFAVqXo9gtetlyehe6Ehge9CsgDuOTwQDD+i1+llaLktNBiNq4bhnGlDRXFtw==
+  dependencies:
+    "@reduxjs/toolkit" "^1.9.0 || 2.x.x"
+    clsx "^2.1.1"
+    decimal.js-light "^2.5.1"
+    es-toolkit "^1.39.3"
+    eventemitter3 "^5.0.1"
+    immer "^11.1.8"
+    react-redux "8.x.x || 9.x.x"
+    reselect "5.2.0"
+    tiny-invariant "^1.3.3"
+    use-sync-external-store "^1.2.2"
+    victory-vendor "^37.0.2"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz"
@@ -15572,6 +15771,11 @@ redux@^4.0.5, redux@^4.2.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz"
@@ -15767,6 +15971,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@5.2.0, reselect@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.2.0.tgz#f380ef7664332d26ea06c1cba04bdbbdcaa955f1"
+  integrity sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==
+
 reselect@^4.1.8:
   version "4.1.8"
   resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz"
@@ -17182,6 +17391,11 @@ tiny-invariant@^1.3.1:
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
+tiny-invariant@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
@@ -17900,6 +18114,11 @@ use-sync-external-store@^1.0.0:
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+use-sync-external-store@^1.2.2, use-sync-external-store@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 usehooks-ts@^2.5.3:
   version "2.9.1"
   resolved "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz"
@@ -18006,6 +18225,26 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+victory-vendor@^37.0.2:
+  version "37.3.6"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-37.3.6.tgz#401ac4b029a0b3d33e0cba8e8a1d765c487254da"
+  integrity sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
 vm-browserify@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"

From 65e87ccb50712c654f0e8d668dfdc07dd016287d Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 7 Jul 2026 19:14:34 -0400
Subject: [PATCH 03/25] feat: lobbying bills browse page and bill card fixes

- Add /lobbying/bills browse page: session dropdown, position filter,
  bill ID search, table with per-bill filing counts and mini position bar
- Add stub pages for /lobbying, /lobbying/clients, /lobbying/firms
  and dynamic routes for client/firm detail
- Add useLobbyingFilingsForCourt hook for court-level data loading
- Fix LobbyingBillCard: surface errors in dev, handle not-requested state,
  inline collection constants to avoid pulling firebase-admin into browser
  bundle (was causing net module build error on bill detail page)
- Add lobbying namespace to bill detail page getServerSideProps so
  LobbyingBillCard translations load correctly
- Add titles.lobbying key to common.json for page title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/db/lobbying.ts                |  29 +-
 components/lobbying/LobbyingBillCard.tsx |  21 +-
 docs/lobbying-frontend-plan.md           |  36 ++-
 pages/bills/[court]/[billId].tsx         |   1 +
 pages/lobbying/bills.tsx                 | 339 +++++++++++++++++++++++
 pages/lobbying/clients/[clientSlug].tsx  |  40 +++
 pages/lobbying/clients/index.tsx         |  34 +++
 pages/lobbying/firms/[registrantId].tsx  |  40 +++
 pages/lobbying/firms/index.tsx           |  34 +++
 pages/lobbying/index.tsx                 |  66 +++++
 public/locales/en/common.json            |   3 +-
 11 files changed, 614 insertions(+), 29 deletions(-)
 create mode 100644 pages/lobbying/bills.tsx
 create mode 100644 pages/lobbying/clients/[clientSlug].tsx
 create mode 100644 pages/lobbying/clients/index.tsx
 create mode 100644 pages/lobbying/firms/[registrantId].tsx
 create mode 100644 pages/lobbying/firms/index.tsx
 create mode 100644 pages/lobbying/index.tsx

diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
index 4bd63ad3a..fb0d4b1a9 100644
--- a/components/db/lobbying.ts
+++ b/components/db/lobbying.ts
@@ -15,15 +15,16 @@ import type {
   LobbyingRegistrant,
   LobbyingStats
 } from "functions/src/lobbying/types"
-import {
-  CLIENTS_COLLECTION,
-  FILINGS_COLLECTION,
-  LOBBYING_STATS_COLLECTION,
-  LOBBYING_STATS_DOC_ID,
-  REGISTRANTS_COLLECTION
-} from "functions/src/lobbying/types"
 import { firestore } from "../firebase"
 
+// Mirror of constants in functions/src/lobbying/types.ts — kept here to avoid
+// pulling firebase-admin (a Node-only package) into the browser bundle.
+const FILINGS_COLLECTION = "lobbyingFilings"
+const REGISTRANTS_COLLECTION = "lobbyingRegistrants"
+const CLIENTS_COLLECTION = "lobbyingClients"
+const LOBBYING_STATS_COLLECTION = "lobbyingMeta"
+const LOBBYING_STATS_DOC_ID = "stats"
+
 // ── Internal fetchers ─────────────────────────────────────────────────────────
 
 async function fetchLobbyingStats(): Promise<LobbyingStats | undefined> {
@@ -110,6 +111,16 @@ async function fetchClient(
   return snap.exists() ? (snap.data() as LobbyingClientSummary) : undefined
 }
 
+async function fetchFilingsForCourt(court: number): Promise<LobbyingFiling[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, FILINGS_COLLECTION),
+      where("generalCourt", "==", court)
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingFiling)
+}
+
 async function fetchFilingsForClient(
   clientNameNorm: string
 ): Promise<LobbyingFiling[]> {
@@ -125,6 +136,10 @@ async function fetchFilingsForClient(
 
 // ── Public hooks ──────────────────────────────────────────────────────────────
 
+export function useLobbyingFilingsForCourt(court: number) {
+  return useAsync(fetchFilingsForCourt, [court])
+}
+
 export function useLobbyingStats() {
   return useAsync(fetchLobbyingStats, [])
 }
diff --git a/components/lobbying/LobbyingBillCard.tsx b/components/lobbying/LobbyingBillCard.tsx
index 5e2234400..36f6f3cfc 100644
--- a/components/lobbying/LobbyingBillCard.tsx
+++ b/components/lobbying/LobbyingBillCard.tsx
@@ -17,9 +17,13 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
   className
 }) => {
   const { t } = useTranslation(["lobbying", "common"])
-  const { result: filings, status } = useLobbyingFilingsForBill(court, billId)
+  const {
+    result: filings,
+    status,
+    error
+  } = useLobbyingFilingsForBill(court, billId)
 
-  if (status === "loading") {
+  if (status === "loading" || status === "not-requested") {
     return (
       <div style={cardStyle} className={className}>
         <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14, margin: 0 }}>
@@ -29,6 +33,19 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
     )
   }
 
+  if (status === "error") {
+    if (process.env.NODE_ENV === "development") {
+      return (
+        <div style={cardStyle} className={className}>
+          <p style={{ color: MAPLE_COLORS.danger, fontSize: 13, margin: 0 }}>
+            Lobbying data error: {error?.message}
+          </p>
+        </div>
+      )
+    }
+    return null
+  }
+
   if (!filings || filings.length === 0) return null
 
   const counts = { support: 0, oppose: 0, neutral: 0, none: 0 }
diff --git a/docs/lobbying-frontend-plan.md b/docs/lobbying-frontend-plan.md
index df86046fa..97601330f 100644
--- a/docs/lobbying-frontend-plan.md
+++ b/docs/lobbying-frontend-plan.md
@@ -96,7 +96,7 @@ efficient browse, search, and pagination.
 
 ```ts
 export const LobbyingClientSummary = Record({
-  clientSlug: String, // derived from clientNameNorm — strip residual non-URL chars
+  clientSlug: String, // URL-safe slug for routing
   clientName: String,
   clientNameNorm: String,
   totalFilings: Number,
@@ -375,20 +375,20 @@ link. The bill page is not the primary place for lobbying exploration.
 
 ## Implementation Phases
 
-### Phase 1 — Foundation (complete)
+### Phase 1 — Foundation (current)
 
-- [x] Add Firestore schema additions (`registrantId` on filings, `lobbyingStats`, `lobbyingClients`)
-- [x] Add Firestore indexes to `firestore.indexes.json`
-- [x] Add data hooks (`components/db/lobbying.ts`)
-- [x] Add `lobbying.json` locale file
-- [x] Add `NavbarLinkLobbying` to navbar
-- [x] Build `LobbyingBillCard` (replaces dummy `LobbyingTable` in bill detail)
-- [x] Enable `lobbyingTable` feature flag in dev
-- [x] Build `LobbyingPositionChip` and `LobbyingFilingsTable` shared components
+- [ ] Add Firestore schema additions (`registrantId` on filings, `lobbyingStats`, `lobbyingClients`)
+- [ ] Add Firestore indexes to `firestore.indexes.json`
+- [ ] Add data hooks (`components/db/lobbying.ts`)
+- [ ] Add `lobbying.json` locale file
+- [ ] Add `NavbarLinkLobbying` to navbar
+- [ ] Build `LobbyingBillCard` (replaces dummy `LobbyingTable` in bill detail)
+- [ ] Enable `lobbyingTable` feature flag in dev
+- [ ] Build `LobbyingPositionChip` and `LobbyingFilingsTable` shared components
 
 ### Phase 2 — Browse pages (after design)
 
-- [x] Install Recharts
+- [ ] Install Recharts
 - [ ] Overview page with stats and search
 - [ ] Bills browse page
 - [ ] Clients browse + detail pages
@@ -405,12 +405,10 @@ link. The bill page is not the primary place for lobbying exploration.
 
 ---
 
-## Decisions
+## Open Questions
 
-| Decision              | Resolution                                                                                  |
-| --------------------- | ------------------------------------------------------------------------------------------- |
-| Navbar label          | "Lobbying" (short); full page title "Lobbying Explorer"                                     |
-| Bill page flag        | Enable in dev in Phase 1; no design sign-off gate required                                  |
-| Charting library      | **Recharts** — pure React/SVG, no canvas lifecycle management needed                        |
-| Client slug           | Derived from `clientNameNorm` (strip any residual non-URL chars)                            |
-| SoS attribution links | Use `disclosureUrls[]` from `LobbyingRegistrant` for direct deep-links on firm detail pages |
+1. **Navbar label**: "Lobbying" or "Lobbying Explorer"? Keep short for nav.
+2. **Bill page flag**: Enable `lobbyingTable` in prod when Phase 1 is ready, or wait for design sign-off?
+3. **Client slug generation**: Use `clientNameNorm` directly (already normalized in pipeline) or generate a separate URL slug? Recommend reusing `clientNameNorm` with any remaining non-URL chars stripped.
+4. **Recharts vs react-chartjs-2**: Recharts is recommended (pure React, no canvas imperative API). Confirm with team before adding dependency.
+5. **SoS attribution link format**: The `LobbyingRegistrant` stores `disclosureUrls[]` which are direct SoS filing URLs. Use these for deep-linking from firm detail pages.
diff --git a/pages/bills/[court]/[billId].tsx b/pages/bills/[court]/[billId].tsx
index b60308a7d..faa181aa2 100644
--- a/pages/bills/[court]/[billId].tsx
+++ b/pages/bills/[court]/[billId].tsx
@@ -40,6 +40,7 @@ export const getServerSideProps: GetServerSideProps = async ctx => {
         "auth",
         "common",
         "footer",
+        "lobbying",
         "testimony",
         "profile"
       ]))
diff --git a/pages/lobbying/bills.tsx b/pages/lobbying/bills.tsx
new file mode 100644
index 000000000..74e54d1b6
--- /dev/null
+++ b/pages/lobbying/bills.tsx
@@ -0,0 +1,339 @@
+import React, { useMemo, useState } from "react"
+import { useTranslation } from "next-i18next"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+import { useLobbyingFilingsForCourt } from "components/db/lobbying"
+import {
+  LobbyingPositionChip,
+  normalizePosition
+} from "components/lobbying/LobbyingPositionChip"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+
+// General courts with lobbying data, newest first
+const COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
+
+type BillRow = {
+  billId: string
+  court: number
+  total: number
+  support: number
+  oppose: number
+  neutral: number
+  none: number
+}
+
+function groupByBill(
+  filings: ReturnType<typeof useLobbyingFilingsForCourt>["result"]
+): BillRow[] {
+  if (!filings) return []
+  const map = new Map<string, BillRow>()
+  for (const f of filings) {
+    if (!f.billId || f.billId.length <= 2) continue
+    if (!map.has(f.billId)) {
+      map.set(f.billId, {
+        billId: f.billId,
+        court: f.generalCourt,
+        total: 0,
+        support: 0,
+        oppose: 0,
+        neutral: 0,
+        none: 0
+      })
+    }
+    const row = map.get(f.billId)!
+    row[normalizePosition(f.position)]++
+    row.total++
+  }
+  return [...map.values()].sort((a, b) => b.total - a.total)
+}
+
+function PositionMiniBar({ row }: { row: BillRow }) {
+  if (row.total === 0) return null
+  const pct = (n: number) => `${((n / row.total) * 100).toFixed(1)}%`
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: 6,
+        borderRadius: 3,
+        overflow: "hidden",
+        width: 80,
+        background: MAPLE_COLORS.graySubtleBorder
+      }}
+    >
+      {row.support > 0 && (
+        <div
+          style={{ width: pct(row.support), background: MAPLE_COLORS.green }}
+        />
+      )}
+      {row.oppose > 0 && (
+        <div
+          style={{ width: pct(row.oppose), background: MAPLE_COLORS.danger }}
+        />
+      )}
+      {row.neutral > 0 && (
+        <div
+          style={{
+            width: pct(row.neutral),
+            background: MAPLE_COLORS.textMuted
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function LobbyingBillsTable() {
+  const { t } = useTranslation("lobbying")
+  const [court, setCourt] = useState(194)
+  const [posFilter, setPosFilter] = useState<
+    "all" | "support" | "oppose" | "neutral"
+  >("all")
+  const [search, setSearch] = useState("")
+
+  const { result: filings, status, error } = useLobbyingFilingsForCourt(court)
+
+  const bills = useMemo(() => groupByBill(filings), [filings])
+
+  const filtered = useMemo(() => {
+    return bills.filter(b => {
+      if (posFilter !== "all" && b[posFilter] === 0) return false
+      if (search && !b.billId.toLowerCase().includes(search.toLowerCase()))
+        return false
+      return true
+    })
+  }, [bills, posFilter, search])
+
+  return (
+    <>
+      {/* Filters */}
+      <div style={filterRowStyle}>
+        <select
+          value={court}
+          onChange={e => setCourt(Number(e.target.value))}
+          style={selectStyle}
+          aria-label={t("filters.session")}
+        >
+          {COURTS.map(c => (
+            <option key={c} value={c}>
+              {t("filters.session")} {c}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={posFilter}
+          onChange={e => setPosFilter(e.target.value as typeof posFilter)}
+          style={selectStyle}
+          aria-label={t("filters.position")}
+        >
+          <option value="all">{t("filters.allPositions")}</option>
+          <option value="support">{t("position.support")}</option>
+          <option value="oppose">{t("position.oppose")}</option>
+          <option value="neutral">{t("position.neutral")}</option>
+        </select>
+
+        <input
+          type="search"
+          placeholder={t("filters.search")}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={searchStyle}
+          aria-label={t("filters.search")}
+        />
+      </div>
+
+      {/* Status */}
+      {status === "loading" || status === "not-requested" ? (
+        <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
+          {t("loading")}
+        </p>
+      ) : status === "error" ? (
+        <p style={{ color: MAPLE_COLORS.danger, padding: "1rem 0" }}>
+          Error: {error?.message}
+        </p>
+      ) : filtered.length === 0 ? (
+        <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
+          {t("noData")}
+        </p>
+      ) : (
+        <>
+          <p
+            style={{
+              color: MAPLE_COLORS.textMuted,
+              fontSize: 13,
+              marginBottom: "0.5rem"
+            }}
+          >
+            {filtered.length} {t("sections.bills").toLowerCase()}
+          </p>
+          <div style={{ overflowX: "auto" }}>
+            <table style={tableStyle}>
+              <thead>
+                <tr style={theadStyle}>
+                  <th style={thStyle}>Bill</th>
+                  <th style={thStyle}>{t("filters.session")}</th>
+                  <th style={thStyle}>{t("fields.filings")}</th>
+                  <th style={thStyle}>{t("position.support")}</th>
+                  <th style={thStyle}>{t("position.oppose")}</th>
+                  <th style={thStyle}>{t("position.neutral")}</th>
+                  <th style={thStyle}>Positions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map(b => (
+                  <tr key={b.billId} style={trStyle}>
+                    <td style={tdStyle}>
+                      <a
+                        href={`/bills/${b.court}/${b.billId}`}
+                        style={{ color: MAPLE_COLORS.primary, fontWeight: 600 }}
+                      >
+                        {b.billId}
+                      </a>
+                    </td>
+                    <td style={tdStyle}>{b.court}</td>
+                    <td style={tdStyle}>{b.total}</td>
+                    <td style={tdStyle}>
+                      {b.support > 0 && (
+                        <LobbyingPositionChip position="support" />
+                      )}{" "}
+                      {b.support > 0 && (
+                        <span style={{ fontSize: 12 }}>{b.support}</span>
+                      )}
+                    </td>
+                    <td style={tdStyle}>
+                      {b.oppose > 0 && (
+                        <LobbyingPositionChip position="oppose" />
+                      )}{" "}
+                      {b.oppose > 0 && (
+                        <span style={{ fontSize: 12 }}>{b.oppose}</span>
+                      )}
+                    </td>
+                    <td style={tdStyle}>
+                      {b.neutral > 0 && (
+                        <LobbyingPositionChip position="neutral" />
+                      )}{" "}
+                      {b.neutral > 0 && (
+                        <span style={{ fontSize: 12 }}>{b.neutral}</span>
+                      )}
+                    </td>
+                    <td style={{ ...tdStyle, verticalAlign: "middle" }}>
+                      <PositionMiniBar row={b} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+
+      {/* Attribution */}
+      <p style={attributionStyle}>
+        {t("attribution", {
+          0: "MA Secretary of State Lobbyist Public Search"
+        })}
+      </p>
+    </>
+  )
+}
+
+function LobbyingBillsPage() {
+  const { t } = useTranslation("lobbying")
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <a
+            href="/lobbying"
+            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+          >
+            ← {t("titles.overview")}
+          </a>
+          <h1 className="mt-2">{t("titles.bills")}</h1>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <LobbyingBillsTable />
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingBillsPage
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const filterRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "0.75rem",
+  flexWrap: "wrap",
+  marginBottom: "1rem",
+  alignItems: "center"
+}
+
+const selectStyle: React.CSSProperties = {
+  padding: "0.35rem 0.65rem",
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 6,
+  fontSize: 14,
+  color: MAPLE_COLORS.textBody,
+  background: MAPLE_COLORS.surfaceBase,
+  cursor: "pointer"
+}
+
+const searchStyle: React.CSSProperties = {
+  ...selectStyle,
+  minWidth: 180,
+  cursor: "text"
+}
+
+const tableStyle: React.CSSProperties = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody
+}
+
+const theadStyle: React.CSSProperties = {
+  borderBottom: `2px solid ${MAPLE_COLORS.borderDefault}`
+}
+
+const thStyle: React.CSSProperties = {
+  padding: "0.4rem 0.75rem",
+  textAlign: "left",
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: MAPLE_COLORS.textMuted,
+  whiteSpace: "nowrap"
+}
+
+const trStyle: React.CSSProperties = {
+  borderBottom: `1px solid ${MAPLE_COLORS.borderSubtle}`
+}
+
+const tdStyle: React.CSSProperties = {
+  padding: "0.45rem 0.75rem",
+  verticalAlign: "middle"
+}
+
+const attributionStyle: React.CSSProperties = {
+  marginTop: "1.5rem",
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted
+}
diff --git a/pages/lobbying/clients/[clientSlug].tsx b/pages/lobbying/clients/[clientSlug].tsx
new file mode 100644
index 000000000..fdbe0202d
--- /dev/null
+++ b/pages/lobbying/clients/[clientSlug].tsx
@@ -0,0 +1,40 @@
+import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+function LobbyingClientDetail() {
+  const { t } = useTranslation("lobbying")
+  const { query } = useRouter()
+
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <a href="/lobbying/clients" className="text-muted small">
+            ← {t("titles.clients")}
+          </a>
+          <h1 className="mt-2">{query.clientSlug}</h1>
+          <p className="text-muted">{t("titles.client")}</p>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingClientDetail
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: "blocking" }
+}
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
new file mode 100644
index 000000000..1d5f9e5f1
--- /dev/null
+++ b/pages/lobbying/clients/index.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from "next-i18next"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+function LobbyingClients() {
+  const { t } = useTranslation("lobbying")
+
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <a href="/lobbying" className="text-muted small">
+            ← {t("titles.overview")}
+          </a>
+          <h1 className="mt-2">{t("titles.clients")}</h1>
+          <p className="text-muted">{t("subtitle")}</p>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingClients
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
new file mode 100644
index 000000000..eb74bf38c
--- /dev/null
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -0,0 +1,40 @@
+import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+function LobbyingFirmDetail() {
+  const { t } = useTranslation("lobbying")
+  const { query } = useRouter()
+
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <a href="/lobbying/firms" className="text-muted small">
+            ← {t("titles.firms")}
+          </a>
+          <h1 className="mt-2">{query.registrantId}</h1>
+          <p className="text-muted">{t("titles.firm")}</p>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingFirmDetail
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: "blocking" }
+}
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
new file mode 100644
index 000000000..52f95bf6b
--- /dev/null
+++ b/pages/lobbying/firms/index.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from "next-i18next"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+function LobbyingFirms() {
+  const { t } = useTranslation("lobbying")
+
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <a href="/lobbying" className="text-muted small">
+            ← {t("titles.overview")}
+          </a>
+          <h1 className="mt-2">{t("titles.firms")}</h1>
+          <p className="text-muted">{t("subtitle")}</p>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingFirms
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
new file mode 100644
index 000000000..8da8c1adc
--- /dev/null
+++ b/pages/lobbying/index.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from "next-i18next"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+function LobbyingOverview() {
+  const { t } = useTranslation("lobbying")
+
+  return (
+    <Container>
+      <Row className="mt-4 mb-3">
+        <Col>
+          <h1>{t("titles.overview")}</h1>
+          <p className="text-muted">{t("subtitle")}</p>
+        </Col>
+      </Row>
+      <Row className="mb-4">
+        <Col md={4} className="mb-3">
+          <div className="card h-100">
+            <div className="card-body">
+              <h5 className="card-title">{t("sections.bills")}</h5>
+              <a href="/lobbying/bills" className="btn btn-primary btn-sm mt-2">
+                {t("titles.bills")} →
+              </a>
+            </div>
+          </div>
+        </Col>
+        <Col md={4} className="mb-3">
+          <div className="card h-100">
+            <div className="card-body">
+              <h5 className="card-title">{t("sections.clients")}</h5>
+              <a
+                href="/lobbying/clients"
+                className="btn btn-primary btn-sm mt-2"
+              >
+                {t("titles.clients")} →
+              </a>
+            </div>
+          </div>
+        </Col>
+        <Col md={4} className="mb-3">
+          <div className="card h-100">
+            <div className="card-body">
+              <h5 className="card-title">{t("sections.firms")}</h5>
+              <a href="/lobbying/firms" className="btn btn-primary btn-sm mt-2">
+                {t("titles.firms")} →
+              </a>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: LobbyingOverview
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index e973b506e..763ff61ec 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -200,7 +200,8 @@
     "policies": "Policies",
     "unsubscribe": "Unsubscribe",
     "why_use_maple": "Why Use Maple?",
-    "ai_tools": "AI Research Tools"
+    "ai_tools": "AI Research Tools",
+    "lobbying": "Lobbying Explorer"
   },
   "user_updates": "User Updates",
   "view": "View",

From 24d92fb4f74ca613b01018c8f28888677d80a203 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 7 Jul 2026 19:29:03 -0400
Subject: [PATCH 04/25] feat: add lobbying firms and clients browse/detail
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements four new routes for the lobbying explorer:
- /lobbying/firms — browse all registrant firms, filter by type/name
- /lobbying/firms/[registrantId] — firm detail with filings table, client list, disclosure links
- /lobbying/clients — browse unique clients derived from registrant docs
- /lobbying/clients/[clientSlug] — client detail with filings table, linked firms, position summary

Firm and client slugs use URL-encoded entityNameNorm/clientNameNorm.
Both detail pages use getStaticPaths with fallback:blocking.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/db/lobbying.ts               |  49 +++++
 pages/lobbying/clients/[clientSlug].tsx | 233 +++++++++++++++++++++++-
 pages/lobbying/clients/index.tsx        | 187 ++++++++++++++++++-
 pages/lobbying/firms/[registrantId].tsx | 203 ++++++++++++++++++++-
 pages/lobbying/firms/index.tsx          | 201 +++++++++++++++++++-
 5 files changed, 853 insertions(+), 20 deletions(-)

diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
index fb0d4b1a9..8a5ea3db9 100644
--- a/components/db/lobbying.ts
+++ b/components/db/lobbying.ts
@@ -111,6 +111,43 @@ async function fetchClient(
   return snap.exists() ? (snap.data() as LobbyingClientSummary) : undefined
 }
 
+async function fetchAllRegistrants(): Promise<LobbyingRegistrant[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, REGISTRANTS_COLLECTION),
+      orderBy("entityNameNorm"),
+      limit(2000)
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingRegistrant)
+}
+
+async function fetchRegistrantsByEntityName(
+  entityNameNorm: string
+): Promise<LobbyingRegistrant[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, REGISTRANTS_COLLECTION),
+      where("entityNameNorm", "==", entityNameNorm),
+      orderBy("year", "desc")
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingRegistrant)
+}
+
+async function fetchFilingsForEntityName(
+  entityNameNorm: string
+): Promise<LobbyingFiling[]> {
+  const snap = await getDocs(
+    query(
+      collection(firestore, FILINGS_COLLECTION),
+      where("entityNameNorm", "==", entityNameNorm),
+      orderBy("year", "desc")
+    )
+  )
+  return snap.docs.map(d => d.data() as LobbyingFiling)
+}
+
 async function fetchFilingsForCourt(court: number): Promise<LobbyingFiling[]> {
   const snap = await getDocs(
     query(
@@ -140,6 +177,18 @@ export function useLobbyingFilingsForCourt(court: number) {
   return useAsync(fetchFilingsForCourt, [court])
 }
 
+export function useLobbyingAllRegistrants() {
+  return useAsync(fetchAllRegistrants, [])
+}
+
+export function useLobbyingRegistrantsByEntityName(entityNameNorm: string) {
+  return useAsync(fetchRegistrantsByEntityName, [entityNameNorm])
+}
+
+export function useLobbyingFilingsForEntityName(entityNameNorm: string) {
+  return useAsync(fetchFilingsForEntityName, [entityNameNorm])
+}
+
 export function useLobbyingStats() {
   return useAsync(fetchLobbyingStats, [])
 }
diff --git a/pages/lobbying/clients/[clientSlug].tsx b/pages/lobbying/clients/[clientSlug].tsx
index fdbe0202d..51195b6eb 100644
--- a/pages/lobbying/clients/[clientSlug].tsx
+++ b/pages/lobbying/clients/[clientSlug].tsx
@@ -1,31 +1,243 @@
+import React, { useMemo } from "react"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
+import {
+  useLobbyingFilingsForClient,
+  useLobbyingAllRegistrants
+} from "components/db/lobbying"
+import { LobbyingFilingsTable } from "components/lobbying/LobbyingFilingsTable"
+import {
+  LobbyingPositionChip,
+  normalizePosition
+} from "components/lobbying/LobbyingPositionChip"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
-function LobbyingClientDetail() {
+function findFirmsForClient(
+  registrants: LobbyingRegistrant[] | undefined,
+  clientNameNorm: string
+): Array<{
+  entityName: string
+  entityNameNorm: string
+  compensation: number | null
+}> {
+  if (!registrants) return []
+  const map = new Map<
+    string,
+    { entityName: string; entityNameNorm: string; compensation: number | null }
+  >()
+  for (const r of registrants) {
+    const match = r.clients.find(c => c.clientNameNorm === clientNameNorm)
+    if (!match) continue
+    if (!map.has(r.entityNameNorm)) {
+      map.set(r.entityNameNorm, {
+        entityName: r.entityName,
+        entityNameNorm: r.entityNameNorm,
+        compensation: null
+      })
+    }
+    const entry = map.get(r.entityNameNorm)!
+    if (match.compensation != null) {
+      entry.compensation = (entry.compensation ?? 0) + match.compensation
+    }
+  }
+  return [...map.values()].sort((a, b) =>
+    a.entityNameNorm.localeCompare(b.entityNameNorm)
+  )
+}
+
+function ClientDetail() {
   const { t } = useTranslation("lobbying")
   const { query } = useRouter()
 
+  const clientNameNorm = query.clientSlug
+    ? decodeURIComponent(query.clientSlug as string)
+    : ""
+
+  const {
+    result: filings,
+    status: filStatus,
+    error: filError
+  } = useLobbyingFilingsForClient(clientNameNorm)
+  const { result: registrants, status: regStatus } = useLobbyingAllRegistrants()
+
+  const firms = useMemo(
+    () => findFirmsForClient(registrants, clientNameNorm),
+    [registrants, clientNameNorm]
+  )
+
+  const positionCounts = useMemo(() => {
+    const counts = { support: 0, oppose: 0, neutral: 0, none: 0 }
+    for (const f of filings ?? []) counts[normalizePosition(f.position)]++
+    return counts
+  }, [filings])
+
+  const totalCompensation = useMemo(
+    () =>
+      firms.reduce(
+        (sum, f) => (f.compensation != null ? sum + f.compensation : sum),
+        0
+      ),
+    [firms]
+  )
+
+  const years = useMemo(
+    () => [...new Set((filings ?? []).map(f => f.year))].sort((a, b) => b - a),
+    [filings]
+  )
+
+  const loading =
+    filStatus === "loading" ||
+    filStatus === "not-requested" ||
+    regStatus === "loading" ||
+    regStatus === "not-requested"
+
+  const displayName = filings?.[0]?.clientName ?? clientNameNorm
+
+  if (!clientNameNorm) return null
+
   return (
     <Container>
-      <Row className="mt-4 mb-3">
+      <Row className="mt-4 mb-1">
         <Col>
-          <a href="/lobbying/clients" className="text-muted small">
+          <a
+            href="/lobbying/clients"
+            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+          >
             ← {t("titles.clients")}
           </a>
-          <h1 className="mt-2">{query.clientSlug}</h1>
-          <p className="text-muted">{t("titles.client")}</p>
+          <h1 className="mt-2">{displayName}</h1>
+          <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+            {years.length > 0 &&
+              (years.length === 1
+                ? years[0]
+                : `${years[years.length - 1]}–${years[0]}`)}
+            {filings && filings.length > 0 && (
+              <>
+                &nbsp;·&nbsp; {filings.length}{" "}
+                {t("fields.filings").toLowerCase()}
+              </>
+            )}
+            {totalCompensation > 0 && (
+              <>
+                &nbsp;·&nbsp;{" "}
+                {totalCompensation.toLocaleString("en-US", {
+                  style: "currency",
+                  currency: "USD",
+                  maximumFractionDigits: 0
+                })}{" "}
+                total
+              </>
+            )}
+          </p>
         </Col>
       </Row>
+
+      {loading && (
+        <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
+      )}
+      {filStatus === "error" && (
+        <p style={{ color: MAPLE_COLORS.danger }}>Error: {filError?.message}</p>
+      )}
+
+      {!loading && (
+        <Row className="mt-2">
+          <Col md={8}>
+            <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
+            <LobbyingFilingsTable
+              filings={filings ?? []}
+              showBill
+              showClient={false}
+              showFirm
+              showAmount
+            />
+          </Col>
+
+          <Col md={4}>
+            <h5 style={sectionHeadStyle}>Firms</h5>
+            {firms.length === 0 ? (
+              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
+            ) : (
+              <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
+                {firms.map(f => (
+                  <li
+                    key={f.entityNameNorm}
+                    style={{ marginBottom: "0.35rem" }}
+                  >
+                    <a
+                      href={`/lobbying/firms/${encodeURIComponent(
+                        f.entityNameNorm
+                      )}`}
+                      style={{ color: MAPLE_COLORS.primary }}
+                    >
+                      {f.entityName}
+                    </a>
+                    {f.compensation != null && (
+                      <span
+                        style={{ color: MAPLE_COLORS.textMuted, fontSize: 12 }}
+                      >
+                        {" "}
+                        (
+                        {f.compensation.toLocaleString("en-US", {
+                          style: "currency",
+                          currency: "USD",
+                          maximumFractionDigits: 0
+                        })}
+                        )
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {(filings?.length ?? 0) > 0 && (
+              <>
+                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                  {t("filters.position")}
+                </h5>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.4rem",
+                    fontSize: 13
+                  }}
+                >
+                  {(["support", "oppose", "neutral"] as const).map(
+                    pos =>
+                      positionCounts[pos] > 0 && (
+                        <div
+                          key={pos}
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.5rem"
+                          }}
+                        >
+                          <LobbyingPositionChip position={pos} />
+                          <span style={{ color: MAPLE_COLORS.textMuted }}>
+                            {positionCounts[pos]}
+                          </span>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
+          </Col>
+        </Row>
+      )}
     </Container>
   )
 }
 
 export default createPage({
   titleI18nKey: "titles.lobbying",
-  Page: LobbyingClientDetail
+  Page: ClientDetail
 })
 
 export const getStaticProps = createGetStaticTranslationProps([
@@ -38,3 +250,12 @@ export const getStaticProps = createGetStaticTranslationProps([
 export async function getStaticPaths() {
   return { paths: [], fallback: "blocking" }
 }
+
+const sectionHeadStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  color: MAPLE_COLORS.textMuted,
+  marginBottom: "0.6rem"
+}
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index 1d5f9e5f1..0936b6ed2 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -1,20 +1,163 @@
+import React, { useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
+import { useLobbyingAllRegistrants } from "components/db/lobbying"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
-function LobbyingClients() {
+type ClientRow = {
+  clientName: string
+  clientNameNorm: string
+  totalCompensation: number | null
+  registrantCount: number
+}
+
+function deriveClients(
+  registrants: LobbyingRegistrant[] | undefined
+): ClientRow[] {
+  if (!registrants) return []
+  const map = new Map<string, ClientRow>()
+  for (const r of registrants) {
+    for (const c of r.clients) {
+      if (!map.has(c.clientNameNorm)) {
+        map.set(c.clientNameNorm, {
+          clientName: c.clientName,
+          clientNameNorm: c.clientNameNorm,
+          totalCompensation: null,
+          registrantCount: 0
+        })
+      }
+      const row = map.get(c.clientNameNorm)!
+      row.registrantCount++
+      if (c.compensation != null) {
+        row.totalCompensation = (row.totalCompensation ?? 0) + c.compensation
+      }
+    }
+  }
+  return [...map.values()].sort((a, b) =>
+    a.clientNameNorm.localeCompare(b.clientNameNorm)
+  )
+}
+
+function LobbyingClientsTable() {
   const { t } = useTranslation("lobbying")
+  const [search, setSearch] = useState("")
+
+  const { result: registrants, status, error } = useLobbyingAllRegistrants()
+  const clients = useMemo(() => deriveClients(registrants), [registrants])
+
+  const filtered = useMemo(
+    () =>
+      search
+        ? clients.filter(c =>
+            c.clientName.toLowerCase().includes(search.toLowerCase())
+          )
+        : clients,
+    [clients, search]
+  )
+
+  return (
+    <>
+      <div style={{ marginBottom: "1rem" }}>
+        <input
+          type="search"
+          placeholder={t("filters.search")}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={searchStyle}
+        />
+      </div>
+
+      {status === "loading" || status === "not-requested" ? (
+        <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
+          {t("loading")}
+        </p>
+      ) : status === "error" ? (
+        <p style={{ color: MAPLE_COLORS.danger }}>{error?.message}</p>
+      ) : (
+        <>
+          <p
+            style={{
+              color: MAPLE_COLORS.textMuted,
+              fontSize: 13,
+              marginBottom: "0.5rem"
+            }}
+          >
+            {filtered.length} {t("sections.clients").toLowerCase()}
+          </p>
+          <div style={{ overflowX: "auto" }}>
+            <table style={tableStyle}>
+              <thead>
+                <tr style={theadStyle}>
+                  <th style={thStyle}>{t("fields.clientName")}</th>
+                  <th style={thStyle}>Firms</th>
+                  <th style={{ ...thStyle, textAlign: "right" }}>
+                    {t("fields.amount")}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map(c => (
+                  <tr key={c.clientNameNorm} style={trStyle}>
+                    <td style={tdStyle}>
+                      <a
+                        href={`/lobbying/clients/${encodeURIComponent(
+                          c.clientNameNorm
+                        )}`}
+                        style={{ color: MAPLE_COLORS.primary, fontWeight: 600 }}
+                      >
+                        {c.clientName}
+                      </a>
+                    </td>
+                    <td style={{ ...tdStyle, color: MAPLE_COLORS.textMuted }}>
+                      {c.registrantCount}
+                    </td>
+                    <td
+                      style={{
+                        ...tdStyle,
+                        textAlign: "right",
+                        color: MAPLE_COLORS.textMuted
+                      }}
+                    >
+                      {c.totalCompensation != null
+                        ? c.totalCompensation.toLocaleString("en-US", {
+                            style: "currency",
+                            currency: "USD",
+                            maximumFractionDigits: 0
+                          })
+                        : "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
 
+function LobbyingClientsPage() {
+  const { t } = useTranslation("lobbying")
   return (
     <Container>
       <Row className="mt-4 mb-3">
         <Col>
-          <a href="/lobbying" className="text-muted small">
+          <a
+            href="/lobbying"
+            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+          >
             ← {t("titles.overview")}
           </a>
           <h1 className="mt-2">{t("titles.clients")}</h1>
-          <p className="text-muted">{t("subtitle")}</p>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <LobbyingClientsTable />
         </Col>
       </Row>
     </Container>
@@ -23,7 +166,7 @@ function LobbyingClients() {
 
 export default createPage({
   titleI18nKey: "titles.lobbying",
-  Page: LobbyingClients
+  Page: LobbyingClientsPage
 })
 
 export const getStaticProps = createGetStaticTranslationProps([
@@ -32,3 +175,39 @@ export const getStaticProps = createGetStaticTranslationProps([
   "footer",
   "lobbying"
 ])
+
+const searchStyle: React.CSSProperties = {
+  padding: "0.35rem 0.65rem",
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 6,
+  fontSize: 14,
+  color: MAPLE_COLORS.textBody,
+  background: MAPLE_COLORS.surfaceBase,
+  minWidth: 260
+}
+const tableStyle: React.CSSProperties = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody
+}
+const theadStyle: React.CSSProperties = {
+  borderBottom: `2px solid ${MAPLE_COLORS.borderDefault}`
+}
+const thStyle: React.CSSProperties = {
+  padding: "0.4rem 0.75rem",
+  textAlign: "left",
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: MAPLE_COLORS.textMuted,
+  whiteSpace: "nowrap"
+}
+const trStyle: React.CSSProperties = {
+  borderBottom: `1px solid ${MAPLE_COLORS.borderSubtle}`
+}
+const tdStyle: React.CSSProperties = {
+  padding: "0.45rem 0.75rem",
+  verticalAlign: "middle"
+}
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
index eb74bf38c..4d089f4f1 100644
--- a/pages/lobbying/firms/[registrantId].tsx
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -1,31 +1,213 @@
+import React from "react"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
+import {
+  useLobbyingRegistrantsByEntityName,
+  useLobbyingFilingsForEntityName
+} from "components/db/lobbying"
+import { LobbyingFilingsTable } from "components/lobbying/LobbyingFilingsTable"
+import {
+  LobbyingPositionChip,
+  normalizePosition
+} from "components/lobbying/LobbyingPositionChip"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 
-function LobbyingFirmDetail() {
+function FirmDetail() {
   const { t } = useTranslation("lobbying")
   const { query } = useRouter()
 
+  // URL param is the URL-encoded entityNameNorm
+  const entityNameNorm = query.registrantId
+    ? decodeURIComponent(query.registrantId as string)
+    : ""
+
+  const { result: registrants, status: regStatus } =
+    useLobbyingRegistrantsByEntityName(entityNameNorm)
+  const {
+    result: filings,
+    status: filStatus,
+    error: filError
+  } = useLobbyingFilingsForEntityName(entityNameNorm)
+
+  const loading =
+    regStatus === "loading" ||
+    regStatus === "not-requested" ||
+    filStatus === "loading" ||
+    filStatus === "not-requested"
+
+  if (!entityNameNorm) return null
+
+  // Aggregate from all registrant docs for this entity
+  const primary = registrants?.[0]
+  const years = [...new Set(registrants?.map(r => r.year) ?? [])].sort(
+    (a, b) => b - a
+  )
+  const allClients = [
+    ...new Map(
+      (registrants ?? [])
+        .flatMap(r => r.clients)
+        .map(c => [c.clientNameNorm, c])
+    ).values()
+  ].sort((a, b) => a.clientNameNorm.localeCompare(b.clientNameNorm))
+
+  const allDisclosureUrls = [
+    ...new Set((registrants ?? []).flatMap(r => r.disclosureUrls))
+  ]
+
+  const positionCounts = { support: 0, oppose: 0, neutral: 0, none: 0 }
+  for (const f of filings ?? []) positionCounts[normalizePosition(f.position)]++
+
   return (
     <Container>
-      <Row className="mt-4 mb-3">
+      <Row className="mt-4 mb-1">
         <Col>
-          <a href="/lobbying/firms" className="text-muted small">
+          <a
+            href="/lobbying/firms"
+            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+          >
             ← {t("titles.firms")}
           </a>
-          <h1 className="mt-2">{query.registrantId}</h1>
-          <p className="text-muted">{t("titles.firm")}</p>
+          <h1 className="mt-2">{primary?.entityName ?? entityNameNorm}</h1>
+          <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+            {primary?.regType} &nbsp;·&nbsp;{" "}
+            {years.length === 1
+              ? years[0]
+              : `${years[years.length - 1]}–${years[0]}`}
+            &nbsp;·&nbsp; {filings?.length ?? "—"}{" "}
+            {t("fields.filings").toLowerCase()}
+          </p>
         </Col>
       </Row>
+
+      {loading && (
+        <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
+      )}
+      {filStatus === "error" && (
+        <p style={{ color: MAPLE_COLORS.danger }}>Error: {filError?.message}</p>
+      )}
+
+      {!loading && (
+        <Row className="mt-2">
+          {/* Left: filings */}
+          <Col md={8}>
+            <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
+            <LobbyingFilingsTable
+              filings={filings ?? []}
+              showBill
+              showClient
+              showFirm={false}
+              showAmount
+            />
+          </Col>
+
+          {/* Right: clients + disclosure links */}
+          <Col md={4}>
+            <h5 style={sectionHeadStyle}>{t("sections.clients")}</h5>
+            {allClients.length === 0 ? (
+              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
+            ) : (
+              <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
+                {allClients.map(c => (
+                  <li
+                    key={c.clientNameNorm}
+                    style={{ marginBottom: "0.35rem" }}
+                  >
+                    <a
+                      href={`/lobbying/clients/${encodeURIComponent(
+                        c.clientNameNorm
+                      )}`}
+                      style={{ color: MAPLE_COLORS.primary }}
+                    >
+                      {c.clientName}
+                    </a>
+                    {c.compensation != null && (
+                      <span
+                        style={{ color: MAPLE_COLORS.textMuted, fontSize: 12 }}
+                      >
+                        {" "}
+                        (
+                        {c.compensation.toLocaleString("en-US", {
+                          style: "currency",
+                          currency: "USD",
+                          maximumFractionDigits: 0
+                        })}
+                        )
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {allDisclosureUrls.length > 0 && (
+              <>
+                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                  Disclosures
+                </h5>
+                <ul style={{ paddingLeft: "1.25rem", fontSize: 12 }}>
+                  {allDisclosureUrls.map((url, i) => (
+                    <li key={i} style={{ marginBottom: "0.35rem" }}>
+                      <a
+                        href={url}
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{ color: MAPLE_COLORS.primary }}
+                      >
+                        Disclosure {i + 1}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {(filings?.length ?? 0) > 0 && (
+              <>
+                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                  {t("filters.position")}
+                </h5>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.4rem",
+                    fontSize: 13
+                  }}
+                >
+                  {(["support", "oppose", "neutral"] as const).map(
+                    pos =>
+                      positionCounts[pos] > 0 && (
+                        <div
+                          key={pos}
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.5rem"
+                          }}
+                        >
+                          <LobbyingPositionChip position={pos} />
+                          <span style={{ color: MAPLE_COLORS.textMuted }}>
+                            {positionCounts[pos]}
+                          </span>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
+          </Col>
+        </Row>
+      )}
     </Container>
   )
 }
 
 export default createPage({
   titleI18nKey: "titles.lobbying",
-  Page: LobbyingFirmDetail
+  Page: FirmDetail
 })
 
 export const getStaticProps = createGetStaticTranslationProps([
@@ -38,3 +220,12 @@ export const getStaticProps = createGetStaticTranslationProps([
 export async function getStaticPaths() {
   return { paths: [], fallback: "blocking" }
 }
+
+const sectionHeadStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  color: MAPLE_COLORS.textMuted,
+  marginBottom: "0.6rem"
+}
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
index 52f95bf6b..436a07298 100644
--- a/pages/lobbying/firms/index.tsx
+++ b/pages/lobbying/firms/index.tsx
@@ -1,20 +1,171 @@
+import React, { useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
+import { useLobbyingAllRegistrants } from "components/db/lobbying"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
-function LobbyingFirms() {
+type FirmRow = {
+  entityName: string
+  entityNameNorm: string
+  registrantId: string
+  regType: string
+  years: number[]
+  clientCount: number
+}
+
+function groupByFirm(registrants: LobbyingRegistrant[] | undefined): FirmRow[] {
+  if (!registrants) return []
+  const map = new Map<string, FirmRow>()
+  for (const r of registrants) {
+    if (!map.has(r.entityNameNorm)) {
+      map.set(r.entityNameNorm, {
+        entityName: r.entityName,
+        entityNameNorm: r.entityNameNorm,
+        registrantId: r.registrantId,
+        regType: r.regType,
+        years: [],
+        clientCount: 0
+      })
+    }
+    const row = map.get(r.entityNameNorm)!
+    if (!row.years.includes(r.year)) row.years.push(r.year)
+    row.clientCount += r.clients.length
+  }
+  for (const row of map.values()) row.years.sort((a, b) => b - a)
+  return [...map.values()].sort((a, b) =>
+    a.entityNameNorm.localeCompare(b.entityNameNorm)
+  )
+}
+
+function LobbyingFirmsTable() {
   const { t } = useTranslation("lobbying")
+  const [regTypeFilter, setRegTypeFilter] = useState<
+    "all" | "Lobbyist" | "Employer"
+  >("all")
+  const [search, setSearch] = useState("")
+
+  const { result: registrants, status, error } = useLobbyingAllRegistrants()
+  const firms = useMemo(() => groupByFirm(registrants), [registrants])
+
+  const filtered = useMemo(() => {
+    return firms.filter(f => {
+      if (regTypeFilter !== "all" && f.regType !== regTypeFilter) return false
+      if (search && !f.entityName.toLowerCase().includes(search.toLowerCase()))
+        return false
+      return true
+    })
+  }, [firms, regTypeFilter, search])
+
+  return (
+    <>
+      <div style={filterRowStyle}>
+        <select
+          value={regTypeFilter}
+          onChange={e =>
+            setRegTypeFilter(e.target.value as typeof regTypeFilter)
+          }
+          style={selectStyle}
+        >
+          <option value="all">All types</option>
+          <option value="Lobbyist">Lobbyist</option>
+          <option value="Employer">Employer</option>
+        </select>
+        <input
+          type="search"
+          placeholder={t("filters.search")}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={{ ...selectStyle, minWidth: 220, cursor: "text" }}
+        />
+      </div>
+
+      {status === "loading" || status === "not-requested" ? (
+        <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
+          {t("loading")}
+        </p>
+      ) : status === "error" ? (
+        <p style={{ color: MAPLE_COLORS.danger, padding: "1rem 0" }}>
+          Error: {error?.message}
+        </p>
+      ) : (
+        <>
+          <p
+            style={{
+              color: MAPLE_COLORS.textMuted,
+              fontSize: 13,
+              marginBottom: "0.5rem"
+            }}
+          >
+            {filtered.length} {t("sections.firms").toLowerCase()}
+          </p>
+          <div style={{ overflowX: "auto" }}>
+            <table style={tableStyle}>
+              <thead>
+                <tr style={theadStyle}>
+                  <th style={thStyle}>{t("fields.firmName")}</th>
+                  <th style={thStyle}>Type</th>
+                  <th style={thStyle}>Sessions</th>
+                  <th style={thStyle}>{t("fields.clients")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map(f => (
+                  <tr key={f.entityNameNorm} style={trStyle}>
+                    <td style={tdStyle}>
+                      <a
+                        href={`/lobbying/firms/${encodeURIComponent(
+                          f.entityNameNorm
+                        )}`}
+                        style={{ color: MAPLE_COLORS.primary, fontWeight: 600 }}
+                      >
+                        {f.entityName}
+                      </a>
+                    </td>
+                    <td style={tdStyle}>{f.regType}</td>
+                    <td
+                      style={{
+                        ...tdStyle,
+                        color: MAPLE_COLORS.textMuted,
+                        fontSize: 12
+                      }}
+                    >
+                      {f.years.length === 1
+                        ? f.years[0]
+                        : `${f.years[f.years.length - 1]}–${f.years[0]}`}
+                    </td>
+                    <td style={tdStyle}>{f.clientCount}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
 
+function LobbyingFirmsPage() {
+  const { t } = useTranslation("lobbying")
   return (
     <Container>
       <Row className="mt-4 mb-3">
         <Col>
-          <a href="/lobbying" className="text-muted small">
+          <a
+            href="/lobbying"
+            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+          >
             ← {t("titles.overview")}
           </a>
           <h1 className="mt-2">{t("titles.firms")}</h1>
-          <p className="text-muted">{t("subtitle")}</p>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <LobbyingFirmsTable />
         </Col>
       </Row>
     </Container>
@@ -23,7 +174,7 @@ function LobbyingFirms() {
 
 export default createPage({
   titleI18nKey: "titles.lobbying",
-  Page: LobbyingFirms
+  Page: LobbyingFirmsPage
 })
 
 export const getStaticProps = createGetStaticTranslationProps([
@@ -32,3 +183,45 @@ export const getStaticProps = createGetStaticTranslationProps([
   "footer",
   "lobbying"
 ])
+
+const filterRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "0.75rem",
+  flexWrap: "wrap",
+  marginBottom: "1rem",
+  alignItems: "center"
+}
+const selectStyle: React.CSSProperties = {
+  padding: "0.35rem 0.65rem",
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 6,
+  fontSize: 14,
+  color: MAPLE_COLORS.textBody,
+  background: MAPLE_COLORS.surfaceBase
+}
+const tableStyle: React.CSSProperties = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody
+}
+const theadStyle: React.CSSProperties = {
+  borderBottom: `2px solid ${MAPLE_COLORS.borderDefault}`
+}
+const thStyle: React.CSSProperties = {
+  padding: "0.4rem 0.75rem",
+  textAlign: "left",
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: MAPLE_COLORS.textMuted,
+  whiteSpace: "nowrap"
+}
+const trStyle: React.CSSProperties = {
+  borderBottom: `1px solid ${MAPLE_COLORS.borderSubtle}`
+}
+const tdStyle: React.CSSProperties = {
+  padding: "0.45rem 0.75rem",
+  verticalAlign: "middle"
+}

From 03a12bd611bb57947f3aa0b7822674b43ad2fa8c Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 7 Jul 2026 19:32:32 -0400
Subject: [PATCH 05/25] fix: filter sentinel and empty clients from clients
 browse page

Skips clientNameNorm values that are empty or equal to _total_salary_,
which is used for pre-2013 legacy filings where compensation is reported
as a single total rather than per client.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pages/lobbying/clients/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index 0936b6ed2..15cad389e 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -7,6 +7,8 @@ import { useLobbyingAllRegistrants } from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
+const LEGACY_TOTAL_CLIENT = "_total_salary_"
+
 type ClientRow = {
   clientName: string
   clientNameNorm: string
@@ -21,6 +23,8 @@ function deriveClients(
   const map = new Map<string, ClientRow>()
   for (const r of registrants) {
     for (const c of r.clients) {
+      if (!c.clientNameNorm || c.clientNameNorm === LEGACY_TOTAL_CLIENT)
+        continue
       if (!map.has(c.clientNameNorm)) {
         map.set(c.clientNameNorm, {
           clientName: c.clientName,

From 96393e5aef16ce5f0e4de6f0433c32efa47bcf46 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 7 Jul 2026 21:21:05 -0400
Subject: [PATCH 06/25] feat: lobbying overview page with stats, chart, and
 attribution fix

- Build out /lobbying overview: stat cards (bills, clients, sessions, spend),
  dual-axis spend+filings chart, entry cards linking to browse pages
- Extract LobbyingAttribution component with correct SoS link
- Fix broken attribution on bills page (was passing Trans interpolation syntax
  to t() which rendered literal <0> tags)
- Stats and chart degrade gracefully when the pipeline stats doc is absent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/lobbying/LobbyingAttribution.tsx |  29 ++
 pages/lobbying/bills.tsx                    |  14 +-
 pages/lobbying/index.tsx                    | 363 ++++++++++++++++++--
 public/locales/en/lobbying.json             |   2 +-
 4 files changed, 367 insertions(+), 41 deletions(-)
 create mode 100644 components/lobbying/LobbyingAttribution.tsx

diff --git a/components/lobbying/LobbyingAttribution.tsx b/components/lobbying/LobbyingAttribution.tsx
new file mode 100644
index 000000000..3271b71f1
--- /dev/null
+++ b/components/lobbying/LobbyingAttribution.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { useTranslation } from "next-i18next"
+import { MAPLE_COLORS } from "./chartTheme"
+
+const SOS_URL = "https://www.sec.state.ma.us/LobbyistPublicSearch/Default.aspx"
+
+export const LobbyingAttribution: React.FC<{ className?: string }> = ({
+  className
+}) => {
+  const { t } = useTranslation("lobbying")
+  return (
+    <p style={style} className={className}>
+      <a href={SOS_URL} target="_blank" rel="noreferrer" style={linkStyle}>
+        {t("attribution")}
+      </a>
+    </p>
+  )
+}
+
+const style: React.CSSProperties = {
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted,
+  marginTop: "1rem"
+}
+
+const linkStyle: React.CSSProperties = {
+  color: MAPLE_COLORS.textMuted,
+  textDecoration: "underline"
+}
diff --git a/pages/lobbying/bills.tsx b/pages/lobbying/bills.tsx
index 74e54d1b6..ba381be64 100644
--- a/pages/lobbying/bills.tsx
+++ b/pages/lobbying/bills.tsx
@@ -9,6 +9,7 @@ import {
   normalizePosition
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 
 // General courts with lobbying data, newest first
 const COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
@@ -229,12 +230,7 @@ function LobbyingBillsTable() {
         </>
       )}
 
-      {/* Attribution */}
-      <p style={attributionStyle}>
-        {t("attribution", {
-          0: "MA Secretary of State Lobbyist Public Search"
-        })}
-      </p>
+      <LobbyingAttribution />
     </>
   )
 }
@@ -331,9 +327,3 @@ const tdStyle: React.CSSProperties = {
   padding: "0.45rem 0.75rem",
   verticalAlign: "middle"
 }
-
-const attributionStyle: React.CSSProperties = {
-  marginTop: "1.5rem",
-  fontSize: 12,
-  color: MAPLE_COLORS.textMuted
-}
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
index 8da8c1adc..073d18a2e 100644
--- a/pages/lobbying/index.tsx
+++ b/pages/lobbying/index.tsx
@@ -1,52 +1,286 @@
+import React, { useMemo } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
+import { useLobbyingStats } from "components/db/lobbying"
+import type { LobbyingStats } from "functions/src/lobbying/types"
+import {
+  BAR_PROPS_COMPACT,
+  ChartContainer,
+  formatCount,
+  formatCurrency,
+  formatCurrencyCompact,
+  GRID_PROPS,
+  LINE_PROPS_EMPHASIS,
+  MAPLE_COLORS,
+  MapleTooltip,
+  X_AXIS_PROPS,
+  Y_AXIS_PROPS
+} from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+
+// ── Stats bar ─────────────────────────────────────────────────────────────────
+
+function StatCard({
+  label,
+  value
+}: {
+  label: string
+  value: string | number | undefined
+}) {
+  return (
+    <div style={statCardStyle}>
+      <div style={statValueStyle}>
+        {value ?? <span style={{ color: MAPLE_COLORS.borderDefault }}>—</span>}
+      </div>
+      <div style={statLabelStyle}>{label}</div>
+    </div>
+  )
+}
+
+function StatsBar({ stats }: { stats: LobbyingStats | undefined }) {
+  const { t } = useTranslation("lobbying")
+
+  const totalSpend = useMemo(() => {
+    if (!stats) return undefined
+    const total = Object.values(stats.spendByYear).reduce((s, v) => s + v, 0)
+    return total > 0 ? formatCurrency(total) : undefined
+  }, [stats])
+
+  return (
+    <div style={statsRowStyle}>
+      <StatCard
+        label={t("stats.totalBills")}
+        value={
+          stats
+            ? stats.totalBillsWithFilings.toLocaleString("en-US")
+            : undefined
+        }
+      />
+      <StatCard
+        label={t("stats.totalClients")}
+        value={stats ? stats.totalClients.toLocaleString("en-US") : undefined}
+      />
+      <StatCard
+        label={t("stats.sessionsCovered")}
+        value={stats ? stats.courtsWithData.length : undefined}
+      />
+      <StatCard label={t("stats.totalSpend")} value={totalSpend} />
+    </div>
+  )
+}
+
+// ── Spend + filings chart ─────────────────────────────────────────────────────
+
+type YearRow = { year: number; spend: number; filings: number }
+
+function buildYearData(stats: LobbyingStats): YearRow[] {
+  const years = new Set([
+    ...Object.keys(stats.spendByYear),
+    ...Object.keys(stats.filingsByYear)
+  ])
+  return [...years]
+    .map(y => ({
+      year: Number(y),
+      spend: stats.spendByYear[y] ?? 0,
+      filings: stats.filingsByYear[y] ?? 0
+    }))
+    .filter(r => r.year >= 2005)
+    .sort((a, b) => a.year - b.year)
+}
+
+function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
+  const { t } = useTranslation("lobbying")
+  const data = useMemo(() => (stats ? buildYearData(stats) : []), [stats])
+
+  if (!stats || data.length === 0) return null
+
+  return (
+    <ChartContainer
+      title={`${t("fields.amount")} & ${t("fields.filings")} by ${t(
+        "filters.year"
+      )}`}
+      height={240}
+      className="mb-4"
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart
+          data={data}
+          margin={{ top: 4, right: 48, left: 0, bottom: 0 }}
+        >
+          <CartesianGrid {...GRID_PROPS} />
+          <XAxis dataKey="year" {...X_AXIS_PROPS} />
+          <YAxis
+            yAxisId="spend"
+            orientation="left"
+            {...Y_AXIS_PROPS}
+            tickFormatter={formatCurrencyCompact}
+          />
+          <YAxis
+            yAxisId="filings"
+            orientation="right"
+            tick={{
+              fill: MAPLE_COLORS.textMuted,
+              fontSize: 12,
+              fontFamily: "Nunito, system-ui, sans-serif"
+            }}
+            axisLine={false}
+            tickLine={false}
+            width={48}
+            tickFormatter={formatCount}
+          />
+          <Tooltip
+            content={props => (
+              <MapleTooltip
+                {...props}
+                labelFormatter={y => `${y}`}
+                valueFormatter={v => {
+                  const n = Number(v)
+                  return n > 10_000 ? formatCurrency(n) : formatCount(n)
+                }}
+              />
+            )}
+          />
+          <Bar
+            yAxisId="spend"
+            dataKey="spend"
+            name={t("fields.amount")}
+            fill={MAPLE_COLORS.periwinkle}
+            {...BAR_PROPS_COMPACT}
+          />
+          <Line
+            yAxisId="filings"
+            dataKey="filings"
+            name={t("fields.filings")}
+            stroke={MAPLE_COLORS.primary}
+            {...LINE_PROPS_EMPHASIS}
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </ChartContainer>
+  )
+}
+
+// ── Entry cards ───────────────────────────────────────────────────────────────
+
+function EntryCard({
+  title,
+  description,
+  href,
+  count,
+  countLabel
+}: {
+  title: string
+  description: string
+  href: string
+  count?: number
+  countLabel?: string
+}) {
+  return (
+    <a href={href} style={entryCardStyle}>
+      <div style={entryCardInner}>
+        <div>
+          <div style={entryCardTitle}>{title}</div>
+          <div style={entryCardDesc}>{description}</div>
+        </div>
+        {count != null && (
+          <div style={entryCardCount}>
+            {count.toLocaleString("en-US")}
+            {countLabel && (
+              <span style={{ fontSize: 11, fontWeight: 400, marginLeft: 4 }}>
+                {countLabel}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </a>
+  )
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
 
 function LobbyingOverview() {
   const { t } = useTranslation("lobbying")
+  const { result: stats, status } = useLobbyingStats()
+  const loading = status === "loading" || status === "not-requested"
 
   return (
     <Container>
       <Row className="mt-4 mb-3">
         <Col>
           <h1>{t("titles.overview")}</h1>
-          <p className="text-muted">{t("subtitle")}</p>
+          <p style={{ color: MAPLE_COLORS.textMuted }}>{t("subtitle")}</p>
         </Col>
       </Row>
+
+      {/* Stats */}
+      <Row className="mb-4">
+        <Col>
+          {loading ? (
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
+              {t("loading")}
+            </p>
+          ) : (
+            <StatsBar stats={stats} />
+          )}
+        </Col>
+      </Row>
+
+      {/* Chart */}
+      {!loading && stats && (
+        <Row className="mb-4">
+          <Col>
+            <SpendFilingsChart stats={stats} />
+          </Col>
+        </Row>
+      )}
+
+      {/* Entry cards */}
       <Row className="mb-4">
         <Col md={4} className="mb-3">
-          <div className="card h-100">
-            <div className="card-body">
-              <h5 className="card-title">{t("sections.bills")}</h5>
-              <a href="/lobbying/bills" className="btn btn-primary btn-sm mt-2">
-                {t("titles.bills")} →
-              </a>
-            </div>
-          </div>
+          <EntryCard
+            title={t("sections.bills")}
+            description={t("titles.bills")}
+            href="/lobbying/bills"
+            count={stats?.totalBillsWithFilings}
+            countLabel={t("sections.bills").toLowerCase()}
+          />
         </Col>
         <Col md={4} className="mb-3">
-          <div className="card h-100">
-            <div className="card-body">
-              <h5 className="card-title">{t("sections.clients")}</h5>
-              <a
-                href="/lobbying/clients"
-                className="btn btn-primary btn-sm mt-2"
-              >
-                {t("titles.clients")} →
-              </a>
-            </div>
-          </div>
+          <EntryCard
+            title={t("sections.clients")}
+            description={t("titles.clients")}
+            href="/lobbying/clients"
+            count={stats?.totalClients}
+            countLabel={t("sections.clients").toLowerCase()}
+          />
         </Col>
         <Col md={4} className="mb-3">
-          <div className="card h-100">
-            <div className="card-body">
-              <h5 className="card-title">{t("sections.firms")}</h5>
-              <a href="/lobbying/firms" className="btn btn-primary btn-sm mt-2">
-                {t("titles.firms")} →
-              </a>
-            </div>
-          </div>
+          <EntryCard
+            title={t("sections.firms")}
+            description={t("titles.firms")}
+            href="/lobbying/firms"
+            count={stats?.totalRegistrants}
+            countLabel="registrants"
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col>
+          <LobbyingAttribution />
         </Col>
       </Row>
     </Container>
@@ -64,3 +298,76 @@ export const getStaticProps = createGetStaticTranslationProps([
   "footer",
   "lobbying"
 ])
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const statsRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "1rem",
+  flexWrap: "wrap"
+}
+
+const statCardStyle: React.CSSProperties = {
+  flex: "1 1 160px",
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  padding: "1rem 1.25rem",
+  boxShadow: "0 0.25rem 1rem rgba(15, 23, 42, 0.04)"
+}
+
+const statValueStyle: React.CSSProperties = {
+  fontSize: 24,
+  fontWeight: 700,
+  color: MAPLE_COLORS.primary,
+  fontFamily: "Nunito, system-ui, sans-serif",
+  lineHeight: 1.2
+}
+
+const statLabelStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted,
+  marginTop: "0.25rem",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  fontWeight: 600
+}
+
+const entryCardStyle: React.CSSProperties = {
+  display: "block",
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  padding: "1.25rem",
+  textDecoration: "none",
+  color: MAPLE_COLORS.textBody,
+  boxShadow: "0 0.25rem 1rem rgba(15, 23, 42, 0.04)",
+  transition: "box-shadow 0.15s, border-color 0.15s",
+  height: "100%"
+}
+
+const entryCardInner: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start"
+}
+
+const entryCardTitle: React.CSSProperties = {
+  fontWeight: 700,
+  fontSize: 16,
+  color: MAPLE_COLORS.primary
+}
+
+const entryCardDesc: React.CSSProperties = {
+  fontSize: 13,
+  color: MAPLE_COLORS.textMuted,
+  marginTop: "0.2rem"
+}
+
+const entryCardCount: React.CSSProperties = {
+  fontSize: 20,
+  fontWeight: 700,
+  color: MAPLE_COLORS.textStrong,
+  fontFamily: "Nunito, system-ui, sans-serif",
+  whiteSpace: "nowrap"
+}
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
index e87b94c54..1bc7eaeb8 100644
--- a/public/locales/en/lobbying.json
+++ b/public/locales/en/lobbying.json
@@ -35,7 +35,7 @@
     "bills": "Bills lobbied",
     "clients": "Clients represented"
   },
-  "attribution": "Data from the <0>MA Secretary of State Lobbyist Public Search</0>.",
+  "attribution": "Data from the MA Secretary of State Lobbyist Public Search.",
   "noData": "No lobbying filings found.",
   "loading": "Loading lobbying data…",
   "titles": {

From d6e2977c632e7fc74a2a9408a2d6f9727660f83c Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Wed, 8 Jul 2026 20:31:25 -0400
Subject: [PATCH 07/25] feat: add attribution to all lobbying pages and seed
 stats script

- Add LobbyingAttribution to firms browse/detail and clients browse/detail
- Add seedLobbyingStats admin script: reads all filings and registrants,
  computes totals and per-year breakdowns, writes to lobbyingMeta/stats
  (run with: yarn firebase-admin run-script seedLobbyingStats --env dev)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pages/lobbying/clients/[clientSlug].tsx     |  2 +
 pages/lobbying/clients/index.tsx            |  6 ++
 pages/lobbying/firms/[registrantId].tsx     |  2 +
 pages/lobbying/firms/index.tsx              |  6 ++
 scripts/firebase-admin/seedLobbyingStats.ts | 83 +++++++++++++++++++++
 5 files changed, 99 insertions(+)
 create mode 100644 scripts/firebase-admin/seedLobbyingStats.ts

diff --git a/pages/lobbying/clients/[clientSlug].tsx b/pages/lobbying/clients/[clientSlug].tsx
index 51195b6eb..21e09ae55 100644
--- a/pages/lobbying/clients/[clientSlug].tsx
+++ b/pages/lobbying/clients/[clientSlug].tsx
@@ -14,6 +14,7 @@ import {
   normalizePosition
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
 function findFirmsForClient(
@@ -231,6 +232,7 @@ function ClientDetail() {
           </Col>
         </Row>
       )}
+      <LobbyingAttribution className="mt-3" />
     </Container>
   )
 }
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index 15cad389e..5bc3d86cd 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -5,6 +5,7 @@ import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
 import { useLobbyingAllRegistrants } from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
 const LEGACY_TOTAL_CLIENT = "_total_salary_"
@@ -164,6 +165,11 @@ function LobbyingClientsPage() {
           <LobbyingClientsTable />
         </Col>
       </Row>
+      <Row>
+        <Col>
+          <LobbyingAttribution />
+        </Col>
+      </Row>
     </Container>
   )
 }
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
index 4d089f4f1..9a112330d 100644
--- a/pages/lobbying/firms/[registrantId].tsx
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -14,6 +14,7 @@ import {
   normalizePosition
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 
 function FirmDetail() {
   const { t } = useTranslation("lobbying")
@@ -201,6 +202,7 @@ function FirmDetail() {
           </Col>
         </Row>
       )}
+      <LobbyingAttribution className="mt-3" />
     </Container>
   )
 }
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
index 436a07298..4559025d9 100644
--- a/pages/lobbying/firms/index.tsx
+++ b/pages/lobbying/firms/index.tsx
@@ -5,6 +5,7 @@ import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
 import { useLobbyingAllRegistrants } from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
 type FirmRow = {
@@ -168,6 +169,11 @@ function LobbyingFirmsPage() {
           <LobbyingFirmsTable />
         </Col>
       </Row>
+      <Row>
+        <Col>
+          <LobbyingAttribution />
+        </Col>
+      </Row>
     </Container>
   )
 }
diff --git a/scripts/firebase-admin/seedLobbyingStats.ts b/scripts/firebase-admin/seedLobbyingStats.ts
new file mode 100644
index 000000000..d5b096fa9
--- /dev/null
+++ b/scripts/firebase-admin/seedLobbyingStats.ts
@@ -0,0 +1,83 @@
+import { Script } from "./types"
+
+const FILINGS_COLLECTION = "lobbyingFilings"
+const REGISTRANTS_COLLECTION = "lobbyingRegistrants"
+const STATS_COLLECTION = "lobbyingMeta"
+const STATS_DOC_ID = "stats"
+
+export const script: Script = async ({ db }) => {
+  console.log("Reading lobbyingFilings…")
+  const filingsSnap = await db.collection(FILINGS_COLLECTION).get()
+  console.log(`  ${filingsSnap.size} filings`)
+
+  console.log("Reading lobbyingRegistrants…")
+  const registrantsSnap = await db.collection(REGISTRANTS_COLLECTION).get()
+  console.log(`  ${registrantsSnap.size} registrants`)
+
+  const entityNames = new Set<string>()
+  const clientNames = new Set<string>()
+  const bills = new Set<string>()
+  const courts = new Set<number>()
+  const spendByYear: Record<string, number> = {}
+  const filingsByYear: Record<string, number> = {}
+
+  for (const doc of filingsSnap.docs) {
+    const d = doc.data()
+    const year: number = d.year
+    const gc: number = d.generalCourt
+
+    entityNames.add(d.entityNameNorm ?? d.entityName)
+
+    if (d.clientNameNorm) clientNames.add(d.clientNameNorm)
+
+    if (d.billId && d.billId.length > 2) {
+      bills.add(`${gc}/${d.billId}`)
+    }
+
+    courts.add(gc)
+
+    const y = String(year)
+    filingsByYear[y] = (filingsByYear[y] ?? 0) + 1
+    if (d.amount != null) {
+      spendByYear[y] = (spendByYear[y] ?? 0) + d.amount
+    }
+  }
+
+  // Also count unique clients from registrant docs (more reliable than filings)
+  const clientNormsFromRegistrants = new Set<string>()
+  for (const doc of registrantsSnap.docs) {
+    const d = doc.data()
+    for (const c of d.clients ?? []) {
+      if (c.clientNameNorm) clientNormsFromRegistrants.add(c.clientNameNorm)
+    }
+  }
+  // Use whichever source gives more clients
+  const totalClients = Math.max(
+    clientNames.size,
+    clientNormsFromRegistrants.size
+  )
+
+  const stats = {
+    totalFilings: filingsSnap.size,
+    totalRegistrants: registrantsSnap.size,
+    totalClients,
+    totalBillsWithFilings: bills.size,
+    courtsWithData: [...courts].sort((a, b) => a - b),
+    spendByYear,
+    filingsByYear
+  }
+
+  console.log("Stats computed:")
+  console.log(`  totalFilings:          ${stats.totalFilings}`)
+  console.log(`  totalRegistrants:      ${stats.totalRegistrants}`)
+  console.log(`  totalClients:          ${stats.totalClients}`)
+  console.log(`  totalBillsWithFilings: ${stats.totalBillsWithFilings}`)
+  console.log(`  courts:                ${stats.courtsWithData.join(", ")}`)
+
+  await db
+    .collection(STATS_COLLECTION)
+    .doc(STATS_DOC_ID)
+    .set(stats, { merge: true })
+
+  console.log(`Written to ${STATS_COLLECTION}/${STATS_DOC_ID}`)
+}

From 748f5075d497cce3a444ba282a67c49e0f693f7c Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Wed, 8 Jul 2026 20:49:43 -0400
Subject: [PATCH 08/25] fix: add lobbyingMeta read rule and move Lobbying after
 Testimony in nav

- Add allow read: if true for lobbyingMeta collection so the stats doc
  is readable by the frontend (was silently returning undefined)
- Move Lobbying nav item after Testimony in both mobile and desktop nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Navbar.tsx | 18 +++++++++---------
 firestore.rules       |  4 ++++
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index a8b708eae..c404b0871 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -73,9 +73,6 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
     return (
       <Nav className="my-4">
         <NavbarLinkBills handleClick={closeNav} />
-        {flags().lobbyingTable ? (
-          <NavbarLinkLobbying handleClick={closeNav} />
-        ) : null}
         {flags().ballotQuestions ? (
           <NavbarLinkBallotQuestions handleClick={closeNav} />
         ) : null}
@@ -83,6 +80,9 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
           <NavbarLinkHearings handleClick={closeNav} />
         ) : null}
         <NavbarLinkTestimony handleClick={closeNav} />
+        {flags().lobbyingTable ? (
+          <NavbarLinkLobbying handleClick={closeNav} />
+        ) : null}
         {authenticated ? <NavbarLinkNewsfeed handleClick={closeNav} /> : <></>}
         <NavDropdown className={"navLink-primary"} title={t("about")}>
           <NavbarLinkGoals handleClick={closeNav} />
@@ -219,12 +219,6 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         <NavbarLinkBills />
       </div>
 
-      {flags().lobbyingTable ? (
-        <div className={`align-self-center`}>
-          <NavbarLinkLobbying />
-        </div>
-      ) : null}
-
       {flags().ballotQuestions ? (
         <div className={`align-self-center`}>
           <NavbarLinkBallotQuestions />
@@ -243,6 +237,12 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         <NavbarLinkTestimony />
       </div>
 
+      {flags().lobbyingTable ? (
+        <div className={`align-self-center`}>
+          <NavbarLinkLobbying />
+        </div>
+      ) : null}
+
       {authenticated ? (
         <div className="align-self-center">
           <NavbarLinkNewsfeed />
diff --git a/firestore.rules b/firestore.rules
index 42db67276..df5659ac5 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -111,6 +111,10 @@ service cloud.firestore {
       allow read: if true;
       allow write: if false;
     }
+    match /lobbyingMeta/{id} {
+      allow read: if true;
+      allow write: if false;
+    }
     match /transcriptions/{tid} {
       // public, read-only
       allow read: if true

From a918d8859d9bbfe397cdd311e5466b5eef04b908 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Wed, 8 Jul 2026 22:10:11 -0400
Subject: [PATCH 09/25] feat: add pagination, subnav, sortable headers, and
 bill filings detail to lobbying explorer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add LobbyingSubnav (Overview / Bills / Clients / Lobbying Firms) to all lobbying pages
- Add usePagination hook and LobbyingPaginationBar component (50/page on all browse indexes)
- Add sortable column headers (SortTh) to bills, clients, and firms index pages
- Move bills.tsx → bills/index.tsx; add bills/[court]/[billId].tsx paginated filings detail
- Filter _total_salary_ sentinel by both clientName and clientNameNorm in clients browse
- Fix duplicate "View all lobbying activity" link in LobbyingBillCard
- Fix undefined–undefined year range on firm detail when registrant query fails
- Add composite Firestore indexes for entityNameNorm+year and clientNameNorm+year queries
- Add showActivity prop to LobbyingFilingsTable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/lobbying/LobbyingBillCard.tsx      |   3 +-
 components/lobbying/LobbyingFilingsTable.tsx  |   8 +
 components/lobbying/LobbyingPaginationBar.tsx |  75 ++++
 components/lobbying/LobbyingSubnav.tsx        |  71 ++++
 components/lobbying/usePagination.ts          |  18 +
 firestore.indexes.json                        |  28 ++
 pages/lobbying/bills/[court]/[billId].tsx     | 400 ++++++++++++++++++
 pages/lobbying/{bills.tsx => bills/index.tsx} | 177 ++++++--
 pages/lobbying/clients/[clientSlug].tsx       | 259 ++++++------
 pages/lobbying/clients/index.tsx              | 191 +++++++--
 pages/lobbying/firms/[registrantId].tsx       | 276 ++++++------
 pages/lobbying/firms/index.tsx                | 169 ++++++--
 pages/lobbying/index.tsx                      | 130 +++---
 13 files changed, 1381 insertions(+), 424 deletions(-)
 create mode 100644 components/lobbying/LobbyingPaginationBar.tsx
 create mode 100644 components/lobbying/LobbyingSubnav.tsx
 create mode 100644 components/lobbying/usePagination.ts
 create mode 100644 pages/lobbying/bills/[court]/[billId].tsx
 rename pages/lobbying/{bills.tsx => bills/index.tsx} (67%)

diff --git a/components/lobbying/LobbyingBillCard.tsx b/components/lobbying/LobbyingBillCard.tsx
index 36f6f3cfc..0cc138046 100644
--- a/components/lobbying/LobbyingBillCard.tsx
+++ b/components/lobbying/LobbyingBillCard.tsx
@@ -55,7 +55,7 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
   }
   const total = filings.length
 
-  const explorerHref = `/lobbying/bills?bill=${billId}&gc=${court}`
+  const explorerHref = `/lobbying/bills/${court}/${billId}`
 
   return (
     <div style={cardStyle} className={className}>
@@ -93,7 +93,6 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
         showFirm
         showAmount={false}
         maxRows={5}
-        onViewAll={() => window.open(explorerHref, "_self")}
       />
 
       <a href={explorerHref} style={viewAllLinkStyle}>
diff --git a/components/lobbying/LobbyingFilingsTable.tsx b/components/lobbying/LobbyingFilingsTable.tsx
index c2eed2fb7..170458daf 100644
--- a/components/lobbying/LobbyingFilingsTable.tsx
+++ b/components/lobbying/LobbyingFilingsTable.tsx
@@ -11,6 +11,7 @@ interface LobbyingFilingsTableProps {
   showClient?: boolean
   showFirm?: boolean
   showAmount?: boolean
+  showActivity?: boolean
   maxRows?: number
   onViewAll?: () => void
 }
@@ -21,6 +22,7 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
   showClient = true,
   showFirm = true,
   showAmount = true,
+  showActivity = false,
   maxRows,
   onViewAll
 }) => {
@@ -44,6 +46,7 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
             {showBill && <th>{t("fields.bills")}</th>}
             {showClient && <th>{t("fields.clientName")}</th>}
             {showFirm && <th>{t("fields.firmName")}</th>}
+            {showActivity && <th>Activity</th>}
             <th>{t("filters.position")}</th>
             {showAmount && (
               <th style={{ textAlign: "right" }}>{t("fields.amount")}</th>
@@ -67,6 +70,11 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
               )}
               {showClient && <td style={cellStyle}>{f.clientName}</td>}
               {showFirm && <td style={cellStyle}>{f.entityName}</td>}
+              {showActivity && (
+                <td style={{ ...cellStyle, color: MAPLE_COLORS.textMuted }}>
+                  {f.activityTitle || "—"}
+                </td>
+              )}
               <td style={cellStyle}>
                 <LobbyingPositionChip position={f.position} />
               </td>
diff --git a/components/lobbying/LobbyingPaginationBar.tsx b/components/lobbying/LobbyingPaginationBar.tsx
new file mode 100644
index 000000000..b851a46ab
--- /dev/null
+++ b/components/lobbying/LobbyingPaginationBar.tsx
@@ -0,0 +1,75 @@
+import React from "react"
+import { MAPLE_COLORS } from "./chartTheme"
+
+interface Props {
+  page: number
+  totalPages: number
+  totalItems: number
+  pageSize: number
+  onPage: (p: number) => void
+}
+
+export function LobbyingPaginationBar({
+  page,
+  totalPages,
+  totalItems,
+  pageSize,
+  onPage
+}: Props) {
+  if (totalPages <= 1) return null
+  const start = (page - 1) * pageSize + 1
+  const end = Math.min(page * pageSize, totalItems)
+
+  return (
+    <div style={wrapStyle}>
+      <span style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
+        {start}–{end} of {totalItems}
+      </span>
+      <div style={{ display: "flex", gap: "0.25rem" }}>
+        <button
+          onClick={() => onPage(page - 1)}
+          disabled={page === 1}
+          style={btnStyle(page === 1)}
+        >
+          ← Prev
+        </button>
+        <span
+          style={{
+            ...btnStyle(false),
+            cursor: "default",
+            color: MAPLE_COLORS.textMuted
+          }}
+        >
+          {page} / {totalPages}
+        </span>
+        <button
+          onClick={() => onPage(page + 1)}
+          disabled={page === totalPages}
+          style={btnStyle(page === totalPages)}
+        >
+          Next →
+        </button>
+      </div>
+    </div>
+  )
+}
+
+const wrapStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0.75rem 0 0.25rem",
+  flexWrap: "wrap",
+  gap: "0.5rem"
+}
+
+const btnStyle = (disabled: boolean): React.CSSProperties => ({
+  padding: "0.3rem 0.7rem",
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 4,
+  background: MAPLE_COLORS.surfaceBase,
+  color: disabled ? MAPLE_COLORS.textMuted : MAPLE_COLORS.textBody,
+  fontSize: 13,
+  cursor: disabled ? "default" : "pointer",
+  opacity: disabled ? 0.5 : 1
+})
diff --git a/components/lobbying/LobbyingSubnav.tsx b/components/lobbying/LobbyingSubnav.tsx
new file mode 100644
index 000000000..850e2298c
--- /dev/null
+++ b/components/lobbying/LobbyingSubnav.tsx
@@ -0,0 +1,71 @@
+import React from "react"
+import { useRouter } from "next/router"
+import { Container } from "components/bootstrap"
+import { MAPLE_COLORS } from "./chartTheme"
+
+const LINKS = [
+  { label: "Overview", href: "/lobbying", exact: true },
+  { label: "Bills", href: "/lobbying/bills" },
+  { label: "Clients", href: "/lobbying/clients" },
+  { label: "Lobbying Firms", href: "/lobbying/firms" }
+]
+
+export function LobbyingSubnav() {
+  const { pathname } = useRouter()
+
+  return (
+    <div style={barStyle}>
+      <Container>
+        <div style={innerStyle}>
+          <span style={titleStyle}>Lobbying Explorer</span>
+          <nav style={{ display: "flex", gap: "1.25rem" }}>
+            {LINKS.map(({ label, href, exact }) => {
+              const active = exact
+                ? pathname === href
+                : pathname === href || pathname.startsWith(href + "/")
+              return (
+                <a key={href} href={href} style={linkStyle(active)}>
+                  {label}
+                </a>
+              )
+            })}
+          </nav>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+const barStyle: React.CSSProperties = {
+  background: "#fff",
+  borderBottom: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  width: "100%"
+}
+
+const innerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "1.75rem",
+  padding: "0.5rem 0",
+  flexWrap: "wrap"
+}
+
+const titleStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.07em",
+  color: MAPLE_COLORS.textMuted,
+  whiteSpace: "nowrap"
+}
+
+const linkStyle = (active: boolean): React.CSSProperties => ({
+  color: active ? MAPLE_COLORS.primary : MAPLE_COLORS.textBody,
+  fontWeight: active ? 600 : 400,
+  textDecoration: "none",
+  fontSize: 14,
+  paddingBottom: "0.4rem",
+  borderBottom: `2px solid ${active ? MAPLE_COLORS.primary : "transparent"}`,
+  display: "inline-block",
+  transition: "color 0.1s, border-color 0.1s"
+})
diff --git a/components/lobbying/usePagination.ts b/components/lobbying/usePagination.ts
new file mode 100644
index 000000000..6e500220e
--- /dev/null
+++ b/components/lobbying/usePagination.ts
@@ -0,0 +1,18 @@
+import { useMemo, useState } from "react"
+
+export function usePagination<T>(items: T[], pageSize: number) {
+  const [page, setPage] = useState(1)
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize))
+  const safePage = Math.min(page, totalPages)
+  const pageItems = useMemo(
+    () => items.slice((safePage - 1) * pageSize, safePage * pageSize),
+    [items, safePage, pageSize]
+  )
+  return {
+    page: safePage,
+    setPage,
+    pageItems,
+    totalPages,
+    totalItems: items.length
+  }
+}
diff --git a/firestore.indexes.json b/firestore.indexes.json
index 8d2a60f72..e78707bc2 100644
--- a/firestore.indexes.json
+++ b/firestore.indexes.json
@@ -1003,6 +1003,34 @@
           "order": "DESCENDING"
         }
       ]
+    },
+    {
+      "collectionGroup": "lobbyingFilings",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "entityNameNorm",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "year",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "lobbyingRegistrants",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "entityNameNorm",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "year",
+          "order": "DESCENDING"
+        }
+      ]
     }
   ],
   "fieldOverrides": [
diff --git a/pages/lobbying/bills/[court]/[billId].tsx b/pages/lobbying/bills/[court]/[billId].tsx
new file mode 100644
index 000000000..125ed0fe7
--- /dev/null
+++ b/pages/lobbying/bills/[court]/[billId].tsx
@@ -0,0 +1,400 @@
+import React, { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
+import { Col, Container, Row } from "components/bootstrap"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+import { useLobbyingFilingsForBill } from "components/db/lobbying"
+import { LobbyingFilingsTable } from "components/lobbying/LobbyingFilingsTable"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
+import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
+import { normalizePosition } from "components/lobbying/LobbyingPositionChip"
+import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import type { LobbyingFiling } from "functions/src/lobbying/types"
+
+const PAGE_SIZE = 50
+
+type SortKey = "client" | "firm" | "position" | "amount" | "year"
+type SortDir = "asc" | "desc"
+
+function sortFilings(
+  filings: LobbyingFiling[],
+  key: SortKey,
+  dir: SortDir
+): LobbyingFiling[] {
+  const mul = dir === "asc" ? 1 : -1
+  return [...filings].sort((a, b) => {
+    switch (key) {
+      case "client":
+        return mul * a.clientName.localeCompare(b.clientName)
+      case "firm":
+        return mul * a.entityName.localeCompare(b.entityName)
+      case "position":
+        return (
+          mul *
+          normalizePosition(a.position).localeCompare(
+            normalizePosition(b.position)
+          )
+        )
+      case "amount":
+        return mul * ((a.amount ?? -1) - (b.amount ?? -1))
+      case "year":
+        return mul * (a.year - b.year)
+      default:
+        return 0
+    }
+  })
+}
+
+function SortTh({
+  label,
+  sortKey,
+  current,
+  dir,
+  onSort,
+  style
+}: {
+  label: string
+  sortKey: SortKey
+  current: SortKey
+  dir: SortDir
+  onSort: (k: SortKey) => void
+  style?: React.CSSProperties
+}) {
+  const active = sortKey === current
+  const indicator = active ? (dir === "asc" ? " ↑" : " ↓") : ""
+  return (
+    <th
+      onClick={() => onSort(sortKey)}
+      style={{
+        ...thStyle,
+        ...style,
+        cursor: "pointer",
+        color: active ? MAPLE_COLORS.primary : MAPLE_COLORS.textMuted,
+        userSelect: "none"
+      }}
+    >
+      {label}
+      <span style={{ fontSize: 10, opacity: active ? 1 : 0 }}>{indicator}</span>
+    </th>
+  )
+}
+
+function BillFilingsPage() {
+  const { t } = useTranslation("lobbying")
+  const { query } = useRouter()
+  const court = Number(query.court)
+  const billId = query.billId as string | undefined
+
+  const {
+    result: filings,
+    status,
+    error
+  } = useLobbyingFilingsForBill(court, billId ?? "")
+
+  const [sortKey, setSortKey] = useState<SortKey>("year")
+  const [sortDir, setSortDir] = useState<SortDir>("desc")
+  const [posFilter, setPosFilter] = useState<
+    "all" | "support" | "oppose" | "neutral"
+  >("all")
+
+  function handleSort(key: SortKey) {
+    if (key === sortKey) {
+      setSortDir(d => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortKey(key)
+      setSortDir(key === "client" || key === "firm" ? "asc" : "desc")
+    }
+  }
+
+  const filtered = useMemo(() => {
+    if (!filings) return []
+    if (posFilter === "all") return filings
+    return filings.filter(f => normalizePosition(f.position) === posFilter)
+  }, [filings, posFilter])
+
+  const sorted = useMemo(
+    () => sortFilings(filtered, sortKey, sortDir),
+    [filtered, sortKey, sortDir]
+  )
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sorted,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [posFilter, sortKey, sortDir, setPage])
+
+  const loading = status === "loading" || status === "not-requested"
+  const mapleHref = court && billId ? `/bills/${court}/${billId}` : undefined
+
+  if (!billId) return null
+
+  return (
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-1">
+          <Col>
+            <a
+              href="/lobbying/bills"
+              style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+            >
+              ← {t("titles.bills")}
+            </a>
+            <h1 className="mt-2">{billId}</h1>
+            {mapleHref && (
+              <p style={{ fontSize: 13, marginBottom: "0.25rem" }}>
+                <a href={mapleHref} style={{ color: MAPLE_COLORS.primary }}>
+                  View bill on MAPLE →
+                </a>
+              </p>
+            )}
+            {!loading && filings && (
+              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+                {filings.length} {t("fields.filings").toLowerCase()}
+              </p>
+            )}
+          </Col>
+        </Row>
+
+        {loading && (
+          <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
+        )}
+        {status === "error" && (
+          <p style={{ color: MAPLE_COLORS.danger }}>Error: {error?.message}</p>
+        )}
+
+        {!loading && (
+          <>
+            <Row className="mb-2">
+              <Col>
+                <div style={filterRowStyle}>
+                  <select
+                    value={posFilter}
+                    onChange={e =>
+                      setPosFilter(e.target.value as typeof posFilter)
+                    }
+                    style={selectStyle}
+                    aria-label={t("filters.position")}
+                  >
+                    <option value="all">{t("filters.allPositions")}</option>
+                    <option value="support">{t("position.support")}</option>
+                    <option value="oppose">{t("position.oppose")}</option>
+                    <option value="neutral">{t("position.neutral")}</option>
+                  </select>
+                  <span style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
+                    {totalItems} {t("fields.filings").toLowerCase()}
+                  </span>
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <div style={{ overflowX: "auto" }}>
+                  <table style={tableStyle}>
+                    <thead>
+                      <tr style={theadRowStyle}>
+                        <SortTh
+                          label={t("fields.clientName")}
+                          sortKey="client"
+                          current={sortKey}
+                          dir={sortDir}
+                          onSort={handleSort}
+                        />
+                        <SortTh
+                          label={t("fields.firmName")}
+                          sortKey="firm"
+                          current={sortKey}
+                          dir={sortDir}
+                          onSort={handleSort}
+                        />
+                        <th style={thStyle}>Activity</th>
+                        <SortTh
+                          label={t("filters.position")}
+                          sortKey="position"
+                          current={sortKey}
+                          dir={sortDir}
+                          onSort={handleSort}
+                        />
+                        <SortTh
+                          label={t("fields.amount")}
+                          sortKey="amount"
+                          current={sortKey}
+                          dir={sortDir}
+                          onSort={handleSort}
+                          style={{ textAlign: "right" }}
+                        />
+                        <SortTh
+                          label={t("fields.year")}
+                          sortKey="year"
+                          current={sortKey}
+                          dir={sortDir}
+                          onSort={handleSort}
+                        />
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {pageItems.map(f => (
+                        <tr key={f.filingId} style={trStyle}>
+                          <td style={cellStyle}>
+                            <a
+                              href={`/lobbying/clients/${encodeURIComponent(
+                                f.clientNameNorm
+                              )}`}
+                              style={{ color: MAPLE_COLORS.primary }}
+                            >
+                              {f.clientName}
+                            </a>
+                          </td>
+                          <td style={cellStyle}>
+                            <a
+                              href={`/lobbying/firms/${encodeURIComponent(
+                                f.entityNameNorm
+                              )}`}
+                              style={{ color: MAPLE_COLORS.primary }}
+                            >
+                              {f.entityName}
+                            </a>
+                          </td>
+                          <td
+                            style={{
+                              ...cellStyle,
+                              color: MAPLE_COLORS.textMuted,
+                              fontSize: 12
+                            }}
+                          >
+                            {f.activityTitle || "—"}
+                          </td>
+                          <td style={cellStyle}>
+                            <span
+                              style={{
+                                ...chipStyle,
+                                ...posChipStyle(normalizePosition(f.position))
+                              }}
+                            >
+                              {f.position || "—"}
+                            </span>
+                          </td>
+                          <td style={{ ...cellStyle, textAlign: "right" }}>
+                            {f.amount != null
+                              ? f.amount.toLocaleString("en-US", {
+                                  style: "currency",
+                                  currency: "USD",
+                                  maximumFractionDigits: 0
+                                })
+                              : "—"}
+                          </td>
+                          <td style={cellStyle}>{f.year}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <LobbyingPaginationBar
+                  page={page}
+                  totalPages={totalPages}
+                  totalItems={totalItems}
+                  pageSize={PAGE_SIZE}
+                  onPage={setPage}
+                />
+              </Col>
+            </Row>
+          </>
+        )}
+        <LobbyingAttribution className="mt-3" />
+      </Container>
+    </>
+  )
+}
+
+export default createPage({
+  titleI18nKey: "titles.lobbying",
+  Page: BillFilingsPage
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "lobbying"
+])
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: "blocking" }
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const filterRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "1rem",
+  alignItems: "center",
+  marginBottom: "0.5rem"
+}
+
+const selectStyle: React.CSSProperties = {
+  padding: "0.3rem 0.6rem",
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 6,
+  fontSize: 14,
+  color: MAPLE_COLORS.textBody,
+  background: MAPLE_COLORS.surfaceBase,
+  cursor: "pointer"
+}
+
+const tableStyle: React.CSSProperties = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 13,
+  color: MAPLE_COLORS.textBody
+}
+
+const theadRowStyle: React.CSSProperties = {
+  borderBottom: `2px solid ${MAPLE_COLORS.borderDefault}`
+}
+
+const thStyle: React.CSSProperties = {
+  padding: "0.4rem 0.75rem",
+  textAlign: "left",
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.05em",
+  color: MAPLE_COLORS.textMuted,
+  whiteSpace: "nowrap" as const
+}
+
+const trStyle: React.CSSProperties = {
+  borderBottom: `1px solid ${MAPLE_COLORS.borderSubtle}`
+}
+
+const cellStyle: React.CSSProperties = {
+  padding: "0.45rem 0.75rem",
+  verticalAlign: "middle"
+}
+
+const chipStyle: React.CSSProperties = {
+  display: "inline-block",
+  padding: "0.15rem 0.5rem",
+  borderRadius: 12,
+  fontSize: 11,
+  fontWeight: 600,
+  border: "1px solid",
+  whiteSpace: "nowrap" as const
+}
+
+function posChipStyle(pos: string): React.CSSProperties {
+  if (pos === "support")
+    return { color: MAPLE_COLORS.green, borderColor: MAPLE_COLORS.green }
+  if (pos === "oppose")
+    return { color: MAPLE_COLORS.danger, borderColor: MAPLE_COLORS.danger }
+  return {
+    color: MAPLE_COLORS.textMuted,
+    borderColor: MAPLE_COLORS.borderDefault
+  }
+}
diff --git a/pages/lobbying/bills.tsx b/pages/lobbying/bills/index.tsx
similarity index 67%
rename from pages/lobbying/bills.tsx
rename to pages/lobbying/bills/index.tsx
index ba381be64..18f56b123 100644
--- a/pages/lobbying/bills.tsx
+++ b/pages/lobbying/bills/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
@@ -10,9 +10,52 @@ import {
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 
-// General courts with lobbying data, newest first
 const COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
+const PAGE_SIZE = 50
+
+type BillSortKey = "id" | "filings" | "support" | "oppose" | "neutral"
+type SortDir = "asc" | "desc"
+
+function SortTh({
+  label,
+  sortKey,
+  current,
+  dir,
+  onSort,
+  style
+}: {
+  label: string
+  sortKey: BillSortKey
+  current: BillSortKey
+  dir: SortDir
+  onSort: (k: BillSortKey) => void
+  style?: React.CSSProperties
+}) {
+  const active = sortKey === current
+  return (
+    <th
+      onClick={() => onSort(sortKey)}
+      style={{
+        ...thStyle,
+        ...style,
+        cursor: "pointer",
+        color: active ? MAPLE_COLORS.primary : MAPLE_COLORS.textMuted,
+        userSelect: "none"
+      }}
+    >
+      {label}
+      {active && (
+        <span style={{ fontSize: 10, marginLeft: 3 }}>
+          {dir === "asc" ? "↑" : "↓"}
+        </span>
+      )}
+    </th>
+  )
+}
 
 type BillRow = {
   billId: string
@@ -46,7 +89,7 @@ function groupByBill(
     row[normalizePosition(f.position)]++
     row.total++
   }
-  return [...map.values()].sort((a, b) => b.total - a.total)
+  return [...map.values()]
 }
 
 function PositionMiniBar({ row }: { row: BillRow }) {
@@ -92,6 +135,17 @@ function LobbyingBillsTable() {
     "all" | "support" | "oppose" | "neutral"
   >("all")
   const [search, setSearch] = useState("")
+  const [sortKey, setSortKey] = useState<BillSortKey>("filings")
+  const [sortDir, setSortDir] = useState<SortDir>("desc")
+
+  function handleSort(key: BillSortKey) {
+    if (key === sortKey) {
+      setSortDir(d => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortKey(key)
+      setSortDir(key === "id" ? "asc" : "desc")
+    }
+  }
 
   const { result: filings, status, error } = useLobbyingFilingsForCourt(court)
 
@@ -106,9 +160,35 @@ function LobbyingBillsTable() {
     })
   }, [bills, posFilter, search])
 
+  const sorted = useMemo(() => {
+    const mul = sortDir === "asc" ? 1 : -1
+    return [...filtered].sort((a, b) => {
+      switch (sortKey) {
+        case "id":
+          return mul * a.billId.localeCompare(b.billId)
+        case "support":
+          return mul * (a.support - b.support)
+        case "oppose":
+          return mul * (a.oppose - b.oppose)
+        case "neutral":
+          return mul * (a.neutral - b.neutral)
+        default:
+          return mul * (a.total - b.total)
+      }
+    })
+  }, [filtered, sortKey, sortDir])
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sorted,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [court, posFilter, search, sortKey, sortDir, setPage])
+
   return (
     <>
-      {/* Filters */}
       <div style={filterRowStyle}>
         <select
           value={court}
@@ -145,7 +225,6 @@ function LobbyingBillsTable() {
         />
       </div>
 
-      {/* Status */}
       {status === "loading" || status === "not-requested" ? (
         <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
           {t("loading")}
@@ -154,7 +233,7 @@ function LobbyingBillsTable() {
         <p style={{ color: MAPLE_COLORS.danger, padding: "1rem 0" }}>
           Error: {error?.message}
         </p>
-      ) : filtered.length === 0 ? (
+      ) : sorted.length === 0 ? (
         <p style={{ color: MAPLE_COLORS.textMuted, padding: "2rem 0" }}>
           {t("noData")}
         </p>
@@ -167,27 +246,57 @@ function LobbyingBillsTable() {
               marginBottom: "0.5rem"
             }}
           >
-            {filtered.length} {t("sections.bills").toLowerCase()}
+            {totalItems} {t("sections.bills").toLowerCase()}
           </p>
           <div style={{ overflowX: "auto" }}>
             <table style={tableStyle}>
               <thead>
                 <tr style={theadStyle}>
-                  <th style={thStyle}>Bill</th>
+                  <SortTh
+                    label="Bill"
+                    sortKey="id"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                   <th style={thStyle}>{t("filters.session")}</th>
-                  <th style={thStyle}>{t("fields.filings")}</th>
-                  <th style={thStyle}>{t("position.support")}</th>
-                  <th style={thStyle}>{t("position.oppose")}</th>
-                  <th style={thStyle}>{t("position.neutral")}</th>
+                  <SortTh
+                    label={t("fields.filings")}
+                    sortKey="filings"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label={t("position.support")}
+                    sortKey="support"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label={t("position.oppose")}
+                    sortKey="oppose"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label={t("position.neutral")}
+                    sortKey="neutral"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                   <th style={thStyle}>Positions</th>
                 </tr>
               </thead>
               <tbody>
-                {filtered.map(b => (
+                {pageItems.map(b => (
                   <tr key={b.billId} style={trStyle}>
                     <td style={tdStyle}>
                       <a
-                        href={`/bills/${b.court}/${b.billId}`}
+                        href={`/lobbying/bills/${b.court}/${b.billId}`}
                         style={{ color: MAPLE_COLORS.primary, fontWeight: 600 }}
                       >
                         {b.billId}
@@ -227,6 +336,13 @@ function LobbyingBillsTable() {
               </tbody>
             </table>
           </div>
+          <LobbyingPaginationBar
+            page={page}
+            totalPages={totalPages}
+            totalItems={totalItems}
+            pageSize={PAGE_SIZE}
+            onPage={setPage}
+          />
         </>
       )}
 
@@ -238,24 +354,21 @@ function LobbyingBillsTable() {
 function LobbyingBillsPage() {
   const { t } = useTranslation("lobbying")
   return (
-    <Container>
-      <Row className="mt-4 mb-3">
-        <Col>
-          <a
-            href="/lobbying"
-            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
-          >
-            ← {t("titles.overview")}
-          </a>
-          <h1 className="mt-2">{t("titles.bills")}</h1>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <LobbyingBillsTable />
-        </Col>
-      </Row>
-    </Container>
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-3">
+          <Col>
+            <h1>{t("titles.bills")}</h1>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <LobbyingBillsTable />
+          </Col>
+        </Row>
+      </Container>
+    </>
   )
 }
 
diff --git a/pages/lobbying/clients/[clientSlug].tsx b/pages/lobbying/clients/[clientSlug].tsx
index 21e09ae55..586f4f9cc 100644
--- a/pages/lobbying/clients/[clientSlug].tsx
+++ b/pages/lobbying/clients/[clientSlug].tsx
@@ -15,6 +15,7 @@ import {
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
 function findFirmsForClient(
@@ -101,139 +102,147 @@ function ClientDetail() {
   if (!clientNameNorm) return null
 
   return (
-    <Container>
-      <Row className="mt-4 mb-1">
-        <Col>
-          <a
-            href="/lobbying/clients"
-            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
-          >
-            ← {t("titles.clients")}
-          </a>
-          <h1 className="mt-2">{displayName}</h1>
-          <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
-            {years.length > 0 &&
-              (years.length === 1
-                ? years[0]
-                : `${years[years.length - 1]}–${years[0]}`)}
-            {filings && filings.length > 0 && (
-              <>
-                &nbsp;·&nbsp; {filings.length}{" "}
-                {t("fields.filings").toLowerCase()}
-              </>
-            )}
-            {totalCompensation > 0 && (
-              <>
-                &nbsp;·&nbsp;{" "}
-                {totalCompensation.toLocaleString("en-US", {
-                  style: "currency",
-                  currency: "USD",
-                  maximumFractionDigits: 0
-                })}{" "}
-                total
-              </>
-            )}
-          </p>
-        </Col>
-      </Row>
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-1">
+          <Col>
+            <a
+              href="/lobbying/clients"
+              style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+            >
+              ← {t("titles.clients")}
+            </a>
+            <h1 className="mt-2">{displayName}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+              {years.length > 0 &&
+                (years.length === 1
+                  ? years[0]
+                  : `${years[years.length - 1]}–${years[0]}`)}
+              {filings && filings.length > 0 && (
+                <>
+                  &nbsp;·&nbsp; {filings.length}{" "}
+                  {t("fields.filings").toLowerCase()}
+                </>
+              )}
+              {totalCompensation > 0 && (
+                <>
+                  &nbsp;·&nbsp;{" "}
+                  {totalCompensation.toLocaleString("en-US", {
+                    style: "currency",
+                    currency: "USD",
+                    maximumFractionDigits: 0
+                  })}{" "}
+                  total
+                </>
+              )}
+            </p>
+          </Col>
+        </Row>
 
-      {loading && (
-        <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
-      )}
-      {filStatus === "error" && (
-        <p style={{ color: MAPLE_COLORS.danger }}>Error: {filError?.message}</p>
-      )}
+        {loading && (
+          <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
+        )}
+        {filStatus === "error" && (
+          <p style={{ color: MAPLE_COLORS.danger }}>
+            Error: {filError?.message}
+          </p>
+        )}
 
-      {!loading && (
-        <Row className="mt-2">
-          <Col md={8}>
-            <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
-            <LobbyingFilingsTable
-              filings={filings ?? []}
-              showBill
-              showClient={false}
-              showFirm
-              showAmount
-            />
-          </Col>
+        {!loading && (
+          <Row className="mt-2">
+            <Col md={8}>
+              <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
+              <LobbyingFilingsTable
+                filings={filings ?? []}
+                showBill
+                showClient={false}
+                showFirm
+                showAmount
+              />
+            </Col>
 
-          <Col md={4}>
-            <h5 style={sectionHeadStyle}>Firms</h5>
-            {firms.length === 0 ? (
-              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
-            ) : (
-              <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
-                {firms.map(f => (
-                  <li
-                    key={f.entityNameNorm}
-                    style={{ marginBottom: "0.35rem" }}
-                  >
-                    <a
-                      href={`/lobbying/firms/${encodeURIComponent(
-                        f.entityNameNorm
-                      )}`}
-                      style={{ color: MAPLE_COLORS.primary }}
+            <Col md={4}>
+              <h5 style={sectionHeadStyle}>Firms</h5>
+              {firms.length === 0 ? (
+                <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
+              ) : (
+                <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
+                  {firms.map(f => (
+                    <li
+                      key={f.entityNameNorm}
+                      style={{ marginBottom: "0.35rem" }}
                     >
-                      {f.entityName}
-                    </a>
-                    {f.compensation != null && (
-                      <span
-                        style={{ color: MAPLE_COLORS.textMuted, fontSize: 12 }}
+                      <a
+                        href={`/lobbying/firms/${encodeURIComponent(
+                          f.entityNameNorm
+                        )}`}
+                        style={{ color: MAPLE_COLORS.primary }}
                       >
-                        {" "}
-                        (
-                        {f.compensation.toLocaleString("en-US", {
-                          style: "currency",
-                          currency: "USD",
-                          maximumFractionDigits: 0
-                        })}
-                        )
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            )}
-
-            {(filings?.length ?? 0) > 0 && (
-              <>
-                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
-                  {t("filters.position")}
-                </h5>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "0.4rem",
-                    fontSize: 13
-                  }}
-                >
-                  {(["support", "oppose", "neutral"] as const).map(
-                    pos =>
-                      positionCounts[pos] > 0 && (
-                        <div
-                          key={pos}
+                        {f.entityName}
+                      </a>
+                      {f.compensation != null && (
+                        <span
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "0.5rem"
+                            color: MAPLE_COLORS.textMuted,
+                            fontSize: 12
                           }}
                         >
-                          <LobbyingPositionChip position={pos} />
-                          <span style={{ color: MAPLE_COLORS.textMuted }}>
-                            {positionCounts[pos]}
-                          </span>
-                        </div>
-                      )
-                  )}
-                </div>
-              </>
-            )}
-          </Col>
-        </Row>
-      )}
-      <LobbyingAttribution className="mt-3" />
-    </Container>
+                          {" "}
+                          (
+                          {f.compensation.toLocaleString("en-US", {
+                            style: "currency",
+                            currency: "USD",
+                            maximumFractionDigits: 0
+                          })}
+                          )
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {(filings?.length ?? 0) > 0 && (
+                <>
+                  <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                    {t("filters.position")}
+                  </h5>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "0.4rem",
+                      fontSize: 13
+                    }}
+                  >
+                    {(["support", "oppose", "neutral"] as const).map(
+                      pos =>
+                        positionCounts[pos] > 0 && (
+                          <div
+                            key={pos}
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "0.5rem"
+                            }}
+                          >
+                            <LobbyingPositionChip position={pos} />
+                            <span style={{ color: MAPLE_COLORS.textMuted }}>
+                              {positionCounts[pos]}
+                            </span>
+                          </div>
+                        )
+                    )}
+                  </div>
+                </>
+              )}
+            </Col>
+          </Row>
+        )}
+        <LobbyingAttribution className="mt-3" />
+      </Container>
+    </>
   )
 }
 
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index 5bc3d86cd..ea1cb9ea4 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
@@ -6,9 +6,53 @@ import { createGetStaticTranslationProps } from "components/translations"
 import { useLobbyingAllRegistrants } from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 
 const LEGACY_TOTAL_CLIENT = "_total_salary_"
+const PAGE_SIZE = 50
+
+type ClientSortKey = "name" | "compensation" | "firms"
+type SortDir = "asc" | "desc"
+
+function SortTh({
+  label,
+  sortKey,
+  current,
+  dir,
+  onSort,
+  style
+}: {
+  label: string
+  sortKey: ClientSortKey
+  current: ClientSortKey
+  dir: SortDir
+  onSort: (k: ClientSortKey) => void
+  style?: React.CSSProperties
+}) {
+  const active = sortKey === current
+  return (
+    <th
+      onClick={() => onSort(sortKey)}
+      style={{
+        ...thStyle,
+        ...style,
+        cursor: "pointer",
+        color: active ? MAPLE_COLORS.primary : MAPLE_COLORS.textMuted,
+        userSelect: "none"
+      }}
+    >
+      {label}
+      {active && (
+        <span style={{ fontSize: 10, marginLeft: 3 }}>
+          {dir === "asc" ? "↑" : "↓"}
+        </span>
+      )}
+    </th>
+  )
+}
 
 type ClientRow = {
   clientName: string
@@ -24,7 +68,11 @@ function deriveClients(
   const map = new Map<string, ClientRow>()
   for (const r of registrants) {
     for (const c of r.clients) {
-      if (!c.clientNameNorm || c.clientNameNorm === LEGACY_TOTAL_CLIENT)
+      if (
+        !c.clientNameNorm ||
+        c.clientNameNorm === LEGACY_TOTAL_CLIENT ||
+        c.clientName === LEGACY_TOTAL_CLIENT
+      )
         continue
       if (!map.has(c.clientNameNorm)) {
         map.set(c.clientNameNorm, {
@@ -41,14 +89,23 @@ function deriveClients(
       }
     }
   }
-  return [...map.values()].sort((a, b) =>
-    a.clientNameNorm.localeCompare(b.clientNameNorm)
-  )
+  return [...map.values()]
 }
 
 function LobbyingClientsTable() {
   const { t } = useTranslation("lobbying")
   const [search, setSearch] = useState("")
+  const [sortKey, setSortKey] = useState<ClientSortKey>("name")
+  const [sortDir, setSortDir] = useState<SortDir>("asc")
+
+  function handleSort(key: ClientSortKey) {
+    if (key === sortKey) {
+      setSortDir(d => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortKey(key)
+      setSortDir(key === "name" ? "asc" : "desc")
+    }
+  }
 
   const { result: registrants, status, error } = useLobbyingAllRegistrants()
   const clients = useMemo(() => deriveClients(registrants), [registrants])
@@ -63,9 +120,34 @@ function LobbyingClientsTable() {
     [clients, search]
   )
 
+  const sorted = useMemo(() => {
+    const mul = sortDir === "asc" ? 1 : -1
+    return [...filtered].sort((a, b) => {
+      switch (sortKey) {
+        case "compensation":
+          return (
+            mul * ((a.totalCompensation ?? -1) - (b.totalCompensation ?? -1))
+          )
+        case "firms":
+          return mul * (a.registrantCount - b.registrantCount)
+        default:
+          return mul * a.clientNameNorm.localeCompare(b.clientNameNorm)
+      }
+    })
+  }, [filtered, sortKey, sortDir])
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sorted,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [search, sortKey, sortDir, setPage])
+
   return (
     <>
-      <div style={{ marginBottom: "1rem" }}>
+      <div style={filterRowStyle}>
         <input
           type="search"
           placeholder={t("filters.search")}
@@ -90,21 +172,38 @@ function LobbyingClientsTable() {
               marginBottom: "0.5rem"
             }}
           >
-            {filtered.length} {t("sections.clients").toLowerCase()}
+            {totalItems} {t("sections.clients").toLowerCase()}
           </p>
           <div style={{ overflowX: "auto" }}>
             <table style={tableStyle}>
               <thead>
                 <tr style={theadStyle}>
-                  <th style={thStyle}>{t("fields.clientName")}</th>
-                  <th style={thStyle}>Firms</th>
-                  <th style={{ ...thStyle, textAlign: "right" }}>
-                    {t("fields.amount")}
-                  </th>
+                  <SortTh
+                    label={t("fields.clientName")}
+                    sortKey="name"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label="Firms"
+                    sortKey="firms"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label={t("fields.amount")}
+                    sortKey="compensation"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                    style={{ textAlign: "right" }}
+                  />
                 </tr>
               </thead>
               <tbody>
-                {filtered.map(c => (
+                {pageItems.map(c => (
                   <tr key={c.clientNameNorm} style={trStyle}>
                     <td style={tdStyle}>
                       <a
@@ -139,6 +238,13 @@ function LobbyingClientsTable() {
               </tbody>
             </table>
           </div>
+          <LobbyingPaginationBar
+            page={page}
+            totalPages={totalPages}
+            totalItems={totalItems}
+            pageSize={PAGE_SIZE}
+            onPage={setPage}
+          />
         </>
       )}
     </>
@@ -148,29 +254,26 @@ function LobbyingClientsTable() {
 function LobbyingClientsPage() {
   const { t } = useTranslation("lobbying")
   return (
-    <Container>
-      <Row className="mt-4 mb-3">
-        <Col>
-          <a
-            href="/lobbying"
-            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
-          >
-            ← {t("titles.overview")}
-          </a>
-          <h1 className="mt-2">{t("titles.clients")}</h1>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <LobbyingClientsTable />
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <LobbyingAttribution />
-        </Col>
-      </Row>
-    </Container>
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-3">
+          <Col>
+            <h1>{t("titles.clients")}</h1>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <LobbyingClientsTable />
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <LobbyingAttribution />
+          </Col>
+        </Row>
+      </Container>
+    </>
   )
 }
 
@@ -186,14 +289,26 @@ export const getStaticProps = createGetStaticTranslationProps([
   "lobbying"
 ])
 
-const searchStyle: React.CSSProperties = {
+const filterRowStyle: React.CSSProperties = {
+  display: "flex",
+  gap: "0.75rem",
+  flexWrap: "wrap",
+  marginBottom: "1rem",
+  alignItems: "center"
+}
+const selectStyle: React.CSSProperties = {
   padding: "0.35rem 0.65rem",
   border: `1px solid ${MAPLE_COLORS.borderDefault}`,
   borderRadius: 6,
   fontSize: 14,
   color: MAPLE_COLORS.textBody,
   background: MAPLE_COLORS.surfaceBase,
-  minWidth: 260
+  cursor: "pointer"
+}
+const searchStyle: React.CSSProperties = {
+  ...selectStyle,
+  minWidth: 260,
+  cursor: "text"
 }
 const tableStyle: React.CSSProperties = {
   width: "100%",
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
index 9a112330d..d7175d674 100644
--- a/pages/lobbying/firms/[registrantId].tsx
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -15,6 +15,7 @@ import {
 } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 
 function FirmDetail() {
   const { t } = useTranslation("lobbying")
@@ -62,148 +63,161 @@ function FirmDetail() {
   for (const f of filings ?? []) positionCounts[normalizePosition(f.position)]++
 
   return (
-    <Container>
-      <Row className="mt-4 mb-1">
-        <Col>
-          <a
-            href="/lobbying/firms"
-            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
-          >
-            ← {t("titles.firms")}
-          </a>
-          <h1 className="mt-2">{primary?.entityName ?? entityNameNorm}</h1>
-          <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
-            {primary?.regType} &nbsp;·&nbsp;{" "}
-            {years.length === 1
-              ? years[0]
-              : `${years[years.length - 1]}–${years[0]}`}
-            &nbsp;·&nbsp; {filings?.length ?? "—"}{" "}
-            {t("fields.filings").toLowerCase()}
-          </p>
-        </Col>
-      </Row>
-
-      {loading && (
-        <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
-      )}
-      {filStatus === "error" && (
-        <p style={{ color: MAPLE_COLORS.danger }}>Error: {filError?.message}</p>
-      )}
-
-      {!loading && (
-        <Row className="mt-2">
-          {/* Left: filings */}
-          <Col md={8}>
-            <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
-            <LobbyingFilingsTable
-              filings={filings ?? []}
-              showBill
-              showClient
-              showFirm={false}
-              showAmount
-            />
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-1">
+          <Col>
+            <a
+              href="/lobbying/firms"
+              style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
+            >
+              ← {t("titles.firms")}
+            </a>
+            <h1 className="mt-2">{primary?.entityName ?? entityNameNorm}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+              {primary?.regType}
+              {years.length > 0 && (
+                <>
+                  &nbsp;·&nbsp;{" "}
+                  {years.length === 1
+                    ? years[0]
+                    : `${years[years.length - 1]}–${years[0]}`}
+                </>
+              )}
+              &nbsp;·&nbsp; {filings?.length ?? "—"}{" "}
+              {t("fields.filings").toLowerCase()}
+            </p>
           </Col>
+        </Row>
 
-          {/* Right: clients + disclosure links */}
-          <Col md={4}>
-            <h5 style={sectionHeadStyle}>{t("sections.clients")}</h5>
-            {allClients.length === 0 ? (
-              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
-            ) : (
-              <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
-                {allClients.map(c => (
-                  <li
-                    key={c.clientNameNorm}
-                    style={{ marginBottom: "0.35rem" }}
-                  >
-                    <a
-                      href={`/lobbying/clients/${encodeURIComponent(
-                        c.clientNameNorm
-                      )}`}
-                      style={{ color: MAPLE_COLORS.primary }}
+        {loading && (
+          <p style={{ color: MAPLE_COLORS.textMuted }}>{t("loading")}</p>
+        )}
+        {filStatus === "error" && (
+          <p style={{ color: MAPLE_COLORS.danger }}>
+            Error: {filError?.message}
+          </p>
+        )}
+
+        {!loading && (
+          <Row className="mt-2">
+            {/* Left: filings */}
+            <Col md={8}>
+              <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
+              <LobbyingFilingsTable
+                filings={filings ?? []}
+                showBill
+                showClient
+                showFirm={false}
+                showAmount
+              />
+            </Col>
+
+            {/* Right: clients + disclosure links */}
+            <Col md={4}>
+              <h5 style={sectionHeadStyle}>{t("sections.clients")}</h5>
+              {allClients.length === 0 ? (
+                <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
+              ) : (
+                <ul style={{ paddingLeft: "1.25rem", fontSize: 13 }}>
+                  {allClients.map(c => (
+                    <li
+                      key={c.clientNameNorm}
+                      style={{ marginBottom: "0.35rem" }}
                     >
-                      {c.clientName}
-                    </a>
-                    {c.compensation != null && (
-                      <span
-                        style={{ color: MAPLE_COLORS.textMuted, fontSize: 12 }}
-                      >
-                        {" "}
-                        (
-                        {c.compensation.toLocaleString("en-US", {
-                          style: "currency",
-                          currency: "USD",
-                          maximumFractionDigits: 0
-                        })}
-                        )
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            )}
-
-            {allDisclosureUrls.length > 0 && (
-              <>
-                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
-                  Disclosures
-                </h5>
-                <ul style={{ paddingLeft: "1.25rem", fontSize: 12 }}>
-                  {allDisclosureUrls.map((url, i) => (
-                    <li key={i} style={{ marginBottom: "0.35rem" }}>
                       <a
-                        href={url}
-                        target="_blank"
-                        rel="noreferrer"
+                        href={`/lobbying/clients/${encodeURIComponent(
+                          c.clientNameNorm
+                        )}`}
                         style={{ color: MAPLE_COLORS.primary }}
                       >
-                        Disclosure {i + 1}
+                        {c.clientName}
                       </a>
+                      {c.compensation != null && (
+                        <span
+                          style={{
+                            color: MAPLE_COLORS.textMuted,
+                            fontSize: 12
+                          }}
+                        >
+                          {" "}
+                          (
+                          {c.compensation.toLocaleString("en-US", {
+                            style: "currency",
+                            currency: "USD",
+                            maximumFractionDigits: 0
+                          })}
+                          )
+                        </span>
+                      )}
                     </li>
                   ))}
                 </ul>
-              </>
-            )}
-
-            {(filings?.length ?? 0) > 0 && (
-              <>
-                <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
-                  {t("filters.position")}
-                </h5>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "0.4rem",
-                    fontSize: 13
-                  }}
-                >
-                  {(["support", "oppose", "neutral"] as const).map(
-                    pos =>
-                      positionCounts[pos] > 0 && (
-                        <div
-                          key={pos}
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "0.5rem"
-                          }}
+              )}
+
+              {allDisclosureUrls.length > 0 && (
+                <>
+                  <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                    Disclosures
+                  </h5>
+                  <ul style={{ paddingLeft: "1.25rem", fontSize: 12 }}>
+                    {allDisclosureUrls.map((url, i) => (
+                      <li key={i} style={{ marginBottom: "0.35rem" }}>
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noreferrer"
+                          style={{ color: MAPLE_COLORS.primary }}
                         >
-                          <LobbyingPositionChip position={pos} />
-                          <span style={{ color: MAPLE_COLORS.textMuted }}>
-                            {positionCounts[pos]}
-                          </span>
-                        </div>
-                      )
-                  )}
-                </div>
-              </>
-            )}
-          </Col>
-        </Row>
-      )}
-      <LobbyingAttribution className="mt-3" />
-    </Container>
+                          Disclosure {i + 1}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </>
+              )}
+
+              {(filings?.length ?? 0) > 0 && (
+                <>
+                  <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
+                    {t("filters.position")}
+                  </h5>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "0.4rem",
+                      fontSize: 13
+                    }}
+                  >
+                    {(["support", "oppose", "neutral"] as const).map(
+                      pos =>
+                        positionCounts[pos] > 0 && (
+                          <div
+                            key={pos}
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "0.5rem"
+                            }}
+                          >
+                            <LobbyingPositionChip position={pos} />
+                            <span style={{ color: MAPLE_COLORS.textMuted }}>
+                              {positionCounts[pos]}
+                            </span>
+                          </div>
+                        )
+                    )}
+                  </div>
+                </>
+              )}
+            </Col>
+          </Row>
+        )}
+        <LobbyingAttribution className="mt-3" />
+      </Container>
+    </>
   )
 }
 
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
index 4559025d9..dc2f5a6f1 100644
--- a/pages/lobbying/firms/index.tsx
+++ b/pages/lobbying/firms/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
@@ -6,8 +6,53 @@ import { createGetStaticTranslationProps } from "components/translations"
 import { useLobbyingAllRegistrants } from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
+const PAGE_SIZE = 50
+
+type FirmSortKey = "name" | "clients" | "sessions"
+type SortDir = "asc" | "desc"
+
+function SortTh({
+  label,
+  sortKey,
+  current,
+  dir,
+  onSort,
+  style
+}: {
+  label: string
+  sortKey: FirmSortKey
+  current: FirmSortKey
+  dir: SortDir
+  onSort: (k: FirmSortKey) => void
+  style?: React.CSSProperties
+}) {
+  const active = sortKey === current
+  return (
+    <th
+      onClick={() => onSort(sortKey)}
+      style={{
+        ...thStyle,
+        ...style,
+        cursor: "pointer",
+        color: active ? MAPLE_COLORS.primary : MAPLE_COLORS.textMuted,
+        userSelect: "none"
+      }}
+    >
+      {label}
+      {active && (
+        <span style={{ fontSize: 10, marginLeft: 3 }}>
+          {dir === "asc" ? "↑" : "↓"}
+        </span>
+      )}
+    </th>
+  )
+}
+
 type FirmRow = {
   entityName: string
   entityNameNorm: string
@@ -36,9 +81,7 @@ function groupByFirm(registrants: LobbyingRegistrant[] | undefined): FirmRow[] {
     row.clientCount += r.clients.length
   }
   for (const row of map.values()) row.years.sort((a, b) => b - a)
-  return [...map.values()].sort((a, b) =>
-    a.entityNameNorm.localeCompare(b.entityNameNorm)
-  )
+  return [...map.values()]
 }
 
 function LobbyingFirmsTable() {
@@ -47,6 +90,17 @@ function LobbyingFirmsTable() {
     "all" | "Lobbyist" | "Employer"
   >("all")
   const [search, setSearch] = useState("")
+  const [sortKey, setSortKey] = useState<FirmSortKey>("name")
+  const [sortDir, setSortDir] = useState<SortDir>("asc")
+
+  function handleSort(key: FirmSortKey) {
+    if (key === sortKey) {
+      setSortDir(d => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortKey(key)
+      setSortDir(key === "name" ? "asc" : "desc")
+    }
+  }
 
   const { result: registrants, status, error } = useLobbyingAllRegistrants()
   const firms = useMemo(() => groupByFirm(registrants), [registrants])
@@ -60,6 +114,29 @@ function LobbyingFirmsTable() {
     })
   }, [firms, regTypeFilter, search])
 
+  const sorted = useMemo(() => {
+    const mul = sortDir === "asc" ? 1 : -1
+    return [...filtered].sort((a, b) => {
+      switch (sortKey) {
+        case "clients":
+          return mul * (a.clientCount - b.clientCount)
+        case "sessions":
+          return mul * (a.years.length - b.years.length)
+        default:
+          return mul * a.entityNameNorm.localeCompare(b.entityNameNorm)
+      }
+    })
+  }, [filtered, sortKey, sortDir])
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sorted,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [regTypeFilter, search, sortKey, sortDir, setPage])
+
   return (
     <>
       <div style={filterRowStyle}>
@@ -69,17 +146,20 @@ function LobbyingFirmsTable() {
             setRegTypeFilter(e.target.value as typeof regTypeFilter)
           }
           style={selectStyle}
+          aria-label="Registrant type"
         >
           <option value="all">All types</option>
           <option value="Lobbyist">Lobbyist</option>
           <option value="Employer">Employer</option>
         </select>
+
         <input
           type="search"
           placeholder={t("filters.search")}
           value={search}
           onChange={e => setSearch(e.target.value)}
           style={{ ...selectStyle, minWidth: 220, cursor: "text" }}
+          aria-label={t("filters.search")}
         />
       </div>
 
@@ -100,20 +180,38 @@ function LobbyingFirmsTable() {
               marginBottom: "0.5rem"
             }}
           >
-            {filtered.length} {t("sections.firms").toLowerCase()}
+            {totalItems} {t("sections.firms").toLowerCase()}
           </p>
           <div style={{ overflowX: "auto" }}>
             <table style={tableStyle}>
               <thead>
                 <tr style={theadStyle}>
-                  <th style={thStyle}>{t("fields.firmName")}</th>
+                  <SortTh
+                    label={t("fields.firmName")}
+                    sortKey="name"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                   <th style={thStyle}>Type</th>
-                  <th style={thStyle}>Sessions</th>
-                  <th style={thStyle}>{t("fields.clients")}</th>
+                  <SortTh
+                    label="Sessions"
+                    sortKey="sessions"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
+                  <SortTh
+                    label={t("fields.clients")}
+                    sortKey="clients"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                 </tr>
               </thead>
               <tbody>
-                {filtered.map(f => (
+                {pageItems.map(f => (
                   <tr key={f.entityNameNorm} style={trStyle}>
                     <td style={tdStyle}>
                       <a
@@ -143,6 +241,13 @@ function LobbyingFirmsTable() {
               </tbody>
             </table>
           </div>
+          <LobbyingPaginationBar
+            page={page}
+            totalPages={totalPages}
+            totalItems={totalItems}
+            pageSize={PAGE_SIZE}
+            onPage={setPage}
+          />
         </>
       )}
     </>
@@ -152,29 +257,26 @@ function LobbyingFirmsTable() {
 function LobbyingFirmsPage() {
   const { t } = useTranslation("lobbying")
   return (
-    <Container>
-      <Row className="mt-4 mb-3">
-        <Col>
-          <a
-            href="/lobbying"
-            style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}
-          >
-            ← {t("titles.overview")}
-          </a>
-          <h1 className="mt-2">{t("titles.firms")}</h1>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <LobbyingFirmsTable />
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <LobbyingAttribution />
-        </Col>
-      </Row>
-    </Container>
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-3">
+          <Col>
+            <h1>{t("titles.firms")}</h1>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <LobbyingFirmsTable />
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <LobbyingAttribution />
+          </Col>
+        </Row>
+      </Container>
+    </>
   )
 }
 
@@ -203,7 +305,8 @@ const selectStyle: React.CSSProperties = {
   borderRadius: 6,
   fontSize: 14,
   color: MAPLE_COLORS.textBody,
-  background: MAPLE_COLORS.surfaceBase
+  background: MAPLE_COLORS.surfaceBase,
+  cursor: "pointer"
 }
 const tableStyle: React.CSSProperties = {
   width: "100%",
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
index 073d18a2e..8e843ccaa 100644
--- a/pages/lobbying/index.tsx
+++ b/pages/lobbying/index.tsx
@@ -29,6 +29,7 @@ import {
   Y_AXIS_PROPS
 } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
+import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 
 // ── Stats bar ─────────────────────────────────────────────────────────────────
 
@@ -217,73 +218,76 @@ function LobbyingOverview() {
   const loading = status === "loading" || status === "not-requested"
 
   return (
-    <Container>
-      <Row className="mt-4 mb-3">
-        <Col>
-          <h1>{t("titles.overview")}</h1>
-          <p style={{ color: MAPLE_COLORS.textMuted }}>{t("subtitle")}</p>
-        </Col>
-      </Row>
-
-      {/* Stats */}
-      <Row className="mb-4">
-        <Col>
-          {loading ? (
-            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
-              {t("loading")}
-            </p>
-          ) : (
-            <StatsBar stats={stats} />
-          )}
-        </Col>
-      </Row>
-
-      {/* Chart */}
-      {!loading && stats && (
+    <>
+      <LobbyingSubnav />
+      <Container>
+        <Row className="mt-4 mb-3">
+          <Col>
+            <h1>{t("titles.overview")}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted }}>{t("subtitle")}</p>
+          </Col>
+        </Row>
+
+        {/* Stats */}
         <Row className="mb-4">
           <Col>
-            <SpendFilingsChart stats={stats} />
+            {loading ? (
+              <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
+                {t("loading")}
+              </p>
+            ) : (
+              <StatsBar stats={stats} />
+            )}
           </Col>
         </Row>
-      )}
-
-      {/* Entry cards */}
-      <Row className="mb-4">
-        <Col md={4} className="mb-3">
-          <EntryCard
-            title={t("sections.bills")}
-            description={t("titles.bills")}
-            href="/lobbying/bills"
-            count={stats?.totalBillsWithFilings}
-            countLabel={t("sections.bills").toLowerCase()}
-          />
-        </Col>
-        <Col md={4} className="mb-3">
-          <EntryCard
-            title={t("sections.clients")}
-            description={t("titles.clients")}
-            href="/lobbying/clients"
-            count={stats?.totalClients}
-            countLabel={t("sections.clients").toLowerCase()}
-          />
-        </Col>
-        <Col md={4} className="mb-3">
-          <EntryCard
-            title={t("sections.firms")}
-            description={t("titles.firms")}
-            href="/lobbying/firms"
-            count={stats?.totalRegistrants}
-            countLabel="registrants"
-          />
-        </Col>
-      </Row>
-
-      <Row>
-        <Col>
-          <LobbyingAttribution />
-        </Col>
-      </Row>
-    </Container>
+
+        {/* Chart */}
+        {!loading && stats && (
+          <Row className="mb-4">
+            <Col>
+              <SpendFilingsChart stats={stats} />
+            </Col>
+          </Row>
+        )}
+
+        {/* Entry cards */}
+        <Row className="mb-4">
+          <Col md={4} className="mb-3">
+            <EntryCard
+              title={t("sections.bills")}
+              description={t("titles.bills")}
+              href="/lobbying/bills"
+              count={stats?.totalBillsWithFilings}
+              countLabel={t("sections.bills").toLowerCase()}
+            />
+          </Col>
+          <Col md={4} className="mb-3">
+            <EntryCard
+              title={t("sections.clients")}
+              description={t("titles.clients")}
+              href="/lobbying/clients"
+              count={stats?.totalClients}
+              countLabel={t("sections.clients").toLowerCase()}
+            />
+          </Col>
+          <Col md={4} className="mb-3">
+            <EntryCard
+              title={t("sections.firms")}
+              description={t("titles.firms")}
+              href="/lobbying/firms"
+              count={stats?.totalRegistrants}
+              countLabel="registrants"
+            />
+          </Col>
+        </Row>
+
+        <Row>
+          <Col>
+            <LobbyingAttribution />
+          </Col>
+        </Row>
+      </Container>
+    </>
   )
 }
 

From efce9f96db18132f40c2c0637f58ce07081fa80a Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Thu, 9 Jul 2026 10:36:48 -0400
Subject: [PATCH 10/25] fix: i18n all hardcoded strings in lobbying explorer;
 add mobile responsive column hiding

- Wire t() through all lobbying components: LobbyingSubnav, LobbyingPaginationBar,
  LobbyingFilingsTable, and all browse/detail pages
- Add missing translation keys: subnav, pagination, misc, registrantType, and
  new fields (bill, positions, activity, sessions, type, firms, total)
- Add lobbying.module.css with media query to hide table columns on mobile
- Bills index: hide Session and position count columns on mobile (<768px), leaving
  Bill | Filings | Positions mini-bar
- Bill detail: hide Activity column on mobile to reduce table width
- Client and firm detail pages: paginate filings table at 25/page (year desc)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/lobbying/LobbyingFilingsTable.tsx  |  2 +-
 components/lobbying/LobbyingPaginationBar.tsx |  6 ++-
 components/lobbying/LobbyingSubnav.tsx        | 18 +++++----
 components/lobbying/lobbying.module.css       |  5 +++
 pages/lobbying/bills/[court]/[billId].tsx     | 13 +++++--
 pages/lobbying/bills/index.tsx                | 27 ++++++++++----
 pages/lobbying/clients/[clientSlug].tsx       | 37 +++++++++++++++++--
 pages/lobbying/clients/index.tsx              |  2 +-
 pages/lobbying/firms/[registrantId].tsx       | 37 +++++++++++++++++--
 pages/lobbying/firms/index.tsx                | 12 +++---
 public/locales/en/lobbying.json               | 28 +++++++++++++-
 11 files changed, 149 insertions(+), 38 deletions(-)
 create mode 100644 components/lobbying/lobbying.module.css

diff --git a/components/lobbying/LobbyingFilingsTable.tsx b/components/lobbying/LobbyingFilingsTable.tsx
index 170458daf..e86236d0f 100644
--- a/components/lobbying/LobbyingFilingsTable.tsx
+++ b/components/lobbying/LobbyingFilingsTable.tsx
@@ -46,7 +46,7 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
             {showBill && <th>{t("fields.bills")}</th>}
             {showClient && <th>{t("fields.clientName")}</th>}
             {showFirm && <th>{t("fields.firmName")}</th>}
-            {showActivity && <th>Activity</th>}
+            {showActivity && <th>{t("fields.activity")}</th>}
             <th>{t("filters.position")}</th>
             {showAmount && (
               <th style={{ textAlign: "right" }}>{t("fields.amount")}</th>
diff --git a/components/lobbying/LobbyingPaginationBar.tsx b/components/lobbying/LobbyingPaginationBar.tsx
index b851a46ab..7c6254a45 100644
--- a/components/lobbying/LobbyingPaginationBar.tsx
+++ b/components/lobbying/LobbyingPaginationBar.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { useTranslation } from "next-i18next"
 import { MAPLE_COLORS } from "./chartTheme"
 
 interface Props {
@@ -16,6 +17,7 @@ export function LobbyingPaginationBar({
   pageSize,
   onPage
 }: Props) {
+  const { t } = useTranslation("lobbying")
   if (totalPages <= 1) return null
   const start = (page - 1) * pageSize + 1
   const end = Math.min(page * pageSize, totalItems)
@@ -31,7 +33,7 @@ export function LobbyingPaginationBar({
           disabled={page === 1}
           style={btnStyle(page === 1)}
         >
-          ← Prev
+          {t("pagination.prev")}
         </button>
         <span
           style={{
@@ -47,7 +49,7 @@ export function LobbyingPaginationBar({
           disabled={page === totalPages}
           style={btnStyle(page === totalPages)}
         >
-          Next →
+          {t("pagination.next")}
         </button>
       </div>
     </div>
diff --git a/components/lobbying/LobbyingSubnav.tsx b/components/lobbying/LobbyingSubnav.tsx
index 850e2298c..e6d6054d5 100644
--- a/components/lobbying/LobbyingSubnav.tsx
+++ b/components/lobbying/LobbyingSubnav.tsx
@@ -1,23 +1,25 @@
 import React from "react"
 import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
 import { Container } from "components/bootstrap"
 import { MAPLE_COLORS } from "./chartTheme"
 
-const LINKS = [
-  { label: "Overview", href: "/lobbying", exact: true },
-  { label: "Bills", href: "/lobbying/bills" },
-  { label: "Clients", href: "/lobbying/clients" },
-  { label: "Lobbying Firms", href: "/lobbying/firms" }
-]
-
 export function LobbyingSubnav() {
+  const { t } = useTranslation("lobbying")
   const { pathname } = useRouter()
 
+  const LINKS = [
+    { label: t("subnav.overview"), href: "/lobbying", exact: true },
+    { label: t("sections.bills"), href: "/lobbying/bills" },
+    { label: t("sections.clients"), href: "/lobbying/clients" },
+    { label: t("sections.firms"), href: "/lobbying/firms" }
+  ]
+
   return (
     <div style={barStyle}>
       <Container>
         <div style={innerStyle}>
-          <span style={titleStyle}>Lobbying Explorer</span>
+          <span style={titleStyle}>{t("subnav.label")}</span>
           <nav style={{ display: "flex", gap: "1.25rem" }}>
             {LINKS.map(({ label, href, exact }) => {
               const active = exact
diff --git a/components/lobbying/lobbying.module.css b/components/lobbying/lobbying.module.css
new file mode 100644
index 000000000..99137a73d
--- /dev/null
+++ b/components/lobbying/lobbying.module.css
@@ -0,0 +1,5 @@
+@media (max-width: 767px) {
+  .mobileHide {
+    display: none !important;
+  }
+}
diff --git a/pages/lobbying/bills/[court]/[billId].tsx b/pages/lobbying/bills/[court]/[billId].tsx
index 125ed0fe7..b95c170d5 100644
--- a/pages/lobbying/bills/[court]/[billId].tsx
+++ b/pages/lobbying/bills/[court]/[billId].tsx
@@ -13,6 +13,7 @@ import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar
 import { normalizePosition } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import type { LobbyingFiling } from "functions/src/lobbying/types"
+import styles from "components/lobbying/lobbying.module.css"
 
 const PAGE_SIZE = 50
 
@@ -54,7 +55,8 @@ function SortTh({
   current,
   dir,
   onSort,
-  style
+  style,
+  className
 }: {
   label: string
   sortKey: SortKey
@@ -62,12 +64,14 @@ function SortTh({
   dir: SortDir
   onSort: (k: SortKey) => void
   style?: React.CSSProperties
+  className?: string
 }) {
   const active = sortKey === current
   const indicator = active ? (dir === "asc" ? " ↑" : " ↓") : ""
   return (
     <th
       onClick={() => onSort(sortKey)}
+      className={className}
       style={{
         ...thStyle,
         ...style,
@@ -150,7 +154,7 @@ function BillFilingsPage() {
             {mapleHref && (
               <p style={{ fontSize: 13, marginBottom: "0.25rem" }}>
                 <a href={mapleHref} style={{ color: MAPLE_COLORS.primary }}>
-                  View bill on MAPLE →
+                  {t("misc.viewOnMaple")}
                 </a>
               </p>
             )}
@@ -213,7 +217,9 @@ function BillFilingsPage() {
                           dir={sortDir}
                           onSort={handleSort}
                         />
-                        <th style={thStyle}>Activity</th>
+                        <th style={thStyle} className={styles.mobileHide}>
+                          {t("fields.activity")}
+                        </th>
                         <SortTh
                           label={t("filters.position")}
                           sortKey="position"
@@ -262,6 +268,7 @@ function BillFilingsPage() {
                             </a>
                           </td>
                           <td
+                            className={styles.mobileHide}
                             style={{
                               ...cellStyle,
                               color: MAPLE_COLORS.textMuted,
diff --git a/pages/lobbying/bills/index.tsx b/pages/lobbying/bills/index.tsx
index 18f56b123..51203e95b 100644
--- a/pages/lobbying/bills/index.tsx
+++ b/pages/lobbying/bills/index.tsx
@@ -13,6 +13,7 @@ import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
 import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
 import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
+import styles from "components/lobbying/lobbying.module.css"
 
 const COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
 const PAGE_SIZE = 50
@@ -26,7 +27,8 @@ function SortTh({
   current,
   dir,
   onSort,
-  style
+  style,
+  className
 }: {
   label: string
   sortKey: BillSortKey
@@ -34,11 +36,13 @@ function SortTh({
   dir: SortDir
   onSort: (k: BillSortKey) => void
   style?: React.CSSProperties
+  className?: string
 }) {
   const active = sortKey === current
   return (
     <th
       onClick={() => onSort(sortKey)}
+      className={className}
       style={{
         ...thStyle,
         ...style,
@@ -253,13 +257,15 @@ function LobbyingBillsTable() {
               <thead>
                 <tr style={theadStyle}>
                   <SortTh
-                    label="Bill"
+                    label={t("fields.bill")}
                     sortKey="id"
                     current={sortKey}
                     dir={sortDir}
                     onSort={handleSort}
                   />
-                  <th style={thStyle}>{t("filters.session")}</th>
+                  <th style={thStyle} className={styles.mobileHide}>
+                    {t("filters.session")}
+                  </th>
                   <SortTh
                     label={t("fields.filings")}
                     sortKey="filings"
@@ -273,6 +279,7 @@ function LobbyingBillsTable() {
                     current={sortKey}
                     dir={sortDir}
                     onSort={handleSort}
+                    className={styles.mobileHide}
                   />
                   <SortTh
                     label={t("position.oppose")}
@@ -280,6 +287,7 @@ function LobbyingBillsTable() {
                     current={sortKey}
                     dir={sortDir}
                     onSort={handleSort}
+                    className={styles.mobileHide}
                   />
                   <SortTh
                     label={t("position.neutral")}
@@ -287,8 +295,9 @@ function LobbyingBillsTable() {
                     current={sortKey}
                     dir={sortDir}
                     onSort={handleSort}
+                    className={styles.mobileHide}
                   />
-                  <th style={thStyle}>Positions</th>
+                  <th style={thStyle}>{t("fields.positions")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -302,9 +311,11 @@ function LobbyingBillsTable() {
                         {b.billId}
                       </a>
                     </td>
-                    <td style={tdStyle}>{b.court}</td>
+                    <td style={tdStyle} className={styles.mobileHide}>
+                      {b.court}
+                    </td>
                     <td style={tdStyle}>{b.total}</td>
-                    <td style={tdStyle}>
+                    <td style={tdStyle} className={styles.mobileHide}>
                       {b.support > 0 && (
                         <LobbyingPositionChip position="support" />
                       )}{" "}
@@ -312,7 +323,7 @@ function LobbyingBillsTable() {
                         <span style={{ fontSize: 12 }}>{b.support}</span>
                       )}
                     </td>
-                    <td style={tdStyle}>
+                    <td style={tdStyle} className={styles.mobileHide}>
                       {b.oppose > 0 && (
                         <LobbyingPositionChip position="oppose" />
                       )}{" "}
@@ -320,7 +331,7 @@ function LobbyingBillsTable() {
                         <span style={{ fontSize: 12 }}>{b.oppose}</span>
                       )}
                     </td>
-                    <td style={tdStyle}>
+                    <td style={tdStyle} className={styles.mobileHide}>
                       {b.neutral > 0 && (
                         <LobbyingPositionChip position="neutral" />
                       )}{" "}
diff --git a/pages/lobbying/clients/[clientSlug].tsx b/pages/lobbying/clients/[clientSlug].tsx
index 586f4f9cc..c4fcc6cb9 100644
--- a/pages/lobbying/clients/[clientSlug].tsx
+++ b/pages/lobbying/clients/[clientSlug].tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { Col, Container, Row } from "components/bootstrap"
@@ -16,8 +16,12 @@ import {
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
 import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
+const PAGE_SIZE = 25
+
 function findFirmsForClient(
   registrants: LobbyingRegistrant[] | undefined,
   clientNameNorm: string
@@ -91,6 +95,24 @@ function ClientDetail() {
     [filings]
   )
 
+  const sortedFilings = useMemo(
+    () =>
+      [...(filings ?? [])].sort(
+        (a, b) =>
+          b.year - a.year || (a.billId ?? "").localeCompare(b.billId ?? "")
+      ),
+    [filings]
+  )
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sortedFilings,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [clientNameNorm, setPage])
+
   const loading =
     filStatus === "loading" ||
     filStatus === "not-requested" ||
@@ -133,7 +155,7 @@ function ClientDetail() {
                     currency: "USD",
                     maximumFractionDigits: 0
                   })}{" "}
-                  total
+                  {t("misc.total")}
                 </>
               )}
             </p>
@@ -154,16 +176,23 @@ function ClientDetail() {
             <Col md={8}>
               <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
               <LobbyingFilingsTable
-                filings={filings ?? []}
+                filings={pageItems}
                 showBill
                 showClient={false}
                 showFirm
                 showAmount
               />
+              <LobbyingPaginationBar
+                page={page}
+                totalPages={totalPages}
+                totalItems={totalItems}
+                pageSize={PAGE_SIZE}
+                onPage={setPage}
+              />
             </Col>
 
             <Col md={4}>
-              <h5 style={sectionHeadStyle}>Firms</h5>
+              <h5 style={sectionHeadStyle}>{t("sections.firms")}</h5>
               {firms.length === 0 ? (
                 <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>—</p>
               ) : (
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index ea1cb9ea4..29f5712c7 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -186,7 +186,7 @@ function LobbyingClientsTable() {
                     onSort={handleSort}
                   />
                   <SortTh
-                    label="Firms"
+                    label={t("fields.firms")}
                     sortKey="firms"
                     current={sortKey}
                     dir={sortDir}
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
index d7175d674..55c3c18c6 100644
--- a/pages/lobbying/firms/[registrantId].tsx
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { Col, Container, Row } from "components/bootstrap"
@@ -16,6 +16,10 @@ import {
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
+import { usePagination } from "components/lobbying/usePagination"
+import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
+
+const PAGE_SIZE = 25
 
 function FirmDetail() {
   const { t } = useTranslation("lobbying")
@@ -40,6 +44,24 @@ function FirmDetail() {
     filStatus === "loading" ||
     filStatus === "not-requested"
 
+  const sortedFilings = useMemo(
+    () =>
+      [...(filings ?? [])].sort(
+        (a, b) =>
+          b.year - a.year || (a.billId ?? "").localeCompare(b.billId ?? "")
+      ),
+    [filings]
+  )
+
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    sortedFilings,
+    PAGE_SIZE
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [entityNameNorm, setPage])
+
   if (!entityNameNorm) return null
 
   // Aggregate from all registrant docs for this entity
@@ -106,12 +128,19 @@ function FirmDetail() {
             <Col md={8}>
               <h5 style={sectionHeadStyle}>{t("sections.bills")}</h5>
               <LobbyingFilingsTable
-                filings={filings ?? []}
+                filings={pageItems}
                 showBill
                 showClient
                 showFirm={false}
                 showAmount
               />
+              <LobbyingPaginationBar
+                page={page}
+                totalPages={totalPages}
+                totalItems={totalItems}
+                pageSize={PAGE_SIZE}
+                onPage={setPage}
+              />
             </Col>
 
             {/* Right: clients + disclosure links */}
@@ -159,7 +188,7 @@ function FirmDetail() {
               {allDisclosureUrls.length > 0 && (
                 <>
                   <h5 style={{ ...sectionHeadStyle, marginTop: "1.5rem" }}>
-                    Disclosures
+                    {t("misc.disclosures")}
                   </h5>
                   <ul style={{ paddingLeft: "1.25rem", fontSize: 12 }}>
                     {allDisclosureUrls.map((url, i) => (
@@ -170,7 +199,7 @@ function FirmDetail() {
                           rel="noreferrer"
                           style={{ color: MAPLE_COLORS.primary }}
                         >
-                          Disclosure {i + 1}
+                          {t("misc.disclosureLink", { number: i + 1 })}
                         </a>
                       </li>
                     ))}
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
index dc2f5a6f1..4be174557 100644
--- a/pages/lobbying/firms/index.tsx
+++ b/pages/lobbying/firms/index.tsx
@@ -146,11 +146,11 @@ function LobbyingFirmsTable() {
             setRegTypeFilter(e.target.value as typeof regTypeFilter)
           }
           style={selectStyle}
-          aria-label="Registrant type"
+          aria-label={t("filters.allTypes")}
         >
-          <option value="all">All types</option>
-          <option value="Lobbyist">Lobbyist</option>
-          <option value="Employer">Employer</option>
+          <option value="all">{t("registrantType.all")}</option>
+          <option value="Lobbyist">{t("registrantType.lobbyist")}</option>
+          <option value="Employer">{t("registrantType.employer")}</option>
         </select>
 
         <input
@@ -193,9 +193,9 @@ function LobbyingFirmsTable() {
                     dir={sortDir}
                     onSort={handleSort}
                   />
-                  <th style={thStyle}>Type</th>
+                  <th style={thStyle}>{t("fields.type")}</th>
                   <SortTh
-                    label="Sessions"
+                    label={t("fields.sessions")}
                     sortKey="sessions"
                     current={sortKey}
                     dir={sortDir}
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
index 1bc7eaeb8..f40ee32b4 100644
--- a/public/locales/en/lobbying.json
+++ b/public/locales/en/lobbying.json
@@ -1,6 +1,25 @@
 {
   "title": "Lobbying Explorer",
   "subtitle": "Browse Massachusetts lobbying disclosures filed with the Secretary of State.",
+  "subnav": {
+    "label": "LOBBYING EXPLORER",
+    "overview": "Overview"
+  },
+  "pagination": {
+    "prev": "← Prev",
+    "next": "Next →"
+  },
+  "misc": {
+    "disclosures": "Disclosures",
+    "disclosureLink": "Disclosure {{number}}",
+    "viewOnMaple": "View bill on MAPLE →",
+    "total": "total"
+  },
+  "registrantType": {
+    "all": "All types",
+    "lobbyist": "Lobbyist",
+    "employer": "Employer"
+  },
   "stats": {
     "totalBills": "Lobbied bills",
     "totalClients": "Clients",
@@ -18,6 +37,7 @@
     "position": "Position",
     "allSessions": "All sessions",
     "allPositions": "All positions",
+    "allTypes": "All types",
     "search": "Search…"
   },
   "position": {
@@ -33,7 +53,13 @@
     "year": "Year",
     "filings": "Filings",
     "bills": "Bills lobbied",
-    "clients": "Clients represented"
+    "clients": "Clients represented",
+    "bill": "Bill",
+    "positions": "Positions",
+    "activity": "Activity",
+    "sessions": "Sessions",
+    "type": "Type",
+    "firms": "Firms"
   },
   "attribution": "Data from the MA Secretary of State Lobbyist Public Search.",
   "noData": "No lobbying filings found.",

From 6b806daa564b2363452d90fd591cb9f93bbafa7c Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 14 Jul 2026 22:37:26 -0400
Subject: [PATCH 11/25] =?UTF-8?q?fix:=20add=20archive.py=20to=20Dockerfile?=
 =?UTF-8?q?=20=E2=80=94=20was=20missing=20from=20COPY,=20causing=20ModuleN?=
 =?UTF-8?q?otFoundError=20at=20runtime?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 lobbying-scraper/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lobbying-scraper/Dockerfile b/lobbying-scraper/Dockerfile
index 4b2da65b5..afdf54d04 100644
--- a/lobbying-scraper/Dockerfile
+++ b/lobbying-scraper/Dockerfile
@@ -5,7 +5,7 @@ WORKDIR /app
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-COPY normalize.py portal.py writer.py scrape.py ./
+COPY archive.py normalize.py portal.py writer.py scrape.py ./
 
 # Cloud Run sets PORT; we don't use it (this is a job, not a server).
 # Cloud Scheduler invokes the container via HTTP POST to /; handle it minimally.

From 80901b993876db29c02bb35fc22cfa2596de883f Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Thu, 16 Jul 2026 09:30:14 -0400
Subject: [PATCH 12/25] perf: skip already-completed years in backfill to speed
 up resume

On timeout/resume, the backfill was re-fetching every Summary.aspx page
for completed years (~5 hours of HTTP requests just to re-verify nothing
was new). Now writes completedYears[] to the cursor doc on year finish;
subsequent runs skip those years entirely with zero network requests.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../__pycache__/normalize.cpython-37.pyc      | Bin 1412 -> 1412 bytes
 .../__pycache__/portal.cpython-37.pyc         | Bin 16091 -> 16091 bytes
 lobbying-scraper/scrape.py                    |  20 ++++++++++++++++++
 .../tests/__pycache__/__init__.cpython-37.pyc | Bin 166 -> 166 bytes
 4 files changed, 20 insertions(+)

diff --git a/lobbying-scraper/__pycache__/normalize.cpython-37.pyc b/lobbying-scraper/__pycache__/normalize.cpython-37.pyc
index 94efb861e98ad8f45f5a0ec1065e5d0290dfb499..888500fe6c16ecf93a0179488d0c38d0de28f8fa 100644
GIT binary patch
delta 20
ZcmZqSZsF#3;^pOH0D{>}z8kqKSpg+O1GE4D

delta 20
ZcmZqSZsF#3;^pOH00O^GyN%qHtN<nl1K$7u

diff --git a/lobbying-scraper/__pycache__/portal.cpython-37.pyc b/lobbying-scraper/__pycache__/portal.cpython-37.pyc
index d515175f364a6ecf06fd72e46412580c29dbe6e1..85442cfa8fe3cb2bc24073bfe4e798a73e97b6ae 100644
GIT binary patch
delta 3444
zcma)8ZERcB8Sb$iJGGm}agrvE<J9?R8pk2cSDWUev?--fK~j+xXq~j?#=c1nj^mws
z(~__>>jzNKU{w!d(tv%?F$u9stFj*xU!wfjMm6|{kWPgJLKW(!YMQiP{lWG==f<%e
zS}B(N-1nYy-mmAp=iK+k!i@#b-jWjcI{Lj~8@}q<?qboUA=fx_R?`r#7MF{MH+e~X
znEr-?z-=pL93$f2u1%tL{g|_iUbs&ztk*irNgN3~cm;+k0h<6-0L$Qt<cCxvO5FiR
z4T;LyKKDUZCSG$-^xe$>yh}$aX_$P=ikX~MWiTYRc`6;Dtij`+Vb&!6=-D^6${=j<
zW<U!-1sH~uv!^6wbSq70^k2^3$2dl$J()JcHr^l}*`RqF3YGoh!wt>8Z5RYSVVksb
z?G%rQ|8Dp>i;6QPf%;O6+j$2)Br~H$&!lHgrStsz#YZKr^*uB_Uve;GCTG%GYK(F}
zMoIx1<+XswQt`$G=Gh1<_9@-ut>R*7Fu1ZnIx}3KOg>v+_<Cu(ua7jyQay~Q;3LBA
zovT@Sm-c7$xdN@XyrGUEXt^vcA5@j2AW5=hN>A%tOU2?dv)tsHF&h!Ly+`$a5~Ibj
zSb8><ipBT<y@s9A@$^hGt=Qp%Si1{wKVUZ&+|>!+i+N>w52V~~`Nex>A+}HaqpX@m
z#Lcqnp8UD@ec`|`6r2QMyL1`4VGyIzKFd?Y;Sat}#@a+j#ZBjSEPF@<DyNtf=PH|<
zMlf)YK)N*3)TcA1WLz@6!1?EueRWe<<47dqCY^wsmLs8=8u@72RL-i}Xw9uZ6HwtK
z>A@cZjEa$}#n!_R9|t@EcoJ}gKsqurwC@k${U{(RZdV2SkqVyx#0kRAoJ-4c0#iC*
z5|B^FNcE15DJa>b!<d=P&^}$Nel>v9X~@>z5vAJB6sQdNC%n_E?OgE(gQsY4emzcQ
zwm4Pl%O&-_|4Wux`lzPJR*3+@OtQjK{Hpeg@}JO*WLkm0zXbO$o}=-@Va6As>EeoC
z_n`-eMjv=M_W0<d9ImYbLNd}ZnM^16Ni1F_Lj|Ft2G`QXbz?SV8hjp#d4yoHd{Q^#
zCt}9z^t8t3VyR?WEYx+e3*t|8-<2+(;UYa1OD2e|w>Lkq=QL>{x-J;Y5YU#s087Pm
z3}dGLEG~zaFksVDv@XY<x>P2_me8;0D)=PybnhXUK$iSx1f+Hb@>xp;I~-K3ikP1l
zT7A#{0+Jkg=eZFoxG1R_TOscNfF2$q2p3xssS2tWH|m28iY}-{*C&!jJVs~3P)@Va
z`$bK|V9l%0wyScJo-AML9EnUrXFaCXUQr&Z6n=q$JhsKB4b62IX>h)D<zAai&1mK^
z(oo?<gtPJZZg6^swS^tnxJ*im>xyexq!z1mmKCHcp3=3no+xm0xv{zGb@+Axnh9vR
z+WLt2rtxHBwjksAT3Gs1f)+-?f|zS+uL5Pn!0MtAA2$VjZ(z=DF{$W_Ed8tLV>g=@
z)4iSI#<uEKWRWHDxvXq?RCNGn2P|j7j!t%39PAj_ikc#qFXLh3>U`MDg6v@Fytvvi
zSo<bK+$)@{&|N}6I_h#Rr#ve}uyaqhRiDzvb?G#8jmJ-r`Fn*EwZggBxxaTU(H~dK
z$!+d5Ac>YAC&5*$d8L4W&x=e~ty9Gt5U+GqvvToX*Wm$ZbDS~BVz>TBKS~OG$RZ<?
zO5$u;v={~V6qLB=@19!|@29OqzwX{0TT7y6vx%y>_}g%HnPA>K-qbQSo@hH38E+p?
zj3>f(ScqSu8H!T%7h&;S&v4_t_`bAa_m?1U@yEnTn|We&m7XX2Z<3~ABf-h|yYz?_
z55>*o$)q{QUx9nORTHW@ew#NiN;3bQH2`@;y~N2H{lq)l+d^J7s*cDq)2tu@@t^Id
zz33ac2e1K9A{KWTYv1;o-e#5&L%k8!NvCCKO*?i|QFRZN?p|IL**{lkTF0-@d$^9P
z)(qD*#}QW7qO_;<v~+5jj85MX5WsPL$P#>4V$?>ROwP<2st9?{x}7wQ9*WlhRM+r(
zNN)jt4S0<}7EN({U<G8mLH*fQaeZe4>k_wjHdr52b!{wH$>zRCD}2xm5JX+nGE&nt
z&4XgGFU<ZR-tFsU2gJ91kFlMiyZ=6K;YpHJ;#x=5(u@5zR{K}dU+zL=arQFL_Id9N
zbT?yxbxT_}IsY35R4jQ`#Sa55wST9XycU$YUR>1Zi0DhWcknmes)EQ{E_L<2S)vu$
zh1ak;-*CmQE$lPVzboV!#FSEfLg>3%7SZQO`-IV>nl<b4ehO>O0-gsv0yqLt?b30Q
zqVD|%Mh_j19i{ew--oGozz2Yh0M+7`LQ*@cb}fY0tpHUH=(YKn+SDP4`vAj$DFB)b
htLL}?Nqy%oLQ)?YRYr<c@Wnp^<PuhrUrgO^{vXRp!Il63

delta 3461
zcma)8eQZ<L73bQH9c)6JFOt}Cu#*sMVuC|LLJ|Umu&7ZRG9cZG6L25)OE7gDbKeUP
zSV&t+t9H}IxZSi(>spmDwPMp&rIn^>RQvd6quc(gDqS>b(}bpOs-{VkCiRbQ=XYNm
z+d!pQ^6#B@?meIPob&FzrF%=BLlqV74fGp%WB)szJuW6!hF#Ol*+?wjC~lUIZ>b{k
zG5Q-00=KQ4ad5=HTw6rb#wlktz3>{bv{CD-CGtqb!Rx@<0;mTx04#-Tln<0&RJ#2R
zKaon?VfO^97O%Qb_diMjtV>5GZJ4}$O-(_oQWz4uJavvxUg0UvINK(E>^VI3fI{fv
z+W`@Pa&QNzf<8qlrD0mo=)W3&HRIq&dpc`IY`j%GzDe`8mJ0jCFE_PU$G}8-A~tE~
z+65jJ|Jn34CdG3V{*V`ZJMW^0WM;hVne6<9Y>|DRxKpts)Jw~kDkgGfdOoXVrYQE4
zB-BJ)9sopF$~P}DPbIY2XLXZzi0hSsz}g1s%yE4teX&IG-OA4DL6RU%El{GIj|#VU
z(YN+4?a%0oB~q_>gRv1vxh$y~h$=(PM9GR-J*#sqlSs}laFYkI8Wo>-Pw4xIjF%@8
z*@a9dk>Er08gWX;+4*!<Wry#_-UEPxfMJ418{vns9t0c$6i&-0ZdV1_sQ5!w1B;6L
zRd+qbYrm+D_$MIXB#79h%g_yjGAiv0JVQDBth$S_og!9y-`R(4W5QoI%i`i{U3=RX
z!8l4FU7Bg?b2(EoE}33p{Ev10&1bO3kxC~`>VSfjBc+)d*=XBR!|Hd^o{!%ppu#yz
z4}KglDUQ@H2fqaJ%Ydf<CjfB*>B!B~xsQqe)&~wh4K9jNg~F4dQUnoa!K9^G$I=X7
z7EqjyBMrTq=OAR04r6{HN9S~-;p={cPApqzEKaqZD-juNJnhXssOKk*fxty#UfPJR
z%onE$eYK?i-uNLqw{pi<W~+k(5hht_DSp)Sry5Qxl4&LOejXTIeu4Ot5yqc|q>HQk
zx{rTh_}Iu}i6@Ue!C~4eAOs^FGwE!KU%=+oWGE+;*T}VWaot$Rm<GQL!J>p<v1Ud$
zlV=jf!rYw37ZaIuRxCB|W-p7MHUF)0wTH{}Od_44Y`wX4<lr(%!Mh$PJ4ZlA`Vusi
zQyV5s{UV0LD`4344DBmqPYso%*cSXAje=hV&-OhD70&{mBOtNoL0`3KWQQXa4|vS4
z2`$t!T9PD3Q9rjq1cQ>Qu><s80Mf%l;Fen+sS0Wl_d<adl`e?IH>T1?GC{pzD5H7r
zeZtqW&vzZtc2#cDlh2pxBav(A3Sn8D6~&=S;hSI-Wn28FrM>wEF)vlF&9#}#yk?#x
z3FS^yI9pF0Ku$kp(TD>Fm&<5LUFBMqsm&^!RRQTrW^^s9r%KG+Y;CXq4s5#s+X-m9
zI{K*iOY8a8d_g9QrLc90Ak2ukA{N^^>s3Xuhl)nL-{!A=4O;D1CRO^PEB|bJ-_0(I
zxxOxOZ&$+(M3GP8SMs!FQPlyAjakM5u`aeOCSrrzQB#!kui|0jsy}RINp#S3O}rD^
z*YpFBm@AyL&@3S!88w`1Db89E=sMVK)u*&^T{;b2<H<9m{`1_4Tkc%%8tq$;_ovi$
zGF#{d1QC8X2(ElBDg`)vP2_erZB_oNk4XSbd{OvTKoC$XZttEPRGo&llPvM^|L8|?
zB1N*y$Ys)KH!D*{$>@T-AqKh^*L4(Etl0nDeIT)(*q_hG&fypTA>bClCGT`wcxpNo
zJ=rncIh~qLMLuOg{wl4Im+H!~LtO3|Z~eR@xUr`9yU6A8!?~0;^UQ;VdyVvepCk<%
z5l+T$(<5F!oHWzt)8-=o2F%;7GEoKdW)WkOXnxaTfIgyLlBA7(;?|yMuu5@N*Q{om
zm3Scjz2}P8L!0;}Km}m4Snf5}UkSdxc6Lq-_jRytYM|lpdXC^exhTeCLyySOqw9_Q
z`o~(5Ht?U)d!(7i;4bDjM^CFcDeW0OE1g;{r_+Z8;d9IrS%D8tg6>u4)AI|4DnZ`6
zfyOJxrHcCj_?Ge?0bU2Z0r)n7ESu%{;(iOX-JlCwSlr#)!g|Cfdt0n8tePXMHL|t;
ziQ2W+h`Z<xNw=su-Yk~;BkV2lc7GpxT>Q2FC>s#n13SH?ttIQluVeKqFAdmO)9=XM
z>a|3c=cjxA;&*GXyB!;>v2BfZ{(CT#FGX6#XM^FUyR=etC#7pJCihY7kBUS4Uhh`*
zL)HqRcVO{7g8atcf>Ervc4!;>Knx58J?b{7M4uA+P<VNawo3bHqsO}PsA+y0;#UDL
z0>%NjD_Qrar-_QYN5_sGpG=&f`vUL8(k{RqKqa67;036YRi_rhYZ#!)p%>JYI@A%6
oqkstj?jn2+a1rn_;5q=`HB}{68L6xyU;G0=Az(%M#O!|a|9*DGy#N3J

diff --git a/lobbying-scraper/scrape.py b/lobbying-scraper/scrape.py
index 657c59603..151349c8a 100644
--- a/lobbying-scraper/scrape.py
+++ b/lobbying-scraper/scrape.py
@@ -172,6 +172,17 @@ def run_weekly(
 # ── Historical backfill ───────────────────────────────────────────────────────
 
 
+def _completed_years(db: "firestore.Client") -> set[int]:
+    data = db.document(BACKFILL_DOC).get().to_dict() or {}
+    return set(data.get("completedYears", []))
+
+
+def _mark_year_complete(db: "firestore.Client", year: int) -> None:
+    db.document(BACKFILL_DOC).set(
+        {"completedYears": firestore.ArrayUnion([year])}, merge=True
+    )
+
+
 def run_backfill(
     db: "firestore.Client | None",
     years: list[int],
@@ -182,7 +193,14 @@ def run_backfill(
     session = make_session()
     total_new = 0
 
+    done = _completed_years(db) if db is not None and not dry_run else set()
+    if done:
+        print(f"Skipping already-completed years: {sorted(done)}")
+
     for year in years:
+        if year in done:
+            continue
+
         print(f"\n── {year} ──")
         try:
             summary_urls = fetch_summary_links(session, year)
@@ -221,6 +239,8 @@ def run_backfill(
                 print(f"  [{i+1}/{len(summary_urls)}] {year_new} new disclosures so far")
 
         print(f"  {year} complete: {year_new} new disclosures")
+        if db is not None and not dry_run and not limit:
+            _mark_year_complete(db, year)
 
     return total_new
 
diff --git a/lobbying-scraper/tests/__pycache__/__init__.cpython-37.pyc b/lobbying-scraper/tests/__pycache__/__init__.cpython-37.pyc
index 33712a9e9d1c30a3e9f3117c1aeee0bc732287a3..c8d566ec11919748b4b441c70b0598f95e30e7d9 100644
GIT binary patch
delta 19
ZcmZ3+xQvn8iI<m)0SIO@`A+1X4FDv?1K|Jw

delta 19
ZcmZ3+xQvn8iI<m)0SGt*>?d;11^^*p15N+{


From aa24b76014e265106ecf9f6b45fcd23896b4ec29 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Mon, 20 Jul 2026 14:14:03 -0400
Subject: [PATCH 13/25] feat: lobbying overview chart improvements and stats
 pipeline

- Fix seedLobbyingStats to sum compensation from registrant client
  records instead of per-bill filing amounts; fixes spendByYear being
  wildly understated
- Add compute_stats() to writer.py and wire it into scrape.py so stats
  are recomputed automatically after any run that writes new data
- Add chart legend and per-axis labels (Compensation / Filings) with
  correct tooltip formatting (filings shown as count, not currency)
- Add data notes below chart explaining portal discontinuities in 2010,
  2014, and 2019 with citations to MGL Chapter 3 and Acts of 2009 Ch.28

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/lobbying/chartTheme.tsx          |  11 +-
 lobbying-scraper/scrape.py                  |   6 +
 lobbying-scraper/writer.py                  |  55 +++++++
 pages/lobbying/index.tsx                    | 174 +++++++++++++-------
 scripts/firebase-admin/seedLobbyingStats.ts |  29 ++--
 5 files changed, 200 insertions(+), 75 deletions(-)

diff --git a/components/lobbying/chartTheme.tsx b/components/lobbying/chartTheme.tsx
index 7e1aea0f8..b72fd5290 100644
--- a/components/lobbying/chartTheme.tsx
+++ b/components/lobbying/chartTheme.tsx
@@ -199,7 +199,7 @@ export const LEGEND_PROPS = {
 export const MapleTooltip: React.FC<
   TooltipContentProps<ValueType, NameType> & {
     labelFormatter?: (label: string | number) => React.ReactNode
-    valueFormatter?: (value: ValueType) => string
+    valueFormatter?: (value: ValueType, dataKey?: NameType) => string
   }
 > = ({ active, payload, label, labelFormatter, valueFormatter }) => {
   if (!active || !payload?.length) return null
@@ -219,7 +219,14 @@ export const MapleTooltip: React.FC<
             {entry.name}
           </span>
           <span style={{ fontWeight: 600 }}>
-            {entry.value != null ? fmt(entry.value) : ""}
+            {entry.value != null
+              ? fmt(
+                  entry.value,
+                  typeof entry.dataKey !== "function"
+                    ? entry.dataKey
+                    : undefined
+                )
+              : ""}
           </span>
         </div>
       ))}
diff --git a/lobbying-scraper/scrape.py b/lobbying-scraper/scrape.py
index 151349c8a..55fa793c6 100644
--- a/lobbying-scraper/scrape.py
+++ b/lobbying-scraper/scrape.py
@@ -39,6 +39,7 @@
     BACKFILL_DOC,
     BACKFILL_URLS_COLLECTION,
     SCRAPER_DOC,
+    compute_stats,
     write_filings,
     write_registrant,
 )
@@ -283,6 +284,11 @@ def main() -> None:
         n = run_backfill(db, years, limit=args.limit, dry_run=args.dry_run)
         print(f"\nBackfill complete: {n} new disclosures written.")
 
+    # Recompute aggregate stats after any run that wrote new data.
+    # Skip when --limit is set (partial run would produce inaccurate totals).
+    if db is not None and not args.dry_run and not args.limit and n > 0:
+        compute_stats(db)
+
     # Emit structured result for callers (e.g. TypeScript backfill script)
     print(json.dumps({"newDisclosures": n}), file=sys.stderr)
 
diff --git a/lobbying-scraper/writer.py b/lobbying-scraper/writer.py
index d49d12424..fd758f8ae 100644
--- a/lobbying-scraper/writer.py
+++ b/lobbying-scraper/writer.py
@@ -25,12 +25,67 @@
 SCRAPER_DOC = "scrapers/lobbying"
 BACKFILL_DOC = "scrapers/lobbyingBackfill"
 BACKFILL_URLS_COLLECTION = "processedUrls"
+STATS_COLLECTION = "lobbyingMeta"
+STATS_DOC_ID = "stats"
 
 
 def _now() -> datetime:
     return datetime.now(tz=timezone.utc)
 
 
+def compute_stats(db: firestore.Client) -> None:
+    """Recompute and write the lobbyingMeta/stats singleton from raw collections."""
+    print("\nRecomputing stats…")
+    bills: set[str] = set()
+    courts: set[int] = set()
+    filings_by_year: dict[str, int] = {}
+    total_filings = 0
+
+    for doc in db.collection(FILINGS_COLLECTION).stream():
+        d = doc.to_dict()
+        year = str(d.get("year", ""))
+        gc = d.get("generalCourt")
+        bill_id = d.get("billId")
+        if bill_id and len(bill_id) > 2 and gc:
+            bills.add(f"{gc}/{bill_id}")
+        if gc:
+            courts.add(gc)
+        if year:
+            filings_by_year[year] = filings_by_year.get(year, 0) + 1
+        total_filings += 1
+
+    client_norms: set[str] = set()
+    spend_by_year: dict[str, float] = {}
+    total_registrants = 0
+
+    for doc in db.collection(REGISTRANTS_COLLECTION).stream():
+        d = doc.to_dict()
+        year = str(d.get("year", ""))
+        for c in d.get("clients", []):
+            norm = c.get("clientNameNorm")
+            if norm:
+                client_norms.add(norm)
+            comp = c.get("compensation")
+            if comp is not None and year:
+                spend_by_year[year] = spend_by_year.get(year, 0) + comp
+        total_registrants += 1
+
+    stats = {
+        "totalFilings": total_filings,
+        "totalRegistrants": total_registrants,
+        "totalClients": len(client_norms),
+        "totalBillsWithFilings": len(bills),
+        "courtsWithData": sorted(courts),
+        "spendByYear": spend_by_year,
+        "filingsByYear": filings_by_year,
+    }
+    db.collection(STATS_COLLECTION).document(STATS_DOC_ID).set(stats, merge=True)
+    print(
+        f"  stats written: {total_filings} filings, "
+        f"{total_registrants} registrants, {len(client_norms)} clients"
+    )
+
+
 def write_registrant(
     db: firestore.Client,
     meta: DisclosureMeta,
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
index 8e843ccaa..98fd216e3 100644
--- a/pages/lobbying/index.tsx
+++ b/pages/lobbying/index.tsx
@@ -5,6 +5,7 @@ import {
   Bar,
   CartesianGrid,
   ComposedChart,
+  Legend,
   Line,
   ResponsiveContainer,
   Tooltip,
@@ -107,68 +108,94 @@ function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
 
   if (!stats || data.length === 0) return null
 
+  const axisLabelStyle: React.CSSProperties = {
+    position: "absolute",
+    top: 0,
+    fontSize: 11,
+    fontWeight: 700,
+    color: MAPLE_COLORS.textMuted,
+    fontFamily: "Nunito, system-ui, sans-serif",
+    pointerEvents: "none",
+    lineHeight: 1
+  }
+
   return (
     <ChartContainer
       title={`${t("fields.amount")} & ${t("fields.filings")} by ${t(
         "filters.year"
       )}`}
-      height={240}
+      height={260}
       className="mb-4"
     >
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart
-          data={data}
-          margin={{ top: 4, right: 48, left: 0, bottom: 0 }}
-        >
-          <CartesianGrid {...GRID_PROPS} />
-          <XAxis dataKey="year" {...X_AXIS_PROPS} />
-          <YAxis
-            yAxisId="spend"
-            orientation="left"
-            {...Y_AXIS_PROPS}
-            tickFormatter={formatCurrencyCompact}
-          />
-          <YAxis
-            yAxisId="filings"
-            orientation="right"
-            tick={{
-              fill: MAPLE_COLORS.textMuted,
-              fontSize: 12,
-              fontFamily: "Nunito, system-ui, sans-serif"
-            }}
-            axisLine={false}
-            tickLine={false}
-            width={48}
-            tickFormatter={formatCount}
-          />
-          <Tooltip
-            content={props => (
-              <MapleTooltip
-                {...props}
-                labelFormatter={y => `${y}`}
-                valueFormatter={v => {
-                  const n = Number(v)
-                  return n > 10_000 ? formatCurrency(n) : formatCount(n)
-                }}
-              />
-            )}
-          />
-          <Bar
-            yAxisId="spend"
-            dataKey="spend"
-            name={t("fields.amount")}
-            fill={MAPLE_COLORS.periwinkle}
-            {...BAR_PROPS_COMPACT}
-          />
-          <Line
-            yAxisId="filings"
-            dataKey="filings"
-            name={t("fields.filings")}
-            stroke={MAPLE_COLORS.primary}
-            {...LINE_PROPS_EMPHASIS}
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+      <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        <span style={{ ...axisLabelStyle, left: 4 }}>{t("fields.amount")}</span>
+        <span style={{ ...axisLabelStyle, right: 52 }}>
+          {t("fields.filings")}
+        </span>
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart
+            data={data}
+            margin={{ top: 16, right: 48, left: 0, bottom: 4 }}
+          >
+            <CartesianGrid {...GRID_PROPS} />
+            <XAxis dataKey="year" {...X_AXIS_PROPS} />
+            <YAxis
+              yAxisId="spend"
+              orientation="left"
+              {...Y_AXIS_PROPS}
+              tickFormatter={formatCurrencyCompact}
+            />
+            <YAxis
+              yAxisId="filings"
+              orientation="right"
+              tick={{
+                fill: MAPLE_COLORS.textMuted,
+                fontSize: 12,
+                fontFamily: "Nunito, system-ui, sans-serif"
+              }}
+              axisLine={false}
+              tickLine={false}
+              width={56}
+              tickFormatter={formatCount}
+            />
+            <Legend
+              wrapperStyle={{
+                fontSize: 12,
+                fontFamily: "Nunito, system-ui, sans-serif",
+                color: MAPLE_COLORS.textMuted,
+                paddingTop: 4
+              }}
+            />
+            <Tooltip
+              content={props => (
+                <MapleTooltip
+                  {...props}
+                  labelFormatter={y => `${y}`}
+                  valueFormatter={(v, key) =>
+                    key === "filings"
+                      ? formatCount(Number(v))
+                      : formatCurrency(Number(v))
+                  }
+                />
+              )}
+            />
+            <Bar
+              yAxisId="spend"
+              dataKey="spend"
+              name={t("fields.amount")}
+              fill={MAPLE_COLORS.periwinkle}
+              {...BAR_PROPS_COMPACT}
+            />
+            <Line
+              yAxisId="filings"
+              dataKey="filings"
+              name={t("fields.filings")}
+              stroke={MAPLE_COLORS.primary}
+              {...LINE_PROPS_EMPHASIS}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
     </ChartContainer>
   )
 }
@@ -281,6 +308,37 @@ function LobbyingOverview() {
           </Col>
         </Row>
 
+        <Row className="mb-3">
+          <Col>
+            <p style={dataNotesStyle}>
+              Compensation figures reflect amounts reported by registered
+              lobbyists and employers to the Massachusetts Secretary of State
+              under{" "}
+              <a
+                href="https://malegislature.gov/Laws/GeneralLaws/PartI/TitleI/Chapter3"
+                target="_blank"
+                rel="noreferrer"
+              >
+                MGL Chapter 3
+              </a>
+              . Data begins in 2005, the first year available on the portal. The
+              sharp increase in reported activity starting in 2010 coincides
+              with{" "}
+              <a
+                href="https://malegislature.gov/Laws/SessionLaws/Acts/2009/Chapter28"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Chapter 28 of the Acts of 2009
+              </a>
+              , which significantly expanded lobbying disclosure requirements.
+              Apparent increases in compensation and disclosure filings in 2014
+              and 2019 likely reflect changes in how the portal records activity
+              rather than real-world shifts in lobbying volume.
+            </p>
+          </Col>
+        </Row>
+
         <Row>
           <Col>
             <LobbyingAttribution />
@@ -368,6 +426,12 @@ const entryCardDesc: React.CSSProperties = {
   marginTop: "0.2rem"
 }
 
+const dataNotesStyle: React.CSSProperties = {
+  fontSize: 13,
+  color: MAPLE_COLORS.textMuted,
+  lineHeight: 1.6
+}
+
 const entryCardCount: React.CSSProperties = {
   fontSize: 20,
   fontWeight: 700,
diff --git a/scripts/firebase-admin/seedLobbyingStats.ts b/scripts/firebase-admin/seedLobbyingStats.ts
index d5b096fa9..5bcd43760 100644
--- a/scripts/firebase-admin/seedLobbyingStats.ts
+++ b/scripts/firebase-admin/seedLobbyingStats.ts
@@ -14,11 +14,8 @@ export const script: Script = async ({ db }) => {
   const registrantsSnap = await db.collection(REGISTRANTS_COLLECTION).get()
   console.log(`  ${registrantsSnap.size} registrants`)
 
-  const entityNames = new Set<string>()
-  const clientNames = new Set<string>()
   const bills = new Set<string>()
   const courts = new Set<number>()
-  const spendByYear: Record<string, number> = {}
   const filingsByYear: Record<string, number> = {}
 
   for (const doc of filingsSnap.docs) {
@@ -26,10 +23,6 @@ export const script: Script = async ({ db }) => {
     const year: number = d.year
     const gc: number = d.generalCourt
 
-    entityNames.add(d.entityNameNorm ?? d.entityName)
-
-    if (d.clientNameNorm) clientNames.add(d.clientNameNorm)
-
     if (d.billId && d.billId.length > 2) {
       bills.add(`${gc}/${d.billId}`)
     }
@@ -38,24 +31,24 @@ export const script: Script = async ({ db }) => {
 
     const y = String(year)
     filingsByYear[y] = (filingsByYear[y] ?? 0) + 1
-    if (d.amount != null) {
-      spendByYear[y] = (spendByYear[y] ?? 0) + d.amount
-    }
   }
 
-  // Also count unique clients from registrant docs (more reliable than filings)
-  const clientNormsFromRegistrants = new Set<string>()
+  // Aggregate spend and unique clients from registrant docs.
+  // Registrant clients[].compensation is the annual total paid per client
+  // relationship — more accurate than the per-bill amount on filings.
+  const clientNorms = new Set<string>()
+  const spendByYear: Record<string, number> = {}
   for (const doc of registrantsSnap.docs) {
     const d = doc.data()
+    const y = String(d.year)
     for (const c of d.clients ?? []) {
-      if (c.clientNameNorm) clientNormsFromRegistrants.add(c.clientNameNorm)
+      if (c.clientNameNorm) clientNorms.add(c.clientNameNorm)
+      if (c.compensation != null) {
+        spendByYear[y] = (spendByYear[y] ?? 0) + c.compensation
+      }
     }
   }
-  // Use whichever source gives more clients
-  const totalClients = Math.max(
-    clientNames.size,
-    clientNormsFromRegistrants.size
-  )
+  const totalClients = clientNorms.size
 
   const stats = {
     totalFilings: filingsSnap.size,

From 9abda4a5e555e417bf64a9a341c14b93c26c9069 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Mon, 20 Jul 2026 14:35:52 -0400
Subject: [PATCH 14/25] fix: improve bill detail page in lobbying explorer

- Show bill description (activityTitle) once in the header instead of
  repeating it verbatim in every table row
- Show General Court session (e.g. "194th General Court") below bill ID
- Remove redundant Activity column from the filings table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pages/lobbying/bills/[court]/[billId].tsx | 50 +++++++++++++++++------
 public/locales/en/lobbying.json           |  3 +-
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/pages/lobbying/bills/[court]/[billId].tsx b/pages/lobbying/bills/[court]/[billId].tsx
index b95c170d5..a25e081d8 100644
--- a/pages/lobbying/bills/[court]/[billId].tsx
+++ b/pages/lobbying/bills/[court]/[billId].tsx
@@ -86,6 +86,21 @@ function SortTh({
   )
 }
 
+function ordinalSuffix(n: number): string {
+  const v = n % 100
+  if (v >= 11 && v <= 13) return "th"
+  switch (n % 10) {
+    case 1:
+      return "st"
+    case 2:
+      return "nd"
+    case 3:
+      return "rd"
+    default:
+      return "th"
+  }
+}
+
 function BillFilingsPage() {
   const { t } = useTranslation("lobbying")
   const { query } = useRouter()
@@ -98,6 +113,11 @@ function BillFilingsPage() {
     error
   } = useLobbyingFilingsForBill(court, billId ?? "")
 
+  const billDescription = useMemo(
+    () => filings?.find(f => f.activityTitle)?.activityTitle ?? null,
+    [filings]
+  )
+
   const [sortKey, setSortKey] = useState<SortKey>("year")
   const [sortDir, setSortDir] = useState<SortDir>("desc")
   const [posFilter, setPosFilter] = useState<
@@ -151,6 +171,23 @@ function BillFilingsPage() {
               ← {t("titles.bills")}
             </a>
             <h1 className="mt-2">{billId}</h1>
+            {court > 0 && (
+              <p
+                style={{
+                  color: MAPLE_COLORS.textMuted,
+                  fontSize: 13,
+                  marginBottom: "0.15rem"
+                }}
+              >
+                {court}
+                {ordinalSuffix(court)} {t("misc.generalCourt")}
+              </p>
+            )}
+            {billDescription && (
+              <p style={{ fontSize: 14, marginBottom: "0.25rem" }}>
+                {billDescription}
+              </p>
+            )}
             {mapleHref && (
               <p style={{ fontSize: 13, marginBottom: "0.25rem" }}>
                 <a href={mapleHref} style={{ color: MAPLE_COLORS.primary }}>
@@ -217,9 +254,6 @@ function BillFilingsPage() {
                           dir={sortDir}
                           onSort={handleSort}
                         />
-                        <th style={thStyle} className={styles.mobileHide}>
-                          {t("fields.activity")}
-                        </th>
                         <SortTh
                           label={t("filters.position")}
                           sortKey="position"
@@ -267,16 +301,6 @@ function BillFilingsPage() {
                               {f.entityName}
                             </a>
                           </td>
-                          <td
-                            className={styles.mobileHide}
-                            style={{
-                              ...cellStyle,
-                              color: MAPLE_COLORS.textMuted,
-                              fontSize: 12
-                            }}
-                          >
-                            {f.activityTitle || "—"}
-                          </td>
                           <td style={cellStyle}>
                             <span
                               style={{
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
index f40ee32b4..8664c3c34 100644
--- a/public/locales/en/lobbying.json
+++ b/public/locales/en/lobbying.json
@@ -13,7 +13,8 @@
     "disclosures": "Disclosures",
     "disclosureLink": "Disclosure {{number}}",
     "viewOnMaple": "View bill on MAPLE →",
-    "total": "total"
+    "total": "total",
+    "generalCourt": "General Court"
   },
   "registrantType": {
     "all": "All types",

From eaa03226fdaf9d1addd43714e4ac74d2c54ee81d Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Tue, 21 Jul 2026 20:54:55 -0400
Subject: [PATCH 15/25] =?UTF-8?q?feat(lobbying):=20UI=20polish=20pass=20?=
 =?UTF-8?q?=E2=80=94=20position=20colors,=20sticky=20nav,=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Align position colors to MAPLE bill palette: support=green, neutral=blue,
  oppose=orange (was red/gray); update chip, bar, legend, and inline styles
- Sticky subnav now measures main navbar height dynamically to avoid hiding
  under it on scroll
- Add usePrefersReducedMotion hook; disable Bar/Line animations and suppress
  recharts tooltip transition for prefers-reduced-motion users
- Make bills and clients hero stat cards clickable links to their list pages
- Bill detail page: remove compensation column (usually $0); fix dead import
- Firm detail page: show total compensation in header
- Client list: filter out "total salaries received" pseudo-client rows
- LobbyingFilingsTable: bill links now point to lobbying explorer detail page;
  show "Showing X of Y" when truncated via maxRows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/lobbying/LobbyingBillCard.tsx     |  8 ++---
 components/lobbying/LobbyingFilingsTable.tsx | 19 ++++++++++-
 components/lobbying/LobbyingPositionChip.tsx | 14 ++++----
 components/lobbying/LobbyingSubnav.tsx       | 12 +++++--
 components/lobbying/chartTheme.tsx           | 26 ++++++++++++---
 pages/lobbying/bills/[court]/[billId].tsx    | 34 +++++++-------------
 pages/lobbying/clients/index.tsx             |  5 ++-
 pages/lobbying/firms/[registrantId].tsx      | 21 ++++++++++++
 pages/lobbying/index.tsx                     | 24 +++++++++++---
 public/locales/en/lobbying.json              |  3 +-
 styles/globals.css                           |  6 ++++
 11 files changed, 125 insertions(+), 47 deletions(-)

diff --git a/components/lobbying/LobbyingBillCard.tsx b/components/lobbying/LobbyingBillCard.tsx
index 0cc138046..a22c713e1 100644
--- a/components/lobbying/LobbyingBillCard.tsx
+++ b/components/lobbying/LobbyingBillCard.tsx
@@ -76,12 +76,12 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
         />
         <LegendItem
           label={t("lobbying:position.oppose")}
-          color={MAPLE_COLORS.danger}
+          color={MAPLE_COLORS.accent}
           count={counts.oppose}
         />
         <LegendItem
           label={t("lobbying:position.neutral")}
-          color={MAPLE_COLORS.textMuted}
+          color={MAPLE_COLORS.primary}
           count={counts.neutral}
         />
       </div>
@@ -128,7 +128,7 @@ const PositionBar: React.FC<{
           style={{
             ...barSegmentStyle,
             width: pct(counts.oppose),
-            background: MAPLE_COLORS.danger,
+            background: MAPLE_COLORS.accent,
             borderRadius:
               counts.support === 0 && counts.neutral === 0
                 ? "4px"
@@ -145,7 +145,7 @@ const PositionBar: React.FC<{
           style={{
             ...barSegmentStyle,
             width: pct(counts.neutral),
-            background: MAPLE_COLORS.textMuted,
+            background: MAPLE_COLORS.primary,
             borderRadius: "0 4px 4px 0"
           }}
         />
diff --git a/components/lobbying/LobbyingFilingsTable.tsx b/components/lobbying/LobbyingFilingsTable.tsx
index e86236d0f..103fdb329 100644
--- a/components/lobbying/LobbyingFilingsTable.tsx
+++ b/components/lobbying/LobbyingFilingsTable.tsx
@@ -60,7 +60,10 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
               {showBill && (
                 <td style={cellStyle}>
                   {f.billId ? (
-                    <a href={`/bills/${f.generalCourt}/${f.billId}`}>
+                    <a
+                      href={`/lobbying/bills/${f.generalCourt}/${f.billId}`}
+                      style={{ color: MAPLE_COLORS.primary }}
+                    >
                       {f.billId}
                     </a>
                   ) : (
@@ -94,6 +97,14 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
           ))}
         </tbody>
       </Table>
+      {truncated && (
+        <p style={truncatedNoteStyle}>
+          {t("billCard.showingOf", {
+            showing: rows.length,
+            total: filings.length
+          })}
+        </p>
+      )}
       {truncated && onViewAll && (
         <button onClick={onViewAll} style={viewAllStyle}>
           {t("billCard.viewAll")}
@@ -122,6 +133,12 @@ const cellStyle: React.CSSProperties = {
   padding: "0.4rem 0.5rem"
 }
 
+const truncatedNoteStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: MAPLE_COLORS.textMuted,
+  margin: "0.25rem 0 0"
+}
+
 const viewAllStyle: React.CSSProperties = {
   background: "none",
   border: "none",
diff --git a/components/lobbying/LobbyingPositionChip.tsx b/components/lobbying/LobbyingPositionChip.tsx
index c88b578b1..5ed92c14f 100644
--- a/components/lobbying/LobbyingPositionChip.tsx
+++ b/components/lobbying/LobbyingPositionChip.tsx
@@ -8,17 +8,17 @@ const CHIP_STYLES: Record<Position, React.CSSProperties> = {
   support: {
     background: "#e8f6ea",
     color: "#1d5d2d",
-    border: "1px solid #3d9922"
+    border: "1px solid #c8e7cf"
   },
   oppose: {
-    background: "#fde8ef",
-    color: "#902141",
-    border: "1px solid #c71e32"
+    background: "#fff4e8",
+    color: "#7a3800",
+    border: "1px solid #ff8600"
   },
   neutral: {
-    background: "#f1f5f9",
-    color: "#475569",
-    border: "1px solid #cbd5e1"
+    background: "#e8efff",
+    color: "#1d3f8a",
+    border: "1px solid #c9d8ff"
   },
   none: {
     background: "#f1f5f9",
diff --git a/components/lobbying/LobbyingSubnav.tsx b/components/lobbying/LobbyingSubnav.tsx
index e6d6054d5..c94483f77 100644
--- a/components/lobbying/LobbyingSubnav.tsx
+++ b/components/lobbying/LobbyingSubnav.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Container } from "components/bootstrap"
@@ -7,6 +7,12 @@ import { MAPLE_COLORS } from "./chartTheme"
 export function LobbyingSubnav() {
   const { t } = useTranslation("lobbying")
   const { pathname } = useRouter()
+  const [navbarH, setNavbarH] = useState(96)
+
+  useEffect(() => {
+    const el = document.querySelector<HTMLElement>(".main-navbar")
+    if (el) setNavbarH(el.offsetHeight)
+  }, [])
 
   const LINKS = [
     { label: t("subnav.overview"), href: "/lobbying", exact: true },
@@ -16,7 +22,7 @@ export function LobbyingSubnav() {
   ]
 
   return (
-    <div style={barStyle}>
+    <div style={{ ...barStyle, top: navbarH }}>
       <Container>
         <div style={innerStyle}>
           <span style={titleStyle}>{t("subnav.label")}</span>
@@ -39,6 +45,8 @@ export function LobbyingSubnav() {
 }
 
 const barStyle: React.CSSProperties = {
+  position: "sticky",
+  zIndex: 100,
   background: "#fff",
   borderBottom: `1px solid ${MAPLE_COLORS.borderDefault}`,
   width: "100%"
diff --git a/components/lobbying/chartTheme.tsx b/components/lobbying/chartTheme.tsx
index b72fd5290..2453aee97 100644
--- a/components/lobbying/chartTheme.tsx
+++ b/components/lobbying/chartTheme.tsx
@@ -7,7 +7,7 @@
  * hex values that match the SCSS source of truth are the correct approach.
  */
 
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { TooltipContentProps } from "recharts"
 import type {
   NameType,
@@ -43,8 +43,12 @@ export const MAPLE_COLORS = {
   // Semantic subtle tints
   blueSubtleBg: "#e8efff",
   blueSubtleText: "#1d3f8a",
+  blueBorder: "#c9d8ff",
   greenSubtleBg: "#e8f6ea",
   greenSubtleText: "#1d5d2d",
+  greenBorder: "#c8e7cf",
+  orangeSubtleBg: "#fff4e8",
+  orangeSubtleText: "#7a3800",
   redSubtleBg: "#fde8ef",
   redSubtleText: "#902141",
   graySubtleBg: "#f1f5f9",
@@ -64,11 +68,11 @@ export const DATA_PALETTE: readonly string[] = [
   MAPLE_COLORS.danger
 ]
 
-/** Lobbying position colours. Use across all position visualisations. */
+/** Lobbying position colours. Aligned to MAPLE bill position palette. */
 export const POSITION_COLORS = {
   support: MAPLE_COLORS.green,
-  oppose: MAPLE_COLORS.danger,
-  neutral: MAPLE_COLORS.textMuted,
+  oppose: MAPLE_COLORS.accent,
+  neutral: MAPLE_COLORS.primary,
   none: MAPLE_COLORS.graySubtleBorder
 } as const
 
@@ -301,6 +305,20 @@ const chartTitleStyle: React.CSSProperties = {
   marginBottom: "0.75rem"
 }
 
+// ── Accessibility ─────────────────────────────────────────────────────────────
+
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false)
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setReduced(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)
+    mq.addEventListener("change", handler)
+    return () => mq.removeEventListener("change", handler)
+  }, [])
+  return reduced
+}
+
 // ── Formatters ────────────────────────────────────────────────────────────────
 
 const currencyFmt = new Intl.NumberFormat("en-US", {
diff --git a/pages/lobbying/bills/[court]/[billId].tsx b/pages/lobbying/bills/[court]/[billId].tsx
index a25e081d8..1ba4a865b 100644
--- a/pages/lobbying/bills/[court]/[billId].tsx
+++ b/pages/lobbying/bills/[court]/[billId].tsx
@@ -5,7 +5,6 @@ import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
 import { useLobbyingFilingsForBill } from "components/db/lobbying"
-import { LobbyingFilingsTable } from "components/lobbying/LobbyingFilingsTable"
 import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
@@ -17,7 +16,7 @@ import styles from "components/lobbying/lobbying.module.css"
 
 const PAGE_SIZE = 50
 
-type SortKey = "client" | "firm" | "position" | "amount" | "year"
+type SortKey = "client" | "firm" | "position" | "year"
 type SortDir = "asc" | "desc"
 
 function sortFilings(
@@ -39,8 +38,6 @@ function sortFilings(
             normalizePosition(b.position)
           )
         )
-      case "amount":
-        return mul * ((a.amount ?? -1) - (b.amount ?? -1))
       case "year":
         return mul * (a.year - b.year)
       default:
@@ -261,14 +258,6 @@ function BillFilingsPage() {
                           dir={sortDir}
                           onSort={handleSort}
                         />
-                        <SortTh
-                          label={t("fields.amount")}
-                          sortKey="amount"
-                          current={sortKey}
-                          dir={sortDir}
-                          onSort={handleSort}
-                          style={{ textAlign: "right" }}
-                        />
                         <SortTh
                           label={t("fields.year")}
                           sortKey="year"
@@ -311,15 +300,6 @@ function BillFilingsPage() {
                               {f.position || "—"}
                             </span>
                           </td>
-                          <td style={{ ...cellStyle, textAlign: "right" }}>
-                            {f.amount != null
-                              ? f.amount.toLocaleString("en-US", {
-                                  style: "currency",
-                                  currency: "USD",
-                                  maximumFractionDigits: 0
-                                })
-                              : "—"}
-                          </td>
                           <td style={cellStyle}>{f.year}</td>
                         </tr>
                       ))}
@@ -421,9 +401,17 @@ const chipStyle: React.CSSProperties = {
 
 function posChipStyle(pos: string): React.CSSProperties {
   if (pos === "support")
-    return { color: MAPLE_COLORS.green, borderColor: MAPLE_COLORS.green }
+    return { color: MAPLE_COLORS.green, borderColor: MAPLE_COLORS.greenBorder }
   if (pos === "oppose")
-    return { color: MAPLE_COLORS.danger, borderColor: MAPLE_COLORS.danger }
+    return {
+      color: MAPLE_COLORS.orangeSubtleText,
+      borderColor: MAPLE_COLORS.accent
+    }
+  if (pos === "neutral")
+    return {
+      color: MAPLE_COLORS.blueSubtleText,
+      borderColor: MAPLE_COLORS.blueBorder
+    }
   return {
     color: MAPLE_COLORS.textMuted,
     borderColor: MAPLE_COLORS.borderDefault
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index 29f5712c7..d3a88fe9b 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -68,10 +68,13 @@ function deriveClients(
   const map = new Map<string, ClientRow>()
   for (const r of registrants) {
     for (const c of r.clients) {
+      const lc = c.clientName.toLowerCase()
       if (
         !c.clientNameNorm ||
         c.clientNameNorm === LEGACY_TOTAL_CLIENT ||
-        c.clientName === LEGACY_TOTAL_CLIENT
+        c.clientName === LEGACY_TOTAL_CLIENT ||
+        lc.includes("total salaries") ||
+        lc.includes("total salary")
       )
         continue
       if (!map.has(c.clientNameNorm)) {
diff --git a/pages/lobbying/firms/[registrantId].tsx b/pages/lobbying/firms/[registrantId].tsx
index 55c3c18c6..8338cd62f 100644
--- a/pages/lobbying/firms/[registrantId].tsx
+++ b/pages/lobbying/firms/[registrantId].tsx
@@ -62,6 +62,16 @@ function FirmDetail() {
     setPage(1)
   }, [entityNameNorm, setPage])
 
+  const totalCompensation = useMemo(() => {
+    let sum = 0
+    for (const r of registrants ?? []) {
+      for (const c of r.clients) {
+        if (c.compensation != null) sum += c.compensation
+      }
+    }
+    return sum
+  }, [registrants])
+
   if (!entityNameNorm) return null
 
   // Aggregate from all registrant docs for this entity
@@ -109,6 +119,17 @@ function FirmDetail() {
               )}
               &nbsp;·&nbsp; {filings?.length ?? "—"}{" "}
               {t("fields.filings").toLowerCase()}
+              {totalCompensation > 0 && (
+                <>
+                  &nbsp;·&nbsp;{" "}
+                  {totalCompensation.toLocaleString("en-US", {
+                    style: "currency",
+                    currency: "USD",
+                    maximumFractionDigits: 0
+                  })}{" "}
+                  {t("misc.total")}
+                </>
+              )}
             </p>
           </Col>
         </Row>
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
index 98fd216e3..fcdd0abc3 100644
--- a/pages/lobbying/index.tsx
+++ b/pages/lobbying/index.tsx
@@ -26,6 +26,7 @@ import {
   LINE_PROPS_EMPHASIS,
   MAPLE_COLORS,
   MapleTooltip,
+  usePrefersReducedMotion,
   X_AXIS_PROPS,
   Y_AXIS_PROPS
 } from "components/lobbying/chartTheme"
@@ -36,19 +37,29 @@ import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 
 function StatCard({
   label,
-  value
+  value,
+  href
 }: {
   label: string
   value: string | number | undefined
+  href?: string
 }) {
-  return (
-    <div style={statCardStyle}>
+  const inner = (
+    <>
       <div style={statValueStyle}>
         {value ?? <span style={{ color: MAPLE_COLORS.borderDefault }}>—</span>}
       </div>
       <div style={statLabelStyle}>{label}</div>
-    </div>
+    </>
   )
+  if (href) {
+    return (
+      <a href={href} style={{ ...statCardStyle, textDecoration: "none" }}>
+        {inner}
+      </a>
+    )
+  }
+  return <div style={statCardStyle}>{inner}</div>
 }
 
 function StatsBar({ stats }: { stats: LobbyingStats | undefined }) {
@@ -69,10 +80,12 @@ function StatsBar({ stats }: { stats: LobbyingStats | undefined }) {
             ? stats.totalBillsWithFilings.toLocaleString("en-US")
             : undefined
         }
+        href="/lobbying/bills"
       />
       <StatCard
         label={t("stats.totalClients")}
         value={stats ? stats.totalClients.toLocaleString("en-US") : undefined}
+        href="/lobbying/clients"
       />
       <StatCard
         label={t("stats.sessionsCovered")}
@@ -105,6 +118,7 @@ function buildYearData(stats: LobbyingStats): YearRow[] {
 function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
   const { t } = useTranslation("lobbying")
   const data = useMemo(() => (stats ? buildYearData(stats) : []), [stats])
+  const reducedMotion = usePrefersReducedMotion()
 
   if (!stats || data.length === 0) return null
 
@@ -184,6 +198,7 @@ function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
               dataKey="spend"
               name={t("fields.amount")}
               fill={MAPLE_COLORS.periwinkle}
+              isAnimationActive={!reducedMotion}
               {...BAR_PROPS_COMPACT}
             />
             <Line
@@ -191,6 +206,7 @@ function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
               dataKey="filings"
               name={t("fields.filings")}
               stroke={MAPLE_COLORS.primary}
+              isAnimationActive={!reducedMotion}
               {...LINE_PROPS_EMPHASIS}
             />
           </ComposedChart>
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
index 8664c3c34..727a7fb1f 100644
--- a/public/locales/en/lobbying.json
+++ b/public/locales/en/lobbying.json
@@ -76,6 +76,7 @@
   "billCard": {
     "filingCount_one": "{{count}} lobbying filing",
     "filingCount_other": "{{count}} lobbying filings",
-    "viewAll": "View all lobbying activity →"
+    "viewAll": "View all lobbying activity →",
+    "showingOf": "Showing {{showing}} of {{total}} filings"
   }
 }
diff --git a/styles/globals.css b/styles/globals.css
index e19cd1372..89b5961fb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -569,3 +569,9 @@
 .finance-spending-group {
   background-color: var(--maple-surface-page, #f4f5f7);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .recharts-tooltip-wrapper {
+    transition: none !important;
+  }
+}

From 472fcc847def77dbb887b79dd144ddc88fae22c9 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Wed, 22 Jul 2026 21:25:04 -0400
Subject: [PATCH 16/25] feat(lobbying): sortable filings column, explainer
 text, overview page restructure

- Add sortable Filings column to firms and clients list pages; backed by
  new lobbyingMeta/entityFilingCounts and clientFilingCounts Firestore docs
  written by compute_stats() and seedLobbyingStats
- Hide "View bill on MAPLE" link for sessions before the 192nd General
  Court (earliest session in the MAPLE bill database)
- Replace overview entry-card row with a Firms hero stat card; sessions
  count moved into the data-notes paragraph below the chart
- Add one-sentence explainer text to all four hero stat cards and to the
  top of each listing page (bills, clients, firms)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/db/lobbying.ts                   |  22 ++++
 lobbying-scraper/writer.py                  |  17 ++-
 pages/lobbying/bills/[court]/[billId].tsx   |   3 +-
 pages/lobbying/bills/index.tsx              |   3 +
 pages/lobbying/clients/index.tsx            |  43 +++++-
 pages/lobbying/firms/index.tsx              |  38 +++++-
 pages/lobbying/index.tsx                    | 138 ++++----------------
 public/locales/en/lobbying.json             |  10 +-
 scripts/firebase-admin/seedLobbyingStats.ts |  29 ++++
 9 files changed, 178 insertions(+), 125 deletions(-)

diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
index 8a5ea3db9..0d8ca607a 100644
--- a/components/db/lobbying.ts
+++ b/components/db/lobbying.ts
@@ -226,3 +226,25 @@ export function useLobbyingClient(clientSlug: string) {
 export function useLobbyingFilingsForClient(clientNameNorm: string) {
   return useAsync(fetchFilingsForClient, [clientNameNorm])
 }
+
+async function fetchEntityFilingCounts(): Promise<Record<string, number>> {
+  const snap = await getDoc(
+    doc(firestore, LOBBYING_STATS_COLLECTION, "entityFilingCounts")
+  )
+  return snap.exists() ? (snap.data() as Record<string, number>) : {}
+}
+
+async function fetchClientFilingCounts(): Promise<Record<string, number>> {
+  const snap = await getDoc(
+    doc(firestore, LOBBYING_STATS_COLLECTION, "clientFilingCounts")
+  )
+  return snap.exists() ? (snap.data() as Record<string, number>) : {}
+}
+
+export function useLobbyingEntityFilingCounts() {
+  return useAsync(fetchEntityFilingCounts, [])
+}
+
+export function useLobbyingClientFilingCounts() {
+  return useAsync(fetchClientFilingCounts, [])
+}
diff --git a/lobbying-scraper/writer.py b/lobbying-scraper/writer.py
index fd758f8ae..41f60b4ba 100644
--- a/lobbying-scraper/writer.py
+++ b/lobbying-scraper/writer.py
@@ -39,6 +39,8 @@ def compute_stats(db: firestore.Client) -> None:
     bills: set[str] = set()
     courts: set[int] = set()
     filings_by_year: dict[str, int] = {}
+    entity_filing_counts: dict[str, int] = {}
+    client_filing_counts: dict[str, int] = {}
     total_filings = 0
 
     for doc in db.collection(FILINGS_COLLECTION).stream():
@@ -53,6 +55,12 @@ def compute_stats(db: firestore.Client) -> None:
         if year:
             filings_by_year[year] = filings_by_year.get(year, 0) + 1
         total_filings += 1
+        en = d.get("entityNameNorm")
+        cn = d.get("clientNameNorm")
+        if en:
+            entity_filing_counts[en] = entity_filing_counts.get(en, 0) + 1
+        if cn:
+            client_filing_counts[cn] = client_filing_counts.get(cn, 0) + 1
 
     client_norms: set[str] = set()
     spend_by_year: dict[str, float] = {}
@@ -80,9 +88,16 @@ def compute_stats(db: firestore.Client) -> None:
         "filingsByYear": filings_by_year,
     }
     db.collection(STATS_COLLECTION).document(STATS_DOC_ID).set(stats, merge=True)
+    db.collection(STATS_COLLECTION).document("entityFilingCounts").set(
+        entity_filing_counts
+    )
+    db.collection(STATS_COLLECTION).document("clientFilingCounts").set(
+        client_filing_counts
+    )
     print(
         f"  stats written: {total_filings} filings, "
-        f"{total_registrants} registrants, {len(client_norms)} clients"
+        f"{total_registrants} registrants, {len(client_norms)} clients, "
+        f"{len(entity_filing_counts)} entities, {len(client_filing_counts)} client norms"
     )
 
 
diff --git a/pages/lobbying/bills/[court]/[billId].tsx b/pages/lobbying/bills/[court]/[billId].tsx
index 1ba4a865b..f9212af4b 100644
--- a/pages/lobbying/bills/[court]/[billId].tsx
+++ b/pages/lobbying/bills/[court]/[billId].tsx
@@ -151,7 +151,8 @@ function BillFilingsPage() {
   }, [posFilter, sortKey, sortDir, setPage])
 
   const loading = status === "loading" || status === "not-requested"
-  const mapleHref = court && billId ? `/bills/${court}/${billId}` : undefined
+  const mapleHref =
+    court >= 192 && billId ? `/bills/${court}/${billId}` : undefined
 
   if (!billId) return null
 
diff --git a/pages/lobbying/bills/index.tsx b/pages/lobbying/bills/index.tsx
index 51203e95b..381bd7a26 100644
--- a/pages/lobbying/bills/index.tsx
+++ b/pages/lobbying/bills/index.tsx
@@ -371,6 +371,9 @@ function LobbyingBillsPage() {
         <Row className="mt-4 mb-3">
           <Col>
             <h1>{t("titles.bills")}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+              {t("explainers.bills")}
+            </p>
           </Col>
         </Row>
         <Row>
diff --git a/pages/lobbying/clients/index.tsx b/pages/lobbying/clients/index.tsx
index d3a88fe9b..57e4b8e71 100644
--- a/pages/lobbying/clients/index.tsx
+++ b/pages/lobbying/clients/index.tsx
@@ -3,7 +3,10 @@ import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
-import { useLobbyingAllRegistrants } from "components/db/lobbying"
+import {
+  useLobbyingAllRegistrants,
+  useLobbyingClientFilingCounts
+} from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
@@ -14,7 +17,7 @@ import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 const LEGACY_TOTAL_CLIENT = "_total_salary_"
 const PAGE_SIZE = 50
 
-type ClientSortKey = "name" | "compensation" | "firms"
+type ClientSortKey = "name" | "compensation" | "firms" | "filings"
 type SortDir = "asc" | "desc"
 
 function SortTh({
@@ -59,6 +62,7 @@ type ClientRow = {
   clientNameNorm: string
   totalCompensation: number | null
   registrantCount: number
+  totalFilings: number | undefined
 }
 
 function deriveClients(
@@ -82,7 +86,8 @@ function deriveClients(
           clientName: c.clientName,
           clientNameNorm: c.clientNameNorm,
           totalCompensation: null,
-          registrantCount: 0
+          registrantCount: 0,
+          totalFilings: undefined
         })
       }
       const row = map.get(c.clientNameNorm)!
@@ -111,16 +116,27 @@ function LobbyingClientsTable() {
   }
 
   const { result: registrants, status, error } = useLobbyingAllRegistrants()
+  const { result: filCounts } = useLobbyingClientFilingCounts()
   const clients = useMemo(() => deriveClients(registrants), [registrants])
+  const clientsWithCounts = useMemo(
+    () =>
+      filCounts
+        ? clients.map(c => ({
+            ...c,
+            totalFilings: filCounts[c.clientNameNorm]
+          }))
+        : clients,
+    [clients, filCounts]
+  )
 
   const filtered = useMemo(
     () =>
       search
-        ? clients.filter(c =>
+        ? clientsWithCounts.filter(c =>
             c.clientName.toLowerCase().includes(search.toLowerCase())
           )
-        : clients,
-    [clients, search]
+        : clientsWithCounts,
+    [clientsWithCounts, search]
   )
 
   const sorted = useMemo(() => {
@@ -133,6 +149,8 @@ function LobbyingClientsTable() {
           )
         case "firms":
           return mul * (a.registrantCount - b.registrantCount)
+        case "filings":
+          return mul * ((a.totalFilings ?? -1) - (b.totalFilings ?? -1))
         default:
           return mul * a.clientNameNorm.localeCompare(b.clientNameNorm)
       }
@@ -195,6 +213,13 @@ function LobbyingClientsTable() {
                     dir={sortDir}
                     onSort={handleSort}
                   />
+                  <SortTh
+                    label={t("fields.filings")}
+                    sortKey="filings"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                   <SortTh
                     label={t("fields.amount")}
                     sortKey="compensation"
@@ -221,6 +246,9 @@ function LobbyingClientsTable() {
                     <td style={{ ...tdStyle, color: MAPLE_COLORS.textMuted }}>
                       {c.registrantCount}
                     </td>
+                    <td style={{ ...tdStyle, color: MAPLE_COLORS.textMuted }}>
+                      {c.totalFilings !== undefined ? c.totalFilings : "—"}
+                    </td>
                     <td
                       style={{
                         ...tdStyle,
@@ -263,6 +291,9 @@ function LobbyingClientsPage() {
         <Row className="mt-4 mb-3">
           <Col>
             <h1>{t("titles.clients")}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+              {t("explainers.clients")}
+            </p>
           </Col>
         </Row>
         <Row>
diff --git a/pages/lobbying/firms/index.tsx b/pages/lobbying/firms/index.tsx
index 4be174557..02c9dc5e3 100644
--- a/pages/lobbying/firms/index.tsx
+++ b/pages/lobbying/firms/index.tsx
@@ -3,7 +3,10 @@ import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
-import { useLobbyingAllRegistrants } from "components/db/lobbying"
+import {
+  useLobbyingAllRegistrants,
+  useLobbyingEntityFilingCounts
+} from "components/db/lobbying"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
@@ -13,7 +16,7 @@ import type { LobbyingRegistrant } from "functions/src/lobbying/types"
 
 const PAGE_SIZE = 50
 
-type FirmSortKey = "name" | "clients" | "sessions"
+type FirmSortKey = "name" | "clients" | "sessions" | "filings"
 type SortDir = "asc" | "desc"
 
 function SortTh({
@@ -60,6 +63,7 @@ type FirmRow = {
   regType: string
   years: number[]
   clientCount: number
+  totalFilings: number | undefined
 }
 
 function groupByFirm(registrants: LobbyingRegistrant[] | undefined): FirmRow[] {
@@ -73,7 +77,8 @@ function groupByFirm(registrants: LobbyingRegistrant[] | undefined): FirmRow[] {
         registrantId: r.registrantId,
         regType: r.regType,
         years: [],
-        clientCount: 0
+        clientCount: 0,
+        totalFilings: undefined
       })
     }
     const row = map.get(r.entityNameNorm)!
@@ -103,16 +108,24 @@ function LobbyingFirmsTable() {
   }
 
   const { result: registrants, status, error } = useLobbyingAllRegistrants()
+  const { result: filCounts } = useLobbyingEntityFilingCounts()
   const firms = useMemo(() => groupByFirm(registrants), [registrants])
+  const firmsWithCounts = useMemo(
+    () =>
+      filCounts
+        ? firms.map(f => ({ ...f, totalFilings: filCounts[f.entityNameNorm] }))
+        : firms,
+    [firms, filCounts]
+  )
 
   const filtered = useMemo(() => {
-    return firms.filter(f => {
+    return firmsWithCounts.filter(f => {
       if (regTypeFilter !== "all" && f.regType !== regTypeFilter) return false
       if (search && !f.entityName.toLowerCase().includes(search.toLowerCase()))
         return false
       return true
     })
-  }, [firms, regTypeFilter, search])
+  }, [firmsWithCounts, regTypeFilter, search])
 
   const sorted = useMemo(() => {
     const mul = sortDir === "asc" ? 1 : -1
@@ -122,6 +135,8 @@ function LobbyingFirmsTable() {
           return mul * (a.clientCount - b.clientCount)
         case "sessions":
           return mul * (a.years.length - b.years.length)
+        case "filings":
+          return mul * ((a.totalFilings ?? -1) - (b.totalFilings ?? -1))
         default:
           return mul * a.entityNameNorm.localeCompare(b.entityNameNorm)
       }
@@ -208,6 +223,13 @@ function LobbyingFirmsTable() {
                     dir={sortDir}
                     onSort={handleSort}
                   />
+                  <SortTh
+                    label={t("fields.filings")}
+                    sortKey="filings"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                  />
                 </tr>
               </thead>
               <tbody>
@@ -236,6 +258,9 @@ function LobbyingFirmsTable() {
                         : `${f.years[f.years.length - 1]}–${f.years[0]}`}
                     </td>
                     <td style={tdStyle}>{f.clientCount}</td>
+                    <td style={{ ...tdStyle, color: MAPLE_COLORS.textMuted }}>
+                      {f.totalFilings !== undefined ? f.totalFilings : "—"}
+                    </td>
                   </tr>
                 ))}
               </tbody>
@@ -263,6 +288,9 @@ function LobbyingFirmsPage() {
         <Row className="mt-4 mb-3">
           <Col>
             <h1>{t("titles.firms")}</h1>
+            <p style={{ color: MAPLE_COLORS.textMuted, fontSize: 14 }}>
+              {t("explainers.firms")}
+            </p>
           </Col>
         </Row>
         <Row>
diff --git a/pages/lobbying/index.tsx b/pages/lobbying/index.tsx
index fcdd0abc3..c4978fe28 100644
--- a/pages/lobbying/index.tsx
+++ b/pages/lobbying/index.tsx
@@ -38,11 +38,13 @@ import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 function StatCard({
   label,
   value,
-  href
+  href,
+  description
 }: {
   label: string
   value: string | number | undefined
   href?: string
+  description?: string
 }) {
   const inner = (
     <>
@@ -50,6 +52,7 @@ function StatCard({
         {value ?? <span style={{ color: MAPLE_COLORS.borderDefault }}>—</span>}
       </div>
       <div style={statLabelStyle}>{label}</div>
+      {description && <div style={statDescStyle}>{description}</div>}
     </>
   )
   if (href) {
@@ -81,17 +84,27 @@ function StatsBar({ stats }: { stats: LobbyingStats | undefined }) {
             : undefined
         }
         href="/lobbying/bills"
+        description={t("explainers.statBills")}
       />
       <StatCard
         label={t("stats.totalClients")}
         value={stats ? stats.totalClients.toLocaleString("en-US") : undefined}
         href="/lobbying/clients"
+        description={t("explainers.statClients")}
+      />
+      <StatCard
+        label={t("stats.totalFirms")}
+        value={
+          stats ? stats.totalRegistrants.toLocaleString("en-US") : undefined
+        }
+        href="/lobbying/firms"
+        description={t("explainers.firms")}
       />
       <StatCard
-        label={t("stats.sessionsCovered")}
-        value={stats ? stats.courtsWithData.length : undefined}
+        label={t("stats.totalSpend")}
+        value={totalSpend}
+        description={t("explainers.statSpend")}
       />
-      <StatCard label={t("stats.totalSpend")} value={totalSpend} />
     </div>
   )
 }
@@ -216,43 +229,6 @@ function SpendFilingsChart({ stats }: { stats: LobbyingStats | undefined }) {
   )
 }
 
-// ── Entry cards ───────────────────────────────────────────────────────────────
-
-function EntryCard({
-  title,
-  description,
-  href,
-  count,
-  countLabel
-}: {
-  title: string
-  description: string
-  href: string
-  count?: number
-  countLabel?: string
-}) {
-  return (
-    <a href={href} style={entryCardStyle}>
-      <div style={entryCardInner}>
-        <div>
-          <div style={entryCardTitle}>{title}</div>
-          <div style={entryCardDesc}>{description}</div>
-        </div>
-        {count != null && (
-          <div style={entryCardCount}>
-            {count.toLocaleString("en-US")}
-            {countLabel && (
-              <span style={{ fontSize: 11, fontWeight: 400, marginLeft: 4 }}>
-                {countLabel}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    </a>
-  )
-}
-
 // ── Page ──────────────────────────────────────────────────────────────────────
 
 function LobbyingOverview() {
@@ -293,37 +269,6 @@ function LobbyingOverview() {
           </Row>
         )}
 
-        {/* Entry cards */}
-        <Row className="mb-4">
-          <Col md={4} className="mb-3">
-            <EntryCard
-              title={t("sections.bills")}
-              description={t("titles.bills")}
-              href="/lobbying/bills"
-              count={stats?.totalBillsWithFilings}
-              countLabel={t("sections.bills").toLowerCase()}
-            />
-          </Col>
-          <Col md={4} className="mb-3">
-            <EntryCard
-              title={t("sections.clients")}
-              description={t("titles.clients")}
-              href="/lobbying/clients"
-              count={stats?.totalClients}
-              countLabel={t("sections.clients").toLowerCase()}
-            />
-          </Col>
-          <Col md={4} className="mb-3">
-            <EntryCard
-              title={t("sections.firms")}
-              description={t("titles.firms")}
-              href="/lobbying/firms"
-              count={stats?.totalRegistrants}
-              countLabel="registrants"
-            />
-          </Col>
-        </Row>
-
         <Row className="mb-3">
           <Col>
             <p style={dataNotesStyle}>
@@ -337,9 +282,11 @@ function LobbyingOverview() {
               >
                 MGL Chapter 3
               </a>
-              . Data begins in 2005, the first year available on the portal. The
-              sharp increase in reported activity starting in 2010 coincides
-              with{" "}
+              . The dataset spans{" "}
+              {stats ? stats.courtsWithData.length : "multiple"} legislative
+              sessions (General Courts), beginning in 2005, the first year
+              available on the portal. The sharp increase in reported activity
+              starting in 2010 coincides with{" "}
               <a
                 href="https://malegislature.gov/Laws/SessionLaws/Acts/2009/Chapter28"
                 target="_blank"
@@ -411,35 +358,12 @@ const statLabelStyle: React.CSSProperties = {
   fontWeight: 600
 }
 
-const entryCardStyle: React.CSSProperties = {
-  display: "block",
-  background: MAPLE_COLORS.surfaceBase,
-  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
-  borderRadius: 8,
-  padding: "1.25rem",
-  textDecoration: "none",
-  color: MAPLE_COLORS.textBody,
-  boxShadow: "0 0.25rem 1rem rgba(15, 23, 42, 0.04)",
-  transition: "box-shadow 0.15s, border-color 0.15s",
-  height: "100%"
-}
-
-const entryCardInner: React.CSSProperties = {
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "flex-start"
-}
-
-const entryCardTitle: React.CSSProperties = {
-  fontWeight: 700,
-  fontSize: 16,
-  color: MAPLE_COLORS.primary
-}
-
-const entryCardDesc: React.CSSProperties = {
-  fontSize: 13,
+const statDescStyle: React.CSSProperties = {
+  fontSize: 11,
   color: MAPLE_COLORS.textMuted,
-  marginTop: "0.2rem"
+  marginTop: "0.4rem",
+  lineHeight: 1.4,
+  fontWeight: 400
 }
 
 const dataNotesStyle: React.CSSProperties = {
@@ -447,11 +371,3 @@ const dataNotesStyle: React.CSSProperties = {
   color: MAPLE_COLORS.textMuted,
   lineHeight: 1.6
 }
-
-const entryCardCount: React.CSSProperties = {
-  fontSize: 20,
-  fontWeight: 700,
-  color: MAPLE_COLORS.textStrong,
-  fontFamily: "Nunito, system-ui, sans-serif",
-  whiteSpace: "nowrap"
-}
diff --git a/public/locales/en/lobbying.json b/public/locales/en/lobbying.json
index 727a7fb1f..ac9d801b3 100644
--- a/public/locales/en/lobbying.json
+++ b/public/locales/en/lobbying.json
@@ -24,7 +24,7 @@
   "stats": {
     "totalBills": "Lobbied bills",
     "totalClients": "Clients",
-    "sessionsCovered": "Sessions covered",
+    "totalFirms": "Lobbying firms",
     "totalSpend": "Total compensation reported"
   },
   "sections": {
@@ -62,6 +62,14 @@
     "type": "Type",
     "firms": "Firms"
   },
+  "explainers": {
+    "statBills": "Bills that have been the subject of at least one lobbying disclosure.",
+    "statClients": "Organizations that have hired lobbyists to advocate on their behalf.",
+    "statSpend": "Sum of all annual compensation amounts reported by lobbying firms to the Secretary of State.",
+    "bills": "Bills that appear in lobbying disclosures filed with the MA Secretary of State, across all sessions in this dataset.",
+    "clients": "Organizations that retained lobbyists or lobbied on their own behalf, as reported in annual compensation disclosures.",
+    "firms": "Registered lobbyists and employers who filed lobbying disclosures with the MA Secretary of State."
+  },
   "attribution": "Data from the MA Secretary of State Lobbyist Public Search.",
   "noData": "No lobbying filings found.",
   "loading": "Loading lobbying data…",
diff --git a/scripts/firebase-admin/seedLobbyingStats.ts b/scripts/firebase-admin/seedLobbyingStats.ts
index 5bcd43760..7eea99faa 100644
--- a/scripts/firebase-admin/seedLobbyingStats.ts
+++ b/scripts/firebase-admin/seedLobbyingStats.ts
@@ -17,6 +17,8 @@ export const script: Script = async ({ db }) => {
   const bills = new Set<string>()
   const courts = new Set<number>()
   const filingsByYear: Record<string, number> = {}
+  const entityFilingCounts: Record<string, number> = {}
+  const clientFilingCounts: Record<string, number> = {}
 
   for (const doc of filingsSnap.docs) {
     const d = doc.data()
@@ -31,6 +33,15 @@ export const script: Script = async ({ db }) => {
 
     const y = String(year)
     filingsByYear[y] = (filingsByYear[y] ?? 0) + 1
+
+    if (d.entityNameNorm) {
+      entityFilingCounts[d.entityNameNorm] =
+        (entityFilingCounts[d.entityNameNorm] ?? 0) + 1
+    }
+    if (d.clientNameNorm) {
+      clientFilingCounts[d.clientNameNorm] =
+        (clientFilingCounts[d.clientNameNorm] ?? 0) + 1
+    }
   }
 
   // Aggregate spend and unique clients from registrant docs.
@@ -72,5 +83,23 @@ export const script: Script = async ({ db }) => {
     .doc(STATS_DOC_ID)
     .set(stats, { merge: true })
 
+  await db
+    .collection(STATS_COLLECTION)
+    .doc("entityFilingCounts")
+    .set(entityFilingCounts)
+
+  await db
+    .collection(STATS_COLLECTION)
+    .doc("clientFilingCounts")
+    .set(clientFilingCounts)
+
   console.log(`Written to ${STATS_COLLECTION}/${STATS_DOC_ID}`)
+  console.log(
+    `  entityFilingCounts: ${Object.keys(entityFilingCounts).length} entities`
+  )
+  console.log(
+    `  clientFilingCounts: ${
+      Object.keys(clientFilingCounts).length
+    } client norms`
+  )
 }

From f574eb89a143b1c4f16a217ea25083db58de6d27 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Thu, 23 Jul 2026 07:28:05 -0400
Subject: [PATCH 17/25] perf(lobbying): replace per-court filings scan with
 pre-computed bill summaries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bills index page was loading every filing document for the selected
session (~30K Firestore reads) just to group them by bill ID client-side.

compute_stats() and seedLobbyingStats now build lobbyingMeta/billSummaries_{court}
docs (one per General Court) in the same filings pass, storing a
billId→{total,support,oppose,neutral,none} map (~200KB per court).

The frontend replaces useLobbyingFilingsForCourt with useLobbyingBillSummaries,
reducing the bills page load from ~30K document reads to a single doc fetch.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/db/lobbying.ts                   | 21 ++++++++++
 lobbying-scraper/writer.py                  | 34 ++++++++++++++-
 pages/lobbying/bills/index.tsx              | 46 ++++++++-------------
 scripts/firebase-admin/seedLobbyingStats.ts | 38 +++++++++++++++++
 4 files changed, 110 insertions(+), 29 deletions(-)

diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
index 0d8ca607a..a42790848 100644
--- a/components/db/lobbying.ts
+++ b/components/db/lobbying.ts
@@ -248,3 +248,24 @@ export function useLobbyingEntityFilingCounts() {
 export function useLobbyingClientFilingCounts() {
   return useAsync(fetchClientFilingCounts, [])
 }
+
+export type BillSummaryEntry = {
+  total: number
+  support: number
+  oppose: number
+  neutral: number
+  none: number
+}
+
+async function fetchLobbyingBillSummaries(
+  court: number
+): Promise<Record<string, BillSummaryEntry>> {
+  const snap = await getDoc(
+    doc(firestore, LOBBYING_STATS_COLLECTION, `billSummaries_${court}`)
+  )
+  return snap.exists() ? (snap.data() as Record<string, BillSummaryEntry>) : {}
+}
+
+export function useLobbyingBillSummaries(court: number) {
+  return useAsync(fetchLobbyingBillSummaries, [court])
+}
diff --git a/lobbying-scraper/writer.py b/lobbying-scraper/writer.py
index 49d57afac..937fec415 100644
--- a/lobbying-scraper/writer.py
+++ b/lobbying-scraper/writer.py
@@ -33,6 +33,19 @@ def _now() -> datetime:
     return datetime.now(tz=timezone.utc)
 
 
+def _normalize_position(raw: str | None) -> str:
+    if not raw:
+        return "none"
+    s = raw.lower().strip()
+    if s.startswith("support"):
+        return "support"
+    if s.startswith("oppose") or s.startswith("against"):
+        return "oppose"
+    if s.startswith("neutral") or s.startswith("monitor"):
+        return "neutral"
+    return "none"
+
+
 def compute_stats(db: firestore.Client) -> None:
     """Recompute and write the lobbyingMeta/stats singleton from raw collections."""
     print("\nRecomputing stats…")
@@ -41,6 +54,7 @@ def compute_stats(db: firestore.Client) -> None:
     filings_by_year: dict[str, int] = {}
     entity_filing_counts: dict[str, int] = {}
     client_filing_counts: dict[str, int] = {}
+    bill_summaries: dict[int, dict[str, dict]] = {}
     total_filings = 0
 
     for doc in db.collection(FILINGS_COLLECTION).stream():
@@ -50,6 +64,19 @@ def compute_stats(db: firestore.Client) -> None:
         bill_id = d.get("billId")
         if bill_id and len(bill_id) > 2 and gc:
             bills.add(f"{gc}/{bill_id}")
+            pos = _normalize_position(d.get("position"))
+            if gc not in bill_summaries:
+                bill_summaries[gc] = {}
+            if bill_id not in bill_summaries[gc]:
+                bill_summaries[gc][bill_id] = {
+                    "total": 0,
+                    "support": 0,
+                    "oppose": 0,
+                    "neutral": 0,
+                    "none": 0,
+                }
+            bill_summaries[gc][bill_id]["total"] += 1
+            bill_summaries[gc][bill_id][pos] += 1
         if gc:
             courts.add(gc)
         if year:
@@ -94,10 +121,15 @@ def compute_stats(db: firestore.Client) -> None:
     db.collection(STATS_COLLECTION).document("clientFilingCounts").set(
         client_filing_counts
     )
+    for gc, bills_map in bill_summaries.items():
+        db.collection(STATS_COLLECTION).document(f"billSummaries_{gc}").set(
+            bills_map
+        )
     print(
         f"  stats written: {total_filings} filings, "
         f"{total_registrants} registrants, {len(client_norms)} clients, "
-        f"{len(entity_filing_counts)} entities, {len(client_filing_counts)} client norms"
+        f"{len(entity_filing_counts)} entities, {len(client_filing_counts)} client norms, "
+        f"bill summaries for courts {sorted(bill_summaries.keys())}"
     )
 
 
diff --git a/pages/lobbying/bills/index.tsx b/pages/lobbying/bills/index.tsx
index 381bd7a26..40f3788cf 100644
--- a/pages/lobbying/bills/index.tsx
+++ b/pages/lobbying/bills/index.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
-import { useLobbyingFilingsForCourt } from "components/db/lobbying"
 import {
-  LobbyingPositionChip,
-  normalizePosition
-} from "components/lobbying/LobbyingPositionChip"
+  useLobbyingBillSummaries,
+  type BillSummaryEntry
+} from "components/db/lobbying"
+import { LobbyingPositionChip } from "components/lobbying/LobbyingPositionChip"
 import { MAPLE_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
@@ -71,29 +71,16 @@ type BillRow = {
   none: number
 }
 
-function groupByBill(
-  filings: ReturnType<typeof useLobbyingFilingsForCourt>["result"]
+function summariesToRows(
+  summaries: Record<string, BillSummaryEntry> | undefined,
+  court: number
 ): BillRow[] {
-  if (!filings) return []
-  const map = new Map<string, BillRow>()
-  for (const f of filings) {
-    if (!f.billId || f.billId.length <= 2) continue
-    if (!map.has(f.billId)) {
-      map.set(f.billId, {
-        billId: f.billId,
-        court: f.generalCourt,
-        total: 0,
-        support: 0,
-        oppose: 0,
-        neutral: 0,
-        none: 0
-      })
-    }
-    const row = map.get(f.billId)!
-    row[normalizePosition(f.position)]++
-    row.total++
-  }
-  return [...map.values()]
+  if (!summaries) return []
+  return Object.entries(summaries).map(([billId, counts]) => ({
+    billId,
+    court,
+    ...counts
+  }))
 }
 
 function PositionMiniBar({ row }: { row: BillRow }) {
@@ -151,9 +138,12 @@ function LobbyingBillsTable() {
     }
   }
 
-  const { result: filings, status, error } = useLobbyingFilingsForCourt(court)
+  const { result: summaries, status, error } = useLobbyingBillSummaries(court)
 
-  const bills = useMemo(() => groupByBill(filings), [filings])
+  const bills = useMemo(
+    () => summariesToRows(summaries, court),
+    [summaries, court]
+  )
 
   const filtered = useMemo(() => {
     return bills.filter(b => {
diff --git a/scripts/firebase-admin/seedLobbyingStats.ts b/scripts/firebase-admin/seedLobbyingStats.ts
index 7eea99faa..129b09103 100644
--- a/scripts/firebase-admin/seedLobbyingStats.ts
+++ b/scripts/firebase-admin/seedLobbyingStats.ts
@@ -1,5 +1,17 @@
 import { Script } from "./types"
 
+type PositionKey = "support" | "oppose" | "neutral" | "none"
+type BillCounts = { total: number } & Record<PositionKey, number>
+
+function normalizePosition(raw: string | undefined): PositionKey {
+  if (!raw) return "none"
+  const s = raw.toLowerCase().trim()
+  if (s.startsWith("support")) return "support"
+  if (s.startsWith("oppose") || s.startsWith("against")) return "oppose"
+  if (s.startsWith("neutral") || s.startsWith("monitor")) return "neutral"
+  return "none"
+}
+
 const FILINGS_COLLECTION = "lobbyingFilings"
 const REGISTRANTS_COLLECTION = "lobbyingRegistrants"
 const STATS_COLLECTION = "lobbyingMeta"
@@ -19,6 +31,7 @@ export const script: Script = async ({ db }) => {
   const filingsByYear: Record<string, number> = {}
   const entityFilingCounts: Record<string, number> = {}
   const clientFilingCounts: Record<string, number> = {}
+  const billSummaries: Record<number, Record<string, BillCounts>> = {}
 
   for (const doc of filingsSnap.docs) {
     const d = doc.data()
@@ -27,6 +40,19 @@ export const script: Script = async ({ db }) => {
 
     if (d.billId && d.billId.length > 2) {
       bills.add(`${gc}/${d.billId}`)
+      const pos = normalizePosition(d.position)
+      if (!billSummaries[gc]) billSummaries[gc] = {}
+      if (!billSummaries[gc][d.billId]) {
+        billSummaries[gc][d.billId] = {
+          total: 0,
+          support: 0,
+          oppose: 0,
+          neutral: 0,
+          none: 0
+        }
+      }
+      billSummaries[gc][d.billId].total++
+      billSummaries[gc][d.billId][pos]++
     }
 
     courts.add(gc)
@@ -93,6 +119,13 @@ export const script: Script = async ({ db }) => {
     .doc("clientFilingCounts")
     .set(clientFilingCounts)
 
+  for (const [court, billsMap] of Object.entries(billSummaries)) {
+    await db
+      .collection(STATS_COLLECTION)
+      .doc(`billSummaries_${court}`)
+      .set(billsMap)
+  }
+
   console.log(`Written to ${STATS_COLLECTION}/${STATS_DOC_ID}`)
   console.log(
     `  entityFilingCounts: ${Object.keys(entityFilingCounts).length} entities`
@@ -102,4 +135,9 @@ export const script: Script = async ({ db }) => {
       Object.keys(clientFilingCounts).length
     } client norms`
   )
+  console.log(
+    `  billSummaries: ${
+      Object.keys(billSummaries).length
+    } courts (${Object.keys(billSummaries).join(", ")})`
+  )
 }

From acc8744a2bd4bea1c343f5b394e8d9f3d1860062 Mon Sep 17 00:00:00 2001
From: Nathan <sandersn@gmail.com>
Date: Thu, 23 Jul 2026 09:19:39 -0400
Subject: [PATCH 18/25] =?UTF-8?q?feat(lobbying):=20rework=20bills=20index?=
 =?UTF-8?q?=20=E2=80=94=20multiselect=20sessions,=20title/clients/firms=20?=
 =?UTF-8?q?cols,=20pct-sort,=20orange=20scheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bills index: session selector is now a multiselect dropdown with year
  annotations (e.g. "Session 194 · 2025–26") and an "All sessions" toggle;
  Session column appears only when multiple courts are selected
- Add Title column (sourced from activityTitle on first filing per bill)
  included in search alongside bill ID
- Add Clients and Firms (lobbyist) columns with sortable unique-entity counts
- Positions column header cycles through % Support → % Oppose → % Neutral
  on repeated clicks
- Fix position color scheme: all three count columns and mini-bar now use
  POSITION_COLORS (green/orange/blue) — oppose was previously rendering as
  red (#c71e32 / dark brownish #7a3800) in two separate code paths
- Remove LobbyingSubnav sticky positioning (it leaked above the viewport
  when the main navbar scrolled away); subnav now scrolls with content
- Seed script and writer.py: bill summaries now include title, clients,
  and lobbyists counts; stored as JSON blob to avoid Firestore index limit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/db/lobbying.ts                   |  49 ++-
 components/lobbying/LobbyingSubnav.tsx      |  12 +-
 lobbying-scraper/writer.py                  |  23 +-
 pages/lobbying/bills/index.tsx              | 454 +++++++++++++++-----
 scripts/firebase-admin/seedLobbyingStats.ts |  39 +-
 5 files changed, 459 insertions(+), 118 deletions(-)

diff --git a/components/db/lobbying.ts b/components/db/lobbying.ts
index a42790848..fabae0159 100644
--- a/components/db/lobbying.ts
+++ b/components/db/lobbying.ts
@@ -255,6 +255,22 @@ export type BillSummaryEntry = {
   oppose: number
   neutral: number
   none: number
+  title?: string
+  clients?: number
+  lobbyists?: number
+}
+
+export type BillRow = {
+  billId: string
+  court: number
+  total: number
+  support: number
+  oppose: number
+  neutral: number
+  none: number
+  title: string
+  clients: number
+  lobbyists: number
 }
 
 async function fetchLobbyingBillSummaries(
@@ -263,9 +279,40 @@ async function fetchLobbyingBillSummaries(
   const snap = await getDoc(
     doc(firestore, LOBBYING_STATS_COLLECTION, `billSummaries_${court}`)
   )
-  return snap.exists() ? (snap.data() as Record<string, BillSummaryEntry>) : {}
+  if (!snap.exists()) return {}
+  const raw = snap.data() as { data?: string }
+  if (!raw.data) return {}
+  return JSON.parse(raw.data) as Record<string, BillSummaryEntry>
 }
 
 export function useLobbyingBillSummaries(court: number) {
   return useAsync(fetchLobbyingBillSummaries, [court])
 }
+
+export function useLobbyingBillRows(courts: number[]) {
+  const courtsKey = courts.join(",")
+  return useAsync(
+    async (key: string) => {
+      if (!key) return [] as BillRow[]
+      const courtList = key.split(",").map(Number)
+      const results = await Promise.all(
+        courtList.map(fetchLobbyingBillSummaries)
+      )
+      return courtList.flatMap((court, i) =>
+        Object.entries(results[i]).map(([billId, e]) => ({
+          billId,
+          court,
+          total: e.total,
+          support: e.support,
+          oppose: e.oppose,
+          neutral: e.neutral,
+          none: e.none,
+          title: e.title ?? "",
+          clients: e.clients ?? 0,
+          lobbyists: e.lobbyists ?? 0
+        }))
+      )
+    },
+    [courtsKey]
+  )
+}
diff --git a/components/lobbying/LobbyingSubnav.tsx b/components/lobbying/LobbyingSubnav.tsx
index c94483f77..e6d6054d5 100644
--- a/components/lobbying/LobbyingSubnav.tsx
+++ b/components/lobbying/LobbyingSubnav.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Container } from "components/bootstrap"
@@ -7,12 +7,6 @@ import { MAPLE_COLORS } from "./chartTheme"
 export function LobbyingSubnav() {
   const { t } = useTranslation("lobbying")
   const { pathname } = useRouter()
-  const [navbarH, setNavbarH] = useState(96)
-
-  useEffect(() => {
-    const el = document.querySelector<HTMLElement>(".main-navbar")
-    if (el) setNavbarH(el.offsetHeight)
-  }, [])
 
   const LINKS = [
     { label: t("subnav.overview"), href: "/lobbying", exact: true },
@@ -22,7 +16,7 @@ export function LobbyingSubnav() {
   ]
 
   return (
-    <div style={{ ...barStyle, top: navbarH }}>
+    <div style={barStyle}>
       <Container>
         <div style={innerStyle}>
           <span style={titleStyle}>{t("subnav.label")}</span>
@@ -45,8 +39,6 @@ export function LobbyingSubnav() {
 }
 
 const barStyle: React.CSSProperties = {
-  position: "sticky",
-  zIndex: 100,
   background: "#fff",
   borderBottom: `1px solid ${MAPLE_COLORS.borderDefault}`,
   width: "100%"
diff --git a/lobbying-scraper/writer.py b/lobbying-scraper/writer.py
index 937fec415..cfcfbca38 100644
--- a/lobbying-scraper/writer.py
+++ b/lobbying-scraper/writer.py
@@ -6,6 +6,7 @@
 
 from __future__ import annotations
 
+import json
 from datetime import datetime, timezone
 
 from google.cloud import firestore
@@ -55,6 +56,8 @@ def compute_stats(db: firestore.Client) -> None:
     entity_filing_counts: dict[str, int] = {}
     client_filing_counts: dict[str, int] = {}
     bill_summaries: dict[int, dict[str, dict]] = {}
+    bill_client_sets: dict[int, dict[str, set]] = {}
+    bill_entity_sets: dict[int, dict[str, set]] = {}
     total_filings = 0
 
     for doc in db.collection(FILINGS_COLLECTION).stream():
@@ -67,6 +70,8 @@ def compute_stats(db: firestore.Client) -> None:
             pos = _normalize_position(d.get("position"))
             if gc not in bill_summaries:
                 bill_summaries[gc] = {}
+                bill_client_sets[gc] = {}
+                bill_entity_sets[gc] = {}
             if bill_id not in bill_summaries[gc]:
                 bill_summaries[gc][bill_id] = {
                     "total": 0,
@@ -74,9 +79,20 @@ def compute_stats(db: firestore.Client) -> None:
                     "oppose": 0,
                     "neutral": 0,
                     "none": 0,
+                    "title": d.get("activityTitle") or "",
+                    "clients": 0,
+                    "lobbyists": 0,
                 }
+                bill_client_sets[gc][bill_id] = set()
+                bill_entity_sets[gc][bill_id] = set()
             bill_summaries[gc][bill_id]["total"] += 1
             bill_summaries[gc][bill_id][pos] += 1
+            cn = d.get("clientNameNorm")
+            en = d.get("entityNameNorm")
+            if cn:
+                bill_client_sets[gc][bill_id].add(cn)
+            if en:
+                bill_entity_sets[gc][bill_id].add(en)
         if gc:
             courts.add(gc)
         if year:
@@ -89,6 +105,11 @@ def compute_stats(db: firestore.Client) -> None:
         if cn:
             client_filing_counts[cn] = client_filing_counts.get(cn, 0) + 1
 
+    for gc, bills_map in bill_summaries.items():
+        for bill_id, counts in bills_map.items():
+            counts["clients"] = len(bill_client_sets.get(gc, {}).get(bill_id, set()))
+            counts["lobbyists"] = len(bill_entity_sets.get(gc, {}).get(bill_id, set()))
+
     client_norms: set[str] = set()
     spend_by_year: dict[str, float] = {}
     total_registrants = 0
@@ -123,7 +144,7 @@ def compute_stats(db: firestore.Client) -> None:
     )
     for gc, bills_map in bill_summaries.items():
         db.collection(STATS_COLLECTION).document(f"billSummaries_{gc}").set(
-            bills_map
+            {"data": json.dumps(bills_map)}
         )
     print(
         f"  stats written: {total_filings} filings, "
diff --git a/pages/lobbying/bills/index.tsx b/pages/lobbying/bills/index.tsx
index 40f3788cf..524c4f058 100644
--- a/pages/lobbying/bills/index.tsx
+++ b/pages/lobbying/bills/index.tsx
@@ -1,26 +1,146 @@
-import React, { useEffect, useMemo, useState } from "react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { Col, Container, Row } from "components/bootstrap"
 import { createPage } from "components/page"
 import { createGetStaticTranslationProps } from "components/translations"
-import {
-  useLobbyingBillSummaries,
-  type BillSummaryEntry
-} from "components/db/lobbying"
-import { LobbyingPositionChip } from "components/lobbying/LobbyingPositionChip"
-import { MAPLE_COLORS } from "components/lobbying/chartTheme"
+import { useLobbyingBillRows, type BillRow } from "components/db/lobbying"
+import { MAPLE_COLORS, POSITION_COLORS } from "components/lobbying/chartTheme"
 import { LobbyingAttribution } from "components/lobbying/LobbyingAttribution"
 import { usePagination } from "components/lobbying/usePagination"
 import { LobbyingPaginationBar } from "components/lobbying/LobbyingPaginationBar"
 import { LobbyingSubnav } from "components/lobbying/LobbyingSubnav"
 import styles from "components/lobbying/lobbying.module.css"
 
-const COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
+const ALL_COURTS = [194, 193, 192, 191, 190, 189, 188, 187, 186, 185, 184]
 const PAGE_SIZE = 50
 
-type BillSortKey = "id" | "filings" | "support" | "oppose" | "neutral"
+function courtYears(court: number): string {
+  const start = 2 * (court - 184) + 2005
+  return `${start}–${String(start + 1).slice(2)}`
+}
+
+type BillSortKey =
+  | "id"
+  | "filings"
+  | "support"
+  | "oppose"
+  | "neutral"
+  | "clients"
+  | "lobbyists"
+  | "pct_support"
+  | "pct_oppose"
+  | "pct_neutral"
 type SortDir = "asc" | "desc"
 
+const PCT_CYCLE = ["pct_support", "pct_oppose", "pct_neutral"] as const
+type PctSortKey = (typeof PCT_CYCLE)[number]
+
+function isPctKey(k: BillSortKey): k is PctSortKey {
+  return (PCT_CYCLE as readonly string[]).includes(k)
+}
+
+const PCT_LABEL: Record<PctSortKey, string> = {
+  pct_support: "% Support",
+  pct_oppose: "% Oppose",
+  pct_neutral: "% Neutral"
+}
+
+// ── Session multiselect ───────────────────────────────────────────────────────
+
+function CourtMultiSelect({
+  selected,
+  onChange
+}: {
+  selected: number[]
+  onChange: (courts: number[]) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const allSelected = selected.length === ALL_COURTS.length
+  const label = allSelected
+    ? "All sessions"
+    : selected.length === 1
+    ? `Session ${selected[0]} (${courtYears(selected[0])})`
+    : `${selected.length} sessions`
+
+  function toggleAll() {
+    onChange(allSelected ? [ALL_COURTS[0]] : [...ALL_COURTS])
+  }
+
+  function toggleCourt(court: number) {
+    if (selected.includes(court)) {
+      const next = selected.filter(c => c !== court)
+      onChange(next.length ? next : [court])
+    } else {
+      onChange([...selected, court])
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return
+    function onOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener("mousedown", onOutside)
+    return () => document.removeEventListener("mousedown", onOutside)
+  }, [open])
+
+  return (
+    <div ref={ref} style={{ position: "relative" }}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        style={{
+          ...selectStyle,
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        }}
+      >
+        {label}
+        <span style={{ fontSize: 10, color: MAPLE_COLORS.textMuted }}>▾</span>
+      </button>
+      {open && (
+        <div style={dropdownStyle}>
+          <label style={checkRowStyle}>
+            <input
+              type="checkbox"
+              checked={allSelected}
+              onChange={toggleAll}
+              style={{ marginRight: 6 }}
+            />
+            <strong>All sessions</strong>
+          </label>
+          <div
+            style={{
+              borderTop: `1px solid ${MAPLE_COLORS.borderSubtle}`,
+              margin: "4px 0"
+            }}
+          />
+          {ALL_COURTS.map(c => (
+            <label key={c} style={checkRowStyle}>
+              <input
+                type="checkbox"
+                checked={selected.includes(c)}
+                onChange={() => toggleCourt(c)}
+                style={{ marginRight: 6 }}
+              />
+              <span style={{ fontVariantNumeric: "tabular-nums" }}>
+                Session {c}
+              </span>
+              <span style={{ color: MAPLE_COLORS.textMuted, marginLeft: 4 }}>
+                {courtYears(c)}
+              </span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Sortable header cell ──────────────────────────────────────────────────────
+
 function SortTh({
   label,
   sortKey,
@@ -61,27 +181,7 @@ function SortTh({
   )
 }
 
-type BillRow = {
-  billId: string
-  court: number
-  total: number
-  support: number
-  oppose: number
-  neutral: number
-  none: number
-}
-
-function summariesToRows(
-  summaries: Record<string, BillSummaryEntry> | undefined,
-  court: number
-): BillRow[] {
-  if (!summaries) return []
-  return Object.entries(summaries).map(([billId, counts]) => ({
-    billId,
-    court,
-    ...counts
-  }))
-}
+// ── Position mini-bar ─────────────────────────────────────────────────────────
 
 function PositionMiniBar({ row }: { row: BillRow }) {
   if (row.total === 0) return null
@@ -99,19 +199,22 @@ function PositionMiniBar({ row }: { row: BillRow }) {
     >
       {row.support > 0 && (
         <div
-          style={{ width: pct(row.support), background: MAPLE_COLORS.green }}
+          style={{
+            width: pct(row.support),
+            background: POSITION_COLORS.support
+          }}
         />
       )}
       {row.oppose > 0 && (
         <div
-          style={{ width: pct(row.oppose), background: MAPLE_COLORS.danger }}
+          style={{ width: pct(row.oppose), background: POSITION_COLORS.oppose }}
         />
       )}
       {row.neutral > 0 && (
         <div
           style={{
             width: pct(row.neutral),
-            background: MAPLE_COLORS.textMuted
+            background: POSITION_COLORS.neutral
           }}
         />
       )}
@@ -119,9 +222,11 @@ function PositionMiniBar({ row }: { row: BillRow }) {
   )
 }
 
+// ── Main table component ──────────────────────────────────────────────────────
+
 function LobbyingBillsTable() {
   const { t } = useTranslation("lobbying")
-  const [court, setCourt] = useState(194)
+  const [selectedCourts, setSelectedCourts] = useState<number[]>([194])
   const [posFilter, setPosFilter] = useState<
     "all" | "support" | "oppose" | "neutral"
   >("all")
@@ -138,21 +243,31 @@ function LobbyingBillsTable() {
     }
   }
 
-  const { result: summaries, status, error } = useLobbyingBillSummaries(court)
+  function handlePositionsSort() {
+    const idx = PCT_CYCLE.indexOf(sortKey as PctSortKey)
+    setSortKey(PCT_CYCLE[(idx + 1) % PCT_CYCLE.length])
+    setSortDir("desc")
+  }
 
-  const bills = useMemo(
-    () => summariesToRows(summaries, court),
-    [summaries, court]
-  )
+  const { result: allRows, status, error } = useLobbyingBillRows(selectedCourts)
+
+  const multiCourt = selectedCourts.length > 1
 
   const filtered = useMemo(() => {
-    return bills.filter(b => {
+    if (!allRows) return []
+    return allRows.filter(b => {
       if (posFilter !== "all" && b[posFilter] === 0) return false
-      if (search && !b.billId.toLowerCase().includes(search.toLowerCase()))
-        return false
+      if (search) {
+        const q = search.toLowerCase()
+        if (
+          !b.billId.toLowerCase().includes(q) &&
+          !b.title.toLowerCase().includes(q)
+        )
+          return false
+      }
       return true
     })
-  }, [bills, posFilter, search])
+  }, [allRows, posFilter, search])
 
   const sorted = useMemo(() => {
     const mul = sortDir === "asc" ? 1 : -1
@@ -166,6 +281,28 @@ function LobbyingBillsTable() {
           return mul * (a.oppose - b.oppose)
         case "neutral":
           return mul * (a.neutral - b.neutral)
+        case "clients":
+          return mul * (a.clients - b.clients)
+        case "lobbyists":
+          return mul * (a.lobbyists - b.lobbyists)
+        case "pct_support":
+          return (
+            mul *
+            ((a.total ? a.support / a.total : 0) -
+              (b.total ? b.support / b.total : 0))
+          )
+        case "pct_oppose":
+          return (
+            mul *
+            ((a.total ? a.oppose / a.total : 0) -
+              (b.total ? b.oppose / b.total : 0))
+          )
+        case "pct_neutral":
+          return (
+            mul *
+            ((a.total ? a.neutral / a.total : 0) -
+              (b.total ? b.neutral / b.total : 0))
+          )
         default:
           return mul * (a.total - b.total)
       }
@@ -179,23 +316,15 @@ function LobbyingBillsTable() {
 
   useEffect(() => {
     setPage(1)
-  }, [court, posFilter, search, sortKey, sortDir, setPage])
+  }, [selectedCourts, posFilter, search, sortKey, sortDir, setPage])
 
   return (
     <>
       <div style={filterRowStyle}>
-        <select
-          value={court}
-          onChange={e => setCourt(Number(e.target.value))}
-          style={selectStyle}
-          aria-label={t("filters.session")}
-        >
-          {COURTS.map(c => (
-            <option key={c} value={c}>
-              {t("filters.session")} {c}
-            </option>
-          ))}
-        </select>
+        <CourtMultiSelect
+          selected={selectedCourts}
+          onChange={setSelectedCourts}
+        />
 
         <select
           value={posFilter}
@@ -211,11 +340,10 @@ function LobbyingBillsTable() {
 
         <input
           type="search"
-          placeholder={t("filters.search")}
+          placeholder="Search bill ID or title…"
           value={search}
           onChange={e => setSearch(e.target.value)}
           style={searchStyle}
-          aria-label={t("filters.search")}
         />
       </div>
 
@@ -254,8 +382,13 @@ function LobbyingBillsTable() {
                     onSort={handleSort}
                   />
                   <th style={thStyle} className={styles.mobileHide}>
-                    {t("filters.session")}
+                    Title
                   </th>
+                  {multiCourt && (
+                    <th style={thStyle} className={styles.mobileHide}>
+                      {t("filters.session")}
+                    </th>
+                  )}
                   <SortTh
                     label={t("fields.filings")}
                     sortKey="filings"
@@ -263,6 +396,22 @@ function LobbyingBillsTable() {
                     dir={sortDir}
                     onSort={handleSort}
                   />
+                  <SortTh
+                    label="Clients"
+                    sortKey="clients"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                    className={styles.mobileHide}
+                  />
+                  <SortTh
+                    label="Firms"
+                    sortKey="lobbyists"
+                    current={sortKey}
+                    dir={sortDir}
+                    onSort={handleSort}
+                    className={styles.mobileHide}
+                  />
                   <SortTh
                     label={t("position.support")}
                     sortKey="support"
@@ -287,53 +436,129 @@ function LobbyingBillsTable() {
                     onSort={handleSort}
                     className={styles.mobileHide}
                   />
-                  <th style={thStyle}>{t("fields.positions")}</th>
+                  <th
+                    onClick={handlePositionsSort}
+                    style={{
+                      ...thStyle,
+                      cursor: "pointer",
+                      color: isPctKey(sortKey)
+                        ? MAPLE_COLORS.primary
+                        : MAPLE_COLORS.textMuted,
+                      userSelect: "none"
+                    }}
+                    title="Click to sort by % support → % oppose → % neutral"
+                  >
+                    {isPctKey(sortKey)
+                      ? PCT_LABEL[sortKey]
+                      : t("fields.positions")}
+                    {isPctKey(sortKey) && (
+                      <span style={{ fontSize: 10, marginLeft: 3 }}>
+                        {sortDir === "asc" ? "↑" : "↓"}
+                      </span>
+                    )}
+                  </th>
                 </tr>
               </thead>
               <tbody>
-                {pageItems.map(b => (
-                  <tr key={b.billId} style={trStyle}>
-                    <td style={tdStyle}>
-                      <a
-                        href={`/lobbying/bills/${b.court}/${b.billId}`}
-                        style={{ color: MAPLE_COLORS.primary, fontWeight: 600 }}
+                {pageItems.map(b => {
+                  const rowKey = multiCourt
+                    ? `${b.court}-${b.billId}`
+                    : b.billId
+                  return (
+                    <tr key={rowKey} style={trStyle}>
+                      <td style={tdStyle}>
+                        <a
+                          href={`/lobbying/bills/${b.court}/${b.billId}`}
+                          style={{
+                            color: MAPLE_COLORS.primary,
+                            fontWeight: 600
+                          }}
+                        >
+                          {b.billId}
+                        </a>
+                      </td>
+                      <td
+                        style={{ ...tdStyle, maxWidth: 280 }}
+                        className={styles.mobileHide}
+                        title={b.title || undefined}
                       >
-                        {b.billId}
-                      </a>
-                    </td>
-                    <td style={tdStyle} className={styles.mobileHide}>
-                      {b.court}
-                    </td>
-                    <td style={tdStyle}>{b.total}</td>
-                    <td style={tdStyle} className={styles.mobileHide}>
-                      {b.support > 0 && (
-                        <LobbyingPositionChip position="support" />
-                      )}{" "}
-                      {b.support > 0 && (
-                        <span style={{ fontSize: 12 }}>{b.support}</span>
-                      )}
-                    </td>
-                    <td style={tdStyle} className={styles.mobileHide}>
-                      {b.oppose > 0 && (
-                        <LobbyingPositionChip position="oppose" />
-                      )}{" "}
-                      {b.oppose > 0 && (
-                        <span style={{ fontSize: 12 }}>{b.oppose}</span>
-                      )}
-                    </td>
-                    <td style={tdStyle} className={styles.mobileHide}>
-                      {b.neutral > 0 && (
-                        <LobbyingPositionChip position="neutral" />
-                      )}{" "}
-                      {b.neutral > 0 && (
-                        <span style={{ fontSize: 12 }}>{b.neutral}</span>
+                        {b.title ? (
+                          <span
+                            style={{
+                              display: "block",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              fontSize: 12,
+                              color: MAPLE_COLORS.textMuted
+                            }}
+                          >
+                            {b.title}
+                          </span>
+                        ) : null}
+                      </td>
+                      {multiCourt && (
+                        <td style={tdStyle} className={styles.mobileHide}>
+                          {b.court}
+                        </td>
                       )}
-                    </td>
-                    <td style={{ ...tdStyle, verticalAlign: "middle" }}>
-                      <PositionMiniBar row={b} />
-                    </td>
-                  </tr>
-                ))}
+                      <td style={tdStyle}>{b.total}</td>
+                      <td style={tdStyle} className={styles.mobileHide}>
+                        {b.clients || (
+                          <span style={{ color: MAPLE_COLORS.textMuted }}>
+                            —
+                          </span>
+                        )}
+                      </td>
+                      <td style={tdStyle} className={styles.mobileHide}>
+                        {b.lobbyists || (
+                          <span style={{ color: MAPLE_COLORS.textMuted }}>
+                            —
+                          </span>
+                        )}
+                      </td>
+                      <td style={tdStyle} className={styles.mobileHide}>
+                        {b.support > 0 && (
+                          <span
+                            style={{
+                              fontSize: 12,
+                              color: POSITION_COLORS.support
+                            }}
+                          >
+                            {b.support}
+                          </span>
+                        )}
+                      </td>
+                      <td style={tdStyle} className={styles.mobileHide}>
+                        {b.oppose > 0 && (
+                          <span
+                            style={{
+                              fontSize: 12,
+                              color: POSITION_COLORS.oppose
+                            }}
+                          >
+                            {b.oppose}
+                          </span>
+                        )}
+                      </td>
+                      <td style={tdStyle} className={styles.mobileHide}>
+                        {b.neutral > 0 && (
+                          <span
+                            style={{
+                              fontSize: 12,
+                              color: POSITION_COLORS.neutral
+                            }}
+                          >
+                            {b.neutral}
+                          </span>
+                        )}
+                      </td>
+                      <td style={{ ...tdStyle, verticalAlign: "middle" }}>
+                        <PositionMiniBar row={b} />
+                      </td>
+                    </tr>
+                  )
+                })}
               </tbody>
             </table>
           </div>
@@ -352,6 +577,8 @@ function LobbyingBillsTable() {
   )
 }
 
+// ── Page ──────────────────────────────────────────────────────────────────────
+
 function LobbyingBillsPage() {
   const { t } = useTranslation("lobbying")
   return (
@@ -410,10 +637,33 @@ const selectStyle: React.CSSProperties = {
 
 const searchStyle: React.CSSProperties = {
   ...selectStyle,
-  minWidth: 180,
+  minWidth: 220,
   cursor: "text"
 }
 
+const dropdownStyle: React.CSSProperties = {
+  position: "absolute",
+  top: "calc(100% + 4px)",
+  left: 0,
+  zIndex: 200,
+  background: MAPLE_COLORS.surfaceBase,
+  border: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  borderRadius: 8,
+  boxShadow: "0 4px 16px rgba(15,23,42,0.10)",
+  padding: "6px 0",
+  minWidth: 240
+}
+
+const checkRowStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  padding: "5px 14px",
+  fontSize: 13,
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  gap: 2
+}
+
 const tableStyle: React.CSSProperties = {
   width: "100%",
   borderCollapse: "collapse",
diff --git a/scripts/firebase-admin/seedLobbyingStats.ts b/scripts/firebase-admin/seedLobbyingStats.ts
index 129b09103..42f959c72 100644
--- a/scripts/firebase-admin/seedLobbyingStats.ts
+++ b/scripts/firebase-admin/seedLobbyingStats.ts
@@ -1,7 +1,16 @@
 import { Script } from "./types"
 
 type PositionKey = "support" | "oppose" | "neutral" | "none"
-type BillCounts = { total: number } & Record<PositionKey, number>
+type BillCounts = {
+  total: number
+  support: number
+  oppose: number
+  neutral: number
+  none: number
+  title: string
+  clients: number
+  lobbyists: number
+}
 
 function normalizePosition(raw: string | undefined): PositionKey {
   if (!raw) return "none"
@@ -32,6 +41,8 @@ export const script: Script = async ({ db }) => {
   const entityFilingCounts: Record<string, number> = {}
   const clientFilingCounts: Record<string, number> = {}
   const billSummaries: Record<number, Record<string, BillCounts>> = {}
+  const billClientSets: Record<number, Record<string, Set<string>>> = {}
+  const billEntitySets: Record<number, Record<string, Set<string>>> = {}
 
   for (const doc of filingsSnap.docs) {
     const d = doc.data()
@@ -41,18 +52,29 @@ export const script: Script = async ({ db }) => {
     if (d.billId && d.billId.length > 2) {
       bills.add(`${gc}/${d.billId}`)
       const pos = normalizePosition(d.position)
-      if (!billSummaries[gc]) billSummaries[gc] = {}
+      if (!billSummaries[gc]) {
+        billSummaries[gc] = {}
+        billClientSets[gc] = {}
+        billEntitySets[gc] = {}
+      }
       if (!billSummaries[gc][d.billId]) {
         billSummaries[gc][d.billId] = {
           total: 0,
           support: 0,
           oppose: 0,
           neutral: 0,
-          none: 0
+          none: 0,
+          title: d.activityTitle ?? "",
+          clients: 0,
+          lobbyists: 0
         }
+        billClientSets[gc][d.billId] = new Set()
+        billEntitySets[gc][d.billId] = new Set()
       }
       billSummaries[gc][d.billId].total++
       billSummaries[gc][d.billId][pos]++
+      if (d.clientNameNorm) billClientSets[gc][d.billId].add(d.clientNameNorm)
+      if (d.entityNameNorm) billEntitySets[gc][d.billId].add(d.entityNameNorm)
     }
 
     courts.add(gc)
@@ -70,6 +92,15 @@ export const script: Script = async ({ db }) => {
     }
   }
 
+  // Fill in client/lobbyist counts from the sets
+  for (const [gcStr, billsMap] of Object.entries(billSummaries)) {
+    const gc = Number(gcStr)
+    for (const [billId, counts] of Object.entries(billsMap)) {
+      counts.clients = billClientSets[gc]?.[billId]?.size ?? 0
+      counts.lobbyists = billEntitySets[gc]?.[billId]?.size ?? 0
+    }
+  }
+
   // Aggregate spend and unique clients from registrant docs.
   // Registrant clients[].compensation is the annual total paid per client
   // relationship — more accurate than the per-bill amount on filings.
@@ -123,7 +154,7 @@ export const script: Script = async ({ db }) => {
     await db
       .collection(STATS_COLLECTION)
       .doc(`billSummaries_${court}`)
-      .set(billsMap)
+      .set({ data: JSON.stringify(billsMap) })
   }
 
   console.log(`Written to ${STATS_COLLECTION}/${STATS_DOC_ID}`)

From 1e037fbac45507b96e850765f6ca7f6d51893f46 Mon Sep 17 00:00:00 2001
From: Sam DeMarrais <sam.dem2002@gmail.com>
Date: Tue, 18 Aug 2026 19:46:30 -0400
Subject: [PATCH 19/25] Fix vote modal (#2217)

* Combine votes modal

* Create vote dropdown
---
 components/hearing/HearingSidebar.tsx | 136 +++++++++++++++++++-------
 components/hearing/hearing.ts         |  69 +++++++++++++
 2 files changed, 170 insertions(+), 35 deletions(-)

diff --git a/components/hearing/HearingSidebar.tsx b/components/hearing/HearingSidebar.tsx
index 6bedeb78e..7978b5a13 100644
--- a/components/hearing/HearingSidebar.tsx
+++ b/components/hearing/HearingSidebar.tsx
@@ -4,12 +4,18 @@ import Link from "next/link"
 import { useCallback, useEffect, useState } from "react"
 import type { ModalProps } from "react-bootstrap"
 import styled from "styled-components"
-import { Col, Image, Modal, Row } from "../bootstrap"
+import { Col, Image, Modal, Row, Dropdown } from "../bootstrap"
 import { firestore } from "../firebase"
 import * as links from "../links"
 import { billSiteURL, Internal } from "../links"
 import { LabeledIcon } from "../shared"
-import { Paragraph, TranscriptData, formatVTTTimestamp } from "./hearing"
+import {
+  CommitteeRecommendation,
+  CommitteeVote,
+  CommitteeVoteRecord,
+  LegislativeMemberSummary,
+  TranscriptData
+} from "./hearing"
 
 type Bill = {
   BillNumber: string
@@ -365,9 +371,9 @@ function AgendaBill({
   const { t } = useTranslation(["common", "hearing"])
   const BillNumber = element.BillNumber
   const CourtNumber = element.GeneralCourtNumber
-  const [committeeRecommendations, setCommitteeRecommendations] = useState<any>(
-    []
-  )
+  const [committeeActions, setCommitteeActions] = useState<
+    CommitteeRecommendation[]
+  >([])
   const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
 
   const close = () => setSettingsModal(null)
@@ -378,21 +384,36 @@ function AgendaBill({
     )
     const docData = bill.data()
 
-    setCommitteeRecommendations(docData?.content.CommitteeRecommendations)
+    // All recommendations for this bill
+    let committeeRecommendations: CommitteeRecommendation[] =
+      docData?.content.CommitteeRecommendations
+    for (const action of committeeRecommendations) {
+      action.Votes = action.Votes?.filter(
+        vote =>
+          vote.Vote &&
+          vote.Vote.length &&
+          vote.Vote.some(
+            vote =>
+              vote.Adverse?.length ||
+              vote.Favorable?.length ||
+              vote.NoVoteRecorded?.length ||
+              vote.ReserveRight?.length
+          )
+      )
+    }
+    // Recommendations for this bill from the relevant committee (regardless of whether they are in this hearing specifically)
+    committeeRecommendations = committeeRecommendations.filter(
+      action =>
+        action.Committee?.CommitteeCode === committeeCode &&
+        action.Votes?.length
+    )
+    setCommitteeActions(committeeRecommendations)
   }, [BillNumber, CourtNumber])
 
   useEffect(() => {
     BillNumber && CourtNumber ? hearingBill() : null
   }, [BillNumber, hearingBill, CourtNumber])
 
-  let committeeActions = []
-
-  committeeRecommendations
-    ? (committeeActions = committeeRecommendations.filter(
-        (action: any) => action.Committee.CommitteeCode === committeeCode
-      ))
-    : null
-
   return (
     <>
       <div className={`border border-2 my-3 rounded`}>
@@ -401,7 +422,7 @@ function AgendaBill({
             {BillNumber}
           </Internal>
           <SidebarSubbody className={`my-2`}>{element.Title}</SidebarSubbody>
-          {committeeActions[0]?.Votes[0]?.Question ? (
+          {committeeActions.length > 0 ? (
             <SidebarSubbody className={`d-flex justify-content-end mb-2`}>
               <button
                 className={`bg-transparent border-0 d-flex text-nowrap text-secondary mt-1 mx-1 p-1`}
@@ -415,22 +436,24 @@ function AgendaBill({
           )}
         </div>
       </div>
-      <VotesModal
-        BillNumber={BillNumber}
-        committeeActions={committeeActions}
-        CourtNumber={CourtNumber}
-        generalCourtNumber={generalCourtNumber}
-        onHide={close}
-        onSettingsModalClose={() => setSettingsModal(null)}
-        show={settingsModal === "show"}
-      />
+      {committeeActions.length > 0 ? (
+        <VotesModal
+          BillNumber={BillNumber}
+          committeeActions={committeeActions}
+          CourtNumber={CourtNumber}
+          generalCourtNumber={generalCourtNumber}
+          onHide={close}
+          onSettingsModalClose={() => setSettingsModal(null)}
+          show={settingsModal === "show"}
+        />
+      ) : null}
     </>
   )
 }
 
 type Props = Pick<ModalProps, "show" | "onHide"> & {
   BillNumber: string
-  committeeActions: any
+  committeeActions: CommitteeRecommendation[]
   CourtNumber: number
   generalCourtNumber: string | null
   onSettingsModalClose: () => void
@@ -446,6 +469,25 @@ function VotesModal({
   show
 }: Props) {
   const { t } = useTranslation(["common", "editProfile", "hearing"])
+  const votes: CommitteeVote[] = []
+  const [selectedVote, setSelectedVote] = useState(0)
+  for (const action of committeeActions) {
+    for (const vote of action.Votes!) {
+      // Merge different vote arrays into [0]
+      const record = vote.Vote!.reduce((acc, vote) => {
+        for (const [key, values] of Object.entries(vote) as [
+          keyof CommitteeVoteRecord,
+          LegislativeMemberSummary[]
+        ][]) {
+          acc[key] ??= []
+          acc[key]!.push(...values)
+        }
+        return acc
+      }, {})
+      vote.Vote = [record]
+      votes.push(vote)
+    }
+  }
 
   return (
     <Modal show={show} onHide={onHide} aria-labelledby="votes-modal" centered>
@@ -463,16 +505,40 @@ function VotesModal({
         />
       </Modal.Header>
       <Modal.Body className={`bg-white p-3`}>
-        <div className={`fw-bold`}>
-          {committeeActions[0]?.Votes[0]?.Question}
+        <div className="fw-bold">
+          {votes.length > 1 ? (
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="link"
+                className="p-0 text-start text-dark fw-bold text-decoration-none"
+                style={{ whiteSpace: "normal" }}
+              >
+                {votes[selectedVote].Question}
+              </Dropdown.Toggle>
+
+              <Dropdown.Menu className="w-100">
+                {votes.map((vote, n) => (
+                  <Dropdown.Item
+                    key={n}
+                    className="text-wrap"
+                    onClick={() => setSelectedVote(n)}
+                  >
+                    {vote.Question}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          ) : (
+            votes[selectedVote].Question
+          )}
         </div>
         <ModalLine />
         <div className={`fw-bold`}>
           {t("yes", { ns: "hearing" })} (
-          {committeeActions[0]?.Votes[0]?.Vote[0]?.Favorable.length})
+          {votes[selectedVote]?.Vote![0].Favorable?.length ?? 0})
         </div>
         {generalCourtNumber &&
-          committeeActions[0]?.Votes[0]?.Vote[0]?.Favorable.map(
+          (votes[selectedVote]?.Vote![0].Favorable ?? []).map(
             (element: any, index: number) => (
               <Vote
                 key={index}
@@ -485,10 +551,10 @@ function VotesModal({
 
         <div className={`fw-bold`}>
           {t("no", { ns: "hearing" })} (
-          {committeeActions[0]?.Votes[0]?.Vote[0]?.Adverse.length})
+          {votes[selectedVote].Vote![0].Adverse?.length ?? 0})
         </div>
         {generalCourtNumber &&
-          committeeActions[0]?.Votes[0]?.Vote[0]?.Adverse.map(
+          (votes[selectedVote]?.Vote![0].Adverse ?? []).map(
             (element: any, index: number) => (
               <Vote
                 key={index}
@@ -501,10 +567,10 @@ function VotesModal({
 
         <div className={`fw-bold`}>
           {t("no_vote", { ns: "hearing" })} (
-          {committeeActions[0]?.Votes[0]?.Vote[0]?.NoVoteRecorded.length})
+          {votes[selectedVote]?.Vote![0].NoVoteRecorded?.length ?? 0})
         </div>
         {generalCourtNumber &&
-          committeeActions[0]?.Votes[0]?.Vote[0]?.NoVoteRecorded.map(
+          (votes[selectedVote]?.Vote![0].NoVoteRecorded ?? []).map(
             (element: any, index: number) => (
               <Vote
                 key={index}
@@ -517,10 +583,10 @@ function VotesModal({
 
         <div className={`fw-bold`}>
           {t("reserve_right", { ns: "hearing" })} (
-          {committeeActions[0]?.Votes[0]?.Vote[0]?.ReserveRight.length})
+          {votes[selectedVote]?.Vote![0].ReserveRight?.length ?? 0})
         </div>
         {generalCourtNumber &&
-          committeeActions[0]?.Votes[0]?.Vote[0]?.ReserveRight.map(
+          (votes[selectedVote]?.Vote![0].ReserveRight ?? []).map(
             (element: any, index: number) => (
               <Vote
                 key={index}
diff --git a/components/hearing/hearing.ts b/components/hearing/hearing.ts
index 4c8c2bda9..f7a865ce4 100644
--- a/components/hearing/hearing.ts
+++ b/components/hearing/hearing.ts
@@ -170,3 +170,72 @@ export function toVTT(transcriptData: Paragraph[]): string {
 
   return vttLines.join("\n")
 }
+
+export interface CommitteeRecommendation {
+  Action?: string
+  FiscalAmounts?: FiscalAmount[]
+  Committee?: Committee
+  Votes?: CommitteeVote[]
+}
+
+export interface FiscalAmount {
+  FiscalType?: string
+  Amount?: string
+}
+
+export interface Committee {
+  CommitteeCode?: string
+  GeneralCourtNumber?: number
+  Details?: string
+}
+
+export interface CommitteeVote {
+  Question?: string
+  Bill?: CommitteeVoteBill
+  Committee?: Committee
+  Date: string
+  Vote?: CommitteeVoteRecord[]
+}
+
+export interface CommitteeVoteBill {
+  BillNumber?: string
+  DocketNumber?: string
+  Title?: string
+  PrimarySponsor?: BillSponsor
+  Cosponsors?: BillSponsor[]
+  JointSponsor?: BillSponsor
+  GeneralCourtNumber: number
+  Details?: string
+  IsDocketBookOnly: boolean
+}
+
+export interface BillSponsor {
+  Id?: string
+  Name?: string
+  /**
+   * Type of the Bill Sponsor:
+   * 1 = Legislative Member
+   * 2 = Committee
+   * 3 = Public Request
+   * 4 = Special Request
+   */
+  Type: 1 | 2 | 3 | 4
+  /**
+   * Only Committees and Legislative Members will have further details.
+   */
+  Details?: string
+  ResponseDate?: string
+}
+
+export interface CommitteeVoteRecord {
+  Favorable?: LegislativeMemberSummary[]
+  Adverse?: LegislativeMemberSummary[]
+  ReserveRight?: LegislativeMemberSummary[]
+  NoVoteRecorded?: LegislativeMemberSummary[]
+}
+
+export interface LegislativeMemberSummary {
+  GeneralCourtNumber: number
+  MemberCode?: string
+  Details?: string
+}

From eb30981a0f9ccef95968b45189d3ecdf15110840 Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Thu, 20 Aug 2026 19:47:37 -0400
Subject: [PATCH 20/25] fixage and prettier

---
 components/shared/FollowButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/shared/FollowButton.tsx b/components/shared/FollowButton.tsx
index ec8e035d3..7a09057f5 100644
--- a/components/shared/FollowButton.tsx
+++ b/components/shared/FollowButton.tsx
@@ -120,7 +120,7 @@ export const BaseFollowButton = ({
   const checkmark = isFollowing ? (
     <StyledImage src="/check-white.svg" alt="" />
   ) : null
-  const handleClick = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleClick = (event: any) => {
     event.preventDefault()
     if (!uid) {
       const currentPath = router.asPath
@@ -134,7 +134,7 @@ export const BaseFollowButton = ({
     <>
       {!hide && (
         <div className="follow-button">
-          <Button onClick={onClick} className={`btn btn-lg py-1`}>
+          <Button onClick={handleClick} className={`btn btn-lg py-1`}>
             {t(`button.${isFollowing ? "unfollow" : "follow"}`)}
             {isFollowing && <StyledImage src="/check-white.svg" alt="" />}
           </Button>

From cea5e07f918c623fbc44007ae33eded4a7684f95 Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Thu, 20 Aug 2026 19:53:55 -0400
Subject: [PATCH 21/25] moar prettier

---
 components/testimony/TestimonyDetailPage/PolicyActions.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/testimony/TestimonyDetailPage/PolicyActions.tsx b/components/testimony/TestimonyDetailPage/PolicyActions.tsx
index ea506f02f..c0733e8e6 100644
--- a/components/testimony/TestimonyDetailPage/PolicyActions.tsx
+++ b/components/testimony/TestimonyDetailPage/PolicyActions.tsx
@@ -71,7 +71,6 @@ export const PolicyActions: FC<React.PropsWithChildren<PolicyActionsProps>> = ({
     ? ballotQuestionTopicName(ballotQuestionTopic.court, ballotQuestionTopic.id)
     : billTopicName(bill.court, bill.id)
 
-
   const { followStatus, setFollowStatus } = useContext(FollowContext)
   const [canEditBallotQuestionTestimony, setCanEditBallotQuestionTestimony] =
     useState(!ballotQuestionId)

From e373cecfc0e50354b7254e368aed8d2752037016 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:00:48 +0000
Subject: [PATCH 22/25] update README.md

---
 README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 4a143c6d9..736d88d17 100644
--- a/README.md
+++ b/README.md
@@ -242,39 +242,40 @@ Thanks to all our contributors!
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/simk209"><img src="https://avatars.githubusercontent.com/u/122063210?v=4?s=100" width="100px;" alt="Simran Kaur"/><br /><sub><b>Simran Kaur</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=simk209" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://soundarmurugan.com"><img src="https://avatars.githubusercontent.com/u/55850316?v=4?s=100" width="100px;" alt="Soundar Murugan"/><br /><sub><b>Soundar Murugan</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=soundarzozm" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Slam256"><img src="https://avatars.githubusercontent.com/u/96086935?v=4?s=100" width="100px;" alt="Stacey Ali"/><br /><sub><b>Stacey Ali</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=Slam256" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://twitter.com/slars0n"><img src="https://avatars.githubusercontent.com/u/1037756?v=4?s=100" width="100px;" alt="Stephen Larson"/><br /><sub><b>Stephen Larson</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=slarson" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://timblaisdesigns.netlify.app/"><img src="https://avatars.githubusercontent.com/u/97904016?v=4?s=100" width="100px;" alt="Tim Blais"/><br /><sub><b>Tim Blais</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=timblais" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tommagnusson"><img src="https://avatars.githubusercontent.com/u/11342238?v=4?s=100" width="100px;" alt="Tom Magnusson"/><br /><sub><b>Tom Magnusson</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=tommagnusson" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ujwalkumar1995"><img src="https://avatars.githubusercontent.com/u/20976813?v=4?s=100" width="100px;" alt="Ujwal Kumar"/><br /><sub><b>Ujwal Kumar</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=ujwalkumar1995" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VenkateshDevarakonda0706"><img src="https://avatars.githubusercontent.com/u/188581366?v=4?s=100" width="100px;" alt="VenkateshDevarakonda0706"/><br /><sub><b>VenkateshDevarakonda0706</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=VenkateshDevarakonda0706" title="Code">💻</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VenkateshDevarakonda0706"><img src="https://avatars.githubusercontent.com/u/188581366?v=4?s=100" width="100px;" alt="VenkateshDevarakonda0706"/><br /><sub><b>VenkateshDevarakonda0706</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=VenkateshDevarakonda0706" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/veronicaadler"><img src="https://avatars.githubusercontent.com/u/83320256?v=4?s=100" width="100px;" alt="Veronica Adler"/><br /><sub><b>Veronica Adler</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=veronicaadler" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/YuhaoT"><img src="https://avatars.githubusercontent.com/u/30719318?v=4?s=100" width="100px;" alt="YuhaoT"/><br /><sub><b>YuhaoT</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=YuhaoT" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ananyasinghz"><img src="https://avatars.githubusercontent.com/u/143516466?v=4?s=100" width="100px;" alt="ananyasinghz"/><br /><sub><b>ananyasinghz</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=ananyasinghz" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/arutfield"><img src="https://avatars.githubusercontent.com/u/36383013?v=4?s=100" width="100px;" alt="arutfield"/><br /><sub><b>arutfield</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=arutfield" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/bancona"><img src="https://avatars.githubusercontent.com/u/5554068?v=4?s=100" width="100px;" alt="bancona"/><br /><sub><b>bancona</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=bancona" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/d-ondrich"><img src="https://avatars.githubusercontent.com/u/25425042?v=4?s=100" width="100px;" alt="d.ondrich"/><br /><sub><b>d.ondrich</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=d-ondrich" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/djtanner"><img src="https://avatars.githubusercontent.com/u/3960256?v=4?s=100" width="100px;" alt="djtanner"/><br /><sub><b>djtanner</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=djtanner" title="Code">💻</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/djtanner"><img src="https://avatars.githubusercontent.com/u/3960256?v=4?s=100" width="100px;" alt="djtanner"/><br /><sub><b>djtanner</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=djtanner" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.ekambains.com"><img src="https://avatars.githubusercontent.com/u/182202895?v=4?s=100" width="100px;" alt="ekambains"/><br /><sub><b>ekambains</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=ekambains" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/iWumboUWumbo2"><img src="https://avatars.githubusercontent.com/u/17531877?v=4?s=100" width="100px;" alt="iWumboUWumbo2"/><br /><sub><b>iWumboUWumbo2</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=iWumboUWumbo2" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ishana-goyal"><img src="https://avatars.githubusercontent.com/u/88641809?v=4?s=100" width="100px;" alt="ishana-goyal"/><br /><sub><b>ishana-goyal</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=ishana-goyal" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jamesvas5307"><img src="https://avatars.githubusercontent.com/u/14347149?v=4?s=100" width="100px;" alt="jamesvas5307"/><br /><sub><b>jamesvas5307</b></sub></a><br /><a href="#design-jamesvas5307" title="Design">🎨</a> <a href="#mentoring-jamesvas5307" title="Mentoring">🧑‍🏫</a> <a href="#userTesting-jamesvas5307" title="User Testing">📓</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jellyyams"><img src="https://avatars.githubusercontent.com/u/53629007?v=4?s=100" width="100px;" alt="jellyyams"/><br /><sub><b>jellyyams</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=jellyyams" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jkinzer85"><img src="https://avatars.githubusercontent.com/u/80472427?v=4?s=100" width="100px;" alt="jkinzer85"/><br /><sub><b>jkinzer85</b></sub></a><br /><a href="#userTesting-jkinzer85" title="User Testing">📓</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mertbagt"><img src="https://avatars.githubusercontent.com/u/73559781?v=4?s=100" width="100px;" alt="mertbagt"/><br /><sub><b>mertbagt</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=mertbagt" title="Code">💻</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mertbagt"><img src="https://avatars.githubusercontent.com/u/73559781?v=4?s=100" width="100px;" alt="mertbagt"/><br /><sub><b>mertbagt</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=mertbagt" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mmailloux22"><img src="https://avatars.githubusercontent.com/u/48417120?v=4?s=100" width="100px;" alt="mmailloux22"/><br /><sub><b>mmailloux22</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=mmailloux22" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mvictor55"><img src="https://avatars.githubusercontent.com/u/71357256?v=4?s=100" width="100px;" alt="mvictor55"/><br /><sub><b>mvictor55</b></sub></a><br /><a href="#business-mvictor55" title="Business development">💼</a> <a href="#projectManagement-mvictor55" title="Project Management">📆</a> <a href="#fundingFinding-mvictor55" title="Funding Finding">🔍</a> <a href="https://github.com/codeforboston/maple/commits?author=mvictor55" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/pranay8297"><img src="https://avatars.githubusercontent.com/u/47974414?v=4?s=100" width="100px;" alt="pranay"/><br /><sub><b>pranay</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=pranay8297" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ren0nie0"><img src="https://avatars.githubusercontent.com/u/32780767?v=4?s=100" width="100px;" alt="ren0nie0"/><br /><sub><b>ren0nie0</b></sub></a><br /><a href="#research-ren0nie0" title="Research">🔬</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/rockyroed"><img src="https://avatars.githubusercontent.com/u/108738926?v=4?s=100" width="100px;" alt="roed"/><br /><sub><b>roed</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=rockyroed" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sammymyi"><img src="https://avatars.githubusercontent.com/u/105759252?v=4?s=100" width="100px;" alt="sammymyi"/><br /><sub><b>sammymyi</b></sub></a><br /><a href="#design-sammymyi" title="Design">🎨</a> <a href="#userTesting-sammymyi" title="User Testing">📓</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sashamaryl"><img src="https://avatars.githubusercontent.com/u/30247522?v=4?s=100" width="100px;" alt="sashamaryl"/><br /><sub><b>sashamaryl</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=sashamaryl" title="Code">💻</a> <a href="#mentoring-sashamaryl" title="Mentoring">🧑‍🏫</a> <a href="#research-sashamaryl" title="Research">🔬</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sashamaryl"><img src="https://avatars.githubusercontent.com/u/30247522?v=4?s=100" width="100px;" alt="sashamaryl"/><br /><sub><b>sashamaryl</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=sashamaryl" title="Code">💻</a> <a href="#mentoring-sashamaryl" title="Mentoring">🧑‍🏫</a> <a href="#research-sashamaryl" title="Research">🔬</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/shannonh800"><img src="https://avatars.githubusercontent.com/u/113308101?v=4?s=100" width="100px;" alt="shannonh800"/><br /><sub><b>shannonh800</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=shannonh800" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/fastfadingviolets"><img src="https://avatars.githubusercontent.com/u/158512193?v=4?s=100" width="100px;" alt="violet"/><br /><sub><b>violet</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=fastfadingviolets" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/yasminekarni"><img src="https://avatars.githubusercontent.com/u/47721405?v=4?s=100" width="100px;" alt="yasminekarni"/><br /><sub><b>yasminekarni</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=yasminekarni" title="Code">💻</a></td>

From 2a9df5afb6ea74d34bd40aff175a8cd90a216a10 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:00:49 +0000
Subject: [PATCH 23/25] update .all-contributorsrc

---
 .all-contributorsrc | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 2159af06e..15eb7194e 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -876,6 +876,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "slarson",
+      "name": "Stephen Larson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1037756?v=4",
+      "profile": "http://twitter.com/slars0n",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitType": "docs"

From 7a1fad30bbd4c832f9f41e94079f48c115c64539 Mon Sep 17 00:00:00 2001
From: Sam DeMarrais <sam.dem2002@gmail.com>
Date: Wed, 26 Aug 2026 14:20:33 -0400
Subject: [PATCH 24/25] Merge pull request #2224 from delexagon/test-node-22

Update Node to 22
---
 .github/actions/setup-repo/action.yml | 2 +-
 firebase.json                         | 2 +-
 functions/.runtimeconfig.json         | 2 +-
 infra/Dockerfile.firebase             | 4 ++--
 infra/Dockerfile.node                 | 4 ++--
 infra/firebase.compose.json           | 2 +-
 mcp-server/Dockerfile                 | 4 ++--
 package.json                          | 4 ++--
 yarn.lock                             | 8 ++++----
 9 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/.github/actions/setup-repo/action.yml b/.github/actions/setup-repo/action.yml
index 869ec4af0..860fb9872 100644
--- a/.github/actions/setup-repo/action.yml
+++ b/.github/actions/setup-repo/action.yml
@@ -4,7 +4,7 @@ inputs:
   node-version:
     description: "Version used by actions/setup-node"
     required: true
-    default: "20"
+    default: "22"
   yarn-version:
     description: "Version of Yarn used to install dependencies"
     required: true
diff --git a/firebase.json b/firebase.json
index b2ddccc3a..7f8927b97 100644
--- a/firebase.json
+++ b/firebase.json
@@ -9,7 +9,7 @@
       "predeploy": ["yarn build:functions"],
       "source": "functions",
       "codebase": "maple",
-      "runtime": "nodejs20",
+      "runtime": "nodejs22",
       "runtimeConfig": ".runtimeconfig.json"
     },
     {
diff --git a/functions/.runtimeconfig.json b/functions/.runtimeconfig.json
index e51e1e869..55b436d3e 100644
--- a/functions/.runtimeconfig.json
+++ b/functions/.runtimeconfig.json
@@ -1,6 +1,6 @@
 {
   "runtime": {
-    "nodejs18": {
+    "nodejs22": {
       "apt": {
         "packages": ["ffmpeg"]
       }
diff --git a/infra/Dockerfile.firebase b/infra/Dockerfile.firebase
index bc17a8e08..34fcd2f06 100644
--- a/infra/Dockerfile.firebase
+++ b/infra/Dockerfile.firebase
@@ -1,8 +1,8 @@
-FROM andreysenov/firebase-tools:latest-node-20
+FROM andreysenov/firebase-tools:latest-node-22
 
 USER root
 RUN apt update && apt install -y curl python3 python3-pip python3-venv ffmpeg
 
 WORKDIR /app
 RUN chown -R node:node .
-USER node
\ No newline at end of file
+USER node
diff --git a/infra/Dockerfile.node b/infra/Dockerfile.node
index 6acce9d1a..b28d61797 100644
--- a/infra/Dockerfile.node
+++ b/infra/Dockerfile.node
@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:22-alpine
 
 USER root
 RUN apk update && apk add curl
@@ -6,4 +6,4 @@ RUN apk add --no-cache python3 make g++
 
 WORKDIR /app
 RUN chown -R node:node .
-USER node
\ No newline at end of file
+USER node
diff --git a/infra/firebase.compose.json b/infra/firebase.compose.json
index d7be73a19..385236ec8 100644
--- a/infra/firebase.compose.json
+++ b/infra/firebase.compose.json
@@ -9,7 +9,7 @@
       "predeploy": ["yarn build:functions"],
       "source": "functions",
       "codebase": "maple",
-      "runtime": "nodejs20"
+      "runtime": "nodejs22"
     },
     {
       "predeploy": [
diff --git a/mcp-server/Dockerfile b/mcp-server/Dockerfile
index 79496c632..2e2b029f7 100644
--- a/mcp-server/Dockerfile
+++ b/mcp-server/Dockerfile
@@ -1,5 +1,5 @@
 # ── Build stage ───────────────────────────────────────────────────────────────
-FROM node:20-slim AS builder
+FROM node:22-slim AS builder
 
 WORKDIR /app
 
@@ -11,7 +11,7 @@ COPY *.ts ./
 RUN npm run build
 
 # ── Runtime stage ─────────────────────────────────────────────────────────────
-FROM node:20-slim AS runtime
+FROM node:22-slim AS runtime
 
 WORKDIR /app
 
diff --git a/package.json b/package.json
index 6d2d70fd3..6a200dc2a 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "setRole": "ts-node -P tsconfig.script.json scripts/firebase-admin/setRole.ts"
   },
   "engines": {
-    "node": "^20",
+    "node": "^22",
     "yarn": "^1.22.19"
   },
   "browserslist": {
@@ -167,7 +167,7 @@
     "@types/luxon": "^2.0.9",
     "@types/marked": "^4.0.8",
     "@types/mustache": "^4.2.1",
-    "@types/node": "^20.0.0",
+    "@types/node": "^22.0.0",
     "@types/papaparse": "^5.3.5",
     "@types/react": "^18.2.43",
     "@types/react-copy-to-clipboard": "^5.0.4",
diff --git a/yarn.lock b/yarn.lock
index 03bd7ee1c..45806217e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5014,10 +5014,10 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^20.0.0":
-  version "20.19.41"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.19.41.tgz#bb266a1e0aaa2f4537d14ae8ebf238dd9ca73ce6"
-  integrity sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==
+"@types/node@^22.0.0":
+  version "22.20.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.20.1.tgz#84e7cdf63cdaa20c134aa317ccc901aa21e16f0e"
+  integrity sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==
   dependencies:
     undici-types "~6.21.0"
 

From 4e8822761ed6d36f5bc1a75e1080fde466c0839d Mon Sep 17 00:00:00 2001
From: Mephistic <deathbyfiresermon@gmail.com>
Date: Mon, 31 Aug 2026 07:01:16 -0400
Subject: [PATCH 25/25] Revert "Merge pull request #2224 from
 delexagon/test-node-22"

This reverts commit 7a1fad30bbd4c832f9f41e94079f48c115c64539.
---
 .github/actions/setup-repo/action.yml | 2 +-
 firebase.json                         | 2 +-
 functions/.runtimeconfig.json         | 2 +-
 infra/Dockerfile.firebase             | 4 ++--
 infra/Dockerfile.node                 | 4 ++--
 infra/firebase.compose.json           | 2 +-
 mcp-server/Dockerfile                 | 4 ++--
 package.json                          | 4 ++--
 yarn.lock                             | 8 ++++----
 9 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/.github/actions/setup-repo/action.yml b/.github/actions/setup-repo/action.yml
index 860fb9872..869ec4af0 100644
--- a/.github/actions/setup-repo/action.yml
+++ b/.github/actions/setup-repo/action.yml
@@ -4,7 +4,7 @@ inputs:
   node-version:
     description: "Version used by actions/setup-node"
     required: true
-    default: "22"
+    default: "20"
   yarn-version:
     description: "Version of Yarn used to install dependencies"
     required: true
diff --git a/firebase.json b/firebase.json
index 7f8927b97..b2ddccc3a 100644
--- a/firebase.json
+++ b/firebase.json
@@ -9,7 +9,7 @@
       "predeploy": ["yarn build:functions"],
       "source": "functions",
       "codebase": "maple",
-      "runtime": "nodejs22",
+      "runtime": "nodejs20",
       "runtimeConfig": ".runtimeconfig.json"
     },
     {
diff --git a/functions/.runtimeconfig.json b/functions/.runtimeconfig.json
index 55b436d3e..e51e1e869 100644
--- a/functions/.runtimeconfig.json
+++ b/functions/.runtimeconfig.json
@@ -1,6 +1,6 @@
 {
   "runtime": {
-    "nodejs22": {
+    "nodejs18": {
       "apt": {
         "packages": ["ffmpeg"]
       }
diff --git a/infra/Dockerfile.firebase b/infra/Dockerfile.firebase
index 34fcd2f06..bc17a8e08 100644
--- a/infra/Dockerfile.firebase
+++ b/infra/Dockerfile.firebase
@@ -1,8 +1,8 @@
-FROM andreysenov/firebase-tools:latest-node-22
+FROM andreysenov/firebase-tools:latest-node-20
 
 USER root
 RUN apt update && apt install -y curl python3 python3-pip python3-venv ffmpeg
 
 WORKDIR /app
 RUN chown -R node:node .
-USER node
+USER node
\ No newline at end of file
diff --git a/infra/Dockerfile.node b/infra/Dockerfile.node
index b28d61797..6acce9d1a 100644
--- a/infra/Dockerfile.node
+++ b/infra/Dockerfile.node
@@ -1,4 +1,4 @@
-FROM node:22-alpine
+FROM node:20-alpine
 
 USER root
 RUN apk update && apk add curl
@@ -6,4 +6,4 @@ RUN apk add --no-cache python3 make g++
 
 WORKDIR /app
 RUN chown -R node:node .
-USER node
+USER node
\ No newline at end of file
diff --git a/infra/firebase.compose.json b/infra/firebase.compose.json
index 385236ec8..d7be73a19 100644
--- a/infra/firebase.compose.json
+++ b/infra/firebase.compose.json
@@ -9,7 +9,7 @@
       "predeploy": ["yarn build:functions"],
       "source": "functions",
       "codebase": "maple",
-      "runtime": "nodejs22"
+      "runtime": "nodejs20"
     },
     {
       "predeploy": [
diff --git a/mcp-server/Dockerfile b/mcp-server/Dockerfile
index 2e2b029f7..79496c632 100644
--- a/mcp-server/Dockerfile
+++ b/mcp-server/Dockerfile
@@ -1,5 +1,5 @@
 # ── Build stage ───────────────────────────────────────────────────────────────
-FROM node:22-slim AS builder
+FROM node:20-slim AS builder
 
 WORKDIR /app
 
@@ -11,7 +11,7 @@ COPY *.ts ./
 RUN npm run build
 
 # ── Runtime stage ─────────────────────────────────────────────────────────────
-FROM node:22-slim AS runtime
+FROM node:20-slim AS runtime
 
 WORKDIR /app
 
diff --git a/package.json b/package.json
index 6a200dc2a..6d2d70fd3 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "setRole": "ts-node -P tsconfig.script.json scripts/firebase-admin/setRole.ts"
   },
   "engines": {
-    "node": "^22",
+    "node": "^20",
     "yarn": "^1.22.19"
   },
   "browserslist": {
@@ -167,7 +167,7 @@
     "@types/luxon": "^2.0.9",
     "@types/marked": "^4.0.8",
     "@types/mustache": "^4.2.1",
-    "@types/node": "^22.0.0",
+    "@types/node": "^20.0.0",
     "@types/papaparse": "^5.3.5",
     "@types/react": "^18.2.43",
     "@types/react-copy-to-clipboard": "^5.0.4",
diff --git a/yarn.lock b/yarn.lock
index 45806217e..03bd7ee1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5014,10 +5014,10 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^22.0.0":
-  version "22.20.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.20.1.tgz#84e7cdf63cdaa20c134aa317ccc901aa21e16f0e"
-  integrity sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==
+"@types/node@^20.0.0":
+  version "20.19.41"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.19.41.tgz#bb266a1e0aaa2f4537d14ae8ebf238dd9ca73ce6"
+  integrity sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==
   dependencies:
     undici-types "~6.21.0"