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 01/17] 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 02/17] 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 03/17] 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 04/17] 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 05/17] 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 06/17] 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 07/17] 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 08/17] 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 09/17] 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 10/17] =?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 11/17] 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 12/17] 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 13/17] 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 14/17] =?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 15/17] 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 16/17] 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 17/17] =?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}`)