Merge pull request #26 from trails-cool/planner-journal-handoff

Implement Planner-Journal handoff (Group 9)

apps/journal/app/components/ClientDate.tsx

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Renders a date only on the client to avoid SSR hydration mismatches.
+ * Server renders empty, client fills in with user's locale.
+ */
+export function ClientDate({ iso }: { iso: string }) {
+  const [formatted, setFormatted] = useState(new Date(iso).toLocaleDateString("en-US"));
+
+  useEffect(() => {
+    setFormatted(new Date(iso).toLocaleDateString());
+  }, [iso]);
+
+  return <time dateTime={iso}>{formatted}</time>;
+}

apps/journal/app/lib/jwt.server.ts

@@ -0,0 +1,27 @@
+import { SignJWT, jwtVerify } from "jose";
+
+const JWT_SECRET = new TextEncoder().encode(
+  process.env.JWT_SECRET ?? "dev-jwt-secret-change-in-production",
+);
+
+const ISSUER = process.env.ORIGIN ?? "http://localhost:3000";
+
+export async function createRouteToken(routeId: string, permissions: string[] = ["read", "write"]): Promise<string> {
+  return new SignJWT({ route_id: routeId, permissions })
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuer(ISSUER)
+    .setExpirationTime("7d")
+    .setIssuedAt()
+    .sign(JWT_SECRET);
+}
+
+export async function verifyRouteToken(token: string): Promise<{ routeId: string; permissions: string[] }> {
+  const { payload } = await jwtVerify(token, JWT_SECRET, {
+    issuer: ISSUER,
+  });
+
+  return {
+    routeId: payload.route_id as string,
+    permissions: payload.permissions as string[],
+  };
+}

apps/journal/app/routes.ts

@@ -12,5 +12,8 @@ export default [
   route("routes/new", "routes/routes.new.tsx"),
   route("routes/:id", "routes/routes.$id.tsx"),
   route("routes/:id/edit", "routes/routes.$id.edit.tsx"),
+  route("api/routes/:id/callback", "routes/api.routes.$id.callback.ts"),
+  route("api/routes/:id/edit-in-planner", "routes/api.routes.$id.edit-in-planner.ts"),
+  route("api/routes/:id/gpx", "routes/api.routes.$id.gpx.ts"),
   route("users/:username", "routes/users.$username.tsx"),
 ] satisfies RouteConfig;

apps/journal/app/routes/api.routes.$id.callback.ts

@@ -0,0 +1,52 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.routes.$id.callback";
+import { verifyRouteToken } from "~/lib/jwt.server";
+import { updateRoute, getRoute } from "~/lib/routes.server";
+
+export async function action({ params, request }: Route.ActionArgs) {
+  if (request.method !== "POST") {
+    return data({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  // Verify JWT token from Authorization header or body
+  const authHeader = request.headers.get("Authorization");
+  const token = authHeader?.startsWith("Bearer ") ? authHeader.slice(7) : null;
+
+  if (!token) {
+    return data({ error: "Missing authorization token" }, { status: 401 });
+  }
+
+  try {
+    const { routeId, permissions } = await verifyRouteToken(token);
+
+    // Verify token is for this route
+    if (routeId !== params.id) {
+      return data({ error: "Token not valid for this route" }, { status: 403 });
+    }
+
+    if (!permissions.includes("write")) {
+      return data({ error: "Token does not have write permission" }, { status: 403 });
+    }
+
+    // Get route to verify it exists
+    const route = await getRoute(params.id);
+    if (!route) {
+      return data({ error: "Route not found" }, { status: 404 });
+    }
+
+    // Parse GPX from request body
+    const body = await request.json();
+    const { gpx } = body as { gpx: string };
+
+    if (!gpx) {
+      return data({ error: "Missing GPX data" }, { status: 400 });
+    }
+
+    // Update route with new GPX (creates new version)
+    await updateRoute(params.id, route.ownerId, { gpx });
+
+    return data({ success: true, routeId: params.id });
+  } catch (e) {
+    return data({ error: (e as Error).message }, { status: 401 });
+  }
+}

apps/journal/app/routes/api.routes.$id.edit-in-planner.ts

@@ -0,0 +1,50 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.routes.$id.edit-in-planner";
+import { getSessionUser } from "~/lib/auth.server";
+import { getRouteWithVersions } from "~/lib/routes.server";
+import { createRouteToken } from "~/lib/jwt.server";
+
+export async function action({ params, request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return data({ error: "Not authenticated" }, { status: 401 });
+
+  const route = await getRouteWithVersions(params.id);
+  if (!route) return data({ error: "Route not found" }, { status: 404 });
+  if (route.ownerId !== user.id) return data({ error: "Not authorized" }, { status: 403 });
+
+  const token = await createRouteToken(params.id);
+  const origin = process.env.ORIGIN ?? "http://localhost:3000";
+  const callbackUrl = `${origin}/api/routes/${params.id}/callback`;
+  const plannerUrl = process.env.PLANNER_URL ?? "http://localhost:3001";
+  const returnUrl = `${origin}/routes/${params.id}`;
+
+  // Create Planner session via API (POST body, not URL params)
+  const sessionResp = await fetch(`${plannerUrl}/api/sessions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      callbackUrl,
+      callbackToken: token,
+      gpx: route.gpx ?? undefined,
+    }),
+  });
+
+  if (!sessionResp.ok) {
+    return data({ error: "Failed to create Planner session" }, { status: 502 });
+  }
+
+  const session = (await sessionResp.json()) as {
+    url: string;
+    initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>;
+  };
+
+  // Encode waypoints in URL params (small — just coordinates, not full GPX)
+  const urlParams = new URLSearchParams({ returnUrl });
+  if (session.initialWaypoints?.length) {
+    urlParams.set("waypoints", JSON.stringify(session.initialWaypoints));
+  }
+
+  return data({
+    url: `${plannerUrl}${session.url}?${urlParams}`,
+  });
+}

apps/journal/app/routes/api.routes.$id.gpx.ts

@@ -0,0 +1,16 @@
+import type { Route } from "./+types/api.routes.$id.gpx";
+import { getRouteWithVersions } from "~/lib/routes.server";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const route = await getRouteWithVersions(params.id);
+  if (!route?.gpx) {
+    return new Response("No GPX data", { status: 404 });
+  }
+
+  return new Response(route.gpx, {
+    headers: {
+      "Content-Type": "application/gpx+xml",
+      "Content-Disposition": `attachment; filename="${route.name.replace(/[^a-z0-9]/gi, "_")}.gpx"`,
+    },
+  });
+}

apps/journal/app/routes/routes.$id.tsx

@@ -1,7 +1,9 @@
+import { useState, useCallback } from "react";
 import { data, redirect } from "react-router";
 import type { Route } from "./+types/routes.$id";
 import { getSessionUser } from "~/lib/auth.server";
 import { getRouteWithVersions, deleteRoute, updateRoute } from "~/lib/routes.server";
+import { ClientDate } from "~/components/ClientDate";
 
 
 export async function loader({ params, request }: Route.LoaderArgs) {
@@ -61,18 +63,6 @@ export async function action({ params, request }: Route.ActionArgs) {
     return redirect(`/routes/${params.id}`);
   }
 
-  if (intent === "export-gpx") {
-    const route = await getRouteWithVersions(params.id);
-    if (!route?.gpx) return data({ error: "No GPX data" }, { status: 400 });
-
-    return new Response(route.gpx, {
-      headers: {
-        "Content-Type": "application/gpx+xml",
-        "Content-Disposition": `attachment; filename="${route.name.replace(/[^a-z0-9]/gi, "_")}.gpx"`,
-      },
-    });
-  }
-
   return data({ error: "Unknown action" }, { status: 400 });
 }
 
@@ -83,6 +73,20 @@ export function meta({ data: loaderData }: Route.MetaArgs) {
 
 export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
   const { route, versions, isOwner } = loaderData;
+  const [editLoading, setEditLoading] = useState(false);
+
+  const handleEditInPlanner = useCallback(async () => {
+    setEditLoading(true);
+    try {
+      const resp = await fetch(`/api/routes/${route.id}/edit-in-planner`, { method: "POST" });
+      const result = await resp.json();
+      if (result.url) {
+        window.location.href = result.url;
+      }
+    } finally {
+      setEditLoading(false);
+    }
+  }, [route.id]);
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-8">
@@ -95,22 +99,28 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
         </div>
         {isOwner && (
           <div className="flex gap-2">
+            <button
+              onClick={handleEditInPlanner}
+              disabled={editLoading}
+              className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {editLoading ? "Opening..." : "Edit in Planner"}
+            </button>
             <a
               href={`/routes/${route.id}/edit`}
               className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
             >
               Edit
             </a>
-            <form method="post">
-              <input type="hidden" name="intent" value="export-gpx" />
-              <button
-                type="submit"
-                disabled={!route.hasGpx}
-                className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            {route.hasGpx && (
+              <a
+                href={`/api/routes/${route.id}/gpx`}
+                download
+                className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
               >
                 Export GPX
-              </button>
-            </form>
+              </a>
+            )}
           </div>
         )}
       </div>
@@ -147,7 +157,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray-700">v{v.version}</span>
                   <span className="text-sm text-gray-500">
-                    {new Date(v.createdAt).toLocaleDateString()}
+                    <ClientDate iso={v.createdAt} />
                   </span>
                 </div>
                 {v.changeDescription && (

apps/journal/app/routes/routes._index.tsx

@@ -2,6 +2,7 @@ import { data, redirect } from "react-router";
 import type { Route } from "./+types/routes._index";
 import { getSessionUser } from "~/lib/auth.server";
 import { listRoutes } from "~/lib/routes.server";
+import { ClientDate } from "~/components/ClientDate";
 
 export async function loader({ request }: Route.LoaderArgs) {
   const user = await getSessionUser(request);
@@ -53,7 +54,7 @@ export default function RoutesListPage({ loaderData }: Route.ComponentProps) {
                 <div className="flex items-center justify-between">
                   <h2 className="text-lg font-medium text-gray-900">{route.name}</h2>
                   <span className="text-sm text-gray-500">
-                    {new Date(route.updatedAt).toLocaleDateString()}
+                    <ClientDate iso={route.updatedAt} />
                   </span>
                 </div>
                 <div className="mt-1 flex gap-4 text-sm text-gray-500">

apps/journal/package.json

@@ -23,6 +23,7 @@
     "@trails-cool/ui": "workspace:*",
     "drizzle-orm": "catalog:",
     "isbot": "^5.1.0",
+    "jose": "^6.2.2",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-router": "catalog:"

apps/planner/app/components/SaveToJournalButton.tsx

@@ -0,0 +1,86 @@
+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]);
+
+  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>
+      {saved && <span className="text-xs text-green-600">Saved!</span>}
+      {error && <span className="text-xs text-red-600">{error}</span>}
+      {saved && returnUrl && (
+        <a href={returnUrl} className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200">
+          Return to Journal
+        </a>
+      )}
+    </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,8 +16,16 @@ const ElevationChart = lazy(() =>
   import("~/components/ElevationChart").then((m) => ({ default: m.ElevationChart })),
 );
 
-export function SessionView({ sessionId }: { sessionId: string }) {
-  const yjs = useYjs(sessionId);
+interface SessionViewProps {
+  sessionId: string;
+  callbackUrl?: string;
+  callbackToken?: string;
+  returnUrl?: string;
+  initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>;
+}
+
+export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, initialWaypoints }: SessionViewProps) {
+  const yjs = useYjs(sessionId, initialWaypoints);
   const { isHost, computing, routeStats, requestRoute } = useRouting(yjs);
   const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null);
 
@@ -40,6 +49,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/lib/use-yjs.ts

@@ -36,10 +36,14 @@ export interface YjsState {
   connected: boolean;
 }
 
-export function useYjs(sessionId: string): YjsState | null {
+export function useYjs(
+  sessionId: string,
+  initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>,
+): YjsState | null {
   const [state, setState] = useState<YjsState | null>(null);
   const providerRef = useRef<WebsocketProvider | null>(null);
   const docRef = useRef<Y.Doc | null>(null);
+  const initializedWaypoints = useRef(false);
 
   useEffect(() => {
     const doc = new Y.Doc();
@@ -52,10 +56,28 @@ export function useYjs(sessionId: string): YjsState | null {
     const waypoints = doc.getArray<Y.Map<unknown>>("waypoints");
     const routeData = doc.getMap("routeData");
 
-    // Use persistent identity
     const { color, name } = getOrCreateUserIdentity();
     provider.awareness.setLocalStateField("user", { color, name });
 
+    // Initialize waypoints once after first sync
+    if (initialWaypoints?.length && !initializedWaypoints.current) {
+      (provider as unknown as { on(event: string, cb: () => void): void }).on("synced", () => {
+        // Only add if the doc is empty (avoid duplicating on reconnect)
+        if (waypoints.length === 0 && !initializedWaypoints.current) {
+          initializedWaypoints.current = true;
+          doc.transact(() => {
+            for (const wp of initialWaypoints) {
+              const yMap = new Y.Map();
+              yMap.set("lat", wp.lat);
+              yMap.set("lon", wp.lon);
+              if (wp.name) yMap.set("name", wp.name);
+              waypoints.push([yMap]);
+            }
+          });
+        }
+      });
+    }
+
     const updateState = (connected: boolean) => {
       setState({
         doc,

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/api.sessions.ts

@@ -1,7 +1,7 @@
 import { data } from "react-router";
 import type { Route } from "./+types/api.sessions";
-import { createSession, initializeSessionWithWaypoints, listSessions } from "~/lib/sessions";
-import { parseGpx } from "@trails-cool/gpx";
+import { createSession, listSessions } from "~/lib/sessions";
+import { parseGpxAsync } from "@trails-cool/gpx";
 
 export async function action({ request }: Route.ActionArgs) {
   if (request.method !== "POST") {
@@ -17,10 +17,11 @@ export async function action({ request }: Route.ActionArgs) {
 
   const session = await createSession({ callbackUrl, callbackToken });
 
+  let initialWaypoints: Array<{ lat: number; lon: number; name?: string }> | undefined;
   if (gpx) {
     try {
-      const gpxData = parseGpx(gpx);
-      initializeSessionWithWaypoints(session.id, gpxData.waypoints);
+      const gpxData = await parseGpxAsync(gpx);
+      initialWaypoints = gpxData.waypoints;
     } catch (_e) {
       // Continue with empty session if GPX is invalid
     }
@@ -30,6 +31,7 @@ export async function action({ request }: Route.ActionArgs) {
     {
       sessionId: session.id,
       url: `/session/${session.id}`,
+      initialWaypoints,
     },
     { status: 201 },
   );

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,20 @@ 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;
+  const waypointsParam = searchParams.get("waypoints");
+  let initialWaypoints: Array<{ lat: number; lon: number; name?: string }> | undefined;
+  if (waypointsParam) {
+    try { initialWaypoints = JSON.parse(waypointsParam); } catch { /* ignore */ }
+  }
 
   return (
     <div className="flex h-full flex-col">
@@ -44,7 +52,13 @@ export default function SessionPage() {
               </div>
             }
           >
-            <SessionView sessionId={id!} />
+            <SessionView
+              sessionId={id!}
+              callbackUrl={loaderData.callbackUrl ?? undefined}
+              callbackToken={loaderData.callbackToken ?? undefined}
+              returnUrl={returnUrl}
+              initialWaypoints={initialWaypoints}
+            />
           </Suspense>
         )}
       </ClientOnly>

openspec/changes/phase-1-mvp/tasks.md

@@ -89,12 +89,12 @@
 
 ## 9. Planner-Journal Handoff
 
-- [ ] 9.1 Implement JWT token generation in Journal (scoped to route_id, with expiry)
-- [ ] 9.2 Implement "Edit in Planner" button on Journal route detail page (redirect with callback + token + GPX)
-- [ ] 9.3 Implement callback URL handling in Planner (store callback URL in session metadata)
-- [ ] 9.4 Implement "Save to Journal" button in Planner (POST GPX + JWT to callback URL)
-- [ ] 9.5 Implement callback endpoint in Journal (POST /api/routes/:id/callback — validate JWT, save new version)
-- [ ] 9.6 Implement "Return to Journal" link after successful save
+- [x] 9.1 Implement JWT token generation in Journal (scoped to route_id, with expiry)
+- [x] 9.2 Implement "Edit in Planner" button on Journal route detail page (redirect with callback + token + GPX)
+- [x] 9.3 Implement callback URL handling in Planner (store callback URL in session metadata)
+- [x] 9.4 Implement "Save to Journal" button in Planner (POST GPX + JWT to callback URL)
+- [x] 9.5 Implement callback endpoint in Journal (POST /api/routes/:id/callback — validate JWT, save new version)
+- [x] 9.6 Implement "Return to Journal" link after successful save
 
 ## 10. Journal — Activity Feed
 

package.json

@@ -44,6 +44,7 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "jsdom": "^29.0.1",
     "leaflet": "^1.9.4",
+    "linkedom": "^0.18.12",
     "playwright": "^1.58.2",
     "postgres": "^3.4.8",
     "prettier": "^3.8.1",

packages/gpx/src/index.ts

@@ -1,3 +1,3 @@
-export { parseGpx } from "./parse";
+export { parseGpx, parseGpxAsync } from "./parse";
 export { generateGpx } from "./generate";
 export type { GpxData, TrackPoint, ElevationProfile } from "./types";

packages/gpx/src/parse.ts

@@ -4,9 +4,39 @@ import type { GpxData, TrackPoint, ElevationProfile } from "./types";
 /**
  * Parse a GPX XML string into structured data.
  */
+let _LinkedDOMParser: typeof DOMParser | null = null;
+
+async function getDOMParser(): Promise<typeof DOMParser> {
+  if (typeof DOMParser !== "undefined") return DOMParser;
+  if (!_LinkedDOMParser) {
+    const linkedom = await import("linkedom");
+    _LinkedDOMParser = linkedom.DOMParser as unknown as typeof DOMParser;
+  }
+  return _LinkedDOMParser;
+}
+
 export function parseGpx(xml: string): GpxData {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(xml, "application/xml");
+  // Synchronous path for browser
+  if (typeof DOMParser !== "undefined") {
+    return parseGpxWithParser(new DOMParser(), xml);
+  }
+  // Fallback: try linkedom synchronously (works in Node with top-level await or CJS)
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { DOMParser: LP } = require("linkedom");
+    return parseGpxWithParser(new LP() as unknown as DOMParser, xml);
+  } catch {
+    throw new Error("DOMParser not available — install linkedom for Node.js");
+  }
+}
+
+export async function parseGpxAsync(xml: string): Promise<GpxData> {
+  const Parser = await getDOMParser();
+  return parseGpxWithParser(new Parser(), xml);
+}
+
+function parseGpxWithParser(parser: DOMParser, xml: string): GpxData {
+  const doc = parser.parseFromString(xml, "application/xml") as unknown as Document;
 
   const parserError = doc.querySelector("parsererror");
   if (parserError) {

pnpm-lock.yaml

@@ -119,6 +119,9 @@ importers:
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
+      linkedom:
+        specifier: ^0.18.12
+        version: 0.18.12
       playwright:
         specifier: ^1.58.2
         version: 1.58.2
@@ -197,6 +200,9 @@ importers:
       isbot:
         specifier: ^5.1.0
         version: 5.1.36
+      jose:
+        specifier: ^6.2.2
+        version: 6.2.2
       react:
         specifier: 'catalog:'
         version: 19.2.4
@@ -1542,6 +1548,9 @@ packages:
     resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
   brace-expansion@5.0.4:
     resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==}
     engines: {node: 18 || 20 || >=22}
@@ -1618,13 +1627,23 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
   css-tree@3.2.1:
     resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssom@0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -1685,6 +1704,19 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   drizzle-kit@0.31.10:
     resolution: {integrity: sha512-7OZcmQUrdGI+DUNNsKBn1aW8qSoKuTH7d0mYgSP8bAzdFzKoovxEFnoGQp2dVs82EOJeYycqRtciopszwUf8bw==}
     hasBin: true
@@ -1894,10 +1926,18 @@ packages:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -2107,9 +2147,15 @@ packages:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
+  html-escaper@3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+
   html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
 
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -2177,6 +2223,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jose@6.2.2:
+    resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2293,6 +2342,15 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
+  linkedom@0.18.12:
+    resolution: {integrity: sha512-jalJsOwIKuQJSeTvsgzPe9iJzyfVaEJiEXl+25EkKevsULHvMJzpNqwvj1jOESWdmgKDiXObyjOYwlUqG7wo1Q==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: '>= 2'
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2386,6 +2444,9 @@ packages:
   node-releases@2.0.36:
     resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -2765,6 +2826,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uhyphen@0.2.0:
+    resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==}
+
   undici-types@7.18.2:
     resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
@@ -4126,6 +4190,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  boolbase@1.0.0: {}
+
   brace-expansion@5.0.4:
     dependencies:
       balanced-match: 4.0.4
@@ -4200,13 +4266,25 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
   css-tree@3.2.1:
     dependencies:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
 
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
+  cssom@0.5.0: {}
+
   csstype@3.2.3: {}
 
   data-urls@7.0.0:
@@ -4242,6 +4320,24 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   drizzle-kit@0.31.10:
     dependencies:
       '@drizzle-team/brocli': 0.10.2
@@ -4278,8 +4374,12 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@4.5.0: {}
+
   entities@6.0.1: {}
 
+  entities@7.0.1: {}
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -4570,10 +4670,19 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  html-escaper@3.0.3: {}
+
   html-parse-stringify@3.0.1:
     dependencies:
       void-elements: 3.1.0
 
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -4624,6 +4733,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jose@6.2.2: {}
+
   js-tokens@4.0.0: {}
 
   jsdom@29.0.1:
@@ -4726,6 +4837,14 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
+  linkedom@0.18.12:
+    dependencies:
+      css-select: 5.2.2
+      cssom: 0.5.0
+      html-escaper: 3.0.3
+      htmlparser2: 10.1.0
+      uhyphen: 0.2.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4794,6 +4913,10 @@ snapshots:
 
   node-releases@2.0.36: {}
 
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   object-inspect@1.13.4: {}
 
   obug@2.1.1: {}
@@ -5171,6 +5294,8 @@ snapshots:
 
   typescript@5.9.3: {}
 
+  uhyphen@0.2.0: {}
+
   undici-types@7.18.2: {}
 
   undici@7.24.5: {}