From b441d1bf5f914b75ce2441ce628661c7bed58752 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 5 Jul 2026 11:44:05 +0000
Subject: [PATCH] Revert "Simplify VirtualRow to Willowbrook demo + rownative
 route import (#170)"

This reverts commit c0183328df05b07c429371590f4aa5406bfc0370.
---
 DEVELOPMENT.md                          |  17 +-
 README.md                               |  18 +--
 docs/index.html                         |  30 +---
 src/App.tsx                             | 203 +++++++++++++++++++-----
 src/__tests__/app.test.tsx              |  10 +-
 src/__tests__/routeService.test.ts      |  11 +-
 src/components/RownativeRouteImport.tsx |  45 ++++--
 src/data/seedRouteCoordinates.ts        |   8 +-
 src/services/routeService.ts            |   8 +-
 9 files changed, 234 insertions(+), 116 deletions(-)

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index eef1176..1d0de46 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -18,7 +18,7 @@ Service Layer (Business Logic)
  heartRateBluetoothService (HR Monitor)
  routeService (Route Management)
  workoutService (Workout Tracking)
- rownativeService (Route Discovery / Import)
+ workoutGeneratorService (Structured Workouts)
     
 External APIs & Hardware
  Web Bluetooth API (PM5/HR Devices)
@@ -47,8 +47,10 @@ src/
     BluetoothDevice.tsx      # PM5 connection UI
     HeartRateMonitor.tsx     # HR monitor connection
     HeartRateChart.tsx       # HR visualization
+    HeartRateZonesChart.tsx  # HR zones display
     PM5Simulator.tsx         # PM5 hardware simulator
-    RownativeRouteImport.tsx # rownative.icu search/import UI
+    WorkoutGenerator.tsx     # Structured workout UI
+    WorkoutProgressDisplay.tsx
     MiniMetrics.tsx          # Compact metrics overlay
     PerformanceChart.tsx     # Performance graphs
     Canvas3DErrorBoundary.tsx
@@ -60,9 +62,9 @@ src/
     bluetoothService.ts      # PM5 Bluetooth communication
     heartRateBluetoothService.ts # HR monitor service
     pm5SimulatorService.ts   # PM5 simulation
-    routeService.ts          # Demo route data + imported routes
-    rownativeService.ts      # rownative.icu course catalogue
+    routeService.ts          # Route data management
     workoutService.ts        # Workout session tracking
+    workoutGeneratorService.ts # Structured workouts
  utils/
     geoUtils.ts              # Geographic calculations
     gpuUtils.ts              # WebGL/GPU detection
@@ -86,11 +88,11 @@ playwright/
 
 `App.tsx` owns all application state. There is no global state library; all data flows via props and callbacks:
 
-- `currentView`: `'routes' | 'workout'`
+- `currentView`: `'routes' | 'workouts' | 'workout' | 'history'`
 - `sessionState`: `'idle' | 'active' | 'paused'`
-- `selectedRoute`, `currentSession` — active session data
+- `selectedRoute`, `selectedWorkout`, `currentSession` — active session data
 - `pm5Data`, `heartRateSamples` — live device streams
-- `workoutHistory` — persisted sessions used for local personal-best tracking
+- `workoutHistory`, `workoutProgress` — persistence + workout tracking
 
 A session auto-ends when `pm5Data.distance ≥ 99.5% of route.distance`. This auto-end is suppressed under the `window.__PLAYWRIGHT_TESTING` flag used by E2E tests.
 
@@ -112,6 +114,7 @@ The main 3D visualization component (~2000 lines) using React Three Fiber:
 Fullscreen HUD rendered on top of the 3D canvas during an active workout:
 
 - Live metrics: pace (s/500m), power (W), distance (m), elapsed time, cadence (SPM), heart rate
+- Workout progress when a structured workout is active (segment type, time remaining, compliance)
 - Pause/Resume control
 
 ### Services
diff --git a/README.md b/README.md
index f5b41fb..80bfd39 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,23 @@
-# VirtualRow — Willowbrook Demo + rownative.icu Routes
+# VirtualRow — Row Anywhere on Real Water Routes
 
 [![Deploy Landing Page](https://github.com/MaximumTrainer/virtualrow/actions/workflows/pages.yml/badge.svg)](https://github.com/MaximumTrainer/virtualrow/actions/workflows/pages.yml)
 [![Playwright E2E Tests](https://github.com/MaximumTrainer/virtualrow/actions/workflows/playwright-e2e-clean.yml/badge.svg)](https://github.com/MaximumTrainer/virtualrow/actions/workflows/playwright-e2e-clean.yml)
 
 **[🌐 Website](https://maximumtrainer.github.io/virtualrow/) · [📦 GitHub](https://github.com/MaximumTrainer/virtualrow)**
 
-VirtualRow is a web-based fitness application that lets you row on a bundled Willowbrook River demo route or imported rownative.icu courses while connected to your Concept2 PM5 indoor rower via Bluetooth. Experience immersive 3D rowing visualization from your home.
+VirtualRow is a web-based fitness application that lets you row on virtual water routes while connected to your Concept2 PM5 indoor rower via Bluetooth. Experience immersive 3D rowing visualization from your home.
 
 ## Features
 
 ### Water Routes
 
-One built-in demo route ships with the app, and additional routes are imported from rownative.icu:
+VirtualRow now ships with one bundled demo route:
 
 | Route | Location | Distance | Difficulty |
 |---|---|---|---|
 | Willowbrook River | Willowbrook Valley | 5.0 km | Easy |
 
-Use Willowbrook as the demo/example route, then search and import additional courses from rownative.icu directly in the app.
+To row real-world courses, search and import them directly from **rownative.icu** in the route selector.
 
 ### Immersive 3D Visualization
 
@@ -34,7 +34,7 @@ Use Willowbrook as the demo/example route, then search and import additional cou
 
 - Connect directly to your Concept2 PM5 monitor via Web Bluetooth API (Concept2 CSAFE BLE profile)
 - Real-time performance metrics: pace, distance, time, power, stroke rate, calories
-- Connection persists across route selection and activity views
+- Connection persists across route changes and UI navigation
 - Built-in PM5 Simulator for testing and demo without physical hardware
 
 ### Heart Rate Monitoring
@@ -72,7 +72,6 @@ src/
     BluetoothDevice.tsx            # PM5 connection UI
     HeartRateMonitor.tsx           # HR monitor connection
     PM5Simulator.tsx               # PM5 hardware simulator
-    RownativeRouteImport.tsx       # rownative.icu route search + import UI
     MiniMetrics.tsx                # Compact metrics overlay
     PerformanceChart.tsx           # Post-session performance graphs
     HeartRateChart.tsx             # Live HR chart
@@ -85,9 +84,8 @@ src/
     bluetoothService.ts            # PM5 BLE communication
     heartRateBluetoothService.ts   # HR monitor BLE service
     pm5SimulatorService.ts         # PM5 simulation
-    routeService.ts                # Demo route data + rownative route import
-    workoutService.ts              # Session tracking + localStorage persistence
-    rownativeService.ts            # rownative.icu catalogue + import
+    routeService.ts                # Route data + rownative route import
+    workoutService.ts              # Session tracking
  utils/
     geoUtils.ts                    # Geographic calculations
     gpuUtils.ts                    # WebGL/GPU detection
@@ -112,7 +110,7 @@ docs/
 
 ```bash
 # Run unit tests (Vitest)
-npm run test -- --run
+npm test
 
 # Run unit tests in watch mode
 npm test -- --watch
diff --git a/docs/index.html b/docs/index.html
index 2581d25..55a5eff 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="VirtualRow — Row the Willowbrook demo route or imported rownative.icu courses in real-time 3D, powered by your Concept2 PM5 via Bluetooth." />
-  <title>VirtualRow — Willowbrook Demo + rownative.icu Routes</title>
+  <meta name="description" content="VirtualRow — Row scenic water routes in real-time 3D, powered by your Concept2 PM5 via Bluetooth." />
+  <title>VirtualRow — Virtual Rowing on Water Routes</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
@@ -559,7 +559,7 @@
     Open Source · Web Bluetooth · No Account Required
   </span>
   <h1 id="hero-heading" class="fade-up delay-1">
-    Row the <span class="highlight">Willowbrook demo</span><br/>or import rownative.icu courses
+    Row on <span class="highlight">scenic water routes</span><br/>in your living room
   </h1>
   <p class="hero-sub fade-up delay-2">
     VirtualRow connects your Concept2 PM5 to immersive 3D river environments
@@ -611,7 +611,7 @@ <h2 id="features-heading" class="section-title">
       </h2>
       <p class="section-body">
         From real Bluetooth hardware integration to rownative.icu route imports,
-        VirtualRow delivers training-grade rowing sessions directly in your browser.
+        VirtualRow focuses on route selection and live on-water activity.
       </p>
     </div>
     <div class="features-grid" role="list">
@@ -640,8 +640,8 @@ <h3>Immersive 3D Visualization</h3>
             <path d="M12 8a8 8 0 0 0-8 8"/>
           </svg>
         </div>
-        <h3>Demo + Imported Routes</h3>
-        <p>Start on the Willowbrook River demo (~5 km), then search and import additional courses from rownative.icu. Progress syncs with your PM5 distance in real-time.</p>
+        <h3>Scenic Water Routes</h3>
+        <p>Row the bundled Willowbrook River (~5 km) or search rownative.icu and import real-world routes instantly.</p>
         <div class="feature-tags">
           <span class="feature-tag">Willowbrook demo</span>
           <span class="feature-tag">rownative.icu import</span>
@@ -665,22 +665,6 @@ <h3>Concept2 PM5 Integration</h3>
         </div>
       </article>
 
-      <!-- Route Discovery -->
-      <article class="feature-card" role="listitem">
-        <div class="feature-icon" aria-hidden="true">
-          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-            <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
-          </svg>
-        </div>
-        <h3>Route Discovery from rownative.icu</h3>
-        <p>Search the mirrored rownative.icu course catalogue, import a route with one click, and keep the imported course alongside the Willowbrook demo in your route library.</p>
-        <div class="feature-tags">
-          <span class="feature-tag">Search</span>
-          <span class="feature-tag">One-click import</span>
-          <span class="feature-tag">Route library</span>
-        </div>
-      </article>
-
       <!-- Heart Rate -->
       <article class="feature-card" role="listitem">
         <div class="feature-icon" aria-hidden="true">
@@ -733,7 +717,7 @@ <h2 id="screenshots-heading" class="section-title">See the core flow</h2>
       <a class="screenshot-thumb" href="screenshot-route-selection.png" data-full-image>
         <img
           src="screenshot-route-selection.png"
-          alt="VirtualRow route selection screen — choose Willowbrook River or search rownative.icu routes"
+          alt="VirtualRow route selection screen — choose Willowbrook River or import a rownative.icu route"
           width="640"
           height="360"
           loading="lazy"
diff --git a/src/App.tsx b/src/App.tsx
index a3ee126..6684b2c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import { heartRateSimulator } from './services/heartRateSimulatorService';
 import { routeEnrichmentService } from './services/routeEnrichmentService';
 import { useAuth } from './context/AuthContext';
 import { formatPace } from './utils/formatters';
+import { buildSessionFITPayload, triggerBlobDownload } from './utils/exporters';
 import type { WaterRoute, PM5Data, WorkoutSession, HeartRateSample } from './types/index';
 import type { RouteEnrichmentData } from './services/routeEnrichmentService';
 import './App.css';
@@ -33,8 +34,8 @@ function extractRouteStatus(tags: string[] | undefined): string | undefined {
 }
 
 function App() {
-  const { user, isAuthenticated } = useAuth();
-  const [currentView, setCurrentView] = useState<'routes' | 'workout'>('routes');
+  const { isAuthenticated } = useAuth();
+  const [currentView, setCurrentView] = useState<'routes' | 'workout' | 'history'>('routes');
   const [routes, setRoutes] = useState<WaterRoute[]>([]);
   const [selectedRoute, setSelectedRoute] = useState<WaterRoute | null>(null);
   const [isWorkoutActive, setIsWorkoutActive] = useState(false);
@@ -45,6 +46,10 @@ function App() {
   const [hrConnected, setHrConnected] = useState(false);
   const [heartRateSamples, setHeartRateSamples] = useState<HeartRateSample[]>([]);
   const [activeRowerType, setActiveRowerType] = useState<'pm5' | 'ftms'>('pm5');
+  // Filter state for routes
+  const [difficultyFilter, setDifficultyFilter] = useState<'all' | 'easy' | 'moderate' | 'hard'>('all');
+  const distanceMin = 0;
+  const distanceMax = 100;
   // Local activity timer (ms elapsed since workout started)
   const [activityElapsedMs, setActivityElapsedMs] = useState(0);
   const activityTimerRef = useRef<number | null>(null);
@@ -181,30 +186,6 @@ function App() {
     };
   }, [selectedRoute]);
 
-  // Load persisted sessions from localStorage when the user logs in (stub until #37)
-  useEffect(() => {
-    if (isAuthenticated && user) {
-      const saved = loadSessions(user.id);
-      // Merge saved sessions into the in-memory service so personal-best calculations
-      // include previously completed authenticated sessions.
-      saved.forEach((s) => {
-        const existing = workoutService.getAllSessions().find((e) => e.id === s.id);
-        if (!existing) {
-          // Inject via the service's internal sessions array is not exposed; instead
-          // surface them through the workoutHistory state directly.
-        }
-      });
-      // Surface saved sessions locally (combine with in-memory ones)
-      const inMemory = workoutService.getAllSessions();
-      const merged = [...saved, ...inMemory.filter((s) => !saved.find((p) => p.id === s.id))];
-      setWorkoutHistory(merged.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()));
-    } else if (!isAuthenticated) {
-      // Revert to in-memory sessions (e.g. after sign-out)
-      setWorkoutHistory(workoutService.getAllSessions());
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthenticated, user?.id]);
-
   const activeRowerLabel = useMemo(() => (
     activeRowerType === 'pm5' ? 'PM5' : 'FTMS'
   ), [activeRowerType]);
@@ -341,6 +322,21 @@ function App() {
     // Note: Full reset logic would need to clear workoutService data
   }, []);
 
+  const handleExportFIT = useCallback((session: WorkoutSession) => {
+    const payload = buildSessionFITPayload(session);
+    const filename = `virtualrow-${session.id}.fit.json`;
+    triggerBlobDownload(JSON.stringify(payload, null, 2), 'application/json', filename);
+  }, []);
+
+  // Get filtered routes based on current filter settings
+  const filteredRoutes = useMemo(() => {
+    let filtered = routes;
+    if (difficultyFilter !== 'all') {
+      filtered = filtered.filter(r => r.difficulty === difficultyFilter);
+    }
+    return filtered.filter(r => r.distance >= distanceMin && r.distance <= distanceMax);
+  }, [routes, difficultyFilter, distanceMin, distanceMax]);
+
   const handlePM5Data = useCallback((data: PM5Data) => {
     // Always update the service synchronously — no React render triggered here.
     workoutService.updateSessionWithPM5Data(data);
@@ -464,20 +460,37 @@ function App() {
     setSelectedRoute(route);
   }, []);
 
-  // Calculate personal best for a route (only completed sessions count)
-  const getPersonalBest = useCallback((routeId: string) => {
-    const route = routeService.getRouteById(routeId);
-    if (!route) return null;
-    const routeDistanceMeters = route.distance * 1000; // route.distance is in km
-    // Only sessions that completed the full course are eligible for PB
-    const completedSessions = workoutHistory.filter(
-      s => s.routeId === routeId && s.averagePace > 0 && s.distance >= routeDistanceMeters
-    );
-    if (completedSessions.length === 0) return null;
-    return completedSessions.reduce((best, session) =>
-      session.averagePace < best.averagePace ? session : best
-    , completedSessions[0]);
-  }, [workoutHistory]);
+  const handleGeoJSONFileImport = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const text = ev.target?.result as string;
+      try {
+        const parsed = JSON.parse(text);
+        const nameFromFile =
+          importRouteName.trim() ||
+          (parsed?.properties?.name as string | undefined) ||
+          file.name.replace(/\.[^.]+$/, '');
+        const imported = routeService.importRouteFromGeoJSON(text, {
+          name: nameFromFile,
+          difficulty: 'moderate',
+          location: (parsed?.properties?.country as string | undefined) ?? 'Imported',
+          tags: ['imported', 'geojson'],
+        });
+        if (imported) {
+          handleRouteImported(imported);
+          setIsImportOpen(false);
+          setImportRouteName('');
+          // Reset the file input
+          e.target.value = '';
+        }
+      } catch {
+        // Ignore parse errors — user will see no route appear
+      }
+    };
+    reader.readAsText(file);
+  }, [importRouteName, handleRouteImported]);
   const latestHeartRate = useMemo(() => (
     heartRateSamples.length > 0
       ? heartRateSamples[heartRateSamples.length - 1].bpm
@@ -525,7 +538,7 @@ function App() {
       <header className="app-header">
         <div className="header-content">
           <h1 className="app-title">VirtualRow</h1>
-          <p className="app-subtitle">Row the Willowbrook demo or import rownative.icu routes</p>
+          <p className="app-subtitle">Willowbrook demo plus rownative.icu route import for real-world rowing</p>
           <div className="header-auth">
             <AuthButton />
           </div>
@@ -553,6 +566,23 @@ function App() {
               : '',
           ].filter(Boolean).join(' ')}
         >
+          <nav className="nav-tabs">
+            <button
+              className={`nav-tab ${currentView === 'routes' ? 'active' : ''}`}
+              onClick={() => setCurrentView('routes')}
+            >
+              <span className="tab-icon">🗺️</span> Routes
+            </button>
+            {!isGuestMode && (
+              <button
+                className={`nav-tab ${currentView === 'history' ? 'active' : ''}`}
+                onClick={() => setCurrentView('history')}
+              >
+                <span className="tab-icon">📋</span> History
+              </button>
+            )}
+          </nav>
+
           {currentView === 'routes' && (
             <div className="routes-devices-row">
               <div className="device-panel device-panel--selection">
@@ -601,6 +631,7 @@ function App() {
               </div>
             </div>
           )}
+
         </aside>
 
         <main className="app-main">
@@ -687,10 +718,51 @@ function App() {
                 {!isGuestMode && (
                   <div className="routes-list">
                     <div className="routes-list-header">
-                      <h3>Route Library</h3>
-                      <RownativeRouteImport onRouteImported={handleRouteImported} />
+                      <h3>Routes</h3>
+                      <button
+                        type="button"
+                        className="btn-import-route"
+                        onClick={() => setIsImportOpen((o) => !o)}
+                        aria-expanded={isImportOpen}
+                      >
+                        Import Route
+                      </button>
+                      <RownativeRouteImport
+                        onRouteImported={handleRouteImported}
+                      />
+                      {isImportOpen && (
+                        <div className="route-import">
+                          <label htmlFor="import-route-name">Route name</label>
+                          <input
+                            id="import-route-name"
+                            type="text"
+                            className="import-name-input"
+                            placeholder="Route name"
+                            value={importRouteName}
+                            onChange={(e) => setImportRouteName(e.target.value)}
+                          />
+                          <input
+                            type="file"
+                            accept=".geojson,.json,.gpx,.kml"
+                            onChange={handleGeoJSONFileImport}
+                          />
+                        </div>
+                      )}
+                      <div className="route-filters">
+                        <div className="filter-group">
+                          {(['all', 'easy', 'moderate', 'hard'] as const).map((d) => (
+                            <button
+                              key={d}
+                              className={`filter-btn${difficultyFilter === d ? ' filter-btn--active' : ''}`}
+                              onClick={() => setDifficultyFilter(d)}
+                            >
+                              {d === 'all' ? 'All' : d.charAt(0).toUpperCase() + d.slice(1)}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
                     </div>
-                    {routes.map((route) => {
+                    {filteredRoutes.map((route) => {
                        const rownativeStatus = extractRouteStatus(route.tags);
                        return (
                          <div
@@ -740,6 +812,48 @@ function App() {
             </div>
           )}
 
+          {currentView === 'history' && (
+            <div className="view-container history-view">
+              <h2>Workout History</h2>
+              {workoutHistory.length === 0 ? (
+                <p className="empty-message">No workouts recorded yet.</p>
+              ) : (
+                <div className="history-list">
+                  {[...workoutHistory].reverse().map((session) => (
+                    <div key={session.id} className="history-item">
+                      <div className="history-header">
+                        <h3>{session.routeName}</h3>
+                        <span className="date">
+                          {new Date(session.startTime).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <div className="history-stats">
+                        <span>{(session.distance / 1000).toFixed(2)} km</span>
+                        <span>•</span>
+                        <span>{Math.floor(session.duration / 60)}:{String(session.duration % 60).padStart(2, '0')}</span>
+                        {session.averagePace > 0 && (
+                          <>
+                            <span>•</span>
+                            <span>{formatPace(session.averagePace)}/500m</span>
+                          </>
+                        )}
+                      </div>
+                      <div className="history-actions">
+                        <button
+                          type="button"
+                          className="btn-export"
+                          onClick={() => handleExportFIT(session)}
+                        >
+                          FIT
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
           {currentView === 'workout' && isWorkoutActive && currentSession && (
             <div className="view-container activity-view">
               <div className="activity-screen">
@@ -866,6 +980,7 @@ function App() {
               </div>
             </div>
           )}
+
         </main>
       </div>
 
diff --git a/src/__tests__/app.test.tsx b/src/__tests__/app.test.tsx
index 4b49c00..57a0bba 100644
--- a/src/__tests__/app.test.tsx
+++ b/src/__tests__/app.test.tsx
@@ -50,17 +50,14 @@ afterAll(() => {
 });
 
 describe('App component', () => {
-  it('renders title, demo route, rownative import, and heart rate panel', () => {
+  it('renders title, routes list, and heart rate panel', () => {
     render(<App />);
     expect(screen.getByRole('heading', { name: /VirtualRow/i })).toBeInTheDocument();
-    // Check Willowbrook River route appears (the only bundled route now)
+    // Check Willowbrook River route appears (the only route now)
     const matches = screen.getAllByText(/Willowbrook River/i);
     expect(matches.length).toBeGreaterThan(0);
-    expect(screen.getByRole('button', { name: /Search rownative\.icu/i })).toBeInTheDocument();
     // Heart Rate panel title
     expect(screen.getByText(/Heart Rate/i)).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /History/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /Workouts/i })).not.toBeInTheDocument();
   });
 
   it('formats pace values for the activity screen', () => {
@@ -75,7 +72,7 @@ describe('App component', () => {
     expect(screen.getByRole('button', { name: /Quick Start/i })).toBeInTheDocument();
   });
 
-  it('shows guest mode without workout or history navigation (?guest=true)', () => {
+  it('shows route-only navigation in guest mode (?guest=true)', () => {
     // Simulate URL param
     const url = new URL(window.location.href);
     url.searchParams.set('guest', 'true');
@@ -86,7 +83,6 @@ describe('App component', () => {
     expect(screen.getByRole('button', { name: /Routes/i })).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /History/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /Workouts/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /Search rownative\.icu/i })).not.toBeInTheDocument();
     expect(screen.getAllByText(/Guest Mode/i).length).toBeGreaterThan(0);
 
     // Clean up URL
diff --git a/src/__tests__/routeService.test.ts b/src/__tests__/routeService.test.ts
index 35970e7..edffad2 100644
--- a/src/__tests__/routeService.test.ts
+++ b/src/__tests__/routeService.test.ts
@@ -5,10 +5,15 @@ import { routeService } from '../services/routeService';
 const WILLOWBROOK_BBOX = { minLat: 48.1200, maxLat: 48.1634, minLng: 11.5750, maxLng: 11.5862 };
 
 describe('RouteService basic data', () => {
-  it('provides only the Willowbrook River demo route by default', () => {
+  it('provides only the Willowbrook demo route', () => {
     const routes = routeService.getAllRoutes();
-    expect(routes).toHaveLength(1);
-    expect(routes[0]?.id).toBe('1');
+    expect(routes.length).toBe(1);
+    expect(routes[0].id).toBe('1');
+    expect(routes[0].name).toBe('Willowbrook River');
+    expect(routes[0].distance).toBeCloseTo(5.0, 1);
+    expect(routes[0].difficulty).toBe('easy');
+    expect(routes[0].coordinates.length).toBeGreaterThan(70);
+    expect(routes[0].tags).toContain('river');
   });
   
   it('provides Willowbrook River route with distance and coordinates', () => {
diff --git a/src/components/RownativeRouteImport.tsx b/src/components/RownativeRouteImport.tsx
index c0dc67e..b52efa1 100644
--- a/src/components/RownativeRouteImport.tsx
+++ b/src/components/RownativeRouteImport.tsx
@@ -9,7 +9,7 @@ interface RownativeRouteImportProps {
 }
 
 export function RownativeRouteImport({ onRouteImported }: RownativeRouteImportProps) {
-  const { rownativeService } = useServices();
+  const { authService, rownativeService, routeService } = useServices();
   const [isOpen, setIsOpen] = useState(false);
   const [isLinking, setIsLinking] = useState(false);
   const [isPulling, setIsPulling] = useState(false);
@@ -201,18 +201,37 @@ export function RownativeRouteImport({ onRouteImported }: RownativeRouteImportPr
             </p>
           )}
 
-          {showManualFallback && (
-            <div className="rownative-fallback">
-              <p>
-                Browse courses directly on
-                {' '}
-                <a href="https://rownative.icu/" target="_blank" rel="noreferrer">
-                  rownative.icu
-                </a>
-                {' '}and retry the import here once the catalog is reachable again.
-              </p>
-            </div>
-          )}
+          <div className="rownative-controls">
+            {!isLinked && (
+              <>
+                <button type="button" className="filter-btn filter-btn--active" onClick={() => void handleStartLink()} disabled={isLinking || !currentUserId}>
+                  {isLinking ? 'Starting link…' : 'Link rownative account'}
+                </button>
+                <button type="button" className="filter-btn" onClick={() => void handleCompleteLink()} disabled={isLinking || !currentUserId}>
+                  {isLinking ? 'Checking…' : 'Complete linking'}
+                </button>
+              </>
+            )}
+
+            {isLinked && (
+              <>
+                <input
+                  type="text"
+                  className="import-name-input"
+                  placeholder="Optional route id or URL"
+                  value={routeSelector}
+                  onChange={(e) => setRouteSelector(e.target.value)}
+                  aria-label="Rownative route id or URL"
+                />
+                <button type="button" className="filter-btn filter-btn--active" onClick={() => void handlePullRoute()} disabled={isPulling}>
+                  {isPulling ? 'Pulling…' : 'Pull route KML'}
+                </button>
+                <button type="button" className="filter-btn" onClick={() => void handleUnlink()} disabled={isUnlinking}>
+                  {isUnlinking ? 'Unlinking…' : 'Unlink rownative account'}
+                </button>
+              </>
+            )}
+          </div>
 
           {kmlCandidates && (
             <div className="rownative-controls">
diff --git a/src/data/seedRouteCoordinates.ts b/src/data/seedRouteCoordinates.ts
index 7fa28d3..f91880c 100644
--- a/src/data/seedRouteCoordinates.ts
+++ b/src/data/seedRouteCoordinates.ts
@@ -1,12 +1,6 @@
-/**
- * Coordinate polyline for the bundled demo route.
- *
- * Extracted from routeService.ts so the service file stays focused on logic.
- */
 import type { Coordinate } from '../types/index';
 
-// Willowbrook River - a fictional 5km meandering river demo route
-// Starts in forested highlands, passes through open meadows, winds through a small village, and ends at a tranquil lake delta
+// Willowbrook River - a fictional 5km meandering river route
 export const willowbrookRiverCoordinates: Coordinate[] = [
   // Section 1: Forest headwaters (0-1km) - gentle curves through dense woodland
   {"lat":48.1200,"lng":11.5800},{"lat":48.1202,"lng":11.5806},{"lat":48.1205,"lng":11.5811},{"lat":48.1209,"lng":11.5814},
diff --git a/src/services/routeService.ts b/src/services/routeService.ts
index f15557e..4f69f0d 100644
--- a/src/services/routeService.ts
+++ b/src/services/routeService.ts
@@ -1,5 +1,8 @@
 import type { WaterRoute, Coordinate, RouteFormData } from '../types/index';
-import { willowbrookRiverCoordinates } from '../data/seedRouteCoordinates';
+import {
+  willowbrookRiverCoordinates,
+} from '../data/seedRouteCoordinates';
+import { parseGeoJSONCoordinate, parseKMLCoordinateList } from '../utils/coordinateUtils';
 
 /** A parsed KML placemark with its coordinate sequence, ready to import as a route. */
 export interface KMLImportCandidate {
@@ -39,7 +42,8 @@ export class RouteService {
   }
 
   private initializeMockRoutes(): void {
-    // Initialize with the single bundled demo route.
+    // Initialize with the single built-in demo route; additional rownative routes
+    // are still added dynamically via importRouteFromRownative().
     this.routes = [
       {
         id: '1',