fix: resolve Data Explorer connectivity and path robustness for web-hosted GUI

Author: ParticularlyPythonicBS

backend/main.py

@@ -108,6 +108,27 @@ def health_check():
     return {"status": "ok"}
 
 
+@app.get("/api/config")
+def get_config():
+    """Return key configuration paths and settings for the frontend."""
+    # Try to find the tutorial database
+    assets_path = Path("assets")
+    tutorial_db = assets_path / "tutorial_database.sqlite"
+    if not tutorial_db.exists():
+        # Fallback to hardcoded absolute path if running from specific env
+        tutorial_db = Path(
+            "/media/Secondary/Projects/TemoaProject/temoa-web-gui/assets/tutorial_database.sqlite"
+        )
+
+    return {
+        "tutorial_database": str(tutorial_db.absolute())
+        if tutorial_db.exists()
+        else None,
+        "explorer_port": 8001,
+        "api_port": 8000,
+    }
+
+
 @app.get("/api/files")
 def list_files(path: str = "."):
     """Helper to browse files for input database selection."""

frontend/src/App.jsx

@@ -7,10 +7,11 @@ const WS_BASE = "ws://localhost:8000";
 
 function App() {
   const [config, setConfig] = useState({
-    input_database: "assets/tutorial_database.sqlite",
+    input_database: "",
     scenario_mode: "perfect_foresight",
     solver_name: "appsi_highs",
     time_sequencing: "seasonal_timeslices",
+    explorer_port: 8001,
   });
 
   const [logs, setLogs] = useState([]);
@@ -45,6 +46,7 @@ function App() {
       if (resp.ok) {
         setBackendStatus("connected");
         fetchSolvers();
+        fetchConfig();
       } else {
         setBackendStatus("error");
       }
@@ -53,6 +55,28 @@ function App() {
     }
   };
 
+  const fetchConfig = async () => {
+    try {
+      const resp = await fetch(`${API_BASE}/api/config`);
+      if (resp.ok) {
+        const data = await resp.json();
+        // If we don't have a path yet or it's the default, update it
+        if (
+          data.tutorial_database &&
+          (!config.input_database || config.input_database.includes("tutorial"))
+        ) {
+          setConfig((prev) => ({
+            ...prev,
+            input_database: data.tutorial_database,
+            explorer_port: data.explorer_port || 8001,
+          }));
+        }
+      }
+    } catch (e) {
+      console.error("Failed to fetch config", e);
+    }
+  };
+
   const fetchSolvers = async () => {
     try {
       const resp = await fetch(`${API_BASE}/api/solvers`);
@@ -217,12 +241,20 @@ function App() {
           <div className="step-number">3</div>
           <div className="step-content">
             <strong>Run Backend:</strong>
-            <code>uv run https://temoaproject.org/temoa_runner.py</code>
+            <code>
+              uv run
+              https://raw.githubusercontent.com/TemoaProject/temoa-web-gui/refs/heads/main/temoa_runner.py
+            </code>
           </div>
         </div>
       </div>
       <div className="setup-note">
         <p>Ensure the local backend is running before starting a simulation.</p>
+        <p style={{ marginTop: "10px", color: "#b11a1a" }}>
+          <strong>Heads up:</strong> If this GUI is hosted on HTTPS (e.g. Cloudflare) but your
+          backend is HTTP (localhost), you may need to "allow insecure content" in your browser
+          settings for this site to let the logs and explorer load.
+        </p>
       </div>
     </div>
   );
@@ -415,7 +447,7 @@ function App() {
         {activeTab === "explorer" && (
           <div className="card" style={{ padding: 0, overflow: "hidden" }}>
             <iframe
-              src="http://localhost:8001"
+              src={`http://${new URL(API_BASE).hostname}:${config.explorer_port || 8001}`}
               width="100%"
               height="100%"
               title="Datasette Explorer"

temoa_runner.py

@@ -6,6 +6,7 @@
 #     "uvicorn[standard]",
 #     "tomlkit",
 #     "websockets",
+#     "datasette",
 # ]
 # ///
 
@@ -108,6 +109,20 @@ def health_check():
     return {"status": "ok"}
 
 
+@app.get("/api/config")
+def get_config():
+    """Return key configuration paths and settings for the frontend."""
+    # In the runner, we assume assets are in the current directory or nearby
+    tutorial_db = Path("assets/tutorial_database.sqlite")
+    return {
+        "tutorial_database": str(tutorial_db.absolute())
+        if tutorial_db.exists()
+        else None,
+        "explorer_port": 8001,
+        "api_port": 8000,
+    }
+
+
 @app.get("/api/files")
 def list_files(path: str = "."):
     """Helper to browse files for input database selection."""
@@ -344,5 +359,27 @@ async def websocket_endpoint(websocket: WebSocket):
 
 if __name__ == "__main__":
     import uvicorn
+    import subprocess
+
+    # Start Datasette in a subprocess
+    print("Starting Datasette on port 8001...")
+    try:
+        subprocess.Popen(
+            [
+                "datasette",
+                ".",
+                "--port",
+                "8001",
+                "--host",
+                "0.0.0.0",
+                "--setting",
+                "sql_time_limit_ms",
+                "5000",
+            ],
+            stdout=subprocess.DEVNULL,
+            stderr=subprocess.DEVNULL,
+        )
+    except Exception as e:
+        print(f"Warning: Could not start Datasette: {e}")
 
     uvicorn.run(app, host="0.0.0.0", port=8000)