Refactor AudibleService tests and mocks

Restructure and expand tests for AudibleService: replace a single hoisted axios client mock with separate htmlClientMock and apiClientMock, update axios.create to return clients in initialization order, and remove the fs mock. Add reusable fixture helpers (makeProduct, makeProductsResponse, apiResponse) and many new/spec-complete test cases organized into describe blocks (initialization, search, mapping, series rules, author search, popular/new releases, categories, and audiobook details). Improve assertions for pagination, deduplication, field mapping, error handling, and region/config behavior; reset and clear mocks in beforeEach to ensure isolation.

documentation/integrations/audible.md

@@ -1,104 +1,120 @@
 # Audible Integration
 
-**Status:** ✅ Implemented (Audnexus API + Web Scraping)
+**Status:** Implemented | Unauthenticated Audible JSON catalog API (primary) + Audnexus API (per-ASIN details)
 
-Audiobook metadata from Audnexus API (primary) and Audible.com scraping (fallback) for discovery, search, and detail pages.
+## Overview
 
-## Detail Page Strategy
+Audiobook metadata for discovery, search, and detail pages. All catalog operations (search, popular, new releases, categories, category books, author books, single-product details) now call Audible's unauthenticated public JSON catalog API (`api.audible.<tld>/1.0/catalog/*`). Per-ASIN detail lookups prefer Audnexus; the catalog API is used as fallback.
 
-**Primary: Audnexus API**
+## Architecture
-- Endpoint: `https://api.audnex.us/books/{asin}`
-- Structured JSON response (no parsing needed)
-- Provides: title, authors, narrators, description, duration, rating, genres, cover art
-- Free, no API key required
-- ~95% success rate for popular audiobooks
 
-**Fallback: Audible Scraping**
+- **Primary data source:** Audible JSON catalog API, same endpoint used by the official Audible mobile apps. No authentication, no API key, no user credentials, no special headers.
-- Used when Audnexus returns 404
+- **Per-ASIN details:** Audnexus (`api.audnex.us/books/{asin}`) remains primary; catalog API (`/1.0/catalog/products/{asin}`) is the fallback when Audnexus returns 404.
-- Parse Audible HTML with Cheerio
+- **HTML scraping:** Removed from `audible.service.ts`. The only remaining HTML path is `audible-series.ts` (series-page scraping, out of scope).
-- Multiple selector strategies with promotional text filtering
+- **`www.audible.<tld>`:** Still used by `audible-series.ts` and by `getBaseUrl()` for "View on Audible" link generation. Not used for any catalog operation.
-- Extract JSON-LD structured data when available
+
+## Data Sources
+
+All catalog operations are HTTP GET against `{apiBaseUrl}` (region-dependent, e.g. `https://api.audible.com`):
+
+| Operation | Endpoint | Key params |
+|---|---|---|
+| Search | `/1.0/catalog/products` | `keywords=<q>` |
+| Author books | `/1.0/catalog/products` | `author=<name>` (name, NOT ASIN) |
+| Popular | `/1.0/catalog/products` | `products_sort_by=BestSellers` |
+| New releases | `/1.0/catalog/products` | `products_sort_by=-ReleaseDate` |
+| Category books | `/1.0/catalog/products` | `category_id=<id>&products_sort_by=BestSellers` |
+| Categories listing | `/1.0/catalog/categories` | (none) |
+| Single product | `/1.0/catalog/products/{asin}` | — |
+| Audnexus (per-ASIN) | `https://api.audnex.us/books/{asin}` | `region={audnexusParam}` |
+
+All `products` endpoints share:
+- `num_results` — max **50** (service constant `AUDIBLE_PAGE_SIZE = 50`)
+- `page` — **0-indexed at the API** (service public interface is 1-indexed; the service subtracts 1 at the call site). See Gotchas.
+- `response_groups=<CATALOG_RESPONSE_GROUPS>`
+
+## `response_groups` Constant
+
+`CATALOG_RESPONSE_GROUPS = 'contributors,product_desc,product_attrs,product_extended_attrs,media,rating,series,category_ladders,product_details'`
+
+Populates every `AudibleAudiobook` field. Covered:
+- `contributors` → authors (with ASINs), narrators
+- `product_desc` → `publisher_summary`, `merchandising_summary`
+- `product_attrs` / `product_extended_attrs` / `product_details` → title, release_date, language, runtime_length_min
+- `media` → `product_images` (cover URLs, uses `500` variant)
+- `rating` → `overall_distribution.display_stars`
+- `series` → array of `{asin, title, sequence}`
+- `category_ladders` → genre names (deduped, capped at 5)
+
+## Gotchas
+
+- **`author=` takes a name, not an ASIN.** The catalog API has no ASIN-based author param. `searchByAuthorAsin()` queries by name, then filters client-side: keeps only products where `products[].authors[].asin === authorAsin`. Preserves ASIN-authoritative author identity. Also filters by `product.language` via `isAcceptedLanguage()` for the configured region.
+- **Invalid ASIN returns HTTP 200 with stub body.** `/1.0/catalog/products/{asin}` responds 200 with `{product: {asin: INPUT}}` and no other fields. `fetchAudibleDetailsFromApi()` detects this via missing `product.title` and returns `null`.
+- **`publisher_summary` is HTML.** Service strips tags via inline `stripHtml()` helper (regex-based, no cheerio) before populating `description`. Falls back to `merchandising_summary` (plain text) if `publisher_summary` missing.
+- **Series is an array.** `products[].series[]` — a book may belong to multiple series. Service picks the first entry with non-empty `sequence`, else the first entry. `sequence` is cleaned by extracting first `/\d+(?:\.\d+)?/` match for numeric ordering.
+- **Stub `product_images`:** cover URL reads from `product_images['500']`; missing keys fall back to `undefined`.
+- **`page` is 0-indexed.** Despite the default value appearing to be 1, the API returns items `(page * num_results)` through `((page + 1) * num_results - 1)`. So `page=1` fetches items 51–100, not 1–50. All service methods accept a 1-indexed `page` and subtract 1 at the axios call. The symptom of getting this wrong is silent: queries whose `total_results ≤ num_results` return an empty `products` array while `total_results` is populated (e.g. author searches for small catalogues).
+
+## Rate Limiting & Resilience
+
+- 503s still possible but dramatically less frequent than the HTML surface.
+- `fetchWithRetry()` — jittered exponential backoff, 5 retries, retries on 503/429/5xx.
+- `AdaptivePacer` circuit-breaker preserved.
+- Inter-page base delay on API paths: **500–1500ms** (down from 2000–4000ms for HTML).
+- API responses include `Cache-Control: private, max-age=1800`.
 
 ## Region Configuration
 
-**Status:** ✅ Implemented
+**Status:** Implemented
 
-Configurable Audible region for accurate metadata matching across different international Audible stores.
+Configurable Audible region for accurate metadata matching across international stores.
 
 **Supported Regions:**
-- United States (`us`) - `audible.com` (default, English)
-- Canada (`ca`) - `audible.ca` (English)
-- United Kingdom (`uk`) - `audible.co.uk` (English)
-- Australia (`au`) - `audible.com.au` (English)
-- India (`in`) - `audible.in` (English)
-- Germany (`de`) - `audible.de` (non-English)
-- Spain (`es`) - `audible.es` (non-English)
-- French (`fr`) - `audible.fr` (non-English)
 
-**`isEnglish` Flag:**
+| Code | Name | HTML baseUrl | apiBaseUrl | isEnglish |
-- Each region has `isEnglish: boolean` in `AudibleRegionConfig`
+|---|---|---|---|---|
-- Non-English regions (`isEnglish: false`) display an amber warning in all region dropdowns (setup wizard + admin settings)
+| `us` | United States | `https://www.audible.com` | `https://api.audible.com` | true (default) |
-- Warning text: "Many features such as search, discovery, and metadata matching are not yet fully supported for non-English regions."
+| `ca` | Canada | `https://www.audible.ca` | `https://api.audible.ca` | true |
-- Dropdown options for non-English regions show `*` suffix (e.g., "Germany *")
+| `uk` | United Kingdom | `https://www.audible.co.uk` | `https://api.audible.co.uk` | true |
+| `au` | Australia | `https://www.audible.com.au` | `https://api.audible.com.au` | true |
+| `in` | India | `https://www.audible.in` | `https://api.audible.in` | true |
+| `de` | Germany | `https://www.audible.de` | `https://api.audible.de` | false |
+| `es` | Spain | `https://www.audible.es` | `https://api.audible.es` | false |
+| `fr` | France | `https://www.audible.fr` | `https://api.audible.fr` | false |
 
-**Why Regions Matter:**
+**`AudibleRegionConfig` fields:** `code`, `name`, `baseUrl`, `apiBaseUrl`, `audnexusParam`, `language`.
-- Each Audible region uses different ASINs for the same audiobook
+
-- Metadata engines (Audnexus/Audible Agent) in Plex/Audiobookshelf must match RMAB's region
+**`isEnglish` flag:**
-- Mismatched regions cause poor search results and failed metadata matching
+- Non-English regions show amber warning in region dropdowns (setup wizard + admin settings): "Many features such as search, discovery, and metadata matching are not yet fully supported for non-English regions."
+- Dropdown options for non-English regions show `*` suffix.
+
+**Why regions matter:**
+- Each Audible region uses different ASINs for the same audiobook.
+- Metadata engines (Audnexus / Audible Agent) in Plex / Audiobookshelf must match RMAB's region.
 
 **Configuration:**
 - Key: `audible.region` (stored in database)
 - Default: `us`
 - Set during: Setup wizard (Backend Selection step) or Admin Settings (Library tab)
-- Help text instructs users to match their metadata engine region
+- Auto-detection: Service checks config before each request and re-initializes if region changed.
+- Cache clearing: Region change clears ConfigService cache and AudibleService state.
+- Automatic refresh: Region change triggers `audible_refresh` job.
 
-**Implementation:**
+**Per-region HTTP clients (on init):**
-- `AudibleService` loads region from config on initialization
+- `apiClient` — `baseURL=apiBaseUrl`, `Accept: application/json`, `User-Agent: ReadMeABook/1.0`, no language/ipRedirect params.
-- Dynamically builds base URL: `AUDIBLE_REGIONS[region].baseUrl`
+- `htmlClient` — `baseURL=baseUrl`, browser headers, default params `ipRedirectOverride=true` + `language=<audibleLocaleParam>`. Used only by `audible-series.ts` and `getBaseUrl()`-based link generation.
-- Audnexus API calls include region parameter: `?region={code}`
+- Audnexus calls include `region=<audnexusParam>`.
-- IP redirect prevention: `?ipRedirectOverride=true` on all Audible requests (region only)
-- **Locale enforcement:** `?language=english` query parameter on all Audible requests (forces English content regardless of server IP geolocation)
-- Configuration service helper: `getAudibleRegion()` returns configured region
-- **Auto-detection of region changes**: Service checks config before each request and re-initializes if region changed
-- **Cache clearing**: When region changes, ConfigService cache and AudibleService initialization are cleared
-- **Automatic refresh**: Changing region automatically triggers `audible_refresh` job to fetch new data
 
 **Files:**
 - Types: `src/lib/types/audible.ts`
 - Service: `src/lib/integrations/audible.service.ts`
+- Series (HTML): `src/lib/integrations/audible-series.ts`
 - Config: `src/lib/services/config.service.ts`
 - API: `src/app/api/admin/settings/audible/route.ts`
 
-## Discovery Strategy (Popular/New/Search)
-
-- Parse Audible HTML with Cheerio
-- Multi-page scraping (20 items/page)
-- Rate limit: max 10 req/min, 1.5s delay between pages
-- Cache results in database (24hr TTL)
-
-## Data Sources
-
-URLs dynamically built based on configured region:
-
-1. **Best Sellers:** `{baseUrl}/adblbestsellers`
-2. **New Releases:** `{baseUrl}/newreleases`
-3. **Search:** `{baseUrl}/search?keywords={query}&ipRedirectOverride=true`
-4. **Detail Page:** `{baseUrl}/pd/{asin}?ipRedirectOverride=true`
-5. **Audnexus API:** `https://api.audnex.us/books/{asin}?region={code}`
-
-Where `{baseUrl}` is determined by configured region (e.g., `https://www.audible.co.uk` for UK).
-
-## Metadata Extracted
-
-- ASIN (Audible ID)
-- Title, author, narrator
-- Duration (minutes), release date, rating
-- Description, cover art URL
-- Genres/categories
-
 ## Unified Matching (`audiobook-matcher.ts`)
 
-**Status:** ✅ Production Ready (ASIN-Only Matching)
+**Status:** Production Ready (ASIN-Only Matching)
 
 Single matching algorithm used everywhere (search, popular, new-releases, jobs).
 
@@ -112,50 +128,42 @@ Single matching algorithm used everywhere (search, popular, new-releases, jobs).
 - `findPlexMatch()`: ASIN (field) → ASIN (GUID) → null
 - `matchAudiobook()`: ASIN → ISBN → null
 
-**Benefits:**
+**Note:** Fuzzy matching (70% threshold) is preserved in `ranking-algorithm.ts` for Prowlarr torrent ranking. Library availability checks require exact ASIN matches only.
-- Real-time matching at query time (not pre-matched)
-- 100% confidence matches only (eliminates false positives)
-- O(1) indexed lookups (faster than fuzzy matching)
-- Solves race condition with Audiobookshelf ASIN population
-- Used by all APIs for consistency
-
-**Note:** Fuzzy matching (70% threshold) is preserved in `ranking-algorithm.ts` for Prowlarr torrent ranking, where it's needed to score multiple release candidates. Library availability checks require exact ASIN matches only.
 
 ## Database-First Approach
 
-**Status:** ✅ Implemented
+**Status:** Implemented
 
 Discovery APIs serve cached data from DB with real-time matching.
 
 **Flow:**
-1. `audible_refresh` job runs daily → fetches 200 popular + 200 new releases + user-configured categories
+1. `audible_refresh` cron runs daily → fetches 200 popular + 200 new releases + user-configured categories via catalog API.
-2. Downloads and caches cover thumbnails locally (reduces Audible load)
+2. Downloads and caches cover thumbnails locally.
-3. Stores metadata in `audible_cache`, ranked entries in `audible_cache_categories` with reserved IDs (`__popular__`, `__new_releases__`) and user category IDs
+3. Stores metadata in `audible_cache`, ranked entries in `audible_cache_categories` with reserved IDs (`__popular__`, `__new_releases__`) and user category IDs.
-4. Cleans up unused thumbnails after sync
+4. Cleans up unused thumbnails after sync.
-5. API routes query `AudibleCacheCategory` by categoryId → join with `AudibleCache` metadata → apply real-time matching → return enriched results
+5. API routes query `AudibleCacheCategory` by categoryId → join with `AudibleCache` metadata → apply real-time matching → return enriched results.
-6. Homepage loads instantly (no Audible API hits)
+6. Homepage loads instantly (no Audible API hits).
 
 ## Thumbnail Caching
 
-**Status:** ✅ Implemented
+**Status:** Implemented
 
-Cover images cached locally to reduce external requests and improve performance.
+Cover images cached locally to reduce external requests.
 
-**Features:**
+- Downloads covers during `audible_refresh` job.
-- Downloads covers during `audible_refresh` job
+- Stores in `/app/cache/thumbnails` (Docker volume).
-- Stores in `/app/cache/thumbnails` (Docker volume)
+- Serves via `/api/cache/thumbnails/[filename]`.
-- Serves via `/api/cache/thumbnails/[filename]`
+- Auto-cleanup of unused thumbnails.
-- Auto-cleanup of unused thumbnails
+- Falls back to original URL if cache fails.
-- Falls back to original URL if cache fails
+- 24-hour browser cache headers.
-- 24-hour browser cache headers
+- Filename: `{asin}.{ext}` (e.g. `B08G9PRS1K.jpg`).
 
-**Implementation:**
+**Files:**
 - Service: `src/lib/services/thumbnail-cache.service.ts`
 - API Route: `src/app/api/cache/thumbnails/[filename]/route.ts`
 - Storage: Docker volume `cache` mounted at `/app/cache`
-- Filename: `{asin}.{ext}` (e.g., `B08G9PRS1K.jpg`)
 
-**API Endpoints:**
+## App-Level API Endpoints
 
 **GET /api/audiobooks/popular?page=1&limit=20**
 **GET /api/audiobooks/new-releases?page=1&limit=20**
@@ -182,6 +190,7 @@ interface AudibleAudiobook {
   asin: string;
   title: string;
   author: string;
+  authorAsin?: string;
   narrator?: string;
   description?: string;
   coverArtUrl?: string;
@@ -189,6 +198,9 @@ interface AudibleAudiobook {
   releaseDate?: string;
   rating?: number;
   genres?: string[];
+  series?: string;
+  seriesPart?: string;
+  seriesAsin?: string;
 }
 
 interface EnrichedAudibleAudiobook extends AudibleAudiobook {
@@ -197,48 +209,45 @@ interface EnrichedAudibleAudiobook extends AudibleAudiobook {
   plexGuid: string | null;
   dbId: string;
 }
+
+interface AudibleSearchResult {
+  query: string;
+  results: AudibleAudiobook[];
+  totalResults: number;
+  page: number;
+  hasMore: boolean;
+}
+
+interface AuthorBooksResult {
+  books: AudibleAudiobook[];
+  hasMore: boolean;
+  page: number;
+  totalResults: number;
+}
 ```
 
 ## Tech Stack
 
-- axios (HTTP)
+- `axios` (HTTP, two clients: `apiClient` for JSON catalog, `htmlClient` for series-page scraping only)
-- cheerio (HTML parsing)
+- Audnexus API (per-ASIN details, primary)
-- Redis (caching, optional)
+- PostgreSQL (`audible_cache`, `audible_cache_categories`)
-- Database (PostgreSQL)
-- string-similarity (matching)
 
 ## Fixed Issues
 
-**Search returning empty results (2026-01-07)**
-- **Problem:** Audible changed HTML structure for search results from `.productListItem` to `.s-result-item`
-- **Impact:** All search queries returned 0 results
-- **Fix:** Updated `search()` method to support both `.s-result-item` (current) and `.productListItem` (legacy)
-- **Selectors updated:**
-  - Main: `.s-result-item, .productListItem`
-  - Title: `h2` (new) or `h3 a` (legacy)
-  - Author: `a[href*="/author/"]` (new) or `.authorLabel` (legacy)
-  - Narrator: `a[href*="searchNarrator="]` (new) or `.narratorLabel` (legacy)
-  - Runtime: `span:contains("Length:")` (new) or `.runtimeLabel` (legacy)
-  - Rating: `.a-icon-star span` (new) or `.ratingsLabel` (legacy)
-- **Location:** `src/lib/integrations/audible.service.ts:235`
-
-**Some audiobooks missing from search results (2026-01-07)**
-- **Problem:** ASIN extraction only matched `/pd/` URLs but some audiobooks use `/ac/` URLs
-- **Impact:** Books like "Beatitude" by DJ Krimmer (ASIN: B0DVH7XL36) were skipped
-- **Fix:** Updated ASIN regex to match both `/pd/` and `/ac/` URL patterns: `/\/(?:pd|ac)\/[^\/]+\/([A-Z0-9]{10})/`
-- **Location:** `src/lib/integrations/audible.service.ts:75, 161, 240`
-- **Affects:** `getPopularAudiobooks()`, `getNewReleases()`, `search()` methods
-
 **Audiobookshelf metadata matching not respecting configured region (2026-01-28)**
-- **Problem:** `triggerABSItemMatch()` hardcoded `'audible'` provider (audible.com) instead of respecting user's configured Audible region
+- **Problem:** `triggerABSItemMatch()` hardcoded `'audible'` provider (audible.com) instead of respecting user's configured Audible region.
-- **Impact:** Users with non-US regions (CA, UK, AU, IN) had incorrect metadata matching in Audiobookshelf, causing wrong ASINs and poor search results
+- **Impact:** Users with non-US regions (CA, UK, AU, IN) had incorrect metadata matching in Audiobookshelf, causing wrong ASINs.
-- **Fix:** Added `mapRegionToABSProvider()` to convert RMAB region codes to AudiobookShelf provider values. US → `'audible'`, others → `'audible.{region}'` (e.g., `'audible.ca'`, `'audible.uk'`)
+- **Fix:** Added `mapRegionToABSProvider()` to convert RMAB region codes to Audiobookshelf provider values. US → `'audible'`, others → `'audible.{region}'` (e.g. `'audible.ca'`, `'audible.uk'`).
 - **Location:** `src/lib/services/audiobookshelf/api.ts:14, 147`
-- **Affects:** All Audiobookshelf metadata matching operations
 
 **Non-English locale pages served to users outside US (2026-02-05)**
-- **Problem:** Audible uses IP geolocation to serve locale-specific pages (e.g., Spanish content for Dominican Republic IPs). `ipRedirectOverride=true` only prevents region redirects (audible.com → audible.co.uk), NOT language/locale changes.
+- **Problem:** Audible uses IP geolocation to serve locale-specific pages. `ipRedirectOverride=true` only prevents region redirects, NOT language/locale changes.
-- **Impact:** Users self-hosting from non-English-speaking countries got non-English bestsellers/new releases on their homepage.
+- **Impact:** Users self-hosting from non-English-speaking countries got non-English content on HTML-scraped surfaces.
-- **Fix:** Added `language=english` query parameter to all Audible requests via axios default params. Audible respects this parameter and serves English content regardless of IP geolocation. Fails gracefully for regions where English isn't available.
+- **Fix:** Added `language=<audibleLocaleParam>` default param on `htmlClient` (axios default params). Still in effect for the remaining HTML path (`audible-series.ts`). **Not applied to `apiClient`** — the catalog JSON API is region-bound via `apiBaseUrl` and does not require the language param.
-- **Location:** `src/lib/integrations/audible.service.ts` — `initialize()` (axios default params)
+- **Location:** `src/lib/integrations/audible.service.ts` — `initialize()` (htmlClient params)
-- **Affects:** All Audible scraping: popular, new releases, search, detail pages
+
+## Related
+
+- [Audiobookshelf Integration](./audiobookshelf.md)
+- [Plex Integration](./plex.md)
+- [Ranking Algorithm](../phase3/ranking-algorithm.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "readmeabook",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/path-helper/page.tsx

@@ -0,0 +1,932 @@
+/**
+ * Component: Path Mapping Helper
+ * Documentation: documentation/deployment/volume-mapping.md
+ *
+ * Public, unprotected page that guides users through configuring
+ * Docker volume mappings for their download clients and RMAB.
+ * Purely client-side — no API calls, no real data access.
+ */
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import {
+  CLIENT_DISPLAY_NAMES,
+  CLIENT_PROTOCOL_MAP,
+  type DownloadClientType,
+} from '@/lib/interfaces/download-client.interface';
+
+// =========================================================================
+// TYPES
+// =========================================================================
+
+interface ClientConfig {
+  type: DownloadClientType;
+  /** The path inside the download client container where completed downloads land */
+  savePath: string;
+  /** The volume mapping from the client's docker-compose (host:container) — host side */
+  hostPath: string;
+  /** The volume mapping from the client's docker-compose (host:container) — container side */
+  containerMountPath: string;
+  /** Whether this client needs remote path mapping */
+  remotePathMapping: boolean;
+  /** The path as seen by the remote download client (for remote path mapping) */
+  remotePath: string;
+}
+
+type Step = 'clients' | 'save-paths' | 'host-paths' | 'results';
+
+const STEPS: { key: Step; title: string }[] = [
+  { key: 'clients', title: 'Clients' },
+  { key: 'save-paths', title: 'Save Paths' },
+  { key: 'host-paths', title: 'Volume Mapping' },
+  { key: 'results', title: 'Results' },
+];
+
+const ALL_CLIENTS: DownloadClientType[] = ['qbittorrent', 'transmission', 'deluge', 'sabnzbd', 'nzbget'];
+
+const DEFAULT_SAVE_PATHS: Record<DownloadClientType, string> = {
+  qbittorrent: '/downloads',
+  transmission: '/downloads/complete',
+  deluge: '/downloads',
+  sabnzbd: '/downloads/complete',
+  nzbget: '/downloads/completed',
+};
+
+// =========================================================================
+// UTILITY FUNCTIONS
+// =========================================================================
+
+/**
+ * Find the longest common path prefix across multiple paths.
+ * Only meaningful when there are multiple DIFFERENT paths.
+ */
+function findCommonRoot(paths: string[]): string {
+  if (paths.length === 0) return '';
+  if (paths.length === 1) return paths[0];
+
+  const unique = [...new Set(paths)];
+  if (unique.length === 1) return unique[0];
+
+  // Split each path into segments
+  const segmentArrays = unique.map((p) => p.replace(/\/+$/, '').split('/').filter(Boolean));
+  const minLength = Math.min(...segmentArrays.map((s) => s.length));
+
+  const commonSegments: string[] = [];
+  for (let i = 0; i < minLength; i++) {
+    const segment = segmentArrays[0][i];
+    if (segmentArrays.every((s) => s[i] === segment)) {
+      commonSegments.push(segment);
+    } else {
+      break;
+    }
+  }
+
+  if (commonSegments.length === 0) return '/';
+  return '/' + commonSegments.join('/');
+}
+
+/**
+ * Get the relative path from a root to a full path.
+ * Returns empty string if they're the same.
+ */
+function getRelativePath(root: string, fullPath: string): string {
+  const normalizedRoot = root.replace(/\/+$/, '');
+  const normalizedFull = fullPath.replace(/\/+$/, '');
+
+  if (normalizedRoot === normalizedFull) return '';
+
+  if (normalizedFull.startsWith(normalizedRoot + '/')) {
+    return normalizedFull.slice(normalizedRoot.length + 1);
+  }
+
+  // Shouldn't happen if common root is correct, but fallback
+  return normalizedFull;
+}
+
+/**
+ * Find the common root of the host paths to build the RMAB volume mapping.
+ * Maps from the host path hierarchy to the container path hierarchy.
+ */
+function findHostCommonRoot(configs: ClientConfig[]): string {
+  const hostPaths = configs.map((c) => c.hostPath);
+  if (hostPaths.length === 0) return '';
+  if (hostPaths.length === 1) return hostPaths[0];
+
+  const unique = [...new Set(hostPaths)];
+  if (unique.length === 1) return unique[0];
+
+  return findCommonRoot(hostPaths);
+}
+
+// =========================================================================
+// COMPONENTS
+// =========================================================================
+
+function StepIndicator({ currentStep }: { currentStep: Step }) {
+  const currentIndex = STEPS.findIndex((s) => s.key === currentStep);
+
+  return (
+    <div className="flex items-center justify-between py-4">
+      {STEPS.map((step, index) => (
+        <div key={step.key} className="flex items-center flex-1">
+          <div className="flex flex-col items-center flex-1">
+            <div
+              className={`
+                w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm
+                ${
+                  index < currentIndex
+                    ? 'bg-green-500 text-white'
+                    : index === currentIndex
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
+                }
+              `}
+            >
+              {index < currentIndex ? (
+                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              ) : (
+                index + 1
+              )}
+            </div>
+            <span
+              className={`
+                text-xs mt-2 text-center whitespace-nowrap
+                ${
+                  index === currentIndex
+                    ? 'text-blue-600 dark:text-blue-400 font-medium'
+                    : 'text-gray-600 dark:text-gray-400'
+                }
+              `}
+            >
+              {step.title}
+            </span>
+          </div>
+          {index < STEPS.length - 1 && (
+            <div
+              className={`
+                h-1 flex-1 mx-1 rounded
+                ${index < currentIndex ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'}
+              `}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function InfoBox({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
+      <div className="flex gap-3">
+        <svg
+          className="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+            clipRule="evenodd"
+          />
+        </svg>
+        <div className="text-sm text-blue-800 dark:text-blue-200">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function WarningBox({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-800">
+      <div className="flex gap-3">
+        <svg
+          className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+        <div className="text-sm text-amber-800 dark:text-amber-200">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function CodeBlock({ children, label, onCopy }: { children: string; label?: string; onCopy?: () => void }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(children);
+    setCopied(true);
+    onCopy?.();
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative">
+      {label && (
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{label}</div>
+      )}
+      <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 font-mono text-sm text-gray-100 overflow-x-auto">
+        <pre className="whitespace-pre">{children}</pre>
+      </div>
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 px-2 py-1 text-xs rounded bg-gray-700 hover:bg-gray-600 text-gray-300 transition-colors"
+        style={label ? { top: '1.75rem' } : undefined}
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+
+// =========================================================================
+// STEP COMPONENTS
+// =========================================================================
+
+function ClientSelectionStep({
+  selectedClients,
+  onToggle,
+  onNext,
+}: {
+  selectedClients: Set<DownloadClientType>;
+  onToggle: (client: DownloadClientType) => void;
+  onNext: () => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Which download clients do you use?
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mt-2">
+          Select all the download clients you have configured or plan to use with ReadMeABook.
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        {ALL_CLIENTS.map((client) => {
+          const protocol = CLIENT_PROTOCOL_MAP[client];
+          const isSelected = selectedClients.has(client);
+
+          return (
+            <button
+              key={client}
+              onClick={() => onToggle(client)}
+              className={`
+                w-full flex items-center gap-4 p-4 rounded-lg border-2 transition-all text-left
+                ${
+                  isSelected
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                }
+              `}
+            >
+              <div
+                className={`
+                  w-6 h-6 rounded border-2 flex items-center justify-center flex-shrink-0
+                  ${
+                    isSelected
+                      ? 'border-blue-500 bg-blue-500'
+                      : 'border-gray-300 dark:border-gray-600'
+                  }
+                `}
+              >
+                {isSelected && (
+                  <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </div>
+              <div className="flex-1">
+                <div className="font-medium text-gray-900 dark:text-gray-100">
+                  {CLIENT_DISPLAY_NAMES[client]}
+                </div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 capitalize">
+                  {protocol} client
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={onNext} disabled={selectedClients.size === 0}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SavePathsStep({
+  configs,
+  onUpdateConfig,
+  onNext,
+  onBack,
+}: {
+  configs: ClientConfig[];
+  onUpdateConfig: (type: DownloadClientType, field: keyof ClientConfig, value: string) => void;
+  onNext: () => void;
+  onBack: () => void;
+}) {
+  const allFilled = configs.every((c) => c.savePath.trim() !== '');
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Download client save paths
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mt-2">
+          For each client, enter the path <strong>inside that client&apos;s container</strong> where
+          completed downloads are saved. This is the path you see in the client&apos;s own settings
+          (e.g., qBittorrent Web UI &rarr; Options &rarr; Downloads &rarr; Default Save Path).
+        </p>
+      </div>
+
+      <InfoBox>
+        <p>
+          <strong>This is the container path, not the host path.</strong> For example, if your
+          qBittorrent docker-compose has <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">-
+          /mnt/data/torrents:/downloads</code>, and qBittorrent is configured to save
+          to <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">/downloads</code>, then
+          enter <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">/downloads</code> here.
+        </p>
+      </InfoBox>
+
+      <div className="space-y-4">
+        {configs.map((config) => (
+          <div key={config.type} className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2 mb-3">
+              <span className="font-medium text-gray-900 dark:text-gray-100">
+                {CLIENT_DISPLAY_NAMES[config.type]}
+              </span>
+              <span className="text-xs px-2 py-0.5 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 capitalize">
+                {CLIENT_PROTOCOL_MAP[config.type]}
+              </span>
+            </div>
+            <Input
+              placeholder={DEFAULT_SAVE_PATHS[config.type]}
+              value={config.savePath}
+              onChange={(e) => onUpdateConfig(config.type, 'savePath', e.target.value)}
+              className="font-mono"
+              helperText={`Default: ${DEFAULT_SAVE_PATHS[config.type]}`}
+            />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button onClick={onBack} variant="outline">
+          Back
+        </Button>
+        <Button onClick={onNext} disabled={!allFilled}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function HostPathsStep({
+  configs,
+  onUpdateConfig,
+  onNext,
+  onBack,
+}: {
+  configs: ClientConfig[];
+  onUpdateConfig: (type: DownloadClientType, field: keyof ClientConfig, value: string | boolean) => void;
+  onNext: () => void;
+  onBack: () => void;
+}) {
+  const allFilled = configs.every(
+    (c) => c.hostPath.trim() !== '' && c.containerMountPath.trim() !== '' && (!c.remotePathMapping || c.remotePath.trim() !== '')
+  );
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Docker volume mappings
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mt-2">
+          For each client, enter the volume mapping from <strong>that client&apos;s</strong> docker-compose
+          file. This tells us where on your host machine the downloads actually end up.
+        </p>
+      </div>
+
+      <InfoBox>
+        <p>
+          A Docker volume mapping looks like <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">/host/path:/container/path</code> in
+          your docker-compose.yml. We need both sides so we know how to map RMAB to the same files.
+        </p>
+      </InfoBox>
+
+      <div className="space-y-6">
+        {configs.map((config) => (
+          <div key={config.type} className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-5 border border-gray-200 dark:border-gray-700 space-y-4">
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-gray-900 dark:text-gray-100">
+                {CLIENT_DISPLAY_NAMES[config.type]}
+              </span>
+              <span className="text-xs px-2 py-0.5 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 capitalize">
+                {CLIENT_PROTOCOL_MAP[config.type]}
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <Input
+                label="Host path (left side of :)"
+                placeholder="/mnt/data/downloads"
+                value={config.hostPath}
+                onChange={(e) => onUpdateConfig(config.type, 'hostPath', e.target.value)}
+                className="font-mono"
+                helperText="The real path on your server"
+              />
+              <Input
+                label="Container path (right side of :)"
+                placeholder="/downloads"
+                value={config.containerMountPath}
+                onChange={(e) => onUpdateConfig(config.type, 'containerMountPath', e.target.value)}
+                className="font-mono"
+                helperText="The path inside the container"
+              />
+            </div>
+
+            {config.containerMountPath && config.hostPath && (
+              <div className="text-sm text-gray-600 dark:text-gray-400 font-mono bg-gray-100 dark:bg-gray-900 rounded px-3 py-2">
+                {config.hostPath}:{config.containerMountPath}
+              </div>
+            )}
+
+            {/* Remote path mapping toggle */}
+            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+              <div className="flex items-start gap-3">
+                <input
+                  type="checkbox"
+                  id={`remote-${config.type}`}
+                  checked={config.remotePathMapping}
+                  onChange={(e) => onUpdateConfig(config.type, 'remotePathMapping', e.target.checked)}
+                  className="mt-1 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <div className="flex-1">
+                  <label
+                    htmlFor={`remote-${config.type}`}
+                    className="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
+                  >
+                    This client runs on a different machine than RMAB
+                  </label>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Enable this if the download client is on a seedbox, separate server, or otherwise has a
+                    different filesystem than where RMAB runs. Also enable this if the client runs on the
+                    host (not in Docker) while RMAB runs in Docker.
+                  </p>
+                </div>
+              </div>
+
+              {config.remotePathMapping && (
+                <div className="mt-3 ml-8">
+                  <Input
+                    label="Remote path (as seen by the download client)"
+                    placeholder="/remote/mnt/downloads/complete"
+                    value={config.remotePath}
+                    onChange={(e) => onUpdateConfig(config.type, 'remotePath', e.target.value)}
+                    className="font-mono"
+                    helperText="The path the download client reports when a download completes. This is often the same as the client's save path."
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button onClick={onBack} variant="outline">
+          Back
+        </Button>
+        <Button onClick={onNext} disabled={!allFilled}>
+          Generate Configuration
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ResultsStep({
+  configs,
+  onBack,
+  onRestart,
+}: {
+  configs: ClientConfig[];
+  onBack: () => void;
+  onRestart: () => void;
+}) {
+  // Determine if we need custom paths (multiple clients with different save paths)
+  const savePaths = configs.map((c) => c.savePath.replace(/\/+$/, ''));
+  const uniqueSavePaths = [...new Set(savePaths)];
+  const needsCustomPaths = configs.length > 1 && uniqueSavePaths.length > 1;
+
+  // Calculate RMAB download directory
+  const rmabDownloadDir = needsCustomPaths ? findCommonRoot(savePaths) : savePaths[0];
+
+  // Calculate custom paths per client (only if needed)
+  const clientCustomPaths = needsCustomPaths
+    ? configs.map((c) => ({
+        type: c.type,
+        customPath: getRelativePath(rmabDownloadDir, c.savePath.replace(/\/+$/, '')),
+      }))
+    : [];
+
+  // Calculate RMAB volume mapping
+  // We need the host path that corresponds to the rmabDownloadDir
+  // If all clients share the same save path, we use that client's host path directly.
+  // If multiple different paths, we find the common host root.
+  let rmabHostPath: string;
+  let rmabContainerPath: string;
+
+  if (!needsCustomPaths) {
+    // Single path scenario — use the first client's host path
+    // But we need to consider if the container mount path differs from the save path
+    const config = configs[0];
+    const saveRelativeToMount = getRelativePath(
+      config.containerMountPath.replace(/\/+$/, ''),
+      config.savePath.replace(/\/+$/, '')
+    );
+
+    if (saveRelativeToMount) {
+      // Save path is deeper than the mount: host must include that extra depth
+      rmabHostPath = config.hostPath.replace(/\/+$/, '') + '/' + saveRelativeToMount;
+    } else {
+      rmabHostPath = config.hostPath;
+    }
+    rmabContainerPath = rmabDownloadDir;
+  } else {
+    // Multiple different paths — we need to find the host root that covers all
+    // For each client, compute the host path that corresponds to the common container root
+    const hostRoots = configs.map((c) => {
+      const mountRelativeToCommon = getRelativePath(
+        rmabDownloadDir,
+        c.containerMountPath.replace(/\/+$/, '')
+      );
+      const saveRelativeToMount = getRelativePath(
+        c.containerMountPath.replace(/\/+$/, ''),
+        c.savePath.replace(/\/+$/, '')
+      );
+      // The host path maps to containerMountPath. We need to go up if rmabDownloadDir
+      // is a parent of the container mount path.
+      const containerMountNorm = c.containerMountPath.replace(/\/+$/, '');
+      const rmabDirNorm = rmabDownloadDir.replace(/\/+$/, '');
+
+      if (containerMountNorm === rmabDirNorm) {
+        return c.hostPath.replace(/\/+$/, '');
+      } else if (containerMountNorm.startsWith(rmabDirNorm + '/')) {
+        // Container mount is deeper than RMAB dir — we need to go up on the host side
+        const depth = containerMountNorm.slice(rmabDirNorm.length + 1).split('/').length;
+        const hostSegments = c.hostPath.replace(/\/+$/, '').split('/');
+        return hostSegments.slice(0, -depth).join('/') || '/';
+      } else if (rmabDirNorm.startsWith(containerMountNorm + '/')) {
+        // RMAB dir is deeper than container mount — append the extra to host
+        const extra = rmabDirNorm.slice(containerMountNorm.length + 1);
+        return c.hostPath.replace(/\/+$/, '') + '/' + extra;
+      }
+      return c.hostPath.replace(/\/+$/, '');
+    });
+
+    rmabHostPath = findHostCommonRoot(
+      configs.map((c, i) => ({ ...c, hostPath: hostRoots[i] }))
+    );
+    rmabContainerPath = rmabDownloadDir;
+  }
+
+  // Build the RMAB compose snippet
+  const composeSnippet = `services:
+  readmeabook:
+    volumes:
+      - ${rmabHostPath}:${rmabContainerPath}
+      # ... your other RMAB volumes (config, media, etc.)`;
+
+  // Build remote path mapping info
+  const remoteClients = configs.filter((c) => c.remotePathMapping);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Your recommended configuration
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mt-2">
+          Based on your inputs, here&apos;s how to configure ReadMeABook and your download clients.
+        </p>
+      </div>
+
+      {/* RMAB Download Directory */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          1. RMAB Download Directory Setting
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Set this in RMAB&apos;s settings under <strong>Admin &rarr; Settings &rarr; Paths &rarr; Download Directory</strong>.
+        </p>
+        <CodeBlock label="Download Directory">{rmabDownloadDir}</CodeBlock>
+      </div>
+
+      {/* Custom paths per client */}
+      {needsCustomPaths && clientCustomPaths.some((c) => c.customPath) && (
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            2. Client Custom Paths
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Since your clients save to different locations, set these custom paths on each download client
+            in RMAB (<strong>Admin &rarr; Settings &rarr; Download Clients &rarr; Edit &rarr; Custom Path</strong>).
+          </p>
+          <div className="space-y-2">
+            {clientCustomPaths.map((c) => (
+              <div key={c.type} className="flex items-center gap-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
+                <span className="font-medium text-gray-900 dark:text-gray-100 min-w-[120px]">
+                  {CLIENT_DISPLAY_NAMES[c.type as DownloadClientType]}:
+                </span>
+                <code className="font-mono text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-gray-800 dark:text-gray-200">
+                  {c.customPath || '(none — same as download directory)'}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* RMAB Docker Compose Volume */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {needsCustomPaths ? '3' : '2'}. RMAB Docker Compose Volume Mapping
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Add this volume mapping to your RMAB docker-compose.yml. This ensures RMAB can see the
+          same files your download clients produce.
+        </p>
+        <CodeBlock label="docker-compose.yml">{composeSnippet}</CodeBlock>
+      </div>
+
+      {/* Golden Rule explanation */}
+      <WarningBox>
+        <p className="font-semibold mb-1">The Golden Rule</p>
+        <p>
+          Both your download client and RMAB must see files at the <strong>same container path</strong>.
+          The volume mapping above ensures that when your download client saves a file
+          to <code className="bg-amber-100 dark:bg-amber-800 px-1 rounded">{configs[0]?.savePath}</code>,
+          RMAB can also find it at that same path.
+        </p>
+      </WarningBox>
+
+      {/* Verification */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {needsCustomPaths ? '4' : '3'}. Verify your setup
+        </h3>
+        <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+          <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+            {configs.map((c) => (
+              <li key={c.type} className="flex items-start gap-2">
+                <span className="text-gray-400 mt-0.5">&#8226;</span>
+                <span>
+                  <strong>{CLIENT_DISPLAY_NAMES[c.type]}</strong> saves
+                  to <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded font-mono text-xs">{c.savePath}</code>
+                  {' '}&rarr; host path <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded font-mono text-xs">{c.hostPath}</code>
+                  {needsCustomPaths && (
+                    <>
+                      {' '}&rarr; RMAB custom
+                      path: <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded font-mono text-xs">
+                        {getRelativePath(rmabDownloadDir, c.savePath.replace(/\/+$/, '')) || '(none)'}
+                      </code>
+                    </>
+                  )}
+                </span>
+              </li>
+            ))}
+            <li className="flex items-start gap-2">
+              <span className="text-gray-400 mt-0.5">&#8226;</span>
+              <span>
+                <strong>RMAB</strong> mounts <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded font-mono text-xs">{rmabHostPath}:{rmabContainerPath}</code>
+                {' '}&rarr; download directory set
+                to <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded font-mono text-xs">{rmabDownloadDir}</code>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Remote Path Mapping */}
+      {remoteClients.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Remote Path Mapping
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            These clients run on a different machine. Configure remote path mapping for each in
+            RMAB (<strong>Admin &rarr; Settings &rarr; Download Clients &rarr; Edit</strong>).
+          </p>
+          <div className="space-y-3">
+            {remoteClients.map((c) => {
+              const localPath = needsCustomPaths
+                ? rmabDownloadDir + '/' + getRelativePath(rmabDownloadDir, c.savePath.replace(/\/+$/, ''))
+                : rmabDownloadDir;
+
+              return (
+                <div key={c.type} className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700 space-y-2">
+                  <div className="font-medium text-gray-900 dark:text-gray-100">
+                    {CLIENT_DISPLAY_NAMES[c.type]}
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+                    <div>
+                      <span className="text-gray-500 dark:text-gray-400 block mb-1">Enable Remote Path Mapping:</span>
+                      <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded font-mono text-gray-800 dark:text-gray-200">Yes</code>
+                    </div>
+                    <div>
+                      <span className="text-gray-500 dark:text-gray-400 block mb-1">Remote Path:</span>
+                      <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded font-mono text-gray-800 dark:text-gray-200">{c.remotePath}</code>
+                    </div>
+                    <div className="sm:col-span-2">
+                      <span className="text-gray-500 dark:text-gray-400 block mb-1">Local Path:</span>
+                      <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded font-mono text-gray-800 dark:text-gray-200">{localPath}</code>
+                    </div>
+                  </div>
+                  <InfoBox>
+                    <p>
+                      When this client reports a file at <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{c.remotePath}/audiobook.m4b</code>,
+                      RMAB will translate it to <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{localPath}/audiobook.m4b</code>.
+                    </p>
+                  </InfoBox>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-between pt-4">
+        <Button onClick={onBack} variant="outline">
+          Back
+        </Button>
+        <Button onClick={onRestart} variant="secondary">
+          Start Over
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// =========================================================================
+// MAIN PAGE
+// =========================================================================
+
+export default function PathHelperPage() {
+  const [step, setStep] = useState<Step>('clients');
+  const [selectedClients, setSelectedClients] = useState<Set<DownloadClientType>>(new Set());
+  const [clientConfigs, setClientConfigs] = useState<Map<DownloadClientType, ClientConfig>>(new Map());
+
+  // Build ordered configs array from selected clients
+  const configs = useMemo(() => {
+    return ALL_CLIENTS
+      .filter((c) => selectedClients.has(c))
+      .map((type) => {
+        const existing = clientConfigs.get(type);
+        return (
+          existing || {
+            type,
+            savePath: DEFAULT_SAVE_PATHS[type],
+            hostPath: '',
+            containerMountPath: '',
+            remotePathMapping: false,
+            remotePath: '',
+          }
+        );
+      });
+  }, [selectedClients, clientConfigs]);
+
+  const toggleClient = (client: DownloadClientType) => {
+    setSelectedClients((prev) => {
+      const next = new Set(prev);
+      if (next.has(client)) {
+        next.delete(client);
+      } else {
+        next.add(client);
+        // Initialize config if not exists
+        if (!clientConfigs.has(client)) {
+          setClientConfigs((prev) => {
+            const next = new Map(prev);
+            next.set(client, {
+              type: client,
+              savePath: DEFAULT_SAVE_PATHS[client],
+              hostPath: '',
+              containerMountPath: '',
+              remotePathMapping: false,
+              remotePath: '',
+            });
+            return next;
+          });
+        }
+      }
+      return next;
+    });
+  };
+
+  const updateConfig = (type: DownloadClientType, field: keyof ClientConfig, value: string | boolean) => {
+    setClientConfigs((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(type);
+      if (existing) {
+        next.set(type, { ...existing, [field]: value });
+      }
+      return next;
+    });
+  };
+
+  const goToStep = (target: Step) => setStep(target);
+
+  const restart = () => {
+    setStep('clients');
+    setSelectedClients(new Set());
+    setClientConfigs(new Map());
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
+        <div className="container mx-auto px-4 py-6 max-w-4xl">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            Path Mapping Helper
+          </h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            Get your download client volume mappings configured correctly for ReadMeABook
+          </p>
+        </div>
+      </div>
+
+      {/* Step Indicator */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="container mx-auto px-2 sm:px-4 max-w-4xl">
+          <StepIndicator currentStep={step} />
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
+          {step === 'clients' && (
+            <ClientSelectionStep
+              selectedClients={selectedClients}
+              onToggle={toggleClient}
+              onNext={() => goToStep('save-paths')}
+            />
+          )}
+          {step === 'save-paths' && (
+            <SavePathsStep
+              configs={configs}
+              onUpdateConfig={updateConfig}
+              onNext={() => goToStep('host-paths')}
+              onBack={() => goToStep('clients')}
+            />
+          )}
+          {step === 'host-paths' && (
+            <HostPathsStep
+              configs={configs}
+              onUpdateConfig={updateConfig}
+              onNext={() => goToStep('results')}
+              onBack={() => goToStep('save-paths')}
+            />
+          )}
+          {step === 'results' && (
+            <ResultsStep
+              configs={configs}
+              onBack={() => goToStep('host-paths')}
+              onRestart={restart}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/types/audible.ts

@@ -11,6 +11,7 @@ export interface AudibleRegionConfig {
   code: AudibleRegion;
   name: string;
   baseUrl: string;
+  apiBaseUrl: string;
   audnexusParam: string;
   language: SupportedLanguage;
 }
@@ -20,6 +21,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'us',
     name: 'United States',
     baseUrl: 'https://www.audible.com',
+    apiBaseUrl: 'https://api.audible.com',
     audnexusParam: 'us',
     language: 'en',
   },
@@ -27,6 +29,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'ca',
     name: 'Canada',
     baseUrl: 'https://www.audible.ca',
+    apiBaseUrl: 'https://api.audible.ca',
     audnexusParam: 'ca',
     language: 'en',
   },
@@ -34,6 +37,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'uk',
     name: 'United Kingdom',
     baseUrl: 'https://www.audible.co.uk',
+    apiBaseUrl: 'https://api.audible.co.uk',
     audnexusParam: 'uk',
     language: 'en',
   },
@@ -41,6 +45,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'au',
     name: 'Australia',
     baseUrl: 'https://www.audible.com.au',
+    apiBaseUrl: 'https://api.audible.com.au',
     audnexusParam: 'au',
     language: 'en',
   },
@@ -48,6 +53,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'in',
     name: 'India',
     baseUrl: 'https://www.audible.in',
+    apiBaseUrl: 'https://api.audible.in',
     audnexusParam: 'in',
     language: 'en',
   },
@@ -55,6 +61,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'de',
     name: 'Germany',
     baseUrl: 'https://www.audible.de',
+    apiBaseUrl: 'https://api.audible.de',
     audnexusParam: 'de',
     language: 'de',
   },
@@ -62,6 +69,7 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'es',
     name: 'Spain',
     baseUrl: 'https://www.audible.es',
+    apiBaseUrl: 'https://api.audible.es',
     audnexusParam: 'es',
     language: 'es',
   },
@@ -69,9 +77,10 @@ export const AUDIBLE_REGIONS: Record<AudibleRegion, AudibleRegionConfig> = {
     code: 'fr',
     name: 'France',
     baseUrl: 'https://www.audible.fr',
+    apiBaseUrl: 'https://api.audible.fr',
     audnexusParam: 'fr',
     language: 'fr',
-  }
+  },
 };
 
 export const DEFAULT_AUDIBLE_REGION: AudibleRegion = 'us';