auth: separate data and authentication mocking

Reviewed-on: BornDeleuze/coop-cloud-front#5

src/App.tsx

@@ -1,12 +1,12 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { AuthProvider } from './context/AuthContext';
-import { LoginForm } from './routes/Login/LoginForm';
-import { Authenticated } from './components/Authenticated';
-import { Dashboard } from './routes/Authenticated/Dashboard/Dashboard';
-import { Apps } from './routes/Authenticated/Apps/Apps';
-import { AppDetail } from './routes/Authenticated/Apps/App';
-import { Servers } from './routes/Authenticated/Servers/Servers';
-import { Server } from './routes/Authenticated/Servers/Server';
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { AuthProvider } from "./context/AuthContext";
+import { LoginForm } from "./routes/Login/LoginForm";
+import { Authenticated } from "./components/Authenticated";
+import { Dashboard } from "./routes/Authenticated/Dashboard/Dashboard";
+import { Apps } from "./routes/Authenticated/Apps/Apps";
+import { AppDetail } from "./routes/Authenticated/Apps/App";
+import { Servers } from "./routes/Authenticated/Servers/Servers";
+import { Server } from "./routes/Authenticated/Servers/Server";
 
 function App() {
   return (
@@ -15,7 +15,7 @@ function App() {
         <Routes>
           {/* Public routes */}
           <Route path="/login" element={<LoginForm />} />
-          
+
           {/* Protected routes */}
           <Route element={<Authenticated />}>
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
@@ -25,7 +25,7 @@ function App() {
             <Route path="/servers" element={<Servers />} />
             <Route path="/servers/:serverName" element={<Server />} />
           </Route>
-          
+
           {/* 404 catch-all */}
           <Route path="*" element={<Navigate to="/dashboard" replace />} />
         </Routes>
@@ -34,4 +34,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/assets/scss/_fonts.scss

@@ -1,30 +1,30 @@
 @font-face {
-  font-family: 'Lora';
-  src: url('https://coopcloud.tech/font/Lora-Italic.woff2') format('woff2');
+  font-family: "Lora";
+  src: url("https://coopcloud.tech/font/Lora-Italic.woff2") format("woff2");
   font-style: italic;
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
-  src: url('https://coopcloud.tech/font/manrope.light.woff2') format('woff2');
+  font-family: "Manrope";
+  src: url("https://coopcloud.tech/font/manrope.light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
-  src: url('https://coopcloud.tech/font/manrope.medium.woff2') format('woff2');
+  font-family: "Manrope";
+  src: url("https://coopcloud.tech/font/manrope.medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
-  src: url('https://coopcloud.tech/font/manrope.bold.woff2') format('woff2');
+  font-family: "Manrope";
+  src: url("https://coopcloud.tech/font/manrope.bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;

src/assets/scss/_global.scss

@@ -1,5 +1,5 @@
-@use './variables' as *;
-@use './mixins' as *;
+@use "./variables" as *;
+@use "./mixins" as *;
 
 body {
   margin: 0;
@@ -75,7 +75,9 @@ body {
   align-items: center;
   gap: $spacing-lg;
   padding: $spacing-xl;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
 
   &:hover {
     transform: translateY(-2px);

src/assets/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@use 'variables' as *;
+@use "variables" as *;
 
 // Flexbox center
 @mixin flex-center {
@@ -9,14 +9,22 @@
 
 // Responsive breakpoints
 @mixin respond-to($breakpoint) {
-  @if $breakpoint == 'sm' {
-    @media (min-width: $breakpoint-sm) { @content; }
-  } @else if $breakpoint == 'md' {
-    @media (min-width: $breakpoint-md) { @content; }
-  } @else if $breakpoint == 'lg' {
-    @media (min-width: $breakpoint-lg) { @content; }
-  } @else if $breakpoint == 'xl' {
-    @media (min-width: $breakpoint-xl) { @content; }
+  @if $breakpoint == "sm" {
+    @media (min-width: $breakpoint-sm) {
+      @content;
+    }
+  } @else if $breakpoint == "md" {
+    @media (min-width: $breakpoint-md) {
+      @content;
+    }
+  } @else if $breakpoint == "lg" {
+    @media (min-width: $breakpoint-lg) {
+      @content;
+    }
+  } @else if $breakpoint == "xl" {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
   }
 }
 
@@ -36,7 +44,7 @@
   font-weight: $font-weight-semibold;
   cursor: pointer;
   transition: all $transition-base;
-  
+
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
@@ -63,4 +71,4 @@
   font-weight: $font-weight-semibold;
   background-color: rgba($color, 0.1);
   // color: darken($color, 20%);
-}
+}

src/assets/scss/_variables.scss

@@ -1,6 +1,6 @@
 // Colors
-$primary: #EFEFEF;
-$primary-dark: #6A9CFF;
+$primary: #efefef;
+$primary-dark: #6a9cff;
 $primary-light: #ff4f88;
 $secondary: #363636;
 
@@ -10,8 +10,7 @@ $error: #ef4444;
 $info: #3b82f6;
 
 $text-primary: #363636;
-$text-secondary: #4a4a4a
-;
+$text-secondary: #4a4a4a;
 $text-muted: #999;
 
 $bg-primary: #ffffff;
@@ -31,11 +30,21 @@ $spacing-3xl: 4rem;
 
 // Typography
 
-$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-'Helvetica Neue', sans-serif;
+$font-family-body:
+  "Manrope",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Roboto",
+  "Oxygen",
+  "Ubuntu",
+  "Cantarell",
+  "Fira Sans",
+  "Droid Sans",
+  "Helvetica Neue",
+  sans-serif;
 
-$font-family-heading: 'Lora', serif;
+$font-family-heading: "Lora", serif;
 
 $font-size-xs: 0.75rem;
 $font-size-sm: 0.875rem;
@@ -72,4 +81,4 @@ $transition-slow: 0.3s ease;
 $breakpoint-sm: 640px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-xl: 1280px;

src/assets/scss/main.scss

@@ -1,7 +1,7 @@
 // 1. Configuration & helpers (no CSS output)
-@use 'variables';
-@use 'mixins';
-@use 'fonts';
+@use "variables";
+@use "mixins";
+@use "fonts";
 
 // 2. Global base styles
-@use 'global';
+@use "global";

src/components/Authenticated.tsx

@@ -1,24 +1,26 @@
-import React from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
 
 export const Authenticated: React.FC = () => {
   const { isAuthenticated, loading } = useAuth();
 
-    console.log('🛡️ ProtectedRoute:', { isAuthenticated, loading });
+  console.log("🛡️ ProtectedRoute:", { isAuthenticated, loading });
 
   if (loading) {
     return (
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh' 
-      }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
         <p>Loading...</p>
       </div>
     );
   }
 
   return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
-};
+};

src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-import './_Header.scss';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../hooks/useAuth";
+import "./_Header.scss";
 
 interface HeaderProps {
   children: React.ReactNode;
@@ -13,32 +13,33 @@ export const Header: React.FC<HeaderProps> = ({ children }) => {
 
   const handleLogout = async () => {
     await logout();
-    navigate('/login');
+    navigate("/login");
   };
-return(
-<header className="layout-header">
-    <div className="header-content">
-      <h1 onClick={() => navigate('/dashboard')} className="logo">
-        <img className="logo" src="/public/coopcloud_logo_grey.svg"/>
-      </h1>
-      <nav className="nav">
-        <button onClick={() => navigate('/dashboard')} className="nav-link">
-          Dashboard
-        </button>
-        <button onClick={() => navigate('/apps')} className="nav-link">
-          Apps
-        </button>
-        <button onClick={() => navigate('/servers')} className="nav-link">
-          Servers
-        </button>
-      </nav>
+  return (
+    <header className="layout-header">
+      <div className="header-content">
+        <h1 onClick={() => navigate("/dashboard")} className="logo">
+          <img className="logo" src="/public/coopcloud_logo_grey.svg" />
+        </h1>
+        <nav className="nav">
+          <button onClick={() => navigate("/dashboard")} className="nav-link">
+            Dashboard
+          </button>
+          <button onClick={() => navigate("/apps")} className="nav-link">
+            Apps
+          </button>
+          <button onClick={() => navigate("/servers")} className="nav-link">
+            Servers
+          </button>
+        </nav>
 
-      <div className="user-menu">
-        <span className="username">{user?.username}</span>
-        <button onClick={handleLogout} className="logout-button">
-          Logout
-        </button>
+        <div className="user-menu">
+          <span className="username">{user?.username}</span>
+          <button onClick={handleLogout} className="logout-button">
+            Logout
+          </button>
+        </div>
       </div>
-    </div>
-  </header>
-)}
+    </header>
+  );
+};

src/components/Header/_Header.scss

@@ -1,5 +1,5 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .layout-header {
   background-color: $primary-light;
@@ -63,7 +63,7 @@
 
     // Active indicator
     &.active::after {
-      content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       left: 50%;
@@ -92,7 +92,7 @@
     .username {
       font-weight: $font-weight-medium;
       font-size: $font-size-base;
-      
+
       @media (max-width: 480px) {
         font-size: $font-size-sm;
       }
@@ -124,4 +124,4 @@
       }
     }
   }
-}
+}

src/context/AuthContext.tsx

@@ -1,6 +1,12 @@
-import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
-import { apiService } from '../services/api';
-import type { LoginCredentials, User } from '../types';
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { apiService } from "../services/api";
+import type { LoginCredentials, User } from "../types";
 
 interface AuthContextType {
   user: User | null;
@@ -10,7 +16,9 @@ interface AuthContextType {
   isAuthenticated: boolean;
 }
 
-export const AuthContext = createContext<AuthContextType | undefined>(undefined);
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined,
+);
 
 interface AuthProviderProps {
   children: ReactNode;
@@ -20,39 +28,39 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockAuthMode = import.meta.env.VITE_MOCK_AUTH === "true";
 
   useEffect(() => {
     const checkAuth = async () => {
-      console.log('🔍 checkAuth running, isMockMode:', isMockMode);
+      console.log("🔍 checkAuth running, isMockAuthMode:", isMockAuthMode);
       try {
-        if (isMockMode) {
-          console.log('✅ Mock mode - setting mock user');
+        if (isMockAuthMode) {
+          console.log("✅ Mock mode - setting mock user");
           setUser({
-            id: 'mock-user-1',
-            username: 'developer',
-            email: 'dev@coopcloud.tech',
+            id: "mock-user-1",
+            username: "developer",
+            email: "dev@coopcloud.tech",
           });
           setLoading(false);
-          console.log('✅ Mock user set, loading set to false');
+          console.log("✅ Mock user set, loading set to false");
           return;
         }
 
-        const token = localStorage.getItem('auth_token');
+        const token = localStorage.getItem("auth_token");
         if (token) {
           const currentUser = await apiService.getCurrentUser();
           setUser(currentUser);
         }
       } catch (error) {
-        console.error('Auth check failed:', error);
-        localStorage.removeItem('auth_token');
+        console.error("Auth check failed:", error);
+        localStorage.removeItem("auth_token");
       } finally {
         setLoading(false);
       }
     };
 
     checkAuth();
-  }, [isMockMode]);
+  }, [isMockAuthMode]);
 
   const login = async (credentials: LoginCredentials) => {
     try {
@@ -75,15 +83,19 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     logout,
     isAuthenticated: !!user,
   };
-  console.log('📊 AuthContext state:', { user, loading, isAuthenticated: !!user });
+  console.log("📊 AuthContext state:", {
+    user,
+    loading,
+    isAuthenticated: !!user,
+  });
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
-export function useAuth() { 
+export function useAuth() {
   const context = useContext(AuthContext);
   if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
-}
+}

src/hooks/useAuth.ts

@@ -1,12 +1,12 @@
-import { useContext } from 'react';
-import { AuthContext } from '../context/AuthContext';
+import { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
 
 export const useAuth = () => {
   const context = useContext(AuthContext);
-  
+
   if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
-  
+
   return context;
-};
+};

src/index.scss

@@ -1,14 +1,24 @@
-@use './assets/scss/variables' as *;
-@use './assets/scss/mixins' as *;
-@use './assets/scss/global' as *;
+@use "./assets/scss/variables" as *;
+@use "./assets/scss/mixins" as *;
+@use "./assets/scss/global" as *;
 
 // Global root styles
 :root {
   line-height: 1.5;
   font-weight: 400;
-  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
+  font-family:
+    "Manrope",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
 
   color-scheme: light dark;
   color: $text-primary;
@@ -44,7 +54,12 @@ a {
 }
 
 // Global heading styles
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: $text-primary;
   margin: 0;
 }

src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.scss'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.scss";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

src/routes/Authenticated/Apps/App.scss

@@ -1,5 +1,5 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 .app-detail-page {
   min-height: 100vh;
   background: #f5f5f5;
@@ -460,4 +460,4 @@
       color: #1a1a1a;
     }
   }
-}
+}

src/routes/Authenticated/Apps/App.tsx

@@ -1,52 +1,52 @@
-import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraApp } from '../../../types';
-import './App.scss';
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Header } from "../../../components/Header/Header";
+import { apiService } from "../../../services/api";
+import type { AbraApp } from "../../../types";
+import "./App.scss";
 
 export const AppDetail: React.FC = () => {
   const { server, appName } = useParams<{ server: string; appName: string }>();
   const navigate = useNavigate();
-  
+
   const [app, setApp] = useState<AbraApp | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [isEditing, setIsEditing] = useState(false);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchApp = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const appsData = await mockApiService.getAppsGrouped();
-          
+
           // Find the specific app
-          const serverApps = appsData[server || ''];
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
-          
+          const serverApps = appsData[server || ""];
+          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
+
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError('App not found');
+            setError("App not found");
           }
         } else {
           // Real API call would be here
           const appsData = await apiService.getAppsGrouped();
-          const serverApps = appsData[server || ''];
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
-          
+          const serverApps = appsData[server || ""];
+          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
+
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError('App not found');
+            setError("App not found");
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load app');
+        setError(err instanceof Error ? err.message : "Failed to load app");
       } finally {
         setLoading(false);
       }
@@ -57,28 +57,28 @@ export const AppDetail: React.FC = () => {
 
   const handleAction = async (action: string) => {
     if (!app) return;
-    
+
     setActionLoading(action);
     try {
       switch (action) {
-        case 'start':
+        case "start":
           await apiService.startApp(app.appName);
           break;
-        case 'stop':
+        case "stop":
           await apiService.stopApp(app.appName);
           break;
-        case 'deploy':
+        case "deploy":
           await apiService.deployApp(app.appName);
           break;
-        case 'upgrade':
+        case "upgrade":
           // Upgrade logic would go here
-          console.log('Upgrade app');
+          console.log("Upgrade app");
           break;
       }
       // Refresh app data after action
       // In real implementation, you'd refetch the app
     } catch (err) {
-      console.error('Action failed:', err);
+      console.error("Action failed:", err);
     } finally {
       setActionLoading(null);
     }
@@ -100,8 +100,8 @@ export const AppDetail: React.FC = () => {
       <div className="app-detail-page">
         <Header />
         <main className="app-detail-content">
-          <div className="error">{error || 'App not found'}</div>
-          <button onClick={() => navigate('/apps')} className="back-button">
+          <div className="error">{error || "App not found"}</div>
+          <button onClick={() => navigate("/apps")} className="back-button">
             Back to Apps
           </button>
         </main>
@@ -109,14 +109,15 @@ export const AppDetail: React.FC = () => {
     );
   }
 
-  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
+  const upgradeVersions =
+    app.upgrade !== "latest" ? app.upgrade.split("\n") : [];
 
   return (
     <div className="app-detail-page">
       <Header />
       <main className="app-detail-content">
         <div className="breadcrumb">
-          <button onClick={() => navigate('/apps')} className="breadcrumb-link">
+          <button onClick={() => navigate("/apps")} className="breadcrumb-link">
             Apps
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -128,33 +129,37 @@ export const AppDetail: React.FC = () => {
             <h1>{app.appName}</h1>
             <div className="app-meta">
               <span className="recipe-badge">{app.recipe}</span>
-              <span className={`status-badge status-${app.status}`}>{app.status}</span>
-              {app.chaos === 'true' && (
-                <span className="chaos-badge" title="Chaos mode enabled">Chaos</span>
+              <span className={`status-badge status-${app.status}`}>
+                {app.status}
+              </span>
+              {app.chaos === "true" && (
+                <span className="chaos-badge" title="Chaos mode enabled">
+                  Chaos
+                </span>
               )}
             </div>
           </div>
 
           <div className="app-actions">
-            <button 
+            <button
               className="action-btn secondary"
               onClick={() => setIsEditing(!isEditing)}
             >
-              {isEditing ? 'Cancel' : 'Edit'}
+              {isEditing ? "Cancel" : "Edit"}
             </button>
-            <button 
+            <button
               className="action-btn danger"
-              onClick={() => handleAction('stop')}
-              disabled={actionLoading === 'stop'}
+              onClick={() => handleAction("stop")}
+              disabled={actionLoading === "stop"}
             >
-              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
+              {actionLoading === "stop" ? "Stopping..." : "Stop"}
             </button>
-            <button 
+            <button
               className="action-btn primary"
-              onClick={() => handleAction('deploy')}
-              disabled={actionLoading === 'deploy'}
+              onClick={() => handleAction("deploy")}
+              disabled={actionLoading === "deploy"}
             >
-              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
+              {actionLoading === "deploy" ? "Deploying..." : "Deploy"}
             </button>
           </div>
         </div>
@@ -164,7 +169,7 @@ export const AppDetail: React.FC = () => {
           <div className="main-column">
             <section className="info-card">
               <h2>Application Details</h2>
-              
+
               <div className="info-grid">
                 <div className="info-item">
                   <label>App Name</label>
@@ -174,7 +179,12 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Domain</label>
                   {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
+                    <a
+                      href={`https://${app.domain}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="domain-link"
+                    >
                       {app.domain} ↗
                     </a>
                   ) : (
@@ -184,7 +194,7 @@ export const AppDetail: React.FC = () => {
 
                 <div className="info-item">
                   <label>Server</label>
-                  <button 
+                  <button
                     onClick={() => navigate(`/servers/${app.server}`)}
                     className="server-link"
                   >
@@ -206,8 +216,8 @@ export const AppDetail: React.FC = () => {
 
                 <div className="info-item">
                   <label>Chaos Mode</label>
-                  <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
-                    {app.chaos === 'true' ? '🔬 Enabled' : 'Disabled'}
+                  <span className={app.chaos === "true" ? "chaos-active" : ""}>
+                    {app.chaos === "true" ? "🔬 Enabled" : "Disabled"}
                   </span>
                 </div>
               </div>
@@ -215,14 +225,14 @@ export const AppDetail: React.FC = () => {
 
             <section className="info-card">
               <h2>Version Information</h2>
-              
+
               <div className="version-info">
                 <div className="version-current">
                   <label>Current Version</label>
                   <code>{app.version}</code>
                 </div>
 
-                {app.chaosVersion !== 'unknown' && (
+                {app.chaosVersion !== "unknown" && (
                   <div className="version-current">
                     <label>Chaos Version</label>
                     <code>{app.chaosVersion}</code>
@@ -233,18 +243,22 @@ export const AppDetail: React.FC = () => {
                   <div className="version-upgrades">
                     <label>
                       Available Upgrades
-                      <span className="upgrade-count">{upgradeVersions.length}</span>
+                      <span className="upgrade-count">
+                        {upgradeVersions.length}
+                      </span>
                     </label>
                     <div className="upgrade-list">
                       {upgradeVersions.map((version, idx) => (
                         <div key={idx} className="upgrade-item">
                           <code>{version}</code>
-                          <button 
+                          <button
                             className="upgrade-btn"
-                            onClick={() => handleAction('upgrade')}
-                            disabled={actionLoading === 'upgrade'}
+                            onClick={() => handleAction("upgrade")}
+                            disabled={actionLoading === "upgrade"}
                           >
-                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
+                            {actionLoading === "upgrade"
+                              ? "Upgrading..."
+                              : "Upgrade"}
                           </button>
                         </div>
                       ))}
@@ -252,10 +266,8 @@ export const AppDetail: React.FC = () => {
                   </div>
                 )}
 
-                {app.upgrade === 'latest' && (
-                  <div className="version-latest">
-                    Running latest version
-                  </div>
+                {app.upgrade === "latest" && (
+                  <div className="version-latest">Running latest version</div>
                 )}
               </div>
             </section>
@@ -265,20 +277,20 @@ export const AppDetail: React.FC = () => {
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-              
+
               <div className="action-list">
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('start')}
-                  disabled={actionLoading === 'start'}
+                  onClick={() => handleAction("start")}
+                  disabled={actionLoading === "start"}
                 >
                   <span className="action-text">Start Application</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('stop')}
-                  disabled={actionLoading === 'stop'}
+                  onClick={() => handleAction("stop")}
+                  disabled={actionLoading === "stop"}
                 >
                   <span className="action-text">Stop Application</span>
                 </button>
@@ -323,4 +335,4 @@ export const AppDetail: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Authenticated/Apps/Apps.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .apps-page {

src/routes/Authenticated/Apps/Apps.tsx

@@ -1,27 +1,31 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../../types';
-import './Apps.scss';
+import React, { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Header } from "../../../components/Header/Header";
+import { apiService } from "../../../services/api";
+import type {
+  AbraApp,
+  AppWithServer,
+  ServerAppsResponse,
+} from "../../../types";
+import "./Apps.scss";
 
 export const Apps: React.FC = () => {
   const navigate = useNavigate();
   const [appsData, setAppsData] = useState<ServerAppsResponse | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterServer, setFilterServer] = useState<string>('all');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [error, setError] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterServer, setFilterServer] = useState<string>("all");
+  const [filterStatus, setFilterStatus] = useState<string>("all");
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const data = await mockApiService.getAppsGrouped();
           setAppsData(data);
         } else {
@@ -29,7 +33,7 @@ export const Apps: React.FC = () => {
           setAppsData(data);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load apps');
+        setError(err instanceof Error ? err.message : "Failed to load apps");
       } finally {
         setLoading(false);
       }
@@ -41,15 +45,15 @@ export const Apps: React.FC = () => {
   // Flatten and enrich apps data
   const allApps: AppWithServer[] = useMemo(() => {
     if (!appsData) return [];
-    
+
     return Object.entries(appsData).flatMap(([serverName, serverData]) =>
-      serverData.apps.map(app => ({
+      serverData.apps.map((app) => ({
         ...app,
         serverStats: {
           appCount: serverData.appCount,
           upgradeCount: serverData.upgradeCount,
         },
-      }))
+      })),
     );
   }, [appsData]);
 
@@ -61,17 +65,19 @@ export const Apps: React.FC = () => {
 
   // Filter apps
   const filteredApps = useMemo(() => {
-    return allApps.filter(app => {
-      const matchesSearch = 
+    return allApps.filter((app) => {
+      const matchesSearch =
         app.appName.toLowerCase().includes(searchTerm.toLowerCase()) ||
         app.recipe.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
-      
-      const matchesServer = filterServer === 'all' || app.server === filterServer;
-      const matchesChaos = filterStatus === 'all' || 
-        (filterStatus === 'chaos' && app.chaos === 'true') ||
-        (filterStatus === 'stable' && app.chaos === 'false');
-      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
+        (app.domain || "").toLowerCase().includes(searchTerm.toLowerCase());
+
+      const matchesServer =
+        filterServer === "all" || app.server === filterServer;
+      const matchesChaos =
+        filterStatus === "all" ||
+        (filterStatus === "chaos" && app.chaos === "true") ||
+        (filterStatus === "stable" && app.chaos === "false");
+      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== "latest";
 
       return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
     });
@@ -79,8 +85,10 @@ export const Apps: React.FC = () => {
 
   const stats = useMemo(() => {
     const total = allApps.length;
-    const needsUpgrade = allApps.filter(app => app.upgrade !== 'latest').length;
-    const chaosApps = allApps.filter(app => app.chaos === 'true').length;
+    const needsUpgrade = allApps.filter(
+      (app) => app.upgrade !== "latest",
+    ).length;
+    const chaosApps = allApps.filter((app) => app.chaos === "true").length;
     const totalServers = servers.length;
 
     return { total, needsUpgrade, chaosApps, totalServers };
@@ -114,7 +122,9 @@ export const Apps: React.FC = () => {
       <main className="apps-content">
         <div className="page-header">
           <h1>Applications</h1>
-          <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
+          <p className="subtitle">
+            {stats.total} apps across {stats.totalServers} servers
+          </p>
         </div>
 
         {/* Stats Overview */}
@@ -155,14 +165,22 @@ export const Apps: React.FC = () => {
             className="search-input"
           />
 
-          <select value={filterServer} onChange={(e) => setFilterServer(e.target.value)}>
+          <select
+            value={filterServer}
+            onChange={(e) => setFilterServer(e.target.value)}
+          >
             <option value="all">All Servers</option>
-            {servers.map(server => (
-              <option key={server} value={server}>{server}</option>
+            {servers.map((server) => (
+              <option key={server} value={server}>
+                {server}
+              </option>
             ))}
           </select>
 
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+          >
             <option value="all">All Status</option>
             <option value="stable">Stable</option>
             <option value="chaos">Chaos Mode</option>
@@ -201,10 +219,12 @@ export const Apps: React.FC = () => {
                 </tr>
               ) : (
                 filteredApps.map((app) => (
-                  <tr 
+                  <tr
                     key={`${app.server}/${app.appName}`}
-                    onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
-                    style={{ cursor: 'pointer' }}
+                    onClick={() =>
+                      navigate(`/apps/${app.server}/${app.appName}`)
+                    }
+                    style={{ cursor: "pointer" }}
                   >
                     <td className="app-name-cell">
                       <span className="app-name">{app.appName}</span>
@@ -214,10 +234,10 @@ export const Apps: React.FC = () => {
                     </td>
                     <td>
                       {app.domain ? (
-                        <a 
-                          href={`https://${app.domain}`} 
-                          target="_blank" 
-                          rel="noopener noreferrer" 
+                        <a
+                          href={`https://${app.domain}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
                           className="domain-link"
                           onClick={(e) => e.stopPropagation()}
                         >
@@ -233,12 +253,17 @@ export const Apps: React.FC = () => {
                     <td>
                       <div className="version-cell">
                         <span className="version">{app.version}</span>
-                        {app.chaos === 'true' && (
-                          <span className="chaos-badge" title="Chaos mode enabled"></span>
+                        {app.chaos === "true" && (
+                          <span
+                            className="chaos-badge"
+                            title="Chaos mode enabled"
+                          ></span>
                         )}
-                        {app.upgrade !== 'latest' && (
-                          <span className="upgrade-available" title="Upgrade available">
-                          </span>
+                        {app.upgrade !== "latest" && (
+                          <span
+                            className="upgrade-available"
+                            title="Upgrade available"
+                          ></span>
                         )}
                       </div>
                     </td>
@@ -249,8 +274,8 @@ export const Apps: React.FC = () => {
                     </td>
                     <td>
                       <div className="actions">
-                        <button 
-                          className="action-btn" 
+                        <button
+                          className="action-btn"
                           title="View details"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -259,9 +284,9 @@ export const Apps: React.FC = () => {
                         >
                           details
                         </button>
-                        {app.upgrade !== 'latest' && (
-                          <button 
-                            className="action-btn upgrade" 
+                        {app.upgrade !== "latest" && (
+                          <button
+                            className="action-btn upgrade"
                             title="Upgrade"
                             onClick={(e) => {
                               e.stopPropagation();
@@ -286,4 +311,4 @@ export const Apps: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Authenticated/Dashboard/Dashboard.tsx

@@ -1,32 +1,34 @@
-import React, { useEffect, useState } from 'react';
-import { Header } from '../../../components/Header/Header';
-import { useNavigate } from 'react-router-dom';
-import { apiService } from '../../../services/api';
-import type { AbraApp, AbraServer } from '../../../types';
-import './_Dashboard.scss';
+import React, { useEffect, useState } from "react";
+import { Header } from "../../../components/Header/Header";
+import { useNavigate } from "react-router-dom";
+import { apiService } from "../../../services/api";
+import type { AbraApp, AbraServer } from "../../../types";
+import "./_Dashboard.scss";
 
 export const Dashboard: React.FC = () => {
   const [apps, setApps] = useState<AbraApp[]>([]);
   const [servers, setServers] = useState<AbraServer[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const navigate = useNavigate();
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
           // Use mock API in development
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const [appsData, serversData] = await Promise.all([
             mockApiService.getAppsGrouped(),
             mockApiService.getServers(),
           ]);
-          
+
           // Flatten the grouped apps data
-          const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
+          const flatApps = Object.values(appsData).flatMap(
+            (serverData) => serverData.apps,
+          );
           setApps(flatApps);
           setServers(serversData);
         } else {
@@ -35,14 +37,16 @@ export const Dashboard: React.FC = () => {
             apiService.getAppsGrouped(),
             apiService.getServers(),
           ]);
-          
+
           // Flatten the grouped apps data
-          const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
+          const flatApps = Object.values(appsData).flatMap(
+            (serverData) => serverData.apps,
+          );
           setApps(flatApps);
           setServers(serversData);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load data');
+        setError(err instanceof Error ? err.message : "Failed to load data");
       } finally {
         setLoading(false);
       }
@@ -52,8 +56,8 @@ export const Dashboard: React.FC = () => {
   }, [isMockMode]);
 
   // Calculate stats
-  const deployedAppsCount = apps.filter(a => a.status === 'deployed').length;
-  const serversWithAppsCount = new Set(apps.map(a => a.server)).size;
+  const deployedAppsCount = apps.filter((a) => a.status === "deployed").length;
+  const serversWithAppsCount = new Set(apps.map((a) => a.server)).size;
 
   if (loading) {
     return (
@@ -84,25 +88,27 @@ export const Dashboard: React.FC = () => {
         <div className="page-header">
           <h1>Dashboard</h1>
         </div>
-        
+
         <div className="stats-grid">
-          <button onClick={() => navigate('/apps')} className="nav-link bland-button">
+          <button
+            onClick={() => navigate("/apps")}
+            className="nav-link bland-button"
+          >
             <div className="stat-card">
               <h3>Apps</h3>
               <p className="stat-number">{apps.length}</p>
-              <p className="stat-label">
-                {deployedAppsCount} deployed
-              </p>
+              <p className="stat-label">{deployedAppsCount} deployed</p>
             </div>
           </button>
 
-          <button onClick={() => navigate('/servers')} className="nav-link bland-button">
+          <button
+            onClick={() => navigate("/servers")}
+            className="nav-link bland-button"
+          >
             <div className="stat-card">
               <h3>Servers</h3>
               <p className="stat-number">{servers.length}</p>
-              <p className="stat-label">
-                {serversWithAppsCount} connected
-              </p>
+              <p className="stat-label">{serversWithAppsCount} connected</p>
             </div>
           </button>
         </div>
@@ -111,14 +117,14 @@ export const Dashboard: React.FC = () => {
           <h3>Recent Applications</h3>
           <div className="apps-list">
             {apps.slice(0, 5).map((app, index) => (
-              <div 
-                key={`${app.server}-${app.appName}-${index}`} 
-                className="app-item" 
+              <div
+                key={`${app.server}-${app.appName}-${index}`}
+                className="app-item"
                 onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
               >
                 <div className="app-info">
                   <h4>{app.appName}</h4>
-                  <p className="app-domain">{app.domain || 'No domain'}</p>
+                  <p className="app-domain">{app.domain || "No domain"}</p>
                   <p className="app-server">{app.server}</p>
                 </div>
                 <span className={`status-badge status-${app.status}`}>

src/routes/Authenticated/Dashboard/_Dashboard.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .dashboard-page {
@@ -33,7 +33,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
   cursor: pointer;
 
   &:hover {

src/routes/Authenticated/Servers/Server.scss

@@ -1,5 +1,5 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .server-detail-page {
   min-height: 100vh;
@@ -461,4 +461,4 @@
       }
     }
   }
-}
+}

src/routes/Authenticated/Servers/Server.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
-import './Server.scss';
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Header } from "../../../components/Header/Header";
+import { apiService } from "../../../services/api";
+import type { AbraServer, ServerAppsResponse } from "../../../types";
+import "./Server.scss";
 
 interface ServerWithApps extends AbraServer {
   apps: any[];
@@ -17,26 +17,26 @@ interface ServerWithApps extends AbraServer {
 export const Server: React.FC = () => {
   const { serverName } = useParams<{ serverName: string }>();
   const navigate = useNavigate();
-  
+
   const [server, setServer] = useState<ServerWithApps | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [actionLoading, setActionLoading] = useState<string | null>(null);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchServer = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const appsData = await mockApiService.getAppsGrouped();
           const serversData = await mockApiService.getServers();
-          
+
           // Find the server
-          const foundServer = serversData.find(s => s.name === serverName);
-          const serverApps = appsData[serverName || ''];
-          
+          const foundServer = serversData.find((s) => s.name === serverName);
+          const serverApps = appsData[serverName || ""];
+
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -48,16 +48,16 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError('Server not found');
+            setError("Server not found");
           }
         } else {
           // Real API call
           const appsData = await apiService.getAppsGrouped();
           const serversData = await apiService.getServers();
-          
-          const foundServer = serversData.find(s => s.name === serverName);
-          const serverApps = appsData[serverName || ''];
-          
+
+          const foundServer = serversData.find((s) => s.name === serverName);
+          const serverApps = appsData[serverName || ""];
+
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -69,11 +69,11 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError('Server not found');
+            setError("Server not found");
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load server');
+        setError(err instanceof Error ? err.message : "Failed to load server");
       } finally {
         setLoading(false);
       }
@@ -84,13 +84,13 @@ export const Server: React.FC = () => {
 
   const handleAction = async (action: string) => {
     if (!server) return;
-    
+
     setActionLoading(action);
     try {
       console.log(`Action: ${action} on server ${server.name}`);
       // Add actual server actions here
     } catch (err) {
-      console.error('Action failed:', err);
+      console.error("Action failed:", err);
     } finally {
       setActionLoading(null);
     }
@@ -112,8 +112,8 @@ export const Server: React.FC = () => {
       <div className="server-detail-page">
         <Header />
         <main className="server-detail-content">
-          <div className="error">{error || 'Server not found'}</div>
-          <button onClick={() => navigate('/servers')} className="back-button">
+          <div className="error">{error || "Server not found"}</div>
+          <button onClick={() => navigate("/servers")} className="back-button">
             Back to Servers
           </button>
         </main>
@@ -121,15 +121,20 @@ export const Server: React.FC = () => {
     );
   }
 
-  const chaosApps = server.apps.filter(app => app.chaos === 'true');
-  const runningApps = server.apps.filter(app => app.status === 'deployed' || app.status === 'running');
+  const chaosApps = server.apps.filter((app) => app.chaos === "true");
+  const runningApps = server.apps.filter(
+    (app) => app.status === "deployed" || app.status === "running",
+  );
 
   return (
     <div className="server-detail-page">
       <Header />
       <main className="server-detail-content">
         <div className="breadcrumb">
-          <button onClick={() => navigate('/servers')} className="breadcrumb-link">
+          <button
+            onClick={() => navigate("/servers")}
+            className="breadcrumb-link"
+          >
             Servers
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -143,26 +148,27 @@ export const Server: React.FC = () => {
               <span className="host-badge">{server.host}</span>
               {server.upgradeCount > 0 && (
                 <span className="upgrade-badge">
-                  {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
+                  {server.upgradeCount} upgrade
+                  {server.upgradeCount !== 1 ? "s" : ""}
                 </span>
               )}
             </div>
           </div>
 
           <div className="server-actions">
-            <button 
+            <button
               className="action-btn secondary"
-              onClick={() => handleAction('refresh')}
-              disabled={actionLoading === 'refresh'}
+              onClick={() => handleAction("refresh")}
+              disabled={actionLoading === "refresh"}
             >
-              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
+              {actionLoading === "refresh" ? "Refreshing..." : "Refresh"}
             </button>
-            <button 
+            <button
               className="action-btn primary"
-              onClick={() => handleAction('deploy-all')}
-              disabled={actionLoading === 'deploy-all'}
+              onClick={() => handleAction("deploy-all")}
+              disabled={actionLoading === "deploy-all"}
             >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
+              {actionLoading === "deploy-all" ? "Deploying..." : "Deploy All"}
             </button>
           </div>
         </div>
@@ -172,7 +178,7 @@ export const Server: React.FC = () => {
           <div className="main-column">
             <section className="info-card">
               <h2>Server Details</h2>
-              
+
               <div className="info-grid">
                 <div className="info-item">
                   <label>Server Name</label>
@@ -196,14 +202,24 @@ export const Server: React.FC = () => {
 
                 <div className="info-item">
                   <label>Upgrades Available</label>
-                  <span className={server.upgradeCount > 0 ? 'stat-value warning' : 'stat-value'}>
+                  <span
+                    className={
+                      server.upgradeCount > 0
+                        ? "stat-value warning"
+                        : "stat-value"
+                    }
+                  >
                     {server.upgradeCount}
                   </span>
                 </div>
 
                 <div className="info-item">
                   <label>Chaos Mode Apps</label>
-                  <span className={chaosApps.length > 0 ? 'stat-value chaos' : 'stat-value'}>
+                  <span
+                    className={
+                      chaosApps.length > 0 ? "stat-value chaos" : "stat-value"
+                    }
+                  >
                     {chaosApps.length}
                   </span>
                 </div>
@@ -222,16 +238,20 @@ export const Server: React.FC = () => {
 
             <section className="info-card">
               <h2>Applications on this Server</h2>
-              
+
               {server.apps.length === 0 ? (
-                <div className="no-apps">No applications deployed on this server</div>
+                <div className="no-apps">
+                  No applications deployed on this server
+                </div>
               ) : (
                 <div className="apps-list">
                   {server.apps.map((app, idx) => (
-                    <div 
+                    <div
                       key={`${app.appName}-${idx}`}
                       className="app-item"
-                      onClick={() => navigate(`/apps/${server.name}/${app.appName}`)}
+                      onClick={() =>
+                        navigate(`/apps/${server.name}/${app.appName}`)
+                      }
                     >
                       <div className="app-item-header">
                         <span className="app-item-name">{app.appName}</span>
@@ -240,18 +260,24 @@ export const Server: React.FC = () => {
                           <span className={`status-badge status-${app.status}`}>
                             {app.status}
                           </span>
-                          {app.chaos === 'true' && (
-                            <span className="chaos-badge" title="Chaos mode"></span>
+                          {app.chaos === "true" && (
+                            <span
+                              className="chaos-badge"
+                              title="Chaos mode"
+                            ></span>
                           )}
-                          {app.upgrade !== 'latest' && (
-                            <span className="upgrade-badge" title="Upgrade available"></span>
+                          {app.upgrade !== "latest" && (
+                            <span
+                              className="upgrade-badge"
+                              title="Upgrade available"
+                            ></span>
                           )}
                         </div>
                       </div>
                       <div className="app-item-details">
                         <span className="app-item-version">v{app.version}</span>
                         {app.domain && (
-                          <a 
+                          <a
                             href={`https://${app.domain}`}
                             target="_blank"
                             rel="noopener noreferrer"
@@ -273,28 +299,30 @@ export const Server: React.FC = () => {
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-              
+
               <div className="action-list">
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('refresh')}
-                  disabled={actionLoading === 'refresh'}
+                  onClick={() => handleAction("refresh")}
+                  disabled={actionLoading === "refresh"}
                 >
                   <span className="action-text">Refresh Server Info</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('deploy-all')}
-                  disabled={actionLoading === 'deploy-all'}
+                  onClick={() => handleAction("deploy-all")}
+                  disabled={actionLoading === "deploy-all"}
                 >
                   <span className="action-text">Deploy All Apps</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('upgrade-all')}
-                  disabled={actionLoading === 'upgrade-all' || server.upgradeCount === 0}
+                  onClick={() => handleAction("upgrade-all")}
+                  disabled={
+                    actionLoading === "upgrade-all" || server.upgradeCount === 0
+                  }
                 >
                   <span className="action-text">Upgrade All Apps</span>
                 </button>
@@ -347,4 +375,4 @@ export const Server: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Authenticated/Servers/Servers.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .servers-page {
@@ -28,7 +28,9 @@
   @include card;
   display: flex;
   flex-direction: column;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
   position: relative;
   overflow: hidden;
 
@@ -63,7 +65,7 @@
     .server-status {
       .status-indicator {
         font-size: $font-size-xl;
-        
+
         &.connected {
           color: $success;
         }

src/routes/Authenticated/Servers/Servers.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
-import './Servers.scss';
+import React, { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Header } from "../../../components/Header/Header";
+import { apiService } from "../../../services/api";
+import type { AbraServer, ServerAppsResponse } from "../../../types";
+import "./Servers.scss";
 
 interface ServerWithStats extends AbraServer {
   appCount: number;
@@ -17,27 +17,29 @@ export const Servers: React.FC = () => {
   const navigate = useNavigate();
   const [servers, setServers] = useState<ServerWithStats[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
+  const [error, setError] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortBy, setSortBy] = useState<"name" | "apps" | "upgrades">("name");
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const [serversData, appsData] = await Promise.all([
             mockApiService.getServers(),
             mockApiService.getAppsGrouped(),
           ]);
-          
+
           // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
+          const enrichedServers = serversData.map((server) => {
             const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
+            const chaosCount =
+              serverStats?.apps.filter((app) => app.chaos === "true").length ||
+              0;
+
             return {
               ...server,
               appCount: serverStats?.appCount || 0,
@@ -47,19 +49,21 @@ export const Servers: React.FC = () => {
               chaosCount,
             };
           });
-          
+
           setServers(enrichedServers);
         } else {
           const [serversData, appsData] = await Promise.all([
             apiService.getServers(),
             apiService.getAppsGrouped(),
           ]);
-          
+
           // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
+          const enrichedServers = serversData.map((server) => {
             const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
+            const chaosCount =
+              serverStats?.apps.filter((app) => app.chaos === "true").length ||
+              0;
+
             return {
               ...server,
               appCount: serverStats?.appCount || 0,
@@ -69,11 +73,11 @@ export const Servers: React.FC = () => {
               chaosCount,
             };
           });
-          
+
           setServers(enrichedServers);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load servers');
+        setError(err instanceof Error ? err.message : "Failed to load servers");
       } finally {
         setLoading(false);
       }
@@ -94,19 +98,20 @@ export const Servers: React.FC = () => {
 
   // Filter and sort servers
   const filteredServers = useMemo(() => {
-    const filtered = servers.filter(server =>
-      server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      server.host.toLowerCase().includes(searchTerm.toLowerCase())
+    const filtered = servers.filter(
+      (server) =>
+        server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        server.host.toLowerCase().includes(searchTerm.toLowerCase()),
     );
 
     // Sort
     filtered.sort((a, b) => {
       switch (sortBy) {
-        case 'apps':
+        case "apps":
           return b.appCount - a.appCount;
-        case 'upgrades':
+        case "upgrades":
           return b.upgradeCount - a.upgradeCount;
-        case 'name':
+        case "name":
         default:
           return a.name.localeCompare(b.name);
       }
@@ -143,7 +148,10 @@ export const Servers: React.FC = () => {
       <main className="servers-content">
         <div className="page-header">
           <h1>Servers</h1>
-          <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
+          <p className="subtitle">
+            Managing {stats.totalServers} servers with {stats.totalApps}{" "}
+            applications
+          </p>
         </div>
 
         {/* Stats Overview */}
@@ -188,7 +196,10 @@ export const Servers: React.FC = () => {
             className="search-input"
           />
 
-          <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as any)}
+          >
             <option value="name">Sort by Name</option>
             <option value="apps">Sort by App Count</option>
             <option value="upgrades">Sort by Upgrades</option>
@@ -198,14 +209,16 @@ export const Servers: React.FC = () => {
         {/* Server Cards */}
         <div className="servers-grid">
           {filteredServers.length === 0 ? (
-            <div className="no-results">No servers found matching your search</div>
+            <div className="no-results">
+              No servers found matching your search
+            </div>
           ) : (
             filteredServers.map((server) => (
-              <div 
-                key={server.name} 
+              <div
+                key={server.name}
                 className="server-card"
                 onClick={() => navigate(`/servers/${server.name}`)}
-                style={{ cursor: 'pointer' }}
+                style={{ cursor: "pointer" }}
               >
                 <div className="server-header">
                   <div className="server-title">
@@ -213,7 +226,12 @@ export const Servers: React.FC = () => {
                     <span className="server-host">{server.host}</span>
                   </div>
                   <div className="server-status">
-                    <span className="status-indicator connected" title="Connected">●</span>
+                    <span
+                      className="status-indicator connected"
+                      title="Connected"
+                    >
+                      ●
+                    </span>
                   </div>
                 </div>
 
@@ -249,7 +267,7 @@ export const Servers: React.FC = () => {
                 </div>
 
                 <div className="server-actions">
-                  <button 
+                  <button
                     className="action-btn primary"
                     onClick={(e) => {
                       e.stopPropagation();
@@ -258,7 +276,7 @@ export const Servers: React.FC = () => {
                   >
                     View Apps
                   </button>
-                  <button 
+                  <button
                     className="action-btn"
                     onClick={(e) => {
                       e.stopPropagation();
@@ -273,7 +291,8 @@ export const Servers: React.FC = () => {
                   <div className="server-alert">
                     <span className="alert-icon">⚠️</span>
                     <span className="alert-text">
-                      {server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
+                      {server.upgradeCount} app
+                      {server.upgradeCount > 1 ? "s" : ""} can be upgraded
                     </span>
                   </div>
                 )}
@@ -288,4 +307,4 @@ export const Servers: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Login/LoginForm.scss

@@ -1,5 +1,5 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .login-container {
   @include flex-center;
@@ -91,4 +91,4 @@
   &:active:not(:disabled) {
     transform: translateY(0);
   }
-}
+}

src/routes/Login/LoginForm.tsx

@@ -1,27 +1,27 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-import './LoginForm.scss';
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../hooks/useAuth";
+import "./LoginForm.scss";
 
 export const LoginForm: React.FC = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  
+
   const { login } = useAuth();
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
+    setError("");
     setLoading(true);
 
     try {
       await login({ username, password });
-      navigate('/dashboard');
+      navigate("/dashboard");
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed');
+      setError(err instanceof Error ? err.message : "Login failed");
     } finally {
       setLoading(false);
     }
@@ -32,10 +32,10 @@ export const LoginForm: React.FC = () => {
       <div className="login-card">
         <h1>Coop Cloud</h1>
         <p className="login-subtitle">Sign in to manage your applications</p>
-        
+
         <form onSubmit={handleSubmit}>
           {error && <div className="error-message">{error}</div>}
-          
+
           <div className="form-group">
             <label htmlFor="username">Username</label>
             <input
@@ -63,10 +63,10 @@ export const LoginForm: React.FC = () => {
           </div>
 
           <button type="submit" disabled={loading} className="login-button">
-            {loading ? 'Signing in...' : 'Sign in'}
+            {loading ? "Signing in..." : "Sign in"}
           </button>
         </form>
       </div>
     </div>
   );
-};
+};

src/services/api.ts

@@ -1,26 +1,33 @@
-import type { AbraApp, AbraServer, AuthResponse, LoginCredentials, User } from '../types';
+import type {
+  AbraApp,
+  AbraServer,
+  AuthResponse,
+  LoginCredentials,
+  User,
+} from "../types";
 
-const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
+const API_BASE_URL =
+  import.meta.env.VITE_API_URL || "http://localhost:3000/api";
 
 class ApiService {
   private token: string | null = null;
 
   constructor() {
     // Load token from localStorage on initialization
-    this.token = localStorage.getItem('auth_token');
+    this.token = localStorage.getItem("auth_token");
   }
 
   private async request<T>(
     endpoint: string,
-    options: RequestInit = {}
+    options: RequestInit = {},
   ): Promise<T> {
     const headers: HeadersInit = {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       ...options.headers,
     };
 
     if (this.token) {
-      headers['Authorization'] = `Bearer ${this.token}`;
+      headers["Authorization"] = `Bearer ${this.token}`;
     }
 
     const response = await fetch(`${API_BASE_URL}${endpoint}`, {
@@ -29,7 +36,9 @@ class ApiService {
     });
 
     if (!response.ok) {
-      const error = await response.json().catch(() => ({ message: 'An error occurred' }));
+      const error = await response
+        .json()
+        .catch(() => ({ message: "An error occurred" }));
       throw new Error(error.message || `HTTP ${response.status}`);
     }
 
@@ -38,51 +47,51 @@ class ApiService {
 
   // Auth methods
   async login(credentials: LoginCredentials): Promise<AuthResponse> {
-    const response = await this.request<AuthResponse>('/auth/login', {
-      method: 'POST',
+    const response = await this.request<AuthResponse>("/auth/login", {
+      method: "POST",
       body: JSON.stringify(credentials),
     });
 
     this.token = response.token;
-    localStorage.setItem('auth_token', response.token);
+    localStorage.setItem("auth_token", response.token);
     return response;
   }
 
   async logout(): Promise<void> {
     this.token = null;
-    localStorage.removeItem('auth_token');
+    localStorage.removeItem("auth_token");
   }
 
   async getCurrentUser(): Promise<User> {
-    return this.request<User>('/auth/me');
+    return this.request<User>("/auth/me");
   }
 
   // Abra CLI wrapper methods
   async getAppsGrouped(): Promise<ServerAppsResponse> {
-    return this.request<ServerAppsResponse>('/abra/apps');
+    return this.request<ServerAppsResponse>("/abra/apps");
   }
 
   async getServers(): Promise<AbraServer[]> {
-    return this.request<AbraServer[]>('/abra/servers');
+    return this.request<AbraServer[]>("/abra/servers");
   }
 
   async deployApp(appName: string): Promise<void> {
     return this.request(`/abra/apps/${appName}/deploy`, {
-      method: 'POST',
+      method: "POST",
     });
   }
 
   async stopApp(appName: string): Promise<void> {
     return this.request(`/abra/apps/${appName}/stop`, {
-      method: 'POST',
+      method: "POST",
     });
   }
 
   async startApp(appName: string): Promise<void> {
     return this.request(`/abra/apps/${appName}/start`, {
-      method: 'POST',
+      method: "POST",
     });
   }
 }
 
-export const apiService = new ApiService();
+export const apiService = new ApiService();

src/services/mock-apps.json

@@ -590,4 +590,4 @@
     "latestCount": 3,
     "upgradeCount": 6
   }
-}
+}

src/services/mock-servers.json

@@ -27,4 +27,4 @@
     "host": "orgsite.org",
     "name": "orgsite.org"
   }
-]
+]

src/services/mockApi.ts

@@ -1,9 +1,9 @@
-import type { AbraServer, ServerAppsResponse } from '../types';
-import appsData from './mock-apps.json';
-import serversData from './mock-servers.json';
+import type { AbraServer, ServerAppsResponse } from "../types";
+import appsData from "./mock-apps.json";
+import serversData from "./mock-servers.json";
 
 // Simulate API delay
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const mockApiService = {
   async getAppsGrouped(): Promise<ServerAppsResponse> {
@@ -30,4 +30,4 @@ export const mockApiService = {
     await delay(500);
     console.log(`Mock: Starting app ${appName}`);
   },
-};
+};

src/types/index.ts

@@ -24,7 +24,7 @@ export interface AbraApp {
   recipe: string;
   appName: string;
   domain: string;
-  status: 'deployed' | 'stopped' | 'unknown';
+  status: "deployed" | "stopped" | "unknown";
   chaos: string;
   chaosVersion: string;
   version: string;
@@ -52,4 +52,4 @@ export interface AppWithServer extends AbraApp {
     appCount: number;
     upgradeCount: number;
   };
-}
+}