diff --git a/src/app/(app)/visits/pin-tool/page.tsx b/src/app/(app)/visits/pin-tool/page.tsx
index 0eb72a0..e0c6435 100644
--- a/src/app/(app)/visits/pin-tool/page.tsx
+++ b/src/app/(app)/visits/pin-tool/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import dynamic from "next/dynamic";
 import { MapPinned } from "lucide-react";
 
@@ -5,6 +7,13 @@ import { MapPinned } from "lucide-react";
  * Office pin tool — wraps the Leaflet-heavy view in `dynamic({ ssr: false })`
  * so the map never runs during SSR (Leaflet touches `window` on import).
  * Mirrors the supplier-map page pattern.
+ *
+ * The `"use client"` directive above is load-bearing, not decoration:
+ * Next refuses `ssr: false` on `next/dynamic` inside a Server Component
+ * ("not allowed with next/dynamic in Server Components"), and the page
+ * 500s at request time rather than failing the build — so neither
+ * `tsc` nor the unit tests catch its absence. `supplier-map/page.tsx`
+ * carries the same directive for the same reason.
  */
 const PinToolView = dynamic(
   () => import("./pin-tool-view").then((module) => module.PinToolView),