Update App.tsx

App.tsx

@@ -1,6 +1,5 @@
 
 import React, { useState, useEffect } from 'react';
-/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
 import { HashRouter, Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
 import { 
   Leaf, 
@@ -11,9 +10,12 @@ import {
   Cpu, 
   Settings as SettingsIcon, 
   Terminal, 
-  Loader2 
+  Loader2,
+  Key as KeyIcon,
+  ShieldCheck,
+  ArrowRight,
+  Zap
 } from 'lucide-react';
-/* Fix: removed .ts extensions from imports */
 import { routes } from './views/routes';
 import Login from './views/Login';
 import Landing from './views/Landing';
@@ -23,6 +25,66 @@ import Airdrop from './views/Airdrop';
 import { apiClient } from './services/api';
 import { UserSession } from './types/index';
 
+const KeyGateway = ({ onAuthorized }: { onAuthorized: () => void }) => {
+  const [key, setKey] = useState('');
+  const [verifying, setVerifying] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!key.trim()) return;
+    setVerifying(true);
+    localStorage.setItem('LQI_API_KEY', key.trim());
+    setTimeout(() => {
+      setVerifying(false);
+      onAuthorized();
+    }, 1000);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#020202] flex items-center justify-center p-6 font-sans">
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div className="matrix-line"></div>
+      </div>
+      <div className="w-full max-w-md bg-zinc-950 border border-zinc-900 rounded-[3rem] p-12 shadow-2xl relative z-10">
+        <div className="flex flex-col items-center text-center mb-10">
+          <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center mb-6 border border-blue-500/20">
+            <KeyIcon size={32} />
+          </div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Neural <span className="text-blue-500 not-italic">Handshake</span></h2>
+          <p className="text-zinc-600 text-[10px] font-black uppercase tracking-[0.3em]">Initialize Gemini Core Access</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-2">
+            <label className="text-[10px] font-black text-zinc-700 uppercase tracking-widest ml-1">LQI_PRIVATE_KEY</label>
+            <input 
+              type="password"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              placeholder="Enter Gemini API Key..."
+              className="w-full bg-black border border-zinc-800 focus:border-blue-500 rounded-2xl py-5 px-6 text-white font-mono text-sm outline-none transition-all shadow-inner"
+              required
+            />
+          </div>
+
+          <button 
+            type="submit"
+            disabled={verifying}
+            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] py-5 font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-3 shadow-xl shadow-blue-900/40"
+          >
+            {verifying ? <Loader2 className="animate-spin" size={18} /> : (
+              <>
+                <span>Initialize Node</span>
+                <ArrowRight size={18} />
+              </>
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
 const SidebarItem: React.FC<{ icon: any, label: string, path: string, active: boolean }> = ({ icon: Icon, label, path, active }) => (
   <Link 
     to={path} 
@@ -102,101 +164,61 @@ const Header = ({ user, onLogout }: { user: UserSession, onLogout: () => void })
   );
 };
 
-const App: React.FC = () => {
-  const [currentUser, setCurrentUser] = useState<UserSession | null>(null);
-  const [isAuthChecked, setIsAuthChecked] = useState<boolean>(false);
+const PrivateTerminal = ({ user, onLogout }: { user: UserSession, onLogout: () => void }) => {
+  const [isKeyAuthorized, setIsKeyAuthorized] = useState(!!localStorage.getItem('LQI_API_KEY'));
 
-  const checkAuthStatus = async () => {
-    const { user } = await apiClient.auth.me();
-    setCurrentUser(user);
-    setIsAuthChecked(true);
-  };
-
-  useEffect(() => {
-    checkAuthStatus();
-    window.addEventListener('auth-update', checkAuthStatus);
-    return () => window.removeEventListener('auth-update', checkAuthStatus);
-  }, []);
-
-  const handleLogout = async () => {
-    await apiClient.auth.logout();
-    setCurrentUser(null);
-    window.dispatchEvent(new Event('auth-update'));
-  };
-
-  if (!isAuthChecked) {
-    return (
-      <div className="min-h-screen bg-[#020202] flex flex-col items-center justify-center space-y-8">
-        <Loader2 className="animate-spin text-blue-500" size={48} />
-        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] animate-pulse">Initializing Neural Link...</p>
-      </div>
-    );
-  }
-
-  if (!currentUser) {
-    return (
-      <HashRouter>
-        <Routes>
-          <Route path="/" element={<Landing />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/airdrop" element={<Airdrop />} />
-          <Route path="/manifesto" element={<PrivacyPolicy />} />
-          <Route path="/documentation" element={<Documentation />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </HashRouter>
-    );
+  if (!isKeyAuthorized) {
+    return <KeyGateway onAuthorized={() => setIsKeyAuthorized(true)} />;
   }
 
   return (
-    <HashRouter>
-      <div className="flex min-h-screen bg-[#020202] text-zinc-400 antialiased selection:bg-blue-500/30 selection:text-blue-200 font-sans">
-        <div className="fixed inset-0 pointer-events-none opacity-[0.03] z-0 overflow-hidden">
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px]"></div>
-        </div>
+    <div className="flex min-h-screen bg-[#020202] text-zinc-400 antialiased selection:bg-blue-500/30 selection:text-blue-200 font-sans">
+      <div className="fixed inset-0 pointer-events-none opacity-[0.03] z-0 overflow-hidden">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px]"></div>
+      </div>
 
-        <aside className="w-80 fixed h-full bg-[#050505] border-r border-zinc-900 p-8 flex flex-col print:hidden z-50">
-          <div className="mb-14 px-4 flex items-center space-x-4">
-            <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-2xl shadow-white/5">
-              <Cpu size={24} className="text-black" />
-            </div>
-            <div>
-              <h1 className="text-lg font-black italic tracking-tighter text-white uppercase leading-none">
-                Lumina <span className="text-blue-500 not-italic">Quantum</span>
-              </h1>
-              <p className="text-[9px] uppercase tracking-[0.4em] font-bold text-zinc-600 mt-1">Institutional Ledger</p>
-            </div>
+      <aside className="w-80 fixed h-full bg-[#050505] border-r border-zinc-900 p-8 flex flex-col print:hidden z-50">
+        <div className="mb-14 px-4 flex items-center space-x-4">
+          <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-2xl shadow-white/5">
+            <Cpu size={24} className="text-black" />
           </div>
-          
-          <nav className="flex-1 space-y-2 overflow-y-auto custom-scrollbar pr-2 pb-10">
-            <NavigationLinks />
-          </nav>
-
-          <div className="mt-auto pt-10 border-t border-zinc-900">
-            <SidebarItem icon={SettingsIcon} label="System Config" path="/settings" active={window.location.hash.includes('settings')} />
-            <div className="mt-8 p-6 bg-zinc-950 border border-zinc-900 rounded-[2rem] flex items-center justify-between group cursor-help shadow-2xl">
-              <div className="flex items-center gap-3">
-                <Activity size={16} className="text-emerald-500" />
-                <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Node Reachable</span>
-              </div>
-              <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
-            </div>
+          <div>
+            <h1 className="text-lg font-black italic tracking-tighter text-white uppercase leading-none">
+              Lumina <span className="text-blue-500 not-italic">Quantum</span>
+            </h1>
+            <p className="text-[9px] uppercase tracking-[0.4em] font-bold text-zinc-600 mt-1">Institutional Ledger</p>
           </div>
-        </aside>
-
-        <main className="flex-1 ml-80 min-h-screen flex flex-col relative z-10 print:ml-0 print:bg-white">
-          <Header user={currentUser} onLogout={handleLogout} />
-          <div className="px-10 pb-20 print:p-0">
-            <Routes>
-              {routes.map((route) => (
-                <Route key={route.path} path={route.path} element={<route.component />} />
-              ))}
-              <Route path="*" element={<Navigate to="/" replace />} />
-            </Routes>
+        </div>
+        
+        <nav className="flex-1 space-y-2 overflow-y-auto custom-scrollbar pr-2 pb-10">
+          <NavigationLinks />
+        </nav>
+
+        <div className="mt-auto pt-10 border-t border-zinc-900">
+          <SidebarItem icon={SettingsIcon} label="System Config" path="/settings" active={window.location.hash.includes('settings')} />
+          <div className="mt-8 p-6 bg-zinc-950 border border-zinc-900 rounded-[2rem] flex items-center justify-between group cursor-help shadow-2xl">
+            <div className="flex items-center gap-3">
+              <Activity size={16} className="text-emerald-500" />
+              <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Node Reachable</span>
+            </div>
+            <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
           </div>
-        </main>
-      </div>
-    </HashRouter>
+        </div>
+      </aside>
+
+      <main className="flex-1 ml-80 min-h-screen flex flex-col relative z-10 print:ml-0 print:bg-white">
+        <Header user={user} onLogout={onLogout} />
+        <div className="px-10 pb-20 print:p-0">
+          <Routes>
+            {routes.map((route) => (
+              <Route key={route.path} path={route.path} element={<route.component />} />
+            ))}
+            {/* Relative catch-all for terminal paths */}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </div>
+      </main>
+    </div>
   );
 };
 
@@ -228,4 +250,60 @@ const NavigationLinks = () => {
   );
 };
 
+const App: React.FC = () => {
+  const [currentUser, setCurrentUser] = useState<UserSession | null>(null);
+  const [isAuthChecked, setIsAuthChecked] = useState<boolean>(false);
+
+  const checkAuthStatus = async () => {
+    const { user } = await apiClient.auth.me();
+    setCurrentUser(user);
+    setIsAuthChecked(true);
+  };
+
+  useEffect(() => {
+    checkAuthStatus();
+    window.addEventListener('auth-update', checkAuthStatus);
+    return () => window.removeEventListener('auth-update', checkAuthStatus);
+  }, []);
+
+  const handleLogout = async () => {
+    await apiClient.auth.logout();
+    setCurrentUser(null);
+    window.dispatchEvent(new Event('auth-update'));
+  };
+
+  if (!isAuthChecked) {
+    return (
+      <div className="min-h-screen bg-[#020202] flex flex-col items-center justify-center space-y-8">
+        <Loader2 className="animate-spin text-blue-500" size={48} />
+        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] animate-pulse">Synchronizing Node Registry...</p>
+      </div>
+    );
+  }
+
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<Landing />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/airdrop" element={<Airdrop />} />
+        <Route path="/manifesto" element={<PrivacyPolicy />} />
+        <Route path="/documentation" element={<Documentation />} />
+        
+        {/* The terminal area handles its own key authorization logic inside */}
+        <Route 
+          path="/*" 
+          element={
+            currentUser ? (
+              <PrivateTerminal user={currentUser} onLogout={handleLogout} />
+            ) : (
+              <Navigate to="/login" replace />
+            )
+          } 
+        />
+      </Routes>
+    </HashRouter>
+  );
+};
+
 export default App;