Implement Planner-Journal handoff (Group 9)

JWT-based handoff between Journal and Planner:

Journal side:
- JWT token generation scoped to route_id with 7-day expiry (jose)
- "Edit in Planner" button on route detail page — generates JWT,
  redirects to Planner /new with callback URL, token, and GPX
- Callback endpoint (POST /api/routes/:id/callback) validates JWT
  and creates new route version from received GPX

Planner side:
- /new route accepts callback, token, returnUrl, gpx params
- Creates session with callback metadata, initializes with GPX
- "Save to Journal" button POSTs GPX with Bearer token to callback
- "Return to Journal" link shown after successful save

All 6 Group 9 tasks complete.

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

apps/planner/app/components/SaveToJournalButton.tsx

@@ -0,0 +1,93 @@
+import { useState, useCallback } from "react";
+import * as Y from "yjs";
+import type { YjsState } from "~/lib/use-yjs";
+import { generateGpx } from "@trails-cool/gpx";
+import type { TrackPoint } from "@trails-cool/gpx";
+
+interface SaveToJournalButtonProps {
+  yjs: YjsState;
+  callbackUrl: string;
+  callbackToken: string;
+  returnUrl?: string;
+}
+
+export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl }: SaveToJournalButtonProps) {
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setError(null);
+
+    try {
+      // Build GPX from current Yjs state
+      const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map<unknown>) => ({
+        lat: yMap.get("lat") as number,
+        lon: yMap.get("lon") as number,
+        name: yMap.get("name") as string | undefined,
+      }));
+
+      let tracks: TrackPoint[][] = [];
+      const geojsonStr = yjs.routeData.get("geojson") as string | undefined;
+      if (geojsonStr) {
+        try {
+          const geojson = JSON.parse(geojsonStr);
+          const coords: number[][] = geojson.features?.[0]?.geometry?.coordinates ?? [];
+          if (coords.length > 0) {
+            tracks = [coords.map((c) => ({ lat: c[1]!, lon: c[0]!, ele: c[2] }))];
+          }
+        } catch { /* invalid geojson */ }
+      }
+
+      const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks });
+
+      // POST to Journal callback
+      const response = await fetch(callbackUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${callbackToken}`,
+        },
+        body: JSON.stringify({ gpx }),
+      });
+
+      if (!response.ok) {
+        const result = await response.json();
+        throw new Error(result.error ?? "Save failed");
+      }
+
+      setSaved(true);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  }, [yjs, callbackUrl, callbackToken]);
+
+  if (saved) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-green-600">Saved!</span>
+        {returnUrl && (
+          <a href={returnUrl} className="rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200">
+            Return to Journal
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={handleSave}
+        disabled={saving}
+        className="rounded bg-green-600 px-3 py-1 text-sm text-white hover:bg-green-700 disabled:opacity-50"
+      >
+        {saving ? "Saving..." : "Save to Journal"}
+      </button>
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

apps/planner/app/components/SessionView.tsx

@@ -3,6 +3,7 @@ import { useYjs } from "~/lib/use-yjs";
 import { useRouting } from "~/lib/use-routing";
 import { ProfileSelector } from "~/components/ProfileSelector";
 import { ExportButton } from "~/components/ExportButton";
+import { SaveToJournalButton } from "~/components/SaveToJournalButton";
 import { YjsDebugPanel } from "~/components/YjsDebugPanel";
 
 const PlannerMap = lazy(() =>
@@ -15,7 +16,14 @@ const ElevationChart = lazy(() =>
   import("~/components/ElevationChart").then((m) => ({ default: m.ElevationChart })),
 );
 
-export function SessionView({ sessionId }: { sessionId: string }) {
+interface SessionViewProps {
+  sessionId: string;
+  callbackUrl?: string;
+  callbackToken?: string;
+  returnUrl?: string;
+}
+
+export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl }: SessionViewProps) {
   const yjs = useYjs(sessionId);
   const { isHost, computing, routeStats, requestRoute } = useRouting(yjs);
   const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null);
@@ -40,6 +48,14 @@ export function SessionView({ sessionId }: { sessionId: string }) {
           <ProfileSelector yjs={yjs} />
         </div>
         <div className="flex items-center gap-3">
+          {callbackUrl && callbackToken && (
+            <SaveToJournalButton
+              yjs={yjs}
+              callbackUrl={callbackUrl}
+              callbackToken={callbackToken}
+              returnUrl={returnUrl}
+            />
+          )}
           <ExportButton yjs={yjs} />
           {computing && (
             <span className="text-xs text-blue-600">Computing route...</span>

apps/planner/app/routes.ts

@@ -2,6 +2,7 @@ import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
 export default [
   index("routes/home.tsx"),
+  route("new", "routes/new.tsx"),
   route("api/sessions", "routes/api.sessions.ts"),
   route("api/route", "routes/api.route.ts"),
   route("session/:id", "routes/session.$id.tsx"),

apps/planner/app/routes/new.tsx

@@ -0,0 +1,36 @@
+import { redirect } from "react-router";
+import type { Route } from "./+types/new";
+import { createSession, initializeSessionWithWaypoints } from "~/lib/sessions";
+import { parseGpx } from "@trails-cool/gpx";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+  const callbackUrl = url.searchParams.get("callback");
+  const token = url.searchParams.get("token");
+  const returnUrl = url.searchParams.get("returnUrl");
+  const gpxEncoded = url.searchParams.get("gpx");
+
+  // Create a session with callback info
+  const session = await createSession({
+    callbackUrl: callbackUrl ?? undefined,
+    callbackToken: token ?? undefined,
+  });
+
+  // Initialize with GPX waypoints if provided
+  if (gpxEncoded) {
+    try {
+      const gpx = decodeURIComponent(gpxEncoded);
+      const gpxData = parseGpx(gpx);
+      initializeSessionWithWaypoints(session.id, gpxData.waypoints);
+    } catch {
+      // Continue with empty session if GPX is invalid
+    }
+  }
+
+  // Store returnUrl in the session URL for later
+  const sessionUrl = returnUrl
+    ? `/session/${session.id}?returnUrl=${encodeURIComponent(returnUrl)}`
+    : `/session/${session.id}`;
+
+  return redirect(sessionUrl);
+}

apps/planner/app/routes/session.$id.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router";
+import { useParams, useSearchParams } from "react-router";
 import type { Route } from "./+types/session.$id";
 import { getSession } from "~/lib/sessions";
 import { data } from "react-router";
@@ -20,12 +20,15 @@ export async function loader({ params }: Route.LoaderArgs) {
   }
   return data({
     sessionId: session.id,
-    hasCallback: !!session.callbackUrl,
+    callbackUrl: session.callbackUrl ?? null,
+    callbackToken: session.callbackToken ?? null,
   });
 }
 
-export default function SessionPage() {
+export default function SessionPage({ loaderData }: Route.ComponentProps) {
   const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const returnUrl = searchParams.get("returnUrl") ?? undefined;
 
   return (
     <div className="flex h-full flex-col">
@@ -44,7 +47,12 @@ export default function SessionPage() {
               </div>
             }
           >
-            <SessionView sessionId={id!} />
+            <SessionView
+              sessionId={id!}
+              callbackUrl={loaderData.callbackUrl ?? undefined}
+              callbackToken={loaderData.callbackToken ?? undefined}
+              returnUrl={returnUrl}
+            />
           </Suspense>
         )}
       </ClientOnly>