update: UI tweak

Author: BWJ2310

.env.example

@@ -3,10 +3,10 @@ VITE_SUPABASE_URL=your_supabase_url_here
 VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
 
 # Development
-VITE_APP_ENV=development
+APP_ENV=development
 
 # Authentication
 # Note: Invitations are now handled via Supabase Auth admin.inviteUserByEmail()
 # Configure public registration settings in Supabase Dashboard > Auth > Settings
 # Enable public registration (set to 'false' for invite-only mode)
-VITE_ENABLE_PUBLIC_REGISTRATION=true
+ENABLE_PUBLIC_REGISTRATION=true

.github/workflows/deploy.yml

@@ -39,7 +39,7 @@ jobs:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           # Disable public registration for production
-          VITE_ENABLE_PUBLIC_REGISTRATION: 'false'
+          ENABLE_PUBLIC_REGISTRATION: 'false'
           # Set to production to enable console stripping
           NODE_ENV: production
         run: npm run build

.gitignore

@@ -23,7 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 /supabase
-/supabase_old
 *.sh
-deploy-functions.sh
 /.claude

src/App.tsx

@@ -5,6 +5,8 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/components/AuthProvider";
+import { AlpacaConnectionErrorModal } from "@/components/AlpacaConnectionErrorModal";
+import { useAlpacaConnection } from "@/hooks/useAlpacaConnection";
 import Index from "./pages/Index";
 import Dashboard from "./pages/Dashboard";
 import LoginPage from "./pages/LoginPage";
@@ -47,6 +49,19 @@ const AppRoutes = () => {
   );
 };
 
+// Wrapper component to use hooks inside the providers
+const AppContent = () => {
+  // Start monitoring Alpaca connection
+  useAlpacaConnection();
+  
+  return (
+    <>
+      <AlpacaConnectionErrorModal />
+      <AppRoutes />
+    </>
+  );
+};
+
 const App = () => {
   // Get basename from Vite's base configuration
   const basename = import.meta.env.BASE_URL || '/';
@@ -58,7 +73,7 @@ const App = () => {
           <Toaster />
           <Sonner />
           <BrowserRouter basename={basename}>
-            <AppRoutes />
+            <AppContent />
           </BrowserRouter>
         </TooltipProvider>
       </AuthProvider>

src/components/AlpacaConnectionErrorModal.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { 
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogFooter,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+import { AlertTriangle, ExternalLink, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAlpacaConnectionStore } from '@/hooks/useAlpacaConnection';
+
+export function AlpacaConnectionErrorModal() {
+  const { isConnected, lastError, checkConnection, isLoading } = useAlpacaConnectionStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasShownOnce, setHasShownOnce] = useState(false);
+
+  useEffect(() => {
+    // Show modal when connection is lost and we haven't shown it already
+    if (!isConnected && !hasShownOnce) {
+      setIsOpen(true);
+      setHasShownOnce(true);
+    }
+    
+    // Reset the "shown once" flag when connection is restored
+    if (isConnected && hasShownOnce) {
+      setHasShownOnce(false);
+      setIsOpen(false);
+    }
+  }, [isConnected, hasShownOnce]);
+
+  const handleRetry = async () => {
+    await checkConnection();
+    // Modal will auto-close if connection is restored
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            Trading Platform Connection Error
+          </AlertDialogTitle>
+          <AlertDialogDescription className="space-y-3">
+            <p>
+              Unable to connect to the Alpaca trading platform and data source. 
+              This may be due to service maintenance or connectivity issues.
+            </p>
+            
+            <p className="font-medium">
+              While the connection is down:
+            </p>
+            <ul className="list-disc list-inside space-y-1 text-sm">
+              <li>Analysis features are temporarily disabled</li>
+              <li>Portfolio rebalancing is unavailable</li>
+              <li>Real-time market data cannot be fetched</li>
+            </ul>
+            
+            {lastError && (
+              <p className="text-sm text-muted-foreground italic mt-2">
+                {lastError}
+              </p>
+            )}
+            
+            <div className="flex items-center gap-2 pt-2">
+              <a 
+                href="https://app.alpaca.markets/dashboard/overview" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm text-blue-500 hover:underline"
+              >
+                Check Alpaca Status
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRetry}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                Checking...
+              </>
+            ) : (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Retry Connection
+              </>
+            )}
+          </Button>
+          <AlertDialogAction onClick={() => setIsOpen(false)}>
+            Close
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}