ui frotneedn fixes

frontend/src/layout/AppHeader.tsx

@@ -7,25 +7,6 @@ import NotificationDropdown from "../components/header/NotificationDropdown";
 import UserDropdown from "../components/header/UserDropdown";
 import { HeaderMetrics } from "../components/header/HeaderMetrics";
 import ResourceDebugToggle from "../components/debug/ResourceDebugToggle";
-import { useOnboardingStore } from "../store/onboardingStore";
-import Button from "../components/ui/button/Button";
-import { BoltIcon } from "../icons";
-
-const ShowGuideButton: React.FC = () => {
-  const { toggleGuide, isGuideVisible } = useOnboardingStore();
-  
-  return (
-    <Button
-      variant="primary"
-      size="sm"
-      onClick={toggleGuide}
-      className="bg-orange-500 hover:bg-orange-600 text-white border-orange-500 hover:border-orange-600"
-    >
-      <BoltIcon className="w-4 h-4 mr-2" />
-      {isGuideVisible ? 'Hide Guide' : 'Show Guide'}
-    </Button>
-  );
-};
 
 const AppHeader: React.FC = () => {
   const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
@@ -180,8 +161,6 @@ const AppHeader: React.FC = () => {
           <div className="flex items-center gap-2 2xsm:gap-3">
             {/* <!-- Header Metrics (conditional) --> */}
             <HeaderMetrics />
-            {/* <!-- Show Guide Button (Orange) --> */}
-            <ShowGuideButton />
             {/* <!-- Dark Mode Toggler --> */}
             <ThemeToggleButton />
             {/* <!-- Resource Debug Toggle (Admin only) --> */}

frontend/src/layout/AppLayout.tsx

@@ -194,13 +194,29 @@ const LayoutContent: React.FC = () => {
       refreshUserData();
     };
     
-    // Periodic refresh every 2 minutes
+    // Proactive token refresh - refresh token every 12 minutes (before 15-minute expiry)
+    // This prevents 401 errors and ensures seamless user experience
+    const tokenRefreshInterval = setInterval(async () => {
+      const authState = useAuthStore.getState();
+      const refreshToken = authState?.refreshToken;
+      if (refreshToken && authState?.isAuthenticated) {
+        try {
+          await authState.refreshToken();
+          console.debug('Token proactively refreshed');
+        } catch (error) {
+          console.debug('Proactive token refresh failed (will retry on next API call):', error);
+        }
+      }
+    }, 720000); // 12 minutes = 720000ms
+    
+    // Periodic user data refresh every 2 minutes
     const intervalId = setInterval(() => refreshUserData(), 120000);
     
     document.addEventListener('visibilitychange', handleVisibilityChange);
     window.addEventListener('focus', handleFocus);
     
     return () => {
+      clearInterval(tokenRefreshInterval);
       clearInterval(intervalId);
       document.removeEventListener('visibilitychange', handleVisibilityChange);
       window.removeEventListener('focus', handleFocus);