Upload 10 files

App.tsx

@@ -1,20 +1,8 @@
-
-import React, { useState, useEffect } from 'react';
-import { HashRouter, Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
+import React, { useState, useEffect, useCallback } from 'react';
+import { HashRouter, Routes, Route, Link, useLocation, Navigate, useNavigate } from 'react-router-dom';
 import { 
-  Leaf, 
-  Bell, 
-  LogOut, 
-  Activity, 
-  ChevronRight, 
-  Cpu, 
-  Settings as SettingsIcon, 
-  Terminal, 
-  Loader2,
-  Key as KeyIcon,
-  ShieldCheck,
-  ArrowRight,
-  Zap
+  Bell, LogOut, Activity, ChevronRight, Cpu, Settings as SettingsIcon, Terminal, Loader2, Key,
+  ShieldCheck, Zap, ArrowRight, ShieldAlert, Globe, Lock, Database, Shield, ZapOff, Fingerprint, Code
 } from 'lucide-react';
 import { routes } from './views/routes';
 import Login from './views/Login';
@@ -25,72 +13,12 @@ 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} 
     className={`flex items-center justify-between px-6 py-4 rounded-2xl transition-all duration-500 group ${
       active 
-        ? 'bg-white text-black shadow-2xl' 
+        ? 'bg-white text-black shadow-2xl scale-[1.02]' 
         : 'text-zinc-500 hover:text-white hover:bg-zinc-900/50'
     }`}
   >
@@ -103,7 +31,6 @@ const SidebarItem: React.FC<{ icon: any, label: string, path: string, active: bo
 );
 
 const Header = ({ user, onLogout }: { user: UserSession, onLogout: () => void }) => {
-  const isEsgNeutral = localStorage.getItem('esg_neutral') === 'true';
   const location = useLocation();
   const currentRoute = routes.find(r => r.path === location.pathname);
   const [typedTitle, setTypedTitle] = useState('');
@@ -122,31 +49,23 @@ const Header = ({ user, onLogout }: { user: UserSession, onLogout: () => void })
   }, [location.pathname, currentRoute]);
 
   return (
-    <header className="h-24 flex items-center justify-between px-10 bg-transparent print:hidden relative z-50">
+    <header className="h-24 flex items-center justify-between px-10 bg-transparent relative z-50">
       <div className="flex items-center space-x-6">
         <div className="hidden md:flex flex-col">
           <h1 className="text-xl font-black tracking-tighter text-white italic leading-none uppercase">
-            {typedTitle} <span className="text-blue-500 not-italic block md:inline">NODE</span>
+            {typedTitle || 'CORE'} <span className="text-blue-500 not-italic">NODE</span>
           </h1>
           <p className="text-[10px] text-zinc-600 font-black uppercase tracking-[0.3em] mt-1 flex items-center gap-2">
             <Terminal size={10} />
-            ROOT_IDENTIFIER: {user.name.toUpperCase().replace(' ', '_')}
+            ROOT_IDENTIFIER: {user.name.toUpperCase()}
           </p>
         </div>
-        
-        {isEsgNeutral && (
-          <div className="px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full flex items-center gap-2 shadow-2xl shadow-emerald-500/5">
-            <Leaf size={12} className="text-emerald-500" />
-            <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">ESG Offset Verified</span>
-          </div>
-        )}
       </div>
 
       <div className="flex items-center space-x-8">
         <div className="flex items-center space-x-6">
-          <button className="p-3 text-zinc-500 hover:text-white transition-all relative group bg-zinc-950 rounded-xl border border-zinc-900 shadow-xl">
+          <button className="p-3 text-zinc-500 hover:text-white transition-all bg-zinc-950 rounded-xl border border-zinc-900 shadow-xl">
             <Bell size={18} />
-            <span className="absolute top-3 right-3 w-2 h-2 bg-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.8)]"></span>
           </button>
           <div className="h-8 w-px bg-zinc-900"></div>
           <div className="flex items-center space-x-4 group cursor-pointer" onClick={onLogout}>
@@ -165,28 +84,26 @@ const Header = ({ user, onLogout }: { user: UserSession, onLogout: () => void })
 };
 
 const PrivateTerminal = ({ user, onLogout }: { user: UserSession, onLogout: () => void }) => {
-  const [isKeyAuthorized, setIsKeyAuthorized] = useState(!!localStorage.getItem('LQI_API_KEY'));
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  if (!isKeyAuthorized) {
-    return <KeyGateway onAuthorized={() => setIsKeyAuthorized(true)} />;
-  }
+  const handleTerminate = async () => {
+    await onLogout();
+    navigate('/');
+  };
 
   return (
-    <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="flex min-h-screen bg-[#020202] text-zinc-400 antialiased font-sans">
+      <aside className="w-80 fixed h-full bg-[#050505] border-r border-zinc-900 p-8 flex flex-col 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">
+          <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-2xl">
             <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>
+              AIBanking <span className="text-blue-500 not-italic">Core</span>
             </h1>
-            <p className="text-[9px] uppercase tracking-[0.4em] font-bold text-zinc-600 mt-1">Institutional Ledger</p>
+            <p className="text-[9px] uppercase tracking-[0.4em] font-bold text-zinc-600 mt-1">Institutional Mesh</p>
           </div>
         </div>
         
@@ -194,27 +111,32 @@ const PrivateTerminal = ({ user, onLogout }: { user: UserSession, onLogout: () =
           <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="mt-auto pt-10 border-t border-zinc-900 space-y-4">
+          <button 
+            onClick={handleTerminate}
+            className="w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-rose-500 hover:bg-rose-500/10 transition-all font-black text-[10px] uppercase tracking-widest border border-transparent hover:border-rose-500/20"
+          >
+            <ShieldAlert size={16} />
+            <span>Terminate Link</span>
+          </button>
+          <div className="mt-8 p-6 bg-zinc-950 border border-zinc-900 rounded-[2rem] flex items-center justify-between 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>
+              <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Node Sync: 100%</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 className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_#10b981]"></div>
           </div>
         </div>
       </aside>
 
-      <main className="flex-1 ml-80 min-h-screen flex flex-col relative z-10 print:ml-0 print:bg-white">
+      <main className="flex-1 ml-80 min-h-screen flex flex-col relative z-10">
         <Header user={user} onLogout={onLogout} />
-        <div className="px-10 pb-20 print:p-0">
+        <div className="px-10 pb-20">
           <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 />} />
+            <Route path="*" element={<Navigate to="/overview" replace />} />
           </Routes>
         </div>
       </main>
@@ -225,7 +147,6 @@ const PrivateTerminal = ({ user, onLogout }: { user: UserSession, onLogout: () =
 const NavigationLinks = () => {
   const location = useLocation();
   const categories = ['core', 'registry', 'finance', 'intelligence', 'system', 'admin'];
-
   return (
     <div className="space-y-10">
       {categories.map(cat => {
@@ -233,7 +154,7 @@ const NavigationLinks = () => {
         if (catRoutes.length === 0) return null;
         return (
           <div key={cat} className="space-y-3">
-             <p className="px-6 text-[8px] font-black uppercase text-zinc-700 tracking-[0.5em] mb-4">{cat.toUpperCase()}_V6_SEGMENT</p>
+             <p className="px-6 text-[8px] font-black uppercase text-zinc-700 tracking-[0.5em] mb-4">{cat.toUpperCase()}_SUITE</p>
              {catRoutes.map((route) => (
               <SidebarItem 
                 key={route.path} 
@@ -250,60 +171,155 @@ const NavigationLinks = () => {
   );
 };
 
+const NeuralGate = ({ onAuthorized }: { onAuthorized: (tier: 'enterprise' | 'regular') => void }) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleEnterpriseLink = async () => {
+    setLoading(true);
+    try {
+      await window.aistudio.openSelectKey();
+      onAuthorized('enterprise');
+    } catch (e) {
+      console.error("Enterprise gate refusal.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRegularLink = () => {
+    onAuthorized('regular');
+  };
+
+  return (
+    <div className="min-h-screen bg-black flex flex-col items-center justify-center p-12 relative overflow-hidden">
+      <div className="absolute inset-0 z-0 opacity-20">
+        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_50%,_#1e1b4b_0%,_transparent_70%)]"></div>
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:80px_80px]"></div>
+      </div>
+
+      <div className="max-w-4xl w-full relative z-10 text-center space-y-16">
+        <div className="relative inline-block group">
+          <div className="absolute -inset-8 bg-blue-600/20 blur-3xl rounded-full opacity-50 group-hover:opacity-100 transition-opacity"></div>
+          <div className="w-32 h-32 bg-white rounded-[3.5rem] flex items-center justify-center mx-auto shadow-[0_40px_80px_rgba(255,255,255,0.1)] group-hover:rotate-12 transition-transform duration-1000 border-4 border-zinc-900">
+            <Lock size={64} className="text-black" />
+          </div>
+        </div>
+        
+        <div className="space-y-8">
+          <h1 className="text-7xl lg:text-8xl font-black italic text-white uppercase tracking-tighter leading-none">
+            Neural <span className="text-blue-500 not-italic">Gateway</span>
+          </h1>
+          <p className="text-zinc-500 font-bold text-2xl leading-relaxed italic max-w-2xl mx-auto">
+            "To initialize the aibanking.dev ledger, establishing a secure neural link is mandatory. Select your protocol tier."
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
+          <button 
+            onClick={handleEnterpriseLink}
+            disabled={loading}
+            className="flex flex-col items-center gap-6 py-10 px-8 bg-blue-600 hover:bg-blue-500 text-white rounded-[3.5rem] transition-all shadow-[0_30px_60px_rgba(37,99,235,0.4)] group active:scale-95 border-2 border-transparent hover:border-white/20"
+          >
+            <Zap size={40} className="group-hover:scale-125 transition-transform" />
+            <div className="text-center">
+              <span className="block font-black text-sm uppercase tracking-[0.4em] mb-2">Enterprise Tier</span>
+              <span className="block text-[10px] font-bold text-blue-100 uppercase tracking-widest opacity-60 italic">Requires Paid Google API Node</span>
+            </div>
+            <ArrowRight size={24} className="group-hover:translate-x-4 transition-transform" />
+          </button>
+
+          <button 
+            onClick={handleRegularLink}
+            className="flex flex-col items-center gap-6 py-10 px-8 bg-zinc-900 hover:bg-zinc-800 text-white rounded-[3.5rem] transition-all shadow-2xl group active:scale-95 border-2 border-zinc-800 hover:border-zinc-700"
+          >
+            <Globe size={40} className="text-zinc-600 group-hover:text-blue-400 group-hover:scale-125 transition-all" />
+            <div className="text-center">
+              <span className="block font-black text-sm uppercase tracking-[0.4em] mb-2">Regular Tier</span>
+              <span className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest opacity-60 italic">Free Local Instance Access</span>
+            </div>
+            <ArrowRight size={24} className="text-zinc-700 group-hover:text-zinc-500 group-hover:translate-x-4 transition-all" />
+          </button>
+        </div>
+
+        <div className="pt-12 border-t border-zinc-900 space-y-6">
+          <div className="flex flex-col md:flex-row items-center justify-center gap-10">
+            <a href="https://ai.google.dev/gemini-api/docs/billing" target="_blank" rel="noreferrer" className="text-[10px] font-black text-zinc-600 hover:text-white uppercase tracking-widest transition-colors flex items-center gap-2">
+              <Key size={12} /> Registry Documentation
+            </a>
+            <p className="text-[10px] font-black text-zinc-700 uppercase tracking-[0.4em]">v6.5.0 Institutional Registry • Secured via RSA-OAEP</p>
+          </div>
+          <div className="flex justify-center gap-12 opacity-20">
+            <ShieldCheck size={32} /><Globe size={32} /><Database size={32} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const App: React.FC = () => {
+  const [hasKey, setHasKey] = useState<boolean | null>(null);
+  const [tier, setTier] = useState<'enterprise' | 'regular' | null>(null);
   const [currentUser, setCurrentUser] = useState<UserSession | null>(null);
   const [isAuthChecked, setIsAuthChecked] = useState<boolean>(false);
 
-  const checkAuthStatus = async () => {
+  const checkStatus = useCallback(async () => {
+    const keySelected = await window.aistudio.hasSelectedApiKey();
+    setHasKey(keySelected);
     const { user } = await apiClient.auth.me();
     setCurrentUser(user);
     setIsAuthChecked(true);
-  };
+  }, []);
 
   useEffect(() => {
-    checkAuthStatus();
-    window.addEventListener('auth-update', checkAuthStatus);
-    return () => window.removeEventListener('auth-update', checkAuthStatus);
-  }, []);
+    checkStatus();
+    window.addEventListener('auth-update', checkStatus);
+    return () => window.removeEventListener('auth-update', checkStatus);
+  }, [checkStatus]);
 
   const handleLogout = async () => {
     await apiClient.auth.logout();
     setCurrentUser(null);
-    window.dispatchEvent(new Event('auth-update'));
   };
 
-  if (!isAuthChecked) {
+  const onAuthorized = (selectedTier: 'enterprise' | 'regular') => {
+    setTier(selectedTier);
+    if (selectedTier === 'regular') setHasKey(true);
+    else checkStatus();
+  };
+
+  if (!isAuthChecked || (hasKey === null && !tier)) {
     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 className="min-h-screen bg-black flex flex-col items-center justify-center space-y-12">
+        <div className="relative">
+          <div className="w-24 h-24 border-4 border-zinc-900 border-t-blue-500 rounded-full animate-spin"></div>
+          <Cpu className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white" size={32} />
+        </div>
+        <p className="text-[11px] font-black text-zinc-700 uppercase tracking-[0.8em] animate-pulse italic">Synchronizing Node Registry...</p>
       </div>
     );
   }
 
+  if (!hasKey && tier !== 'regular') {
+    return <NeuralGate onAuthorized={onAuthorized} />;
+  }
+
   return (
     <HashRouter>
       <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route path="/login" element={<Login />} />
+        <Route path="/" element={currentUser ? <Navigate to="/overview" replace /> : <Landing />} />
+        <Route path="/login" element={currentUser ? <Navigate to="/overview" replace /> : <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 />
-            )
-          } 
-        />
+        <Route path="/*" element={currentUser ? (
+          <PrivateTerminal user={currentUser} onLogout={handleLogout} />
+        ) : (
+          <Navigate to="/" replace />
+        )} />
       </Routes>
     </HashRouter>
   );
 };
 
-export default App;
+export default App;

Dockerfile.txt

@@ -0,0 +1,25 @@
+# Use a slim Node image for faster builds
+FROM node:20-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy dependency manifest
+COPY package.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the entire source code
+COPY . .
+
+# Build the static frontend
+RUN npm run build
+
+# Hugging Face Spaces use port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+# Start the application using Vite's preview mode
+# "npm start" maps to: vite preview --port 7860 --host 0.0.0.0
+CMD ["npm", "start"]

README.md

@@ -1,16 +1,20 @@
----
-title: Quantum Ledger Intelligence
-emoji: 💎
-colorFrom: blue
-colorTo: gray
-sdk: docker
-pinned: false
----
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
 
-# Lumina Quantum Ledger
+# Run and deploy your AI Studio app
 
-This is a high-performance financial dashboard integrating AI-driven forecasting and corporate asset management.
+This contains everything you need to run your app locally.
 
-## Setup
-1. Ensure your Gemini API Key is added to the Space **Secrets** as `API_KEY`.
-2. The Space will automatically build using the `Dockerfile` and serve on port 7860.
+View your app in AI Studio: https://ai.studio/apps/drive/1lIFV2uT_kj0gG9PM3NWzaKh059u7b3nt
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

index.html

@@ -29,10 +29,12 @@
     "@google/genai": "https://esm.sh/@google/genai@^1.41.0",
     "path": "https://esm.sh/path@^0.12.7",
     "vite": "https://esm.sh/vite@^7.3.1",
-    "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.4"
+    "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.4",
+    "url": "https://esm.sh/url@^0.11.4"
   }
 }
 </script>
+<link rel="stylesheet" href="/index.css">
 </head>
 <body>
   <div id="root"></div>

metadata.json

@@ -2,6 +2,7 @@
   "name": "Quantum Ledger Intelligence",
   "description": "A high-performance financial dashboard integrating AI-driven forecasting, sustainability metrics, and corporate asset management using the Gemini API.",
   "requestFramePermissions": [
-    "microphone"
+    "microphone",
+    "camera"
   ]
 }

package.json

@@ -7,24 +7,19 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "start": "node server.js"
+    "start": "vite preview --port 7860 --host 0.0.0.0"
   },
   "dependencies": {
-    "@google/genai": "^1.41.0",
-    "bcryptjs": "^3.0.3",
-    "cors": "^2.8.6",
-    "express": "^5.2.1",
     "lucide-react": "^0.563.0",
-    "path": "^0.12.7",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.13.0",
     "recharts": "^3.7.0",
-    "sqlite3": "^5.1.7"
+    "@google/genai": "^1.41.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.7.3",
     "vite": "^7.3.1"

vite.config.ts

@@ -1,6 +1,29 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
 
-export default defineConfig({
-  plugins: [react()],
-})
+// Fix: __dirname is not available in ES modules environment. 
+// We define it using path.dirname and fileURLToPath(import.meta.url).
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    server: {
+      port: 3000,
+      host: '0.0.0.0',
+    },
+    plugins: [react()],
+    define: {
+      'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+    },
+    resolve: {
+      alias: {
+        // Fix: Use the polyfilled __dirname variable to resolve project root
+        '@': path.resolve(__dirname, '.'),
+      }
+    }
+  };
+});