Add transactional emails (SMTP) and planner features (no-go areas, notes, crash recovery)

Transactional emails:
- Add nodemailer SMTP email module with dev-mode console logging
- Magic link template and welcome template with HTML + plain text
- Wire sendMagicLink into login flow, sendWelcome into registration
- Update privacy page and deploy docs for SMTP configuration

Planner features:
- No-go areas: draw polygons on map (leaflet-geoman), synced via Yjs,
  passed to BRouter as nogos parameter, route recomputes on change
- Session notes: collaborative Y.Text textarea in sidebar tab
- Crash recovery: periodic localStorage save of Yjs state, restore on reconnect
- Rate limit session creation (10/IP/hour) in /new route

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

apps/planner/app/components/NoGoAreaLayer.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useMap } from "react-leaflet";
+import L from "leaflet";
+import * as Y from "yjs";
+import "@geoman-io/leaflet-geoman-free";
+import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+
+interface NoGoAreaLayerProps {
+  noGoAreas: Y.Array<Y.Map<unknown>>;
+  doc: Y.Doc;
+  enabled: boolean;
+  onToggle: () => void;
+}
+
+const NO_GO_STYLE: L.PathOptions = {
+  color: "#ef4444",
+  fillColor: "#ef4444",
+  fillOpacity: 0.2,
+  weight: 2,
+};
+
+function yMapToLatLngs(yMap: Y.Map<unknown>): L.LatLng[] {
+  const points = yMap.get("points") as Array<{ lat: number; lon: number }> | undefined;
+  if (!points) return [];
+  return points.map((p) => L.latLng(p.lat, p.lon));
+}
+
+export function NoGoAreaLayer({ noGoAreas, doc, enabled, onToggle }: NoGoAreaLayerProps) {
+  const map = useMap();
+  const layerGroupRef = useRef<L.LayerGroup>(L.layerGroup());
+  const polygonMapRef = useRef<Map<number, L.Polygon>>(new Map());
+  const suppressObserverRef = useRef(false);
+
+  // Sync Yjs → Leaflet layers
+  const syncLayers = useCallback(() => {
+    const lg = layerGroupRef.current;
+    // Clear all existing polygons
+    lg.clearLayers();
+    polygonMapRef.current.clear();
+
+    for (let i = 0; i < noGoAreas.length; i++) {
+      const yMap = noGoAreas.get(i);
+      const latLngs = yMapToLatLngs(yMap);
+      if (latLngs.length < 3) continue;
+
+      const polygon = L.polygon(latLngs, NO_GO_STYLE);
+      polygon.on("contextmenu", (e) => {
+        L.DomEvent.preventDefault(e as unknown as Event);
+        suppressObserverRef.current = true;
+        noGoAreas.delete(i, 1);
+        suppressObserverRef.current = false;
+        syncLayers();
+      });
+      lg.addLayer(polygon);
+      polygonMapRef.current.set(i, polygon);
+    }
+  }, [noGoAreas]);
+
+  // Add/remove layer group from map
+  useEffect(() => {
+    const lg = layerGroupRef.current;
+    lg.addTo(map);
+    return () => {
+      lg.removeFrom(map);
+    };
+  }, [map]);
+
+  // Observe Yjs changes
+  useEffect(() => {
+    const observer = () => {
+      if (!suppressObserverRef.current) {
+        syncLayers();
+      }
+    };
+    noGoAreas.observeDeep(observer);
+    syncLayers();
+    return () => noGoAreas.unobserveDeep(observer);
+  }, [noGoAreas, syncLayers]);
+
+  // Geoman drawing controls
+  useEffect(() => {
+    if (enabled) {
+      map.pm.enableDraw("Polygon", {
+        pathOptions: NO_GO_STYLE,
+        snappable: false,
+      });
+    } else {
+      map.pm.disableDraw();
+    }
+
+    const handleCreate = (e: { layer: L.Layer }) => {
+      const layer = e.layer as L.Polygon;
+      const latLngs = (layer.getLatLngs()[0] as L.LatLng[]);
+      const points = latLngs.map((ll) => ({ lat: ll.lat, lon: ll.lng }));
+
+      // Remove the geoman-created layer (we'll render from Yjs)
+      map.removeLayer(layer);
+
+      // Add to Yjs
+      const yMap = new Y.Map();
+      yMap.set("points", points);
+      doc.transact(() => {
+        noGoAreas.push([yMap]);
+      });
+
+      // Exit draw mode
+      onToggle();
+    };
+
+    map.on("pm:create", handleCreate);
+
+    return () => {
+      map.pm.disableDraw();
+      map.off("pm:create", handleCreate);
+    };
+  }, [map, enabled, noGoAreas, doc, onToggle]);
+
+  return null;
+}

apps/planner/app/components/NotesPanel.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useCallback } from "react";
+import type { YjsState } from "~/lib/use-yjs";
+
+interface NotesPanelProps {
+  yjs: YjsState;
+}
+
+export function NotesPanel({ yjs }: NotesPanelProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const isLocalChange = useRef(false);
+
+  // Sync Y.Text → textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // Set initial value
+    textarea.value = yjs.notes.toString();
+
+    const observer = () => {
+      if (isLocalChange.current) return;
+      const pos = textarea.selectionStart;
+      textarea.value = yjs.notes.toString();
+      textarea.selectionStart = pos;
+      textarea.selectionEnd = pos;
+    };
+
+    yjs.notes.observe(observer);
+    return () => yjs.notes.unobserve(observer);
+  }, [yjs.notes]);
+
+  // textarea → Y.Text
+  const handleInput = useCallback(
+    (e: React.FormEvent<HTMLTextAreaElement>) => {
+      const textarea = e.currentTarget;
+      const newValue = textarea.value;
+      const currentValue = yjs.notes.toString();
+
+      if (newValue === currentValue) return;
+
+      isLocalChange.current = true;
+      yjs.doc.transact(() => {
+        yjs.notes.delete(0, yjs.notes.length);
+        yjs.notes.insert(0, newValue);
+      });
+      isLocalChange.current = false;
+    },
+    [yjs.notes, yjs.doc],
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b border-gray-200 px-4 py-3">
+        <h2 className="text-sm font-medium text-gray-900">Notes</h2>
+      </div>
+      <div className="flex-1 p-2">
+        <textarea
+          ref={textareaRef}
+          onInput={handleInput}
+          className="h-full w-full resize-none rounded border border-gray-200 p-3 text-sm text-gray-700 placeholder-gray-400 focus:border-blue-300 focus:outline-none"
+          placeholder="Add notes for this session..."
+        />
+      </div>
+    </div>
+  );
+}

apps/planner/app/components/PlannerMap.tsx

@@ -4,6 +4,7 @@ import L from "leaflet";
 import * as Y from "yjs";
 import type { YjsState } from "~/lib/use-yjs";
 import { baseLayers } from "@trails-cool/map";
+import { NoGoAreaLayer } from "./NoGoAreaLayer";
 import "leaflet/dist/leaflet.css";
 
 function waypointIcon(index: number): L.DivIcon {
@@ -126,9 +127,38 @@ function CursorTracker({ awareness }: { awareness: YjsState["awareness"] }) {
   );
 }
 
+function NoGoAreaButton({ active, onClick }: { active: boolean; onClick: () => void }) {
+  return (
+    <div className="leaflet-top leaflet-left" style={{ marginTop: 80 }}>
+      <div className="leaflet-control leaflet-bar">
+        <a
+          href="#"
+          role="button"
+          title={active ? "Cancel no-go area" : "Draw no-go area"}
+          onClick={(e) => { e.preventDefault(); onClick(); }}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 30,
+            height: 30,
+            fontSize: 16,
+            background: active ? "#fecaca" : "white",
+            color: active ? "#dc2626" : "#333",
+          }}
+        >
+          ⊘
+        </a>
+      </div>
+    </div>
+  );
+}
+
 export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMapProps) {
   const [waypoints, setWaypoints] = useState<WaypointData[]>([]);
   const [routeGeoJson, setRouteGeoJson] = useState<L.LatLngExpression[] | null>(null);
+  const [noGoDrawing, setNoGoDrawing] = useState(false);
+  const toggleNoGoDraw = useCallback(() => setNoGoDrawing((v) => !v), []);
 
   // Sync waypoints from Yjs
   useEffect(() => {
@@ -215,8 +245,10 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa
         ))}
       </LayersControl>
 
-      <MapClickHandler onAdd={addWaypoint} />
+      <MapClickHandler onAdd={noGoDrawing ? () => {} : addWaypoint} />
       <CursorTracker awareness={yjs.awareness} />
+      <NoGoAreaLayer noGoAreas={yjs.noGoAreas} doc={yjs.doc} enabled={noGoDrawing} onToggle={toggleNoGoDraw} />
+      <NoGoAreaButton active={noGoDrawing} onClick={toggleNoGoDraw} />
 
       {waypoints.map((wp, i) => (
         <Marker

apps/planner/app/components/SessionView.tsx

@@ -10,6 +10,7 @@ import { ExportButton } from "~/components/ExportButton";
 import { SaveToJournalButton } from "~/components/SaveToJournalButton";
 import { YjsDebugPanel } from "~/components/YjsDebugPanel";
 import { ParticipantList } from "~/components/ParticipantList";
+import { NotesPanel } from "~/components/NotesPanel";
 
 const PlannerMap = lazy(() =>
   import("~/components/PlannerMap").then((m) => ({ default: m.PlannerMap })),
@@ -104,6 +105,39 @@ function useAwarenessToasts(yjs: YjsState | null, t: TFunction) {
   return toasts;
 }
 
+function SidebarTabs({ yjs, routeStats }: { yjs: YjsState; routeStats: ReturnType<typeof useRouting>["routeStats"] }) {
+  const { t } = useTranslation("planner");
+  const [tab, setTab] = useState<"waypoints" | "notes">("waypoints");
+
+  return (
+    <aside className="hidden w-72 border-l border-gray-200 bg-white md:flex md:flex-col">
+      <div className="flex border-b border-gray-200">
+        <button
+          onClick={() => setTab("waypoints")}
+          className={`flex-1 px-3 py-2 text-xs font-medium ${tab === "waypoints" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
+        >
+          {t("sidebar.waypoints", "Waypoints")}
+        </button>
+        <button
+          onClick={() => setTab("notes")}
+          className={`flex-1 px-3 py-2 text-xs font-medium ${tab === "notes" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
+        >
+          {t("sidebar.notes", "Notes")}
+        </button>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        {tab === "waypoints" ? (
+          <Suspense fallback={null}>
+            <WaypointSidebar yjs={yjs} routeStats={routeStats} />
+          </Suspense>
+        ) : (
+          <NotesPanel yjs={yjs} />
+        )}
+      </div>
+    </aside>
+  );
+}
+
 interface SessionViewProps {
   sessionId: string;
   callbackUrl?: string;
@@ -184,11 +218,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
             <ElevationChart yjs={yjs} onHover={handleElevationHover} />
           </Suspense>
         </main>
-        <aside className="hidden w-72 border-l border-gray-200 bg-white md:block">
-          <Suspense fallback={null}>
-            <WaypointSidebar yjs={yjs} routeStats={routeStats} />
-          </Suspense>
-        </aside>
+        <SidebarTabs yjs={yjs} routeStats={routeStats} />
       </div>
       <YjsDebugPanel yjs={yjs} />
       {toasts.length > 0 && (

apps/planner/app/lib/brouter.ts

@@ -1,10 +1,15 @@
 const BROUTER_URL = process.env.BROUTER_URL ?? "http://localhost:17777";
 
+export interface NoGoArea {
+  points: Array<{ lat: number; lon: number }>;
+}
+
 export interface RouteRequest {
   waypoints: Array<{ lat: number; lon: number }>;
   profile?: string;
   alternativeIdx?: number;
   format?: string;
+  noGoAreas?: NoGoArea[];
 }
 
 /**
@@ -20,6 +25,11 @@ export async function computeRoute(request: RouteRequest): Promise<unknown> {
   const profile = request.profile ?? "trekking";
   const format = request.format ?? "geojson";
 
+  // Build no-go parameter if areas exist
+  const nogoParam = request.noGoAreas?.length
+    ? noGoAreasToParam(request.noGoAreas)
+    : undefined;
+
   // Route each segment independently
   const segments = await Promise.all(
     request.waypoints.slice(0, -1).map((wp, i) => {
@@ -31,6 +41,7 @@ export async function computeRoute(request: RouteRequest): Promise<unknown> {
         alternativeidx: "0",
         format,
       });
+      if (nogoParam) params.set("nogos", nogoParam);
       return fetchSegment(`${BROUTER_URL}/brouter?${params}`);
     }),
   );
@@ -104,6 +115,41 @@ function mergeGeoJsonSegments(segments: Record<string, unknown>[]): GeoJsonColle
   };
 }
 
+/**
+ * Convert no-go area polygons to BRouter's `nogos` parameter format.
+ * BRouter accepts `lon,lat,radius` per no-go circle, separated by `|`.
+ * We approximate each polygon as a circle: centroid + max distance to any vertex.
+ */
+function noGoAreasToParam(areas: NoGoArea[]): string {
+  return areas
+    .map((area) => {
+      const pts = area.points;
+      if (pts.length === 0) return null;
+      // Centroid
+      const cLat = pts.reduce((s, p) => s + p.lat, 0) / pts.length;
+      const cLon = pts.reduce((s, p) => s + p.lon, 0) / pts.length;
+      // Max distance from centroid in meters (approximate)
+      const maxDist = Math.max(
+        ...pts.map((p) => haversineMeters(cLat, cLon, p.lat, p.lon)),
+      );
+      return `${cLon},${cLat},${Math.ceil(maxDist)}`;
+    })
+    .filter(Boolean)
+    .join("|");
+}
+
+function haversineMeters(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371000;
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+  const dLon = ((lon2 - lon1) * Math.PI) / 180;
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((lat1 * Math.PI) / 180) *
+      Math.cos((lat2 * Math.PI) / 180) *
+      Math.sin(dLon / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
 export function getBRouterUrl(): string {
   return BROUTER_URL;
 }

apps/planner/app/lib/crash-recovery.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import * as Y from "yjs";
+
+/**
+ * Tests the crash recovery encode/decode logic used in use-yjs.ts.
+ * The actual hook wiring is tested via E2E; these verify the data round-trip.
+ */
+describe("crash recovery", () => {
+  it("round-trips Yjs state through base64 localStorage format", () => {
+    const doc = new Y.Doc();
+    const waypoints = doc.getArray("waypoints");
+    const wp = new Y.Map();
+    wp.set("lat", 52.52);
+    wp.set("lon", 13.405);
+    waypoints.push([wp]);
+
+    // Encode (same as use-yjs.ts save)
+    const state = Y.encodeStateAsUpdate(doc);
+    const b64 = btoa(String.fromCharCode(...state));
+
+    // Decode (same as use-yjs.ts restore)
+    const restored = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
+    const doc2 = new Y.Doc();
+    Y.applyUpdate(doc2, restored);
+
+    const restoredWaypoints = doc2.getArray("waypoints");
+    expect(restoredWaypoints.length).toBe(1);
+    const restoredWp = restoredWaypoints.get(0) as Y.Map<unknown>;
+    expect(restoredWp.get("lat")).toBe(52.52);
+    expect(restoredWp.get("lon")).toBe(13.405);
+  });
+
+  it("merges local and remote state without conflict", () => {
+    // Simulate: local has waypoint A, server has waypoint B
+    const local = new Y.Doc();
+    const localWps = local.getArray("waypoints");
+    const wpA = new Y.Map();
+    wpA.set("lat", 52.0);
+    wpA.set("lon", 13.0);
+    localWps.push([wpA]);
+
+    const remote = new Y.Doc();
+    const remoteWps = remote.getArray("waypoints");
+    const wpB = new Y.Map();
+    wpB.set("lat", 48.0);
+    wpB.set("lon", 11.0);
+    remoteWps.push([wpB]);
+
+    // Merge remote into local (simulates reconnect)
+    const remoteState = Y.encodeStateAsUpdate(remote);
+    Y.applyUpdate(local, remoteState);
+
+    // Both waypoints should exist
+    expect(localWps.length).toBe(2);
+  });
+});

apps/planner/app/lib/use-routing.ts

@@ -51,6 +51,11 @@ export function useRouting(yjs: YjsState | null) {
     async (waypoints: WaypointData[]) => {
       if (!yjs || !isHost || waypoints.length < 2) return;
 
+      // Collect no-go areas from Yjs
+      const noGoAreas = yjs.noGoAreas.toArray().map((yMap) => ({
+        points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [],
+      })).filter((a) => a.points.length >= 3);
+
       setComputing(true);
       try {
         const response = await fetch("/api/route", {
@@ -59,9 +64,14 @@ export function useRouting(yjs: YjsState | null) {
           body: JSON.stringify({
             waypoints,
             profile: (yjs.routeData.get("profile") as string) ?? "trekking",
+            noGoAreas: noGoAreas.length > 0 ? noGoAreas : undefined,
           }),
         });
 
+        if (response.status === 429) {
+          console.warn("[Rate Limit] Route computation rate limit exceeded");
+          return;
+        }
         if (!response.ok) return;
 
         const geojson = await response.json();
@@ -100,7 +110,7 @@ export function useRouting(yjs: YjsState | null) {
   useEffect(() => {
     if (!yjs || !isHost) return;
 
-    const onProfileChange = () => {
+    const triggerRecompute = () => {
       const wps = getWaypointsFromYjs(yjs.waypoints);
       if (wps.length >= 2) {
         requestRoute(wps);
@@ -108,14 +118,23 @@ export function useRouting(yjs: YjsState | null) {
     };
 
     // Observe routeData for profile changes
-    const observer = (event: Y.YMapEvent<unknown>) => {
+    const profileObserver = (event: Y.YMapEvent<unknown>) => {
       if (event.keysChanged.has("profile")) {
-        onProfileChange();
+        triggerRecompute();
       }
     };
 
-    yjs.routeData.observe(observer);
-    return () => yjs.routeData.unobserve(observer);
+    // Observe noGoAreas for changes
+    const noGoObserver = () => {
+      triggerRecompute();
+    };
+
+    yjs.routeData.observe(profileObserver);
+    yjs.noGoAreas.observeDeep(noGoObserver);
+    return () => {
+      yjs.routeData.unobserve(profileObserver);
+      yjs.noGoAreas.unobserveDeep(noGoObserver);
+    };
   }, [yjs, isHost, requestRoute]);
 
   return { isHost, computing, routeStats, requestRoute };

apps/planner/app/lib/use-yjs.ts

@@ -32,6 +32,8 @@ export interface YjsState {
   provider: WebsocketProvider;
   waypoints: Y.Array<Y.Map<unknown>>;
   routeData: Y.Map<unknown>;
+  noGoAreas: Y.Array<Y.Map<unknown>>;
+  notes: Y.Text;
   awareness: WebsocketProvider["awareness"];
   connected: boolean;
   setUserName: (name: string) => void;
@@ -57,6 +59,27 @@ export function useYjs(
 
     const waypoints = doc.getArray<Y.Map<unknown>>("waypoints");
     const routeData = doc.getMap("routeData");
+    const noGoAreas = doc.getArray<Y.Map<unknown>>("noGoAreas");
+    const notes = doc.getText("notes");
+
+    // --- Crash Recovery: restore state from localStorage ---
+    const storageKey = `trails:session:${sessionId}`;
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const update = Uint8Array.from(atob(saved), (c) => c.charCodeAt(0));
+        Y.applyUpdate(doc, update);
+      }
+    } catch { /* localStorage unavailable or corrupted */ }
+
+    // --- Crash Recovery: periodic save to localStorage ---
+    const saveInterval = setInterval(() => {
+      try {
+        const state = Y.encodeStateAsUpdate(doc);
+        const b64 = btoa(String.fromCharCode(...state));
+        localStorage.setItem(storageKey, b64);
+      } catch { /* localStorage unavailable */ }
+    }, 10_000);
 
     const identity = getOrCreateUserIdentity();
     identityRef.current = identity;
@@ -94,6 +117,8 @@ export function useYjs(
         provider,
         waypoints,
         routeData,
+        noGoAreas,
+        notes,
         awareness: provider.awareness,
         connected,
         setUserName,
@@ -107,6 +132,9 @@ export function useYjs(
     updateState(false);
 
     return () => {
+      clearInterval(saveInterval);
+      // Clear localStorage on clean disconnect (session close)
+      try { localStorage.removeItem(storageKey); } catch { /* ignore */ }
       provider.destroy();
       doc.destroy();
       providerRef.current = null;

apps/planner/app/routes/api.route.ts

@@ -9,10 +9,11 @@ export async function action({ request }: Route.ActionArgs) {
   }
 
   const body = await request.json();
-  const { waypoints, profile, sessionId } = body as {
+  const { waypoints, profile, sessionId, noGoAreas } = body as {
     waypoints: Array<{ lat: number; lon: number }>;
     profile?: string;
     sessionId?: string;
+    noGoAreas?: Array<{ points: Array<{ lat: number; lon: number }> }>;
   };
 
   if (!waypoints || waypoints.length < 2) {
@@ -34,7 +35,7 @@ export async function action({ request }: Route.ActionArgs) {
   }
 
   try {
-    const route = await computeRoute({ waypoints, profile });
+    const route = await computeRoute({ waypoints, profile, noGoAreas });
     return data(route, {
       headers: { "X-RateLimit-Remaining": String(limit.remaining) },
     });

apps/planner/app/routes/new.tsx

@@ -1,10 +1,25 @@
-import { redirect } from "react-router";
+import { redirect, data } from "react-router";
 import type { Route } from "./+types/new";
 import { createSession, initializeSessionWithWaypoints } from "~/lib/sessions";
 import { parseGpx } from "@trails-cool/gpx";
+import { checkRateLimit } from "~/lib/rate-limit";
 
 export async function loader({ request }: Route.LoaderArgs) {
   const url = new URL(request.url);
+
+  // Rate limit session creation by IP
+  const ip = request.headers.get("x-forwarded-for") ?? "unknown";
+  const limit = checkRateLimit(`session-create:${ip}`, { maxRequests: 10 });
+  if (!limit.allowed) {
+    throw data(
+      { error: "Too many sessions created. Please try again later." },
+      {
+        status: 429,
+        headers: { "Retry-After": String(limit.retryAfterSeconds) },
+      },
+    );
+  }
+
   const callbackUrl = url.searchParams.get("callback");
   const token = url.searchParams.get("token");
   const returnUrl = url.searchParams.get("returnUrl");