diff --git a/apps/admin/src/app/globals.css b/apps/admin/src/app/globals.css
index d973710..48648ef 100644
--- a/apps/admin/src/app/globals.css
+++ b/apps/admin/src/app/globals.css
@@ -68,3 +68,8 @@
 .leaflet-container {
   font-family: var(--font-body);
 }
+
+/* The toast's success icon sits on moss in admin.css; an error must not read as a success. */
+.toast-wrap.error .ico {
+  background: var(--danger);
+}
diff --git a/apps/admin/src/components/map/leaflet-map.test.tsx b/apps/admin/src/components/map/leaflet-map.test.tsx
index 208446a..b6e9de2 100644
--- a/apps/admin/src/components/map/leaflet-map.test.tsx
+++ b/apps/admin/src/components/map/leaflet-map.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import L from "leaflet"
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
@@ -147,6 +148,84 @@ describe("LeafletMap", () => {
     expect(onPinTap).toHaveBeenCalledWith(PINS[2])
   })
 
+  it("updates a pin's tooltip when its title changes under the same id", () => {
+    const { container, rerender } = render(<LeafletMap pins={PINS} />)
+    hoverAndReadTooltip(container, markerIcons(container)[0]!)
+
+    rerender(<LeafletMap pins={[{ ...PINS[0]!, tip: "Filled pothole" }, ...PINS.slice(1)]} />)
+    const tip = hoverAndReadTooltip(container, markerIcons(container)[0]!)
+    expect(tip?.textContent).toBe("Filled pothole · Los Angeles")
+  })
+
+  it("binds a tooltip when a pin gains a title and drops it when the title goes", () => {
+    const bare: MapPin = { id: "x", lat: 34, lng: -118 }
+    const { container, rerender } = render(<LeafletMap pins={[bare]} />)
+
+    rerender(<LeafletMap pins={[{ ...bare, tip: "Now titled" }]} />)
+    expect(hoverAndReadTooltip(container, markerIcons(container)[0]!)?.textContent).toBe("Now titled")
+
+    fireEvent.mouseOut(markerIcons(container)[0]!)
+    rerender(<LeafletMap pins={[bare]} />)
+    expect(hoverAndReadTooltip(container, markerIcons(container)[0]!)).toBeNull()
+  })
+
+  it("hands onPinTap the pin's latest data after a refetch", () => {
+    const onPinTap = vi.fn()
+    const { container, rerender } = render(<LeafletMap pins={PINS} onPinTap={onPinTap} />)
+    const refetched: MapPin = { ...PINS[2]!, tip: "Park cleanup (moved)" }
+
+    rerender(<LeafletMap pins={[PINS[0]!, PINS[1]!, refetched]} onPinTap={onPinTap} />)
+    fireEvent.click(markerIcons(container)[2]!)
+    expect(onPinTap).toHaveBeenCalledWith(refetched)
+  })
+
+  it("names each interactive marker by its tooltip text", () => {
+    const { container } = render(<LeafletMap pins={PINS} />)
+
+    const icons = markerIcons(container)
+    expect(icons.map((el) => el.getAttribute("role"))).toEqual(["button", "button", "button"])
+    expect(icons.map((el) => el.getAttribute("aria-label"))).toEqual([
+      "Deep pothole · Los Angeles",
+      "Tagged wall",
+      "Park cleanup",
+    ])
+  })
+
+  it("renames a marker when its title changes", () => {
+    const { container, rerender } = render(<LeafletMap pins={PINS} />)
+
+    rerender(<LeafletMap pins={[{ ...PINS[0]!, tip: "Filled pothole" }]} />)
+    expect(markerIcons(container)[0]).toHaveAttribute("aria-label", "Filled pothole · Los Angeles")
+  })
+
+  it("keeps markers of a non-interactive map out of the tab order", () => {
+    const { container } = render(<LeafletMap pins={PINS} interactive={false} />)
+
+    for (const el of markerIcons(container)) {
+      expect(el).not.toHaveAttribute("tabindex")
+      expect(el).not.toHaveAttribute("role")
+    }
+  })
+
+  it.each(["{Enter}", " "])("activates a focused marker with %j like a tap", async (key) => {
+    const onPinTap = vi.fn()
+    const { container } = render(<LeafletMap pins={PINS} onPinTap={onPinTap} />)
+
+    const icon = markerIcons(container)[1]!
+    icon.focus()
+    await userEvent.setup().keyboard(key)
+    expect(onPinTap).toHaveBeenCalledTimes(1)
+    expect(onPinTap).toHaveBeenCalledWith(PINS[1])
+  })
+
+  it("moves the view when the center or zoom props change", () => {
+    const setView = vi.spyOn(L.Map.prototype, "setView")
+    const { rerender } = render(<LeafletMap pins={PINS} center={[34, -118]} zoom={10} />)
+
+    rerender(<LeafletMap pins={PINS} center={[40.7, -74]} zoom={12} />)
+    expect(setView).toHaveBeenLastCalledWith([40.7, -74], 12)
+  })
+
   it("removes the Leaflet map on unmount", () => {
     const remove = vi.spyOn(L.Map.prototype, "remove")
     const { unmount } = render(<LeafletMap pins={PINS} />)
diff --git a/apps/admin/src/components/map/leaflet-map.tsx b/apps/admin/src/components/map/leaflet-map.tsx
index 33d5176..f3e9895 100644
--- a/apps/admin/src/components/map/leaflet-map.tsx
+++ b/apps/admin/src/components/map/leaflet-map.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import L from "leaflet"
 
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { withCartoKey } from "@/lib/carto"
 import { CATEGORY_GLYPHS } from "@/lib/category"
 
@@ -119,6 +120,22 @@ function tooltipNode(text: string): HTMLElement {
   return el
 }
 
+const TOOLTIP_OPTIONS: L.TooltipOptions = { direction: "top", offset: [0, -30], className: "pi-map-tip" }
+
+// A keyboard marker is a role=button tab stop, and its divIcon has no text of its own to name it.
+function labelMarker(marker: L.Marker, text: string | null): void {
+  const el = marker.getElement()
+  if (!el) return
+  if (text) el.setAttribute("aria-label", text)
+  else el.removeAttribute("aria-label")
+}
+
+function syncTooltip(marker: L.Marker, text: string | null): void {
+  if (!text) marker.unbindTooltip()
+  else if (marker.getTooltip()) marker.setTooltipContent(tooltipNode(text))
+  else marker.bindTooltip(tooltipNode(text), TOOLTIP_OPTIONS)
+}
+
 export interface LeafletMapProps {
   pins?: MapPin[]
   center?: [number, number]
@@ -146,11 +163,16 @@ export function LeafletMap({
   const mapRef = React.useRef<L.Map | null>(null)
   const tileRef = React.useRef<L.TileLayer | null>(null)
   const markersRef = React.useRef<Record<string, L.Marker>>({})
-  // Per-id memo of the last-rendered visual descriptor (category|draft|kind|active) and position, so
-  // reconcile can skip the expensive DivIcon rebuild + DOM teardown (setIcon) and the setLatLng call
-  // when nothing visible actually changed for that marker. Without this, a single activeId change
-  // re-icons and DOM-replaces ALL N markers; with it, only the de-activated + newly-active markers do.
-  const renderRef = React.useRef<Record<string, { key: string; lat: number; lng: number }>>({})
+  // Per-id memo of the last-rendered visual descriptor (category|draft|kind|active), tooltip text and
+  // position, so reconcile can skip the expensive DivIcon rebuild + DOM teardown (setIcon), the tooltip
+  // rebind and the setLatLng call when nothing visible actually changed for that marker. Without this, a
+  // single activeId change re-icons and DOM-replaces ALL N markers; with it, only the de-activated +
+  // newly-active markers do.
+  const renderRef = React.useRef<
+    Record<string, { key: string; text: string | null; lat: number; lng: number }>
+  >({})
+  // The latest pin per id: marker handlers are bound once, and a refetch replaces the pin objects.
+  const pinsRef = React.useRef<Record<string, MapPin>>({})
   // Keep the latest onPinTap without re-running the create effect.
   const onPinTapRef = React.useRef(onPinTap)
   onPinTapRef.current = onPinTap
@@ -197,11 +219,17 @@ export function LeafletMap({
       mapRef.current = null
       markersRef.current = {}
       renderRef.current = {}
+      pinsRef.current = {}
     }
     // Intentionally run once on mount.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const [centerLat, centerLng] = center
+  React.useEffect(() => {
+    mapRef.current?.setView([centerLat, centerLng], zoom)
+  }, [centerLat, centerLng, zoom])
+
   // Swap tiles when tint changes.
   React.useEffect(() => {
     const map = mapRef.current
@@ -230,43 +258,52 @@ export function LeafletMap({
         markersRef.current[id]?.remove()
         delete markersRef.current[id]
         delete renderRef.current[id]
+        delete pinsRef.current[id]
       }
     })
 
     pins.forEach((p) => {
+      pinsRef.current[p.id] = p
       const existing = markersRef.current[p.id]
       const active = String(p.id) === String(activeId)
       // One cheap string capturing everything pinIcon() depends on. Equal key => identical DivIcon, so
       // we can skip rebuilding the HTML/SVG and the setIcon DOM teardown entirely.
       const key = `${p.category}|${p.draft}|${p.kind}|${active}`
+      const text = tooltipText(p)
       if (existing) {
         const prev = renderRef.current[p.id]
         // Re-icon only when the visual descriptor changed (e.g. this pin just gained/lost active).
         if (!prev || prev.key !== key) {
           existing.setIcon(pinIcon(p.category, { active, draft: p.draft, kind: p.kind }))
         }
+        if (!prev || prev.text !== text) {
+          syncTooltip(existing, text)
+          if (interactive) labelMarker(existing, text)
+        }
         // Re-position only when the coordinates actually moved.
         if (!prev || prev.lat !== p.lat || prev.lng !== p.lng) {
           existing.setLatLng([p.lat, p.lng])
         }
-        renderRef.current[p.id] = { key, lat: p.lat, lng: p.lng }
       } else {
         const icon = pinIcon(p.category, { active, draft: p.draft, kind: p.kind })
-        const m = L.marker([p.lat, p.lng], { icon, riseOnHover: true }).addTo(map)
-        const tip = tooltipText(p)
-        if (tip) {
-          m.bindTooltip(tooltipNode(tip), {
-            direction: "top",
-            offset: [0, -30],
-            className: "pi-map-tip",
-          })
+        const m = L.marker([p.lat, p.lng], { icon, riseOnHover: true, keyboard: interactive }).addTo(map)
+        syncTooltip(m, text)
+        if (interactive) labelMarker(m, text)
+        const tap = () => {
+          const latest = pinsRef.current[p.id]
+          if (latest) onPinTapRef.current?.(latest)
         }
-        m.on("click", () => onPinTapRef.current?.(p))
+        m.on("click", tap)
+        m.on("keydown", (e: L.LeafletKeyboardEvent) => {
+          if (!isKeyboardActivationKey(e.originalEvent.key)) return
+          e.originalEvent.preventDefault()
+          tap()
+        })
         markersRef.current[p.id] = m
-        renderRef.current[p.id] = { key, lat: p.lat, lng: p.lng }
       }
+      renderRef.current[p.id] = { key, text, lat: p.lat, lng: p.lng }
     })
-  }, [pins, activeId])
+  }, [pins, activeId, interactive])
 
   return <div ref={elRef} className="pi-map-canvas" />
 }
diff --git a/apps/admin/src/components/map/live-map.test.tsx b/apps/admin/src/components/map/live-map.test.tsx
new file mode 100644
index 0000000..73aa9a5
--- /dev/null
+++ b/apps/admin/src/components/map/live-map.test.tsx
@@ -0,0 +1,126 @@
+import { act, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { HomeMapPin } from "@civfix/shared"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import type { LeafletMapProps } from "@/components/map/leaflet-map"
+import { LiveMap } from "@/components/map/live-map"
+import { queryKeys } from "@/lib/query"
+import { apiMock } from "@/test/api-mock"
+import { renderWithQuery } from "@/test/render"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+vi.mock("@/components/map/leaflet-map", () => ({
+  LeafletMap: ({ pins = [], onPinTap }: LeafletMapProps) => (
+    <div>
+      {pins.map((p) => (
+        <button key={p.id} type="button" onClick={() => onPinTap?.(p)}>
+          {`pin ${p.id}`}
+        </button>
+      ))}
+    </div>
+  ),
+}))
+
+function reportPin(over: Partial<HomeMapPin> = {}): HomeMapPin {
+  return {
+    refType: "report",
+    id: "r1",
+    lat: 34,
+    lng: -118,
+    category: "graffiti",
+    status: "published",
+    flagged: false,
+    title: "Tagged wall",
+    place: "Echo Park",
+    ...over,
+  }
+}
+
+function eventPin(over: Partial<HomeMapPin> = {}): HomeMapPin {
+  return {
+    refType: "event",
+    id: "e1",
+    lat: 34.1,
+    lng: -118.1,
+    category: null,
+    eventKind: "cleanup",
+    status: "upcoming",
+    flagged: false,
+    title: "Park cleanup",
+    place: "Elysian Park",
+    ...over,
+  }
+}
+
+async function renderMap(pins: HomeMapPin[]) {
+  apiMock.adminHomeMap.mockResolvedValue({ pins })
+  const user = userEvent.setup()
+  const view = renderWithQuery(<LiveMap />)
+  return { user, ...view }
+}
+
+async function tap(user: ReturnType<typeof userEvent.setup>, id: string): Promise<void> {
+  await user.click(await screen.findByRole("button", { name: `pin ${id}` }))
+}
+
+describe("LiveMap active card", () => {
+  it("titles an untitled report by its category", async () => {
+    const { user } = await renderMap([reportPin({ title: "" })])
+    await tap(user, "report-r1")
+
+    expect(screen.getByText("Graffiti report")).toBeInTheDocument()
+  })
+
+  it("titles an untitled report without a category as a report", async () => {
+    const { user } = await renderMap([reportPin({ title: "", category: null })])
+    await tap(user, "report-r1")
+
+    expect(screen.getByText("Report")).toBeInTheDocument()
+  })
+
+  it.each([
+    ["cleanup", "Cleanup event"],
+    ["other_volunteer", "Other Volunteer event"],
+  ] as const)("labels a %s event pin by its kind", async (eventKind, label) => {
+    const { user } = await renderMap([eventPin({ eventKind })])
+    await tap(user, "event-e1")
+
+    expect(screen.getByText(label)).toBeInTheDocument()
+  })
+
+  it("follows the tapped pin's data when the feed refetches", async () => {
+    const { user, client } = await renderMap([reportPin()])
+    await tap(user, "report-r1")
+    expect(screen.getByText("Tagged wall")).toBeInTheDocument()
+
+    act(() => client.setQueryData(queryKeys.home.map, { pins: [reportPin({ title: "Wall repainted" })] }))
+    expect(await screen.findByText("Wall repainted")).toBeInTheDocument()
+    expect(screen.queryByText("Tagged wall")).toBeNull()
+  })
+
+  it("drops the card when the tapped pin leaves the feed", async () => {
+    const { user, client } = await renderMap([reportPin(), eventPin()])
+    await tap(user, "report-r1")
+
+    act(() => client.setQueryData(queryKeys.home.map, { pins: [eventPin()] }))
+    await waitFor(() => expect(screen.queryByText("Tagged wall")).toBeNull())
+    expect(screen.queryByRole("button", { name: /Open report/ })).toBeNull()
+  })
+
+  it("announces the card politely and closes it from its Close button", async () => {
+    const { user } = await renderMap([reportPin()])
+    await tap(user, "report-r1")
+
+    const card = screen.getByText("Tagged wall").closest(".map-active-card") as HTMLElement
+    expect(card.closest('[aria-live="polite"]')).not.toBeNull()
+
+    await user.click(within(card).getByRole("button", { name: "Close" }))
+    expect(screen.queryByText("Tagged wall")).toBeNull()
+  })
+})
diff --git a/apps/admin/src/components/map/live-map.tsx b/apps/admin/src/components/map/live-map.tsx
index c74577d..990809a 100644
--- a/apps/admin/src/components/map/live-map.tsx
+++ b/apps/admin/src/components/map/live-map.tsx
@@ -7,7 +7,8 @@ import type { HomeMapPin } from "@civfix/shared"
 import { Icons } from "@/components/icons"
 import { useHomeMap } from "@/hooks/use-admin-home"
 import { useNav } from "@/store/ui-store"
-import { EVENT_KIND_PIN_KIND } from "@/lib/event-kind"
+import { categoryLabel } from "@/lib/category"
+import { EVENT_KIND_PIN_KIND, eventKindLabel } from "@/lib/event-kind"
 import {
   BUCKET_VIEW,
   reportBucketOf,
@@ -16,35 +17,44 @@ import {
 } from "@/lib/report-status"
 import type { MapPin, MapTint } from "@/components/map/leaflet-map"
 
-
 const LeafletMap = dynamic(() => import("@/components/map/leaflet-map").then((m) => m.LeafletMap), {
   ssr: false,
   loading: () => <div className="pi-map-canvas" aria-busy="true" />,
 })
 
-function toMapPin(p: HomeMapPin): MapPin & {
+// The feed sends an empty title for an untitled report.
+function pinTitle(p: HomeMapPin): string {
+  if (p.title) return p.title
+  return p.category ? `${categoryLabel(p.category)} report` : "Report"
+}
+
+export function toMapPin(p: HomeMapPin): MapPin & {
   refType: HomeMapPin["refType"]
   refId: string
+  eventKind: NonNullable<HomeMapPin["eventKind"]> | null
   status: HomeMapPin["status"]
   flagged: boolean
   title: string
 } {
   const isEvent = p.refType === "event"
   const needs = !isEvent && reportNeedsAttention(p.status, p.flagged)
+  const eventKind = isEvent ? (p.eventKind ?? "cleanup") : null
+  const title = pinTitle(p)
   return {
     id: `${p.refType}-${p.id}`,
     refType: p.refType,
     refId: p.id,
+    eventKind,
     lat: p.lat,
     lng: p.lng,
     category: isEvent ? "event" : p.category,
     draft: needs,
-    kind: isEvent ? EVENT_KIND_PIN_KIND[p.eventKind ?? "cleanup"] : null,
-    tip: p.title,
+    kind: eventKind ? EVENT_KIND_PIN_KIND[eventKind] : null,
+    tip: title,
     place: p.place,
     status: p.status,
     flagged: p.flagged,
-    title: p.title,
+    title,
   }
 }
 
@@ -57,8 +67,11 @@ const BUCKET_TONE: Record<ReportBucket, string> = {
   removed: "var(--bloom-700)",
 }
 
-function statusTone(m: ActivePin): { color: string; label: string } {
-  if (m.refType === "event") return { color: "var(--sun-700)", label: "Cleanup event" }
+export function statusTone(m: ActivePin): { color: string; label: string } {
+  if (m.eventKind === "other_volunteer") {
+    return { color: "var(--moss-700)", label: `${eventKindLabel(m.eventKind)} event` }
+  }
+  if (m.eventKind) return { color: "var(--sun-700)", label: `${eventKindLabel(m.eventKind)} event` }
   if (m.flagged) return { color: "var(--bloom-700)", label: "Flagged" }
   const bucket = reportBucketOf(m.status)
   return { color: BUCKET_TONE[bucket], label: BUCKET_VIEW[bucket].label }
@@ -67,10 +80,12 @@ function statusTone(m: ActivePin): { color: string; label: string } {
 export function LiveMap({ tint = "voyager" }: { tint?: MapTint }) {
   const nav = useNav()
   const q = useHomeMap()
-  const [active, setActive] = React.useState<ActivePin | null>(null)
+  const [activeId, setActiveId] = React.useState<string | null>(null)
 
   const pins = React.useMemo(() => q.data?.pins ?? [], [q.data])
   const markers = React.useMemo(() => pins.map(toMapPin), [pins])
+  const active = markers.find((m) => m.id === activeId) ?? null
+  const tone = active ? statusTone(active) : null
   const reportCount = pins.filter((p) => p.refType === "report").length
   const eventCount = pins.filter((p) => p.refType === "event").length
   const needsAttention = pins.filter(
@@ -100,7 +115,7 @@ export function LiveMap({ tint = "voyager" }: { tint?: MapTint }) {
           pins={markers}
           tint={tint}
           activeId={active ? active.id : null}
-          onPinTap={(p) => setActive(p as ActivePin)}
+          onPinTap={(p) => setActiveId(p.id)}
         />
         <div className="map-legend">
           <span className="swatch">
@@ -134,32 +149,38 @@ export function LiveMap({ tint = "voyager" }: { tint?: MapTint }) {
           </div>
         )}
 
-        {active &&
-          (() => {
-            const tone = statusTone(active)
-            return (
-              <div className="map-active-card">
-                <div
-                  className={`mac-pin ${
-                    active.refType === "event" ? "is-event" : active.draft ? "is-needs" : "is-routed"
-                  }`}
-                >
-                  <Icons.Pin size={15} />
-                </div>
-                <div className="mac-body">
-                  <div className="mac-title">{active.title}</div>
-                  <div className="mac-sub">
-                    <span>{active.place}</span>
-                    <span className="sep">·</span>
-                    <span style={{ color: tone.color, fontWeight: 700 }}>{tone.label}</span>
-                  </div>
+        <div aria-live="polite">
+          {active && tone && (
+            <div className="map-active-card">
+              <div
+                className={`mac-pin ${
+                  active.refType === "event" ? "is-event" : active.draft ? "is-needs" : "is-routed"
+                }`}
+              >
+                <Icons.Pin size={15} />
+              </div>
+              <div className="mac-body">
+                <div className="mac-title">{active.title}</div>
+                <div className="mac-sub">
+                  <span>{active.place}</span>
+                  <span className="sep">·</span>
+                  <span style={{ color: tone.color, fontWeight: 700 }}>{tone.label}</span>
                 </div>
-                <button className="btn sm primary" onClick={openActive}>
-                  Open {active.refType === "event" ? "event" : "report"} →
-                </button>
               </div>
-            )
-          })()}
+              <button className="btn sm primary" onClick={openActive}>
+                Open {active.refType === "event" ? "event" : "report"} →
+              </button>
+              <button
+                type="button"
+                className="btn sm ghost"
+                aria-label="Close"
+                onClick={() => setActiveId(null)}
+              >
+                <Icons.X size={14} />
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </section>
   )
diff --git a/apps/admin/src/components/providers.test.tsx b/apps/admin/src/components/providers.test.tsx
index 20a4010..e6b5d92 100644
--- a/apps/admin/src/components/providers.test.tsx
+++ b/apps/admin/src/components/providers.test.tsx
@@ -4,8 +4,16 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 import { Providers } from "@/components/providers"
 
 vi.mock("@/components/auth/auth-hydrator", () => ({ AuthHydrator: () => null }))
+const session = vi.hoisted(() => ({
+  current: { isOperator: true, operator: null, status: "authenticated" } as {
+    isOperator: boolean
+    operator: null
+    status: string
+  },
+}))
+
 vi.mock("@/hooks/use-admin-auth", () => ({
-  useOperatorSession: () => ({ isOperator: true, operator: null, status: "authenticated" }),
+  useOperatorSession: () => session.current,
 }))
 
 function Crash(): never {
@@ -18,6 +26,7 @@ beforeEach(() => {
 
 afterEach(() => {
   vi.restoreAllMocks()
+  session.current = { isOperator: true, operator: null, status: "authenticated" }
 })
 
 describe("Providers", () => {
@@ -45,4 +54,17 @@ describe("Providers", () => {
     expect(alert).not.toHaveTextContent("shell exploded")
     expect(within(alert).getByRole("button", { name: "Reload" })).toBeInTheDocument()
   })
+
+  it("shows a signing-out screen rather than the sign-in gate while signing out", () => {
+    session.current = { isOperator: false, operator: null, status: "signing-out" }
+    render(
+      <Providers>
+        <p>Dashboard content</p>
+      </Providers>,
+    )
+
+    expect(screen.getByRole("status")).toHaveTextContent("Signing out...")
+    expect(screen.queryByText("Dashboard content")).toBeNull()
+    expect(screen.queryByRole("button", { name: "Try again" })).toBeNull()
+  })
 })
diff --git a/apps/admin/src/components/providers.tsx b/apps/admin/src/components/providers.tsx
index ade6b43..ef1b2a5 100644
--- a/apps/admin/src/components/providers.tsx
+++ b/apps/admin/src/components/providers.tsx
@@ -35,6 +35,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
 /**
  * The operator gate. Only an authenticated operator session renders the dashboard:
  *  - idle / loading  -> a minimal loading screen (Access exchange in flight, or pre-hydration).
+ *  - signing-out     -> the same screen, saying so, until the Access logout navigation lands.
  *  - not an operator -> the full-page Cloudflare Access gate (anonymous: authenticating + manual
  *                       continue; forbidden: not-authorized message).
  *  - operator        -> the dashboard shell (children).
@@ -43,7 +44,11 @@ function AuthGate({ children }: { children: React.ReactNode }) {
   const { isOperator, status } = useOperatorSession()
 
   if (status === "idle" || status === "loading") {
-    return <BootScreen />
+    return <BootScreen label="Loading operations..." />
+  }
+
+  if (status === "signing-out") {
+    return <BootScreen label="Signing out..." />
   }
 
   if (!isOperator) {
@@ -53,8 +58,8 @@ function AuthGate({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }
 
-/** Minimal centered loading screen shown while the session check is in flight. */
-function BootScreen() {
+/** Minimal centered screen shown while the session is being established or ended. */
+function BootScreen({ label }: { label: string }) {
   return (
     <div className="op-boot" role="status" aria-live="polite">
       <span className="op-boot-bug" aria-hidden="true">
@@ -63,7 +68,7 @@ function BootScreen() {
         <img src="/ds/pinit-bug.svg" alt="" width={30} height={36} />
       </span>
       <span className="op-boot-spin" aria-hidden="true" />
-      <span className="op-boot-text">Loading operations...</span>
+      <span className="op-boot-text">{label}</span>
     </div>
   )
 }
diff --git a/apps/admin/src/components/shared/data-states.test.tsx b/apps/admin/src/components/shared/data-states.test.tsx
new file mode 100644
index 0000000..f7b6a55
--- /dev/null
+++ b/apps/admin/src/components/shared/data-states.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react"
+import { AppError, ErrorCode } from "@civfix/shared"
+import { describe, expect, it } from "vitest"
+
+import { ErrorState } from "@/components/shared/data-states"
+
+describe("ErrorState", () => {
+  it("shows the API's own message", () => {
+    render(<ErrorState error={new AppError(ErrorCode.FORBIDDEN, "Operators only")} />)
+    expect(screen.getByRole("alert")).toHaveTextContent("Operators only")
+  })
+
+  it("explains a failed request in plain words instead of the browser's fetch text", () => {
+    render(<ErrorState error={new TypeError("Failed to fetch")} />)
+    const alert = screen.getByRole("alert")
+    expect(alert).toHaveTextContent("Could not reach the server. Check your connection and try again.")
+    expect(alert).not.toHaveTextContent("Failed to fetch")
+  })
+
+  it("shows the generic copy for a thrown non-error value", () => {
+    render(<ErrorState error="boom" />)
+    expect(screen.getByRole("alert")).toHaveTextContent("Something went wrong. Please try again.")
+  })
+
+  it("lets an explicit message replace the error's", () => {
+    render(<ErrorState error={new TypeError("Failed to fetch")} message="Custom copy" />)
+    expect(screen.getByRole("alert")).toHaveTextContent("Custom copy")
+  })
+})
diff --git a/apps/admin/src/components/shared/data-states.tsx b/apps/admin/src/components/shared/data-states.tsx
index 1780627..2434909 100644
--- a/apps/admin/src/components/shared/data-states.tsx
+++ b/apps/admin/src/components/shared/data-states.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { toAppError } from "@/lib/api"
+import { errorMessage } from "@/lib/error-messages"
 
 /**
  * Standard loading / error / empty state components for data-bound views. The prototype had NONE of
@@ -30,8 +30,7 @@ export function LoadingState({ label = "Loading..." }: { label?: string }) {
 
 /**
  * Error panel with an optional retry and an optional primary action beside it (the error boundary's
- * Reload). Surfaces the normalized AppError message unless `message` replaces it; when the backend is
- * down this renders the friendly INTERNAL message rather than crashing.
+ * Reload). Shows the error's operator copy from errorMessage unless `message` replaces it.
  */
 export function ErrorState({
   error,
@@ -46,7 +45,7 @@ export function ErrorState({
   message?: string
   action?: { label: string; onClick: () => void }
 }) {
-  const errorText = React.useMemo(() => toAppError(error).message, [error])
+  const errorText = React.useMemo(() => errorMessage(error), [error])
   const retry = onRetry && (
     <button type="button" className="btn sm" onClick={onRetry}>
       Try again
diff --git a/apps/admin/src/components/shared/dialog.tsx b/apps/admin/src/components/shared/dialog.tsx
index fe10657..dc874c9 100644
--- a/apps/admin/src/components/shared/dialog.tsx
+++ b/apps/admin/src/components/shared/dialog.tsx
@@ -38,9 +38,20 @@ interface DialogState {
   close: () => void
 }
 
-const useDialogStore = create<DialogState>((set) => ({
+function dismissed(req: DialogRequest): void {
+  if (req.kind === "prompt") req.resolve(null)
+  else req.resolve(false)
+}
+
+const useDialogStore = create<DialogState>((set, get) => ({
   current: null,
-  open: (req) => set({ current: req }),
+  // One dialog shows at a time; a replaced request answers as dismissed so its caller's await (and the
+  // busy flag it clears in finally) never hangs.
+  open: (req) => {
+    const replaced = get().current
+    if (replaced) dismissed(replaced)
+    set({ current: req })
+  },
   close: () => set({ current: null }),
 }))
 
@@ -85,20 +96,26 @@ export function DialogHost() {
   const [value, setValue] = React.useState("")
   const modalRef = useModalFocus<HTMLDivElement>(current !== null)
   const cancelRef = React.useRef<HTMLButtonElement>(null)
+  const fieldRef = React.useRef<HTMLTextAreaElement>(null)
+  const titleId = React.useId()
+  const bodyId = React.useId()
+  const fieldId = React.useId()
 
   React.useEffect(() => {
     if (current?.kind === "prompt") setValue(current.defaultValue ?? "")
   }, [current])
 
-  // Runs after useModalFocus's effect, so that hook has already recorded the opener to restore.
+  // Runs after useModalFocus's effect, so that hook has already recorded the opener to restore; an
+  // autoFocus on the field would land first and be recorded as the opener instead.
   React.useEffect(() => {
-    if (current?.kind === "confirm") cancelRef.current?.focus()
+    if (!current) return
+    if (current.kind === "prompt") fieldRef.current?.focus()
+    else cancelRef.current?.focus()
   }, [current])
 
   const cancel = React.useCallback(() => {
     if (!current) return
-    if (current.kind === "prompt") current.resolve(null)
-    else current.resolve(false)
+    dismissed(current)
     close()
   }, [current, close])
 
@@ -149,21 +166,33 @@ export function DialogHost() {
         className="modal dialog-modal"
         role="dialog"
         aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={current.body ? bodyId : undefined}
       >
         <div className="modal-head">
-          <h3>{current.title}</h3>
+          <h3 id={titleId}>{current.title}</h3>
           <button className="closebtn" onClick={cancel} aria-label="Close">
             <Icons.X size={16} />
           </button>
         </div>
         <div className="dialog-body">
-          {current.body && <p className="dialog-text">{current.body}</p>}
+          {current.body && (
+            <p id={bodyId} className="dialog-text">
+              {current.body}
+            </p>
+          )}
           {current.kind === "prompt" && (
             <>
-              {current.label && <label className="dialog-label">{current.label}</label>}
+              {current.label && (
+                <label className="dialog-label" htmlFor={fieldId}>
+                  {current.label}
+                </label>
+              )}
               <textarea
+                ref={fieldRef}
+                id={fieldId}
+                aria-labelledby={current.label ? undefined : titleId}
                 className="dialog-input"
-                autoFocus
                 rows={3}
                 value={value}
                 placeholder={current.placeholder}
diff --git a/apps/admin/src/components/shared/modal-accessibility.test.tsx b/apps/admin/src/components/shared/modal-accessibility.test.tsx
index 053438b..1229aea 100644
--- a/apps/admin/src/components/shared/modal-accessibility.test.tsx
+++ b/apps/admin/src/components/shared/modal-accessibility.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react"
+import { act, fireEvent, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { afterEach, describe, expect, it } from "vitest"
 
@@ -413,9 +413,7 @@ describe("DialogHost", () => {
     expect(screen.getByRole("textbox")).toHaveValue("duplicate of an open report")
   })
 
-  // The textarea's autoFocus runs in React's commit phase, before useModalFocus's effect records the
-  // element to restore, so the hook captures the textarea itself and has nothing live to return to.
-  it("drops focus to the body instead of restoring the opener when a prompt closes (current behavior)", async () => {
+  it("restores focus to the opener when a prompt closes", async () => {
     const { user, opener } = renderDialog(() => {
       void promptDialog({ title: "Reason" })
     })
@@ -424,8 +422,70 @@ describe("DialogHost", () => {
 
     await user.click(screen.getByRole("button", { name: "Cancel" }))
     expect(screen.queryByRole("dialog")).toBeNull()
-    expect(opener).not.toHaveFocus()
-    expect(document.activeElement).toBe(document.body)
+    expect(opener).toHaveFocus()
+  })
+
+  it("names a confirm by its title and describes it by its body", async () => {
+    const { user, opener } = renderDialog(
+      () => void confirmDialog({ title: "Remove report?", body: "It leaves the public map." }),
+    )
+    await user.click(opener)
+
+    const dialog = screen.getByRole("dialog", { name: "Remove report?" })
+    expect(dialog).toHaveAccessibleDescription("It leaves the public map.")
+  })
+
+  it("adds no description to a confirm without a body", async () => {
+    const { user, opener } = renderDialog(() => void confirmDialog({ title: "Remove report?" }))
+    await user.click(opener)
+
+    expect(screen.getByRole("dialog", { name: "Remove report?" })).not.toHaveAttribute("aria-describedby")
+  })
+
+  it("names the prompt field by its label", async () => {
+    const { user, opener } = renderDialog(
+      () => void promptDialog({ title: "Reject report", label: "Reason for the reporter" }),
+    )
+    await user.click(opener)
+
+    expect(screen.getByRole("dialog", { name: "Reject report" })).toBeInTheDocument()
+    expect(screen.getByLabelText("Reason for the reporter")).toBe(screen.getByRole("textbox"))
+  })
+
+  it("names an unlabelled prompt field by the dialog title", async () => {
+    const { user, opener } = renderDialog(() => void promptDialog({ title: "Reason" }))
+    await user.click(opener)
+
+    expect(screen.getByRole("textbox", { name: "Reason" })).toBeInTheDocument()
+  })
+
+  it("settles a pending confirm as cancelled when a second dialog replaces it", async () => {
+    let first: Promise<boolean> | undefined
+    const { user, opener } = renderDialog(() => {
+      first = confirmDialog({ title: "Remove report?" })
+    })
+    await user.click(opener)
+
+    let second: Promise<string | null> | undefined
+    act(() => {
+      second = promptDialog({ title: "Reason" })
+    })
+    await expect(first).resolves.toBe(false)
+    expect(screen.getByRole("dialog", { name: "Reason" })).toBeInTheDocument()
+
+    await user.keyboard("{Escape}")
+    await expect(second).resolves.toBeNull()
+  })
+
+  it("settles a pending prompt as cancelled when a second dialog replaces it", async () => {
+    let first: Promise<string | null> | undefined
+    const { user, opener } = renderDialog(() => {
+      first = promptDialog({ title: "Reason" })
+    })
+    await user.click(opener)
+
+    act(() => void confirmDialog({ title: "Remove report?" }))
+    await expect(first).resolves.toBeNull()
   })
 
   it("restores focus to the opener when closed with Escape", async () => {
diff --git a/apps/admin/src/components/shared/page-primitives.test.tsx b/apps/admin/src/components/shared/page-primitives.test.tsx
new file mode 100644
index 0000000..8fac018
--- /dev/null
+++ b/apps/admin/src/components/shared/page-primitives.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+
+import { FilterChips } from "@/components/shared/page-primitives"
+
+const OPTIONS = ["All", { value: "open", label: "Open", count: 3 }]
+
+describe("FilterChips", () => {
+  it("exposes which chip is selected as a pressed toggle button", () => {
+    render(<FilterChips options={OPTIONS} value="open" onChange={() => undefined} />)
+
+    expect(screen.getByRole("button", { name: "Open 3", pressed: true })).toHaveAttribute("type", "button")
+    expect(screen.getByRole("button", { name: "All", pressed: false })).toHaveAttribute("type", "button")
+  })
+
+  it("groups the chips under the given label", () => {
+    render(<FilterChips options={OPTIONS} value="All" onChange={() => undefined} ariaLabel="Status" />)
+
+    const group = screen.getByRole("group", { name: "Status" })
+    expect(group).toContainElement(screen.getByRole("button", { name: "All", pressed: true }))
+  })
+
+  it("reports the chosen value", async () => {
+    const onChange = vi.fn()
+    render(<FilterChips options={OPTIONS} value="All" onChange={onChange} />)
+
+    await userEvent.setup().click(screen.getByRole("button", { name: "Open 3" }))
+    expect(onChange).toHaveBeenCalledWith("open")
+  })
+})
diff --git a/apps/admin/src/components/shared/page-primitives.tsx b/apps/admin/src/components/shared/page-primitives.tsx
index 25a8d2e..f9e5067 100644
--- a/apps/admin/src/components/shared/page-primitives.tsx
+++ b/apps/admin/src/components/shared/page-primitives.tsx
@@ -37,18 +37,21 @@ export function PageHead({
 /** One option in a FilterChips control: either a bare string or a { value, label, count }. */
 export type FilterOption = string | { value: string; label: string; count?: React.ReactNode }
 
-/** Segmented filter control (`.filter-chips`). */
+/** Segmented filter control (`.filter-chips`): one pressed toggle per option. */
 export function FilterChips({
   options,
   value,
   onChange,
+  ariaLabel,
 }: {
   options: FilterOption[]
   value: string
   onChange: (value: string) => void
+  /** Names the group for assistive tech, e.g. "Status". */
+  ariaLabel?: string
 }) {
   return (
-    <div className="filter-chips">
+    <div className="filter-chips" role="group" aria-label={ariaLabel}>
       {options.map((o) => {
         const val = typeof o === "string" ? o : o.value
         const label = typeof o === "string" ? o : o.label
@@ -56,7 +59,9 @@ export function FilterChips({
         return (
           <button
             key={val}
+            type="button"
             className={`fchip ${value === val ? "active" : ""}`}
+            aria-pressed={value === val}
             onClick={() => onChange(val)}
           >
             {label}
diff --git a/apps/admin/src/components/shell/app-shell.test.tsx b/apps/admin/src/components/shell/app-shell.test.tsx
index aa19d2f..7d81950 100644
--- a/apps/admin/src/components/shell/app-shell.test.tsx
+++ b/apps/admin/src/components/shell/app-shell.test.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event"
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 import { AppShell } from "@/components/shell/app-shell"
+import { SOURCE } from "@/lib/source"
 import { useUiStore } from "@/store/ui-store"
 import { renderWithQuery } from "@/test/render"
 
@@ -69,3 +70,22 @@ describe("AppShell error containment", () => {
     expect(screen.queryByRole("alert")).toBeNull()
   })
 })
+
+describe("AppShell source link", () => {
+  it("links the AGPL source from every section page", async () => {
+    useUiStore.setState({ page: "reports", focusId: null })
+    renderWithQuery(<AppShell />)
+
+    const link = await screen.findByRole("link", { name: "Source code (AGPL-3.0)" })
+    expect(link).toHaveAttribute("href", SOURCE.url)
+    expect(link).toHaveAttribute("target", "_blank")
+    expect(link).toHaveAttribute("rel", "noreferrer noopener")
+  })
+
+  it("leaves the home page to its own footer", async () => {
+    renderWithQuery(<AppShell />)
+
+    expect(await screen.findByRole("heading", { name: "Home stub" })).toBeInTheDocument()
+    expect(screen.queryByRole("link", { name: "Source code (AGPL-3.0)" })).toBeNull()
+  })
+})
diff --git a/apps/admin/src/components/shell/app-shell.tsx b/apps/admin/src/components/shell/app-shell.tsx
index 2321827..7ff3618 100644
--- a/apps/admin/src/components/shell/app-shell.tsx
+++ b/apps/admin/src/components/shell/app-shell.tsx
@@ -5,6 +5,7 @@ import * as React from "react"
 import { BackBar } from "@/components/shell/back-bar"
 import { ErrorBoundary } from "@/components/shell/error-boundary"
 import { shellEscapeGoesHome } from "@/components/shell/escape-owner"
+import { SourceFooter } from "@/components/shell/source-footer"
 import { Toast } from "@/components/shell/toast"
 import { DialogHost } from "@/components/shared/dialog"
 import { LightboxHost } from "@/components/shared/lightbox"
@@ -52,6 +53,7 @@ export function AppShell() {
             <PageComponent {...pageProps} />
           </React.Suspense>
         </ErrorBoundary>
+        {!isHome && <SourceFooter />}
       </main>
 
       <Toast />
diff --git a/apps/admin/src/components/shell/source-footer.tsx b/apps/admin/src/components/shell/source-footer.tsx
new file mode 100644
index 0000000..54cb9ee
--- /dev/null
+++ b/apps/admin/src/components/shell/source-footer.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+import { SOURCE } from "@/lib/source"
+
+/** The AGPL-3.0 section 13 source offer: a link to the repository at the deployed commit. */
+export function SourceFooter() {
+  return (
+    <footer className="hub-foot">
+      <a href={SOURCE.url} target="_blank" rel="noreferrer noopener">
+        <Icons.ExternalLink size={12} /> Source code (AGPL-3.0)
+      </a>
+      {SOURCE.commit ? <span className="hub-foot-commit">{SOURCE.commit.slice(0, 7)}</span> : null}
+    </footer>
+  )
+}
diff --git a/apps/admin/src/components/shell/toast.test.tsx b/apps/admin/src/components/shell/toast.test.tsx
new file mode 100644
index 0000000..0c40eb3
--- /dev/null
+++ b/apps/admin/src/components/shell/toast.test.tsx
@@ -0,0 +1,147 @@
+import { act, render, screen, within } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { ERROR_TOAST_MS, SUCCESS_TOAST_MS, Toast } from "@/components/shell/toast"
+import { useUiStore } from "@/store/ui-store"
+import { startFakeTimersWithUser } from "@/test/fake-timers"
+
+function show(text: string, tone?: "ok" | "error"): void {
+  act(() => useUiStore.getState().showToast(text, tone))
+}
+
+afterEach(() => {
+  act(() => useUiStore.setState({ toast: null }))
+})
+
+describe("Toast", () => {
+  it("keeps an empty status live region mounted while no toast is shown", () => {
+    render(<Toast />)
+    expect(screen.getByRole("status")).toBeEmptyDOMElement()
+    expect(screen.queryByRole("button", { name: "Dismiss" })).toBeNull()
+  })
+
+  it("announces the toast text through the same live region", () => {
+    render(<Toast />)
+    const region = screen.getByRole("status")
+    show("Report removed")
+    expect(screen.getByRole("status")).toBe(region)
+    expect(region).toHaveTextContent("Report removed")
+  })
+
+  it("dismisses from a real, focusable Dismiss button, by keyboard too", async () => {
+    const user = startFakeTimersWithUser()
+    render(<Toast />)
+    show("Saved")
+
+    const dismiss = screen.getByRole("button", { name: "Dismiss" })
+    expect(dismiss).toHaveAttribute("type", "button")
+    dismiss.focus()
+    expect(dismiss).toHaveFocus()
+    await user.keyboard("{Enter}")
+    expect(useUiStore.getState().toast).toBeNull()
+    expect(screen.queryByRole("button", { name: "Dismiss" })).toBeNull()
+  })
+
+  it("marks an error toast with the error tone", () => {
+    const { container } = render(<Toast />)
+    const toast = container.firstElementChild
+    show("Could not save", "error")
+    expect(toast).toHaveClass("error")
+    show("Saved")
+    expect(toast).not.toHaveClass("error")
+  })
+
+  it("announces only the message: the Dismiss button sits outside the status region", () => {
+    render(<Toast />)
+    show("Report removed")
+    const region = screen.getByRole("status")
+    expect(region).toHaveTextContent(/^Report removed$/)
+    expect(within(region).queryByRole("button")).toBeNull()
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeInTheDocument()
+  })
+
+  it("returns focus to where the operator was after a keyboard dismiss", async () => {
+    const user = startFakeTimersWithUser()
+    render(
+      <>
+        <button type="button">Save changes</button>
+        <Toast />
+      </>,
+    )
+    const before = screen.getByRole("button", { name: "Save changes" })
+    before.focus()
+    show("Saved")
+
+    await user.tab()
+    expect(screen.getByRole("button", { name: "Dismiss" })).toHaveFocus()
+    await user.keyboard("{Enter}")
+
+    expect(useUiStore.getState().toast).toBeNull()
+    expect(before).toHaveFocus()
+  })
+
+  it("still dismisses when the element focused before the toast is gone", async () => {
+    const user = startFakeTimersWithUser()
+    function Page({ withSave }: { withSave: boolean }) {
+      return (
+        <>
+          {withSave && <button type="button">Save changes</button>}
+          <Toast />
+        </>
+      )
+    }
+    const { rerender } = render(<Page withSave />)
+    screen.getByRole("button", { name: "Save changes" }).focus()
+    show("Saved")
+    await user.tab()
+    rerender(<Page withSave={false} />)
+    expect(screen.getByRole("button", { name: "Dismiss" })).toHaveFocus()
+
+    await user.keyboard("{Enter}")
+
+    expect(useUiStore.getState().toast).toBeNull()
+    expect(screen.queryByRole("button", { name: "Save changes" })).toBeNull()
+  })
+
+  it("auto-dismisses a success toast after the success duration", () => {
+    vi.useFakeTimers()
+    try {
+      render(<Toast />)
+      show("Saved")
+      act(() => vi.advanceTimersByTime(SUCCESS_TOAST_MS - 1))
+      expect(screen.getByRole("status")).toHaveTextContent("Saved")
+      act(() => vi.advanceTimersByTime(1))
+      expect(useUiStore.getState().toast).toBeNull()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it("keeps an error toast up longer than a success toast", () => {
+    vi.useFakeTimers()
+    try {
+      render(<Toast />)
+      show("Could not save", "error")
+      act(() => vi.advanceTimersByTime(SUCCESS_TOAST_MS))
+      expect(screen.getByRole("status")).toHaveTextContent("Could not save")
+      act(() => vi.advanceTimersByTime(ERROR_TOAST_MS - SUCCESS_TOAST_MS))
+      expect(useUiStore.getState().toast).toBeNull()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it("holds the toast while the pointer rests on it", async () => {
+    const user = startFakeTimersWithUser()
+    render(<Toast />)
+    show("Saved")
+
+    await user.hover(screen.getByRole("status"))
+    act(() => vi.advanceTimersByTime(SUCCESS_TOAST_MS * 3))
+    expect(screen.getByRole("status")).toHaveTextContent("Saved")
+
+    await user.unhover(screen.getByRole("status"))
+    act(() => vi.advanceTimersByTime(SUCCESS_TOAST_MS))
+    expect(useUiStore.getState().toast).toBeNull()
+  })
+})
diff --git a/apps/admin/src/components/shell/toast.tsx b/apps/admin/src/components/shell/toast.tsx
index 019136f..8092d1c 100644
--- a/apps/admin/src/components/shell/toast.tsx
+++ b/apps/admin/src/components/shell/toast.tsx
@@ -3,34 +3,87 @@
 import * as React from "react"
 
 import { Icons } from "@/components/icons"
-import { useUiStore } from "@/store/ui-store"
+import { useUiStore, type ToastTone } from "@/store/ui-store"
+
+export const SUCCESS_TOAST_MS = 2600
+// An error needs reading and often acting on, so it outlasts a confirmation.
+export const ERROR_TOAST_MS = 8000
+
+const TOAST_MS: Record<ToastTone, number> = { ok: SUCCESS_TOAST_MS, error: ERROR_TOAST_MS }
 
 /**
- * Global ephemeral confirmation toast (ported from app.jsx). Driven by the UI store instead of the
- * prototype's `window.__toast`. Fire it via the `useToast()` hook after a successful write. Auto-
- * dismisses after 2600ms. Toasts confirm destructive writes (remove/cancel/ban/reject) that have no
- * real undo, so the trailing affordance is a dismiss "X" — not an "Undo" that would imply the action
- * could be reverted.
+ * Global ephemeral toast, driven by the UI store: `useToast()` after a successful write, and the query
+ * client's mutation cache for every failed write. Toasts confirm destructive writes that have no real
+ * undo, so the trailing affordance is a dismiss "X", not an "Undo" that would imply a revert.
+ *
+ * The status region stays mounted so screen readers announce each new toast, and holds only the message:
+ * the dismiss button sits beside it, so "Dismiss" is not read as part of the announcement, and exists
+ * only while a toast is shown, so the hidden toast leaves no tab stop behind.
  */
 export function Toast() {
   const toast = useUiStore((s) => s.toast)
   const dismiss = useUiStore((s) => s.dismissToast)
+  const [hovered, setHovered] = React.useState(false)
+  const [focused, setFocused] = React.useState(false)
+  const held = hovered || focused
+  const dismissButton = React.useRef<HTMLButtonElement>(null)
+  const focusBeforeToast = React.useRef<HTMLElement | null>(null)
 
   React.useEffect(() => {
-    if (!toast) return
-    const t = setTimeout(dismiss, 2600)
+    if (!toast || held) return
+    const t = setTimeout(dismiss, TOAST_MS[toast.tone])
     return () => clearTimeout(t)
-  }, [toast, dismiss])
+  }, [toast, held, dismiss])
+
+  const onFocus = (e: React.FocusEvent<HTMLDivElement>) => {
+    setFocused(true)
+    if (e.currentTarget.contains(e.relatedTarget)) return
+    focusBeforeToast.current = e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null
+  }
+
+  // The button unmounts with the toast, so no mouseleave or blur follows the click that removed it, and
+  // focus on it would fall to the body: hand it back to where the operator was before the toast.
+  const close = () => {
+    const hadFocus = dismissButton.current === document.activeElement
+    const returnTo = focusBeforeToast.current
+    focusBeforeToast.current = null
+    setHovered(false)
+    setFocused(false)
+    dismiss()
+    if (hadFocus && returnTo?.isConnected) returnTo.focus()
+  }
+
+  const tone = toast?.tone ?? "ok"
 
   return (
-    <div className={`toast-wrap ${toast ? "open" : ""}`}>
-      <span className="ico">
-        <Icons.Check size={11} />
-      </span>
-      <span>{toast?.text}</span>
-      <span className="undo" role="button" aria-label="Dismiss" onClick={dismiss}>
-        <Icons.X size={13} />
-      </span>
+    <div
+      className={`toast-wrap ${toast ? "open" : ""} ${tone === "error" ? "error" : ""}`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onFocus={onFocus}
+      onBlur={() => setFocused(false)}
+    >
+      <div role="status" className="toast-msg">
+        {toast && (
+          <>
+            <span className="ico" aria-hidden="true">
+              {tone === "error" ? <Icons.AlertTriangle size={11} /> : <Icons.Check size={11} />}
+            </span>
+            <span>{toast.text}</span>
+          </>
+        )}
+      </div>
+      {toast && (
+        <button
+          ref={dismissButton}
+          type="button"
+          className="undo"
+          aria-label="Dismiss"
+          onClick={close}
+        >
+          <Icons.X size={13} />
+        </button>
+      )}
     </div>
   )
 }
diff --git a/apps/admin/src/features/analytics/analytics-charts.test.tsx b/apps/admin/src/features/analytics/analytics-charts.test.tsx
new file mode 100644
index 0000000..9a8d9b1
--- /dev/null
+++ b/apps/admin/src/features/analytics/analytics-charts.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { Spark } from "@/features/analytics/analytics-charts"
+
+describe("Spark", () => {
+  it("names the trend for assistive tech", () => {
+    render(<Spark values={[1, 4, 2]} label="Pins per week, last 3 weeks: 1, 4, 2" />)
+
+    expect(screen.getByRole("img", { name: "Pins per week, last 3 weeks: 1, 4, 2" })).toBeInTheDocument()
+  })
+
+  it("colours the bars through the hue class so a hue without its own custom property still paints", () => {
+    render(<Spark values={[1, 4, 2]} hue="slate" label="trend" />)
+
+    const spark = screen.getByRole("img", { name: "trend" })
+    expect(spark).toHaveClass("hue-slate")
+    const bars = [...spark.querySelectorAll<HTMLElement>(".hub-spark-bar")]
+    expect(bars).toHaveLength(3)
+    for (const bar of bars) expect(bar.style.getPropertyValue("--sh")).toBe("var(--hue)")
+  })
+})
diff --git a/apps/admin/src/features/analytics/analytics-charts.tsx b/apps/admin/src/features/analytics/analytics-charts.tsx
index 4a8f7fa..514e657 100644
--- a/apps/admin/src/features/analytics/analytics-charts.tsx
+++ b/apps/admin/src/features/analytics/analytics-charts.tsx
@@ -31,11 +31,19 @@ export function BarChart({ values, labels }: { values: number[]; labels?: string
 }
 
 /** A compact sparkline (the design's hub spark): min/max-normalized bars, last bar accented. */
-export function Spark({ values, hue = "moss" }: { values: number[]; hue?: string }) {
+export function Spark({
+  values,
+  label,
+  hue = "moss",
+}: {
+  values: number[]
+  label: string
+  hue?: string
+}) {
   const max = Math.max(...values)
   const min = Math.min(...values)
   return (
-    <div className="hub-spark">
+    <div className={`hub-spark hue-${hue}`} role="img" aria-label={label}>
       {values.map((v, i) => (
         <span
           // eslint-disable-next-line react/no-array-index-key
@@ -44,7 +52,7 @@ export function Spark({ values, hue = "moss" }: { values: number[]; hue?: string
           style={
             {
               height: `${10 + ((v - min) / (max - min || 1)) * 88}%`,
-              "--sh": `var(--${hue})`,
+              "--sh": "var(--hue)",
             } as React.CSSProperties
           }
         />
diff --git a/apps/admin/src/features/analytics/analytics-page.test.tsx b/apps/admin/src/features/analytics/analytics-page.test.tsx
index 8b5cc20..802c422 100644
--- a/apps/admin/src/features/analytics/analytics-page.test.tsx
+++ b/apps/admin/src/features/analytics/analytics-page.test.tsx
@@ -149,6 +149,10 @@ function readBlob(blob: Blob): Promise<string> {
 }
 
 function renderPage() {
+  return renderWithQuery(<AnalyticsPage focusId={null} />)
+}
+
+function renderPageWithToast() {
   return renderWithQuery(
     <>
       <AnalyticsPage focusId={null} />
@@ -294,7 +298,7 @@ describe("AnalyticsPage", () => {
     apiMock.analyticsTopContributors.mockResolvedValue({ rows: [] } satisfies AnalyticsTopContributorsResponse)
     renderPage()
 
-    await waitFor(() => expect(screen.getAllByText("No data yet")).toHaveLength(CARD_TITLES.length))
+    await waitFor(() => expect(screen.getAllByText("No data yet")).toHaveLength(CARD_TITLES.length + 1))
     for (const title of CARD_TITLES) {
       const c = card(title)
       expect(within(c).getByText("No data yet")).toBeInTheDocument()
@@ -303,10 +307,23 @@ describe("AnalyticsPage", () => {
     expect(screen.queryByText("events this month")).not.toBeInTheDocument()
     expect(screen.queryByRole("status")).not.toBeInTheDocument()
     expect(screen.queryByRole("alert")).not.toBeInTheDocument()
-    // An empty KPI list still counts as loaded, so Export is enabled with an empty strip.
+    // An empty KPI list still counts as loaded, so Export stays enabled.
     expect(screen.getByRole("button", { name: "Export" })).toBeEnabled()
   })
 
+  it("shows the empty state in the KPI strip when every KPI is hidden", async () => {
+    mockPopulated()
+    apiMock.analyticsKpis.mockResolvedValue({
+      kpis: [{ label: "Avg. route time", num: 0, delta: "Phase 3", dir: "flat" }],
+    } satisfies AnalyticsKpisResponse)
+    renderPage()
+
+    await within(await findCard("Top jurisdictions")).findByText("Oakland")
+    const empty = await screen.findByText("No data yet")
+    expect(empty.closest("section")).toBeNull()
+    expect(screen.getByText("Nothing to show for this window.")).toBeInTheDocument()
+  })
+
   it("renders the KPI strip: hides routing KPIs, shows resolved as a rounded percent, counts with separators", async () => {
     mockPopulated()
     renderPage()
@@ -383,6 +400,25 @@ describe("AnalyticsPage", () => {
     expect(within(c).getByText(/^\u2014$/)).toBeInTheDocument()
   })
 
+  it("rounds resolution times to whole hours before splitting them into days", async () => {
+    mockPopulated()
+    apiMock.analyticsResolutionByCategory.mockResolvedValue({
+      rows: [
+        { cat: "trash", hours: 23.6 },
+        { cat: "graffiti", hours: 47.6 },
+        { cat: "hazard", hours: 25.2 },
+      ],
+    } satisfies AnalyticsResolutionByCategoryResponse)
+    renderPage()
+
+    const c = await findCard("Median resolution time")
+    expect(await within(c).findByText("1d")).toBeInTheDocument()
+    expect(within(c).getByText("2d")).toBeInTheDocument()
+    expect(within(c).getByText("1d 1h")).toBeInTheDocument()
+    expect(within(c).queryByText("24h")).not.toBeInTheDocument()
+    expect(within(c).queryByText("1d 24h")).not.toBeInTheDocument()
+  })
+
   it("renders cleanup events stats and hides bags collected when there are none", async () => {
     mockPopulated()
     renderPage()
@@ -423,6 +459,32 @@ describe("AnalyticsPage", () => {
     expect(within(c).getByText("20%")).toBeInTheDocument()
   })
 
+  it("exposes the ranking tables with table, row, column header and cell roles", async () => {
+    mockPopulated()
+    renderPage()
+
+    const jurisdictions = await within(await findCard("Top jurisdictions")).findByRole("table", {
+      name: "Top jurisdictions",
+    })
+    expect(
+      within(jurisdictions)
+        .getAllByRole("columnheader")
+        .map((h) => h.textContent),
+    ).toEqual(["Jurisdiction", "Pins", "Resolved"])
+    expect(within(jurisdictions).getAllByRole("row")).toHaveLength(3)
+    expect(within(jurisdictions).getByRole("cell", { name: "Oakland" })).toBeInTheDocument()
+    expect(within(jurisdictions).getByRole("cell", { name: "64%" })).toBeInTheDocument()
+
+    const contributors = within(card("Top contributors")).getByRole("table", { name: "Top contributors" })
+    expect(
+      within(contributors)
+        .getAllByRole("columnheader")
+        .map((h) => h.textContent),
+    ).toEqual(["Neighbor", "Reports", "Cleanups"])
+    expect(within(contributors).getAllByRole("row")).toHaveLength(3)
+    expect(within(contributors).getByRole("cell", { name: "17" })).toBeInTheDocument()
+  })
+
   it("renders the top contributors table with initials and a placeholder for a missing city", async () => {
     mockPopulated()
     renderPage()
@@ -441,6 +503,45 @@ describe("AnalyticsPage", () => {
     expect(within(c).getByText("9")).toBeInTheDocument()
   })
 
+  it("keeps Export disabled until every exported section has loaded", async () => {
+    mockPopulated()
+    let resolveCategories: (value: AnalyticsByCategoryResponse) => void = () => {}
+    apiMock.analyticsByCategory.mockReturnValue(
+      new Promise((resolve) => {
+        resolveCategories = resolve
+      }),
+    )
+    let resolveEvents: (value: AnalyticsEventsResponse) => void = () => {}
+    apiMock.analyticsEvents.mockReturnValue(
+      new Promise((resolve) => {
+        resolveEvents = resolve
+      }),
+    )
+    renderPage()
+
+    expect(await screen.findByText("1,234")).toBeInTheDocument()
+    const exportButton = screen.getByRole("button", { name: "Export" })
+    expect(exportButton).toBeDisabled()
+
+    resolveCategories(byCategory)
+    expect(await within(card("By category")).findByText("Trash")).toBeInTheDocument()
+    expect(exportButton).toBeDisabled()
+
+    resolveEvents(events)
+    await waitFor(() => expect(exportButton).toBeEnabled())
+  })
+
+  it("keeps Export disabled while a section it exports has failed", async () => {
+    mockPopulated()
+    apiMock.analyticsByCategory.mockRejectedValue(new Error("categories offline"))
+    renderPage()
+
+    expect(await within(await findCard("By category")).findByText("categories offline")).toBeInTheDocument()
+    expect(screen.getByText("1,234")).toBeInTheDocument()
+    await within(card("Cleanup events")).findByText("events this month")
+    expect(screen.getByRole("button", { name: "Export" })).toBeDisabled()
+  })
+
   it("exports the KPIs, event totals and category shares as a CSV download and confirms with a toast", async () => {
     mockPopulated()
     const blobs: Blob[] = []
@@ -461,7 +562,7 @@ describe("AnalyticsPage", () => {
     vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (this: HTMLAnchorElement) {
       downloads.push(this.download)
     })
-    renderPage()
+    renderPageWithToast()
 
     const exportButton = screen.getByRole("button", { name: "Export" })
     expect(exportButton).toBeDisabled()
@@ -473,12 +574,12 @@ describe("AnalyticsPage", () => {
     expect(downloads).toEqual(["civfix-analytics.csv"])
     expect(blobs).toHaveLength(1)
     const blob = blobs[0] as Blob
-    expect(blob.type).toBe("text/csv")
+    expect(blob.type).toBe("text/csv;charset=utf-8")
     expect(await readBlob(blob)).toBe(
       [
         '"Metric","Value","Change"',
         '"Pins dropped","1234","\'+12% vs last month"',
-        '"Resolved","41.6","\'-2 pts"',
+        '"Resolved","42%","\'-2 pts"',
         '"Cleanups planned","7","no change"',
         '"Cleanup events (month)","4",""',
         '"Volunteers","1250",""',
diff --git a/apps/admin/src/features/analytics/analytics-page.tsx b/apps/admin/src/features/analytics/analytics-page.tsx
index 2fc8a18..4ece72b 100644
--- a/apps/admin/src/features/analytics/analytics-page.tsx
+++ b/apps/admin/src/features/analytics/analytics-page.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import {
   REPORT_CATEGORY_LABELS,
+  type AnalyticsKpi,
   type AnalyticsKpisResponse,
 } from "@civfix/shared"
 
@@ -40,12 +41,21 @@ function initials(name: string): string {
 function humanizeHours(hours: number): string {
   if (hours <= 0) return "—"
   if (hours < 1) return "<1h"
-  if (hours < 24) return `${Math.round(hours)}h`
-  const days = Math.floor(hours / 24)
-  const rem = Math.round(hours % 24)
+  const total = Math.round(hours)
+  if (total < 24) return `${total}h`
+  const days = Math.floor(total / 24)
+  const rem = total % 24
   return rem > 0 ? `${days}d ${rem}h` : `${days}d`
 }
 
+function visibleKpis(kpis: AnalyticsKpisResponse): AnalyticsKpi[] {
+  return kpis.kpis.filter((k) => !/route/i.test(k.label))
+}
+
+function isPercentKpi(k: AnalyticsKpi): boolean {
+  return /resolved/i.test(k.label)
+}
+
 function AnalyticsCard<T>({
   title,
   meta,
@@ -102,23 +112,18 @@ function KpiDelta({ delta, dir }: { delta: string; dir: "up" | "down" | "flat" }
   )
 }
 
-function KpiStrip({ kpis }: { kpis: AnalyticsKpisResponse }) {
+function KpiStrip({ kpis }: { kpis: AnalyticsKpi[] }) {
   return (
     <>
-      {kpis.kpis
-        .filter((k) => !/route/i.test(k.label))
-        .map((k) => {
-          const isPct = /resolved/i.test(k.label)
-          return (
-            <div key={k.label} className="statcell">
-              <div className="statcell-label">{k.label}</div>
-              <div className="statcell-num">
-                {isPct ? `${Math.round(k.num)}%` : k.num.toLocaleString()}
-              </div>
-              <KpiDelta delta={k.delta} dir={k.dir} />
-            </div>
-          )
-        })}
+      {kpis.map((k) => (
+        <div key={k.label} className="statcell">
+          <div className="statcell-label">{k.label}</div>
+          <div className="statcell-num">
+            {isPercentKpi(k) ? `${Math.round(k.num)}%` : k.num.toLocaleString()}
+          </div>
+          <KpiDelta delta={k.delta} dir={k.dir} />
+        </div>
+      ))}
     </>
   )
 }
@@ -137,24 +142,22 @@ export function AnalyticsPage(_props: SectionPageProps) {
   const topContributorsQuery = useAnalyticsTopContributors()
 
   const kpis = kpisQuery.data
+  const shownKpis = kpis ? visibleKpis(kpis) : []
   const events = eventsQuery.data
+  const byCategory = byCategoryQuery.data
 
-  const canExport = !!kpis
+  const canExport = !!kpis && !!events && !!byCategory
   const exportCsv = () => {
-    if (!kpis) return
+    if (!kpis || !events || !byCategory) return
     const rows: (string | number)[][] = [["Metric", "Value", "Change"]]
-    kpis.kpis
-      .filter((k) => !/route/i.test(k.label))
-      .forEach((k) => rows.push([k.label, k.num, k.delta]))
-    if (events) {
-      rows.push(["Cleanup events (month)", events.thisMonth, ""])
-      rows.push(["Volunteers", events.volunteers, ""])
-    }
+    shownKpis.forEach((k) =>
+      rows.push([k.label, isPercentKpi(k) ? `${Math.round(k.num)}%` : k.num, k.delta]),
+    )
+    rows.push(["Cleanup events (month)", events.thisMonth, ""])
+    rows.push(["Volunteers", events.volunteers, ""])
     rows.push([])
     rows.push(["Category", "Reports", "Share %"])
-    ;(byCategoryQuery.data?.rows ?? []).forEach((c) =>
-      rows.push([REPORT_CATEGORY_LABELS[c.cat], c.count, c.pct]),
-    )
+    byCategory.rows.forEach((c) => rows.push([REPORT_CATEGORY_LABELS[c.cat], c.count, c.pct]))
     downloadCsv("civfix-analytics.csv", rows)
     toast("Analytics exported · civfix-analytics.csv")
   }
@@ -189,11 +192,15 @@ export function AnalyticsPage(_props: SectionPageProps) {
         <div className="strip-state">
           <ErrorState error={kpisQuery.error} onRetry={() => kpisQuery.refetch()} />
         </div>
-      ) : kpis ? (
+      ) : shownKpis.length === 0 ? (
+        <div className="strip-state">
+          <EmptyState title="No data yet" sub="Nothing to show for this window." />
+        </div>
+      ) : (
         <div className="statusstrip kpi-strip">
-          <KpiStrip kpis={kpis} />
+          <KpiStrip kpis={shownKpis} />
         </div>
-      ) : null}
+      )}
 
       <div className="analytics-grid">
         { }
@@ -363,17 +370,25 @@ export function AnalyticsPage(_props: SectionPageProps) {
         >
           {(d) => (
             <div className="table-scroll">
-              <div className="table">
-                <div className="trow thead jt">
-                  <span>Jurisdiction</span>
-                  <span>Pins</span>
-                  <span>Resolved</span>
+              <div className="table" role="table" aria-label="Top jurisdictions">
+                <div className="trow thead jt" role="row">
+                  <span role="columnheader">Jurisdiction</span>
+                  <span role="columnheader">Pins</span>
+                  <span role="columnheader">Resolved</span>
                 </div>
                 {d.rows.map((j, i) => (
-                  <div key={`${j.org}-${i}`} className="trow jt">
-                    <span className="td-strong">{j.org}</span>
-                    <span className="mono">{j.pins}</span>
-                    <span className="mono" style={{ color: "var(--moss-700)", fontWeight: 700 }}>
+                  <div key={`${j.org}-${i}`} className="trow jt" role="row">
+                    <span className="td-strong" role="cell">
+                      {j.org}
+                    </span>
+                    <span className="mono" role="cell">
+                      {j.pins}
+                    </span>
+                    <span
+                      className="mono"
+                      role="cell"
+                      style={{ color: "var(--moss-700)", fontWeight: 700 }}
+                    >
                       { }
                       {j.resolved}%
                     </span>
@@ -395,23 +410,29 @@ export function AnalyticsPage(_props: SectionPageProps) {
         >
           {(d) => (
             <div className="table-scroll">
-              <div className="table">
-                <div className="trow thead ct">
-                  <span>Neighbor</span>
-                  <span>Reports</span>
-                  <span>Cleanups</span>
+              <div className="table" role="table" aria-label="Top contributors">
+                <div className="trow thead ct" role="row">
+                  <span role="columnheader">Neighbor</span>
+                  <span role="columnheader">Reports</span>
+                  <span role="columnheader">Cleanups</span>
                 </div>
                 {d.rows.map((c, i) => (
-                  <div key={`${c.name}-${c.city}-${i}`} className="trow ct">
-                    <span className="contrib-cell">
+                  <div key={`${c.name}-${c.city}-${i}`} className="trow ct" role="row">
+                    <span className="contrib-cell" role="cell">
                       <span className="contrib-av">{initials(c.name)}</span>
                       <span className="contrib-text">
                         <span className="td-strong">{c.name}</span>
                         <span className="contrib-city">{c.city || "—"}</span>
                       </span>
                     </span>
-                    <span className="mono">{c.reports}</span>
-                    <span className="mono" style={{ color: "var(--moss-700)", fontWeight: 700 }}>
+                    <span className="mono" role="cell">
+                      {c.reports}
+                    </span>
+                    <span
+                      className="mono"
+                      role="cell"
+                      style={{ color: "var(--moss-700)", fontWeight: 700 }}
+                    >
                       {c.cleanups}
                     </span>
                   </div>
diff --git a/apps/admin/src/features/auth/operator-login.test.tsx b/apps/admin/src/features/auth/operator-login.test.tsx
new file mode 100644
index 0000000..91690c9
--- /dev/null
+++ b/apps/admin/src/features/auth/operator-login.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { OperatorLogin } from "@/features/auth/operator-login"
+
+vi.mock("@/hooks/use-admin-auth", () => ({
+  useOperatorSession: () => ({ isOperator: false, operator: null, status: "forbidden" }),
+  useOperatorBootstrap: () => () => Promise.resolve("forbidden"),
+}))
+
+describe("OperatorLogin", () => {
+  it("states the not-authorized reason once, as an alert", () => {
+    render(<OperatorLogin />)
+
+    expect(screen.getByRole("heading", { name: "Not authorized" })).toBeInTheDocument()
+    const alert = screen.getByRole("alert")
+    expect(alert).toHaveTextContent(
+      "You signed in with Cloudflare Access, but this account is not authorized for the operator dashboard. Ask an administrator to add your email to the operator allowlist.",
+    )
+    expect(screen.getAllByText(/is not authorized for the operator dashboard/)).toHaveLength(1)
+  })
+})
diff --git a/apps/admin/src/features/auth/operator-login.tsx b/apps/admin/src/features/auth/operator-login.tsx
index 0ca8907..58d74a7 100644
--- a/apps/admin/src/features/auth/operator-login.tsx
+++ b/apps/admin/src/features/auth/operator-login.tsx
@@ -41,13 +41,10 @@ export function OperatorLogin() {
         {notAuthorized ? (
           <>
             <h1 className="op-login-title">Not authorized</h1>
-            <p className="op-login-sub">
+            <p role="alert" className="op-login-sub">
               You signed in with Cloudflare Access, but this account is not authorized for the operator
               dashboard. Ask an administrator to add your email to the operator allowlist.
             </p>
-            <p role="alert" className="op-login-error">
-              This account is not authorized for the operator dashboard.
-            </p>
           </>
         ) : (
           <>
diff --git a/apps/admin/src/features/discovery/discovery-page.test.tsx b/apps/admin/src/features/discovery/discovery-page.test.tsx
index 770e3f0..f305cb9 100644
--- a/apps/admin/src/features/discovery/discovery-page.test.tsx
+++ b/apps/admin/src/features/discovery/discovery-page.test.tsx
@@ -1,6 +1,7 @@
-import { screen, waitFor, within } from "@testing-library/react"
+import { act, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
 import type {
   GetForwardTemplateDefaultResponse,
   JurisdictionDirectoryDTO,
@@ -9,6 +10,9 @@ import type {
 } from "@civfix/shared"
 
 import type * as ApiModule from "@/lib/api"
+import { categoryLabel } from "@/lib/category"
+import { makeQueryClient } from "@/lib/query"
+import { useUiStore, type ToastTone } from "@/store/ui-store"
 import { apiMock } from "@/test/api-mock"
 import { renderWithQuery } from "@/test/render"
 import { DiscoveryPage } from "@/features/discovery/discovery-page"
@@ -103,6 +107,14 @@ function chip(name: RegExp): HTMLElement {
   return screen.getByRole("button", { name })
 }
 
+function spyToasts() {
+  const original = useUiStore.getState().showToast
+  const showToast = vi.fn<(text: string, tone?: ToastTone) => void>()
+  useUiStore.setState({ showToast })
+  onTestFinished(() => useUiStore.setState({ showToast: original }))
+  return showToast
+}
+
 describe("DiscoveryPage", () => {
   it("shows the loading state while the directory is in flight", async () => {
     apiMock.listJurisdictions.mockReturnValue(new Promise(() => {}))
@@ -302,27 +314,373 @@ describe("DiscoveryPage", () => {
     )
   })
 
-  it("deep-links a focusId into the search box and opens that jurisdiction", async () => {
+  it("deep-links a focusId on the All filter with the search already applied, so a routed jurisdiction opens", async () => {
     mockDetailQueries()
-    apiMock.listJurisdictions.mockResolvedValue(page([LA, PASADENA]))
+    apiMock.listJurisdictions.mockImplementation(async (params: { filter?: string; q?: string }) =>
+      params.filter === "all" && params.q === "0656000" ? page([PASADENA]) : page([LA]),
+    )
     renderWithQuery(<DiscoveryPage focusId="0656000" />)
 
     expect(screen.getByPlaceholderText("Search place or GEOID…")).toHaveValue("0656000")
     expect(await screen.findByRole("heading", { level: 2, name: "Pasadena" })).toBeInTheDocument()
-    await waitFor(() =>
-      expect(listCalls()).toContainEqual({ filter: "needs_mapping", sort: "oldest", q: "0656000", limit: 50 }),
+    expect(listCalls()[0]).toEqual({ filter: "all", sort: "population", q: "0656000", limit: 50 })
+    expect(listCalls().every((call) => call.q === "0656000")).toBe(true)
+  })
+
+  it("switches to the All filter when a new focusId arrives", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockImplementation(async (params: { filter?: string; q?: string }) =>
+      params.filter === "all" && params.q === "0656000" ? page([PASADENA]) : page([LA]),
+    )
+    const { rerender, client } = renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    rerender(
+      <QueryClientProvider client={client}>
+        <DiscoveryPage focusId="0656000" />
+      </QueryClientProvider>,
     )
-    // The first request goes out before the debounce settles, so it carries no search term.
-    expect(listCalls()[0]).toEqual({ filter: "needs_mapping", sort: "oldest", limit: 50 })
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Pasadena" })).toBeInTheDocument()
+    expect(screen.getByPlaceholderText("Search place or GEOID…")).toHaveValue("0656000")
   })
 
-  it("holds an empty detail pane when the focused jurisdiction is not in the loaded page (current behavior)", async () => {
+  it("keeps a focused jurisdiction selected when the list does not have it, and says so", async () => {
     mockDetailQueries()
     apiMock.listJurisdictions.mockResolvedValue(page([LA]))
     renderWithQuery(<DiscoveryPage focusId="9999999" />)
 
-    expect(await screen.findByRole("button", { name: /^Los Angeles/ })).toBeInTheDocument()
-    expect(screen.getByText("No jurisdiction selected")).toBeInTheDocument()
+    const laRow = await screen.findByRole("button", { name: /^Los Angeles/ })
+    expect(screen.getByText("Not in this list")).toBeInTheDocument()
+    expect(screen.getByText("No loaded jurisdiction has GEOID 9999999.")).toBeInTheDocument()
     expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument()
+    expect(laRow).not.toHaveAttribute("aria-current")
+  })
+
+  it("clears a jurisdiction that saving drops from the Needs mapping list, without opening another", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA, PASADENA]))
+    apiMock.saveJurisdictionContacts.mockImplementation(async () => {
+      apiMock.listJurisdictions.mockResolvedValue(page([PASADENA]))
+      return { ok: true }
+    })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.type(screen.getByRole("textbox", { name: "Default contact email" }), "reports@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+
+    await waitFor(() =>
+      expect(screen.queryByRole("button", { name: /^Los Angeles/ })).not.toBeInTheDocument(),
+    )
+    expect(await screen.findByText("No jurisdiction selected")).toBeInTheDocument()
+    expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /^Pasadena/ })).not.toHaveAttribute("aria-current")
+  })
+
+  it("confirms Save & route even when the list drops the jurisdiction before the needs-mapping count refetch lands", async () => {
+    useUiStore.setState({ toast: null })
+    mockDetailQueries()
+    let releaseCount: () => void = () => {}
+    apiMock.listJurisdictions.mockResolvedValue(page([LA, PASADENA]))
+    apiMock.saveJurisdictionContacts.mockImplementation(async () => {
+      apiMock.listJurisdictions.mockImplementation((params: { filter?: string }) =>
+        params.filter === "needs_mapping"
+          ? new Promise((resolve) => {
+              releaseCount = () => resolve(page([PASADENA]))
+            })
+          : Promise.resolve(page([PASADENA])),
+      )
+      return { ok: true }
+    })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await userEvent.click(chip(/^All/))
+    await waitFor(() => expect(listCalls().at(-1)).toMatchObject({ filter: "all" }))
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.type(screen.getByRole("textbox", { name: "Default contact email" }), "reports@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+
+    expect(await screen.findByText("No jurisdiction selected")).toBeInTheDocument()
+    await act(async () => {
+      releaseCount()
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: "Contacts saved for Los Angeles · discovery task closed",
+        tone: "ok",
+      }),
+    )
+  })
+
+  it("marks the selected row current", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA, PASADENA]))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+
+    const laRow = await screen.findByRole("button", { name: /^Los Angeles/ })
+    expect(laRow).toHaveAttribute("aria-current", "true")
+    expect(screen.getByRole("button", { name: /^Pasadena/ })).not.toHaveAttribute("aria-current")
+  })
+
+  it("shows loading, not zero, on the Routed and All chips while the directory loads", async () => {
+    apiMock.listJurisdictions.mockReturnValue(new Promise(() => {}))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+
+    await screen.findByRole("status")
+    expect(chip(/^Routed/)).toHaveTextContent("Loading…")
+    expect(chip(/^All/)).toHaveTextContent("Loading…")
+  })
+
+  it("keeps the operator's sort through a visit to Needs mapping", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("button", { name: /^Los Angeles/ })
+
+    await userEvent.click(chip(/^Routed/))
+    await userEvent.selectOptions(screen.getByRole("combobox", { name: "Sort jurisdictions" }), "reports")
+    await userEvent.click(chip(/^Needs mapping/))
+    await userEvent.click(chip(/^Routed/))
+
+    expect(screen.getByRole("combobox", { name: "Sort jurisdictions" })).toHaveValue("reports")
+  })
+
+  it("names every search and contact field", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    for (const name of [
+      "Search jurisdictions",
+      "Note for the next operator",
+      "Default contact email",
+      "Report form URL",
+      `${categoryLabel("trash")} contact email`,
+    ]) {
+      expect(screen.getByRole("textbox", { name })).toBeInTheDocument()
+    }
+  })
+})
+
+describe("DiscoveryPage saving", () => {
+  it("sends null for a contact the operator emptied, so the old address stops receiving reports", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([PASADENA]))
+    apiMock.patchJurisdiction.mockResolvedValue({ ok: true })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Pasadena" })
+
+    await userEvent.clear(screen.getByDisplayValue("trash@pasadena.gov"))
+    await userEvent.click(screen.getByRole("button", { name: "Save draft" }))
+
+    await waitFor(() => expect(apiMock.patchJurisdiction).toHaveBeenCalled())
+    expect(apiMock.patchJurisdiction).toHaveBeenCalledWith({
+      geoid: "0656000",
+      contacts: { trash: null },
+      defaultEmails: ["reports@pasadena.gov"],
+    })
+    expect(
+      screen.getByText(/Clearing the default email or form URL here does not remove the saved one\./),
+    ).toBeInTheDocument()
+  })
+
+  it("sends null for a contact saved earlier in this visit and then emptied", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    apiMock.patchJurisdiction.mockResolvedValue({ ok: true })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+    const trash = screen.getByRole("textbox", { name: `${categoryLabel("trash")} contact email` })
+
+    await userEvent.type(trash, "wrong@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: "Save draft" }))
+    await waitFor(() =>
+      expect(apiMock.patchJurisdiction).toHaveBeenLastCalledWith({
+        geoid: "0644000",
+        contacts: { trash: "wrong@la.gov" },
+      }),
+    )
+    await waitFor(() => expect(screen.getByRole("button", { name: "Save draft" })).toBeEnabled())
+
+    await userEvent.clear(trash)
+    await userEvent.click(screen.getByRole("button", { name: "Save draft" }))
+
+    await waitFor(() => expect(apiMock.patchJurisdiction).toHaveBeenCalledTimes(2))
+    expect(apiMock.patchJurisdiction).toHaveBeenLastCalledWith({
+      geoid: "0644000",
+      contacts: { trash: null },
+    })
+  })
+
+  it("routes with every contact the form shows, including ones saved before this visit", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(
+      page([jurisdiction({ contacts: [{ category: "trash", email: "trash@la.gov" }] })]),
+    )
+    apiMock.saveJurisdictionContacts.mockResolvedValue({ ok: true })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+
+    await waitFor(() =>
+      expect(apiMock.saveJurisdictionContacts).toHaveBeenCalledWith({
+        geoid: "0644000",
+        contacts: { trash: "trash@la.gov" },
+      }),
+    )
+  })
+
+  it("routes with the shown contacts plus null for one the operator emptied", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(
+      page([
+        jurisdiction({
+          contacts: [
+            { category: "trash", email: "trash@la.gov" },
+            { category: "graffiti", email: "old@la.gov" },
+          ],
+        }),
+      ]),
+    )
+    apiMock.saveJurisdictionContacts.mockResolvedValue({ ok: true })
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.clear(screen.getByDisplayValue("old@la.gov"))
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+
+    await waitFor(() =>
+      expect(apiMock.saveJurisdictionContacts).toHaveBeenCalledWith({
+        geoid: "0644000",
+        contacts: { trash: "trash@la.gov", graffiti: null },
+      }),
+    )
+  })
+
+  it("normalizes the @handle the way the server does before comparing it", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([jurisdiction({ handle: "la" })]))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    const handle = screen.getByRole("textbox", { name: "Jurisdiction discussion handle" })
+    await userEvent.clear(handle)
+    await userEvent.type(handle, "@ LA")
+    expect(screen.getByText(/Residents can tag \u201c@la\u201d/)).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: "Save draft" }))
+    expect(apiMock.patchJurisdiction).not.toHaveBeenCalled()
+  })
+
+  it("shows an invalid @handle inline and holds both saves", async () => {
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([PASADENA]))
+    renderWithQuery(<DiscoveryPage focusId={null} />)
+    await screen.findByRole("heading", { level: 2, name: "Pasadena" })
+
+    await userEvent.type(screen.getByRole("textbox", { name: "Jurisdiction discussion handle" }), "a")
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Handle must be 2-40 characters using lowercase letters, numbers, or underscores.",
+    )
+    expect(screen.getByRole("button", { name: "Save draft" })).toBeDisabled()
+    expect(screen.getByRole("button", { name: /Save & route/ })).toBeDisabled()
+  })
+
+  it("shows one error toast when Save draft fails", async () => {
+    const toasts = spyToasts()
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    apiMock.patchJurisdiction.mockRejectedValue(new Error("Jurisdiction service down"))
+    renderWithQuery(<DiscoveryPage focusId={null} />, makeQueryClient())
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.type(screen.getByRole("textbox", { name: "Default contact email" }), "reports@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: "Save draft" }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+    expect(toasts).toHaveBeenCalledWith("Jurisdiction service down", "error")
+  })
+
+  it("shows one error toast when saving the email template fails", async () => {
+    const toasts = spyToasts()
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    apiMock.patchJurisdiction.mockRejectedValue(new Error("Jurisdiction service down"))
+    renderWithQuery(<DiscoveryPage focusId={null} />, makeQueryClient())
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+    const edit = screen.getByRole("button", { name: "Edit template" })
+    await waitFor(() => expect(edit).toBeEnabled())
+
+    await userEvent.click(edit)
+    const dialog = screen.getByRole("dialog", { name: "Forwarding email for Los Angeles" })
+    await userEvent.type(within(dialog).getByLabelText("Subject"), "Report forwarded")
+    await userEvent.click(within(dialog).getByRole("button", { name: /Save/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("says what was saved when Save & route saves the note but not the contacts", async () => {
+    const toasts = spyToasts()
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA]))
+    apiMock.patchJurisdiction.mockResolvedValue({ ok: true })
+    apiMock.saveJurisdictionContacts.mockRejectedValue(new Error("Contacts service down"))
+    renderWithQuery(<DiscoveryPage focusId={null} />, makeQueryClient())
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.type(
+      screen.getByRole("textbox", { name: "Note for the next operator" }),
+      "Called the clerk",
+    )
+    await userEvent.type(screen.getByRole("textbox", { name: "Default contact email" }), "reports@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(apiMock.patchJurisdiction).toHaveBeenCalledWith({ geoid: "0644000", notes: "Called the clerk" })
+    expect(toasts).toHaveBeenCalledTimes(1)
+    expect(toasts).toHaveBeenCalledWith(
+      "The note was saved, but the contacts were not: Contacts service down",
+      "error",
+    )
+  })
+
+  it("still says what was saved when Save & route fails after the operator moved to another jurisdiction", async () => {
+    const toasts = spyToasts()
+    mockDetailQueries()
+    apiMock.listJurisdictions.mockResolvedValue(page([LA, PASADENA]))
+    apiMock.patchJurisdiction.mockResolvedValue({ ok: true })
+    let rejectSave: (error: Error) => void = () => {}
+    apiMock.saveJurisdictionContacts.mockReturnValue(
+      new Promise((_resolve, reject) => {
+        rejectSave = reject
+      }),
+    )
+    renderWithQuery(<DiscoveryPage focusId={null} />, makeQueryClient())
+    await screen.findByRole("heading", { level: 2, name: "Los Angeles" })
+
+    await userEvent.type(
+      screen.getByRole("textbox", { name: "Note for the next operator" }),
+      "Called the clerk",
+    )
+    await userEvent.type(screen.getByRole("textbox", { name: "Default contact email" }), "reports@la.gov")
+    await userEvent.click(screen.getByRole("button", { name: /Save & route/ }))
+    await waitFor(() => expect(apiMock.saveJurisdictionContacts).toHaveBeenCalled())
+
+    await userEvent.click(screen.getByRole("button", { name: /^Pasadena/ }))
+    await screen.findByRole("heading", { level: 2, name: "Pasadena" })
+    rejectSave(new Error("Contacts service down"))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+    expect(toasts).toHaveBeenCalledWith(
+      "The note was saved, but the contacts were not: Contacts service down",
+      "error",
+    )
   })
 })
diff --git a/apps/admin/src/features/discovery/discovery-page.tsx b/apps/admin/src/features/discovery/discovery-page.tsx
index 3f6567b..5db1d09 100644
--- a/apps/admin/src/features/discovery/discovery-page.tsx
+++ b/apps/admin/src/features/discovery/discovery-page.tsx
@@ -13,7 +13,7 @@ import {
 } from "@civfix/shared"
 
 import { Icons } from "@/components/icons"
-import { toAppError } from "@/lib/api"
+import { errorMessage } from "@/lib/error-messages"
 import {
   REPORT_CATEGORIES,
   categoryLabel,
@@ -31,11 +31,23 @@ import {
   useSaveJurisdictionContacts,
 } from "@/features/discovery/use-discovery"
 import {
+  getCountDisplay,
   getJurisdictionSort,
-  getNeedsMappingCountDisplay,
+  initialDirectoryState,
+  pickSelected,
   type JurisdictionFilter,
   type JurisdictionSort,
 } from "@/features/discovery/discovery-ui-state"
+import {
+  afterContactsSaved,
+  contactsPayload,
+  jurisdictionFields,
+  noteAndHandleFields,
+  parseHandle,
+  routingContactsPayload,
+  withContactEdit,
+  type ContactEdits,
+} from "@/features/discovery/discovery-payloads"
 import { ForwardTemplateModal } from "@/features/mail/forward-template-modal"
 import { useForwardTemplateDefault } from "@/features/mail/use-mail"
 
@@ -156,6 +168,7 @@ function JurisdictionRow({
         className={`qrow ${selected ? "selected" : ""}`}
         role="button"
         tabIndex={0}
+        aria-current={selected ? "true" : undefined}
         onClick={onClick}
         onKeyDown={onKeyDown}
       >
@@ -196,6 +209,7 @@ function JurisdictionRow({
       className={`qrow ${selected ? "selected" : ""}`}
       role="button"
       tabIndex={0}
+      aria-current={selected ? "true" : undefined}
       onClick={onClick}
       onKeyDown={onKeyDown}
     >
@@ -273,6 +287,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
     })
     return seed
   })
+  const [contactEdits, setContactEdits] = React.useState<ContactEdits>({})
   const [opNote, setOpNote] = React.useState("")
   const [defaultEmail, setDefaultEmail] = React.useState(dto.email ?? "")
   const [formUrl, setFormUrl] = React.useState(dto.form ?? "")
@@ -289,7 +304,12 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
       : { subject: DEFAULT_FORWARD_SUBJECT_TEMPLATE, body: DEFAULT_FORWARD_BODY_TEMPLATE }
 
   const counts = dto.perCategoryCounts
-  const setCat = (id: string, email: string) => setContacts((prev) => ({ ...prev, [id]: email }))
+  const setCat = (id: string, email: string) => {
+    setContacts((prev) => ({ ...prev, [id]: email }))
+    setContactEdits((prev) => withContactEdit(prev, id))
+  }
+  const contactsSaved = (sent: ContactEdits) =>
+    setContactEdits((prev) => afterContactsSaved(prev, sent))
   const hasDefault = defaultEmail.trim() !== ""
   const missingContacts = REPORT_TYPES.filter(
     (c) => routingCount(counts, c.id) > 0 && !contacts[c.id] && !hasDefault,
@@ -301,58 +321,30 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
   const headPin = dom ? categoryPinSrc(dom) : null
   const isFlagged = dto.flaggedAt !== null
   const busy = saveContacts.isPending || patch.isPending
-
-  const contactsPayload = (): Partial<Record<ReportCategory, string | null>> => {
-    const out: Partial<Record<ReportCategory, string | null>> = {}
-    REPORT_TYPES.forEach((c) => {
-      const v = contacts[c.id]?.trim()
-      if (v) out[c.id] = v
-    })
-    return out
-  }
-
-  const jurisdictionFields = (): { defaultEmails?: string[]; formUrl?: string | null } => {
-    const out: { defaultEmails?: string[]; formUrl?: string | null } = {}
-    const email = defaultEmail.trim()
-    if (email) out.defaultEmails = [email]
-    const url = formUrl.trim()
-    if (url) out.formUrl = url
-    return out
-  }
+  const parsedHandle = parseHandle(handle)
+  const saveBlocked = busy || parsedHandle.error !== null
 
   const onFlag = async () => {
     if (!isFlagged) {
       const reason = await promptDialog({ title: "Flag jurisdiction", label: "Reason (optional)" })
       if (reason === null) return
-      patch.mutate(
-        { geoid: dto.geoid, flagged: true, flagReason: reason || undefined },
-        { onSuccess: () => toast(`${dto.org} flagged for review`) },
-      )
+      patch.mutate({
+        request: { geoid: dto.geoid, flagged: true, flagReason: reason || undefined },
+        org: dto.org,
+        action: "flag",
+      })
       return
     }
-    patch.mutate(
-      { geoid: dto.geoid, flagged: false },
-      { onSuccess: () => toast(`Flag cleared for ${dto.org}`) },
-    )
-  }
-
-  const normalizedHandle = handle.trim().replace(/^@+/, "").toLowerCase()
-  const handleChanged = normalizedHandle !== (dto.handle ?? "")
-
-  const noteAndHandleFields = () => {
-    const note = opNote.trim()
-    return {
-      ...(note ? { notes: note } : {}),
-      ...(handleChanged ? { handle: normalizedHandle } : {}),
-    }
+    patch.mutate({ request: { geoid: dto.geoid, flagged: false }, org: dto.org, action: "flag" })
   }
 
   const onSaveDraft = () => {
-    const contacts = contactsPayload()
-    const jf = jurisdictionFields()
-    const extras = noteAndHandleFields()
+    const sentEdits = contactEdits
+    const contactFields = contactsPayload(sentEdits, contacts)
+    const jf = jurisdictionFields(defaultEmail, formUrl)
+    const extras = noteAndHandleFields(opNote, parsedHandle.value, dto.handle)
     if (
-      Object.keys(contacts).length === 0 &&
+      Object.keys(contactFields).length === 0 &&
       Object.keys(jf).length === 0 &&
       Object.keys(extras).length === 0
     ) {
@@ -360,36 +352,46 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
       return
     }
     patch.mutate(
-      { geoid: dto.geoid, contacts, ...jf, ...extras },
       {
-        onSuccess: () => toast(`Draft saved for ${dto.org}`),
-        onError: (err) => toast(toAppError(err).message),
+        request: { geoid: dto.geoid, contacts: contactFields, ...jf, ...extras },
+        org: dto.org,
+        action: "draft",
       },
+      { onSuccess: () => contactsSaved(sentEdits) },
     )
   }
 
-  const onSaveContacts = () => {
+  const onSaveContacts = async () => {
     if (!canSave) return
+    const extras = noteAndHandleFields(opNote, parsedHandle.value, dto.handle)
+    const savesExtrasFirst = Object.keys(extras).length > 0
+    const sentEdits = contactEdits
     const saveAndRoute = () =>
       saveContacts.mutate(
-        { geoid: dto.geoid, contacts: contactsPayload(), ...jurisdictionFields() },
         {
-          onSuccess: () =>
-            toast(`Contacts saved for ${dto.org} · discovery task closed`),
+          request: {
+            geoid: dto.geoid,
+            contacts: routingContactsPayload(sentEdits, contacts),
+            ...jurisdictionFields(defaultEmail, formUrl),
+          },
+          org: dto.org,
+          ...(savesExtrasFirst ? { savedFirst: extras } : {}),
         },
+        { onSuccess: () => contactsSaved(sentEdits) },
       )
-    const extras = noteAndHandleFields()
-    if (Object.keys(extras).length === 0) {
+    if (!savesExtrasFirst) {
       saveAndRoute()
       return
     }
-    patch.mutate(
-      { geoid: dto.geoid, ...extras },
-      {
-        onSuccess: saveAndRoute,
-        onError: (err) => toast(toAppError(err).message),
-      },
-    )
+    // Awaited rather than chained through a per-call callback: that is dropped once this pane unmounts,
+    // which would save the note but never the contacts.
+    try {
+      await patch.mutateAsync({ request: { geoid: dto.geoid, ...extras }, org: dto.org, action: "extras" })
+    } catch {
+      // The query client already toasted the failure, and the contacts must not save without the note.
+      return
+    }
+    saveAndRoute()
   }
 
   return (
@@ -471,6 +473,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
             <div className="sub-body">
               <div className="field" style={{ marginTop: 0, marginBottom: 0 }}>
                 <textarea
+                  aria-label="Note for the next operator"
                   placeholder="Add a note for the next operator…"
                   value={opNote}
                   onChange={(e) => setOpNote(e.target.value)}
@@ -501,9 +504,14 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
                   aria-label="Jurisdiction discussion handle"
                 />
               </div>
+              {parsedHandle.error && (
+                <span className="field-error" role="alert">
+                  <Icons.AlertTriangle size={11} /> {parsedHandle.error}
+                </span>
+              )}
               <div className="hint" style={{ marginTop: 8 }}>
-                Residents can tag “@{normalizedHandle || "handle"}” in a report’s discussion to forward it
-                to this jurisdiction. Lowercase letters, numbers, and underscores; leave blank to clear.
+                Residents can tag “@{parsedHandle.value || "handle"}” in a report’s discussion to forward
+                it to this jurisdiction. Lowercase letters, numbers, and underscores; leave blank to clear.
                 Saved by either “Save draft” or “Save &amp; route”.
               </div>
             </div>
@@ -517,6 +525,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
                 <Icons.Mail size={13} />
                 <input
                   type="email"
+                  aria-label="Default contact email"
                   value={defaultEmail}
                   placeholder="e.g. reports@city.gov"
                   onChange={(e) => setDefaultEmail(e.target.value)}
@@ -526,6 +535,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
                 <Icons.Building size={13} />
                 <input
                   type="url"
+                  aria-label="Report form URL"
                   value={formUrl}
                   placeholder="e.g. https://city.gov/report"
                   onChange={(e) => setFormUrl(e.target.value)}
@@ -533,7 +543,8 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
               </div>
               <div className="hint" style={{ marginTop: 8 }}>
                 The default email routes any category without its own contact below; the form URL is the
-                city’s public reporting page.
+                city’s public reporting page. Clearing the default email or form URL here does not remove
+                the saved one.
               </div>
             </div>
           </div>
@@ -575,6 +586,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
                         <Icons.Mail size={13} />
                         <input
                           type="email"
+                          aria-label={`${c.label} contact email`}
                           value={contacts[c.id] ?? ""}
                           placeholder={
                             attention
@@ -613,7 +625,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
                   disabled={defaultTemplate.isLoading}
                   onClick={() => {
                     if (defaultTemplate.isError) {
-                      toast(toAppError(defaultTemplate.error).message)
+                      toast(errorMessage(defaultTemplate.error), "error")
                       return
                     }
                     setTemplateOpen(true)
@@ -638,7 +650,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
         </button>
         <button
           className="btn"
-          disabled={busy}
+          disabled={saveBlocked}
           onClick={onSaveDraft}
           title="Saves the contacts, the note and the @handle without closing the discovery task"
         >
@@ -646,7 +658,7 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
         </button>
         <button
           className={`btn ${canSave ? "success" : ""}`}
-          disabled={!canSave || busy}
+          disabled={!canSave || saveBlocked}
           onClick={onSaveContacts}
           title={
             canSave
@@ -681,17 +693,15 @@ function JurisdictionDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
         onSave={({ subject, body }) =>
           patch.mutate(
             {
-              geoid: dto.geoid,
-              forwardSubjectTemplate: subject,
-              forwardBodyTemplate: body,
-            },
-            {
-              onSuccess: () => {
-                toast(`Email template saved for ${dto.org}`)
-                setTemplateOpen(false)
+              request: {
+                geoid: dto.geoid,
+                forwardSubjectTemplate: subject,
+                forwardBodyTemplate: body,
               },
-              onError: (err) => toast(toAppError(err).message),
+              org: dto.org,
+              action: "template",
             },
+            { onSuccess: () => setTemplateOpen(false) },
           )
         }
       />
@@ -766,13 +776,15 @@ function UnmappedDetail({ dto }: { dto: JurisdictionDirectoryDTO }) {
 }
 
 export function DiscoveryPage({ focusId }: SectionPageProps) {
-  const [filter, setFilter] = React.useState<JurisdictionFilter>("attention")
+  const [initial] = React.useState(() => initialDirectoryState(focusId))
+  const [filter, setFilter] = React.useState<JurisdictionFilter>(initial.filter)
   const [layer, setLayer] = React.useState<"all" | JurisdictionLayer>("all")
   const [sort, setSort] = React.useState<JurisdictionSort>("pop")
-  const [query, setQuery] = React.useState(focusId ?? "")
+  const [query, setQuery] = React.useState(initial.query)
   const [selId, setSelId] = React.useState<string | null>(focusId)
+  const [lastSeen, setLastSeen] = React.useState<JurisdictionDirectoryDTO | null>(null)
 
-  const [debouncedQ, setDebouncedQ] = React.useState("")
+  const [debouncedQ, setDebouncedQ] = React.useState(initial.query)
   React.useEffect(() => {
     const t = setTimeout(() => setDebouncedQ(query.trim()), 250)
     return () => clearTimeout(t)
@@ -803,37 +815,55 @@ export function DiscoveryPage({ focusId }: SectionPageProps) {
   const total = listQuery.data?.pages[0]?.total ?? null
   const facets = listQuery.data?.pages[0]?.facets ?? null
   const needsMappingTotal = needsMappingCountQuery.data?.pages[0]?.total ?? null
-  const needsMappingCountDisplay = getNeedsMappingCountDisplay({
+  const needsMappingCountDisplay = getCountDisplay({
     count: needsMappingTotal,
     isLoading: needsMappingCountQuery.isLoading,
     isError: needsMappingCountQuery.isError,
   })
   const allTotal = facets ? facets.routed + facets.unrouted : filter === "all" ? total : null
+  const listCountDisplay = (count: number | null) =>
+    getCountDisplay({ count, isLoading: listQuery.isLoading, isError: listQuery.isError })
 
   React.useEffect(() => {
-    if (focusId) {
-      setSelId(focusId)
-      setQuery(focusId)
-    }
+    if (!focusId) return
+    const next = initialDirectoryState(focusId)
+    setFilter(next.filter)
+    setQuery(next.query)
+    setDebouncedQ(next.query)
+    setSelId(focusId)
   }, [focusId])
 
-  const focused = selId ? (items.find((x) => x.geoid === selId) ?? null) : null
-  const holdingFocus = selId !== null && selId === focusId
-  const selected = focused ?? (holdingFocus ? null : (items[0] ?? null))
+  const selected = pickSelected(items, selId, lastSeen)
+  React.useEffect(() => {
+    if (selected && selected !== lastSeen) setLastSeen(selected)
+  }, [selected, lastSeen])
+  // Only the first load picks a jurisdiction on the operator's behalf, and a deep-linked one is never
+  // replaced. A pick that a filter or search leaves out stays open as it was last listed; a pick that
+  // drops out of the same list after a refetch (a Save & route under Needs mapping) clears, so the pane
+  // never shows a stale row or jumps to another jurisdiction's save buttons. Decided only on data
+  // fetched for the current params.
+  const listKey = JSON.stringify([serverFilter, serverSort, layer, debouncedQ])
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
+  React.useEffect(() => {
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items[0]) setSelId(items[0].geoid)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.geoid === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
+  const selectionNotListed =
+    selId !== null && selected === null && !listQuery.isLoading && !listQuery.isError
 
   const catFilters = [
     { value: "attention", label: "Needs mapping", count: needsMappingCountDisplay },
-    { value: "clear", label: "Routed", count: facets?.routed ?? 0 },
-    { value: "all", label: "All", count: allTotal ?? 0 },
+    { value: "clear", label: "Routed", count: listCountDisplay(facets?.routed ?? null) },
+    { value: "all", label: "All", count: listCountDisplay(allTotal) },
   ]
 
-  const onFilterChange = (v: JurisdictionFilter) => {
-    setFilter(v)
-    // The "needs mapping" view is about the most-overdue reports first, so default it to the
-    // oldest-first sort; leaving the view falls back to population unless the operator picked reports.
-    if (v === "attention") setSort("oldest")
-    else if (sort === "oldest") setSort("pop")
-  }
   const headerCount =
     filter === "attention" ? needsMappingTotal : filter === "clear" ? facets?.routed : total
   const headerCountDisplay = filter === "attention" ? needsMappingCountDisplay : headerCount ?? items.length
@@ -854,13 +884,14 @@ export function DiscoveryPage({ focusId }: SectionPageProps) {
         <FilterChips
           options={catFilters}
           value={filter}
-          onChange={(v) => onFilterChange(v as JurisdictionFilter)}
+          onChange={(v) => setFilter(v as JurisdictionFilter)}
         />
         <div className="toolbar-spacer" />
         <div className="searchbox">
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search jurisdictions"
             placeholder="Search place or GEOID…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -953,6 +984,12 @@ export function DiscoveryPage({ focusId }: SectionPageProps) {
             ) : (
               <JurisdictionDetail key={selected.geoid} dto={selected} />
             )
+          ) : selectionNotListed ? (
+            <EmptyState
+              title="Not in this list"
+              sub={`No loaded jurisdiction has GEOID ${selId}.`}
+              icon={<Icons.Search size={20} />}
+            />
           ) : (
             <EmptyState
               title="No jurisdiction selected"
diff --git a/apps/admin/src/features/discovery/discovery-payloads.test.ts b/apps/admin/src/features/discovery/discovery-payloads.test.ts
new file mode 100644
index 0000000..166ec66
--- /dev/null
+++ b/apps/admin/src/features/discovery/discovery-payloads.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  afterContactsSaved,
+  contactsPayload,
+  jurisdictionFields,
+  noteAndHandleFields,
+  parseHandle,
+  partialSaveMessage,
+  routingContactsPayload,
+  withContactEdit,
+} from "./discovery-payloads"
+
+describe("contacts payload", () => {
+  it("sends the trimmed contacts the operator edited", () => {
+    const current = { trash: " trash@city.gov ", graffiti: "g@city.gov", hazard: "h@city.gov" }
+    expect(contactsPayload({ trash: 1, hazard: 2 }, current)).toEqual({
+      trash: "trash@city.gov",
+      hazard: "h@city.gov",
+    })
+  })
+
+  it("sends null for an edited category that is now empty, so the server deletes it", () => {
+    expect(contactsPayload({ trash: 1 }, { trash: "" })).toEqual({ trash: null })
+    expect(contactsPayload({ trash: 1 }, { trash: "  " })).toEqual({ trash: null })
+  })
+
+  it("leaves categories the operator did not edit out, so a contact changed meanwhile survives", () => {
+    expect(contactsPayload({}, { trash: "old@city.gov", graffiti: "" })).toEqual({})
+  })
+
+  it("routes with every contact shown, edited or not, plus null for an edited category now empty", () => {
+    const current = { trash: " trash@city.gov ", graffiti: "", hazard: "h@city.gov", dumping: "" }
+    expect(routingContactsPayload({ hazard: 1, graffiti: 1 }, current)).toEqual({
+      trash: "trash@city.gov",
+      hazard: "h@city.gov",
+      graffiti: null,
+    })
+    expect(routingContactsPayload({}, { trash: "old@city.gov" })).toEqual({ trash: "old@city.gov" })
+  })
+
+  it("counts every edit to a category", () => {
+    expect(withContactEdit(withContactEdit({}, "trash"), "trash")).toEqual({ trash: 2 })
+  })
+
+  it("keeps an edit made while the save was in flight marked for the next save", () => {
+    expect(afterContactsSaved({ trash: 2, graffiti: 1 }, { trash: 1, graffiti: 1 })).toEqual({ trash: 2 })
+    expect(afterContactsSaved({ trash: 1 }, { trash: 1 })).toEqual({})
+  })
+})
+
+describe("jurisdiction fields", () => {
+  it("sends a trimmed default email and form url and omits blanks", () => {
+    expect(jurisdictionFields(" reports@city.gov ", " https://city.gov/report ")).toEqual({
+      defaultEmails: ["reports@city.gov"],
+      formUrl: "https://city.gov/report",
+    })
+    expect(jurisdictionFields("", "  ")).toEqual({})
+  })
+})
+
+describe("@handle", () => {
+  it("normalizes the way the server does", () => {
+    expect(parseHandle("@SF ")).toEqual({ value: "sf", error: null })
+    expect(parseHandle("@ sf")).toEqual({ value: "sf", error: null })
+    expect(parseHandle("   ")).toEqual({ value: "", error: null })
+  })
+
+  it("reports the server's rule for an invalid handle", () => {
+    expect(parseHandle("a").error).toBe(
+      "Handle must be 2-40 characters using lowercase letters, numbers, or underscores.",
+    )
+    expect(parseHandle("san francisco").error).not.toBeNull()
+  })
+})
+
+describe("note and handle fields", () => {
+  it("sends a trimmed note and a changed handle", () => {
+    expect(noteAndHandleFields(" Called the clerk ", "sf", null)).toEqual({
+      notes: "Called the clerk",
+      handle: "sf",
+    })
+  })
+
+  it("omits an empty note and an unchanged handle", () => {
+    expect(noteAndHandleFields("  ", "sf", "sf")).toEqual({})
+  })
+
+  it("sends an empty handle to clear a stored one", () => {
+    expect(noteAndHandleFields("", "", "sf")).toEqual({ handle: "" })
+  })
+})
+
+describe("partial Save & route message", () => {
+  it("names what was saved before the contacts failed", () => {
+    expect(partialSaveMessage({ notes: "x" }, "Server down")).toBe(
+      "The note was saved, but the contacts were not: Server down",
+    )
+    expect(partialSaveMessage({ handle: "sf" }, "Server down")).toBe(
+      "The @handle was saved, but the contacts were not: Server down",
+    )
+    expect(partialSaveMessage({ notes: "x", handle: "sf" }, "Server down")).toBe(
+      "The note and @handle were saved, but the contacts were not: Server down",
+    )
+  })
+})
\ No newline at end of file
diff --git a/apps/admin/src/features/discovery/discovery-payloads.ts b/apps/admin/src/features/discovery/discovery-payloads.ts
new file mode 100644
index 0000000..d85be8e
--- /dev/null
+++ b/apps/admin/src/features/discovery/discovery-payloads.ts
@@ -0,0 +1,97 @@
+import { JurisdictionHandleSchema, type ReportCategory } from "@civfix/shared"
+
+import { REPORT_CATEGORIES } from "@/lib/category"
+
+type ContactDraft = Readonly<Partial<Record<string, string>>>
+
+/** Per category, how many edits the operator has made since that contact was last saved. */
+export type ContactEdits = Readonly<Partial<Record<string, number>>>
+
+// Save draft sends only the categories the operator edited since the last save, so it never overwrites
+// or deletes a contact another operator changed meanwhile. The server deletes a category contact only on an
+// explicit null, so an edited category that is now empty is sent as null, whatever it held at load.
+export function contactsPayload(
+  edits: ContactEdits,
+  current: ContactDraft,
+): Partial<Record<ReportCategory, string | null>> {
+  const out: Partial<Record<ReportCategory, string | null>> = {}
+  for (const category of REPORT_CATEGORIES) {
+    if (!edits[category]) continue
+    out[category] = current[category]?.trim() || null
+  }
+  return out
+}
+
+// Save & route confirms the routing set the operator sees, and the server checks only the request body
+// for a routable contact, so every contact shown goes out, not just the edited ones.
+export function routingContactsPayload(
+  edits: ContactEdits,
+  current: ContactDraft,
+): Partial<Record<ReportCategory, string | null>> {
+  const out: Partial<Record<ReportCategory, string | null>> = {}
+  for (const category of REPORT_CATEGORIES) {
+    const email = current[category]?.trim()
+    if (email) out[category] = email
+    else if (edits[category]) out[category] = null
+  }
+  return out
+}
+
+export function withContactEdit(edits: ContactEdits, category: string): ContactEdits {
+  return { ...edits, [category]: (edits[category] ?? 0) + 1 }
+}
+
+/**
+ * The edits still unsaved once a save of `sent` succeeds: an edit made while that save was in flight
+ * changed the category's count, so it stays marked and goes out with the next save.
+ */
+export function afterContactsSaved(edits: ContactEdits, sent: ContactEdits): ContactEdits {
+  const next: Partial<Record<string, number>> = {}
+  for (const [category, count] of Object.entries(edits)) {
+    if (count !== undefined && count !== sent[category]) next[category] = count
+  }
+  return next
+}
+
+export function jurisdictionFields(
+  defaultEmail: string,
+  formUrl: string,
+): { defaultEmails?: string[]; formUrl?: string } {
+  const email = defaultEmail.trim()
+  const url = formUrl.trim()
+  return {
+    ...(email ? { defaultEmails: [email] } : {}),
+    ...(url ? { formUrl: url } : {}),
+  }
+}
+
+export function parseHandle(input: string): { value: string; error: string | null } {
+  const parsed = JurisdictionHandleSchema.safeParse(input)
+  if (parsed.success) return { value: parsed.data ?? "", error: null }
+  return { value: "", error: parsed.error.issues[0]!.message }
+}
+
+export interface SavedExtras {
+  notes?: string
+  handle?: string
+}
+
+export function noteAndHandleFields(
+  note: string,
+  handle: string,
+  storedHandle: string | null,
+): SavedExtras {
+  const trimmed = note.trim()
+  return {
+    ...(trimmed ? { notes: trimmed } : {}),
+    ...(handle !== (storedHandle ?? "") ? { handle } : {}),
+  }
+}
+
+export function partialSaveMessage(saved: SavedExtras, reason: string): string {
+  const parts: string[] = []
+  if (saved.notes !== undefined) parts.push("note")
+  if (saved.handle !== undefined) parts.push("@handle")
+  const verb = parts.length > 1 ? "were" : "was"
+  return `The ${parts.join(" and ")} ${verb} saved, but the contacts were not: ${reason}`
+}
\ No newline at end of file
diff --git a/apps/admin/src/features/discovery/discovery-ui-state.test.ts b/apps/admin/src/features/discovery/discovery-ui-state.test.ts
index 8f9e9a8..25ebaad 100644
--- a/apps/admin/src/features/discovery/discovery-ui-state.test.ts
+++ b/apps/admin/src/features/discovery/discovery-ui-state.test.ts
@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vitest"
 
-import { getJurisdictionSort, getNeedsMappingCountDisplay } from "./discovery-ui-state"
+import {
+  getCountDisplay,
+  getJurisdictionSort,
+  initialDirectoryState,
+  pickSelected,
+} from "./discovery-ui-state"
 
 describe("Jurisdictions UI state", () => {
   it("always uses oldest sort for the Needs mapping filter", () => {
@@ -10,8 +15,41 @@ describe("Jurisdictions UI state", () => {
   })
 
   it("shows loading and unavailable count labels instead of false zeroes", () => {
-    expect(getNeedsMappingCountDisplay({ count: null, isLoading: true, isError: false })).toBe("Loading…")
-    expect(getNeedsMappingCountDisplay({ count: null, isLoading: false, isError: true })).toBe("—")
-    expect(getNeedsMappingCountDisplay({ count: 0, isLoading: false, isError: false })).toBe(0)
+    expect(getCountDisplay({ count: null, isLoading: true, isError: false })).toBe("Loading…")
+    expect(getCountDisplay({ count: null, isLoading: false, isError: true })).toBe("\u2014")
+    expect(getCountDisplay({ count: 0, isLoading: false, isError: false })).toBe(0)
   })
 })
+
+describe("initial directory state", () => {
+  it("opens on Needs mapping with an empty search", () => {
+    expect(initialDirectoryState(null)).toEqual({ filter: "attention", query: "" })
+  })
+
+  it("opens a deep link on All with its geoid as the search, since a bounced or routed place is never in Needs mapping", () => {
+    expect(initialDirectoryState("0667000")).toEqual({ filter: "all", query: "0667000" })
+  })
+})
+
+describe("selected jurisdiction", () => {
+  const la = { geoid: "0644000" }
+  const sf = { geoid: "0667000" }
+
+  it("shows no row while nothing is selected, so a cleared pick never falls to another row", () => {
+    expect(pickSelected([la, sf], null, null)).toBeNull()
+    expect(pickSelected([la, sf], null, la)).toBeNull()
+  })
+
+  it("shows the selected row from the list", () => {
+    expect(pickSelected([la, sf], "0667000", null)).toBe(sf)
+  })
+
+  it("keeps showing the selected row after it leaves the list", () => {
+    expect(pickSelected([la], "0667000", sf)).toBe(sf)
+  })
+
+  it("never falls back to another row for a selection it has not seen", () => {
+    expect(pickSelected([la], "0667000", null)).toBeNull()
+    expect(pickSelected([la], "0667000", la)).toBeNull()
+  })
+})
\ No newline at end of file
diff --git a/apps/admin/src/features/discovery/discovery-ui-state.ts b/apps/admin/src/features/discovery/discovery-ui-state.ts
index 719b9a9..918d8b0 100644
--- a/apps/admin/src/features/discovery/discovery-ui-state.ts
+++ b/apps/admin/src/features/discovery/discovery-ui-state.ts
@@ -8,7 +8,7 @@ export function getJurisdictionSort(
   return filter === "attention" ? "oldest" : selectedSort
 }
 
-export function getNeedsMappingCountDisplay({
+export function getCountDisplay({
   count,
   isLoading,
   isError,
@@ -21,3 +21,21 @@ export function getNeedsMappingCountDisplay({
   if (isError || count === null) return "—"
   return count
 }
+
+// A deep link comes from a bounced mail thread, a routed report or a gov claim, none of which sit in
+// Needs mapping, so it opens on All with the geoid as the search.
+export function initialDirectoryState(focusId: string | null): {
+  filter: JurisdictionFilter
+  query: string
+} {
+  return focusId ? { filter: "all", query: focusId } : { filter: "attention", query: "" }
+}
+
+export function pickSelected<T extends { geoid: string }>(
+  items: readonly T[],
+  selId: string | null,
+  lastSeen: T | null,
+): T | null {
+  if (selId === null) return null
+  return items.find((x) => x.geoid === selId) ?? (lastSeen?.geoid === selId ? lastSeen : null)
+}
\ No newline at end of file
diff --git a/apps/admin/src/features/discovery/use-discovery.test.tsx b/apps/admin/src/features/discovery/use-discovery.test.tsx
new file mode 100644
index 0000000..0209c2c
--- /dev/null
+++ b/apps/admin/src/features/discovery/use-discovery.test.tsx
@@ -0,0 +1,62 @@
+import type { ReactNode } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { act, renderHook } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { queryKeys } from "@/lib/query"
+import { apiMock } from "@/test/api-mock"
+import { makeTestQueryClient } from "@/test/render"
+import {
+  useAddDiscoveryNote,
+  useFlagDiscovery,
+  usePatchJurisdiction,
+  useSaveDiscoveryDraft,
+  useSaveJurisdictionContacts,
+} from "@/features/discovery/use-discovery"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+const LIST = queryKeys.jurisdictions.list({ filter: "needs_mapping" })
+const BOUNDARY = queryKeys.jurisdictions.geometry("0644000")
+
+async function runWrite<I>(
+  useHook: () => { mutateAsync: (input: I) => Promise<unknown> },
+  input: I,
+) {
+  const client = makeTestQueryClient()
+  client.setQueryData(LIST, { pages: [], pageParams: [] })
+  client.setQueryData(BOUNDARY, { geoid: "0644000" })
+  const { result } = renderHook(useHook, {
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  })
+  await act(() => result.current.mutateAsync(input))
+  return client
+}
+
+describe("discovery writes refresh the directory but never the boundary", () => {
+  it.each([
+    ["patch", "patchJurisdiction", () => usePatchJurisdiction(), {
+      request: { geoid: "0644000", flagged: true },
+      org: "Los Angeles",
+      action: "flag" as const,
+    }],
+    ["save & route", "saveJurisdictionContacts", () => useSaveJurisdictionContacts(), {
+      request: { geoid: "0644000", contacts: {} },
+      org: "Los Angeles",
+    }],
+    ["note", "addDiscoveryNote", () => useAddDiscoveryNote(), { id: "0644000", note: "Called" }],
+    ["flag", "flagDiscovery", () => useFlagDiscovery(), { id: "0644000", flagged: true }],
+    ["draft", "saveDiscoveryDraft", () => useSaveDiscoveryDraft(), { id: "0644000", contacts: {} }],
+  ] as const)("%s", async (_name, method, useHook, input) => {
+    apiMock[method].mockResolvedValue({ ok: true })
+    const client = await runWrite(useHook as never, input)
+    expect(client.getQueryState(LIST)?.isInvalidated).toBe(true)
+    expect(client.getQueryState(BOUNDARY)?.isInvalidated).toBe(false)
+  })
+})
diff --git a/apps/admin/src/features/discovery/use-discovery.ts b/apps/admin/src/features/discovery/use-discovery.ts
index a3ba073..dd3d415 100644
--- a/apps/admin/src/features/discovery/use-discovery.ts
+++ b/apps/admin/src/features/discovery/use-discovery.ts
@@ -1,6 +1,12 @@
 "use client"
 
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+  partialMatchKey,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
 import type {
   AddNoteRequest,
   DiscoveryListQuery,
@@ -16,7 +22,9 @@ import type {
 } from "@civfix/shared"
 
 import { api } from "@/lib/api"
+import { errorMessage } from "@/lib/error-messages"
 import { queryKeys } from "@/lib/query"
+import { partialSaveMessage, type SavedExtras } from "@/features/discovery/discovery-payloads"
 
 /**
  * Data hooks for the Discovery / Jurisdictions section (enumeration 2.B). Reads use GET /admin/discovery
@@ -89,11 +97,20 @@ export function useJurisdictionGeometry(geoid: string | null) {
   })
 }
 
+const BOUNDARY_KEY = queryKeys.jurisdictions.geometry("").slice(0, -1)
+
 /** Invalidate every discovery/jurisdiction view plus the home aggregates after a write. */
 function invalidateDiscovery(qc: ReturnType<typeof useQueryClient>) {
-  qc.invalidateQueries({ queryKey: queryKeys.discovery.all })
-  qc.invalidateQueries({ queryKey: queryKeys.jurisdictions.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.discovery.all }),
+    // No discovery write changes a boundary, and refetching the polygon would hold every save's
+    // pending state on the largest payload in the section.
+    qc.invalidateQueries({
+      queryKey: queryKeys.jurisdictions.all,
+      predicate: (query) => !partialMatchKey(query.queryKey, BOUNDARY_KEY),
+    }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+  ])
 }
 
 /** POST /admin/discovery/:id/notes - append an operator note to a discovery task. */
@@ -101,10 +118,11 @@ export function useAddDiscoveryNote() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: AddNoteRequest) => api.addDiscoveryNote(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) })
-      invalidateDiscovery(qc)
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) }),
+        invalidateDiscovery(qc),
+      ]),
   })
 }
 
@@ -113,10 +131,11 @@ export function useFlagDiscovery() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: FlagDiscoveryRequest) => api.flagDiscovery(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) })
-      invalidateDiscovery(qc)
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) }),
+        invalidateDiscovery(qc),
+      ]),
   })
 }
 
@@ -125,22 +144,61 @@ export function useSaveDiscoveryDraft() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: SaveDraftRequest) => api.saveDiscoveryDraft(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) })
-      invalidateDiscovery(qc)
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.discovery.detail(id) }),
+        invalidateDiscovery(qc),
+      ]),
   })
 }
 
+export interface SaveContactsVariables {
+  request: SaveContactsRequest
+  /** The jurisdiction's name, for the success toast. */
+  org: string
+  /** The note / @handle a PATCH already saved just before this request, which a failure must mention. */
+  savedFirst?: SavedExtras
+}
+
 /** POST /admin/jurisdictions/:geoid/contacts - the core "Save contacts" action. */
 export function useSaveJurisdictionContacts() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: SaveContactsRequest) => api.saveJurisdictionContacts(input),
+    mutationFn: ({ request }: SaveContactsVariables) => api.saveJurisdictionContacts(request),
     onSuccess: () => invalidateDiscovery(qc),
+    meta: {
+      errorMessage: (error: unknown, { savedFirst }: SaveContactsVariables) =>
+        savedFirst ? partialSaveMessage(savedFirst, errorMessage(error)) : errorMessage(error),
+      successMessage: (_res: unknown, { org }: SaveContactsVariables) =>
+        `Contacts saved for ${org} · discovery task closed`,
+    },
   })
 }
 
+export interface PatchJurisdictionVariables {
+  request: PatchJurisdictionRequest
+  /** The jurisdiction's name, for the success toast. */
+  org: string
+  /**
+   * What the operator saved, which picks the toast. "extras" is the note / @handle saved just before
+   * Save & route, which leaves the toast to that save.
+   */
+  action: "flag" | "draft" | "template" | "extras"
+}
+
+function patchSuccessMessage({ request, org, action }: PatchJurisdictionVariables): string | null {
+  switch (action) {
+    case "flag":
+      return request.flagged ? `${org} flagged for review` : `Flag cleared for ${org}`
+    case "draft":
+      return `Draft saved for ${org}`
+    case "template":
+      return `Email template saved for ${org}`
+    case "extras":
+      return null
+  }
+}
+
 /**
  * PATCH /admin/jurisdictions/:geoid - non-routing edits on a directory jurisdiction: save a contact
  * draft (contacts/form without routing the pending pins) and flag / unflag for review (flagged +
@@ -149,7 +207,11 @@ export function useSaveJurisdictionContacts() {
 export function usePatchJurisdiction() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: PatchJurisdictionRequest) => api.patchJurisdiction(input),
+    mutationFn: ({ request }: PatchJurisdictionVariables) => api.patchJurisdiction(request),
     onSuccess: () => invalidateDiscovery(qc),
+    meta: {
+      successMessage: (_res: unknown, variables: PatchJurisdictionVariables) =>
+        patchSuccessMessage(variables),
+    },
   })
 }
diff --git a/apps/admin/src/features/events/event-id.ts b/apps/admin/src/features/events/event-id.ts
new file mode 100644
index 0000000..aac0a2a
--- /dev/null
+++ b/apps/admin/src/features/events/event-id.ts
@@ -0,0 +1,3 @@
+export function shortId(id: string): string {
+  return `#${id.replace(/-/g, "").slice(0, 8)}`
+}
diff --git a/apps/admin/src/features/events/event-outcome.test.ts b/apps/admin/src/features/events/event-outcome.test.ts
new file mode 100644
index 0000000..6079b65
--- /dev/null
+++ b/apps/admin/src/features/events/event-outcome.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest"
+
+import { parseBags } from "./event-outcome"
+
+describe("parseBags", () => {
+  it.each([
+    ["", null],
+    ["   ", null],
+    ["-1", null],
+    ["0", 0],
+    ["12", 12],
+    ["2.5", null],
+    ["1e3", 1000],
+    ["100000", 100000],
+    ["100001", null],
+    ["abc", null],
+  ])("parses %j as %j by the contract's rule", (input, expected) => {
+    expect(parseBags(input)).toBe(expected)
+  })
+})
diff --git a/apps/admin/src/features/events/event-outcome.ts b/apps/admin/src/features/events/event-outcome.ts
new file mode 100644
index 0000000..5750737
--- /dev/null
+++ b/apps/admin/src/features/events/event-outcome.ts
@@ -0,0 +1,7 @@
+import { SetEventOutcomeRequestSchema } from "@civfix/shared"
+
+export function parseBags(input: string): number | null {
+  if (input.trim() === "") return null
+  const parsed = SetEventOutcomeRequestSchema.shape.bags.safeParse(Number(input))
+  return parsed.success ? parsed.data : null
+}
diff --git a/apps/admin/src/features/events/events-page.test.tsx b/apps/admin/src/features/events/events-page.test.tsx
index 22e4999..a30a8c3 100644
--- a/apps/admin/src/features/events/events-page.test.tsx
+++ b/apps/admin/src/features/events/events-page.test.tsx
@@ -4,15 +4,19 @@ import type {
   AdminEventDTO,
   AdminEventListItemDTO,
   AdminEventListResponse,
+  AdminReportListItemDTO,
+  AdminReportListResponse,
 } from "@civfix/shared"
-import { describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
 import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
 import { detailCard } from "@/test/panes"
+import { DialogHost } from "@/components/shared/dialog"
 import { EventsPage } from "@/features/events/events-page"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -227,12 +231,358 @@ describe("EventsPage", () => {
     expect(within(detailCard()).queryByRole("heading", { name: "Beach sweep" })).not.toBeInTheDocument()
   })
 
-  it("replaces a deep-linked focusId that is not on the first page with the first row (current behavior)", async () => {
+  it("keeps a deep-linked focusId that is not on the first page", async () => {
     const OTHER = listItem({ id: "cccc3333-0000-4000-8000-000000000003", title: "Creek haul" })
     apiMock.listAdminEvents.mockResolvedValue(page([BEACH, PARK]))
     mockDetails(BEACH, PARK, OTHER)
     renderWithQuery(<EventsPage focusId={OTHER.id} />)
-    expect(await within(detailCard()).findByRole("heading", { name: "Beach sweep" })).toBeInTheDocument()
-    expect(within(detailCard()).queryByRole("heading", { name: "Creek haul" })).not.toBeInTheDocument()
+    expect(await within(detailCard()).findByRole("heading", { name: "Creek haul" })).toBeInTheDocument()
+    await screen.findByText("Beach sweep")
+    expect(within(detailCard()).getByRole("heading", { name: "Creek haul" })).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "Beach sweep" })).not.toBeInTheDocument()
+    expect(apiMock.getAdminEvent).toHaveBeenCalledWith({ id: OTHER.id })
+  })
+})
+
+function renderPage(focusId: string | null = null) {
+  return renderWithQuery(
+    <>
+      <EventsPage focusId={focusId} />
+      <DialogHost />
+    </>,
+  )
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => {
+    resolve = r
+  })
+  return { promise, resolve }
+}
+
+const LIVE = listItem({
+  id: "dddd4444-0000-4000-8000-000000000004",
+  title: "Creek haul",
+  status: "in_progress",
+  attendees: 1,
+  bags: 1,
+})
+
+function report(id: string, title: string): AdminReportListItemDTO {
+  return {
+    id,
+    title,
+    category: "trash",
+    status: "published",
+    flagged: false,
+    place: "Ocean Beach",
+    reporter: { id: "u-rita", name: "Rita Gomez", handle: "@rita", joined: "Feb 2026" },
+    confirmations: 0,
+    submitted: { rel: "3h", abs: "Sep 23, 2026, 9:00 AM" },
+    coords: [37.8, -122.26],
+    address: "Great Hwy",
+    hasPhoto: false,
+    thumbnailUrl: null,
+  }
+}
+
+const PIER = report("eeee5555-0000-4000-8000-000000000005", "Trash pile by the pier")
+const DUNE = report("ffff6666-0000-4000-8000-000000000006", "Bottles in the dunes")
+const REPORT_COUNTS = { all: 2, submitted: 2, in_progress: 0, completed: 0, flagged: 0 }
+
+function reportPage(items: AdminReportListItemDTO[], nextCursor: string | null = null) {
+  return { items, nextCursor, counts: REPORT_COUNTS } satisfies AdminReportListResponse
+}
+
+describe("EventsPage correctness and accessibility", () => {
+  beforeEach(() => {
+    useUiStore.setState({ page: "events", focusId: null, toast: null })
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+    return () => {
+      scrollTo.mockRestore()
+      window.history.replaceState(null, "", "#/")
+    }
+  })
+
+  it("selects a row from the keyboard and marks it current", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH, PARK]))
+    mockDetails(BEACH, PARK)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+
+    const parkRow = within(listCard()).getByRole("button", { name: /Park tidy/ })
+    parkRow.focus()
+    await user.keyboard(" ")
+    expect(await within(detailCard()).findByRole("heading", { name: PARK.title })).toBeInTheDocument()
+    expect(parkRow).toHaveAttribute("aria-current", "true")
+    expect(within(listCard()).getByRole("button", { name: /Beach sweep/ })).not.toHaveAttribute(
+      "aria-current",
+    )
+  })
+
+  it("opens the organizer profile with Space", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH]))
+    mockDetails(BEACH)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+
+    within(listCard()).getByRole("button", { name: "Olive" }).focus()
+    await user.keyboard(" ")
+
+    expect(useUiStore.getState()).toMatchObject({ page: "users", focusId: "u-org" })
+  })
+
+  it("names the kind and flagged markers for assistive tech", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH, PARK]))
+    mockDetails(BEACH, PARK)
+    renderPage()
+    await screen.findByText(PARK.title)
+    expect(within(listCard()).getByRole("img", { name: "Flagged" })).toBeInTheDocument()
+    expect(within(listCard()).getAllByRole("img", { name: "Cleanup" })).toHaveLength(2)
+  })
+
+  it("heads the list with the server total for the active filter, not the rows loaded", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH], "ev-2"))
+    mockDetails(BEACH)
+    renderPage()
+    await screen.findByText(BEACH.title)
+    expect(within(listCard()).getByText("7")).toBeInTheDocument()
+  })
+
+  it("keeps an event the operator picked when a filter drops it from the list", async () => {
+    apiMock.listAdminEvents.mockImplementation(async (params: { filter?: string }) =>
+      params.filter === "upcoming" ? page([BEACH]) : page([BEACH, PARK]),
+    )
+    mockDetails(BEACH, PARK)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+
+    await user.click(within(listCard()).getByText(PARK.title))
+    await within(detailCard()).findByRole("heading", { name: PARK.title })
+    await user.click(screen.getByRole("button", { name: /^Upcoming/ }))
+    await waitFor(() =>
+      expect(within(listCard()).queryByText(PARK.title)).not.toBeInTheDocument(),
+    )
+
+    expect(within(detailCard()).getByRole("heading", { name: PARK.title })).toBeInTheDocument()
+  })
+
+  it("does not jump to another event after cancelling the selected one", async () => {
+    let cancelled = false
+    apiMock.listAdminEvents.mockImplementation(async () =>
+      page(cancelled ? [PARK] : [BEACH, PARK]),
+    )
+    mockDetails(BEACH, PARK)
+    apiMock.cancelEvent.mockImplementation(async () => {
+      cancelled = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Cancel event/ }))
+    await user.click(
+      within(await screen.findByRole("dialog")).getByRole("button", { name: "Cancel event" }),
+    )
+
+    expect(await within(detailCard()).findByText("No event selected")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(within(listCard()).queryByText(BEACH.title)).not.toBeInTheDocument(),
+    )
+    expect(within(detailCard()).getByText("No event selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: PARK.title })).not.toBeInTheDocument()
+  })
+
+  it("keeps a cancelled event open while the All list still holds it", async () => {
+    let cancelled = false
+    const beach = () => ({ ...BEACH, status: cancelled ? ("cancelled" as const) : BEACH.status })
+    apiMock.listAdminEvents.mockImplementation(async () => page([beach(), PARK]))
+    apiMock.getAdminEvent.mockImplementation(async ({ id }: { id: string }) =>
+      detail(id === BEACH.id ? beach() : PARK),
+    )
+    apiMock.cancelEvent.mockImplementation(async () => {
+      cancelled = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Cancel event/ }))
+    await user.click(
+      within(await screen.findByRole("dialog")).getByRole("button", { name: "Cancel event" }),
+    )
+
+    await waitFor(() =>
+      expect(within(detailCard()).getByRole("button", { name: /Cancel event/ })).toBeDisabled(),
+    )
+    expect(apiMock.listAdminEvents.mock.calls.length).toBeGreaterThan(1)
+    expect(within(detailCard()).getByRole("heading", { name: BEACH.title })).toBeInTheDocument()
+    expect(within(detailCard()).queryByText("No event selected")).not.toBeInTheDocument()
+  })
+
+  it("shows why Cancel is blocked as visible text tied to the button", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([PARK]))
+    mockDetails(PARK)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: PARK.title })
+
+    const reason = "This event has already ended and can't be cancelled."
+    expect(within(card).getByText(reason)).toBeInTheDocument()
+    expect(within(card).getByRole("button", { name: /Cancel event/ })).toHaveAccessibleDescription(reason)
+  })
+
+  it("posts an attendee update once when Cmd+Enter is pressed again while it is sending", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH]))
+    mockDetails(BEACH)
+    const post = deferred<{ ok: true }>()
+    apiMock.postEventMessage.mockReturnValue(post.promise)
+    const user = userEvent.setup()
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: BEACH.title })
+
+    const box = within(card).getByRole("textbox", { name: "Update for attendees" })
+    await user.type(box, "Meet at the north lot")
+    await user.keyboard("{Meta>}{Enter}{/Meta}")
+    await waitFor(() => expect(within(card).getByRole("button", { name: "Post update" })).toBeDisabled())
+    await user.keyboard("{Meta>}{Enter}{/Meta}")
+    await user.keyboard("{Control>}{Enter}{/Control}")
+
+    expect(apiMock.postEventMessage).toHaveBeenCalledTimes(1)
+    await act(async () => {
+      post.resolve({ ok: true })
+    })
+  })
+
+  it("labels the attendee message box, caps it at the contract length and declares its shortcut", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH]))
+    mockDetails(BEACH)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: BEACH.title })
+
+    expect(screen.getByRole("textbox", { name: "Search events" })).toBeInTheDocument()
+    const box = within(card).getByRole("textbox", { name: "Update for attendees" })
+    expect(box).toHaveAttribute("maxlength", "4000")
+    expect(box).toHaveAttribute("aria-keyshortcuts", "Meta+Enter Control+Enter")
+    expect(within(card).getByRole("button", { name: "Post update" })).toBeInTheDocument()
+  })
+
+  it("pluralizes the bag and attendee counts", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([LIVE]))
+    mockDetails(LIVE)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: LIVE.title })
+
+    expect(within(card).getByText(/bag collected/)).toHaveTextContent("1 bag collected")
+    expect(within(card).getByPlaceholderText("Post an update to 1 attendee…")).toBeInTheDocument()
+  })
+
+  it("refuses a fractional bag count and saves an exponent one at its real value", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([LIVE]))
+    mockDetails(LIVE)
+    apiMock.setEventOutcome.mockResolvedValue({ ok: true })
+    const user = userEvent.setup()
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: LIVE.title })
+    const bags = within(card).getByRole("spinbutton", { name: "Bags collected" })
+    const log = within(card).getByRole("button", { name: "Update outcome" })
+
+    await user.type(bags, "2.5")
+    expect(log).toBeDisabled()
+    await user.click(log)
+    expect(apiMock.setEventOutcome).not.toHaveBeenCalled()
+
+    await user.clear(bags)
+    await user.type(bags, "1e3")
+    await user.click(log)
+    await waitFor(() =>
+      expect(apiMock.setEventOutcome).toHaveBeenCalledWith({ id: LIVE.id, bags: 1000 }),
+    )
+    await waitFor(() => expect(useUiStore.getState().toast?.text).toBe("Outcome logged · 1000 bags"))
+
+    await user.type(bags, "1")
+    await user.click(log)
+    await waitFor(() => expect(useUiStore.getState().toast?.text).toBe("Outcome logged · 1 bag"))
+  })
+
+  it("words the flag toast from the refetched event, not the cached one", async () => {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH]))
+    mockDetails(BEACH)
+    apiMock.flagEvent.mockResolvedValue({ ok: true })
+    const user = userEvent.setup()
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: BEACH.title })
+
+    // Another operator flagged it first, so this toggle cleared the flag and the refetch says so.
+    await user.click(within(card).getByRole("button", { name: "Flag" }))
+
+    await waitFor(() => expect(useUiStore.getState().toast?.text).toBe("#aaaa1111 · flag cleared"))
+  })
+})
+
+describe("EventsPage link-reports picker", () => {
+  beforeEach(() => {
+    useUiStore.setState({ page: "events", focusId: null, toast: null })
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+    return () => {
+      scrollTo.mockRestore()
+      window.history.replaceState(null, "", "#/")
+    }
+  })
+
+  async function openPicker() {
+    apiMock.listAdminEvents.mockResolvedValue(page([BEACH]))
+    mockDetails(BEACH)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: BEACH.title })
+    await user.click(within(detailCard()).getByRole("button", { name: /Link reports/ }))
+    return { user, dialog: screen.getByRole("dialog", { name: "Link reports" }) }
+  }
+
+  it("exposes each report row as a pressed or unpressed toggle", async () => {
+    apiMock.listAdminReports.mockResolvedValue(reportPage([PIER]))
+    const { user, dialog } = await openPicker()
+
+    const row = await within(dialog).findByRole("button", { name: /Trash pile by the pier/, pressed: false })
+    await user.click(row)
+    expect(within(dialog).getByRole("button", { name: /Trash pile by the pier/, pressed: true })).toBe(row)
+  })
+
+  it("loads more reports past the first page", async () => {
+    apiMock.listAdminReports.mockImplementation(async (params: { cursor?: string }) =>
+      params.cursor === "rp-2" ? reportPage([DUNE]) : reportPage([PIER], "rp-2"),
+    )
+    const { user, dialog } = await openPicker()
+    await within(dialog).findByText(PIER.title)
+
+    await user.click(within(dialog).getByRole("button", { name: "Load more" }))
+
+    expect(await within(dialog).findByText(DUNE.title)).toBeInTheDocument()
+    expect(within(dialog).getByText(PIER.title)).toBeInTheDocument()
+    expect(apiMock.listAdminReports).toHaveBeenLastCalledWith({ cursor: "rp-2" })
+  })
+
+  it("searches once per pause in typing, not once per keystroke", async () => {
+    apiMock.listAdminReports.mockResolvedValue(reportPage([PIER]))
+    const { user, dialog } = await openPicker()
+    await within(dialog).findByText(PIER.title)
+
+    await user.type(within(dialog).getByRole("textbox", { name: "Search reports to link" }), "pier")
+
+    await waitFor(() => expect(apiMock.listAdminReports).toHaveBeenLastCalledWith({ q: "pier" }))
+    expect(apiMock.listAdminReports).not.toHaveBeenCalledWith({ q: "p" })
+    expect(apiMock.listAdminReports).not.toHaveBeenCalledWith({ q: "pie" })
   })
 })
diff --git a/apps/admin/src/features/events/events-page.tsx b/apps/admin/src/features/events/events-page.tsx
index ee9b955..ceaa6bd 100644
--- a/apps/admin/src/features/events/events-page.tsx
+++ b/apps/admin/src/features/events/events-page.tsx
@@ -3,7 +3,9 @@
 import * as React from "react"
 import dynamic from "next/dynamic"
 import {
+  PostMessageRequestSchema,
   REPORT_CATEGORY_LABELS,
+  type AdminEventCounts,
   type AdminEventDTO,
   type AdminEventListItemDTO,
   type AdminReportListItemDTO,
@@ -15,6 +17,7 @@ import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-prim
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { confirmDialog } from "@/components/shared/dialog"
 import { usePristineDismiss } from "@/components/shared/backdrop-dismiss"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { useModalFocus } from "@/components/shared/modal-focus"
 import { useDebounced } from "@/hooks/use-debounced"
 import { cancelBlockedFor, EVENT_STATUS_VIEW, eventStatusView } from "@/lib/event-status"
@@ -31,8 +34,12 @@ import {
   useSetEventOutcome,
   useUnlinkReport,
 } from "@/features/events/use-events"
-import { useReportList } from "@/features/reports/use-reports"
-import { useNav, useToast } from "@/store/ui-store"
+import { parseBags } from "@/features/events/event-outcome"
+import { shortId } from "@/features/events/event-id"
+import { pluralize } from "@/features/reports/plural"
+import { SubmitShortcutHint, SUBMIT_KEYSHORTCUTS } from "@/features/reports/submit-shortcut"
+import { useReportListInfinite } from "@/features/reports/use-reports"
+import { useNav } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 
@@ -41,6 +48,10 @@ const LeafletMap = dynamic(() => import("@/components/map/leaflet-map").then((m)
   loading: () => <div className="pi-map-canvas" aria-busy="true" />,
 })
 
+const ATTENDEE_MESSAGE_MAX = PostMessageRequestSchema.shape.body.maxLength ?? undefined
+
+type EventFilter = keyof AdminEventCounts
+
 const TL_ICON: Record<AdminEventDTO["timeline"][number]["kind"], IconComponent> = {
   create: Icons.Pin,
   status: Icons.Clock,
@@ -57,10 +68,6 @@ function firstName(name: string): string {
   return name.split(" ")[0] ?? name
 }
 
-function shortId(id: string): string {
-  return `#${id.replace(/-/g, "").slice(0, 8)}`
-}
-
 function initials(name: string): string {
   return name
     .split(" ")
@@ -132,6 +139,7 @@ function LinkReportsPicker({
   onLink: (reportIds: string[]) => void
 }) {
   const [query, setQuery] = React.useState("")
+  const debouncedQuery = useDebounced(query, 250).trim()
   const [picked, setPicked] = React.useState<Set<string>>(() => new Set())
   const modalRef = useModalFocus<HTMLDivElement>(true)
   const searchRef = React.useRef<HTMLInputElement>(null)
@@ -146,9 +154,13 @@ function LinkReportsPicker({
   // The search text is cheap to retype, so only a selection makes the picker a draft worth keeping.
   const backdrop = usePristineDismiss(onClose, picked.size === 0)
 
-  const listQuery = useReportList({ q: query.trim() || undefined })
+  const listQuery = useReportListInfinite(
+    { q: debouncedQuery || undefined },
+    { keepPreviousData: true },
+  )
   const candidates = React.useMemo<AdminReportListItemDTO[]>(
-    () => (listQuery.data?.items ?? []).filter((r) => !excludeIds.has(r.id)),
+    () =>
+      (listQuery.data?.pages.flatMap((p) => p.items) ?? []).filter((r) => !excludeIds.has(r.id)),
     [listQuery.data, excludeIds],
   )
 
@@ -185,6 +197,7 @@ function LinkReportsPicker({
               ref={searchRef}
               type="text"
               placeholder="Search title, place, reporter…"
+              aria-label="Search reports to link"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
             />
@@ -196,7 +209,13 @@ function LinkReportsPicker({
           ) : candidates.length === 0 ? (
             <EmptyState
               title="No reports to link"
-              sub={query.trim() ? "Try a different search." : "Every matching report is already linked."}
+              sub={
+                debouncedQuery
+                  ? "Try a different search."
+                  : listQuery.hasNextPage
+                    ? "Every report loaded so far is already linked. Load more to see older ones."
+                    : "Every matching report is already linked."
+              }
               icon={<Icons.Search size={20} />}
             />
           ) : (
@@ -207,6 +226,8 @@ function LinkReportsPicker({
                 return (
                   <button
                     key={r.id}
+                    type="button"
+                    aria-pressed={on}
                     className={`evt-pick-row ${on ? "on" : ""}`}
                     onClick={() => toggle(r.id)}
                     title={r.title}
@@ -228,6 +249,16 @@ function LinkReportsPicker({
               })}
             </div>
           )}
+          {!listQuery.isLoading && !listQuery.isError && listQuery.hasNextPage && (
+            <button
+              type="button"
+              className="btn full"
+              disabled={listQuery.isFetchingNextPage}
+              onClick={() => listQuery.fetchNextPage()}
+            >
+              {listQuery.isFetchingNextPage ? "Loading…" : "Load more"}
+            </button>
+          )}
         </div>
         <div className="modal-foot">
           <span className="compose-from">
@@ -265,9 +296,26 @@ function EventRow({
   const statusPill = eventStatusView(item.status)
   const nav = useNav()
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={onClick}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        // A key pressed on the nested organizer link bubbles here; it must stay that link's activation.
+        if (e.target !== e.currentTarget || !isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
+    >
       <div className="leading">
-        <span className="evt-row-ico hue-sun" title={kindView.label}>
+        <span
+          className="evt-row-ico hue-sun"
+          role="img"
+          aria-label={kindView.label}
+          title={kindView.label}
+        >
           <KindIco size={15} />
         </span>
       </div>
@@ -275,7 +323,7 @@ function EventRow({
         <div className="top">
           <span className="title">{item.title}</span>
           {item.flagged && (
-            <span className="rep-flag-dot" title="Flagged">
+            <span className="rep-flag-dot" role="img" aria-label="Flagged" title="Flagged">
               <Icons.Flag size={10} />
             </span>
           )}
@@ -288,24 +336,17 @@ function EventRow({
           <span className="sep">·</span>
           <span>{item.attendees} attending</span>
           <span className="sep">·</span>
-          <span
+          <button
+            type="button"
             className="lnk-inline"
-            role="button"
-            tabIndex={0}
             title={`Open ${item.organizer.name}'s profile`}
             onClick={(e) => {
               e.stopPropagation()
               nav("users", item.organizer.id)
             }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.stopPropagation()
-                nav("users", item.organizer.id)
-              }
-            }}
           >
             {firstName(item.organizer.name)}
-          </span>
+          </button>
         </div>
       </div>
       <div className="trailing">
@@ -316,10 +357,9 @@ function EventRow({
   )
 }
 
-function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (id: string) => void }) {
+function EventDetail({ eventId }: { eventId: string }) {
   const q = useEvent(eventId)
   const nav = useNav()
-  const toast = useToast()
 
   const flag = useFlagEvent()
   const cancel = useCancelEvent()
@@ -331,6 +371,7 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
   const [text, setText] = React.useState("")
   const [bagsInput, setBagsInput] = React.useState("")
   const [pickerOpen, setPickerOpen] = React.useState(false)
+  const cancelBlockedId = React.useId()
 
   if (q.isLoading) return <LoadingState label="Loading event..." />
   if (q.isError) return <ErrorState error={q.error} onRetry={() => q.refetch()} />
@@ -349,44 +390,19 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
 
   const send = () => {
     const body = text.trim()
-    if (!body) return
-    postMessage.mutate(
-      { id: event.id, body },
-      {
-        onSuccess: () => {
-          setText("")
-          toast("Update posted to attendees")
-        },
-      },
-    )
+    if (!body || postMessage.isPending) return
+    postMessage.mutate({ id: event.id, body }, { onSuccess: () => setText("") })
   }
 
+  const bags = parseBags(bagsInput)
+
   const logOutcome = () => {
-    const bags = Number.parseInt(bagsInput, 10)
-    if (!Number.isFinite(bags) || bags < 0) return
-    outcome.mutate(
-      { id: event.id, bags },
-      {
-        onSuccess: () => {
-          setBagsInput("")
-          toast(`Outcome logged · ${bags} bags`)
-        },
-      },
-    )
+    if (bags === null) return
+    outcome.mutate({ id: event.id, bags }, { onSuccess: () => setBagsInput("") })
   }
 
   const onFlag = () => {
-    flag.mutate(
-      { id: event.id },
-      {
-        onSuccess: () =>
-          toast(
-            event.flagged
-              ? `${shortId(event.id)} · flag cleared`
-              : `${shortId(event.id)} · flagged for review`,
-          ),
-      },
-    )
+    flag.mutate({ id: event.id })
   }
 
   const cancelBlockedReason = cancelBlockedFor(event.status)
@@ -401,31 +417,11 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
       cancelLabel: "Keep event",
     })
     if (!ok) return
-    cancel.mutate(
-      { id: event.id },
-      {
-        onSuccess: () => {
-          toast(`${shortId(event.id)} · event cancelled`)
-          onCancelled(event.id)
-        },
-      },
-    )
+    cancel.mutate({ id: event.id })
   }
 
   const onLink = (reportIds: string[]) => {
-    linkReports.mutate(
-      { id: event.id, reportIds },
-      {
-        onSuccess: () => {
-          setPickerOpen(false)
-          toast(
-            reportIds.length === 1
-              ? `${shortId(event.id)} · 1 report linked`
-              : `${shortId(event.id)} · ${reportIds.length} reports linked`,
-          )
-        },
-      },
-    )
+    linkReports.mutate({ id: event.id, reportIds }, { onSuccess: () => setPickerOpen(false) })
   }
 
   const onUnlink = async (report: LinkedReportRef) => {
@@ -436,10 +432,7 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
       confirmLabel: "Unlink",
     })
     if (!ok) return
-    unlinkReport.mutate(
-      { id: event.id, reportId: report.id },
-      { onSuccess: () => toast(`${shortId(event.id)} · report unlinked`) },
-    )
+    unlinkReport.mutate({ id: event.id, reportId: report.id })
   }
 
   return (
@@ -627,7 +620,8 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
               {event.bags > 0 ? (
                 <div className="evt-stat-row">
                   <span className="evt-stat">
-                    <Icons.Trash size={13} /> <b>{event.bags}</b> bags collected
+                    <Icons.Trash size={13} /> <b>{event.bags}</b>{" "}
+                    {event.bags === 1 ? "bag" : "bags"} collected
                   </span>
                 </div>
               ) : (
@@ -645,14 +639,16 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
                   <input
                     type="number"
                     min={0}
+                    step={1}
                     placeholder="bags"
+                    aria-label="Bags collected"
                     value={bagsInput}
                     onChange={(e) => setBagsInput(e.target.value)}
                     style={{ width: 84 }}
                   />
                   <button
                     className="btn sm"
-                    disabled={outcome.isPending || bagsInput.trim() === ""}
+                    disabled={outcome.isPending || bags === null}
                     onClick={logOutcome}
                   >
                     {event.bags > 0 ? "Update outcome" : "Log outcome"}
@@ -717,8 +713,11 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
                 placeholder={
                   event.attendees === 0
                     ? "No attendees to message yet"
-                    : `Post an update to ${event.attendees} attendees…`
+                    : `Post an update to ${pluralize(event.attendees, "attendee")}…`
                 }
+                aria-label="Update for attendees"
+                aria-keyshortcuts={SUBMIT_KEYSHORTCUTS}
+                maxLength={ATTENDEE_MESSAGE_MAX}
                 value={text}
                 disabled={event.attendees === 0}
                 onChange={(e) => setText(e.target.value)}
@@ -739,7 +738,7 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
                     : undefined
                 }
               >
-                <Icons.Send size={13} /> Post update <span className="kbdhint">⌘⏎</span>
+                <Icons.Send size={13} /> Post update <SubmitShortcutHint />
               </button>
               <div className="evt-post-hint">Updates are posted as CivFix, not from your own account.</div>
             </div>
@@ -761,12 +760,17 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
         <button
           className="btn danger"
           disabled={cancel.isPending || cancelBlockedReason !== null}
-          title={cancelBlockedReason ?? undefined}
+          aria-describedby={cancelBlockedReason ? cancelBlockedId : undefined}
           onClick={onCancel}
         >
           <Icons.Trash size={13} /> Cancel event
         </button>
       </div>
+      {cancelBlockedReason && (
+        <div id={cancelBlockedId} className="evt-post-hint">
+          {cancelBlockedReason}
+        </div>
+      )}
 
       { }
       {pickerOpen && event.eventKind === "cleanup" && (
@@ -782,16 +786,13 @@ function EventDetail({ eventId, onCancelled }: { eventId: string; onCancelled: (
 }
 
 export function EventsPage({ focusId }: SectionPageProps) {
-  const [filter, setFilter] = React.useState("all")
+  const [filter, setFilter] = React.useState<EventFilter>("all")
   const [query, setQuery] = React.useState("")
   const [selId, setSelId] = React.useState<string | null>(focusId)
 
   const debouncedQuery = useDebounced(query, 250)
   const listParams = {
-    filter:
-      filter === "all"
-        ? undefined
-        : (filter as "upcoming" | "in_progress" | "completed" | "flagged"),
+    filter: filter === "all" ? undefined : filter,
     q: debouncedQuery.trim() || undefined,
   }
   const listQuery = useEventListInfinite(listParams)
@@ -800,25 +801,36 @@ export function EventsPage({ focusId }: SectionPageProps) {
     [listQuery.data],
   )
 
-  const counts = listQuery.data?.pages[0]?.counts ?? {
+  const serverCounts: AdminEventCounts | null = listQuery.data?.pages[0]?.counts ?? null
+  const counts = serverCounts ?? {
     all: 0,
     upcoming: 0,
     in_progress: 0,
     completed: 0,
     flagged: 0,
   }
-
+  const listCount = serverCounts ? serverCounts[filter] : items.length
+
+  // Only the first load picks an event on the operator's behalf, and a deep-linked event is never
+  // replaced. A pick that a filter or search leaves out stays open (the detail reads it by id); a pick
+  // that drops out of the same list after a refetch (a cancel under the Upcoming chip) clears, so the
+  // pane never jumps to another event's live buttons. Decided only on data fetched for the current params.
+  const listKey = JSON.stringify(listParams)
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-    if (selId && items.length && !items.some((x) => x.id === selId)) setSelId(items[0]!.id)
-  }, [items, selId])
-
-  const onCancelled = (id: string) => {
-    setSelId((cur) => (cur === id ? null : cur))
-  }
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
 
   return (
     <>
@@ -846,7 +858,7 @@ export function EventsPage({ focusId }: SectionPageProps) {
             { value: "flagged", label: "Flagged", count: counts.flagged },
           ]}
           value={filter}
-          onChange={setFilter}
+          onChange={(v) => setFilter(v as EventFilter)}
         />
         <div className="toolbar-spacer" />
         <div className="searchbox">
@@ -854,6 +866,7 @@ export function EventsPage({ focusId }: SectionPageProps) {
           <input
             type="text"
             placeholder="Search title, place, organizer…"
+            aria-label="Search events"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
@@ -865,7 +878,7 @@ export function EventsPage({ focusId }: SectionPageProps) {
           <div className="card-head">
             <h3>Events</h3>
             <div className="spacer" />
-            <span className="meta">{items.length}</span>
+            <span className="meta">{listCount}</span>
           </div>
           <div className="queue-list">
             {listQuery.isLoading ? (
@@ -906,7 +919,7 @@ export function EventsPage({ focusId }: SectionPageProps) {
 
         <section className="card md-detail-card">
           {selId ? (
-            <EventDetail key={selId} eventId={selId} onCancelled={onCancelled} />
+            <EventDetail key={selId} eventId={selId} />
           ) : (
             <EmptyState
               title="No event selected"
diff --git a/apps/admin/src/features/events/use-events-invalidation.test.tsx b/apps/admin/src/features/events/use-events-invalidation.test.tsx
new file mode 100644
index 0000000..50e7661
--- /dev/null
+++ b/apps/admin/src/features/events/use-events-invalidation.test.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { act, renderHook } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { queryKeys } from "@/lib/query"
+import { apiMock } from "@/test/api-mock"
+import { makeTestQueryClient } from "@/test/render"
+import { useCancelEvent, useFlagEvent, useSetEventOutcome } from "@/features/events/use-events"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+async function invalidatedBy<I>(
+  useHook: () => { mutateAsync: (input: I) => Promise<unknown> },
+  input: I,
+): Promise<unknown[]> {
+  const client = makeTestQueryClient()
+  const spy = vi.spyOn(client, "invalidateQueries")
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  )
+  const { result } = renderHook(useHook, { wrapper })
+  await act(() => result.current.mutateAsync(input))
+  return spy.mock.calls.map(([filters]) => filters?.queryKey)
+}
+
+describe("event mutations refresh the sections that show event state", () => {
+  it.each([
+    ["flag", "flagEvent", () => useFlagEvent(), { id: "e1" }],
+    ["cancel", "cancelEvent", () => useCancelEvent(), { id: "e1" }],
+    ["outcome", "setEventOutcome", () => useSetEventOutcome(), { id: "e1", bags: 3 }],
+  ] as const)("%s", async (_name, method, useHook, input) => {
+    apiMock[method].mockResolvedValue({ ok: true })
+    const keys = await invalidatedBy(useHook as never, input)
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        queryKeys.events.all,
+        queryKeys.users.all,
+        queryKeys.orgs.all,
+        queryKeys.pages.all,
+      ]),
+    )
+  })
+})
diff --git a/apps/admin/src/features/events/use-events.ts b/apps/admin/src/features/events/use-events.ts
index 08690eb..cbc458d 100644
--- a/apps/admin/src/features/events/use-events.ts
+++ b/apps/admin/src/features/events/use-events.ts
@@ -1,6 +1,12 @@
 "use client"
 
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+  queryOptions,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
 import type {
   AdminEventListQuery,
   AdminEventListResponse,
@@ -14,11 +20,13 @@ import type {
 
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
-
+import { useUiStore } from "@/store/ui-store"
+import { shortId } from "@/features/events/event-id"
+import { pluralize } from "@/features/reports/plural"
 
 export function useEventList(params: AdminEventListQuery) {
   return useQuery<AdminEventListResponse>({
-    queryKey: queryKeys.events.list(params),
+    queryKey: queryKeys.events.page(params),
     queryFn: () => api.listAdminEvents(params),
   })
 }
@@ -36,25 +44,48 @@ export function useEventListInfinite(params: AdminEventListQuery) {
   })
 }
 
-export function useEvent(id: string | null) {
-  return useQuery<GetAdminEventResponse>({
-    queryKey: queryKeys.events.detail(id ?? ""),
-    queryFn: () => api.getAdminEvent({ id: id as string }),
-    enabled: !!id,
+function eventQuery(id: string) {
+  return queryOptions<GetAdminEventResponse>({
+    queryKey: queryKeys.events.detail(id),
+    queryFn: () => api.getAdminEvent({ id }),
   })
 }
 
+export function useEvent(id: string | null) {
+  return useQuery({ ...eventQuery(id ?? ""), enabled: !!id })
+}
+
+// Profiles, org event tabs and signup pages all render an event's status, turnout and flag.
 function invalidateEvents(qc: ReturnType<typeof useQueryClient>, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.events.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.events.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.pages.all }),
+  ])
 }
 
 export function useFlagEvent() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: FlagEventRequest) => api.flagEvent(input),
-    onSuccess: (_res, { id }) => invalidateEvents(qc, id),
+    // The endpoint toggles, so another operator's flag since this load flips the outcome: word the
+    // toast from the event as it now is.
+    onSuccess: async (_res, { id }) => {
+      await invalidateEvents(qc, id)
+      let event: GetAdminEventResponse
+      try {
+        event = await qc.fetchQuery(eventQuery(id))
+      } catch {
+        // The flag already changed and the refetch failed: skip the toast rather than guess its wording.
+        return
+      }
+      useUiStore
+        .getState()
+        .showToast(event.flagged ? `${shortId(id)} · flagged for review` : `${shortId(id)} · flag cleared`)
+    },
   })
 }
 
@@ -63,6 +94,7 @@ export function useCancelEvent() {
   return useMutation({
     mutationFn: (input: CancelRequest) => api.cancelEvent(input),
     onSuccess: (_res, { id }) => invalidateEvents(qc, id),
+    meta: { successMessage: (_res: unknown, { id }: CancelRequest) => `${shortId(id)} · event cancelled` },
   })
 }
 
@@ -71,6 +103,7 @@ export function usePostEventMessage() {
   return useMutation({
     mutationFn: (input: PostMessageRequest) => api.postEventMessage(input),
     onSuccess: (_res, { id }) => invalidateEvents(qc, id),
+    meta: { successMessage: () => "Update posted to attendees" },
   })
 }
 
@@ -79,6 +112,10 @@ export function useSetEventOutcome() {
   return useMutation({
     mutationFn: (input: SetEventOutcomeRequest) => api.setEventOutcome(input),
     onSuccess: (_res, { id }) => invalidateEvents(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { bags }: SetEventOutcomeRequest) =>
+        `Outcome logged · ${pluralize(bags, "bag")}`,
+    },
   })
 }
 
@@ -86,9 +123,16 @@ export function useLinkReports() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: LinkEventReportsRequest) => api.linkEventReports(input),
-    onSuccess: (_res, { id }) => {
-      invalidateEvents(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.reports.all })
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        invalidateEvents(qc, id),
+        qc.invalidateQueries({ queryKey: queryKeys.reports.all }),
+      ]),
+    meta: {
+      successMessage: (_res: unknown, { id, reportIds }: LinkEventReportsRequest) =>
+        reportIds.length === 1
+          ? `${shortId(id)} · 1 report linked`
+          : `${shortId(id)} · ${reportIds.length} reports linked`,
     },
   })
 }
@@ -97,10 +141,14 @@ export function useUnlinkReport() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: { id: string; reportId: string }) => api.unlinkEventReport(input),
-    onSuccess: (_res, { id, reportId }) => {
-      invalidateEvents(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.reports.detail(reportId) })
-      qc.invalidateQueries({ queryKey: queryKeys.reports.all })
+    onSuccess: (_res, { id, reportId }) =>
+      Promise.all([
+        invalidateEvents(qc, id),
+        qc.invalidateQueries({ queryKey: queryKeys.reports.detail(reportId) }),
+        qc.invalidateQueries({ queryKey: queryKeys.reports.all }),
+      ]),
+    meta: {
+      successMessage: (_res: unknown, { id }: { id: string }) => `${shortId(id)} · report unlinked`,
     },
   })
 }
diff --git a/apps/admin/src/features/home/home-page.test.tsx b/apps/admin/src/features/home/home-page.test.tsx
index a572cf3..2ff0ff3 100644
--- a/apps/admin/src/features/home/home-page.test.tsx
+++ b/apps/admin/src/features/home/home-page.test.tsx
@@ -5,8 +5,10 @@ import type {
   AdminUserListResponse,
   DiscoveryListResponse,
   HomeSummaryResponse,
+  InboundEmailListItemDTO,
   InboxListResponse,
   MailListResponse,
+  MailThreadListItemDTO,
   ModerationListResponse,
 } from "@civfix/shared"
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
@@ -35,6 +37,8 @@ vi.mock("@/components/map/live-map", () => ({
 
 const never = () => new Promise<never>(() => {})
 
+const minutesAgo = (minutes: number) => new Date(Date.now() - minutes * 60_000).toISOString()
+
 const summary = {
   discovery: { queue: 12, reportsWaiting: 30, overSla: 4 },
   reports: { flagged: 5, inProgress: 8, completed: 21 },
@@ -140,43 +144,37 @@ const eventsPage = {
   counts: { all: 1, upcoming: 1, in_progress: 0, completed: 0, flagged: 0 },
 } satisfies AdminEventListResponse
 
-const mailPage = {
-  items: [
-    {
-      id: "m-1",
-      dir: "out",
-      from: "routing@civfix.org",
-      to: "works@la.gov",
-      org: "LA Public Works",
-      subject: "Pothole on Main",
-      preview: "Hello",
-      ts: "5m",
-      unread: false,
-      status: "sent",
-      jurisdictionGeoid: "0644000",
-      reportId: null,
-    },
-  ],
-  nextCursor: null,
-} satisfies MailListResponse
-
-const inboxPage = {
-  items: [
-    {
-      id: "in-1",
-      from: "",
-      recipient: "hello@civfix.org",
-      localPart: "hello",
-      subject: "",
-      preview: "",
-      ts: "9m",
-      status: "unread",
-      unread: true,
-      hasAttachments: false,
-    },
-  ],
-  nextCursor: null,
-} satisfies InboxListResponse
+const outreachThread = {
+  id: "m-1",
+  dir: "out",
+  from: "routing@civfix.org",
+  to: "works@la.gov",
+  org: "LA Public Works",
+  subject: "Pothole on Main",
+  preview: "Hello",
+  ts: minutesAgo(5),
+  unread: false,
+  status: "sent",
+  jurisdictionGeoid: "0644000",
+  reportId: null,
+} satisfies MailThreadListItemDTO
+
+const mailPage = { items: [outreachThread], nextCursor: null } satisfies MailListResponse
+
+const inboundEmail = {
+  id: "in-1",
+  from: "",
+  recipient: "hello@civfix.org",
+  localPart: "hello",
+  subject: "",
+  preview: "",
+  ts: minutesAgo(9),
+  status: "unread",
+  unread: true,
+  hasAttachments: false,
+} satisfies InboundEmailListItemDTO
+
+const inboxPage = { items: [inboundEmail], nextCursor: null } satisfies InboxListResponse
 
 const usersPage = {
   items: [
@@ -252,7 +250,7 @@ afterEach(() => {
 })
 
 describe("HomePage", () => {
-  it("shows the dashboard loading state while the summary is in flight, with the launcher and footer", () => {
+  it("shows the summary loading state and every preview tile's own loading state, with the launcher and footer", () => {
     apiMock.adminHomeSummary.mockImplementation(never)
     apiMock.listDiscovery.mockImplementation(never)
     apiMock.listAdminReports.mockImplementation(never)
@@ -264,8 +262,11 @@ describe("HomePage", () => {
 
     renderWithQuery(<HomePage focusId={null} />)
 
-    expect(screen.getByRole("status")).toHaveTextContent("Loading dashboard...")
-    expect(screen.queryByRole("button", { name: /^Reports/ })).not.toBeInTheDocument()
+    expect(screen.getByText("Loading summary...")).toBeInTheDocument()
+    expect(screen.getAllByText("Loading...")).toHaveLength(6)
+    expect(screen.getByRole("button", { name: /^Reports$/ })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /^Jurisdictions$/ })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /^Moderation$/ })).toBeInTheDocument()
     expect(screen.getByRole("heading", { name: "Host platform" })).toBeInTheDocument()
     expect(screen.getByRole("button", { name: /Organizations/ })).toBeInTheDocument()
     expect(screen.getByRole("button", { name: /Host messaging/ })).toBeInTheDocument()
@@ -273,21 +274,28 @@ describe("HomePage", () => {
     expect(screen.getByRole("link", { name: /Source code \(AGPL-3\.0\)/ })).toBeInTheDocument()
   })
 
-  it("replaces every section tile with one retryable error when the summary fails", async () => {
+  it("keeps every preview tile when the summary fails and shows one retryable summary error", async () => {
     mockAllLoaded()
     apiMock.adminHomeSummary.mockRejectedValue(new Error("summary exploded"))
 
     renderWithQuery(<HomePage focusId={null} />)
 
     const alert = await screen.findByRole("alert")
-    expect(alert).toHaveTextContent("Could not load the dashboard")
+    expect(alert).toHaveTextContent("Could not load the dashboard summary")
     expect(alert).toHaveTextContent("summary exploded")
-    expect(screen.queryByText("Los Angeles")).not.toBeInTheDocument()
+    expect(screen.getAllByRole("alert")).toHaveLength(1)
+    expect(await within(tileOf(/^Jurisdictions$/)).findByText("Los Angeles")).toBeInTheDocument()
+    expect(await within(tileOf(/^Reports$/)).findByText("Broken streetlight")).toBeInTheDocument()
+    expect(await within(tileOf(/^Mail$/)).findByText("LA Public Works")).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /^Analytics$/ })).not.toBeInTheDocument()
     expect(screen.getByRole("heading", { name: "Host platform" })).toBeInTheDocument()
 
     apiMock.adminHomeSummary.mockResolvedValue(summary)
     fireEvent.click(within(alert).getByRole("button", { name: "Try again" }))
-    expect(await screen.findByRole("button", { name: /^Jurisdictions/ })).toBeInTheDocument()
+    expect(
+      await screen.findByRole("button", { name: /^Jurisdictions\s*12 jurisdictions in queue$/ }),
+    ).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /^Analytics$/ })).toBeInTheDocument()
     expect(apiMock.adminHomeSummary).toHaveBeenCalledTimes(2)
   })
 
@@ -327,6 +335,9 @@ describe("HomePage", () => {
       within(analytics).getByRole("button", { name: /^9 Cleanups\s*See analytics$/ }),
     ).toBeInTheDocument()
     expect(within(analytics).queryByText("No data yet")).not.toBeInTheDocument()
+    expect(
+      within(analytics).getByRole("img", { name: "Pins per week, last 4 weeks: 1, 4, 2, 6" }),
+    ).toBeInTheDocument()
   })
 
   it("renders up to two preview rows per tile and the remaining count", async () => {
@@ -338,7 +349,7 @@ describe("HomePage", () => {
       within(tile).getByText("Los Angeles")
       return tile
     })
-    expect(within(discovery).getByText("17 reports · pop 3899k")).toBeInTheDocument()
+    expect(within(discovery).getByText("17 reports · pop 3.9M")).toBeInTheDocument()
     expect(within(discovery).getByText("3d")).toBeInTheDocument()
     expect(within(discovery).getByText("Tiny Town")).toBeInTheDocument()
     expect(within(discovery).getByText("2 reports")).toBeInTheDocument()
@@ -357,8 +368,10 @@ describe("HomePage", () => {
     const mail = tileOf(/^Mail/)
     expect(await within(mail).findByText("LA Public Works")).toBeInTheDocument()
     expect(within(mail).getByText("Pothole on Main")).toBeInTheDocument()
+    expect(within(mail).getByText("5m")).toBeInTheDocument()
     expect(within(mail).getByText("hello@civfix.org")).toBeInTheDocument()
     expect(within(mail).getByText("(no subject)")).toBeInTheDocument()
+    expect(within(mail).getByText("9m")).toBeInTheDocument()
 
     const users = tileOf(/^Users/)
     expect(await within(users).findByText("Sam Rivera")).toBeInTheDocument()
@@ -404,7 +417,7 @@ describe("HomePage", () => {
     expect(await within(tileOf(/^Users/)).findByText("Sam Rivera")).toBeInTheDocument()
   })
 
-  it("shows the mail tile error when only the inbox half fails", async () => {
+  it("keeps the outreach rows and shows a retryable inbox error when only the inbox half fails", async () => {
     mockAllLoaded()
     apiMock.listInbox.mockRejectedValue(new Error("inbox down"))
 
@@ -415,8 +428,65 @@ describe("HomePage", () => {
       within(tile).getByRole("alert")
       return tile
     })
-    expect(within(mail).getByRole("alert")).toHaveTextContent("inbox down")
-    expect(within(mail).queryByText("LA Public Works")).not.toBeInTheDocument()
+    const alert = within(mail).getByRole("alert")
+    expect(alert).toHaveTextContent("Could not load the inbox")
+    expect(alert).toHaveTextContent("inbox down")
+    expect(within(mail).getByText("LA Public Works")).toBeInTheDocument()
+
+    apiMock.listInbox.mockResolvedValue(inboxPage)
+    fireEvent.click(within(alert).getByRole("button", { name: "Try again" }))
+    expect(await within(tileOf(/^Mail/)).findByText("hello@civfix.org")).toBeInTheDocument()
+    expect(within(tileOf(/^Mail/)).queryByRole("alert")).not.toBeInTheDocument()
+    expect(apiMock.listMail).toHaveBeenCalledTimes(1)
+  })
+
+  it("keeps the inbox rows and shows a retryable outreach error when only the outreach half fails", async () => {
+    mockAllLoaded()
+    apiMock.listMail.mockRejectedValue(new Error("outreach down"))
+
+    renderWithQuery(<HomePage focusId={null} />)
+
+    const mail = await waitFor(() => {
+      const tile = tileOf(/^Mail/)
+      within(tile).getByRole("alert")
+      return tile
+    })
+    expect(within(mail).getByRole("alert")).toHaveTextContent("Could not load outreach mail")
+    expect(within(mail).getByRole("alert")).toHaveTextContent("outreach down")
+    expect(within(mail).getByText("hello@civfix.org")).toBeInTheDocument()
+  })
+
+  it("merges outreach and inbound mail newest first with relative ages", async () => {
+    mockAllLoaded()
+    apiMock.listMail.mockResolvedValue({
+      items: [
+        { ...outreachThread, id: "m-1", org: "Older outreach", ts: minutesAgo(120) },
+        { ...outreachThread, id: "m-2", org: "Oldest outreach", ts: minutesAgo(180) },
+      ],
+      nextCursor: null,
+    } satisfies MailListResponse)
+    apiMock.listInbox.mockResolvedValue({
+      items: [{ ...inboundEmail, id: "in-1", from: "resident@example.com", ts: minutesAgo(60) }],
+      nextCursor: null,
+    } satisfies InboxListResponse)
+
+    renderWithQuery(<HomePage focusId={null} />)
+
+    const mail = await waitFor(() => {
+      const tile = tileOf(/^Mail/)
+      within(tile).getByText("resident@example.com")
+      return tile
+    })
+    const rows = within(mail)
+      .getAllByRole("button")
+      .filter((b) => b.classList.contains("slr"))
+    expect(rows.map((r) => r.querySelector(".slr-title")?.textContent)).toEqual([
+      "resident@example.com",
+      "Older outreach",
+    ])
+    expect(rows.map((r) => r.querySelector(".slr-age")?.textContent)).toEqual(["1h", "2h"])
+    expect(within(mail).queryByText("Oldest outreach")).not.toBeInTheDocument()
+    expect(within(mail).queryByText(/T\d\d:\d\d/)).not.toBeInTheDocument()
   })
 
   it("shows an empty line in every preview tile when the lists come back empty", async () => {
diff --git a/apps/admin/src/features/home/home-page.tsx b/apps/admin/src/features/home/home-page.tsx
index 8822498..1872ae3 100644
--- a/apps/admin/src/features/home/home-page.tsx
+++ b/apps/admin/src/features/home/home-page.tsx
@@ -13,11 +13,12 @@ import {
   type MailThreadListItemDTO,
   type ModerationListItemDTO,
   type ReportCategory,
+  relativeAgo,
 } from "@civfix/shared"
 import type { UseQueryResult } from "@tanstack/react-query"
 
 import { Icons, type IconComponent } from "@/components/icons"
-import { SOURCE } from "@/lib/source"
+import { SourceFooter } from "@/components/shell/source-footer"
 import { LiveMap } from "@/components/map/live-map"
 import { Spark } from "@/features/analytics/analytics-charts"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
@@ -85,20 +86,25 @@ interface SectionSummary {
   metrics?: { k: string; v: React.ReactNode; delta?: string }[]
 }
 
-function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
+const NO_COUNT = { lead: null, unit: "" } as const
+
+function counted(lead: number | undefined, unit: string): Pick<SectionSummary, "lead" | "unit"> {
+  return lead === undefined ? NO_COUNT : { lead, unit }
+}
+
+function buildSummaries(d: HomeSummaryResponse | undefined): SectionSummary[] {
   return [
     {
       id: "discovery",
       page: "discovery",
       label: "Jurisdictions",
       hue: "slate",
-      lead: d.discovery.queue,
-      unit: "jurisdictions in queue",
+      ...counted(d?.discovery.queue, "jurisdictions in queue"),
       blurb:
         "Jurisdictions with reports waiting on routing setup — work the queue so neighbors' reports reach the right city department.",
       stats: [
-        { k: "Reports waiting", v: d.discovery.reportsWaiting },
-        { k: "Over SLA", v: d.discovery.overSla, tone: d.discovery.overSla > 0 ? "warn" : null },
+        { k: "Reports waiting", v: d?.discovery.reportsWaiting },
+        { k: "Over SLA", v: d?.discovery.overSla, tone: (d?.discovery.overSla ?? 0) > 0 ? "warn" : null },
       ],
       cta: "Open",
     },
@@ -107,13 +113,12 @@ function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
       page: "reports",
       label: "Reports",
       hue: "lilac",
-      lead: d.reports.flagged,
-      unit: "reports flagged",
+      ...counted(d?.reports.flagged, "reports flagged"),
       blurb:
         "Every report neighbors submit, routed to the right city department — track status and close the loop.",
       stats: [
-        { k: "In progress", v: d.reports.inProgress },
-        { k: "Completed", v: d.reports.completed },
+        { k: "In progress", v: d?.reports.inProgress },
+        { k: "Completed", v: d?.reports.completed },
       ],
       cta: "Open reports",
     },
@@ -122,13 +127,12 @@ function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
       page: "events",
       label: "Events",
       hue: "sun",
-      lead: d.events.upcoming,
-      unit: "upcoming events",
+      ...counted(d?.events.upcoming, "upcoming events"),
       blurb:
         "Community cleanups neighbors organize — track turnout, keep them legit, and message attendees.",
       stats: [
-        { k: "Live now", v: d.events.live },
-        { k: "Attending", v: d.events.attending },
+        { k: "Live now", v: d?.events.live },
+        { k: "Attending", v: d?.events.attending },
       ],
       cta: "Open events",
     },
@@ -137,13 +141,12 @@ function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
       page: "mail",
       label: "Mail",
       hue: "sky",
-      lead: d.mail.unread,
-      unit: "unread messages",
+      ...counted(d?.mail.unread, "unread messages"),
       blurb:
         "Two-way mail with municipal contacts — outbound routing and the replies that come back.",
       stats: [
-        { k: "Needs action", v: d.mail.needsAction, tone: d.mail.needsAction > 0 ? "warn" : null },
-        { k: "Unread", v: d.mail.unread },
+        { k: "Needs action", v: d?.mail.needsAction, tone: (d?.mail.needsAction ?? 0) > 0 ? "warn" : null },
+        { k: "Unread", v: d?.mail.unread },
       ],
       cta: "Open inbox",
     },
@@ -152,12 +155,11 @@ function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
       page: "users",
       label: "Users",
       hue: "sun",
-      lead: d.users.flagged,
-      unit: "accounts flagged",
+      ...counted(d?.users.flagged, "accounts flagged"),
       blurb: "Most neighbors never appear here. The queue surfaces the few who need a trust review.",
       stats: [
-        { k: "High risk", v: d.users.highRisk, tone: d.users.highRisk > 0 ? "alert" : null },
-        { k: "Suspended", v: d.users.suspended },
+        { k: "High risk", v: d?.users.highRisk, tone: (d?.users.highRisk ?? 0) > 0 ? "alert" : null },
+        { k: "Suspended", v: d?.users.suspended },
       ],
       cta: "Review accounts",
     },
@@ -166,12 +168,11 @@ function buildSummaries(d: HomeSummaryResponse): SectionSummary[] {
       page: "analytics",
       label: "Analytics",
       hue: "moss",
-      lead: d.analytics.pinsThisMonth,
-      unit: "pins this month",
+      ...counted(d?.analytics.pinsThisMonth, "pins this month"),
       blurb: "The numbers are the proof civfix works — dropped, routed, resolved, cleaned up.",
-      stats: [{ k: "Cleanups", v: d.analytics.cleanups }],
-      spark: d.analytics.pinsByWeek,
-      metrics: [
+      stats: [{ k: "Cleanups", v: d?.analytics.cleanups }],
+      spark: d?.analytics.pinsByWeek,
+      metrics: d && [
         { k: "Resolved", v: `${d.analytics.resolvedPct}%` },
         { k: "Coverage", v: `${d.analytics.coveragePct}%` },
         { k: "Events", v: d.analytics.eventsThisMonth },
@@ -192,11 +193,13 @@ function initials(name: string): string {
 }
 
 
+const POPULATION_FORMAT = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+})
+
 function compactPop(pop: number): string {
-  if (pop <= 0) return ""
-  if (pop < 1000) return String(pop)
-  const k = pop / 1000
-  return `${k < 10 ? k.toFixed(1) : k.toFixed(0)}k`
+  return pop > 0 ? POPULATION_FORMAT.format(pop) : ""
 }
 
 function discoveryRow(x: DiscoveryTaskDTO): PeekItem {
@@ -240,7 +243,7 @@ function mailRow(t: MailThreadListItemDTO): PeekItem {
     dir: t.dir,
     title: t.org,
     meta: t.subject,
-    age: t.ts,
+    age: relativeAgo(t.ts),
     focusId: t.id,
   }
 }
@@ -252,11 +255,27 @@ function inboxRow(i: InboundEmailListItemDTO): PeekItem {
     hue: "sky",
     title: i.from || i.recipient,
     meta: i.subject || "(no subject)",
-    age: i.ts,
+    age: relativeAgo(i.ts),
     focusId: `inbox:${i.id}`,
   }
 }
 
+function mailPreviewRows(
+  outreach: readonly MailThreadListItemDTO[],
+  inbound: readonly InboundEmailListItemDTO[],
+  limit: number,
+): PeekItem[] {
+  // Both feeds serialize ts with toISOString, so comparing the strings orders them by time.
+  const newestFirst = (a: { ts: string }, b: { ts: string }) => (a.ts < b.ts ? 1 : a.ts > b.ts ? -1 : 0)
+  return [
+    ...outreach.map((t) => ({ ts: t.ts, row: mailRow(t) })),
+    ...inbound.map((i) => ({ ts: i.ts, row: inboxRow(i) })),
+  ]
+    .sort(newestFirst)
+    .slice(0, limit)
+    .map((x) => x.row)
+}
+
 function userRow(u: AdminUserListItemDTO): PeekItem {
   return {
     kind: "avatar",
@@ -344,6 +363,8 @@ interface PreviewState {
   error: unknown
   onRetry: () => void
   hasMore: boolean
+  /** One source of a merged tile failed while the other loaded; its rows still show. */
+  partialError?: { title: string; error: unknown; onRetry: () => void }
 }
 
 function PreviewList({
@@ -369,10 +390,17 @@ function PreviewList({
       </div>
     )
   }
+  const partial = state.partialError && (
+    <ErrorState
+      error={state.partialError.error}
+      onRetry={state.partialError.onRetry}
+      title={state.partialError.title}
+    />
+  )
   if (rows.length === 0) {
     return (
       <div className="stile-list">
-        <div className="slr-empty">Nothing here right now.</div>
+        {partial ?? <div className="slr-empty">Nothing here right now.</div>}
       </div>
     )
   }
@@ -381,6 +409,7 @@ function PreviewList({
       {rows.map((item) => (
         <PreviewRow key={item.focusId} item={item} page={page} />
       ))}
+      {partial}
     </div>
   )
 }
@@ -488,7 +517,7 @@ function SectionTile({
           <Ico size={16} />
         </span>
         <span className="stile-label">{s.label}</span>
-        {!metric && (
+        {!metric && s.unit && (
           <span className="stile-headcount">
             {s.lead === null ? (
               s.unit
@@ -510,7 +539,11 @@ function SectionTile({
             </div>
             {s.spark &&
               (s.spark.some((v) => v > 0) ? (
-                <Spark values={s.spark} hue={s.hue} />
+                <Spark
+                  values={s.spark}
+                  hue={s.hue}
+                  label={`Pins per week, last ${s.spark.length} weeks: ${s.spark.join(", ")}`}
+                />
               ) : (
                 <div className="hub-spark hub-spark-empty">No data yet</div>
               ))}
@@ -583,16 +616,13 @@ export function HomePage(_props: SectionPageProps) {
   const usersQuery = useUserList({ limit: PREVIEW_ROWS + 1 })
   const moderationQuery = useModerationList({ limit: PREVIEW_ROWS + 1 })
 
-  const summaries = React.useMemo(
-    () => (summaryQuery.data ? buildSummaries(summaryQuery.data) : []),
-    [summaryQuery.data],
-  )
+  const summaries = React.useMemo(() => buildSummaries(summaryQuery.data), [summaryQuery.data])
   const mailSummary = React.useMemo<SectionSummary | undefined>(() => {
     const base = summaries.find((s) => s.id === "mail")
     if (!base) return undefined
     const needsAction = summaryQuery.data?.mail.needsAction ?? 0
     const inboxUnread = summaryQuery.data?.inboxUnread
-    const presentation = getMailPreviewPresentation(base.lead ?? 0)
+    const presentation = base.lead === null ? NO_COUNT : getMailPreviewPresentation(base.lead)
     return {
       ...base,
       lead: presentation.lead,
@@ -609,7 +639,9 @@ export function HomePage(_props: SectionPageProps) {
     }
   }, [summaries, summaryQuery.data])
   const moderationItems = moderationQuery.data?.items ?? []
-  const moderationPresentation = getModerationPreviewPresentation(summaryQuery.data?.moderationQueue)
+  const moderationPresentation = summaryQuery.data
+    ? getModerationPreviewPresentation(summaryQuery.data.moderationQueue)
+    : NO_COUNT
   const moderationSummary = React.useMemo<SectionSummary>(
     () => ({
       id: "moderation",
@@ -631,7 +663,7 @@ export function HomePage(_props: SectionPageProps) {
         : summaries.find((s) => s.id === id)
   const summary = summaryQuery.data
 
-  const analytics = byId("analytics")
+  const analytics = summary ? byId("analytics") : undefined
   const previewTiles: PreviewTile[] = []
   const addTile = (
     id: string,
@@ -664,11 +696,11 @@ export function HomePage(_props: SectionPageProps) {
     "cities",
     { feature: true, total: summary?.discovery.queue },
   )
-  const mailPeek = (mailQuery.data?.items ?? []).slice(0, PREVIEW_ROWS).map(mailRow)
-  const inboxPeek = (inboxQuery.data?.items ?? []).slice(0, PREVIEW_ROWS).map(inboxRow)
+  const outreachItems = mailQuery.data?.items ?? []
+  const inboundItems = inboxQuery.data?.items ?? []
   const mailState: PreviewState = {
     isLoading: mailQuery.isLoading || inboxQuery.isLoading,
-    isError: mailQuery.isError || inboxQuery.isError,
+    isError: mailQuery.isError && inboxQuery.isError,
     error: mailQuery.error ?? inboxQuery.error,
     onRetry: () => {
       void mailQuery.refetch()
@@ -677,13 +709,27 @@ export function HomePage(_props: SectionPageProps) {
     hasMore:
       mailQuery.data?.nextCursor != null ||
       inboxQuery.data?.nextCursor != null ||
-      mailPeek.length + inboxPeek.length > PREVIEW_ROWS,
+      outreachItems.length + inboundItems.length > PREVIEW_ROWS,
+    partialError:
+      mailQuery.isError && !inboxQuery.isError
+        ? {
+            title: "Could not load outreach mail",
+            error: mailQuery.error,
+            onRetry: () => void mailQuery.refetch(),
+          }
+        : inboxQuery.isError && !mailQuery.isError
+          ? {
+              title: "Could not load the inbox",
+              error: inboxQuery.error,
+              onRetry: () => void inboxQuery.refetch(),
+            }
+          : undefined,
   }
   addTile(
     "mail",
     "bt-mail",
     mailState,
-    [...mailPeek, ...inboxPeek].slice(0, PREVIEW_ROWS),
+    mailPreviewRows(outreachItems, inboundItems, PREVIEW_ROWS),
     "message",
     "messages",
   )
@@ -740,48 +786,35 @@ export function HomePage(_props: SectionPageProps) {
           <LiveMap />
         </div>
 
-        {summaryQuery.isLoading ? (
-          <div className="bt-cell bt-discovery">
+        {renderTile(tile("discovery"))}
+        <div className="bt-cell bt-analytics">
+          {summaryQuery.isLoading ? (
             <section className="card">
-              <LoadingState label="Loading dashboard..." />
+              <LoadingState label="Loading summary..." />
             </section>
-          </div>
-        ) : summaryQuery.isError ? (
-          <div className="bt-cell bt-discovery">
+          ) : summaryQuery.isError ? (
             <section className="card">
               <ErrorState
                 error={summaryQuery.error}
                 onRetry={() => summaryQuery.refetch()}
-                title="Could not load the dashboard"
+                title="Could not load the dashboard summary"
               />
             </section>
-          </div>
-        ) : (
-          <>
-            {renderTile(tile("discovery"))}
-            {analytics && (
-              <div className="bt-cell bt-analytics">
-                <SectionTile s={analytics} />
-              </div>
-            )}
-            {renderTile(tile("moderation"))}
-            {renderTile(tile("mail"))}
-            {renderTile(tile("users"))}
-            {renderTile(tile("reports"))}
-            {renderTile(tile("events"))}
-          </>
-        )}
+          ) : analytics ? (
+            <SectionTile s={analytics} />
+          ) : null}
+        </div>
+        {renderTile(tile("moderation"))}
+        {renderTile(tile("mail"))}
+        {renderTile(tile("users"))}
+        {renderTile(tile("reports"))}
+        {renderTile(tile("events"))}
 
         <div className="bt-cell bt-host">
           <HostPlatformLauncher />
         </div>
       </div>
-      <footer className="hub-foot">
-        <a href={SOURCE.url} target="_blank" rel="noreferrer noopener">
-          <Icons.ExternalLink size={12} /> Source code (AGPL-3.0)
-        </a>
-        {SOURCE.commit ? <span className="hub-foot-commit">{SOURCE.commit.slice(0, 7)}</span> : null}
-      </footer>
+      <SourceFooter />
     </div>
   )
 }
diff --git a/apps/admin/src/features/hosts/broadcast-log.tsx b/apps/admin/src/features/hosts/broadcast-log.tsx
index 5d5f922..9bd66bf 100644
--- a/apps/admin/src/features/hosts/broadcast-log.tsx
+++ b/apps/admin/src/features/hosts/broadcast-log.tsx
@@ -20,6 +20,10 @@ export const BROADCAST_STATUS_VIEW: Record<BroadcastStatus, { label: string; cls
   failed: { label: "Failed", cls: "status-flag" },
 }
 
+function broadcastStatusView(status: BroadcastStatus): { label: string; cls: string } {
+  return Object.hasOwn(BROADCAST_STATUS_VIEW, status) ? BROADCAST_STATUS_VIEW[status] : { label: status, cls: "priority-low" }
+}
+
 export const BROADCAST_KIND_LABEL: Record<BroadcastKind, string> = {
   host_broadcast: "Host broadcast",
   confirmation: "Confirmation",
@@ -45,7 +49,7 @@ export function BroadcastLog({ items }: { items: AdminBroadcastListItemDTO[] })
   return (
     <div className="bcast-log">
       {items.map((item) => {
-        const view = BROADCAST_STATUS_VIEW[item.status]
+        const view = broadcastStatusView(item.status)
         return (
           <div key={item.id} className="bcast-row">
             <div className="bcast-top">
@@ -55,18 +59,14 @@ export function BroadcastLog({ items }: { items: AdminBroadcastListItemDTO[] })
               <span className="age">{formatDateTime(item.createdAt)}</span>
             </div>
             <div className="bcast-meta">
-              <span
+              <button
+                type="button"
                 className="lnk-inline"
-                role="button"
-                tabIndex={0}
                 title="Open the event"
                 onClick={() => nav("events", item.cleanupId)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") nav("events", item.cleanupId)
-                }}
               >
                 {item.eventTitle ?? "Event"}
-              </span>
+              </button>
               <span className="sep">·</span>
               <span>{item.channels.length > 0 ? item.channels.join(", ") : "no channel"}</span>
               <span className="sep">·</span>
diff --git a/apps/admin/src/features/hosts/hosts-page.test.tsx b/apps/admin/src/features/hosts/hosts-page.test.tsx
index 82d17c4..89072d2 100644
--- a/apps/admin/src/features/hosts/hosts-page.test.tsx
+++ b/apps/admin/src/features/hosts/hosts-page.test.tsx
@@ -14,6 +14,7 @@ import { HostsPage } from "@/features/hosts/hosts-page"
 import { apiMock } from "@/test/api-mock"
 import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -44,6 +45,7 @@ function host(overrides: Partial<AdminHostListItemDTO> & { id: string; name: str
 }
 
 const ada = host({ id: "h-ada", name: "Ada Lovelace", handle: "@ada" })
+const cy = host({ id: "h-cy", name: "Cy Twombly", handle: "@cy" })
 const bob = host({
   id: "h-bob",
   name: "Bob Builder",
@@ -156,6 +158,49 @@ describe("HostsPage list states", () => {
   })
 })
 
+describe("HostsPage list accessibility", () => {
+  it("selects a host row with Enter and with Space and marks the selected row as current", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([ada, bob]))
+    apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    const list = listSection()
+    const adaRow = await within(list).findByRole("button", { name: /^Ada Lovelace/ })
+    const bobRow = within(list).getByRole("button", { name: /^Bob Builder/ })
+    await waitFor(() => expect(adaRow).toHaveAttribute("aria-current", "true"))
+    expect(bobRow).not.toHaveAttribute("aria-current")
+
+    bobRow.focus()
+    await userEvent.keyboard("{Enter}")
+    expect(
+      await within(detailSection()).findByRole("heading", { name: "Bob Builder", level: 2 }),
+    ).toBeInTheDocument()
+    expect(bobRow).toHaveAttribute("aria-current", "true")
+    expect(adaRow).not.toHaveAttribute("aria-current")
+
+    adaRow.focus()
+    await userEvent.keyboard(" ")
+    expect(
+      await within(detailSection()).findByRole("heading", { name: "Ada Lovelace", level: 2 }),
+    ).toBeInTheDocument()
+  })
+
+  it("names the search box", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([]))
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    expect(screen.getByRole("textbox", { name: "Search hosts" })).toBeInTheDocument()
+  })
+
+  it("marks the list count as partial while more hosts can be loaded", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([ada], "cursor-2"))
+    apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    expect(await within(listSection()).findByText("1+")).toBeInTheDocument()
+  })
+})
+
 describe("HostsPage detail pane", () => {
   it("opens the clicked host with its suspension note and broadcast log", async () => {
     apiMock.adminListHosts.mockResolvedValue(page([ada, bob]))
@@ -202,6 +247,23 @@ describe("HostsPage detail pane", () => {
     expect(within(detail).getByText("No events in the loaded log")).toBeInTheDocument()
   })
 
+  it("renders a broadcast status this build does not know as its raw value instead of crashing", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([ada]))
+    apiMock.adminListBroadcasts.mockResolvedValue(
+      broadcasts([
+        broadcast({
+          id: "b-9",
+          cleanupId: "ev-1",
+          status: "throttled" as AdminBroadcastListItemDTO["status"],
+        }),
+      ]),
+    )
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    const detail = detailSection()
+    expect(await within(detail).findByText("throttled")).toHaveClass("priority-low")
+  })
+
   it("shows a broadcast log error inside the detail pane", async () => {
     apiMock.adminListHosts.mockResolvedValue(page([ada]))
     apiMock.adminListBroadcasts.mockRejectedValue(new Error("Log unavailable"))
@@ -212,6 +274,18 @@ describe("HostsPage detail pane", () => {
     expect(within(alert).getByText("Log unavailable")).toBeInTheDocument()
   })
 
+  it("does not ask for more of a broadcast log that failed to load", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([ada]))
+    apiMock.adminListBroadcasts.mockRejectedValue(new Error("Log unavailable"))
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    const detail = detailSection()
+    await within(detail).findByRole("alert")
+    expect(within(detail).queryByText(/Load more of the broadcast log/)).not.toBeInTheDocument()
+    expect(within(detail).queryByText("No events in the loaded log")).not.toBeInTheDocument()
+    expect(within(detail).getByText("No events to show")).toBeInTheDocument()
+  })
+
   it("pages the broadcast log with its cursor", async () => {
     apiMock.adminListHosts.mockResolvedValue(page([ada]))
     apiMock.adminListBroadcasts
@@ -251,10 +325,132 @@ describe("HostsPage detail pane", () => {
     expect(scrollTo).toHaveBeenCalledTimes(2)
   })
 
+  it("opens the event from the broadcast log link with Enter and with Space", async () => {
+    apiMock.adminListHosts.mockResolvedValue(page([ada]))
+    apiMock.adminListBroadcasts.mockResolvedValue(
+      broadcasts([broadcast({ id: "b-1", cleanupId: "ev-9", eventTitle: "Beach day" })]),
+    )
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+    onTestFinished(() => scrollTo.mockRestore())
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    const [logLink] = await within(detailSection()).findAllByRole("button", { name: "Beach day" })
+    for (const key of ["{Enter}", " "]) {
+      window.history.pushState(null, "", "#/hosts")
+      logLink!.focus()
+      await userEvent.keyboard(key)
+      expect(window.location.hash).toBe("#/events/ev-9")
+    }
+  })
+
+  it("clears the selection instead of jumping to another host when a suspended host leaves the Active list", async () => {
+    let suspended = false
+    apiMock.adminListHosts.mockImplementation(async (params: { suspended?: boolean }) =>
+      params.suspended === false ? page(suspended ? [cy] : [ada, cy]) : page([ada, cy]),
+    )
+    apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
+    apiMock.adminSetHostMessagingSuspended.mockImplementation(async () => {
+      suspended = true
+      return { ok: true, suspended: true }
+    })
+    renderWithQuery(
+      <>
+        <HostsPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+
+    await within(listSection()).findByText("Ada Lovelace")
+    await userEvent.click(screen.getByRole("button", { name: "Active" }))
+    expect(
+      await within(detailSection()).findByRole("heading", { name: "Ada Lovelace", level: 2 }),
+    ).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: "Suspend messaging" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Spamming attendees")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Suspend messaging" }))
+
+    await waitFor(() => expect(within(listSection()).queryByText("Ada Lovelace")).not.toBeInTheDocument())
+    const detail = detailSection()
+    expect(await within(detail).findByText("No host selected")).toBeInTheDocument()
+    expect(within(detail).queryByRole("heading", { level: 2 })).not.toBeInTheDocument()
+    expect(within(detail).queryByRole("button", { name: "Suspend messaging" })).not.toBeInTheDocument()
+  })
+
+  it("confirms the suspension once the broadcast log refetch lands after the list dropped the host", async () => {
+    useUiStore.setState({ toast: null })
+    let suspended = false
+    let releaseLog!: (res: AdminBroadcastListResponse) => void
+    const logRefetch = new Promise<AdminBroadcastListResponse>((resolve) => {
+      releaseLog = resolve
+    })
+    apiMock.adminListHosts.mockImplementation(async () => page(suspended ? [cy] : [ada, cy]))
+    apiMock.adminListBroadcasts.mockImplementation(() =>
+      suspended ? logRefetch : Promise.resolve(broadcasts([])),
+    )
+    apiMock.adminSetHostMessagingSuspended.mockImplementation(async () => {
+      suspended = true
+      return { ok: true, suspended: true }
+    })
+    renderWithQuery(
+      <>
+        <HostsPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailSection()).findByRole("heading", { name: "Ada Lovelace", level: 2 })
+
+    await userEvent.click(screen.getByRole("button", { name: "Suspend messaging" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Spamming attendees")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Suspend messaging" }))
+
+    expect(await within(detailSection()).findByText("No host selected")).toBeInTheDocument()
+    await act(async () => {
+      releaseLog(broadcasts([]))
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: "Messaging suspended · Ada Lovelace",
+        tone: "ok",
+      }),
+    )
+  })
+
+  it("clears a deep-linked host too once a suspend drops it from the list", async () => {
+    let suspended = false
+    apiMock.adminListHosts.mockImplementation(async () => page(suspended ? [cy] : [ada, cy]))
+    apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
+    apiMock.adminSetHostMessagingSuspended.mockImplementation(async () => {
+      suspended = true
+      return { ok: true, suspended: true }
+    })
+    renderWithQuery(
+      <>
+        <HostsPage focusId={ada.host.id} />
+        <DialogHost />
+      </>,
+    )
+    expect(
+      await within(detailSection()).findByRole("heading", { name: "Ada Lovelace", level: 2 }),
+    ).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: "Suspend messaging" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Spamming attendees")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Suspend messaging" }))
+
+    await waitFor(() => expect(within(listSection()).queryByText("Ada Lovelace")).not.toBeInTheDocument())
+    const detail = detailSection()
+    expect(await within(detail).findByText("No host selected")).toBeInTheDocument()
+    expect(within(detail).queryByText("That host is not in this window")).not.toBeInTheDocument()
+  })
+
   it("suspends messaging with the typed reason", async () => {
     apiMock.adminListHosts.mockResolvedValue(page([ada]))
     apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
-    apiMock.adminSetHostMessagingSuspended.mockResolvedValue({})
+    apiMock.adminSetHostMessagingSuspended.mockResolvedValue({ ok: true, suspended: true })
     renderWithQuery(
       <>
         <HostsPage focusId={null} />
@@ -348,6 +544,33 @@ describe("HostsPage deep link", () => {
     ).toBeInTheDocument()
   })
 
+  it("does not blame the loaded window when the host list itself failed", async () => {
+    apiMock.adminListHosts.mockRejectedValue(new Error("Hosts backend down"))
+    renderWithQuery(<HostsPage focusId="h-bob" />)
+
+    await within(listSection()).findByRole("alert")
+    const detail = detailSection()
+    expect(within(detail).queryByText("That host is not in this window")).not.toBeInTheDocument()
+    expect(within(detail).getByText("No host selected")).toBeInTheDocument()
+  })
+
+  it("does not show the deep-link explanation after a manual pick is searched out of the list", async () => {
+    apiMock.adminListHosts.mockImplementation(async (params: { q?: string }) =>
+      params.q ? page([]) : page([ada, bob]),
+    )
+    apiMock.adminListBroadcasts.mockResolvedValue(broadcasts([]))
+    renderWithQuery(<HostsPage focusId={null} />)
+
+    await userEvent.click(await within(listSection()).findByText("Bob Builder"))
+    await within(detailSection()).findByRole("heading", { name: "Bob Builder", level: 2 })
+    await userEvent.type(screen.getByRole("textbox", { name: "Search hosts" }), "nobody")
+
+    expect(await within(listSection()).findByText("No hosts here")).toBeInTheDocument()
+    const detail = detailSection()
+    expect(within(detail).queryByText("That host is not in this window")).not.toBeInTheDocument()
+    expect(within(detail).getByText("No host selected")).toBeInTheDocument()
+  })
+
   it("explains when the focused host is not in the loaded window and keeps holding it", async () => {
     apiMock.adminListHosts
       .mockResolvedValueOnce(page([ada], "cursor-2"))
diff --git a/apps/admin/src/features/hosts/hosts-page.tsx b/apps/admin/src/features/hosts/hosts-page.tsx
index 37a5dba..ff5ef21 100644
--- a/apps/admin/src/features/hosts/hosts-page.tsx
+++ b/apps/admin/src/features/hosts/hosts-page.tsx
@@ -7,6 +7,7 @@ import { Icons } from "@/components/icons"
 import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { promptDialog } from "@/components/shared/dialog"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { useDebounced } from "@/hooks/use-debounced"
 import { formatDateTime } from "@/lib/dates"
 import { BroadcastLog } from "@/features/hosts/broadcast-log"
@@ -24,7 +25,7 @@ import {
   useAdminHostsInfinite,
   useSetHostMessagingSuspended,
 } from "@/features/hosts/use-hosts"
-import { useNav, useToast } from "@/store/ui-store"
+import { useNav } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 const FILTER_LABEL: Record<(typeof HOST_FILTERS)[number], string> = {
@@ -43,7 +44,18 @@ function HostRow({
   onClick: () => void
 }) {
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={onClick}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
+    >
       <div className="leading">
         <span className="evt-row-ico hue-bloom" title="Host">
           <Icons.Send size={15} />
@@ -88,7 +100,6 @@ function HostDetail({
   activityWindow: HostActivityWindow
 }) {
   const suspend = useSetHostMessagingSuspended()
-  const toast = useToast()
   const nav = useNav()
   const logParams = React.useMemo(
     () => hostBroadcastParams(row.host.id, activityWindow),
@@ -120,17 +131,10 @@ function HostDetail({
       danger: next,
     })
     if (reason === null || reason.trim() === "") return
-    suspend.mutate(
-      { id: row.host.id, suspended: next, reason: reason.trim() },
-      {
-        onSuccess: () =>
-          toast(
-            next
-              ? `Messaging suspended · ${row.host.name}`
-              : `Messaging restored · ${row.host.name}`,
-          ),
-      },
-    )
+    suspend.mutate({
+      request: { id: row.host.id, suspended: next, reason: reason.trim() },
+      hostName: row.host.name,
+    })
   }
 
   return (
@@ -236,6 +240,12 @@ function HostDetail({
         <div className="sub-body">
           {logQuery.isLoading ? (
             <LoadingState label="Reading the broadcast log..." />
+          ) : logQuery.isError ? (
+            <EmptyState
+              title="No events to show"
+              sub="The broadcast log did not load. Try again above to see which events this host messaged."
+              icon={<Icons.Calendar size={20} />}
+            />
           ) : events.length === 0 ? (
             <EmptyState
               title="No events in the loaded log"
@@ -287,6 +297,7 @@ export function HostsPage({ focusId }: SectionPageProps) {
   const [filter, setFilter] = React.useState("all")
   const [query, setQuery] = React.useState("")
   const [selId, setSelId] = React.useState<string | null>(focusId)
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
 
   const debouncedQuery = useDebounced(query, 250)
   const activityWindow = React.useMemo(() => hostActivityWindow(), [])
@@ -303,15 +314,28 @@ export function HostsPage({ focusId }: SectionPageProps) {
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
+  // Only the first load picks a host on the operator's behalf, and a deep-linked host is never
+  // replaced. There is no single-host read, so a pick that a filter or search leaves out clears, and so
+  // does any host that drops out of the same list after a refetch (a suspend under the Active chip): the
+  // action buttons never land on a host nobody chose. Decided only on data fetched for the current params.
+  const listKey = JSON.stringify(listParams)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && rows.length) setSelId(rows[0]!.host.id)
-    if (selId && selId !== focusId && rows.length && !rows.some((r) => r.host.id === selId)) {
-      setSelId(rows[0]!.host.id)
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && rows.length) setSelId(rows[0]!.host.id)
+      return
+    }
+    setAutoPick(false)
+    if (rows.some((r) => r.host.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (selId !== focusId || (seenIn.current?.id === selId && seenIn.current.list === listKey)) {
+      setSelId(null)
     }
-  }, [rows, selId, focusId])
+  }, [listQuery.isSuccess, listQuery.isFetching, rows, selId, focusId, listKey, autoPick])
 
   const selected = rows.find((r) => r.host.id === selId) ?? null
-  const missingLink = selected === null && selId !== null && !listQuery.isLoading
+  const missingLink =
+    selected === null && selId !== null && selId === focusId && listQuery.isSuccess
 
   return (
     <>
@@ -339,6 +363,7 @@ export function HostsPage({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search hosts"
             placeholder="Search host name or handle…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -351,7 +376,12 @@ export function HostsPage({ focusId }: SectionPageProps) {
           <div className="card-head">
             <h3>Hosts</h3>
             <div className="spacer" />
-            <span className="meta">{rows.length}</span>
+            {listQuery.isSuccess && (
+              <span className="meta">
+                {rows.length}
+                {listQuery.hasNextPage ? "+" : ""}
+              </span>
+            )}
           </div>
           <div className="queue-list">
             {listQuery.isLoading ? (
diff --git a/apps/admin/src/features/hosts/use-hosts.ts b/apps/admin/src/features/hosts/use-hosts.ts
index 6b5db11..2ef5e24 100644
--- a/apps/admin/src/features/hosts/use-hosts.ts
+++ b/apps/admin/src/features/hosts/use-hosts.ts
@@ -7,6 +7,7 @@ import type {
   AdminHostListQuery,
   AdminHostListResponse,
   SetHostMessagingSuspendedRequest,
+  SetHostMessagingSuspendedResponse,
 } from "@civfix/shared"
 
 import { api } from "@/lib/api"
@@ -38,16 +39,28 @@ export function useAdminBroadcastsInfinite(params: AdminBroadcastListQuery) {
   })
 }
 
+export interface SetHostMessagingSuspendedVariables {
+  request: SetHostMessagingSuspendedRequest
+  hostName: string
+}
+
 export function useSetHostMessagingSuspended() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: SetHostMessagingSuspendedRequest) =>
-      api.adminSetHostMessagingSuspended(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.hosts.all })
-      qc.invalidateQueries({ queryKey: queryKeys.users.detail(id) })
-      qc.invalidateQueries({ queryKey: queryKeys.users.all })
-      qc.invalidateQueries({ queryKey: queryKeys.audit.all })
+    mutationFn: ({ request }: SetHostMessagingSuspendedVariables) =>
+      api.adminSetHostMessagingSuspended(request),
+    onSuccess: (_res, { request: { id } }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.hosts.all }),
+        qc.invalidateQueries({ queryKey: queryKeys.users.detail(id) }),
+        qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+        qc.invalidateQueries({ queryKey: queryKeys.audit.all }),
+      ]),
+    meta: {
+      successMessage: (
+        { suspended }: SetHostMessagingSuspendedResponse,
+        { hostName }: SetHostMessagingSuspendedVariables,
+      ) => (suspended ? `Messaging suspended · ${hostName}` : `Messaging restored · ${hostName}`),
     },
   })
 }
diff --git a/apps/admin/src/features/inbox/attachment-chip.tsx b/apps/admin/src/features/inbox/attachment-chip.tsx
index 19c95c1..0ee1597 100644
--- a/apps/admin/src/features/inbox/attachment-chip.tsx
+++ b/apps/admin/src/features/inbox/attachment-chip.tsx
@@ -3,12 +3,9 @@
 import type { MailAttachment } from "@civfix/shared"
 
 import { Icons } from "@/components/icons"
+import { formatBytes } from "@/features/inbox/attachments"
 import { isWebUrl } from "@/lib/external-url"
 
-function sizeLabel(bytes: number): string {
-  return `${(bytes / 1024).toFixed(0)}k`
-}
-
 // An attachment key comes from mail the platform received, so only an http(s) url becomes a link;
 // any other scheme (javascript:, data:) or a bare storage key renders inert.
 export function AttachmentChip({ attachment }: { attachment: MailAttachment }) {
@@ -16,7 +13,7 @@ export function AttachmentChip({ attachment }: { attachment: MailAttachment }) {
     return (
       <span className="btn sm attachment-chip unlinked">
         {attachment.filename}
-        <span className="attachment-meta">{sizeLabel(attachment.size)}</span>
+        <span className="attachment-meta">{formatBytes(attachment.size)}</span>
         <span className="attachment-meta">link unavailable</span>
       </span>
     )
@@ -29,7 +26,7 @@ export function AttachmentChip({ attachment }: { attachment: MailAttachment }) {
       rel="noopener noreferrer"
     >
       <Icons.ExternalLink size={13} /> {attachment.filename}
-      <span className="attachment-meta">{sizeLabel(attachment.size)}</span>
+      <span className="attachment-meta">{formatBytes(attachment.size)}</span>
     </a>
   )
 }
diff --git a/apps/admin/src/features/inbox/attachments.ts b/apps/admin/src/features/inbox/attachments.ts
new file mode 100644
index 0000000..f68185f
--- /dev/null
+++ b/apps/admin/src/features/inbox/attachments.ts
@@ -0,0 +1,17 @@
+const KB = 1024
+const MB = KB * 1024
+
+// Attachment links are presigned GET urls the API signs for 15 minutes (MEDIA_GET_URL_TTL_SEC), so a
+// reader left open re-reads its message before the links it shows go dead.
+const ATTACHMENT_URL_REFRESH_MS = 10 * 60_000
+
+export function formatBytes(bytes: number): string {
+  if (bytes < KB) return `${bytes} B`
+  if (bytes < MB) return `${Math.round(bytes / KB)} KB`
+  const mb = bytes / MB
+  return `${mb < 10 ? mb.toFixed(1).replace(/\.0$/, "") : Math.round(mb)} MB`
+}
+
+export function attachmentRefreshInterval(attachmentCount: number): number | false {
+  return attachmentCount > 0 ? ATTACHMENT_URL_REFRESH_MS : false
+}
\ No newline at end of file
diff --git a/apps/admin/src/features/inbox/inbox-feed.test.ts b/apps/admin/src/features/inbox/inbox-feed.test.ts
index 2ffc7fa..966ece3 100644
--- a/apps/admin/src/features/inbox/inbox-feed.test.ts
+++ b/apps/admin/src/features/inbox/inbox-feed.test.ts
@@ -27,19 +27,17 @@ describe("inbox feed keys", () => {
 })
 
 describe("selected feed item", () => {
-  const picked = { item: { source: "reply" as const, id: "m1", unread: true }, view: "unread:" }
-  const listed = { ...picked.item, unread: false }
+  const picked = { source: "reply" as const, id: "m1", unread: true }
+  const listed = { ...picked, unread: false }
 
-  it("reads the listed row, and keeps the picked row once marking it read drops it", () => {
-    expect(resolveFeedSelection(new Map([["reply:m1", listed]]), picked, "reply:m1", "unread:")).toBe(listed)
-    expect(resolveFeedSelection(new Map(), picked, "reply:m1", "unread:")).toBe(picked.item)
+  it("reads the listed row, and keeps the picked row once a filter or an action drops it", () => {
+    expect(resolveFeedSelection(new Map([["reply:m1", listed]]), picked, "reply:m1")).toBe(listed)
+    expect(resolveFeedSelection(new Map(), picked, "reply:m1")).toBe(picked)
   })
 
-  it("resolves nothing for an unlisted key unless it was picked under the same filter and search", () => {
-    expect(resolveFeedSelection(new Map(), picked, "reply:m1", "replies:")).toBeUndefined()
-    expect(resolveFeedSelection(new Map(), picked, "reply:m1", "unread:city")).toBeUndefined()
-    expect(resolveFeedSelection(new Map(), picked, "reply:m2", "unread:")).toBeUndefined()
-    expect(resolveFeedSelection(new Map(), null, "email:e1", "unread:")).toBeUndefined()
+  it("resolves nothing for a key that was neither listed nor picked", () => {
+    expect(resolveFeedSelection(new Map(), picked, "reply:m2")).toBeUndefined()
+    expect(resolveFeedSelection(new Map(), null, "email:e1")).toBeUndefined()
   })
 })
 
diff --git a/apps/admin/src/features/inbox/inbox-feed.ts b/apps/admin/src/features/inbox/inbox-feed.ts
index 0bea9c5..8d1f894 100644
--- a/apps/admin/src/features/inbox/inbox-feed.ts
+++ b/apps/admin/src/features/inbox/inbox-feed.ts
@@ -36,12 +36,11 @@ export function parseFeedKey(key: string): { source: FeedSource; id: string } |
 
 export function resolveFeedSelection<T extends { source: FeedSource; id: string }>(
   feedByKey: ReadonlyMap<string, T>,
-  picked: { item: T; view: string } | null,
+  picked: T | null,
   selKey: string | null,
-  view: string,
 ): T | undefined {
   const listed = selKey ? feedByKey.get(selKey) : undefined
-  return listed ?? (picked?.view === view && feedKey(picked.item) === selKey ? picked.item : undefined)
+  return listed ?? (picked && feedKey(picked) === selKey ? picked : undefined)
 }
 
 export function isInboxFeedFilter(value: string): value is InboxFeedFilter {
diff --git a/apps/admin/src/features/inbox/inbox-views.test.tsx b/apps/admin/src/features/inbox/inbox-views.test.tsx
new file mode 100644
index 0000000..5599682
--- /dev/null
+++ b/apps/admin/src/features/inbox/inbox-views.test.tsx
@@ -0,0 +1,118 @@
+import { screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { InboundEmailDTO, InboxFeedEmailItemDTO } from "@civfix/shared"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { apiMock } from "@/test/api-mock"
+import { startFakeTimersWithUser } from "@/test/fake-timers"
+import { renderWithQuery } from "@/test/render"
+import { InboxReader, InboxRow } from "@/features/inbox/inbox-views"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+const TS = "2026-09-20T15:00:00.000Z"
+
+const EMAIL = {
+  source: "email",
+  id: "i-1",
+  from: "resident@example.com",
+  recipient: "support@civfix.org",
+  localPart: "support",
+  subject: "Photos of the dumping",
+  preview: "See attached",
+  ts: TS,
+  status: "unread",
+  unread: true,
+  hasAttachments: true,
+} satisfies InboxFeedEmailItemDTO
+
+const MESSAGE = {
+  id: "i-1",
+  from: "resident@example.com",
+  recipient: "support@civfix.org",
+  localPart: "support",
+  subject: "Photos of the dumping",
+  preview: "See attached",
+  ts: TS,
+  status: "read",
+  unread: false,
+  hasAttachments: true,
+  bodyText: "See attached",
+  bodyHtml: null,
+  messageId: null,
+  attachments: [
+    { key: "https://media.civfix.org/att/1?sig=a", filename: "note.txt", size: 300 },
+    { key: "https://media.civfix.org/att/2?sig=b", filename: "photo.jpg", size: 20_480 },
+    { key: "https://media.civfix.org/att/3?sig=c", filename: "video.mp4", size: 20 * 1024 * 1024 },
+  ],
+} satisfies InboundEmailDTO
+
+describe("InboxRow", () => {
+  it("is a keyboard-operable row that marks itself current when selected", async () => {
+    const onClick = vi.fn()
+    const { rerender } = renderWithQuery(<InboxRow item={EMAIL} selected={false} onClick={onClick} />)
+    const row = screen.getByRole("button", { name: /Photos of the dumping/ })
+    expect(row).toHaveAttribute("tabindex", "0")
+    expect(row).not.toHaveAttribute("aria-current")
+
+    row.focus()
+    await userEvent.keyboard("{Enter}")
+    await userEvent.keyboard(" ")
+    expect(onClick).toHaveBeenCalledTimes(2)
+
+    rerender(<InboxRow item={EMAIL} selected onClick={onClick} />)
+    expect(screen.getByRole("button", { name: /Photos of the dumping/ })).toHaveAttribute(
+      "aria-current",
+      "true",
+    )
+  })
+
+  it("names the attachment marker and does not dim the recipient below the preview text", () => {
+    renderWithQuery(<InboxRow item={EMAIL} selected={false} onClick={() => {}} />)
+    expect(screen.getByRole("img", { name: "Has attachments" })).toBeInTheDocument()
+    expect(screen.getByText("support")).not.toHaveStyle({ opacity: "0.6" })
+  })
+
+  it("leaves the timestamp tooltip empty for an unparseable time", () => {
+    renderWithQuery(<InboxRow item={{ ...EMAIL, ts: "" }} selected={false} onClick={() => {}} />)
+    expect(screen.queryByTitle("Invalid Date")).not.toBeInTheDocument()
+  })
+})
+
+describe("InboxReader", () => {
+  it("labels attachment sizes in bytes, KB and MB", async () => {
+    apiMock.getInboxMessage.mockResolvedValue(MESSAGE)
+    renderWithQuery(<InboxReader id="i-1" />)
+
+    expect(await screen.findByRole("link", { name: /note\.txt/ })).toHaveTextContent("300 B")
+    expect(screen.getByRole("link", { name: /photo\.jpg/ })).toHaveTextContent("20 KB")
+    expect(screen.getByRole("link", { name: /video\.mp4/ })).toHaveTextContent("20 MB")
+  })
+
+  it("re-reads an open message before its presigned attachment links expire", async () => {
+    startFakeTimersWithUser()
+    apiMock.getInboxMessage.mockResolvedValue(MESSAGE)
+    renderWithQuery(<InboxReader id="i-1" />)
+    await screen.findByRole("link", { name: /note\.txt/ })
+    expect(apiMock.getInboxMessage).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(10 * 60_000)
+
+    await waitFor(() => expect(apiMock.getInboxMessage).toHaveBeenCalledTimes(2))
+  })
+
+  it("does not re-read an open message that has no attachments", async () => {
+    startFakeTimersWithUser()
+    apiMock.getInboxMessage.mockResolvedValue({ ...MESSAGE, hasAttachments: false, attachments: [] })
+    renderWithQuery(<InboxReader id="i-1" />)
+    await screen.findByText("See attached", { selector: "p" })
+
+    await vi.advanceTimersByTimeAsync(30 * 60_000)
+
+    expect(apiMock.getInboxMessage).toHaveBeenCalledTimes(1)
+  })
+})
\ No newline at end of file
diff --git a/apps/admin/src/features/inbox/inbox-views.tsx b/apps/admin/src/features/inbox/inbox-views.tsx
index 7c04bef..e234bb6 100644
--- a/apps/admin/src/features/inbox/inbox-views.tsx
+++ b/apps/admin/src/features/inbox/inbox-views.tsx
@@ -11,14 +11,13 @@ import {
 
 import { Icons } from "@/components/icons"
 import { EmptyState } from "@/components/shared/page-primitives"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { AttachmentList } from "@/features/inbox/attachment-chip"
 import { useInboxMessage, useSetInboxStatus } from "@/features/inbox/use-inbox"
 import { replyOriginLabel } from "@/features/inbox/inbox-feed"
 import { AuthVerdictBadge, PublicationBadge } from "@/features/mail/mail-badges"
-import { MAIL_STATUS_CLS } from "@/features/mail/mail-presentation"
-import { useToast } from "@/store/ui-store"
-
+import { MAIL_STATUS_CLS, tsTitle } from "@/features/mail/mail-presentation"
 
 const STATUS_CLS: Record<InboundEmailStatus, string> = {
   unread: "status-flag",
@@ -39,7 +38,15 @@ export function InboxRow({
   return (
     <div
       className={`mail-row ${selected ? "selected" : ""} ${item.unread ? "unread" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
     >
       <span className="mail-dir in">
         <Icons.ArrowDown size={13} />
@@ -49,20 +56,26 @@ export function InboxRow({
           <span className="mail-from">
             {(isEmail ? item.from : item.org || item.from) || "(unknown sender)"}
           </span>
-          <span className="mail-ts mono" title={new Date(item.ts).toLocaleString()}>
+          <span className="mail-ts mono" title={tsTitle(item.ts)}>
             {relativeAgo(item.ts)}
           </span>
         </div>
         <div className="mail-subject">
           {item.subject || "(no subject)"}
           {item.hasAttachments && (
-            <span className="mono" title="has attachments" style={{ marginLeft: 6, opacity: 0.6 }}>
+            <span
+              className="mono"
+              role="img"
+              aria-label="Has attachments"
+              title="Has attachments"
+              style={{ marginLeft: 6, color: "var(--ink-3)" }}
+            >
               <Icons.ExternalLink size={11} />
             </span>
           )}
         </div>
         <div className="mail-preview">
-          <span className="mono" style={{ opacity: 0.6 }}>
+          <span className="mono">
             {isEmail ? item.localPart || item.recipient : replyOriginLabel(item)}
           </span>{" "}
           {item.preview}
@@ -89,7 +102,6 @@ export function InboxRow({
 
 export function InboxReader({ id }: { id: string }) {
   const q = useInboxMessage(id)
-  const toast = useToast()
   const setStatus = useSetInboxStatus()
 
   if (q.isLoading) return <LoadingState label="Loading message..." />
@@ -97,10 +109,8 @@ export function InboxReader({ id }: { id: string }) {
   const sel = q.data
   if (!sel) return <EmptyState title="No message selected" icon={<Icons.Inbox size={20} />} />
 
-  const markRead = () =>
-    setStatus.mutate({ id: sel.id, status: "read" }, { onSuccess: () => toast("Marked read") })
-  const archive = () =>
-    setStatus.mutate({ id: sel.id, status: "archived" }, { onSuccess: () => toast("Archived") })
+  const markRead = () => setStatus.mutate({ id: sel.id, status: "read" })
+  const archive = () => setStatus.mutate({ id: sel.id, status: "archived" })
 
   return (
     <div className="mail-reader">
diff --git a/apps/admin/src/features/inbox/use-inbox.ts b/apps/admin/src/features/inbox/use-inbox.ts
index 22914d4..13f2c92 100644
--- a/apps/admin/src/features/inbox/use-inbox.ts
+++ b/apps/admin/src/features/inbox/use-inbox.ts
@@ -15,13 +15,14 @@ import type {
   SetInboxStatusRequest,
 } from "@civfix/shared"
 
+import { attachmentRefreshInterval } from "@/features/inbox/attachments"
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
 
 
 export function useInboxList(params: InboxListQuery) {
   return useQuery<InboxListResponse>({
-    queryKey: queryKeys.inbox.list(params),
+    queryKey: queryKeys.inbox.page(params),
     queryFn: () => api.listInbox(params),
   })
 }
@@ -61,19 +62,33 @@ export function useInboxMessage(id: string | null) {
     queryKey: queryKeys.inbox.detail(id ?? ""),
     queryFn: () => api.getInboxMessage({ id: id as string }),
     enabled: !!id,
+    refetchInterval: (query) => attachmentRefreshInterval(query.state.data?.attachments.length ?? 0),
   })
 }
 
 function invalidateInbox(qc: ReturnType<typeof useQueryClient>, id?: string) {
-  if (id) qc.invalidateQueries({ queryKey: queryKeys.inbox.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.inbox.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    id ? qc.invalidateQueries({ queryKey: queryKeys.inbox.detail(id) }) : null,
+    qc.invalidateQueries({ queryKey: queryKeys.inbox.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+  ])
+}
+
+const STATUS_TOAST: Record<SetInboxStatusRequest["status"], string | null> = {
+  unread: null,
+  read: "Marked read",
+  archived: "Archived",
 }
 
-export function useSetInboxStatus() {
+/** `quiet` is for a status change the operator did not ask for, such as reading a message by opening it. */
+export function useSetInboxStatus({ quiet = false }: { quiet?: boolean } = {}) {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: SetInboxStatusRequest) => api.setInboxStatus(input),
     onSuccess: (_res, { id }) => invalidateInbox(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { status }: SetInboxStatusRequest) =>
+        quiet ? null : STATUS_TOAST[status],
+    },
   })
 }
diff --git a/apps/admin/src/features/mail/forward-template-modal.tsx b/apps/admin/src/features/mail/forward-template-modal.tsx
index 7766253..90fda8d 100644
--- a/apps/admin/src/features/mail/forward-template-modal.tsx
+++ b/apps/admin/src/features/mail/forward-template-modal.tsx
@@ -14,7 +14,7 @@ import {
 import { Icons } from "@/components/icons"
 import { usePristineDismiss } from "@/components/shared/backdrop-dismiss"
 import { useModalFocus } from "@/components/shared/modal-focus"
-import { toAppError } from "@/lib/api"
+import { errorMessage } from "@/lib/error-messages"
 import { usePreviewForwardTemplate } from "@/features/mail/use-mail"
 import {
   resolveTemplateSeed,
@@ -195,7 +195,7 @@ function ForwardTemplateEditor({
             {preview.isPending && <div className="hint">Rendering a preview…</div>}
             {preview.isError && !preview.isPending && (
               <div className="tpl-issue" role="alert">
-                {toAppError(preview.error).message}
+                {errorMessage(preview.error)}
               </div>
             )}
           </div>
diff --git a/apps/admin/src/features/mail/mail-attachments.test.tsx b/apps/admin/src/features/mail/mail-attachments.test.tsx
index 6b963cc..b8a46a1 100644
--- a/apps/admin/src/features/mail/mail-attachments.test.tsx
+++ b/apps/admin/src/features/mail/mail-attachments.test.tsx
@@ -1,6 +1,7 @@
-import { screen } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import type {
   GetForwardTemplateDefaultResponse,
+  InboxFeedResponse,
   InboxListResponse,
   MailListResponse,
   MailStatsResponse,
@@ -11,6 +12,7 @@ import { describe, expect, it, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
+import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
 import { detailCard } from "@/test/panes"
 import { MailPage } from "@/features/mail/mail-page"
@@ -88,4 +90,30 @@ describe("MailReader attachments", () => {
     expect(photo).not.toHaveTextContent("link unavailable")
     expect(document.querySelector('a[href^="javascript:"]')).toBeNull()
   })
+
+  it("re-reads an open thread with attachments before their presigned links expire", async () => {
+    startFakeTimersWithUser()
+    apiMock.getMailStats.mockResolvedValue({
+      unread: 0,
+      threads: 1,
+      sent: 0,
+      bounced: 0,
+      failed: 0,
+    } satisfies MailStatsResponse)
+    apiMock.getForwardTemplateDefault.mockResolvedValue({
+      subjectTemplate: null,
+      bodyTemplate: null,
+      updatedAt: null,
+    } satisfies GetForwardTemplateDefaultResponse)
+    apiMock.listInboxFeed.mockResolvedValue({ items: [], nextCursor: null } satisfies InboxFeedResponse)
+    apiMock.listMail.mockResolvedValue({ items: [THREAD], nextCursor: null } satisfies MailListResponse)
+    apiMock.getMailThread.mockResolvedValue(DETAIL)
+    renderWithQuery(<MailPage focusId={null} />)
+    await screen.findByRole("link", { name: /pothole\.jpg/ })
+    expect(apiMock.getMailThread).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(10 * 60_000)
+
+    await waitFor(() => expect(apiMock.getMailThread).toHaveBeenCalledTimes(2))
+  })
 })
diff --git a/apps/admin/src/features/mail/mail-errors.test.tsx b/apps/admin/src/features/mail/mail-errors.test.tsx
new file mode 100644
index 0000000..67b27d7
--- /dev/null
+++ b/apps/admin/src/features/mail/mail-errors.test.tsx
@@ -0,0 +1,214 @@
+import { readdirSync, readFileSync } from "node:fs"
+
+import { screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type {
+  GetForwardTemplateDefaultResponse,
+  InboxFeedResponse,
+  MailListResponse,
+  MailStatsResponse,
+  MailThreadDTO,
+} from "@civfix/shared"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { DialogHost } from "@/components/shared/dialog"
+import { makeQueryClient } from "@/lib/query"
+import { useUiStore, type ToastTone } from "@/store/ui-store"
+import { apiMock } from "@/test/api-mock"
+import { renderWithQuery } from "@/test/render"
+import { detailCard } from "@/test/panes"
+import { MailPage } from "@/features/mail/mail-page"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+const TS = "2026-09-20T15:00:00.000Z"
+
+function threadOf(over: Partial<MailThreadDTO>): MailThreadDTO {
+  return {
+    id: "t-1",
+    dir: "in",
+    from: "clerk@oaklandca.gov",
+    to: "outreach@civfix.org",
+    org: "Oakland Public Works",
+    subject: "Pothole on 5th Ave",
+    preview: "Can your crew take a look?",
+    ts: TS,
+    unread: false,
+    status: "needs_action",
+    jurisdictionGeoid: null,
+    reportId: null,
+    messages: [
+      {
+        id: "m-1",
+        who: "Oakland Public Works",
+        from: "clerk@oaklandca.gov",
+        to: "outreach@civfix.org",
+        dir: "in",
+        body: "Can your crew take a look?",
+        ts: TS,
+        attachments: [],
+        authVerdict: "pass",
+        publication: null,
+      },
+    ],
+    ...over,
+  } satisfies MailThreadDTO
+}
+
+function mockPage(detail: MailThreadDTO) {
+  apiMock.getMailStats.mockResolvedValue({
+    unread: 0,
+    threads: 1,
+    sent: 1,
+    bounced: 0,
+    failed: 0,
+  } satisfies MailStatsResponse)
+  apiMock.getForwardTemplateDefault.mockResolvedValue({
+    subjectTemplate: null,
+    bodyTemplate: null,
+    updatedAt: null,
+  } satisfies GetForwardTemplateDefaultResponse)
+  apiMock.listInboxFeed.mockResolvedValue({ items: [], nextCursor: null } satisfies InboxFeedResponse)
+  const { messages: _messages, ...row } = detail
+  apiMock.listMail.mockResolvedValue({ items: [row], nextCursor: null } satisfies MailListResponse)
+  apiMock.getMailThread.mockResolvedValue(detail)
+}
+
+// The page runs on the app's real query client so the one central mutation error handler is live.
+function renderPage(detail: MailThreadDTO) {
+  mockPage(detail)
+  return renderWithQuery(
+    <>
+      <MailPage focusId={null} />
+      <DialogHost />
+    </>,
+    makeQueryClient(),
+  )
+}
+
+function spyToasts() {
+  const original = useUiStore.getState().showToast
+  const showToast = vi.fn<(text: string, tone?: ToastTone) => void>()
+  useUiStore.setState({ showToast })
+  onTestFinished(() => useUiStore.setState({ showToast: original }))
+  return showToast
+}
+
+const REJECTED = new Error("Mail provider rejected the message")
+
+describe("mail mutation failures", () => {
+  it("shows one error toast when a reply fails", async () => {
+    const toasts = spyToasts()
+    apiMock.replyMail.mockRejectedValue(REJECTED)
+    renderPage(threadOf({}))
+    const reply = await within(detailCard()).findByPlaceholderText("Reply to Oakland Public Works…")
+
+    await userEvent.type(reply, "Thanks")
+    await userEvent.click(within(detailCard()).getByRole("button", { name: /^Reply/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+    expect(toasts).toHaveBeenCalledWith(REJECTED.message, "error")
+  })
+
+  it("shows one error toast when Mark replied fails", async () => {
+    const toasts = spyToasts()
+    apiMock.setMailStatus.mockRejectedValue(REJECTED)
+    renderPage(threadOf({}))
+
+    await userEvent.click(await within(detailCard()).findByRole("button", { name: /Mark replied/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows one error toast when a resend fails", async () => {
+    const toasts = spyToasts()
+    apiMock.resendMail.mockRejectedValue(REJECTED)
+    renderPage(threadOf({ status: "bounced" }))
+
+    await userEvent.click(await within(detailCard()).findByRole("button", { name: /Resend/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows one error toast when composing fails", async () => {
+    const toasts = spyToasts()
+    apiMock.composeMail.mockRejectedValue(REJECTED)
+    renderPage(threadOf({}))
+    await within(detailCard()).findByText("Can your crew take a look?", { selector: "p" })
+
+    await userEvent.click(screen.getByRole("button", { name: /Compose/ }))
+    const dialog = screen.getByRole("dialog", { name: "New message" })
+    await userEvent.type(within(dialog).getByLabelText("To"), "works@oaklandca.gov")
+    await userEvent.type(within(dialog).getByLabelText("Subject"), "Pothole")
+    await userEvent.type(within(dialog).getByLabelText("Message"), "Please take a look")
+    await userEvent.click(within(dialog).getByRole("button", { name: /Send/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows one error toast when saving the default template fails", async () => {
+    const toasts = spyToasts()
+    apiMock.setForwardTemplateDefault.mockRejectedValue(REJECTED)
+    renderPage(threadOf({}))
+    const opener = screen.getByRole("button", { name: /Default template/ })
+    await waitFor(() => expect(opener).toBeEnabled())
+
+    await userEvent.click(opener)
+    const dialog = screen.getByRole("dialog", { name: "Default forwarding email" })
+    await userEvent.type(within(dialog).getByLabelText("Subject"), "Report forwarded")
+    await userEvent.click(within(dialog).getByRole("button", { name: /Save/ }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows one error toast when publishing a withheld reply fails", async () => {
+    const toasts = spyToasts()
+    apiMock.publishMailReply.mockRejectedValue(REJECTED)
+    const withheld = threadOf({})
+    withheld.messages = [{ ...withheld.messages[0]!, authVerdict: "fail", publication: "withheld" }]
+    renderPage(withheld)
+
+    await userEvent.click(await within(detailCard()).findByRole("button", { name: /Publish reply/ }))
+    await userEvent.click(within(screen.getByRole("dialog")).getByRole("button", { name: "Publish reply" }))
+
+    await waitFor(() => expect(toasts).toHaveBeenCalled())
+    expect(toasts).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows a failed template preview inline, without a toast", async () => {
+    const toasts = spyToasts()
+    apiMock.previewForwardTemplate.mockRejectedValue(new Error("Preview renderer unavailable"))
+    renderPage(threadOf({}))
+    const opener = screen.getByRole("button", { name: /Default template/ })
+    await waitFor(() => expect(opener).toBeEnabled())
+
+    await userEvent.click(opener)
+    const dialog = screen.getByRole("dialog", { name: "Default forwarding email" })
+    await userEvent.click(within(dialog).getByRole("button", { name: /Preview/ }))
+
+    expect(await within(dialog).findByRole("alert")).toHaveTextContent("Preview renderer unavailable")
+    expect(toasts).not.toHaveBeenCalled()
+  })
+})
+
+describe("mail and inbox error copy", () => {
+  it("routes every rendered error through errorMessage", () => {
+    for (const dir of ["./", "../inbox/", "../discovery/"]) {
+      const base = new URL(dir, import.meta.url)
+      for (const name of readdirSync(base)) {
+        if (!/\.tsx?$/.test(name) || /\.test\.tsx?$/.test(name)) continue
+        const source = readFileSync(new URL(name, base), "utf8")
+        expect(source, `${dir}${name}`).not.toMatch(/toAppError\(/)
+      }
+    }
+  })
+})
\ No newline at end of file
diff --git a/apps/admin/src/features/mail/mail-page.test.tsx b/apps/admin/src/features/mail/mail-page.test.tsx
index 0b5f7fd..a91ac1b 100644
--- a/apps/admin/src/features/mail/mail-page.test.tsx
+++ b/apps/admin/src/features/mail/mail-page.test.tsx
@@ -20,6 +20,8 @@ import { apiMock } from "@/test/api-mock"
 import { renderWithQuery } from "@/test/render"
 import { detailCard, listCard } from "@/test/panes"
 import { MailPage } from "@/features/mail/mail-page"
+import { DialogHost } from "@/components/shared/dialog"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -383,14 +385,206 @@ describe("MailPage outreach", () => {
     expect(within(detailCard()).queryByText("Body of Pothole on 5th Ave")).not.toBeInTheDocument()
   })
 
-  it("replaces a deep-linked thread focusId that is not on the first page with the first row (current behavior)", async () => {
+  it("keeps a deep-linked thread that is not on the first page open, with no row selected", async () => {
     const OLD = thread({ id: "t-9", subject: "Old thread" })
     mockChrome()
     apiMock.listMail.mockResolvedValue(mailPage([POTHOLE, GRAFFITI]))
     mockThreads(POTHOLE, GRAFFITI, OLD)
     renderWithQuery(<MailPage focusId="t-9" />)
+    await within(listCard()).findByText("Pothole on 5th Ave")
+    expect(await within(detailCard()).findByText("Body of Old thread")).toBeInTheDocument()
+    expect(within(detailCard()).queryByText("Body of Pothole on 5th Ave")).not.toBeInTheDocument()
+    for (const row of within(listCard()).getAllByRole("button", { name: /Oakland|Parks/ })) {
+      expect(row).not.toHaveAttribute("aria-current")
+    }
+  })
+
+  it("keeps the open thread when a filter chip drops it from the list", async () => {
+    mockChrome()
+    apiMock.listMail.mockImplementation(async (params: { dir?: string }) =>
+      params.dir === "out" ? mailPage([GRAFFITI]) : mailPage([POTHOLE, GRAFFITI]),
+    )
+    mockThreads(POTHOLE, GRAFFITI)
+    renderWithQuery(<MailPage focusId={null} />)
+    await within(detailCard()).findByText("Body of Pothole on 5th Ave")
+
+    await userEvent.click(screen.getByRole("button", { name: "Outbound" }))
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Pothole on 5th Ave")).not.toBeInTheDocument(),
+    )
+    expect(within(listCard()).getByText("Graffiti at Lake Merritt")).toBeInTheDocument()
+
+    expect(within(detailCard()).getByText("Body of Pothole on 5th Ave")).toBeInTheDocument()
+    expect(apiMock.getMailThread).not.toHaveBeenCalledWith({ id: "t-2" })
+  })
+
+  it("clears a thread that drops out of the list after a refetch, without opening another", async () => {
+    mockChrome()
+    let replied = false
+    apiMock.listMail.mockImplementation(async () =>
+      mailPage(replied ? [GRAFFITI] : [POTHOLE, GRAFFITI]),
+    )
+    mockThreads(POTHOLE, GRAFFITI)
+    apiMock.setMailStatus.mockImplementation(async () => {
+      replied = true
+      return { ok: true }
+    })
+    renderWithQuery(<MailPage focusId={null} />)
+    await within(detailCard()).findByText("Body of Pothole on 5th Ave")
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: /Mark replied/ }))
+
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Pothole on 5th Ave")).not.toBeInTheDocument(),
+    )
+    expect(await within(detailCard()).findByText("No message selected")).toBeInTheDocument()
+    expect(apiMock.getMailThread).not.toHaveBeenCalledWith({ id: "t-2" })
+  })
+
+  it("keeps an unread thread open under Needs attention when opening it reads it out of the list", async () => {
+    mockChrome()
+    const UNREAD_REPLY = thread({ id: "t-4", subject: "Re: Streetlight out", dir: "in", unread: true })
+    let read = false
+    apiMock.listMail.mockImplementation(async (params: { filter?: string }) =>
+      params.filter === "attn"
+        ? mailPage(read ? [POTHOLE] : [UNREAD_REPLY, POTHOLE])
+        : mailPage([GRAFFITI, UNREAD_REPLY, POTHOLE]),
+    )
+    mockThreads(POTHOLE, GRAFFITI, UNREAD_REPLY)
+    apiMock.markMailRead.mockImplementation(async () => {
+      read = true
+      return { ok: true }
+    })
+    renderWithQuery(<MailPage focusId={null} />)
+    await within(detailCard()).findByText("Body of Graffiti at Lake Merritt")
+    await userEvent.click(screen.getByRole("button", { name: "Needs attention" }))
+    await within(listCard()).findByText("Re: Streetlight out")
+
+    await userEvent.click(within(listCard()).getByText("Re: Streetlight out"))
+
+    await waitFor(() => expect(apiMock.markMailRead).toHaveBeenCalledWith({ id: "t-4" }))
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Re: Streetlight out")).not.toBeInTheDocument(),
+    )
+    expect(within(detailCard()).getByText("Body of Re: Streetlight out")).toBeInTheDocument()
+    expect(apiMock.getMailThread).not.toHaveBeenCalledWith({ id: "t-1" })
+  })
+
+  it("selects a row from the keyboard and marks the selected row current", async () => {
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([POTHOLE, GRAFFITI]))
+    apiMock.markMailRead.mockResolvedValue({ ok: true })
+    mockThreads(POTHOLE, GRAFFITI)
+    renderWithQuery(<MailPage focusId={null} />)
+    await within(detailCard()).findByText("Body of Pothole on 5th Ave")
+
+    const pothole = within(listCard()).getByRole("button", { name: /Pothole on 5th Ave/ })
+    const graffiti = within(listCard()).getByRole("button", { name: /Graffiti at Lake Merritt/ })
+    expect(pothole).toHaveAttribute("tabindex", "0")
+    expect(pothole).toHaveAttribute("aria-current", "true")
+    expect(graffiti).not.toHaveAttribute("aria-current")
+
+    graffiti.focus()
+    await userEvent.keyboard("{Enter}")
+    expect(await within(detailCard()).findByText("Body of Graffiti at Lake Merritt")).toBeInTheDocument()
+    expect(graffiti).toHaveAttribute("aria-current", "true")
+
+    pothole.focus()
+    await userEvent.keyboard(" ")
     expect(await within(detailCard()).findByText("Body of Pothole on 5th Ave")).toBeInTheDocument()
-    expect(within(detailCard()).queryByText("Body of Old thread")).not.toBeInTheDocument()
+  })
+
+  it("moves between the mailbox folders with the arrow keys, one tab stop for the group", async () => {
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    renderWithQuery(<MailPage focusId={null} />)
+    const outreach = screen.getByRole("radio", { name: /Outreach/ })
+    const inbox = screen.getByRole("radio", { name: /Inbox/ })
+    expect(outreach).toHaveAttribute("tabindex", "0")
+    expect(inbox).toHaveAttribute("tabindex", "-1")
+
+    outreach.focus()
+    await userEvent.keyboard("{ArrowRight}")
+    expect(inbox).toHaveAttribute("aria-checked", "true")
+    expect(inbox).toHaveFocus()
+    expect(inbox).toHaveAttribute("tabindex", "0")
+
+    await userEvent.keyboard("{ArrowLeft}")
+    expect(outreach).toHaveAttribute("aria-checked", "true")
+    expect(outreach).toHaveFocus()
+  })
+
+  it("names the search box and the reply field", async () => {
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([POTHOLE]))
+    mockThreads(POTHOLE)
+    renderWithQuery(<MailPage focusId={null} />)
+    expect(screen.getByRole("textbox", { name: "Search mail" })).toBeInTheDocument()
+    expect(await within(detailCard()).findByRole("textbox", { name: "Reply" })).toBeInTheDocument()
+  })
+
+  it("shows the server thread total on the All list and marks a partial count when more pages exist", async () => {
+    mockChrome()
+    apiMock.listMail.mockImplementation(async (params: { dir?: string }) =>
+      params.dir === "out" ? mailPage([GRAFFITI], "mail-2") : mailPage([POTHOLE, GRAFFITI], "mail-2"),
+    )
+    mockThreads(POTHOLE, GRAFFITI)
+    renderWithQuery(<MailPage focusId={null} />)
+    await within(listCard()).findByText("Pothole on 5th Ave")
+    expect(within(listCard()).getByText(String(STATS.threads))).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: "Outbound" }))
+    expect(await within(listCard()).findByText("1+")).toBeInTheDocument()
+  })
+})
+
+describe("MailPage reader", () => {
+  it("sends one reply however many times Cmd/Ctrl+Enter is pressed while it is in flight", async () => {
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([POTHOLE]))
+    apiMock.replyMail.mockReturnValue(new Promise(() => {}))
+    mockThreads(POTHOLE)
+    renderWithQuery(<MailPage focusId={null} />)
+    const reply = await within(detailCard()).findByPlaceholderText("Reply to Oakland Public Works…")
+
+    await userEvent.type(reply, "Crew is on the way")
+    await userEvent.keyboard("{Control>}{Enter}{/Control}")
+    await userEvent.keyboard("{Control>}{Enter}{/Control}")
+    await userEvent.keyboard("{Meta>}{Enter}{/Meta}")
+
+    await waitFor(() => expect(apiMock.replyMail).toHaveBeenCalledTimes(1))
+    expect(apiMock.replyMail).toHaveBeenCalledWith({ id: "t-1", body: "Crew is on the way" })
+  })
+
+  it("addresses the reply placeholder to the correspondent when the thread has no org", async () => {
+    const NO_ORG = { ...REPORT_REPLY_THREAD, org: "", reportId: null }
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([thread({ id: "t-1", subject: "Re: Pothole", org: "" })]))
+    mockThreadDetails(NO_ORG)
+    renderWithQuery(<MailPage focusId={null} />)
+    expect(
+      await within(detailCard()).findByPlaceholderText("Reply to clerk@oaklandca.gov…"),
+    ).toBeInTheDocument()
+  })
+
+  it("keeps Fix routing contact usable while a resend is in flight", async () => {
+    const BOUNCED = thread({
+      id: "t-5",
+      subject: "Graffiti report",
+      status: "bounced",
+      jurisdictionGeoid: "0653000",
+    })
+    mockChrome()
+    apiMock.listMail.mockResolvedValue(mailPage([BOUNCED]))
+    apiMock.resendMail.mockReturnValue(new Promise(() => {}))
+    mockThreads(BOUNCED)
+    renderWithQuery(<MailPage focusId={null} />)
+    const resend = await within(detailCard()).findByRole("button", { name: /Resend/ })
+
+    await userEvent.click(resend)
+
+    await waitFor(() => expect(resend).toBeDisabled())
+    expect(within(detailCard()).getByRole("button", { name: /Fix routing contact/ })).toBeEnabled()
   })
 })
 
@@ -499,6 +693,45 @@ describe("MailPage inbox", () => {
     expect(apiMock.getInboxMessage).not.toHaveBeenCalled()
   })
 
+  it("confirms a published reply though the refreshed thread drops its note before the feed refetch lands", async () => {
+    useUiStore.setState({ toast: null })
+    mockChrome({ feed: feedPage([REPORT_REPLY]) })
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    apiMock.markMailRead.mockResolvedValue({ ok: true })
+    mockThreadDetails(REPORT_REPLY_THREAD)
+    let releaseFeed: () => void = () => {}
+    apiMock.publishMailReply.mockImplementation(async () => {
+      mockThreadDetails({
+        ...REPORT_REPLY_THREAD,
+        messages: [{ ...REPORT_REPLY_THREAD.messages[0]!, publication: "published" as const }],
+      })
+      apiMock.listInboxFeed.mockReturnValue(
+        new Promise((resolve) => {
+          releaseFeed = () => resolve(feedPage([{ ...REPORT_REPLY, publication: "published" as const }]))
+        }),
+      )
+      return { publication: "published" }
+    })
+    renderWithQuery(
+      <>
+        <MailPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await openInbox()
+
+    await userEvent.click(await within(detailCard()).findByRole("button", { name: /Publish reply/ }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Publish reply" }))
+
+    await waitFor(() =>
+      expect(within(detailCard()).queryByRole("button", { name: /Publish reply/ })).not.toBeInTheDocument(),
+    )
+    releaseFeed()
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({ text: "Reply published", tone: "ok" }),
+    )
+  })
+
   it("opens a clicked email row in the inbound message reader", async () => {
     mockChrome({ feed: feedPage([REPORT_REPLY, PRESS_FEED]) })
     apiMock.listMail.mockResolvedValue(mailPage([]))
@@ -575,4 +808,111 @@ describe("MailPage inbox", () => {
     expect(within(detailCard()).queryByText("Body of Question about my report")).not.toBeInTheDocument()
     expect(apiMock.getInboxMessage).not.toHaveBeenCalledWith({ id: "i-1" })
   })
+
+  it("keeps a picked reply open when a filter chip drops it from the feed", async () => {
+    mockChrome()
+    apiMock.listInboxFeed.mockImplementation(async (params: { filter?: string }) =>
+      params.filter === "unmatched" ? feedPage([PRESS_FEED]) : feedPage([REPORT_REPLY, PRESS_FEED]),
+    )
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    mockThreadDetails(REPORT_REPLY_THREAD)
+    mockInboxMessages(PRESS)
+    renderWithQuery(<MailPage focusId={null} />)
+    await openInbox()
+    await within(detailCard()).findByText("Body of Re: Pothole on 5th Ave")
+
+    await userEvent.click(screen.getByRole("button", { name: "Unmatched" }))
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Re: Pothole on 5th Ave")).not.toBeInTheDocument(),
+    )
+    expect(within(listCard()).getByText("Press inquiry")).toBeInTheDocument()
+
+    expect(within(detailCard()).getByText("Body of Re: Pothole on 5th Ave")).toBeInTheDocument()
+    expect(apiMock.getInboxMessage).not.toHaveBeenCalled()
+  })
+
+  it("keeps an unread message open under Unread when opening it reads it out of the list", async () => {
+    const NOTICE = inboxItem({ id: "i-3", subject: "Street closure notice" })
+    let read = false
+    mockChrome()
+    apiMock.listInboxFeed.mockImplementation(async (params: { filter?: string }) =>
+      params.filter === "unread"
+        ? feedPage(read ? [emailFeedItem(NOTICE)] : [QUESTION_FEED, emailFeedItem(NOTICE)])
+        : feedPage([PRESS_FEED, QUESTION_FEED, emailFeedItem(NOTICE)]),
+    )
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    mockInboxMessages(QUESTION, PRESS, NOTICE)
+    apiMock.setInboxStatus.mockImplementation(async () => {
+      read = true
+      return { ok: true }
+    })
+    renderWithQuery(<MailPage focusId={null} />)
+    await openInbox()
+    await within(detailCard()).findByText("Body of Press inquiry")
+    await userEvent.click(screen.getByRole("button", { name: "Unread" }))
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Press inquiry")).not.toBeInTheDocument(),
+    )
+
+    await userEvent.click(within(listCard()).getByText("Question about my report"))
+
+    await waitFor(() =>
+      expect(apiMock.setInboxStatus).toHaveBeenCalledWith({ id: "i-1", status: "read" }),
+    )
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Question about my report")).not.toBeInTheDocument(),
+    )
+    expect(within(detailCard()).getByText("Body of Question about my report")).toBeInTheDocument()
+    expect(apiMock.getInboxMessage).not.toHaveBeenCalledWith({ id: "i-3" })
+  })
+
+  it("still clears a message the operator archives out of the list after opening it", async () => {
+    useUiStore.setState({ toast: null })
+    let status = "unread"
+    mockChrome()
+    apiMock.listInboxFeed.mockImplementation(async () =>
+      feedPage(
+        status === "archived"
+          ? [PRESS_FEED]
+          : [PRESS_FEED, { ...QUESTION_FEED, unread: status === "unread" }],
+      ),
+    )
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    mockInboxMessages(QUESTION, PRESS)
+    apiMock.setInboxStatus.mockImplementation(async (input: { status: string }) => {
+      status = input.status
+      return { ok: true }
+    })
+    renderWithQuery(<MailPage focusId={null} />)
+    await openInbox()
+    await within(detailCard()).findByText("Body of Press inquiry")
+
+    await userEvent.click(within(listCard()).getByText("Question about my report"))
+    await waitFor(() =>
+      expect(apiMock.setInboxStatus).toHaveBeenCalledWith({ id: "i-1", status: "read" }),
+    )
+    const archive = await within(detailCard()).findByRole("button", { name: /Archive/ })
+    await waitFor(() => expect(archive).toBeEnabled())
+    expect(useUiStore.getState().toast).toBeNull()
+    await userEvent.click(archive)
+
+    await waitFor(() =>
+      expect(within(listCard()).queryByText("Question about my report")).not.toBeInTheDocument(),
+    )
+    expect(await within(detailCard()).findByText("No message selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByText("Body of Press inquiry")).not.toBeInTheDocument()
+    expect(useUiStore.getState().toast).toMatchObject({ text: "Archived", tone: "ok" })
+  })
+
+  it("opens the first row for an inbox: deep link that names no message", async () => {
+    mockChrome({ feed: feedPage([QUESTION_FEED, PRESS_FEED]) })
+    apiMock.listMail.mockResolvedValue(mailPage([]))
+    mockInboxMessages(QUESTION, PRESS)
+    renderWithQuery(<MailPage focusId="inbox:" />)
+
+    expect(screen.getByRole("radio", { name: /Inbox/ })).toHaveAttribute("aria-checked", "true")
+    expect(
+      await within(detailCard()).findByText("Body of Question about my report"),
+    ).toBeInTheDocument()
+  })
 })
diff --git a/apps/admin/src/features/mail/mail-page.tsx b/apps/admin/src/features/mail/mail-page.tsx
index 5b8559a..00b9e7e 100644
--- a/apps/admin/src/features/mail/mail-page.tsx
+++ b/apps/admin/src/features/mail/mail-page.tsx
@@ -22,6 +22,7 @@ import {
 } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { usePristineDismiss } from "@/components/shared/backdrop-dismiss"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { useModalFocus } from "@/components/shared/modal-focus"
 import {
   useComposeMail,
@@ -49,16 +50,24 @@ import {
   resolveFeedSelection,
 } from "@/features/inbox/inbox-feed"
 import { AuthVerdictBadge, PublicationBadge } from "@/features/mail/mail-badges"
-import { MAIL_STATUS_CLS } from "@/features/mail/mail-presentation"
+import { MAIL_STATUS_CLS, tsTitle } from "@/features/mail/mail-presentation"
 import { WithheldReplyNote } from "@/features/mail/withheld-reply-note"
 import { useNav, useToast } from "@/store/ui-store"
-import { toAppError } from "@/lib/api"
 import { errorMessage } from "@/lib/error-messages"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 
 type Folder = "outreach" | "inbox"
 
+const FOLDERS: readonly Folder[] = ["outreach", "inbox"]
+
+const FOLDER_ARROW_STEP: Record<string, number> = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+}
+
 const BOX_LABEL: Record<string, string> = {
   all: "All",
   in: "Inbound",
@@ -92,7 +101,8 @@ function DeliveryBadge({ delivery }: { delivery: MailMessageDTO["delivery"] }) {
 function parseFocus(focusId: string | null): { folder: Folder; id: string | null } {
   if (!focusId) return { folder: "outreach", id: null }
   if (focusId.startsWith("inbox:")) {
-    return { folder: "inbox", id: emailFocusKey(focusId.slice("inbox:".length)) }
+    const id = focusId.slice("inbox:".length)
+    return { folder: "inbox", id: id ? emailFocusKey(id) : null }
   }
   return { folder: "outreach", id: focusId }
 }
@@ -101,12 +111,6 @@ function ts(value: string): string {
   return relativeAgo(value)
 }
 
-function tsTitle(value: string): string {
-  if (!value) return ""
-  const d = new Date(value)
-  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString()
-}
-
 function correspondent(sel: MailThreadDTO): string {
   for (let i = sel.messages.length - 1; i >= 0; i--) {
     const m = sel.messages[i]!
@@ -234,7 +238,15 @@ function MailRow({
   return (
     <div
       className={`mail-row ${selected ? "selected" : ""} ${item.unread ? "unread" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
     >
       <span className={`mail-dir ${item.dir}`}>
         {item.dir === "in" ? <Icons.ArrowDown size={13} /> : <Icons.ArrowUp size={13} />}
@@ -264,7 +276,6 @@ function MailRow({
 function MailReader({ threadId, eventId = null }: { threadId: string; eventId?: string | null }) {
   const q = useMailThread(threadId)
   const nav = useNav()
-  const toast = useToast()
 
   const reply = useReplyMail()
   const setStatus = useSetMailStatus()
@@ -288,41 +299,26 @@ function MailReader({ threadId, eventId = null }: { threadId: string; eventId?:
 
   const sendReply = () => {
     const body = text.trim()
-    if (!body) return
+    if (!body || reply.isPending) return
     reply.mutate(
-      { id: sel.id, body },
+      { request: { id: sel.id, body }, recipient: whoLabel },
       {
         onSuccess: () => {
           setText("")
-          toast(`Reply sent to ${whoLabel}`)
           setTimeout(() => {
             if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight
           }, 50)
         },
-        onError: (err) =>
-          toast(errorMessage(err, {}, { fallback: "Couldn't send the reply. Please try again." })),
       },
     )
   }
 
   const markReplied = () => {
-    setStatus.mutate(
-      { id: sel.id, status: "replied" },
-      {
-        onSuccess: () => toast("Marked replied"),
-        onError: (err) => toast(errorMessage(err, {}, { fallback: "Couldn't update the thread." })),
-      },
-    )
+    setStatus.mutate({ id: sel.id, status: "replied" })
   }
 
   const onResend = () => {
-    resend.mutate(
-      { id: sel.id },
-      {
-        onSuccess: () => toast("Message resent"),
-        onError: (err) => toast(errorMessage(err, {}, { fallback: "Couldn't resend the message." })),
-      },
-    )
+    resend.mutate({ id: sel.id })
   }
 
   const onFixRouting = () => {
@@ -442,7 +438,7 @@ function MailReader({ threadId, eventId = null }: { threadId: string; eventId?:
       {sel.status === "bounced" ? (
         <div className="mail-reader-foot">
           {sel.jurisdictionGeoid && (
-            <button className="btn primary" disabled={resend.isPending} onClick={onFixRouting}>
+            <button className="btn primary" onClick={onFixRouting}>
               <Icons.AlertTriangle size={13} /> Fix routing contact
             </button>
           )}
@@ -455,11 +451,14 @@ function MailReader({ threadId, eventId = null }: { threadId: string; eventId?:
           <textarea
             className="mail-reply-input"
             rows={3}
-            placeholder={`Reply to ${sel.org}…`}
+            aria-label="Reply"
+            placeholder={`Reply to ${whoLabel}…`}
             value={text}
             onChange={(e) => setText(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) sendReply()
+              if (e.key !== "Enter" || !(e.metaKey || e.ctrlKey)) return
+              e.preventDefault()
+              sendReply()
             }}
           />
           <div className="mail-composer-foot">
@@ -504,9 +503,13 @@ export function MailPage({ focusId }: SectionPageProps) {
   const [folder, setFolder] = React.useState<Folder>(initial.folder)
   const [box, setBox] = React.useState("all")
   const [selId, setSelId] = React.useState<string | null>(initial.id)
-  const [selItem, setSelItem] = React.useState<{ item: InboxFeedItemDTO; view: string } | null>(null)
+  const [selItem, setSelItem] = React.useState<InboxFeedItemDTO | null>(null)
   const [composeOpen, setComposeOpen] = React.useState(false)
   const [templateOpen, setTemplateOpen] = React.useState(false)
+  const folderRefs = React.useRef<Record<Folder, HTMLButtonElement | null>>({
+    outreach: null,
+    inbox: null,
+  })
   const outreach = folder === "outreach"
 
   const [query, setQuery] = React.useState("")
@@ -522,7 +525,7 @@ export function MailPage({ focusId }: SectionPageProps) {
   const forwardTemplate = useForwardTemplateDefault()
   const setForwardTemplate = useSetForwardTemplateDefault()
   const markRead = useMarkMailRead()
-  const setInboxStatus = useSetInboxStatus()
+  const setInboxStatus = useSetInboxStatus({ quiet: true })
 
   const mailListQuery = useMailListInfinite(
     outreach
@@ -534,7 +537,6 @@ export function MailPage({ focusId }: SectionPageProps) {
       : {},
   )
   const feedFilter = isInboxFeedFilter(box) ? box : "all"
-  const feedView = `${feedFilter}:${q ?? ""}`
   const inboxFeedQuery = useInboxFeedInfinite(
     !outreach ? { filter: feedFilter, q } : { filter: "all" },
   )
@@ -557,45 +559,102 @@ export function MailPage({ focusId }: SectionPageProps) {
     () => (outreach ? mailItems.map((t) => t.id) : [...feedByKey.keys()]),
     [outreach, mailItems, feedByKey],
   )
-  const selFeedItem = outreach ? undefined : resolveFeedSelection(feedByKey, selItem, selId, feedView)
+  const activeUnread = React.useMemo(
+    () =>
+      new Set(
+        outreach
+          ? mailItems.filter((t) => t.unread).map((t) => t.id)
+          : [...feedByKey].filter(([, item]) => item.unread).map(([key]) => key),
+      ),
+    [outreach, mailItems, feedByKey],
+  )
+  const selFeedItem = outreach ? undefined : resolveFeedSelection(feedByKey, selItem, selId)
 
   const statsQuery = useMailStats()
   const stats = statsQuery.data
 
   React.useEffect(() => {
+    if (!focusId) return
     const p = parseFocus(focusId)
-    if (p.id) {
-      setFolder(p.folder)
-      setBox("all")
-      setSelId(p.id)
-    }
+    setFolder(p.folder)
+    setBox("all")
+    setSelId(p.id)
   }, [focusId])
   React.useEffect(() => {
     const listed = selId ? feedByKey.get(selId) : undefined
-    if (listed) setSelItem({ item: listed, view: feedView })
-    if (!activeIds.length || (selId && (activeIds.includes(selId) || selFeedItem))) return
-    setSelId(activeIds[0]!)
-  }, [activeIds, selId, selFeedItem, feedByKey, feedView])
-
-  const switchFolder = (next: Folder) => {
-    if (next === folder) return
+    if (listed) setSelItem(listed)
+  }, [selId, feedByKey])
+  // Only a fresh load of a folder picks a message on the operator's behalf, and a deep-linked message
+  // is never replaced. A pick that a filter or search leaves out stays open through its by-id reader; a
+  // pick that drops out of the same list after a refetch clears, so the pane never jumps to another
+  // message. Opening an unread message reads it, which is not the operator's action: until the list
+  // shows it read, dropping out (the Unread or Needs attention chip) counts as a filter drop-out and
+  // the message stays open. Decided only on data fetched for the current folder and filters.
+  const listKey = JSON.stringify([folder, box, q ?? null])
+  const [autoPick, setAutoPick] = React.useState(initial.id === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
+  const readOnOpen = React.useRef<string | null>(null)
+  React.useEffect(() => {
+    if (!activeListQuery.isSuccess || activeListQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && activeIds.length) setSelId(activeIds[0]!)
+      return
+    }
+    setAutoPick(false)
+    if (activeIds.includes(selId)) {
+      seenIn.current = { id: selId, list: listKey }
+      if (readOnOpen.current === selId && !activeUnread.has(selId)) readOnOpen.current = null
+    } else if (seenIn.current?.id === selId && seenIn.current.list === listKey) {
+      if (readOnOpen.current === selId) {
+        readOnOpen.current = null
+        seenIn.current = null
+      } else {
+        setSelId(null)
+      }
+    }
+  }, [
+    activeListQuery.isSuccess,
+    activeListQuery.isFetching,
+    activeIds,
+    activeUnread,
+    selId,
+    listKey,
+    autoPick,
+  ])
+
+  const openFresh = (next: Folder) => {
     setFolder(next)
     setBox("all")
     setSelId(null)
+    setAutoPick(true)
+  }
+
+  const switchFolder = (next: Folder) => {
+    if (next === folder) return
+    openFresh(next)
     setQuery("")
     setDebouncedQuery("")
   }
 
   const select = (id: string) => {
     setSelId(id)
+    readOnOpen.current = null
+    const readFailed = {
+      onError: () => {
+        if (readOnOpen.current === id) readOnOpen.current = null
+      },
+    }
     if (outreach) {
       const row = mailItems.find((t) => t.id === id)
-      if (row?.unread) markRead.mutate({ id })
+      if (!row?.unread) return
+      readOnOpen.current = id
+      markRead.mutate({ id }, readFailed)
     } else {
       const item = feedByKey.get(id)
       if (!item?.unread) return
-      if (item.source === "email") setInboxStatus.mutate({ id: item.id, status: "read" })
-      else markRead.mutate({ id: item.threadId })
+      readOnOpen.current = id
+      if (item.source === "email") setInboxStatus.mutate({ id: item.id, status: "read" }, readFailed)
+      else markRead.mutate({ id: item.threadId }, readFailed)
     }
   }
 
@@ -603,17 +662,26 @@ export function MailPage({ focusId }: SectionPageProps) {
     compose.mutate(input, {
       onSuccess: () => {
         setComposeOpen(false)
-        setFolder("outreach")
-        setBox("all")
-        setSelId(null)
-        toast(`Message sent to ${input.to}`)
-      },
-      onError: (err) => {
-        toast(errorMessage(err, {}, { fallback: "Couldn't send the message. Please try again." }))
+        openFresh("outreach")
       },
     })
   }
 
+  const onFolderKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = FOLDER_ARROW_STEP[e.key]
+    if (!step) return
+    e.preventDefault()
+    const next = FOLDERS[(FOLDERS.indexOf(folder) + step + FOLDERS.length) % FOLDERS.length]!
+    switchFolder(next)
+    folderRefs.current[next]?.focus()
+  }
+
+  const serverTotal = outreach && box === "all" && !q ? stats?.threads : undefined
+  const countLabel =
+    serverTotal !== undefined
+      ? serverTotal.toLocaleString()
+      : `${activeCount}${activeListQuery.hasNextPage ? "+" : ""}`
+
   const statusOptions: FilterOption[] = outreach
     ? [
         { value: "all", label: "All", ...(stats ? { count: stats.threads } : {}) },
@@ -639,7 +707,7 @@ export function MailPage({ focusId }: SectionPageProps) {
           disabled={forwardTemplate.isLoading}
           onClick={() => {
             if (forwardTemplate.isError) {
-              toast(toAppError(forwardTemplate.error).message)
+              toast(errorMessage(forwardTemplate.error), "error")
               return
             }
             setTemplateOpen(true)
@@ -653,20 +721,35 @@ export function MailPage({ focusId }: SectionPageProps) {
       </PageHead>
 
       { }
-      <div className="mailbox-switch" role="radiogroup" aria-label="Mailbox folder">
+      <div
+        className="mailbox-switch"
+        role="radiogroup"
+        aria-label="Mailbox folder"
+        onKeyDown={onFolderKeyDown}
+      >
         <button
+          ref={(el) => {
+            folderRefs.current.outreach = el
+          }}
+          type="button"
           className={`mbx ${outreach ? "active" : ""}`}
           role="radio"
           aria-checked={outreach}
+          tabIndex={outreach ? 0 : -1}
           onClick={() => switchFolder("outreach")}
         >
           <Icons.Mail size={13} /> Outreach
           {stats && stats.threads > 0 && <span className="mbx-c">{stats.threads}</span>}
         </button>
         <button
+          ref={(el) => {
+            folderRefs.current.inbox = el
+          }}
+          type="button"
           className={`mbx ${!outreach ? "active" : ""}`}
           role="radio"
           aria-checked={!outreach}
+          tabIndex={outreach ? -1 : 0}
           onClick={() => switchFolder("inbox")}
         >
           <Icons.Inbox size={13} /> Inbox
@@ -729,6 +812,7 @@ export function MailPage({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search mail"
             placeholder={outreach ? "Search org, subject, sender…" : "Search sender, subject, org…"}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -741,7 +825,7 @@ export function MailPage({ focusId }: SectionPageProps) {
           <div className="card-head">
             <h3>{outreach ? (BOX_LABEL[box] ?? "All") : INBOX_FEED_FILTER_LABELS[feedFilter]}</h3>
             <div className="spacer" />
-            <span className="meta">{activeCount}</span>
+            <span className="meta">{countLabel}</span>
           </div>
           <div className="queue-list">
             {activeListQuery.isLoading ? (
@@ -843,13 +927,7 @@ export function MailPage({ focusId }: SectionPageProps) {
         onSave={({ subject, body }) =>
           setForwardTemplate.mutate(
             { subjectTemplate: subject, bodyTemplate: body },
-            {
-              onSuccess: () => {
-                toast("Default template saved")
-                setTemplateOpen(false)
-              },
-              onError: (err) => toast(toAppError(err).message),
-            },
+            { onSuccess: () => setTemplateOpen(false) },
           )
         }
       />
diff --git a/apps/admin/src/features/mail/mail-presentation.ts b/apps/admin/src/features/mail/mail-presentation.ts
index 881ade8..904ae33 100644
--- a/apps/admin/src/features/mail/mail-presentation.ts
+++ b/apps/admin/src/features/mail/mail-presentation.ts
@@ -10,6 +10,12 @@ export const MAIL_STATUS_CLS: Record<MailStatus, string> = {
   bounced: "status-flag",
 }
 
+export function tsTitle(value: string): string {
+  if (!value) return ""
+  const d = new Date(value)
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString()
+}
+
 export const AUTH_VERDICT_VIEW: Record<MailAuthVerdict, { cls: string; title: string }> = {
   pass: { cls: "status-ok", title: "The sender's domain passed authentication." },
   fail: {
diff --git a/apps/admin/src/features/mail/use-mail.ts b/apps/admin/src/features/mail/use-mail.ts
index 99a6875..d4f155a 100644
--- a/apps/admin/src/features/mail/use-mail.ts
+++ b/apps/admin/src/features/mail/use-mail.ts
@@ -18,19 +18,22 @@ import type {
   PreviewForwardTemplateRequest,
   PreviewForwardTemplateResponse,
   PublishMailReplyRequest,
+  PublishMailReplyResponse,
   ReplyRequest,
   ResendRequest,
   SetForwardTemplateDefaultRequest,
   SetMailStatusRequest,
 } from "@civfix/shared"
 
+import { attachmentRefreshInterval } from "@/features/inbox/attachments"
+import { PUBLISH_TOAST } from "@/features/mail/mail-presentation"
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
 
 
 export function useMailList(params: MailListQuery) {
   return useQuery<MailListResponse>({
-    queryKey: queryKeys.mail.list(params),
+    queryKey: queryKeys.mail.page(params),
     queryFn: () => api.listMail(params),
   })
 }
@@ -53,6 +56,10 @@ export function useMailThread(id: string | null) {
     queryKey: queryKeys.mail.detail(id ?? ""),
     queryFn: () => api.getMailThread({ id: id as string }),
     enabled: !!id,
+    refetchInterval: (query) =>
+      attachmentRefreshInterval(
+        query.state.data?.messages.reduce((n, m) => n + m.attachments.length, 0) ?? 0,
+      ),
   })
 }
 
@@ -64,11 +71,13 @@ export function useMailStats() {
 }
 
 export function invalidateMail(qc: ReturnType<typeof useQueryClient>, id?: string) {
-  if (id) qc.invalidateQueries({ queryKey: queryKeys.mail.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.mail.all })
-  qc.invalidateQueries({ queryKey: queryKeys.mail.stats })
-  qc.invalidateQueries({ queryKey: queryKeys.inbox.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    id ? qc.invalidateQueries({ queryKey: queryKeys.mail.detail(id) }) : null,
+    qc.invalidateQueries({ queryKey: queryKeys.mail.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.mail.stats }),
+    qc.invalidateQueries({ queryKey: queryKeys.inbox.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+  ])
 }
 
 export function useComposeMail() {
@@ -76,14 +85,24 @@ export function useComposeMail() {
   return useMutation({
     mutationFn: (input: ComposeRequest) => api.composeMail(input),
     onSuccess: () => invalidateMail(qc),
+    meta: { successMessage: (_res: unknown, { to }: ComposeRequest) => `Message sent to ${to}` },
   })
 }
 
+export interface ReplyMailVariables {
+  request: ReplyRequest
+  /** Who the reply goes to, as the thread names them. */
+  recipient: string
+}
+
 export function useReplyMail() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: ReplyRequest) => api.replyMail(input),
-    onSuccess: (_res, { id }) => invalidateMail(qc, id),
+    mutationFn: ({ request }: ReplyMailVariables) => api.replyMail(request),
+    onSuccess: (_res, { request }) => invalidateMail(qc, request.id),
+    meta: {
+      successMessage: (_res: unknown, { recipient }: ReplyMailVariables) => `Reply sent to ${recipient}`,
+    },
   })
 }
 
@@ -100,6 +119,10 @@ export function useSetMailStatus() {
   return useMutation({
     mutationFn: (input: SetMailStatusRequest) => api.setMailStatus(input),
     onSuccess: (_res, { id }) => invalidateMail(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { status }: SetMailStatusRequest) =>
+        status === "replied" ? "Marked replied" : null,
+    },
   })
 }
 
@@ -108,16 +131,21 @@ export function useResendMail() {
   return useMutation({
     mutationFn: (input: ResendRequest) => api.resendMail(input),
     onSuccess: (_res, { id }) => invalidateMail(qc, id),
+    meta: { successMessage: () => "Message resent" },
   })
 }
 
 export function publishMailReplyOptions(qc: ReturnType<typeof useQueryClient>) {
   return mutationOptions({
     mutationFn: (input: PublishMailReplyRequest) => api.publishMailReply(input),
-    onSuccess: (_res, { id }) => {
-      invalidateMail(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.reports.all })
-      qc.invalidateQueries({ queryKey: queryKeys.events.all })
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        invalidateMail(qc, id),
+        qc.invalidateQueries({ queryKey: queryKeys.reports.all }),
+        qc.invalidateQueries({ queryKey: queryKeys.events.all }),
+      ]),
+    meta: {
+      successMessage: (res: PublishMailReplyResponse) => PUBLISH_TOAST[res.publication],
     },
   })
 }
@@ -141,11 +169,13 @@ export function useSetForwardTemplateDefault() {
     onSuccess: (res) => {
       qc.setQueryData(queryKeys.mail.forwardTemplate, res)
     },
+    meta: { successMessage: () => "Default template saved" },
   })
 }
 
 export function usePreviewForwardTemplate() {
   return useMutation<PreviewForwardTemplateResponse, unknown, PreviewForwardTemplateRequest>({
     mutationFn: (input) => api.previewForwardTemplate(input),
+    meta: { errorToast: false },
   })
 }
diff --git a/apps/admin/src/features/mail/withheld-reply-note.tsx b/apps/admin/src/features/mail/withheld-reply-note.tsx
index d0c90ad..2d60e36 100644
--- a/apps/admin/src/features/mail/withheld-reply-note.tsx
+++ b/apps/admin/src/features/mail/withheld-reply-note.tsx
@@ -5,14 +5,7 @@ import type { MailMessageDTO } from "@civfix/shared"
 import { Icons } from "@/components/icons"
 import { confirmDialog } from "@/components/shared/dialog"
 import { usePublishMailReply } from "@/features/mail/use-mail"
-import {
-  PUBLISH_TOAST,
-  publishConfirmBody,
-  withheldNote,
-  withheldReason,
-} from "@/features/mail/mail-presentation"
-import { errorMessage } from "@/lib/error-messages"
-import { useToast } from "@/store/ui-store"
+import { publishConfirmBody, withheldNote, withheldReason } from "@/features/mail/mail-presentation"
 
 export function WithheldReplyNote({
   threadId,
@@ -24,7 +17,6 @@ export function WithheldReplyNote({
   isReport: boolean
 }) {
   const publish = usePublishMailReply()
-  const toast = useToast()
   const auth = withheldReason(msg.authVerdict) === "auth"
 
   const onPublish = async () => {
@@ -36,14 +28,7 @@ export function WithheldReplyNote({
       danger: auth,
     })
     if (!ok) return
-    publish.mutate(
-      { id: threadId, messageId: msg.id },
-      {
-        onSuccess: (res) => toast(PUBLISH_TOAST[res.publication]),
-        onError: (err) =>
-          toast(errorMessage(err, {}, { fallback: "Couldn't publish the reply. Please try again." })),
-      },
-    )
+    publish.mutate({ id: threadId, messageId: msg.id })
   }
 
   return (
diff --git a/apps/admin/src/features/moderation/gov-claims-views.tsx b/apps/admin/src/features/moderation/gov-claims-views.tsx
index eeb6711..163dd63 100644
--- a/apps/admin/src/features/moderation/gov-claims-views.tsx
+++ b/apps/admin/src/features/moderation/gov-claims-views.tsx
@@ -6,6 +6,8 @@ import { Icons } from "@/components/icons"
 import { EmptyState } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { confirmDialog, promptDialog } from "@/components/shared/dialog"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
+import { isNotFound } from "@/lib/api"
 import { isHttpsUrl } from "@/lib/external-url"
 import {
   GOV_CHECKS,
@@ -23,7 +25,7 @@ import {
   useRejectGovClaim,
   useVerifyGovClaimCheck,
 } from "@/features/moderation/use-gov-claims"
-import { useNav, useToast } from "@/store/ui-store"
+import { useNav } from "@/store/ui-store"
 
 export function GovClaimRow({
   item,
@@ -36,7 +38,18 @@ export function GovClaimRow({
 }) {
   const status = GOV_CLAIM_STATUS_VIEW[item.status] ?? GOV_CLAIM_STATUS_VIEW.pending
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={() => onSelect(item.id)}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={() => onSelect(item.id)}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onSelect(item.id)
+      }}
+    >
       <span className="prow-ico hue-slate" title={GOV_METHOD_LABEL[item.method]}>
         <Icons.Building size={15} />
       </span>
@@ -99,6 +112,7 @@ function CheckRow({
       <button
         className="btn sm"
         disabled={busy}
+        aria-label={`Mark ${govCheckLabel(check)} ${verified ? "pending" : "verified"}`}
         onClick={() => onToggle(check, verified ? "pending" : "verified")}
       >
         {verified ? (
@@ -126,13 +140,14 @@ export function GovClaimDetail({
   const verifyCheck = useVerifyGovClaimCheck()
   const approve = useApproveGovClaim()
   const reject = useRejectGovClaim()
-  const toast = useToast()
   const nav = useNav()
 
   const busy = verifyCheck.isPending || approve.isPending || reject.isPending
 
   if (q.isLoading) return <LoadingState label="Loading claim..." />
-  if (q.isError) return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  if (q.isError && !isNotFound(q.error)) {
+    return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  }
   const claim = q.data
   if (!claim)
     return (
@@ -159,7 +174,6 @@ export function GovClaimDetail({
           ...(stored.evidence ? { evidence: stored.evidence } : {}),
           ...keepNote,
         },
-        { onSuccess: () => toast(`${govCheckLabel(check)} · back to pending`) },
       )
       return
     }
@@ -179,7 +193,6 @@ export function GovClaimDetail({
         ...(evidence.trim() ? { evidence: evidence.trim() } : {}),
         ...keepNote,
       },
-      { onSuccess: () => toast(`${govCheckLabel(check)} · verified`) },
     )
   }
 
@@ -191,15 +204,7 @@ export function GovClaimDetail({
       confirmLabel: "Approve and provision",
     })
     if (!ok) return
-    approve.mutate(
-      { id: claim.id },
-      {
-        onSuccess: () => {
-          toast(`${claim.name} approved · government role provisioned`)
-          onDecided(claim.id)
-        },
-      },
-    )
+    approve.mutate({ request: { id: claim.id }, claim }, { onSuccess: () => onDecided(claim.id) })
   }
 
   const onReject = async () => {
@@ -214,13 +219,8 @@ export function GovClaimDetail({
     })
     if (reason === null || reason.trim() === "") return
     reject.mutate(
-      { id: claim.id, reason: reason.trim() },
-      {
-        onSuccess: () => {
-          toast(`${claim.name} rejected`)
-          onDecided(claim.id)
-        },
-      },
+      { request: { id: claim.id, reason: reason.trim() }, claim },
+      { onSuccess: () => onDecided(claim.id) },
     )
   }
 
diff --git a/apps/admin/src/features/moderation/moderation-page.test.tsx b/apps/admin/src/features/moderation/moderation-page.test.tsx
index cb371af..7041dc1 100644
--- a/apps/admin/src/features/moderation/moderation-page.test.tsx
+++ b/apps/admin/src/features/moderation/moderation-page.test.tsx
@@ -1,13 +1,15 @@
 import { act, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import type {
-  GovClaimDTO,
-  GovClaimListResponse,
-  ModerationItemDTO,
-  ModerationListItemDTO,
-  ModerationListResponse,
+import {
+  AppError,
+  ErrorCode,
+  type GovClaimDTO,
+  type GovClaimListResponse,
+  type ModerationItemDTO,
+  type ModerationListItemDTO,
+  type ModerationListResponse,
 } from "@civfix/shared"
-import { describe, expect, it, vi } from "vitest"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
@@ -15,6 +17,9 @@ import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
 import { detailCard } from "@/test/panes"
 import { ModerationPage } from "@/features/moderation/moderation-page"
+import { DialogHost } from "@/components/shared/dialog"
+import { LightboxHost } from "@/components/shared/lightbox"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -276,13 +281,15 @@ describe("ModerationPage queue", () => {
     expect(within(detailCard()).queryByRole("heading", { name: "MOD-101" })).not.toBeInTheDocument()
   })
 
-  it("replaces a deep-linked focusId that is not on the first page with the first row (current behavior)", async () => {
+  it("keeps a deep-linked focusId that is not on the first page selected", async () => {
     const OTHER = modItem({ id: "mod-9", flag: "MOD-909" })
     apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT, APPEAL]))
     mockModDetails(COMMENT_REPORT, APPEAL, OTHER)
     renderWithQuery(<ModerationPage focusId="mod-9" />)
-    expect(await within(detailCard()).findByRole("heading", { name: "MOD-101" })).toBeInTheDocument()
-    expect(within(detailCard()).queryByRole("heading", { name: "MOD-909" })).not.toBeInTheDocument()
+    expect(await within(detailCard()).findByRole("heading", { name: "MOD-909" })).toBeInTheDocument()
+    await within(listCard("Queue")).findByText("MOD-101")
+    expect(within(detailCard()).getByRole("heading", { name: "MOD-909" })).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "MOD-101" })).not.toBeInTheDocument()
   })
 })
 
@@ -344,8 +351,9 @@ describe("ModerationPage gov claims", () => {
     expect(within(card).getByText(/Gov provisioning · Emailed us/)).toBeInTheDocument()
     expect(within(card).getByText("LinkedIn")).toBeInTheDocument()
     expect(within(card).getByRole("link", { name: "https://linkedin.example/in/applicant" })).toBeInTheDocument()
-    expect(within(card).getByRole("button", { name: "Mark pending" })).toBeInTheDocument()
-    expect(within(card).getAllByRole("button", { name: "Mark verified" })).toHaveLength(2)
+    expect(within(card).getByRole("button", { name: "Mark LinkedIn pending" })).toBeInTheDocument()
+    expect(within(card).getByRole("button", { name: "Mark Directory verified" })).toBeInTheDocument()
+    expect(within(card).getByRole("button", { name: "Mark Callback verified" })).toBeInTheDocument()
     expect(within(card).getByRole("button", { name: "Approve" })).toBeEnabled()
     expect(within(card).getByRole("button", { name: "Reject" })).toBeEnabled()
     expect(apiMock.getGovClaim).toHaveBeenCalledWith({ id: "gc-1" })
@@ -419,3 +427,488 @@ describe("ModerationPage gov claims", () => {
     expect(screen.queryByRole("button", { name: "Load more" })).not.toBeInTheDocument()
   })
 })
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => {
+    resolve = r
+  })
+  return { promise, resolve }
+}
+
+function resetShellAfterTest() {
+  const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+  onTestFinished(() => {
+    scrollTo.mockRestore()
+    useUiStore.setState({ page: "home", focusId: null, toast: null })
+    window.history.replaceState(null, "", "#/")
+  })
+}
+
+function rowIn(list: HTMLElement, text: string): HTMLElement {
+  const row = within(list).getByText(text).closest<HTMLElement>('[role="button"]')
+  if (!row) throw new Error(`${text} has no keyboard-operable row`)
+  return row
+}
+
+function StoreDrivenModerationPage() {
+  const focusId = useUiStore((s) => s.focusId)
+  return <ModerationPage focusId={focusId} />
+}
+
+describe("ModerationPage selection after a decision", () => {
+  it("clears the selection once Keep drops the item from the queue, never opening another item's actions", async () => {
+    resetShellAfterTest()
+    const refetch = deferred<ModerationListResponse>()
+    apiMock.listModeration
+      .mockResolvedValueOnce(modPage([COMMENT_REPORT, APPEAL]))
+      .mockReturnValue(refetch.promise)
+    mockModDetails(COMMENT_REPORT, APPEAL)
+    apiMock.approveModeration.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Keep" }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Submit" }))
+
+    await waitFor(() => expect(apiMock.approveModeration).toHaveBeenCalledWith({ id: "mod-1" }))
+    expect(within(detailCard()).getByRole("heading", { name: "MOD-101" })).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Overturn" })).not.toBeInTheDocument()
+
+    await act(async () => {
+      refetch.resolve(modPage([APPEAL]))
+    })
+    await waitFor(() => expect(within(listCard("Queue")).queryByText("MOD-101")).not.toBeInTheDocument())
+    expect(await within(detailCard()).findByText("No item selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Keep" })).not.toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Overturn" })).not.toBeInTheDocument()
+  })
+
+  it("clears a deep-linked item once it is removed, though the list never held it, and opens nothing else", async () => {
+    resetShellAfterTest()
+    const OTHER = modItem({ id: "mod-9", flag: "MOD-909" })
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT, APPEAL]))
+    mockModDetails(COMMENT_REPORT, APPEAL, OTHER)
+    apiMock.removeModeration.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId="mod-9" />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-909" })
+    await within(listCard("Queue")).findByText("MOD-101")
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Remove" }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Remove" }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Submit" }))
+
+    await waitFor(() => expect(apiMock.removeModeration).toHaveBeenCalledWith({ id: "mod-9" }))
+    expect(await within(detailCard()).findByText("No item selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Remove" })).not.toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "MOD-101" })).not.toBeInTheDocument()
+    expect(rowIn(listCard("Queue"), "MOD-101")).not.toHaveAttribute("aria-current")
+  })
+
+  it("holds the decision buttons disabled until the queue refetch lands, then clears without opening another", async () => {
+    resetShellAfterTest()
+    const refetch = deferred<ModerationListResponse>()
+    apiMock.listModeration
+      .mockResolvedValueOnce(modPage([COMMENT_REPORT, APPEAL]))
+      .mockReturnValue(refetch.promise)
+    mockModDetails(COMMENT_REPORT, APPEAL)
+    apiMock.holdModeration.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Hold" }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Submit" }))
+
+    await waitFor(() => expect(apiMock.holdModeration).toHaveBeenCalledWith({ id: "mod-1" }))
+    await waitFor(() => expect(apiMock.listModeration).toHaveBeenCalledTimes(2))
+    for (const name of ["Keep", "Hold", "Remove"]) {
+      expect(within(detailCard()).getByRole("button", { name })).toBeDisabled()
+    }
+
+    await act(async () => {
+      refetch.resolve(modPage([COMMENT_REPORT, APPEAL]))
+    })
+    expect(await within(detailCard()).findByText("No item selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "MOD-202" })).not.toBeInTheDocument()
+    expect(rowIn(listCard("Queue"), "MOD-101")).not.toHaveAttribute("aria-current")
+    expect(rowIn(listCard("Queue"), "MOD-202")).not.toHaveAttribute("aria-current")
+  })
+
+  it("keeps a picked queue item open when a filter drops it from the list", async () => {
+    apiMock.listModeration.mockImplementation(async (params: { filter?: string }) =>
+      modPage(params.filter === "appeal" ? [APPEAL] : [COMMENT_REPORT, APPEAL]),
+    )
+    mockModDetails(COMMENT_REPORT, APPEAL)
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(screen.getByRole("button", { name: "Appeal" }))
+
+    await waitFor(() => expect(within(listCard("Queue")).queryByText("MOD-101")).not.toBeInTheDocument())
+    expect(within(detailCard()).getByRole("heading", { name: "MOD-101" })).toBeInTheDocument()
+    expect(rowIn(listCard("Queue"), "MOD-202")).not.toHaveAttribute("aria-current")
+  })
+
+  it("keeps a picked claim open when a filter drops it from the list", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockImplementation(async (params: { filter?: string }) =>
+      claimPage(params.filter === "approved" ? [NGUYEN] : [RIVERA, NGUYEN]),
+    )
+    mockClaimDetails(RIVERA, NGUYEN)
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await openGovClaims()
+    await within(detailCard()).findByRole("heading", { name: "Maya Rivera" })
+
+    await userEvent.click(screen.getByRole("button", { name: "Approved" }))
+
+    await waitFor(() =>
+      expect(within(listCard("Gov claims")).queryByText("Maya Rivera")).not.toBeInTheDocument(),
+    )
+    expect(within(detailCard()).getByRole("heading", { name: "Maya Rivera" })).toBeInTheDocument()
+    expect(rowIn(listCard("Gov claims"), "Tom Nguyen")).not.toHaveAttribute("aria-current")
+  })
+
+  it("clears a decided claim even while the All list still holds it, and opens no other claim", async () => {
+    let rejected = false
+    const rivera = () => ({ ...RIVERA, status: rejected ? ("rejected" as const) : RIVERA.status })
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockImplementation(async () => claimPage([rivera(), NGUYEN]))
+    apiMock.getGovClaim.mockImplementation(async ({ id }: { id: string }) =>
+      id === "gc-1" ? rivera() : NGUYEN,
+    )
+    apiMock.rejectGovClaim.mockImplementation(async () => {
+      rejected = true
+      return {}
+    })
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await openGovClaims()
+    await userEvent.click(screen.getByRole("button", { name: "All" }))
+    await waitFor(() => expect(apiMock.listGovClaims).toHaveBeenLastCalledWith({}))
+    await within(detailCard()).findByRole("heading", { name: "Maya Rivera" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Reject" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Not in the directory")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Reject claim" }))
+
+    expect(await within(detailCard()).findByText("No claim selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "Tom Nguyen" })).not.toBeInTheDocument()
+    expect(rowIn(listCard("Gov claims"), "Maya Rivera")).not.toHaveAttribute("aria-current")
+  })
+
+  it("still confirms Keep when the queue drops the item before the detail refetch settles", async () => {
+    resetShellAfterTest()
+    const detailRefetch = deferred<ModerationItemDTO>()
+    apiMock.listModeration
+      .mockResolvedValueOnce(modPage([COMMENT_REPORT, APPEAL]))
+      .mockResolvedValue(modPage([APPEAL]))
+    apiMock.getModerationItem
+      .mockResolvedValueOnce(modDetail(COMMENT_REPORT))
+      .mockReturnValue(detailRefetch.promise)
+    apiMock.approveModeration.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Keep" }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Submit" }))
+
+    expect(await within(detailCard()).findByText("No item selected")).toBeInTheDocument()
+    await act(async () => {
+      detailRefetch.resolve(modDetail(COMMENT_REPORT))
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({ text: "MOD-101 · kept", tone: "ok" }),
+    )
+  })
+
+  it("words Keep the same way in the button, the dialog and the toast", async () => {
+    resetShellAfterTest()
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT]))
+    mockModDetails(COMMENT_REPORT)
+    apiMock.approveModeration.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Keep" }))
+    const dialog = await screen.findByRole("dialog")
+    expect(within(dialog).getByRole("heading", { name: "Keep MOD-101" })).toBeInTheDocument()
+    await userEvent.click(within(dialog).getByRole("button", { name: "Submit" }))
+    await waitFor(() => expect(useUiStore.getState().toast?.text).toBe("MOD-101 · kept"))
+  })
+
+  it("names the item in the remove dialogs", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT]))
+    mockModDetails(COMMENT_REPORT)
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Remove" }))
+    expect(
+      within(await screen.findByRole("dialog")).getByRole("heading", { name: "Remove MOD-101" }),
+    ).toBeInTheDocument()
+  })
+
+  it("clears the selection once a gov claim decision drops the claim from the list, never opening another", async () => {
+    const refetch = deferred<GovClaimListResponse>()
+    const SECOND = claim({ id: "gc-3", name: "Lee Park" })
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims
+      .mockResolvedValueOnce(claimPage([RIVERA, SECOND]))
+      .mockReturnValue(refetch.promise)
+    mockClaimDetails(RIVERA, SECOND)
+    apiMock.rejectGovClaim.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await openGovClaims()
+    await within(detailCard()).findByRole("heading", { name: "Maya Rivera" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Reject" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Not in the directory")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Reject claim" }))
+
+    await waitFor(() => expect(apiMock.rejectGovClaim).toHaveBeenCalled())
+    expect(within(detailCard()).queryByRole("heading", { name: "Lee Park" })).not.toBeInTheDocument()
+    await act(async () => {
+      refetch.resolve(claimPage([SECOND]))
+    })
+    await waitFor(() =>
+      expect(within(listCard("Gov claims")).queryByText("Maya Rivera")).not.toBeInTheDocument(),
+    )
+    expect(await within(detailCard()).findByText("No claim selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "Lee Park" })).not.toBeInTheDocument()
+  })
+
+  it("still confirms a gov claim approval when the list drops the claim before the detail refetch settles", async () => {
+    resetShellAfterTest()
+    const detailRefetch = deferred<GovClaimDTO>()
+    const SECOND = claim({ id: "gc-3", name: "Lee Park" })
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims
+      .mockResolvedValueOnce(claimPage([RIVERA, SECOND]))
+      .mockResolvedValue(claimPage([SECOND]))
+    apiMock.getGovClaim.mockResolvedValueOnce(RIVERA).mockReturnValue(detailRefetch.promise)
+    apiMock.approveGovClaim.mockResolvedValue({})
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await openGovClaims()
+    await within(detailCard()).findByRole("heading", { name: "Maya Rivera" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Approve" }))
+    await userEvent.click(
+      within(await screen.findByRole("dialog")).getByRole("button", { name: "Approve and provision" }),
+    )
+
+    expect(await within(detailCard()).findByText("No claim selected")).toBeInTheDocument()
+    await act(async () => {
+      detailRefetch.resolve({ ...RIVERA, status: "approved" })
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: "Maya Rivera approved · government role provisioned",
+        tone: "ok",
+      }),
+    )
+  })
+
+  it("drops the deep link when the operator switches sections, so Queue opens its first item again", async () => {
+    resetShellAfterTest()
+    useUiStore.setState({ page: "moderation", focusId: "mod-2" })
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT, APPEAL]))
+    apiMock.listGovClaims.mockResolvedValue(claimPage([]))
+    mockModDetails(COMMENT_REPORT, APPEAL)
+    renderWithQuery(<StoreDrivenModerationPage />)
+    await within(detailCard()).findByRole("heading", { name: "MOD-202" })
+
+    await openGovClaims()
+    await screen.findByText("No claims here")
+    await userEvent.click(screen.getByRole("radio", { name: "Queue" }))
+
+    expect(await within(detailCard()).findByRole("heading", { name: "MOD-101" })).toBeInTheDocument()
+    expect(useUiStore.getState().focusId).toBeNull()
+  })
+})
+
+describe("ModerationPage detail", () => {
+  it("opens held images in the lightbox and links held videos", async () => {
+    const withMedia = modItem({ id: "mod-5", flag: "MOD-505" })
+    apiMock.listModeration.mockResolvedValue(modPage([withMedia]))
+    apiMock.getModerationItem.mockResolvedValue({
+      ...modDetail(withMedia),
+      media: [
+        { id: "md-1", kind: "image", url: "https://media.example/full-1.jpg", thumbUrl: "https://media.example/thumb-1.jpg" },
+        { id: "md-2", kind: "video", url: "https://media.example/clip.mp4" },
+      ],
+    } satisfies ModerationItemDTO)
+    renderWithQuery(
+      <>
+        <ModerationPage focusId={null} />
+        <LightboxHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "MOD-505" })
+
+    const video = within(detailCard()).getByRole("link", { name: "Held video 1 of 1" })
+    expect(video).toHaveAttribute("href", "https://media.example/clip.mp4")
+    expect(video).toHaveAttribute("target", "_blank")
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Held image 1 of 1" }))
+    const lightbox = await screen.findByRole("dialog", { name: "Held image 1 of 1" })
+    expect(within(lightbox).getByRole("img", { name: "Held image 1 of 1" })).toHaveAttribute(
+      "src",
+      "https://media.example/full-1.jpg",
+    )
+  })
+
+  it("keeps each signal on its own row when a new signal arrives first", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT]))
+    let signals: ModerationItemDTO["signals"] = [{ label: "Prior flags", val: "3", tone: "warn" }]
+    apiMock.getModerationItem.mockImplementation(async () => ({ ...modDetail(COMMENT_REPORT), signals }))
+    const { client } = renderWithQuery(<ModerationPage focusId={null} />)
+    const before = (await within(detailCard()).findByText("Prior flags")).closest(".umr")
+
+    signals = [{ label: "Burst of reports", val: "12", tone: "bad" }, ...signals]
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["admin", "moderation", "detail", "mod-1"] })
+    })
+    await within(detailCard()).findByText("Burst of reports")
+    expect(within(detailCard()).getByText("Prior flags").closest(".umr")).toBe(before)
+  })
+
+  it("shows a not-found state without a retry for an item that no longer exists", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT]))
+    apiMock.getModerationItem.mockRejectedValue(
+      new AppError(ErrorCode.NOT_FOUND, "No moderation item mod-gone", { httpStatus: 404 }),
+    )
+    renderWithQuery(<ModerationPage focusId="mod-gone" />)
+    expect(await within(detailCard()).findByText("Item not found")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Try again" })).not.toBeInTheDocument()
+  })
+
+  it("shows a not-found state without a retry for a claim that no longer exists", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockResolvedValue(claimPage([RIVERA]))
+    apiMock.getGovClaim.mockRejectedValue(
+      new AppError(ErrorCode.NOT_FOUND, "No gov claim gc-1", { httpStatus: 404 }),
+    )
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await openGovClaims()
+    expect(await within(detailCard()).findByText("Claim not found")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Try again" })).not.toBeInTheDocument()
+  })
+
+  it("opens the subject's profile with the Space key", async () => {
+    resetShellAfterTest()
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT]))
+    mockModDetails(COMMENT_REPORT)
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+
+    within(detailCard()).getByTitle("Open Subject Person's profile").focus()
+    await userEvent.keyboard(" ")
+    expect(useUiStore.getState()).toMatchObject({ page: "users", focusId: "u-subject" })
+  })
+})
+
+describe("ModerationPage keyboard and names", () => {
+  it("selects queue rows from the keyboard and marks the selected row as current", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([COMMENT_REPORT, APPEAL]))
+    mockModDetails(COMMENT_REPORT, APPEAL)
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "MOD-101" })
+    const list = listCard("Queue")
+    expect(rowIn(list, "MOD-101")).toHaveAttribute("aria-current", "true")
+
+    rowIn(list, "MOD-202").focus()
+    await userEvent.keyboard(" ")
+    expect(await within(detailCard()).findByRole("heading", { name: "MOD-202" })).toBeInTheDocument()
+    expect(rowIn(list, "MOD-202")).toHaveAttribute("aria-current", "true")
+    expect(rowIn(list, "MOD-101")).not.toHaveAttribute("aria-current")
+  })
+
+  it("selects gov claim rows from the keyboard", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockResolvedValue(claimPage([RIVERA, NGUYEN]))
+    mockClaimDetails(RIVERA, NGUYEN)
+    renderWithQuery(<ModerationPage focusId={null} />)
+    await openGovClaims()
+    await within(detailCard()).findByRole("heading", { name: "Maya Rivera" })
+
+    rowIn(listCard("Gov claims"), "Tom Nguyen").focus()
+    await userEvent.keyboard("{Enter}")
+    expect(await within(detailCard()).findByRole("heading", { name: "Tom Nguyen" })).toBeInTheDocument()
+    expect(rowIn(listCard("Gov claims"), "Tom Nguyen")).toHaveAttribute("aria-current", "true")
+  })
+
+  it("names both search boxes", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockResolvedValue(claimPage([]))
+    renderWithQuery(<ModerationPage focusId={null} />)
+    expect(screen.getByRole("textbox", { name: "Search the moderation queue" })).toBeInTheDocument()
+    await openGovClaims()
+    expect(screen.getByRole("textbox", { name: "Search gov claims" })).toBeInTheDocument()
+  })
+
+  it("moves between sections with the arrow keys like a radio group", async () => {
+    apiMock.listModeration.mockResolvedValue(modPage([]))
+    apiMock.listGovClaims.mockResolvedValue(claimPage([]))
+    renderWithQuery(<ModerationPage focusId={null} />)
+    const queue = screen.getByRole("radio", { name: "Queue" })
+    const govClaims = screen.getByRole("radio", { name: "Gov claims" })
+    expect(queue).toHaveAttribute("tabindex", "0")
+    expect(govClaims).toHaveAttribute("tabindex", "-1")
+
+    queue.focus()
+    await userEvent.keyboard("{ArrowRight}")
+    expect(govClaims).toHaveAttribute("aria-checked", "true")
+    expect(govClaims).toHaveFocus()
+    expect(await screen.findByText("No claims here")).toBeInTheDocument()
+
+    await userEvent.keyboard("{ArrowDown}")
+    expect(queue).toHaveAttribute("aria-checked", "true")
+    expect(queue).toHaveFocus()
+  })
+})
diff --git a/apps/admin/src/features/moderation/moderation-page.tsx b/apps/admin/src/features/moderation/moderation-page.tsx
index 26484a6..2d5bceb 100644
--- a/apps/admin/src/features/moderation/moderation-page.tsx
+++ b/apps/admin/src/features/moderation/moderation-page.tsx
@@ -18,7 +18,11 @@ import { Icons, type IconComponent } from "@/components/icons"
 import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { confirmDialog, promptDialog } from "@/components/shared/dialog"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
+import { LightboxSync, openLightbox, type LightboxImage } from "@/components/shared/lightbox"
 import { useDebounced } from "@/hooks/use-debounced"
+import { isNotFound } from "@/lib/api"
+import { menuFocusIndex } from "@/features/orgs/org-members"
 import { getModerationDestination } from "@/features/moderation/moderation-navigation"
 import {
   useApproveModeration,
@@ -30,7 +34,7 @@ import {
 } from "@/features/moderation/use-moderation"
 import { useGovClaimListInfinite } from "@/features/moderation/use-gov-claims"
 import { GovClaimDetail, GovClaimRow } from "@/features/moderation/gov-claims-views"
-import { useNav, useToast } from "@/store/ui-store"
+import { useNav } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 
@@ -91,7 +95,18 @@ function ModerationRow({
   const KindIco = KIND_ICON[item.kind] ?? Icons.Shield
   const priority = PRIORITY_VIEW[item.priority] ?? PRIORITY_VIEW.low
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={() => onSelect(item.id)}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={() => onSelect(item.id)}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onSelect(item.id)
+      }}
+    >
       <span className="prow-ico hue-lilac" title={MODERATION_KIND_LABELS[item.kind]}>
         <KindIco size={15} />
       </span>
@@ -126,9 +141,16 @@ function SignalCell({ signal }: { signal: ModerationSignal }) {
   )
 }
 
+// Signals carry no id and the backend does not promise unique labels, so a repeated label is told
+// apart by how many times it appeared before.
+function signalKey(signals: readonly ModerationSignal[], index: number): string {
+  const label = signals[index]!.label
+  const earlier = signals.slice(0, index).filter((s) => s.label === label).length
+  return `${label}#${earlier}`
+}
+
 function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved: (id: string) => void }) {
   const q = useModerationItem(itemId)
-  const toast = useToast()
   const nav = useNav()
 
   const approve = useApproveModeration()
@@ -139,7 +161,9 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
   const busy = approve.isPending || remove.isPending || hold.isPending || appeal.isPending
 
   if (q.isLoading) return <LoadingState label="Loading item..." />
-  if (q.isError) return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  if (q.isError && !isNotFound(q.error)) {
+    return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  }
   const item: ModerationItemDTO | undefined = q.data
   if (!item)
     return (
@@ -153,62 +177,53 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
   const priority = PRIORITY_VIEW[item.priority] ?? PRIORITY_VIEW.low
   const isUserReport = item.kind === "user_report"
   const destination = getModerationDestination(item.destinationKind, item.destinationId)
+  const approveVerb = isUserReport ? "Keep" : "Approve"
+  const heldImages: LightboxImage[] = item.media
+    .filter((m) => m.kind === "image")
+    .map((m, i, images) => ({ id: m.id, url: m.url, alt: `Held image ${i + 1} of ${images.length}` }))
+  const heldVideoIds = item.media.filter((m) => m.kind === "video").map((m) => m.id)
+  const refreshMedia = () => void q.refetch()
 
   const onApprove = async () => {
     const note = await promptDialog({
-      title: isUserReport ? "Dismiss report" : "Approve",
+      title: `${approveVerb} ${item.flag}`,
       label: "Note (optional)",
     })
     if (note === null) return
     approve.mutate(
-      { id: item.id, ...(note ? { note } : {}) },
-      {
-        onSuccess: () => {
-          toast(`${item.flag} · ${isUserReport ? "report dismissed" : "approved"}`)
-          onResolved(item.id)
-        },
-      },
+      { request: { id: item.id, ...(note ? { note } : {}) }, item },
+      { onSuccess: () => onResolved(item.id) },
     )
   }
 
   const onRemove = async () => {
     const ok = await confirmDialog({
-      title: "Remove content",
+      title: `Remove ${item.flag}`,
       body: "This takes the reported content down.",
       danger: true,
       confirmLabel: "Remove",
     })
     if (!ok) return
     const reason = await promptDialog({
-      title: "Remove content",
+      title: `Remove ${item.flag}`,
       label: "Reason (optional)",
     })
     if (reason === null) return
     remove.mutate(
-      { id: item.id, ...(reason ? { reason } : {}) },
-      {
-        onSuccess: () => {
-          toast(`${item.flag} · removed`)
-          onResolved(item.id)
-        },
-      },
+      { request: { id: item.id, ...(reason ? { reason } : {}) }, item },
+      { onSuccess: () => onResolved(item.id) },
     )
   }
 
   const onHold = async () => {
     const note = await promptDialog({
-      title: "Hold for review",
+      title: `Hold ${item.flag} for review`,
       label: "Note (optional)",
     })
     if (note === null) return
     hold.mutate(
-      { id: item.id, ...(note ? { note } : {}) },
-      {
-        onSuccess: () => {
-          toast(`${item.flag} · held for review`)
-          onResolved(item.id)
-        },
-      },
+      { request: { id: item.id, ...(note ? { note } : {}) }, item },
+      { onSuccess: () => onResolved(item.id) },
     )
   }
 
@@ -219,13 +234,8 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
     })
     if (note === null) return
     appeal.mutate(
-      { id: item.id, decision, ...(note ? { note } : {}) },
-      {
-        onSuccess: () => {
-          toast(`${item.flag} · appeal ${decision === "uphold" ? "upheld" : "overturned"}`)
-          onResolved(item.id)
-        },
-      },
+      { request: { id: item.id, decision, ...(note ? { note } : {}) }, item },
+      { onSuccess: () => onResolved(item.id) },
     )
   }
 
@@ -306,17 +316,45 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
               <div className="sub-head">Media</div>
               <div className="sub-body" style={{ padding: 10 }}>
                 <div className="dsc-msg-media">
+                  <LightboxSync images={heldImages} />
                   {item.media.map((m) => {
-                    const thumb = m.kind === "image" ? (m.thumbUrl ?? m.url) : m.thumbUrl
+                    if (m.kind === "image") {
+                      const index = heldImages.findIndex((img) => img.id === m.id)
+                      return (
+                        <button
+                          key={m.id}
+                          type="button"
+                          className="dsc-msg-thumb dsc-msg-thumb-open"
+                          title="Expand this image"
+                          onClick={() => openLightbox(heldImages, index, refreshMedia)}
+                        >
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img
+                            src={m.thumbUrl ?? m.url}
+                            alt={heldImages[index]?.alt ?? ""}
+                            loading="lazy"
+                            decoding="async"
+                          />
+                        </button>
+                      )
+                    }
                     return (
-                      <span key={m.id} className="dsc-msg-thumb">
-                        {thumb ? (
+                      <a
+                        key={m.id}
+                        className="dsc-msg-thumb"
+                        href={m.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="Open this video in a new tab"
+                        aria-label={`Held video ${heldVideoIds.indexOf(m.id) + 1} of ${heldVideoIds.length}`}
+                      >
+                        {m.thumbUrl ? (
                           // eslint-disable-next-line @next/next/no-img-element
-                          <img src={thumb} alt="" />
+                          <img src={m.thumbUrl} alt="" loading="lazy" decoding="async" />
                         ) : (
                           <Icons.FileText size={14} />
                         )}
-                      </span>
+                      </a>
                     )
                   })}
                 </div>
@@ -330,9 +368,8 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
               <div className="sub-head">Signals</div>
               <div className="sub-body">
                 <div className="user-meta-rows">
-                  {item.signals.map((s, i) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <SignalCell key={i} signal={s} />
+                  {item.signals.map((s, i, all) => (
+                    <SignalCell key={signalKey(all, i)} signal={s} />
                   ))}
                 </div>
               </div>
@@ -353,7 +390,9 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
                     title="Open this moderation item"
                     onClick={() => nav("moderation", s.id)}
                     onKeyDown={(e) => {
-                      if (e.key === "Enter") nav("moderation", s.id)
+                      if (!isKeyboardActivationKey(e.key)) return
+                      e.preventDefault()
+                      nav("moderation", s.id)
                     }}
                   >
                     <span className="prow-ico hue-lilac">
@@ -405,7 +444,9 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
                     title={`Open ${item.user.name}'s profile`}
                     onClick={() => nav("users", userId)}
                     onKeyDown={(e) => {
-                      if (e.key === "Enter") nav("users", userId)
+                      if (!isKeyboardActivationKey(e.key)) return
+                      e.preventDefault()
+                      nav("users", userId)
                     }}
                   >
                     {head}
@@ -455,7 +496,7 @@ function ModerationDetail({ itemId, onResolved }: { itemId: string; onResolved:
           </>
         ) : (
           <button className="btn sm primary" disabled={busy} onClick={onApprove}>
-            <Icons.Check size={11} /> {isUserReport ? "Keep" : "Approve"}
+            <Icons.Check size={11} /> {approveVerb}
           </button>
         )}
         <button className="btn sm" disabled={busy} onClick={onHold}>
@@ -480,20 +521,31 @@ function GovClaimsSection() {
     ...(filter === "all" ? {} : { filter }),
     ...(debouncedQuery.trim() ? { q: debouncedQuery.trim() } : {}),
   }
+  const listKey = JSON.stringify(listParams)
   const listQuery = useGovClaimListInfinite(listParams)
   const items = React.useMemo(
     () => listQuery.data?.pages.flatMap((p) => p.items) ?? [],
     [listQuery.data],
   )
 
+  // Only the first load picks a claim on the operator's behalf. A pick that a filter or search leaves
+  // out stays open (the detail reads it by id); a pick that drops out of the same list after a refetch
+  // clears, so the pane never jumps to another claim's live Approve and Reject buttons. A decision
+  // clears its claim outright, since the list may still hold it (All) or never did. Decided only on
+  // data fetched for the current params.
+  const [autoPick, setAutoPick] = React.useState(true)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-    if (selId && items.length && !items.some((x) => x.id === selId)) setSelId(items[0]!.id)
-  }, [items, selId])
-
-  const onDecided = (id: string) => {
-    setSelId((cur) => (cur === id ? null : cur))
-  }
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
+  const clearIfSelected = (id: string) => setSelId((cur) => (cur === id ? null : cur))
 
   return (
     <>
@@ -513,6 +565,7 @@ function GovClaimsSection() {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search gov claims"
             placeholder="Search name or organization…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -566,7 +619,7 @@ function GovClaimsSection() {
 
         <section className="card md-detail-card">
           {selId ? (
-            <GovClaimDetail key={selId} claimId={selId} onDecided={onDecided} />
+            <GovClaimDetail key={selId} claimId={selId} onDecided={clearIfSelected} />
           ) : (
             <EmptyState
               title="No claim selected"
@@ -591,6 +644,7 @@ function ModerationQueueSection({ focusId }: SectionPageProps) {
     ...(filter === "all" ? {} : { filter }),
     ...(debouncedQuery.trim() ? { q: debouncedQuery.trim() } : {}),
   }
+  const listKey = JSON.stringify(listParams)
   const listQuery = useModerationListInfinite(listParams)
   const items = React.useMemo(
     () => listQuery.data?.pages.flatMap((p) => p.items) ?? [],
@@ -600,14 +654,25 @@ function ModerationQueueSection({ focusId }: SectionPageProps) {
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
+  // Only the first load picks an item on the operator's behalf, and a deep-linked item is never
+  // replaced. A pick that a filter or search leaves out stays open (the detail reads it by id); a pick
+  // that drops out of the same list after a refetch clears, so the pane never jumps to another item's
+  // live decision buttons. A decision clears its item outright: the detail carries no status, so a
+  // resolved item the list never held would otherwise keep live buttons. Decided only on data fetched
+  // for the current params.
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-    if (selId && items.length && !items.some((x) => x.id === selId)) setSelId(items[0]!.id)
-  }, [items, selId])
-
-  const onResolved = (id: string) => {
-    setSelId((cur) => (cur === id ? null : cur))
-  }
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
+  const clearIfSelected = (id: string) => setSelId((cur) => (cur === id ? null : cur))
 
   return (
     <>
@@ -631,6 +696,7 @@ function ModerationQueueSection({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search the moderation queue"
             placeholder="Search flag, reporter, reason…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -684,7 +750,7 @@ function ModerationQueueSection({ focusId }: SectionPageProps) {
 
         <section className="card md-detail-card">
           {selId ? (
-            <ModerationDetail key={selId} itemId={selId} onResolved={onResolved} />
+            <ModerationDetail key={selId} itemId={selId} onResolved={clearIfSelected} />
           ) : (
             <EmptyState
               title="No item selected"
@@ -698,9 +764,23 @@ function ModerationQueueSection({ focusId }: SectionPageProps) {
   )
 }
 
+const SECTION_OPTIONS: { id: Section; label: string; Icon: IconComponent }[] = [
+  { id: "queue", label: "Queue", Icon: Icons.Shield },
+  { id: "gov_claims", label: "Gov claims", Icon: Icons.Building },
+]
+
 export function ModerationPage({ focusId }: SectionPageProps) {
   const [section, setSection] = React.useState<Section>("queue")
   const queue = section === "queue"
+  const nav = useNav()
+  const radioRefs = React.useRef<(HTMLButtonElement | null)[]>([])
+
+  const switchTo = (next: Section) => {
+    if (next === section) return
+    // The deep link names a queue item; leaving the queue ends it, so coming back opens the queue fresh.
+    if (focusId) nav("moderation")
+    setSection(next)
+  }
 
   return (
     <>
@@ -723,22 +803,32 @@ export function ModerationPage({ focusId }: SectionPageProps) {
       />
 
       <div className="mailbox-switch" role="radiogroup" aria-label="Moderation section">
-        <button
-          className={`mbx ${queue ? "active" : ""}`}
-          role="radio"
-          aria-checked={queue}
-          onClick={() => setSection("queue")}
-        >
-          <Icons.Shield size={13} /> Queue
-        </button>
-        <button
-          className={`mbx ${!queue ? "active" : ""}`}
-          role="radio"
-          aria-checked={!queue}
-          onClick={() => setSection("gov_claims")}
-        >
-          <Icons.Building size={13} /> Gov claims
-        </button>
+        {SECTION_OPTIONS.map(({ id, label, Icon }, i) => {
+          const checked = section === id
+          return (
+            <button
+              key={id}
+              ref={(el) => {
+                radioRefs.current[i] = el
+              }}
+              type="button"
+              className={`mbx ${checked ? "active" : ""}`}
+              role="radio"
+              aria-checked={checked}
+              tabIndex={checked ? 0 : -1}
+              onClick={() => switchTo(id)}
+              onKeyDown={(e) => {
+                const next = menuFocusIndex(e.key, i, SECTION_OPTIONS.length, "both")
+                if (next === null) return
+                e.preventDefault()
+                switchTo(SECTION_OPTIONS[next]!.id)
+                radioRefs.current[next]?.focus()
+              }}
+            >
+              <Icon size={13} /> {label}
+            </button>
+          )
+        })}
       </div>
 
       {queue ? <ModerationQueueSection focusId={focusId} /> : <GovClaimsSection />}
diff --git a/apps/admin/src/features/moderation/use-gov-claims.ts b/apps/admin/src/features/moderation/use-gov-claims.ts
index b32d43a..b197fff 100644
--- a/apps/admin/src/features/moderation/use-gov-claims.ts
+++ b/apps/admin/src/features/moderation/use-gov-claims.ts
@@ -4,6 +4,7 @@ import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tansta
 import type {
   ApproveGovClaimRequest,
   GetGovClaimResponse,
+  GovClaimDTO,
   GovClaimListQuery,
   GovClaimListResponse,
   RejectGovClaimRequest,
@@ -12,8 +13,10 @@ import type {
 
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
-import { govClaimApproveErrorMessage } from "@/features/moderation/gov-claim-presentation"
-import { useToast } from "@/store/ui-store"
+import {
+  govCheckLabel,
+  govClaimApproveErrorMessage,
+} from "@/features/moderation/gov-claim-presentation"
 
 /**
  * Data hooks for the gov-provisioning queue (GET/POST /admin/gov-claims*). An operator verifies the
@@ -44,8 +47,10 @@ export function useGovClaim(id: string | null) {
 }
 
 function invalidateGovClaims(qc: ReturnType<typeof useQueryClient>, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.govClaims.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.govClaims.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.govClaims.detail(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.govClaims.all }),
+  ])
 }
 
 export function useVerifyGovClaimCheck() {
@@ -53,26 +58,44 @@ export function useVerifyGovClaimCheck() {
   return useMutation({
     mutationFn: (input: VerifyCheckRequest) => api.verifyGovClaim(input),
     onSuccess: (_res, { id }) => invalidateGovClaims(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { check, status }: VerifyCheckRequest) =>
+        `${govCheckLabel(check)} · ${status === "verified" ? "verified" : "back to pending"}`,
+    },
   })
 }
 
+/** The claim as the operator saw it, which the confirmation names. */
+export interface GovClaimDecision<Request> {
+  request: Request
+  claim: Pick<GovClaimDTO, "name">
+}
+
 export function useApproveGovClaim() {
   const qc = useQueryClient()
-  const toast = useToast()
   return useMutation({
-    mutationFn: (input: ApproveGovClaimRequest) => api.approveGovClaim(input),
-    onError: (error) => toast(govClaimApproveErrorMessage(error)),
-    onSuccess: (_res, { id }) => {
-      invalidateGovClaims(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.users.all })
+    mutationFn: ({ request }: GovClaimDecision<ApproveGovClaimRequest>) => api.approveGovClaim(request),
+    meta: {
+      errorMessage: govClaimApproveErrorMessage,
+      successMessage: (_res: unknown, { claim }: GovClaimDecision<ApproveGovClaimRequest>) =>
+        `${claim.name} approved · government role provisioned`,
     },
+    onSuccess: (_res, { request: { id } }) =>
+      Promise.all([
+        invalidateGovClaims(qc, id),
+        qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+      ]),
   })
 }
 
 export function useRejectGovClaim() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: RejectGovClaimRequest) => api.rejectGovClaim(input),
-    onSuccess: (_res, { id }) => invalidateGovClaims(qc, id),
+    mutationFn: ({ request }: GovClaimDecision<RejectGovClaimRequest>) => api.rejectGovClaim(request),
+    onSuccess: (_res, { request: { id } }) => invalidateGovClaims(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { claim }: GovClaimDecision<RejectGovClaimRequest>) =>
+        `${claim.name} rejected`,
+    },
   })
 }
diff --git a/apps/admin/src/features/moderation/use-moderation-invalidation.test.tsx b/apps/admin/src/features/moderation/use-moderation-invalidation.test.tsx
new file mode 100644
index 0000000..013febb
--- /dev/null
+++ b/apps/admin/src/features/moderation/use-moderation-invalidation.test.tsx
@@ -0,0 +1,116 @@
+import type { ReactNode } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { act, renderHook } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { AppError, ErrorCode } from "@civfix/shared"
+
+import type * as ApiModule from "@/lib/api"
+import { makeQueryClient, queryKeys } from "@/lib/query"
+import { useUiStore } from "@/store/ui-store"
+import { apiMock } from "@/test/api-mock"
+import { makeTestQueryClient } from "@/test/render"
+import {
+  useAppealModeration,
+  useApproveModeration,
+  useHoldModeration,
+  useRemoveModeration,
+} from "@/features/moderation/use-moderation"
+import { useApproveGovClaim } from "@/features/moderation/use-gov-claims"
+import { govClaimApproveErrorMessage } from "@/features/moderation/gov-claim-presentation"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+afterEach(() => {
+  useUiStore.setState({ toast: null })
+})
+
+function wrapperFor(client: ReturnType<typeof makeTestQueryClient>) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  }
+}
+
+async function invalidatedBy<I>(
+  useHook: () => { mutateAsync: (input: I) => Promise<unknown> },
+  input: I,
+): Promise<unknown[]> {
+  const client = makeTestQueryClient()
+  const spy = vi.spyOn(client, "invalidateQueries")
+  const { result } = renderHook(useHook, { wrapper: wrapperFor(client) })
+  await act(() => result.current.mutateAsync(input))
+  return spy.mock.calls.map(([filters]) => filters?.queryKey)
+}
+
+const SUBJECT = { flag: "MOD-101", kind: "user_report" } as const
+
+describe("moderation decisions refresh the sections the decision changes", () => {
+  it.each([
+    ["approve", "approveModeration", () => useApproveModeration(), { id: "m1" }],
+    ["remove", "removeModeration", () => useRemoveModeration(), { id: "m1" }],
+    ["hold", "holdModeration", () => useHoldModeration(), { id: "m1" }],
+    ["appeal", "appealModeration", () => useAppealModeration(), { id: "m1", decision: "uphold" as const }],
+  ] as const)("%s", async (_name, method, useHook, request) => {
+    apiMock[method].mockResolvedValue({ ok: true })
+    const keys = await invalidatedBy(useHook as never, { request, item: SUBJECT })
+    expect(apiMock[method]).toHaveBeenCalledWith(request)
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        queryKeys.moderation.all,
+        queryKeys.reports.all,
+        queryKeys.events.all,
+        queryKeys.users.all,
+        queryKeys.pages.all,
+      ]),
+    )
+  })
+})
+
+describe("moderation decisions confirm from the item the operator decided", () => {
+  it.each([
+    ["approve", "approveModeration", () => useApproveModeration(), { id: "m1" }, "image", "MOD-101 · approved"],
+    ["keep", "approveModeration", () => useApproveModeration(), { id: "m1" }, "user_report", "MOD-101 · kept"],
+    ["remove", "removeModeration", () => useRemoveModeration(), { id: "m1" }, "image", "MOD-101 · removed"],
+    ["hold", "holdModeration", () => useHoldModeration(), { id: "m1" }, "image", "MOD-101 · held for review"],
+    [
+      "uphold",
+      "appealModeration",
+      () => useAppealModeration(),
+      { id: "m1", decision: "uphold" as const },
+      "appeal",
+      "MOD-101 · appeal upheld",
+    ],
+    [
+      "overturn",
+      "appealModeration",
+      () => useAppealModeration(),
+      { id: "m1", decision: "overturn" as const },
+      "appeal",
+      "MOD-101 · appeal overturned",
+    ],
+  ] as const)("%s", async (_name, method, useHook, request, kind, text) => {
+    apiMock[method].mockResolvedValue({ ok: true })
+    await invalidatedBy(useHook as never, { request, item: { flag: "MOD-101", kind } })
+    expect(useUiStore.getState().toast).toMatchObject({ text, tone: "ok" })
+  })
+})
+
+describe("gov claim approval", () => {
+  it("shows its own error copy once, in the error tone", async () => {
+    apiMock.approveGovClaim.mockRejectedValue(new AppError(ErrorCode.FORBIDDEN, "Forbidden"))
+    const client = makeQueryClient()
+    const { result } = renderHook(() => useApproveGovClaim(), { wrapper: wrapperFor(client) })
+    await act(async () => {
+      await result.current
+        .mutateAsync({ request: { id: "gc-1" }, claim: { name: "Maya Rivera" } })
+        .catch(() => undefined)
+    })
+    expect(useUiStore.getState().toast).toMatchObject({
+      text: govClaimApproveErrorMessage(new AppError(ErrorCode.FORBIDDEN, "Forbidden")),
+      tone: "error",
+    })
+    expect(useUiStore.getState().toast?.text).toMatch(/^That contact email belongs to an operator account\./)
+  })
+})
diff --git a/apps/admin/src/features/moderation/use-moderation.ts b/apps/admin/src/features/moderation/use-moderation.ts
index df847b0..b357538 100644
--- a/apps/admin/src/features/moderation/use-moderation.ts
+++ b/apps/admin/src/features/moderation/use-moderation.ts
@@ -6,6 +6,7 @@ import type {
   AppealModerationRequest,
   GetModerationItemResponse,
   HoldModerationRequest,
+  ModerationItemDTO,
   ModerationListQuery,
   ModerationListResponse,
   RemoveModerationRequest,
@@ -14,10 +15,9 @@ import type {
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
 
-
 export function useModerationList(params: ModerationListQuery) {
   return useQuery<ModerationListResponse>({
-    queryKey: queryKeys.moderation.list(params),
+    queryKey: queryKeys.moderation.page(params),
     queryFn: () => api.listModeration(params),
   })
 }
@@ -43,40 +43,74 @@ export function useModerationItem(id: string | null) {
   })
 }
 
+// A decision can take down a report, a chat message, media or a whole cleanup (and its signup page) and
+// changes the subject's strikes and status, so every section that shows those refreshes too.
 function invalidateModeration(qc: ReturnType<typeof useQueryClient>, id?: string) {
-  if (id) qc.invalidateQueries({ queryKey: queryKeys.moderation.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.moderation.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    id ? qc.invalidateQueries({ queryKey: queryKeys.moderation.detail(id) }) : null,
+    qc.invalidateQueries({ queryKey: queryKeys.moderation.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.reports.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.events.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.pages.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+  ])
+}
+
+/** The item as the operator saw it, which the confirmation names. */
+export interface ModerationDecision<Request> {
+  request: Request
+  item: Pick<ModerationItemDTO, "flag" | "kind">
 }
 
 export function useApproveModeration() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: ApproveModerationRequest) => api.approveModeration(input),
-    onSuccess: (_res, { id }) => invalidateModeration(qc, id),
+    mutationFn: ({ request }: ModerationDecision<ApproveModerationRequest>) =>
+      api.approveModeration(request),
+    onSuccess: (_res, { request: { id } }) => invalidateModeration(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { item }: ModerationDecision<ApproveModerationRequest>) =>
+        `${item.flag} · ${item.kind === "user_report" ? "kept" : "approved"}`,
+    },
   })
 }
 
 export function useRemoveModeration() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: RemoveModerationRequest) => api.removeModeration(input),
-    onSuccess: (_res, { id }) => invalidateModeration(qc, id),
+    mutationFn: ({ request }: ModerationDecision<RemoveModerationRequest>) =>
+      api.removeModeration(request),
+    onSuccess: (_res, { request: { id } }) => invalidateModeration(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { item }: ModerationDecision<RemoveModerationRequest>) =>
+        `${item.flag} · removed`,
+    },
   })
 }
 
 export function useHoldModeration() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: HoldModerationRequest) => api.holdModeration(input),
-    onSuccess: (_res, { id }) => invalidateModeration(qc, id),
+    mutationFn: ({ request }: ModerationDecision<HoldModerationRequest>) =>
+      api.holdModeration(request),
+    onSuccess: (_res, { request: { id } }) => invalidateModeration(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { item }: ModerationDecision<HoldModerationRequest>) =>
+        `${item.flag} · held for review`,
+    },
   })
 }
 
 export function useAppealModeration() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: AppealModerationRequest) => api.appealModeration(input),
-    onSuccess: (_res, { id }) => invalidateModeration(qc, id),
+    mutationFn: ({ request }: ModerationDecision<AppealModerationRequest>) =>
+      api.appealModeration(request),
+    onSuccess: (_res, { request: { id } }) => invalidateModeration(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { request, item }: ModerationDecision<AppealModerationRequest>) =>
+        `${item.flag} · appeal ${request.decision === "uphold" ? "upheld" : "overturned"}`,
+    },
   })
 }
diff --git a/apps/admin/src/features/orgs/create-org-panel.test.tsx b/apps/admin/src/features/orgs/create-org-panel.test.tsx
index 9830ff1..ce37fd7 100644
--- a/apps/admin/src/features/orgs/create-org-panel.test.tsx
+++ b/apps/admin/src/features/orgs/create-org-panel.test.tsx
@@ -1,12 +1,17 @@
-import { screen } from "@testing-library/react"
+import * as React from "react"
+import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
+import { AppError, ErrorCode } from "@civfix/shared"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
 import { dragOutToBackdrop } from "@/test/modal"
 import { renderWithQuery } from "@/test/render"
+import { makeQueryClient } from "@/lib/query"
+import { useUiStore } from "@/store/ui-store"
 import { CreateOrgPanel } from "@/features/orgs/create-org-panel"
+import { makeOrg, userListItem } from "@/features/orgs/test-fixtures"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -63,3 +68,128 @@ describe("CreateOrgPanel backdrop", () => {
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 })
+
+function Opener() {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        New organization
+      </button>
+      <CreateOrgPanel open={open} onClose={() => setOpen(false)} onCreated={vi.fn()} />
+    </>
+  )
+}
+
+describe("CreateOrgPanel focus", () => {
+  it("moves focus into the panel, keeps Tab inside it and hands focus back on close", async () => {
+    apiMock.listAdminUsers.mockReturnValue(new Promise(() => {}))
+    renderWithQuery(<Opener />)
+    const opener = screen.getByRole("button", { name: "New organization" })
+
+    await userEvent.click(opener)
+    const dialog = screen.getByRole("dialog", { name: "New organization" })
+    expect(dialog).toContainElement(document.activeElement as HTMLElement)
+
+    await userEvent.tab({ shift: true })
+    expect(dialog).toContainElement(document.activeElement as HTMLElement)
+
+    await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }))
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(opener).toHaveFocus()
+  })
+})
+
+describe("CreateOrgPanel logo upload", () => {
+  it("cannot be dismissed while the logo is still uploading", async () => {
+    const { onClose } = renderPanel()
+    const logo = new File([new Uint8Array([137, 80, 78, 71])], "logo.png", { type: "image/png" })
+    // Hashing is the upload's first await; holding it keeps the upload in flight.
+    Object.defineProperty(logo, "arrayBuffer", { value: () => new Promise(() => {}) })
+
+    await userEvent.upload(screen.getByLabelText(/^Logo/), logo)
+    expect(await screen.findByText("Uploading the logo…")).toBeInTheDocument()
+
+    await userEvent.keyboard("{Escape}")
+    await userEvent.click(backdrop())
+
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled()
+    expect(screen.getByRole("button", { name: "Close" })).toBeDisabled()
+  })
+})
+
+describe("CreateOrgPanel owner picker", () => {
+  it("labels the owner picker as a group and links its error", async () => {
+    renderPanel()
+
+    await userEvent.click(screen.getByRole("button", { name: /Create organization/ }))
+
+    const owner = screen.getByRole("group", { name: /^Owner/ })
+    expect(owner).toContainElement(within(owner).getByRole("textbox"))
+    expect(owner).toHaveAccessibleDescription(/Pick the person who owns this organization\./)
+  })
+})
+
+function recordToasts(): { text: string; tone: string }[] {
+  const shown: { text: string; tone: string }[] = []
+  const unsubscribe = useUiStore.subscribe((s, prev) => {
+    if (s.toast && s.toast !== prev.toast) shown.push({ text: s.toast.text, tone: s.toast.tone })
+  })
+  onTestFinished(unsubscribe)
+  return shown
+}
+
+async function submitCreate(): Promise<void> {
+  renderWithQuery(<CreateOrgPanel open onClose={vi.fn()} onCreated={vi.fn()} />, makeQueryClient())
+  await userEvent.type(screen.getByLabelText("Name"), "River Keepers")
+  await userEvent.click(await screen.findByRole("button", { name: /Ana Ruiz/ }))
+  await userEvent.type(screen.getByLabelText(/^Reason/), "Partner meeting")
+  await userEvent.click(screen.getByRole("button", { name: /Create organization/ }))
+  await waitFor(() => expect(apiMock.adminCreateOrg).toHaveBeenCalledTimes(1))
+  await waitFor(() =>
+    expect(screen.getByRole("button", { name: /Create organization/ })).toBeEnabled(),
+  )
+}
+
+describe("CreateOrgPanel request errors", () => {
+  function mockOwner(): void {
+    apiMock.listAdminUsers.mockResolvedValue({
+      items: [userListItem({ id: "u-ana", name: "Ana Ruiz" })],
+      nextCursor: null,
+    })
+  }
+
+  it("shows exactly one error toast for a failure the form has no field for", async () => {
+    mockOwner()
+    apiMock.adminCreateOrg.mockRejectedValue(new AppError(ErrorCode.FORBIDDEN, "Operators only."))
+    const shown = recordToasts()
+
+    await submitCreate()
+
+    expect(shown).toEqual([{ text: "Operators only.", tone: "error" }])
+  })
+
+  it("confirms the new organization once, in the ok tone", async () => {
+    mockOwner()
+    apiMock.adminCreateOrg.mockResolvedValue(makeOrg({ name: "River Keepers" }))
+    const shown = recordToasts()
+
+    await submitCreate()
+
+    expect(shown).toEqual([{ text: "River Keepers created", tone: "ok" }])
+  })
+
+  it("shows a field error next to its field and no toast", async () => {
+    mockOwner()
+    apiMock.adminCreateOrg.mockRejectedValue(
+      new AppError(ErrorCode.VALIDATION, "Invalid", { fields: { name: "Name is too short." } }),
+    )
+    const shown = recordToasts()
+
+    await submitCreate()
+
+    expect(screen.getByText("Name is too short.")).toBeInTheDocument()
+    expect(shown).toEqual([])
+  })
+})
diff --git a/apps/admin/src/features/orgs/create-org-panel.tsx b/apps/admin/src/features/orgs/create-org-panel.tsx
index de966af..dd42e54 100644
--- a/apps/admin/src/features/orgs/create-org-panel.tsx
+++ b/apps/admin/src/features/orgs/create-org-panel.tsx
@@ -5,6 +5,7 @@ import type { AdminOrgDTO, OrgVerificationKind } from "@civfix/shared"
 
 import { Icons } from "@/components/icons"
 import { usePristineDismiss } from "@/components/shared/backdrop-dismiss"
+import { useModalFocus } from "@/components/shared/modal-focus"
 import {
   buildCreateRequest,
   clearChangedFieldErrors,
@@ -14,10 +15,16 @@ import {
   type OrgProfileDraft,
   type OrgProfileErrors,
 } from "@/features/orgs/org-form"
-import { OrgProfileFields, ReasonField, FieldError } from "@/features/orgs/org-form-fields"
-import { toastUnlessShownInline, useCreateOrg } from "@/features/orgs/use-orgs"
+import {
+  FieldError,
+  OrgProfileFields,
+  ReasonField,
+  fieldErrorId,
+  fieldHintId,
+} from "@/features/orgs/org-form-fields"
+import { useCreateOrg } from "@/features/orgs/use-orgs"
 import { UserPicker, type PickedUser } from "@/features/orgs/user-picker"
-import { ORG_KIND_LABEL } from "@/features/orgs/verification-panel"
+import { ORG_KIND_LABEL } from "@/features/orgs/org-verification"
 
 const VERIFICATION_OPTIONS: { value: "" | OrgVerificationKind; label: string }[] = [
   { value: "", label: "Leave unverified" },
@@ -83,13 +90,14 @@ function CreateOrgSlideOver({
 
   const pending = create.isPending
   // Overlay click, Escape, the close button and Cancel all come through here: none of them may
-  // dismiss the form while the request is in flight.
+  // dismiss the form while the request is in flight, nor while a logo upload would be orphaned.
   const close = React.useCallback(() => {
-    if (inFlight.current || pending) return
+    if (inFlight.current || pending || logoUploading) return
     onClose()
-  }, [onClose, pending])
+  }, [onClose, pending, logoUploading])
 
   const pristine =
+    !logoUploading &&
     owner === null &&
     draft.logoMediaId === null &&
     verifiedKind === "" &&
@@ -100,6 +108,7 @@ function CreateOrgSlideOver({
     draft.description === "" &&
     draft.websiteUrl === ""
   const backdrop = usePristineDismiss(close, pristine)
+  const panelRef = useModalFocus<HTMLElement>(true)
 
   const localErrors = React.useMemo(
     () => (submitted ? validateCreate(draft, owner, reason) : {}),
@@ -124,13 +133,9 @@ function CreateOrgSlideOver({
     setServerErrors({})
     create.mutate(request, {
       onSuccess: (org) => onCreated(org),
-      onError: (err) => {
-        // Every key fieldErrorsFromError can produce has a field in this form, so whatever it maps is
-        // shown inline; anything else (unknown field, non-validation failure) goes to the toast.
-        const fields = fieldErrorsFromError(err, request)
-        setServerErrors(fields)
-        toastUnlessShownInline(err, fields)
-      },
+      // Every key fieldErrorsFromError can produce has a field in this form, so whatever it maps is
+      // shown inline; useCreateOrg toasts anything else.
+      onError: (err) => setServerErrors(fieldErrorsFromError(err, request)),
       onSettled: () => {
         inFlight.current = false
       },
@@ -154,6 +159,7 @@ function CreateOrgSlideOver({
     <>
       <div className="panel-overlay open" {...backdrop} />
       <aside
+        ref={panelRef}
         className="panel org-create-panel open"
         role="dialog"
         aria-modal="true"
@@ -172,7 +178,7 @@ function CreateOrgSlideOver({
               className="closebtn"
               onClick={close}
               aria-label="Close"
-              disabled={pending}
+              disabled={pending || logoUploading}
             >
               <Icons.X size={16} />
             </button>
@@ -199,14 +205,26 @@ function CreateOrgSlideOver({
                 <div className="sub">
                   <div className="sub-head">Owner</div>
                   <div className="sub-body">
-                    <div className={`field ${errors.ownerUserId ? "has-error" : ""}`}>
-                      <span className="lbl">
+                    <div
+                      className={`field ${errors.ownerUserId ? "has-error" : ""}`}
+                      role="group"
+                      aria-labelledby="org-create-owner-label"
+                      aria-describedby={
+                        errors.ownerUserId
+                          ? fieldErrorId("org-create-owner")
+                          : fieldHintId("org-create-owner")
+                      }
+                    >
+                      <span className="lbl" id="org-create-owner-label">
                         Owner
                         <span className="opt">an existing civfix account</span>
                       </span>
                       <UserPicker value={owner} onChange={setOwner} />
-                      <FieldError text={errors.ownerUserId} />
-                      <span className="hint">
+                      <FieldError
+                        id={fieldErrorId("org-create-owner")}
+                        text={errors.ownerUserId}
+                      />
+                      <span className="hint" id={fieldHintId("org-create-owner")}>
                         The owner can edit the organization, manage its members and host under its
                         name. Ownership can be transferred later from the Members tab.
                       </span>
@@ -261,7 +279,12 @@ function CreateOrgSlideOver({
           <div className="panel-foot">
             {logoUploading && <span className="hint">Uploading the logo…</span>}
             <div className="spacer" />
-            <button type="button" className="btn ghost" onClick={close} disabled={pending}>
+            <button
+              type="button"
+              className="btn ghost"
+              onClick={close}
+              disabled={pending || logoUploading}
+            >
               Cancel
             </button>
             <button type="submit" className="btn primary" disabled={pending || logoUploading}>
diff --git a/apps/admin/src/features/orgs/evidence-cache.test.ts b/apps/admin/src/features/orgs/evidence-cache.test.ts
index dba2557..77ef0dc 100644
--- a/apps/admin/src/features/orgs/evidence-cache.test.ts
+++ b/apps/admin/src/features/orgs/evidence-cache.test.ts
@@ -1,7 +1,9 @@
-import { describe, expect, it } from "vitest"
+import { QueryClient } from "@tanstack/react-query"
+import { afterEach, describe, expect, it, vi } from "vitest"
 
 import {
   EVIDENCE_URL_MAX_CACHE_MS,
+  evidenceStaleTime,
   evidenceUrlLifetimeMs,
   evidenceUrlRemainingMs,
   isEvidenceUrlExpired,
@@ -36,3 +38,27 @@ describe("evidence signed-url lifetime", () => {
     expect(isEvidenceUrlExpired("2026-09-06T13:00:00.000Z", NOW)).toBe(false)
   })
 })
+
+describe("evidence query staleness as TanStack applies it", () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("stays fresh until the signed url is about to expire, measured from the fetch", async () => {
+    vi.useFakeTimers({ toFake: ["Date"] })
+    vi.setSystemTime(NOW)
+    const client = new QueryClient()
+    const queryFn = vi.fn(async () => ({ expiresAt: new Date(NOW + 300_000).toISOString() }))
+    const fetchEvidence = () =>
+      client.fetchQuery({ queryKey: ["evidence"], queryFn, staleTime: evidenceStaleTime })
+
+    await fetchEvidence()
+    vi.setSystemTime(NOW + 200_000)
+    await fetchEvidence()
+    expect(queryFn).toHaveBeenCalledTimes(1)
+
+    vi.setSystemTime(NOW + 296_000)
+    await fetchEvidence()
+    expect(queryFn).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/apps/admin/src/features/orgs/evidence-cache.ts b/apps/admin/src/features/orgs/evidence-cache.ts
index 6ac3cd4..f1b77af 100644
--- a/apps/admin/src/features/orgs/evidence-cache.ts
+++ b/apps/admin/src/features/orgs/evidence-cache.ts
@@ -26,3 +26,13 @@ export function isEvidenceUrlExpired(
 ): boolean {
   return evidenceUrlRemainingMs(expiresAt, now) === 0
 }
+
+interface EvidenceQueryLike {
+  state: { data?: { expiresAt?: string | null } | undefined; dataUpdatedAt: number }
+}
+
+// TanStack treats data as stale once `dataUpdatedAt + staleTime` has passed, so the lifetime must be
+// measured from the fetch, not from whenever the observer happens to ask.
+export function evidenceStaleTime(query: EvidenceQueryLike): number {
+  return evidenceUrlLifetimeMs(query.state.data?.expiresAt, query.state.dataUpdatedAt)
+}
diff --git a/apps/admin/src/features/orgs/evidence-list.test.tsx b/apps/admin/src/features/orgs/evidence-list.test.tsx
new file mode 100644
index 0000000..6b15933
--- /dev/null
+++ b/apps/admin/src/features/orgs/evidence-list.test.tsx
@@ -0,0 +1,60 @@
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { AdminGetMediaResponse } from "@civfix/shared"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { apiMock } from "@/test/api-mock"
+import { makeTestQueryClient, renderWithQuery } from "@/test/render"
+import { queryKeys } from "@/lib/query"
+import { EvidenceList } from "@/features/orgs/evidence-list"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+const MEDIA_ID = "5f0c2d1e-0000-4000-8000-000000000001"
+
+function evidence(expiresInMs: number): AdminGetMediaResponse {
+  return {
+    media: {
+      id: MEDIA_ID,
+      kind: "image",
+      url: "https://media.test/evidence.jpg",
+      status: "ready",
+    },
+    expiresAt: new Date(Date.now() + expiresInMs).toISOString(),
+  }
+}
+
+describe("EvidenceList", () => {
+  it("never renders an expired signed url, not even for the first frame", async () => {
+    apiMock.adminGetMedia.mockReturnValue(new Promise(() => {}))
+    const client = makeTestQueryClient()
+    client.setQueryData(queryKeys.media.document(MEDIA_ID), evidence(-60_000))
+    renderWithQuery(<EvidenceList mediaIds={[MEDIA_ID]} />, client)
+    const createElement = vi.spyOn(document, "createElement")
+    onTestFinished(() => createElement.mockRestore())
+
+    await userEvent.click(screen.getByRole("button", { name: /Document 1/ }))
+
+    expect(screen.getByRole("button", { name: /Request a new link/ })).toBeInTheDocument()
+    expect(createElement.mock.calls.filter(([tag]) => tag === "img")).toEqual([])
+  })
+
+  it("names the document image and points the toggle at the opened viewer", async () => {
+    apiMock.adminGetMedia.mockResolvedValue(evidence(120_000))
+    renderWithQuery(<EvidenceList mediaIds={[MEDIA_ID]} />)
+    const toggle = screen.getByRole("button", { name: /Document 1/ })
+    expect(toggle).not.toHaveAttribute("aria-controls")
+
+    await userEvent.click(toggle)
+
+    const image = await screen.findByRole("img", { name: "Evidence document 1" })
+    const viewerId = toggle.getAttribute("aria-controls")
+    expect(viewerId).toBeTruthy()
+    expect(document.getElementById(viewerId!)).toContainElement(image)
+  })
+})
+
diff --git a/apps/admin/src/features/orgs/evidence-list.tsx b/apps/admin/src/features/orgs/evidence-list.tsx
index 950ac88..43efbd6 100644
--- a/apps/admin/src/features/orgs/evidence-list.tsx
+++ b/apps/admin/src/features/orgs/evidence-list.tsx
@@ -13,25 +13,24 @@ function shortMediaId(id: string): string {
   return id.replace(/-/g, "").slice(0, 8)
 }
 
-function EvidenceViewer({ mediaId }: { mediaId: string }) {
+function EvidenceViewer({ mediaId, index }: { mediaId: string; index: number }) {
   const q = useOrgVerificationDocument(mediaId)
   const expiresAt = q.data?.expiresAt ?? null
-  const [expired, setExpired] = React.useState(false)
+  // Expiry is read during render so cached data past its expiry never paints the dead url; the timer
+  // only re-renders at the moment a live url expires.
+  const expired = expiresAt !== null && isEvidenceUrlExpired(expiresAt)
+  const [, rerenderAtExpiry] = React.useReducer((n: number) => n + 1, 0)
 
   React.useEffect(() => {
-    if (expiresAt === null) {
-      setExpired(false)
-      return
-    }
+    if (expiresAt === null) return
     const remaining = evidenceUrlRemainingMs(expiresAt)
-    setExpired(isEvidenceUrlExpired(expiresAt))
     if (remaining <= 0) return
-    const timer = setTimeout(() => setExpired(true), remaining)
+    const timer = setTimeout(rerenderAtExpiry, remaining)
     return () => clearTimeout(timer)
   }, [expiresAt])
 
   if (q.isLoading) return <LoadingState label="Loading document..." />
-  if (q.isError) {
+  if (q.isError && !q.data) {
     return <ErrorState error={q.error} onRetry={() => q.refetch()} title="Could not open evidence" />
   }
   if (!q.data) return null
@@ -60,7 +59,7 @@ function EvidenceViewer({ mediaId }: { mediaId: string }) {
     <div className="org-evidence-view">
       {media.kind === "image" ? (
         // eslint-disable-next-line @next/next/no-img-element
-        <img className="org-evidence-img" src={media.url} alt="" />
+        <img className="org-evidence-img" src={media.url} alt={`Evidence document ${index + 1}`} />
       ) : null}
       <a className="btn sm" href={media.url} target="_blank" rel="noreferrer noopener">
         <Icons.ExternalLink size={12} /> Open document
@@ -76,6 +75,7 @@ function EvidenceViewer({ mediaId }: { mediaId: string }) {
 
 export function EvidenceList({ mediaIds }: { mediaIds: string[] }) {
   const [openId, setOpenId] = React.useState<string | null>(null)
+  const viewerIdPrefix = React.useId()
 
   const mediaKey = mediaIds.join(",")
   React.useEffect(() => {
@@ -96,12 +96,14 @@ export function EvidenceList({ mediaIds }: { mediaIds: string[] }) {
     <div className="org-evidence-list">
       {mediaIds.map((mediaId, index) => {
         const open = openId === mediaId
+        const viewerId = `${viewerIdPrefix}-${mediaId}`
         return (
           <div key={mediaId} className={`org-evidence-row ${open ? "open" : ""}`}>
             <button
               type="button"
               className="org-evidence-head"
               aria-expanded={open}
+              aria-controls={open ? viewerId : undefined}
               onClick={() => setOpenId(open ? null : mediaId)}
             >
               <span className="org-evidence-ico">
@@ -111,7 +113,11 @@ export function EvidenceList({ mediaIds }: { mediaIds: string[] }) {
               <span className="ident mono">{shortMediaId(mediaId)}</span>
               <Icons.ChevronDown size={13} />
             </button>
-            {open && <EvidenceViewer mediaId={mediaId} />}
+            {open && (
+              <div id={viewerId}>
+                <EvidenceViewer mediaId={mediaId} index={index} />
+              </div>
+            )}
           </div>
         )
       })}
diff --git a/apps/admin/src/features/orgs/members-panel.test.tsx b/apps/admin/src/features/orgs/members-panel.test.tsx
new file mode 100644
index 0000000..bad5177
--- /dev/null
+++ b/apps/admin/src/features/orgs/members-panel.test.tsx
@@ -0,0 +1,157 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { AdminOrgMemberListResponse, GetAdminOrgResponse } from "@civfix/shared"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { apiMock } from "@/test/api-mock"
+import { renderWithQuery } from "@/test/render"
+import { DialogHost } from "@/components/shared/dialog"
+import { MembersPanel } from "@/features/orgs/members-panel"
+import { OWNER, SAM, makeOrg, member } from "@/features/orgs/test-fixtures"
+import { useAdminOrg } from "@/features/orgs/use-orgs"
+import { useUiStore } from "@/store/ui-store"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+afterEach(() => {
+  // The dialog host is backed by a module-level store; close anything a test left open.
+  if (screen.queryByRole("dialog")) fireEvent.keyDown(window, { key: "Escape" })
+})
+
+function roster(items: AdminOrgMemberListResponse["items"], nextCursor: string | null = null) {
+  apiMock.adminListOrgMembers.mockResolvedValue({ items, nextCursor } satisfies AdminOrgMemberListResponse)
+}
+
+function renderPanel(org = makeOrg()) {
+  return renderWithQuery(
+    <>
+      <MembersPanel org={org} />
+      <DialogHost />
+    </>,
+  )
+}
+
+function rosterHead(): HTMLElement {
+  return screen.getByText("Roster")
+}
+
+describe("MembersPanel roster", () => {
+  it("counts the loaded rows against the organization's total while more pages exist", async () => {
+    roster([member(SAM, "member")], "cur-2")
+    renderPanel(makeOrg({ memberCount: 3 }))
+
+    await screen.findByText("Sam Lee")
+    expect(rosterHead()).toHaveTextContent("1 of 3")
+  })
+
+  it("counts the rows alone once every page is loaded", async () => {
+    roster([member(OWNER, "owner"), member(SAM, "member")])
+    renderPanel(makeOrg({ memberCount: 2 }))
+
+    await screen.findByText("Sam Lee")
+    expect(rosterHead()).toHaveTextContent(/^Roster\s*2$/)
+  })
+
+  it("names the organization's owner in the transfer prompt when the owner is not on the loaded page", async () => {
+    roster([member(SAM, "member")], "cur-2")
+    renderPanel(makeOrg({ owner: OWNER }))
+
+    await userEvent.click(await screen.findByRole("button", { name: "Actions for Sam Lee" }))
+    await userEvent.click(screen.getByRole("menuitem", { name: /Transfer ownership/ }))
+
+    const dialog = await screen.findByRole("dialog")
+    expect(dialog).toHaveTextContent("Rosa Park becomes an admin")
+    expect(dialog).not.toHaveTextContent("the current owner")
+  })
+})
+
+describe("MembersPanel row actions", () => {
+  it("offers no actions on the owner's row, which the backend would refuse", async () => {
+    roster([member(OWNER, "owner"), member(SAM, "member")])
+    renderPanel()
+
+    expect(await screen.findByRole("button", { name: "Actions for Rosa Park" })).toBeDisabled()
+    expect(screen.getByText("Transfer ownership before changing this role or removing")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Actions for Sam Lee" })).toBeEnabled()
+  })
+
+  it("confirms a removal once the organization refetch lands after the roster dropped the member", async () => {
+    useUiStore.setState({ toast: null })
+    const org = makeOrg()
+    let removed = false
+    let releaseOrg!: (org: GetAdminOrgResponse) => void
+    const orgRefetch = new Promise<GetAdminOrgResponse>((resolve) => {
+      releaseOrg = resolve
+    })
+    apiMock.adminListOrgMembers.mockImplementation(async () => ({
+      items: removed ? [member(OWNER, "owner")] : [member(OWNER, "owner"), member(SAM, "member")],
+      nextCursor: null,
+    }))
+    apiMock.adminGetOrg.mockImplementation(() => (removed ? orgRefetch : Promise.resolve(org)))
+    apiMock.adminRemoveOrgMember.mockImplementation(async () => {
+      removed = true
+      return { ok: true }
+    })
+    function OrgDetailObserver() {
+      useAdminOrg(org.id)
+      return null
+    }
+    renderWithQuery(
+      <>
+        <OrgDetailObserver />
+        <MembersPanel org={org} />
+        <DialogHost />
+      </>,
+    )
+
+    await userEvent.click(await screen.findByRole("button", { name: "Actions for Sam Lee" }))
+    await userEvent.click(screen.getByRole("menuitem", { name: "Remove" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Left the organization")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove member" }))
+
+    await waitFor(() => expect(screen.queryByText("Sam Lee")).not.toBeInTheDocument())
+    await act(async () => {
+      releaseOrg(org)
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: `Sam Lee removed from ${org.name}`,
+        tone: "ok",
+      }),
+    )
+  })
+
+  it("gives the menu's label and divider their menu roles", async () => {
+    roster([member(OWNER, "owner"), member(SAM, "member")])
+    renderPanel()
+    await userEvent.click(await screen.findByRole("button", { name: "Actions for Sam Lee" }))
+
+    const menu = screen.getByRole("menu", { name: "Actions for Sam Lee" })
+    expect(within(menu).getByRole("separator")).toBeInTheDocument()
+    expect(within(menu).getByText("Change role")).toHaveAttribute("role", "presentation")
+    expect(within(menu).getAllByRole("menuitem").map((i) => i.textContent?.trim())).toEqual([
+      "Transfer ownership",
+      "Make admin",
+      "Remove",
+    ])
+  })
+})
+
+describe("MembersPanel add member", () => {
+  it("labels the person picker and links its error", async () => {
+    roster([member(OWNER, "owner")])
+    apiMock.listAdminUsers.mockReturnValue(new Promise(() => {}))
+    renderPanel()
+    await userEvent.click(await screen.findByRole("button", { name: /Add member/ }))
+
+    await userEvent.click(screen.getByRole("button", { name: /Add member/ }))
+
+    const person = screen.getByRole("group", { name: "Person" })
+    expect(person).toHaveAccessibleDescription("Pick a user to add.")
+  })
+})
diff --git a/apps/admin/src/features/orgs/members-panel.tsx b/apps/admin/src/features/orgs/members-panel.tsx
index 4dc2c20..b435ae7 100644
--- a/apps/admin/src/features/orgs/members-panel.tsx
+++ b/apps/admin/src/features/orgs/members-panel.tsx
@@ -13,12 +13,11 @@ import {
   ORG_ROLE_LABEL,
   ORG_ROLE_PILL,
   ORG_ROLES,
-  canRemoveMember,
   menuFocusIndex,
   roleChangeCopy,
   roleTargets,
 } from "@/features/orgs/org-members"
-import { ReasonField } from "@/features/orgs/org-form-fields"
+import { FieldError, ReasonField, fieldErrorId } from "@/features/orgs/org-form-fields"
 import {
   useAddOrgMember,
   useOrgMembersInfinite,
@@ -26,12 +25,12 @@ import {
   useSetOrgMemberRole,
 } from "@/features/orgs/use-orgs"
 import { PickedUserAvatar, UserPicker, type PickedUser } from "@/features/orgs/user-picker"
-import { useNav, useToast } from "@/store/ui-store"
+import { useNav } from "@/store/ui-store"
 
 export function MembersPanel({ org }: { org: AdminOrgDTO }) {
   const q = useOrgMembersInfinite(org.id)
   const members = React.useMemo(() => q.data?.pages.flatMap((p) => p.items) ?? [], [q.data])
-  const owner = members.find((m) => m.role === "owner") ?? null
+  const ownerName = members.find((m) => m.role === "owner")?.user.name ?? org.owner?.name ?? null
   const memberIds = React.useMemo(() => new Set(members.map((m) => m.user.id)), [members])
   const [adding, setAdding] = React.useState(false)
   const suspended = !!org.suspendedAt
@@ -41,7 +40,7 @@ export function MembersPanel({ org }: { org: AdminOrgDTO }) {
       {adding ? (
         <AddMemberForm
           org={org}
-          ownerName={owner?.user.name ?? org.owner?.name ?? null}
+          ownerName={ownerName}
           excludeIds={memberIds}
           onDone={() => setAdding(false)}
         />
@@ -66,13 +65,16 @@ export function MembersPanel({ org }: { org: AdminOrgDTO }) {
         <div className="sub-head">
           Roster
           <span className="rep-confirms" style={{ marginLeft: "auto" }}>
-            <Icons.Users size={12} /> {members.length}
+            <Icons.Users size={12} />{" "}
+            {q.hasNextPage
+              ? `${members.length.toLocaleString()} of ${org.memberCount.toLocaleString()}`
+              : members.length.toLocaleString()}
           </span>
         </div>
         <div className="queue-list">
           {q.isLoading ? (
             <LoadingState label="Loading members..." />
-          ) : q.isError ? (
+          ) : q.isError && !q.data ? (
             <ErrorState error={q.error} onRetry={() => q.refetch()} title="Could not load members" />
           ) : members.length === 0 ? (
             <EmptyState
@@ -87,7 +89,7 @@ export function MembersPanel({ org }: { org: AdminOrgDTO }) {
                   key={m.user.id}
                   org={org}
                   member={m}
-                  ownerName={owner?.user.name ?? null}
+                  ownerName={ownerName}
                 />
               ))}
               {q.hasNextPage && (
@@ -118,7 +120,6 @@ function MemberRow({
   ownerName: string | null
 }) {
   const nav = useNav()
-  const toast = useToast()
   const setRole = useSetOrgMemberRole()
   const remove = useRemoveOrgMember()
   // The menu is position:fixed (anchored to the trigger's rect) so the card's overflow:hidden and the
@@ -134,7 +135,9 @@ function MemberRow({
   const prompting = React.useRef(false)
   const menuOpen = menuPos !== null
   const busy = setRole.isPending || remove.isPending
-  const removable = canRemoveMember(member.role)
+  // The backend refuses every change to the owner's own membership: ownership moves by promoting
+  // someone else, so the owner row has no actions.
+  const isOwner = member.role === "owner"
 
   const openMenu = () => {
     const rect = triggerRef.current?.getBoundingClientRect()
@@ -151,7 +154,7 @@ function MemberRow({
 
   const menuItems = () =>
     Array.from(
-      popRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? [],
+      popRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [],
     )
 
   // A real menu: the first item takes focus on open; arrows/Home/End move (wrapping), Escape closes
@@ -209,16 +212,6 @@ function MemberRow({
     prompting.current = true
     let reason: string | null
     try {
-      if (member.role === "owner") {
-        // An org must keep an owner: the backend refuses a plain demotion, so explain instead of trying.
-        await confirmDialog({
-          title: copy.title,
-          body: copy.body,
-          confirmLabel: "Got it",
-          cancelLabel: "Close",
-        })
-        return
-      }
       reason = await promptDialog({
         title: copy.title,
         body: copy.body,
@@ -234,17 +227,11 @@ function MemberRow({
       prompting.current = false
     }
     if (reason === null || reason.trim() === "") return
-    setRole.mutate(
-      { id: org.id, userId: member.user.id, role: to, reason: reason.trim() },
-      {
-        onSuccess: () =>
-          toast(
-            copy.transfer
-              ? `${member.user.name} now owns ${org.name}`
-              : `${member.user.name} · ${ORG_ROLE_LABEL[to]}`,
-          ),
-      },
-    )
+    setRole.mutate({
+      request: { id: org.id, userId: member.user.id, role: to, reason: reason.trim() },
+      memberName: member.user.name,
+      orgName: org.name,
+    })
   }
 
   const onRemove = async () => {
@@ -266,10 +253,11 @@ function MemberRow({
       prompting.current = false
     }
     if (reason === null || reason.trim() === "") return
-    remove.mutate(
-      { id: org.id, userId: member.user.id, reason: reason.trim() },
-      { onSuccess: () => toast(`${member.user.name} removed from ${org.name}`) },
-    )
+    remove.mutate({
+      request: { id: org.id, userId: member.user.id, reason: reason.trim() },
+      memberName: member.user.name,
+      orgName: org.name,
+    })
   }
 
   const picked: PickedUser = { id: member.user.id, name: member.user.name, handle: member.user.handle }
@@ -297,10 +285,10 @@ function MemberRow({
         </div>
         <div className="sub">
           <span>Joined {formatDate(member.joinedAt)}</span>
-          {member.role === "owner" && (
+          {isOwner && (
             <>
               <span className="sep">·</span>
-              <span className="muted">Transfer ownership before removing</span>
+              <span className="muted">Transfer ownership before changing this role or removing</span>
             </>
           )}
         </div>
@@ -317,7 +305,7 @@ function MemberRow({
             aria-label={`Actions for ${member.user.name}`}
             aria-haspopup="menu"
             aria-expanded={menuOpen}
-            disabled={busy || !!org.deletedAt}
+            disabled={busy || isOwner || !!org.deletedAt}
             onClick={() => (menuOpen ? closeMenu(false) : openMenu())}
             onKeyDown={(e) => {
               // ArrowDown on a closed menu button opens it (WAI-ARIA menu-button pattern).
@@ -339,7 +327,9 @@ function MemberRow({
               onKeyDown={onMenuKeyDown}
               onBlur={onMenuBlur}
             >
-              <div className="row-menu-label">Change role</div>
+              <div className="row-menu-label" role="presentation">
+                Change role
+              </div>
               {roleTargets(member.role).map((r) => (
                 <button
                   key={r}
@@ -357,16 +347,14 @@ function MemberRow({
                   )}
                 </button>
               ))}
-              <div className="row-menu-sep" />
+              <div className="row-menu-sep" role="separator" />
               <button
                 type="button"
                 role="menuitem"
                 className="row-menu-item danger"
-                disabled={!removable}
-                title={removable ? undefined : "Transfer ownership first"}
                 onClick={() => void onRemove()}
               >
-                <Icons.Trash size={12} /> Remove{removable ? "" : " (transfer ownership first)"}
+                <Icons.Trash size={12} /> Remove
               </button>
             </div>
           )}
@@ -388,7 +376,6 @@ function AddMemberForm({
   onDone: () => void
 }) {
   const add = useAddOrgMember()
-  const toast = useToast()
   const [user, setUser] = React.useState<PickedUser | null>(null)
   const [role, setRole] = React.useState<OrganizationMemberRole>("member")
   const [reason, setReason] = React.useState("")
@@ -396,6 +383,7 @@ function AddMemberForm({
   // Guards a second Enter while the transfer confirmation is open.
   const confirming = React.useRef(false)
   const transfer = role === "owner"
+  const personError = attempted && !user ? "Pick a user to add." : null
 
   const submit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -418,17 +406,12 @@ function AddMemberForm({
       if (!ok) return
     }
     add.mutate(
-      { id: org.id, userId: user.id, role, reason: reason.trim() },
       {
-        onSuccess: () => {
-          toast(
-            transfer
-              ? `${user.name} now owns ${org.name}`
-              : `${user.name} added as ${ORG_ROLE_LABEL[role].toLowerCase()}`,
-          )
-          onDone()
-        },
+        request: { id: org.id, userId: user.id, role, reason: reason.trim() },
+        memberName: user.name,
+        orgName: org.name,
       },
+      { onSuccess: onDone },
     )
   }
 
@@ -436,14 +419,17 @@ function AddMemberForm({
     <form className="sub" onSubmit={(e) => void submit(e)}>
       <div className="sub-head">Add member</div>
       <div className="sub-body">
-        <div className={`field ${attempted && !user ? "has-error" : ""}`}>
-          <span className="lbl">Person</span>
+        <div
+          className={`field ${personError ? "has-error" : ""}`}
+          role="group"
+          aria-labelledby="org-add-person-label"
+          aria-describedby={personError ? fieldErrorId("org-add-person") : undefined}
+        >
+          <span className="lbl" id="org-add-person-label">
+            Person
+          </span>
           <UserPicker value={user} onChange={setUser} excludeIds={excludeIds} autoFocus />
-          {attempted && !user && (
-            <span className="field-error" role="alert">
-              <Icons.AlertTriangle size={11} /> Pick a user to add.
-            </span>
-          )}
+          <FieldError id={fieldErrorId("org-add-person")} text={personError} />
         </div>
         <div className="field">
           <label className="lbl" htmlFor="org-add-role">
diff --git a/apps/admin/src/features/orgs/org-events-panel.test.tsx b/apps/admin/src/features/orgs/org-events-panel.test.tsx
new file mode 100644
index 0000000..2c7bb31
--- /dev/null
+++ b/apps/admin/src/features/orgs/org-events-panel.test.tsx
@@ -0,0 +1,68 @@
+import { screen, within } from "@testing-library/react"
+import type { AdminOrgEventListResponse } from "@civfix/shared"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { apiMock } from "@/test/api-mock"
+import { renderWithQuery } from "@/test/render"
+import { queueRowOf } from "@/test/panes"
+import { OrgEventsPanel } from "@/features/orgs/org-events-panel"
+import { OWNER, makeOrg } from "@/features/orgs/test-fixtures"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+type OrgEvent = AdminOrgEventListResponse["items"][number]
+
+function orgEvent(over: Partial<OrgEvent> = {}): OrgEvent {
+  return {
+    id: "ev-1",
+    status: "upcoming",
+    eventKind: "cleanup",
+    flagged: false,
+    title: "Riverbank sweep",
+    place: "Echo Park",
+    attendees: 4,
+    capacity: 20,
+    bags: 0,
+    organizer: OWNER,
+    date: { rel: "in 2 days", abs: "Oct 1" },
+    coords: [34.07, -118.26],
+    ...over,
+  }
+}
+
+function eventsHead(): HTMLElement {
+  return screen.getByText("Events", { selector: ".sub-head" })
+}
+
+describe("OrgEventsPanel", () => {
+  it("marks a loaded page that has more behind it as a lower bound", async () => {
+    apiMock.adminListOrgEvents.mockResolvedValue({ items: [orgEvent()], nextCursor: "cur-2" })
+    renderWithQuery(<OrgEventsPanel org={makeOrg()} />)
+
+    await screen.findByText("Riverbank sweep")
+    expect(eventsHead()).toHaveTextContent(/^Events\s*1\+$/)
+  })
+
+  it("shows the plain count once every page is loaded", async () => {
+    apiMock.adminListOrgEvents.mockResolvedValue({ items: [orgEvent()], nextCursor: null })
+    renderWithQuery(<OrgEventsPanel org={makeOrg()} />)
+
+    await screen.findByText("Riverbank sweep")
+    expect(eventsHead()).toHaveTextContent(/^Events\s*1$/)
+  })
+
+  it("names the flagged marker", async () => {
+    apiMock.adminListOrgEvents.mockResolvedValue({
+      items: [orgEvent({ flagged: true })],
+      nextCursor: null,
+    })
+    renderWithQuery(<OrgEventsPanel org={makeOrg()} />)
+
+    const row = queueRowOf(await screen.findByText("Riverbank sweep"))
+    expect(within(row).getByRole("img", { name: "Flagged" })).toBeInTheDocument()
+  })
+})
diff --git a/apps/admin/src/features/orgs/org-events-panel.tsx b/apps/admin/src/features/orgs/org-events-panel.tsx
index 219fb44..4a0537c 100644
--- a/apps/admin/src/features/orgs/org-events-panel.tsx
+++ b/apps/admin/src/features/orgs/org-events-panel.tsx
@@ -40,13 +40,14 @@ export function OrgEventsPanel({ org }: { org: AdminOrgDTO }) {
         <div className="sub-head">
           Events
           <span className="rep-confirms" style={{ marginLeft: "auto" }}>
-            <Icons.Calendar size={12} /> {items.length}
+            <Icons.Calendar size={12} /> {items.length.toLocaleString()}
+            {q.hasNextPage ? "+" : ""}
           </span>
         </div>
         <div className="queue-list">
           {q.isLoading ? (
             <LoadingState label="Loading events..." />
-          ) : q.isError ? (
+          ) : q.isError && !q.data ? (
             <ErrorState error={q.error} onRetry={() => q.refetch()} title="Could not load events" />
           ) : items.length === 0 ? (
             <EmptyState
@@ -87,7 +88,7 @@ export function OrgEventsPanel({ org }: { org: AdminOrgDTO }) {
                       <div className="top">
                         <span className="title">{item.title}</span>
                         {item.flagged && (
-                          <span className="rep-flag-dot" title="Flagged">
+                          <span className="rep-flag-dot" role="img" aria-label="Flagged" title="Flagged">
                             <Icons.Flag size={10} />
                           </span>
                         )}
diff --git a/apps/admin/src/features/orgs/org-form-fields.test.tsx b/apps/admin/src/features/orgs/org-form-fields.test.tsx
new file mode 100644
index 0000000..0127d99
--- /dev/null
+++ b/apps/admin/src/features/orgs/org-form-fields.test.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { describe, expect, it } from "vitest"
+
+import { renderWithQuery } from "@/test/render"
+import { emptyProfileDraft, type OrgProfileDraft, type OrgProfileErrors } from "@/features/orgs/org-form"
+import { OrgProfileFields, ReasonField } from "@/features/orgs/org-form-fields"
+
+function Fields({
+  errors = {},
+  disabled = false,
+}: {
+  errors?: OrgProfileErrors
+  disabled?: boolean
+}) {
+  const [draft, setDraft] = React.useState<OrgProfileDraft>(emptyProfileDraft)
+  return (
+    <OrgProfileFields
+      draft={draft}
+      errors={errors}
+      onChange={setDraft}
+      mode="create"
+      disabled={disabled}
+    />
+  )
+}
+
+function describedByIdsResolve(el: HTMLElement): boolean {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)
+  return ids.every((id) => document.getElementById(id) !== null)
+}
+
+describe("OrgProfileFields accessibility", () => {
+  it("marks a field with an error invalid and describes it by that error", () => {
+    renderWithQuery(<Fields errors={{ name: "A name is required.", websiteUrl: "Use https." }} />)
+
+    const name = screen.getByLabelText("Name")
+    expect(name).toHaveAttribute("aria-invalid", "true")
+    expect(name).toHaveAccessibleDescription("A name is required.")
+    expect(screen.getByLabelText(/^Website/)).toHaveAccessibleDescription("Use https.")
+  })
+
+  it("leaves a valid field unmarked", () => {
+    renderWithQuery(<Fields />)
+
+    const name = screen.getByLabelText("Name")
+    expect(name).not.toHaveAttribute("aria-invalid")
+    expect(name).not.toHaveAttribute("aria-describedby")
+  })
+
+  it("describes the slug by its hint, or by its error when the hint gives way to it", () => {
+    const { unmount } = renderWithQuery(<Fields />)
+    const slug = screen.getByLabelText(/^Slug/)
+    expect(slug).toHaveAccessibleDescription("3–40 lowercase letters, digits and hyphens.")
+    unmount()
+
+    renderWithQuery(<Fields errors={{ slug: "That slug is taken." }} />)
+    const taken = screen.getByLabelText(/^Slug/)
+    expect(taken).toHaveAttribute("aria-invalid", "true")
+    expect(taken).toHaveAccessibleDescription("That slug is taken.")
+    expect(describedByIdsResolve(taken)).toBe(true)
+  })
+
+  it("describes the logo picker by its hint, or by its error", () => {
+    const { unmount } = renderWithQuery(<Fields />)
+    expect(screen.getByLabelText(/^Logo/)).toHaveAccessibleDescription(
+      "Shown on the public page and next to every event the organization hosts.",
+    )
+    unmount()
+
+    renderWithQuery(<Fields errors={{ logoMediaId: "Upload the logo again." }} />)
+    const logo = screen.getByLabelText(/^Logo/)
+    expect(logo).toHaveAttribute("aria-invalid", "true")
+    expect(logo).toHaveAccessibleDescription("Upload the logo again.")
+    expect(describedByIdsResolve(logo)).toBe(true)
+  })
+
+  it("links a social handle's error to its input", () => {
+    renderWithQuery(<Fields errors={{ instagram: "Handles only." }} />)
+    const instagram = screen.getByLabelText("Instagram")
+    expect(instagram).toHaveAttribute("aria-invalid", "true")
+    expect(instagram).toHaveAccessibleDescription("Handles only.")
+  })
+
+  it("links the reason's error to the reason box", () => {
+    renderWithQuery(<ReasonField value="" onChange={() => {}} error="A reason is required." />)
+    const reason = screen.getByLabelText(/^Reason/)
+    expect(reason).toHaveAttribute("aria-invalid", "true")
+    expect(reason).toHaveAccessibleDescription("A reason is required.")
+  })
+})
+
+describe("OrgProfileFields slug reset", () => {
+  it("disables Reset while the form is disabled", async () => {
+    const { client, rerender } = renderWithQuery(<Fields />)
+    await userEvent.type(screen.getByLabelText("Name"), "River Keepers")
+    await userEvent.type(screen.getByLabelText(/^Slug/), "-la")
+    expect(screen.getByRole("button", { name: "Reset" })).toBeEnabled()
+
+    rerender(
+      <QueryClientProvider client={client}>
+        <Fields disabled />
+      </QueryClientProvider>,
+    )
+
+    expect(screen.getByRole("button", { name: "Reset" })).toBeDisabled()
+  })
+})
diff --git a/apps/admin/src/features/orgs/org-form-fields.tsx b/apps/admin/src/features/orgs/org-form-fields.tsx
index 8903117..cce2f7b 100644
--- a/apps/admin/src/features/orgs/org-form-fields.tsx
+++ b/apps/admin/src/features/orgs/org-form-fields.tsx
@@ -22,10 +22,31 @@ import {
 import { deriveSlug, publicOrgUrl } from "@/features/orgs/org-slug"
 import { useUploadOrgLogo } from "@/features/orgs/use-orgs"
 
-export function FieldError({ text }: { text: string | undefined }) {
+export function fieldErrorId(fieldId: string): string {
+  return `${fieldId}-error`
+}
+
+export function fieldHintId(fieldId: string): string {
+  return `${fieldId}-hint`
+}
+
+/**
+ * The `aria-invalid` / `aria-describedby` pair for a control: described by its error when there is
+ * one, else by whichever hints are on screen, so no reference ever points at an unrendered node.
+ */
+export function fieldA11y(
+  fieldId: string,
+  error: string | null | undefined,
+  hintIds: readonly string[] = [],
+): { "aria-invalid"?: true; "aria-describedby"?: string } {
+  if (error) return { "aria-invalid": true, "aria-describedby": fieldErrorId(fieldId) }
+  return hintIds.length > 0 ? { "aria-describedby": hintIds.join(" ") } : {}
+}
+
+export function FieldError({ id, text }: { id: string; text: string | null | undefined }) {
   if (!text) return null
   return (
-    <span className="field-error" role="alert">
+    <span className="field-error" role="alert" id={id}>
       <Icons.AlertTriangle size={11} /> {text}
     </span>
   )
@@ -125,6 +146,7 @@ export function LogoField({
             ref={inputRef}
             className="org-logo-file"
             type="file"
+            {...fieldA11y(inputId, message, [fieldHintId(inputId)])}
             accept={ORG_LOGO_ACCEPT}
             disabled={busy}
             onChange={(e) => {
@@ -150,9 +172,9 @@ export function LogoField({
         </div>
       </div>
       {message ? (
-        <FieldError text={message} />
+        <FieldError id={fieldErrorId(inputId)} text={message} />
       ) : (
-        <span className="hint">
+        <span className="hint" id={fieldHintId(inputId)}>
           Shown on the public page and next to every event the organization hosts.
         </span>
       )}
@@ -183,6 +205,8 @@ export function OrgProfileFields({
   const [slugTouched, setSlugTouched] = React.useState(mode === "edit")
   const id = (name: string) => `org-${mode}-${name}`
   const slugPreview = draft.slug.trim().toLowerCase()
+  const slugWarningId = `${id("slug")}-warning`
+  const slugHintIds = [fieldHintId(id("slug")), ...(mode === "edit" ? [slugWarningId] : [])]
 
   const setName = (name: string) => {
     if (mode === "create" && !slugTouched) onChange({ ...draft, name, slug: deriveSlug(name) })
@@ -205,8 +229,9 @@ export function OrgProfileFields({
           placeholder="Friends of Griffith Park"
           disabled={disabled}
           onChange={(e) => setName(e.target.value)}
+          {...fieldA11y(id("name"), errors.name)}
         />
-        <FieldError text={errors.name} />
+        <FieldError id={fieldErrorId(id("name"))} text={errors.name} />
       </div>
 
       <div className={`field ${errors.slug ? "has-error" : ""}`}>
@@ -225,6 +250,7 @@ export function OrgProfileFields({
             autoCapitalize="none"
             placeholder="friends-of-griffith-park"
             disabled={disabled}
+            {...fieldA11y(id("slug"), errors.slug, slugHintIds)}
             onChange={(e) => {
               setSlugTouched(true)
               onChange({ ...draft, slug: e.target.value.toLowerCase() })
@@ -235,6 +261,7 @@ export function OrgProfileFields({
               type="button"
               className="btn sm ghost"
               title="Derive the slug from the name again"
+              disabled={disabled}
               onClick={() => {
                 setSlugTouched(false)
                 onChange({ ...draft, slug: deriveSlug(draft.name) })
@@ -245,9 +272,9 @@ export function OrgProfileFields({
           )}
         </div>
         {errors.slug ? (
-          <FieldError text={errors.slug} />
+          <FieldError id={fieldErrorId(id("slug"))} text={errors.slug} />
         ) : (
-          <span className="hint">
+          <span className="hint" id={fieldHintId(id("slug"))}>
             {slugPreview !== "" ? (
               <>
                 Public page: <span className="mono">{publicOrgUrl(slugPreview)}</span>
@@ -258,7 +285,7 @@ export function OrgProfileFields({
           </span>
         )}
         {mode === "edit" && (
-          <span className="hint tone-warn">
+          <span className="hint tone-warn" id={slugWarningId}>
             <Icons.AlertTriangle size={11} /> Changing the slug breaks existing links to the public
             page, QR codes and shared signup pages.
           </span>
@@ -281,8 +308,9 @@ export function OrgProfileFields({
           placeholder="What the organization does and where it works."
           disabled={disabled}
           onChange={(e) => onChange({ ...draft, description: e.target.value })}
+          {...fieldA11y(id("description"), errors.description)}
         />
-        <FieldError text={errors.description} />
+        <FieldError id={fieldErrorId(id("description"))} text={errors.description} />
       </div>
 
       <LogoField
@@ -307,8 +335,9 @@ export function OrgProfileFields({
           placeholder="https://example.org"
           disabled={disabled}
           onChange={(e) => onChange({ ...draft, websiteUrl: e.target.value })}
+          {...fieldA11y(id("website"), errors.websiteUrl)}
         />
-        <FieldError text={errors.websiteUrl} />
+        <FieldError id={fieldErrorId(id("website"))} text={errors.websiteUrl} />
       </div>
 
       <div className="field">
@@ -334,9 +363,10 @@ export function OrgProfileFields({
                   autoCapitalize="none"
                   disabled={disabled}
                   onChange={(e) => setSocial(p, e.target.value)}
+                  {...fieldA11y(id(`social-${p}`), errors[p])}
                 />
               </div>
-              <FieldError text={errors[p]} />
+              <FieldError id={fieldErrorId(id(`social-${p}`))} text={errors[p]} />
             </div>
           ))}
         </div>
@@ -374,8 +404,9 @@ export function ReasonField({
         placeholder={placeholder ?? "Why this change is being made…"}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value)}
+        {...fieldA11y(id, error)}
       />
-      <FieldError text={error} />
+      <FieldError id={fieldErrorId(id)} text={error} />
     </div>
   )
 }
diff --git a/apps/admin/src/features/orgs/org-form.ts b/apps/admin/src/features/orgs/org-form.ts
index 64f19f9..846904d 100644
--- a/apps/admin/src/features/orgs/org-form.ts
+++ b/apps/admin/src/features/orgs/org-form.ts
@@ -267,3 +267,18 @@ export function pickFieldErrors(
   for (const key of keys) if (errors[key] !== undefined) out[key] = errors[key]
   return out
 }
+
+/** The fields the profile editor renders; a server error on anything else (the reason, say) is toasted. */
+const PROFILE_EDITOR_FIELDS: readonly (keyof OrgProfileErrors)[] = [
+  "name",
+  "slug",
+  "description",
+  "websiteUrl",
+  "logoMediaId",
+  ...SOCIAL_PLATFORMS,
+]
+
+/** The server errors the profile editor can show next to a field, for a failed update. */
+export function updateFieldErrors(raw: unknown, request: AdminUpdateOrgRequest): OrgProfileErrors {
+  return pickFieldErrors(fieldErrorsFromError(raw, request), PROFILE_EDITOR_FIELDS)
+}
diff --git a/apps/admin/src/features/orgs/org-members.test.ts b/apps/admin/src/features/orgs/org-members.test.ts
index 786b711..a452c1c 100644
--- a/apps/admin/src/features/orgs/org-members.test.ts
+++ b/apps/admin/src/features/orgs/org-members.test.ts
@@ -70,4 +70,16 @@ describe("menuFocusIndex", () => {
     expect(menuFocusIndex("Enter", 0, 3)).toBeNull()
     expect(menuFocusIndex("ArrowDown", 0, 0)).toBeNull()
   })
+
+  it("answers only the arrows of its orientation", () => {
+    expect(menuFocusIndex("ArrowRight", 0, 3)).toBeNull()
+    expect(menuFocusIndex("ArrowRight", 0, 3, "horizontal")).toBe(1)
+    expect(menuFocusIndex("ArrowLeft", 0, 3, "horizontal")).toBe(2)
+    expect(menuFocusIndex("ArrowDown", 0, 3, "horizontal")).toBeNull()
+    expect(menuFocusIndex("End", 0, 3, "horizontal")).toBe(2)
+    expect(menuFocusIndex("ArrowDown", 0, 2, "both")).toBe(1)
+    expect(menuFocusIndex("ArrowRight", 1, 2, "both")).toBe(0)
+    expect(menuFocusIndex("ArrowUp", 0, 2, "both")).toBe(1)
+    expect(menuFocusIndex("ArrowLeft", 1, 2, "both")).toBe(0)
+  })
 })
diff --git a/apps/admin/src/features/orgs/org-members.ts b/apps/admin/src/features/orgs/org-members.ts
index 2e1acef..f3edade 100644
--- a/apps/admin/src/features/orgs/org-members.ts
+++ b/apps/admin/src/features/orgs/org-members.ts
@@ -41,24 +41,29 @@ export interface RoleChangeCopy {
 }
 
 /**
- * Keyboard navigation inside a `role="menu"`: the index of the item to focus after `key`, given the
- * currently focused index (-1 when none) and the item count, or null when the key is not a menu key.
- * Arrows wrap; Home/End jump.
+ * Arrow-key navigation for a composite widget with a roving focus (a `role="menu"`, a tablist, a
+ * radiogroup): the index of the item to move to after `key`, given the current index (-1 when none)
+ * and the item count, or null when the key is not a navigation key. A vertical menu answers Up/Down, a
+ * horizontal tablist Left/Right, a radiogroup both. Arrows wrap; Home/End jump.
  */
-export function menuFocusIndex(key: string, current: number, count: number): number | null {
+export function menuFocusIndex(
+  key: string,
+  current: number,
+  count: number,
+  orientation: "vertical" | "horizontal" | "both" = "vertical",
+): number | null {
   if (count === 0) return null
-  switch (key) {
-    case "ArrowDown":
-      return current < 0 ? 0 : (current + 1) % count
-    case "ArrowUp":
-      return current < 0 ? count - 1 : (current - 1 + count) % count
-    case "Home":
-      return 0
-    case "End":
-      return count - 1
-    default:
-      return null
+  const vertical = orientation !== "horizontal"
+  const horizontal = orientation !== "vertical"
+  if ((vertical && key === "ArrowDown") || (horizontal && key === "ArrowRight")) {
+    return current < 0 ? 0 : (current + 1) % count
   }
+  if ((vertical && key === "ArrowUp") || (horizontal && key === "ArrowLeft")) {
+    return current < 0 ? count - 1 : (current - 1 + count) % count
+  }
+  if (key === "Home") return 0
+  if (key === "End") return count - 1
+  return null
 }
 
 /**
diff --git a/apps/admin/src/features/orgs/org-verification.test.ts b/apps/admin/src/features/orgs/org-verification.test.ts
new file mode 100644
index 0000000..84e27fe
--- /dev/null
+++ b/apps/admin/src/features/orgs/org-verification.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest"
+
+import { canDecideVerification } from "./org-verification"
+
+describe("canDecideVerification", () => {
+  it("allows a decision only on a pending application", () => {
+    expect(canDecideVerification({ verifiedStatus: "pending", deletedAt: null })).toBe(true)
+    expect(canDecideVerification({ verifiedStatus: "verified", deletedAt: null })).toBe(false)
+    expect(canDecideVerification({ verifiedStatus: "rejected", deletedAt: null })).toBe(false)
+    expect(canDecideVerification({ verifiedStatus: "unverified", deletedAt: null })).toBe(false)
+  })
+
+  it("refuses a decision on a deleted organization", () => {
+    expect(
+      canDecideVerification({ verifiedStatus: "pending", deletedAt: "2026-04-01T10:00:00.000Z" }),
+    ).toBe(false)
+  })
+})
diff --git a/apps/admin/src/features/orgs/org-verification.ts b/apps/admin/src/features/orgs/org-verification.ts
new file mode 100644
index 0000000..f2a7bdf
--- /dev/null
+++ b/apps/admin/src/features/orgs/org-verification.ts
@@ -0,0 +1,13 @@
+import type { AdminOrgDTO, OrgVerificationKind } from "@civfix/shared"
+
+export const ORG_KIND_LABEL: Record<OrgVerificationKind, string> = {
+  nonprofit: "Nonprofit",
+  government: "Government",
+  community: "Community group",
+}
+
+// The backend decides only an open (pending) application and answers anything else with a 409, and a
+// soft-deleted organization is read-only in this console.
+export function canDecideVerification(org: Pick<AdminOrgDTO, "verifiedStatus" | "deletedAt">): boolean {
+  return org.verifiedStatus === "pending" && !org.deletedAt
+}
diff --git a/apps/admin/src/features/orgs/orgs-page.test.tsx b/apps/admin/src/features/orgs/orgs-page.test.tsx
index 886b5df..a2875c5 100644
--- a/apps/admin/src/features/orgs/orgs-page.test.tsx
+++ b/apps/admin/src/features/orgs/orgs-page.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, screen, waitFor, within } from "@testing-library/react"
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import type {
   AdminOrgDTO,
   AdminOrgEventListResponse,
@@ -13,6 +14,7 @@ import { apiMock } from "@/test/api-mock"
 import { renderWithQuery } from "@/test/render"
 import { detailCard, queueRowOf } from "@/test/panes"
 import { OrgsPage } from "@/features/orgs/orgs-page"
+import { userListItem } from "@/features/orgs/test-fixtures"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -232,7 +234,7 @@ describe("OrgsPage paging, filters and search", () => {
     expect(screen.getByText("2 of 5")).toBeInTheDocument()
   })
 
-  it("the Pending review chip queries the verification queue and opens on the Verification tab", async () => {
+  it("the Pending review chip queries the verification queue and opens the Verification tab on the kept pick", async () => {
     apiMock.adminListOrgs.mockImplementation((params: { verified?: string }) =>
       Promise.resolve(params.verified === "pending" ? listPage([PARK]) : listPage([RIVER])),
     )
@@ -245,6 +247,8 @@ describe("OrgsPage paging, filters and search", () => {
     expect(await screen.findByRole("heading", { level: 3, name: "Verification queue" })).toBeInTheDocument()
     await waitFor(() => expect(apiMock.adminListOrgs).toHaveBeenCalledWith({ verified: "pending" }))
     expect(await screen.findByText("/park-friends")).toBeInTheDocument()
+    await detailHeading("River Keepers")
+    expect(queueRowOf(screen.getByText("/park-friends"))).not.toHaveAttribute("aria-current")
     expect(screen.getByRole("tab", { name: /^Verification/ })).toHaveAttribute(
       "aria-selected",
       "true",
@@ -347,7 +351,7 @@ describe("OrgsPage deep links and detail tabs", () => {
     expect(screen.getByRole("tab", { name: /^Members/ })).toHaveAttribute("aria-selected", "true")
     expect(await screen.findByText("Sam Lee")).toBeInTheDocument()
     expect(apiMock.adminListOrgMembers).toHaveBeenCalledWith({ id: "org-1" })
-    expect(screen.getByText("Transfer ownership before removing")).toBeInTheDocument()
+    expect(screen.getByText("Transfer ownership before changing this role or removing")).toBeInTheDocument()
     expect(screen.getByRole("button", { name: "Actions for Sam Lee" })).toBeInTheDocument()
     expect(screen.getByRole("button", { name: /Add member/ })).toBeEnabled()
   })
@@ -411,7 +415,8 @@ describe("OrgsPage deep links and detail tabs", () => {
 
     await detailHeading("River Keepers")
     expect(screen.getByText("This organization has never applied for verification.")).toBeInTheDocument()
-    expect(screen.getByText(/This application was already decided\./)).toBeInTheDocument()
+    expect(screen.getByText("No application is awaiting a decision.")).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: "Reject" })).not.toBeInTheDocument()
   })
 
   it("id/events opens the Events tab on upcoming events and lists them", async () => {
@@ -472,3 +477,196 @@ describe("OrgsPage deep links and detail tabs", () => {
     expect(screen.getByRole("tab", { name: "Profile" })).toHaveAttribute("aria-selected", "false")
   })
 })
+
+describe("OrgsPage list accessibility", () => {
+  it("marks only the selected row as current", async () => {
+    apiMock.adminListOrgs.mockResolvedValue(listPage([RIVER, PARK]))
+    mockOrgDetails(RIVER, PARK)
+    renderWithQuery(<OrgsPage focusId={null} />)
+
+    await detailHeading("River Keepers")
+    expect(queueRowOf(screen.getByText("/river-keepers"))).toHaveAttribute("aria-current", "true")
+    expect(queueRowOf(screen.getByText("/park-friends"))).not.toHaveAttribute("aria-current")
+
+    fireEvent.keyDown(queueRowOf(screen.getByText("/park-friends")), { key: "Enter" })
+
+    await detailHeading("Park Friends")
+    expect(queueRowOf(screen.getAllByText("/park-friends")[0]!)).toHaveAttribute("aria-current", "true")
+    expect(queueRowOf(screen.getByText("/river-keepers"))).not.toHaveAttribute("aria-current")
+  })
+
+  it("names the search box", async () => {
+    apiMock.adminListOrgs.mockResolvedValue(listPage([]))
+    renderWithQuery(<OrgsPage focusId={null} />)
+
+    expect(screen.getByRole("textbox", { name: "Search organizations" })).toBeInTheDocument()
+  })
+})
+
+describe("OrgsPage detail tabs accessibility", () => {
+  async function renderDetail() {
+    apiMock.adminListOrgs.mockResolvedValue(listPage([PARK]))
+    mockOrgDetails(PARK)
+    apiMock.adminListOrgMembers.mockResolvedValue({ items: [], nextCursor: null })
+    apiMock.adminListOrgEvents.mockResolvedValue({ items: [], nextCursor: null })
+    renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("Park Friends")
+  }
+
+  it("ties the tab body to the selected tab and keeps only that tab in the Tab order", async () => {
+    await renderDetail()
+
+    const profile = screen.getByRole("tab", { name: "Profile" })
+    const panel = screen.getByRole("tabpanel", { name: "Profile" })
+    expect(profile).toHaveAttribute("aria-controls", panel.id)
+    expect(profile).toHaveAttribute("tabindex", "0")
+    expect(screen.getByRole("tab", { name: /^Members/ })).toHaveAttribute("tabindex", "-1")
+  })
+
+  it("moves between tabs with the arrow, Home and End keys", async () => {
+    await renderDetail()
+    const profile = screen.getByRole("tab", { name: "Profile" })
+
+    fireEvent.keyDown(profile, { key: "ArrowRight" })
+    const verification = screen.getByRole("tab", { name: /^Verification/ })
+    expect(verification).toHaveAttribute("aria-selected", "true")
+    expect(verification).toHaveFocus()
+
+    fireEvent.keyDown(verification, { key: "End" })
+    expect(screen.getByRole("tab", { name: /^Events/ })).toHaveFocus()
+
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" })
+    expect(profile).toHaveFocus()
+    expect(profile).toHaveAttribute("aria-selected", "true")
+
+    fireEvent.keyDown(profile, { key: "ArrowLeft" })
+    expect(screen.getByRole("tab", { name: /^Events/ })).toHaveFocus()
+  })
+
+  it("names the awaiting-decision badge", async () => {
+    await renderDetail()
+    expect(screen.getByRole("tab", { name: "Verification awaiting decision" })).toBeInTheDocument()
+  })
+})
+
+describe("OrgsPage background refresh", () => {
+  it("keeps the loaded organization and an open profile draft when a refetch fails", async () => {
+    apiMock.adminListOrgs.mockResolvedValue(listPage([RIVER]))
+    mockOrgDetails(RIVER)
+    const { client } = renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("River Keepers")
+    fireEvent.click(screen.getByRole("button", { name: /Edit profile/ }))
+    fireEvent.change(screen.getByLabelText(/^Description/), { target: { value: "Draft text" } })
+
+    apiMock.adminGetOrg.mockRejectedValue(new Error("Gateway timeout"))
+    await act(() => client.invalidateQueries({ queryKey: ["admin", "orgs", "detail", "org-1"] }))
+
+    await waitFor(() => expect(apiMock.adminGetOrg).toHaveBeenCalledTimes(2))
+    expect(screen.queryByText("Could not load this organization")).not.toBeInTheDocument()
+    expect(screen.getByLabelText(/^Description/)).toHaveValue("Draft text")
+    expect(
+      within(detailCard()).getByText(/Could not refresh this organization/),
+    ).toBeInTheDocument()
+  })
+})
+
+describe("OrgsPage selection", () => {
+  it("keeps the pick open when a filter change leaves it out, without selecting another row", async () => {
+    const suspended = makeOrg({
+      id: "org-9",
+      slug: "quiet-club",
+      name: "Quiet Club",
+      suspendedAt: "2026-03-01T10:00:00.000Z",
+    })
+    apiMock.adminListOrgs.mockImplementation((params: { suspended?: boolean }) =>
+      Promise.resolve(params.suspended ? listPage([suspended]) : listPage([RIVER, PARK])),
+    )
+    mockOrgDetails(RIVER, PARK, suspended)
+    renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("River Keepers")
+
+    fireEvent.click(screen.getByRole("button", { name: /^Suspended/ }))
+
+    expect(await screen.findByText("/quiet-club")).toBeInTheDocument()
+    await detailHeading("River Keepers")
+    expect(queueRowOf(screen.getByText("/quiet-club"))).not.toHaveClass("selected")
+  })
+
+  it("keeps the selection when a filter change still lists it", async () => {
+    apiMock.adminListOrgs.mockImplementation((params: { verified?: string }) =>
+      Promise.resolve(params.verified === "pending" ? listPage([RIVER, PARK]) : listPage([RIVER, PARK])),
+    )
+    mockOrgDetails(RIVER, PARK)
+    renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("River Keepers")
+    fireEvent.click(screen.getByText("/park-friends"))
+    await detailHeading("Park Friends")
+
+    fireEvent.click(screen.getByRole("button", { name: /^Verified/ }))
+
+    await waitFor(() => expect(apiMock.adminListOrgs).toHaveBeenCalledWith({ verified: "verified" }))
+    await detailHeading("Park Friends")
+  })
+
+  it("clears a decided organization that leaves the list, without opening another", async () => {
+    const applied = makeOrg({ id: "org-3", slug: "tree-crew", name: "Tree Crew", verifiedStatus: "pending" })
+    let queue = [applied, PARK]
+    apiMock.adminListOrgs.mockImplementation(() => Promise.resolve(listPage(queue)))
+    mockOrgDetails(applied, PARK)
+    const { client } = renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("Tree Crew")
+
+    queue = [PARK]
+    await act(() => client.invalidateQueries({ queryKey: ["admin", "orgs"] }))
+
+    await waitFor(() => expect(screen.queryByText("/tree-crew", { selector: ".mono" })).not.toBeInTheDocument())
+    expect(await within(detailCard()).findByText("No organization selected")).toBeInTheDocument()
+    expect(queueRowOf(screen.getByText("/park-friends"))).not.toHaveClass("selected")
+  })
+
+  it("keeps a decided organization open while the refetched list still holds it", async () => {
+    let river = RIVER
+    apiMock.adminListOrgs.mockImplementation(() => Promise.resolve(listPage([river, PARK])))
+    mockOrgDetails(RIVER, PARK)
+    const { client } = renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("River Keepers")
+
+    river = makeOrg({ verifiedStatus: "rejected" })
+    await act(() => client.invalidateQueries({ queryKey: ["admin", "orgs"] }))
+
+    await waitFor(() => expect(apiMock.adminListOrgs).toHaveBeenCalledTimes(2))
+    await detailHeading("River Keepers")
+    expect(queueRowOf(screen.getByText("/river-keepers"))).toHaveClass("selected")
+  })
+
+  it("keeps a just-created organization selected while the cached All list lacks it", async () => {
+    const created = makeOrg({ id: "org-new", slug: "brand-new", name: "Brand New", verifiedStatus: "unverified" })
+    apiMock.adminListOrgs.mockImplementation((params: { verified?: string }) =>
+      Promise.resolve(params.verified === "pending" ? listPage([PARK]) : listPage([RIVER, PARK])),
+    )
+    apiMock.listAdminUsers.mockResolvedValue({
+      items: [userListItem({ id: "u-ana", name: "Ana Ruiz" })],
+      nextCursor: null,
+    })
+    apiMock.adminCreateOrg.mockResolvedValue(created)
+    mockOrgDetails(RIVER, PARK, created)
+    renderWithQuery(<OrgsPage focusId={null} />)
+    await detailHeading("River Keepers")
+    fireEvent.click(screen.getByRole("button", { name: /^Pending review/ }))
+    expect(await screen.findByRole("heading", { level: 3, name: "Verification queue" })).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: /New organization/ }))
+    const dialog = screen.getByRole("dialog", { name: "New organization" })
+    await userEvent.type(within(dialog).getByLabelText("Name"), "Brand New")
+    await userEvent.click(await within(dialog).findByRole("button", { name: /Ana Ruiz/ }))
+    await userEvent.type(within(dialog).getByLabelText(/^Reason/), "Partner meeting")
+    await userEvent.click(within(dialog).getByRole("button", { name: /Create organization/ }))
+
+    expect(await screen.findByRole("heading", { level: 3, name: "Organizations" })).toBeInTheDocument()
+    await waitFor(() => expect(apiMock.adminListOrgs).toHaveBeenLastCalledWith({}))
+    await detailHeading("Brand New")
+    await waitFor(() => expect(apiMock.adminListOrgs).toHaveBeenCalledTimes(4))
+    await detailHeading("Brand New")
+    expect(queueRowOf(screen.getByText("/river-keepers"))).not.toHaveClass("selected")
+  })
+})
diff --git a/apps/admin/src/features/orgs/orgs-page.tsx b/apps/admin/src/features/orgs/orgs-page.tsx
index a32f2fb..82df2a7 100644
--- a/apps/admin/src/features/orgs/orgs-page.tsx
+++ b/apps/admin/src/features/orgs/orgs-page.tsx
@@ -15,7 +15,8 @@ import { CreateOrgPanel } from "@/features/orgs/create-org-panel"
 import { MembersPanel } from "@/features/orgs/members-panel"
 import { OrgEventsPanel } from "@/features/orgs/org-events-panel"
 import { ProfilePanel } from "@/features/orgs/profile-panel"
-import { ORG_KIND_LABEL, VerificationPanel } from "@/features/orgs/verification-panel"
+import { ORG_KIND_LABEL } from "@/features/orgs/org-verification"
+import { VerificationPanel } from "@/features/orgs/verification-panel"
 import {
   ORG_FILTERS,
   ORG_FILTER_LABEL,
@@ -23,9 +24,9 @@ import {
   orgListParams,
 } from "@/features/orgs/orgs-filters"
 import { parseOrgFocus, type OrgDetailTab } from "@/features/orgs/org-focus"
+import { menuFocusIndex } from "@/features/orgs/org-members"
 import { publicOrgUrl } from "@/features/orgs/org-slug"
 import { useAdminOrg, useOrgsInfinite, useSetOrgSuspended } from "@/features/orgs/use-orgs"
-import { useToast } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 const DETAIL_TABS: { id: OrgDetailTab; label: string }[] = [
@@ -64,6 +65,7 @@ function OrgRow({
       className={`qrow org-row ${selected ? "selected" : ""}`}
       role="button"
       tabIndex={0}
+      aria-current={selected ? "true" : undefined}
       onClick={onClick}
       onKeyDown={(e) => {
         if (!isKeyboardActivationKey(e.key)) return
@@ -124,12 +126,13 @@ function OrgDetail({
 }) {
   const q = useAdminOrg(orgId)
   const suspend = useSetOrgSuspended()
-  const toast = useToast()
   // Guards the button against a second click while the reason prompt is open.
   const busy = React.useRef(false)
+  const tabIds = React.useId()
+  const tabRefs = React.useRef(new Map<OrgDetailTab, HTMLButtonElement>())
 
   if (q.isLoading) return <LoadingState label="Loading organization..." />
-  if (q.isError) {
+  if (q.isError && !q.data) {
     return (
       <ErrorState error={q.error} onRetry={() => q.refetch()} title="Could not load this organization" />
     )
@@ -138,6 +141,18 @@ function OrgDetail({
   if (!org) return null
   const statusView = orgStatusView(org.verifiedStatus)
   const suspended = !!org.suspendedAt
+  const tabId = (t: OrgDetailTab) => `${tabIds}-tab-${t}`
+  const panelId = `${tabIds}-panel`
+
+  const onTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const current = DETAIL_TABS.findIndex((t) => t.id === tab)
+    const next = menuFocusIndex(e.key, current, DETAIL_TABS.length, "horizontal")
+    if (next === null) return
+    e.preventDefault()
+    const target = DETAIL_TABS[next]!.id
+    onTab(target)
+    tabRefs.current.get(target)?.focus()
+  }
 
   const onSuspend = async () => {
     if (busy.current || suspend.isPending) return
@@ -161,10 +176,7 @@ function OrgDetail({
       busy.current = false
     }
     if (reason === null || reason.trim() === "") return
-    suspend.mutate(
-      { id: org.id, suspended: !suspended, reason: reason.trim() },
-      { onSuccess: () => toast(suspended ? `${org.name} restored` : `${org.name} suspended`) },
-    )
+    suspend.mutate({ id: org.id, suspended: !suspended, reason: reason.trim() })
   }
 
   return (
@@ -220,6 +232,17 @@ function OrgDetail({
           </div>
         </div>
       )}
+      {q.isError && (
+        <div className="org-banner tone-alert" role="status">
+          <Icons.AlertTriangle size={14} />
+          <div>
+            <b>Could not refresh this organization.</b> Showing what was last loaded.{" "}
+            <button type="button" className="btn sm ghost" onClick={() => void q.refetch()}>
+              Try again
+            </button>
+          </div>
+        </div>
+      )}
       {org.deletedAt && (
         <div className="org-banner" role="status">
           <Icons.Trash size={14} />
@@ -230,13 +253,20 @@ function OrgDetail({
         </div>
       )}
 
-      <div className="profile-tabs org-tabs" role="tablist">
+      <div className="profile-tabs org-tabs" role="tablist" onKeyDown={onTabKeyDown}>
         {DETAIL_TABS.map((t) => (
           <button
             key={t.id}
+            ref={(el) => {
+              if (el) tabRefs.current.set(t.id, el)
+              else tabRefs.current.delete(t.id)
+            }}
+            id={tabId(t.id)}
             type="button"
             role="tab"
             aria-selected={tab === t.id}
+            aria-controls={tab === t.id ? panelId : undefined}
+            tabIndex={tab === t.id ? 0 : -1}
             className={`profile-tab ${tab === t.id ? "on" : ""}`}
             onClick={() => onTab(t.id)}
           >
@@ -244,13 +274,15 @@ function OrgDetail({
             {t.id === "members" && <span className="profile-tab-n">{org.memberCount}</span>}
             {t.id === "events" && <span className="profile-tab-n">{org.eventCount}</span>}
             {t.id === "verification" && org.verifiedStatus === "pending" && (
-              <span className="profile-tab-n">!</span>
+              <span className="profile-tab-n" role="img" aria-label="awaiting decision">
+                !
+              </span>
             )}
           </button>
         ))}
       </div>
 
-      <div className="org-tab-body">
+      <div className="org-tab-body" role="tabpanel" id={panelId} aria-labelledby={tabId(tab)}>
         {tab === "profile" && <ProfilePanel key={`pr-${org.id}`} org={org} />}
         {tab === "verification" && <VerificationPanel key={`v-${org.id}`} orgId={org.id} />}
         {tab === "members" && <MembersPanel key={`m-${org.id}`} org={org} />}
@@ -267,7 +299,6 @@ export function OrgsPage({ focusId }: SectionPageProps) {
   const [selId, setSelId] = React.useState<string | null>(focus.id)
   const [tab, setTab] = React.useState<OrgDetailTab>(focus.tab ?? "profile")
   const [creating, setCreating] = React.useState(false)
-  const toast = useToast()
 
   const debouncedQuery = useDebounced(query, 250)
   const listParams = React.useMemo(
@@ -286,9 +317,24 @@ export function OrgsPage({ focusId }: SectionPageProps) {
     if (focus.id) setSelId(focus.id)
     if (focus.tab) setTab(focus.tab)
   }, [focus])
+  // Only the first load picks an org on the operator's behalf; a deep-linked or just-created org is
+  // pinned like any other pick. A pick that a filter or search leaves out stays open (the detail reads it
+  // by id); a pick that drops out of the same list after a refetch (a verification decision under the
+  // Pending chip) clears, so the pane never jumps to another org's actions. Each decision waits for data
+  // fetched for the current params: a cached page that is refetching may not have the org created since.
+  const listKey = JSON.stringify(listParams)
+  const [autoPick, setAutoPick] = React.useState(focus.id === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-  }, [items, selId])
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((o) => o.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
 
   const pickFilter = (next: string) => {
     setFilter(next)
@@ -329,6 +375,7 @@ export function OrgsPage({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search organizations"
             placeholder="Search name or slug…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -408,7 +455,6 @@ export function OrgsPage({ focusId }: SectionPageProps) {
         onClose={() => setCreating(false)}
         onCreated={(org) => {
           setCreating(false)
-          toast(`${org.name} created`)
           if (filter !== "all") setFilter("all")
           setQuery("")
           setTab("profile")
diff --git a/apps/admin/src/features/orgs/profile-editor.test.tsx b/apps/admin/src/features/orgs/profile-editor.test.tsx
index ad6c1c2..569d7a6 100644
--- a/apps/admin/src/features/orgs/profile-editor.test.tsx
+++ b/apps/admin/src/features/orgs/profile-editor.test.tsx
@@ -1,12 +1,14 @@
 import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { QueryClientProvider } from "@tanstack/react-query"
-import type { AdminOrgDTO } from "@civfix/shared"
-import { describe, expect, it, vi } from "vitest"
+import { AppError, ErrorCode, type AdminOrgDTO } from "@civfix/shared"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
 import { renderWithQuery } from "@/test/render"
+import { makeQueryClient } from "@/lib/query"
+import { useUiStore } from "@/store/ui-store"
 import { DialogHost } from "@/components/shared/dialog"
 import { ProfilePanel } from "@/features/orgs/profile-panel"
 
@@ -78,3 +80,93 @@ describe("ProfilePanel editor", () => {
     })
   })
 })
+
+describe("ProfilePanel editor save errors", () => {
+  function recordToasts(): { text: string; tone: string }[] {
+    const shown: { text: string; tone: string }[] = []
+    const unsubscribe = useUiStore.subscribe((s, prev) => {
+      if (s.toast && s.toast !== prev.toast) shown.push({ text: s.toast.text, tone: s.toast.tone })
+    })
+    onTestFinished(unsubscribe)
+    return shown
+  }
+
+  async function saveDescription(): Promise<void> {
+    renderWithQuery(
+      <>
+        <ProfilePanel org={RIVER} />
+        <DialogHost />
+      </>,
+      makeQueryClient(),
+    )
+    await userEvent.click(screen.getByRole("button", { name: /Edit profile/ }))
+    await userEvent.type(screen.getByLabelText(/^Description/), " Weekly.")
+    await userEvent.click(screen.getByRole("button", { name: /Save changes/ }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Updated the mission")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Save changes" }))
+    await waitFor(() => expect(apiMock.adminUpdateOrg).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(screen.getByRole("button", { name: /Save changes/ })).toBeEnabled())
+  }
+
+  it("shows one error toast for a failure the editor has no field for", async () => {
+    apiMock.adminUpdateOrg.mockRejectedValue(new AppError(ErrorCode.FORBIDDEN, "Operators only."))
+    const shown = recordToasts()
+
+    await saveDescription()
+
+    expect(shown).toEqual([{ text: "Operators only.", tone: "error" }])
+  })
+
+  it("shows a field error next to its field and no toast", async () => {
+    apiMock.adminUpdateOrg.mockRejectedValue(
+      new AppError(ErrorCode.VALIDATION, "Invalid", {
+        fields: { description: "Description is too long." },
+      }),
+    )
+    const shown = recordToasts()
+
+    await saveDescription()
+
+    expect(screen.getByText("Description is too long.")).toBeInTheDocument()
+    expect(shown).toEqual([])
+  })
+})
+
+describe("ProfilePanel facts", () => {
+  it("shows the same placeholder for an empty website and a missing donation link", () => {
+    renderWithQuery(<ProfilePanel org={{ ...RIVER, websiteUrl: "", donationUrl: null }} />)
+
+    expect(factValue("Website")).toHaveTextContent(/^\u2014$/)
+    expect(factValue("Donation link")).toHaveTextContent(/^\u2014$/)
+  })
+
+  it("shows a donation link that is not https as plain text rather than as missing", () => {
+    renderWithQuery(<ProfilePanel org={{ ...RIVER, donationUrl: "http://give.example" }} />)
+
+    expect(factValue("Donation link")).toHaveTextContent("http://give.example")
+    expect(screen.queryByRole("link", { name: "http://give.example" })).not.toBeInTheDocument()
+  })
+})
+
+describe("ProfilePanel editor logo upload", () => {
+  it("cannot be cancelled while the logo is still uploading", async () => {
+    renderWithQuery(<ProfilePanel org={RIVER} />)
+    await userEvent.click(screen.getByRole("button", { name: /Edit profile/ }))
+    const logo = new File([new Uint8Array([137, 80, 78, 71])], "logo.png", { type: "image/png" })
+    // Hashing is the upload's first await; holding it keeps the upload in flight.
+    Object.defineProperty(logo, "arrayBuffer", { value: () => new Promise(() => {}) })
+
+    await userEvent.upload(screen.getByLabelText(/^Logo/), logo)
+
+    expect(await screen.findByText("Uploading the logo…")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled()
+  })
+})
+
+function factValue(label: string): HTMLElement {
+  const row = screen.getByText(label).parentElement
+  const value = row?.lastElementChild
+  if (!(value instanceof HTMLElement)) throw new Error(`${label} fact is not rendered`)
+  return value
+}
diff --git a/apps/admin/src/features/orgs/profile-panel.tsx b/apps/admin/src/features/orgs/profile-panel.tsx
index fc5356d..650826a 100644
--- a/apps/admin/src/features/orgs/profile-panel.tsx
+++ b/apps/admin/src/features/orgs/profile-panel.tsx
@@ -14,21 +14,19 @@ import { formatDate, formatDateTime } from "@/lib/dates"
 import { isHttpsUrl } from "@/lib/external-url"
 import { orgStatusView } from "@/lib/org-status"
 import {
-  SOCIAL_PLATFORMS as PROFILE_SOCIALS,
   buildUpdateRequest,
   clearChangedFieldErrors,
   draftFromOrg,
-  fieldErrorsFromError,
-  pickFieldErrors,
+  updateFieldErrors,
   validateProfileDraft,
   type OrgProfileDraft,
   type OrgProfileErrors,
 } from "@/features/orgs/org-form"
 import { OrgProfileFields } from "@/features/orgs/org-form-fields"
 import { publicOrgUrl } from "@/features/orgs/org-slug"
-import { toastUnlessShownInline, useUpdateOrg } from "@/features/orgs/use-orgs"
-import { ORG_KIND_LABEL } from "@/features/orgs/verification-panel"
-import { useNav, useToast } from "@/store/ui-store"
+import { useUpdateOrg } from "@/features/orgs/use-orgs"
+import { ORG_KIND_LABEL } from "@/features/orgs/org-verification"
+import { useNav } from "@/store/ui-store"
 
 /** Read view of the org profile with an inline edit mode (adminUpdateOrg, reason prompted on save). */
 export function ProfilePanel({ org }: { org: AdminOrgDTO }) {
@@ -40,6 +38,18 @@ export function ProfilePanel({ org }: { org: AdminOrgDTO }) {
   )
 }
 
+/** Only an https url becomes a link; anything else stored is shown as text so it is never hidden. */
+function UrlFact({ url }: { url: string | null | undefined }) {
+  if (isHttpsUrl(url)) {
+    return (
+      <a href={url} target="_blank" rel="noreferrer noopener">
+        {url}
+      </a>
+    )
+  }
+  return <>{url || "\u2014"}</>
+}
+
 function ProfileView({ org, onEdit }: { org: AdminOrgDTO; onEdit: () => void }) {
   const nav = useNav()
   const statusView = orgStatusView(org.verifiedStatus)
@@ -75,25 +85,13 @@ function ProfileView({ org, onEdit }: { org: AdminOrgDTO; onEdit: () => void })
             <div className="umr">
               <span>Website</span>
               <span>
-                {isHttpsUrl(org.websiteUrl) ? (
-                  <a href={org.websiteUrl} target="_blank" rel="noreferrer noopener">
-                    {org.websiteUrl}
-                  </a>
-                ) : (
-                  (org.websiteUrl ?? "—")
-                )}
+                <UrlFact url={org.websiteUrl} />
               </span>
             </div>
             <div className="umr">
               <span>Donation link</span>
               <span>
-                {isHttpsUrl(org.donationUrl) ? (
-                  <a href={org.donationUrl} target="_blank" rel="noreferrer noopener">
-                    {org.donationUrl}
-                  </a>
-                ) : (
-                  "None"
-                )}
+                <UrlFact url={org.donationUrl} />
               </span>
             </div>
             <div className="umr">
@@ -170,19 +168,8 @@ function ProfileView({ org, onEdit }: { org: AdminOrgDTO; onEdit: () => void })
   )
 }
 
-/** The fields the editor renders; a server error on anything else (the reason, say) is toasted. */
-const EDITOR_FIELDS: readonly (keyof OrgProfileErrors)[] = [
-  "name",
-  "slug",
-  "description",
-  "websiteUrl",
-  "logoMediaId",
-  ...PROFILE_SOCIALS,
-]
-
 function ProfileEditor({ org, onDone }: { org: AdminOrgDTO; onDone: () => void }) {
   const update = useUpdateOrg()
-  const toast = useToast()
   // The draft and the diff share one snapshot taken when editing starts: diffing against the live
   // prop would PATCH an untouched field back to its old value after a mid-edit refetch.
   const [baseline] = React.useState(org)
@@ -231,15 +218,8 @@ function ProfileEditor({ org, onDone }: { org: AdminOrgDTO; onDone: () => void }
     }
     setServerErrors({})
     update.mutate(body, {
-      onSuccess: () => {
-        toast(`${draft.name.trim()} updated`)
-        onDone()
-      },
-      onError: (err) => {
-        const shown = pickFieldErrors(fieldErrorsFromError(err, body), EDITOR_FIELDS)
-        setServerErrors(shown)
-        toastUnlessShownInline(err, shown)
-      },
+      onSuccess: onDone,
+      onError: (err) => setServerErrors(updateFieldErrors(err, body)),
     })
   }
 
@@ -274,7 +254,12 @@ function ProfileEditor({ org, onDone }: { org: AdminOrgDTO; onDone: () => void }
           !dirty && <span className="muted">No changes yet</span>
         )}
         <div className="spacer" />
-        <button type="button" className="btn ghost" onClick={onDone} disabled={update.isPending}>
+        <button
+          type="button"
+          className="btn ghost"
+          onClick={onDone}
+          disabled={update.isPending || logoUploading}
+        >
           Cancel
         </button>
         <button
diff --git a/apps/admin/src/features/orgs/test-fixtures.ts b/apps/admin/src/features/orgs/test-fixtures.ts
new file mode 100644
index 0000000..6d64229
--- /dev/null
+++ b/apps/admin/src/features/orgs/test-fixtures.ts
@@ -0,0 +1,95 @@
+import type {
+  AdminOrgDTO,
+  AdminOrgMemberDTO,
+  AdminUserListItemDTO,
+  GetAdminOrgResponse,
+} from "@civfix/shared"
+
+import { apiMock } from "@/test/api-mock"
+
+export const OWNER = { id: "u-owner", name: "Rosa Park", handle: "@rosa", joined: "2025-01-01" }
+export const SAM = { id: "u-sam", name: "Sam Lee", handle: "@sam", joined: "2025-02-01" }
+
+export function makeOrg(overrides: Partial<AdminOrgDTO> = {}): AdminOrgDTO {
+  return {
+    id: "org-1",
+    slug: "river-keepers",
+    name: "River Keepers",
+    description: "We clean the river.",
+    websiteUrl: "https://riverkeepers.org",
+    logoUrl: null,
+    verifiedStatus: "verified",
+    verifiedKind: "nonprofit",
+    verifiedAt: "2026-02-01T10:00:00.000Z",
+    createdAt: "2026-01-01T10:00:00.000Z",
+    deletedAt: null,
+    memberCount: 3,
+    eventCount: 1,
+    owner: OWNER,
+    verification: null,
+    donationUrl: null,
+    suspendedAt: null,
+    suspendedReason: null,
+    updatedAt: null,
+    socialLinks: null,
+    logoMediaId: null,
+    ...overrides,
+  } satisfies AdminOrgDTO
+}
+
+export function pendingApplication(org: Pick<AdminOrgDTO, "id" | "slug" | "name">) {
+  return {
+    organizationId: org.id,
+    slug: org.slug,
+    name: org.name,
+    status: "pending",
+    kind: "community",
+    einLast4: "1234",
+    documentMediaIds: [],
+    note: "We plant trees on weekends.",
+    submittedBy: OWNER,
+    submittedAt: "2026-03-01T10:00:00.000Z",
+    reviewedBy: null,
+    reviewedAt: null,
+    rejectionReason: null,
+  } satisfies NonNullable<AdminOrgDTO["verification"]>
+}
+
+export function member(
+  user: AdminOrgMemberDTO["user"],
+  role: AdminOrgMemberDTO["role"],
+): AdminOrgMemberDTO {
+  return { user, role, joinedAt: "2026-01-02T10:00:00.000Z" }
+}
+
+export function mockOrgDetails(...orgs: AdminOrgDTO[]) {
+  apiMock.adminGetOrg.mockImplementation(({ id }: { id: string }) => {
+    const org = orgs.find((o) => o.id === id)
+    return org
+      ? Promise.resolve(org satisfies GetAdminOrgResponse)
+      : Promise.reject(new Error(`no org ${id}`))
+  })
+}
+
+export function userListItem(
+  over: Partial<AdminUserListItemDTO> & { id: string; name: string },
+): AdminUserListItemDTO {
+  return {
+    handle: "@handle",
+    city: "Oakland",
+    joined: "2026-01-05T00:00:00.000Z",
+    avatar: ["#111111", "#222222"],
+    avatarUrl: null,
+    status: "active",
+    reports: 0,
+    cleanups: 0,
+    removals: 0,
+    strikes: 0,
+    risk: "low",
+    lastActive: "2h ago",
+    flagged: false,
+    flagReason: null,
+    deletedAt: null,
+    ...over,
+  }
+}
diff --git a/apps/admin/src/features/orgs/use-orgs.ts b/apps/admin/src/features/orgs/use-orgs.ts
index 1b5251b..ea31bc3 100644
--- a/apps/admin/src/features/orgs/use-orgs.ts
+++ b/apps/admin/src/features/orgs/use-orgs.ts
@@ -21,13 +21,15 @@ import type {
 import { api } from "@/lib/api"
 import { errorMessage } from "@/lib/error-messages"
 import { queryKeys } from "@/lib/query"
+import { EVIDENCE_URL_MAX_CACHE_MS, evidenceStaleTime } from "@/features/orgs/evidence-cache"
 import {
-  EVIDENCE_URL_MAX_CACHE_MS,
-  evidenceUrlLifetimeMs,
-} from "@/features/orgs/evidence-cache"
-import type { OrgProfileErrors } from "@/features/orgs/org-form"
+  fieldErrorsFromError,
+  updateFieldErrors,
+  type OrgProfileErrors,
+} from "@/features/orgs/org-form"
 import { uploadOrgLogo, type LogoFileFacts } from "@/features/orgs/org-logo-upload"
-import { useUiStore } from "@/store/ui-store"
+import { ORG_ROLE_LABEL } from "@/features/orgs/org-members"
+import { ORG_KIND_LABEL } from "@/features/orgs/org-verification"
 
 /** Every organization (adminListOrgs), keyset-paged; page one carries the chip `counts`. */
 export function useOrgsInfinite(params: AdminOrgListQuery) {
@@ -85,7 +87,7 @@ export function useOrgVerificationDocument(mediaId: string | null) {
     queryKey: queryKeys.media.document(mediaId ?? ""),
     queryFn: () => api.adminGetMedia({ id: mediaId as string }),
     enabled: !!mediaId,
-    staleTime: (query) => evidenceUrlLifetimeMs(query.state.data?.expiresAt),
+    staleTime: evidenceStaleTime,
     gcTime: EVIDENCE_URL_MAX_CACHE_MS,
   })
 }
@@ -93,21 +95,27 @@ export function useOrgVerificationDocument(mediaId: string | null) {
 type Qc = ReturnType<typeof useQueryClient>
 
 function invalidateOrgLists(qc: Qc) {
-  qc.invalidateQueries({ queryKey: queryKeys.orgs.all })
-  qc.invalidateQueries({ queryKey: queryKeys.audit.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.audit.all }),
+  ])
 }
 
 function invalidateOrg(qc: Qc, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.orgs.detail(id) })
-  invalidateOrgLists(qc)
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.detail(id) }),
+    invalidateOrgLists(qc),
+  ])
 }
 
 function invalidateOrgMembers(qc: Qc, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.orgs.members(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.orgs.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.orgs.all })
-  qc.invalidateQueries({ queryKey: queryKeys.users.all })
-  qc.invalidateQueries({ queryKey: queryKeys.audit.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.members(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.detail(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.orgs.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.audit.all }),
+  ])
 }
 
 export function useDecideOrgVerification() {
@@ -115,23 +123,22 @@ export function useDecideOrgVerification() {
   return useMutation({
     mutationFn: (input: DecideOrgVerificationRequest) => api.adminDecideOrgVerification(input),
     onSuccess: (_res, { id }) => invalidateOrg(qc, id),
+    meta: {
+      successMessage: (org: GetAdminOrgResponse, { decision, kind }: DecideOrgVerificationRequest) => {
+        if (decision === "rejected") return `${org.name} rejected`
+        return kind ? `${org.name} verified · ${ORG_KIND_LABEL[kind]}` : `${org.name} verified`
+      },
+    },
   })
 }
 
 /**
- * Create/update render server field errors inline (slug conflict, VALIDATION.fields), so the hooks opt
- * out of the global error toast (a mutation-level onError replaces the QueryClient default). The form
- * maps the error to the fields it renders and calls this with what it could show: anything the form
- * has no field for — an unknown key, a CONFLICT on an unchanged slug, a rejected reason after the
- * prompt closed — still surfaces as the toast instead of vanishing.
+ * Create and update show the server's field errors inline (slug conflict, VALIDATION.fields), so the
+ * global toast stays quiet for them; anything the form has no field for (an unknown key, a CONFLICT on
+ * an unchanged slug, a rejected reason after the prompt closed) still surfaces as the error toast.
  */
-export function toastUnlessShownInline(err: unknown, shown: OrgProfileErrors) {
-  if (Object.keys(shown).length > 0) return
-  useUiStore.getState().showToast(errorMessage(err))
-}
-
-function quietOnError() {
-  /* handled by the form: see toastUnlessShownInline */
+function messageUnlessShownInline(inline: OrgProfileErrors, error: unknown): string | null {
+  return Object.keys(inline).length > 0 ? null : errorMessage(error)
 }
 
 export function useCreateOrg() {
@@ -140,16 +147,20 @@ export function useCreateOrg() {
     mutationFn: (input: AdminCreateOrgRequest) => api.adminCreateOrg(input),
     onSuccess: (org) => {
       qc.setQueryData(queryKeys.orgs.detail(org.id), org)
-      invalidateOrgLists(qc)
+      return invalidateOrgLists(qc)
+    },
+    meta: {
+      errorMessage: (error: unknown, request: AdminCreateOrgRequest) =>
+        messageUnlessShownInline(fieldErrorsFromError(error, request), error),
+      successMessage: (org: GetAdminOrgResponse) => `${org.name} created`,
     },
-    onError: quietOnError,
   })
 }
 
 export function useUploadOrgLogo() {
   return useMutation({
     mutationFn: (file: Blob & LogoFileFacts) => uploadOrgLogo({ api, file }),
-    onError: quietOnError,
+    meta: { errorToast: false },
   })
 }
 
@@ -159,9 +170,13 @@ export function useUpdateOrg() {
     mutationFn: (input: AdminUpdateOrgRequest) => api.adminUpdateOrg(input),
     onSuccess: (org, { id }) => {
       qc.setQueryData(queryKeys.orgs.detail(id), org)
-      invalidateOrg(qc, id)
+      return invalidateOrg(qc, id)
+    },
+    meta: {
+      errorMessage: (error: unknown, request: AdminUpdateOrgRequest) =>
+        messageUnlessShownInline(updateFieldErrors(error, request), error),
+      successMessage: (org: GetAdminOrgResponse) => `${org.name} updated`,
     },
-    onError: quietOnError,
   })
 }
 
@@ -171,31 +186,63 @@ export function useSetOrgSuspended() {
     mutationFn: (input: AdminSetOrgSuspendedRequest) => api.adminSetOrgSuspended(input),
     onSuccess: (org, { id }) => {
       qc.setQueryData(queryKeys.orgs.detail(id), org)
-      invalidateOrg(qc, id)
+      return invalidateOrg(qc, id)
+    },
+    meta: {
+      successMessage: (org: GetAdminOrgResponse, { suspended }: AdminSetOrgSuspendedRequest) =>
+        suspended ? `${org.name} suspended` : `${org.name} restored`,
     },
   })
 }
 
+/** A roster write plus the names its confirmation toast uses, which the request only carries as ids. */
+export interface OrgMemberVariables<R> {
+  request: R
+  memberName: string
+  orgName: string
+}
+
 export function useAddOrgMember() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: AdminAddOrgMemberRequest) => api.adminAddOrgMember(input),
-    onSuccess: (_res, { id }) => invalidateOrgMembers(qc, id),
+    mutationFn: ({ request }: OrgMemberVariables<AdminAddOrgMemberRequest>) => api.adminAddOrgMember(request),
+    onSuccess: (_res, { request: { id } }) => invalidateOrgMembers(qc, id),
+    meta: {
+      successMessage: (
+        _res: unknown,
+        { request: { role }, memberName, orgName }: OrgMemberVariables<AdminAddOrgMemberRequest>,
+      ) =>
+        role === "owner"
+          ? `${memberName} now owns ${orgName}`
+          : `${memberName} added as ${ORG_ROLE_LABEL[role].toLowerCase()}`,
+    },
   })
 }
 
 export function useSetOrgMemberRole() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: AdminSetOrgMemberRoleRequest) => api.adminSetOrgMemberRole(input),
-    onSuccess: (_res, { id }) => invalidateOrgMembers(qc, id),
+    mutationFn: ({ request }: OrgMemberVariables<AdminSetOrgMemberRoleRequest>) =>
+      api.adminSetOrgMemberRole(request),
+    onSuccess: (_res, { request: { id } }) => invalidateOrgMembers(qc, id),
+    meta: {
+      successMessage: (
+        _res: unknown,
+        { request: { role }, memberName, orgName }: OrgMemberVariables<AdminSetOrgMemberRoleRequest>,
+      ) => (role === "owner" ? `${memberName} now owns ${orgName}` : `${memberName} · ${ORG_ROLE_LABEL[role]}`),
+    },
   })
 }
 
 export function useRemoveOrgMember() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: AdminRemoveOrgMemberRequest) => api.adminRemoveOrgMember(input),
-    onSuccess: (_res, { id }) => invalidateOrgMembers(qc, id),
+    mutationFn: ({ request }: OrgMemberVariables<AdminRemoveOrgMemberRequest>) =>
+      api.adminRemoveOrgMember(request),
+    onSuccess: (_res, { request: { id } }) => invalidateOrgMembers(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { memberName, orgName }: OrgMemberVariables<AdminRemoveOrgMemberRequest>) =>
+        `${memberName} removed from ${orgName}`,
+    },
   })
 }
diff --git a/apps/admin/src/features/orgs/user-picker.test.tsx b/apps/admin/src/features/orgs/user-picker.test.tsx
new file mode 100644
index 0000000..abf979d
--- /dev/null
+++ b/apps/admin/src/features/orgs/user-picker.test.tsx
@@ -0,0 +1,130 @@
+import { screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { AdminUserListItemDTO, AdminUserListResponse } from "@civfix/shared"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { apiMock } from "@/test/api-mock"
+import { renderWithQuery } from "@/test/render"
+import { UserPicker } from "@/features/orgs/user-picker"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+function person(over: Partial<AdminUserListItemDTO> & { id: string; name: string }) {
+  return {
+    handle: `@${over.id}`,
+    city: "Oakland",
+    joined: "2026-01-05T00:00:00.000Z",
+    avatar: ["#111111", "#222222"],
+    avatarUrl: null,
+    status: "active",
+    reports: 0,
+    cleanups: 0,
+    removals: 0,
+    strikes: 0,
+    risk: "low",
+    lastActive: "2h ago",
+    flagged: false,
+    flagReason: null,
+    deletedAt: null,
+    ...over,
+  } satisfies AdminUserListItemDTO
+}
+
+function page(items: AdminUserListItemDTO[]): AdminUserListResponse {
+  return { items, nextCursor: null }
+}
+
+const ADA = person({ id: "ada", name: "Ada Park" })
+const BO = person({ id: "bo", name: "Bo Lind", status: "suspended" })
+const CY = person({ id: "cy", name: "Cy Ames", deletedAt: "2026-08-01T00:00:00.000Z" })
+
+describe("UserPicker", () => {
+  it("promises only what the search matches and drops a leading @ from the term", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ADA]))
+    renderWithQuery(<UserPicker value={null} onChange={() => {}} />)
+
+    const box = screen.getByRole("textbox", { name: "Search users by name, handle or city" })
+    expect(box).toHaveAttribute("placeholder", "Search by name, handle or city…")
+    await userEvent.type(box, "@ada")
+    await waitFor(() =>
+      expect(apiMock.listAdminUsers).toHaveBeenLastCalledWith({ q: "ada", limit: 8 }),
+    )
+  })
+
+  it("says everyone matching is already a member when the page held only members", async () => {
+    const members = Array.from({ length: 8 }, (_, i) => person({ id: `m${i}`, name: `Member ${i}` }))
+    apiMock.listAdminUsers.mockResolvedValue(page(members))
+    renderWithQuery(
+      <UserPicker value={null} onChange={() => {}} excludeIds={new Set(members.map((m) => m.id))} />,
+    )
+
+    await userEvent.type(screen.getByRole("textbox"), "member")
+    await waitFor(() =>
+      expect(screen.getByRole("status")).toHaveTextContent("Everyone matching is already a member."),
+    )
+    expect(apiMock.listAdminUsers).toHaveBeenLastCalledWith({ q: "member", limit: 16 })
+  })
+
+  it("keeps at most eight results after leaving out members", async () => {
+    const members = [person({ id: "m0", name: "Member 0" })]
+    const others = Array.from({ length: 9 }, (_, i) => person({ id: `o${i}`, name: `Other ${i}` }))
+    apiMock.listAdminUsers.mockResolvedValue(page([...members, ...others]))
+    renderWithQuery(
+      <UserPicker value={null} onChange={() => {}} excludeIds={new Set(["m0"])} />,
+    )
+
+    const results = await screen.findByRole("list", { name: "Matching users" })
+    expect(within(results).getAllByRole("button")).toHaveLength(8)
+    expect(within(results).queryByText("Member 0")).not.toBeInTheDocument()
+  })
+
+  it("shows friendly copy when the search fails", async () => {
+    apiMock.listAdminUsers.mockRejectedValue(new TypeError("Failed to fetch"))
+    renderWithQuery(<UserPicker value={null} onChange={() => {}} />)
+    expect(
+      await screen.findByText("Could not search users. Check your connection and try again."),
+    ).toBeInTheDocument()
+    expect(screen.queryByText("Failed to fetch")).not.toBeInTheDocument()
+  })
+
+  it("labels account status and marks deleted accounts", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ADA, BO, CY]))
+    renderWithQuery(<UserPicker value={null} onChange={() => {}} />)
+
+    const results = await screen.findByRole("list", { name: "Matching users" })
+    expect(within(results).getByText("Suspended")).toBeInTheDocument()
+    expect(within(results).queryByText("suspended")).not.toBeInTheDocument()
+    expect(within(results).getByRole("button", { name: /Cy Ames/ })).toHaveTextContent("Deleted")
+    expect(within(results).getByRole("button", { name: /Ada Park/ })).not.toHaveTextContent(/Deleted|Active/)
+  })
+
+  it("announces how many users match", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ADA, BO]))
+    renderWithQuery(<UserPicker value={null} onChange={() => {}} />)
+    expect(await screen.findByRole("status")).toHaveTextContent("2 matching users")
+  })
+
+  it("names the Change button after what it changes", () => {
+    renderWithQuery(
+      <UserPicker value={{ id: "ada", name: "Ada Park", handle: "@ada" }} onChange={() => {}} />,
+    )
+    expect(screen.getByRole("button", { name: "Change selected user" })).toBeInTheDocument()
+  })
+
+  it("takes its name and description from the form's label and error", () => {
+    apiMock.listAdminUsers.mockReturnValue(new Promise(() => {}))
+    renderWithQuery(
+      <>
+        <span id="owner-label">Owner</span>
+        <span id="owner-error">Pick an owner.</span>
+        <UserPicker value={null} onChange={() => {}} labelledBy="owner-label" describedBy="owner-error" />
+      </>,
+    )
+    const box = screen.getByRole("textbox", { name: "Owner" })
+    expect(box).toHaveAccessibleDescription("Pick an owner.")
+  })
+})
diff --git a/apps/admin/src/features/orgs/user-picker.tsx b/apps/admin/src/features/orgs/user-picker.tsx
index 893d9d3..22ba3f4 100644
--- a/apps/admin/src/features/orgs/user-picker.tsx
+++ b/apps/admin/src/features/orgs/user-picker.tsx
@@ -1,13 +1,23 @@
 "use client"
 
 import * as React from "react"
-import { avatarColor, monogram, type AdminUserListItemDTO } from "@civfix/shared"
+import {
+  ErrorCode,
+  USER_STATUS_LABELS,
+  avatarColor,
+  monogram,
+  type AdminUserListItemDTO,
+} from "@civfix/shared"
 
 import { Icons } from "@/components/icons"
 import { LoadingState } from "@/components/shared/data-states"
 import { useUserList } from "@/features/users/use-users"
+import { userSearchTerm } from "@/features/users/user-search"
 import { useDebounced } from "@/hooks/use-debounced"
-import { toAppError } from "@/lib/api"
+import { errorMessage } from "@/lib/error-messages"
+
+const RESULT_ROWS = 8
+const API_MAX_LIMIT = 100
 
 /** The minimum a picked user needs to render: id, name, handle (avatar optional). */
 export interface PickedUser {
@@ -32,16 +42,18 @@ export function PickedUserAvatar({ user, size = 28 }: { user: PickedUser; size?:
 }
 
 /**
- * Search-and-pick a user by name, @handle or email through the admin users list. Once picked, the
+ * Search-and-pick a user by name, handle or city through the admin users list. Once picked, the
  * control collapses to the chosen user with a "Change" affordance so the form keeps a stable height.
  * Ownership is assigned by id (DECISIONS §32): the handle is only how the operator finds the person.
  */
 export function UserPicker({
   value,
   onChange,
-  placeholder = "Search by name, @handle or email…",
+  placeholder = "Search by name, handle or city…",
   excludeIds,
   autoFocus,
+  labelledBy,
+  describedBy,
 }: {
   value: PickedUser | null
   onChange: (user: PickedUser | null) => void
@@ -49,15 +61,35 @@ export function UserPicker({
   /** Users already in the org (hidden from the results so they cannot be added twice). */
   excludeIds?: ReadonlySet<string>
   autoFocus?: boolean
+  /** Id of the form's visible label for this field; replaces the built-in search label. */
+  labelledBy?: string
+  /** Id of the form's error or hint for this field. */
+  describedBy?: string
 }) {
   const [query, setQuery] = React.useState("")
   const debounced = useDebounced(query, 200)
   const q = debounced.trim()
-  const list = useUserList({ q: q === "" ? undefined : q, limit: 8 }, { keepPreviousData: true })
+  // Members are filtered out here, not by the API, so the page is widened by their count to still fill
+  // the result rows with people who can be added.
+  const limit = Math.min(API_MAX_LIMIT, RESULT_ROWS + (excludeIds?.size ?? 0))
+  const list = useUserList({ q: userSearchTerm(debounced), limit }, { keepPreviousData: true })
+  const fetched = React.useMemo(() => list.data?.items ?? [], [list.data])
   const results = React.useMemo(
-    () => (list.data?.items ?? []).filter((u) => !excludeIds?.has(u.id)),
-    [list.data, excludeIds],
+    () => fetched.filter((u) => !excludeIds?.has(u.id)).slice(0, RESULT_ROWS),
+    [fetched, excludeIds],
   )
+  const emptyNote =
+    q === ""
+      ? "Type to search users."
+      : fetched.length > 0
+        ? "Everyone matching is already a member."
+        : `No user matches “${q}”.`
+  const announcement =
+    list.isLoading || list.isError
+      ? ""
+      : results.length === 0
+        ? emptyNote
+        : `${results.length} matching ${results.length === 1 ? "user" : "users"}`
 
   if (value) {
     return (
@@ -67,7 +99,12 @@ export function UserPicker({
           <span className="user-pick-name">{value.name}</span>
           <span className="user-pick-handle">{value.handle}</span>
         </div>
-        <button type="button" className="btn sm ghost" onClick={() => onChange(null)}>
+        <button
+          type="button"
+          className="btn sm ghost"
+          aria-label="Change selected user"
+          onClick={() => onChange(null)}
+        >
           Change
         </button>
       </div>
@@ -80,7 +117,9 @@ export function UserPicker({
         <Icons.Search size={14} />
         <input
           type="text"
-          aria-label="Search users by name, handle or email"
+          aria-label={labelledBy ? undefined : "Search users by name, handle or city"}
+          aria-labelledby={labelledBy}
+          aria-describedby={describedBy}
           autoComplete="off"
           autoFocus={autoFocus}
           placeholder={placeholder}
@@ -88,6 +127,11 @@ export function UserPicker({
           onChange={(e) => setQuery(e.target.value)}
         />
       </div>
+      {/* Stays mounted so a screen reader hears each new result count; the visible note is hidden from it
+          to avoid reading the same line twice. */}
+      <span className="visually-hidden" role="status">
+        {announcement}
+      </span>
       {/* Plain buttons in a list: each result is an ordinary Tab stop that picks the user. */}
       {list.isLoading ? (
         <div className="user-pick-results">
@@ -95,12 +139,16 @@ export function UserPicker({
         </div>
       ) : list.isError ? (
         <div className="user-pick-results">
-          <div className="user-pick-note tone-alert">{toAppError(list.error).message}</div>
+          <div className="user-pick-note tone-alert">
+            {errorMessage(list.error, {
+              [ErrorCode.INTERNAL]: "Could not search users. Check your connection and try again.",
+            })}
+          </div>
         </div>
       ) : results.length === 0 ? (
         <div className="user-pick-results">
-          <div className="user-pick-note" role="status">
-            {q === "" ? "Type to search users." : `No user matches “${q}”.`}
+          <div className="user-pick-note" aria-hidden="true">
+            {emptyNote}
           </div>
         </div>
       ) : (
@@ -128,8 +176,11 @@ export function UserPicker({
                     {u.city && u.city !== "-" ? ` · ${u.city}` : ""}
                   </span>
                 </span>
+                {u.deletedAt && <span className="pill status-flag tight">Deleted</span>}
                 {u.status !== "active" && (
-                  <span className="pill status-flag tight">{u.status}</span>
+                  <span className="pill status-flag tight">
+                    {USER_STATUS_LABELS[u.status] ?? u.status}
+                  </span>
                 )}
               </button>
             </li>
diff --git a/apps/admin/src/features/orgs/verification-panel.test.tsx b/apps/admin/src/features/orgs/verification-panel.test.tsx
new file mode 100644
index 0000000..6fc39f3
--- /dev/null
+++ b/apps/admin/src/features/orgs/verification-panel.test.tsx
@@ -0,0 +1,83 @@
+import { screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { renderWithQuery } from "@/test/render"
+import { VerificationPanel } from "@/features/orgs/verification-panel"
+import { makeOrg, mockOrgDetails, pendingApplication } from "@/features/orgs/test-fixtures"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+const DECISION_BUTTONS = [
+  "Verify as nonprofit",
+  "Verify as government",
+  "Verify as community group",
+  "Reject",
+]
+
+async function renderPanelFor(org: ReturnType<typeof makeOrg>) {
+  mockOrgDetails(org)
+  renderWithQuery(<VerificationPanel orgId={org.id} />)
+  await screen.findByText(`/${org.slug}`)
+}
+
+describe("VerificationPanel decision", () => {
+  it("offers Verify and Reject for a pending application", async () => {
+    const org = makeOrg({ verifiedStatus: "pending", verifiedKind: null })
+    await renderPanelFor({ ...org, verification: pendingApplication(org) })
+
+    for (const name of DECISION_BUTTONS) {
+      expect(screen.getByRole("button", { name })).toBeEnabled()
+    }
+    expect(screen.queryByText("No application is awaiting a decision.")).not.toBeInTheDocument()
+  })
+
+  it.each(["verified", "rejected", "unverified"] as const)(
+    "offers no decision for a %s organization",
+    async (verifiedStatus) => {
+      await renderPanelFor(makeOrg({ verifiedStatus }))
+
+      for (const name of DECISION_BUTTONS) {
+        expect(screen.queryByRole("button", { name })).not.toBeInTheDocument()
+      }
+      expect(screen.getByText("No application is awaiting a decision.")).toBeInTheDocument()
+      expect(screen.queryByText(/Deciding again overwrites/)).not.toBeInTheDocument()
+    },
+  )
+
+  it("offers no decision for a deleted organization with a pending application", async () => {
+    const org = makeOrg({
+      verifiedStatus: "pending",
+      verifiedKind: null,
+      deletedAt: "2026-04-01T10:00:00.000Z",
+    })
+    await renderPanelFor({ ...org, verification: pendingApplication(org) })
+
+    for (const name of DECISION_BUTTONS) {
+      expect(screen.queryByRole("button", { name })).not.toBeInTheDocument()
+    }
+    expect(
+      screen.getByText("This organization was deleted, so its application can no longer be decided."),
+    ).toBeInTheDocument()
+  })
+})
+
+describe("VerificationPanel evidence", () => {
+  it("shows no evidence card for an organization that never applied", async () => {
+    await renderPanelFor(makeOrg({ verification: null }))
+
+    expect(screen.getByText("This organization has never applied for verification.")).toBeInTheDocument()
+    expect(screen.queryByText("Evidence")).not.toBeInTheDocument()
+    expect(screen.queryByText("No evidence uploaded")).not.toBeInTheDocument()
+  })
+
+  it("says an application came without documents", async () => {
+    const org = makeOrg({ verifiedStatus: "pending", verifiedKind: null })
+    await renderPanelFor({ ...org, verification: pendingApplication(org) })
+
+    expect(screen.getByText("No evidence uploaded")).toBeInTheDocument()
+  })
+})
diff --git a/apps/admin/src/features/orgs/verification-panel.tsx b/apps/admin/src/features/orgs/verification-panel.tsx
index 4bf878e..10a8a02 100644
--- a/apps/admin/src/features/orgs/verification-panel.tsx
+++ b/apps/admin/src/features/orgs/verification-panel.tsx
@@ -9,25 +9,19 @@ import { formatDate, formatDateTime } from "@/lib/dates"
 import { isHttpsUrl } from "@/lib/external-url"
 import { orgStatusView } from "@/lib/org-status"
 import { EvidenceList } from "@/features/orgs/evidence-list"
+import { ORG_KIND_LABEL, canDecideVerification } from "@/features/orgs/org-verification"
 import { useAdminOrg, useDecideOrgVerification } from "@/features/orgs/use-orgs"
-import { useNav, useToast } from "@/store/ui-store"
-
-export const ORG_KIND_LABEL: Record<OrgVerificationKind, string> = {
-  nonprofit: "Nonprofit",
-  government: "Government",
-  community: "Community group",
-}
+import { useNav } from "@/store/ui-store"
 
 const APPROVE_KINDS: OrgVerificationKind[] = ["nonprofit", "government", "community"]
 
 export function VerificationPanel({ orgId }: { orgId: string }) {
   const q = useAdminOrg(orgId)
   const decide = useDecideOrgVerification()
-  const toast = useToast()
   const nav = useNav()
 
   if (q.isLoading) return <LoadingState label="Loading organization..." />
-  if (q.isError) {
+  if (q.isError && !q.data) {
     return (
       <ErrorState
         error={q.error}
@@ -42,7 +36,7 @@ export function VerificationPanel({ orgId }: { orgId: string }) {
   const verification = org.verification ?? null
   const statusView = orgStatusView(org.verifiedStatus)
   const documentIds = verification?.documentMediaIds ?? []
-  const pending = org.verifiedStatus === "pending"
+  const decidable = canDecideVerification(org)
 
   const onApprove = async (kind: OrgVerificationKind) => {
     const ok = await confirmDialog({
@@ -51,10 +45,7 @@ export function VerificationPanel({ orgId }: { orgId: string }) {
       confirmLabel: "Verify organization",
     })
     if (!ok) return
-    decide.mutate(
-      { id: org.id, decision: "verified", kind },
-      { onSuccess: () => toast(`${org.name} verified · ${ORG_KIND_LABEL[kind]}`) },
-    )
+    decide.mutate({ id: org.id, decision: "verified", kind })
   }
 
   const onReject = async () => {
@@ -68,10 +59,7 @@ export function VerificationPanel({ orgId }: { orgId: string }) {
       danger: true,
     })
     if (reason === null || reason.trim() === "") return
-    decide.mutate(
-      { id: org.id, decision: "rejected", reason: reason.trim() },
-      { onSuccess: () => toast(`${org.name} rejected`) },
-    )
+    decide.mutate({ id: org.id, decision: "rejected", reason: reason.trim() })
   }
 
   return (
@@ -198,48 +186,50 @@ export function VerificationPanel({ orgId }: { orgId: string }) {
         </div>
       </div>
 
-      <div className="sub">
-        <div className="sub-head">
-          Evidence
-          <span className="rep-confirms" style={{ marginLeft: "auto" }}>
-            <Icons.FileText size={12} /> {documentIds.length}
-          </span>
-        </div>
-        <div className="sub-body">
-          <EvidenceList mediaIds={documentIds} />
+      {verification !== null && (
+        <div className="sub">
+          <div className="sub-head">
+            Evidence
+            <span className="rep-confirms" style={{ marginLeft: "auto" }}>
+              <Icons.FileText size={12} /> {documentIds.length}
+            </span>
+          </div>
+          <div className="sub-body">
+            <EvidenceList mediaIds={documentIds} />
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className="rep-actions">
-        <span className="rep-actions-label">Decision</span>
-        {APPROVE_KINDS.map((kind) => (
+      {decidable ? (
+        <div className="rep-actions">
+          <span className="rep-actions-label">Decision</span>
+          {APPROVE_KINDS.map((kind) => (
+            <button
+              key={kind}
+              type="button"
+              className="btn sm"
+              disabled={decide.isPending}
+              onClick={() => void onApprove(kind)}
+            >
+              Verify as {ORG_KIND_LABEL[kind].toLowerCase()}
+            </button>
+          ))}
+          <div className="spacer" />
           <button
-            key={kind}
             type="button"
-            className={`btn sm ${org.verifiedKind === kind && org.verifiedStatus === "verified" ? "primary" : ""}`}
+            className="btn danger"
             disabled={decide.isPending}
-            onClick={() => void onApprove(kind)}
+            onClick={() => void onReject()}
           >
-            {org.verifiedKind === kind && org.verifiedStatus === "verified" && (
-              <Icons.Check size={11} />
-            )}
-            Verify as {ORG_KIND_LABEL[kind].toLowerCase()}
+            <Icons.X size={13} /> Reject
           </button>
-        ))}
-        <div className="spacer" />
-        <button
-          type="button"
-          className="btn danger"
-          disabled={decide.isPending}
-          onClick={() => void onReject()}
-        >
-          <Icons.X size={13} /> Reject
-        </button>
-      </div>
-      {!pending && org.verifiedStatus !== "unverified" && (
+        </div>
+      ) : (
         <div className="pay-note">
-          <Icons.Clock size={13} /> This application was already decided. Deciding again overwrites
-          the previous outcome and is audited.
+          <Icons.Clock size={13} />{" "}
+          {org.deletedAt
+            ? "This organization was deleted, so its application can no longer be decided."
+            : "No application is awaiting a decision."}
         </div>
       )}
     </div>
diff --git a/apps/admin/src/features/pages/page-path.ts b/apps/admin/src/features/pages/page-path.ts
new file mode 100644
index 0000000..6f5109e
--- /dev/null
+++ b/apps/admin/src/features/pages/page-path.ts
@@ -0,0 +1,3 @@
+export function publicPagePath(slug: string): string {
+  return `/e/${slug}`
+}
diff --git a/apps/admin/src/features/pages/page-preview.tsx b/apps/admin/src/features/pages/page-preview.tsx
index c862d85..89d2697 100644
--- a/apps/admin/src/features/pages/page-preview.tsx
+++ b/apps/admin/src/features/pages/page-preview.tsx
@@ -6,6 +6,7 @@ import { Icons } from "@/components/icons"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { EmptyState } from "@/components/shared/page-primitives"
 import { pageBlockViews } from "@/features/pages/page-blocks"
+import { publicPagePath } from "@/features/pages/page-path"
 import { useAdminEventPage } from "@/features/pages/use-pages"
 
 export function PagePreview({ cleanupId, title }: { cleanupId: string; title: string }) {
@@ -31,7 +32,7 @@ export function PagePreview({ cleanupId, title }: { cleanupId: string; title: st
         <div className="pg-seo-title">{page.seo.title ?? title}</div>
         {page.seo.description && <div className="pg-seo-desc">{page.seo.description}</div>}
         <div className="pg-seo-meta mono">
-          {page.slug ? `/${page.slug}` : "no public slug"} · theme {page.theme.accent} ·{" "}
+          {page.slug ? publicPagePath(page.slug) : "no public slug"} · theme {page.theme.accent} ·{" "}
           {page.seo.noindex ? "noindex" : "indexable"}
         </div>
       </div>
diff --git a/apps/admin/src/features/pages/pages-filters.test.ts b/apps/admin/src/features/pages/pages-filters.test.ts
index 5e89295..5a5f6c9 100644
--- a/apps/admin/src/features/pages/pages-filters.test.ts
+++ b/apps/admin/src/features/pages/pages-filters.test.ts
@@ -58,7 +58,7 @@ describe("deep-linked page row", () => {
     expect(pageRowFromDTO(page({ seo: { title: "Echo Park cleanup", noindex: false } })).title).toBe(
       "Echo Park cleanup",
     )
-    expect(pageRowFromDTO(page({})).title).toBe("/echo-park-cleanup")
+    expect(pageRowFromDTO(page({})).title).toBe("/e/echo-park-cleanup")
     expect(pageRowFromDTO(page({ slug: null })).title).toBe("Signup page")
   })
 
diff --git a/apps/admin/src/features/pages/pages-filters.ts b/apps/admin/src/features/pages/pages-filters.ts
index 560fbec..e097b0c 100644
--- a/apps/admin/src/features/pages/pages-filters.ts
+++ b/apps/admin/src/features/pages/pages-filters.ts
@@ -5,6 +5,8 @@ import type {
   EventPageStatus,
 } from "@civfix/shared"
 
+import { publicPagePath } from "@/features/pages/page-path"
+
 export const PAGE_FILTERS = ["all", "published", "unpublished", "draft", "flagged"] as const
 export type PageFilter = (typeof PAGE_FILTERS)[number]
 
@@ -26,7 +28,7 @@ export function pageRowFromDTO(page: EventPageDTO): AdminEventPageListItemDTO {
   return {
     cleanupId: page.cleanupId,
     slug: page.slug,
-    title: page.seo.title ?? (page.slug === null ? "Signup page" : `/${page.slug}`),
+    title: page.seo.title ?? (page.slug === null ? "Signup page" : publicPagePath(page.slug)),
     status: page.status,
     visibility: page.visibility,
     organizer: null,
diff --git a/apps/admin/src/features/pages/pages-page.test.tsx b/apps/admin/src/features/pages/pages-page.test.tsx
index 0a6fa60..65b1d22 100644
--- a/apps/admin/src/features/pages/pages-page.test.tsx
+++ b/apps/admin/src/features/pages/pages-page.test.tsx
@@ -1,15 +1,19 @@
 import { act, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
+import { afterEach, describe, expect, it, vi } from "vitest"
 import type {
   AdminEventPageListItemDTO,
   AdminEventPageListResponse,
   AdminGetEventPageResponse,
 } from "@civfix/shared"
 
+import { DialogHost } from "@/components/shared/dialog"
+import { Toast } from "@/components/shell/toast"
 import type * as ApiModule from "@/lib/api"
+import { useUiStore } from "@/store/ui-store"
 import { apiMock } from "@/test/api-mock"
 import { startFakeTimersWithUser } from "@/test/fake-timers"
+import { queueRowOf } from "@/test/panes"
 import { renderWithQuery } from "@/test/render"
 import { PagesPage } from "@/features/pages/pages-page"
 
@@ -115,6 +119,10 @@ function detailPane(title: string): HTMLElement {
   return section
 }
 
+afterEach(() => {
+  useUiStore.setState({ toast: null })
+})
+
 describe("PagesPage list states", () => {
   it("shows the loading state while the list is in flight", async () => {
     apiMock.adminListEventPages.mockReturnValue(new Promise(() => {}))
@@ -160,9 +168,9 @@ describe("PagesPage list states", () => {
     )
     renderWithQuery(<PagesPage focusId={null} />)
 
-    expect(await screen.findByText("/echo-park-cleanup")).toBeInTheDocument()
     const list = listPane()
-    expect(within(list).getByText("/river-day")).toBeInTheDocument()
+    expect(await within(list).findByText("/e/echo-park-cleanup")).toBeInTheDocument()
+    expect(within(list).getByText("/e/river-day")).toBeInTheDocument()
     expect(within(list).getByText("no slug")).toBeInTheDocument()
     expect(within(list).getByText("1,234 views")).toBeInTheDocument()
     expect(within(list).getByText("42 views")).toBeInTheDocument()
@@ -190,10 +198,23 @@ describe("PagesPage list states", () => {
     expect(await within(detail).findByText("Monthly lakeside sweep")).toBeInTheDocument()
     expect(within(detail).getByText("About the day")).toBeInTheDocument()
     expect(within(detail).getByText("Bring gloves and water.")).toBeInTheDocument()
-    expect(within(detail).getByText(/\/echo-park-cleanup · theme bloom · indexable/)).toBeInTheDocument()
+    expect(within(detail).getByText(/^\/e\/echo-park-cleanup · theme bloom · indexable$/)).toBeInTheDocument()
     expect(apiMock.adminGetEventPage).toHaveBeenCalledWith({ id: ECHO_ID })
   })
 
+  it("renders a page status this build does not know as its raw value instead of crashing", async () => {
+    const archived = { ...echoPage, status: "archived" as AdminEventPageListItemDTO["status"] }
+    apiMock.adminListEventPages.mockResolvedValue(listPage([archived]))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    renderWithQuery(<PagesPage focusId={null} />)
+
+    const list = listPane()
+    expect(await within(list).findByText("archived")).toHaveClass("pill", "priority-low")
+    expect(within(detailPane("Echo Park Cleanup")).getByText("archived")).toBeInTheDocument()
+  })
+
   it("selecting a row swaps the detail pane to that page", async () => {
     apiMock.adminListEventPages.mockResolvedValue(listPage([echoPage, riverPage, lakePage]))
     apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
@@ -214,7 +235,7 @@ describe("PagesPage list states", () => {
     ).toBeInTheDocument()
     expect(within(detail).getByRole("button", { name: "Clear flag" })).toBeEnabled()
     expect(within(detail).getByRole("button", { name: "Unpublish" })).toBeDisabled()
-    expect(await within(detail).findByText(/\/river-day · theme bloom · noindex/)).toBeInTheDocument()
+    expect(await within(detail).findByText(/^\/e\/river-day · theme bloom · noindex$/)).toBeInTheDocument()
   })
 
   it("shows the draft crumb for a page without a slug", async () => {
@@ -233,6 +254,191 @@ describe("PagesPage list states", () => {
   })
 })
 
+describe("PagesPage list accessibility", () => {
+  it("selects a page row with Enter and with Space and marks the selected row as current", async () => {
+    apiMock.adminListEventPages.mockResolvedValue(listPage([echoPage, riverPage]))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    renderWithQuery(<PagesPage focusId={null} />)
+
+    const list = listPane()
+    const echoRow = await within(list).findByRole("button", { name: /^Echo Park Cleanup/ })
+    const riverRow = within(list).getByRole("button", { name: /^LA River Day/ })
+    await waitFor(() => expect(echoRow).toHaveAttribute("aria-current", "true"))
+    expect(riverRow).not.toHaveAttribute("aria-current")
+
+    riverRow.focus()
+    await userEvent.keyboard("{Enter}")
+    expect(await screen.findByRole("heading", { level: 2, name: "LA River Day" })).toBeInTheDocument()
+    expect(riverRow).toHaveAttribute("aria-current", "true")
+    expect(echoRow).not.toHaveAttribute("aria-current")
+
+    echoRow.focus()
+    await userEvent.keyboard(" ")
+    expect(await screen.findByRole("heading", { level: 2, name: "Echo Park Cleanup" })).toBeInTheDocument()
+  })
+
+  it("names the search box and the flagged marker", async () => {
+    apiMock.adminListEventPages.mockResolvedValue(listPage([riverPage]))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    renderWithQuery(<PagesPage focusId={null} />)
+
+    expect(screen.getByRole("textbox", { name: "Search signup pages" })).toBeInTheDocument()
+    expect(await within(listPane()).findByRole("img", { name: "Flagged" })).toBeInTheDocument()
+  })
+
+  it("marks the list count as partial while more pages can be loaded", async () => {
+    apiMock.adminListEventPages.mockResolvedValue(listPage([echoPage], "cursor-2"))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    renderWithQuery(<PagesPage focusId={null} />)
+
+    expect(await within(listPane()).findByText("1+")).toBeInTheDocument()
+  })
+})
+
+describe("PagesPage moderation", () => {
+  function renderWithChrome() {
+    return renderWithQuery(
+      <>
+        <PagesPage focusId={null} />
+        <DialogHost />
+        <Toast />
+      </>,
+    )
+  }
+
+  it("names a flagged page by its public /e path in the toast", async () => {
+    apiMock.adminListEventPages.mockResolvedValue(listPage([echoPage]))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    apiMock.adminFlagEventPage.mockResolvedValue({
+      ...echoPage,
+      flaggedAt: "2026-09-12T08:00:00.000Z",
+      flagReason: "Copied a city logo",
+    })
+    renderWithChrome()
+
+    await userEvent.click(await screen.findByRole("button", { name: "Flag" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Copied a city logo")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Flag page" }))
+
+    expect(await screen.findByText("Flagged · /e/echo-park-cleanup")).toBeInTheDocument()
+  })
+
+  it("names a page without a slug by its title in the toast", async () => {
+    apiMock.adminListEventPages.mockResolvedValue(listPage([lakePage]))
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id, { slug: null, status: "draft" })),
+    )
+    apiMock.adminUnpublishEventPage.mockResolvedValue({ ...lakePage, status: "unpublished" })
+    renderWithChrome()
+
+    await userEvent.click(await screen.findByRole("button", { name: "Unpublish" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Impersonates a city agency")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Unpublish page" }))
+
+    expect(await screen.findByText("Unpublished · Silver Lake Sweep")).toBeInTheDocument()
+    expect(screen.queryByText(new RegExp(LAKE_ID))).not.toBeInTheDocument()
+  })
+
+  it("clears the selection instead of jumping to another page when an unpublished page leaves the Published list", async () => {
+    const otherPublished = { ...riverPage, status: "published", flaggedAt: null, flagReason: null, flaggedBy: null } satisfies AdminEventPageListItemDTO
+    let unpublished = false
+    apiMock.adminListEventPages.mockImplementation(async () =>
+      listPage(unpublished ? [otherPublished] : [echoPage, otherPublished]),
+    )
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(eventPage(id)),
+    )
+    apiMock.adminUnpublishEventPage.mockImplementation(async () => {
+      unpublished = true
+      return { ...echoPage, status: "unpublished" }
+    })
+    renderWithChrome()
+
+    await screen.findByRole("heading", { level: 2, name: "Echo Park Cleanup" })
+    await userEvent.click(screen.getByRole("button", { name: "Unpublish" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Impersonates a city agency")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Unpublish page" }))
+
+    await waitFor(() =>
+      expect(within(listPane()).queryByText("Echo Park Cleanup")).not.toBeInTheDocument(),
+    )
+    expect(await screen.findByText("No page selected")).toBeInTheDocument()
+    expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: "Unpublish" })).not.toBeInTheDocument()
+  })
+
+  it("confirms the unpublish once the page preview refetch lands after the list dropped the page", async () => {
+    useUiStore.setState({ toast: null })
+    const otherPublished = { ...riverPage, status: "published", flaggedAt: null, flagReason: null, flaggedBy: null } satisfies AdminEventPageListItemDTO
+    let unpublished = false
+    let releasePreview!: (page: AdminGetEventPageResponse) => void
+    const previewRefetch = new Promise<AdminGetEventPageResponse>((resolve) => {
+      releasePreview = resolve
+    })
+    apiMock.adminListEventPages.mockImplementation(async () =>
+      listPage(unpublished ? [otherPublished] : [echoPage, otherPublished]),
+    )
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      unpublished ? previewRefetch : Promise.resolve(eventPage(id)),
+    )
+    apiMock.adminUnpublishEventPage.mockImplementation(async () => {
+      unpublished = true
+      return { ...echoPage, status: "unpublished" }
+    })
+    renderWithChrome()
+
+    await screen.findByRole("heading", { level: 2, name: "Echo Park Cleanup" })
+    await userEvent.click(screen.getByRole("button", { name: "Unpublish" }))
+    const dialog = await screen.findByRole("dialog")
+    await userEvent.type(within(dialog).getByRole("textbox"), "Impersonates a city agency")
+    await userEvent.click(within(dialog).getByRole("button", { name: "Unpublish page" }))
+
+    expect(await screen.findByText("No page selected")).toBeInTheDocument()
+    await act(async () => {
+      releasePreview(eventPage(ECHO_ID, { status: "unpublished" }))
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: "Unpublished · /e/echo-park-cleanup",
+        tone: "ok",
+      }),
+    )
+  })
+
+  it("keeps a manually picked page open, read by id, after a filter drops it from the list", async () => {
+    apiMock.adminListEventPages.mockImplementation(async (params: { status?: string }) =>
+      listPage(params.status === "draft" ? [lakePage] : [echoPage, riverPage]),
+    )
+    apiMock.adminGetEventPage.mockImplementation(({ id }: { id: string }) =>
+      Promise.resolve(
+        eventPage(id, id === RIVER_ID ? { slug: "river-day", seo: { title: "LA River Day", noindex: false } } : {}),
+      ),
+    )
+    renderWithQuery(<PagesPage focusId={null} />)
+
+    await userEvent.click(await within(listPane()).findByText("LA River Day"))
+    await screen.findByRole("heading", { level: 2, name: "LA River Day" })
+
+    await userEvent.click(screen.getByRole("button", { name: "Draft" }))
+    const lakeRow = await within(listPane()).findByText("Silver Lake Sweep")
+
+    expect(await screen.findByRole("heading", { level: 2, name: "LA River Day" })).toBeInTheDocument()
+    expect(queueRowOf(lakeRow)).not.toHaveAttribute("aria-current")
+    expect(apiMock.adminGetEventPage).toHaveBeenCalledWith({ id: RIVER_ID })
+  })
+})
+
 describe("PagesPage paging, filters and search", () => {
   it("requests published pages first and loads the next page with the cursor", async () => {
     apiMock.adminListEventPages
@@ -243,17 +449,17 @@ describe("PagesPage paging, filters and search", () => {
     )
     renderWithQuery(<PagesPage focusId={null} />)
 
-    await screen.findByText("/echo-park-cleanup")
+    await within(listPane()).findByText("/e/echo-park-cleanup")
     expect(apiMock.adminListEventPages).toHaveBeenNthCalledWith(1, { status: "published" })
 
     await userEvent.click(screen.getByRole("button", { name: "Load more" }))
 
-    expect(await screen.findByText("/river-day")).toBeInTheDocument()
+    expect(await within(listPane()).findByText("/e/river-day")).toBeInTheDocument()
     expect(apiMock.adminListEventPages).toHaveBeenNthCalledWith(2, {
       status: "published",
       cursor: "cursor-2",
     })
-    expect(screen.getByText("/echo-park-cleanup")).toBeInTheDocument()
+    expect(within(listPane()).getByText("/e/echo-park-cleanup")).toBeInTheDocument()
     expect(screen.queryByRole("button", { name: "Load more" })).not.toBeInTheDocument()
     expect(within(listPane()).getByText("2")).toBeInTheDocument()
   })
@@ -343,7 +549,7 @@ describe("PagesPage deep links", () => {
     expect(within(detail).getByText("Copied a city logo")).toBeInTheDocument()
     expect(within(detail).getByRole("button", { name: "Unpublish" })).toBeDisabled()
     expect(screen.queryByRole("heading", { level: 2, name: "Echo Park Cleanup" })).not.toBeInTheDocument()
-    expect(screen.getByText("/echo-park-cleanup")).toBeInTheDocument()
+    expect(within(listPane()).getByText("/e/echo-park-cleanup")).toBeInTheDocument()
   })
 
   it("shows the linked-page error when the focused page cannot be fetched", async () => {
diff --git a/apps/admin/src/features/pages/pages-page.tsx b/apps/admin/src/features/pages/pages-page.tsx
index 77bbca6..9c69649 100644
--- a/apps/admin/src/features/pages/pages-page.tsx
+++ b/apps/admin/src/features/pages/pages-page.tsx
@@ -11,9 +11,11 @@ import { Icons } from "@/components/icons"
 import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { promptDialog } from "@/components/shared/dialog"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { useDebounced } from "@/hooks/use-debounced"
 import { formatDateTime } from "@/lib/dates"
 import { pageListParams, pageRowFromDTO } from "@/features/pages/pages-filters"
+import { publicPagePath } from "@/features/pages/page-path"
 import { PagePreview } from "@/features/pages/page-preview"
 import {
   useAdminEventPage,
@@ -21,7 +23,7 @@ import {
   useFlagEventPage,
   useUnpublishEventPage,
 } from "@/features/pages/use-pages"
-import { useNav, useToast } from "@/store/ui-store"
+import { useNav } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
 const PAGE_STATUS_VIEW: Record<EventPageStatus, { label: string; cls: string }> = {
@@ -30,6 +32,10 @@ const PAGE_STATUS_VIEW: Record<EventPageStatus, { label: string; cls: string }>
   unpublished: { label: "Unpublished", cls: "status-flag" },
 }
 
+function pageStatusView(status: EventPageStatus): { label: string; cls: string } {
+  return Object.hasOwn(PAGE_STATUS_VIEW, status) ? PAGE_STATUS_VIEW[status] : { label: status, cls: "priority-low" }
+}
+
 const VISIBILITY_LABEL: Record<EventVisibility, string> = {
   public: "Public",
   unlisted: "Unlisted",
@@ -45,9 +51,20 @@ function PageRow({
   selected: boolean
   onClick: () => void
 }) {
-  const view = PAGE_STATUS_VIEW[item.status]
+  const view = pageStatusView(item.status)
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={onClick}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
+    >
       <div className="leading">
         <span className="evt-row-ico hue-lilac" title="Signup page">
           <Icons.Globe size={15} />
@@ -57,11 +74,11 @@ function PageRow({
         <div className="top">
           <span className="title">{item.title}</span>
           {item.flaggedAt && (
-            <span className="rep-flag-dot" title="Flagged">
+            <span className="rep-flag-dot" role="img" aria-label="Flagged" title="Flagged">
               <Icons.Flag size={10} />
             </span>
           )}
-          <span className="ident">{item.slug ? `/${item.slug}` : "no slug"}</span>
+          <span className="ident">{item.slug ? publicPagePath(item.slug) : "no slug"}</span>
         </div>
         <div className="sub">
           <span className="strong">{VISIBILITY_LABEL[item.visibility]}</span>
@@ -92,14 +109,13 @@ function PageRow({
 function PageDetail({ item }: { item: AdminEventPageListItemDTO }) {
   const flag = useFlagEventPage()
   const unpublish = useUnpublishEventPage()
-  const toast = useToast()
   const nav = useNav()
-  const view = PAGE_STATUS_VIEW[item.status]
+  const view = pageStatusView(item.status)
   const flagged = item.flaggedAt != null
 
   const onFlag = async () => {
     if (flagged) {
-      flag.mutate({ id: item.cleanupId, flagged: false }, { onSuccess: () => toast("Flag cleared") })
+      flag.mutate({ id: item.cleanupId, flagged: false })
       return
     }
     const reason = await promptDialog({
@@ -111,10 +127,7 @@ function PageDetail({ item }: { item: AdminEventPageListItemDTO }) {
       required: true,
     })
     if (reason === null || reason.trim() === "") return
-    flag.mutate(
-      { id: item.cleanupId, flagged: true, reason: reason.trim() },
-      { onSuccess: () => toast(`Flagged · /${item.slug ?? item.cleanupId}`) },
-    )
+    flag.mutate({ id: item.cleanupId, flagged: true, reason: reason.trim() })
   }
 
   const onUnpublish = async () => {
@@ -128,10 +141,7 @@ function PageDetail({ item }: { item: AdminEventPageListItemDTO }) {
       danger: true,
     })
     if (reason === null || reason.trim() === "") return
-    unpublish.mutate(
-      { id: item.cleanupId, reason: reason.trim() },
-      { onSuccess: () => toast(`Unpublished · /${item.slug ?? item.cleanupId}`) },
-    )
+    unpublish.mutate({ id: item.cleanupId, reason: reason.trim() })
   }
 
   return (
@@ -143,7 +153,7 @@ function PageDetail({ item }: { item: AdminEventPageListItemDTO }) {
           </span>
         </span>
         <div className="rep-head-text">
-          <div className="crumb mono">{item.slug ? `/e/${item.slug}` : "unpublished draft"}</div>
+          <div className="crumb mono">{item.slug ? publicPagePath(item.slug) : "unpublished draft"}</div>
           <h2>{item.title}</h2>
         </div>
         {flagged && (
@@ -236,6 +246,7 @@ export function PagesPage({ focusId }: SectionPageProps) {
   const [filter, setFilter] = React.useState("published")
   const [query, setQuery] = React.useState("")
   const [selId, setSelId] = React.useState<string | null>(focusId)
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
 
   const debouncedQuery = useDebounced(query, 250)
   const listParams = React.useMemo(
@@ -251,23 +262,28 @@ export function PagesPage({ focusId }: SectionPageProps) {
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
+  // Only the first load picks a page on the operator's behalf, and a deep-linked page is never
+  // replaced. A pick that a filter or search leaves out stays open, read by id; a pick that drops out of
+  // the same list after a refetch (an unpublish under the Published chip) clears, so the moderation
+  // buttons never land on a page nobody chose. Decided only on data fetched for the current params.
+  const listKey = JSON.stringify(listParams)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.cleanupId)
-    if (
-      selId &&
-      selId !== focusId &&
-      items.length &&
-      !items.some((x) => x.cleanupId === selId)
-    ) {
-      setSelId(items[0]!.cleanupId)
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.cleanupId)
+      return
     }
-  }, [items, selId, focusId])
+    setAutoPick(false)
+    if (items.some((x) => x.cleanupId === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
 
   const listed = items.find((x) => x.cleanupId === selId) ?? null
-  const linked = useAdminEventPage(
-    selId !== null && listed === null && !listQuery.isLoading ? selId : null,
-  )
-  const selected = listed ?? (linked.data ? pageRowFromDTO(linked.data) : null)
+  // The detail's preview reads the same key, so fetching before the list settles never doubles a request.
+  const byId = useAdminEventPage(listed === null ? selId : null)
+  const selected = listed ?? (byId.data ? pageRowFromDTO(byId.data) : null)
+  const byIdNoun = selId === focusId ? "the linked page" : "the page"
 
   return (
     <>
@@ -298,6 +314,7 @@ export function PagesPage({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search signup pages"
             placeholder="Search slug or title…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -310,7 +327,12 @@ export function PagesPage({ focusId }: SectionPageProps) {
           <div className="card-head">
             <h3>Pages</h3>
             <div className="spacer" />
-            <span className="meta">{items.length}</span>
+            {listQuery.isSuccess && (
+              <span className="meta">
+                {items.length}
+                {listQuery.hasNextPage ? "+" : ""}
+              </span>
+            )}
           </div>
           <div className="queue-list">
             {listQuery.isLoading ? (
@@ -353,13 +375,13 @@ export function PagesPage({ focusId }: SectionPageProps) {
         <section className="card md-detail-card">
           {selected ? (
             <PageDetail key={selected.cleanupId} item={selected} />
-          ) : linked.isLoading ? (
-            <LoadingState label="Loading the linked page..." />
-          ) : linked.isError ? (
+          ) : byId.isLoading ? (
+            <LoadingState label={`Loading ${byIdNoun}...`} />
+          ) : byId.isError ? (
             <ErrorState
-              error={linked.error}
-              onRetry={() => linked.refetch()}
-              title="Could not load the linked page"
+              error={byId.error}
+              onRetry={() => byId.refetch()}
+              title={`Could not load ${byIdNoun}`}
             />
           ) : (
             <EmptyState
diff --git a/apps/admin/src/features/pages/use-pages.ts b/apps/admin/src/features/pages/use-pages.ts
index d3b39ca..38a4df2 100644
--- a/apps/admin/src/features/pages/use-pages.ts
+++ b/apps/admin/src/features/pages/use-pages.ts
@@ -6,11 +6,14 @@ import type {
   AdminEventPageListResponse,
   AdminGetEventPageResponse,
   FlagEventPageRequest,
+  FlagEventPageResponse,
   UnpublishEventPageRequest,
+  UnpublishEventPageResponse,
 } from "@civfix/shared"
 
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
+import { publicPagePath } from "@/features/pages/page-path"
 
 export function useEventPagesInfinite(params: AdminEventPageListQuery) {
   return useInfiniteQuery<AdminEventPageListResponse>({
@@ -33,19 +36,30 @@ export function useAdminEventPage(cleanupId: string | null) {
   })
 }
 
+function pageName(page: Pick<FlagEventPageResponse, "slug" | "title">): string {
+  return page.slug ? publicPagePath(page.slug) : page.title
+}
+
 function invalidatePages(qc: ReturnType<typeof useQueryClient>) {
-  qc.invalidateQueries({ queryKey: queryKeys.pages.all })
-  qc.invalidateQueries({ queryKey: queryKeys.events.all })
-  qc.invalidateQueries({ queryKey: queryKeys.audit.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.pages.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.events.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.audit.all }),
+  ])
 }
 
 export function useFlagEventPage() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: FlagEventPageRequest) => api.adminFlagEventPage(input),
-    onSuccess: (_res, { id }) => {
-      invalidatePages(qc)
-      qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) })
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        invalidatePages(qc),
+        qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) }),
+      ]),
+    meta: {
+      successMessage: (page: FlagEventPageResponse, { flagged }: FlagEventPageRequest) =>
+        flagged ? `Flagged · ${pageName(page)}` : "Flag cleared",
     },
   })
 }
@@ -54,9 +68,13 @@ export function useUnpublishEventPage() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: UnpublishEventPageRequest) => api.adminUnpublishEventPage(input),
-    onSuccess: (_res, { id }) => {
-      invalidatePages(qc)
-      qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) })
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        invalidatePages(qc),
+        qc.invalidateQueries({ queryKey: queryKeys.events.detail(id) }),
+      ]),
+    meta: {
+      successMessage: (page: UnpublishEventPageResponse) => `Unpublished · ${pageName(page)}`,
     },
   })
 }
diff --git a/apps/admin/src/features/reports/plural.ts b/apps/admin/src/features/reports/plural.ts
new file mode 100644
index 0000000..06d1d4a
--- /dev/null
+++ b/apps/admin/src/features/reports/plural.ts
@@ -0,0 +1,3 @@
+export function pluralize(n: number, singular: string, plural = `${singular}s`): string {
+  return `${n} ${n === 1 ? singular : plural}`
+}
diff --git a/apps/admin/src/features/reports/report-chat.test.ts b/apps/admin/src/features/reports/report-chat.test.ts
new file mode 100644
index 0000000..c996582
--- /dev/null
+++ b/apps/admin/src/features/reports/report-chat.test.ts
@@ -0,0 +1,76 @@
+import { REACTION_EMOJIS, type AdminReportStatus, type ChatMessageDTO } from "@civfix/shared"
+import { describe, expect, it } from "vitest"
+
+import { reactionLabel, sortChatOldestFirst, systemLabel } from "./report-chat"
+
+function msg(over: Partial<ChatMessageDTO> & { id: string }): ChatMessageDTO {
+  return {
+    cleanupId: "c0c0c0c0-0000-4000-8000-00000000000c",
+    from: null,
+    body: null,
+    kind: "system",
+    createdAt: "2026-09-23T09:00:00.000Z",
+    reactions: [],
+    mentions: [],
+    ...over,
+  }
+}
+
+describe("systemLabel", () => {
+  it("names the status alone when there is no detail", () => {
+    expect(systemLabel(msg({ id: "a", system: { status: "acknowledged" } }))).toBe("System · Acknowledged")
+  })
+
+  it("prefers the note over the body", () => {
+    expect(
+      systemLabel(msg({ id: "a", system: { status: "in_progress", note: " Crew out ", body: "Body" } })),
+    ).toBe("System · In progress · Crew out")
+  })
+
+  it("falls back to the message body when the system body is blank", () => {
+    expect(
+      systemLabel(msg({ id: "a", body: "Crew dispatched", system: { status: "acknowledged", body: "  " } })),
+    ).toBe("System · Acknowledged · Crew dispatched")
+  })
+
+  it("shows a status newer than this build raw", () => {
+    expect(systemLabel(msg({ id: "a", system: { status: "archived" as AdminReportStatus } }))).toBe(
+      "System · archived",
+    )
+  })
+
+  it("is plain System without a status", () => {
+    expect(systemLabel(msg({ id: "a" }))).toBe("System")
+  })
+})
+
+describe("sortChatOldestFirst", () => {
+  it("orders by time, then by id for equal times, without mutating the input", () => {
+    const late = msg({ id: "c", createdAt: "2026-09-23T10:00:00.000Z" })
+    const tieB = msg({ id: "b", createdAt: "2026-09-23T09:00:00.000Z" })
+    const tieA = msg({ id: "a", createdAt: "2026-09-23T09:00:00.000Z" })
+    const input = [late, tieB, tieA]
+    expect(sortChatOldestFirst(input).map((m) => m.id)).toEqual(["a", "b", "c"])
+    expect(input.map((m) => m.id)).toEqual(["c", "b", "a"])
+  })
+
+  it("puts unparseable times last, ordered by id", () => {
+    const bad2 = msg({ id: "y", createdAt: "not a date" })
+    const bad1 = msg({ id: "x", createdAt: "also not a date" })
+    const ok = msg({ id: "z", createdAt: "2026-09-23T09:00:00.000Z" })
+    expect(sortChatOldestFirst([bad2, ok, bad1]).map((m) => m.id)).toEqual(["z", "x", "y"])
+  })
+})
+
+describe("reactionLabel", () => {
+  it("labels every reaction the contract defines", () => {
+    for (const emoji of REACTION_EMOJIS) expect(reactionLabel(emoji)).not.toBe(emoji)
+    expect(reactionLabel("laugh")).toBe("Laugh")
+    expect(reactionLabel("sad")).toBe("Sad")
+  })
+
+  it("shows a reaction newer than this build raw", () => {
+    expect(reactionLabel("rocket")).toBe("rocket")
+    expect(reactionLabel("toString")).toBe("toString")
+  })
+})
diff --git a/apps/admin/src/features/reports/report-chat.ts b/apps/admin/src/features/reports/report-chat.ts
new file mode 100644
index 0000000..a6dbb1f
--- /dev/null
+++ b/apps/admin/src/features/reports/report-chat.ts
@@ -0,0 +1,47 @@
+import {
+  ADMIN_REPORT_STATUS_LABELS,
+  type ChatMessageDTO,
+  type ReactionEmoji,
+} from "@civfix/shared"
+
+export function msgWhen(iso: string): string {
+  const d = new Date(iso)
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString()
+}
+
+export function systemLabel(msg: ChatMessageDTO): string {
+  const status = msg.system?.status
+  const detail = msg.system?.note?.trim() || msg.system?.body?.trim() || msg.body?.trim()
+  const head = status ? `System · ${ADMIN_REPORT_STATUS_LABELS[status] ?? status}` : "System"
+  return detail ? `${head} · ${detail}` : head
+}
+
+function chatTime(msg: ChatMessageDTO): number {
+  const t = Date.parse(msg.createdAt)
+  return Number.isNaN(t) ? Number.POSITIVE_INFINITY : t
+}
+
+export function sortChatOldestFirst(items: readonly ChatMessageDTO[]): ChatMessageDTO[] {
+  return [...items].sort((a, b) => {
+    const ta = chatTime(a)
+    const tb = chatTime(b)
+    if (ta !== tb) return ta < tb ? -1 : 1
+    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0
+  })
+}
+
+const REACTION_LABEL: Record<ReactionEmoji, string> = {
+  like: "Like",
+  heart: "Love",
+  celebrate: "Celebrate",
+  support: "Support",
+  insightful: "Insightful",
+  concerned: "Concerned",
+  laugh: "Laugh",
+  sad: "Sad",
+}
+
+// The summary's emoji is an open string on the wire, so a reaction newer than this build shows raw.
+export function reactionLabel(emoji: string): string {
+  return Object.hasOwn(REACTION_LABEL, emoji) ? REACTION_LABEL[emoji as ReactionEmoji] : emoji
+}
diff --git a/apps/admin/src/features/reports/report-id.ts b/apps/admin/src/features/reports/report-id.ts
new file mode 100644
index 0000000..894d04e
--- /dev/null
+++ b/apps/admin/src/features/reports/report-id.ts
@@ -0,0 +1,3 @@
+export function shortId(id: string): string {
+  return `#${id.slice(0, 8)}`
+}
diff --git a/apps/admin/src/features/reports/report-media.test.ts b/apps/admin/src/features/reports/report-media.test.ts
new file mode 100644
index 0000000..2db6c3f
--- /dev/null
+++ b/apps/admin/src/features/reports/report-media.test.ts
@@ -0,0 +1,44 @@
+import type { AdminReportDTO } from "@civfix/shared"
+import { describe, expect, it } from "vitest"
+
+import { reportMediaView } from "./report-media"
+
+type Media = AdminReportDTO["media"][number]
+
+const IMAGE_A: Media = { id: "m-a", kind: "image", url: "https://media.test/a.jpg", thumbUrl: "https://media.test/a-t.jpg" }
+const IMAGE_B: Media = { id: "m-b", kind: "image", url: "https://media.test/b.jpg" }
+const VIDEO: Media = { id: "m-v", kind: "video", url: "https://media.test/v.mp4", thumbUrl: "https://media.test/v.jpg" }
+
+describe("reportMediaView", () => {
+  it("has no preview, gallery or lightbox without media", () => {
+    expect(reportMediaView([], "Couch")).toEqual({ preview: null, gallery: [], lightboxImages: [] })
+  })
+
+  it("previews a lone image and leaves the gallery empty", () => {
+    const view = reportMediaView([IMAGE_A], "Couch")
+    expect(view.preview).toBe(IMAGE_A)
+    expect(view.gallery).toEqual([])
+    expect(view.lightboxImages).toEqual([{ id: "m-a", url: IMAGE_A.url, alt: "Photo on Couch" }])
+  })
+
+  it("previews the image and keeps the video in the gallery", () => {
+    const view = reportMediaView([VIDEO, IMAGE_A], "Couch")
+    expect(view.preview).toBe(IMAGE_A)
+    expect(view.gallery).toEqual([VIDEO])
+    expect(view.lightboxImages.map((i) => i.id)).toEqual(["m-a"])
+  })
+
+  it("never previews a video, so a video-only report keeps it reachable in the gallery", () => {
+    const view = reportMediaView([VIDEO], "Couch")
+    expect(view.preview).toBeNull()
+    expect(view.gallery).toEqual([VIDEO])
+    expect(view.lightboxImages).toEqual([])
+  })
+
+  it("previews the first image and opens the second at its lightbox index", () => {
+    const view = reportMediaView([IMAGE_A, IMAGE_B], "Couch")
+    expect(view.preview).toBe(IMAGE_A)
+    expect(view.gallery).toEqual([IMAGE_B])
+    expect(view.lightboxImages.findIndex((i) => i.id === IMAGE_B.id)).toBe(1)
+  })
+})
diff --git a/apps/admin/src/features/reports/report-media.ts b/apps/admin/src/features/reports/report-media.ts
new file mode 100644
index 0000000..84dd7e4
--- /dev/null
+++ b/apps/admin/src/features/reports/report-media.ts
@@ -0,0 +1,24 @@
+import type { AdminReportDTO } from "@civfix/shared"
+
+import type { LightboxImage } from "@/components/shared/lightbox"
+
+type ReportMedia = AdminReportDTO["media"][number]
+
+export interface ReportMediaView {
+  preview: ReportMedia | null
+  gallery: ReportMedia[]
+  lightboxImages: LightboxImage[]
+}
+
+// Only an image may be the preview: the preview face opens the lightbox, which shows images only, so a
+// video placed there would have no way to be played.
+export function reportMediaView(media: readonly ReportMedia[], title: string): ReportMediaView {
+  const preview = media.find((m) => m.kind === "image") ?? null
+  return {
+    preview,
+    gallery: media.filter((m) => m.id !== preview?.id),
+    lightboxImages: media
+      .filter((m) => m.kind === "image")
+      .map((m) => ({ id: m.id, url: m.url, alt: `Photo on ${title}` })),
+  }
+}
diff --git a/apps/admin/src/features/reports/reports-page.test.tsx b/apps/admin/src/features/reports/reports-page.test.tsx
index bb981d1..e1d7d75 100644
--- a/apps/admin/src/features/reports/reports-page.test.tsx
+++ b/apps/admin/src/features/reports/reports-page.test.tsx
@@ -1,19 +1,24 @@
 import { act, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import type {
-  AdminReportDTO,
-  AdminReportListItemDTO,
-  AdminReportListResponse,
-  ChatHistoryResponse,
+import {
+  AppError,
+  ErrorCode,
+  type AdminReportDTO,
+  type AdminReportListItemDTO,
+  type AdminReportListResponse,
+  type ChatHistoryResponse,
+  type ChatMessageDTO,
 } from "@civfix/shared"
-import { describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
 import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
 import { detailCard } from "@/test/panes"
+import { DialogHost } from "@/components/shared/dialog"
 import { ReportsPage } from "@/features/reports/reports-page"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -294,3 +299,457 @@ describe("ReportsPage", () => {
     expect(apiMock.getAdminReport).toHaveBeenCalledWith({ id: OLD.id })
   })
 })
+
+function renderPage(focusId: string | null = null) {
+  return renderWithQuery(
+    <>
+      <ReportsPage focusId={focusId} />
+      <DialogHost />
+    </>,
+  )
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => {
+    resolve = r
+  })
+  return { promise, resolve }
+}
+
+const RITA = {
+  id: "0a0a0a0a-0000-4000-8000-00000000000a",
+  name: "Rita Gomez",
+  handle: "@rita",
+  followers: 0,
+  following: 0,
+  isFollowing: false,
+}
+
+function chatMessage(over: Partial<ChatMessageDTO> & { id: string }): ChatMessageDTO {
+  return {
+    cleanupId: "c0c0c0c0-0000-4000-8000-00000000000c",
+    roomKind: "report",
+    from: RITA,
+    body: "Still there this morning",
+    kind: "text",
+    createdAt: "2026-09-23T09:00:00.000Z",
+    reactions: [],
+    mentions: [],
+    ...over,
+  }
+}
+
+describe("ReportsPage correctness and accessibility", () => {
+  beforeEach(() => {
+    useUiStore.setState({ page: "reports", focusId: null, toast: null })
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+    return () => {
+      scrollTo.mockRestore()
+      window.history.replaceState(null, "", "#/")
+    }
+  })
+
+  it("selects a row from the keyboard with Enter or Space and marks it current", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    const tagRow = within(listCard()).getByRole("button", { name: /Tag on the underpass/ })
+    tagRow.focus()
+    await user.keyboard("{Enter}")
+    expect(await within(detailCard()).findByRole("heading", { name: TAG.title })).toBeInTheDocument()
+    expect(tagRow).toHaveAttribute("aria-current", "true")
+
+    const couchRow = within(listCard()).getByRole("button", { name: /Couch dumped on sidewalk/ })
+    expect(couchRow).not.toHaveAttribute("aria-current")
+    couchRow.focus()
+    await user.keyboard(" ")
+    expect(await within(detailCard()).findByRole("heading", { name: COUCH.title })).toBeInTheDocument()
+  })
+
+  it("opens the reporter profile from the keyboard inside a row", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    within(listCard()).getByRole("button", { name: "Rita" }).focus()
+    await user.keyboard("{Enter}")
+
+    expect(useUiStore.getState()).toMatchObject({ page: "users", focusId: "u-rita" })
+  })
+
+  it("names the flagged marker for assistive tech", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    renderPage()
+    await screen.findByText(TAG.title)
+    expect(within(listCard()).getByRole("img", { name: "Flagged" })).toBeInTheDocument()
+  })
+
+  it("labels the search box and the email fields", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH]))
+    mockDetails(COUCH)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: COUCH.title })
+
+    expect(screen.getByRole("textbox", { name: "Search reports" })).toBeInTheDocument()
+    const followup = within(card).getByRole("textbox", { name: "Message to the city" })
+    expect(followup).toHaveAttribute("maxlength", "4000")
+
+    await userEvent.click(within(card).getByRole("button", { name: /Verify and send to city/ }))
+    const note = within(card).getByRole("textbox", { name: "Note to include in the email" })
+    expect(note).toHaveAttribute("maxlength", "4000")
+  })
+
+  it("still sends a verified report to the city when the operator opens another report mid-approval", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    const verdict = deferred<{ ok: true }>()
+    apiMock.setReportVerdict.mockReturnValue(verdict.promise)
+    apiMock.routeReport.mockResolvedValue({
+      ok: true,
+      threadId: "t-1",
+      routedTo: "works@oaklandca.gov",
+    })
+    const user = userEvent.setup()
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: COUCH.title })
+
+    await user.click(within(card).getByRole("button", { name: /Verify and send to city/ }))
+    await user.click(within(card).getByRole("button", { name: /Verify and send to city/ }))
+    await user.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Verify and send" }))
+    await waitFor(() =>
+      expect(apiMock.setReportVerdict).toHaveBeenCalledWith({ id: COUCH.id, verdict: "approved" }),
+    )
+
+    await user.click(within(listCard()).getByText(TAG.title))
+    await within(detailCard()).findByRole("heading", { name: TAG.title })
+    await act(async () => {
+      verdict.resolve({ ok: true })
+    })
+
+    await waitFor(() => expect(apiMock.routeReport).toHaveBeenCalledWith({ id: COUCH.id }))
+  })
+
+  it("does not jump to another report after the selected one is removed", async () => {
+    let removed = false
+    apiMock.listAdminReports.mockImplementation(async () => page(removed ? [TAG] : [COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    apiMock.removeReport.mockImplementation(async () => {
+      removed = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Remove report/ }))
+    await user.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Remove" }))
+
+    expect(await within(detailCard()).findByText("No report selected")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(within(listCard()).queryByText(COUCH.title)).not.toBeInTheDocument(),
+    )
+    expect(within(detailCard()).getByText("No report selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: TAG.title })).not.toBeInTheDocument()
+  })
+
+  it("clears a pinned report once it is removed instead of showing it as not found", async () => {
+    const OLD = listItem({
+      id: "r9f9f9f9-0000-4000-8000-000000000009",
+      title: "Old broken hydrant",
+      category: "water",
+    })
+    let removed = false
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    apiMock.getAdminReport.mockImplementation(async ({ id }: { id: string }) => {
+      if (id === OLD.id) {
+        if (removed) throw new AppError(ErrorCode.NOT_FOUND, "Report not found")
+        return detail(OLD)
+      }
+      return detail(id === TAG.id ? TAG : COUCH)
+    })
+    apiMock.removeReport.mockImplementation(async () => {
+      removed = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage(OLD.id)
+    await within(detailCard()).findByRole("heading", { name: OLD.title })
+    expect(await within(listCard()).findByText("Linked report")).toBeInTheDocument()
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Remove report/ }))
+    await user.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Remove" }))
+
+    expect(await within(detailCard()).findByText("No report selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByText("Report not found")).not.toBeInTheDocument()
+    expect(within(listCard()).queryByText("Linked report")).not.toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: COUCH.title })).not.toBeInTheDocument()
+  })
+
+  it("clears a report that a verdict drops from the Needs verification list, without opening another", async () => {
+    let rejected = false
+    apiMock.listAdminReports.mockImplementation(async () => page(rejected ? [TAG] : [COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    apiMock.setReportVerdict.mockImplementation(async () => {
+      rejected = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Reject/ }))
+    await user.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Reject" }))
+
+    await waitFor(() =>
+      expect(within(listCard()).queryByText(COUCH.title)).not.toBeInTheDocument(),
+    )
+    expect(await within(detailCard()).findByText("No report selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: TAG.title })).not.toBeInTheDocument()
+  })
+
+  it("still confirms a Reject when the list refetch drops the report before its detail refetch lands", async () => {
+    let rejected = false
+    apiMock.listAdminReports.mockImplementation(async () => page(rejected ? [TAG] : [COUCH, TAG]))
+    mockDetails(COUCH, TAG)
+    const heldDetail = deferred<AdminReportDTO>()
+    apiMock.getAdminReport
+      .mockResolvedValueOnce(detail(COUCH))
+      .mockImplementation(() => heldDetail.promise)
+    apiMock.setReportVerdict.mockImplementation(async () => {
+      rejected = true
+      return { ok: true }
+    })
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    await user.click(within(detailCard()).getByRole("button", { name: /Reject/ }))
+    await user.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Reject" }))
+
+    expect(await within(detailCard()).findByText("No report selected")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({ text: "#r1a2b3c4 · rejected", tone: "ok" }),
+    )
+    await act(async () => {
+      heldDetail.resolve(detail(COUCH))
+    })
+  })
+
+  it("labels a selection that left the filter as selected, not linked", async () => {
+    apiMock.listAdminReports.mockImplementation(async (params: { filter?: string }) =>
+      params.filter === "completed" ? page([COUCH]) : page([COUCH, TAG]),
+    )
+    mockDetails(COUCH, TAG)
+    const user = userEvent.setup()
+    renderPage()
+    await within(detailCard()).findByRole("heading", { name: COUCH.title })
+
+    await user.click(within(listCard()).getByText(TAG.title))
+    await within(detailCard()).findByRole("heading", { name: TAG.title })
+    await user.click(screen.getByRole("button", { name: /^Completed/ }))
+
+    expect(await within(listCard()).findByText("Selected report")).toBeInTheDocument()
+    expect(within(listCard()).queryByText("Linked report")).not.toBeInTheDocument()
+    expect(within(detailCard()).getByRole("heading", { name: TAG.title })).toBeInTheDocument()
+  })
+
+  it("shows why Send is blocked as visible text tied to the button", async () => {
+    const SENT = listItem({ id: "r3c3c3c3-0000-4000-8000-000000000003", title: "Pothole on 40th" })
+    apiMock.listAdminReports.mockResolvedValue(page([SENT]))
+    apiMock.getAdminReport.mockResolvedValue({
+      ...detail(SENT),
+      outreach: {
+        status: "sent",
+        threadId: "t-9",
+        routedTo: "works@oaklandca.gov",
+        routedAt: "2026-09-22T10:00:00.000Z",
+      },
+    })
+    apiMock.adminReportMessages.mockResolvedValue(NO_CHAT)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: SENT.title })
+
+    const reason = "This report was already sent. Resend it from the Mail thread."
+    expect(within(card).getByText(reason)).toBeInTheDocument()
+    expect(within(card).getByRole("button", { name: /Already sent/ })).toHaveAccessibleDescription(reason)
+  })
+
+  it("shows why a follow-up is blocked before the first send", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH]))
+    mockDetails(COUCH)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: COUCH.title })
+
+    const reason = "Send the report to the city first. A follow-up goes on that conversation."
+    expect(within(card).getByText(reason)).toBeInTheDocument()
+    expect(within(card).getByRole("button", { name: "Send to city" })).toHaveAccessibleDescription(reason)
+  })
+
+  it("does not offer Reject again on an already rejected report", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH]))
+    apiMock.getAdminReport.mockResolvedValue({ ...detail(COUCH), verificationVerdict: "rejected" })
+    apiMock.adminReportMessages.mockResolvedValue(NO_CHAT)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: COUCH.title })
+
+    const reject = within(card).getByRole("button", { name: /Reject/ })
+    expect(reject).toBeDisabled()
+    expect(reject).toHaveAccessibleDescription("This report is already rejected.")
+    expect(within(card).getByText("This report is already rejected.")).toBeInTheDocument()
+  })
+
+  it("links the video of a video-only report instead of hiding it behind the preview", async () => {
+    const CLIP = listItem({
+      id: "r4d4d4d4-0000-4000-8000-000000000004",
+      title: "Dumping caught on video",
+      hasPhoto: true,
+    })
+    apiMock.listAdminReports.mockResolvedValue(page([CLIP]))
+    apiMock.getAdminReport.mockResolvedValue({
+      ...detail(CLIP),
+      media: [
+        {
+          id: "m-video",
+          kind: "video",
+          url: "https://media.test/clip.mp4",
+          thumbUrl: "https://media.test/clip.jpg",
+        },
+      ],
+    })
+    apiMock.adminReportMessages.mockResolvedValue(NO_CHAT)
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: CLIP.title })
+
+    expect(within(card).getByRole("link", { name: "Open full media in a new tab" })).toHaveAttribute(
+      "href",
+      "https://media.test/clip.mp4",
+    )
+    expect(within(card).queryByText("Reporter photo")).not.toBeInTheDocument()
+  })
+
+  it("words the flag toast from the refetched report, not the cached one", async () => {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH]))
+    mockDetails(COUCH)
+    apiMock.flagReport.mockResolvedValue({ ok: true })
+    const user = userEvent.setup()
+    renderPage()
+    const card = detailCard()
+    await within(card).findByRole("heading", { name: COUCH.title })
+
+    // Another operator flagged it first, so this toggle cleared the flag and the refetch says so.
+    await user.click(within(card).getByRole("button", { name: "Flag" }))
+
+    await waitFor(() => expect(useUiStore.getState().toast?.text).toBe("#r1a2b3c4 · flag cleared"))
+  })
+})
+
+describe("ReportsPage chat", () => {
+  beforeEach(() => {
+    useUiStore.setState({ page: "reports", focusId: null, toast: null })
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+    return () => {
+      scrollTo.mockRestore()
+      window.history.replaceState(null, "", "#/")
+    }
+  })
+
+  function renderWithChat(chat: (params: { before?: string }) => ChatHistoryResponse) {
+    apiMock.listAdminReports.mockResolvedValue(page([COUCH]))
+    mockDetails(COUCH)
+    apiMock.adminReportMessages.mockImplementation(async (params: { before?: string }) => chat(params))
+    renderPage()
+    return detailCard()
+  }
+
+  it("falls back to the message body when a system event carries a blank body", async () => {
+    const card = renderWithChat(() => ({
+      items: [
+        chatMessage({
+          id: "0b0b0b0b-0000-4000-8000-00000000000b",
+          kind: "system",
+          from: null,
+          body: "Crew dispatched",
+          system: { status: "acknowledged", body: "   " },
+        }),
+      ],
+      nextCursor: null,
+    }))
+    expect(await within(card).findByText(/Crew dispatched/)).toBeInTheDocument()
+  })
+
+  it("labels every reaction the contract knows", async () => {
+    const card = renderWithChat(() => ({
+      items: [
+        chatMessage({
+          id: "0d0d0d0d-0000-4000-8000-00000000000d",
+          reactions: [
+            { emoji: "laugh", count: 2, mine: false },
+            { emoji: "sad", count: 1, mine: false },
+          ],
+        }),
+      ],
+      nextCursor: null,
+    }))
+    expect(await within(card).findByText("Laugh 2")).toBeInTheDocument()
+    expect(within(card).getByText("Sad 1")).toBeInTheDocument()
+  })
+
+  it("opens the author's profile with Space", async () => {
+    const card = renderWithChat(() => ({
+      items: [chatMessage({ id: "0e0e0e0e-0000-4000-8000-00000000000e" })],
+      nextCursor: null,
+    }))
+    const user = userEvent.setup()
+    const author = await within(card).findByRole("button", { name: "Rita Gomez" })
+    author.focus()
+    await user.keyboard(" ")
+    expect(useUiStore.getState()).toMatchObject({ page: "users", focusId: RITA.id })
+  })
+
+  it("names Post without reading the shortcut glyphs and declares the shortcut on the composer", async () => {
+    const card = renderWithChat(() => ({ items: [], nextCursor: null }))
+    await within(card).findByText("No messages yet")
+    expect(within(card).getByRole("button", { name: "Post" })).toBeInTheDocument()
+    expect(within(card).getByRole("textbox", { name: "Message the report chat" })).toHaveAttribute(
+      "aria-keyshortcuts",
+      "Meta+Enter Control+Enter",
+    )
+  })
+
+  it("loads older messages past the first page", async () => {
+    const OLDER = chatMessage({
+      id: "0f0f0f0f-0000-4000-8000-00000000000f",
+      body: "First sighting last week",
+      createdAt: "2026-09-16T09:00:00.000Z",
+    })
+    const NEWER = chatMessage({ id: "1a1a1a1a-0000-4000-8000-00000000001a", body: "Still there" })
+    const card = renderWithChat(({ before }) =>
+      before === OLDER.id ? { items: [OLDER], nextCursor: null } : { items: [NEWER], nextCursor: OLDER.id },
+    )
+    await within(card).findByText("Still there")
+
+    await userEvent.click(within(card).getByRole("button", { name: "Load older messages" }))
+
+    expect(await within(card).findByText("First sighting last week")).toBeInTheDocument()
+    expect(apiMock.adminReportMessages).toHaveBeenLastCalledWith({
+      id: COUCH.id,
+      limit: 50,
+      before: OLDER.id,
+    })
+    expect(within(card).queryByRole("button", { name: "Load older messages" })).not.toBeInTheDocument()
+  })
+})
diff --git a/apps/admin/src/features/reports/reports-page.tsx b/apps/admin/src/features/reports/reports-page.tsx
index 944b184..f917cd2 100644
--- a/apps/admin/src/features/reports/reports-page.tsx
+++ b/apps/admin/src/features/reports/reports-page.tsx
@@ -7,6 +7,8 @@ import {
   ADMIN_REPORT_STATUS_TRANSITIONS,
   MESSAGE_BODY_MAX,
   REPORT_CATEGORY_LABELS,
+  RouteReportRequestSchema,
+  SendFollowupRequestSchema,
   type AdminReportCounts,
   type AdminReportDTO,
   type AdminReportListItemDTO,
@@ -21,12 +23,23 @@ import { Icons, type IconComponent } from "@/components/icons"
 import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-primitives"
 import { LoadingState, ErrorState } from "@/components/shared/data-states"
 import { confirmDialog } from "@/components/shared/dialog"
+import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
 import { LightboxSync, openLightbox, type LightboxImage } from "@/components/shared/lightbox"
 import { categoryCssVar, categoryPinSrc } from "@/lib/category"
 import { reportStatusView } from "@/lib/report-status"
 import { eventKindView } from "@/lib/event-kind"
 import { getReporterProfileId } from "@/features/reports/reporter-navigation"
-import { routeActionFor, routeSendLabel, type RouteAction } from "@/features/reports/route-action"
+import { pluralize } from "@/features/reports/plural"
+import { shortId } from "@/features/reports/report-id"
+import {
+  msgWhen,
+  reactionLabel,
+  sortChatOldestFirst,
+  systemLabel,
+} from "@/features/reports/report-chat"
+import { reportMediaView } from "@/features/reports/report-media"
+import { sendPanelView } from "@/features/reports/send-panel"
+import { SubmitShortcutHint, SUBMIT_KEYSHORTCUTS } from "@/features/reports/submit-shortcut"
 import { useDebounced } from "@/hooks/use-debounced"
 import {
   useFlagReport,
@@ -51,6 +64,9 @@ const LeafletMap = dynamic(() => import("@/components/map/leaflet-map").then((m)
   loading: () => <div className="pi-map-canvas" aria-busy="true" />,
 })
 
+const ROUTE_NOTE_MAX = RouteReportRequestSchema.shape.note.unwrap().maxLength ?? undefined
+const FOLLOWUP_MAX = SendFollowupRequestSchema.shape.body.maxLength ?? undefined
+
 type ReportFilter = "needs_verification" | "in_progress" | "completed" | "flagged" | "all"
 
 const FILTER_COUNT_KEY: Record<ReportFilter, keyof AdminReportCounts> = {
@@ -97,14 +113,6 @@ function initials(name: string): string {
     .toUpperCase()
 }
 
-function shortId(id: string): string {
-  return `#${id.slice(0, 8)}`
-}
-
-function pluralize(n: number, singular: string, plural = `${singular}s`): string {
-  return `${n} ${n === 1 ? singular : plural}`
-}
-
 function eventDate(iso: string): string {
   const d = new Date(iso)
   if (Number.isNaN(d.getTime())) return iso
@@ -134,53 +142,10 @@ function LinkedEventCard({ event, onOpen }: { event: LinkedEventRef; onOpen: ()
   )
 }
 
-const REACTION_LABEL: Record<string, string> = {
-  like: "Like",
-  heart: "Love",
-  celebrate: "Celebrate",
-  support: "Support",
-  insightful: "Insightful",
-  concerned: "Concerned",
-}
-
-function msgWhen(iso: string): string {
-  const d = new Date(iso)
-  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString()
-}
-
-function routeButtonLabel(action: RouteAction, verdictApproved: boolean): string {
-  if (action.kind === "already_sent") {
-    return action.routedAt ? `Already sent · ${msgWhen(action.routedAt)}` : "Already sent"
-  }
-  if (action.kind === "resend") return "Send again to jurisdiction"
-  return routeSendLabel(verdictApproved)
-}
-
-const VERDICT_PILL = {
-  approved: { cls: "status-ok", label: "Approved" },
-  rejected: { cls: "status-flag", label: "Rejected" },
-  unreviewed: { cls: "status-new", label: "Not yet reviewed" },
-} as const
-
-function verdictPill(verdict: AdminReportDTO["verificationVerdict"], approvedLocally: boolean) {
-  if (verdict === "approved" || approvedLocally) return VERDICT_PILL.approved
-  if (verdict === "rejected") return VERDICT_PILL.rejected
-  return VERDICT_PILL.unreviewed
-}
-
 function chatAuthorName(msg: ChatMessageDTO): string {
   return msg.from?.name ?? "Removed"
 }
 
-function systemLabel(msg: ChatMessageDTO): string {
-  const status = msg.system?.status
-  const note = msg.system?.note?.trim()
-  const body = msg.system?.body?.trim() ?? msg.body?.trim()
-  const head = status ? `System · ${ADMIN_REPORT_STATUS_LABELS[status] ?? status}` : "System"
-  const detail = note || body
-  return detail ? `${head} — ${detail}` : head
-}
-
 /** A sender-less status event (report status changes, etc.). Read-only; can't be deleted. */
 function ChatSystemRow({ msg }: { msg: ChatMessageDTO }) {
   return (
@@ -229,24 +194,17 @@ function ChatMessageRow({
       <div className="dsc-msg-body">
         <div className="dsc-msg-top">
           {authorId && !removed ? (
-            <span
+            <button
+              type="button"
               className="dsc-msg-who lnk-inline"
-              role="button"
-              tabIndex={0}
               title={`Open ${authorName}'s profile`}
               onClick={(e) => {
                 e.stopPropagation()
                 nav("users", authorId)
               }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.stopPropagation()
-                  nav("users", authorId)
-                }
-              }}
             >
               {authorName}
-            </span>
+            </button>
           ) : (
             <span className="dsc-msg-who">{authorName}</span>
           )}
@@ -313,7 +271,7 @@ function ChatMessageRow({
             <span className="dsc-msg-reactions">
               {reactions.map((r) => (
                 <span key={r.emoji} className={`dsc-reaction ${r.mine ? "mine" : ""}`}>
-                  {REACTION_LABEL[r.emoji] ?? r.emoji} {r.count}
+                  {reactionLabel(r.emoji)} {r.count}
                 </span>
               ))}
             </span>
@@ -353,7 +311,6 @@ function ReportDiscussion({
   const q = useReportChatHistory(reportId)
   const removeMsg = useRemoveReportMessage()
   const sendMsg = useSendReportMessage()
-  const toast = useToast()
   const nav = useNav()
   const [draft, setDraft] = React.useState("")
 
@@ -365,37 +322,20 @@ function ReportDiscussion({
       confirmLabel: "Remove",
     })
     if (!ok) return
-    removeMsg.mutate(
-      { id: reportId, messageId: msg.id },
-      { onSuccess: () => toast("Message removed") },
-    )
+    removeMsg.mutate({ id: reportId, messageId: msg.id })
   }
 
   const onSend = () => {
     const body = draft.trim()
     if (!body || sendMsg.isPending) return
-    sendMsg.mutate(
-      { id: reportId, body },
-      {
-        onSuccess: () => {
-          setDraft("")
-          toast("Message posted to the report chat")
-        },
-      },
-    )
+    sendMsg.mutate({ id: reportId, body }, { onSuccess: () => setDraft("") })
   }
 
-  // Oldest → newest, matching the order neighbors see in the chat.
-  const items = React.useMemo(() => {
-    const list = [...(q.data?.items ?? [])]
-    list.sort((a, b) => {
-      const ta = Date.parse(a.createdAt)
-      const tb = Date.parse(b.createdAt)
-      if (ta !== tb) return ta - tb
-      return a.id < b.id ? -1 : a.id > b.id ? 1 : 0
-    })
-    return list
-  }, [q.data])
+  // Oldest first, matching the order neighbors see in the chat.
+  const items = React.useMemo(
+    () => sortChatOldestFirst(q.data?.pages.flatMap((p) => p.items) ?? []),
+    [q.data],
+  )
 
   return (
     <div className="sub">
@@ -404,6 +344,7 @@ function ReportDiscussion({
         {!q.isLoading && !q.isError && (
           <span className="rep-confirms" style={{ marginLeft: "auto" }}>
             <Icons.MessageSquare size={12} /> {items.length}
+            {q.hasNextPage ? "+" : ""}
           </span>
         )}
       </div>
@@ -420,6 +361,16 @@ function ReportDiscussion({
           />
         ) : (
           <div className="dsc-list">
+            {q.hasNextPage && (
+              <button
+                type="button"
+                className="btn sm ghost full"
+                disabled={q.isFetchingNextPage}
+                onClick={() => q.fetchNextPage()}
+              >
+                {q.isFetchingNextPage ? "Loading…" : "Load older messages"}
+              </button>
+            )}
             {items.map((m) =>
               m.kind === "system" || m.from == null ? (
                 <ChatSystemRow key={m.id} msg={m} />
@@ -449,6 +400,7 @@ function ReportDiscussion({
             if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) onSend()
           }}
           aria-label="Message the report chat"
+          aria-keyshortcuts={SUBMIT_KEYSHORTCUTS}
         />
         <div className="dsc-composer-foot">
           {hasCityContact && (
@@ -463,7 +415,7 @@ function ReportDiscussion({
             style={!draft.trim() ? { opacity: 0.45, cursor: "not-allowed" } : undefined}
             onClick={onSend}
           >
-            <Icons.Send size={13} /> Post <span className="kbdhint">⌘⏎</span>
+            <Icons.Send size={13} /> Post <SubmitShortcutHint />
           </button>
         </div>
       </div>
@@ -487,7 +439,19 @@ const ReportRow = React.memo(function ReportRow({
   const thumb = item.thumbnailUrl !== brokenThumb ? item.thumbnailUrl : null
   const categoryLabel = REPORT_CATEGORY_LABELS[item.category]
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={() => onSelect(item.id)}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={() => onSelect(item.id)}
+      onKeyDown={(e) => {
+        // A key pressed on the nested reporter link bubbles here; it must stay that link's activation.
+        if (e.target !== e.currentTarget || !isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onSelect(item.id)
+      }}
+    >
       <div
         className={`leading ${thumb ? "has-thumb" : "has-pin"}`}
         style={{ ["--cat" as string]: categoryCssVar(item.category) }}
@@ -513,7 +477,7 @@ const ReportRow = React.memo(function ReportRow({
         <div className="top">
           <span className="title">{item.title}</span>
           {item.flagged && (
-            <span className="rep-flag-dot" title="Flagged">
+            <span className="rep-flag-dot" role="img" aria-label="Flagged" title="Flagged">
               <Icons.Flag size={10} />
             </span>
           )}
@@ -601,6 +565,9 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
   const [routeOpen, setRouteOpen] = React.useState(false)
   const [routeNote, setRouteNote] = React.useState("")
   const [approvedLocally, setApprovedLocally] = React.useState(false)
+  const routeBlockedId = React.useId()
+  const rejectBlockedId = React.useId()
+  const followupBlockedId = React.useId()
 
   if (q.isLoading) return <LoadingState label="Loading report..." />
   if (q.isError) return <ErrorState error={q.error} onRetry={() => q.refetch()} />
@@ -611,49 +578,22 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
   const outreachView = OUTREACH_VIEW[report.outreach.status] ?? OUTREACH_VIEW.not_sent
   const OutreachIco = outreachView.icon
   const canCity = !!report.city.contact
-  const routeAction = routeActionFor(report)
+  const panel = sendPanelView(report, approvedLocally)
   // A status newer than this build arrives unvalidated; offer no transition rather than guess one.
   const statusActions = ADMIN_REPORT_STATUS_TRANSITIONS[report.status] ?? []
   const reporterProfileId = getReporterProfileId(report.reporter.id)
-  const verdictApproved = report.verificationVerdict === "approved" || approvedLocally
-  const verdictView = verdictPill(report.verificationVerdict, approvedLocally)
+  const { routeAction, approvesOnSend, canApproveHere, followupBlocked } = panel
   const sendAttempted = report.outreach.routedAt !== null
-  const approvesOnSend = routeAction.kind === "send" && !verdictApproved
-  const canApproveHere = !verdictApproved && !approvesOnSend
-  const followupBlocked = !canCity
-    ? "No city contact on file"
-    : report.outreach.threadId === null
-      ? "Send the report to the city first — a follow-up goes on that conversation"
-      : null
   const canSend = followupBlocked === null
   const pin = categoryPinSrc(report.category)
-  const previewMedia = report.media.find((m) => m.kind === "image") ?? report.media[0]
-  const photoUrl = previewMedia
-    ? previewMedia.kind === "image"
-      ? (previewMedia.thumbUrl ?? previewMedia.url)
-      : (previewMedia.thumbUrl ?? null)
-    : null
-  const galleryMedia = previewMedia
-    ? report.media.filter((m) => m.id !== previewMedia?.id)
-    : report.media
-  const lightboxImages: LightboxImage[] = report.media
-    .filter((m) => m.kind === "image")
-    .map((m) => ({ id: m.id, url: m.url, alt: `Photo on ${report.title}` }))
+  const { preview, gallery: galleryMedia, lightboxImages } = reportMediaView(report.media, report.title)
+  const photoUrl = preview ? (preview.thumbUrl ?? preview.url) : null
   const lightboxIndex = (id: string) => lightboxImages.findIndex((i) => i.id === id)
-  const previewIndex = previewMedia ? lightboxIndex(previewMedia.id) : -1
 
   const send = () => {
     const body = text.trim()
     if (!body || !canSend) return
-    followup.mutate(
-      { id: report.id, to: "city", body },
-      {
-        onSuccess: () => {
-          setText("")
-          toast("Follow-up sent to city")
-        },
-      },
-    )
+    followup.mutate({ id: report.id, to: "city", body }, { onSuccess: () => setText("") })
   }
 
   const openRoute = () => {
@@ -661,20 +601,13 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
     setRouteOpen(true)
   }
 
-  const routeToJurisdiction = (note: string) => {
-    route.mutate(
-      {
-        id: report.id,
-        ...(note ? { note } : {}),
-      },
-      {
-        onSuccess: (res) => {
-          setRouteOpen(false)
-          setRouteNote("")
-          toast(`Sent to ${res.routedTo}`)
-        },
-      },
-    )
+  // Awaited rather than chained through per-call callbacks: those are dropped once the operator opens
+  // another report (this pane remounts), which would leave a report approved but never sent.
+  const routeToJurisdiction = async (note: string) => {
+    const res = await route.mutateAsync({ id: report.id, ...(note ? { note } : {}) })
+    setRouteOpen(false)
+    setRouteNote("")
+    toast(`Sent to ${res.routedTo}`)
   }
 
   const sendToJurisdiction = async () => {
@@ -689,19 +622,15 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
       confirmLabel: approvesOnSend ? "Verify and send" : "Send",
     })
     if (!ok) return
-    if (!approvesOnSend) {
-      routeToJurisdiction(note)
-      return
+    try {
+      if (approvesOnSend) {
+        await verdict.mutateAsync({ id: report.id, verdict: "approved" })
+        setApprovedLocally(true)
+      }
+      await routeToJurisdiction(note)
+    } catch {
+      // The query client already toasted the failure; a failed approve must stop before the send.
     }
-    verdict.mutate(
-      { id: report.id, verdict: "approved" },
-      {
-        onSuccess: () => {
-          setApprovedLocally(true)
-          routeToJurisdiction(note)
-        },
-      },
-    )
   }
 
   const onApprove = async () => {
@@ -720,12 +649,7 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
     if (!ok) return
     verdict.mutate(
       { id: report.id, verdict: "approved" },
-      {
-        onSuccess: () => {
-          setApprovedLocally(true)
-          toast(`${shortId(report.id)} · approved`)
-        },
-      },
+      { onSuccess: () => setApprovedLocally(true) },
     )
   }
 
@@ -739,24 +663,11 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
       })
       if (!ok) return
     }
-    setStatus.mutate(
-      { id: report.id, status },
-      { onSuccess: () => toast(`${shortId(report.id)} · status → ${ADMIN_REPORT_STATUS_LABELS[status]}`) },
-    )
+    setStatus.mutate({ id: report.id, status })
   }
 
   const onFlag = () => {
-    flag.mutate(
-      { id: report.id },
-      {
-        onSuccess: () =>
-          toast(
-            report.flagged
-              ? `${shortId(report.id)} · flag cleared`
-              : `${shortId(report.id)} · flagged for review`,
-          ),
-      },
-    )
+    flag.mutate({ id: report.id })
   }
 
   const onRemove = async () => {
@@ -767,15 +678,7 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
       confirmLabel: "Remove",
     })
     if (!ok) return
-    remove.mutate(
-      { id: report.id },
-      {
-        onSuccess: () => {
-          toast(`${shortId(report.id)} · report removed`)
-          onRemoved(report.id)
-        },
-      },
-    )
+    remove.mutate({ id: report.id }, { onSuccess: () => onRemoved(report.id) })
   }
 
   const onReject = async () => {
@@ -790,12 +693,7 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
     if (!ok) return
     verdict.mutate(
       { id: report.id, verdict: "rejected" },
-      {
-        onSuccess: () => {
-          setApprovedLocally(false)
-          toast(`${shortId(report.id)} · rejected`)
-        },
-      },
+      { onSuccess: () => setApprovedLocally(false) },
     )
   }
 
@@ -884,13 +782,15 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
               <div className="rep-media">
                 <LightboxSync images={lightboxImages} />
                 {report.hasPhoto &&
-                  (previewIndex >= 0 ? (
+                  (preview ? (
                     <button
                       type="button"
                       className="rep-photo rep-photo-open"
                       style={{ ["--cat" as string]: categoryCssVar(report.category) }}
                       title="Expand this photo"
-                      onClick={() => openLightbox(lightboxImages, previewIndex, refreshMedia)}
+                      onClick={() =>
+                        openLightbox(lightboxImages, lightboxIndex(preview.id), refreshMedia)
+                      }
                     >
                       <ReportPhotoFace
                         photoUrl={photoUrl}
@@ -1145,8 +1045,8 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
           <div className="sub">
             <div className="sub-head">
               Send to jurisdiction
-              <span className={`pill tight ${verdictView.cls}`} style={{ marginLeft: "auto" }}>
-                {verdictView.label}
+              <span className={`pill tight ${panel.verdictPill.cls}`} style={{ marginLeft: "auto" }}>
+                {panel.verdictPill.label}
               </span>
             </div>
             <div className="sub-body">
@@ -1182,23 +1082,22 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
                   )}
                 </>
               ) : !routeOpen ? (
-                <button
-                  className="btn primary full"
-                  disabled={routeAction.kind === "already_sent"}
-                  style={
-                    routeAction.kind === "already_sent"
-                      ? { opacity: 0.45, cursor: "not-allowed" }
-                      : undefined
-                  }
-                  title={
-                    routeAction.kind === "already_sent"
-                      ? "This report was already sent. Resend it from the Mail thread."
-                      : undefined
-                  }
-                  onClick={openRoute}
-                >
-                  <Icons.Send size={13} /> {routeButtonLabel(routeAction, verdictApproved)}
-                </button>
+                <>
+                  <button
+                    className="btn primary full"
+                    disabled={panel.routeBlocked !== null}
+                    aria-describedby={panel.routeBlocked ? routeBlockedId : undefined}
+                    style={panel.routeBlocked ? { opacity: 0.45, cursor: "not-allowed" } : undefined}
+                    onClick={openRoute}
+                  >
+                    <Icons.Send size={13} /> {panel.routeLabel}
+                  </button>
+                  {panel.routeBlocked && (
+                    <div id={routeBlockedId} className="hint">
+                      {panel.routeBlocked}
+                    </div>
+                  )}
+                </>
               ) : (
                 <>
                   <div className="rep-city-contact">
@@ -1210,6 +1109,8 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
                     style={{ marginTop: 8 }}
                     rows={3}
                     placeholder="Optional note to include in the email packet…"
+                    aria-label="Note to include in the email"
+                    maxLength={ROUTE_NOTE_MAX}
                     value={routeNote}
                     onChange={(e) => setRouteNote(e.target.value)}
                   />
@@ -1219,7 +1120,7 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
                       disabled={route.isPending || verdict.isPending}
                       onClick={sendToJurisdiction}
                     >
-                      <Icons.Send size={13} /> {routeButtonLabel(routeAction, verdictApproved)}
+                      <Icons.Send size={13} /> {panel.routeLabel}
                     </button>
                     <button
                       className="btn"
@@ -1244,13 +1145,19 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
                 )}
                 <button
                   className="btn danger sm full"
-                  disabled={verdict.isPending}
+                  disabled={verdict.isPending || panel.rejectBlocked !== null}
+                  aria-describedby={panel.rejectBlocked ? rejectBlockedId : undefined}
                   onClick={onReject}
                   title="Reject this report's verification instead of sending it"
                 >
                   <Icons.X size={12} /> Reject
                 </button>
               </div>
+              {panel.rejectBlocked && (
+                <div id={rejectBlockedId} className="hint">
+                  {panel.rejectBlocked}
+                </div>
+              )}
             </div>
           </div>
 
@@ -1267,18 +1174,25 @@ function ReportDetail({ reportId, onRemoved }: { reportId: string; onRemoved: (i
                 style={{ marginTop: 8 }}
                 rows={3}
                 placeholder={`Message ${report.city.dept} — e.g. nudge for an update…`}
+                aria-label="Message to the city"
+                maxLength={FOLLOWUP_MAX}
                 value={text}
                 onChange={(e) => setText(e.target.value)}
               />
               <button
                 className="btn primary full"
                 disabled={!text.trim() || !canSend || followup.isPending}
+                aria-describedby={followupBlocked ? followupBlockedId : undefined}
                 onClick={send}
                 style={!text.trim() || !canSend ? { opacity: 0.45, cursor: "not-allowed" } : undefined}
-                title={followupBlocked ?? undefined}
               >
                 <Icons.Send size={13} /> Send to city
               </button>
+              {followupBlocked && (
+                <div id={followupBlockedId} className="hint">
+                  {followupBlocked}
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -1345,21 +1259,34 @@ export function ReportsPage({ focusId }: SectionPageProps) {
   }
   const listCount = serverCounts ? (serverCounts[FILTER_COUNT_KEY[filter]] ?? 0) : items.length
 
+  // Only the first load picks a report on the operator's behalf, and a deep-linked report is never
+  // replaced. A pick that a filter or search leaves out stays open, pinned above the list and read by
+  // id; a pick that drops out of the same list after a refetch (a verdict under the Needs verification
+  // chip) clears, so the pane never jumps to another report's live buttons. A removal clears its report
+  // outright, since a removed report no longer loads by id. Decided only on data fetched for the
+  // current params.
+  const listKey = JSON.stringify(listParams)
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-  }, [items, selId])
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
+  const clearIfSelected = (id: string) => setSelId((cur) => (cur === id ? null : cur))
 
   const selInList = selId !== null && items.some((x) => x.id === selId)
   const pinnedQuery = useReport(selInList ? null : selId)
   const pinned = selInList ? null : (pinnedQuery.data ?? null)
 
-  const onRemoved = (id: string) => {
-    setSelId((cur) => (cur === id ? null : cur))
-  }
-
   return (
     <>
       <PageHead
@@ -1394,6 +1321,7 @@ export function ReportsPage({ focusId }: SectionPageProps) {
           <input
             type="text"
             placeholder="Search title, place, reporter…"
+            aria-label="Search reports"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
@@ -1411,7 +1339,7 @@ export function ReportsPage({ focusId }: SectionPageProps) {
             {pinned && (
               <>
                 <div className="eyebrow" style={{ padding: "10px 10px 0" }}>
-                  Linked report
+                  {selId === focusId ? "Linked report" : "Selected report"}
                 </div>
                 <ReportRow item={pinned} selected onSelect={setSelId} />
               </>
@@ -1449,7 +1377,7 @@ export function ReportsPage({ focusId }: SectionPageProps) {
 
         <section className="card md-detail-card">
           {selId ? (
-            <ReportDetail key={selId} reportId={selId} onRemoved={onRemoved} />
+            <ReportDetail key={selId} reportId={selId} onRemoved={clearIfSelected} />
           ) : (
             <EmptyState
               title="No report selected"
diff --git a/apps/admin/src/features/reports/send-panel.test.ts b/apps/admin/src/features/reports/send-panel.test.ts
new file mode 100644
index 0000000..0c93384
--- /dev/null
+++ b/apps/admin/src/features/reports/send-panel.test.ts
@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest"
+
+import { sendPanelView, type SendPanelReport } from "./send-panel"
+
+type Verdict = SendPanelReport["verificationVerdict"]
+
+const CITY = { dept: "Public Works", place: "Oakland", contact: "works@oaklandca.gov", routed: false }
+const ROUTED_AT = "2026-09-22T10:00:00.000Z"
+
+function report(over: Partial<SendPanelReport> = {}): SendPanelReport {
+  return {
+    geoid: "0653000",
+    city: CITY,
+    outreach: { status: "not_sent", threadId: null, routedTo: null, routedAt: null },
+    verificationVerdict: null,
+    ...over,
+  }
+}
+
+const SENT = { status: "sent", threadId: "t-1", routedTo: CITY.contact, routedAt: ROUTED_AT } as const
+const BOUNCED = { status: "bounced", threadId: "t-1", routedTo: CITY.contact, routedAt: ROUTED_AT } as const
+const NO_CONTACT = { ...CITY, contact: null }
+
+describe("sendPanelView", () => {
+  it.each<[string, Verdict, boolean, { approvesOnSend: boolean; canApproveHere: boolean; label: string; pill: string }]>([
+    ["unreviewed", null, false, { approvesOnSend: true, canApproveHere: false, label: "Verify and send to city", pill: "Not yet reviewed" }],
+    ["approved on the server", "approved", false, { approvesOnSend: false, canApproveHere: false, label: "Send to city", pill: "Approved" }],
+    ["approved locally", null, true, { approvesOnSend: false, canApproveHere: false, label: "Send to city", pill: "Approved" }],
+    // Pinned as found: sending re-approves a rejected report. Whether it should is a product question.
+    ["rejected", "rejected", false, { approvesOnSend: true, canApproveHere: false, label: "Verify and send to city", pill: "Rejected" }],
+    ["rejected on the server, approved locally since", "rejected", true, { approvesOnSend: false, canApproveHere: false, label: "Send to city", pill: "Approved" }],
+  ])("a sendable report that is %s", (_name, verdict, approvedLocally, want) => {
+    const view = sendPanelView(report({ verificationVerdict: verdict }), approvedLocally)
+    expect(view.routeAction.kind).toBe("send")
+    expect(view.approvesOnSend).toBe(want.approvesOnSend)
+    expect(view.canApproveHere).toBe(want.canApproveHere)
+    expect(view.routeLabel).toBe(want.label)
+    expect(view.verdictPill.label).toBe(want.pill)
+    expect(view.routeBlocked).toBeNull()
+  })
+
+  it("offers Approve on its own once the report went out unreviewed", () => {
+    const view = sendPanelView(report({ outreach: SENT }), false)
+    expect(view.routeAction.kind).toBe("already_sent")
+    expect(view.approvesOnSend).toBe(false)
+    expect(view.canApproveHere).toBe(true)
+    expect(view.routeLabel).toBe("Already sent · 9/22/2026, 10:00:00 AM")
+    expect(view.routeBlocked).toBe("This report was already sent. Resend it from the Mail thread.")
+  })
+
+  it("labels an already-sent report without a send time", () => {
+    const view = sendPanelView(report({ outreach: { ...SENT, routedAt: null } }), false)
+    expect(view.routeLabel).toBe("Already sent")
+  })
+
+  it("offers a resend after a bounce without re-approving", () => {
+    const view = sendPanelView(report({ outreach: BOUNCED, verificationVerdict: "approved" }), false)
+    expect(view.routeAction.kind).toBe("resend")
+    expect(view.routeLabel).toBe("Send again to jurisdiction")
+    expect(view.approvesOnSend).toBe(false)
+    expect(view.canApproveHere).toBe(false)
+  })
+
+  it.each([
+    ["no_contact", report({ city: NO_CONTACT })],
+    ["no_jurisdiction", report({ city: NO_CONTACT, geoid: null })],
+  ] as const)("lets an unroutable report (%s) be approved here", (kind, r) => {
+    const view = sendPanelView(r, false)
+    expect(view.routeAction.kind).toBe(kind)
+    expect(view.approvesOnSend).toBe(false)
+    expect(view.canApproveHere).toBe(true)
+    expect(view.followupBlocked).toBe("No city contact on file")
+  })
+
+  it("blocks a follow-up until the first send opened a thread", () => {
+    expect(sendPanelView(report(), false).followupBlocked).toBe(
+      "Send the report to the city first. A follow-up goes on that conversation.",
+    )
+    expect(sendPanelView(report({ outreach: SENT }), false).followupBlocked).toBeNull()
+  })
+
+  it("blocks Reject only while the server verdict is rejected and no local approve overrides it", () => {
+    expect(sendPanelView(report({ verificationVerdict: "rejected" }), false).rejectBlocked).toBe(
+      "This report is already rejected.",
+    )
+    expect(sendPanelView(report({ verificationVerdict: "rejected" }), true).rejectBlocked).toBeNull()
+    expect(sendPanelView(report({ verificationVerdict: "approved" }), false).rejectBlocked).toBeNull()
+    expect(sendPanelView(report(), false).rejectBlocked).toBeNull()
+  })
+})
diff --git a/apps/admin/src/features/reports/send-panel.ts b/apps/admin/src/features/reports/send-panel.ts
new file mode 100644
index 0000000..5334cbf
--- /dev/null
+++ b/apps/admin/src/features/reports/send-panel.ts
@@ -0,0 +1,70 @@
+import type { AdminReportDTO } from "@civfix/shared"
+
+import { msgWhen } from "@/features/reports/report-chat"
+import {
+  routeActionFor,
+  routeSendLabel,
+  type RoutableReport,
+  type RouteAction,
+} from "@/features/reports/route-action"
+
+export type SendPanelReport = RoutableReport & Pick<AdminReportDTO, "verificationVerdict">
+
+const VERDICT_PILL = {
+  approved: { cls: "status-ok", label: "Approved" },
+  rejected: { cls: "status-flag", label: "Rejected" },
+  unreviewed: { cls: "status-new", label: "Not yet reviewed" },
+} as const
+
+export interface SendPanelView {
+  routeAction: RouteAction
+  verdictApproved: boolean
+  verdictPill: { cls: string; label: string }
+  approvesOnSend: boolean
+  canApproveHere: boolean
+  routeLabel: string
+  routeBlocked: string | null
+  followupBlocked: string | null
+  rejectBlocked: string | null
+}
+
+function routeButtonLabel(action: RouteAction, verdictApproved: boolean): string {
+  if (action.kind === "already_sent") {
+    return action.routedAt ? `Already sent · ${msgWhen(action.routedAt)}` : "Already sent"
+  }
+  if (action.kind === "resend") return "Send again to jurisdiction"
+  return routeSendLabel(verdictApproved)
+}
+
+// A local approve outranks the server verdict until the refetch lands, so the panel never offers a
+// second approve (or blocks a reject) on a verdict the operator just changed.
+export function sendPanelView(report: SendPanelReport, approvedLocally: boolean): SendPanelView {
+  const routeAction = routeActionFor(report)
+  const verdictApproved = report.verificationVerdict === "approved" || approvedLocally
+  const approvesOnSend = routeAction.kind === "send" && !verdictApproved
+  return {
+    routeAction,
+    verdictApproved,
+    verdictPill: verdictApproved
+      ? VERDICT_PILL.approved
+      : report.verificationVerdict === "rejected"
+        ? VERDICT_PILL.rejected
+        : VERDICT_PILL.unreviewed,
+    approvesOnSend,
+    canApproveHere: !verdictApproved && !approvesOnSend,
+    routeLabel: routeButtonLabel(routeAction, verdictApproved),
+    routeBlocked:
+      routeAction.kind === "already_sent"
+        ? "This report was already sent. Resend it from the Mail thread."
+        : null,
+    followupBlocked: !report.city.contact
+      ? "No city contact on file"
+      : report.outreach.threadId === null
+        ? "Send the report to the city first. A follow-up goes on that conversation."
+        : null,
+    rejectBlocked:
+      report.verificationVerdict === "rejected" && !approvedLocally
+        ? "This report is already rejected."
+        : null,
+  }
+}
diff --git a/apps/admin/src/features/reports/submit-shortcut.tsx b/apps/admin/src/features/reports/submit-shortcut.tsx
new file mode 100644
index 0000000..9774a68
--- /dev/null
+++ b/apps/admin/src/features/reports/submit-shortcut.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+export const SUBMIT_KEYSHORTCUTS = "Meta+Enter Control+Enter"
+
+function subscribeNever(): () => void {
+  return () => {}
+}
+
+function isApplePlatform(): boolean {
+  return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+}
+
+// The static export is prerendered with no navigator, so the server snapshot keeps the Mac glyphs and
+// the client corrects them after hydration instead of mismatching the markup.
+export function SubmitShortcutHint() {
+  const apple = React.useSyncExternalStore(subscribeNever, isApplePlatform, () => true)
+  return (
+    <span className="kbdhint" aria-hidden="true">
+      {apple ? "⌘⏎" : "Ctrl⏎"}
+    </span>
+  )
+}
diff --git a/apps/admin/src/features/reports/use-reports-invalidation.test.tsx b/apps/admin/src/features/reports/use-reports-invalidation.test.tsx
new file mode 100644
index 0000000..b5bd71d
--- /dev/null
+++ b/apps/admin/src/features/reports/use-reports-invalidation.test.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { act, renderHook } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import type * as ApiModule from "@/lib/api"
+import { queryKeys } from "@/lib/query"
+import { apiMock } from "@/test/api-mock"
+import { makeTestQueryClient } from "@/test/render"
+import { useFlagReport, useRemoveReport, useSetReportStatus } from "@/features/reports/use-reports"
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const { apiMock } = await import("@/test/api-mock")
+  return { ...(await importOriginal<typeof ApiModule>()), api: apiMock }
+})
+
+async function invalidatedBy<I>(
+  useHook: () => { mutateAsync: (input: I) => Promise<unknown> },
+  input: I,
+): Promise<unknown[]> {
+  const client = makeTestQueryClient()
+  const spy = vi.spyOn(client, "invalidateQueries")
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  )
+  const { result } = renderHook(useHook, { wrapper })
+  await act(() => result.current.mutateAsync(input))
+  return spy.mock.calls.map(([filters]) => filters?.queryKey)
+}
+
+describe("report mutations refresh the sections that show report state", () => {
+  it.each([
+    ["status", "setReportStatus", () => useSetReportStatus(), { id: "r1", status: "resolved" as const }],
+    ["flag", "flagReport", () => useFlagReport(), { id: "r1" }],
+    ["remove", "removeReport", () => useRemoveReport(), { id: "r1" }],
+  ] as const)("%s", async (_name, method, useHook, input) => {
+    apiMock[method].mockResolvedValue({ ok: true })
+    const keys = await invalidatedBy(useHook as never, input)
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        queryKeys.reports.all,
+        queryKeys.users.all,
+        queryKeys.events.all,
+        queryKeys.moderation.all,
+      ]),
+    )
+  })
+})
diff --git a/apps/admin/src/features/reports/use-reports.ts b/apps/admin/src/features/reports/use-reports.ts
index 9e9f3bd..428c1b0 100644
--- a/apps/admin/src/features/reports/use-reports.ts
+++ b/apps/admin/src/features/reports/use-reports.ts
@@ -1,24 +1,33 @@
 "use client"
 
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import type {
-  AdminRemoveReportMessageRequest,
-  AdminReportListQuery,
-  AdminReportListResponse,
-  AdminSendReportMessageRequest,
-  ChatHistoryResponse,
-  FlagReportRequest,
-  GetAdminReportResponse,
-  RemoveReportRequest,
-  RouteReportRequest,
-  SendFollowupRequest,
-  SetReportStatusRequest,
-  SetReportVerdictRequest,
+import {
+  keepPreviousData,
+  queryOptions,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
+import {
+  ADMIN_REPORT_STATUS_LABELS,
+  type AdminRemoveReportMessageRequest,
+  type AdminReportListQuery,
+  type AdminReportListResponse,
+  type AdminSendReportMessageRequest,
+  type ChatHistoryResponse,
+  type FlagReportRequest,
+  type GetAdminReportResponse,
+  type RemoveReportRequest,
+  type RouteReportRequest,
+  type SendFollowupRequest,
+  type SetReportStatusRequest,
+  type SetReportVerdictRequest,
 } from "@civfix/shared"
 
 import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
-
+import { useUiStore } from "@/store/ui-store"
+import { shortId } from "@/features/reports/report-id"
 
 export function useReportList(params: AdminReportListQuery) {
   return useQuery<AdminReportListResponse>({
@@ -27,7 +36,10 @@ export function useReportList(params: AdminReportListQuery) {
   })
 }
 
-export function useReportListInfinite(params: AdminReportListQuery) {
+export function useReportListInfinite(
+  params: AdminReportListQuery,
+  opts: { keepPreviousData?: boolean } = {},
+) {
   return useInfiniteQuery<AdminReportListResponse>({
     queryKey: queryKeys.reports.list(params),
     queryFn: ({ pageParam }) =>
@@ -37,17 +49,21 @@ export function useReportListInfinite(params: AdminReportListQuery) {
       }),
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+    ...(opts.keepPreviousData ? { placeholderData: keepPreviousData } : {}),
   })
 }
 
-export function useReport(id: string | null) {
-  return useQuery<GetAdminReportResponse>({
-    queryKey: queryKeys.reports.detail(id ?? ""),
-    queryFn: () => api.getAdminReport({ id: id as string }),
-    enabled: !!id,
+function reportQuery(id: string) {
+  return queryOptions<GetAdminReportResponse>({
+    queryKey: queryKeys.reports.detail(id),
+    queryFn: () => api.getAdminReport({ id }),
   })
 }
 
+export function useReport(id: string | null) {
+  return useQuery({ ...reportQuery(id ?? ""), enabled: !!id })
+}
+
 export function useRefreshReportMedia(id: string): () => void {
   const qc = useQueryClient()
   return () => {
@@ -55,10 +71,16 @@ export function useRefreshReportMedia(id: string): () => void {
   }
 }
 
+// Profiles, event detail and the moderation queue all render a report's status and flag.
 function invalidateReports(qc: ReturnType<typeof useQueryClient>, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.reports.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.reports.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.reports.detail(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.reports.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.events.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.moderation.all }),
+  ])
 }
 
 export function useSetReportStatus() {
@@ -66,6 +88,10 @@ export function useSetReportStatus() {
   return useMutation({
     mutationFn: (input: SetReportStatusRequest) => api.setReportStatus(input),
     onSuccess: (_res, { id }) => invalidateReports(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { id, status }: SetReportStatusRequest) =>
+        `${shortId(id)} · status → ${ADMIN_REPORT_STATUS_LABELS[status]}`,
+    },
   })
 }
 
@@ -73,7 +99,21 @@ export function useFlagReport() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: FlagReportRequest) => api.flagReport(input),
-    onSuccess: (_res, { id }) => invalidateReports(qc, id),
+    // The endpoint toggles, so another operator's flag since this load flips the outcome: word the
+    // toast from the report as it now is.
+    onSuccess: async (_res, { id }) => {
+      await invalidateReports(qc, id)
+      let report: GetAdminReportResponse
+      try {
+        report = await qc.fetchQuery(reportQuery(id))
+      } catch {
+        // The flag already changed and the refetch failed: skip the toast rather than guess its wording.
+        return
+      }
+      useUiStore
+        .getState()
+        .showToast(report.flagged ? `${shortId(id)} · flagged for review` : `${shortId(id)} · flag cleared`)
+    },
   })
 }
 
@@ -82,6 +122,9 @@ export function useRemoveReport() {
   return useMutation({
     mutationFn: (input: RemoveReportRequest) => api.removeReport(input),
     onSuccess: (_res, { id }) => invalidateReports(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { id }: RemoveReportRequest) => `${shortId(id)} · report removed`,
+    },
   })
 }
 
@@ -90,6 +133,7 @@ export function useSendReportFollowup() {
   return useMutation({
     mutationFn: (input: SendFollowupRequest) => api.sendReportFollowup(input),
     onSuccess: (_res, { id }) => invalidateReports(qc, id),
+    meta: { successMessage: () => "Follow-up sent to city" },
   })
 }
 
@@ -97,22 +141,29 @@ export function useRouteReport() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: RouteReportRequest) => api.routeReport(input),
-    onSuccess: (_res, { id }) => {
-      invalidateReports(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.mail.all })
-      qc.invalidateQueries({ queryKey: queryKeys.discovery.all })
-      qc.invalidateQueries({ queryKey: queryKeys.jurisdictions.all })
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        invalidateReports(qc, id),
+        qc.invalidateQueries({ queryKey: queryKeys.mail.all }),
+        qc.invalidateQueries({ queryKey: queryKeys.discovery.all }),
+        qc.invalidateQueries({ queryKey: queryKeys.jurisdictions.all }),
+      ]),
   })
 }
 
+const VERDICT_TOAST: Record<SetReportVerdictRequest["verdict"], string> = {
+  approved: "approved",
+  rejected: "rejected",
+}
+
 export function useSetReportVerdict() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: SetReportVerdictRequest) => api.setReportVerdict(input),
-    onSuccess: (_res, { id }) => {
-      invalidateReports(qc, id)
-      qc.invalidateQueries({ queryKey: queryKeys.users.all })
+    onSuccess: (_res, { id }) => invalidateReports(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { id, verdict }: SetReportVerdictRequest) =>
+        `${shortId(id)} · ${VERDICT_TOAST[verdict]}`,
     },
   })
 }
@@ -120,17 +171,22 @@ export function useSetReportVerdict() {
 /**
  * The report CHAT history on the ADMIN plane (GET /admin/reports/:id/messages), so it resolves against
  * admin.civfix.org like every other operator read. Operators see exactly what neighbors see, including
- * sender-less SYSTEM status events, and can post into the same thread.
- *
- * Pagination is intentionally minimal: we fetch the first page (newest window, up to `limit`) which is
- * plenty for an admin glance. `nextCursor` (older messages via `before`) is ignored on purpose.
+ * sender-less SYSTEM status events, and can post into the same thread. Pages run newest first; each
+ * `nextCursor` asks for the window before it, so older messages stay reachable for moderation.
  */
 const REPORT_CHAT_LIMIT = 50
 
 export function useReportChatHistory(id: string | null) {
-  return useQuery<ChatHistoryResponse>({
+  return useInfiniteQuery<ChatHistoryResponse>({
     queryKey: queryKeys.reports.chat(id ?? ""),
-    queryFn: () => api.adminReportMessages({ id: id as string, limit: REPORT_CHAT_LIMIT }),
+    queryFn: ({ pageParam }) =>
+      api.adminReportMessages({
+        id: id as string,
+        limit: REPORT_CHAT_LIMIT,
+        ...(typeof pageParam === "string" ? { before: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
     enabled: !!id,
   })
 }
@@ -139,10 +195,12 @@ export function useSendReportMessage() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: AdminSendReportMessageRequest) => api.adminSendReportMessage(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.reports.chat(id) })
-      qc.invalidateQueries({ queryKey: queryKeys.reports.detail(id) })
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.reports.chat(id) }),
+        qc.invalidateQueries({ queryKey: queryKeys.reports.detail(id) }),
+      ]),
+    meta: { successMessage: () => "Message posted to the report chat" },
   })
 }
 
@@ -150,8 +208,7 @@ export function useRemoveReportMessage() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: AdminRemoveReportMessageRequest) => api.adminRemoveReportMessage(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.reports.chat(id) })
-    },
+    onSuccess: (_res, { id }) => qc.invalidateQueries({ queryKey: queryKeys.reports.chat(id) }),
+    meta: { successMessage: () => "Message removed" },
   })
 }
diff --git a/apps/admin/src/features/users/use-users.ts b/apps/admin/src/features/users/use-users.ts
index a6f15ba..51efa73 100644
--- a/apps/admin/src/features/users/use-users.ts
+++ b/apps/admin/src/features/users/use-users.ts
@@ -57,57 +57,107 @@ export function useUser(id: string | null) {
   })
 }
 
-export function useUserReports(id: string | null) {
-  return useQuery<UserReportsResponse>({
-    queryKey: queryKeys.users.reports(id ?? ""),
-    queryFn: () => api.getUserReports({ id: id as string }),
+// A profile tab's badge counts everything the user has, so each tab pages through the whole history
+// rather than stopping at the API's first page.
+function useUserSubList<T extends { nextCursor?: string | null }>(
+  queryKey: readonly unknown[],
+  id: string | null,
+  fetchPage: (input: { id: string; cursor?: string }) => Promise<T>,
+) {
+  return useInfiniteQuery<T>({
+    queryKey,
+    queryFn: ({ pageParam }) =>
+      fetchPage({ id: id as string, ...(typeof pageParam === "string" ? { cursor: pageParam } : {}) }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
     enabled: !!id,
   })
 }
 
+export function useUserReports(id: string | null) {
+  return useUserSubList<UserReportsResponse>(queryKeys.users.reports(id ?? ""), id, (input) =>
+    api.getUserReports(input),
+  )
+}
+
 export function useUserEvents(id: string | null) {
-  return useQuery<UserEventsResponse>({
-    queryKey: queryKeys.users.events(id ?? ""),
-    queryFn: () => api.getUserEvents({ id: id as string }),
-    enabled: !!id,
-  })
+  return useUserSubList<UserEventsResponse>(queryKeys.users.events(id ?? ""), id, (input) =>
+    api.getUserEvents(input),
+  )
 }
 
 export function useUserMessages(id: string | null) {
-  return useQuery<UserMessagesResponse>({
-    queryKey: queryKeys.users.messages(id ?? ""),
-    queryFn: () => api.getUserMessages({ id: id as string }),
-    enabled: !!id,
-  })
+  return useUserSubList<UserMessagesResponse>(queryKeys.users.messages(id ?? ""), id, (input) =>
+    api.getUserMessages(input),
+  )
 }
 
 function invalidateUsers(qc: ReturnType<typeof useQueryClient>, id: string) {
-  qc.invalidateQueries({ queryKey: queryKeys.users.detail(id) })
-  qc.invalidateQueries({ queryKey: queryKeys.users.all })
-  qc.invalidateQueries({ queryKey: queryKeys.home.all })
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: queryKeys.users.detail(id) }),
+    qc.invalidateQueries({ queryKey: queryKeys.users.all }),
+    qc.invalidateQueries({ queryKey: queryKeys.home.all }),
+  ])
+}
+
+export interface FlagUserVariables {
+  request: FlagUserRequest
+  name: string
+  /** Whether the account was flagged when the operator toggled it; the endpoint flips it. */
+  wasFlagged: boolean
 }
 
 export function useFlagUser() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: FlagUserRequest) => api.flagUser(input),
-    onSuccess: (_res, { id }) => invalidateUsers(qc, id),
+    mutationFn: ({ request }: FlagUserVariables) => api.flagUser(request),
+    onSuccess: (_res, { request: { id } }) => invalidateUsers(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { name, wasFlagged }: FlagUserVariables) =>
+        wasFlagged ? `${name} · flag cleared` : `${name} · account flagged`,
+    },
   })
 }
 
+const STATUS_TOAST: Partial<Record<SetUserStatusRequest["status"], string>> = {
+  banned: "account banned",
+  suspended: "account suspended",
+  active: "account reactivated",
+}
+
+export interface SetUserStatusVariables {
+  request: SetUserStatusRequest
+  name: string
+}
+
 export function useSetUserStatus() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: SetUserStatusRequest) => api.setUserStatus(input),
-    onSuccess: (_res, { id }) => invalidateUsers(qc, id),
+    mutationFn: ({ request }: SetUserStatusVariables) => api.setUserStatus(request),
+    onSuccess: (_res, { request: { id } }) => invalidateUsers(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { request, name }: SetUserStatusVariables) => {
+        const outcome = STATUS_TOAST[request.status]
+        return outcome ? `${name} · ${outcome}` : null
+      },
+    },
   })
 }
 
+export interface SetUserReportVerifiedVariables {
+  request: SetUserReportVerifiedRequest
+  name: string
+}
+
 export function useSetUserReportVerified() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (input: SetUserReportVerifiedRequest) => api.setUserReportVerified(input),
-    onSuccess: (_res, { id }) => invalidateUsers(qc, id),
+    mutationFn: ({ request }: SetUserReportVerifiedVariables) => api.setUserReportVerified(request),
+    onSuccess: (_res, { request: { id } }) => invalidateUsers(qc, id),
+    meta: {
+      successMessage: (_res: unknown, { request, name }: SetUserReportVerifiedVariables) =>
+        request.value ? `${name} · report-verified` : `${name} · report-verification removed`,
+    },
   })
 }
 
@@ -115,10 +165,11 @@ export function useRemoveUserMessage() {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: (input: RemoveUserMessageRequest) => api.removeUserMessage(input),
-    onSuccess: (_res, { id }) => {
-      qc.invalidateQueries({ queryKey: queryKeys.users.messages(id) })
-      invalidateUsers(qc, id)
-    },
+    onSuccess: (_res, { id }) =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: queryKeys.users.messages(id) }),
+        invalidateUsers(qc, id),
+      ]),
+    meta: { successMessage: () => "Message removed" },
   })
 }
-
diff --git a/apps/admin/src/features/users/user-search.test.ts b/apps/admin/src/features/users/user-search.test.ts
new file mode 100644
index 0000000..ff4a1fe
--- /dev/null
+++ b/apps/admin/src/features/users/user-search.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest"
+
+import { userSearchTerm } from "./user-search"
+
+describe("userSearchTerm", () => {
+  it("trims the typed text", () => {
+    expect(userSearchTerm("  ada ")).toBe("ada")
+  })
+
+  it("drops one leading @ so a typed handle matches the stored one", () => {
+    expect(userSearchTerm(" @ada ")).toBe("ada")
+    expect(userSearchTerm("@@ada")).toBe("@ada")
+  })
+
+  it("keeps an @ inside the term", () => {
+    expect(userSearchTerm("ada@example")).toBe("ada@example")
+  })
+
+  it("returns undefined when nothing is left to search", () => {
+    expect(userSearchTerm("")).toBeUndefined()
+    expect(userSearchTerm("   ")).toBeUndefined()
+    expect(userSearchTerm(" @ ")).toBeUndefined()
+  })
+})
diff --git a/apps/admin/src/features/users/user-search.ts b/apps/admin/src/features/users/user-search.ts
new file mode 100644
index 0000000..0eb307b
--- /dev/null
+++ b/apps/admin/src/features/users/user-search.ts
@@ -0,0 +1,9 @@
+/**
+ * The `q` the admin users search sends for what the operator typed, or undefined when there is nothing
+ * to search. The API matches name, handle and city; handles are stored without the `@` people type in
+ * front of them, so a leading `@` would match nothing.
+ */
+export function userSearchTerm(raw: string): string | undefined {
+  const term = raw.trim().replace(/^@/, "").trim()
+  return term === "" ? undefined : term
+}
diff --git a/apps/admin/src/features/users/users-page.test.tsx b/apps/admin/src/features/users/users-page.test.tsx
index 2802444..74bf803 100644
--- a/apps/admin/src/features/users/users-page.test.tsx
+++ b/apps/admin/src/features/users/users-page.test.tsx
@@ -1,12 +1,16 @@
-import { act, screen, waitFor, within } from "@testing-library/react"
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import type {
-  AdminUserDTO,
-  AdminUserListItemDTO,
-  AdminUserListResponse,
-  UserReportsResponse,
+import {
+  AppError,
+  ErrorCode,
+  type AdminUserDTO,
+  type AdminUserListItemDTO,
+  type AdminUserListResponse,
+  type UserEventItemDTO,
+  type UserMessageItemDTO,
+  type UserReportsResponse,
 } from "@civfix/shared"
-import { describe, expect, it, vi } from "vitest"
+import { describe, expect, it, onTestFinished, vi } from "vitest"
 
 import type * as ApiModule from "@/lib/api"
 import { apiMock } from "@/test/api-mock"
@@ -14,6 +18,8 @@ import { startFakeTimersWithUser } from "@/test/fake-timers"
 import { renderWithQuery } from "@/test/render"
 import { detailCard } from "@/test/panes"
 import { UsersPage } from "@/features/users/users-page"
+import { DialogHost } from "@/components/shared/dialog"
+import { useUiStore } from "@/store/ui-store"
 
 vi.mock("@/lib/api", async (importOriginal) => {
   const { apiMock } = await import("@/test/api-mock")
@@ -235,12 +241,340 @@ describe("UsersPage", () => {
     expect(within(detailCard()).queryByRole("heading", { name: "Ana Ruiz" })).not.toBeInTheDocument()
   })
 
-  it("replaces a deep-linked focusId that is not on the first page with the first row (current behavior)", async () => {
+  it("keeps a deep-linked focusId that is not on the first page selected", async () => {
     const CARA = listItem({ id: "u-cara", name: "Cara Lind" })
     apiMock.listAdminUsers.mockResolvedValue(page([ANA, BEN]))
     mockDetails(ANA, BEN, CARA)
     renderWithQuery(<UsersPage focusId="u-cara" />)
+    expect(await within(detailCard()).findByRole("heading", { name: "Cara Lind" })).toBeInTheDocument()
+    await within(accountsList()).findByText("Ana Ruiz")
+    expect(within(detailCard()).getByRole("heading", { name: "Cara Lind" })).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "Ana Ruiz" })).not.toBeInTheDocument()
+  })
+})
+
+function resetShellAfterTest() {
+  const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(() => {})
+  onTestFinished(() => {
+    scrollTo.mockRestore()
+    useUiStore.setState({ page: "home", focusId: null, toast: null })
+    window.history.replaceState(null, "", "#/")
+  })
+}
+
+function rowOf(text: string): HTMLElement {
+  const row = within(accountsList()).getByText(text).closest<HTMLElement>('[role="button"]')
+  if (!row) throw new Error(`${text} has no keyboard-operable row`)
+  return row
+}
+
+async function openActivityTab(label: string) {
+  await userEvent.click(within(detailCard()).getByText(label))
+}
+
+function eventItem(over: Partial<UserEventItemDTO> & { id: string; title: string }) {
+  return { place: "Lake Merritt", role: "member", attendees: 4, when: "Sat", ...over } satisfies UserEventItemDTO
+}
+
+function messageItem(over: Partial<UserMessageItemDTO> & { id: string; text: string }) {
+  return {
+    thread: "Beach day",
+    when: "3d",
+    source: "chat",
+    sourceId: "ev-9",
+    deletedAt: null,
+    ...over,
+  } satisfies UserMessageItemDTO
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => {
+    resolve = r
+  })
+  return { promise, resolve }
+}
+
+describe("UsersPage selection", () => {
+  it("clears the acted-on account when the refetched list no longer holds it, without opening another", async () => {
+    let suspended = false
+    apiMock.listAdminUsers.mockImplementation(async () => page(suspended ? [BEN] : [ANA, BEN]))
+    apiMock.getAdminUser.mockImplementation(async ({ id }: { id: string }) =>
+      id === ANA.id ? detail({ ...ANA, status: suspended ? "suspended" : "active" }) : detail(BEN),
+    )
+    apiMock.getUserReports.mockResolvedValue(NO_REPORTS)
+    apiMock.setUserStatus.mockImplementation(async () => {
+      suspended = true
+      return {}
+    })
+    renderWithQuery(
+      <>
+        <UsersPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: /Suspend/ }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Suspend" }))
+
+    await waitFor(() => expect(within(accountsList()).queryByText("Ana Ruiz")).not.toBeInTheDocument())
+    expect(await within(detailCard()).findByText("No user selected")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("heading", { name: "Ben Okafor" })).not.toBeInTheDocument()
+    expect(rowOf("Ben Okafor")).not.toHaveAttribute("aria-current")
+  })
+
+  it("confirms the suspension once the account detail refetch lands after the list dropped the account", async () => {
+    resetShellAfterTest()
+    useUiStore.setState({ toast: null })
+    let suspended = false
+    const detailRefetch = deferred<AdminUserDTO>()
+    apiMock.listAdminUsers.mockImplementation(async () => page(suspended ? [BEN] : [ANA, BEN]))
+    apiMock.getAdminUser.mockImplementation(({ id }: { id: string }) =>
+      id === ANA.id && suspended ? detailRefetch.promise : Promise.resolve(detail(id === ANA.id ? ANA : BEN)),
+    )
+    apiMock.getUserReports.mockResolvedValue(NO_REPORTS)
+    apiMock.setUserStatus.mockImplementation(async () => {
+      suspended = true
+      return {}
+    })
+    renderWithQuery(
+      <>
+        <UsersPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: /Suspend/ }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Suspend" }))
+
+    expect(await within(detailCard()).findByText("No user selected")).toBeInTheDocument()
+    await act(async () => {
+      detailRefetch.resolve(detail({ ...ANA, status: "suspended" }))
+    })
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({ text: "Ana Ruiz · account suspended", tone: "ok" }),
+    )
+  })
+
+  it("keeps the acted-on account open while the refetched list still holds it", async () => {
+    let suspended = false
+    const ana = () => ({ ...ANA, status: suspended ? ("suspended" as const) : ("active" as const) })
+    apiMock.listAdminUsers.mockImplementation(async () => page([ana(), BEN]))
+    apiMock.getAdminUser.mockImplementation(async ({ id }: { id: string }) =>
+      id === ANA.id ? detail(ana()) : detail(BEN),
+    )
+    apiMock.getUserReports.mockResolvedValue(NO_REPORTS)
+    apiMock.setUserStatus.mockImplementation(async () => {
+      suspended = true
+      return {}
+    })
+    renderWithQuery(
+      <>
+        <UsersPage focusId={null} />
+        <DialogHost />
+      </>,
+    )
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await userEvent.click(within(detailCard()).getByRole("button", { name: /Suspend/ }))
+    await userEvent.click(within(await screen.findByRole("dialog")).getByRole("button", { name: "Suspend" }))
+
+    expect(await within(detailCard()).findByRole("button", { name: /Reactivate/ })).toBeInTheDocument()
+    expect(within(detailCard()).getByRole("heading", { name: "Ana Ruiz" })).toBeInTheDocument()
+    expect(rowOf("Ana Ruiz")).toHaveAttribute("aria-current", "true")
+  })
+
+  it("keeps the selected account open when a filter drops it from the list", async () => {
+    apiMock.listAdminUsers.mockImplementation(async (params: { filter?: string }) =>
+      page(params.filter === "suspended" ? [BEN] : [ANA, BEN]),
+    )
+    mockDetails(ANA, BEN)
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await userEvent.click(screen.getByRole("button", { name: /^Suspended/ }))
+
+    await waitFor(() => expect(within(accountsList()).queryByText("Ana Ruiz")).not.toBeInTheDocument())
+    expect(within(detailCard()).getByRole("heading", { name: "Ana Ruiz" })).toBeInTheDocument()
+    expect(rowOf("Ben Okafor")).not.toHaveAttribute("aria-current")
+  })
+
+  it("selects a row from the keyboard and marks the selected row as current", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA, BEN]))
+    mockDetails(ANA, BEN)
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+    expect(rowOf("Ana Ruiz")).toHaveAttribute("aria-current", "true")
+    expect(rowOf("Ben Okafor")).not.toHaveAttribute("aria-current")
+
+    rowOf("Ben Okafor").focus()
+    await userEvent.keyboard(" ")
+    expect(await within(detailCard()).findByRole("heading", { name: "Ben Okafor" })).toBeInTheDocument()
+    expect(rowOf("Ben Okafor")).toHaveAttribute("aria-current", "true")
+
+    rowOf("Ana Ruiz").focus()
+    await userEvent.keyboard("{Enter}")
     expect(await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })).toBeInTheDocument()
-    expect(within(detailCard()).queryByRole("heading", { name: "Cara Lind" })).not.toBeInTheDocument()
+  })
+})
+
+describe("UsersPage list copy and search", () => {
+  it("names the search box and drops a leading @ from the search term", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    renderWithQuery(<UsersPage focusId={null} />)
+    await screen.findByText("Ana Ruiz")
+
+    const user = startFakeTimersWithUser()
+    await user.type(screen.getByRole("textbox", { name: "Search accounts" }), "@anaruiz")
+    await act(async () => {
+      vi.advanceTimersByTime(250)
+    })
+    expect(apiMock.listAdminUsers).toHaveBeenLastCalledWith({ q: "anaruiz" })
+  })
+
+  it("names the flagged marker and pluralizes single counts", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([{ ...BEN, reports: 1, cleanups: 1 }]))
+    mockDetails(BEN)
+    renderWithQuery(<UsersPage focusId={null} />)
+    await screen.findByText("Ben Okafor")
+    expect(within(accountsList()).getByRole("img", { name: "Flagged" })).toBeInTheDocument()
+    expect(within(accountsList()).getByText("1 report")).toBeInTheDocument()
+    expect(within(accountsList()).getByText("1 cleanup")).toBeInTheDocument()
+  })
+})
+
+describe("UsersPage account detail", () => {
+  it("shows a not-found state without a retry when the account does not exist", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    apiMock.getAdminUser.mockRejectedValue(
+      new AppError(ErrorCode.NOT_FOUND, "User not found", { httpStatus: 404 }),
+    )
+    renderWithQuery(<UsersPage focusId="u-gone" />)
+    expect(await within(detailCard()).findByText("User not found")).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Try again" })).not.toBeInTheDocument()
+  })
+
+  it("says the copy failed, in the error tone, when the clipboard is unavailable", async () => {
+    resetShellAfterTest()
+    const original = Object.getOwnPropertyDescriptor(window.navigator, "clipboard")
+    Object.defineProperty(window.navigator, "clipboard", { configurable: true, get: () => undefined })
+    onTestFinished(() => {
+      if (original) Object.defineProperty(window.navigator, "clipboard", original)
+      else delete (window.navigator as { clipboard?: unknown }).clipboard
+    })
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    fireEvent.click(within(detailCard()).getByRole("button", { name: /u-ana/ }))
+    await waitFor(() =>
+      expect(useUiStore.getState().toast).toMatchObject({
+        text: "Couldn't copy. Select the ID manually.",
+        tone: "error",
+      }),
+    )
+  })
+
+  it("exposes the activity tabs as a tablist that arrow keys move through", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    apiMock.getUserEvents.mockResolvedValue({ items: [], nextCursor: null })
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    const tablist = within(detailCard()).getByRole("tablist", { name: "Activity" })
+    const reportsTab = within(tablist).getByRole("tab", { name: /^Reports/ })
+    const eventsTab = within(tablist).getByRole("tab", { name: /^Events/ })
+    expect(reportsTab).toHaveAttribute("aria-selected", "true")
+    expect(eventsTab).toHaveAttribute("aria-selected", "false")
+    expect(eventsTab).toHaveAttribute("tabindex", "-1")
+    expect(within(detailCard()).getByRole("tabpanel", { name: /^Reports/ })).toBeInTheDocument()
+
+    reportsTab.focus()
+    await userEvent.keyboard("{ArrowRight}")
+    expect(eventsTab).toHaveAttribute("aria-selected", "true")
+    expect(eventsTab).toHaveFocus()
+    expect(await within(detailCard()).findByText("No cleanup events yet")).toBeInTheDocument()
+
+    await userEvent.keyboard("{ArrowLeft}{ArrowLeft}")
+    expect(within(tablist).getByRole("tab", { name: /^Messages/ })).toHaveAttribute("aria-selected", "true")
+  })
+
+  it("opens a profile report row with the Space key", async () => {
+    resetShellAfterTest()
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    apiMock.getUserReports.mockResolvedValue({
+      items: [
+        { id: "r-1", title: "Broken bench", category: "other", status: "submitted", place: "Fresno", age: "2d" },
+      ],
+      nextCursor: null,
+    } satisfies UserReportsResponse)
+    renderWithQuery(<UsersPage focusId={null} />)
+    const title = await within(detailCard()).findByText("Broken bench")
+
+    const row = title.closest<HTMLElement>('[role="button"]')!
+    row.focus()
+    await userEvent.keyboard(" ")
+    expect(useUiStore.getState()).toMatchObject({ page: "reports", focusId: "r-1" })
+  })
+
+  it("labels a co-hosted event as co-hosted and pluralizes a single attendee", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    apiMock.getUserEvents.mockResolvedValue({
+      items: [eventItem({ id: "ev-1", title: "Beach day", role: "cohost", attendees: 1 })],
+      nextCursor: null,
+    })
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await openActivityTab("Events")
+    expect(await within(detailCard()).findByText("Co-hosted the Beach day")).toBeInTheDocument()
+    expect(within(detailCard()).getByText("Co-host")).toBeInTheDocument()
+    expect(within(detailCard()).getByText(/1 neighbor joined/)).toBeInTheDocument()
+  })
+
+  it("labels a removed message neutrally and keeps block content out of the row button", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    apiMock.getUserMessages.mockResolvedValue({
+      items: [messageItem({ id: "m-1", text: "gone now", deletedAt: "2026-09-01T00:00:00.000Z" })],
+      nextCursor: null,
+    })
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await openActivityTab("Messages")
+    const text = await within(detailCard()).findByText(/gone now/)
+    expect(within(detailCard()).getByText("Removed")).toBeInTheDocument()
+    expect(within(detailCard()).queryByText(/deleted by user/)).not.toBeInTheDocument()
+    const button = text.closest("button")!
+    expect(button.querySelector("div")).toBeNull()
+  })
+
+  it("pages through a user's messages with Load more", async () => {
+    apiMock.listAdminUsers.mockResolvedValue(page([ANA]))
+    mockDetails(ANA)
+    apiMock.getUserMessages.mockImplementation(async (params: { cursor?: string }) =>
+      params.cursor === "m-c2"
+        ? { items: [messageItem({ id: "m-2", text: "older message" })], nextCursor: null }
+        : { items: [messageItem({ id: "m-1", text: "newest message" })], nextCursor: "m-c2" },
+    )
+    renderWithQuery(<UsersPage focusId={null} />)
+    await within(detailCard()).findByRole("heading", { name: "Ana Ruiz" })
+
+    await openActivityTab("Messages")
+    await within(detailCard()).findByText(/newest message/)
+    await userEvent.click(within(detailCard()).getByRole("button", { name: "Load more" }))
+
+    expect(await within(detailCard()).findByText(/older message/)).toBeInTheDocument()
+    expect(apiMock.getUserMessages).toHaveBeenLastCalledWith({ id: "u-ana", cursor: "m-c2" })
+    expect(within(detailCard()).getByText(/newest message/)).toBeInTheDocument()
+    expect(within(detailCard()).queryByRole("button", { name: "Load more" })).not.toBeInTheDocument()
   })
 })
diff --git a/apps/admin/src/features/users/users-page.tsx b/apps/admin/src/features/users/users-page.tsx
index ea14b23..7f7e939 100644
--- a/apps/admin/src/features/users/users-page.tsx
+++ b/apps/admin/src/features/users/users-page.tsx
@@ -10,6 +10,7 @@ import {
   type AdminUserDTO,
   type AdminUserListItemDTO,
   type AdminUserListQuery,
+  type CleanupMemberRole,
   type UserEventItemDTO,
   type UserMessageItemDTO,
   type UserReportItemDTO,
@@ -35,13 +36,15 @@ import {
   useUserReports,
 } from "@/features/users/use-users"
 import { isKeyboardActivationKey } from "@/components/shared/keyboard-activation"
-import { ORG_ROLE_LABEL, ORG_ROLE_PILL } from "@/features/orgs/org-members"
+import { ORG_ROLE_LABEL, ORG_ROLE_PILL, menuFocusIndex } from "@/features/orgs/org-members"
 import {
   userOrganizationFocus,
   userOrganizationsView,
   type UserOrganization,
 } from "@/features/users/user-organizations"
 import { getUserMessageDestination } from "./profile-activity-navigation"
+import { userSearchTerm } from "./user-search"
+import { isNotFound } from "@/lib/api"
 import { useNav, useToast, type PageId } from "@/store/ui-store"
 import type { SectionPageProps } from "@/components/shell/page-registry"
 
@@ -112,7 +115,9 @@ function ProfileReportRow({ r, nav }: { r: UserReportItemDTO; nav: NavFn }) {
       tabIndex={0}
       onClick={open}
       onKeyDown={(e) => {
-        if (e.key === "Enter") open()
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        open()
       }}
     >
       <span className="prow-pin" title={REPORT_CATEGORY_LABELS[r.category]}>
@@ -133,8 +138,16 @@ function ProfileReportRow({ r, nav }: { r: UserReportItemDTO; nav: NavFn }) {
   )
 }
 
+const EVENT_ROLE_VIEW: Record<CleanupMemberRole, { verb: string; pill: string | null }> = {
+  organizer: { verb: "Organized", pill: "Organizer" },
+  cohost: { verb: "Co-hosted", pill: "Co-host" },
+  coordinator: { verb: "Coordinated", pill: "Coordinator" },
+  staff: { verb: "Staffed", pill: "Staff" },
+  member: { verb: "Joined", pill: null },
+}
+
 function ProfileEventRow({ e, nav }: { e: UserEventItemDTO; nav: NavFn }) {
-  const organized = e.role === "organizer"
+  const role = EVENT_ROLE_VIEW[e.role] ?? EVENT_ROLE_VIEW.member
   const open = () => nav("events", e.id)
   return (
     <div
@@ -143,7 +156,9 @@ function ProfileEventRow({ e, nav }: { e: UserEventItemDTO; nav: NavFn }) {
       tabIndex={0}
       onClick={open}
       onKeyDown={(ev) => {
-        if (ev.key === "Enter") open()
+        if (!isKeyboardActivationKey(ev.key)) return
+        ev.preventDefault()
+        open()
       }}
     >
       <span className="prow-ico hue-moss">
@@ -151,7 +166,7 @@ function ProfileEventRow({ e, nav }: { e: UserEventItemDTO; nav: NavFn }) {
       </span>
       <div className="prow-body">
         <div className="prow-title">
-          {organized ? "Organized" : "Joined"} the {e.title}
+          {role.verb} the {e.title}
         </div>
         <div className="prow-meta">
           {!isMissing(e.place) && (
@@ -160,10 +175,10 @@ function ProfileEventRow({ e, nav }: { e: UserEventItemDTO; nav: NavFn }) {
               <span className="sep"> · </span>
             </>
           )}
-          {e.attendees} neighbors joined
+          {e.attendees} {e.attendees === 1 ? "neighbor" : "neighbors"} joined
         </div>
       </div>
-      {organized && <span className="pill status-progress tight">Organizer</span>}
+      {role.pill && <span className="pill status-progress tight">{role.pill}</span>}
       <span className="prow-age">{e.when}</span>
     </div>
   )
@@ -180,28 +195,28 @@ function ProfileMessageRow({
   removing: boolean
   nav: NavFn
 }) {
-  const userDeleted = !!m.deletedAt
+  const removed = !!m.deletedAt
   const linkTo: { page: PageId; id: string } | null = getUserMessageDestination(m)
   const open = linkTo ? () => nav(linkTo.page, linkTo.id) : undefined
   const content = (
     <>
       <span className="prow-ico hue-sky">
-        {userDeleted ? <Icons.Trash size={14} /> : <Icons.MessageSquare size={14} />}
+        {removed ? <Icons.Trash size={14} /> : <Icons.MessageSquare size={14} />}
       </span>
-      <div className="prow-body">
-        <div className="prow-title">
-          {userDeleted && <span className="pill status-flag tight">[deleted by user]</span>} {m.text}
-        </div>
-        <div className="prow-meta">
+      <span className="prow-body">
+        <span className="prow-title">
+          {removed && <span className="pill status-flag tight">Removed</span>} {m.text}
+        </span>
+        <span className="prow-meta">
           {m.source && <span className="pill priority-low tight">{SOURCE_LABEL[m.source]}</span>} in{" "}
           {m.thread}
-        </div>
-      </div>
+        </span>
+      </span>
       <span className="prow-age">{m.when}</span>
     </>
   )
   return (
-    <div className={`prow ${userDeleted ? "removed" : ""}`}>
+    <div className={`prow ${removed ? "removed" : ""}`}>
       {open ? (
         <button type="button" className="prow-main row-link" onClick={open}>
           {content}
@@ -209,7 +224,7 @@ function ProfileMessageRow({
       ) : (
         <div className="prow-main">{content}</div>
       )}
-      {!userDeleted && (
+      {!removed && (
         <button
           className="btn sm danger"
           disabled={removing}
@@ -225,27 +240,43 @@ function ProfileMessageRow({
 
 type TabId = "reports" | "events" | "messages"
 
+interface SubListQuery {
+  hasNextPage: boolean
+  isFetchingNextPage: boolean
+  fetchNextPage: () => unknown
+}
+
+function LoadMore({ query }: { query: SubListQuery }) {
+  if (!query.hasNextPage) return null
+  return (
+    <button
+      type="button"
+      className="btn load-more"
+      disabled={query.isFetchingNextPage}
+      onClick={() => void query.fetchNextPage()}
+    >
+      {query.isFetchingNextPage ? "Loading…" : "Load more"}
+    </button>
+  )
+}
+
 function UserActivity({ userId, tab }: { userId: string; tab: TabId }) {
   const nav = useNav()
   const reports = useUserReports(tab === "reports" ? userId : null)
   const events = useUserEvents(tab === "events" ? userId : null)
   const messages = useUserMessages(tab === "messages" ? userId : null)
   const removeMsg = useRemoveUserMessage()
-  const toast = useToast()
 
   const onRemoveMessage = async (m: UserMessageItemDTO) => {
     const reason = await promptDialog({ title: "Remove message", label: "Reason (optional)" })
     if (reason === null) return
-    removeMsg.mutate(
-      { id: userId, messageId: m.id, ...(reason ? { reason } : {}) },
-      { onSuccess: () => toast("Message removed") },
-    )
+    removeMsg.mutate({ id: userId, messageId: m.id, ...(reason ? { reason } : {}) })
   }
 
   if (tab === "reports") {
     if (reports.isLoading) return <LoadingState label="Loading reports..." />
     if (reports.isError) return <ErrorState error={reports.error} onRetry={() => reports.refetch()} />
-    const items = reports.data?.items ?? []
+    const items = reports.data?.pages.flatMap((p) => p.items) ?? []
     if (!items.length)
       return (
         <EmptyState
@@ -259,6 +290,7 @@ function UserActivity({ userId, tab }: { userId: string; tab: TabId }) {
         {items.map((r) => (
           <ProfileReportRow key={r.id} r={r} nav={nav} />
         ))}
+        <LoadMore query={reports} />
       </>
     )
   }
@@ -266,7 +298,7 @@ function UserActivity({ userId, tab }: { userId: string; tab: TabId }) {
   if (tab === "events") {
     if (events.isLoading) return <LoadingState label="Loading cleanups..." />
     if (events.isError) return <ErrorState error={events.error} onRetry={() => events.refetch()} />
-    const items = events.data?.items ?? []
+    const items = events.data?.pages.flatMap((p) => p.items) ?? []
     if (!items.length)
       return (
         <EmptyState
@@ -280,13 +312,14 @@ function UserActivity({ userId, tab }: { userId: string; tab: TabId }) {
         {items.map((e) => (
           <ProfileEventRow key={e.id} e={e} nav={nav} />
         ))}
+        <LoadMore query={events} />
       </>
     )
   }
 
   if (messages.isLoading) return <LoadingState label="Loading messages..." />
   if (messages.isError) return <ErrorState error={messages.error} onRetry={() => messages.refetch()} />
-  const items = messages.data?.items ?? []
+  const items = messages.data?.pages.flatMap((p) => p.items) ?? []
   if (!items.length)
     return (
       <EmptyState
@@ -306,6 +339,7 @@ function UserActivity({ userId, tab }: { userId: string; tab: TabId }) {
           nav={nav}
         />
       ))}
+      <LoadMore query={messages} />
     </>
   )
 }
@@ -376,15 +410,19 @@ function UserDetail({ userId }: { userId: string }) {
   const setReportVerified = useSetUserReportVerified()
 
   const [tab, setTab] = React.useState<TabId>("reports")
+  const tabsId = React.useId()
+  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([])
 
   if (q.isLoading) return <LoadingState label="Loading account..." />
-  if (q.isError) return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  if (q.isError && !isNotFound(q.error)) {
+    return <ErrorState error={q.error} onRetry={() => q.refetch()} />
+  }
   const user = q.data
   if (!user) {
     return (
       <EmptyState
-        title="No user selected"
-        sub="Pick an account from the list."
+        title="User not found"
+        sub="No account has this ID."
         icon={<Icons.Users size={20} />}
       />
     )
@@ -400,13 +438,7 @@ function UserDetail({ userId }: { userId: string }) {
   ]
 
   const onFlag = () => {
-    flag.mutate(
-      { id: user.id },
-      {
-        onSuccess: () =>
-          toast(user.flagged ? `${user.name} · flag cleared` : `${user.name} · account flagged`),
-      },
-    )
+    flag.mutate({ request: { id: user.id }, name: user.name, wasFlagged: user.flagged })
   }
 
   const onBan = async () => {
@@ -418,10 +450,7 @@ function UserDetail({ userId }: { userId: string }) {
       confirmLabel: "Ban",
     })
     if (!ok) return
-    setStatus.mutate(
-      { id: user.id, status: "banned" },
-      { onSuccess: () => toast(`${user.name} · account banned`) },
-    )
+    setStatus.mutate({ request: { id: user.id, status: "banned" }, name: user.name })
   }
 
   const onSuspend = async () => {
@@ -433,10 +462,7 @@ function UserDetail({ userId }: { userId: string }) {
       confirmLabel: "Suspend",
     })
     if (!ok) return
-    setStatus.mutate(
-      { id: user.id, status: "suspended" },
-      { onSuccess: () => toast(`${user.name} · account suspended`) },
-    )
+    setStatus.mutate({ request: { id: user.id, status: "suspended" }, name: user.name })
   }
 
   const onReactivate = async () => {
@@ -448,33 +474,22 @@ function UserDetail({ userId }: { userId: string }) {
       confirmLabel: verb,
     })
     if (!ok) return
-    setStatus.mutate(
-      { id: user.id, status: "active" },
-      { onSuccess: () => toast(`${user.name} · account reactivated`) },
-    )
+    setStatus.mutate({ request: { id: user.id, status: "active" }, name: user.name })
   }
 
   const onCopyId = () => {
-    const id = user.id
-    void Promise.resolve(navigator?.clipboard?.writeText(id))
-      .then(() => toast("User ID copied"))
-      .catch(() => toast("Couldn't copy — select the ID manually"))
+    const copyFailed = () => toast("Couldn't copy. Select the ID manually.", "error")
+    // The Clipboard API exists only in a secure context; without it nothing is copied.
+    if (!navigator.clipboard) {
+      copyFailed()
+      return
+    }
+    navigator.clipboard.writeText(user.id).then(() => toast("User ID copied"), copyFailed)
   }
 
   const isReportVerified = !!user.reportVerified
   const onToggleReportVerified = () => {
-    const next = !isReportVerified
-    setReportVerified.mutate(
-      { id: user.id, value: next },
-      {
-        onSuccess: () =>
-          toast(
-            next
-              ? `${user.name} · report-verified`
-              : `${user.name} · report-verification removed`,
-          ),
-      },
-    )
+    setReportVerified.mutate({ request: { id: user.id, value: !isReportVerified }, name: user.name })
   }
 
   return (
@@ -548,23 +563,44 @@ function UserDetail({ userId }: { userId: string }) {
 
       <UserOrganizations user={user} nav={nav} />
 
-      <div className="profile-tabs">
-        {tabs.map((t) => {
-          const n = tabCount(user, t.id)
+      <div className="profile-tabs" role="tablist" aria-label="Activity">
+        {tabs.map((t, i) => {
+          const selected = tab === t.id
           return (
             <button
               key={t.id}
-              className={`profile-tab ${tab === t.id ? "on" : ""}`}
+              ref={(el) => {
+                tabRefs.current[i] = el
+              }}
+              type="button"
+              role="tab"
+              id={`${tabsId}-tab-${t.id}`}
+              aria-selected={selected}
+              aria-controls={`${tabsId}-panel`}
+              tabIndex={selected ? 0 : -1}
+              className={`profile-tab ${selected ? "on" : ""}`}
               onClick={() => setTab(t.id)}
+              onKeyDown={(e) => {
+                const next = menuFocusIndex(e.key, i, tabs.length, "horizontal")
+                if (next === null) return
+                e.preventDefault()
+                setTab(tabs[next]!.id)
+                tabRefs.current[next]?.focus()
+              }}
             >
               {t.label}
-              <span className="profile-tab-n">{n}</span>
+              <span className="profile-tab-n">{tabCount(user, t.id)}</span>
             </button>
           )
         })}
       </div>
 
-      <div className="profile-list">
+      <div
+        className="profile-list"
+        role="tabpanel"
+        id={`${tabsId}-panel`}
+        aria-labelledby={`${tabsId}-tab-${tab}`}
+      >
         <UserActivity userId={user.id} tab={tab} />
       </div>
 
@@ -627,13 +663,24 @@ function UserRow({
 }) {
   const statusView = userStatusView(user.status)
   return (
-    <div className={`qrow ${selected ? "selected" : ""}`} onClick={onClick}>
+    <div
+      className={`qrow ${selected ? "selected" : ""}`}
+      role="button"
+      tabIndex={0}
+      aria-current={selected ? "true" : undefined}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (!isKeyboardActivationKey(e.key)) return
+        e.preventDefault()
+        onClick()
+      }}
+    >
       <UserAvatar user={user} />
       <div className="body">
         <div className="top">
           <span className="title">{user.name}</span>
           {user.flagged && (
-            <span className="rep-flag-dot" title="Flagged">
+            <span className="rep-flag-dot" role="img" aria-label="Flagged" title="Flagged">
               <Icons.Flag size={10} />
             </span>
           )}
@@ -646,9 +693,13 @@ function UserRow({
               <span className="sep">·</span>
             </>
           )}
-          <span className="strong">{user.reports} reports</span>
+          <span className="strong">
+            {user.reports} {user.reports === 1 ? "report" : "reports"}
+          </span>
           <span className="sep">·</span>
-          <span>{user.cleanups} cleanups</span>
+          <span>
+            {user.cleanups} {user.cleanups === 1 ? "cleanup" : "cleanups"}
+          </span>
         </div>
       </div>
       <div className="trailing">
@@ -671,10 +722,12 @@ export function UsersPage({ focusId }: SectionPageProps) {
   const debouncedQuery = useDebounced(query, 250)
   const [selId, setSelId] = React.useState<string | null>(focusId)
 
+  const searchTerm = userSearchTerm(debouncedQuery)
   const listParams: AdminUserListQuery = {
     ...(filter === "all" ? {} : { filter }),
-    ...(debouncedQuery.trim() ? { q: debouncedQuery.trim() } : {}),
+    ...(searchTerm ? { q: searchTerm } : {}),
   }
+  const listKey = JSON.stringify(listParams)
   const listQuery = useUserListInfinite(listParams)
   const items = React.useMemo(
     () => listQuery.data?.pages.flatMap((p) => p.items) ?? [],
@@ -686,10 +739,23 @@ export function UsersPage({ focusId }: SectionPageProps) {
   React.useEffect(() => {
     if (focusId) setSelId(focusId)
   }, [focusId])
+  // The selection rules every master-detail page follows: only the first load picks on the operator's
+  // behalf. A pick that a filter or search leaves out stays open, because the detail reads it by id. A
+  // pick that drops out of the same list after a refetch (a ban under the Active chip, say) clears, so
+  // the pane never jumps to another account's Ban button. Each decision waits for data fetched for the
+  // current params: a cached page that is refetching may predate the change that matters.
+  const [autoPick, setAutoPick] = React.useState(focusId === null)
+  const seenIn = React.useRef<{ id: string; list: string } | null>(null)
   React.useEffect(() => {
-    if (!selId && items.length) setSelId(items[0]!.id)
-    if (selId && items.length && !items.some((x) => x.id === selId)) setSelId(items[0]!.id)
-  }, [items, selId])
+    if (!listQuery.isSuccess || listQuery.isFetching) return
+    if (selId === null) {
+      if (autoPick && items.length) setSelId(items[0]!.id)
+      return
+    }
+    setAutoPick(false)
+    if (items.some((x) => x.id === selId)) seenIn.current = { id: selId, list: listKey }
+    else if (seenIn.current?.id === selId && seenIn.current.list === listKey) setSelId(null)
+  }, [listQuery.isSuccess, listQuery.isFetching, items, selId, listKey, autoPick])
 
   return (
     <>
@@ -721,6 +787,7 @@ export function UsersPage({ focusId }: SectionPageProps) {
           <Icons.Search size={14} />
           <input
             type="text"
+            aria-label="Search accounts"
             placeholder="Search name, handle, city…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
diff --git a/apps/admin/src/hooks/use-admin-auth.test.tsx b/apps/admin/src/hooks/use-admin-auth.test.tsx
index 86c9f5c..4cf9507 100644
--- a/apps/admin/src/hooks/use-admin-auth.test.tsx
+++ b/apps/admin/src/hooks/use-admin-auth.test.tsx
@@ -104,16 +104,20 @@ describe("useOperatorBootstrap: session reuse", () => {
     expect(useAuthStore.getState().csrfToken).toBe("csrf-old")
   })
 
-  it("marks a non-operator session authenticated but not an operator (current behavior)", async () => {
+  it("refuses a non-operator session as forbidden instead of storing it", async () => {
     const citizen: AdminOperatorDTO = { ...OPERATOR, role: "citizen" }
     apiMock.adminSession.mockResolvedValue({ authenticated: true, operator: citizen, csrfToken: "c" })
     const client = makeTestQueryClient()
     const boot = renderHook(() => useOperatorBootstrap(), { wrapper: wrapperFor(client) })
+    let outcome = ""
     await act(async () => {
-      await boot.result.current()
+      outcome = await boot.result.current()
     })
+    expect(outcome).toBe("forbidden")
+    expect(apiMock.adminAccessExchange).not.toHaveBeenCalled()
     const session = renderHook(() => useOperatorSession(), { wrapper: wrapperFor(client) })
-    expect(session.result.current).toEqual({ isOperator: false, operator: citizen, status: "authenticated" })
+    expect(session.result.current).toEqual({ isOperator: false, operator: null, status: "forbidden" })
+    expect(useAuthStore.getState().csrfToken).toBeNull()
   })
 
   it("sets status to loading while the session check is in flight", async () => {
@@ -202,15 +206,17 @@ describe("useOperatorBootstrap: Access exchange", () => {
     expect(useAuthStore.getState()).toMatchObject({ status: "forbidden", operator: null })
   })
 
-  it("leaves a previously stored operator and CSRF token in place on forbidden (current behavior)", async () => {
+  it("drops a previously stored operator and CSRF token on forbidden", async () => {
     useAuthStore.setState({ operator: OPERATOR, csrfToken: "csrf-old", status: "authenticated" })
     apiMock.adminAccessExchange.mockRejectedValue(new AppError(ErrorCode.FORBIDDEN, "no"))
     expect(await bootstrap()).toBe("forbidden")
-    expect(useAuthStore.getState()).toMatchObject({
-      status: "forbidden",
-      operator: OPERATOR,
-      csrfToken: "csrf-old",
-    })
+    expect(useAuthStore.getState()).toMatchObject({ status: "forbidden", operator: null, csrfToken: null })
+  })
+
+  it("refuses an exchanged session whose user is not an operator", async () => {
+    apiMock.adminAccessExchange.mockResolvedValue(loginResponse({ role: "citizen" }, "csrf-x"))
+    expect(await bootstrap()).toBe("forbidden")
+    expect(useAuthStore.getState()).toMatchObject({ status: "forbidden", operator: null, csrfToken: null })
   })
 
   it.each([
@@ -225,15 +231,11 @@ describe("useOperatorBootstrap: Access exchange", () => {
     expect(useAuthStore.getState().status).toBe("anonymous")
   })
 
-  it("leaves a previously stored operator in place on a retryable error (current behavior)", async () => {
+  it("drops a previously stored operator and CSRF token on a retryable error", async () => {
     useAuthStore.setState({ operator: OPERATOR, csrfToken: "csrf-old", status: "authenticated" })
     apiMock.adminAccessExchange.mockRejectedValue(new TypeError("Failed to fetch"))
     expect(await bootstrap()).toBe("error")
-    expect(useAuthStore.getState()).toMatchObject({
-      status: "anonymous",
-      operator: OPERATOR,
-      csrfToken: "csrf-old",
-    })
+    expect(useAuthStore.getState()).toMatchObject({ status: "anonymous", operator: null, csrfToken: null })
   })
 
   it("can be retried after an error", async () => {
@@ -251,6 +253,27 @@ describe("useOperatorBootstrap: Access exchange", () => {
     expect(useAuthStore.getState().status).toBe("authenticated")
   })
 
+  it("shares one attempt between overlapping calls, so a double mount mints one session", async () => {
+    let resolveExchange: (value: AdminLoginResponse) => void = () => undefined
+    apiMock.adminAccessExchange.mockReturnValue(
+      new Promise<AdminLoginResponse>((resolve) => {
+        resolveExchange = resolve
+      }),
+    )
+    const first = renderBootstrap()
+    const second = renderBootstrap()
+    let outcomes: string[] = []
+    await act(async () => {
+      const pending = Promise.all([first.result.current(), second.result.current()])
+      await vi.waitFor(() => expect(apiMock.adminAccessExchange).toHaveBeenCalled())
+      resolveExchange(loginResponse({}, "csrf-x"))
+      outcomes = await pending
+    })
+    expect(outcomes).toEqual(["ok", "ok"])
+    expect(apiMock.adminSession).toHaveBeenCalledTimes(1)
+    expect(apiMock.adminAccessExchange).toHaveBeenCalledTimes(1)
+  })
+
   it("returns a stable callback across renders", () => {
     const { result, rerender } = renderBootstrap()
     const first = result.current
@@ -281,20 +304,40 @@ describe("useAdminLogout", () => {
     client.setQueryData(["admin", "reports", "list", null], { items: [] })
     await logout(client)
     expect(apiMock.adminLogout).toHaveBeenCalledTimes(1)
-    expect(useAuthStore.getState()).toMatchObject({ status: "anonymous", operator: null, csrfToken: null })
+    expect(useAuthStore.getState()).toMatchObject({ status: "signing-out", operator: null, csrfToken: null })
     expect(client.getQueryCache().getAll()).toHaveLength(0)
     expect(assign).toHaveBeenCalledTimes(1)
     expect(assign).toHaveBeenCalledWith(`${API_BASE_URL}/cdn-cgi/access/logout`)
   })
 
-  it("clears local state before navigating", async () => {
+  it("clears local state into signing-out, not the signed-out screen, before navigating", async () => {
     apiMock.adminLogout.mockResolvedValue({ ok: true })
-    let statusAtNavigation: string | null = null
+    let stateAtNavigation: unknown = null
     assign.mockImplementation(() => {
-      statusAtNavigation = useAuthStore.getState().status
+      const { status, operator, csrfToken } = useAuthStore.getState()
+      stateAtNavigation = { status, operator, csrfToken }
     })
     await logout(makeTestQueryClient())
-    expect(statusAtNavigation).toBe("anonymous")
+    expect(stateAtNavigation).toEqual({ status: "signing-out", operator: null, csrfToken: null })
+  })
+
+  it("reports signing-out while the revoke call is in flight and still sends the CSRF token", async () => {
+    let resolveLogout: (value: { ok: true }) => void = () => undefined
+    apiMock.adminLogout.mockReturnValue(
+      new Promise((resolve) => {
+        resolveLogout = resolve
+      }),
+    )
+    const { result } = renderHook(() => useAdminLogout(), { wrapper: wrapperFor(makeTestQueryClient()) })
+    let pending: Promise<void> = Promise.resolve()
+    act(() => {
+      pending = result.current()
+    })
+    expect(useAuthStore.getState()).toMatchObject({ status: "signing-out", csrfToken: "csrf-s" })
+    await act(async () => {
+      resolveLogout({ ok: true })
+      await pending
+    })
   })
 
   it.each([
@@ -305,7 +348,7 @@ describe("useAdminLogout", () => {
     const client = makeTestQueryClient()
     client.setQueryData(["admin", "home", "summary"], { n: 1 })
     await logout(client)
-    expect(useAuthStore.getState()).toMatchObject({ status: "anonymous", operator: null, csrfToken: null })
+    expect(useAuthStore.getState()).toMatchObject({ status: "signing-out", operator: null, csrfToken: null })
     expect(client.getQueryCache().getAll()).toHaveLength(0)
     expect(assign).toHaveBeenCalledWith(`${API_BASE_URL}/cdn-cgi/access/logout`)
   })
diff --git a/apps/admin/src/hooks/use-admin-auth.ts b/apps/admin/src/hooks/use-admin-auth.ts
index 722d7a8..de09cd5 100644
--- a/apps/admin/src/hooks/use-admin-auth.ts
+++ b/apps/admin/src/hooks/use-admin-auth.ts
@@ -2,7 +2,12 @@
 
 import * as React from "react"
 import { useQueryClient } from "@tanstack/react-query"
-import { ErrorCode, type AdminLoginResponse } from "@civfix/shared"
+import {
+  ErrorCode,
+  type AdminLoginResponse,
+  type AdminOperatorDTO,
+  type AdminSessionResponse,
+} from "@civfix/shared"
 
 import { api, toAppError } from "@/lib/api"
 import { navigateToAccessLogout } from "@/lib/access-auth"
@@ -31,7 +36,7 @@ export function useOperatorSession() {
 }
 
 /** Map the AdminLoginResponse `user` (Phase-1 SessionResponse shape) onto the operator DTO the store holds. */
-function operatorFromLogin(res: AdminLoginResponse) {
+function operatorFromLogin(res: AdminLoginResponse): AdminOperatorDTO {
   return {
     id: res.user.id,
     name: res.user.displayName,
@@ -44,12 +49,67 @@ function operatorFromLogin(res: AdminLoginResponse) {
  * Outcome of an operator bootstrap attempt:
  *  - "ok":        an operator session is established (reused or freshly minted); the gate unmounts.
  *  - "forbidden": Access authenticated the user but the email is not on the operator allowlist (a clean
- *                 403). Terminal - show the not-authorized message.
+ *                 403), or the session belongs to a non-operator. Terminal - show the not-authorized
+ *                 message.
  *  - "error":     the exchange could not be completed (Access misconfigured / backend unreachable /
  *                 transient). The login screen offers a retry.
  */
 export type BootstrapOutcome = "ok" | "forbidden" | "error"
 
+// A non-operator would pass the gate's session check yet fail selectIsOperator, so storing it would
+// send the gate's Try again straight back to the same session.
+function adopt(operator: AdminOperatorDTO, csrfToken: string | undefined): BootstrapOutcome {
+  const store = useAuthStore.getState()
+  if (operator.role !== "operator") {
+    store.clear("forbidden")
+    return "forbidden"
+  }
+  store.setSession({ operator, csrfToken })
+  return "ok"
+}
+
+async function reusableSession(): Promise<AdminSessionResponse | null> {
+  try {
+    return await api.adminSession()
+  } catch {
+    // A failed check (expired, transient, network) only means there is nothing to reuse; the
+    // exchange below decides the outcome.
+    return null
+  }
+}
+
+async function establishOperatorSession(): Promise<BootstrapOutcome> {
+  useAuthStore.getState().setStatus("loading")
+
+  const session = await reusableSession()
+  if (session?.authenticated && session.operator) return adopt(session.operator, session.csrfToken)
+
+  try {
+    const res = await api.adminAccessExchange()
+    return adopt(operatorFromLogin(res), res.csrfToken)
+  } catch (err) {
+    // A clean 403 means Access authenticated the user but they are not on the operator allowlist.
+    if (toAppError(err).code === ErrorCode.FORBIDDEN) {
+      useAuthStore.getState().clear("forbidden")
+      return "forbidden"
+    }
+    // Anything else (Access not configured / backend down / network) is a retryable error.
+    useAuthStore.getState().clear()
+    return "error"
+  }
+}
+
+// React StrictMode runs the hydrator's effect twice and Try again can be pressed mid-attempt; every
+// exchange mints a session and writes an operator.login audit row, so overlapping callers share one.
+let inflight: Promise<BootstrapOutcome> | null = null
+
+function bootstrapOperatorSession(): Promise<BootstrapOutcome> {
+  inflight ??= establishOperatorSession().finally(() => {
+    inflight = null
+  })
+  return inflight
+}
+
 /**
  * Establish the operator session and update the auth store. Returns a callback resolving to a
  * {@link BootstrapOutcome}. Used by the AuthHydrator on mount and by the login screen's retry button.
@@ -60,60 +120,34 @@ export type BootstrapOutcome = "ok" | "forbidden" | "error"
  * Access JWT (POST /admin/auth/access/exchange) for one.
  */
 export function useOperatorBootstrap(): () => Promise<BootstrapOutcome> {
-  const setSession = useAuthStore((s) => s.setSession)
-  const setStatus = useAuthStore((s) => s.setStatus)
-
-  return React.useCallback(async () => {
-    setStatus("loading")
-
-    // 1. Reuse an existing valid operator session (no re-mint, no audit churn on reload).
-    try {
-      const session = await api.adminSession()
-      if (session.authenticated && session.operator) {
-        setSession({ operator: session.operator, csrfToken: session.csrfToken })
-        return "ok"
-      }
-    } catch {
-      // Session check failed (transient) — fall through to the exchange.
-    }
-
-    // 2. No reusable session — exchange the Access JWT (injected by the edge on this same-origin request).
-    try {
-      const res = await api.adminAccessExchange()
-      setSession({ operator: operatorFromLogin(res), csrfToken: res.csrfToken })
-      return "ok"
-    } catch (err) {
-      // A clean 403 means Access authenticated the user but they are not on the operator allowlist.
-      if (toAppError(err).code === ErrorCode.FORBIDDEN) {
-        setStatus("forbidden")
-        return "forbidden"
-      }
-      // Anything else (Access not configured / backend down / network) is a retryable error.
-      setStatus("anonymous")
-      return "error"
-    }
-  }, [setSession, setStatus])
+  return bootstrapOperatorSession
 }
 
 /**
  * Sign the operator out: POST /admin/auth/logout (CSRF-protected), clear local state + cache, then end
  * the Cloudflare Access session by navigating to /cdn-cgi/access/logout (doc 16 sec 6.5) - otherwise the
  * next visit silently re-authenticates from the still-valid Access cookie.
+ *
+ * The status turns signing-out first, so the gate shows a signing-out screen instead of the dashboard
+ * or the "couldn't establish your session" screen while the request and navigation run.
  */
 export function useAdminLogout(): () => Promise<void> {
+  const setStatus = useAuthStore((s) => s.setStatus)
   const clear = useAuthStore((s) => s.clear)
   const queryClient = useQueryClient()
 
   return React.useCallback(async () => {
+    setStatus("signing-out")
     try {
       await api.adminLogout()
     } catch {
-      // Even if the call fails (already expired, backend down), drop local state.
+      // A failed revoke (already expired, backend down) must not keep this tab signed in; the Access
+      // logout below still ends the SSO session.
     }
-    clear()
+    clear("signing-out")
     // Drop all admin data so a future operator does not see stale cache.
     queryClient.clear()
     // End the Access session and leave the page; this navigation does not return here.
     navigateToAccessLogout()
-  }, [clear, queryClient])
+  }, [setStatus, clear, queryClient])
 }
diff --git a/apps/admin/src/lib/api.ts b/apps/admin/src/lib/api.ts
index 29f9b02..5085938 100644
--- a/apps/admin/src/lib/api.ts
+++ b/apps/admin/src/lib/api.ts
@@ -53,14 +53,7 @@ export function getApiClient(): ApiClient {
       "x-client": "web",
     },
     getCsrfToken: () => getCsrfToken(),
-    onUnauthorized: () => {
-      // Flip to signed-out; the login gate takes over. Guard against running before hydration.
-      try {
-        useAuthStore.getState().clear()
-      } catch {
-        // no-op: store not ready
-      }
-    },
+    onUnauthorized: () => useAuthStore.getState().clear(),
   })
   return cachedClient
 }
diff --git a/apps/admin/src/lib/csv.test.ts b/apps/admin/src/lib/csv.test.ts
index fda0510..1abe3d5 100644
--- a/apps/admin/src/lib/csv.test.ts
+++ b/apps/admin/src/lib/csv.test.ts
@@ -1,6 +1,7 @@
-import { describe, expect, it } from "vitest"
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest"
 
-import { toCsv } from "./csv"
+import { downloadCsv, toCsv } from "./csv"
 
 describe("toCsv", () => {
   it("quotes every cell and escapes embedded quotes", () => {
@@ -25,3 +26,46 @@ describe("toCsv", () => {
     expect(toCsv([["-25.05", -3, "0.00"]])).toBe('"-25.05","-3","0.00"')
   })
 })
+
+describe("downloadCsv", () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  // jsdom's Blob has no text(); FileReader is its supported read path.
+  function readBytes(blob: Blob): Promise<Uint8Array> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer))
+      reader.onerror = () => reject(reader.error)
+      reader.readAsArrayBuffer(blob)
+    })
+  }
+
+  function captureBlob(): { blob: () => Blob } {
+    let captured: Blob | null = null
+    URL.createObjectURL = vi.fn((b: Blob) => {
+      captured = b
+      return "blob:csv"
+    })
+    URL.revokeObjectURL = vi.fn()
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined)
+    return {
+      blob: () => {
+        if (!captured) throw new Error("no blob was downloaded")
+        return captured
+      },
+    }
+  }
+
+  it("declares UTF-8 and starts with a byte order mark so spreadsheet apps decode accents", async () => {
+    const download = captureBlob()
+    downloadCsv("jurisdictions.csv", [["Peñasco", "Bayamón"]])
+
+    const blob = download.blob()
+    expect(blob.type).toBe("text/csv;charset=utf-8")
+    const bytes = await readBytes(blob)
+    expect([...bytes.slice(0, 3)]).toEqual([0xef, 0xbb, 0xbf])
+    expect(new TextDecoder().decode(bytes.slice(3))).toBe('"Peñasco","Bayamón"')
+  })
+})
diff --git a/apps/admin/src/lib/csv.ts b/apps/admin/src/lib/csv.ts
index 079276b..6869293 100644
--- a/apps/admin/src/lib/csv.ts
+++ b/apps/admin/src/lib/csv.ts
@@ -17,9 +17,12 @@ export function toCsv(rows: readonly (readonly CsvCell[])[]): string {
     .join("\n")
 }
 
+// Excel reads a CSV without a byte order mark in the system's legacy code page, garbling accented names.
+const UTF8_BOM = "\uFEFF"
+
 export function downloadCsv(filename: string, rows: readonly (readonly CsvCell[])[]): void {
   if (typeof document === "undefined") return
-  const blob = new Blob([toCsv(rows)], { type: "text/csv" })
+  const blob = new Blob([UTF8_BOM, toCsv(rows)], { type: "text/csv;charset=utf-8" })
   const url = URL.createObjectURL(blob)
   const link = document.createElement("a")
   link.href = url
diff --git a/apps/admin/src/lib/error-messages.test.ts b/apps/admin/src/lib/error-messages.test.ts
index c0ee7ad..2e8eb78 100644
--- a/apps/admin/src/lib/error-messages.test.ts
+++ b/apps/admin/src/lib/error-messages.test.ts
@@ -48,17 +48,48 @@ describe("errorMessage server message and fallback", () => {
     expect(errorMessage(foreignAppError(ErrorCode.FORBIDDEN, "Nope"))).toBe("Nope")
   })
 
-  it("shows a plain Error's message as INTERNAL", () => {
-    expect(errorMessage(new TypeError("Failed to fetch"))).toBe("Failed to fetch")
+  it("shows a plain Error's own message", () => {
+    expect(errorMessage(new Error("Upload failed (413). Please try again."))).toBe(
+      "Upload failed (413). Please try again.",
+    )
+  })
+
+  it.each([
+    "Failed to fetch",
+    "NetworkError when attempting to fetch resource.",
+    "Load failed",
+  ])("shows connection copy instead of the browser's fetch failure %j", (message) => {
+    expect(errorMessage(new TypeError(message))).toBe(
+      "Could not reach the server. Check your connection and try again.",
+    )
+    expect(errorMessage(new TypeError(message), {}, { fallback: "Try later" })).toBe(
+      "Could not reach the server. Check your connection and try again.",
+    )
+  })
+
+  it("keeps a code override ahead of the connection copy", () => {
+    expect(errorMessage(new TypeError("Failed to fetch"), { [ErrorCode.INTERNAL]: "Offline" })).toBe("Offline")
+  })
+
+  it("shows the fallback, not the connection copy, for a fetch failure when preferServerMessage is false", () => {
+    expect(
+      errorMessage(new TypeError("Failed to fetch"), {}, { preferServerMessage: false, fallback: "Try later" }),
+    ).toBe("Try later")
+  })
+
+  it("does not blame the connection for a TypeError from app code", () => {
+    expect(errorMessage(new TypeError("x is not a function"))).not.toBe(
+      "Could not reach the server. Check your connection and try again.",
+    )
   })
 
   it("shows the network fallback for a plain Error with no message", () => {
     expect(errorMessage(new Error(""))).toBe("Network request failed")
   })
 
-  it("shows \"Unknown error\" for a non-Error value rather than the fallback (current behavior)", () => {
-    expect(errorMessage("boom")).toBe("Unknown error")
-    expect(errorMessage(undefined, {}, { fallback: "Try later" })).toBe("Unknown error")
+  it("shows the fallback for a non-Error value", () => {
+    expect(errorMessage("boom")).toBe(GENERIC)
+    expect(errorMessage(undefined, {}, { fallback: "Try later" })).toBe("Try later")
   })
 
   it("uses the fallback for a non-Error value when preferServerMessage is false", () => {
@@ -169,9 +200,12 @@ describe("errorMessage field errors", () => {
     ).toBe("That slug is in use")
   })
 
-  it("returns an inherited Object.prototype member when a field value names one (current behavior)", () => {
-    expect(errorMessage(validation("bad", { slug: "toString" }), {}, { fields })).toBe(
-      Object.prototype.toString,
-    )
-  })
+  it.each(["toString", "constructor", "__proto__", "hasOwnProperty"])(
+    "ignores a field value %j that names an inherited Object.prototype member",
+    (value) => {
+      expect(errorMessage(validation("Server says no", { slug: value }), {}, { fields })).toBe(
+        "Server says no",
+      )
+    },
+  )
 })
diff --git a/apps/admin/src/lib/error-messages.ts b/apps/admin/src/lib/error-messages.ts
index 39fd0d9..8d99843 100644
--- a/apps/admin/src/lib/error-messages.ts
+++ b/apps/admin/src/lib/error-messages.ts
@@ -2,6 +2,16 @@ import type { ErrorCode } from "@civfix/shared"
 
 import { toAppError } from "@/lib/api"
 
+// fetch() rejects with a TypeError whose wording is the browser's (Chromium, Firefox, WebKit), and it
+// means the request never reached the API.
+const FETCH_FAILURE = /^(Failed to fetch|NetworkError when attempting to fetch resource\.?|Load failed)$/
+
+const NETWORK_FAILURE = "Could not reach the server. Check your connection and try again."
+
+function isFetchFailure(err: unknown): boolean {
+  return err instanceof TypeError && FETCH_FAILURE.test(err.message)
+}
+
 /**
  * Map a thrown value to friendly, user-actionable copy. Ported from community-web.
  *
@@ -13,8 +23,9 @@ import { toAppError } from "@/lib/api"
  *    `{ contactEmail: "unverified" }`), which is the only thing that tells two refusals with the same
  *    error code apart.
  *  - then `overrides[code]`.
- *  - otherwise, when `preferServerMessage` is true (default), the server-provided message is shown when
- *    non-empty, then `fallback`.
+ *  - otherwise, when `preferServerMessage` is true (default): a request that never reached the server
+ *    reads as a connection problem, and an Error's own message is shown when non-empty, then
+ *    `fallback`. A thrown non-Error carries no message, so it gets `fallback`.
  *  - set `preferServerMessage: false` to always use `fallback` for unmapped codes.
  */
 export function errorMessage(
@@ -31,12 +42,13 @@ export function errorMessage(
   if (opts.fields && e.fields) {
     for (const [field, byValue] of Object.entries(opts.fields)) {
       const value = e.fields[field]
-      const match = value === undefined ? undefined : byValue[value]
-      if (match !== undefined) return match
+      // The value is server data; only copy the caller wrote may match it, never an inherited member.
+      if (value !== undefined && Object.hasOwn(byValue, value)) return byValue[value]!
     }
   }
   const override = overrides[e.code]
   if (override !== undefined) return override
-  if (preferServerMessage) return e.message || fallback
-  return fallback
+  if (!preferServerMessage || !(err instanceof Error)) return fallback
+  if (isFetchFailure(err)) return NETWORK_FAILURE
+  return e.message || fallback
 }
diff --git a/apps/admin/src/lib/query-key-collisions.test.tsx b/apps/admin/src/lib/query-key-collisions.test.tsx
index 9cadb47..7d8765c 100644
--- a/apps/admin/src/lib/query-key-collisions.test.tsx
+++ b/apps/admin/src/lib/query-key-collisions.test.tsx
@@ -53,6 +53,8 @@ describe("list and infinite hooks mounted with equal params", () => {
         useEventList(PARAMS)
         useEventListInfinite(PARAMS)
       },
+      queryKeys.events.all,
+      queryKeys.events.page(PARAMS),
       queryKeys.events.list(PARAMS),
     ],
     [
@@ -62,6 +64,8 @@ describe("list and infinite hooks mounted with equal params", () => {
         useInboxList(PARAMS)
         useInboxListInfinite(PARAMS)
       },
+      queryKeys.inbox.all,
+      queryKeys.inbox.page(PARAMS),
       queryKeys.inbox.list(PARAMS),
     ],
     [
@@ -71,6 +75,8 @@ describe("list and infinite hooks mounted with equal params", () => {
         useMailList(PARAMS)
         useMailListInfinite(PARAMS)
       },
+      queryKeys.mail.all,
+      queryKeys.mail.page(PARAMS),
       queryKeys.mail.list(PARAMS),
     ],
     [
@@ -80,18 +86,10 @@ describe("list and infinite hooks mounted with equal params", () => {
         useModerationList(PARAMS)
         useModerationListInfinite(PARAMS)
       },
+      queryKeys.moderation.all,
+      queryKeys.moderation.page(PARAMS),
       queryKeys.moderation.list(PARAMS),
     ],
-  ] as const)(
-    "%s list hook shares one cache entry with its infinite hook (current behavior)",
-    async (_name, method, useBoth, key) => {
-      const client = await mountBoth(method, useBoth)
-      expect(client.getQueryCache().findAll({ queryKey: key, exact: true })).toHaveLength(1)
-      expect(client.getQueryCache().findAll({ queryKey: key.slice(0, 2) })).toHaveLength(1)
-    },
-  )
-
-  it.each([
     [
       "reports",
       "listAdminReports",
diff --git a/apps/admin/src/lib/query.test.ts b/apps/admin/src/lib/query.test.ts
index b167122..c7da1e1 100644
--- a/apps/admin/src/lib/query.test.ts
+++ b/apps/admin/src/lib/query.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "vitest"
+import { afterEach, describe, expect, it, vi } from "vitest"
 import { MutationObserver, type QueryClient } from "@tanstack/react-query"
 import { AppError, ErrorCode } from "@civfix/shared"
 
@@ -53,14 +53,20 @@ describe("makeQueryClient query defaults", () => {
     expect(retry(0, foreignAppError(ErrorCode.NOT_FOUND, "missing"))).toBe(false)
   })
 
-  it.each([ErrorCode.INTERNAL, ErrorCode.CONFLICT, ErrorCode.RATE_LIMITED])(
-    "retries %s while failureCount is below 2",
+  it("retries INTERNAL while failureCount is below 2", () => {
+    const retry = retryOf(makeQueryClient())
+    expect(retry(0, new AppError(ErrorCode.INTERNAL, "x"))).toBe(true)
+    expect(retry(1, new AppError(ErrorCode.INTERNAL, "x"))).toBe(true)
+    expect(retry(2, new AppError(ErrorCode.INTERNAL, "x"))).toBe(false)
+    expect(retry(3, new AppError(ErrorCode.INTERNAL, "x"))).toBe(false)
+  })
+
+  it.each([ErrorCode.RATE_LIMITED, ErrorCode.CONFLICT])(
+    "never retries %s, which a retry would only repeat or amplify",
     (code) => {
       const retry = retryOf(makeQueryClient())
-      expect(retry(0, new AppError(code, "x"))).toBe(true)
-      expect(retry(1, new AppError(code, "x"))).toBe(true)
-      expect(retry(2, new AppError(code, "x"))).toBe(false)
-      expect(retry(3, new AppError(code, "x"))).toBe(false)
+      expect(retry(0, new AppError(code, "x"))).toBe(false)
+      expect(retry(1, foreignAppError(code, "x"))).toBe(false)
     },
   )
 
@@ -76,9 +82,9 @@ describe("makeQueryClient mutation defaults", () => {
     expect(makeQueryClient().getDefaultOptions().mutations?.retry).toBe(false)
   })
 
-  it("toasts the server message of a failed mutation", async () => {
+  it("toasts the server message of a failed mutation in the error tone", async () => {
     await failMutation(makeQueryClient(), new AppError(ErrorCode.CONFLICT, "Slug already taken"))
-    expect(useUiStore.getState().toast?.text).toBe("Slug already taken")
+    expect(useUiStore.getState().toast).toMatchObject({ text: "Slug already taken", tone: "error" })
   })
 
   it("toasts the message of a foreign AppError", async () => {
@@ -91,9 +97,16 @@ describe("makeQueryClient mutation defaults", () => {
     expect(useUiStore.getState().toast?.text).toBe("Something went wrong. Please try again.")
   })
 
-  it("toasts \"Unknown error\" rather than the fallback for a non-error rejection (current behavior)", async () => {
+  it("toasts the generic copy for a non-error rejection", async () => {
     await failMutation(makeQueryClient(), "boom")
-    expect(useUiStore.getState().toast?.text).toBe("Unknown error")
+    expect(useUiStore.getState().toast?.text).toBe("Something went wrong. Please try again.")
+  })
+
+  it("toasts the connection copy, not the browser's fetch text, when the request never reached the server", async () => {
+    await failMutation(makeQueryClient(), new TypeError("Failed to fetch"))
+    expect(useUiStore.getState().toast?.text).toBe(
+      "Could not reach the server. Check your connection and try again.",
+    )
   })
 
   it("does not toast a successful mutation", async () => {
@@ -102,7 +115,7 @@ describe("makeQueryClient mutation defaults", () => {
     expect(useUiStore.getState().toast).toBeNull()
   })
 
-  it("does not toast when the mutation sets its own onError, which replaces the default", async () => {
+  it("still toasts when the mutation sets its own onError, and runs that handler too", async () => {
     const seen: unknown[] = []
     const observer = new MutationObserver(makeQueryClient(), {
       mutationFn: () => Promise.reject(new AppError(ErrorCode.CONFLICT, "own handler")),
@@ -112,8 +125,76 @@ describe("makeQueryClient mutation defaults", () => {
     })
     await observer.mutate().catch(() => undefined)
     expect(seen).toHaveLength(1)
+    expect(useUiStore.getState().toast?.text).toBe("own handler")
+  })
+
+  it("does not toast a mutation that shows its error inline", async () => {
+    const observer = new MutationObserver(makeQueryClient(), {
+      mutationFn: () => Promise.reject(new AppError(ErrorCode.CONFLICT, "shown by the form")),
+      meta: { errorToast: false },
+    })
+    await observer.mutate().catch(() => undefined)
+    expect(useUiStore.getState().toast).toBeNull()
+  })
+
+  it("toasts the mutation's own copy, built from the error and the variables, in the error tone", async () => {
+    const observer = new MutationObserver<unknown, Error, { name: string }>(makeQueryClient(), {
+      mutationFn: () => Promise.reject(new AppError(ErrorCode.CONFLICT, "taken")),
+      meta: {
+        errorMessage: (error: unknown, variables: { name: string }) =>
+          `${variables.name}: ${(error as Error).message}`,
+      },
+    })
+    await observer.mutate({ name: "River Keepers" }).catch(() => undefined)
+    expect(useUiStore.getState().toast).toMatchObject({ text: "River Keepers: taken", tone: "error" })
+  })
+
+  it("does not toast when the mutation's copy returns null for an error its UI shows inline", async () => {
+    const observer = new MutationObserver(makeQueryClient(), {
+      mutationFn: () => Promise.reject(new AppError(ErrorCode.VALIDATION, "bad slug")),
+      meta: { errorMessage: () => null },
+    })
+    await observer.mutate().catch(() => undefined)
+    expect(useUiStore.getState().toast).toBeNull()
+  })
+
+  it("toasts the mutation's success copy, built from the response and the variables, in the ok tone", async () => {
+    const observer = new MutationObserver<{ routedTo: string }, Error, { name: string }>(makeQueryClient(), {
+      mutationFn: () => Promise.resolve({ routedTo: "Oakland" }),
+      meta: {
+        successMessage: (data: { routedTo: string }, variables: { name: string }) =>
+          `${variables.name} sent to ${data.routedTo}`,
+      },
+    })
+    await observer.mutate({ name: "Pothole" })
+    expect(useUiStore.getState().toast).toMatchObject({ text: "Pothole sent to Oakland", tone: "ok" })
+  })
+
+  it("does not toast when the success copy returns null", async () => {
+    const observer = new MutationObserver(makeQueryClient(), {
+      mutationFn: () => Promise.resolve(1),
+      meta: { successMessage: () => null },
+    })
+    await observer.mutate()
     expect(useUiStore.getState().toast).toBeNull()
   })
+
+  it("toasts success before the mutation's own onSuccess settles, with nothing observing the mutation", async () => {
+    let settle!: () => void
+    const refetch = new Promise<void>((resolve) => {
+      settle = resolve
+    })
+    const observer = new MutationObserver(makeQueryClient(), {
+      mutationFn: () => Promise.resolve(1),
+      onSuccess: () => refetch,
+      meta: { successMessage: () => "Saved" },
+    })
+    const done = observer.mutate()
+    await vi.waitFor(() => expect(useUiStore.getState().toast?.text).toBe("Saved"))
+    expect(observer.hasListeners()).toBe(false)
+    settle()
+    await done
+  })
 })
 
 describe("queryKeys static keys", () => {
@@ -204,11 +285,15 @@ describe("queryKeys param factories", () => {
     ["reports.list", queryKeys.reports.list, ["admin", "reports", "list"]],
     ["reports.page", queryKeys.reports.page, ["admin", "reports", "page"]],
     ["events.list", queryKeys.events.list, ["admin", "events", "list"]],
+    ["events.page", queryKeys.events.page, ["admin", "events", "page"]],
     ["users.list", queryKeys.users.list, ["admin", "users", "list"]],
     ["users.page", queryKeys.users.page, ["admin", "users", "page"]],
     ["mail.list", queryKeys.mail.list, ["admin", "mail", "list"]],
+    ["mail.page", queryKeys.mail.page, ["admin", "mail", "page"]],
     ["inbox.list", queryKeys.inbox.list, ["admin", "inbox", "list"]],
+    ["inbox.page", queryKeys.inbox.page, ["admin", "inbox", "page"]],
     ["moderation.list", queryKeys.moderation.list, ["admin", "moderation", "list"]],
+    ["moderation.page", queryKeys.moderation.page, ["admin", "moderation", "page"]],
     ["govClaims.list", queryKeys.govClaims.list, ["admin", "gov-claims", "list"]],
     ["orgs.list", queryKeys.orgs.list, ["admin", "orgs", "list"]],
     ["hosts.list", queryKeys.hosts.list, ["admin", "hosts", "list"]],
@@ -221,9 +306,12 @@ describe("queryKeys param factories", () => {
     expect(factory(undefined)).toEqual([...prefix, null])
   })
 
-  it("normalizes a null param to null and keeps other falsy params (current behavior)", () => {
+  it("normalizes a null param to null and keeps other falsy params, which the param types now reject", () => {
+    // @ts-expect-error null is not a list query
     expect(queryKeys.reports.list(null)).toEqual(["admin", "reports", "list", null])
+    // @ts-expect-error 0 is not a list query
     expect(queryKeys.reports.list(0)).toEqual(["admin", "reports", "list", 0])
+    // @ts-expect-error "" is not a list query
     expect(queryKeys.reports.list("")).toEqual(["admin", "reports", "list", ""])
   })
 })
@@ -262,7 +350,8 @@ describe("queryKeys id + params factories", () => {
     ["orgs.members", queryKeys.orgs.members, "orgs", "members"],
     ["orgs.events", queryKeys.orgs.events, "orgs", "events"],
   ] as const)("%s puts the id before the sub-resource", (_name, factory, domain, sub) => {
-    expect(factory("id-1", params)).toEqual(["admin", domain, "id-1", sub, params])
+    const withParams = factory as (id: string, params?: object) => readonly unknown[]
+    expect(withParams("id-1", params)).toEqual(["admin", domain, "id-1", sub, params])
     expect(factory("id-1")).toEqual(["admin", domain, "id-1", sub, null])
   })
 
@@ -275,7 +364,7 @@ describe("queryKeys id + params factories", () => {
 })
 
 describe("page vs list keys", () => {
-  const params = { status: "open" }
+  const params = { q: "open", limit: 3 }
 
   it("reports.page and reports.list are distinct keys", () => {
     expect(queryKeys.reports.page(params)).not.toEqual(queryKeys.reports.list(params))
@@ -289,12 +378,19 @@ describe("page vs list keys", () => {
     expect(queryKeys.users.list(params)).toEqual(["admin", "users", "list", params])
   })
 
+  it.each(["events", "inbox", "mail", "moderation"] as const)(
+    "%s page and list keys are distinct for equal params",
+    (domain) => {
+      const { page, list } = queryKeys[domain]
+      expect(page(params)).not.toEqual(list(params))
+      expect(page(params)).toEqual(["admin", domain, "page", params])
+    },
+  )
+
   it("keeps every page and list key under its domain `all` prefix so one invalidation hits both", () => {
-    for (const [all, keys] of [
-      [queryKeys.reports.all, [queryKeys.reports.page(params), queryKeys.reports.list(params)]],
-      [queryKeys.users.all, [queryKeys.users.page(params), queryKeys.users.list(params)]],
-    ] as const) {
-      for (const key of keys) expect(key.slice(0, all.length)).toEqual(all)
+    for (const domain of ["reports", "users", "events", "inbox", "mail", "moderation"] as const) {
+      const { all, page, list } = queryKeys[domain]
+      for (const key of [page(params), list(params)]) expect(key.slice(0, all.length)).toEqual(all)
     }
   })
 })
diff --git a/apps/admin/src/lib/query.ts b/apps/admin/src/lib/query.ts
index b864508..b736731 100644
--- a/apps/admin/src/lib/query.ts
+++ b/apps/admin/src/lib/query.ts
@@ -1,42 +1,101 @@
 "use client"
 
-import { QueryClient } from "@tanstack/react-query"
-import { ErrorCode } from "@civfix/shared"
+import { MutationCache, QueryClient } from "@tanstack/react-query"
+import {
+  ErrorCode,
+  type AdminBroadcastListQuery,
+  type AdminEventListQuery,
+  type AdminEventPageListQuery,
+  type AdminHostListQuery,
+  type AdminOrgEventWhen,
+  type AdminOrgListQuery,
+  type AdminOrgMemberListRequest,
+  type AdminReportListQuery,
+  type AdminUserListQuery,
+  type AuditListQuery,
+  type ChatHistoryQuery,
+  type DiscoveryListQuery,
+  type GovClaimListQuery,
+  type InboxFeedQuery,
+  type InboxListQuery,
+  type JurisdictionListQuery,
+  type MailListQuery,
+  type ModerationListQuery,
+  type UserSubListQuery,
+} from "@civfix/shared"
 import { useUiStore } from "@/store/ui-store"
 import { toAppError } from "@/lib/api"
 import { errorMessage } from "@/lib/error-messages"
 
+declare module "@tanstack/react-query" {
+  interface Register {
+    mutationMeta: {
+      /** false when the mutation's own UI shows every error inline, so the global toast stays quiet. */
+      errorToast?: false
+      /**
+       * Domain copy for the global error toast, built from the error and the mutation's variables so it
+       * still shows after the component that fired the mutation unmounts. Returning null leaves this
+       * error to the UI, which shows it inline.
+       */
+      // Method syntax keeps the parameters bivariant, so a hook can declare its own variables type.
+      errorMessage?(error: unknown, variables: unknown): string | null
+      /**
+       * Copy for the success toast, built from the response and the variables so it still shows after
+       * the component that fired the mutation unmounts. Returning null shows nothing.
+       */
+      successMessage?(data: unknown, variables: unknown): string | null
+    }
+  }
+}
+
+type UserSubPageParams = Omit<UserSubListQuery, "id">
+type OrgMemberPageParams = Omit<AdminOrgMemberListRequest, "id">
+
+const MAX_QUERY_RETRIES = 2
+
+// Retrying cannot change these answers, and a retried 429 only deepens the rate limit.
+const NO_RETRY_CODES: ReadonlySet<ErrorCode> = new Set([
+  ErrorCode.UNAUTHORIZED,
+  ErrorCode.FORBIDDEN,
+  ErrorCode.NOT_FOUND,
+  ErrorCode.VALIDATION,
+  ErrorCode.CONFLICT,
+  ErrorCode.RATE_LIMITED,
+])
+
+export function makeMutationCache(): MutationCache {
+  return new MutationCache({
+    // The cache-level handler runs for every failed mutation, even one with its own onError, which
+    // would silently replace a defaultOptions.mutations.onError.
+    onError: (error, variables, _onMutateResult, mutation) => {
+      const meta = mutation.meta
+      if (meta?.errorToast === false) return
+      const text = meta?.errorMessage ? meta.errorMessage(error, variables) : errorMessage(error)
+      if (text !== null) useUiStore.getState().showToast(text, "error")
+    },
+    // Runs as soon as the server confirms, before the mutation's own onSuccess awaits its refetches, and
+    // whether or not anything still observes the mutation. A per-call onSuccess waits for those
+    // refetches and is dropped once its component unmounts, which a refetch that drops the item does.
+    onSuccess: (data, variables, _onMutateResult, mutation) => {
+      const text = mutation.meta?.successMessage?.(data, variables)
+      if (text) useUiStore.getState().showToast(text, "ok")
+    },
+  })
+}
+
 export function makeQueryClient(): QueryClient {
   return new QueryClient({
+    mutationCache: makeMutationCache(),
     defaultOptions: {
       queries: {
         staleTime: 30_000,
         gcTime: 5 * 60_000,
         refetchOnWindowFocus: false,
-        retry: (failureCount, error) => {
-          const noRetry: ErrorCode[] = [
-            ErrorCode.UNAUTHORIZED,
-            ErrorCode.FORBIDDEN,
-            ErrorCode.NOT_FOUND,
-            ErrorCode.VALIDATION,
-          ]
-          if (noRetry.includes(toAppError(error).code)) return false
-          return failureCount < 2
-        },
+        retry: (failureCount, error) =>
+          !NO_RETRY_CODES.has(toAppError(error).code) && failureCount < MAX_QUERY_RETRIES,
       },
       mutations: {
         retry: false,
-        onError: (error) => {
-          try {
-            useUiStore
-              .getState()
-              .showToast(
-                errorMessage(error, {}, { fallback: "Something went wrong. Please try again." }),
-              )
-          } catch {
-            void 0
-          }
-        },
       },
     },
   })
@@ -52,45 +111,49 @@ export const queryKeys = {
   },
   discovery: {
     all: ["admin", "discovery"] as const,
-    list: (params?: unknown) => ["admin", "discovery", "list", params ?? null] as const,
+    list: (params?: DiscoveryListQuery) => ["admin", "discovery", "list", params ?? null] as const,
     detail: (id: string) => ["admin", "discovery", "detail", id] as const,
   },
   jurisdictions: {
     all: ["admin", "jurisdictions"] as const,
-    list: (params?: unknown) => ["admin", "jurisdictions", "list", params ?? null] as const,
+    list: (params?: Partial<JurisdictionListQuery>) =>
+      ["admin", "jurisdictions", "list", params ?? null] as const,
     geometry: (geoid: string) => ["admin", "jurisdictions", "geometry", geoid] as const,
   },
 
   reports: {
     all: ["admin", "reports"] as const,
-    list: (params?: unknown) => ["admin", "reports", "list", params ?? null] as const,
-    page: (params?: unknown) => ["admin", "reports", "page", params ?? null] as const,
+    list: (params?: AdminReportListQuery) => ["admin", "reports", "list", params ?? null] as const,
+    page: (params?: AdminReportListQuery) => ["admin", "reports", "page", params ?? null] as const,
     detail: (id: string) => ["admin", "reports", "detail", id] as const,
-    chat: (id: string, params?: unknown) =>
+    chat: (id: string, params?: ChatHistoryQuery) =>
       ["admin", "reports", id, "chat", params ?? null] as const,
   },
 
   events: {
     all: ["admin", "events"] as const,
-    list: (params?: unknown) => ["admin", "events", "list", params ?? null] as const,
+    list: (params?: AdminEventListQuery) => ["admin", "events", "list", params ?? null] as const,
+    page: (params?: AdminEventListQuery) => ["admin", "events", "page", params ?? null] as const,
     detail: (id: string) => ["admin", "events", "detail", id] as const,
   },
 
   users: {
     all: ["admin", "users"] as const,
-    list: (params?: unknown) => ["admin", "users", "list", params ?? null] as const,
-    /** One flat page (home preview, user picker) — kept apart from the infinite `list` cache entries. */
-    page: (params?: unknown) => ["admin", "users", "page", params ?? null] as const,
+    list: (params?: AdminUserListQuery) => ["admin", "users", "list", params ?? null] as const,
+    page: (params?: AdminUserListQuery) => ["admin", "users", "page", params ?? null] as const,
     detail: (id: string) => ["admin", "users", "detail", id] as const,
-    reports: (id: string, params?: unknown) => ["admin", "users", id, "reports", params ?? null] as const,
-    events: (id: string, params?: unknown) => ["admin", "users", id, "events", params ?? null] as const,
-    messages: (id: string, params?: unknown) =>
+    reports: (id: string, params?: UserSubPageParams) =>
+      ["admin", "users", id, "reports", params ?? null] as const,
+    events: (id: string, params?: UserSubPageParams) =>
+      ["admin", "users", id, "events", params ?? null] as const,
+    messages: (id: string, params?: UserSubPageParams) =>
       ["admin", "users", id, "messages", params ?? null] as const,
   },
 
   mail: {
     all: ["admin", "mail"] as const,
-    list: (params?: unknown) => ["admin", "mail", "list", params ?? null] as const,
+    list: (params?: MailListQuery) => ["admin", "mail", "list", params ?? null] as const,
+    page: (params?: MailListQuery) => ["admin", "mail", "page", params ?? null] as const,
     detail: (id: string) => ["admin", "mail", "detail", id] as const,
     stats: ["admin", "mail", "stats"] as const,
     forwardTemplate: ["admin", "mail", "forward-template"] as const,
@@ -98,20 +161,22 @@ export const queryKeys = {
 
   inbox: {
     all: ["admin", "inbox"] as const,
-    list: (params?: unknown) => ["admin", "inbox", "list", params ?? null] as const,
-    feed: (params?: unknown) => ["admin", "inbox", "feed", params ?? null] as const,
+    list: (params?: InboxListQuery) => ["admin", "inbox", "list", params ?? null] as const,
+    page: (params?: InboxListQuery) => ["admin", "inbox", "page", params ?? null] as const,
+    feed: (params?: InboxFeedQuery) => ["admin", "inbox", "feed", params ?? null] as const,
     detail: (id: string) => ["admin", "inbox", "detail", id] as const,
   },
 
   moderation: {
     all: ["admin", "moderation"] as const,
-    list: (params?: unknown) => ["admin", "moderation", "list", params ?? null] as const,
+    list: (params?: ModerationListQuery) => ["admin", "moderation", "list", params ?? null] as const,
+    page: (params?: ModerationListQuery) => ["admin", "moderation", "page", params ?? null] as const,
     detail: (id: string) => ["admin", "moderation", "detail", id] as const,
   },
 
   govClaims: {
     all: ["admin", "gov-claims"] as const,
-    list: (params?: unknown) => ["admin", "gov-claims", "list", params ?? null] as const,
+    list: (params?: GovClaimListQuery) => ["admin", "gov-claims", "list", params ?? null] as const,
     detail: (id: string) => ["admin", "gov-claims", "detail", id] as const,
   },
 
@@ -132,11 +197,11 @@ export const queryKeys = {
 
   orgs: {
     all: ["admin", "orgs"] as const,
-    list: (params?: unknown) => ["admin", "orgs", "list", params ?? null] as const,
+    list: (params?: AdminOrgListQuery) => ["admin", "orgs", "list", params ?? null] as const,
     detail: (id: string) => ["admin", "orgs", "detail", id] as const,
-    members: (id: string, params?: unknown) =>
+    members: (id: string, params?: OrgMemberPageParams) =>
       ["admin", "orgs", id, "members", params ?? null] as const,
-    events: (id: string, params?: unknown) =>
+    events: (id: string, params?: { when: AdminOrgEventWhen }) =>
       ["admin", "orgs", id, "events", params ?? null] as const,
   },
 
@@ -147,18 +212,19 @@ export const queryKeys = {
 
   hosts: {
     all: ["admin", "hosts"] as const,
-    list: (params?: unknown) => ["admin", "hosts", "list", params ?? null] as const,
-    broadcasts: (params?: unknown) => ["admin", "hosts", "broadcasts", params ?? null] as const,
+    list: (params?: AdminHostListQuery) => ["admin", "hosts", "list", params ?? null] as const,
+    broadcasts: (params?: AdminBroadcastListQuery) =>
+      ["admin", "hosts", "broadcasts", params ?? null] as const,
   },
 
   pages: {
     all: ["admin", "pages"] as const,
-    list: (params?: unknown) => ["admin", "pages", "list", params ?? null] as const,
+    list: (params?: AdminEventPageListQuery) => ["admin", "pages", "list", params ?? null] as const,
     preview: (cleanupId: string) => ["admin", "pages", "preview", cleanupId] as const,
   },
 
   audit: {
     all: ["admin", "audit"] as const,
-    list: (params?: unknown) => ["admin", "audit", "list", params ?? null] as const,
+    list: (params?: AuditListQuery) => ["admin", "audit", "list", params ?? null] as const,
   },
 }
diff --git a/apps/admin/src/store/auth-store.test.ts b/apps/admin/src/store/auth-store.test.ts
new file mode 100644
index 0000000..42c3623
--- /dev/null
+++ b/apps/admin/src/store/auth-store.test.ts
@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it } from "vitest"
+import type { AdminOperatorDTO } from "@civfix/shared"
+
+import { getCsrfToken, selectIsOperator, useAuthStore, type AuthState } from "./auth-store"
+
+const OPERATOR: AdminOperatorDTO = { id: "op-1", name: "Ada Ops", email: "ada@civfix.org", role: "operator" }
+
+function signedIn(): void {
+  useAuthStore.setState({ status: "authenticated", operator: OPERATOR, csrfToken: "csrf-1" })
+}
+
+afterEach(() => {
+  useAuthStore.setState({ status: "idle", operator: null, csrfToken: null })
+})
+
+describe("auth store", () => {
+  it("keeps the stored CSRF token when a session update omits one", () => {
+    signedIn()
+    useAuthStore.getState().setSession({ operator: OPERATOR })
+    expect(getCsrfToken()).toBe("csrf-1")
+    useAuthStore.getState().setSession({ operator: OPERATOR, csrfToken: null })
+    expect(getCsrfToken()).toBeUndefined()
+  })
+
+  it("clears the identity into the anonymous state by default", () => {
+    signedIn()
+    useAuthStore.getState().clear()
+    expect(useAuthStore.getState()).toMatchObject({ status: "anonymous", operator: null, csrfToken: null })
+  })
+
+  it.each(["forbidden", "signing-out"] as const)("clears the identity into the %s state", (status) => {
+    signedIn()
+    useAuthStore.getState().clear(status)
+    expect(useAuthStore.getState()).toMatchObject({ status, operator: null, csrfToken: null })
+  })
+
+  it("stays signing-out when a late 401 clears the session during sign-out", () => {
+    signedIn()
+    useAuthStore.getState().setStatus("signing-out")
+    useAuthStore.getState().clear()
+    expect(useAuthStore.getState()).toMatchObject({ status: "signing-out", operator: null, csrfToken: null })
+  })
+
+  it.each<[string, Partial<AuthState>, boolean]>([
+    ["an authenticated operator", { status: "authenticated", operator: OPERATOR }, true],
+    ["an authenticated non-operator", { status: "authenticated", operator: { ...OPERATOR, role: "citizen" } }, false],
+    ["an operator while signing out", { status: "signing-out", operator: OPERATOR }, false],
+    ["no operator", { status: "authenticated", operator: null }, false],
+  ])("selectIsOperator is right for %s", (_label, state, expected) => {
+    useAuthStore.setState(state)
+    expect(selectIsOperator(useAuthStore.getState())).toBe(expected)
+  })
+})
diff --git a/apps/admin/src/store/auth-store.ts b/apps/admin/src/store/auth-store.ts
index d28bd8b..9e62c8d 100644
--- a/apps/admin/src/store/auth-store.ts
+++ b/apps/admin/src/store/auth-store.ts
@@ -22,8 +22,11 @@ import type { AdminOperatorDTO } from "@civfix/shared"
  * - forbidden: Cloudflare Access authenticated the user but their email is NOT on the operator
  *   allowlist (a clean 403). This is a terminal state - retrying the bootstrap would loop, so the gate
  *   shows a "not authorized" message instead of redirecting.
+ * - signing-out: the operator chose Sign out and the page is about to leave for the Access logout.
  */
-export type AuthStatus = "idle" | "loading" | "authenticated" | "anonymous" | "forbidden"
+export type AuthStatus = "idle" | "loading" | "authenticated" | "anonymous" | "forbidden" | "signing-out"
+
+export type SignedOutStatus = Extract<AuthStatus, "anonymous" | "forbidden" | "signing-out">
 
 export interface AuthState {
   status: AuthStatus
@@ -33,7 +36,8 @@ export interface AuthState {
 
   setSession: (input: { operator: AdminOperatorDTO | null; csrfToken?: string | null }) => void
   setStatus: (status: AuthStatus) => void
-  clear: () => void
+  /** Drop the identity and CSRF token, landing in `status` (anonymous unless given). */
+  clear: (status?: SignedOutStatus) => void
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -51,7 +55,14 @@ export const useAuthStore = create<AuthState>((set) => ({
 
   setStatus: (status) => set({ status }),
 
-  clear: () => set({ status: "anonymous", operator: null, csrfToken: null }),
+  // Signing out is one-way: a 401 answering a request still in flight must not bring back the
+  // sign-in screen while the page leaves.
+  clear: (status = "anonymous") =>
+    set((prev) => ({
+      status: prev.status === "signing-out" ? "signing-out" : status,
+      operator: null,
+      csrfToken: null,
+    })),
 }))
 
 /**
diff --git a/apps/admin/src/store/ui-store.test.ts b/apps/admin/src/store/ui-store.test.ts
index efff8e8..cf3602b 100644
--- a/apps/admin/src/store/ui-store.test.ts
+++ b/apps/admin/src/store/ui-store.test.ts
@@ -125,8 +125,8 @@ describe("initial route from the hash at module load", () => {
     })
   })
 
-  it("yields an empty-string focus id for a trailing slash (current behavior)", async () => {
-    expect(await initialRoute("#/reports/")).toEqual({ page: "reports", focusId: "" })
+  it("reads a trailing slash as no focus", async () => {
+    expect(await initialRoute("#/reports/")).toEqual({ page: "reports", focusId: null })
   })
 
   it("falls back to home and drops the focus for an unknown section", async () => {
@@ -141,8 +141,12 @@ describe("initial route from the hash at module load", () => {
     expect(await initialRoute("#/Reports")).toEqual({ page: "home", focusId: null })
   })
 
-  it("does not strip a query string from the section segment (current behavior)", async () => {
-    expect(await initialRoute("#/reports?tab=open")).toEqual({ page: "home", focusId: null })
+  it("ignores a query string after the section", async () => {
+    expect(await initialRoute("#/reports?tab=open")).toEqual({ page: "reports", focusId: null })
+  })
+
+  it("ignores a query string after the focus id", async () => {
+    expect(await initialRoute("#/reports/rep-1?tab=open")).toEqual({ page: "reports", focusId: "rep-1" })
   })
 
   it("falls back to home with no focus on a malformed percent-encoding at import", async () => {
@@ -207,18 +211,18 @@ describe("nav", () => {
     expect(useUiStore.getState()).toMatchObject({ page: "home", focusId: null })
   })
 
-  it("keeps a focus id in the store for home although the hash drops it (current behavior)", async () => {
+  it("drops a focus id for home, as the hash does", async () => {
     const { useUiStore } = await loadWithHash("")
     useUiStore.getState().nav("home", "stray")
-    expect(useUiStore.getState()).toMatchObject({ page: "home", focusId: "stray" })
+    expect(useUiStore.getState()).toMatchObject({ page: "home", focusId: null })
     expect(window.location.hash).toBe("#/")
   })
 
-  it("treats an empty-string focus like no focus in the hash", async () => {
+  it("treats an empty-string focus like no focus in the hash and the store", async () => {
     const { useUiStore } = await loadWithHash("")
     useUiStore.getState().nav("mail", "")
     expect(window.location.hash).toBe("#/mail")
-    expect(useUiStore.getState().focusId).toBe("")
+    expect(useUiStore.getState().focusId).toBeNull()
   })
 
   it("encodes the whole focus id as one segment", async () => {
@@ -277,6 +281,18 @@ describe("toast", () => {
     expect(second?.id).not.toBe(first?.id)
   })
 
+  it("shows a success toast unless told otherwise", async () => {
+    const { useUiStore } = await loadWithHash("")
+    useUiStore.getState().showToast("Saved")
+    expect(useUiStore.getState().toast).toMatchObject({ text: "Saved", tone: "ok" })
+  })
+
+  it("carries the error tone", async () => {
+    const { useUiStore } = await loadWithHash("")
+    useUiStore.getState().showToast("Could not save", "error")
+    expect(useUiStore.getState().toast).toMatchObject({ text: "Could not save", tone: "error" })
+  })
+
   it("replaces the current toast rather than queueing", async () => {
     const { useUiStore } = await loadWithHash("")
     useUiStore.getState().showToast("first")
diff --git a/apps/admin/src/store/ui-store.ts b/apps/admin/src/store/ui-store.ts
index 3940933..f41e024 100644
--- a/apps/admin/src/store/ui-store.ts
+++ b/apps/admin/src/store/ui-store.ts
@@ -32,9 +32,12 @@ export const PAGE_LABEL: Record<PageId, string> = {
   pages: "Signup pages",
 }
 
+export type ToastTone = "ok" | "error"
+
 export interface Toast {
   id: number
   text: string
+  tone: ToastTone
 }
 
 interface UiState {
@@ -44,7 +47,7 @@ interface UiState {
 
   nav: (page: PageId, focusId?: string | null) => void
   syncFromHash: () => void
-  showToast: (text: string) => void
+  showToast: (text: string, tone?: ToastTone) => void
   dismissToast: () => void
 }
 
@@ -69,11 +72,12 @@ function decodeFocus(encoded: string): string | null {
 
 function parseHash(): Route {
   if (typeof window === "undefined") return HOME_ROUTE
-  const raw = window.location.hash.replace(/^#\/?/, "")
-  const [seg = "", ...rest] = raw.split("/")
+  const [path = ""] = window.location.hash.replace(/^#\/?/, "").split("?")
+  const [seg = "", ...rest] = path.split("/")
   const page: PageId = (SECTIONS as readonly string[]).includes(seg) ? (seg as PageId) : "home"
-  if (page === "home" || rest.length === 0) return { page, focusId: null }
-  const focusId = decodeFocus(rest.join("/"))
+  const encodedFocus = rest.join("/")
+  if (page === "home" || encodedFocus === "") return { page, focusId: null }
+  const focusId = decodeFocus(encodedFocus)
   return focusId === null ? HOME_ROUTE : { page, focusId }
 }
 
@@ -89,7 +93,8 @@ export const useUiStore = create<UiState>((set) => ({
   focusId: initialRoute.focusId,
   toast: null,
 
-  nav: (page, focusId = null) => {
+  nav: (page, requestedFocus = null) => {
+    const focusId = page === "home" ? null : requestedFocus || null
     set({ page, focusId })
     if (typeof window !== "undefined") {
       const next = hashFor(page, focusId)
@@ -100,7 +105,7 @@ export const useUiStore = create<UiState>((set) => ({
 
   syncFromHash: () => set(parseHash()),
 
-  showToast: (text) => set({ toast: { id: ++toastSeq, text } }),
+  showToast: (text, tone = "ok") => set({ toast: { id: ++toastSeq, text, tone } }),
 
   dismissToast: () => set({ toast: null }),
 }))
@@ -109,6 +114,6 @@ export function useNav(): UiState["nav"] {
   return useUiStore((s) => s.nav)
 }
 
-export function useToast(): (text: string) => void {
+export function useToast(): UiState["showToast"] {
   return useUiStore((s) => s.showToast)
 }
diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css
index dfc918e..897517f 100644
--- a/apps/admin/src/styles/admin.css
+++ b/apps/admin/src/styles/admin.css
@@ -1875,6 +1875,11 @@ button:focus-visible { outline: none; box-shadow: var(--ring); }
   opacity: 1;
   pointer-events: auto;
 }
+.toast-wrap .toast-msg {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 .toast-wrap .ico {
   width: 18px; height: 18px;
   background: var(--moss);
@@ -2656,8 +2661,8 @@ img.user-av { object-fit: cover; background: var(--paper-2); }
    hover affordance. The UUID itself stays mono + selectable. */
 button.pm-copy { background: none; border: 0; margin: 0; padding: 0; cursor: pointer; font: inherit; }
 button.pm-copy .mono { font-size: 11.5px; user-select: text; }
-button.pm-copy:hover { color: var(--ink-1); }
-button.pm-copy:hover .mono { color: var(--ink-1); }
+button.pm-copy:hover { color: var(--ink); }
+button.pm-copy:hover .mono { color: var(--ink); }
 
 .profile-tabs {
   display: flex; gap: 4px;
diff --git a/apps/admin/src/styles/app.css b/apps/admin/src/styles/app.css
index 033b655..31c800f 100644
--- a/apps/admin/src/styles/app.css
+++ b/apps/admin/src/styles/app.css
@@ -679,3 +679,23 @@ img.org-logo { object-fit: cover; background: var(--paper-2); }
   cursor: default;
 }
 .attachment-chip.unlinked:active { transform: none; }
+
+/* Text for screen readers only; clip rather than display:none so it stays in the accessibility tree. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* A row that is a button can only hold phrasing content, so its title and meta are spans that must
+   still stack; the meta's ellipsis also needs a block box. */
+.prow-main .prow-title,
+.prow-main .prow-meta {
+  display: block;
+}
diff --git a/apps/admin/src/test/render.tsx b/apps/admin/src/test/render.tsx
index 80d0092..b75436f 100644
--- a/apps/admin/src/test/render.tsx
+++ b/apps/admin/src/test/render.tsx
@@ -2,8 +2,11 @@ import type { ReactElement } from "react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { render, type RenderResult } from "@testing-library/react"
 
+import { makeMutationCache } from "@/lib/query"
+
 export function makeTestQueryClient(): QueryClient {
   return new QueryClient({
+    mutationCache: makeMutationCache(),
     defaultOptions: {
       queries: { retry: false, gcTime: Infinity },
       mutations: { retry: false },