chore: sync in-progress work across marketing, admin, API and tests

Snapshot of uncommitted work that had accumulated in the tree alongside
the Turnstile changes:

- marketing pages, SEO helpers (lib/seo.ts, lib/marketing/) and
  structured data
- admin billing actions and a per-user portfolio view, plus an admin
  error boundary
- rate limiting (lib/rate-limit.ts) applied across the /api/v1 surface
- CSP and proxy adjustments, accounting/webhook lib updates
- Playwright config and an e2e/unit test suite
- next bumped to ^16.3.4 with the lockfile regenerated
- generated AGENTS.md / CLAUDE.md

Authored by other sessions working in this tree; committed here so the
Turnstile work could be pushed without leaving the tree dirty.
Typecheck passes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/(admin)/admin/error.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useEffect } from "react"
+import Link from "next/link"
+import { AlertTriangle, RefreshCw, ArrowLeft } from "lucide-react"
+
+/**
+ * Error boundary for the admin surface. Without this, a failure in any admin
+ * page (a Stripe call, an aggregate query) fell through to app/global-error.tsx,
+ * which replaces the whole document and drops the admin chrome — leaving no way
+ * back except editing the URL.
+ *
+ * Admin pages read across every account, so the message is shown verbatim: the
+ * audience is staff, and the detail is what makes the failure diagnosable.
+ */
+export default function AdminError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error("[admin]", error)
+  }, [error])
+
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center rounded-xl border border-red-500/10 bg-red-500/5 text-center">
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10">
+        <AlertTriangle className="h-6 w-6 text-red-400" />
+      </div>
+      <h2 className="text-base font-semibold text-white">Admin page failed to load</h2>
+      <p className="mt-2 max-w-md text-sm text-white/50">
+        {error.message || "An unexpected error occurred."}
+      </p>
+      {error.digest && (
+        <p className="mt-1 font-mono text-xs text-white/25">digest: {error.digest}</p>
+      )}
+      <div className="mt-6 flex items-center gap-3">
+        <button
+          onClick={reset}
+          className="flex items-center gap-2 rounded-lg border border-white/10 px-4 py-2 text-sm text-white/60 transition hover:border-white/20 hover:text-white"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Try again
+        </button>
+        <Link
+          href="/admin"
+          className="flex items-center gap-2 rounded-lg border border-white/10 px-4 py-2 text-sm text-white/60 transition hover:border-white/20 hover:text-white"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to overview
+        </Link>
+      </div>
+    </div>
+  )
+}

app/(admin)/admin/users/[id]/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link"
 import { notFound } from "next/navigation"
 import {
   Building2,
@@ -11,12 +12,15 @@ import {
   ShieldAlert,
   Ban,
   Activity,
+  Table2,
 } from "lucide-react"
 import { getUserDetail } from "@/lib/db/admin-queries"
 import { requireAdmin } from "@/lib/session"
 import { BackButton } from "@/components/ui/back-button"
 import { CopyButton } from "@/components/shared/copy-button"
 import { UserActions } from "@/components/admin/user-actions"
+import { BillingActions } from "@/components/admin/billing-actions"
+import { getSubscriptionSummary, listUserCharges } from "@/lib/admin/billing"
 import { formatDate, initials, cn } from "@/lib/utils"
 
 export const dynamic = "force-dynamic"
@@ -49,6 +53,15 @@ export default async function AdminUserDetailPage({
 
   if (!detail) notFound()
 
+  // Live billing state, read straight from Stripe rather than the mirrored
+  // columns — the admin needs the truth, not our cached copy of it. Both helpers
+  // return empty/null rather than throwing when Stripe is unreachable or unset,
+  // so the page still renders without billing.
+  const [subscription, charges] = await Promise.all([
+    getSubscriptionSummary(id),
+    listUserCharges(id, 10),
+  ])
+
   const { profile, account, counts, recentActivity } = detail
   const isSelf = me.id === profile.id
   const planKey = profile.plan ?? "starter"
@@ -107,6 +120,15 @@ export default async function AdminUserDetailPage({
       </div>
 
       {/* Counts grid */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-white">Portfolio</h2>
+        <Link
+          href={`/admin/users/${profile.id}/portfolio`}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/20 hover:text-white"
+        >
+          <Table2 className="h-3.5 w-3.5" /> View records
+        </Link>
+      </div>
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
         {COUNT_META.map(({ key, label, icon: Icon }) => (
           <div
@@ -197,6 +219,9 @@ export default async function AdminUserDetailPage({
               </ul>
             )}
           </div>
+
+          {/* Payments + refunds */}
+          <BillingActions userId={profile.id} charges={charges} />
         </div>
 
         {/* Right: actions */}
@@ -207,6 +232,8 @@ export default async function AdminUserDetailPage({
             currentPlan={planKey}
             banned={!!account?.banned}
             isSelf={isSelf}
+            isAdminRole={account?.role === "admin"}
+            subscription={subscription}
           />
         </div>
       </div>

app/(admin)/admin/users/[id]/portfolio/page.tsx

@@ -0,0 +1,293 @@
+import { notFound } from "next/navigation"
+import { Building2, Home, Users as UsersIcon, FileText, CreditCard, Wrench } from "lucide-react"
+import { getUserDetail, getUserPortfolio } from "@/lib/db/admin-queries"
+import { requireAdmin } from "@/lib/session"
+import { BackButton } from "@/components/ui/back-button"
+import { formatCurrency, formatDate, cn } from "@/lib/utils"
+
+export const dynamic = "force-dynamic"
+
+/**
+ * Read-only support view of one user's actual records.
+ *
+ * This exists so an admin can answer "what does this customer actually have?"
+ * WITHOUT impersonating them — impersonation mutates the user's session and
+ * lands in their own activity trail, which is a heavy tool for a support lookup.
+ * Nothing on this page mutates anything.
+ */
+
+const STATUS_TONE: Record<string, string> = {
+  active: "bg-emerald-500/10 text-emerald-300",
+  occupied: "bg-emerald-500/10 text-emerald-300",
+  paid: "bg-emerald-500/10 text-emerald-300",
+  vacant: "bg-white/[0.06] text-white/50",
+  pending: "bg-amber-500/10 text-amber-300",
+  open: "bg-amber-500/10 text-amber-300",
+  in_progress: "bg-sky-500/10 text-sky-300",
+  overdue: "bg-red-500/10 text-red-300",
+  expired: "bg-red-500/10 text-red-300",
+}
+
+function Pill({ value }: { value: string | null | undefined }) {
+  if (!value) return <span className="text-white/25">—</span>
+  return (
+    <span
+      className={cn(
+        "rounded-md px-1.5 py-0.5 text-xs font-medium",
+        STATUS_TONE[value] ?? "bg-white/[0.06] text-white/50"
+      )}
+    >
+      {value.replace(/_/g, " ")}
+    </span>
+  )
+}
+
+function Section({
+  title,
+  icon: Icon,
+  count,
+  shown,
+  children,
+}: {
+  title: string
+  icon: typeof Building2
+  count: number
+  shown: number
+  children: React.ReactNode
+}) {
+  return (
+    <div className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2 text-white">
+          <Icon className="h-4 w-4 text-white/40" />
+          <h2 className="text-sm font-semibold">{title}</h2>
+          <span className="text-xs text-white/30">({count})</span>
+        </div>
+        {shown < count && (
+          <span className="text-xs text-white/30">showing first {shown}</span>
+        )}
+      </div>
+      {count === 0 ? (
+        <p className="text-xs text-white/30">None.</p>
+      ) : (
+        <div className="overflow-x-auto">{children}</div>
+      )}
+    </div>
+  )
+}
+
+const TH = "pb-2 text-left text-xs font-medium text-white/40"
+const TD = "py-2.5 text-sm text-white/70"
+
+export default async function AdminUserPortfolioPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  await requireAdmin()
+
+  const [detail, portfolio] = await Promise.all([getUserDetail(id), getUserPortfolio(id)])
+  if (!detail) notFound()
+
+  const { profile, counts } = detail
+  const unitsByProperty = new Map<string, number>()
+  for (const u of portfolio.units) {
+    unitsByProperty.set(u.property_id ?? "", (unitsByProperty.get(u.property_id ?? "") ?? 0) + 1)
+  }
+
+  return (
+    <div className="space-y-6">
+      <BackButton href={`/admin/users/${id}`} label="Back to user" />
+
+      <div>
+        <h1 className="text-xl font-bold text-white">Portfolio</h1>
+        <p className="mt-0.5 text-sm text-white/40">
+          Read-only view of {profile.email}&apos;s records. Nothing here can be edited.
+        </p>
+      </div>
+
+      <Section
+        title="Properties"
+        icon={Building2}
+        count={counts.propertyCount}
+        shown={portfolio.properties.length}
+      >
+        <table className="w-full min-w-[560px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Name</th>
+              <th className={TH}>Address</th>
+              <th className={TH}>Units</th>
+              <th className={TH}>Added</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.properties.map((p) => (
+              <tr key={p.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={cn(TD, "text-white")}>{p.name}</td>
+                <td className={TD}>
+                  {[p.address_line1, p.city, p.state].filter(Boolean).join(", ") || "—"}
+                </td>
+                <td className={TD}>{unitsByProperty.get(p.id) ?? p.total_units ?? 0}</td>
+                <td className={TD}>{p.created_at ? formatDate(p.created_at) : "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section title="Units" icon={Home} count={counts.unitCount} shown={portfolio.units.length}>
+        <table className="w-full min-w-[420px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Unit</th>
+              <th className={TH}>Rent</th>
+              <th className={TH}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.units.map((u) => (
+              <tr key={u.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={cn(TD, "text-white")}>{u.unit_number}</td>
+                <td className={TD}>
+                  {u.rent_amount != null ? formatCurrency(Number(u.rent_amount)) : "—"}
+                </td>
+                <td className={TD}>
+                  <Pill value={u.status} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section
+        title="Tenants"
+        icon={UsersIcon}
+        count={counts.tenantCount}
+        shown={portfolio.tenants.length}
+      >
+        <table className="w-full min-w-[600px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Name</th>
+              <th className={TH}>Email</th>
+              <th className={TH}>Phone</th>
+              <th className={TH}>Status</th>
+              <th className={TH}>Moved in</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.tenants.map((t) => (
+              <tr key={t.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={cn(TD, "text-white")}>
+                  {t.first_name} {t.last_name}
+                </td>
+                <td className={TD}>{t.email ?? "—"}</td>
+                <td className={TD}>{t.phone ?? "—"}</td>
+                <td className={TD}>
+                  <Pill value={t.status} />
+                </td>
+                <td className={TD}>{t.move_in_date ? formatDate(t.move_in_date) : "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section
+        title="Leases"
+        icon={FileText}
+        count={counts.leaseCount}
+        shown={portfolio.leases.length}
+      >
+        <table className="w-full min-w-[480px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Term</th>
+              <th className={TH}>Rent</th>
+              <th className={TH}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.leases.map((l) => (
+              <tr key={l.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={TD}>
+                  {l.lease_start ? formatDate(l.lease_start) : "—"} →{" "}
+                  {l.lease_end ? formatDate(l.lease_end) : "—"}
+                </td>
+                <td className={TD}>
+                  {l.rent_amount != null ? formatCurrency(Number(l.rent_amount)) : "—"}
+                </td>
+                <td className={TD}>
+                  <Pill value={l.status} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section
+        title="Recent rent payments"
+        icon={CreditCard}
+        count={counts.paymentCount}
+        shown={portfolio.payments.length}
+      >
+        <table className="w-full min-w-[480px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Due</th>
+              <th className={TH}>Amount</th>
+              <th className={TH}>Paid</th>
+              <th className={TH}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.payments.map((p) => (
+              <tr key={p.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={TD}>{p.due_date ? formatDate(p.due_date) : "—"}</td>
+                <td className={cn(TD, "text-white")}>{formatCurrency(Number(p.amount))}</td>
+                <td className={TD}>{p.paid_date ? formatDate(p.paid_date) : "—"}</td>
+                <td className={TD}>
+                  <Pill value={p.status} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section
+        title="Recent maintenance"
+        icon={Wrench}
+        count={counts.maintenanceCount}
+        shown={portfolio.maintenance.length}
+      >
+        <table className="w-full min-w-[480px]">
+          <thead>
+            <tr className="border-b border-white/[0.06]">
+              <th className={TH}>Title</th>
+              <th className={TH}>Priority</th>
+              <th className={TH}>Status</th>
+              <th className={TH}>Opened</th>
+            </tr>
+          </thead>
+          <tbody>
+            {portfolio.maintenance.map((m) => (
+              <tr key={m.id} className="border-b border-white/[0.04] last:border-0">
+                <td className={cn(TD, "text-white")}>{m.title}</td>
+                <td className={TD}>{m.priority ?? "—"}</td>
+                <td className={TD}>
+                  <Pill value={m.status} />
+                </td>
+                <td className={TD}>{m.created_at ? formatDate(m.created_at) : "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+    </div>
+  )
+}