final

frontend/src/layout/AppLayout.tsx

@@ -5,7 +5,6 @@ import AppHeader from "./AppHeader";
 import Backdrop from "./Backdrop";
 import AppSidebar from "./AppSidebar";
 import { useSiteStore } from "../store/siteStore";
-import { useSectorStore } from "../store/sectorStore";
 import { useAuthStore } from "../store/authStore";
 import { useBillingStore } from "../store/billingStore";
 import { useHeaderMetrics } from "../context/HeaderMetricsContext";
@@ -16,15 +15,12 @@ import ResourceDebugOverlay from "../components/debug/ResourceDebugOverlay";
 const LayoutContent: React.FC = () => {
   const { isExpanded, isHovered, isMobileOpen } = useSidebar();
   const { loadActiveSite, activeSite } = useSiteStore();
-  const { loadSectorsForSite } = useSectorStore();
   const { refreshUser, isAuthenticated } = useAuthStore();
   const { balance, loadBalance } = useBillingStore();
   const { setMetrics } = useHeaderMetrics();
   const { addError } = useErrorHandler('AppLayout');
   const hasLoadedSite = useRef(false);
-  const lastSiteId = useRef<number | null>(null);
   const isLoadingSite = useRef(false);
-  const isLoadingSector = useRef(false);
   const [debugEnabled, setDebugEnabled] = useState(false);
   const lastUserRefresh = useRef<number>(0);
 
@@ -86,51 +82,10 @@ const LayoutContent: React.FC = () => {
     checkTokenAndLoad();
   }, [isAuthenticated]); // Run when authentication state changes
 
-  // Load sectors when active site changes (by ID, not object reference)
-  useEffect(() => {
-    const currentSiteId = activeSite?.id ?? null;
-    
-    // Only load if:
-    // 1. We have a site ID
-    // 2. The site is active (inactive sites can't have accessible sectors)
-    // 3. It's different from the last one we loaded
-    // 4. We're not already loading
-    if (currentSiteId && activeSite?.is_active && currentSiteId !== lastSiteId.current && !isLoadingSector.current) {
-      lastSiteId.current = currentSiteId;
-      isLoadingSector.current = true;
-      trackLoading('sector-loading', true);
-      
-      // Add timeout to prevent infinite loading
-      // Match API timeout (30s) + buffer for network delays
-      const timeoutId = setTimeout(() => {
-        if (isLoadingSector.current) {
-          console.error('AppLayout: Sector loading timeout after 35 seconds');
-          trackLoading('sector-loading', false);
-          isLoadingSector.current = false;
-          addError(new Error('Sector loading timeout - check network connection'), 'AppLayout.loadSectorsForSite');
-        }
-      }, 35000); // 35 seconds to match API timeout (30s) + buffer
-      
-      loadSectorsForSite(currentSiteId)
-        .catch((error) => {
-          // Don't log 403/404 errors as they're expected for inactive sites
-          if (error.status !== 403 && error.status !== 404) {
-            console.error('AppLayout: Error loading sectors:', error);
-            addError(error, 'AppLayout.loadSectorsForSite');
-          }
-        })
-        .finally(() => {
-          clearTimeout(timeoutId);
-          trackLoading('sector-loading', false);
-          isLoadingSector.current = false;
-        });
-    } else if (currentSiteId && !activeSite?.is_active) {
-      // Site is inactive - clear sectors and reset lastSiteId
-      lastSiteId.current = null;
-      const { useSectorStore } = require('../store/sectorStore');
-      useSectorStore.getState().clearActiveSector();
-    }
-  }, [activeSite?.id, activeSite?.is_active]); // Depend on both ID and is_active
+  // Sector loading moved to PageHeader component
+  // This ensures sectors are only loaded when content pages (Planner/Writer/Optimizer) mount
+  // Account/billing pages don't use PageHeader with site/sector selector, so they won't trigger sector loading
+  // This prevents unnecessary 404 errors on /account/plans and similar routes
 
   // Refresh user data on mount and when app version changes (after code updates)
   // This ensures changes are reflected immediately without requiring re-login