route-surface-breakdown (Phase 1): Planner-path surface/waytype bars

Synchronous path + rendering for the surface/waytype breakdown:
- map-core `computeSurfaceBreakdown(coords, surfaces, highways)` → distance-
  weighted metres per surface + waytype category (unit-tested);
- `SurfaceBreakdownSchema` in @trails-cool/api;
- nullable `surfaceBreakdown` jsonb on routes + activities;
- Planner `SaveToJournalButton` computes it from the BRouter waytags already in
  routeData and sends it; `api.save-to-journal` forwards it; the journal route
  callback validates + persists (journal is the authoritative validator);
- `SurfaceBreakdown` component (stacked bars per dimension, map-core palettes,
  legend category · % · km largest-first, unknown → "other", hidden when empty)
  on route + activity detail; journal gains a @trails-cool/map-core dep;
- i18n journal.surface.* (en + de).

Phase 2 (async Overpass backfill + SSE for imports/uploads, and the e2e that
seeds a breakdown) follows in a separate PR.

Tests: computeSurfaceBreakdown unit (map-core 36); SurfaceBreakdown component
(jsdom, journal 326). typecheck + lint green; verified in the browser.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/planner/app/components/SaveToJournalButton.tsx

@@ -1,7 +1,9 @@
 import { useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { computeSurfaceBreakdown } from "@trails-cool/map-core";
 import type { YjsState } from "~/lib/use-yjs";
 import { buildPlanGpx } from "~/lib/gpx-export";
+import { readComputedRoute } from "~/lib/route-data";
 
 interface SaveToJournalButtonProps {
   yjs: YjsState;
@@ -24,6 +26,19 @@ export function SaveToJournalButton({ yjs, sessionId, returnUrl }: SaveToJournal
       // route round-trips correctly through the journal.
       const gpx = buildPlanGpx(yjs);
 
+      // Distance-weighted surface/waytype breakdown from the BRouter waytags
+      // already in routeData — sent alongside the GPX so the journal can show
+      // it without re-deriving (route-surface-breakdown, Path 1).
+      const route = readComputedRoute(yjs.routeData);
+      const breakdown =
+        route.coordinates && route.coordinates.length > 1
+          ? computeSurfaceBreakdown(route.coordinates, route.surfaces, route.highways)
+          : null;
+      const surfaceBreakdown =
+        breakdown && (Object.keys(breakdown.surface).length > 0 || Object.keys(breakdown.highway).length > 0)
+          ? breakdown
+          : undefined;
+
       // POST to the planner's server-side proxy. The proxy attaches the
       // journal Bearer token (stored on the session row) and forwards
       // the GPX. Token never leaves the planner server — see
@@ -31,7 +46,7 @@ export function SaveToJournalButton({ yjs, sessionId, returnUrl }: SaveToJournal
       const response = await fetch("/api/save-to-journal", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sessionId, gpx }),
+        body: JSON.stringify({ sessionId, gpx, ...(surfaceBreakdown ? { surfaceBreakdown } : {}) }),
       });
 
       if (!response.ok) {

apps/planner/app/routes/api.save-to-journal.ts

@@ -21,6 +21,7 @@ import { validateFetchUrl, getCallbackAllowedHosts } from "~/lib/url-validation.
 interface SaveRequestBody {
   sessionId?: unknown;
   gpx?: unknown;
+  surfaceBreakdown?: unknown;
 }
 
 const MAX_GPX_BYTES = 5 * 1024 * 1024; // 5 MB — same ceiling as the Yjs doc cap
@@ -39,6 +40,12 @@ export async function action({ request }: Route.ActionArgs) {
 
   const sessionId = typeof body.sessionId === "string" ? body.sessionId : "";
   const gpx = typeof body.gpx === "string" ? body.gpx : "";
+  // Optional, best-effort decoration — forwarded as-is; the journal callback is
+  // the authoritative validator (planner doesn't depend on @trails-cool/api).
+  const surfaceBreakdown =
+    body.surfaceBreakdown && typeof body.surfaceBreakdown === "object"
+      ? body.surfaceBreakdown
+      : undefined;
 
   if (!sessionId) return data({ error: "sessionId required" }, { status: 400 });
   if (!gpx) return data({ error: "gpx required" }, { status: 400 });
@@ -69,7 +76,7 @@ export async function action({ request }: Route.ActionArgs) {
         "Content-Type": "application/json",
         Authorization: `Bearer ${session.callbackToken}`,
       },
-      body: JSON.stringify({ gpx }),
+      body: JSON.stringify({ gpx, ...(surfaceBreakdown ? { surfaceBreakdown } : {}) }),
     });
   } catch {
     return data({ error: "journal unreachable" }, { status: 502 });