1 files changed, 36 insertions, 2 deletions
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 569ff74..af95c63 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,18 +1,52 @@
+import React, { useState, useEffect } from 'react';
 import './App.css';
 
 import Path from './Path';
 import Log from './Log';
 import Options from './Options';
 import Info from './Info';
+import Setup from './Setup';
 
 function App() {
+  const [setupStatus, setSetupStatus] = useState(null);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const resp = await fetch('http://localhost:8000/api/setup/status');
+        const rootResp = await fetch('http://localhost:8000/');
+        if (resp.ok && rootResp.ok) {
+          const data = await resp.json();
+          const rootData = await rootResp.json();
+          data.backend_ready = rootData.ready;
+          setSetupStatus(data);
+          if (!rootData.ready) {
+            setTimeout(checkStatus, 2000);
+          }
+        } else {
+          setTimeout(checkStatus, 2000);
+        }
+      } catch (e) {
+        console.error("Could not reach backend API, retrying in 2s...");
+        setTimeout(checkStatus, 2000);
+      }
+    };
+    checkStatus();
+  }, []);
+
+  if (!setupStatus) {
+    return <div className="loading">Initializing Backend Connection...</div>;
+  }
+
+  if (!setupStatus.data_ready || !setupStatus.auth_ready || !setupStatus.backend_ready) {
+    return <Setup status={setupStatus} onComplete={() => window.location.reload()} />;
+  }
+
   return (
     <div className="App flex flex-wrap h-screen">
-      {/* Main component for Path */}
       <div className="w-2/3 h-full overflow-auto hide-scrollbar">
         <Path />
       </div>
-      {/* Sidebar for route info, controls, and log output */}
       <div className="w-1/3 h-full flex flex-col">
         <div className="h-1/4 overflow-auto">
           <Info />