feat: add API client, wire login page to sidecar auth with demo mode fallback

src/pages/login.tsx

@@ -29,14 +29,37 @@ export const LoginPage = () => {
     const [activeTab, setActiveTab] = useState<RoleTab>('executive');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleTabChange = (tab: RoleTab) => {
         setActiveTab(tab);
         setRole(tab);
+        setError(null);
     };
 
-    const handleSubmit = (event: React.FormEvent) => {
+    const handleSubmit = async (event: React.FormEvent) => {
         event.preventDefault();
+        setError(null);
+
+        // If email and password are provided, try real auth via sidecar
+        if (email && password) {
+            setIsLoading(true);
+            try {
+                const { apiClient } = await import('@/lib/api-client');
+                await apiClient.login(email, password);
+                login(); // Also set mock auth state for the role-based UI
+                navigate('/');
+            } catch (err: any) {
+                // If sidecar is down, fall back to demo mode
+                console.warn('Real auth failed, falling back to demo mode:', err.message);
+                setError(err.message);
+                setIsLoading(false);
+            }
+            return;
+        }
+
+        // No credentials — demo mode (mock auth)
         login();
         navigate('/');
     };
@@ -190,17 +213,30 @@ export const LoginPage = () => {
                         />
                     </div>
 
+                    {/* Error message */}
+                    {error && (
+                        <div className="mt-4 rounded-lg bg-error-primary p-3 text-sm text-error-primary">
+                            {error}
+                        </div>
+                    )}
+
                     {/* Sign in button */}
                     <div className="mt-6">
                         <Button
                             type="submit"
                             size="lg"
                             color="primary"
+                            isLoading={isLoading}
                             className="w-full rounded-xl py-3 font-semibold active:scale-[0.98] transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                         >
-                            Sign in
+                            {email ? 'Sign in' : 'Demo Mode'}
                         </Button>
                     </div>
+                    {!email && (
+                        <p className="mt-2 text-center text-xs text-quaternary">
+                            Leave email empty for demo mode with mock data
+                        </p>
+                    )}
                 </form>
             </div>
         </div>