Add Wahoo activity sync with provider-agnostic framework

Provider-agnostic sync framework + Wahoo as first implementation:

Framework (apps/journal/app/lib/sync/):
- SyncProvider interface for OAuth2, webhooks, import, conversion
- Provider registry for settings UI iteration
- Generic sync_connections + sync_imports tables
- Token storage with auto-refresh

Wahoo provider:
- OAuth2 with workouts_read, user_read, offline_data scopes
- Webhook-based auto-import (workout_summary events)
- Manual import page with pagination
- FIT→GPX conversion via fit-file-parser
- Webhook token verification

Routes:
- /api/sync/connect/:provider — OAuth redirect
- /api/sync/callback/:provider — OAuth callback
- /api/sync/disconnect/:provider — remove connection
- /api/sync/webhook/:provider — webhook receiver
- /sync/import/:provider — manual import page

Settings: Connected Services section with per-provider connect/disconnect

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

apps/journal/app/lib/sync/connections.server.ts

@@ -0,0 +1,68 @@
+import { randomUUID } from "node:crypto";
+import { eq, and } from "drizzle-orm";
+import { getDb } from "../db.ts";
+import { syncConnections } from "@trails-cool/db/schema/journal";
+import type { TokenSet } from "./types.ts";
+
+export async function saveConnection(
+  userId: string,
+  provider: string,
+  tokens: TokenSet,
+) {
+  const db = getDb();
+  // Upsert: delete existing connection for this user+provider, then insert
+  await db
+    .delete(syncConnections)
+    .where(and(eq(syncConnections.userId, userId), eq(syncConnections.provider, provider)));
+  await db.insert(syncConnections).values({
+    id: randomUUID(),
+    userId,
+    provider,
+    accessToken: tokens.accessToken,
+    refreshToken: tokens.refreshToken,
+    expiresAt: tokens.expiresAt,
+    providerUserId: tokens.providerUserId ?? null,
+  });
+}
+
+export async function getConnection(userId: string, provider: string) {
+  const db = getDb();
+  const [conn] = await db
+    .select()
+    .from(syncConnections)
+    .where(and(eq(syncConnections.userId, userId), eq(syncConnections.provider, provider)));
+  return conn ?? null;
+}
+
+export async function getConnectionByProviderUser(provider: string, providerUserId: string) {
+  const db = getDb();
+  const [conn] = await db
+    .select()
+    .from(syncConnections)
+    .where(
+      and(eq(syncConnections.provider, provider), eq(syncConnections.providerUserId, providerUserId)),
+    );
+  return conn ?? null;
+}
+
+export async function updateTokens(
+  connectionId: string,
+  tokens: TokenSet,
+) {
+  const db = getDb();
+  await db
+    .update(syncConnections)
+    .set({
+      accessToken: tokens.accessToken,
+      refreshToken: tokens.refreshToken,
+      expiresAt: tokens.expiresAt,
+    })
+    .where(eq(syncConnections.id, connectionId));
+}
+
+export async function deleteConnection(userId: string, provider: string) {
+  const db = getDb();
+  await db
+    .delete(syncConnections)
+    .where(and(eq(syncConnections.userId, userId), eq(syncConnections.provider, provider)));
+}

apps/journal/app/lib/sync/imports.server.ts

@@ -0,0 +1,59 @@
+import { randomUUID } from "node:crypto";
+import { eq, and, inArray } from "drizzle-orm";
+import { getDb } from "../db.ts";
+import { syncImports } from "@trails-cool/db/schema/journal";
+
+export async function recordImport(
+  userId: string,
+  provider: string,
+  externalWorkoutId: string,
+  activityId: string,
+) {
+  const db = getDb();
+  await db.insert(syncImports).values({
+    id: randomUUID(),
+    userId,
+    provider,
+    externalWorkoutId,
+    activityId,
+  });
+}
+
+export async function isAlreadyImported(
+  userId: string,
+  provider: string,
+  externalWorkoutId: string,
+): Promise<boolean> {
+  const db = getDb();
+  const [row] = await db
+    .select({ id: syncImports.id })
+    .from(syncImports)
+    .where(
+      and(
+        eq(syncImports.userId, userId),
+        eq(syncImports.provider, provider),
+        eq(syncImports.externalWorkoutId, externalWorkoutId),
+      ),
+    );
+  return !!row;
+}
+
+export async function getImportedIds(
+  userId: string,
+  provider: string,
+  externalWorkoutIds: string[],
+): Promise<Set<string>> {
+  if (externalWorkoutIds.length === 0) return new Set();
+  const db = getDb();
+  const rows = await db
+    .select({ externalWorkoutId: syncImports.externalWorkoutId })
+    .from(syncImports)
+    .where(
+      and(
+        eq(syncImports.userId, userId),
+        eq(syncImports.provider, provider),
+        inArray(syncImports.externalWorkoutId, externalWorkoutIds),
+      ),
+    );
+  return new Set(rows.map((r) => r.externalWorkoutId));
+}

apps/journal/app/lib/sync/providers/wahoo.ts

@@ -0,0 +1,184 @@
+import FitParser from "fit-file-parser";
+import { generateGpx } from "@trails-cool/gpx";
+import type { SyncProvider, TokenSet, Workout, WorkoutList, WebhookEvent } from "../types.ts";
+
+const WAHOO_API = "https://api.wahooligan.com";
+const WAHOO_AUTH = "https://api.wahooligan.com/oauth";
+
+const clientId = () => process.env.WAHOO_CLIENT_ID ?? "";
+const clientSecret = () => process.env.WAHOO_CLIENT_SECRET ?? "";
+
+export const wahooProvider: SyncProvider = {
+  id: "wahoo",
+  name: "Wahoo",
+  scopes: ["workouts_read", "user_read", "offline_data"],
+
+  getAuthUrl(redirectUri: string, state: string): string {
+    const params = new URLSearchParams({
+      client_id: clientId(),
+      redirect_uri: redirectUri,
+      response_type: "code",
+      scope: this.scopes.join(" "),
+      state,
+    });
+    return `${WAHOO_AUTH}/authorize?${params}`;
+  },
+
+  async exchangeCode(code: string, redirectUri: string): Promise<TokenSet> {
+    const resp = await fetch(`${WAHOO_AUTH}/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        client_id: clientId(),
+        client_secret: clientSecret(),
+        code,
+        grant_type: "authorization_code",
+        redirect_uri: redirectUri,
+      }),
+    });
+    if (!resp.ok) throw new Error(`Wahoo token exchange failed: ${resp.status}`);
+    const data = await resp.json() as { access_token: string; refresh_token: string; expires_in: number };
+
+    // Fetch user info to get provider user ID
+    const userResp = await fetch(`${WAHOO_API}/v1/user`, {
+      headers: { Authorization: `Bearer ${data.access_token}` },
+    });
+    const user = userResp.ok ? (await userResp.json() as { id: number }) : null;
+
+    return {
+      accessToken: data.access_token,
+      refreshToken: data.refresh_token,
+      expiresAt: new Date(Date.now() + data.expires_in * 1000),
+      providerUserId: user?.id?.toString(),
+    };
+  },
+
+  async refreshToken(refreshToken: string): Promise<TokenSet> {
+    const resp = await fetch(`${WAHOO_AUTH}/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        client_id: clientId(),
+        client_secret: clientSecret(),
+        grant_type: "refresh_token",
+        refresh_token: refreshToken,
+      }),
+    });
+    if (!resp.ok) throw new Error(`Wahoo token refresh failed: ${resp.status}`);
+    const data = await resp.json() as { access_token: string; refresh_token: string; expires_in: number };
+    return {
+      accessToken: data.access_token,
+      refreshToken: data.refresh_token,
+      expiresAt: new Date(Date.now() + data.expires_in * 1000),
+    };
+  },
+
+  async listWorkouts(tokens: TokenSet, page: number): Promise<WorkoutList> {
+    const params = new URLSearchParams({ page: String(page), per_page: "30" });
+    const resp = await fetch(`${WAHOO_API}/v1/workouts?${params}`, {
+      headers: { Authorization: `Bearer ${tokens.accessToken}` },
+    });
+    if (!resp.ok) throw new Error(`Wahoo list workouts failed: ${resp.status}`);
+    const data = await resp.json() as {
+      workouts: Array<{
+        id: number;
+        name: string;
+        workout_type: string;
+        starts: string;
+        workout_summary?: {
+          duration_active_accum?: number;
+          distance_accum?: number;
+          file?: { url?: string };
+        };
+      }>;
+      total: number;
+      page: number;
+      per_page: number;
+    };
+
+    return {
+      workouts: data.workouts.map((w) => ({
+        id: String(w.id),
+        name: w.name || `Workout ${w.id}`,
+        type: w.workout_type ?? "unknown",
+        startedAt: w.starts,
+        duration: w.workout_summary?.duration_active_accum
+          ? Math.round(w.workout_summary.duration_active_accum)
+          : null,
+        distance: w.workout_summary?.distance_accum
+          ? Math.round(w.workout_summary.distance_accum)
+          : null,
+        fileUrl: w.workout_summary?.file?.url,
+      })),
+      total: data.total,
+      page: data.page,
+      perPage: data.per_page,
+    };
+  },
+
+  async downloadFile(tokens: TokenSet, workout: Workout): Promise<Buffer> {
+    if (!workout.fileUrl) throw new Error("No file URL for workout");
+    const resp = await fetch(workout.fileUrl, {
+      headers: { Authorization: `Bearer ${tokens.accessToken}` },
+    });
+    if (!resp.ok) throw new Error(`Wahoo file download failed: ${resp.status}`);
+    return Buffer.from(await resp.arrayBuffer());
+  },
+
+  async convertToGpx(fileBuffer: Buffer): Promise<string | null> {
+    const parsed = await new Promise<Record<string, unknown>>((resolve, reject) => {
+      const parser = new FitParser({ force: true });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      parser.parse(fileBuffer as any, (error: unknown, data: any) => {
+        if (error) reject(error);
+        else resolve(data ?? {});
+      });
+    });
+
+    const records = (parsed.records ?? []) as Array<{
+      position_lat?: number;
+      position_long?: number;
+      altitude?: number;
+      timestamp?: string;
+    }>;
+
+    // FIT uses semicircles — convert to degrees
+    const SEMICIRCLE_TO_DEG = 180 / Math.pow(2, 31);
+    const trackPoints = records
+      .filter((r) => r.position_lat != null && r.position_long != null)
+      .map((r) => ({
+        lat: r.position_lat! * SEMICIRCLE_TO_DEG,
+        lon: r.position_long! * SEMICIRCLE_TO_DEG,
+        ele: r.altitude,
+        time: r.timestamp,
+      }));
+
+    if (trackPoints.length < 2) return null;
+
+    return generateGpx({
+      name: "Wahoo workout",
+      tracks: [trackPoints],
+    });
+  },
+
+  parseWebhook(body: unknown): WebhookEvent | null {
+    const payload = body as {
+      event_type?: string;
+      user?: { id?: number };
+      workout_summary?: {
+        id?: number;
+        workout?: { id?: number };
+        file?: { url?: string };
+      };
+    };
+
+    if (payload.event_type !== "workout_summary" || !payload.user?.id) return null;
+
+    return {
+      eventType: payload.event_type,
+      providerUserId: String(payload.user.id),
+      workoutId: String(payload.workout_summary?.workout?.id ?? payload.workout_summary?.id ?? ""),
+      fileUrl: payload.workout_summary?.file?.url,
+    };
+  },
+};

apps/journal/app/lib/sync/registry.ts

@@ -0,0 +1,12 @@
+import type { SyncProvider } from "./types.ts";
+import { wahooProvider } from "./providers/wahoo.ts";
+
+const providers: SyncProvider[] = [wahooProvider];
+
+export function getProvider(id: string): SyncProvider | undefined {
+  return providers.find((p) => p.id === id);
+}
+
+export function getAllProviders(): SyncProvider[] {
+  return providers;
+}

apps/journal/app/lib/sync/types.ts

@@ -0,0 +1,46 @@
+export interface TokenSet {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: Date;
+  providerUserId?: string;
+}
+
+export interface Workout {
+  id: string;
+  name: string;
+  type: string;
+  startedAt: string;
+  duration: number | null; // seconds
+  distance: number | null; // meters
+  fileUrl?: string;
+}
+
+export interface WorkoutList {
+  workouts: Workout[];
+  total: number;
+  page: number;
+  perPage: number;
+}
+
+export interface WebhookEvent {
+  eventType: string;
+  providerUserId: string;
+  workoutId: string;
+  fileUrl?: string;
+}
+
+export interface SyncProvider {
+  id: string;
+  name: string;
+  scopes: string[];
+
+  getAuthUrl(redirectUri: string, state: string): string;
+  exchangeCode(code: string, redirectUri: string): Promise<TokenSet>;
+  refreshToken(refreshToken: string): Promise<TokenSet>;
+
+  listWorkouts(tokens: TokenSet, page: number): Promise<WorkoutList>;
+  downloadFile(tokens: TokenSet, workout: Workout): Promise<Buffer>;
+  convertToGpx(fileBuffer: Buffer): Promise<string | null>;
+
+  parseWebhook(body: unknown): WebhookEvent | null;
+}

apps/journal/app/routes.ts

@@ -24,6 +24,11 @@ export default [
   route("api/settings/email", "routes/api.settings.email.ts"),
   route("api/settings/passkey/delete", "routes/api.settings.passkey.delete.ts"),
   route("api/settings/delete-account", "routes/api.settings.delete-account.ts"),
+  route("sync/import/:provider", "routes/sync.import.$provider.tsx"),
+  route("api/sync/connect/:provider", "routes/api.sync.connect.$provider.ts"),
+  route("api/sync/callback/:provider", "routes/api.sync.callback.$provider.ts"),
+  route("api/sync/disconnect/:provider", "routes/api.sync.disconnect.$provider.ts"),
+  route("api/sync/webhook/:provider", "routes/api.sync.webhook.$provider.ts"),
   route("privacy", "routes/privacy.tsx"),
   route("api/health", "routes/api.health.ts"),
   route("api/metrics", "routes/api.metrics.ts"),

apps/journal/app/routes/api.sync.callback.$provider.ts

@@ -0,0 +1,30 @@
+import { redirect, data } from "react-router";
+import type { Route } from "./+types/api.sync.callback.$provider";
+import { getSessionUser } from "~/lib/auth.server";
+import { getProvider } from "~/lib/sync/registry";
+import { saveConnection } from "~/lib/sync/connections.server";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return redirect("/auth/login");
+
+  const provider = getProvider(params.provider);
+  if (!provider) return data({ error: "Unknown provider" }, { status: 404 });
+
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  if (!code) return data({ error: "Missing authorization code" }, { status: 400 });
+
+  const origin = process.env.ORIGIN ?? "http://localhost:3000";
+  const redirectUri = `${origin}/api/sync/callback/${params.provider}`;
+
+  try {
+    const tokens = await provider.exchangeCode(code, redirectUri);
+    await saveConnection(user.id, provider.id, tokens);
+  } catch (e) {
+    console.error(`OAuth callback failed for ${params.provider}:`, e);
+    return redirect("/settings?error=sync_failed");
+  }
+
+  return redirect("/settings");
+}

apps/journal/app/routes/api.sync.connect.$provider.ts

@@ -0,0 +1,18 @@
+import { redirect, data } from "react-router";
+import type { Route } from "./+types/api.sync.connect.$provider";
+import { getSessionUser } from "~/lib/auth.server";
+import { getProvider } from "~/lib/sync/registry";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return redirect("/auth/login");
+
+  const provider = getProvider(params.provider);
+  if (!provider) return data({ error: "Unknown provider" }, { status: 404 });
+
+  const origin = process.env.ORIGIN ?? "http://localhost:3000";
+  const redirectUri = `${origin}/api/sync/callback/${params.provider}`;
+  const state = user.id; // Simple state — could use a CSRF token for production
+
+  return redirect(provider.getAuthUrl(redirectUri, state));
+}

apps/journal/app/routes/api.sync.disconnect.$provider.ts

@@ -0,0 +1,16 @@
+import { redirect, data } from "react-router";
+import type { Route } from "./+types/api.sync.disconnect.$provider";
+import { getSessionUser } from "~/lib/auth.server";
+import { getProvider } from "~/lib/sync/registry";
+import { deleteConnection } from "~/lib/sync/connections.server";
+
+export async function action({ params, request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return redirect("/auth/login");
+
+  const provider = getProvider(params.provider);
+  if (!provider) return data({ error: "Unknown provider" }, { status: 404 });
+
+  await deleteConnection(user.id, provider.id);
+  return redirect("/settings");
+}

apps/journal/app/routes/api.sync.webhook.$provider.ts

@@ -0,0 +1,65 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.sync.webhook.$provider";
+import { getProvider } from "~/lib/sync/registry";
+import { getConnectionByProviderUser, updateTokens } from "~/lib/sync/connections.server";
+import { isAlreadyImported, recordImport } from "~/lib/sync/imports.server";
+import { createActivity } from "~/lib/activities.server";
+
+export async function action({ params, request }: Route.ActionArgs) {
+  if (request.method !== "POST") {
+    return data({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  const provider = getProvider(params.provider);
+  if (!provider) return data({ ok: true }); // Don't reveal provider existence
+
+  const body = await request.json();
+
+  // Verify webhook token
+  const expectedToken = process.env[`${params.provider.toUpperCase()}_WEBHOOK_TOKEN`];
+  if (expectedToken && (body as { webhook_token?: string }).webhook_token !== expectedToken) {
+    return data({ ok: true }); // Invalid token — ignore silently
+  }
+
+  const event = provider.parseWebhook(body);
+  if (!event) return data({ ok: true }); // Unrecognized event — ignore silently
+
+  // Look up user by provider user ID
+  const connection = await getConnectionByProviderUser(provider.id, event.providerUserId);
+  if (!connection) return data({ ok: true }); // Unknown user — ignore
+
+  // Check duplicate
+  const alreadyImported = await isAlreadyImported(connection.userId, provider.id, event.workoutId);
+  if (alreadyImported) return data({ ok: true });
+
+  try {
+    // Refresh token if expired
+    let tokens = {
+      accessToken: connection.accessToken,
+      refreshToken: connection.refreshToken,
+      expiresAt: connection.expiresAt,
+    };
+    if (new Date() >= tokens.expiresAt) {
+      tokens = await provider.refreshToken(tokens.refreshToken);
+      await updateTokens(connection.id, tokens);
+    }
+
+    // Download and convert
+    const workout = { id: event.workoutId, name: "", type: "", startedAt: "", duration: null, distance: null, fileUrl: event.fileUrl };
+    const fileBuffer = await provider.downloadFile(tokens, workout);
+    const gpx = await provider.convertToGpx(fileBuffer);
+
+    // Create activity
+    const activityId = await createActivity(connection.userId, {
+      name: `${provider.name} workout`,
+      gpx: gpx ?? undefined,
+    });
+
+    await recordImport(connection.userId, provider.id, event.workoutId, activityId);
+  } catch (e) {
+    console.error(`Webhook import failed for ${provider.id}/${event.workoutId}:`, e);
+  }
+
+  // Always return 200 to acknowledge the webhook
+  return data({ ok: true });
+}

apps/journal/app/routes/settings.tsx

@@ -6,7 +6,8 @@ import { eq } from "drizzle-orm";
 import type { Route } from "./+types/settings";
 import { getSessionUser } from "~/lib/auth.server";
 import { getDb } from "~/lib/db";
-import { credentials } from "@trails-cool/db/schema/journal";
+import { credentials, syncConnections } from "@trails-cool/db/schema/journal";
+import { getAllProviders } from "~/lib/sync/registry";
 
 export function meta() {
   return [{ title: "Settings — trails.cool" }];
@@ -27,6 +28,19 @@ export async function loader({ request }: Route.LoaderArgs) {
     .from(credentials)
     .where(eq(credentials.userId, user.id));
 
+  const connections = await db
+    .select({
+      provider: syncConnections.provider,
+      providerUserId: syncConnections.providerUserId,
+    })
+    .from(syncConnections)
+    .where(eq(syncConnections.userId, user.id));
+
+  const providers = getAllProviders().map((p) => {
+    const conn = connections.find((c) => c.provider === p.id);
+    return { id: p.id, name: p.name, connected: !!conn, providerUserId: conn?.providerUserId };
+  });
+
   return data({
     user: {
       id: user.id,
@@ -41,6 +55,7 @@ export async function loader({ request }: Route.LoaderArgs) {
       transports: p.transports as string[] | null,
       createdAt: p.createdAt.toISOString(),
     })),
+    providers,
   });
 }
 
@@ -54,7 +69,7 @@ function transportLabel(transports: string[] | null, t: (key: string) => string)
 }
 
 export default function Settings({ loaderData }: Route.ComponentProps) {
-  const { user, passkeys } = loaderData;
+  const { user, passkeys, providers } = loaderData;
   const { t } = useTranslation(["journal", "common"]);
   const profileFetcher = useFetcher();
   const emailFetcher = useFetcher();
@@ -268,6 +283,48 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
         )}
       </section>
 
+      {/* Connected Services */}
+      <section id="services" className="mt-12">
+        <h2 className="text-lg font-semibold text-gray-900">{t("settings.services.title")}</h2>
+        <div className="mt-4 space-y-3">
+          {providers.map((p) => (
+            <div key={p.id} className="flex items-center justify-between rounded-md border border-gray-200 px-4 py-3">
+              <div>
+                <p className="font-medium text-gray-900">{p.name}</p>
+                {p.connected && p.providerUserId && (
+                  <p className="text-xs text-gray-500">{t("settings.services.connectedAs", { id: p.providerUserId })}</p>
+                )}
+              </div>
+              {p.connected ? (
+                <div className="flex items-center gap-3">
+                  <a
+                    href={`/sync/import/${p.id}`}
+                    className="text-sm text-blue-600 hover:underline"
+                  >
+                    {t("sync.import")}
+                  </a>
+                  <form method="post" action={`/api/sync/disconnect/${p.id}`}>
+                    <button
+                      type="submit"
+                      className="text-sm text-red-600 hover:underline"
+                    >
+                      {t("settings.services.disconnect")}
+                    </button>
+                  </form>
+                </div>
+              ) : (
+                <a
+                  href={`/api/sync/connect/${p.id}`}
+                  className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
+                >
+                  {t("settings.services.connect")}
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
       {/* Account Section */}
       <section id="account" className="mt-12">
         <h2 className="text-lg font-semibold text-gray-900">{t("settings.account.title")}</h2>

apps/journal/app/routes/sync.import.$provider.tsx

@@ -0,0 +1,180 @@
+import { data, redirect } from "react-router";
+import { useTranslation } from "react-i18next";
+import type { Route } from "./+types/sync.import.$provider";
+import { getSessionUser } from "~/lib/auth.server";
+import { getProvider } from "~/lib/sync/registry";
+import { getConnection, updateTokens } from "~/lib/sync/connections.server";
+import { getImportedIds, recordImport } from "~/lib/sync/imports.server";
+import { createActivity } from "~/lib/activities.server";
+import { ClientDate } from "~/components/ClientDate";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return redirect("/auth/login");
+
+  const provider = getProvider(params.provider);
+  if (!provider) throw data({ error: "Unknown provider" }, { status: 404 });
+
+  const connection = await getConnection(user.id, provider.id);
+  if (!connection) return redirect("/settings");
+
+  const url = new URL(request.url);
+  const page = parseInt(url.searchParams.get("page") ?? "1");
+
+  // Refresh token if needed
+  let tokens = {
+    accessToken: connection.accessToken,
+    refreshToken: connection.refreshToken,
+    expiresAt: connection.expiresAt,
+  };
+  if (new Date() >= tokens.expiresAt) {
+    tokens = await provider.refreshToken(tokens.refreshToken);
+    await updateTokens(connection.id, tokens);
+  }
+
+  const workoutList = await provider.listWorkouts(tokens, page);
+  const importedIds = await getImportedIds(
+    user.id,
+    provider.id,
+    workoutList.workouts.map((w) => w.id),
+  );
+
+  return data({
+    provider: { id: provider.id, name: provider.name },
+    workouts: workoutList.workouts.map((w) => ({
+      ...w,
+      imported: importedIds.has(w.id),
+    })),
+    page: workoutList.page,
+    totalPages: Math.ceil(workoutList.total / workoutList.perPage),
+  });
+}
+
+export async function action({ params, request }: Route.ActionArgs) {
+  const user = await getSessionUser(request);
+  if (!user) return redirect("/auth/login");
+
+  const provider = getProvider(params.provider);
+  if (!provider) throw data({ error: "Unknown provider" }, { status: 404 });
+
+  const connection = await getConnection(user.id, provider.id);
+  if (!connection) return redirect("/settings");
+
+  const formData = await request.formData();
+  const workoutId = formData.get("workoutId") as string;
+  const workoutName = formData.get("workoutName") as string;
+  const fileUrl = formData.get("fileUrl") as string;
+
+  // Refresh token if needed
+  let tokens = {
+    accessToken: connection.accessToken,
+    refreshToken: connection.refreshToken,
+    expiresAt: connection.expiresAt,
+  };
+  if (new Date() >= tokens.expiresAt) {
+    tokens = await provider.refreshToken(tokens.refreshToken);
+    await updateTokens(connection.id, tokens);
+  }
+
+  const workout = {
+    id: workoutId,
+    name: workoutName,
+    type: "",
+    startedAt: "",
+    duration: null,
+    distance: null,
+    fileUrl: fileUrl || undefined,
+  };
+
+  const fileBuffer = await provider.downloadFile(tokens, workout);
+  const gpx = await provider.convertToGpx(fileBuffer);
+
+  const activityId = await createActivity(user.id, {
+    name: workoutName || `${provider.name} workout`,
+    gpx: gpx ?? undefined,
+  });
+
+  await recordImport(user.id, provider.id, workoutId, activityId);
+
+  return data({ imported: workoutId });
+}
+
+export function meta({ data: loaderData }: Route.MetaArgs) {
+  const name = (loaderData as { provider: { name: string } })?.provider?.name ?? "Import";
+  return [{ title: `Import from ${name} — trails.cool` }];
+}
+
+export default function SyncImportPage({ loaderData, actionData }: Route.ComponentProps) {
+  const { provider, workouts, page, totalPages } = loaderData;
+  const { t } = useTranslation("journal");
+  const justImported = (actionData as { imported?: string })?.imported;
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-gray-900">
+        {t("sync.importFrom", { provider: provider.name })}
+      </h1>
+
+      {workouts.length === 0 ? (
+        <p className="mt-8 text-center text-gray-500">{t("sync.noWorkouts")}</p>
+      ) : (
+        <ul className="mt-6 space-y-3">
+          {workouts.map((w) => (
+            <li
+              key={w.id}
+              className="flex items-center justify-between rounded-lg border border-gray-200 p-4"
+            >
+              <div>
+                <p className="font-medium text-gray-900">{w.name}</p>
+                <div className="mt-1 flex gap-3 text-sm text-gray-500">
+                  {w.startedAt && <ClientDate iso={w.startedAt} />}
+                  {w.distance != null && <span>{(w.distance / 1000).toFixed(1)} km</span>}
+                  {w.duration != null && <span>{Math.round(w.duration / 60)} min</span>}
+                </div>
+              </div>
+              {w.imported || justImported === w.id ? (
+                <span className="text-sm text-green-600">{t("sync.imported")}</span>
+              ) : (
+                <form method="post">
+                  <input type="hidden" name="workoutId" value={w.id} />
+                  <input type="hidden" name="workoutName" value={w.name} />
+                  <input type="hidden" name="fileUrl" value={w.fileUrl ?? ""} />
+                  <button
+                    type="submit"
+                    className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
+                  >
+                    {t("sync.import")}
+                  </button>
+                </form>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {totalPages > 1 && (
+        <div className="mt-6 flex justify-center gap-2">
+          {page > 1 && (
+            <a
+              href={`/sync/import/${provider.id}?page=${page - 1}`}
+              className="rounded border border-gray-300 px-3 py-1 text-sm hover:bg-gray-50"
+            >
+              {t("sync.previous")}
+            </a>
+          )}
+          <span className="px-3 py-1 text-sm text-gray-500">
+            {page} / {totalPages}
+          </span>
+          {page < totalPages && (
+            <a
+              href={`/sync/import/${provider.id}?page=${page + 1}`}
+              className="rounded border border-gray-300 px-3 py-1 text-sm hover:bg-gray-50"
+            >
+              {t("sync.next")}
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}