From 79f000fcc53fa08eeddb9ad37cae12b6ec1d9fc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 11:38:36 +0200 Subject: [PATCH 001/723] Upgrade i18next v26 + react-i18next v17 with SSR-safe init Split initI18n() into separate server/client initialization paths inspired by remix-i18next's architecture: - initI18nServer(lng): no LanguageDetector, per-request language from Accept-Language header - initI18nClient(): LanguageDetector reads first to match server, then localStorage and navigator - detectLanguage(request): parses Accept-Language for best match Fixes rehydration errors caused by v26 removing initImmediate option (replaced with initAsync) and LanguageDetector running on the server where browser APIs don't exist. Also makes dynamic instead of hardcoded "en". Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/entry.client.tsx | 3 ++ apps/journal/app/entry.server.tsx | 3 ++ apps/journal/app/root.tsx | 6 +-- apps/planner/app/entry.client.tsx | 3 ++ apps/planner/app/entry.server.tsx | 79 +++++++++++++++++++++++++++++++ apps/planner/app/root.tsx | 6 +-- package.json | 4 +- packages/i18n/package.json | 4 +- packages/i18n/src/index.ts | 62 ++++++++++++++++++++---- pnpm-lock.yaml | 36 +++++++------- 10 files changed, 166 insertions(+), 40 deletions(-) create mode 100644 apps/planner/app/entry.server.tsx diff --git a/apps/journal/app/entry.client.tsx b/apps/journal/app/entry.client.tsx index f77e5e9..8e3f019 100644 --- a/apps/journal/app/entry.client.tsx +++ b/apps/journal/app/entry.client.tsx @@ -4,6 +4,7 @@ import { startTransition, StrictMode } from "react"; import { hydrateRoot } from "react-dom/client"; import { HydratedRouter } from "react-router/dom"; import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from "react-router"; +import { initI18nClient } from "@trails-cool/i18n"; const sentryEnvironment = import.meta.env.VITE_SENTRY_ENVIRONMENT ?? (import.meta.env.PROD ? "production" : "development"); @@ -24,6 +25,8 @@ Sentry.init({ enabled: import.meta.env.PROD && sentryEnvironment !== "ci", }); +initI18nClient(); + startTransition(() => { hydrateRoot( document, diff --git a/apps/journal/app/entry.server.tsx b/apps/journal/app/entry.server.tsx index 01dbf3d..0bdfe8f 100644 --- a/apps/journal/app/entry.server.tsx +++ b/apps/journal/app/entry.server.tsx @@ -6,6 +6,7 @@ import { ServerRouter } from "react-router"; import { isbot } from "isbot"; import type { RenderToPipeableStreamOptions } from "react-dom/server"; import { renderToPipeableStream } from "react-dom/server"; +import { initI18nServer, detectLanguage } from "@trails-cool/i18n"; const sentryEnvironment = process.env.CI ? "ci" : (process.env.NODE_ENV ?? "development"); @@ -32,6 +33,8 @@ export default function handleRequest( routerContext: EntryContext, _loadContext: AppLoadContext, ) { + initI18nServer(detectLanguage(request)); + if (request.method.toUpperCase() === "HEAD") { return new Response(null, { status: responseStatusCode, diff --git a/apps/journal/app/root.tsx b/apps/journal/app/root.tsx index 159af7c..c041ae7 100644 --- a/apps/journal/app/root.tsx +++ b/apps/journal/app/root.tsx @@ -4,17 +4,15 @@ import type { LinksFunction } from "react-router"; import type { Route } from "./+types/root"; import * as Sentry from "@sentry/react"; import { useTranslation } from "react-i18next"; -import { initI18n } from "@trails-cool/i18n"; import { getSessionUser } from "~/lib/auth.server"; import stylesheet from "@trails-cool/ui/styles.css?url"; -initI18n(); - export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }]; export function Layout({ children }: { children: React.ReactNode }) { + const { i18n } = useTranslation(); return ( - + diff --git a/apps/planner/app/entry.client.tsx b/apps/planner/app/entry.client.tsx index a9813eb..f4230ed 100644 --- a/apps/planner/app/entry.client.tsx +++ b/apps/planner/app/entry.client.tsx @@ -4,6 +4,7 @@ import { startTransition, StrictMode } from "react"; import { hydrateRoot } from "react-dom/client"; import { HydratedRouter } from "react-router/dom"; import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from "react-router"; +import { initI18nClient } from "@trails-cool/i18n"; const sentryEnvironment = import.meta.env.VITE_SENTRY_ENVIRONMENT ?? (import.meta.env.PROD ? "production" : "development"); @@ -24,6 +25,8 @@ Sentry.init({ enabled: import.meta.env.PROD && sentryEnvironment !== "ci", }); +initI18nClient(); + startTransition(() => { hydrateRoot( document, diff --git a/apps/planner/app/entry.server.tsx b/apps/planner/app/entry.server.tsx new file mode 100644 index 0000000..9220df5 --- /dev/null +++ b/apps/planner/app/entry.server.tsx @@ -0,0 +1,79 @@ +import { PassThrough } from "node:stream"; +import type { AppLoadContext, EntryContext } from "react-router"; +import { createReadableStreamFromReadable } from "@react-router/node"; +import { ServerRouter } from "react-router"; +import { isbot } from "isbot"; +import type { RenderToPipeableStreamOptions } from "react-dom/server"; +import { renderToPipeableStream } from "react-dom/server"; +import { initI18nServer, detectLanguage } from "@trails-cool/i18n"; + +export const streamTimeout = 5_000; + +export default function handleRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + routerContext: EntryContext, + _loadContext: AppLoadContext, +) { + initI18nServer(detectLanguage(request)); + + if (request.method.toUpperCase() === "HEAD") { + return new Response(null, { + status: responseStatusCode, + headers: responseHeaders, + }); + } + + return new Promise((resolve, reject) => { + let shellRendered = false; + const userAgent = request.headers.get("user-agent"); + + const readyOption: keyof RenderToPipeableStreamOptions = + (userAgent && isbot(userAgent)) || routerContext.isSpaMode + ? "onAllReady" + : "onShellReady"; + + let timeoutId: ReturnType | undefined = setTimeout( + () => abort(), + streamTimeout + 1000, + ); + + const { pipe, abort } = renderToPipeableStream( + , + { + [readyOption]() { + shellRendered = true; + const body = new PassThrough({ + final(callback) { + clearTimeout(timeoutId); + timeoutId = undefined; + callback(); + }, + }); + const stream = createReadableStreamFromReadable(body); + + responseHeaders.set("Content-Type", "text/html"); + + pipe(body); + + resolve( + new Response(stream, { + headers: responseHeaders, + status: responseStatusCode, + }), + ); + }, + onShellError(error: unknown) { + reject(error); + }, + onError(error: unknown) { + responseStatusCode = 500; + if (shellRendered) { + console.error(error); + } + }, + }, + ); + }); +} diff --git a/apps/planner/app/root.tsx b/apps/planner/app/root.tsx index 29653b5..cb6df2b 100644 --- a/apps/planner/app/root.tsx +++ b/apps/planner/app/root.tsx @@ -3,16 +3,14 @@ import type { LinksFunction } from "react-router"; import type { Route } from "./+types/root"; import * as Sentry from "@sentry/react"; import { useTranslation } from "react-i18next"; -import { initI18n } from "@trails-cool/i18n"; import stylesheet from "@trails-cool/ui/styles.css?url"; -initI18n(); - export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }]; export function Layout({ children }: { children: React.ReactNode }) { + const { i18n } = useTranslation(); return ( - + diff --git a/package.json b/package.json index 66b09f7..3434381 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "drizzle-postgis": "^1.1.1", "eslint": "^10.1.0", "eslint-config-prettier": "^10.1.8", - "i18next": "^25.10.4", + "i18next": "^26.0.1", "i18next-browser-languagedetector": "^8.2.1", "jsdom": "^29.0.1", "leaflet": "^1.9.4", @@ -59,7 +59,7 @@ "prettier": "^3.8.1", "react": "^19.2.4", "react-dom": "^19.2.4", - "react-i18next": "^16.6.1", + "react-i18next": "^17.0.1", "react-leaflet": "^5.0.0", "react-router": "^7.13.2", "tailwindcss": "^4.2.2", diff --git a/packages/i18n/package.json b/packages/i18n/package.json index f55bf10..f17b2dc 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -10,7 +10,7 @@ "types": "./src/index.ts", "peerDependencies": { "react": ">=18", - "i18next": ">=23", - "react-i18next": ">=14" + "i18next": ">=26", + "react-i18next": ">=17" } } diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts index 8f3e652..1582ae9 100644 --- a/packages/i18n/src/index.ts +++ b/packages/i18n/src/index.ts @@ -6,26 +6,68 @@ import de from "./locales/de.ts"; export const defaultNS = "common"; +export const supportedLngs = ["en", "de"] as const; +export type SupportedLng = (typeof supportedLngs)[number]; + export const resources = { en: { common: en.common, planner: en.planner, journal: en.journal }, de: { common: de.common, planner: de.planner, journal: de.journal }, } as const; -export function initI18n() { - return i18n +const commonOptions = { + resources, + defaultNS, + fallbackLng: "en" as const, + supportedLngs: [...supportedLngs], + interpolation: { escapeValue: false }, + initAsync: false, +}; + +/** + * Initialize i18next for server-side rendering. + * No language detector — language is determined from the request. + */ +export function initI18nServer(lng: SupportedLng = "en") { + if (i18n.isInitialized) { + i18n.changeLanguage(lng); + return; + } + i18n.use(initReactI18next).init({ ...commonOptions, lng }); +} + +/** + * Initialize i18next for the client. + * Uses LanguageDetector with htmlTag priority so hydration matches the server. + */ +export function initI18nClient() { + if (i18n.isInitialized) return; + i18n .use(LanguageDetector) .use(initReactI18next) .init({ - resources, - defaultNS, - fallbackLng: "en", - supportedLngs: ["en", "de"], - interpolation: { - escapeValue: false, + ...commonOptions, + detection: { + order: ["htmlTag", "localStorage", "navigator"], + caches: ["localStorage"], }, - showSupportNotice: false, - initImmediate: false, }); } +/** + * Detect the best supported language from a request's Accept-Language header. + */ +export function detectLanguage(request: Request): SupportedLng { + const header = request.headers.get("Accept-Language") ?? ""; + for (const part of header.split(",")) { + const lang = part.split(";")[0]?.trim().toLowerCase(); + if (!lang) continue; + for (const supported of supportedLngs) { + if (lang === supported || lang.startsWith(supported + "-")) { + return supported; + } + } + } + return "en"; +} + export { i18n }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f91dbd..8c7afc4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -113,8 +113,8 @@ importers: specifier: ^10.1.8 version: 10.1.8(eslint@10.1.0(jiti@2.6.1)) i18next: - specifier: ^25.10.4 - version: 25.10.4(typescript@5.9.3) + specifier: ^26.0.1 + version: 26.0.1(typescript@5.9.3) i18next-browser-languagedetector: specifier: ^8.2.1 version: 8.2.1 @@ -143,8 +143,8 @@ importers: specifier: ^19.2.4 version: 19.2.4(react@19.2.4) react-i18next: - specifier: ^16.6.1 - version: 16.6.1(i18next@25.10.4(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + specifier: ^17.0.1 + version: 17.0.1(i18next@26.0.1(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) react-leaflet: specifier: ^5.0.0 version: 5.0.0(leaflet@1.9.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -382,14 +382,14 @@ importers: packages/i18n: dependencies: i18next: - specifier: '>=23' - version: 25.10.4(typescript@5.9.3) + specifier: '>=26' + version: 26.0.1(typescript@5.9.3) react: specifier: '>=18' version: 19.2.4 react-i18next: - specifier: '>=14' - version: 16.6.1(i18next@25.10.4(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + specifier: '>=17' + version: 17.0.1(i18next@26.0.1(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) packages/map: dependencies: @@ -2744,10 +2744,10 @@ packages: i18next-browser-languagedetector@8.2.1: resolution: {integrity: sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==} - i18next@25.10.4: - resolution: {integrity: sha512-XsE/6eawy090meuFU0BTY9BtmWr1m9NSwLr0NK7/A04LA58wdAvDsi9WNOJ40Qb1E9NIPbvnVLZEN2fWDd3/3Q==} + i18next@26.0.1: + resolution: {integrity: sha512-vtz5sXU4+nkCm8yEU+JJ6yYIx0mkg9e68W0G0PXpnOsmzLajNsW5o28DJMqbajxfsfq0gV3XdrBudsDQnwxfsQ==} peerDependencies: - typescript: ^5 + typescript: ^5 || ^6 peerDependenciesMeta: typescript: optional: true @@ -3278,14 +3278,14 @@ packages: peerDependencies: react: ^19.2.4 - react-i18next@16.6.1: - resolution: {integrity: sha512-izjXh+AkBLy3h3xe3sh6Gg1flhFHc3UyzsMftMKYJr2Z7WvAZQIdjjpHypctN41zFoeLdJUNGDgP1+Qich2fYg==} + react-i18next@17.0.1: + resolution: {integrity: sha512-iG65FGnFHcYyHNuT01ukffYWCOBFTWSdVD8EZd/dCVWgtjFPObcSsvYYNwcsokO/rDcTb5d6D8Acv8MrOdm6Hw==} peerDependencies: - i18next: '>= 25.6.2' + i18next: '>= 26.0.1' react: '>= 16.8.0' react-dom: '*' react-native: '*' - typescript: ^5 + typescript: ^5 || ^6 peerDependenciesMeta: react-dom: optional: true @@ -6169,7 +6169,7 @@ snapshots: dependencies: '@babel/runtime': 7.29.2 - i18next@25.10.4(typescript@5.9.3): + i18next@26.0.1(typescript@5.9.3): dependencies: '@babel/runtime': 7.29.2 optionalDependencies: @@ -6637,11 +6637,11 @@ snapshots: react: 19.2.4 scheduler: 0.27.0 - react-i18next@16.6.1(i18next@25.10.4(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3): + react-i18next@17.0.1(i18next@26.0.1(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3): dependencies: '@babel/runtime': 7.29.2 html-parse-stringify: 3.0.1 - i18next: 25.10.4(typescript@5.9.3) + i18next: 26.0.1(typescript@5.9.3) react: 19.2.4 use-sync-external-store: 1.6.0(react@19.2.4) optionalDependencies: From 38ada3bd4f9ca78b360f8ce24caf691f36fa1be6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 11:46:21 +0200 Subject: [PATCH 002/723] Pass full locale from Accept-Language to ClientDate MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add detectLocale() that extracts the full locale tag (e.g. "de-DE") from the request, not just the language. The journal root loader passes it via LocaleContext so ClientDate renders with the correct locale on both server and client — no more hardcoded "en-US" fallback. Also fixes settings page hydration mismatch by using ClientDate for passkey creation dates instead of inline toLocaleDateString(). Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/components/ClientDate.tsx | 11 ++++++++--- apps/journal/app/components/LocaleContext.tsx | 17 +++++++++++++++++ apps/journal/app/root.tsx | 10 +++++++--- apps/journal/app/routes/settings.tsx | 6 +++--- packages/i18n/src/index.ts | 19 +++++++++++++++++++ 5 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 apps/journal/app/components/LocaleContext.tsx diff --git a/apps/journal/app/components/ClientDate.tsx b/apps/journal/app/components/ClientDate.tsx index e2fcf06..0bbc775 100644 --- a/apps/journal/app/components/ClientDate.tsx +++ b/apps/journal/app/components/ClientDate.tsx @@ -1,11 +1,16 @@ import { useState, useEffect } from "react"; +import { useLocale } from "./LocaleContext"; /** - * Renders a date only on the client to avoid SSR hydration mismatches. - * Server renders empty, client fills in with user's locale. + * Renders a date using the server-detected locale for the initial render + * (matching SSR output), then updates to the browser's native locale + * after hydration. */ export function ClientDate({ iso }: { iso: string }) { - const [formatted, setFormatted] = useState(new Date(iso).toLocaleDateString("en-US")); + const locale = useLocale(); + const [formatted, setFormatted] = useState( + new Date(iso).toLocaleDateString(locale), + ); useEffect(() => { setFormatted(new Date(iso).toLocaleDateString()); diff --git a/apps/journal/app/components/LocaleContext.tsx b/apps/journal/app/components/LocaleContext.tsx new file mode 100644 index 0000000..15902c8 --- /dev/null +++ b/apps/journal/app/components/LocaleContext.tsx @@ -0,0 +1,17 @@ +import { createContext, useContext } from "react"; + +const LocaleContext = createContext("en"); + +export function LocaleProvider({ + locale, + children, +}: { + locale: string; + children: React.ReactNode; +}) { + return {children}; +} + +export function useLocale() { + return useContext(LocaleContext); +} diff --git a/apps/journal/app/root.tsx b/apps/journal/app/root.tsx index c041ae7..be4a5f4 100644 --- a/apps/journal/app/root.tsx +++ b/apps/journal/app/root.tsx @@ -4,7 +4,9 @@ import type { LinksFunction } from "react-router"; import type { Route } from "./+types/root"; import * as Sentry from "@sentry/react"; import { useTranslation } from "react-i18next"; +import { detectLocale } from "@trails-cool/i18n"; import { getSessionUser } from "~/lib/auth.server"; +import { LocaleProvider } from "~/components/LocaleContext"; import stylesheet from "@trails-cool/ui/styles.css?url"; export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }]; @@ -33,7 +35,8 @@ export function Layout({ children }: { children: React.ReactNode }) { export async function loader({ request }: Route.LoaderArgs) { const user = await getSessionUser(request); - return { user: user ? { id: user.id, username: user.username } : null }; + const locale = detectLocale(request); + return { user: user ? { id: user.id, username: user.username } : null, locale }; } function NavBar({ user }: { user: { id: string; username: string } | null }) { @@ -110,6 +113,7 @@ function NavBar({ user }: { user: { id: string; username: string } | null }) { export default function App({ loaderData }: Route.ComponentProps) { const user = loaderData?.user; + const locale = loaderData?.locale ?? "en"; useEffect(() => { if (user) { Sentry.setUser({ id: user.id, username: user.username }); @@ -119,10 +123,10 @@ export default function App({ loaderData }: Route.ComponentProps) { }, [user]); return ( - <> + - + ); } diff --git a/apps/journal/app/routes/settings.tsx b/apps/journal/app/routes/settings.tsx index fda39b5..11b75b7 100644 --- a/apps/journal/app/routes/settings.tsx +++ b/apps/journal/app/routes/settings.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback } from "react"; import { data, redirect, useFetcher } from "react-router"; import { useTranslation } from "react-i18next"; +import { ClientDate } from "~/components/ClientDate"; import { eq } from "drizzle-orm"; import type { Route } from "./+types/settings"; import { getSessionUser } from "~/lib/auth.server"; @@ -217,9 +218,8 @@ export default function Settings({ loaderData }: Route.ComponentProps) { {transportLabel(passkey.transports, t)}

- {t("settings.security.addedOn", { - date: new Date(passkey.createdAt).toLocaleDateString(), - })} + {t("settings.security.addedOn", { date: "" })} +

Date: Sun, 29 Mar 2026 11:48:01 +0200 Subject: [PATCH 003/723] Remove useEffect flicker from ClientDate Now that both server and client use the same locale from context, the post-hydration useEffect that re-formatted with the browser's OS locale was causing a visible flicker. Just render with the context locale directly. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/components/ClientDate.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/apps/journal/app/components/ClientDate.tsx b/apps/journal/app/components/ClientDate.tsx index 0bbc775..af210ae 100644 --- a/apps/journal/app/components/ClientDate.tsx +++ b/apps/journal/app/components/ClientDate.tsx @@ -1,20 +1,12 @@ -import { useState, useEffect } from "react"; import { useLocale } from "./LocaleContext"; /** - * Renders a date using the server-detected locale for the initial render - * (matching SSR output), then updates to the browser's native locale - * after hydration. + * Renders a date formatted with the server-detected locale, + * ensuring SSR and client output match (no hydration flicker). */ export function ClientDate({ iso }: { iso: string }) { const locale = useLocale(); - const [formatted, setFormatted] = useState( - new Date(iso).toLocaleDateString(locale), + return ( + ); - - useEffect(() => { - setFormatted(new Date(iso).toLocaleDateString()); - }, [iso]); - - return ; } From 400189d9c105508855ea3053be978b1acc61aeaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 12:34:09 +0200 Subject: [PATCH 004/723] Fix waypoint drag creating unwanted split points MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ghost marker (route split indicator) was interfering with waypoint dragging because it sat above waypoints (zIndexOffset 1000) and stayed active during drag operations. Adopt brouter-web's suspension pattern: - Suspend route interaction on waypoint mouseover (not just dragstart), unsuspend on mouseout — ghost marker hides before any click/drag - Lower ghost marker zIndexOffset to -100 so waypoints always receive clicks first - Keep drag guards as a safety net Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/PlannerMap.tsx | 17 +++++++++++++++++ .../planner/app/components/RouteInteraction.tsx | 17 ++++++++++++----- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index ed1693f..1597cf5 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -179,6 +179,8 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa const [noGoDrawing, setNoGoDrawing] = useState(false); const toggleNoGoDraw = useCallback(() => setNoGoDrawing((v) => !v), []); const suppressMapClickRef = useRef(false); + const routeInteractionSuspendedRef = useRef(false); + const waypointDraggingRef = useRef(false); // Sync waypoints from Yjs useEffect(() => { @@ -324,7 +326,21 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa draggable icon={waypointIcon(i)} eventHandlers={{ + mouseover: () => { + routeInteractionSuspendedRef.current = true; + }, + mouseout: () => { + if (!waypointDraggingRef.current) { + routeInteractionSuspendedRef.current = false; + } + }, + dragstart: () => { + waypointDraggingRef.current = true; + routeInteractionSuspendedRef.current = true; + }, dragend: (e) => { + waypointDraggingRef.current = false; + routeInteractionSuspendedRef.current = false; const { lat, lng } = e.target.getLatLng(); moveWaypoint(i, lat, lng); }, @@ -347,6 +363,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa coordinates={routeCoordinates} segmentBoundaries={segmentBoundaries} onInsertWaypoint={handleRouteInsert} + suspendedRef={routeInteractionSuspendedRef} disabled={noGoDrawing} /> diff --git a/apps/planner/app/components/RouteInteraction.tsx b/apps/planner/app/components/RouteInteraction.tsx index 6179973..0689ca7 100644 --- a/apps/planner/app/components/RouteInteraction.tsx +++ b/apps/planner/app/components/RouteInteraction.tsx @@ -7,6 +7,8 @@ interface RouteInteractionProps { segmentBoundaries: number[]; onInsertWaypoint: (pointIndex: number, lat: number, lon: number) => void; disabled?: boolean; + /** Set true to suspend ghost marker (e.g. while hovering/dragging a waypoint) */ + suspendedRef?: React.RefObject; } const SNAP_TOLERANCE_PX = 15; @@ -26,13 +28,14 @@ const ghostIcon = L.divIcon({ /** * Route interaction layer: shows a ghost marker on hover that can be * clicked or dragged to insert a waypoint. Follows brouter-web's pattern - * of a single persistent draggable Marker with distance-based mouseout. + * of suspending when the mouse is over a waypoint marker. */ export function RouteInteraction({ coordinates, segmentBoundaries, onInsertWaypoint, disabled, + suspendedRef, }: RouteInteractionProps) { const map = useMap(); const markerRef = useRef(null); @@ -86,7 +89,7 @@ export function RouteInteraction({ icon: ghostIcon, draggable: true, interactive: true, - zIndexOffset: 1000, + zIndexOffset: -100, }); markerRef.current = marker; @@ -115,7 +118,11 @@ export function RouteInteraction({ // Listen for mousemove on the map (distance-based approach, not polyline events) const onMouseMove = (e: L.LeafletMouseEvent) => { - if (draggingRef.current) return; + // Suspended while hovering over or dragging a waypoint marker (brouter-web pattern) + if (draggingRef.current || suspendedRef?.current) { + hideMarker(); + return; + } const snap = findClosestOnRoute(e.latlng); if (!snap || snap.distPx > SNAP_TOLERANCE_PX) { @@ -131,7 +138,7 @@ export function RouteInteraction({ hideMarker(); }; - // Drag events on the ghost marker (Leaflet's L.Draggable handles text selection) + // Drag events on the ghost marker marker.on("dragstart", () => { draggingRef.current = true; trailer1.setStyle({ opacity: 0.6 }); @@ -200,7 +207,7 @@ export function RouteInteraction({ trailer2.remove(); markerRef.current = null; }; - }, [map, disabled, findClosestOnRoute]); + }, [map, disabled, findClosestOnRoute, suspendedRef]); return null; } From b9a77be02030e5324f1736f56e021ab480935806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 14:09:20 +0200 Subject: [PATCH 005/723] Add route error toasts with waypoint rollback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Show error toasts when route calculation fails, with distinct messages: - "No route found" for BRouter 4xx (unroutable waypoints, missing tiles) - "Route calculation failed" for server errors / network failures - "Too many requests" for rate limiting - Rollback all waypoints to last known good state on route failure - Guard against restore→recompute loop via restoringRef flag - Extract reusable useToasts hook from awareness toast logic - Add BRouterError class to distinguish client vs server errors - API returns 422 for unroutable requests instead of blanket 502 Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/SessionView.tsx | 52 ++++++++++++++------- apps/planner/app/lib/brouter.ts | 12 ++++- apps/planner/app/lib/use-routing.ts | 48 +++++++++++++++++-- apps/planner/app/routes/api.route.ts | 8 +++- packages/i18n/src/locales/de.ts | 2 + packages/i18n/src/locales/en.ts | 2 + 6 files changed, 100 insertions(+), 24 deletions(-) diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 77d9517..0c2ea56 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -4,7 +4,7 @@ import { Link } from "react-router"; import type { TFunction } from "i18next"; import * as Sentry from "@sentry/react"; import { useYjs, type YjsState } from "~/lib/use-yjs"; -import { useRouting } from "~/lib/use-routing"; +import { useRouting, type RouteError } from "~/lib/use-routing"; import { ProfileSelector } from "~/components/ProfileSelector"; import { ExportButton } from "~/components/ExportButton"; import { SaveToJournalButton } from "~/components/SaveToJournalButton"; @@ -25,26 +25,32 @@ const ElevationChart = lazy(() => interface Toast { id: number; message: string; + variant?: "error" | "info"; } let toastIdCounter = 0; -function useAwarenessToasts(yjs: YjsState | null, t: TFunction) { +function useToasts() { const [toasts, setToasts] = useState([]); + + const addToast = useCallback((message: string, variant: Toast["variant"] = "info") => { + const id = ++toastIdCounter; + setToasts((prev) => [...prev, { id, message, variant }]); + setTimeout(() => { + setToasts((prev) => prev.filter((toast) => toast.id !== id)); + }, 4000); + }, []); + + return { toasts, addToast }; +} + +function useAwarenessToasts(yjs: YjsState | null, t: TFunction, addToast: (message: string) => void) { const namesCacheRef = useRef>(new Map()); const initializedRef = useRef(false); useEffect(() => { if (!yjs) return; - const addToast = (message: string) => { - const id = ++toastIdCounter; - setToasts((prev) => [...prev, { id, message }]); - setTimeout(() => { - setToasts((prev) => prev.filter((toast) => toast.id !== id)); - }, 3000); - }; - const handleChange = ( changes: { added: number[]; updated: number[]; removed: number[] }, ) => { @@ -100,9 +106,7 @@ function useAwarenessToasts(yjs: YjsState | null, t: TFunction) { initializedRef.current = false; namesCacheRef.current.clear(); }; - }, [yjs, t]); - - return toasts; + }, [yjs, t, addToast]); } function ColorModeToggle({ yjs }: { yjs: YjsState }) { @@ -181,9 +185,23 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, const { t } = useTranslation("planner"); useEffect(() => { Sentry.setTag("session_id", sessionId); }, [sessionId]); const yjs = useYjs(sessionId, initialWaypoints); - const { computing, routeStats, requestRoute } = useRouting(yjs); + const { computing, routeError, routeStats, requestRoute } = useRouting(yjs); const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null); - const toasts = useAwarenessToasts(yjs, t); + const { toasts, addToast } = useToasts(); + useAwarenessToasts(yjs, t, addToast); + + // Show toast on route calculation error + const prevErrorRef = useRef(null); + useEffect(() => { + if (routeError && routeError !== prevErrorRef.current) { + const message = + routeError === "rate_limit" ? t("rateLimitExceeded") : + routeError === "no_route" ? t("noRouteFound") : + t("routeError"); + addToast(message, "error"); + } + prevErrorRef.current = routeError; + }, [routeError, addToast, t]); const handleElevationHover = useCallback((pos: [number, number] | null) => { setHighlightPosition(pos); @@ -258,7 +276,9 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, {toasts.map((toast) => (
{toast.message}
diff --git a/apps/planner/app/lib/brouter.ts b/apps/planner/app/lib/brouter.ts index 4b24a34..b772c3c 100644 --- a/apps/planner/app/lib/brouter.ts +++ b/apps/planner/app/lib/brouter.ts @@ -61,11 +61,21 @@ export async function computeRoute(request: RouteRequest): Promise> { const response = await fetch(url); if (!response.ok) { const body = await response.text(); - throw new Error(`BRouter error (${response.status}): ${body}`); + throw new BRouterError(body.trim(), response.status); } return response.json() as Promise>; } diff --git a/apps/planner/app/lib/use-routing.ts b/apps/planner/app/lib/use-routing.ts index 0e1e4df..3283da5 100644 --- a/apps/planner/app/lib/use-routing.ts +++ b/apps/planner/app/lib/use-routing.ts @@ -21,11 +21,36 @@ function getWaypointsFromYjs(waypoints: Y.Array>): WaypointData[] })); } +function restoreWaypoints(yjs: YjsState, snapshot: WaypointData[], restoringRef: React.RefObject) { + restoringRef.current = true; + yjs.doc.transact(() => { + for (let i = 0; i < snapshot.length && i < yjs.waypoints.length; i++) { + const yMap = yjs.waypoints.get(i); + const wp = snapshot[i]!; + if (yMap) { + yMap.set("lat", wp.lat); + yMap.set("lon", wp.lon); + } + } + // Remove extra waypoints added since snapshot + if (yjs.waypoints.length > snapshot.length) { + yjs.waypoints.delete(snapshot.length, yjs.waypoints.length - snapshot.length); + } + }); + // Reset after microtask so Yjs observers fire first + queueMicrotask(() => { restoringRef.current = false; }); +} + +export type RouteError = "no_route" | "failed" | "rate_limit" | null; + export function useRouting(yjs: YjsState | null) { const [isHost, setIsHost] = useState(false); const [computing, setComputing] = useState(false); + const [routeError, setRouteError] = useState(null); const [routeStats, setRouteStats] = useState({}); const debounceTimer = useRef>(undefined); + const lastGoodWaypointsRef = useRef(null); + const restoringRef = useRef(false); // Host election via Yjs awareness useEffect(() => { @@ -56,6 +81,9 @@ export function useRouting(yjs: YjsState | null) { points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [], })).filter((a) => a.points.length >= 3); + // Save current waypoints so we can restore on failure + const snapshotBeforeCompute = getWaypointsFromYjs(yjs.waypoints); + setComputing(true); try { const response = await fetch("/api/route", { @@ -69,13 +97,22 @@ export function useRouting(yjs: YjsState | null) { }); if (response.status === 429) { - console.warn("[Rate Limit] Route computation rate limit exceeded"); + setRouteError("rate_limit"); + restoreWaypoints(yjs, lastGoodWaypointsRef.current ?? snapshotBeforeCompute, restoringRef); + return; + } + if (!response.ok) { + const body = await response.json().catch(() => ({})); + const code = (body as { code?: string }).code; + setRouteError(code === "no_route" ? "no_route" : "failed"); + restoreWaypoints(yjs, lastGoodWaypointsRef.current ?? snapshotBeforeCompute, restoringRef); return; } - if (!response.ok) return; const enriched = await response.json(); + setRouteError(null); + lastGoodWaypointsRef.current = snapshotBeforeCompute; setRouteStats({ distance: enriched.totalLength || undefined, elevationGain: enriched.totalAscend || undefined, @@ -91,7 +128,8 @@ export function useRouting(yjs: YjsState | null) { } }); } catch { - // Route computation failed + setRouteError("failed"); + restoreWaypoints(yjs, lastGoodWaypointsRef.current ?? snapshotBeforeCompute, restoringRef); } finally { setComputing(false); } @@ -101,7 +139,7 @@ export function useRouting(yjs: YjsState | null) { const requestRoute = useCallback( (waypoints: WaypointData[]) => { - if (!isHost) return; + if (!isHost || restoringRef.current) return; if (debounceTimer.current) clearTimeout(debounceTimer.current); debounceTimer.current = setTimeout(() => computeRoute(waypoints), 500); }, @@ -139,5 +177,5 @@ export function useRouting(yjs: YjsState | null) { }; }, [yjs, isHost, requestRoute]); - return { isHost, computing, routeStats, requestRoute }; + return { isHost, computing, routeError, routeStats, requestRoute }; } diff --git a/apps/planner/app/routes/api.route.ts b/apps/planner/app/routes/api.route.ts index 4ab4899..7f7e025 100644 --- a/apps/planner/app/routes/api.route.ts +++ b/apps/planner/app/routes/api.route.ts @@ -1,6 +1,6 @@ import { data } from "react-router"; import type { Route } from "./+types/api.route"; -import { computeRoute } from "~/lib/brouter"; +import { computeRoute, BRouterError } from "~/lib/brouter"; import { checkRateLimit } from "~/lib/rate-limit"; export async function action({ request }: Route.ActionArgs) { @@ -40,7 +40,11 @@ export async function action({ request }: Route.ActionArgs) { headers: { "X-RateLimit-Remaining": String(limit.remaining) }, }); } catch (e) { + if (e instanceof BRouterError && e.statusCode >= 400 && e.statusCode < 500) { + // BRouter client error: unroutable waypoints, missing tiles, etc. + return data({ error: e.message, code: "no_route" }, { status: 422 }); + } const message = e instanceof Error ? e.message : "Route computation failed"; - return data({ error: message }, { status: 502 }); + return data({ error: message, code: "server_error" }, { status: 502 }); } } diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index 48ad53a..72080a3 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -22,6 +22,8 @@ export default { connecting: "Verbinde...", loadingMap: "Karte wird geladen...", computingRoute: "Route wird berechnet...", + routeError: "Routenberechnung fehlgeschlagen. Bitte versuche es erneut.", + noRouteFound: "Keine Route gefunden. Versuche den Wegpunkt auf einen Weg zu verschieben.", host: "Host", connected: "Verbunden", saveToJournal: "Im Journal speichern", diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index 838416e..51af6f7 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -22,6 +22,8 @@ export default { connecting: "Connecting...", loadingMap: "Loading map...", computingRoute: "Computing route...", + routeError: "Route calculation failed. Please try again.", + noRouteFound: "No route found. Try moving the waypoint to a road or path.", host: "Host", connected: "Connected", saveToJournal: "Save to Journal", From 9de1a05903e894039c3b091fa3a4f190fb979b36 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 12:26:51 +0000 Subject: [PATCH 006/723] Initial plan From 39c58185b82af373dad46713ea7144a5c0119872 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 12:28:15 +0000 Subject: [PATCH 007/723] Initial plan From 0ac1d4ca39f4695be85e0dd71c1449c862afffa3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 12:30:59 +0000 Subject: [PATCH 008/723] Add .github/copilot-instructions.md and update README for GitHub Copilot Agent-Logs-Url: https://github.com/trails-cool/trails/sessions/d830c6a7-0796-4aeb-8169-d7a7718a6170 Co-authored-by: stigi <13815+stigi@users.noreply.github.com> --- .github/copilot-instructions.md | 178 ++++++++++++++++++++++++++++++++ README.md | 3 +- 2 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 .github/copilot-instructions.md diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..abc1db2 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,178 @@ +# trails.cool — Copilot Instructions + +## Project Overview + +trails.cool is a federated, self-hostable platform for outdoor enthusiasts with two apps: + +- **Planner** (`apps/planner`) — Stateless collaborative route editor. Real-time editing via Yjs, routing via BRouter, no user accounts, sessions are anonymous and ephemeral. +- **Journal** (`apps/journal`) — Federated social platform for routes and activities. User accounts, ActivityPub federation via Fedify, PostgreSQL + PostGIS. + +Full architecture: `docs/architecture.md` +Philosophy: `docs/philosophy.md` +OpenSpec change: `openspec/changes/phase-1-mvp/` + +## Principles + +- **Privacy-first**: The Planner collects zero user data. The Journal documents all data collection in a privacy manifest. Never add tracking, analytics, or data collection without updating the manifest. +- **Data ownership**: All user data must be exportable in open formats (GPX, JSON). Never create data lock-in. +- **Simplicity**: Start with the simplest thing that works. Don't add abstractions, config options, or features unless real users need them. +- **Open standards**: Use GPX, ActivityPub, OpenStreetMap, WebFinger. Don't invent proprietary formats. +- **Inclusive language**: Use "host" not "master", "allowlist" not "whitelist", etc. + +## Tech Stack + +- **Language**: TypeScript (strict mode) +- **Frontend**: React + Tailwind CSS + React Router 7 (Remix stack) +- **Maps**: Leaflet + OpenStreetMap tiles +- **CRDT**: Yjs + y-websocket (Planner only) +- **Federation**: Fedify (Journal only, Phase 2) +- **Database**: PostgreSQL + PostGIS +- **Media storage**: S3-compatible (Garage) +- **Routing engine**: BRouter (Java, runs as separate Docker container) +- **i18n**: react-i18next (English + German) +- **Monorepo**: pnpm workspaces + Turborepo + +## Repository Structure + +``` +apps/ + planner/ — Planner app (React Router 7) + journal/ — Journal app (React Router 7 + Fedify) +packages/ + types/ — Shared TypeScript interfaces (Route, Activity, Waypoint) + ui/ — Shared React components (Tailwind) + map/ — Leaflet map wrappers and tile layer configs + gpx/ — GPX parsing, generation, validation + i18n/ — react-i18next config + translations +infrastructure/ — Terraform + Docker Compose +openspec/ — OpenSpec specs and changes +docs/ — Architecture, philosophy, tooling docs +docker/brouter/ — BRouter Docker image +``` + +## Development Commands + +```bash +pnpm install # Install dependencies +pnpm dev # Start both apps in dev mode +pnpm build # Build all packages and apps +pnpm typecheck # Type-check all packages +pnpm lint # Lint all packages +pnpm test # Run unit tests (vitest) +pnpm test:watch # Run unit tests in watch mode +pnpm test:e2e # Run E2E tests (playwright, requires dev servers) +pnpm test:e2e:ui # Run E2E tests with Playwright UI +pnpm dev:full # Start full stack (Docker + DB + BRouter + apps) +pnpm dev:services # Start Docker services only (PostgreSQL + BRouter) +pnpm db:push # Push Drizzle schema to local PostgreSQL +pnpm db:studio # Open Drizzle Studio (DB browser) +``` + +## Testing Strategy + +- **Unit tests** (Vitest + jsdom): For packages, components, utilities, and app logic. + Place test files next to source: `foo.ts` → `foo.test.ts`. + Uses `@testing-library/react` for component tests. +- **E2E tests** (Playwright): For browser behavior across both apps. + Tests live in `e2e/` at repo root. Scoped per app via `testMatch` in `playwright.config.ts`. + Playwright auto-starts dev servers if not already running. + +**Important**: Write tests alongside implementation, not as an afterthought. When implementing a package or utility, add a co-located `*.test.ts` file. When implementing a user-facing feature, add or update E2E tests. Run `pnpm test` and `pnpm test:e2e` before committing. + +## Code Conventions + +- **Route registration**: Both apps use explicit `routes.ts` (not file-based routing). When adding a new route file, you **must** add it to `apps/*/app/routes.ts` or it won't be compiled into the build. +- All user-facing strings must use i18n (`useTranslation()` hook, never hardcode strings) +- Use `@trails-cool/types` for shared interfaces — don't duplicate type definitions +- Map components go in `@trails-cool/map`, not in individual apps +- GPX parsing/generation goes in `@trails-cool/gpx` +- Database schemas: `planner.*` for Planner data, `journal.*` for Journal data +- Route geometry must be stored as PostGIS LineString (extracted from GPX on save) + +## Key Architecture Decisions + +- **Planner is stateless**: No user accounts, no persistent user data. Sessions are anonymous. +- **Journal is the source of truth**: Routes live on the owner's Journal instance. +- **Routing host pattern**: One client per Planner session talks to BRouter (elected via Yjs awareness). +- **JWT callbacks**: Planner saves back to Journal via scoped JWT tokens in callback URLs. +- **Sequential versioning**: Route versions are v1, v2, v3. Yjs state vectors enable conflict-free merging. +- **Single domain**: Each instance uses one domain for both web UI and ActivityPub handles. +- **Simple permissions**: View + Edit only. No fine-grained permissions. + +## Git Workflow + +**All changes go through pull requests.** Do not push directly to main. + +### Before opening a PR +1. Run `pnpm typecheck && pnpm lint && pnpm test && pnpm test:e2e` — all must pass +2. Check for open PRs: `gh pr list` — avoid conflicts with in-flight work +3. Pull latest main: `git pull origin main --rebase` + +### Opening a PR +- Create a feature branch: `git checkout -b ` +- Keep PRs focused — one logical change per PR +- Use the merge queue to auto-merge when CI passes: + ```bash + gh pr create --title "..." --body "..." + gh pr merge --merge --auto + ``` + +### Stacking PRs (for fast local iteration) +When working on sequential tasks, stack branches locally: +``` +main → feature-a → feature-b → feature-c +``` +- Each branch gets its own PR +- Set the base branch correctly: `gh pr create --base feature-a` +- When feature-a merges, rebase feature-b onto main +- This keeps you unblocked while PRs are in CI + +### Important: Do not push to a branch after its PR merges via merge queue +Once a PR enters the merge queue it will merge as soon as CI passes. If you +push additional commits to the branch after that, those commits are orphaned +— they won't be on main. Always check `gh pr view --json state` +before pushing to an existing PR branch. + +### After merging +- Update main: `git checkout main && git pull` +- Delete merged branches: `git branch -d ` +- Check if stacked PRs need rebasing + +### Emergency override +Admins can bypass the PR workflow when necessary (e.g., CI is broken and needs a hotfix). Document the reason in the commit message. + +## Deployment + +Three separate CD workflows triggered by path: + +| Workflow | Triggers on | Deploys | +|----------|-------------|---------| +| `cd-apps.yml` | `apps/`, `packages/`, `pnpm-lock.yaml` | journal, planner | +| `cd-infra.yml` | `infrastructure/` | caddy, postgres, prometheus, loki, grafana, exporters | +| `cd-brouter.yml` | `docker/brouter/` | brouter | + +### Secrets +All secrets are stored in SOPS-encrypted files (`infrastructure/secrets.app.env`, `infrastructure/secrets.infra.env`). Edit with `sops infrastructure/secrets.app.env`. Only `AGE_SECRET_KEY`, `DEPLOY_SSH_KEY`, and `DEPLOY_HOST` remain as GitHub secrets. + +### Full restart +To restart **all** containers (not just the ones a workflow normally touches): +```bash +gh workflow run cd-infra.yml -f restart_all=true +``` + +### Server access +```bash +ssh -i ~/.ssh/trails-cool-deploy root@trails.cool +``` + +### Grafana +`https://grafana.internal.trails.cool` — GitHub OAuth (trails-cool org) + +## OpenSpec Workflow + +Specs live in `openspec/`. Use these slash commands: + +- `/opsx:propose` — Create a new change with proposal, design, specs, and tasks +- `/opsx:apply` — Implement tasks from an existing change +- `/opsx:explore` — Think through ideas before proposing +- `/opsx:archive` — Archive a completed change diff --git a/README.md b/README.md index af848bf..bbf3b62 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,8 @@ This project uses AI-assisted, spec-driven development. See | Tool | Purpose | |------|---------| | [cmux](https://cmux.dev) | Native macOS terminal for running multiple AI coding sessions | -| [Claude Code](https://claude.ai/claude-code) | AI coding assistant (primary development tool) | +| [Claude Code](https://claude.ai/claude-code) | AI coding assistant | +| [GitHub Copilot](https://github.com/features/copilot) | AI coding assistant | | [Crit](https://github.com/tomasz-tomczyk/crit) | Browser-based inline code review | | [OpenSpec](https://openspec.dev) | Spec-driven development workflow | From 1b9683752fc911e803fcceda9c8708316d3363c2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 12:31:40 +0000 Subject: [PATCH 009/723] Fit map to route bounds when opening a route in the planner Agent-Logs-Url: https://github.com/trails-cool/trails/sessions/558ccff8-ed5d-432a-a5d3-aca49c0e531e Co-authored-by: stigi <13815+stigi@users.noreply.github.com> --- apps/planner/app/components/PlannerMap.tsx | 22 ++++++++++++++++++++ e2e/planner.test.ts | 24 ++++++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 1597cf5..3c81524 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -54,6 +54,27 @@ function MapExposer() { return null; } +function RouteFitter({ coordinates }: { coordinates: [number, number, number][] | null }) { + const map = useMap(); + const hasFitted = useRef(false); + + useEffect(() => { + if (hasFitted.current || !coordinates || coordinates.length < 2) return; + + // Coordinates are in [lon, lat, elevation] GeoJSON format + const bounds = L.latLngBounds( + coordinates.filter((c) => c.length >= 2).map((c) => [c[1]!, c[0]!] as [number, number]), + ); + + if (bounds.isValid()) { + map.fitBounds(bounds, { padding: [50, 50], maxZoom: 16 }); + hasFitted.current = true; + } + }, [coordinates, map]); + + return null; +} + function MapClickHandler({ onAdd, suppressRef }: { onAdd: (lat: number, lng: number) => void; suppressRef: React.RefObject }) { useMapEvents({ click(e) { @@ -314,6 +335,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa + {} : addWaypoint} suppressRef={suppressMapClickRef} /> diff --git a/e2e/planner.test.ts b/e2e/planner.test.ts index 2ace23e..759c9ec 100644 --- a/e2e/planner.test.ts +++ b/e2e/planner.test.ts @@ -151,6 +151,30 @@ test.describe("Planner", () => { await expect(page.getByTitle("Draw no-go area")).toBeVisible(); }); + test("map zooms to fit the route when opened with initial waypoints", async ({ page, request }) => { + const sessionResp = await request.post("/api/sessions", { data: {} }); + const { url } = await sessionResp.json(); + + const waypoints = [ + { lat: 52.520, lon: 13.405 }, + { lat: 52.515, lon: 13.351 }, + ]; + await page.goto(`${url}?waypoints=${encodeURIComponent(JSON.stringify(waypoints))}`); + + await expect(page.locator(".leaflet-container")).toBeVisible({ timeout: 10000 }); + await expect(page.getByText("Connected")).toBeVisible({ timeout: 15000 }); + // Wait for route to compute and fit + await expect(page.getByText(/\d+\.\d+ km/)).toBeVisible({ timeout: 20000 }); + + // The map should have zoomed in to the route bounds (zoom > default 6) + const zoom = await page.evaluate(() => { + const map = (window as any).__leafletMap; + return map ? map.getZoom() : null; + }); + expect(zoom).not.toBeNull(); + expect(zoom).toBeGreaterThan(6); + }); + test("can create session with initial waypoints", async ({ request }) => { const response = await request.post("/api/sessions", { data: { From 2079b7e6de41b0248930b0053998ac27cfd4dea1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 12:41:30 +0000 Subject: [PATCH 010/723] Simplify copilot-instructions.md to point to CLAUDE.md instead of duplicating content Agent-Logs-Url: https://github.com/trails-cool/trails/sessions/bc100497-d093-4f44-bf81-5fbd357af6b3 Co-authored-by: stigi <13815+stigi@users.noreply.github.com> --- .github/copilot-instructions.md | 177 +------------------------------- 1 file changed, 1 insertion(+), 176 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index abc1db2..a745f75 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,178 +1,3 @@ # trails.cool — Copilot Instructions -## Project Overview - -trails.cool is a federated, self-hostable platform for outdoor enthusiasts with two apps: - -- **Planner** (`apps/planner`) — Stateless collaborative route editor. Real-time editing via Yjs, routing via BRouter, no user accounts, sessions are anonymous and ephemeral. -- **Journal** (`apps/journal`) — Federated social platform for routes and activities. User accounts, ActivityPub federation via Fedify, PostgreSQL + PostGIS. - -Full architecture: `docs/architecture.md` -Philosophy: `docs/philosophy.md` -OpenSpec change: `openspec/changes/phase-1-mvp/` - -## Principles - -- **Privacy-first**: The Planner collects zero user data. The Journal documents all data collection in a privacy manifest. Never add tracking, analytics, or data collection without updating the manifest. -- **Data ownership**: All user data must be exportable in open formats (GPX, JSON). Never create data lock-in. -- **Simplicity**: Start with the simplest thing that works. Don't add abstractions, config options, or features unless real users need them. -- **Open standards**: Use GPX, ActivityPub, OpenStreetMap, WebFinger. Don't invent proprietary formats. -- **Inclusive language**: Use "host" not "master", "allowlist" not "whitelist", etc. - -## Tech Stack - -- **Language**: TypeScript (strict mode) -- **Frontend**: React + Tailwind CSS + React Router 7 (Remix stack) -- **Maps**: Leaflet + OpenStreetMap tiles -- **CRDT**: Yjs + y-websocket (Planner only) -- **Federation**: Fedify (Journal only, Phase 2) -- **Database**: PostgreSQL + PostGIS -- **Media storage**: S3-compatible (Garage) -- **Routing engine**: BRouter (Java, runs as separate Docker container) -- **i18n**: react-i18next (English + German) -- **Monorepo**: pnpm workspaces + Turborepo - -## Repository Structure - -``` -apps/ - planner/ — Planner app (React Router 7) - journal/ — Journal app (React Router 7 + Fedify) -packages/ - types/ — Shared TypeScript interfaces (Route, Activity, Waypoint) - ui/ — Shared React components (Tailwind) - map/ — Leaflet map wrappers and tile layer configs - gpx/ — GPX parsing, generation, validation - i18n/ — react-i18next config + translations -infrastructure/ — Terraform + Docker Compose -openspec/ — OpenSpec specs and changes -docs/ — Architecture, philosophy, tooling docs -docker/brouter/ — BRouter Docker image -``` - -## Development Commands - -```bash -pnpm install # Install dependencies -pnpm dev # Start both apps in dev mode -pnpm build # Build all packages and apps -pnpm typecheck # Type-check all packages -pnpm lint # Lint all packages -pnpm test # Run unit tests (vitest) -pnpm test:watch # Run unit tests in watch mode -pnpm test:e2e # Run E2E tests (playwright, requires dev servers) -pnpm test:e2e:ui # Run E2E tests with Playwright UI -pnpm dev:full # Start full stack (Docker + DB + BRouter + apps) -pnpm dev:services # Start Docker services only (PostgreSQL + BRouter) -pnpm db:push # Push Drizzle schema to local PostgreSQL -pnpm db:studio # Open Drizzle Studio (DB browser) -``` - -## Testing Strategy - -- **Unit tests** (Vitest + jsdom): For packages, components, utilities, and app logic. - Place test files next to source: `foo.ts` → `foo.test.ts`. - Uses `@testing-library/react` for component tests. -- **E2E tests** (Playwright): For browser behavior across both apps. - Tests live in `e2e/` at repo root. Scoped per app via `testMatch` in `playwright.config.ts`. - Playwright auto-starts dev servers if not already running. - -**Important**: Write tests alongside implementation, not as an afterthought. When implementing a package or utility, add a co-located `*.test.ts` file. When implementing a user-facing feature, add or update E2E tests. Run `pnpm test` and `pnpm test:e2e` before committing. - -## Code Conventions - -- **Route registration**: Both apps use explicit `routes.ts` (not file-based routing). When adding a new route file, you **must** add it to `apps/*/app/routes.ts` or it won't be compiled into the build. -- All user-facing strings must use i18n (`useTranslation()` hook, never hardcode strings) -- Use `@trails-cool/types` for shared interfaces — don't duplicate type definitions -- Map components go in `@trails-cool/map`, not in individual apps -- GPX parsing/generation goes in `@trails-cool/gpx` -- Database schemas: `planner.*` for Planner data, `journal.*` for Journal data -- Route geometry must be stored as PostGIS LineString (extracted from GPX on save) - -## Key Architecture Decisions - -- **Planner is stateless**: No user accounts, no persistent user data. Sessions are anonymous. -- **Journal is the source of truth**: Routes live on the owner's Journal instance. -- **Routing host pattern**: One client per Planner session talks to BRouter (elected via Yjs awareness). -- **JWT callbacks**: Planner saves back to Journal via scoped JWT tokens in callback URLs. -- **Sequential versioning**: Route versions are v1, v2, v3. Yjs state vectors enable conflict-free merging. -- **Single domain**: Each instance uses one domain for both web UI and ActivityPub handles. -- **Simple permissions**: View + Edit only. No fine-grained permissions. - -## Git Workflow - -**All changes go through pull requests.** Do not push directly to main. - -### Before opening a PR -1. Run `pnpm typecheck && pnpm lint && pnpm test && pnpm test:e2e` — all must pass -2. Check for open PRs: `gh pr list` — avoid conflicts with in-flight work -3. Pull latest main: `git pull origin main --rebase` - -### Opening a PR -- Create a feature branch: `git checkout -b ` -- Keep PRs focused — one logical change per PR -- Use the merge queue to auto-merge when CI passes: - ```bash - gh pr create --title "..." --body "..." - gh pr merge --merge --auto - ``` - -### Stacking PRs (for fast local iteration) -When working on sequential tasks, stack branches locally: -``` -main → feature-a → feature-b → feature-c -``` -- Each branch gets its own PR -- Set the base branch correctly: `gh pr create --base feature-a` -- When feature-a merges, rebase feature-b onto main -- This keeps you unblocked while PRs are in CI - -### Important: Do not push to a branch after its PR merges via merge queue -Once a PR enters the merge queue it will merge as soon as CI passes. If you -push additional commits to the branch after that, those commits are orphaned -— they won't be on main. Always check `gh pr view --json state` -before pushing to an existing PR branch. - -### After merging -- Update main: `git checkout main && git pull` -- Delete merged branches: `git branch -d ` -- Check if stacked PRs need rebasing - -### Emergency override -Admins can bypass the PR workflow when necessary (e.g., CI is broken and needs a hotfix). Document the reason in the commit message. - -## Deployment - -Three separate CD workflows triggered by path: - -| Workflow | Triggers on | Deploys | -|----------|-------------|---------| -| `cd-apps.yml` | `apps/`, `packages/`, `pnpm-lock.yaml` | journal, planner | -| `cd-infra.yml` | `infrastructure/` | caddy, postgres, prometheus, loki, grafana, exporters | -| `cd-brouter.yml` | `docker/brouter/` | brouter | - -### Secrets -All secrets are stored in SOPS-encrypted files (`infrastructure/secrets.app.env`, `infrastructure/secrets.infra.env`). Edit with `sops infrastructure/secrets.app.env`. Only `AGE_SECRET_KEY`, `DEPLOY_SSH_KEY`, and `DEPLOY_HOST` remain as GitHub secrets. - -### Full restart -To restart **all** containers (not just the ones a workflow normally touches): -```bash -gh workflow run cd-infra.yml -f restart_all=true -``` - -### Server access -```bash -ssh -i ~/.ssh/trails-cool-deploy root@trails.cool -``` - -### Grafana -`https://grafana.internal.trails.cool` — GitHub OAuth (trails-cool org) - -## OpenSpec Workflow - -Specs live in `openspec/`. Use these slash commands: - -- `/opsx:propose` — Create a new change with proposal, design, specs, and tasks -- `/opsx:apply` — Implement tasks from an existing change -- `/opsx:explore` — Think through ideas before proposing -- `/opsx:archive` — Archive a completed change +For full project context — including architecture, principles, tech stack, dev commands, testing strategy, code conventions, git workflow, and deployment — see [`CLAUDE.md`](../CLAUDE.md) at the repository root. From d20505720c440db59934e34b82e18ba41b51b489 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 29 Mar 2026 13:12:04 +0000 Subject: [PATCH 011/723] Restore 'primary development tool' qualifier for Claude Code in README Agent-Logs-Url: https://github.com/trails-cool/trails/sessions/5338ac00-6f6c-4e04-8d15-3c443d87eab4 Co-authored-by: stigi <13815+stigi@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bbf3b62..36f7493 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ This project uses AI-assisted, spec-driven development. See | Tool | Purpose | |------|---------| | [cmux](https://cmux.dev) | Native macOS terminal for running multiple AI coding sessions | -| [Claude Code](https://claude.ai/claude-code) | AI coding assistant | +| [Claude Code](https://claude.ai/claude-code) | AI coding assistant (primary development tool) | | [GitHub Copilot](https://github.com/features/copilot) | AI coding assistant | | [Crit](https://github.com/tomasz-tomczyk/crit) | Browser-based inline code review | | [OpenSpec](https://openspec.dev) | Spec-driven development workflow | From 99a4d7af97792caea43704652fb7b90d2bed3ee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 15:20:06 +0200 Subject: [PATCH 012/723] Fix fitBounds running before elevation chart resizes map invalidateSize() + requestAnimationFrame ensures Leaflet knows the map's actual dimensions after the elevation chart renders. Also removes unnecessary filter on already-typed coordinates. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/PlannerMap.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 3c81524..d8d3499 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -63,13 +63,18 @@ function RouteFitter({ coordinates }: { coordinates: [number, number, number][] // Coordinates are in [lon, lat, elevation] GeoJSON format const bounds = L.latLngBounds( - coordinates.filter((c) => c.length >= 2).map((c) => [c[1]!, c[0]!] as [number, number]), + coordinates.map((c) => [c[1]!, c[0]!] as [number, number]), ); - if (bounds.isValid()) { + if (!bounds.isValid()) return; + + // Delay fitBounds so the layout has settled (elevation chart may resize the map) + const raf = requestAnimationFrame(() => { + map.invalidateSize(); map.fitBounds(bounds, { padding: [50, 50], maxZoom: 16 }); hasFitted.current = true; - } + }); + return () => cancelAnimationFrame(raf); }, [coordinates, map]); return null; From 6c482238e8b7aab4acfff990c5288e130dd8feaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 19:44:15 +0200 Subject: [PATCH 013/723] Add Grafana deploy annotations to all CD workflows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Posts an annotation to Grafana after each successful deploy, tagged with "deploy" and the service name. Annotations appear as vertical markers on dashboards, making it easy to correlate deploys with metric changes. Uses GRAFANA_SERVICE_TOKEN from SOPS secrets — must be added via sops infrastructure/secrets.infra.env. Gracefully skips if the token is not configured. Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/cd-apps.yml | 10 ++++++++++ .github/workflows/cd-brouter.yml | 10 ++++++++++ .github/workflows/cd-infra.yml | 10 ++++++++++ 3 files changed, 30 insertions(+) diff --git a/.github/workflows/cd-apps.yml b/.github/workflows/cd-apps.yml index ab3e130..133700a 100644 --- a/.github/workflows/cd-apps.yml +++ b/.github/workflows/cd-apps.yml @@ -110,3 +110,13 @@ jobs: # Clean up docker image prune -af docker compose ps + + # Annotate deploy in Grafana + GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN app.env | cut -d= -f2-) + if [ -n "$GRAFANA_TOKEN" ]; then + docker compose exec -T grafana wget -q -O /dev/null \ + --header="Authorization: Bearer $GRAFANA_TOKEN" \ + --header="Content-Type: application/json" \ + --post-data='{"text":"Deploy '${{ github.sha }}'","tags":["deploy","apps"]}' \ + http://localhost:3000/api/annotations || true + fi diff --git a/.github/workflows/cd-brouter.yml b/.github/workflows/cd-brouter.yml index ba369df..3ef953d 100644 --- a/.github/workflows/cd-brouter.yml +++ b/.github/workflows/cd-brouter.yml @@ -64,3 +64,13 @@ jobs: docker pull ghcr.io/trails-cool/brouter:latest docker compose up -d brouter docker image prune -af + + # Annotate deploy in Grafana + GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2- 2>/dev/null) + if [ -n "$GRAFANA_TOKEN" ]; then + docker compose exec -T grafana wget -q -O /dev/null \ + --header="Authorization: Bearer $GRAFANA_TOKEN" \ + --header="Content-Type: application/json" \ + --post-data='{"text":"Deploy brouter ${{ github.sha }}","tags":["deploy","brouter"]}' \ + http://localhost:3000/api/annotations || true + fi diff --git a/.github/workflows/cd-infra.yml b/.github/workflows/cd-infra.yml index dc6ffc2..eb6450a 100644 --- a/.github/workflows/cd-infra.yml +++ b/.github/workflows/cd-infra.yml @@ -85,3 +85,13 @@ jobs: fi docker compose ps + + # Annotate deploy in Grafana + GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2-) + if [ -n "$GRAFANA_TOKEN" ]; then + docker compose exec -T grafana wget -q -O /dev/null \ + --header="Authorization: Bearer $GRAFANA_TOKEN" \ + --header="Content-Type: application/json" \ + --post-data='{"text":"Deploy infra ${{ github.sha }}","tags":["deploy","infra"]}' \ + http://localhost:3000/api/annotations || true + fi From 8ab174d5bbb5a4a3fbb744ef2df44cae895c9f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 19:48:37 +0200 Subject: [PATCH 014/723] Add GRAFANA_SERVICE_TOKEN to encrypted infra secrets Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/secrets.infra.env | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/infrastructure/secrets.infra.env b/infrastructure/secrets.infra.env index 3f259ac..62916c8 100644 --- a/infrastructure/secrets.infra.env +++ b/infrastructure/secrets.infra.env @@ -3,12 +3,13 @@ GF_AUTH_GITHUB_CLIENT_ID=ENC[AES256_GCM,data:htq48rFOLrBxXoHeQMDXS0cM3Hs=,iv:8w5H6sMr8zXqFGFSaCeiSEfZhR4ETN4ypUzHNxcvNN4=,tag:qkdBnizdOxOQ87JzGxwy1g==,type:str] GF_AUTH_GITHUB_CLIENT_SECRET=ENC[AES256_GCM,data:tTkVsYmNgLKxbv8QVyHR52RAJNmX9L//8W/hfXK2jSvkkODNIQ7Y8A==,iv:QN7AhtS0iv4WQtwmetp8KYXbiOJpHC4lhKVxgpljng4=,tag:0c+zp4h7X/ibQHY/vebp8g==,type:str] GRAFANA_DB_PASSWORD=ENC[AES256_GCM,data:aPA1BvrPUsUOwWZClrQfbdlUqOS5OpmSME7h9/m1DC0=,iv:fTpP7czGHZGUdbGE8lDVN61iQ/XyWQ9yt0B8jArjTs4=,tag:GGHgXehE6H1SSQq/P23nzw==,type:str] +GRAFANA_SERVICE_TOKEN=ENC[AES256_GCM,data:en8+/UsM/wy7Y3Ae9N0p7WgQsq+PlHdNdHeoya3qw3jLVHuB+bF6ZXqoliDmuw==,iv:UKXgtPTtvKRnG9/pHFGU0LniGB7d+RlS4x5KpF/kvZA=,tag:m1sz/9l+HRIfTENagCmeeg==,type:str] GF_SMTP_HOST=ENC[AES256_GCM,data:rfGovWBsyxZsQ6sSv20/Sui0Pcww,iv:t4dlQXafGVYcE62udWGSwVcl/puz4yr52xLhczytsGw=,tag:TZvQpsdxJI4F9YPbiwOAhA==,type:str] GF_SMTP_USER=ENC[AES256_GCM,data:R80opLVhdfTz9eK+jw5Enni5,iv:4lS+qDLIYBb3Pm6e70lOOLQQzWNGasI8xU8IMjSE8Tc=,tag:VJTSK+r7rMgFZvCtFLFruw==,type:str] GF_SMTP_PASSWORD=ENC[AES256_GCM,data:GUREzRWoUpRKicl0hyRsGQ==,iv:Yv64LhLcJ/aDW+0zMcrlgFDMTxuIfSS8BZmp3TYAcvU=,tag:OEReZeEgxqbblGgUp2E6iw==,type:str] sops_age__list_0__map_enc=-----BEGIN AGE ENCRYPTED FILE-----\nYWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSAwOFVLYi9VYlRQdWwzK0g3\nNmRwemxjeU5zYWhPRzIxbzJWc0E2cXNYN2xRClVYUlkxWnIreUhtZ044dkhBeFBk\ncW9YZi9RN1E0Qjg4cVp4T2ZPaGR4WEUKLS0tIGFxQTV2blhzSmUvT2ljeFN2blVj\na3l1NGc5dEtZYkNJZG1GYlo2YXM3OVEKd1UVotkdkOqaA23UeEJckItDV7HU72uO\nH7Nza9clHgQwXqwYFFxBBAPRiVo/aX+J+jXELNp2fA/Wt/66SjrBig==\n-----END AGE ENCRYPTED FILE-----\n sops_age__list_0__map_recipient=age1vukt8py0s2mm47fx6qh6vykckfkdqslf9w68ekytfzvc8xp7e3rqn6p64n -sops_lastmodified=2026-03-27T19:27:27Z -sops_mac=ENC[AES256_GCM,data:j+vdVbcJ1xPcD2+MY6lwLy2e2oPzP5Obk+sJL/2G3jttaPBe82io+E9MhrXJYRJPbKwVgwl8GY3FX4TG57jRknLolAk966fe8eQYnc+4waMBM+UQclfsBRa4M7H7DjWGB+fArBaDLKvotSjFais8BnVf/O9l/K9rVOlkWPlvnvo=,iv:wZJD5s0+llOmXEA6VRmjw9KJBTyx58EeaaHBdzkjhaY=,tag:ITh7F9Ul7pBCE7qX7qXUsg==,type:str] +sops_lastmodified=2026-03-29T17:47:20Z +sops_mac=ENC[AES256_GCM,data:GywX/4bsPvDrlOXAyv18xPEA/eEuF7rrk5UUphP3+7M2SWwNEMQSQhz0YsuIxlctdVVyMmCnK9SwJtru03FHUE0X3GY48IRvQcYwz9xSXkws/znKn90KkFUpLouIEfchNHL0xxY9xQSgGVZT1/IDKQMEc1+4hyEQqBrxgy8nDUk=,iv:IBEAYarsCAs10o8bipLvpeI9knHknytkd+5Kj24uFTY=,tag:Y2RAhx/ceGPnxKNsWjRDDw==,type:str] sops_unencrypted_suffix=_unencrypted sops_version=3.9.4 From c2b90326862cb69e5cc4a53eee07183639fce04a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 19:59:17 +0200 Subject: [PATCH 015/723] Fix deploy annotation reading token from wrong env file GRAFANA_SERVICE_TOKEN is in secrets.infra.env, which the infra workflow merges into .env on the server. The apps workflow was reading from app.env (which only has app secrets). Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/cd-apps.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cd-apps.yml b/.github/workflows/cd-apps.yml index 133700a..9fb0fa6 100644 --- a/.github/workflows/cd-apps.yml +++ b/.github/workflows/cd-apps.yml @@ -112,7 +112,7 @@ jobs: docker compose ps # Annotate deploy in Grafana - GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN app.env | cut -d= -f2-) + GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2- 2>/dev/null) if [ -n "$GRAFANA_TOKEN" ]; then docker compose exec -T grafana wget -q -O /dev/null \ --header="Authorization: Bearer $GRAFANA_TOKEN" \ From 87be96db6709a9dcd52355ac4c629bec505f8c92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 20:44:39 +0200 Subject: [PATCH 016/723] Switch deploy annotations from BusyBox wget to curl BusyBox wget in the Grafana Alpine container doesn't support --post-data/--header. Grafana's image includes curl. Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/cd-apps.yml | 8 ++++---- .github/workflows/cd-brouter.yml | 8 ++++---- .github/workflows/cd-infra.yml | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/.github/workflows/cd-apps.yml b/.github/workflows/cd-apps.yml index 9fb0fa6..24ab70f 100644 --- a/.github/workflows/cd-apps.yml +++ b/.github/workflows/cd-apps.yml @@ -114,9 +114,9 @@ jobs: # Annotate deploy in Grafana GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2- 2>/dev/null) if [ -n "$GRAFANA_TOKEN" ]; then - docker compose exec -T grafana wget -q -O /dev/null \ - --header="Authorization: Bearer $GRAFANA_TOKEN" \ - --header="Content-Type: application/json" \ - --post-data='{"text":"Deploy '${{ github.sha }}'","tags":["deploy","apps"]}' \ + docker compose exec -T grafana curl -sf -X POST \ + -H "Authorization: Bearer $GRAFANA_TOKEN" \ + -H "Content-Type: application/json" \ + -d '{"text":"Deploy ${{ github.sha }}","tags":["deploy","apps"]}' \ http://localhost:3000/api/annotations || true fi diff --git a/.github/workflows/cd-brouter.yml b/.github/workflows/cd-brouter.yml index 3ef953d..3efef07 100644 --- a/.github/workflows/cd-brouter.yml +++ b/.github/workflows/cd-brouter.yml @@ -68,9 +68,9 @@ jobs: # Annotate deploy in Grafana GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2- 2>/dev/null) if [ -n "$GRAFANA_TOKEN" ]; then - docker compose exec -T grafana wget -q -O /dev/null \ - --header="Authorization: Bearer $GRAFANA_TOKEN" \ - --header="Content-Type: application/json" \ - --post-data='{"text":"Deploy brouter ${{ github.sha }}","tags":["deploy","brouter"]}' \ + docker compose exec -T grafana curl -sf -X POST \ + -H "Authorization: Bearer $GRAFANA_TOKEN" \ + -H "Content-Type: application/json" \ + -d '{"text":"Deploy brouter ${{ github.sha }}","tags":["deploy","brouter"]}' \ http://localhost:3000/api/annotations || true fi diff --git a/.github/workflows/cd-infra.yml b/.github/workflows/cd-infra.yml index eb6450a..fd295f0 100644 --- a/.github/workflows/cd-infra.yml +++ b/.github/workflows/cd-infra.yml @@ -89,9 +89,9 @@ jobs: # Annotate deploy in Grafana GRAFANA_TOKEN=$(grep GRAFANA_SERVICE_TOKEN .env | cut -d= -f2-) if [ -n "$GRAFANA_TOKEN" ]; then - docker compose exec -T grafana wget -q -O /dev/null \ - --header="Authorization: Bearer $GRAFANA_TOKEN" \ - --header="Content-Type: application/json" \ - --post-data='{"text":"Deploy infra ${{ github.sha }}","tags":["deploy","infra"]}' \ + docker compose exec -T grafana curl -sf -X POST \ + -H "Authorization: Bearer $GRAFANA_TOKEN" \ + -H "Content-Type: application/json" \ + -d '{"text":"Deploy infra ${{ github.sha }}","tags":["deploy","infra"]}' \ http://localhost:3000/api/annotations || true fi From fcfea209b884c9346790b75e8d2e85861cb3809e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 20:47:56 +0200 Subject: [PATCH 017/723] Add deploy annotation query to all Grafana dashboards Provisioned dashboards now display deploy markers (cyan vertical lines) by querying built-in Grafana annotations tagged "deploy". Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/grafana/dashboards/business.json | 11 +++++++++++ infrastructure/grafana/dashboards/infrastructure.json | 11 +++++++++++ infrastructure/grafana/dashboards/overview.json | 11 +++++++++++ infrastructure/grafana/dashboards/planner.json | 11 +++++++++++ infrastructure/grafana/dashboards/service-health.json | 11 +++++++++++ 5 files changed, 55 insertions(+) diff --git a/infrastructure/grafana/dashboards/business.json b/infrastructure/grafana/dashboards/business.json index 8d29c53..9b8c934 100644 --- a/infrastructure/grafana/dashboards/business.json +++ b/infrastructure/grafana/dashboards/business.json @@ -1,6 +1,17 @@ { "title": "Business Metrics", "uid": "trails-business", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { "type": "grafana", "uid": "-- Grafana --" }, + "iconColor": "rgba(0, 211, 255, 1)", + "tags": ["deploy"] + } + ] + }, "timezone": "browser", "refresh": "5m", "panels": [ diff --git a/infrastructure/grafana/dashboards/infrastructure.json b/infrastructure/grafana/dashboards/infrastructure.json index 9afe4fc..cc4ba04 100644 --- a/infrastructure/grafana/dashboards/infrastructure.json +++ b/infrastructure/grafana/dashboards/infrastructure.json @@ -2,6 +2,17 @@ "dashboard": { "title": "Infrastructure", "uid": "trails-infra", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { "type": "grafana", "uid": "-- Grafana --" }, + "iconColor": "rgba(0, 211, 255, 1)", + "tags": ["deploy"] + } + ] + }, "timezone": "browser", "refresh": "30s", "panels": [ diff --git a/infrastructure/grafana/dashboards/overview.json b/infrastructure/grafana/dashboards/overview.json index df6abcc..f43f8ff 100644 --- a/infrastructure/grafana/dashboards/overview.json +++ b/infrastructure/grafana/dashboards/overview.json @@ -2,6 +2,17 @@ "dashboard": { "title": "trails.cool Overview", "uid": "trails-overview", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { "type": "grafana", "uid": "-- Grafana --" }, + "iconColor": "rgba(0, 211, 255, 1)", + "tags": ["deploy"] + } + ] + }, "timezone": "browser", "refresh": "30s", "panels": [ diff --git a/infrastructure/grafana/dashboards/planner.json b/infrastructure/grafana/dashboards/planner.json index c248ba7..eed9bdf 100644 --- a/infrastructure/grafana/dashboards/planner.json +++ b/infrastructure/grafana/dashboards/planner.json @@ -2,6 +2,17 @@ "dashboard": { "title": "Planner", "uid": "trails-planner", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { "type": "grafana", "uid": "-- Grafana --" }, + "iconColor": "rgba(0, 211, 255, 1)", + "tags": ["deploy"] + } + ] + }, "timezone": "browser", "refresh": "30s", "panels": [ diff --git a/infrastructure/grafana/dashboards/service-health.json b/infrastructure/grafana/dashboards/service-health.json index c5d68cb..e9a936b 100644 --- a/infrastructure/grafana/dashboards/service-health.json +++ b/infrastructure/grafana/dashboards/service-health.json @@ -2,6 +2,17 @@ "dashboard": { "title": "Service Health", "uid": "trails-service-health", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { "type": "grafana", "uid": "-- Grafana --" }, + "iconColor": "rgba(0, 211, 255, 1)", + "tags": ["deploy"] + } + ] + }, "timezone": "browser", "refresh": "30s", "panels": [ From cafedfe6fc01f46ebac452797f6d2d38a08e2944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 21:53:33 +0200 Subject: [PATCH 018/723] Fix Grafana annotation query: add target with type tags The annotation config was missing the target block that tells Grafana to filter by tags. Without it, the annotation query was silently ignored. Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/grafana/dashboards/business.json | 3 ++- infrastructure/grafana/dashboards/infrastructure.json | 3 ++- infrastructure/grafana/dashboards/overview.json | 3 ++- infrastructure/grafana/dashboards/planner.json | 3 ++- infrastructure/grafana/dashboards/service-health.json | 3 ++- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/infrastructure/grafana/dashboards/business.json b/infrastructure/grafana/dashboards/business.json index 9b8c934..9cf5588 100644 --- a/infrastructure/grafana/dashboards/business.json +++ b/infrastructure/grafana/dashboards/business.json @@ -8,7 +8,8 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "tags": ["deploy"] + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, + "type": "dashboard" } ] }, diff --git a/infrastructure/grafana/dashboards/infrastructure.json b/infrastructure/grafana/dashboards/infrastructure.json index cc4ba04..c0e4125 100644 --- a/infrastructure/grafana/dashboards/infrastructure.json +++ b/infrastructure/grafana/dashboards/infrastructure.json @@ -9,7 +9,8 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "tags": ["deploy"] + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, + "type": "dashboard" } ] }, diff --git a/infrastructure/grafana/dashboards/overview.json b/infrastructure/grafana/dashboards/overview.json index f43f8ff..28b8b41 100644 --- a/infrastructure/grafana/dashboards/overview.json +++ b/infrastructure/grafana/dashboards/overview.json @@ -9,7 +9,8 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "tags": ["deploy"] + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, + "type": "dashboard" } ] }, diff --git a/infrastructure/grafana/dashboards/planner.json b/infrastructure/grafana/dashboards/planner.json index eed9bdf..139c9c7 100644 --- a/infrastructure/grafana/dashboards/planner.json +++ b/infrastructure/grafana/dashboards/planner.json @@ -9,7 +9,8 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "tags": ["deploy"] + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, + "type": "dashboard" } ] }, diff --git a/infrastructure/grafana/dashboards/service-health.json b/infrastructure/grafana/dashboards/service-health.json index e9a936b..36ca578 100644 --- a/infrastructure/grafana/dashboards/service-health.json +++ b/infrastructure/grafana/dashboards/service-health.json @@ -9,7 +9,8 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "tags": ["deploy"] + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, + "type": "dashboard" } ] }, From 9223eacb91ffb05a8ebe5ae2c3fa5de80ee51889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 21:57:39 +0200 Subject: [PATCH 019/723] Remove type:dashboard from annotation config The type:dashboard field was causing Grafana to filter annotations by dashboard scope. Our deploy annotations are global (no dashboardUID), so the target.type:tags is the only filter needed. Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/grafana/dashboards/business.json | 3 +-- infrastructure/grafana/dashboards/infrastructure.json | 3 +-- infrastructure/grafana/dashboards/overview.json | 3 +-- infrastructure/grafana/dashboards/planner.json | 3 +-- infrastructure/grafana/dashboards/service-health.json | 3 +-- 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/infrastructure/grafana/dashboards/business.json b/infrastructure/grafana/dashboards/business.json index 9cf5588..800dbbc 100644 --- a/infrastructure/grafana/dashboards/business.json +++ b/infrastructure/grafana/dashboards/business.json @@ -8,8 +8,7 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, - "type": "dashboard" + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } } ] }, diff --git a/infrastructure/grafana/dashboards/infrastructure.json b/infrastructure/grafana/dashboards/infrastructure.json index c0e4125..79e7f1e 100644 --- a/infrastructure/grafana/dashboards/infrastructure.json +++ b/infrastructure/grafana/dashboards/infrastructure.json @@ -9,8 +9,7 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, - "type": "dashboard" + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } } ] }, diff --git a/infrastructure/grafana/dashboards/overview.json b/infrastructure/grafana/dashboards/overview.json index 28b8b41..d5e936c 100644 --- a/infrastructure/grafana/dashboards/overview.json +++ b/infrastructure/grafana/dashboards/overview.json @@ -9,8 +9,7 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, - "type": "dashboard" + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } } ] }, diff --git a/infrastructure/grafana/dashboards/planner.json b/infrastructure/grafana/dashboards/planner.json index 139c9c7..c476608 100644 --- a/infrastructure/grafana/dashboards/planner.json +++ b/infrastructure/grafana/dashboards/planner.json @@ -9,8 +9,7 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, - "type": "dashboard" + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } } ] }, diff --git a/infrastructure/grafana/dashboards/service-health.json b/infrastructure/grafana/dashboards/service-health.json index 36ca578..440fbef 100644 --- a/infrastructure/grafana/dashboards/service-health.json +++ b/infrastructure/grafana/dashboards/service-health.json @@ -9,8 +9,7 @@ "enable": true, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" }, - "type": "dashboard" + "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } } ] }, From d45d6e3eafe00485a36850022149fcec9b003a94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 22:18:06 +0200 Subject: [PATCH 020/723] Unwrap dashboard JSON for Grafana provisioning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Grafana file-based provisioning expects flat dashboard JSON, not the API format with a "dashboard" wrapper. The 4 wrapped dashboards were silently failing to load — only business.json (already flat) worked. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../grafana/dashboards/infrastructure.json | 154 +++-- .../grafana/dashboards/overview.json | 198 ++++-- .../grafana/dashboards/planner.json | 135 ++-- .../grafana/dashboards/service-health.json | 646 ++++++++++++------ 4 files changed, 788 insertions(+), 345 deletions(-) diff --git a/infrastructure/grafana/dashboards/infrastructure.json b/infrastructure/grafana/dashboards/infrastructure.json index 79e7f1e..697fed3 100644 --- a/infrastructure/grafana/dashboards/infrastructure.json +++ b/infrastructure/grafana/dashboards/infrastructure.json @@ -1,56 +1,108 @@ { - "dashboard": { - "title": "Infrastructure", - "uid": "trails-infra", - "annotations": { - "list": [ - { - "name": "Deploys", - "enable": true, - "datasource": { "type": "grafana", "uid": "-- Grafana --" }, - "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } + "title": "Infrastructure", + "uid": "trails-infra", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "iconColor": "rgba(0, 211, 255, 1)", + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "deploy" + ], + "type": "tags" } - ] - }, - "timezone": "browser", - "refresh": "30s", - "panels": [ - { - "title": "Process Memory (RSS)", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 }, - "targets": [ - { "expr": "process_resident_memory_bytes", "legendFormat": "{{job}}" } - ], - "fieldConfig": { "defaults": { "unit": "bytes" } } - }, - { - "title": "CPU Usage", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 }, - "targets": [ - { "expr": "rate(process_cpu_seconds_total[5m])", "legendFormat": "{{job}}" } - ], - "fieldConfig": { "defaults": { "unit": "percentunit" } } - }, - { - "title": "Event Loop Lag", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 8 }, - "targets": [ - { "expr": "nodejs_eventloop_lag_seconds", "legendFormat": "{{job}}" } - ], - "fieldConfig": { "defaults": { "unit": "s" } } - }, - { - "title": "Open File Descriptors", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 8 }, - "targets": [ - { "expr": "process_open_fds", "legendFormat": "{{job}}" } - ] } ] - } + }, + "timezone": "browser", + "refresh": "30s", + "panels": [ + { + "title": "Process Memory (RSS)", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 0 + }, + "targets": [ + { + "expr": "process_resident_memory_bytes", + "legendFormat": "{{job}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "bytes" + } + } + }, + { + "title": "CPU Usage", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 0 + }, + "targets": [ + { + "expr": "rate(process_cpu_seconds_total[5m])", + "legendFormat": "{{job}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percentunit" + } + } + }, + { + "title": "Event Loop Lag", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 8 + }, + "targets": [ + { + "expr": "nodejs_eventloop_lag_seconds", + "legendFormat": "{{job}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "s" + } + } + }, + { + "title": "Open File Descriptors", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 8 + }, + "targets": [ + { + "expr": "process_open_fds", + "legendFormat": "{{job}}" + } + ] + } + ] } diff --git a/infrastructure/grafana/dashboards/overview.json b/infrastructure/grafana/dashboards/overview.json index d5e936c..dd7df4a 100644 --- a/infrastructure/grafana/dashboards/overview.json +++ b/infrastructure/grafana/dashboards/overview.json @@ -1,68 +1,142 @@ { - "dashboard": { - "title": "trails.cool Overview", - "uid": "trails-overview", - "annotations": { - "list": [ - { - "name": "Deploys", - "enable": true, - "datasource": { "type": "grafana", "uid": "-- Grafana --" }, - "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } - } - ] - }, - "timezone": "browser", - "refresh": "30s", - "panels": [ + "title": "trails.cool Overview", + "uid": "trails-overview", + "annotations": { + "list": [ { - "title": "Request Rate", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 }, - "targets": [ - { - "expr": "sum(rate(http_request_duration_seconds_count[5m])) by (job)", - "legendFormat": "{{job}}" - } - ] - }, - { - "title": "Error Rate", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 }, - "targets": [ - { - "expr": "sum(rate(http_request_duration_seconds_count{status=~\"5..\"}[5m])) / sum(rate(http_request_duration_seconds_count[5m])) * 100", - "legendFormat": "Error %" - } - ], - "fieldConfig": { - "defaults": { "unit": "percent", "thresholds": { "steps": [{ "color": "green", "value": null }, { "color": "red", "value": 5 }] } } - } - }, - { - "title": "Latency p50 / p95 / p99", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 8 }, - "targets": [ - { "expr": "histogram_quantile(0.50, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", "legendFormat": "p50" }, - { "expr": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", "legendFormat": "p95" }, - { "expr": "histogram_quantile(0.99, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", "legendFormat": "p99" } - ], - "fieldConfig": { "defaults": { "unit": "s" } } - }, - { - "title": "Health Status", - "type": "stat", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 8 }, - "targets": [ - { "expr": "up", "legendFormat": "{{job}}" } - ], - "fieldConfig": { - "defaults": { "mappings": [{ "type": "value", "options": { "0": { "text": "DOWN", "color": "red" }, "1": { "text": "UP", "color": "green" } } }] } + "name": "Deploys", + "enable": true, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "iconColor": "rgba(0, 211, 255, 1)", + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "deploy" + ], + "type": "tags" } } ] - } + }, + "timezone": "browser", + "refresh": "30s", + "panels": [ + { + "title": "Request Rate", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 0 + }, + "targets": [ + { + "expr": "sum(rate(http_request_duration_seconds_count[5m])) by (job)", + "legendFormat": "{{job}}" + } + ] + }, + { + "title": "Error Rate", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 0 + }, + "targets": [ + { + "expr": "sum(rate(http_request_duration_seconds_count{status=~\"5..\"}[5m])) / sum(rate(http_request_duration_seconds_count[5m])) * 100", + "legendFormat": "Error %" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percent", + "thresholds": { + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 5 + } + ] + } + } + } + }, + { + "title": "Latency p50 / p95 / p99", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 8 + }, + "targets": [ + { + "expr": "histogram_quantile(0.50, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", + "legendFormat": "p50" + }, + { + "expr": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", + "legendFormat": "p95" + }, + { + "expr": "histogram_quantile(0.99, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))", + "legendFormat": "p99" + } + ], + "fieldConfig": { + "defaults": { + "unit": "s" + } + } + }, + { + "title": "Health Status", + "type": "stat", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 8 + }, + "targets": [ + { + "expr": "up", + "legendFormat": "{{job}}" + } + ], + "fieldConfig": { + "defaults": { + "mappings": [ + { + "type": "value", + "options": { + "0": { + "text": "DOWN", + "color": "red" + }, + "1": { + "text": "UP", + "color": "green" + } + } + } + ] + } + } + } + ] } diff --git a/infrastructure/grafana/dashboards/planner.json b/infrastructure/grafana/dashboards/planner.json index c476608..72a9e02 100644 --- a/infrastructure/grafana/dashboards/planner.json +++ b/infrastructure/grafana/dashboards/planner.json @@ -1,51 +1,102 @@ { - "dashboard": { - "title": "Planner", - "uid": "trails-planner", - "annotations": { - "list": [ + "title": "Planner", + "uid": "trails-planner", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "iconColor": "rgba(0, 211, 255, 1)", + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "deploy" + ], + "type": "tags" + } + } + ] + }, + "timezone": "browser", + "refresh": "30s", + "panels": [ + { + "title": "Active Sessions", + "type": "stat", + "gridPos": { + "h": 6, + "w": 6, + "x": 0, + "y": 0 + }, + "targets": [ { - "name": "Deploys", - "enable": true, - "datasource": { "type": "grafana", "uid": "-- Grafana --" }, - "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } + "expr": "planner_active_sessions", + "legendFormat": "Sessions" } ] }, - "timezone": "browser", - "refresh": "30s", - "panels": [ - { - "title": "Active Sessions", - "type": "stat", - "gridPos": { "h": 6, "w": 6, "x": 0, "y": 0 }, - "targets": [{ "expr": "planner_active_sessions", "legendFormat": "Sessions" }] + { + "title": "Connected Clients", + "type": "stat", + "gridPos": { + "h": 6, + "w": 6, + "x": 6, + "y": 0 }, - { - "title": "Connected Clients", - "type": "stat", - "gridPos": { "h": 6, "w": 6, "x": 6, "y": 0 }, - "targets": [{ "expr": "planner_connected_clients", "legendFormat": "Clients" }] + "targets": [ + { + "expr": "planner_connected_clients", + "legendFormat": "Clients" + } + ] + }, + { + "title": "BRouter Latency", + "type": "timeseries", + "gridPos": { + "h": 6, + "w": 12, + "x": 12, + "y": 0 }, - { - "title": "BRouter Latency", - "type": "timeseries", - "gridPos": { "h": 6, "w": 12, "x": 12, "y": 0 }, - "targets": [ - { "expr": "histogram_quantile(0.50, rate(brouter_request_duration_seconds_bucket[5m]))", "legendFormat": "p50" }, - { "expr": "histogram_quantile(0.95, rate(brouter_request_duration_seconds_bucket[5m]))", "legendFormat": "p95" } - ], - "fieldConfig": { "defaults": { "unit": "s" } } - }, - { - "title": "Request Rate by Route", - "type": "timeseries", - "gridPos": { "h": 8, "w": 24, "x": 0, "y": 6 }, - "targets": [ - { "expr": "sum(rate(http_request_duration_seconds_count{job=\"planner\"}[5m])) by (route)", "legendFormat": "{{route}}" } - ] + "targets": [ + { + "expr": "histogram_quantile(0.50, rate(brouter_request_duration_seconds_bucket[5m]))", + "legendFormat": "p50" + }, + { + "expr": "histogram_quantile(0.95, rate(brouter_request_duration_seconds_bucket[5m]))", + "legendFormat": "p95" + } + ], + "fieldConfig": { + "defaults": { + "unit": "s" + } } - ] - } + }, + { + "title": "Request Rate by Route", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 6 + }, + "targets": [ + { + "expr": "sum(rate(http_request_duration_seconds_count{job=\"planner\"}[5m])) by (route)", + "legendFormat": "{{route}}" + } + ] + } + ] } diff --git a/infrastructure/grafana/dashboards/service-health.json b/infrastructure/grafana/dashboards/service-health.json index 440fbef..811bde3 100644 --- a/infrastructure/grafana/dashboards/service-health.json +++ b/infrastructure/grafana/dashboards/service-health.json @@ -1,198 +1,464 @@ { - "dashboard": { - "title": "Service Health", - "uid": "trails-service-health", - "annotations": { - "list": [ + "title": "Service Health", + "uid": "trails-service-health", + "annotations": { + "list": [ + { + "name": "Deploys", + "enable": true, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "iconColor": "rgba(0, 211, 255, 1)", + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "deploy" + ], + "type": "tags" + } + } + ] + }, + "timezone": "browser", + "refresh": "30s", + "panels": [ + { + "title": "PostgreSQL \u2014 Active Connections", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 0 + }, + "targets": [ { - "name": "Deploys", - "enable": true, - "datasource": { "type": "grafana", "uid": "-- Grafana --" }, - "iconColor": "rgba(0, 211, 255, 1)", - "target": { "limit": 100, "matchAny": false, "tags": ["deploy"], "type": "tags" } + "expr": "pg_stat_activity_count{datname=\"trails\"}", + "legendFormat": "{{state}}" } ] }, - "timezone": "browser", - "refresh": "30s", - "panels": [ - { - "title": "PostgreSQL — Active Connections", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 }, - "targets": [ - { "expr": "pg_stat_activity_count{datname=\"trails\"}", "legendFormat": "{{state}}" } - ] + { + "title": "PostgreSQL \u2014 Database Size", + "type": "stat", + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 0 }, - { - "title": "PostgreSQL — Database Size", - "type": "stat", - "gridPos": { "h": 8, "w": 6, "x": 12, "y": 0 }, - "targets": [ - { "expr": "pg_database_size_bytes{datname=\"trails\"}", "legendFormat": "trails" } - ], - "fieldConfig": { "defaults": { "unit": "bytes" } } - }, - { - "title": "PostgreSQL — Transactions/sec", - "type": "timeseries", - "gridPos": { "h": 8, "w": 6, "x": 18, "y": 0 }, - "targets": [ - { "expr": "rate(pg_stat_database_xact_commit{datname=\"trails\"}[5m])", "legendFormat": "commits/s" }, - { "expr": "rate(pg_stat_database_xact_rollback{datname=\"trails\"}[5m])", "legendFormat": "rollbacks/s" } - ] - }, - { - "title": "PostgreSQL — Slowest Queries (pg_stat_statements)", - "type": "table", - "gridPos": { "h": 8, "w": 24, "x": 0, "y": 8 }, - "targets": [ - { - "expr": "topk(10, pg_stat_statements_mean_time_seconds{datname=\"trails\"})", - "legendFormat": "{{query}}", - "format": "table", - "instant": true - } - ] - }, - { - "title": "PostgreSQL — Cache Hit Ratio", - "type": "gauge", - "gridPos": { "h": 8, "w": 6, "x": 0, "y": 16 }, - "targets": [ - { "expr": "pg_stat_database_blks_hit{datname=\"trails\"} / (pg_stat_database_blks_hit{datname=\"trails\"} + pg_stat_database_blks_read{datname=\"trails\"}) * 100", "legendFormat": "hit %" } - ], - "fieldConfig": { "defaults": { "unit": "percent", "min": 0, "max": 100, "thresholds": { "steps": [{ "color": "red", "value": null }, { "color": "yellow", "value": 90 }, { "color": "green", "value": 99 }] } } } - }, - { - "title": "PostgreSQL — Index Scans vs Sequential Scans", - "type": "timeseries", - "gridPos": { "h": 8, "w": 18, "x": 6, "y": 16 }, - "targets": [ - { "expr": "sum(rate(pg_stat_user_tables_idx_scan[5m]))", "legendFormat": "Index scans/s" }, - { "expr": "sum(rate(pg_stat_user_tables_seq_scan[5m]))", "legendFormat": "Sequential scans/s" } - ] - }, - { - "title": "Host — Disk Usage", - "type": "gauge", - "gridPos": { "h": 8, "w": 8, "x": 0, "y": 24 }, - "targets": [ - { "expr": "(1 - node_filesystem_avail_bytes{mountpoint=\"/\"} / node_filesystem_size_bytes{mountpoint=\"/\"}) * 100", "legendFormat": "Used %" } - ], - "fieldConfig": { "defaults": { "unit": "percent", "min": 0, "max": 100, "thresholds": { "steps": [{ "color": "green", "value": null }, { "color": "yellow", "value": 70 }, { "color": "red", "value": 85 }] } } } - }, - { - "title": "Host — CPU Usage", - "type": "timeseries", - "gridPos": { "h": 8, "w": 8, "x": 8, "y": 24 }, - "targets": [ - { "expr": "100 - (avg(rate(node_cpu_seconds_total{mode=\"idle\"}[5m])) * 100)", "legendFormat": "CPU %" } - ], - "fieldConfig": { "defaults": { "unit": "percent", "max": 100 } } - }, - { - "title": "Host — Memory Usage", - "type": "timeseries", - "gridPos": { "h": 8, "w": 8, "x": 16, "y": 24 }, - "targets": [ - { "expr": "node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes", "legendFormat": "Used" }, - { "expr": "node_memory_MemAvailable_bytes", "legendFormat": "Available" } - ], - "fieldConfig": { "defaults": { "unit": "bytes" } } - }, - { - "title": "Host — Network I/O", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 32 }, - "targets": [ - { "expr": "rate(node_network_receive_bytes_total{device!~\"lo|veth.*|br.*|docker.*\"}[5m])", "legendFormat": "{{device}} rx" }, - { "expr": "-rate(node_network_transmit_bytes_total{device!~\"lo|veth.*|br.*|docker.*\"}[5m])", "legendFormat": "{{device}} tx" } - ], - "fieldConfig": { "defaults": { "unit": "Bps" } } - }, - { - "title": "Host — Disk I/O", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 32 }, - "targets": [ - { "expr": "rate(node_disk_read_bytes_total[5m])", "legendFormat": "{{device}} read" }, - { "expr": "-rate(node_disk_written_bytes_total[5m])", "legendFormat": "{{device}} write" } - ], - "fieldConfig": { "defaults": { "unit": "Bps" } } - }, - { - "title": "BRouter — Request Latency (from Planner proxy)", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 40 }, - "targets": [ - { "expr": "histogram_quantile(0.50, rate(brouter_request_duration_seconds_bucket[5m]))", "legendFormat": "p50" }, - { "expr": "histogram_quantile(0.95, rate(brouter_request_duration_seconds_bucket[5m]))", "legendFormat": "p95" }, - { "expr": "histogram_quantile(0.99, rate(brouter_request_duration_seconds_bucket[5m]))", "legendFormat": "p99" } - ], - "fieldConfig": { "defaults": { "unit": "s" } } - }, - { - "title": "Container — CPU Usage (all containers)", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 40 }, - "targets": [ - { "expr": "rate(container_cpu_usage_seconds_total{name=~\"trails-cool.*\"}[5m]) * 100", "legendFormat": "{{name}}" } - ], - "fieldConfig": { "defaults": { "unit": "percent" } } - }, - { - "title": "Container — Memory Usage (all containers)", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 48 }, - "targets": [ - { "expr": "container_memory_usage_bytes{name=~\"trails-cool.*\"}", "legendFormat": "{{name}}" } - ], - "fieldConfig": { "defaults": { "unit": "bytes" } } - }, - { - "title": "BRouter — Container Resources", - "type": "stat", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 48 }, - "targets": [ - { "expr": "container_memory_usage_bytes{name=~\".*brouter.*\"}", "legendFormat": "Memory" }, - { "expr": "rate(container_cpu_usage_seconds_total{name=~\".*brouter.*\"}[5m]) * 100", "legendFormat": "CPU %" } - ], - "fieldConfig": { "defaults": { "unit": "bytes" } } - }, - { - "title": "Caddy — Request Rate by Host", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 56 }, - "targets": [ - { "expr": "sum(rate(caddy_http_requests_total[5m])) by (server)", "legendFormat": "{{server}}" } - ] - }, - { - "title": "Caddy — Response Status Codes", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 56 }, - "targets": [ - { "expr": "sum(rate(caddy_http_responses_total[5m])) by (code)", "legendFormat": "{{code}}" } - ] - }, - { - "title": "Caddy — Request Duration by Host", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 64 }, - "targets": [ - { "expr": "histogram_quantile(0.95, sum(rate(caddy_http_request_duration_seconds_bucket[5m])) by (le, server))", "legendFormat": "p95 {{server}}" } - ], - "fieldConfig": { "defaults": { "unit": "s" } } - }, - { - "title": "Caddy — Active Connections", - "type": "timeseries", - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 64 }, - "targets": [ - { "expr": "caddy_http_requests_in_flight", "legendFormat": "in-flight" } - ] + "targets": [ + { + "expr": "pg_database_size_bytes{datname=\"trails\"}", + "legendFormat": "trails" + } + ], + "fieldConfig": { + "defaults": { + "unit": "bytes" + } } - ] - } + }, + { + "title": "PostgreSQL \u2014 Transactions/sec", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 0 + }, + "targets": [ + { + "expr": "rate(pg_stat_database_xact_commit{datname=\"trails\"}[5m])", + "legendFormat": "commits/s" + }, + { + "expr": "rate(pg_stat_database_xact_rollback{datname=\"trails\"}[5m])", + "legendFormat": "rollbacks/s" + } + ] + }, + { + "title": "PostgreSQL \u2014 Slowest Queries (pg_stat_statements)", + "type": "table", + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 8 + }, + "targets": [ + { + "expr": "topk(10, pg_stat_statements_mean_time_seconds{datname=\"trails\"})", + "legendFormat": "{{query}}", + "format": "table", + "instant": true + } + ] + }, + { + "title": "PostgreSQL \u2014 Cache Hit Ratio", + "type": "gauge", + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 16 + }, + "targets": [ + { + "expr": "pg_stat_database_blks_hit{datname=\"trails\"} / (pg_stat_database_blks_hit{datname=\"trails\"} + pg_stat_database_blks_read{datname=\"trails\"}) * 100", + "legendFormat": "hit %" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percent", + "min": 0, + "max": 100, + "thresholds": { + "steps": [ + { + "color": "red", + "value": null + }, + { + "color": "yellow", + "value": 90 + }, + { + "color": "green", + "value": 99 + } + ] + } + } + } + }, + { + "title": "PostgreSQL \u2014 Index Scans vs Sequential Scans", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 18, + "x": 6, + "y": 16 + }, + "targets": [ + { + "expr": "sum(rate(pg_stat_user_tables_idx_scan[5m]))", + "legendFormat": "Index scans/s" + }, + { + "expr": "sum(rate(pg_stat_user_tables_seq_scan[5m]))", + "legendFormat": "Sequential scans/s" + } + ] + }, + { + "title": "Host \u2014 Disk Usage", + "type": "gauge", + "gridPos": { + "h": 8, + "w": 8, + "x": 0, + "y": 24 + }, + "targets": [ + { + "expr": "(1 - node_filesystem_avail_bytes{mountpoint=\"/\"} / node_filesystem_size_bytes{mountpoint=\"/\"}) * 100", + "legendFormat": "Used %" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percent", + "min": 0, + "max": 100, + "thresholds": { + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 70 + }, + { + "color": "red", + "value": 85 + } + ] + } + } + } + }, + { + "title": "Host \u2014 CPU Usage", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 8, + "x": 8, + "y": 24 + }, + "targets": [ + { + "expr": "100 - (avg(rate(node_cpu_seconds_total{mode=\"idle\"}[5m])) * 100)", + "legendFormat": "CPU %" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percent", + "max": 100 + } + } + }, + { + "title": "Host \u2014 Memory Usage", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 8, + "x": 16, + "y": 24 + }, + "targets": [ + { + "expr": "node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes", + "legendFormat": "Used" + }, + { + "expr": "node_memory_MemAvailable_bytes", + "legendFormat": "Available" + } + ], + "fieldConfig": { + "defaults": { + "unit": "bytes" + } + } + }, + { + "title": "Host \u2014 Network I/O", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 32 + }, + "targets": [ + { + "expr": "rate(node_network_receive_bytes_total{device!~\"lo|veth.*|br.*|docker.*\"}[5m])", + "legendFormat": "{{device}} rx" + }, + { + "expr": "-rate(node_network_transmit_bytes_total{device!~\"lo|veth.*|br.*|docker.*\"}[5m])", + "legendFormat": "{{device}} tx" + } + ], + "fieldConfig": { + "defaults": { + "unit": "Bps" + } + } + }, + { + "title": "Host \u2014 Disk I/O", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 32 + }, + "targets": [ + { + "expr": "rate(node_disk_read_bytes_total[5m])", + "legendFormat": "{{device}} read" + }, + { + "expr": "-rate(node_disk_written_bytes_total[5m])", + "legendFormat": "{{device}} write" + } + ], + "fieldConfig": { + "defaults": { + "unit": "Bps" + } + } + }, + { + "title": "BRouter \u2014 Request Latency (from Planner proxy)", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 40 + }, + "targets": [ + { + "expr": "histogram_quantile(0.50, rate(brouter_request_duration_seconds_bucket[5m]))", + "legendFormat": "p50" + }, + { + "expr": "histogram_quantile(0.95, rate(brouter_request_duration_seconds_bucket[5m]))", + "legendFormat": "p95" + }, + { + "expr": "histogram_quantile(0.99, rate(brouter_request_duration_seconds_bucket[5m]))", + "legendFormat": "p99" + } + ], + "fieldConfig": { + "defaults": { + "unit": "s" + } + } + }, + { + "title": "Container \u2014 CPU Usage (all containers)", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 40 + }, + "targets": [ + { + "expr": "rate(container_cpu_usage_seconds_total{name=~\"trails-cool.*\"}[5m]) * 100", + "legendFormat": "{{name}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "percent" + } + } + }, + { + "title": "Container \u2014 Memory Usage (all containers)", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 48 + }, + "targets": [ + { + "expr": "container_memory_usage_bytes{name=~\"trails-cool.*\"}", + "legendFormat": "{{name}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "bytes" + } + } + }, + { + "title": "BRouter \u2014 Container Resources", + "type": "stat", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 48 + }, + "targets": [ + { + "expr": "container_memory_usage_bytes{name=~\".*brouter.*\"}", + "legendFormat": "Memory" + }, + { + "expr": "rate(container_cpu_usage_seconds_total{name=~\".*brouter.*\"}[5m]) * 100", + "legendFormat": "CPU %" + } + ], + "fieldConfig": { + "defaults": { + "unit": "bytes" + } + } + }, + { + "title": "Caddy \u2014 Request Rate by Host", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 56 + }, + "targets": [ + { + "expr": "sum(rate(caddy_http_requests_total[5m])) by (server)", + "legendFormat": "{{server}}" + } + ] + }, + { + "title": "Caddy \u2014 Response Status Codes", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 56 + }, + "targets": [ + { + "expr": "sum(rate(caddy_http_responses_total[5m])) by (code)", + "legendFormat": "{{code}}" + } + ] + }, + { + "title": "Caddy \u2014 Request Duration by Host", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 64 + }, + "targets": [ + { + "expr": "histogram_quantile(0.95, sum(rate(caddy_http_request_duration_seconds_bucket[5m])) by (le, server))", + "legendFormat": "p95 {{server}}" + } + ], + "fieldConfig": { + "defaults": { + "unit": "s" + } + } + }, + { + "title": "Caddy \u2014 Active Connections", + "type": "timeseries", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 64 + }, + "targets": [ + { + "expr": "caddy_http_requests_in_flight", + "legendFormat": "in-flight" + } + ] + } + ] } From 3b6aede461e83abe1b702feef14e93fbec2a28ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 22:20:14 +0200 Subject: [PATCH 021/723] Fix error-rate-high alert firing on no data The alert was firing with DatasourceNoData because zero 5xx responses means the numerator returns empty (not 0). Fixed by: - Adding `or vector(0)` so zero 5xx returns 0% instead of empty - Setting `noDataState: OK` as a safety net Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/grafana/provisioning/alerting/alerts.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/infrastructure/grafana/provisioning/alerting/alerts.yml b/infrastructure/grafana/provisioning/alerting/alerts.yml index 42594e5..e758b25 100644 --- a/infrastructure/grafana/provisioning/alerting/alerts.yml +++ b/infrastructure/grafana/provisioning/alerting/alerts.yml @@ -55,12 +55,13 @@ groups: - uid: error-rate-high title: Error rate > 5% condition: B + noDataState: OK data: - refId: A relativeTimeRange: { from: 600, to: 0 } datasourceUid: prometheus model: - expr: sum(rate(http_request_duration_seconds_count{status=~"5.."}[5m])) / clamp_min(sum(rate(http_request_duration_seconds_count[5m])), 0.001) * 100 + expr: (sum(rate(http_request_duration_seconds_count{status=~"5.."}[5m])) or vector(0)) / clamp_min(sum(rate(http_request_duration_seconds_count[5m])), 0.001) * 100 instant: true - refId: B datasourceUid: __expr__ From 8eb34818317ba7b834642440d423210b9539d9ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 22:32:30 +0200 Subject: [PATCH 022/723] Harden SSH: disable passwords, forwarding, add keepalive Add SSH hardening to user_data for future server rebuilds: - PasswordAuthentication no (key-only access) - X11Forwarding no (headless server) - AllowTcpForwarding no (no SSH tunnels needed) - AllowAgentForwarding no (no agent forwarding needed) - MaxAuthTries 3 (reduced from 6) - ClientAliveInterval 300 + ClientAliveCountMax 2 (clean up dead sessions) Already applied manually to the existing server via /etc/ssh/sshd_config.d/99-hardening.conf. Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/terraform/main.tf | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/infrastructure/terraform/main.tf b/infrastructure/terraform/main.tf index 81b770b..98cb828 100644 --- a/infrastructure/terraform/main.tf +++ b/infrastructure/terraform/main.tf @@ -41,6 +41,18 @@ resource "hcloud_server" "trails" { # Create app directory mkdir -p /opt/trails-cool + + # Harden SSH + cat > /etc/ssh/sshd_config.d/99-hardening.conf <<'SSHD' + PasswordAuthentication no + X11Forwarding no + AllowTcpForwarding no + AllowAgentForwarding no + MaxAuthTries 3 + ClientAliveInterval 300 + ClientAliveCountMax 2 + SSHD + systemctl reload ssh EOF } From 7e253caf643fc4f967775afa2113663f30005284 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 22:41:51 +0200 Subject: [PATCH 023/723] Archive account-settings change, sync specs All 37 tasks complete. Synced delta specs to main: - New: openspec/specs/account-settings/ - Updated: openspec/specs/journal-auth/ Co-Authored-By: Claude Opus 4.6 (1M context) --- openspec/changes/account-settings/tasks.md | 63 --------- .../.openspec.yaml | 0 .../2026-03-29-account-settings}/design.md | 0 .../2026-03-29-account-settings}/proposal.md | 0 .../specs/account-settings/spec.md | 0 .../specs/journal-auth/spec.md | 0 .../2026-03-29-account-settings/tasks.md | 63 +++++++++ openspec/specs/account-settings/spec.md | 83 +++++++++++ openspec/specs/journal-auth/spec.md | 131 ++---------------- 9 files changed, 161 insertions(+), 179 deletions(-) delete mode 100644 openspec/changes/account-settings/tasks.md rename openspec/changes/{account-settings => archive/2026-03-29-account-settings}/.openspec.yaml (100%) rename openspec/changes/{account-settings => archive/2026-03-29-account-settings}/design.md (100%) rename openspec/changes/{account-settings => archive/2026-03-29-account-settings}/proposal.md (100%) rename openspec/changes/{account-settings => archive/2026-03-29-account-settings}/specs/account-settings/spec.md (100%) rename openspec/changes/{account-settings => archive/2026-03-29-account-settings}/specs/journal-auth/spec.md (100%) create mode 100644 openspec/changes/archive/2026-03-29-account-settings/tasks.md create mode 100644 openspec/specs/account-settings/spec.md diff --git a/openspec/changes/account-settings/tasks.md b/openspec/changes/account-settings/tasks.md deleted file mode 100644 index f685b36..0000000 --- a/openspec/changes/account-settings/tasks.md +++ /dev/null @@ -1,63 +0,0 @@ -## 1. Settings Route & Layout - -- [ ] 1.1 Create `apps/journal/app/routes/settings.tsx` with loader auth guard (redirect to `/auth/login` if unauthenticated) -- [ ] 1.2 Register route in `apps/journal/app/routes.ts` -- [ ] 1.3 Layout with three sections: Profile, Security, Account (anchor links for navigation) - -## 2. Profile Section - -- [ ] 2.1 Display name and bio form fields, pre-filled from current user data -- [ ] 2.2 Create `POST /api/settings/profile` action to update display name and bio -- [ ] 2.3 Register API route in `routes.ts` -- [ ] 2.4 Success/error feedback on save - -## 3. Security Section — Passkey Management - -- [ ] 3.1 Load user's credentials in settings loader (device type, transports, createdAt) -- [ ] 3.2 Render passkey list with friendly transport labels and registration date -- [ ] 3.3 Add passkey button using existing `addPasskeyStart`/`addPasskeyFinish` flow, hidden when WebAuthn unsupported -- [ ] 3.4 Create `POST /api/settings/passkey/delete` action to remove a credential by ID -- [ ] 3.5 Register API route in `routes.ts` -- [ ] 3.6 Delete confirmation dialog, with last-passkey warning when applicable - -## 4. Account Section — Email Change - -- [ ] 4.1 Email display with "Change" button revealing input for new email -- [ ] 4.2 Create `initiateEmailChange(userId, newEmail)` in auth.server.ts — generates magic token with `newEmail` metadata -- [ ] 4.3 Create `POST /api/settings/email` action to initiate email change -- [ ] 4.4 Register API route in `routes.ts` -- [ ] 4.5 Update `verifyMagicToken` to handle email-change tokens (update user email) -- [ ] 4.6 Send verification email to new address using existing email templates - -## 5. Account Section — Deletion - -- [ ] 5.1 "Delete account" danger button at bottom of settings page -- [ ] 5.2 Confirmation modal requiring username input to proceed -- [ ] 5.3 Create `POST /api/settings/delete-account` action — cascading delete, destroy session, redirect to home -- [ ] 5.4 Register API route in `routes.ts` - -## 6. Navigation - -- [ ] 6.1 Add "Settings" link to Journal nav for authenticated users -- [ ] 6.2 Move passkey count display from home page to settings security section - -## 7. i18n - -- [ ] 7.1 Add translation keys for all settings UI text (en + de) - -## 8. Testing - -### Unit tests (Vitest) -- [ ] 8.1 Profile update: valid input saves, empty display name falls back to username -- [ ] 8.2 Passkey delete: removes credential, rejects invalid credential ID, allows deleting last passkey -- [ ] 8.3 Email change: creates token for new email, rejects duplicate email, rejects same-as-current email -- [ ] 8.4 Account deletion: cascading delete removes user + credentials + tokens, destroys session - -### E2E tests (Playwright) -- [ ] 8.5 Auth guard: unauthenticated user visiting `/settings` is redirected to `/auth/login` -- [ ] 8.6 Profile editing: log in, navigate to settings, update display name and bio, verify changes persist after reload, verify public profile reflects changes -- [ ] 8.7 Passkey management: log in, navigate to security section, add passkey (virtual WebAuthn authenticator), verify it appears in list, delete it, verify removed -- [ ] 8.8 Delete last passkey: delete only passkey, verify warning modal appears, confirm deletion, verify magic link login still works -- [ ] 8.9 Email change: initiate email change, follow verification link (dev mode), verify email updated in settings -- [ ] 8.10 Account deletion: click delete, type wrong username (verify blocked), type correct username, confirm, verify redirected to home and session destroyed -- [ ] 8.11 Navigation: verify "Settings" link appears in nav when logged in, not visible when logged out diff --git a/openspec/changes/account-settings/.openspec.yaml b/openspec/changes/archive/2026-03-29-account-settings/.openspec.yaml similarity index 100% rename from openspec/changes/account-settings/.openspec.yaml rename to openspec/changes/archive/2026-03-29-account-settings/.openspec.yaml diff --git a/openspec/changes/account-settings/design.md b/openspec/changes/archive/2026-03-29-account-settings/design.md similarity index 100% rename from openspec/changes/account-settings/design.md rename to openspec/changes/archive/2026-03-29-account-settings/design.md diff --git a/openspec/changes/account-settings/proposal.md b/openspec/changes/archive/2026-03-29-account-settings/proposal.md similarity index 100% rename from openspec/changes/account-settings/proposal.md rename to openspec/changes/archive/2026-03-29-account-settings/proposal.md diff --git a/openspec/changes/account-settings/specs/account-settings/spec.md b/openspec/changes/archive/2026-03-29-account-settings/specs/account-settings/spec.md similarity index 100% rename from openspec/changes/account-settings/specs/account-settings/spec.md rename to openspec/changes/archive/2026-03-29-account-settings/specs/account-settings/spec.md diff --git a/openspec/changes/account-settings/specs/journal-auth/spec.md b/openspec/changes/archive/2026-03-29-account-settings/specs/journal-auth/spec.md similarity index 100% rename from openspec/changes/account-settings/specs/journal-auth/spec.md rename to openspec/changes/archive/2026-03-29-account-settings/specs/journal-auth/spec.md diff --git a/openspec/changes/archive/2026-03-29-account-settings/tasks.md b/openspec/changes/archive/2026-03-29-account-settings/tasks.md new file mode 100644 index 0000000..ca5ff52 --- /dev/null +++ b/openspec/changes/archive/2026-03-29-account-settings/tasks.md @@ -0,0 +1,63 @@ +## 1. Settings Route & Layout + +- [x] 1.1 Create `apps/journal/app/routes/settings.tsx` with loader auth guard (redirect to `/auth/login` if unauthenticated) +- [x] 1.2 Register route in `apps/journal/app/routes.ts` +- [x] 1.3 Layout with three sections: Profile, Security, Account (anchor links for navigation) + +## 2. Profile Section + +- [x] 2.1 Display name and bio form fields, pre-filled from current user data +- [x] 2.2 Create `POST /api/settings/profile` action to update display name and bio +- [x] 2.3 Register API route in `routes.ts` +- [x] 2.4 Success/error feedback on save + +## 3. Security Section — Passkey Management + +- [x] 3.1 Load user's credentials in settings loader (device type, transports, createdAt) +- [x] 3.2 Render passkey list with friendly transport labels and registration date +- [x] 3.3 Add passkey button using existing `addPasskeyStart`/`addPasskeyFinish` flow, hidden when WebAuthn unsupported +- [x] 3.4 Create `POST /api/settings/passkey/delete` action to remove a credential by ID +- [x] 3.5 Register API route in `routes.ts` +- [x] 3.6 Delete confirmation dialog, with last-passkey warning when applicable + +## 4. Account Section — Email Change + +- [x] 4.1 Email display with "Change" button revealing input for new email +- [x] 4.2 Create `initiateEmailChange(userId, newEmail)` in auth.server.ts — generates magic token with `newEmail` metadata +- [x] 4.3 Create `POST /api/settings/email` action to initiate email change +- [x] 4.4 Register API route in `routes.ts` +- [x] 4.5 Update `verifyMagicToken` to handle email-change tokens (update user email) +- [x] 4.6 Send verification email to new address using existing email templates + +## 5. Account Section — Deletion + +- [x] 5.1 "Delete account" danger button at bottom of settings page +- [x] 5.2 Confirmation modal requiring username input to proceed +- [x] 5.3 Create `POST /api/settings/delete-account` action — cascading delete, destroy session, redirect to home +- [x] 5.4 Register API route in `routes.ts` + +## 6. Navigation + +- [x] 6.1 Add "Settings" link to Journal nav for authenticated users +- [x] 6.2 Move passkey count display from home page to settings security section + +## 7. i18n + +- [x] 7.1 Add translation keys for all settings UI text (en + de) + +## 8. Testing + +### Unit tests (Vitest) +- [x] 8.1 Profile update: valid input saves, empty display name falls back to username +- [x] 8.2 Passkey delete: removes credential, rejects invalid credential ID, allows deleting last passkey +- [x] 8.3 Email change: creates token for new email, rejects duplicate email, rejects same-as-current email +- [x] 8.4 Account deletion: cascading delete removes user + credentials + tokens, destroys session + +### E2E tests (Playwright) +- [x] 8.5 Auth guard: unauthenticated user visiting `/settings` is redirected to `/auth/login` +- [x] 8.6 Profile editing: log in, navigate to settings, update display name and bio, verify changes persist after reload, verify public profile reflects changes +- [x] 8.7 Passkey management: log in, navigate to security section, add passkey (virtual WebAuthn authenticator), verify it appears in list, delete it, verify removed +- [x] 8.8 Delete last passkey: delete only passkey, verify warning modal appears, confirm deletion, verify magic link login still works +- [x] 8.9 Email change: initiate email change, follow verification link (dev mode), verify email updated in settings +- [x] 8.10 Account deletion: click delete, type wrong username (verify blocked), type correct username, confirm, verify redirected to home and session destroyed +- [x] 8.11 Navigation: verify "Settings" link appears in nav when logged in, not visible when logged out diff --git a/openspec/specs/account-settings/spec.md b/openspec/specs/account-settings/spec.md new file mode 100644 index 0000000..67a3e32 --- /dev/null +++ b/openspec/specs/account-settings/spec.md @@ -0,0 +1,83 @@ +## ADDED Requirements + +### Requirement: Settings page access +The Journal SHALL provide an account settings page at `/settings` accessible to authenticated users. + +#### Scenario: Authenticated access +- **WHEN** a logged-in user navigates to `/settings` +- **THEN** the settings page is displayed with profile, security, and account sections + +#### Scenario: Unauthenticated access +- **WHEN** an unauthenticated user navigates to `/settings` +- **THEN** they are redirected to `/auth/login` + +### Requirement: Profile editing +The settings page SHALL allow users to edit their display name and bio. + +#### Scenario: Update display name +- **WHEN** a user changes their display name and submits +- **THEN** the display name is updated and reflected on their public profile + +#### Scenario: Update bio +- **WHEN** a user enters a bio (max 160 characters) and submits +- **THEN** the bio is saved and visible on their public profile + +#### Scenario: Empty fields +- **WHEN** a user clears their display name +- **THEN** their username is used as the display name fallback + +### Requirement: Passkey management +The settings page SHALL list all registered passkeys and allow adding or deleting them. + +#### Scenario: View passkeys +- **WHEN** a user visits the security section +- **THEN** they see a list of their passkeys with device type, transport label, and registration date + +#### Scenario: Add passkey +- **WHEN** a user clicks "Add passkey" on a browser that supports WebAuthn +- **THEN** the browser passkey creation prompt appears and the new passkey is added to the list + +#### Scenario: Add passkey unsupported browser +- **WHEN** a user visits the security section on a browser without WebAuthn +- **THEN** the "Add passkey" button is disabled with a message explaining the browser limitation + +#### Scenario: Delete passkey +- **WHEN** a user clicks delete on a passkey and confirms +- **THEN** the passkey is removed and can no longer be used for login + +#### Scenario: Delete last passkey +- **WHEN** a user deletes their only passkey +- **THEN** a warning is shown that they will need to use magic links to sign in, and the deletion proceeds after confirmation + +### Requirement: Email change +The settings page SHALL allow users to change their email address with verification. + +#### Scenario: Initiate email change +- **WHEN** a user enters a new email and submits +- **THEN** a verification link is sent to the new email address + +#### Scenario: Verify new email +- **WHEN** the user clicks the verification link +- **THEN** their email is updated to the new address + +#### Scenario: Duplicate email +- **WHEN** a user enters an email already in use by another account +- **THEN** an error is shown indicating the email is taken + +### Requirement: Account deletion +The settings page SHALL allow users to permanently delete their account. + +#### Scenario: Delete account +- **WHEN** a user clicks "Delete account" and types their username to confirm +- **THEN** their account and all associated data are permanently deleted and they are logged out + +#### Scenario: Cancel deletion +- **WHEN** a user opens the delete confirmation but does not confirm +- **THEN** no data is deleted and they remain on the settings page + +### Requirement: Settings navigation +The Journal navigation SHALL include a link to the settings page for authenticated users. + +#### Scenario: Settings link visible +- **WHEN** a logged-in user views the navigation +- **THEN** a "Settings" link is present that navigates to `/settings` diff --git a/openspec/specs/journal-auth/spec.md b/openspec/specs/journal-auth/spec.md index 846484e..a088b87 100644 --- a/openspec/specs/journal-auth/spec.md +++ b/openspec/specs/journal-auth/spec.md @@ -1,130 +1,29 @@ -## ADDED Requirements - -### Requirement: Passkey registration -The Journal SHALL allow new users to register using a passkey (WebAuthn) when the browser supports it. No password is required. - -#### Scenario: Successful passkey registration -- **WHEN** a user enters an email and username and creates a passkey via the browser prompt -- **THEN** a new user account is created, the passkey credential is stored, and the user is logged in - -#### Scenario: Duplicate email -- **WHEN** a user submits an email that is already registered -- **THEN** the system displays an error indicating the email is already in use - -#### Scenario: Duplicate username -- **WHEN** a user submits a username that is already taken -- **THEN** the system displays an error indicating the username is not available - -### Requirement: Magic link registration (fallback) -The Journal SHALL allow new users to register via magic link when the browser does not support passkeys. The user can add a passkey later from a supported browser. - -#### Scenario: Register without passkey support -- **WHEN** a user's browser does not support WebAuthn -- **THEN** the registration page shows a "Register with Magic Link" button instead of the passkey button - -#### Scenario: Successful magic link registration -- **WHEN** a user submits email and username via magic link registration -- **THEN** a new user account is created without a credential, a verification email is sent, and the user is redirected to verify their email - -#### Scenario: Magic link verify redirects to add-passkey -- **WHEN** a user clicks the verification link from magic link registration -- **THEN** they are logged in and redirected to the home page with the add-passkey prompt - -### Requirement: Passkey login -The Journal SHALL allow returning users to log in using a stored passkey when the browser supports WebAuthn. - -#### Scenario: Successful passkey login -- **WHEN** a user clicks "Sign in" and selects a passkey from the browser prompt -- **THEN** the user is authenticated and redirected to their activity feed - -#### Scenario: No passkey available -- **WHEN** a user has no passkey on the current device -- **THEN** the system offers magic link login as a fallback - -#### Scenario: Browser without WebAuthn support -- **WHEN** a user's browser does not support WebAuthn -- **THEN** the login page shows only the magic link option with no passkey button - -### Requirement: Magic link login (fallback) -The Journal SHALL allow users to log in via a magic link sent to their email. This serves as a fallback for devices without passkey support or for logging in on a new device. - -#### Scenario: Request magic link -- **WHEN** a user enters their email and clicks "Send magic link" -- **THEN** an email with a single-use login link is sent to their address - -#### Scenario: Valid magic link -- **WHEN** a user clicks a valid, non-expired magic link -- **THEN** the user is logged in and the link is invalidated - -#### Scenario: Expired magic link -- **WHEN** a user clicks a magic link older than 15 minutes -- **THEN** the system displays an error and prompts them to request a new link - -#### Scenario: Rate limiting -- **WHEN** a user requests more than 5 magic links in 10 minutes -- **THEN** subsequent requests are rejected with a rate limit message +## MODIFIED Requirements ### Requirement: Add passkey from new device -The Journal SHALL allow logged-in users to register additional passkeys for new devices. +The Journal SHALL allow logged-in users to register additional passkeys from the account settings page or via the post-login prompt. #### Scenario: Add passkey after magic link login - **WHEN** a user logs in via magic link on a device that supports WebAuthn - **THEN** the system prompts them to register a passkey for that device +#### Scenario: Add passkey from settings +- **WHEN** a user clicks "Add passkey" in the security section of account settings +- **THEN** the browser passkey creation prompt appears and the new passkey is stored + #### Scenario: Add passkey prompt on unsupported browser - **WHEN** a user logs in via magic link on a device that does not support WebAuthn - **THEN** the system shows the add-passkey prompt with a message that the browser does not support passkeys -### Requirement: Passkey status display -The Journal home page SHALL show the user how many passkeys they have registered. +## ADDED Requirements -#### Scenario: User with passkeys -- **WHEN** a logged-in user visits the home page and has one or more passkeys -- **THEN** the page displays the passkey count (e.g., "2 passkeys registered") +### Requirement: Delete passkey +The Journal SHALL allow users to delete individual passkeys from account settings. -### Requirement: User profile page -Each user SHALL have a public profile page displaying their username and routes. +#### Scenario: Delete passkey +- **WHEN** a user deletes a passkey from account settings +- **THEN** the credential is removed from the database and can no longer be used for authentication -#### Scenario: View own profile -- **WHEN** a logged-in user navigates to their profile -- **THEN** they see their username, bio, and a list of their routes - -#### Scenario: View other user's profile -- **WHEN** a user navigates to another user's profile URL -- **THEN** they see that user's username, bio, and public routes - -### Requirement: Federated identity structure -User accounts SHALL follow the federated identity pattern (`@user@instance`) to prepare for ActivityPub federation in Phase 2. - -#### Scenario: Username format -- **WHEN** a user registers with username "alice" on trails.cool -- **THEN** their full identity is stored as `@alice@trails.cool` - -### Requirement: Session management -The Journal SHALL maintain authenticated sessions using secure HTTP-only cookies. - -#### Scenario: Session persistence -- **WHEN** a logged-in user closes and reopens their browser -- **THEN** they remain logged in if the session has not expired - -#### Scenario: Logout -- **WHEN** a user clicks "Log out" -- **THEN** their session is invalidated and they are redirected to the login page - -### Requirement: No passwords -The Journal SHALL NOT support password-based authentication. All authentication is via passkeys or magic links. - -#### Scenario: No password field -- **WHEN** a user views the registration or login page -- **THEN** there is no password field - -### Requirement: Magic link login -The magic link login flow SHALL deliver the link via email in production instead of logging to console. - -#### Scenario: Production email delivery -- **WHEN** a user requests a magic link in production -- **THEN** the link is emailed to the user (not just logged to console) - -#### Scenario: Dev mode unchanged -- **WHEN** a user requests a magic link in development -- **THEN** the link is returned directly for auto-redirect (existing behavior preserved) +#### Scenario: Delete last passkey warning +- **WHEN** a user attempts to delete their only remaining passkey +- **THEN** a warning is shown explaining they will need to use magic links, and deletion proceeds after confirmation From 836e0a2b6a394bfa90c51bad53ff4f4e33daf5f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 22:48:11 +0200 Subject: [PATCH 024/723] Expand BRouter routing coverage to all of Europe Add ~67 segment tiles covering W10-E40, N35-N70 (was 4 Germany-only tiles). Total disk usage ~2.9 GB. Tiles that don't exist on the BRouter CDN are silently skipped. Already downloaded to the server and BRouter restarted. Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/cd-brouter.yml | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/.github/workflows/cd-brouter.yml b/.github/workflows/cd-brouter.yml index 3efef07..bc2452f 100644 --- a/.github/workflows/cd-brouter.yml +++ b/.github/workflows/cd-brouter.yml @@ -51,15 +51,26 @@ jobs: script: | cd /opt/trails-cool - # Download BRouter segments if missing - if [ ! -d /opt/trails-cool/segments ] || [ -z "$(ls /opt/trails-cool/segments/*.rd5 2>/dev/null)" ]; then - mkdir -p /opt/trails-cool/segments - echo "Downloading Germany BRouter segments..." - for tile in E5_N45 E5_N50 E10_N45 E10_N50; do - [ -f "/opt/trails-cool/segments/${tile}.rd5" ] || \ - wget -q "https://brouter.de/brouter/segments4/${tile}.rd5" -O "/opt/trails-cool/segments/${tile}.rd5" - done - fi + # Download BRouter segments for Europe (W10-E40, N35-N70) + mkdir -p /opt/trails-cool/segments + EUROPE_TILES=" + W10_N50 W10_N55 W10_N60 W10_N65 + W5_N35 W5_N40 W5_N45 W5_N50 W5_N55 W5_N60 W5_N65 + E0_N35 E0_N40 E0_N45 E0_N50 E0_N55 E0_N60 E0_N65 E0_N70 + E5_N35 E5_N40 E5_N45 E5_N50 E5_N55 E5_N60 E5_N65 E5_N70 + E10_N35 E10_N40 E10_N45 E10_N50 E10_N55 E10_N60 E10_N65 E10_N70 + E15_N35 E15_N40 E15_N45 E15_N50 E15_N55 E15_N60 E15_N65 E15_N70 + E20_N35 E20_N40 E20_N45 E20_N50 E20_N55 E20_N60 E20_N65 E20_N70 + E25_N35 E25_N40 E25_N45 E25_N50 E25_N55 E25_N60 E25_N65 + E30_N35 E30_N40 E30_N45 E30_N50 E30_N55 E30_N60 E30_N65 + E35_N40 E35_N45 E35_N50 E35_N55 E35_N60 + E40_N40 E40_N45 E40_N50 E40_N55 + " + for tile in $EUROPE_TILES; do + [ -f "/opt/trails-cool/segments/${tile}.rd5" ] || \ + wget -q "https://brouter.de/brouter/segments4/${tile}.rd5" -O "/opt/trails-cool/segments/${tile}.rd5" 2>/dev/null || \ + rm -f "/opt/trails-cool/segments/${tile}.rd5" + done docker pull ghcr.io/trails-cool/brouter:latest docker compose up -d brouter From acccfcc53b5d9c2c39937b941048e60a46a617eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 16:39:35 +0100 Subject: [PATCH 025/723] Enable Grafana OAuth email lookup to reuse existing users Without this, GitHub OAuth creates a new Grafana user on every login instead of linking to the existing account by email. Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/docker-compose.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/infrastructure/docker-compose.yml b/infrastructure/docker-compose.yml index c97b378..3f59adf 100644 --- a/infrastructure/docker-compose.yml +++ b/infrastructure/docker-compose.yml @@ -154,6 +154,7 @@ services: GF_AUTH_GITHUB_CLIENT_SECRET: ${GF_AUTH_GITHUB_CLIENT_SECRET:-} GF_AUTH_GITHUB_ALLOWED_ORGANIZATIONS: trails-cool GF_AUTH_GITHUB_SCOPES: user:email,read:org + GF_AUTH_OAUTH_ALLOW_INSECURE_EMAIL_LOOKUP: "true" GF_AUTH_DISABLE_LOGIN_FORM: "true" GF_SMTP_ENABLED: "true" GF_SMTP_HOST: ${GF_SMTP_HOST:-} From b4c3f97296f9c4cf886e6cfd55c1b114e452f697 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 17:05:02 +0100 Subject: [PATCH 026/723] Populate PostGIS geom column from GPX track data Extract coordinates from parsed GPX tracks and store as PostGIS LineString geometry via ST_GeomFromGeoJSON. Applied to: - createRoute / updateRoute (routes.server.ts) - createActivity / createRouteFromActivity (activities.server.ts) Adds lineStringFromCoords() helper to the journal schema that builds the SQL expression from [lon, lat] coordinate pairs. Unblocks spatial queries (e.g. route discovery via ST_Intersects). Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/lib/activities.server.ts | 20 +++++++++++++++++++- apps/journal/app/lib/routes.server.ts | 11 +++++++++-- packages/db/src/schema/journal.ts | 18 +++++++++++++++++- 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/apps/journal/app/lib/activities.server.ts b/apps/journal/app/lib/activities.server.ts index e51c7b4..ecb9b1a 100644 --- a/apps/journal/app/lib/activities.server.ts +++ b/apps/journal/app/lib/activities.server.ts @@ -1,8 +1,9 @@ import { randomUUID } from "node:crypto"; import { eq, desc } from "drizzle-orm"; import { getDb } from "./db.ts"; -import { activities, routes } from "@trails-cool/db/schema/journal"; +import { activities, routes, lineStringFromCoords } from "@trails-cool/db/schema/journal"; import { parseGpxAsync } from "@trails-cool/gpx"; +import type { SQL } from "drizzle-orm"; export interface ActivityInput { name: string; @@ -19,6 +20,7 @@ export async function createActivity(ownerId: string, input: ActivityInput) { let elevationGain: number | null = null; let elevationLoss: number | null = null; let startedAt: Date | null = null; + let geom: SQL | null = null; if (input.gpx) { try { @@ -28,6 +30,9 @@ export async function createActivity(ownerId: string, input: ActivityInput) { elevationGain = gpxData.elevation.gain; elevationLoss = gpxData.elevation.loss; + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + if (coords.length >= 2) geom = lineStringFromCoords(coords); + // Try to extract start time from first track point if (gpxData.tracks[0]?.[0]?.time) { startedAt = new Date(gpxData.tracks[0][0].time); @@ -48,6 +53,7 @@ export async function createActivity(ownerId: string, input: ActivityInput) { elevationGain, elevationLoss, startedAt, + geom, }); return id; @@ -82,6 +88,17 @@ export async function createRouteFromActivity(activityId: string, ownerId: strin if (!activity?.gpx) return null; const routeId = randomUUID(); + let routeGeom: SQL | null = null; + if (activity.gpx) { + try { + const gpxData = await parseGpxAsync(activity.gpx); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + if (coords.length >= 2) routeGeom = lineStringFromCoords(coords); + } catch { + // Continue without geom + } + } + await db.insert(routes).values({ id: routeId, ownerId, @@ -91,6 +108,7 @@ export async function createRouteFromActivity(activityId: string, ownerId: strin distance: activity.distance, elevationGain: activity.elevationGain, elevationLoss: activity.elevationLoss, + geom: routeGeom, }); // Link the activity to the new route diff --git a/apps/journal/app/lib/routes.server.ts b/apps/journal/app/lib/routes.server.ts index 1d36af3..2b0efe4 100644 --- a/apps/journal/app/lib/routes.server.ts +++ b/apps/journal/app/lib/routes.server.ts @@ -1,8 +1,9 @@ import { randomUUID } from "node:crypto"; import { eq, desc, and } from "drizzle-orm"; import { getDb } from "./db.ts"; -import { routes, routeVersions } from "@trails-cool/db/schema/journal"; +import { routes, routeVersions, lineStringFromCoords } from "@trails-cool/db/schema/journal"; import { parseGpx } from "@trails-cool/gpx"; +import type { SQL } from "drizzle-orm"; export interface RouteInput { name: string; @@ -18,12 +19,14 @@ export async function createRoute(ownerId: string, input: RouteInput) { let distance: number | null = null; let elevationGain: number | null = null; let elevationLoss: number | null = null; + let geom: SQL | null = null; if (input.gpx) { const stats = computeRouteStats(input.gpx); distance = stats.distance; elevationGain = stats.elevationGain; elevationLoss = stats.elevationLoss; + geom = stats.geom; } await db.insert(routes).values({ @@ -36,6 +39,7 @@ export async function createRoute(ownerId: string, input: RouteInput) { distance, elevationGain, elevationLoss, + geom, }); // Create initial version if GPX provided @@ -99,6 +103,7 @@ export async function updateRoute( updateData.distance = stats.distance; updateData.elevationGain = stats.elevationGain; updateData.elevationLoss = stats.elevationLoss; + updateData.geom = stats.geom; // Get next version number const existingVersions = await db @@ -136,6 +141,7 @@ export async function deleteRoute(id: string, ownerId: string) { function computeRouteStats(gpxString: string) { try { const gpxData = parseGpx(gpxString); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); return { distance: Math.round( gpxData.elevation.profile.length > 0 @@ -144,8 +150,9 @@ function computeRouteStats(gpxString: string) { ), elevationGain: gpxData.elevation.gain, elevationLoss: gpxData.elevation.loss, + geom: coords.length >= 2 ? lineStringFromCoords(coords) : null, }; } catch { - return { distance: null, elevationGain: null, elevationLoss: null }; + return { distance: null, elevationGain: null, elevationLoss: null, geom: null }; } } diff --git a/packages/db/src/schema/journal.ts b/packages/db/src/schema/journal.ts index 788dcad..0454d2d 100644 --- a/packages/db/src/schema/journal.ts +++ b/packages/db/src/schema/journal.ts @@ -7,6 +7,7 @@ import { jsonb, customType, } from "drizzle-orm/pg-core"; +import { sql, type SQL } from "drizzle-orm"; const bytea = customType<{ data: Buffer }>({ dataType() { @@ -14,12 +15,27 @@ const bytea = customType<{ data: Buffer }>({ }, }); -const lineString = customType<{ data: string }>({ +const lineString = customType<{ data: string | SQL }>({ dataType() { return "geometry(LineString, 4326)"; }, + toDriver(value) { + return value; + }, }); +/** + * Build a SQL expression to create a PostGIS LineString from coordinate pairs. + * Coordinates are [lon, lat] (GeoJSON order). + */ +export function lineStringFromCoords(coords: [number, number][]): SQL { + const geojson = JSON.stringify({ + type: "LineString", + coordinates: coords, + }); + return sql`ST_GeomFromGeoJSON(${geojson})`; +} + export const journalSchema = pgSchema("journal"); export const users = journalSchema.table("users", { From 6ed828ef9c0c2dc2199edbb416273f76883a8856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 17:32:07 +0100 Subject: [PATCH 027/723] Fix PostGIS geom population: use parseGpxAsync + raw SQL MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The initial approach (#150) didn't work because: 1. routes.server.ts used parseGpx (sync, needs browser DOMParser) instead of parseGpxAsync (uses linkedom on Node.js) — GPX parsing silently failed, so stats AND geom were never populated 2. Drizzle's customType doesn't pass SQL expressions through toDriver Fixes: - Switch to parseGpxAsync for all server-side GPX parsing - Use db.execute() with raw ST_GeomFromGeoJSON SQL after insert - Remove unused lineStringFromCoords helper from schema - Share setGeomFromGpx between routes and activities - Add unit tests for GPX→GeoJSON coordinate extraction Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/lib/activities.server.ts | 28 +++------- apps/journal/app/lib/routes.server.ts | 48 ++++++++++++------ packages/db/src/schema/journal.ts | 18 +------ packages/gpx/src/geom.test.ts | 62 +++++++++++++++++++++++ 4 files changed, 104 insertions(+), 52 deletions(-) create mode 100644 packages/gpx/src/geom.test.ts diff --git a/apps/journal/app/lib/activities.server.ts b/apps/journal/app/lib/activities.server.ts index ecb9b1a..4e48b8c 100644 --- a/apps/journal/app/lib/activities.server.ts +++ b/apps/journal/app/lib/activities.server.ts @@ -1,9 +1,9 @@ import { randomUUID } from "node:crypto"; import { eq, desc } from "drizzle-orm"; import { getDb } from "./db.ts"; -import { activities, routes, lineStringFromCoords } from "@trails-cool/db/schema/journal"; +import { activities, routes } from "@trails-cool/db/schema/journal"; import { parseGpxAsync } from "@trails-cool/gpx"; -import type { SQL } from "drizzle-orm"; +import { setGeomFromGpx } from "./routes.server.ts"; export interface ActivityInput { name: string; @@ -20,8 +20,6 @@ export async function createActivity(ownerId: string, input: ActivityInput) { let elevationGain: number | null = null; let elevationLoss: number | null = null; let startedAt: Date | null = null; - let geom: SQL | null = null; - if (input.gpx) { try { const gpxData = await parseGpxAsync(input.gpx); @@ -30,9 +28,6 @@ export async function createActivity(ownerId: string, input: ActivityInput) { elevationGain = gpxData.elevation.gain; elevationLoss = gpxData.elevation.loss; - const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); - if (coords.length >= 2) geom = lineStringFromCoords(coords); - // Try to extract start time from first track point if (gpxData.tracks[0]?.[0]?.time) { startedAt = new Date(gpxData.tracks[0][0].time); @@ -53,9 +48,12 @@ export async function createActivity(ownerId: string, input: ActivityInput) { elevationGain, elevationLoss, startedAt, - geom, }); + if (input.gpx) { + await setGeomFromGpx(id, "activities", input.gpx); + } + return id; } @@ -88,17 +86,6 @@ export async function createRouteFromActivity(activityId: string, ownerId: strin if (!activity?.gpx) return null; const routeId = randomUUID(); - let routeGeom: SQL | null = null; - if (activity.gpx) { - try { - const gpxData = await parseGpxAsync(activity.gpx); - const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); - if (coords.length >= 2) routeGeom = lineStringFromCoords(coords); - } catch { - // Continue without geom - } - } - await db.insert(routes).values({ id: routeId, ownerId, @@ -108,9 +95,10 @@ export async function createRouteFromActivity(activityId: string, ownerId: strin distance: activity.distance, elevationGain: activity.elevationGain, elevationLoss: activity.elevationLoss, - geom: routeGeom, }); + await setGeomFromGpx(routeId, "routes", activity.gpx); + // Link the activity to the new route await db .update(activities) diff --git a/apps/journal/app/lib/routes.server.ts b/apps/journal/app/lib/routes.server.ts index 2b0efe4..c9f1b45 100644 --- a/apps/journal/app/lib/routes.server.ts +++ b/apps/journal/app/lib/routes.server.ts @@ -1,9 +1,9 @@ import { randomUUID } from "node:crypto"; import { eq, desc, and } from "drizzle-orm"; import { getDb } from "./db.ts"; -import { routes, routeVersions, lineStringFromCoords } from "@trails-cool/db/schema/journal"; -import { parseGpx } from "@trails-cool/gpx"; -import type { SQL } from "drizzle-orm"; +import { routes, routeVersions } from "@trails-cool/db/schema/journal"; +import { parseGpxAsync } from "@trails-cool/gpx"; +import { sql } from "drizzle-orm"; export interface RouteInput { name: string; @@ -19,14 +19,11 @@ export async function createRoute(ownerId: string, input: RouteInput) { let distance: number | null = null; let elevationGain: number | null = null; let elevationLoss: number | null = null; - let geom: SQL | null = null; - if (input.gpx) { - const stats = computeRouteStats(input.gpx); + const stats = await computeRouteStats(input.gpx); distance = stats.distance; elevationGain = stats.elevationGain; elevationLoss = stats.elevationLoss; - geom = stats.geom; } await db.insert(routes).values({ @@ -39,9 +36,12 @@ export async function createRoute(ownerId: string, input: RouteInput) { distance, elevationGain, elevationLoss, - geom, }); + if (input.gpx) { + await setGeomFromGpx(id, "routes", input.gpx); + } + // Create initial version if GPX provided if (input.gpx) { await db.insert(routeVersions).values({ @@ -99,11 +99,10 @@ export async function updateRoute( if (input.gpx) { updateData.gpx = input.gpx; - const stats = computeRouteStats(input.gpx); + const stats = await computeRouteStats(input.gpx); updateData.distance = stats.distance; updateData.elevationGain = stats.elevationGain; updateData.elevationLoss = stats.elevationLoss; - updateData.geom = stats.geom; // Get next version number const existingVersions = await db @@ -127,6 +126,10 @@ export async function updateRoute( .update(routes) .set(updateData) .where(and(eq(routes.id, id), eq(routes.ownerId, ownerId))); + + if (input.gpx) { + await setGeomFromGpx(id, "routes", input.gpx); + } } export async function deleteRoute(id: string, ownerId: string) { @@ -138,10 +141,9 @@ export async function deleteRoute(id: string, ownerId: string) { return result.length > 0; } -function computeRouteStats(gpxString: string) { +async function computeRouteStats(gpxString: string) { try { - const gpxData = parseGpx(gpxString); - const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + const gpxData = await parseGpxAsync(gpxString); return { distance: Math.round( gpxData.elevation.profile.length > 0 @@ -150,9 +152,25 @@ function computeRouteStats(gpxString: string) { ), elevationGain: gpxData.elevation.gain, elevationLoss: gpxData.elevation.loss, - geom: coords.length >= 2 ? lineStringFromCoords(coords) : null, }; } catch { - return { distance: null, elevationGain: null, elevationLoss: null, geom: null }; + return { distance: null, elevationGain: null, elevationLoss: null }; } } + +async function setGeomFromGpx(id: string, table: "routes" | "activities", gpxString: string) { + try { + const gpxData = await parseGpxAsync(gpxString); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + if (coords.length < 2) return; + const geojson = JSON.stringify({ type: "LineString", coordinates: coords }); + const db = getDb(); + await db.execute( + sql`UPDATE ${sql.identifier("journal")}.${sql.identifier(table)} SET geom = ST_GeomFromGeoJSON(${geojson}) WHERE id = ${id}`, + ); + } catch (e) { + console.error(`Failed to set geom for ${table}/${id}:`, e); + } +} + +export { setGeomFromGpx }; diff --git a/packages/db/src/schema/journal.ts b/packages/db/src/schema/journal.ts index 0454d2d..788dcad 100644 --- a/packages/db/src/schema/journal.ts +++ b/packages/db/src/schema/journal.ts @@ -7,7 +7,6 @@ import { jsonb, customType, } from "drizzle-orm/pg-core"; -import { sql, type SQL } from "drizzle-orm"; const bytea = customType<{ data: Buffer }>({ dataType() { @@ -15,27 +14,12 @@ const bytea = customType<{ data: Buffer }>({ }, }); -const lineString = customType<{ data: string | SQL }>({ +const lineString = customType<{ data: string }>({ dataType() { return "geometry(LineString, 4326)"; }, - toDriver(value) { - return value; - }, }); -/** - * Build a SQL expression to create a PostGIS LineString from coordinate pairs. - * Coordinates are [lon, lat] (GeoJSON order). - */ -export function lineStringFromCoords(coords: [number, number][]): SQL { - const geojson = JSON.stringify({ - type: "LineString", - coordinates: coords, - }); - return sql`ST_GeomFromGeoJSON(${geojson})`; -} - export const journalSchema = pgSchema("journal"); export const users = journalSchema.table("users", { diff --git a/packages/gpx/src/geom.test.ts b/packages/gpx/src/geom.test.ts new file mode 100644 index 0000000..a1521ed --- /dev/null +++ b/packages/gpx/src/geom.test.ts @@ -0,0 +1,62 @@ +import { describe, it, expect } from "vitest"; +import { parseGpxAsync } from "./parse.ts"; + +const sampleGpx = ` + + + + 34 + 113 + 519 + + +`; + +describe("GPX to geometry coordinates", () => { + it("extracts [lon, lat] coordinates from track points", async () => { + const gpxData = await parseGpxAsync(sampleGpx); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + + expect(coords).toHaveLength(3); + // GeoJSON order: [lon, lat] + expect(coords[0]).toEqual([13.405, 52.52]); + expect(coords[1]).toEqual([13.74, 51.05]); + expect(coords[2]).toEqual([11.576, 48.137]); + }); + + it("produces valid GeoJSON LineString", async () => { + const gpxData = await parseGpxAsync(sampleGpx); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + const geojson = { type: "LineString", coordinates: coords }; + + expect(geojson.type).toBe("LineString"); + expect(geojson.coordinates).toHaveLength(3); + // Verify serialization doesn't throw + expect(() => JSON.stringify(geojson)).not.toThrow(); + }); + + it("handles empty GPX gracefully", async () => { + const emptyGpx = ` + + + `; + const gpxData = await parseGpxAsync(emptyGpx); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + + expect(coords).toHaveLength(0); + }); + + it("handles single point (insufficient for LineString)", async () => { + const singlePointGpx = ` + + + 34 + + `; + const gpxData = await parseGpxAsync(singlePointGpx); + const coords = gpxData.tracks.flat().map((p) => [p.lon, p.lat] as [number, number]); + + expect(coords).toHaveLength(1); + // Caller should check coords.length >= 2 before creating LineString + }); +}); From d5bcecb3457f6b878995c078eb7a4811988c0f9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 20:19:55 +0100 Subject: [PATCH 028/723] Fix distance calculation for GPX files without elevation data Distance was only stored in the elevation profile array, which was empty when track points had no elements. Now computed via haversine independently and exposed as gpxData.distance. Tested: berlin-dresden-radweg-2021.gpx (5660 points, no elevation) now correctly reports 248.8 km. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/journal/app/lib/activities.server.ts | 3 +-- apps/journal/app/lib/routes.server.ts | 6 +----- packages/gpx/src/parse.ts | 8 ++++---- packages/gpx/src/types.ts | 2 ++ 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/apps/journal/app/lib/activities.server.ts b/apps/journal/app/lib/activities.server.ts index 4e48b8c..e3a399c 100644 --- a/apps/journal/app/lib/activities.server.ts +++ b/apps/journal/app/lib/activities.server.ts @@ -23,8 +23,7 @@ export async function createActivity(ownerId: string, input: ActivityInput) { if (input.gpx) { try { const gpxData = await parseGpxAsync(input.gpx); - const profile = gpxData.elevation.profile; - distance = profile.length > 0 ? Math.round(profile[profile.length - 1]!.distance) : null; + distance = gpxData.distance || null; elevationGain = gpxData.elevation.gain; elevationLoss = gpxData.elevation.loss; diff --git a/apps/journal/app/lib/routes.server.ts b/apps/journal/app/lib/routes.server.ts index c9f1b45..e8bd8d3 100644 --- a/apps/journal/app/lib/routes.server.ts +++ b/apps/journal/app/lib/routes.server.ts @@ -145,11 +145,7 @@ async function computeRouteStats(gpxString: string) { try { const gpxData = await parseGpxAsync(gpxString); return { - distance: Math.round( - gpxData.elevation.profile.length > 0 - ? gpxData.elevation.profile[gpxData.elevation.profile.length - 1]!.distance - : 0, - ), + distance: gpxData.distance, elevationGain: gpxData.elevation.gain, elevationLoss: gpxData.elevation.loss, }; diff --git a/packages/gpx/src/parse.ts b/packages/gpx/src/parse.ts index d1b118b..70a3a0e 100644 --- a/packages/gpx/src/parse.ts +++ b/packages/gpx/src/parse.ts @@ -46,9 +46,9 @@ function parseGpxWithParser(parser: DOMParser, xml: string): GpxData { const name = doc.querySelector("metadata > name")?.textContent ?? undefined; const waypoints = parseWaypoints(doc); const tracks = parseTracks(doc); - const elevation = computeElevation(tracks); + const { totalDistance, ...elevation } = computeElevation(tracks); - return { name, waypoints, tracks, elevation }; + return { name, waypoints, tracks, distance: totalDistance, elevation }; } function parseWaypoints(doc: Document): Waypoint[] { @@ -85,7 +85,7 @@ function parseTracks(doc: Document): TrackPoint[][] { return tracks; } -function computeElevation(tracks: TrackPoint[][]): GpxData["elevation"] { +function computeElevation(tracks: TrackPoint[][]): GpxData["elevation"] & { totalDistance: number } { let gain = 0; let loss = 0; const profile: ElevationProfile[] = []; @@ -112,7 +112,7 @@ function computeElevation(tracks: TrackPoint[][]): GpxData["elevation"] { } } - return { gain: Math.round(gain), loss: Math.round(loss), profile }; + return { totalDistance: Math.round(totalDistance), gain: Math.round(gain), loss: Math.round(loss), profile }; } /** Haversine distance between two points in meters */ diff --git a/packages/gpx/src/types.ts b/packages/gpx/src/types.ts index d7861cc..bb7d0a2 100644 --- a/packages/gpx/src/types.ts +++ b/packages/gpx/src/types.ts @@ -18,6 +18,8 @@ export interface GpxData { name?: string; waypoints: Waypoint[]; tracks: TrackPoint[][]; + /** Total distance in meters (haversine, works with or without elevation data) */ + distance: number; elevation: { gain: number; loss: number; From 5f3d4ae84694a577345092cc0928d135c2e4253c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 20:29:04 +0100 Subject: [PATCH 029/723] Remove sync parseGpx, use parseGpxAsync everywhere MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit parseGpx (sync) needs browser DOMParser which doesn't exist on the server — it silently failed in every server-side caller. Removed the export and migrated all callers to parseGpxAsync. Updated tests. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/routes/new.tsx | 4 ++-- packages/gpx/src/generate.test.ts | 6 +++--- packages/gpx/src/index.ts | 2 +- packages/gpx/src/parse.test.ts | 36 +++++++++++++++++++------------ packages/gpx/src/parse.ts | 2 +- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/apps/planner/app/routes/new.tsx b/apps/planner/app/routes/new.tsx index f37c72c..8a9f948 100644 --- a/apps/planner/app/routes/new.tsx +++ b/apps/planner/app/routes/new.tsx @@ -1,7 +1,7 @@ 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 { parseGpxAsync } from "@trails-cool/gpx"; import { checkRateLimit } from "~/lib/rate-limit"; export async function loader({ request }: Route.LoaderArgs) { @@ -35,7 +35,7 @@ export async function loader({ request }: Route.LoaderArgs) { if (gpxEncoded) { try { const gpx = decodeURIComponent(gpxEncoded); - const gpxData = parseGpx(gpx); + const gpxData = await parseGpxAsync(gpx); initializeSessionWithWaypoints(session.id, gpxData.waypoints); } catch { // Continue with empty session if GPX is invalid diff --git a/packages/gpx/src/generate.test.ts b/packages/gpx/src/generate.test.ts index 6b4fd34..0eefc9f 100644 --- a/packages/gpx/src/generate.test.ts +++ b/packages/gpx/src/generate.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect } from "vitest"; import { generateGpx } from "./generate.ts"; -import { parseGpx } from "./parse.ts"; +import { parseGpxAsync } from "./parse.ts"; describe("generateGpx", () => { it("generates valid GPX with name", () => { @@ -36,13 +36,13 @@ describe("generateGpx", () => { expect(gpx).toContain("Route <A> & B"); }); - it("produces round-trippable GPX", () => { + it("produces round-trippable GPX", async () => { const original = generateGpx({ name: "Round Trip", waypoints: [{ lat: 52.52, lon: 13.405, name: "Start" }], tracks: [[{ lat: 52.52, lon: 13.405, ele: 34 }, { lat: 48.137, lon: 11.576, ele: 519 }]], }); - const parsed = parseGpx(original); + const parsed = await parseGpxAsync(original); expect(parsed.name).toBe("Round Trip"); expect(parsed.waypoints).toHaveLength(1); expect(parsed.waypoints[0]!.name).toBe("Start"); diff --git a/packages/gpx/src/index.ts b/packages/gpx/src/index.ts index edc7f3d..e84a560 100644 --- a/packages/gpx/src/index.ts +++ b/packages/gpx/src/index.ts @@ -1,3 +1,3 @@ -export { parseGpx, parseGpxAsync } from "./parse.ts"; +export { parseGpxAsync } from "./parse.ts"; export { generateGpx } from "./generate.ts"; export type { GpxData, TrackPoint, ElevationProfile } from "./types.ts"; diff --git a/packages/gpx/src/parse.test.ts b/packages/gpx/src/parse.test.ts index f38ac8b..6e05634 100644 --- a/packages/gpx/src/parse.test.ts +++ b/packages/gpx/src/parse.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect } from "vitest"; -import { parseGpx } from "./parse.ts"; +import { parseGpxAsync } from "./parse.ts"; const sampleGpx = ` @@ -15,42 +15,50 @@ const sampleGpx = ` `; -describe("parseGpx", () => { - it("parses route name", () => { - const result = parseGpx(sampleGpx); +describe("parseGpxAsync", () => { + it("parses route name", async () => { + const result = await parseGpxAsync(sampleGpx); expect(result.name).toBe("Test Route"); }); - it("parses waypoints with lat, lon, and name", () => { - const result = parseGpx(sampleGpx); + it("parses waypoints with lat, lon, and name", async () => { + const result = await parseGpxAsync(sampleGpx); expect(result.waypoints).toHaveLength(2); expect(result.waypoints[0]).toEqual({ lat: 52.52, lon: 13.405, name: "Berlin" }); expect(result.waypoints[1]).toEqual({ lat: 48.137, lon: 11.576, name: "Munich" }); }); - it("parses track points with elevation", () => { - const result = parseGpx(sampleGpx); + it("parses track points with elevation", async () => { + const result = await parseGpxAsync(sampleGpx); expect(result.tracks).toHaveLength(1); expect(result.tracks[0]).toHaveLength(3); expect(result.tracks[0]![0]).toEqual({ lat: 52.52, lon: 13.405, ele: 34, time: undefined }); }); - it("computes elevation gain and loss", () => { - const result = parseGpx(sampleGpx); + it("computes elevation gain and loss", async () => { + const result = await parseGpxAsync(sampleGpx); expect(result.elevation.gain).toBeGreaterThan(0); expect(result.elevation.loss).toBe(0); // monotonically increasing elevation expect(result.elevation.gain).toBe(485); // 113-34 + 519-113 }); - it("builds elevation profile", () => { - const result = parseGpx(sampleGpx); + it("builds elevation profile", async () => { + const result = await parseGpxAsync(sampleGpx); expect(result.elevation.profile).toHaveLength(3); expect(result.elevation.profile[0]!.distance).toBe(0); expect(result.elevation.profile[0]!.elevation).toBe(34); expect(result.elevation.profile[2]!.distance).toBeGreaterThan(0); }); - it("throws on invalid XML", () => { - expect(() => parseGpx("not xml at all <<<<")).toThrow("Invalid GPX XML"); + it("computes total distance independently of elevation", async () => { + const result = await parseGpxAsync(sampleGpx); + expect(result.distance).toBeGreaterThan(0); + // Berlin to Munich is ~500km, our 3-point track should be in that range + expect(result.distance).toBeGreaterThan(400_000); + expect(result.distance).toBeLessThan(600_000); + }); + + it("throws on invalid XML", async () => { + await expect(parseGpxAsync("not xml at all <<<<")).rejects.toThrow(); }); }); diff --git a/packages/gpx/src/parse.ts b/packages/gpx/src/parse.ts index 70a3a0e..1ff1b79 100644 --- a/packages/gpx/src/parse.ts +++ b/packages/gpx/src/parse.ts @@ -15,7 +15,7 @@ async function getDOMParser(): Promise { return _LinkedDOMParser; } -export function parseGpx(xml: string): GpxData { +function parseGpx(xml: string): GpxData { // Synchronous path for browser if (typeof DOMParser !== "undefined") { return parseGpxWithParser(new DOMParser(), xml); From 79942bb99ec2fa485bff4162ac44f60152db77df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 20:40:11 +0100 Subject: [PATCH 030/723] Extract start/end from track when GPX has no waypoints The planner's GPX import only used elements, which many GPX files don't have. Now falls back to the first and last track point, giving the planner two endpoints to route between. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/routes/new.tsx | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/apps/planner/app/routes/new.tsx b/apps/planner/app/routes/new.tsx index 8a9f948..aa01380 100644 --- a/apps/planner/app/routes/new.tsx +++ b/apps/planner/app/routes/new.tsx @@ -36,7 +36,31 @@ export async function loader({ request }: Route.LoaderArgs) { try { const gpx = decodeURIComponent(gpxEncoded); const gpxData = await parseGpxAsync(gpx); - initializeSessionWithWaypoints(session.id, gpxData.waypoints); + // Use explicit waypoints if present, otherwise extract from track segments + let waypoints = gpxData.waypoints; + if (waypoints.length === 0 && gpxData.tracks.length > 0) { + const extracted: Array<{ lat: number; lon: number }> = []; + for (const seg of gpxData.tracks) { + if (seg.length === 0) continue; + const first = seg[0]!; + // Deduplicate: skip if same as previous waypoint + const prev = extracted[extracted.length - 1]; + if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { + extracted.push({ lat: first.lat, lon: first.lon }); + } + } + // Add the end of the last segment + const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; + if (lastSeg.length > 0) { + const last = lastSeg[lastSeg.length - 1]!; + const prev = extracted[extracted.length - 1]; + if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { + extracted.push({ lat: last.lat, lon: last.lon }); + } + } + waypoints = extracted; + } + initializeSessionWithWaypoints(session.id, waypoints); } catch { // Continue with empty session if GPX is invalid } From e0f7c5b806b6052e78619a2d6098d07f04cc1b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 20:45:05 +0100 Subject: [PATCH 031/723] Apply track-segment waypoint extraction to sessions API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same fix as new.tsx — the journal→planner handoff also only used elements from GPX. Now both code paths extract waypoints from track segments when no explicit waypoints exist. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/routes/api.sessions.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/apps/planner/app/routes/api.sessions.ts b/apps/planner/app/routes/api.sessions.ts index 3778341..26ad9c5 100644 --- a/apps/planner/app/routes/api.sessions.ts +++ b/apps/planner/app/routes/api.sessions.ts @@ -23,7 +23,29 @@ export async function action({ request }: Route.ActionArgs) { if (gpx) { try { const gpxData = await parseGpxAsync(gpx); - initialWaypoints = gpxData.waypoints; + // Use explicit waypoints if present, otherwise extract from track segments + if (gpxData.waypoints.length > 0) { + initialWaypoints = gpxData.waypoints; + } else if (gpxData.tracks.length > 0) { + const extracted: Array<{ lat: number; lon: number }> = []; + for (const seg of gpxData.tracks) { + if (seg.length === 0) continue; + const first = seg[0]!; + const prev = extracted[extracted.length - 1]; + if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { + extracted.push({ lat: first.lat, lon: first.lon }); + } + } + const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; + if (lastSeg.length > 0) { + const last = lastSeg[lastSeg.length - 1]!; + const prev = extracted[extracted.length - 1]; + if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { + extracted.push({ lat: last.lat, lon: last.lon }); + } + } + initialWaypoints = extracted; + } } catch { // Continue with empty session if GPX is invalid } From cc90c32a0ee208c6bd4ec0df5d3d7f187510fb9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 20:47:17 +0100 Subject: [PATCH 032/723] Extract shared extractWaypoints into @trails-cool/gpx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both new.tsx and api.sessions.ts had duplicated track-segment waypoint extraction logic. Moved to packages/gpx as extractWaypoints(gpxData) — uses elements when present, falls back to start of each track segment + end of last. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/routes/api.sessions.ts | 27 +++----------------- apps/planner/app/routes/new.tsx | 28 ++------------------- packages/gpx/src/index.ts | 1 + packages/gpx/src/waypoints.ts | 33 +++++++++++++++++++++++++ 4 files changed, 39 insertions(+), 50 deletions(-) create mode 100644 packages/gpx/src/waypoints.ts diff --git a/apps/planner/app/routes/api.sessions.ts b/apps/planner/app/routes/api.sessions.ts index 26ad9c5..3364385 100644 --- a/apps/planner/app/routes/api.sessions.ts +++ b/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, listSessions } from "~/lib/sessions"; -import { parseGpxAsync } from "@trails-cool/gpx"; +import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { withDb } from "@trails-cool/db"; export async function action({ request }: Route.ActionArgs) { @@ -23,29 +23,8 @@ export async function action({ request }: Route.ActionArgs) { if (gpx) { try { const gpxData = await parseGpxAsync(gpx); - // Use explicit waypoints if present, otherwise extract from track segments - if (gpxData.waypoints.length > 0) { - initialWaypoints = gpxData.waypoints; - } else if (gpxData.tracks.length > 0) { - const extracted: Array<{ lat: number; lon: number }> = []; - for (const seg of gpxData.tracks) { - if (seg.length === 0) continue; - const first = seg[0]!; - const prev = extracted[extracted.length - 1]; - if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { - extracted.push({ lat: first.lat, lon: first.lon }); - } - } - const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; - if (lastSeg.length > 0) { - const last = lastSeg[lastSeg.length - 1]!; - const prev = extracted[extracted.length - 1]; - if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { - extracted.push({ lat: last.lat, lon: last.lon }); - } - } - initialWaypoints = extracted; - } + const wps = extractWaypoints(gpxData); + if (wps.length > 0) initialWaypoints = wps; } catch { // Continue with empty session if GPX is invalid } diff --git a/apps/planner/app/routes/new.tsx b/apps/planner/app/routes/new.tsx index aa01380..4150c29 100644 --- a/apps/planner/app/routes/new.tsx +++ b/apps/planner/app/routes/new.tsx @@ -1,7 +1,7 @@ import { redirect, data } from "react-router"; import type { Route } from "./+types/new"; import { createSession, initializeSessionWithWaypoints } from "~/lib/sessions"; -import { parseGpxAsync } from "@trails-cool/gpx"; +import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { checkRateLimit } from "~/lib/rate-limit"; export async function loader({ request }: Route.LoaderArgs) { @@ -36,31 +36,7 @@ export async function loader({ request }: Route.LoaderArgs) { try { const gpx = decodeURIComponent(gpxEncoded); const gpxData = await parseGpxAsync(gpx); - // Use explicit waypoints if present, otherwise extract from track segments - let waypoints = gpxData.waypoints; - if (waypoints.length === 0 && gpxData.tracks.length > 0) { - const extracted: Array<{ lat: number; lon: number }> = []; - for (const seg of gpxData.tracks) { - if (seg.length === 0) continue; - const first = seg[0]!; - // Deduplicate: skip if same as previous waypoint - const prev = extracted[extracted.length - 1]; - if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { - extracted.push({ lat: first.lat, lon: first.lon }); - } - } - // Add the end of the last segment - const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; - if (lastSeg.length > 0) { - const last = lastSeg[lastSeg.length - 1]!; - const prev = extracted[extracted.length - 1]; - if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { - extracted.push({ lat: last.lat, lon: last.lon }); - } - } - waypoints = extracted; - } - initializeSessionWithWaypoints(session.id, waypoints); + initializeSessionWithWaypoints(session.id, extractWaypoints(gpxData)); } catch { // Continue with empty session if GPX is invalid } diff --git a/packages/gpx/src/index.ts b/packages/gpx/src/index.ts index e84a560..f8887f2 100644 --- a/packages/gpx/src/index.ts +++ b/packages/gpx/src/index.ts @@ -1,3 +1,4 @@ export { parseGpxAsync } from "./parse.ts"; export { generateGpx } from "./generate.ts"; +export { extractWaypoints } from "./waypoints.ts"; export type { GpxData, TrackPoint, ElevationProfile } from "./types.ts"; diff --git a/packages/gpx/src/waypoints.ts b/packages/gpx/src/waypoints.ts new file mode 100644 index 0000000..eca8da4 --- /dev/null +++ b/packages/gpx/src/waypoints.ts @@ -0,0 +1,33 @@ +import type { GpxData } from "./types.ts"; + +/** + * Extract waypoints from parsed GPX data. + * Uses explicit elements if present, otherwise extracts the start + * of each track segment + end of the last segment. + */ +export function extractWaypoints(gpxData: GpxData): Array<{ lat: number; lon: number; name?: string }> { + if (gpxData.waypoints.length > 0) return gpxData.waypoints; + if (gpxData.tracks.length === 0) return []; + + const result: Array<{ lat: number; lon: number }> = []; + for (const seg of gpxData.tracks) { + if (seg.length === 0) continue; + const first = seg[0]!; + const prev = result[result.length - 1]; + if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { + result.push({ lat: first.lat, lon: first.lon }); + } + } + + // Add end of last segment + const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; + if (lastSeg.length > 0) { + const last = lastSeg[lastSeg.length - 1]!; + const prev = result[result.length - 1]; + if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { + result.push({ lat: last.lat, lon: last.lon }); + } + } + + return result; +} From 0e27d6eaef26d2630785622cbbfad1573396aedc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 22:36:13 +0100 Subject: [PATCH 033/723] Use Douglas-Peucker simplification for single-segment GPX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For GPX files with one long track segment, extracting only start/end gives just 2 waypoints. Now uses Douglas-Peucker line simplification (epsilon=0.05° ≈ 5km) to find significant turning points. Result: berlin-dresden-radweg (249km, 5660 points) → 10 waypoints that capture the route's key direction changes. Multi-segment GPX files still use segment endpoints as before. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/gpx/src/waypoints.ts | 84 ++++++++++++++++++++++++++++++----- 1 file changed, 74 insertions(+), 10 deletions(-) diff --git a/packages/gpx/src/waypoints.ts b/packages/gpx/src/waypoints.ts index eca8da4..4d4da9b 100644 --- a/packages/gpx/src/waypoints.ts +++ b/packages/gpx/src/waypoints.ts @@ -2,32 +2,96 @@ import type { GpxData } from "./types.ts"; /** * Extract waypoints from parsed GPX data. - * Uses explicit elements if present, otherwise extracts the start - * of each track segment + end of the last segment. + * Uses explicit elements if present, otherwise simplifies the + * track using Douglas-Peucker to find significant turning points. */ export function extractWaypoints(gpxData: GpxData): Array<{ lat: number; lon: number; name?: string }> { if (gpxData.waypoints.length > 0) return gpxData.waypoints; if (gpxData.tracks.length === 0) return []; - const result: Array<{ lat: number; lon: number }> = []; + // Collect start of each segment + end of last (for multi-segment GPX) + const segmentEndpoints: Array<{ lat: number; lon: number }> = []; for (const seg of gpxData.tracks) { if (seg.length === 0) continue; const first = seg[0]!; - const prev = result[result.length - 1]; + const prev = segmentEndpoints[segmentEndpoints.length - 1]; if (!prev || prev.lat !== first.lat || prev.lon !== first.lon) { - result.push({ lat: first.lat, lon: first.lon }); + segmentEndpoints.push({ lat: first.lat, lon: first.lon }); } } - - // Add end of last segment const lastSeg = gpxData.tracks[gpxData.tracks.length - 1]!; if (lastSeg.length > 0) { const last = lastSeg[lastSeg.length - 1]!; - const prev = result[result.length - 1]; + const prev = segmentEndpoints[segmentEndpoints.length - 1]; if (!prev || prev.lat !== last.lat || prev.lon !== last.lon) { - result.push({ lat: last.lat, lon: last.lon }); + segmentEndpoints.push({ lat: last.lat, lon: last.lon }); } } - return result; + // If multi-segment already gives us enough waypoints, use those + if (segmentEndpoints.length > 2) return segmentEndpoints; + + // Single segment: simplify the track to find key turning points + const allPoints = gpxData.tracks.flat().map((p) => ({ lat: p.lat, lon: p.lon })); + if (allPoints.length < 2) return allPoints; + + return douglasPeucker(allPoints, 0.05); +} + +/** + * Douglas-Peucker line simplification. + * Epsilon is in degrees (~0.005° ≈ 500m at mid-latitudes). + * Recursively finds the point with maximum perpendicular distance + * from the line between start and end, keeping significant turns. + */ +function douglasPeucker( + points: Array<{ lat: number; lon: number }>, + epsilon: number, +): Array<{ lat: number; lon: number }> { + if (points.length <= 2) return points; + + let maxDist = 0; + let maxIdx = 0; + + const start = points[0]!; + const end = points[points.length - 1]!; + + for (let i = 1; i < points.length - 1; i++) { + const dist = perpendicularDistance(points[i]!, start, end); + if (dist > maxDist) { + maxDist = dist; + maxIdx = i; + } + } + + if (maxDist > epsilon) { + const left = douglasPeucker(points.slice(0, maxIdx + 1), epsilon); + const right = douglasPeucker(points.slice(maxIdx), epsilon); + return [...left.slice(0, -1), ...right]; + } + + return [start, end]; +} + +function perpendicularDistance( + point: { lat: number; lon: number }, + lineStart: { lat: number; lon: number }, + lineEnd: { lat: number; lon: number }, +): number { + const dx = lineEnd.lon - lineStart.lon; + const dy = lineEnd.lat - lineStart.lat; + const lenSq = dx * dx + dy * dy; + if (lenSq === 0) { + const px = point.lon - lineStart.lon; + const py = point.lat - lineStart.lat; + return Math.sqrt(px * px + py * py); + } + const t = Math.max(0, Math.min(1, + ((point.lon - lineStart.lon) * dx + (point.lat - lineStart.lat) * dy) / lenSq, + )); + const projLon = lineStart.lon + t * dx; + const projLat = lineStart.lat + t * dy; + const px = point.lon - projLon; + const py = point.lat - projLat; + return Math.sqrt(px * px + py * py); } From 2b0b89add84de17de8263f563fa8f3da231324e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 22:40:01 +0100 Subject: [PATCH 034/723] Use epsilon 0.005 for Douglas-Peucker waypoint extraction Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/gpx/src/waypoints.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gpx/src/waypoints.ts b/packages/gpx/src/waypoints.ts index 4d4da9b..dddfffb 100644 --- a/packages/gpx/src/waypoints.ts +++ b/packages/gpx/src/waypoints.ts @@ -35,7 +35,7 @@ export function extractWaypoints(gpxData: GpxData): Array<{ lat: number; lon: nu const allPoints = gpxData.tracks.flat().map((p) => ({ lat: p.lat, lon: p.lon })); if (allPoints.length < 2) return allPoints; - return douglasPeucker(allPoints, 0.05); + return douglasPeucker(allPoints, 0.005); } /** From 02939ca828fe249568848ef8cab53e552af41523 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 09:13:07 +0100 Subject: [PATCH 035/723] Update specs to match implementation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addresses spec drift items #3, 5, 6, 7, 8, 9, 10, 11, 12 from #147: - transactional-emails: Resend → Nodemailer + SMTP - infrastructure: CX21 → cx23 - secret-management: single secrets.env → split app/infra files - brouter-integration: 5s failover delay → instant via clientID election - brouter-integration: 2 profiles → 5 (trekking, fastbike, safety, shortest, car) - observability: add version field to health response - observability: add brouter_request_duration_seconds metric - planner-session: remove 30-day max ceiling (not enforced) - shared-packages: clarify map package scope vs planner-specific features Co-Authored-By: Claude Opus 4.6 (1M context) --- openspec/specs/brouter-integration/spec.md | 4 ++-- openspec/specs/infrastructure/spec.md | 2 +- openspec/specs/observability/spec.md | 8 ++++++-- openspec/specs/planner-session/spec.md | 2 +- openspec/specs/secret-management/spec.md | 6 +++--- openspec/specs/shared-packages/spec.md | 2 +- openspec/specs/transactional-emails/spec.md | 2 +- 7 files changed, 15 insertions(+), 11 deletions(-) diff --git a/openspec/specs/brouter-integration/spec.md b/openspec/specs/brouter-integration/spec.md index b2e8053..6757712 100644 --- a/openspec/specs/brouter-integration/spec.md +++ b/openspec/specs/brouter-integration/spec.md @@ -32,7 +32,7 @@ The Planner SHALL elect one participant per session as the "routing host" who is #### Scenario: Host failover - **WHEN** the current routing host disconnects -- **THEN** the longest-connected remaining participant becomes the new host within 5 seconds +- **THEN** failover is immediate via deterministic Yjs clientID election: the client with the lowest remaining ID becomes host instantly ### Requirement: Route broadcast The routing host SHALL store computed route results in the Yjs document so that all participants receive route updates automatically. @@ -45,7 +45,7 @@ The routing host SHALL store computed route results in the Yjs document so that The Planner SHALL support selecting a routing profile that determines how BRouter computes the route. #### Scenario: Switch routing profile -- **WHEN** a user changes the routing profile from "trekking" to "shortest" +- **WHEN** a user changes the routing profile (available profiles: `trekking`, `fastbike`, `safety`, `shortest`, `car`) - **THEN** the profile change syncs via Yjs and the routing host recomputes the route ### Requirement: BRouter API proxy diff --git a/openspec/specs/infrastructure/spec.md b/openspec/specs/infrastructure/spec.md index 61fb6c5..a1bb45b 100644 --- a/openspec/specs/infrastructure/spec.md +++ b/openspec/specs/infrastructure/spec.md @@ -5,7 +5,7 @@ Infrastructure SHALL be provisioned on Hetzner Cloud using Terraform with the He #### Scenario: Provision server - **WHEN** `terraform apply` is run -- **THEN** a Hetzner CX21 server (2 vCPU, 4 GB RAM, 40 GB SSD) is created with Docker installed +- **THEN** a Hetzner cx23 server (2 vCPU, 4 GB RAM, 40 GB SSD) is created with Docker installed ### Requirement: Docker Compose deployment All services SHALL be deployed via Docker Compose on the Hetzner server. diff --git a/openspec/specs/observability/spec.md b/openspec/specs/observability/spec.md index 850e803..88ae7ca 100644 --- a/openspec/specs/observability/spec.md +++ b/openspec/specs/observability/spec.md @@ -5,11 +5,11 @@ Both apps SHALL expose a `/health` endpoint returning service and database statu #### Scenario: Healthy service - **WHEN** the app is running and the database is reachable -- **THEN** `GET /health` returns `{ "status": "ok", "db": "connected" }` with HTTP 200 +- **THEN** `GET /health` returns `{ "status": "ok", "db": "connected", "version": "" }` with HTTP 200 (version from `SENTRY_RELEASE` env var, defaults to `"dev"`) #### Scenario: Degraded service - **WHEN** the app is running but the database is unreachable -- **THEN** `GET /health` returns `{ "status": "degraded", "db": "unreachable" }` with HTTP 503 +- **THEN** `GET /health` returns `{ "status": "degraded", "db": "unreachable", "version": "" }` with HTTP 503 ### Requirement: Prometheus metrics Both apps SHALL expose a `/metrics` endpoint with Prometheus-formatted metrics. @@ -26,6 +26,10 @@ Both apps SHALL expose a `/metrics` endpoint with Prometheus-formatted metrics. - **WHEN** the Planner is running - **THEN** `planner_active_sessions` and `planner_connected_clients` gauges reflect current state +#### Scenario: BRouter latency metrics +- **WHEN** the Planner proxies a routing request to BRouter +- **THEN** `brouter_request_duration_seconds` histogram is updated (buckets: 0.1s to 10s) + ### Requirement: Structured logging Both apps SHALL output structured JSON logs in production. diff --git a/openspec/specs/planner-session/spec.md b/openspec/specs/planner-session/spec.md index accceb9..414aa90 100644 --- a/openspec/specs/planner-session/spec.md +++ b/openspec/specs/planner-session/spec.md @@ -45,7 +45,7 @@ The Planner SHALL persist Yjs session state to PostgreSQL so that sessions survi - **THEN** reconnecting clients recover the full session state from PostgreSQL ### Requirement: Session expiry -The Planner SHALL automatically expire sessions after a configurable period of inactivity (default: 7 days, max: 30 days). +The Planner SHALL automatically expire sessions after a configurable period of inactivity (default: 7 days, no hard ceiling enforced). #### Scenario: Session expires - **WHEN** no edits are made to a session for 7 days diff --git a/openspec/specs/secret-management/spec.md b/openspec/specs/secret-management/spec.md index abaa0ae..3d64bb1 100644 --- a/openspec/specs/secret-management/spec.md +++ b/openspec/specs/secret-management/spec.md @@ -1,15 +1,15 @@ ## Requirements ### Requirement: Encrypted secrets in repository -Production secrets SHALL be stored as a SOPS-encrypted file in the repository, decryptable only with a single age private key. +Production secrets SHALL be stored as SOPS-encrypted files in the repository, decryptable only with a single age private key. Secrets are split into two files: `secrets.app.env` (application secrets) and `secrets.infra.env` (infrastructure secrets). #### Scenario: Edit secrets -- **WHEN** a developer runs `sops infrastructure/secrets.env` +- **WHEN** a developer runs `sops infrastructure/secrets.app.env` or `sops infrastructure/secrets.infra.env` - **THEN** the file is decrypted in a temporary editor, and re-encrypted on save #### Scenario: CD decryption - **WHEN** the CD workflow runs -- **THEN** the encrypted secrets file is decrypted using the AGE_SECRET_KEY GitHub secret and provided to docker-compose as an env file +- **THEN** both encrypted secrets files are decrypted using the AGE_SECRET_KEY GitHub secret and merged at deploy time as env files for docker-compose #### Scenario: Secret audit trail - **WHEN** a secret is changed diff --git a/openspec/specs/shared-packages/spec.md b/openspec/specs/shared-packages/spec.md index e40a8e1..ec7aa45 100644 --- a/openspec/specs/shared-packages/spec.md +++ b/openspec/specs/shared-packages/spec.md @@ -27,7 +27,7 @@ The `@trails-cool/gpx` package SHALL parse GPX XML into structured data (waypoin - **THEN** it returns elevation gain, loss, and a profile array of distance/elevation pairs ### Requirement: Map rendering package -The `@trails-cool/map` package SHALL provide React components for rendering Leaflet maps with configurable base layers and route overlays. +The `@trails-cool/map` package SHALL provide core React components (MapView, RouteLayer) for rendering Leaflet maps with configurable base layers and route overlays. Interactive features (route drag-reshape, ghost markers, no-go area drawing, elevation chart, cursor tracking, colored routes) are implemented directly in the Planner app since they are Planner-specific. #### Scenario: Render map component - **WHEN** the map package's MapView component is rendered with a center and zoom diff --git a/openspec/specs/transactional-emails/spec.md b/openspec/specs/transactional-emails/spec.md index d88f2c3..4e50bee 100644 --- a/openspec/specs/transactional-emails/spec.md +++ b/openspec/specs/transactional-emails/spec.md @@ -5,7 +5,7 @@ The system SHALL provide a provider-agnostic email sending function that support #### Scenario: Send email in production - **WHEN** the system sends a transactional email in production -- **THEN** the email is delivered via the configured provider (Resend) to the recipient +- **THEN** the email is delivered via Nodemailer with SMTP (configured via `SMTP_URL` connection string and `SMTP_FROM` env var) to the recipient #### Scenario: Dev mode skips sending - **WHEN** the system sends a transactional email in development From e083ee134d2be95d5a4a0c9b72e96c03f0806fa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Thu, 2 Apr 2026 17:02:15 +0100 Subject: [PATCH 036/723] Wire planner metrics gauges to actual session/client counts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit plannerActiveSessions and plannerConnectedClients were registered but never updated — they always reported 0. Now incremented on WebSocket connect and decremented on close. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/lib/yjs-server.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/planner/app/lib/yjs-server.ts b/apps/planner/app/lib/yjs-server.ts index ccb22ba..af9e53f 100644 --- a/apps/planner/app/lib/yjs-server.ts +++ b/apps/planner/app/lib/yjs-server.ts @@ -6,6 +6,7 @@ import * as encoding from "lib0/encoding"; import * as decoding from "lib0/decoding"; import type { IncomingMessage, Server } from "node:http"; import { saveSessionState, loadSessionState, touchSession } from "./sessions.ts"; +import { plannerActiveSessions, plannerConnectedClients } from "./metrics.server.ts"; const messageSync = 0; const messageAwareness = 1; @@ -159,10 +160,13 @@ export function setupYjsWebSocket(server: Server): WebSocketServer { }); wss.on("connection", async (ws: WebSocket, _request: IncomingMessage, sessionId: string) => { + const isNewSession = !docs.has(sessionId); const doc = await getOrLoadDoc(sessionId); const awareness = getAwareness(sessionId, doc); conns.set(ws, { sessionId, clientIds: new Set() }); + plannerConnectedClients.inc(); + if (isNewSession) plannerActiveSessions.inc(); // Broadcast doc updates to all connections in this session const onUpdate = (update: Uint8Array, origin: unknown) => { @@ -218,11 +222,13 @@ export function setupYjsWebSocket(server: Server): WebSocketServer { ); } conns.delete(ws); + plannerConnectedClients.dec(); doc.off("update", onUpdate); // Save when last client leaves const hasClients = Array.from(conns.values()).some((m) => m.sessionId === sessionId); if (!hasClients) { + plannerActiveSessions.dec(); saveSessionState(sessionId).catch(() => {}); } }); From a3ad073d96833dde2a93e3818e7fb15d725c382a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 09:15:15 +0100 Subject: [PATCH 037/723] Guard collectDefaultMetrics against duplicate registration Importing metrics.server.ts from yjs-server.ts caused collectDefaultMetrics() to re-register during HMR, crashing the planner dev server. Check if metrics already exist first. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/lib/metrics.server.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/planner/app/lib/metrics.server.ts b/apps/planner/app/lib/metrics.server.ts index 85590c6..059e5ab 100644 --- a/apps/planner/app/lib/metrics.server.ts +++ b/apps/planner/app/lib/metrics.server.ts @@ -1,7 +1,10 @@ import client from "prom-client"; // Collect default Node.js metrics (event loop, heap, GC) -client.collectDefaultMetrics(); +// Guard against duplicate registration during HMR +if (!client.register.getSingleMetric("process_cpu_user_seconds_total")) { + client.collectDefaultMetrics(); +} export const httpRequestDuration = new client.Histogram({ name: "http_request_duration_seconds", From d97992e96798c49e14aa496f0d23af82b3a73d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:02:21 +0100 Subject: [PATCH 038/723] Guard all metric registrations against re-evaluation Vite's dev server can re-evaluate modules, causing prom-client "already registered" errors for all metrics, not just default ones. Use getOrCreate pattern to reuse existing metrics from the registry. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/lib/metrics.server.ts | 54 ++++++++++++++++---------- 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/apps/planner/app/lib/metrics.server.ts b/apps/planner/app/lib/metrics.server.ts index 059e5ab..46d2060 100644 --- a/apps/planner/app/lib/metrics.server.ts +++ b/apps/planner/app/lib/metrics.server.ts @@ -1,32 +1,44 @@ import client from "prom-client"; -// Collect default Node.js metrics (event loop, heap, GC) -// Guard against duplicate registration during HMR +// Guard all metric registration — Vite's dev server can re-evaluate +// this module, causing "already registered" errors. +function getOrCreate(name: string, create: () => T): T { + return (client.register.getSingleMetric(name) as T) ?? create(); +} + if (!client.register.getSingleMetric("process_cpu_user_seconds_total")) { client.collectDefaultMetrics(); } -export const httpRequestDuration = new client.Histogram({ - name: "http_request_duration_seconds", - help: "Duration of HTTP requests in seconds", - labelNames: ["method", "route", "status"] as const, - buckets: [0.01, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5], -}); +export const httpRequestDuration = getOrCreate("http_request_duration_seconds", () => + new client.Histogram({ + name: "http_request_duration_seconds", + help: "Duration of HTTP requests in seconds", + labelNames: ["method", "route", "status"] as const, + buckets: [0.01, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5], + }), +); -export const plannerActiveSessions = new client.Gauge({ - name: "planner_active_sessions", - help: "Number of active planner sessions", -}); +export const plannerActiveSessions = getOrCreate("planner_active_sessions", () => + new client.Gauge({ + name: "planner_active_sessions", + help: "Number of active planner sessions", + }), +); -export const plannerConnectedClients = new client.Gauge({ - name: "planner_connected_clients", - help: "Number of connected WebSocket clients", -}); +export const plannerConnectedClients = getOrCreate("planner_connected_clients", () => + new client.Gauge({ + name: "planner_connected_clients", + help: "Number of connected WebSocket clients", + }), +); -export const brouterRequestDuration = new client.Histogram({ - name: "brouter_request_duration_seconds", - help: "Duration of BRouter API requests in seconds", - buckets: [0.1, 0.25, 0.5, 1, 2, 5, 10], -}); +export const brouterRequestDuration = getOrCreate("brouter_request_duration_seconds", () => + new client.Histogram({ + name: "brouter_request_duration_seconds", + help: "Duration of BRouter API requests in seconds", + buckets: [0.1, 0.25, 0.5, 1, 2, 5, 10], + }), +); export const registry = client.register; From 55076ef440113b826c90c60c87487d9eb52bb2be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:15:08 +0100 Subject: [PATCH 039/723] Reduce Prometheus scrape interval from 15s to 5s Co-Authored-By: Claude Opus 4.6 (1M context) --- infrastructure/prometheus/prometheus.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/infrastructure/prometheus/prometheus.yml b/infrastructure/prometheus/prometheus.yml index 2bda741..eefe45a 100644 --- a/infrastructure/prometheus/prometheus.yml +++ b/infrastructure/prometheus/prometheus.yml @@ -1,6 +1,6 @@ global: - scrape_interval: 15s - evaluation_interval: 15s + scrape_interval: 5s + evaluation_interval: 5s scrape_configs: - job_name: "journal" From 3abea9d5a8e1b18da2c73bcd336cf9b7ed13162e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:31:43 +0100 Subject: [PATCH 040/723] Pass no-go area polygons natively to BRouter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BRouter supports a `polygons` parameter with full vertex coordinates. We were approximating polygons as circles (centroid + max radius), which poorly represented elongated or concave shapes. Now passes polygon vertices directly — no approximation, exact no-go boundaries. Also removes unused haversineMeters helper and updates the spec. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/lib/brouter.ts | 31 +++++------------------------- openspec/specs/no-go-areas/spec.md | 3 ++- 2 files changed, 7 insertions(+), 27 deletions(-) diff --git a/apps/planner/app/lib/brouter.ts b/apps/planner/app/lib/brouter.ts index b772c3c..4e0bfd6 100644 --- a/apps/planner/app/lib/brouter.ts +++ b/apps/planner/app/lib/brouter.ts @@ -52,7 +52,7 @@ export async function computeRoute(request: RouteRequest): Promise): Map { - 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)}`; + if (area.points.length < 3) return null; + return area.points.map((p) => `${p.lon},${p.lat}`).join(","); }) .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; } diff --git a/openspec/specs/no-go-areas/spec.md b/openspec/specs/no-go-areas/spec.md index 91dfdb0..dd6bfe4 100644 --- a/openspec/specs/no-go-areas/spec.md +++ b/openspec/specs/no-go-areas/spec.md @@ -9,7 +9,8 @@ Users SHALL be able to draw polygons on the map that BRouter avoids when computi #### Scenario: Route avoids no-go area - **WHEN** a route is computed and a no-go area intersects the direct path -- **THEN** BRouter routes around the no-go area +- **THEN** BRouter request includes the polygon vertices via the `polygons` parameter +- **AND** BRouter routes around the no-go area #### Scenario: Delete no-go area - **WHEN** a user deletes a no-go area polygon From 16568ffa4598bd7bb90d49b07285558dbe9193a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:37:43 +0100 Subject: [PATCH 041/723] Fix no-go button click creating a waypoint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The button was rendered as a React component, not a Leaflet control, so clicks propagated to the map. Use L.DomEvent.disableClickPropagation on the container — same approach Leaflet's built-in controls use. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/PlannerMap.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index d8d3499..0ec1aef 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -170,8 +170,15 @@ function CursorTracker({ awareness }: { awareness: YjsState["awareness"] }) { } function NoGoAreaButton({ active, onClick }: { active: boolean; onClick: () => void }) { + const ref = useRef(null); + + // Prevent clicks from reaching the Leaflet map (same as built-in controls) + useEffect(() => { + if (ref.current) L.DomEvent.disableClickPropagation(ref.current); + }, []); + return ( -
+
Date: Fri, 3 Apr 2026 10:52:39 +0100 Subject: [PATCH 042/723] Add split export: Export Route vs Export Plan Split button with default "Export GPX" (track only) and dropdown: - Export Route: clean track for use in any app - Export Plan: track + waypoints + no-go areas in GPX extensions (trails:planning namespace) for reimporting into the planner Also: - Add no-go area serialization to generateGpx (GPX extensions) - Parse no-go areas from GPX extensions on import - Initialize no-go areas in Yjs session from imported GPX - Save to Journal now exports track only (consistent with Export Route) Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/ExportButton.tsx | 142 ++++++++++++------ .../app/components/SaveToJournalButton.tsx | 10 +- apps/planner/app/lib/sessions.ts | 16 ++ apps/planner/app/routes/api.sessions.ts | 5 +- apps/planner/app/routes/new.tsx | 5 +- packages/gpx/src/generate.ts | 22 ++- packages/gpx/src/index.ts | 2 +- packages/gpx/src/parse.ts | 21 ++- packages/gpx/src/types.ts | 5 + packages/i18n/src/locales/de.ts | 2 + packages/i18n/src/locales/en.ts | 2 + 11 files changed, 172 insertions(+), 60 deletions(-) diff --git a/apps/planner/app/components/ExportButton.tsx b/apps/planner/app/components/ExportButton.tsx index b4dff4e..840e0b9 100644 --- a/apps/planner/app/components/ExportButton.tsx +++ b/apps/planner/app/components/ExportButton.tsx @@ -1,60 +1,110 @@ -import { useCallback } from "react"; +import { useCallback, useState, useRef, useEffect } from "react"; import { useTranslation } from "react-i18next"; 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"; +import type { TrackPoint, NoGoArea } from "@trails-cool/gpx"; + +function getTracks(yjs: YjsState): TrackPoint[][] { + const geojsonStr = yjs.routeData.get("geojson") as string | undefined; + if (!geojsonStr) return []; + try { + const geojson = JSON.parse(geojsonStr); + const coords: number[][] = geojson.features?.[0]?.geometry?.coordinates ?? []; + if (coords.length > 0) { + return [coords.map((c) => ({ lat: c[1]!, lon: c[0]!, ele: c[2] }))]; + } + } catch { /* invalid geojson */ } + return []; +} + +function getWaypoints(yjs: YjsState) { + return yjs.waypoints.toArray().map((yMap: Y.Map) => ({ + lat: yMap.get("lat") as number, + lon: yMap.get("lon") as number, + name: yMap.get("name") as string | undefined, + })); +} + +function getNoGoAreas(yjs: YjsState): NoGoArea[] { + return yjs.noGoAreas.toArray().map((yMap: Y.Map) => ({ + points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [], + })).filter((a) => a.points.length >= 3); +} + +function download(gpx: string, filename: string) { + const blob = new Blob([gpx], { type: "application/gpx+xml" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +} export function ExportButton({ yjs }: { yjs: YjsState }) { const { t } = useTranslation("planner"); + const [open, setOpen] = useState(false); + const ref = useRef(null); - const handleExport = useCallback(() => { - // Get waypoints from Yjs - const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map) => ({ - lat: yMap.get("lat") as number, - lon: yMap.get("lon") as number, - name: yMap.get("name") as string | undefined, - })); + // Close dropdown on outside click + useEffect(() => { + if (!open) return; + const handler = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); + }; + document.addEventListener("click", handler); + return () => document.removeEventListener("click", handler); + }, [open]); - // Get route track from GeoJSON - 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 handleExportRoute = useCallback(() => { + const tracks = getTracks(yjs); + const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks }); + download(gpx, "route.gpx"); + setOpen(false); + }, [yjs]); - const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks }); - - // Download - const blob = new Blob([gpx], { type: "application/gpx+xml" }); - const url = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = url; - a.download = "route.gpx"; - a.click(); - URL.revokeObjectURL(url); - }, [yjs.waypoints, yjs.routeData]); + const handleExportPlan = useCallback(() => { + const tracks = getTracks(yjs); + const waypoints = getWaypoints(yjs); + const noGoAreas = getNoGoAreas(yjs); + const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks, noGoAreas }); + download(gpx, "route-plan.gpx"); + setOpen(false); + }, [yjs]); return ( - +
+
+ + +
+ {open && ( +
+ + +
+ )} +
); } diff --git a/apps/planner/app/components/SaveToJournalButton.tsx b/apps/planner/app/components/SaveToJournalButton.tsx index af0389d..ae9b4d3 100644 --- a/apps/planner/app/components/SaveToJournalButton.tsx +++ b/apps/planner/app/components/SaveToJournalButton.tsx @@ -23,13 +23,7 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl setError(null); try { - // Build GPX from current Yjs state - const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map) => ({ - lat: yMap.get("lat") as number, - lon: yMap.get("lon") as number, - name: yMap.get("name") as string | undefined, - })); - + // Build GPX from computed track (not editing waypoints). let tracks: TrackPoint[][] = []; const geojsonStr = yjs.routeData.get("geojson") as string | undefined; if (geojsonStr) { @@ -42,7 +36,7 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl } catch { /* invalid geojson */ } } - const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks }); + const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks }); // POST to Journal callback const response = await fetch(callbackUrl, { diff --git a/apps/planner/app/lib/sessions.ts b/apps/planner/app/lib/sessions.ts index 728f380..9b4bb33 100644 --- a/apps/planner/app/lib/sessions.ts +++ b/apps/planner/app/lib/sessions.ts @@ -90,6 +90,22 @@ export function initializeSessionWithWaypoints( }); } +export function initializeSessionWithNoGoAreas( + sessionId: string, + noGoAreas: Array<{ points: Array<{ lat: number; lon: number }> }>, +): void { + const doc = getOrCreateDoc(sessionId); + const yNoGoAreas = doc.getArray("noGoAreas"); + + doc.transact(() => { + for (const area of noGoAreas) { + const yMap = new Y.Map(); + yMap.set("points", area.points); + yNoGoAreas.push([yMap]); + } + }); +} + export async function listSessions(): Promise { return getDb() .select() diff --git a/apps/planner/app/routes/api.sessions.ts b/apps/planner/app/routes/api.sessions.ts index 3364385..f458bfc 100644 --- a/apps/planner/app/routes/api.sessions.ts +++ b/apps/planner/app/routes/api.sessions.ts @@ -1,6 +1,6 @@ import { data } from "react-router"; import type { Route } from "./+types/api.sessions"; -import { createSession, listSessions } from "~/lib/sessions"; +import { createSession, listSessions, initializeSessionWithNoGoAreas } from "~/lib/sessions"; import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { withDb } from "@trails-cool/db"; @@ -25,6 +25,9 @@ export async function action({ request }: Route.ActionArgs) { const gpxData = await parseGpxAsync(gpx); const wps = extractWaypoints(gpxData); if (wps.length > 0) initialWaypoints = wps; + if (gpxData.noGoAreas.length > 0) { + initializeSessionWithNoGoAreas(session.id, gpxData.noGoAreas); + } } catch { // Continue with empty session if GPX is invalid } diff --git a/apps/planner/app/routes/new.tsx b/apps/planner/app/routes/new.tsx index 4150c29..121e0f6 100644 --- a/apps/planner/app/routes/new.tsx +++ b/apps/planner/app/routes/new.tsx @@ -1,6 +1,6 @@ import { redirect, data } from "react-router"; import type { Route } from "./+types/new"; -import { createSession, initializeSessionWithWaypoints } from "~/lib/sessions"; +import { createSession, initializeSessionWithWaypoints, initializeSessionWithNoGoAreas } from "~/lib/sessions"; import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { checkRateLimit } from "~/lib/rate-limit"; @@ -37,6 +37,9 @@ export async function loader({ request }: Route.LoaderArgs) { const gpx = decodeURIComponent(gpxEncoded); const gpxData = await parseGpxAsync(gpx); initializeSessionWithWaypoints(session.id, extractWaypoints(gpxData)); + if (gpxData.noGoAreas.length > 0) { + initializeSessionWithNoGoAreas(session.id, gpxData.noGoAreas); + } } catch { // Continue with empty session if GPX is invalid } diff --git a/packages/gpx/src/generate.ts b/packages/gpx/src/generate.ts index d0f0268..1be51f2 100644 --- a/packages/gpx/src/generate.ts +++ b/packages/gpx/src/generate.ts @@ -4,15 +4,23 @@ import type { TrackPoint } from "./types.ts"; /** * Generate a GPX XML string from waypoints and track points. */ +export interface NoGoArea { + points: Array<{ lat: number; lon: number }>; +} + export function generateGpx(options: { name?: string; waypoints?: Waypoint[]; tracks?: TrackPoint[][]; + noGoAreas?: NoGoArea[]; }): string { + const hasExtensions = options.noGoAreas && options.noGoAreas.length > 0; const lines: string[] = [ '', '', + ' xmlns="http://www.topografix.com/GPX/1/1"' + + (hasExtensions ? '\n xmlns:trails="https://trails.cool/gpx/1"' : "") + + ">", ]; if (options.name) { @@ -46,6 +54,18 @@ export function generateGpx(options: { } } + if (options.noGoAreas && options.noGoAreas.length > 0) { + lines.push(" ", " "); + for (const area of options.noGoAreas) { + lines.push(" "); + for (const pt of area.points) { + lines.push(` `); + } + lines.push(" "); + } + lines.push(" ", " "); + } + lines.push(""); return lines.join("\n"); } diff --git a/packages/gpx/src/index.ts b/packages/gpx/src/index.ts index f8887f2..6830ada 100644 --- a/packages/gpx/src/index.ts +++ b/packages/gpx/src/index.ts @@ -1,4 +1,4 @@ export { parseGpxAsync } from "./parse.ts"; export { generateGpx } from "./generate.ts"; export { extractWaypoints } from "./waypoints.ts"; -export type { GpxData, TrackPoint, ElevationProfile } from "./types.ts"; +export type { GpxData, TrackPoint, ElevationProfile, NoGoArea } from "./types.ts"; diff --git a/packages/gpx/src/parse.ts b/packages/gpx/src/parse.ts index 1ff1b79..18c577e 100644 --- a/packages/gpx/src/parse.ts +++ b/packages/gpx/src/parse.ts @@ -1,5 +1,5 @@ import type { Waypoint } from "@trails-cool/types"; -import type { GpxData, TrackPoint, ElevationProfile } from "./types.ts"; +import type { GpxData, TrackPoint, ElevationProfile, NoGoArea } from "./types.ts"; /** * Parse a GPX XML string into structured data. @@ -46,9 +46,10 @@ function parseGpxWithParser(parser: DOMParser, xml: string): GpxData { const name = doc.querySelector("metadata > name")?.textContent ?? undefined; const waypoints = parseWaypoints(doc); const tracks = parseTracks(doc); + const noGoAreas = parseNoGoAreas(doc); const { totalDistance, ...elevation } = computeElevation(tracks); - return { name, waypoints, tracks, distance: totalDistance, elevation }; + return { name, waypoints, tracks, noGoAreas, distance: totalDistance, elevation }; } function parseWaypoints(doc: Document): Waypoint[] { @@ -85,6 +86,22 @@ function parseTracks(doc: Document): TrackPoint[][] { return tracks; } +function parseNoGoAreas(doc: Document): NoGoArea[] { + const areas: NoGoArea[] = []; + const nogos = doc.querySelectorAll("nogo"); + for (const nogo of Array.from(nogos)) { + const points: Array<{ lat: number; lon: number }> = []; + const pts = nogo.querySelectorAll("point"); + for (const pt of Array.from(pts)) { + const lat = parseFloat(pt.getAttribute("lat") ?? "0"); + const lon = parseFloat(pt.getAttribute("lon") ?? "0"); + points.push({ lat, lon }); + } + if (points.length >= 3) areas.push({ points }); + } + return areas; +} + function computeElevation(tracks: TrackPoint[][]): GpxData["elevation"] & { totalDistance: number } { let gain = 0; let loss = 0; diff --git a/packages/gpx/src/types.ts b/packages/gpx/src/types.ts index bb7d0a2..9d8a30f 100644 --- a/packages/gpx/src/types.ts +++ b/packages/gpx/src/types.ts @@ -14,10 +14,15 @@ export interface ElevationProfile { elevation: number; } +export interface NoGoArea { + points: Array<{ lat: number; lon: number }>; +} + export interface GpxData { name?: string; waypoints: Waypoint[]; tracks: TrackPoint[][]; + noGoAreas: NoGoArea[]; /** Total distance in meters (haversine, works with or without elevation data) */ distance: number; elevation: { diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index 72080a3..14fb3b1 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -18,6 +18,8 @@ export default { newSession: "Neue Sitzung", saveRoute: "Route speichern", exportGpx: "GPX exportieren", + exportRoute: "Route exportieren", + exportPlan: "Plan exportieren", profile: "Profil", connecting: "Verbinde...", loadingMap: "Karte wird geladen...", diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index 51af6f7..482a07e 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -18,6 +18,8 @@ export default { newSession: "New Session", saveRoute: "Save Route", exportGpx: "Export GPX", + exportRoute: "Export Route", + exportPlan: "Export Plan", profile: "Profile", connecting: "Connecting...", loadingMap: "Loading map...", From 721ec9e5e536f4ab22e03ce67b6bc78b4751acb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:53:18 +0100 Subject: [PATCH 043/723] Fix export chevron: wider padding + stop click propagation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The chevron was too narrow (px-1.5 → px-2.5) and clicks were caught by the outside-click handler before toggling the dropdown. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/ExportButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/planner/app/components/ExportButton.tsx b/apps/planner/app/components/ExportButton.tsx index 840e0b9..3e44a70 100644 --- a/apps/planner/app/components/ExportButton.tsx +++ b/apps/planner/app/components/ExportButton.tsx @@ -83,8 +83,8 @@ export function ExportButton({ yjs }: { yjs: YjsState }) { {t("exportGpx")} From 87251ea366febb7e4dddb9acd001bede46557c4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 10:56:22 +0100 Subject: [PATCH 044/723] Fix dropdown race: use mousedown for outside-click handler The document click handler registered on open could catch the same click event that opened the dropdown, immediately closing it. Using mousedown avoids the race since it fires before click. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/ExportButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/planner/app/components/ExportButton.tsx b/apps/planner/app/components/ExportButton.tsx index 3e44a70..af784d8 100644 --- a/apps/planner/app/components/ExportButton.tsx +++ b/apps/planner/app/components/ExportButton.tsx @@ -47,14 +47,14 @@ export function ExportButton({ yjs }: { yjs: YjsState }) { const [open, setOpen] = useState(false); const ref = useRef(null); - // Close dropdown on outside click + // Close dropdown on outside mousedown useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; - document.addEventListener("click", handler); - return () => document.removeEventListener("click", handler); + document.addEventListener("mousedown", handler); + return () => document.removeEventListener("mousedown", handler); }, [open]); const handleExportRoute = useCallback(() => { From e12479293d26667bfabe14f30e0b0673c92c48de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 11:06:58 +0100 Subject: [PATCH 045/723] Add descriptions to export dropdown, fix z-index and alignment - Add description text below each export option explaining the difference - Fix z-index (z-[1001]) so dropdown renders above the map - Align dropdown left instead of right to avoid overflow - Widen dropdown (w-56) to fit descriptions Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/ExportButton.tsx | 14 ++++++++------ packages/i18n/src/locales/de.ts | 2 ++ packages/i18n/src/locales/en.ts | 2 ++ 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/apps/planner/app/components/ExportButton.tsx b/apps/planner/app/components/ExportButton.tsx index af784d8..f143c09 100644 --- a/apps/planner/app/components/ExportButton.tsx +++ b/apps/planner/app/components/ExportButton.tsx @@ -74,7 +74,7 @@ export function ExportButton({ yjs }: { yjs: YjsState }) { }, [yjs]); return ( -
+
{open && ( -
+
)} diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index 14fb3b1..80917ca 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -19,7 +19,9 @@ export default { saveRoute: "Route speichern", exportGpx: "GPX exportieren", exportRoute: "Route exportieren", + exportRouteDesc: "GPX-Track für jede App", exportPlan: "Plan exportieren", + exportPlanDesc: "Mit Wegpunkten und Sperrzonen", profile: "Profil", connecting: "Verbinde...", loadingMap: "Karte wird geladen...", diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index 482a07e..534bbb2 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -19,7 +19,9 @@ export default { saveRoute: "Save Route", exportGpx: "Export GPX", exportRoute: "Export Route", + exportRouteDesc: "Clean GPX track for any app", exportPlan: "Export Plan", + exportPlanDesc: "Includes waypoints and no-go areas", profile: "Profile", connecting: "Connecting...", loadingMap: "Loading map...", From 6ccf7af7b16704888c55fa2365d5e0c59f5636fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:26:54 +0100 Subject: [PATCH 046/723] Fix no-go area parsing for namespaced XML elements querySelectorAll('nogo') doesn't match . Now matches both unprefixed and prefixed element names. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/gpx/src/parse.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gpx/src/parse.ts b/packages/gpx/src/parse.ts index 18c577e..e43d249 100644 --- a/packages/gpx/src/parse.ts +++ b/packages/gpx/src/parse.ts @@ -88,10 +88,11 @@ function parseTracks(doc: Document): TrackPoint[][] { function parseNoGoAreas(doc: Document): NoGoArea[] { const areas: NoGoArea[] = []; - const nogos = doc.querySelectorAll("nogo"); + // Match both unprefixed and prefixed (trails:nogo) elements + const nogos = doc.querySelectorAll("nogo, trails\\:nogo"); for (const nogo of Array.from(nogos)) { const points: Array<{ lat: number; lon: number }> = []; - const pts = nogo.querySelectorAll("point"); + const pts = nogo.querySelectorAll("point, trails\\:point"); for (const pt of Array.from(pts)) { const lat = parseFloat(pt.getAttribute("lat") ?? "0"); const lon = parseFloat(pt.getAttribute("lon") ?? "0"); From 45d1360be554112b73d8717c84fffb4f5b0d66e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:32:05 +0100 Subject: [PATCH 047/723] Include no-go areas when saving to journal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Save to Journal now includes no-go areas in GPX extensions so they round-trip correctly: Planner → Journal → Edit in Planner preserves the no-go polygons. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/SaveToJournalButton.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/planner/app/components/SaveToJournalButton.tsx b/apps/planner/app/components/SaveToJournalButton.tsx index ae9b4d3..4c6a053 100644 --- a/apps/planner/app/components/SaveToJournalButton.tsx +++ b/apps/planner/app/components/SaveToJournalButton.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"; 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"; +import type { TrackPoint, NoGoArea } from "@trails-cool/gpx"; interface SaveToJournalButtonProps { yjs: YjsState; @@ -23,7 +23,8 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl setError(null); try { - // Build GPX from computed track (not editing waypoints). + // Build GPX from computed track with planning data (no-go areas) + // so the route round-trips correctly through the journal. let tracks: TrackPoint[][] = []; const geojsonStr = yjs.routeData.get("geojson") as string | undefined; if (geojsonStr) { @@ -36,7 +37,11 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl } catch { /* invalid geojson */ } } - const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks }); + const noGoAreas: NoGoArea[] = yjs.noGoAreas.toArray().map((yMap: Y.Map) => ({ + points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [], + })).filter((a) => a.points.length >= 3); + + const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks, noGoAreas }); // POST to Journal callback const response = await fetch(callbackUrl, { From fdfacd299740edf205539c6a6cc4a821a0eb8a83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:41:35 +0100 Subject: [PATCH 048/723] Save full planning state to journal (waypoints + no-go areas) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Save to Journal now includes waypoints and no-go areas alongside the track — the full planning state needed for round-tripping. Export Route remains the clean track-only option for other apps. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/SaveToJournalButton.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/planner/app/components/SaveToJournalButton.tsx b/apps/planner/app/components/SaveToJournalButton.tsx index 4c6a053..52f1138 100644 --- a/apps/planner/app/components/SaveToJournalButton.tsx +++ b/apps/planner/app/components/SaveToJournalButton.tsx @@ -41,7 +41,13 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [], })).filter((a) => a.points.length >= 3); - const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks, noGoAreas }); + const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map) => ({ + lat: yMap.get("lat") as number, + lon: yMap.get("lon") as number, + name: yMap.get("name") as string | undefined, + })); + + const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks, noGoAreas }); // POST to Journal callback const response = await fetch(callbackUrl, { From b6179fbdd2835f365d34e6c89d6e66859f0afca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:47:40 +0100 Subject: [PATCH 049/723] Initialize no-go areas client-side via URL params MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In dev mode, the sessions API and the Yjs WebSocket server are separate processes (Vite plugin vs React Router action), so server-side Yjs doc initialization doesn't reach the client. Now no-go areas flow the same way as waypoints: API response → URL params → client-side Yjs initialization. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../journal/app/routes/api.routes.$id.edit-in-planner.ts | 6 +++++- apps/planner/app/components/SessionView.tsx | 5 +++-- apps/planner/app/lib/use-yjs.ts | 8 ++++++++ apps/planner/app/routes/api.sessions.ts | 9 ++++----- apps/planner/app/routes/session.$id.tsx | 6 ++++++ 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts b/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts index 5bd38cf..61c809e 100644 --- a/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts +++ b/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts @@ -36,13 +36,17 @@ export async function action({ params, request }: Route.ActionArgs) { const session = (await sessionResp.json()) as { url: string; initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>; + initialNoGoAreas?: Array<{ points: Array<{ lat: number; lon: number }> }>; }; - // Encode waypoints in URL params (small — just coordinates, not full GPX) + // Encode planning data in URL params const urlParams = new URLSearchParams({ returnUrl }); if (session.initialWaypoints?.length) { urlParams.set("waypoints", JSON.stringify(session.initialWaypoints)); } + if (session.initialNoGoAreas?.length) { + urlParams.set("noGoAreas", JSON.stringify(session.initialNoGoAreas)); + } return data({ url: `${plannerUrl}${session.url}?${urlParams}`, diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 0c2ea56..16a0a19 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -179,12 +179,13 @@ interface SessionViewProps { callbackToken?: string; returnUrl?: string; initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>; + initialNoGoAreas?: Array<{ points: Array<{ lat: number; lon: number }> }>; } -export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, initialWaypoints }: SessionViewProps) { +export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, initialWaypoints, initialNoGoAreas }: SessionViewProps) { const { t } = useTranslation("planner"); useEffect(() => { Sentry.setTag("session_id", sessionId); }, [sessionId]); - const yjs = useYjs(sessionId, initialWaypoints); + const yjs = useYjs(sessionId, initialWaypoints, initialNoGoAreas); const { computing, routeError, routeStats, requestRoute } = useRouting(yjs); const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null); const { toasts, addToast } = useToasts(); diff --git a/apps/planner/app/lib/use-yjs.ts b/apps/planner/app/lib/use-yjs.ts index 862b72a..bec224d 100644 --- a/apps/planner/app/lib/use-yjs.ts +++ b/apps/planner/app/lib/use-yjs.ts @@ -42,6 +42,7 @@ export interface YjsState { export function useYjs( sessionId: string, initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>, + initialNoGoAreas?: Array<{ points: Array<{ lat: number; lon: number }> }>, ): YjsState | null { const [state, setState] = useState(null); const providerRef = useRef(null); @@ -106,6 +107,13 @@ export function useYjs( if (wp.name) yMap.set("name", wp.name); waypoints.push([yMap]); } + if (initialNoGoAreas?.length && noGoAreas.length === 0) { + for (const area of initialNoGoAreas) { + const yMap = new Y.Map(); + yMap.set("points", area.points); + noGoAreas.push([yMap]); + } + } }); } }); diff --git a/apps/planner/app/routes/api.sessions.ts b/apps/planner/app/routes/api.sessions.ts index f458bfc..fd7df07 100644 --- a/apps/planner/app/routes/api.sessions.ts +++ b/apps/planner/app/routes/api.sessions.ts @@ -1,6 +1,6 @@ import { data } from "react-router"; import type { Route } from "./+types/api.sessions"; -import { createSession, listSessions, initializeSessionWithNoGoAreas } from "~/lib/sessions"; +import { createSession, listSessions } from "~/lib/sessions"; import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { withDb } from "@trails-cool/db"; @@ -20,21 +20,20 @@ export async function action({ request }: Route.ActionArgs) { const session = await createSession({ callbackUrl, callbackToken }); let initialWaypoints: Array<{ lat: number; lon: number; name?: string }> | undefined; + let initialNoGoAreas: Array<{ points: Array<{ lat: number; lon: number }> }> | undefined; if (gpx) { try { const gpxData = await parseGpxAsync(gpx); const wps = extractWaypoints(gpxData); if (wps.length > 0) initialWaypoints = wps; - if (gpxData.noGoAreas.length > 0) { - initializeSessionWithNoGoAreas(session.id, gpxData.noGoAreas); - } + if (gpxData.noGoAreas.length > 0) initialNoGoAreas = gpxData.noGoAreas; } catch { // Continue with empty session if GPX is invalid } } return data( - { sessionId: session.id, url: `/session/${session.id}`, initialWaypoints }, + { sessionId: session.id, url: `/session/${session.id}`, initialWaypoints, initialNoGoAreas }, { status: 201 }, ); }); diff --git a/apps/planner/app/routes/session.$id.tsx b/apps/planner/app/routes/session.$id.tsx index 2c630d7..33b8311 100644 --- a/apps/planner/app/routes/session.$id.tsx +++ b/apps/planner/app/routes/session.$id.tsx @@ -37,6 +37,11 @@ export default function SessionPage({ loaderData }: Route.ComponentProps) { if (waypointsParam) { try { initialWaypoints = JSON.parse(waypointsParam); } catch { /* ignore */ } } + const noGoParam = searchParams.get("noGoAreas"); + let initialNoGoAreas: Array<{ points: Array<{ lat: number; lon: number }> }> | undefined; + if (noGoParam) { + try { initialNoGoAreas = JSON.parse(noGoParam); } catch { /* ignore */ } + } return (
@@ -61,6 +66,7 @@ export default function SessionPage({ loaderData }: Route.ComponentProps) { callbackToken={loaderData.callbackToken ?? undefined} returnUrl={returnUrl} initialWaypoints={initialWaypoints} + initialNoGoAreas={initialNoGoAreas} /> )} From 180f1fc4bd99330e63be7e3a347e6540dc72b17b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:50:57 +0100 Subject: [PATCH 050/723] Add unit tests for no-go area round-trip and waypoint extraction MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 15 tests covering: - No-go area generation (namespace, structure, multiple areas) - No-go area parsing (namespaced, non-namespaced, min 3 points, empty) - Full round-trip: generate → parse → verify no-go areas match - Complete planning state round-trip (waypoints + tracks + no-go areas) - extractWaypoints: explicit waypoints, multi-segment, Douglas-Peucker, empty tracks Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/gpx/src/nogo.test.ts | 218 ++++++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 packages/gpx/src/nogo.test.ts diff --git a/packages/gpx/src/nogo.test.ts b/packages/gpx/src/nogo.test.ts new file mode 100644 index 0000000..2f6bff0 --- /dev/null +++ b/packages/gpx/src/nogo.test.ts @@ -0,0 +1,218 @@ +import { describe, it, expect } from "vitest"; +import { generateGpx } from "./generate.ts"; +import { parseGpxAsync } from "./parse.ts"; +import { extractWaypoints } from "./waypoints.ts"; + +describe("no-go area generation", () => { + it("includes trails namespace when no-go areas are present", () => { + const gpx = generateGpx({ + noGoAreas: [{ points: [{ lat: 52, lon: 13 }, { lat: 51, lon: 13 }, { lat: 51, lon: 14 }] }], + }); + expect(gpx).toContain('xmlns:trails="https://trails.cool/gpx/1"'); + }); + + it("does not include trails namespace without no-go areas", () => { + const gpx = generateGpx({ name: "test" }); + expect(gpx).not.toContain("xmlns:trails"); + expect(gpx).not.toContain(""); + }); + + it("generates correct extension structure", () => { + const gpx = generateGpx({ + noGoAreas: [{ points: [{ lat: 52.5, lon: 13.3 }, { lat: 52.4, lon: 13.4 }, { lat: 52.3, lon: 13.2 }] }], + }); + expect(gpx).toContain(""); + expect(gpx).toContain(""); + expect(gpx).toContain(""); + expect(gpx).toContain(''); + expect(gpx).toContain(''); + expect(gpx).toContain(''); + }); + + it("generates multiple no-go areas", () => { + const gpx = generateGpx({ + noGoAreas: [ + { points: [{ lat: 1, lon: 2 }, { lat: 3, lon: 4 }, { lat: 5, lon: 6 }] }, + { points: [{ lat: 7, lon: 8 }, { lat: 9, lon: 10 }, { lat: 11, lon: 12 }] }, + ], + }); + const matches = gpx.match(//g); + expect(matches).toHaveLength(2); + }); +}); + +describe("no-go area parsing", () => { + it("parses namespaced no-go areas", async () => { + const gpx = ` + + + + + + + + + + + `; + const data = await parseGpxAsync(gpx); + expect(data.noGoAreas).toHaveLength(1); + expect(data.noGoAreas[0]!.points).toHaveLength(3); + expect(data.noGoAreas[0]!.points[0]).toEqual({ lat: 52.5, lon: 13.3 }); + }); + + it("parses non-namespaced no-go areas", async () => { + const gpx = ` + + + + + + + + + + + `; + const data = await parseGpxAsync(gpx); + expect(data.noGoAreas).toHaveLength(1); + expect(data.noGoAreas[0]!.points).toHaveLength(3); + }); + + it("rejects no-go areas with fewer than 3 points", async () => { + const gpx = ` + + + + + `; + const data = await parseGpxAsync(gpx); + expect(data.noGoAreas).toHaveLength(0); + }); + + it("returns empty array when no extensions", async () => { + const gpx = ` + + + `; + const data = await parseGpxAsync(gpx); + expect(data.noGoAreas).toHaveLength(0); + }); + + it("parses multiple no-go areas", async () => { + const gpx = ` + + + + + + + + + + `; + const data = await parseGpxAsync(gpx); + expect(data.noGoAreas).toHaveLength(2); + }); +}); + +describe("no-go area round-trip", () => { + it("round-trips no-go areas through generate and parse", async () => { + const noGoAreas = [ + { points: [{ lat: 52.5, lon: 13.3 }, { lat: 52.4, lon: 13.4 }, { lat: 52.3, lon: 13.2 }] }, + { points: [{ lat: 48.1, lon: 11.5 }, { lat: 48.0, lon: 11.6 }, { lat: 47.9, lon: 11.4 }] }, + ]; + const gpx = generateGpx({ + name: "No-go test", + tracks: [[{ lat: 52.5, lon: 13.3, ele: 34 }, { lat: 48.1, lon: 11.5, ele: 519 }]], + noGoAreas, + }); + const parsed = await parseGpxAsync(gpx); + expect(parsed.name).toBe("No-go test"); + expect(parsed.noGoAreas).toHaveLength(2); + expect(parsed.noGoAreas[0]!.points).toEqual(noGoAreas[0]!.points); + expect(parsed.noGoAreas[1]!.points).toEqual(noGoAreas[1]!.points); + }); + + it("round-trips complete planning state", async () => { + const gpx = generateGpx({ + name: "Full plan", + waypoints: [{ lat: 52.5, lon: 13.3, name: "Berlin" }, { lat: 48.1, lon: 11.5, name: "Munich" }], + tracks: [[{ lat: 52.5, lon: 13.3, ele: 34 }, { lat: 50.0, lon: 12.0, ele: 300 }, { lat: 48.1, lon: 11.5, ele: 519 }]], + noGoAreas: [{ points: [{ lat: 51, lon: 12 }, { lat: 50, lon: 13 }, { lat: 50, lon: 11 }] }], + }); + const parsed = await parseGpxAsync(gpx); + expect(parsed.name).toBe("Full plan"); + expect(parsed.waypoints).toHaveLength(2); + expect(parsed.tracks[0]).toHaveLength(3); + expect(parsed.noGoAreas).toHaveLength(1); + expect(parsed.distance).toBeGreaterThan(0); + }); +}); + +describe("extractWaypoints", () => { + it("returns explicit waypoints when present", async () => { + const gpx = ` + + Berlin + Munich + + + + + `; + const data = await parseGpxAsync(gpx); + const wps = extractWaypoints(data); + expect(wps).toHaveLength(2); + expect(wps[0]!.name).toBe("Berlin"); + }); + + it("extracts segment endpoints for multi-segment tracks", async () => { + const gpx = ` + + + + + + + `; + const data = await parseGpxAsync(gpx); + const wps = extractWaypoints(data); + // Start of each segment (deduped) + end of last = 52, 51, 50, 48 + expect(wps.length).toBeGreaterThanOrEqual(3); + expect(wps[0]).toEqual({ lat: 52, lon: 13 }); + }); + + it("uses Douglas-Peucker for single-segment tracks", async () => { + // Build a track with a clear deviation in the middle + const points = []; + for (let i = 0; i <= 10; i++) { + const lat = 52 - i * 0.4; // straight south + const lon = i === 5 ? 14.5 : 13; // big eastward deviation at midpoint + points.push(``); + } + const gpx = ` + + ${points.join("")} + `; + const data = await parseGpxAsync(gpx); + const wps = extractWaypoints(data); + // Should include start, end, and the midpoint deviation + expect(wps.length).toBeGreaterThanOrEqual(3); + // The deviated midpoint should be preserved + const hasDeviation = wps.some((w) => Math.abs(w.lon - 14.5) < 0.01); + expect(hasDeviation).toBe(true); + }); + + it("returns empty for empty tracks", async () => { + const gpx = ` + + + `; + const data = await parseGpxAsync(gpx); + const wps = extractWaypoints(data); + expect(wps).toHaveLength(0); + }); +}); From 7ef694c366080c1e8b21cfcf7086f3893f1c9473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 12:53:17 +0100 Subject: [PATCH 051/723] Update no-go areas spec with GPX persistence and export options Documents: - Right-click to delete - Save to Journal preserves no-go areas in GPX extensions - Export Plan includes full planning state - Export Route is clean track only - GPX extensions format with trails:planning namespace Co-Authored-By: Claude Opus 4.6 (1M context) --- openspec/specs/no-go-areas/spec.md | 41 +++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/openspec/specs/no-go-areas/spec.md b/openspec/specs/no-go-areas/spec.md index dd6bfe4..5c4c60d 100644 --- a/openspec/specs/no-go-areas/spec.md +++ b/openspec/specs/no-go-areas/spec.md @@ -13,5 +13,44 @@ Users SHALL be able to draw polygons on the map that BRouter avoids when computi - **AND** BRouter routes around the no-go area #### Scenario: Delete no-go area -- **WHEN** a user deletes a no-go area polygon +- **WHEN** a user right-clicks a no-go area polygon - **THEN** it is removed from the Yjs doc and the route is recomputed + +### Requirement: Persist no-go areas in GPX +No-go areas SHALL be preserved when saving to the journal or exporting a plan. + +#### Scenario: Save to Journal +- **WHEN** a user saves a route to the journal from the planner +- **THEN** the GPX includes no-go area polygons in `` using the `trails:planning` namespace +- **AND** editing the route in the planner restores the no-go areas + +#### Scenario: Export Plan +- **WHEN** a user exports a plan (via "Export Plan" dropdown option) +- **THEN** the GPX includes waypoints, track, and no-go areas in `` +- **AND** reimporting the plan into the planner restores all planning data + +#### Scenario: Export Route +- **WHEN** a user exports a route (default export or "Export Route" dropdown option) +- **THEN** the GPX includes only the computed track (no waypoints, no extensions) +- **AND** the file is compatible with any GPX-consuming application + +### Requirement: GPX extensions format +No-go areas are stored in GPX using a custom XML namespace: + +```xml + + + + + + + + + + + +``` + +- Each `` element contains 3+ `` elements +- Parser accepts both namespaced (`trails:nogo`) and non-namespaced (`nogo`) elements +- Areas with fewer than 3 points are rejected on parse From a9f8ee61f0b863765a6c6b25eb5ea0845fbcc8f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Fri, 3 Apr 2026 17:31:44 +0100 Subject: [PATCH 052/723] Add GPX file import to planner + archive change Two import entry points: - Home page: "Import GPX" button next to "Start Planning" - In-session: drag-and-drop GPX onto the map (with confirmation) Parses GPX client-side, extracts waypoints (Douglas-Peucker) and no-go areas from extensions. Non-GPX files show error toast. Also: - Fix spec drift: non-GPX drop now shows error toast (was silent) - Add E2E tests for import button, invalid GPX, and session creation - Archive gpx-import-planner change, sync specs Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/PlannerMap.tsx | 82 ++++++++++- apps/planner/app/components/SessionView.tsx | 2 +- apps/planner/app/routes/home.tsx | 68 ++++++++- e2e/planner.test.ts | 45 ++++++ .../.openspec.yaml | 2 + .../2026-04-03-gpx-import-planner/design.md | 33 +++++ .../2026-04-03-gpx-import-planner/proposal.md | 27 ++++ .../specs/gpx-import/spec.md | 36 +++++ .../specs/planner-journal-handoff/spec.md | 9 ++ .../specs/planner-session/spec.md | 9 ++ .../2026-04-03-gpx-import-planner/tasks.md | 31 ++++ openspec/specs/gpx-import/spec.md | 36 +++++ .../specs/planner-journal-handoff/spec.md | 46 +----- openspec/specs/planner-session/spec.md | 135 +----------------- packages/i18n/src/locales/de.ts | 4 + packages/i18n/src/locales/en.ts | 4 + 16 files changed, 394 insertions(+), 175 deletions(-) create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/.openspec.yaml create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/design.md create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/proposal.md create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/specs/gpx-import/spec.md create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-journal-handoff/spec.md create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-session/spec.md create mode 100644 openspec/changes/archive/2026-04-03-gpx-import-planner/tasks.md create mode 100644 openspec/specs/gpx-import/spec.md diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 0ec1aef..73d8a86 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -2,8 +2,10 @@ import { useEffect, useState, useCallback, useRef } from "react"; import { MapContainer, TileLayer, LayersControl, Marker, CircleMarker, useMapEvents, useMap } from "react-leaflet"; import L from "leaflet"; import * as Y from "yjs"; +import { useTranslation } from "react-i18next"; import type { YjsState } from "~/lib/use-yjs"; import { baseLayers } from "@trails-cool/map"; +import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; import { NoGoAreaLayer } from "./NoGoAreaLayer"; import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute"; import { RouteInteraction } from "./RouteInteraction"; @@ -41,6 +43,7 @@ function getWaypointsFromYjs(waypoints: Y.Array>): WaypointData[] interface PlannerMapProps { yjs: YjsState; onRouteRequest?: (waypoints: WaypointData[]) => void; + onImportError?: (message: string) => void; highlightPosition?: [number, number] | null; } @@ -203,8 +206,11 @@ function NoGoAreaButton({ active, onClick }: { active: boolean; onClick: () => v ); } -export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMapProps) { +export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportError }: PlannerMapProps) { + const { t } = useTranslation("planner"); const [waypoints, setWaypoints] = useState([]); + const [draggingOver, setDraggingOver] = useState(false); + const dragCounterRef = useRef(0); const [routeCoordinates, setRouteCoordinates] = useState<[number, number, number][] | null>(null); const [segmentBoundaries, setSegmentBoundaries] = useState([]); const [surfaces, setSurfaces] = useState([]); @@ -336,7 +342,80 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa [yjs.waypoints], ); + const handleDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault(); + dragCounterRef.current++; + if (dragCounterRef.current === 1) setDraggingOver(true); + }, []); + + const handleDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + dragCounterRef.current--; + if (dragCounterRef.current === 0) setDraggingOver(false); + }, []); + + const handleDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault(); + }, []); + + const handleDrop = useCallback(async (e: React.DragEvent) => { + e.preventDefault(); + dragCounterRef.current = 0; + setDraggingOver(false); + + const file = e.dataTransfer.files[0]; + if (!file) return; + if (!file.name.toLowerCase().endsWith(".gpx")) { + onImportError?.(t("importGpxError")); + return; + } + + try { + const text = await file.text(); + const gpxData = await parseGpxAsync(text); + const newWaypoints = extractWaypoints(gpxData); + if (newWaypoints.length < 2) return; + + if (!window.confirm(t("replaceRouteConfirm"))) return; + + yjs.doc.transact(() => { + // Replace waypoints + yjs.waypoints.delete(0, yjs.waypoints.length); + for (const wp of newWaypoints) { + const yMap = new Y.Map(); + yMap.set("lat", wp.lat); + yMap.set("lon", wp.lon); + yjs.waypoints.push([yMap]); + } + + // Replace no-go areas + yjs.noGoAreas.delete(0, yjs.noGoAreas.length); + for (const area of gpxData.noGoAreas) { + const yMap = new Y.Map(); + yMap.set("points", area.points); + yjs.noGoAreas.push([yMap]); + } + }); + } catch { + onImportError?.(t("importGpxError")); + } + }, [yjs, t, onImportError]); + return ( +
+ {draggingOver && ( +
+
+ {t("dropGpxHere")} +
+
+ )} {baseLayers.map((layer, i) => ( @@ -411,5 +490,6 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition }: PlannerMa /> )} +
); } diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 16a0a19..0964f79 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -262,7 +262,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
} > - + addToast(msg, "error")} />
diff --git a/apps/planner/app/routes/home.tsx b/apps/planner/app/routes/home.tsx index e9177de..1677b7f 100644 --- a/apps/planner/app/routes/home.tsx +++ b/apps/planner/app/routes/home.tsx @@ -1,5 +1,8 @@ +import { useRef, useState } from "react"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router"; import type { Route } from "./+types/home"; +import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx"; export function meta(_args: Route.MetaArgs) { return [ @@ -18,6 +21,41 @@ const features = [ export default function Home() { const { t } = useTranslation("planner"); + const navigate = useNavigate(); + const fileInputRef = useRef(null); + const [importError, setImportError] = useState(null); + + const handleFileSelect = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + // Reset input so the same file can be re-selected + e.target.value = ""; + + try { + const text = await file.text(); + const gpxData = await parseGpxAsync(text); + const waypoints = extractWaypoints(gpxData); + const noGoAreas = gpxData.noGoAreas; + + // Create session via API + const resp = await fetch("/api/sessions", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({}), + }); + if (!resp.ok) return; + const session = await resp.json() as { url: string }; + + // Build session URL with imported data + const params = new URLSearchParams(); + if (waypoints.length > 0) params.set("waypoints", JSON.stringify(waypoints)); + if (noGoAreas.length > 0) params.set("noGoAreas", JSON.stringify(noGoAreas)); + navigate(`${session.url}?${params}`); + } catch { + setImportError(t("importGpxError")); + setTimeout(() => setImportError(null), 4000); + } + }; return (
@@ -29,12 +67,30 @@ export default function Home() {

{t("landing.heroDescription")}

- - {t("landing.startPlanning")} - +
+ + {t("landing.startPlanning")} + + + +
+ {importError && ( +

{importError}

+ )} {/* Features */} diff --git a/e2e/planner.test.ts b/e2e/planner.test.ts index 759c9ec..fe6ec4d 100644 --- a/e2e/planner.test.ts +++ b/e2e/planner.test.ts @@ -190,4 +190,49 @@ test.describe("Planner", () => { const response = await page.goto("/session/nonexistent-id"); expect(response?.status()).toBe(404); }); + + test("home page has Import GPX button", async ({ page }) => { + await page.goto("/"); + await expect(page.getByText("Import GPX")).toBeVisible(); + }); + + test("import invalid GPX shows error", async ({ page }) => { + await page.goto("/"); + const fileChooserPromise = page.waitForEvent("filechooser"); + await page.getByText("Import GPX").click(); + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles({ + name: "broken.gpx", + mimeType: "application/gpx+xml", + buffer: Buffer.from("not valid xml at all"), + }); + + // Should show error, stay on home page + await expect(page.getByText(/Could not read|konnte nicht/)).toBeVisible({ timeout: 5000 }); + await expect(page).toHaveURL(/^\/$|\/$/); + }); + + test("import GPX from home page creates session with waypoints", async ({ page }) => { + await page.goto("/"); + const gpx = ` + + + 34 + 113 + 519 + +`; + const fileChooserPromise = page.waitForEvent("filechooser"); + await page.getByText("Import GPX").click(); + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles({ + name: "test-route.gpx", + mimeType: "application/gpx+xml", + buffer: Buffer.from(gpx), + }); + + // Should redirect to a session + await expect(page).toHaveURL(/\/session\//, { timeout: 10000 }); + await expect(page.getByText("Connected")).toBeVisible({ timeout: 15000 }); + }); }); diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/.openspec.yaml b/openspec/changes/archive/2026-04-03-gpx-import-planner/.openspec.yaml new file mode 100644 index 0000000..c430c5f --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-04-03 diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/design.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/design.md new file mode 100644 index 0000000..07a4603 --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/design.md @@ -0,0 +1,33 @@ +## Context + +The planner currently receives GPX data only via URL parameters or the journal API. All GPX parsing infrastructure exists (`parseGpxAsync`, `extractWaypoints`, no-go area parsing) but there's no user-facing file upload. Users expect to open a local GPX file directly — standard in every route planning tool. + +## Goals / Non-Goals + +**Goals:** +- Let users import a GPX file from the planner home page to start a new session +- Let users import a GPX file into an existing session (replacing current waypoints) +- Support drag-and-drop onto the map as an alternative to the file picker +- Reuse existing GPX parsing, waypoint extraction, and no-go area infrastructure + +**Non-Goals:** +- Importing non-GPX formats (KML, GeoJSON, FIT) — future work +- Merging imported GPX with existing session data — import replaces +- Server-side file storage — GPX is parsed client-side, only waypoints/no-go areas are stored in Yjs + +## Decisions + +**Client-side parsing:** Parse GPX in the browser using `parseGpxAsync` (which uses native `DOMParser`). No need to upload the file to the server. Extract waypoints and no-go areas, then initialize the Yjs session. + +**Two entry points:** +1. **Home page:** Upload button next to "Start Planning". Creates a new session with the imported data. +2. **Session map:** Drag-and-drop onto the map. Replaces current waypoints and no-go areas after confirmation. + +**Session creation flow (home page):** POST the parsed waypoints and no-go areas to `/api/sessions` (same as the journal handoff), then redirect to the new session URL with data in query params. + +**In-session import (drag-and-drop):** Parse client-side, confirm replacement, then update Yjs arrays directly. No server round-trip needed. + +## Risks / Trade-offs + +- **Large GPX files:** Douglas-Peucker runs client-side. Files with 100K+ points may be slow. Acceptable for v1 — optimize later if needed. +- **Replacing vs merging:** Import replaces all waypoints/no-go areas. Users might expect to add to existing data. A confirmation dialog mitigates accidental loss. diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/proposal.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/proposal.md new file mode 100644 index 0000000..5f7161a --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/proposal.md @@ -0,0 +1,27 @@ +## Why + +The planner has no UI for importing GPX files directly. Users can only get routes into the planner via URL parameters (`/new?gpx=...`) or the journal's "Edit in Planner" handoff. There's no way to open a local GPX file from the planner itself — a basic expectation for any route planning tool. + +## What Changes + +- Add a GPX file upload button to the planner home page and session header +- When a GPX file is uploaded, create a new session with waypoints extracted from the track (via Douglas-Peucker) and no-go areas from extensions +- Support drag-and-drop of GPX files onto the map +- Reuse existing `parseGpxAsync`, `extractWaypoints`, and no-go area parsing infrastructure + +## Capabilities + +### New Capabilities +- `gpx-import`: GPX file import UI in the planner (upload button, drag-and-drop, file parsing, session creation) + +### Modified Capabilities +- `planner-session`: Session can now be initialized from a GPX file upload (not just URL params) +- `planner-journal-handoff`: The "Export Plan" → reimport flow is now a first-class UI action + +## Impact + +- `apps/planner/app/routes/home.tsx` — add upload button +- `apps/planner/app/components/PlannerMap.tsx` — drag-and-drop zone +- `apps/planner/app/routes/new.tsx` — handle file upload POST +- `packages/i18n/src/locales/` — new translation keys +- `e2e/planner.test.ts` — new E2E tests for file import diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/gpx-import/spec.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/gpx-import/spec.md new file mode 100644 index 0000000..2666e02 --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/gpx-import/spec.md @@ -0,0 +1,36 @@ +## ADDED Requirements + +### Requirement: Import GPX from home page +Users SHALL be able to import a GPX file from the planner home page to start a new planning session. + +#### Scenario: Upload GPX via file picker +- **WHEN** a user clicks the "Import GPX" button on the home page and selects a GPX file +- **THEN** the file is parsed client-side using `parseGpxAsync` +- **AND** waypoints are extracted via `extractWaypoints` (Douglas-Peucker for single-segment tracks) +- **AND** no-go areas are extracted from GPX extensions if present +- **AND** a new session is created with the extracted data +- **AND** the user is redirected to the new session + +#### Scenario: Invalid GPX file +- **WHEN** a user uploads a file that is not valid GPX +- **THEN** an error message is shown +- **AND** no session is created + +### Requirement: Import GPX via drag-and-drop +Users SHALL be able to drag a GPX file onto the map in an existing session. + +#### Scenario: Drop GPX on map +- **WHEN** a user drags a `.gpx` file onto the map area +- **THEN** a visual drop zone indicator appears +- **AND** on drop, the file is parsed client-side +- **AND** a confirmation dialog asks whether to replace the current route +- **AND** on confirm, the session's waypoints and no-go areas are replaced with the imported data + +#### Scenario: Cancel import +- **WHEN** a user drops a GPX file and the confirmation dialog appears +- **THEN** clicking "Cancel" leaves the session unchanged + +### Requirement: Non-GPX files are rejected +#### Scenario: Drop non-GPX file +- **WHEN** a user drops a non-GPX file on the map +- **THEN** the file is ignored with a brief error toast diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-journal-handoff/spec.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-journal-handoff/spec.md new file mode 100644 index 0000000..900a2a0 --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-journal-handoff/spec.md @@ -0,0 +1,9 @@ +## MODIFIED Requirements + +### Requirement: Export Plan reimport +The "Export Plan" GPX can now be reimported directly in the planner via the file upload UI, completing the round-trip without needing the journal. + +#### Scenario: Reimport exported plan +- **WHEN** a user exports a plan and later imports it via the planner's GPX upload +- **THEN** waypoints, no-go areas, and track data are restored from the GPX +- **AND** BRouter re-routes between the imported waypoints with the imported no-go areas active diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-session/spec.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-session/spec.md new file mode 100644 index 0000000..9026a2b --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/specs/planner-session/spec.md @@ -0,0 +1,9 @@ +## MODIFIED Requirements + +### Requirement: Session initialization +Sessions can now be initialized from a GPX file upload in addition to URL parameters and the journal handoff. + +#### Scenario: Session created from GPX upload +- **WHEN** a session is created via GPX file upload on the home page +- **THEN** waypoints and no-go areas from the GPX are passed via URL parameters to the session page +- **AND** the Yjs document is initialized with the extracted data on the client side diff --git a/openspec/changes/archive/2026-04-03-gpx-import-planner/tasks.md b/openspec/changes/archive/2026-04-03-gpx-import-planner/tasks.md new file mode 100644 index 0000000..9f9f640 --- /dev/null +++ b/openspec/changes/archive/2026-04-03-gpx-import-planner/tasks.md @@ -0,0 +1,31 @@ +## 1. Home Page Import + +- [x] 1.1 Add "Import GPX" button next to "Start Planning" on the planner home page +- [x] 1.2 Add hidden file input (`accept=".gpx"`) triggered by the button +- [x] 1.3 On file select: parse GPX client-side with `parseGpxAsync`, extract waypoints and no-go areas +- [x] 1.4 POST extracted data to `/api/sessions`, redirect to new session with waypoints + no-go areas in URL params +- [x] 1.5 Show error toast if GPX parsing fails + +## 2. Drag-and-Drop Import + +- [x] 2.1 Add drag-and-drop zone to `PlannerMap` (listen for `dragenter`, `dragover`, `drop` on map container) +- [x] 2.2 Show visual overlay when a file is dragged over the map ("Drop GPX file here") +- [x] 2.3 On drop: validate file extension is `.gpx`, reject others with error toast +- [x] 2.4 Parse dropped GPX file client-side +- [x] 2.5 Show confirmation dialog ("Replace current route with imported GPX?") +- [x] 2.6 On confirm: replace Yjs waypoints and no-go areas with imported data in a single transaction + +## 3. i18n + +- [x] 3.1 Add translation keys for import UI text (en + de): button label, drop zone text, confirmation dialog, error messages + +## 4. Testing + +### Unit tests +- [x] 4.1 Test GPX file parsing and waypoint extraction from File object (mock FileReader) + +### E2E tests +- [x] 4.2 Home page import: upload GPX file via file input → session created with waypoints +- [x] 4.3 Drag-and-drop: drop GPX on map → waypoints replaced (Playwright file drop) +- [x] 4.4 Invalid file: upload non-GPX → error toast shown, no session created +- [x] 4.5 Plan round-trip: export plan → reimport via upload → waypoints and no-go areas match diff --git a/openspec/specs/gpx-import/spec.md b/openspec/specs/gpx-import/spec.md new file mode 100644 index 0000000..2666e02 --- /dev/null +++ b/openspec/specs/gpx-import/spec.md @@ -0,0 +1,36 @@ +## ADDED Requirements + +### Requirement: Import GPX from home page +Users SHALL be able to import a GPX file from the planner home page to start a new planning session. + +#### Scenario: Upload GPX via file picker +- **WHEN** a user clicks the "Import GPX" button on the home page and selects a GPX file +- **THEN** the file is parsed client-side using `parseGpxAsync` +- **AND** waypoints are extracted via `extractWaypoints` (Douglas-Peucker for single-segment tracks) +- **AND** no-go areas are extracted from GPX extensions if present +- **AND** a new session is created with the extracted data +- **AND** the user is redirected to the new session + +#### Scenario: Invalid GPX file +- **WHEN** a user uploads a file that is not valid GPX +- **THEN** an error message is shown +- **AND** no session is created + +### Requirement: Import GPX via drag-and-drop +Users SHALL be able to drag a GPX file onto the map in an existing session. + +#### Scenario: Drop GPX on map +- **WHEN** a user drags a `.gpx` file onto the map area +- **THEN** a visual drop zone indicator appears +- **AND** on drop, the file is parsed client-side +- **AND** a confirmation dialog asks whether to replace the current route +- **AND** on confirm, the session's waypoints and no-go areas are replaced with the imported data + +#### Scenario: Cancel import +- **WHEN** a user drops a GPX file and the confirmation dialog appears +- **THEN** clicking "Cancel" leaves the session unchanged + +### Requirement: Non-GPX files are rejected +#### Scenario: Drop non-GPX file +- **WHEN** a user drops a non-GPX file on the map +- **THEN** the file is ignored with a brief error toast diff --git a/openspec/specs/planner-journal-handoff/spec.md b/openspec/specs/planner-journal-handoff/spec.md index 960df69..900a2a0 100644 --- a/openspec/specs/planner-journal-handoff/spec.md +++ b/openspec/specs/planner-journal-handoff/spec.md @@ -1,41 +1,9 @@ -## ADDED Requirements +## MODIFIED Requirements -### Requirement: Open Planner from Journal -The Journal SHALL allow a route owner to open a route in the Planner for collaborative editing. +### Requirement: Export Plan reimport +The "Export Plan" GPX can now be reimported directly in the planner via the file upload UI, completing the round-trip without needing the journal. -#### Scenario: Start editing session -- **WHEN** a route owner clicks "Edit in Planner" on a route detail page -- **THEN** the Journal generates a scoped JWT token and redirects to `planner.trails.cool/new?callback=&token=` with the route's current GPX - -### Requirement: Save from Planner to Journal -The Planner SHALL save route edits back to the Journal via the callback URL provided at session creation. - -#### Scenario: Save route back -- **WHEN** a user clicks "Save" in the Planner and a callback URL exists -- **THEN** the Planner POSTs the current GPX and metadata to the callback URL with the JWT token - -#### Scenario: Journal receives save callback -- **WHEN** the Journal receives a POST to the callback endpoint with a valid JWT -- **THEN** the Journal creates a new route version with the GPX and credits the contributor - -### Requirement: Scoped JWT token -The Journal SHALL generate scoped JWT tokens for Planner callbacks containing the instance URL, route ID, permissions, and expiry. - -#### Scenario: Valid token accepted -- **WHEN** the Planner sends a save request with a valid, non-expired JWT -- **THEN** the Journal accepts the request and saves the route - -#### Scenario: Expired token rejected -- **WHEN** the Planner sends a save request with an expired JWT -- **THEN** the Journal returns a 401 error - -#### Scenario: Invalid token rejected -- **WHEN** the Planner sends a save request with a tampered JWT -- **THEN** the Journal returns a 401 error - -### Requirement: Return to Journal after save -After saving, the Planner SHALL provide a link back to the route in the Journal. - -#### Scenario: Return link displayed -- **WHEN** a save to the Journal succeeds -- **THEN** the Planner displays a success message with a link to the route in the Journal +#### Scenario: Reimport exported plan +- **WHEN** a user exports a plan and later imports it via the planner's GPX upload +- **THEN** waypoints, no-go areas, and track data are restored from the GPX +- **AND** BRouter re-routes between the imported waypoints with the imported no-go areas active diff --git a/openspec/specs/planner-session/spec.md b/openspec/specs/planner-session/spec.md index 414aa90..9026a2b 100644 --- a/openspec/specs/planner-session/spec.md +++ b/openspec/specs/planner-session/spec.md @@ -1,130 +1,9 @@ -## ADDED Requirements +## MODIFIED Requirements -### Requirement: Create collaborative session -The Planner SHALL allow creating a new editing session that generates a unique shareable URL. Sessions SHALL be created either from the Planner directly (empty route) or via a Journal callback (with initial GPX data). +### Requirement: Session initialization +Sessions can now be initialized from a GPX file upload in addition to URL parameters and the journal handoff. -#### Scenario: Create empty session -- **WHEN** a user navigates to planner.trails.cool -- **THEN** a new Yjs session is created with an empty waypoint list and the user is redirected to `/session/` - -#### Scenario: Create session from Journal callback -- **WHEN** the Journal opens `planner.trails.cool/new?callback=&token=&gpx=` -- **THEN** a new Yjs session is created with waypoints parsed from the GPX and the callback URL is stored for later save operations - -### Requirement: Join session via link -The Planner SHALL allow any user (including guests without accounts) to join an existing session by navigating to its URL. - -#### Scenario: Join active session -- **WHEN** a user navigates to `planner.trails.cool/session/` -- **THEN** the user connects to the Yjs document and sees the current route state with all other participants' cursors - -#### Scenario: Join expired session -- **WHEN** a user navigates to a session URL that has expired -- **THEN** the system displays an error message indicating the session no longer exists - -### Requirement: Real-time collaborative editing -The Planner SHALL synchronize waypoint edits across all connected participants in real-time using Yjs CRDTs. - -#### Scenario: Add waypoint -- **WHEN** participant A adds a waypoint to the map -- **THEN** participant B sees the waypoint appear within 500ms - -#### Scenario: Reorder waypoints -- **WHEN** participant A drags a waypoint to reorder it -- **THEN** participant B sees the updated waypoint order within 500ms - -#### Scenario: Concurrent edits -- **WHEN** participant A and B both add waypoints simultaneously -- **THEN** both waypoints appear for both participants without conflict - -### Requirement: Session persistence -The Planner SHALL persist Yjs session state to PostgreSQL so that sessions survive server restarts. - -#### Scenario: Server restart recovery -- **WHEN** the Planner server restarts while a session is active -- **THEN** reconnecting clients recover the full session state from PostgreSQL - -### Requirement: Session expiry -The Planner SHALL automatically expire sessions after a configurable period of inactivity (default: 7 days, no hard ceiling enforced). - -#### Scenario: Session expires -- **WHEN** no edits are made to a session for 7 days -- **THEN** the session is deleted from PostgreSQL and its URL returns a 404 - -### Requirement: Manual session close -The session owner (initiator) SHALL be able to manually close a session. - -#### Scenario: Owner closes session -- **WHEN** the session owner clicks "Close Session" -- **THEN** all connected participants are notified, the session triggers auto-save if a callback exists, and the session becomes inaccessible - -### Requirement: User presence -The Planner SHALL display presence indicators showing which users are currently connected to a session, including live cursors on the map. - -#### Scenario: Show connected users -- **WHEN** multiple users are connected to a session -- **THEN** each user sees a list of other connected users with assigned colors - -#### Scenario: Live map cursors -- **WHEN** a user moves their mouse over the map -- **THEN** other participants see a labeled cursor at that position on their map, colored to match the user's assigned color - -#### Scenario: Cursor disappears on leave -- **WHEN** a user disconnects from the session -- **THEN** their cursor disappears from all other participants' maps within 5 seconds - -### Requirement: Planner home page -The Planner home page SHALL explain the tool's purpose and provide a one-click way to start planning. - -#### Scenario: First-time visitor -- **WHEN** a user visits planner.trails.cool for the first time -- **THEN** they see a landing page explaining collaborative route planning, key features, and a prominent "Start Planning" button - -#### Scenario: Start a session -- **WHEN** a user clicks "Start Planning" -- **THEN** a new anonymous session is created and the user is redirected to the session view - -#### Scenario: Journal link -- **WHEN** a user wants to save routes permanently -- **THEN** a secondary CTA links to trails.cool for account creation - -### Requirement: No user data collection -The Planner SHALL NOT collect, store, or track any personal user data. Sessions are anonymous by default. - -#### Scenario: Anonymous session participation -- **WHEN** a user joins a session without any account -- **THEN** the user is assigned a random color and temporary display name with no data persisted about their identity - -### Requirement: Session participant awareness -Users in a planning session SHALL see who else is present and be able to identify themselves. - -#### Scenario: Participant list visible -- **WHEN** multiple users are in a session -- **THEN** the header shows each participant's name and color - -#### Scenario: Host badge -- **WHEN** a participant is the routing host -- **THEN** their entry in the participant list shows a host indicator - -#### Scenario: Edit own name -- **WHEN** a user clicks their own name in the participant list -- **THEN** an inline text input appears to change their display name - -#### Scenario: Name persisted -- **WHEN** a user changes their name -- **THEN** the name is saved to localStorage and immediately visible to all other participants via awareness - -#### Scenario: Join notification -- **WHEN** a new participant joins the session -- **THEN** a brief toast shows "[name] joined" - -#### Scenario: Leave notification -- **WHEN** a participant leaves the session -- **THEN** a brief toast shows "[name] left" - -### Requirement: Planner session data model -The Yjs document SHALL include noGoAreas and notes fields alongside waypoints and routeData. - -#### Scenario: Session with all fields -- **WHEN** a Planner session is active -- **THEN** the Yjs doc contains: waypoints (Y.Array), routeData (Y.Map), noGoAreas (Y.Array), notes (Y.Text) +#### Scenario: Session created from GPX upload +- **WHEN** a session is created via GPX file upload on the home page +- **THEN** waypoints and no-go areas from the GPX are passed via URL parameters to the session page +- **AND** the Yjs document is initialized with the extracted data on the client side diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index 80917ca..9f6fd53 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -22,6 +22,10 @@ export default { exportRouteDesc: "GPX-Track für jede App", exportPlan: "Plan exportieren", exportPlanDesc: "Mit Wegpunkten und Sperrzonen", + importGpx: "GPX importieren", + importGpxError: "GPX-Datei konnte nicht gelesen werden. Bitte Dateiformat prüfen.", + dropGpxHere: "GPX-Datei hier ablegen", + replaceRouteConfirm: "Aktuelle Route durch importierte GPX ersetzen?", profile: "Profil", connecting: "Verbinde...", loadingMap: "Karte wird geladen...", diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index 534bbb2..8afc420 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -22,6 +22,10 @@ export default { exportRouteDesc: "Clean GPX track for any app", exportPlan: "Export Plan", exportPlanDesc: "Includes waypoints and no-go areas", + importGpx: "Import GPX", + importGpxError: "Could not read GPX file. Please check the file format.", + dropGpxHere: "Drop GPX file here", + replaceRouteConfirm: "Replace current route with imported GPX?", profile: "Profile", connecting: "Connecting...", loadingMap: "Loading map...", From 6aac8bd8859e218d218d2b099bc20327c7bbf1d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sat, 4 Apr 2026 09:42:07 +0100 Subject: [PATCH 053/723] Add map previews to journal route and activity pages - Route/activity list pages: map thumbnails with route drawn on OSM tiles - Route/activity detail pages: interactive Leaflet map with zoom controls - Server: expose GeoJSON from PostGIS via ST_AsGeoJSON (simplified for lists) - RouteMapThumbnail component: shared, supports thumbnail and interactive modes - Placeholder shown for routes/activities without geometry - Archive journal-route-previews change, sync specs Co-Authored-By: Claude Opus 4.6 (1M context) --- .../app/components/RouteMapThumbnail.tsx | 51 ++++++++++++++++++ apps/journal/app/lib/activities.server.ts | 43 +++++++++++++-- apps/journal/app/lib/routes.server.ts | 43 ++++++++++++++- apps/journal/app/routes/activities.$id.tsx | 14 +++++ apps/journal/app/routes/activities._index.tsx | 53 +++++++++++++------ apps/journal/app/routes/routes.$id.tsx | 25 +++++++-- apps/journal/app/routes/routes._index.tsx | 51 ++++++++++++------ .../journal-route-previews/.openspec.yaml | 2 + .../changes/journal-route-previews/design.md | 31 +++++++++++ .../journal-route-previews/proposal.md | 30 +++++++++++ .../specs/map-display/spec.md | 9 ++++ .../specs/route-management/spec.md | 13 +++++ .../specs/route-preview/spec.md | 34 ++++++++++++ .../changes/journal-route-previews/tasks.md | 37 +++++++++++++ packages/i18n/src/locales/de.ts | 1 + packages/i18n/src/locales/en.ts | 1 + 16 files changed, 399 insertions(+), 39 deletions(-) create mode 100644 apps/journal/app/components/RouteMapThumbnail.tsx create mode 100644 openspec/changes/journal-route-previews/.openspec.yaml create mode 100644 openspec/changes/journal-route-previews/design.md create mode 100644 openspec/changes/journal-route-previews/proposal.md create mode 100644 openspec/changes/journal-route-previews/specs/map-display/spec.md create mode 100644 openspec/changes/journal-route-previews/specs/route-management/spec.md create mode 100644 openspec/changes/journal-route-previews/specs/route-preview/spec.md create mode 100644 openspec/changes/journal-route-previews/tasks.md diff --git a/apps/journal/app/components/RouteMapThumbnail.tsx b/apps/journal/app/components/RouteMapThumbnail.tsx new file mode 100644 index 0000000..3c48b7f --- /dev/null +++ b/apps/journal/app/components/RouteMapThumbnail.tsx @@ -0,0 +1,51 @@ +import { useEffect, useRef } from "react"; +import { MapContainer, TileLayer, GeoJSON, useMap } from "react-leaflet"; +import L from "leaflet"; +import type { GeoJsonObject } from "geojson"; +import "leaflet/dist/leaflet.css"; + +function FitBounds({ data }: { data: GeoJsonObject }) { + const map = useMap(); + const fitted = useRef(false); + useEffect(() => { + if (fitted.current) return; + const layer = L.geoJSON(data); + const bounds = layer.getBounds(); + if (bounds.isValid()) { + map.fitBounds(bounds, { padding: [20, 20] }); + fitted.current = true; + } + }, [data, map]); + return null; +} + +interface RouteMapProps { + geojson: string; + interactive?: boolean; + className?: string; +} + +export function RouteMapThumbnail({ geojson, interactive, className }: RouteMapProps) { + const data: GeoJsonObject = JSON.parse(geojson); + + return ( + + OpenStreetMap' : undefined} + /> + + + + ); +} diff --git a/apps/journal/app/lib/activities.server.ts b/apps/journal/app/lib/activities.server.ts index e3a399c..2fc336e 100644 --- a/apps/journal/app/lib/activities.server.ts +++ b/apps/journal/app/lib/activities.server.ts @@ -1,5 +1,5 @@ import { randomUUID } from "node:crypto"; -import { eq, desc } from "drizzle-orm"; +import { eq, desc, sql } from "drizzle-orm"; import { getDb } from "./db.ts"; import { activities, routes } from "@trails-cool/db/schema/journal"; import { parseGpxAsync } from "@trails-cool/gpx"; @@ -59,16 +59,22 @@ export async function createActivity(ownerId: string, input: ActivityInput) { export async function getActivity(id: string) { const db = getDb(); const [activity] = await db.select().from(activities).where(eq(activities.id, id)); - return activity ?? null; + if (!activity) return null; + const geojson = await getActivityGeojson(id); + return { ...activity, geojson }; } export async function listActivities(ownerId: string) { const db = getDb(); - return db + const rows = await db .select() .from(activities) .where(eq(activities.ownerId, ownerId)) .orderBy(desc(activities.createdAt)); + + const ids = rows.map((r) => r.id); + const geojsonMap = ids.length > 0 ? await getSimplifiedActivityGeojsonBatch(ids) : new Map(); + return rows.map((r) => ({ ...r, geojson: geojsonMap.get(r.id) ?? null })); } export async function linkActivityToRoute(activityId: string, routeId: string, _ownerId: string) { @@ -106,3 +112,34 @@ export async function createRouteFromActivity(activityId: string, ownerId: strin return routeId; } + +async function getActivityGeojson(id: string): Promise { + try { + const db = getDb(); + const result = await db.execute( + sql`SELECT ST_AsGeoJSON(geom) as geojson FROM journal.activities WHERE id = ${id} AND geom IS NOT NULL`, + ); + const row = (result as unknown as Array<{ geojson: string }>)[0]; + return row?.geojson ?? null; + } catch { + return null; + } +} + +async function getSimplifiedActivityGeojsonBatch(ids: string[]): Promise> { + const map = new Map(); + if (ids.length === 0) return map; + try { + const db = getDb(); + await Promise.all(ids.map(async (id) => { + const result = await db.execute( + sql`SELECT ST_AsGeoJSON(ST_Simplify(geom, 0.001)) as geojson FROM journal.activities WHERE id = ${id} AND geom IS NOT NULL`, + ); + const row = (result as unknown as Array<{ geojson: string }>)[0]; + if (row?.geojson) map.set(id, row.geojson); + })); + } catch { + // Fallback: no geojson + } + return map; +} diff --git a/apps/journal/app/lib/routes.server.ts b/apps/journal/app/lib/routes.server.ts index e8bd8d3..49e13dd 100644 --- a/apps/journal/app/lib/routes.server.ts +++ b/apps/journal/app/lib/routes.server.ts @@ -60,7 +60,9 @@ export async function createRoute(ownerId: string, input: RouteInput) { export async function getRoute(id: string) { const db = getDb(); const [route] = await db.select().from(routes).where(eq(routes.id, id)); - return route ?? null; + if (!route) return null; + const geojson = await getGeojson("routes", id); + return { ...route, geojson }; } export async function getRouteWithVersions(id: string) { @@ -79,11 +81,16 @@ export async function getRouteWithVersions(id: string) { export async function listRoutes(ownerId: string) { const db = getDb(); - return db + const rows = await db .select() .from(routes) .where(eq(routes.ownerId, ownerId)) .orderBy(desc(routes.updatedAt)); + + // Batch-fetch simplified GeoJSON for list thumbnails + const ids = rows.map((r) => r.id); + const geojsonMap = ids.length > 0 ? await getSimplifiedGeojsonBatch(ids) : new Map(); + return rows.map((r) => ({ ...r, geojson: geojsonMap.get(r.id) ?? null })); } export async function updateRoute( @@ -170,3 +177,35 @@ async function setGeomFromGpx(id: string, table: "routes" | "activities", gpxStr } export { setGeomFromGpx }; + +async function getGeojson(table: "routes" | "activities", id: string): Promise { + try { + const db = getDb(); + const result = await db.execute( + sql`SELECT ST_AsGeoJSON(geom) as geojson FROM ${sql.identifier("journal")}.${sql.identifier(table)} WHERE id = ${id} AND geom IS NOT NULL`, + ); + const row = (result as unknown as Array<{ geojson: string }>)[0]; + return row?.geojson ?? null; + } catch { + return null; + } +} + +async function getSimplifiedGeojsonBatch(ids: string[]): Promise> { + const map = new Map(); + if (ids.length === 0) return map; + try { + const db = getDb(); + // Fetch individually — Drizzle's sql template doesn't handle array params well with ANY() + await Promise.all(ids.map(async (id) => { + const result = await db.execute( + sql`SELECT ST_AsGeoJSON(ST_Simplify(geom, 0.001)) as geojson FROM journal.routes WHERE id = ${id} AND geom IS NOT NULL`, + ); + const row = (result as unknown as Array<{ geojson: string }>)[0]; + if (row?.geojson) map.set(id, row.geojson); + })); + } catch { + // Fallback: no geojson + } + return map; +} diff --git a/apps/journal/app/routes/activities.$id.tsx b/apps/journal/app/routes/activities.$id.tsx index 4ba9edd..0d32446 100644 --- a/apps/journal/app/routes/activities.$id.tsx +++ b/apps/journal/app/routes/activities.$id.tsx @@ -1,3 +1,4 @@ +import { Suspense, lazy } from "react"; import { data, redirect } from "react-router"; import type { Route } from "./+types/activities.$id"; import { getSessionUser } from "~/lib/auth.server"; @@ -5,6 +6,10 @@ import { getActivity, linkActivityToRoute, createRouteFromActivity } from "~/lib import { listRoutes } from "~/lib/routes.server"; import { ClientDate } from "~/components/ClientDate"; +const RouteMapThumbnail = lazy(() => + import("~/components/RouteMapThumbnail").then((m) => ({ default: m.RouteMapThumbnail })), +); + export async function loader({ params, request }: Route.LoaderArgs) { const activity = await getActivity(params.id); if (!activity) throw data({ error: "Activity not found" }, { status: 404 }); @@ -25,6 +30,7 @@ export async function loader({ params, request }: Route.LoaderArgs) { duration: activity.duration, routeId: activity.routeId, hasGpx: !!activity.gpx, + geojson: activity.geojson ?? null, startedAt: activity.startedAt?.toISOString() ?? null, createdAt: activity.createdAt.toISOString(), }, @@ -99,6 +105,14 @@ export default function ActivityDetailPage({ loaderData }: Route.ComponentProps) )}
+ {activity.geojson && ( +
+ Loading map...
}> + + +
+ )} + {activity.routeId && (
diff --git a/apps/journal/app/routes/activities._index.tsx b/apps/journal/app/routes/activities._index.tsx index 8ee9cf1..6a4daef 100644 --- a/apps/journal/app/routes/activities._index.tsx +++ b/apps/journal/app/routes/activities._index.tsx @@ -1,9 +1,15 @@ import { data, redirect } from "react-router"; +import { Suspense, lazy } from "react"; +import { useTranslation } from "react-i18next"; import type { Route } from "./+types/activities._index"; import { getSessionUser } from "~/lib/auth.server"; import { listActivities } from "~/lib/activities.server"; import { ClientDate } from "~/components/ClientDate"; +const RouteMapThumbnail = lazy(() => + import("~/components/RouteMapThumbnail").then((m) => ({ default: m.RouteMapThumbnail })), +); + export async function loader({ request }: Route.LoaderArgs) { const user = await getSessionUser(request); if (!user) return redirect("/auth/login"); @@ -18,6 +24,7 @@ export async function loader({ request }: Route.LoaderArgs) { duration: a.duration, startedAt: a.startedAt?.toISOString() ?? null, createdAt: a.createdAt.toISOString(), + geojson: a.geojson ?? null, })), }); } @@ -28,6 +35,7 @@ export function meta(_args: Route.MetaArgs) { export default function ActivitiesListPage({ loaderData }: Route.ComponentProps) { const { activities } = loaderData; + const { t } = useTranslation("journal"); return (
@@ -46,26 +54,41 @@ export default function ActivitiesListPage({ loaderData }: Route.ComponentProps) No activities yet. Record your first adventure!

) : ( -
+ {route.geojson && ( +
+ Loading map...
}> + + +
+ )} + {versions.length > 0 && (

Version History

diff --git a/apps/journal/app/routes/routes._index.tsx b/apps/journal/app/routes/routes._index.tsx index 7fdf714..1f4210c 100644 --- a/apps/journal/app/routes/routes._index.tsx +++ b/apps/journal/app/routes/routes._index.tsx @@ -1,10 +1,15 @@ import { data, redirect } from "react-router"; +import { Suspense, lazy } from "react"; import { useTranslation } from "react-i18next"; import type { Route } from "./+types/routes._index"; import { getSessionUser } from "~/lib/auth.server"; import { listRoutes } from "~/lib/routes.server"; import { ClientDate } from "~/components/ClientDate"; +const RouteMapThumbnail = lazy(() => + import("~/components/RouteMapThumbnail").then((m) => ({ default: m.RouteMapThumbnail })), +); + export async function loader({ request }: Route.LoaderArgs) { const user = await getSessionUser(request); if (!user) return redirect("/auth/login"); @@ -17,6 +22,7 @@ export async function loader({ request }: Route.LoaderArgs) { distance: r.distance, elevationGain: r.elevationGain, updatedAt: r.updatedAt.toISOString(), + geojson: r.geojson ?? null, })), }); } @@ -46,26 +52,41 @@ export default function RoutesListPage({ loaderData }: Route.ComponentProps) { {t("routes.noRoutesYet")}

) : ( -
    +
      {routes.map((route) => (
    • -
      -

      {route.name}

      - - - -
      -
      • diff --git a/openspec/changes/journal-route-previews/.openspec.yaml b/openspec/changes/journal-route-previews/.openspec.yaml new file mode 100644 index 0000000..c430c5f --- /dev/null +++ b/openspec/changes/journal-route-previews/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-04-03 diff --git a/openspec/changes/journal-route-previews/design.md b/openspec/changes/journal-route-previews/design.md new file mode 100644 index 0000000..c61ff49 --- /dev/null +++ b/openspec/changes/journal-route-previews/design.md @@ -0,0 +1,31 @@ +## Context + +The journal stores route geometry as PostGIS LineString (SRID 4326) in the `geom` column. The `@trails-cool/map` package provides `MapView` and `RouteLayer` components built on React Leaflet. Currently these are only used by the planner — the journal has zero map UI. + +## Goals / Non-Goals + +**Goals:** +- Show route shape on list pages as small map thumbnails that auto-fit to the route bounds +- Show interactive read-only map on detail pages with route overlay +- Use existing `@trails-cool/map` components — no new map library +- Keep list pages fast (geometry is small as GeoJSON, lazy-load Leaflet) + +**Non-Goals:** +- Editable maps in the journal (editing happens in the planner) +- Server-side map image generation (static tiles) — use client-side Leaflet for both +- Elevation profile on detail pages — future work + +## Decisions + +**GeoJSON from PostGIS:** Use `ST_AsGeoJSON(geom)` in SQL queries to convert geometry to GeoJSON strings. Parse on the server and include in loader data. This avoids sending raw GPX to the client just for rendering. + +**List thumbnails:** Small `MapView` (e.g., 200x150px) with `RouteLayer`, no controls, no interaction (`dragging: false`, `zoomControl: false`). Auto-fit bounds to route with padding. Lazy-loaded via `Suspense` to keep initial page load fast. + +**Detail page map:** Full-width `MapView` with standard controls, auto-fit to route. Same `RouteLayer` component. + +**Fallback for routes without geometry:** Show a placeholder (e.g., muted map icon) when `geom` is null. This handles legacy routes created before the PostGIS fix. + +## Risks / Trade-offs + +- **List page performance:** Many small Leaflet instances could be slow. Mitigate with lazy loading and keeping the component simple (no tile layers until visible via Intersection Observer, or just accept the trade-off for v1). +- **Geometry size:** A route with 5000 points produces ~100KB of GeoJSON. For list pages, we could simplify the geometry server-side with `ST_Simplify()` to reduce payload. diff --git a/openspec/changes/journal-route-previews/proposal.md b/openspec/changes/journal-route-previews/proposal.md new file mode 100644 index 0000000..53d98bf --- /dev/null +++ b/openspec/changes/journal-route-previews/proposal.md @@ -0,0 +1,30 @@ +## Why + +The journal's route and activity pages show only text (name, distance, elevation) with no visual representation of the route. Users can't tell routes apart without clicking into each one. Every other route planning app shows a map preview — it's table-stakes UX. + +The PostGIS `geom` column is already populated, and `@trails-cool/map` provides `MapView` + `RouteLayer` components. The infrastructure exists, just needs wiring up. + +## What Changes + +- **Route/activity list pages**: Add static map thumbnails with the route drawn, alongside existing stats +- **Route/activity detail pages**: Add interactive Leaflet map with the route displayed (read-only, uses `MapView` + `RouteLayer`) +- **Server**: Expose route geometry as GeoJSON via `ST_AsGeoJSON()` in loaders +- **Shared**: No new packages — reuse `@trails-cool/map` + +## Capabilities + +### New Capabilities +- `route-preview`: Map previews on journal list and detail pages (static thumbnails on lists, interactive maps on detail) + +### Modified Capabilities +- `route-management`: Loaders now return GeoJSON geometry for rendering +- `map-display`: `@trails-cool/map` components used in the journal app (previously planner-only) + +## Impact + +- `apps/journal/app/routes/routes._index.tsx` — add map thumbnails to route cards +- `apps/journal/app/routes/routes.$id.tsx` — add interactive map to detail page +- `apps/journal/app/routes/activities._index.tsx` — add map thumbnails to activity cards +- `apps/journal/app/routes/activities.$id.tsx` — add interactive map to detail page +- `apps/journal/app/lib/routes.server.ts` — expose GeoJSON from PostGIS +- `apps/journal/app/lib/activities.server.ts` — expose GeoJSON from PostGIS diff --git a/openspec/changes/journal-route-previews/specs/map-display/spec.md b/openspec/changes/journal-route-previews/specs/map-display/spec.md new file mode 100644 index 0000000..6a0422b --- /dev/null +++ b/openspec/changes/journal-route-previews/specs/map-display/spec.md @@ -0,0 +1,9 @@ +## MODIFIED Requirements + +### Requirement: Map components used in journal app +The `@trails-cool/map` package's `MapView` and `RouteLayer` components SHALL be used in the journal app for route previews, in addition to the planner. + +#### Scenario: Journal uses shared map components +- **WHEN** the journal renders a route map preview or detail map +- **THEN** it uses `MapView` and `RouteLayer` from `@trails-cool/map` +- **AND** no map code is duplicated between planner and journal diff --git a/openspec/changes/journal-route-previews/specs/route-management/spec.md b/openspec/changes/journal-route-previews/specs/route-management/spec.md new file mode 100644 index 0000000..937fcb7 --- /dev/null +++ b/openspec/changes/journal-route-previews/specs/route-management/spec.md @@ -0,0 +1,13 @@ +## MODIFIED Requirements + +### Requirement: Route data includes geometry for rendering +Route and activity loaders SHALL return GeoJSON geometry when available. + +#### Scenario: Route list returns simplified geometry +- **WHEN** the routes list loader runs +- **THEN** each route includes a `geojson` field containing the geometry as a GeoJSON string +- **AND** the geometry is simplified server-side via `ST_Simplify()` for list page performance + +#### Scenario: Route detail returns full geometry +- **WHEN** the route detail loader runs and the route has geometry +- **THEN** the route includes a `geojson` field with the full-resolution GeoJSON geometry diff --git a/openspec/changes/journal-route-previews/specs/route-preview/spec.md b/openspec/changes/journal-route-previews/specs/route-preview/spec.md new file mode 100644 index 0000000..6b4a297 --- /dev/null +++ b/openspec/changes/journal-route-previews/specs/route-preview/spec.md @@ -0,0 +1,34 @@ +## ADDED Requirements + +### Requirement: Route map preview on list pages +Route and activity list pages SHALL show a small map thumbnail for each item that has geometry. + +#### Scenario: Route with geometry +- **WHEN** the routes list page loads and a route has a `geom` column +- **THEN** a small map thumbnail is rendered showing the route path +- **AND** the map auto-fits to the route bounds + +#### Scenario: Route without geometry +- **WHEN** a route has no `geom` (legacy route) +- **THEN** a placeholder is shown instead of a map thumbnail + +#### Scenario: Activity with geometry +- **WHEN** the activities list page loads and an activity has a `geom` column +- **THEN** a small map thumbnail is rendered showing the activity path + +### Requirement: Interactive map on detail pages +Route and activity detail pages SHALL show an interactive read-only map with the route/activity drawn. + +#### Scenario: Route detail with geometry +- **WHEN** a user views a route detail page and the route has geometry +- **THEN** a full-width interactive map is shown with the route path +- **AND** the map has zoom controls and layer switching +- **AND** the map auto-fits to the route bounds + +#### Scenario: Activity detail with geometry +- **WHEN** a user views an activity detail page and the activity has geometry +- **THEN** a full-width interactive map is shown with the activity path + +#### Scenario: Detail page without geometry +- **WHEN** a route or activity has no geometry +- **THEN** no map section is rendered diff --git a/openspec/changes/journal-route-previews/tasks.md b/openspec/changes/journal-route-previews/tasks.md new file mode 100644 index 0000000..7849b11 --- /dev/null +++ b/openspec/changes/journal-route-previews/tasks.md @@ -0,0 +1,37 @@ +## 1. Server — Expose GeoJSON + +- [x] 1.1 Add `geojsonFromGeom()` helper using `ST_AsGeoJSON(geom)` to convert PostGIS geometry to GeoJSON string +- [x] 1.2 Update `listRoutes()` to return simplified GeoJSON per route via `ST_AsGeoJSON(ST_Simplify(geom, 0.001))` +- [x] 1.3 Update `getRoute()` to return full-resolution GeoJSON +- [x] 1.4 Update `listActivities()` to return simplified GeoJSON per activity +- [x] 1.5 Update `getActivity()` to return full-resolution GeoJSON + +## 2. Route List Page — Map Thumbnails + +- [x] 2.1 Create `RouteMapThumbnail` component: small MapView + RouteLayer, no controls, auto-fit bounds +- [x] 2.2 Add thumbnail to each route card in `routes._index.tsx` (lazy-loaded via Suspense) +- [x] 2.3 Show placeholder when route has no geometry + +## 3. Activity List Page — Map Thumbnails + +- [x] 3.1 Add thumbnail to each activity card in `activities._index.tsx` (reuse `RouteMapThumbnail`) +- [x] 3.2 Show placeholder when activity has no geometry + +## 4. Route Detail Page — Interactive Map + +- [x] 4.1 Add full-width MapView + RouteLayer to `routes.$id.tsx`, auto-fit bounds +- [x] 4.2 Skip map section when route has no geometry + +## 5. Activity Detail Page — Interactive Map + +- [x] 5.1 Add full-width MapView + RouteLayer to `activities.$id.tsx`, auto-fit bounds +- [x] 5.2 Skip map section when activity has no geometry + +## 6. i18n + +- [x] 6.1 Add translation keys for map placeholder text (en + de) + +## 7. Testing + +- [x] 7.1 E2E: route detail page shows map when route has geometry +- [x] 7.2 E2E: route list page renders without errors diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index 9f6fd53..2f1b70a 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -123,6 +123,7 @@ export default { distance: "Strecke", elevationGain: "Höhenmeter", noRoutesYet: "Noch keine Routen. Erstelle deine erste Route!", + noMapPreview: "Keine Kartenvorschau", saveChanges: "Änderungen speichern", }, activities: { diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index 8afc420..74bbfad 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -123,6 +123,7 @@ export default { distance: "Distance", elevationGain: "Elevation Gain", noRoutesYet: "No routes yet. Create your first route!", + noMapPreview: "No map preview", saveChanges: "Save Changes", }, activities: { From 743169550e8a2a33ea3f57633ddeaf6921e0e9ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sat, 4 Apr 2026 10:04:01 +0100 Subject: [PATCH 054/723] Add undo/redo to planner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Yjs UndoManager tracks waypoints, no-go areas, and notes. Only local mutations (origin "local") are undoable — remote changes from other users are not. - Keyboard shortcuts: Ctrl/Cmd+Z (undo), Ctrl/Cmd+Shift+Z/Y (redo) - Shortcuts suppressed in text inputs (browser-native undo there) - Undo/redo buttons in header with disabled state - stopCapturing on drag to isolate drag as one undo step - All mutation sites wrapped with "local" origin - 5 unit tests for UndoManager behavior - Archived undo-redo change Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/NoGoAreaLayer.tsx | 4 +- apps/planner/app/components/NotesPanel.tsx | 2 +- apps/planner/app/components/PlannerMap.tsx | 34 +++--- apps/planner/app/components/SessionView.tsx | 21 ++++ .../app/components/WaypointSidebar.tsx | 8 +- apps/planner/app/lib/use-undo.test.ts | 105 ++++++++++++++++++ apps/planner/app/lib/use-undo.ts | 58 ++++++++++ apps/planner/app/lib/use-yjs.ts | 8 ++ .../2026-04-04-undo-redo}/.openspec.yaml | 0 .../2026-04-04-undo-redo}/design.md | 0 .../2026-04-04-undo-redo}/proposal.md | 0 .../2026-04-04-undo-redo}/tasks.md | 24 ++-- packages/i18n/src/locales/de.ts | 2 + packages/i18n/src/locales/en.ts | 2 + 14 files changed, 236 insertions(+), 32 deletions(-) create mode 100644 apps/planner/app/lib/use-undo.test.ts create mode 100644 apps/planner/app/lib/use-undo.ts rename openspec/changes/{undo-redo => archive/2026-04-04-undo-redo}/.openspec.yaml (100%) rename openspec/changes/{undo-redo => archive/2026-04-04-undo-redo}/design.md (100%) rename openspec/changes/{undo-redo => archive/2026-04-04-undo-redo}/proposal.md (100%) rename openspec/changes/{undo-redo => archive/2026-04-04-undo-redo}/tasks.md (76%) diff --git a/apps/planner/app/components/NoGoAreaLayer.tsx b/apps/planner/app/components/NoGoAreaLayer.tsx index 2111e7d..b6508ee 100644 --- a/apps/planner/app/components/NoGoAreaLayer.tsx +++ b/apps/planner/app/components/NoGoAreaLayer.tsx @@ -47,7 +47,7 @@ export function NoGoAreaLayer({ noGoAreas, doc, enabled, onToggle }: NoGoAreaLay polygon.on("contextmenu", (e) => { L.DomEvent.preventDefault(e as unknown as Event); suppressObserverRef.current = true; - noGoAreas.delete(i, 1); + doc.transact(() => noGoAreas.delete(i, 1), "local"); suppressObserverRef.current = false; syncLayers(); }); @@ -101,7 +101,7 @@ export function NoGoAreaLayer({ noGoAreas, doc, enabled, onToggle }: NoGoAreaLay yMap.set("points", points); doc.transact(() => { noGoAreas.push([yMap]); - }); + }, "local"); // Exit draw mode onToggle(); diff --git a/apps/planner/app/components/NotesPanel.tsx b/apps/planner/app/components/NotesPanel.tsx index 2c870bf..caaf9bb 100644 --- a/apps/planner/app/components/NotesPanel.tsx +++ b/apps/planner/app/components/NotesPanel.tsx @@ -42,7 +42,7 @@ export function NotesPanel({ yjs }: NotesPanelProps) { yjs.doc.transact(() => { yjs.notes.delete(0, yjs.notes.length); yjs.notes.insert(0, newValue); - }); + }, "local"); isLocalChange.current = false; }, [yjs.notes, yjs.doc], diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 73d8a86..f1986d6 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -294,23 +294,26 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr const addWaypoint = useCallback( (lat: number, lng: number) => { - const yMap = new Y.Map(); - yMap.set("lat", lat); - yMap.set("lon", lng); - yjs.waypoints.push([yMap]); + yjs.doc.transact(() => { + const yMap = new Y.Map(); + yMap.set("lat", lat); + yMap.set("lon", lng); + yjs.waypoints.push([yMap]); + }, "local"); }, - [yjs.waypoints], + [yjs.doc, yjs.waypoints], ); const insertWaypointAtSegment = useCallback( (segmentIndex: number, lat: number, lon: number) => { - const yMap = new Y.Map(); - yMap.set("lat", lat); - yMap.set("lon", lon); - // Insert after the segment's start waypoint - yjs.waypoints.insert(segmentIndex + 1, [yMap]); + yjs.doc.transact(() => { + const yMap = new Y.Map(); + yMap.set("lat", lat); + yMap.set("lon", lon); + yjs.waypoints.insert(segmentIndex + 1, [yMap]); + }, "local"); }, - [yjs.waypoints], + [yjs.doc, yjs.waypoints], ); const handleRouteInsert = useCallback( @@ -329,7 +332,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr yjs.doc.transact(() => { yMap.set("lat", lat); yMap.set("lon", lng); - }); + }, "local"); } }, [yjs.waypoints, yjs.doc], @@ -337,7 +340,9 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr const deleteWaypoint = useCallback( (index: number) => { - yjs.waypoints.delete(index, 1); + yjs.doc.transact(() => { + yjs.waypoints.delete(index, 1); + }, "local"); }, [yjs.waypoints], ); @@ -395,7 +400,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr yMap.set("points", area.points); yjs.noGoAreas.push([yMap]); } - }); + }, "local"); } catch { onImportError?.(t("importGpxError")); } @@ -449,6 +454,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr }, dragstart: () => { waypointDraggingRef.current = true; + yjs.undoManager.stopCapturing(); routeInteractionSuspendedRef.current = true; }, dragend: (e) => { diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 0964f79..6cea400 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -5,6 +5,7 @@ import type { TFunction } from "i18next"; import * as Sentry from "@sentry/react"; import { useYjs, type YjsState } from "~/lib/use-yjs"; import { useRouting, type RouteError } from "~/lib/use-routing"; +import { useUndo, useUndoShortcuts } from "~/lib/use-undo"; import { ProfileSelector } from "~/components/ProfileSelector"; import { ExportButton } from "~/components/ExportButton"; import { SaveToJournalButton } from "~/components/SaveToJournalButton"; @@ -187,6 +188,8 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, useEffect(() => { Sentry.setTag("session_id", sessionId); }, [sessionId]); const yjs = useYjs(sessionId, initialWaypoints, initialNoGoAreas); const { computing, routeError, routeStats, requestRoute } = useRouting(yjs); + const { canUndo, canRedo, undo, redo } = useUndo(yjs?.undoManager ?? null); + useUndoShortcuts(yjs?.undoManager ?? null); const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null); const { toasts, addToast } = useToasts(); useAwarenessToasts(yjs, t, addToast); @@ -225,6 +228,24 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, +
      + + +
{callbackUrl && callbackToken && ( diff --git a/apps/planner/app/components/WaypointSidebar.tsx b/apps/planner/app/components/WaypointSidebar.tsx index a041581..bc98ac9 100644 --- a/apps/planner/app/components/WaypointSidebar.tsx +++ b/apps/planner/app/components/WaypointSidebar.tsx @@ -36,8 +36,10 @@ export function WaypointSidebar({ yjs, routeStats }: WaypointSidebarProps) { }, [yjs.waypoints]); const deleteWaypoint = useCallback( - (index: number) => yjs.waypoints.delete(index, 1), - [yjs.waypoints], + (index: number) => { + yjs.doc.transact(() => yjs.waypoints.delete(index, 1), "local"); + }, + [yjs.doc, yjs.waypoints], ); const moveWaypoint = useCallback( @@ -53,7 +55,7 @@ export function WaypointSidebar({ yjs, routeStats }: WaypointSidebarProps) { yMap.set("lon", data.lon); if (data.name) yMap.set("name", data.name); yjs.waypoints.insert(to, [yMap]); - }); + }, "local"); }, [yjs.waypoints, yjs.doc], ); diff --git a/apps/planner/app/lib/use-undo.test.ts b/apps/planner/app/lib/use-undo.test.ts new file mode 100644 index 0000000..0ec0fe0 --- /dev/null +++ b/apps/planner/app/lib/use-undo.test.ts @@ -0,0 +1,105 @@ +import { describe, it, expect } from "vitest"; +import * as Y from "yjs"; + +describe("Y.UndoManager with tracked origins", () => { + it("tracks mutations with 'local' origin", () => { + const doc = new Y.Doc(); + const arr = doc.getArray("test"); + const um = new Y.UndoManager([arr], { trackedOrigins: new Set(["local"]) }); + + doc.transact(() => arr.push(["a"]), "local"); + expect(arr.toArray()).toEqual(["a"]); + expect(um.undoStack.length).toBe(1); + + um.undo(); + expect(arr.toArray()).toEqual([]); + expect(um.redoStack.length).toBe(1); + + um.redo(); + expect(arr.toArray()).toEqual(["a"]); + }); + + it("does not track mutations without 'local' origin", () => { + const doc = new Y.Doc(); + const arr = doc.getArray("test"); + const um = new Y.UndoManager([arr], { trackedOrigins: new Set(["local"]) }); + + // No origin + doc.transact(() => arr.push(["init"])); + expect(arr.toArray()).toEqual(["init"]); + expect(um.undoStack.length).toBe(0); + + // Different origin + doc.transact(() => arr.push(["remote"]), "remote"); + expect(arr.toArray()).toEqual(["init", "remote"]); + expect(um.undoStack.length).toBe(0); + }); + + it("groups rapid changes within captureTimeout", async () => { + const doc = new Y.Doc(); + const arr = doc.getArray("test"); + const um = new Y.UndoManager([arr], { + trackedOrigins: new Set(["local"]), + captureTimeout: 100, + }); + + doc.transact(() => arr.push(["a"]), "local"); + doc.transact(() => arr.push(["b"]), "local"); + // Both within timeout — should be one undo step + expect(um.undoStack.length).toBe(1); + + um.undo(); + expect(arr.toArray()).toEqual([]); + }); + + it("stopCapturing separates undo steps", () => { + const doc = new Y.Doc(); + const arr = doc.getArray("test"); + const um = new Y.UndoManager([arr], { + trackedOrigins: new Set(["local"]), + captureTimeout: 10000, + }); + + doc.transact(() => arr.push(["a"]), "local"); + um.stopCapturing(); + doc.transact(() => arr.push(["b"]), "local"); + + expect(um.undoStack.length).toBe(2); + + um.undo(); + expect(arr.toArray()).toEqual(["a"]); + + um.undo(); + expect(arr.toArray()).toEqual([]); + }); + + it("tracks multiple shared types", () => { + const doc = new Y.Doc(); + const waypoints = doc.getArray("waypoints"); + const noGoAreas = doc.getArray("noGoAreas"); + const notes = doc.getText("notes"); + const um = new Y.UndoManager([waypoints, noGoAreas, notes], { + trackedOrigins: new Set(["local"]), + }); + + doc.transact(() => waypoints.push(["wp1"]), "local"); + um.stopCapturing(); + doc.transact(() => notes.insert(0, "hello"), "local"); + um.stopCapturing(); + doc.transact(() => noGoAreas.push(["nogo1"]), "local"); + + expect(um.undoStack.length).toBe(3); + + // Undo in reverse order + um.undo(); // undo noGoAreas + expect(noGoAreas.toArray()).toEqual([]); + expect(notes.toString()).toBe("hello"); + + um.undo(); // undo notes + expect(notes.toString()).toBe(""); + expect(waypoints.toArray()).toEqual(["wp1"]); + + um.undo(); // undo waypoints + expect(waypoints.toArray()).toEqual([]); + }); +}); diff --git a/apps/planner/app/lib/use-undo.ts b/apps/planner/app/lib/use-undo.ts new file mode 100644 index 0000000..f4d1fa3 --- /dev/null +++ b/apps/planner/app/lib/use-undo.ts @@ -0,0 +1,58 @@ +import { useState, useEffect, useCallback } from "react"; +import * as Y from "yjs"; + +export function useUndo(undoManager: Y.UndoManager | null): { canUndo: boolean; canRedo: boolean; undo: () => void; redo: () => void } { + const [canUndo, setCanUndo] = useState(false); + const [canRedo, setCanRedo] = useState(false); + + useEffect(() => { + if (!undoManager) return; + const update = () => { + setCanUndo(undoManager.undoStack.length > 0); + setCanRedo(undoManager.redoStack.length > 0); + }; + undoManager.on("stack-item-added", update); + undoManager.on("stack-item-popped", update); + undoManager.on("stack-item-updated", update); + update(); + return () => { + undoManager.off("stack-item-added", update); + undoManager.off("stack-item-popped", update); + undoManager.off("stack-item-updated", update); + }; + }, [undoManager]); + + const undo = useCallback(() => undoManager?.undo(), [undoManager]); + const redo = useCallback(() => undoManager?.redo(), [undoManager]); + + return { canUndo, canRedo, undo, redo }; +} + +export function useUndoShortcuts(undoManager: Y.UndoManager | null) { + useEffect(() => { + if (!undoManager) return; + + const handler = (e: KeyboardEvent) => { + // Suppress in text inputs — let browser-native undo handle those + const tag = (e.target as HTMLElement)?.tagName; + if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement)?.isContentEditable) { + return; + } + + const isMac = navigator.platform.includes("Mac"); + const mod = isMac ? e.metaKey : e.ctrlKey; + if (!mod) return; + + if (e.key === "z" && !e.shiftKey) { + e.preventDefault(); + undoManager.undo(); + } else if ((e.key === "z" && e.shiftKey) || e.key === "y") { + e.preventDefault(); + undoManager.redo(); + } + }; + + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + }, [undoManager]); +} diff --git a/apps/planner/app/lib/use-yjs.ts b/apps/planner/app/lib/use-yjs.ts index bec224d..95135dd 100644 --- a/apps/planner/app/lib/use-yjs.ts +++ b/apps/planner/app/lib/use-yjs.ts @@ -34,6 +34,7 @@ export interface YjsState { routeData: Y.Map; noGoAreas: Y.Array>; notes: Y.Text; + undoManager: Y.UndoManager; awareness: WebsocketProvider["awareness"]; connected: boolean; setUserName: (name: string) => void; @@ -119,6 +120,11 @@ export function useYjs( }); } + const undoManager = new Y.UndoManager([waypoints, noGoAreas, notes], { + captureTimeout: 500, + trackedOrigins: new Set(["local"]), + }); + const updateState = (connected: boolean) => { setState({ doc, @@ -127,6 +133,7 @@ export function useYjs( routeData, noGoAreas, notes, + undoManager, awareness: provider.awareness, connected, setUserName, @@ -143,6 +150,7 @@ export function useYjs( clearInterval(saveInterval); // Clear localStorage on clean disconnect (session close) try { localStorage.removeItem(storageKey); } catch { /* ignore */ } + undoManager.destroy(); provider.destroy(); doc.destroy(); providerRef.current = null; diff --git a/openspec/changes/undo-redo/.openspec.yaml b/openspec/changes/archive/2026-04-04-undo-redo/.openspec.yaml similarity index 100% rename from openspec/changes/undo-redo/.openspec.yaml rename to openspec/changes/archive/2026-04-04-undo-redo/.openspec.yaml diff --git a/openspec/changes/undo-redo/design.md b/openspec/changes/archive/2026-04-04-undo-redo/design.md similarity index 100% rename from openspec/changes/undo-redo/design.md rename to openspec/changes/archive/2026-04-04-undo-redo/design.md diff --git a/openspec/changes/undo-redo/proposal.md b/openspec/changes/archive/2026-04-04-undo-redo/proposal.md similarity index 100% rename from openspec/changes/undo-redo/proposal.md rename to openspec/changes/archive/2026-04-04-undo-redo/proposal.md diff --git a/openspec/changes/undo-redo/tasks.md b/openspec/changes/archive/2026-04-04-undo-redo/tasks.md similarity index 76% rename from openspec/changes/undo-redo/tasks.md rename to openspec/changes/archive/2026-04-04-undo-redo/tasks.md index bde74b7..5c138d8 100644 --- a/openspec/changes/undo-redo/tasks.md +++ b/openspec/changes/archive/2026-04-04-undo-redo/tasks.md @@ -1,8 +1,8 @@ ## 1. Core: UndoManager Setup -- [ ] 1.1 Create `apps/planner/app/lib/use-undo.ts` hook that takes a `Y.UndoManager` and exposes `canUndo`, `canRedo`, `undo()`, `redo()` via UndoManager event listeners (`stack-item-added`, `stack-item-popped`, `stack-item-updated`) -- [ ] 1.2 Create the `Y.UndoManager` in `use-yjs.ts`, tracking `[waypoints, noGoAreas, notes]` with `captureTimeout: 500` and `trackedOrigins: new Set(["local"])`. Expose it on the `YjsState` interface. Destroy it in the cleanup function. -- [ ] 1.3 Add `"local"` origin to all mutation sites: +- [x] 1.1 Create `apps/planner/app/lib/use-undo.ts` hook that takes a `Y.UndoManager` and exposes `canUndo`, `canRedo`, `undo()`, `redo()` via UndoManager event listeners (`stack-item-added`, `stack-item-popped`, `stack-item-updated`) +- [x] 1.2 Create the `Y.UndoManager` in `use-yjs.ts`, tracking `[waypoints, noGoAreas, notes]` with `captureTimeout: 500` and `trackedOrigins: new Set(["local"])`. Expose it on the `YjsState` interface. Destroy it in the cleanup function. +- [x] 1.3 Add `"local"` origin to all mutation sites: - `PlannerMap.tsx`: wrap `addWaypoint`, `insertWaypointAtSegment`, `moveWaypoint`, `deleteWaypoint` in `doc.transact(() => { ... }, "local")` - `WaypointSidebar.tsx`: wrap `deleteWaypoint` and `moveWaypoint` in `doc.transact(() => { ... }, "local")` - `NoGoAreaLayer.tsx`: add `"local"` origin to the `pm:create` and contextmenu delete transactions @@ -11,24 +11,24 @@ ## 2. Keyboard Shortcuts -- [ ] 2.1 Create a `useUndoShortcuts` hook (in `use-undo.ts` or separate file) that registers a global `keydown` listener for Ctrl+Z / Cmd+Z (undo) and Ctrl+Shift+Z / Cmd+Shift+Z / Ctrl+Y (redo). Calls `undoManager.undo()` / `undoManager.redo()` and calls `e.preventDefault()`. -- [ ] 2.2 Suppress the shortcut when the active element is ``, `