moved to API

app.js

@@ -72,6 +72,11 @@ const latEl = document.getElementById("lat");
 const lngEl = document.getElementById("lng");
 const nowSkyLayerEl = document.getElementById("now-sky-layer");
 const nowPanelEl = document.getElementById("now-panel");
+const connectionGateEl = document.getElementById("connection-gate");
+const connectionGateBaseUrlEl = document.getElementById("connection-gate-base-url");
+const connectionGateApiKeyEl = document.getElementById("connection-gate-api-key");
+const connectionGateStatusEl = document.getElementById("connection-gate-status");
+const connectionGateConnectEl = document.getElementById("connection-gate-connect");
 
 const nowElements = {
   nowHourEl: document.getElementById("now-hour"),
@@ -230,6 +235,7 @@ appRuntime.init?.({
 });
 
 let currentSettings = { ...DEFAULT_SETTINGS };
+let hasRenderedConnectedShell = false;
 
 function setStatus(text) {
   if (!statusEl) {
@@ -239,6 +245,121 @@ function setStatus(text) {
   statusEl.textContent = text;
 }
 
+function getConnectionSettings() {
+  return window.TarotAppConfig?.getConnectionSettings?.() || {
+    apiBaseUrl: "",
+    apiKey: ""
+  };
+}
+
+function syncConnectionGateInputs() {
+  const connectionSettings = getConnectionSettings();
+
+  if (connectionGateBaseUrlEl) {
+    connectionGateBaseUrlEl.value = String(connectionSettings.apiBaseUrl || "");
+  }
+
+  if (connectionGateApiKeyEl) {
+    connectionGateApiKeyEl.value = String(connectionSettings.apiKey || "");
+  }
+}
+
+function setConnectionGateStatus(text, tone = "default") {
+  if (!connectionGateStatusEl) {
+    return;
+  }
+
+  connectionGateStatusEl.textContent = text || "";
+  if (tone && tone !== "default") {
+    connectionGateStatusEl.dataset.tone = tone;
+  } else {
+    delete connectionGateStatusEl.dataset.tone;
+  }
+}
+
+function showConnectionGate(message, tone = "default") {
+  syncConnectionGateInputs();
+  if (connectionGateEl) {
+    connectionGateEl.hidden = false;
+  }
+  document.body.classList.add("connection-gated");
+  setConnectionGateStatus(message, tone);
+}
+
+function hideConnectionGate() {
+  if (connectionGateEl) {
+    connectionGateEl.hidden = true;
+  }
+  document.body.classList.remove("connection-gated");
+}
+
+function getConnectionSettingsFromGate() {
+  return {
+    apiBaseUrl: String(connectionGateBaseUrlEl?.value || "").trim(),
+    apiKey: String(connectionGateApiKeyEl?.value || "").trim()
+  };
+}
+
+async function ensureConnectedApp(nextConnectionSettings = null) {
+  if (nextConnectionSettings) {
+    window.TarotAppConfig?.updateConnectionSettings?.(nextConnectionSettings);
+  }
+
+  syncConnectionGateInputs();
+
+  const configuredConnection = getConnectionSettings();
+  if (!configuredConnection.apiBaseUrl) {
+    showConnectionGate("Enter an API Base URL to load TaroTime.", "error");
+    return false;
+  }
+
+  showConnectionGate("Connecting to the API...", "pending");
+
+  const probeResult = await window.TarotDataService?.probeConnection?.();
+  if (!probeResult?.ok) {
+    showConnectionGate(probeResult?.message || "Unable to reach the API.", "error");
+    return false;
+  }
+
+  hideConnectionGate();
+  if (!hasRenderedConnectedShell) {
+    sectionStateUi.setActiveSection?.("home");
+    hasRenderedConnectedShell = true;
+  }
+
+  setConnectionGateStatus("Connected.", "success");
+  setStatus(`Connected to ${configuredConnection.apiBaseUrl}.`);
+  await appRuntime.renderWeek?.();
+  return true;
+}
+
+function bindConnectionGate() {
+  syncConnectionGateInputs();
+
+  if (connectionGateConnectEl) {
+    connectionGateConnectEl.addEventListener("click", () => {
+      void ensureConnectedApp(getConnectionSettingsFromGate());
+    });
+  }
+
+  [connectionGateBaseUrlEl, connectionGateApiKeyEl].forEach((element) => {
+    if (!element) {
+      return;
+    }
+
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        void ensureConnectedApp(getConnectionSettingsFromGate());
+      }
+    });
+  });
+
+  document.addEventListener("connection:updated", () => {
+    syncConnectionGateInputs();
+  });
+}
+
 window.TarotNumbersUi?.init?.({
   getReferenceData: () => appRuntime.getReferenceData?.() || null,
   getMagickDataset: () => appRuntime.getMagickDataset?.() || null,
@@ -331,6 +452,7 @@ settingsUi.init?.({
   },
   onSyncSkyBackground: (geo, force) => homeUi.syncNowSkyBackground?.(geo, force),
   onStatus: (text) => setStatus(text),
+  onConnectionSaved: async () => ensureConnectedApp(),
   getActiveSection: () => sectionStateUi.getActiveSection?.() || "home",
   onReopenActiveSection: (section) => sectionStateUi.setActiveSection?.(section),
   onRenderWeek: () => appRuntime.renderWeek?.()
@@ -412,6 +534,5 @@ window.TarotNatal = {
 
 const initialSettings = settingsUi.loadInitialSettingsAndApply?.() || { ...DEFAULT_SETTINGS };
 homeUi.syncNowSkyBackground?.({ latitude: initialSettings.latitude, longitude: initialSettings.longitude }, true);
-sectionStateUi.setActiveSection?.("home");
-
-void appRuntime.renderWeek?.();
+bindConnectionGate();
+void ensureConnectedApp();