Fix reverse proxy subpath mounting support

- Added dynamic base URL detection in JavaScript
- Changed navigation links to relative paths
- Updated API calls to use detected base URL
- Fixed routing for /circles/ subpath mounting
- Added nginx proxy configuration example
- Tested with simulated reverse proxy setup

The application now works correctly whether accessed:
- Directly at root (http://localhost:8888/)
- Through reverse proxy at subpath (http://server/circles/)

🤖 Generated with [Claude Code](https://claude.ai/code)

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

Author: challgren

Dockerfile

@@ -15,7 +15,8 @@ ENV PUID=1000 \
     UPDATE_INTERVAL=5 \
     SHOW_ALL_AIRCRAFT=true \
     SHOW_TRACKS=true \
-    MAX_TRACK_POINTS=50
+    MAX_TRACK_POINTS=50 \
+    URL_PREFIX=""
 
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 

README.md

@@ -175,14 +175,25 @@ Access at: `http://localhost:8888/history`
 
 ### Reverse Proxy Support
 
-The application works seamlessly behind reverse proxies like `ghcr.io/sdr-enthusiasts/docker-reversewebproxy`. The Flask application automatically handles:
+The application works seamlessly behind reverse proxies including when mounted at a subpath. The application automatically detects its base URL and adjusts all links and API calls accordingly.
 
-- `X-Forwarded-For` - Client IP addresses
-- `X-Forwarded-Proto` - HTTP/HTTPS protocol
-- `X-Forwarded-Host` - Original hostname
-- `X-Forwarded-Prefix` - URL path prefix
+#### Nginx Configuration Example
+
+For mounting at `/circles/`:
+
+```nginx
+location /circles/ {
+    proxy_pass http://aircraft-circle:8888/;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection $http_connection;
+    proxy_set_header Host $http_host;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_redirect / /circles/;
+}
+```
 
-Example reverse proxy configuration:
+#### Docker Compose with sdr-enthusiasts/docker-reversewebproxy
 
 ```yaml
 services:
@@ -200,6 +211,15 @@ services:
       - TAR1090_URL=http://tar1090:80
 ```
 
+The application automatically handles:
+
+- `X-Forwarded-For` - Client IP addresses
+- `X-Forwarded-Proto` - HTTP/HTTPS protocol
+- `X-Forwarded-Host` - Original hostname
+- `X-Forwarded-Prefix` - URL path prefix
+- Relative URLs for all navigation and API calls
+- Automatic base URL detection for subpath mounting
+
 - Filter by date range, pattern type, and callsign
 - Visual timeline of detection activity
 - Direct links to TAR1090 replay for each pattern

app.py

@@ -15,6 +15,11 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
+        // Get base URL for API calls (handles reverse proxy scenarios)
+        // This works whether we're at root (/) or a subpath (/circles/)
+        const currentPath = window.location.pathname;
+        const baseUrl = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath.replace(/\\/[^/]*$/, '');
+        
         // Aircraft icon shapes from tar1090 - embedded directly to avoid loading issues
         const aircraftShapes = {
             'airliner': {
@@ -205,8 +210,8 @@
     <div class="header">
         <h1>✈️ Aircraft Pattern Detector - Live View</h1>
         <div class="nav-links">
-            <a href="/" class="active">Live View</a>
-            <a href="/history">History</a>
+            <a href="." class="active">Live View</a>
+            <a href="history">History</a>
         </div>
     </div>
     
@@ -408,7 +413,7 @@
         // Update patterns from API
         async function updatePatterns() {
             try {
-                const response = await fetch('/api/patterns');
+                const response = await fetch(baseUrl + '/api/patterns');
                 const data = await response.json();
                 
                 // Debug logging
@@ -718,6 +723,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        // Get base URL for API calls (handles reverse proxy scenarios)
+        const currentPath = window.location.pathname;
+        const baseUrl = currentPath.endsWith('/history') ? 
+            currentPath.slice(0, -8) : // Remove '/history'
+            (currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath.replace(/\\/[^/]*$/, ''));
+    </script>
     <script>
         // Aircraft icon shapes from tar1090 - embedded directly to avoid loading issues
         const aircraftShapes = {
@@ -985,8 +997,8 @@
     <div class="header">
         <h1>✈️ Pattern Detection History</h1>
         <div class="nav-links">
-            <a href="/">Live View</a>
-            <a href="/history" class="active">History</a>
+            <a href=".">Live View</a>
+            <a href="history" class="active">History</a>
         </div>
     </div>
     
@@ -1094,7 +1106,7 @@
         // Load history data
         async function loadHistory() {
             try {
-                const response = await fetch('/api/history');
+                const response = await fetch(baseUrl + '/api/history');
                 const data = await response.json();
                 
                 allCircles = data.circles || [];