@plutonhq/core-frontend 0.1.13 → 0.1.14

package/src/components/Restore/RestoreWizard/RestoreSettingsStep.tsx

@@ -6,16 +6,20 @@ import classes from './RestoreWizard.module.scss';
 import FolderPicker from '../../common/FolderPicker/FolderPicker';
 import { RestoreSettings } from '../../../@types/restores';
 import Toggle from '../../common/form/Toggle/Toggle';
+import { Backup } from '../../..';
 
-interface settingsStepProps {
+interface RestoreSettingsStepProps {
    backupId: string;
+   deviceId: string;
    settings: RestoreSettings;
-   updateSettings: (settings: settingsStepProps['settings']) => void;
+   mirrors?: Backup['mirrors'];
+   primaryStorage: { id: string; type: string; name: string };
+   updateSettings: (settings: RestoreSettingsStepProps['settings']) => void;
    goNext: () => void;
    close: () => void;
 }
 
-const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: settingsStepProps) => {
+const RestoreSettingsStep = ({ settings, mirrors = [], primaryStorage, updateSettings, goNext, close, deviceId }: RestoreSettingsStepProps) => {
    const [showFileManager, setShowFileManager] = useState(false);
    const [showCustomPathError, setShowCustomPathError] = useState(false);
 
@@ -30,17 +34,38 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
    return (
       <div className={classes.stepContent}>
          <div className={classes.step}>
-            <p>
-               Select where you want to restore <strong>"backup-{backupId}"</strong>
-            </p>
+            {mirrors && mirrors.length > 0 && (
+               <div className={classes.settingBlock}>
+                  <Select
+                     customClasses={classes.storageSelect}
+                     label="Select Storage to Restore From"
+                     options={[
+                        {
+                           label: primaryStorage!.name + ' (Primary)',
+                           value: 'primary',
+                           image: <img src={`/providers/${primaryStorage.type}.png`} />,
+                        },
+                        ...mirrors.map((m) => ({
+                           label: m.storageName + ' (Mirror)',
+                           value: m.replicationId,
+                           image: <img src={`/providers/${m.storageType}.png`} />,
+                        })),
+                     ]}
+                     fieldValue={settings.replicationId || primaryStorage.id}
+                     full={true}
+                     onUpdate={(value) => updateSettings({ ...settings, replicationId: value === 'primary' ? undefined : value })}
+                  />
+               </div>
+            )}
+
             <div className={classes.settingBlock}>
                <Select
-                  label=""
+                  label="Select where you want to restore the backup"
                   options={[
                      { label: 'Restore to Original Path(s)', value: 'original' },
                      { label: 'Restore to a Custom Path', value: 'custom' },
                   ]}
-                  fieldValue={settings.type || 'sun'}
+                  fieldValue={settings.type || 'original'}
                   onUpdate={(val: string) => updateSettings({ ...settings, type: val as 'original' | 'custom' })}
                   full={true}
                />
@@ -138,9 +163,7 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
                   label="Delete Files that are not in the Snapshot from the Target Restore Path"
                   fieldValue={settings.delete}
                   inline={false}
-                  onUpdate={(val) => {
-                     updateSettings({ ...settings, delete: val });
-                  }}
+                  onUpdate={(val) => updateSettings({ ...settings, delete: val })}
                />
             </div>
          </div>
@@ -156,7 +179,7 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
 
          {showFileManager && (
             <FolderPicker
-               deviceId={'main'}
+               deviceId={deviceId || 'main'}
                title="Choose a Path to Restore"
                footerText="Select a Path where you want to restore your backup"
                selected={settings.path}
@@ -168,4 +191,4 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
    );
 };
 
-export default settingsStep;
+export default RestoreSettingsStep;

package/src/components/Restore/RestoreWizard/RestoreWizard.module.scss

@@ -356,6 +356,7 @@
          padding: 12px;
          cursor: pointer;
          border-bottom: 1px solid var(--line-color);
+         transition: all 0.12s linear;
          h5 {
             font-size: 0.75rem;
             font-weight: 600;
@@ -372,6 +373,9 @@
                color: var(--primary-color);
             }
          }
+         &:hover {
+            background-color: var(--primary-color-light);
+         }
          &:last-child {
             border-bottom: none;
          }

package/src/components/Restore/RestoreWizard/RestoreWizard.tsx

@@ -8,14 +8,18 @@ import RestoreConfirmStep from './RestoreConfirmStep';
 import { RestoredFileItem, RestoredItemsStats, RestoreFileItem, RestoreSettings } from '../../../@types/restores';
 import { useGetSnapshotFiles } from '../../../services/backups';
 import RestoreFileSelectorStep from './RestoreFileSelectorStep';
+import { Backup, Plan } from '../../..';
 
 interface RestoreWizardProps {
    backupId: string;
    planId: string;
+   deviceId: string;
+   planStorage: Plan['storage'];
+   mirrors?: Backup['mirrors'];
    close: () => void;
 }
 
-const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
+const RestoreWizard = ({ backupId, planId, deviceId, mirrors, planStorage, close }: RestoreWizardProps) => {
    const [step, setStep] = useState(1);
    const [restoreSettings, setRestoreSettings] = useState<RestoreSettings>({
       type: 'original',
@@ -24,6 +28,7 @@ const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
       includes: [],
       excludes: [],
       delete: false,
+      storageId: undefined,
    });
    const [restorePreview, setRestorePreview] = useState<{ stats: RestoredItemsStats | null; files: RestoredFileItem[] }>({ stats: null, files: [] });
    const isFetching = useIsFetching();
@@ -82,7 +87,10 @@ const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
             {step === 1 && (
                <RestoreSettingsStep
                   backupId={backupId}
+                  deviceId={deviceId}
                   settings={restoreSettings}
+                  primaryStorage={planStorage}
+                  mirrors={mirrors}
                   updateSettings={(settings) => setRestoreSettings(settings)}
                   goNext={() => setStep(2)}
                   close={close}

package/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -55,7 +55,7 @@ const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
                   { label: 'Light', value: 'light' },
                ]}
                onUpdate={(val: string) => handleThemeChange(val as 'auto' | 'light' | 'dark')}
-               inline={true}
+               inline={false}
             />
          </div>
       </div>

package/src/components/Settings/IntegrationSettings/IntegrationSettings.tsx

@@ -19,12 +19,19 @@ const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSett
 
    const validationMutation = useValidateIntegration();
 
-   console.log('smtp :', smtp);
+   const onIntegrationUpdate = (key: string, intSettings: Record<string, any>) => {
+      console.log('onIntegrationUpdate :', key, intSettings);
+      onUpdate({ ...integrationSettings, [key]: { ...integrationSettings[key], ...intSettings } });
+   };
 
    return (
       <div className={classes.integrations}>
          <div>
-            <SMTPSettings settings={smtp} onUpdate={onUpdate} showTestModal={setShowEmailTestModal} />
+            <SMTPSettings
+               settings={smtp}
+               onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
+               showTestModal={(type) => setShowEmailTestModal(type)}
+            />
          </div>
          {showEmailTestModal && (
             <ActionModal

package/src/components/common/Icon/Icon.tsx

@@ -125,7 +125,16 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                </g>
             </IconWrapper>
          )}
-
+         {type === 'mirrors' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill={color}
+                  d="M21.53 5.15a.99.99 0 0 0-.97-.04l-10 5a1 1 0 0 0-.55.89v10a1 1 0 0 0 1 1c.15 0 .31-.04.45-.11l10-5a1 1 0 0 0 .55-.89V6c0-.35-.18-.67-.47-.85ZM20 15.38l-8 4v-7.76l8-4z"
+               />
+               <path fill={color} d="m16.55 3.11l-10 5A1 1 0 0 0 6 9v10h2V9.62l9.45-4.72l-.89-1.79Z" />
+               <path fill={color} d="m12.55 1.11l-10 5A1 1 0 0 0 2 7v10h2V7.62l9.45-4.73l-.89-1.79Z" />
+            </IconWrapper>
+         )}
          {type === 'devices' && (
             <IconWrapper size={size} viewBox="0 0 24 24">
                <path

package/src/components/common/PageHeader/PageHeader.module.scss

@@ -56,6 +56,9 @@
 }
 
 @media only screen and (max-width: 768px) {
+   .header {
+      max-height: none;
+   }
    .headerTitle {
       font-size: 1rem;
    }

package/src/components/index.ts

@@ -89,6 +89,12 @@ export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSetting
 export { default as PlanStats } from './Plan/PlanStats/PlanStats';
 export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
 
+// Mirror/Replication components
+export { default as MirrorStatusBadge } from './Plan/Mirrors/MirrorStatusBadge';
+export { default as MirrorStorageSelector } from './Plan/Mirrors/MirrorStorageSelector';
+export { default as MirrorStorageSelectorModal } from './Plan/Mirrors/MirrorStorageSelectorModal';
+export { default as PlanReplicationSettings } from './Plan/PlanSettings/PlanReplicationSettings';
+
 // Restore components
 export { default as PlanRestores } from './Plan/Restores/Restores';
 export { default as RestoreChangeViewer } from './Restore/RestoreChangeViewer/RestoreChangeViewer';

package/src/hooks/usePwaAutoUpdate.ts

@@ -1,9 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRegisterSW } from 'virtual:pwa-register/react';
 
+const VERSION_STORAGE_KEY = 'pluton_app_version';
+
 /**
- * This hook handles the PWA auto-update logic in the background.
- * It's completely silent and requires no user interaction.
+ * Handles two PWA update scenarios:
+ *
+ * 1. **Workbox precache update** — When a new frontend build is deployed, Workbox detects
+ *    that the precache manifest changed and sets `needRefresh`. We immediately activate
+ *    the new service worker so the page reloads with fresh assets.
+ *
+ * 2. **Backend version mismatch** — Compares the server's `X-App-Version` header
+ *    (stored on `window.plutonVersion` by `validateAuth`) against the last known version
+ *    in localStorage. On mismatch (e.g. docker/binary upgrade), unregisters all service
+ *    workers, clears all caches, and hard-reloads. This catches cases where the SW update
+ *    check hasn't fired yet (long-lived tabs, cached sw.js, etc.).
  */
 export function usePwaAutoUpdate() {
    const {
@@ -12,22 +23,51 @@ export function usePwaAutoUpdate() {
       updateServiceWorker,
    } = useRegisterSW();
 
+   const versionCheckedRef = useRef(false);
+
+   // Workbox detected a new service worker with updated assets
    useEffect(() => {
-      // This effect triggers when a new service worker is ready to take over.
       if (needRefresh) {
-         // This immediately tells the new service worker to take control,
-         // which will force a hard reload of the page.
          updateServiceWorker(true);
       }
-
-      // This effect triggers when the app's assets are fully cached and ready for offline use.
-      // We won't show a toast, but we'll log it for debugging purposes.
       if (offlineReady) {
          console.log('PWA is ready for offline use.');
-         // Reset the state to prevent this log from firing on every render.
          setOfflineReady(false);
       }
    }, [needRefresh, offlineReady, setOfflineReady, updateServiceWorker]);
 
-   // This hook doesn't need to return anything as it performs its job in the background.
+   // Backend version mismatch check
+   useEffect(() => {
+      if (versionCheckedRef.current) return;
+
+      const serverVersion = (window as any).plutonVersion;
+      if (!serverVersion || serverVersion === 'unknown') return;
+
+      const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
+
+      if (storedVersion && storedVersion !== serverVersion) {
+         versionCheckedRef.current = true;
+         clearCachesAndReload(serverVersion);
+      } else if (!storedVersion) {
+         localStorage.setItem(VERSION_STORAGE_KEY, serverVersion);
+      }
+   });
+}
+
+async function clearCachesAndReload(newVersion: string) {
+   try {
+      if ('serviceWorker' in navigator) {
+         const registrations = await navigator.serviceWorker.getRegistrations();
+         await Promise.all(registrations.map((r) => r.unregister()));
+      }
+      if ('caches' in window) {
+         const cacheNames = await caches.keys();
+         await Promise.all(cacheNames.map((name) => caches.delete(name)));
+      }
+   } catch (e) {
+      console.error('Failed to clear caches:', e);
+   }
+
+   localStorage.setItem(VERSION_STORAGE_KEY, newVersion);
+   window.location.reload();
 }

package/src/router.tsx

@@ -3,7 +3,6 @@ import Plans from './routes/Plans/Plans';
 import Login from './routes/Login/Login';
 import Setup from './routes/Setup/Setup';
 import { useAuth } from './services/users';
-import { useSetupStatus } from './services/settings';
 import App from './components/App/App/App';
 import Settings from './routes/Settings/Settings';
 import Storages from './routes/Storages/Storages';
@@ -14,14 +13,10 @@ import Footer from './components/App/Footer/Footer';
 import NotFoundRoute from './routes/NotFoundRoute/NotFoundRoute';
 import Icon from './components/common/Icon/Icon';
 
-function ProtectedLayout() {
-   // Check setup status FIRST - this endpoint doesn't require auth
-   // and tells us if we're in binary mode and if setup is pending
-   const { data: setupStatus, isLoading: setupLoading } = useSetupStatus();
-   const { data: authData, isError: authError, isLoading: authLoading } = useAuth();
+function PublicRoute({ children }: { children: React.ReactNode }) {
+   const { data: authData, isLoading: authLoading } = useAuth();
 
-   // Show loading spinner while checking setup status
-   if (setupLoading) {
+   if (authLoading) {
       return (
          <div className="loadingScreen">
             <Icon size={60} type="loading" />
@@ -29,16 +24,16 @@ function ProtectedLayout() {
       );
    }
 
-   // If setup status check failed, we can still proceed with auth check
-   // (might be a network issue or old backend without setup endpoint)
-
-   // For binary installations with pending setup, redirect to setup page
-   // This check happens BEFORE auth check so unauthenticated users can access setup
-   if (setupStatus?.data?.isBinary && setupStatus?.data?.setupPending) {
-      return <Navigate to="/setup" replace />;
+   if (authData) {
+      return <Navigate to="/" replace />;
    }
 
-   // Now check auth (setup is either complete or not a binary installation)
+   return <>{children}</>;
+}
+
+function ProtectedLayout() {
+   const { data: authData, isError: authError, isLoading: authLoading } = useAuth();
+
    if (authLoading) {
       return (
          <div className="loadingScreen">
@@ -47,6 +42,13 @@ function ProtectedLayout() {
       );
    }
 
+   // Check setup-pending from auth response headers (set by versionMiddleware on all responses)
+   const installType = (window as any).plutonInstallType;
+   const setupPending = (window as any).plutonSetupPending;
+   if (installType === 'binary' && setupPending) {
+      return <Navigate to="/setup" replace />;
+   }
+
    // If auth failed, redirect to login
    if (authError) {
       return <Navigate to="/login" replace />;
@@ -74,7 +76,14 @@ export function AppRoutes() {
             <Route path={'plan/:id'} element={<PlanSingle />} />
             <Route path="*" element={<NotFoundRoute />} />
          </Route>
-         <Route path="login" element={<Login />} />
+         <Route
+            path="login"
+            element={
+               <PublicRoute>
+                  <Login />
+               </PublicRoute>
+            }
+         />
          <Route path="setup" element={<Setup />} />
       </Routes>
    );

package/src/routes/DeviceSingle/DeviceSingle.tsx

@@ -6,10 +6,9 @@ import { useGetDevice, useGetSystemMetrics } from '../../services/devices';
 import DeviceInfo from '../../components/Device/DeviceInfo/DeviceInfo';
 import EditDevice from '../../components/Device/EditDevice/EditDevice';
 import classes from './DeviceSingle.module.scss';
-// import { compareVersions } from '../../utils/helpers';
 import NotFound from '../../components/common/NotFound/NotFound';
 import DeviceBackups from '../../components/Device/DeviceBackups/DeviceBackups';
-import { DevicePlan } from '../../@types/devices';
+import { DevicePlan, DeviceStorage } from '../../@types/devices';
 
 const DeviceSingle = () => {
    const { id } = useParams();
@@ -27,6 +26,7 @@ const DeviceSingle = () => {
    const device = data?.result?.device;
    const metrics = metricsData?.result && metricsData?.result?.system ? metricsData.result : device?.metrics;
    const devicePlans: DevicePlan[] = data?.result?.plans || [];
+   const deviceStorages: DeviceStorage[] = data?.result?.storages || [];
    const deviceName = device?.name;
    const isPending = device?.status && device?.status === 'pending';
 
@@ -73,7 +73,7 @@ const DeviceSingle = () => {
                </div>
             ) : (
                <>
-                  <DeviceBackups plans={devicePlans} />
+                  <DeviceBackups plans={devicePlans} storages={deviceStorages} />
                   {metrics?.system && <DeviceInfo metrics={metrics} isRefetching={false} />}
                </>
             )}

package/src/services/backups.ts

@@ -5,14 +5,12 @@ import { API_URL } from '../utils/constants';
 const notifiedBackupProgress = new Set<string>();
 
 // Generate Download
-export async function generateBackupDownload({ backupId }: { backupId: string; planId: string }) {
-   // const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
-   const res = await fetch(`${API_URL}/backups/${backupId}/action/download`, {
+export async function generateBackupDownload({ backupId, replicationId }: { backupId: string; planId: string; replicationId?: string }) {
+   const url = `${API_URL}/backups/${backupId}/action/download?${replicationId ? `replicationId=${replicationId}` : ''}`;
+   const res = await fetch(url, {
       method: 'POST',
       credentials: 'include',
-      // headers: header,
    });
-   // Check if response is ok
    const data = await res.json();
    if (!data.success) {
       throw new Error(data.error);
@@ -241,13 +239,12 @@ export function useUpdateBackup() {
 }
 
 // Get Snapshot Files
-export async function getSnapshotFiles({ backupId }: { backupId: string }) {
-   const res = await fetch(`${API_URL}/backups/${backupId}/files`, {
+export async function getSnapshotFiles({ backupId, replicationId }: { backupId: string; replicationId?: string }) {
+   const url = replicationId ? `${API_URL}/backups/${backupId}/files?replicationId=${replicationId}` : `${API_URL}/backups/${backupId}/files`;
+   const res = await fetch(url, {
       method: 'GET',
       credentials: 'include',
-      // headers: header,
    });
-   // Check if response is ok
    const data = await res.json();
    if (!data.success) {
       throw new Error(data.error);
@@ -263,3 +260,29 @@ export function useGetSnapshotFiles(payload: { backupId: string }) {
       retry: false,
    });
 }
+
+// Retry Failed Replications
+export async function retryFailedReplications({ backupId, replicationId }: { backupId: string; planId: string; replicationId: string }) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/backups/${backupId}/action/replication-retry?replicationId=${replicationId}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useRetryFailedReplications() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: retryFailedReplications,
+      onSuccess: (res, payload) => {
+         console.log('res :', payload, res);
+         queryClient.invalidateQueries({ queryKey: ['plan', payload.planId] });
+      },
+   });
+}

package/src/services/plans.ts

@@ -392,3 +392,48 @@ export function useCheckActiveBackupsOrRestore() {
       // refetchOnMount: true,
    });
 }
+
+// Remove Replication Storage
+export async function deleteReplicationStorage({
+   planID,
+   storageID,
+   storagePath,
+   removeData,
+   replicationId,
+}: {
+   planID: string;
+   storageID: string;
+   storagePath: string;
+   removeData: boolean;
+   replicationId?: string;
+}) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/plans/${planID}/action/delete-replication-storage`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify({ storageID, storagePath, removeData, replicationId }),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useDeleteReplicationStorage() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: deleteReplicationStorage,
+      onError: (error: Error) => {
+         console.log('error :', error?.message);
+         toast.error(error.message || `Error removing replication storage.`);
+      },
+      onSuccess: (res, variables) => {
+         console.log('# Replication Storage Removed! :', res, variables);
+         queryClient.invalidateQueries({ queryKey: ['plan', variables.planID] });
+         queryClient.invalidateQueries({ queryKey: ['plans'] });
+         toast.success(res?.message || `Replication storage removed successfully!`, { autoClose: 5000 });
+      },
+   });
+}

package/src/services/restores.ts

@@ -89,6 +89,8 @@ export async function restoreBackup({
    includes,
    excludes,
    deleteOption,
+   storageId,
+   replicationId,
 }: {
    backupId: string;
    planId: string;
@@ -97,13 +99,15 @@ export async function restoreBackup({
    includes?: string[];
    excludes?: string[];
    deleteOption: boolean;
+   storageId?: string;
+   replicationId?: string;
 }) {
    const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
    const res = await fetch(`${API_URL}/restores/action/restore`, {
       method: 'POST',
       credentials: 'include',
       headers: header,
-      body: JSON.stringify({ backupId, planId, target, overwrite, includes, excludes, delete: deleteOption }),
+      body: JSON.stringify({ backupId, planId, target, overwrite, includes, excludes, delete: deleteOption, storageId, replicationId }),
    });
    const data = await res.json();
    if (!data.success) {
@@ -132,6 +136,8 @@ export async function getDryRestoreStats({
    includes,
    excludes,
    deleteOption,
+   storageId,
+   replicationId,
 }: {
    backupId: string;
    planId: string;
@@ -140,13 +146,15 @@ export async function getDryRestoreStats({
    includes?: string[];
    excludes?: string[];
    deleteOption?: boolean;
+   storageId?: string;
+   replicationId?: string;
 }) {
    const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
    const res = await fetch(`${API_URL}/restores/action/dryrestore`, {
       method: 'POST',
       credentials: 'include',
       headers: header,
-      body: JSON.stringify({ backupId, planId, target, overwrite, includes, excludes, delete: deleteOption }),
+      body: JSON.stringify({ backupId, planId, target, overwrite, includes, excludes, delete: deleteOption, storageId, replicationId }),
    });
    const data = await res.json();
    if (!data.success) {

package/src/services/users.ts

@@ -1,5 +1,5 @@
 import { API_URL } from '../utils/constants';
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 
 interface LoginCredentials {
@@ -12,22 +12,28 @@ export type InstallType = 'docker' | 'binary' | 'dev';
 //VALIDATE USER
 export async function validateAuth() {
    const res = await fetch(`${API_URL}/user/validate`, { method: 'GET', credentials: 'include' });
-   if (!res.ok) {
-      throw new Error('Invalid authentication');
-   }
+
+   // Read headers before checking status - middleware sets these on all responses
    const appVersion = res.headers.get('x-app-version');
    const serverOS = res.headers.get('x-server-os');
    const installType = (res.headers.get('x-install-type') || 'dev') as InstallType;
+   const setupPending = res.headers.get('x-setup-pending') === '1';
 
    (window as any).plutonVersion = appVersion || 'unknown';
    (window as any).plutonServerOS = serverOS || 'unknown';
    (window as any).plutonInstallType = installType;
+   (window as any).plutonSetupPending = setupPending;
+
+   if (!res.ok) {
+      throw new Error('Invalid authentication');
+   }
 
    const data = await res.json();
    return {
       ...data,
       appVersion,
       installType,
+      setupPending,
    };
 }
 
@@ -59,10 +65,11 @@ export async function loginUser(credentials: LoginCredentials) {
 // Add this new hook
 export function useLogin() {
    const navigate = useNavigate();
+   const queryClient = useQueryClient();
    return useMutation({
       mutationFn: loginUser,
       onSuccess: (res) => {
-         console.log('res :', res);
+         queryClient.removeQueries({ queryKey: ['auth'] });
          if (res.totpRequired) {
             navigate('/login/verify-otp');
          } else {
@@ -87,9 +94,11 @@ export async function logoutUser() {
 
 export function useLogout() {
    const navigate = useNavigate();
+   const queryClient = useQueryClient();
    return useMutation({
       mutationFn: logoutUser,
       onSuccess: () => {
+         queryClient.removeQueries({ queryKey: ['auth'] });
          navigate('/login');
       },
    });