fix(frontend): restore e2e regressions

autogpt_platform/frontend/src/app/(platform)/build/hooks/useSaveGraph.ts

@@ -3,6 +3,7 @@
 import { useCallback } from "react";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { getGetV2ListLibraryAgentsQueryKey } from "@/app/api/__generated__/endpoints/library/library";
 import {
   useGetV1GetSpecificGraph,
   usePostV1CreateNewGraph,
@@ -20,6 +21,7 @@ import {
   clearTempFlowId,
   getTempFlowId,
 } from "@/services/builder-draft/draft-service";
+import { useQueryClient } from "@tanstack/react-query";
 
 export type SaveGraphOptions = {
   showToast?: boolean;
@@ -33,6 +35,7 @@ export const useSaveGraph = ({
   onError,
 }: SaveGraphOptions) => {
   const { toast } = useToast();
+  const queryClient = useQueryClient();
 
   const [{ flowID, flowVersion }, setQueryStates] = useQueryStates({
     flowID: parseAsString,
@@ -63,6 +66,9 @@ export const useSaveGraph = ({
             flowID: data.id,
             flowVersion: data.version,
           });
+          await queryClient.invalidateQueries({
+            queryKey: getGetV2ListLibraryAgentsQueryKey(),
+          });
 
           const tempFlowId = getTempFlowId();
           if (tempFlowId) {
@@ -100,6 +106,9 @@ export const useSaveGraph = ({
             flowID: data.id,
             flowVersion: data.version,
           });
+          await queryClient.invalidateQueries({
+            queryKey: getGetV2ListLibraryAgentsQueryKey(),
+          });
 
           // Clear the draft for this flow after successful save
           if (data.id) {

autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
 import { okData } from "@/app/api/helpers";
+import { IconAutoGPTLogo } from "@/components/__legacy__/ui/icons";
 import { IconType } from "@/components/__legacy__/ui/icons";
 import { PreviewBanner } from "@/components/layout/Navbar/components/PreviewBanner/PreviewBanner";
 import { isLogoutInProgress } from "@/lib/autogpt-server-api/helpers";
@@ -15,9 +16,10 @@ import { FeedbackButton } from "./components/FeedbackButton";
 import { AgentActivityDropdown } from "./components/AgentActivityDropdown/AgentActivityDropdown";
 import { LoginButton } from "./components/LoginButton";
 import { MobileNavBar } from "./components/MobileNavbar/MobileNavBar";
+import { NavbarLink } from "./components/NavbarLink";
 import { NavbarLoading } from "./components/NavbarLoading";
 import { Wallet } from "./components/Wallet/Wallet";
-import { getAccountMenuItems, loggedInLinks } from "./helpers";
+import { getAccountMenuItems, loggedInLinks, loggedOutLinks } from "./helpers";
 
 export function Navbar() {
   const { user, isLoggedIn, isUserLoading } = useSupabase();
@@ -45,7 +47,7 @@ export function Navbar() {
 
   const homeHref = isChatEnabled === true ? "/copilot" : "/library";
 
-  const mobileNavLinks = [
+  const actualLoggedInLinks = [
     { name: "Home", href: homeHref },
     ...(isChatEnabled === true ? [{ name: "Agents", href: "/library" }] : []),
     ...loggedInLinks,
@@ -65,7 +67,29 @@ export function Navbar() {
           className="inline-flex w-full items-center border-b border-zinc-100 bg-[#FAFAFA]/80 p-3 backdrop-blur-xl"
           style={{ height: NAVBAR_HEIGHT_PX }}
         >
-          <div className="flex-1" />
+          {!isSmallScreen ? (
+            <div className="flex flex-1 items-center gap-5">
+              {isLoggedIn
+                ? actualLoggedInLinks.map((link) => (
+                    <NavbarLink
+                      key={link.name}
+                      name={link.name}
+                      href={link.href}
+                    />
+                  ))
+                : loggedOutLinks.map((link) => (
+                    <NavbarLink
+                      key={link.name}
+                      name={link.name}
+                      href={link.href}
+                    />
+                  ))}
+            </div>
+          ) : null}
+
+          <div className="static h-auto w-[4.5rem] md:absolute md:left-1/2 md:top-1/2 md:w-[5.5rem] md:-translate-x-1/2 md:-translate-y-1/2">
+            <IconAutoGPTLogo className="h-full w-full" />
+          </div>
 
           {/* Right section */}
           {isLoggedIn && !isSmallScreen ? (
@@ -101,7 +125,7 @@ export function Navbar() {
               menuItemGroups={[
                 {
                   groupName: "Navigation",
-                  items: mobileNavLinks
+                  items: actualLoggedInLinks
                     .map((link) => {
                       return {
                         icon:

autogpt_platform/frontend/src/tests/pages/library.page.ts

@@ -16,6 +16,42 @@ export class LibraryPage extends BasePage {
     super(page);
   }
 
+  private async scrollLibraryContainer(
+    position: "bottom" | "page",
+  ): Promise<void> {
+    const { getId } = getSelectors(this.page);
+    const lastAgentCard = getId("library-agent-card").last();
+
+    await lastAgentCard.scrollIntoViewIfNeeded();
+    await lastAgentCard.evaluate((node, targetPosition) => {
+      let currentElement: HTMLElement | null = node.parentElement;
+
+      while (currentElement) {
+        const style = window.getComputedStyle(currentElement);
+        const canScrollVertically =
+          /(auto|scroll)/.test(style.overflowY) &&
+          currentElement.scrollHeight > currentElement.clientHeight;
+
+        if (canScrollVertically) {
+          if (targetPosition === "bottom") {
+            currentElement.scrollTop = currentElement.scrollHeight;
+          } else {
+            currentElement.scrollTop += currentElement.clientHeight;
+          }
+          return;
+        }
+
+        currentElement = currentElement.parentElement;
+      }
+
+      if (targetPosition === "bottom") {
+        window.scrollTo(0, document.body.scrollHeight);
+      } else {
+        window.scrollBy(0, window.innerHeight);
+      }
+    }, position);
+  }
+
   async isLoaded(): Promise<boolean> {
     console.log(`checking if library page is loaded`);
     try {
@@ -276,13 +312,13 @@ export class LibraryPage extends BasePage {
 
   async scrollToBottom(): Promise<void> {
     console.log(`scrolling to bottom to trigger pagination`);
-    await this.page.keyboard.press("End");
+    await this.scrollLibraryContainer("bottom");
     await this.page.waitForTimeout(1000);
   }
 
   async scrollDown(): Promise<void> {
     console.log(`scrolling down to trigger pagination`);
-    await this.page.keyboard.press("PageDown");
+    await this.scrollLibraryContainer("page");
     await this.page.waitForTimeout(1000);
   }