various ui improvements, including a new sequence nav component and a new kabbalah detail view

app/ui-settings.js

@@ -209,12 +209,17 @@
     const activeDeckId = String(status?.activeDeckId || normalizeTarotDeck(getElements().tarotDeckEl?.value)).trim().toLowerCase();
     const loadedCount = Math.max(0, Number(status?.selectedDeckLoadedCount) || 0);
     const totalCount = Math.max(0, Number(status?.selectedDeckTotalCount) || 0);
+    const warmedDeckCount = Math.max(0, Number(status?.warmedDeckCount) || 0);
+    const totalDeckCount = Math.max(0, Number(status?.totalDeckCount) || 0);
+    const backgroundProgress = totalDeckCount > 1
+      ? ` (${Math.min(warmedDeckCount, totalDeckCount)}/${totalDeckCount} decks warmed)`
+      : "";
 
     if (status?.selectedDeckPhase === "loading") {
       if (totalCount > 0) {
-        return `Caching selected deck images to this browser... (${loadedCount}/${totalCount})`;
+        return `Caching selected deck images to this browser... (${loadedCount}/${totalCount})${backgroundProgress}`;
       }
-      return "Caching selected deck images to this browser...";
+      return `Caching selected deck images to this browser...${backgroundProgress}`;
     }
 
     if (status?.selectedDeckPhase === "error") {
@@ -222,9 +227,21 @@
     }
 
     if (status?.selectedDeckPhase === "ready") {
+      if (totalDeckCount > 1 && warmedDeckCount < totalDeckCount) {
+        return `Selected deck cached and ready for fullscreen use (${activeDeckId}). Warming the rest of the decks in background${backgroundProgress}.`;
+      }
+
+      if (totalDeckCount > 1) {
+        return `All connected deck images cached and ready (${totalDeckCount}/${totalDeckCount} decks warmed).`;
+      }
+
       return `Selected deck cached and ready for fullscreen use (${activeDeckId}).`;
     }
 
+    if (totalDeckCount > 1 && warmedDeckCount > 0) {
+      return `Deck cache idle. Background warmup has ${Math.min(warmedDeckCount, totalDeckCount)}/${totalDeckCount} decks ready.`;
+    }
+
     return "Deck cache idle.";
   }
 
@@ -570,6 +587,18 @@
       const previousConnectionSettings = getConnectionSettings();
       const connectionSettings = getConnectionSettingsFromInputs();
       const connectionChanged = hasConnectionChanged(previousConnectionSettings, connectionSettings);
+
+      if (connectionChanged) {
+        setSettingsPageStatus("Validating API connection...", "info", {
+          savedAt: loadLastSavedAt()
+        });
+
+        const probeResult = await window.TarotDataService?.probeConnection?.(connectionSettings);
+        if (!probeResult?.ok) {
+          throw new Error(probeResult?.message || "Unable to validate the API connection.");
+        }
+      }
+
       const connectionResult = window.TarotAppConfig?.updateConnectionSettings?.(connectionSettings) || { didPersist: true };
       const normalized = applySettingsToInputs(settings);
       syncSky(