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

app/data-service.js

@@ -102,8 +102,22 @@
     pluto: "Pluto"
   };
 
-  function buildRequestHeaders() {
-    const apiKey = getApiKey();
+  function resolveConnectionSettings(connectionSettings = null) {
+    if (!connectionSettings || typeof connectionSettings !== "object") {
+      return {
+        apiBaseUrl: getApiBaseUrl(),
+        apiKey: getApiKey()
+      };
+    }
+
+    return {
+      apiBaseUrl: normalizeApiBaseUrl(connectionSettings.apiBaseUrl),
+      apiKey: String(connectionSettings.apiKey || "").trim()
+    };
+  }
+
+  function buildRequestHeaders(connectionSettings = null) {
+    const { apiKey } = resolveConnectionSettings(connectionSettings);
     return apiKey
       ? {
           "x-api-key": apiKey
@@ -172,8 +186,8 @@
       .join("/");
   }
 
-  function buildApiUrl(path, query = {}) {
-    const apiBaseUrl = getApiBaseUrl();
+  function buildApiUrl(path, query = {}, connectionSettings = null) {
+    const { apiBaseUrl } = resolveConnectionSettings(connectionSettings);
     if (!apiBaseUrl) {
       return "";
     }
@@ -569,8 +583,9 @@
     }));
   }
 
-  async function probeConnection() {
-    const apiBaseUrl = getApiBaseUrl();
+  async function probeConnection(connectionSettings = null) {
+    const resolvedConnection = resolveConnectionSettings(connectionSettings);
+    const apiBaseUrl = resolvedConnection.apiBaseUrl;
     if (!apiBaseUrl) {
       return {
         ok: false,
@@ -580,11 +595,11 @@
     }
 
     const requestOptions = {
-      headers: buildRequestHeaders()
+      headers: buildRequestHeaders(resolvedConnection)
     };
 
     try {
-      const healthResponse = await fetch(buildApiUrl("/api/v1/health"), requestOptions);
+      const healthResponse = await fetch(buildApiUrl("/api/v1/health", {}, resolvedConnection), requestOptions);
       if (!healthResponse.ok) {
         return {
           ok: false,
@@ -594,7 +609,7 @@
       }
 
       const health = await healthResponse.json().catch(() => null);
-      const protectedResponse = await fetch(buildApiUrl("/api/v1/decks/options"), requestOptions);
+      const protectedResponse = await fetch(buildApiUrl("/api/v1/decks/options", {}, resolvedConnection), requestOptions);
 
       if (protectedResponse.status === 401 || protectedResponse.status === 403) {
         return {