Fix login persistence bug and URL input UX

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { supabase } from "./supabaseClient";
 
 const getEnv = (key) => {
@@ -34,7 +34,7 @@ export default function App() {
   const [session, setSession] = useState(null);
   const [status, setStatus] = useState("");
   const [forceRefresh, setForceRefresh] = useState(false);
-  const [urlValue, setUrlValue] = useState("https://example.com");
+  const [urlValue, setUrlValue] = useState("");
   const [jobResult, setJobResult] = useState(null);
   const [systemPrompt, setSystemPrompt] = useState("");
   const [siteName, setSiteName] = useState("Bot");
@@ -56,6 +56,44 @@ export default function App() {
   const [signupPassword, setSignupPassword] = useState("");
   const [summaryVisible, setSummaryVisible] = useState(false);
   const [summaryData, setSummaryData] = useState({ pages: 0, searches: 0 });
+  const [isSessionChecking, setIsSessionChecking] = useState(true); // [NEW] Loading state for initial session check
+
+  // [NEW] Check for existing session on mount
+  useEffect(() => {
+    // 1. Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      if (session) {
+        setSession(session);
+        setEmailDisplay(session.user?.email || "");
+        const fn = session.user?.user_metadata?.first_name;
+        setFirstNameDisplay(fn || (session.user?.email ? session.user.email.split("@")[0] : ""));
+        setView("app");
+        setStatus("Restored session.");
+      }
+      setIsSessionChecking(false);
+    });
+
+    // 2. Listen for changes (login, logout, auto-refresh)
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+      if (session) {
+        setEmailDisplay(session.user?.email || "");
+        const fn = session.user?.user_metadata?.first_name;
+        setFirstNameDisplay(fn || (session.user?.email ? session.user.email.split("@")[0] : ""));
+        // Only switch to app if we were in a login/signup flow to avoid disrupting user
+        setView((prev) => (prev === "login" || prev === "signup" || prev === "otp" || prev === "reset" ? "app" : prev));
+      } else {
+        // If logged out
+        setView("login");
+        setEmailDisplay("");
+        setFirstNameDisplay("");
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
 
   // Refs to avoid re-rendering while typing (prevents cursor jump/blur)
   const loginEmailRef = useRef(null);
@@ -68,7 +106,6 @@ export default function App() {
   const otpPassRef = useRef(null);
   const otpCodeRef = useRef(null);
   const urlInputRef = useRef(null);
-  const defaultUrl = "https://example.com";
 
   const handleSignup = async () => {
     const email = signupEmailRef.current?.value?.trim() || "";
@@ -241,7 +278,11 @@ export default function App() {
   };
 
   const runJob = async () => {
-    const targetUrl = (urlInputRef.current?.value || "").trim() || defaultUrl;
+    const targetUrl = (urlInputRef.current?.value || "").trim();
+    if (!targetUrl) {
+      setStatus("Please enter a URL.");
+      return;
+    }
     setIsRunning(true);
     setStatus("Submitting job...");
     setJobResult(null);
@@ -513,52 +554,68 @@ export default function App() {
     <div className="app-shell">
       <Header />
 
-      {view === "login" && (
+      {isSessionChecking ? (
         <div className="auth-page">
           <div className="auth-stage">
             <div className="auth-card-wrap">
-              <LoginCard />
+              <Panel title="Loading..." subtitle="Checking authentication status...">
+                <div style={{ textAlign: "center", padding: "20px" }}>
+                  <div className="loading" style={{ margin: "0 auto" }}></div>
+                </div>
+              </Panel>
             </div>
           </div>
         </div>
-      )}
+      ) : (
+        <>
+          {view === "login" && (
+            <div className="auth-page">
+              <div className="auth-stage">
+                <div className="auth-card-wrap">
+                  <LoginCard />
+                </div>
+              </div>
+            </div>
+          )}
 
-      {view === "signup" && (
-        <div className="auth-page">
-          <div className="auth-stage">
-            <div className="auth-card-wrap">
-              <SignupCard />
+          {view === "signup" && (
+            <div className="auth-page">
+              <div className="auth-stage">
+                <div className="auth-card-wrap">
+                  <SignupCard />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          )}
 
-      {view === "reset" && (
-        <div className="auth-page">
-          <div className="auth-stage">
-            <div className="auth-card-wrap">
-              <ResetCard />
+          {view === "reset" && (
+            <div className="auth-page">
+              <div className="auth-stage">
+                <div className="auth-card-wrap">
+                  <ResetCard />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          )}
 
-      {view === "otp" && (
-        <div className="auth-page">
-          <div className="auth-stage">
-            <div className="auth-card-wrap">
-              <OtpCard />
+          {view === "otp" && (
+            <div className="auth-page">
+              <div className="auth-stage">
+                <div className="auth-card-wrap">
+                  <OtpCard />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          )}
 
-      {view === "app" && (
-        <div className="main-page">
-          <div className="main-card-wrap">
-            <AppCards />
-          </div>
-        </div>
+          {view === "app" && (
+            <div className="main-page">
+              <div className="main-card-wrap">
+                <AppCards />
+              </div>
+            </div>
+          )}
+        </>
       )}
     </div>
   );