Fix Wahoo import bugs, add Import All, update spec

Bugs fixed:
- FIT parser returns timestamps as Date objects, not strings — convert
  to ISO 8601 before passing to generateGpx (caused str.replace crash)
- FIT parser already converts semicircles to degrees — remove redundant
  conversion that produced near-zero coordinates
- Wahoo CDN URLs are pre-signed S3 URLs — remove Bearer auth header
  from download requests (caused 400 "Unsupported Authorization Type")
- Filter out third-party workouts (fitness_app_id >= 1000) since Wahoo
  does not share their data via the API

UX improvements:
- Individual imports use fetcher (no page refresh), button shows
  "Importing..." inline
- "Import all" button imports all unimported workouts on the page
  sequentially with progress indicator
- Add @vitejs/plugin-basic-ssl for local HTTPS dev (opt-in via HTTPS=1)

Also adds unit test for FIT-to-GPX conversion with real fixture file,
and updates wahoo-import spec to reflect all behaviors.

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

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

@@ -0,0 +1,63 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, it, expect } from "vitest";
+import { wahooProvider } from "./wahoo";
+
+const fixturePath = resolve(__dirname, "__fixtures__/wahoo-ride.fit");
+const fitBuffer = readFileSync(fixturePath);
+
+describe("wahooProvider.convertToGpx", () => {
+  it("converts a FIT file to valid GPX with correct coordinates", async () => {
+    const gpx = await wahooProvider.convertToGpx(Buffer.from(fitBuffer));
+
+    expect(gpx).not.toBeNull();
+    expect(gpx).toContain('<?xml version="1.0"');
+    expect(gpx).toContain("<gpx");
+    expect(gpx).toContain("<trkpt");
+  });
+
+  it("produces coordinates in valid lat/lon range (not semicircles)", async () => {
+    const gpx = await wahooProvider.convertToGpx(Buffer.from(fitBuffer));
+    expect(gpx).not.toBeNull();
+
+    const latMatches = gpx!.matchAll(/lat="([^"]+)"/g);
+    const lonMatches = gpx!.matchAll(/lon="([^"]+)"/g);
+
+    const lats = [...latMatches].map((m) => parseFloat(m[1]!));
+    const lons = [...lonMatches].map((m) => parseFloat(m[1]!));
+
+    expect(lats.length).toBeGreaterThan(10);
+    expect(lons.length).toBeGreaterThan(10);
+
+    for (const lat of lats) {
+      expect(lat).toBeGreaterThan(-90);
+      expect(lat).toBeLessThan(90);
+      // Should be real-world coords, not near-zero from double-conversion
+      expect(Math.abs(lat)).toBeGreaterThan(1);
+    }
+    for (const lon of lons) {
+      expect(lon).toBeGreaterThan(-180);
+      expect(lon).toBeLessThan(180);
+    }
+  });
+
+  it("includes ISO 8601 timestamps (not Date objects)", async () => {
+    const gpx = await wahooProvider.convertToGpx(Buffer.from(fitBuffer));
+    expect(gpx).not.toBeNull();
+
+    const timeMatches = gpx!.matchAll(/<time>([^<]+)<\/time>/g);
+    const times = [...timeMatches].map((m) => m[1]!);
+
+    expect(times.length).toBeGreaterThan(10);
+    for (const t of times) {
+      expect(t).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/);
+      expect(new Date(t).toString()).not.toBe("Invalid Date");
+    }
+  });
+
+  it("includes elevation data", async () => {
+    const gpx = await wahooProvider.convertToGpx(Buffer.from(fitBuffer));
+    expect(gpx).not.toBeNull();
+    expect(gpx).toContain("<ele>");
+  });
+});

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

@@ -85,6 +85,7 @@ export const wahooProvider: SyncProvider = {
         name: string;
         workout_type: string;
         starts: string;
+        fitness_app_id?: number;
         workout_summary?: {
           duration_active_accum?: number;
           distance_accum?: number;
@@ -96,8 +97,11 @@ export const wahooProvider: SyncProvider = {
       per_page: number;
     };
 
+    // Wahoo does not share workout data from third-party apps (fitness_app_id >= 1000)
+    const wahooWorkouts = data.workouts.filter((w) => !w.fitness_app_id || w.fitness_app_id < 1000);
+
     return {
-      workouts: data.workouts.map((w) => ({
+      workouts: wahooWorkouts.map((w) => ({
         id: String(w.id),
         name: w.name || `Workout ${w.id}`,
         type: w.workout_type ?? "unknown",
@@ -118,9 +122,7 @@ export const wahooProvider: SyncProvider = {
 
   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}` },
-    });
+    const resp = await fetch(workout.fileUrl);
     if (!resp.ok) throw new Error(`Wahoo file download failed: ${resp.status}`);
     return Buffer.from(await resp.arrayBuffer());
   },
@@ -139,18 +141,17 @@ export const wahooProvider: SyncProvider = {
       position_lat?: number;
       position_long?: number;
       altitude?: number;
-      timestamp?: string;
+      timestamp?: string | Date;
     }>;
 
-    // FIT uses semicircles — convert to degrees
-    const SEMICIRCLE_TO_DEG = 180 / Math.pow(2, 31);
+    // fit-file-parser already converts semicircles to degrees
     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,
+        lat: r.position_lat!,
+        lon: r.position_long!,
         ele: r.altitude,
-        time: r.timestamp,
+        time: r.timestamp instanceof Date ? r.timestamp.toISOString() : r.timestamp,
       }));
 
     if (trackPoints.length < 2) return null;

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

@@ -1,4 +1,5 @@
-import { data, redirect } from "react-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { data, redirect, useFetcher } from "react-router";
 import { useTranslation } from "react-i18next";
 import type { Route } from "./+types/sync.import.$provider";
 import { getSessionUser } from "~/lib/auth.server";
@@ -107,60 +108,144 @@ export function meta({ data: loaderData }: Route.MetaArgs) {
   return [{ title: `Import from ${name} — trails.cool` }];
 }
 
-export default function SyncImportPage({ loaderData, actionData }: Route.ComponentProps) {
+function WorkoutRow({
+  workout,
+  provider,
+  alreadyImported,
+}: {
+  workout: { id: string; name: string; fileUrl?: string; startedAt: string; distance: number | null; duration: number | null };
+  provider: { id: string; name: string };
+  alreadyImported: boolean;
+}) {
+  const { t } = useTranslation("journal");
+  const fetcher = useFetcher<{ imported?: string }>();
+  const isImporting = fetcher.state !== "idle";
+  const isImported = alreadyImported || fetcher.data?.imported === workout.id;
+
+  return (
+    <li className="flex items-center justify-between rounded-lg border border-gray-200 p-4">
+      <div>
+        <div className="flex items-center gap-2">
+          <p className="font-medium text-gray-900">{workout.name}</p>
+          {!workout.fileUrl && (
+            <span
+              className="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700"
+              title={t("sync.noGpsTooltip", { provider: provider.name })}
+            >
+              {t("sync.noGps")}
+            </span>
+          )}
+        </div>
+        <div className="mt-1 flex gap-3 text-sm text-gray-500">
+          {workout.startedAt && <ClientDate iso={workout.startedAt} />}
+          {workout.distance != null && <span>{(workout.distance / 1000).toFixed(1)} km</span>}
+          {workout.duration != null && <span>{Math.round(workout.duration / 60)} min</span>}
+        </div>
+      </div>
+      {isImported ? (
+        <span className="text-sm text-green-600">{t("sync.imported")}</span>
+      ) : isImporting ? (
+        <span className="text-sm text-gray-400">{t("sync.importing")}</span>
+      ) : (
+        <fetcher.Form method="post">
+          <input type="hidden" name="workoutId" value={workout.id} />
+          <input type="hidden" name="workoutName" value={workout.name} />
+          <input type="hidden" name="fileUrl" value={workout.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>
+        </fetcher.Form>
+      )}
+    </li>
+  );
+}
+
+export default function SyncImportPage({ loaderData }: Route.ComponentProps) {
   const { provider, workouts, page, totalPages } = loaderData;
   const { t } = useTranslation("journal");
-  const justImported = (actionData as { imported?: string })?.imported;
+
+  const importableWorkouts = workouts.filter((w) => !w.imported);
+  const [importAllActive, setImportAllActive] = useState(false);
+  const [importAllIndex, setImportAllIndex] = useState(0);
+  const importAllFetcher = useFetcher<{ imported?: string }>();
+  const importAllRef = useRef({ index: 0, workouts: importableWorkouts });
+
+  useEffect(() => {
+    importAllRef.current.workouts = importableWorkouts;
+  }, [importableWorkouts]);
+
+  useEffect(() => {
+    if (!importAllActive) return;
+    if (importAllFetcher.state !== "idle") return;
+
+    // Previous import finished — advance to next
+    const nextIndex = importAllFetcher.data ? importAllRef.current.index + 1 : importAllRef.current.index;
+    importAllRef.current.index = nextIndex;
+    setImportAllIndex(nextIndex);
+
+    if (nextIndex >= importAllRef.current.workouts.length) {
+      setImportAllActive(false);
+      return;
+    }
+
+    const w = importAllRef.current.workouts[nextIndex]!;
+    const formData = new FormData();
+    formData.set("workoutId", w.id);
+    formData.set("workoutName", w.name);
+    formData.set("fileUrl", w.fileUrl ?? "");
+    importAllFetcher.submit(formData, { method: "post" });
+  }, [importAllActive, importAllFetcher.state, importAllFetcher.data]);
+
+  const startImportAll = useCallback(() => {
+    if (importableWorkouts.length === 0) return;
+    importAllRef.current = { index: 0, workouts: importableWorkouts };
+    setImportAllIndex(0);
+    setImportAllActive(true);
+
+    const w = importableWorkouts[0]!;
+    const formData = new FormData();
+    formData.set("workoutId", w.id);
+    formData.set("workoutName", w.name);
+    formData.set("fileUrl", w.fileUrl ?? "");
+    importAllFetcher.submit(formData, { method: "post" });
+  }, [importableWorkouts, importAllFetcher]);
 
   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>
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">
+          {t("sync.importFrom", { provider: provider.name })}
+        </h1>
+        {importableWorkouts.length > 0 && (
+          importAllActive ? (
+            <span className="text-sm text-gray-500">
+              {t("sync.importingProgress", { current: importAllIndex + 1, total: importAllRef.current.workouts.length })}
+            </span>
+          ) : (
+            <button
+              onClick={startImportAll}
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+            >
+              {t("sync.importAll", { count: importableWorkouts.length })}
+            </button>
+          )
+        )}
+      </div>
 
       {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
+            <WorkoutRow
               key={w.id}
-              className="flex items-center justify-between rounded-lg border border-gray-200 p-4"
-            >
-              <div>
-                <div className="flex items-center gap-2">
-                  <p className="font-medium text-gray-900">{w.name}</p>
-                  {!w.fileUrl && (
-                    <span
-                      className="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700"
-                      title={t("sync.noGpsTooltip", { provider: provider.name })}
-                    >
-                      {t("sync.noGps")}
-                    </span>
-                  )}
-                </div>
-                <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>
+              workout={w}
+              provider={provider}
+              alreadyImported={w.imported || importAllFetcher.data?.imported === w.id}
+            />
           ))}
         </ul>
       )}