feat(frontend): Page-specific titles (#9995)

- Resolves #8656

Instead of "NextGen AutoGPT", make page titles like "My Test Agent -
Library - AutoGPT Platform", "Settings - AutoGPT Platform", "Builder -
AutoGPT Platform".

### Changes 🏗️

- Add specific page titles to `/library`, `/library/agents/[id]`,
`/build`, `/profile`, `/profile/api_keys`
- Fix page titles on `/marketplace`, `/profile/settings`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Go to `/marketplace` and check the page title
  - [x] Go to `/library` and check the page title
  - [x] Go to `/library/agents/[id]` and check the page title
  - [x] Go to `/build` and check the page title
  - [x] Go to `/profile` and check the page title
  - [x] Go to `/profile/settings` and check the page title
  - [x] Go to `/profile/api_keys` and check the page title
  - [ ] ~~Go to `/profile/dashboard` and check the page title~~
  - [ ] ~~Go to `/profile/integrations` and check the page title~~
  - [ ] ~~Go to `/profile/credits` and check the page title~~

autogpt_platform/autogpt_libs/README.md

@@ -1,3 +1,3 @@
 # AutoGPT Libs
 
-This is a new project to store shared functionality across different services in NextGen AutoGPT (e.g. authentication)
+This is a new project to store shared functionality across different services in the AutoGPT Platform (e.g. authentication)

autogpt_platform/frontend/src/app/(platform)/build/page.tsx

@@ -6,7 +6,7 @@ import FlowEditor from "@/components/Flow";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
 import { useEffect } from "react";
 
-export default function Home() {
+export default function BuilderPage() {
   const query = useSearchParams();
   const { completeStep } = useOnboarding();
 

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/page.tsx

@@ -72,6 +72,13 @@ export default function AgentRunsPage(): React.ReactElement {
     useOnboarding();
   const [copyAgentDialogOpen, setCopyAgentDialogOpen] = useState(false);
 
+  // Set page title with agent name
+  useEffect(() => {
+    if (agent) {
+      document.title = `${agent.name} - Library - AutoGPT Platform`;
+    }
+  }, [agent]);
+
   const openRunDraftView = useCallback(() => {
     selectView({ type: "run" });
   }, []);

autogpt_platform/frontend/src/app/(platform)/library/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { Metadata } from "next/types";
 
 import {
   ArrowBottomRightIcon,
@@ -11,11 +12,15 @@ import LibraryActionSubHeader from "@/components/library/library-action-sub-head
 import LibraryActionHeader from "@/components/library/library-action-header";
 import LibraryAgentList from "@/components/library/library-agent-list";
 
+export const metadata: Metadata = {
+  title: "Library - AutoGPT Platform",
+  description: "Your collection of Agents on the AutoGPT Platform",
+};
+
 /**
  * LibraryPage Component
  * Main component that manages the library interface including agent listing and actions
  */
-
 export default function LibraryPage() {
   return (
     <main className="container min-h-screen space-y-4 pb-20 sm:px-8 md:px-12">

autogpt_platform/frontend/src/app/(platform)/marketplace/page.tsx

@@ -102,9 +102,9 @@ async function getStoreData() {
 
 // FIX: Correct metadata
 export const metadata: Metadata = {
-  title: "Marketplace - NextGen AutoGPT",
+  title: "Marketplace - AutoGPT Platform",
   description: "Find and use AI Agents created by our community",
-  applicationName: "NextGen AutoGPT Store",
+  applicationName: "AutoGPT Marketplace",
   authors: [{ name: "AutoGPT Team" }],
   keywords: [
     "AI agents",
@@ -118,22 +118,22 @@ export const metadata: Metadata = {
     follow: true,
   },
   openGraph: {
-    title: "Marketplace - NextGen AutoGPT",
+    title: "Marketplace - AutoGPT Platform",
     description: "Find and use AI Agents created by our community",
     type: "website",
-    siteName: "NextGen AutoGPT Store",
+    siteName: "AutoGPT Marketplace",
     images: [
       {
         url: "/images/store-og.png",
         width: 1200,
         height: 630,
-        alt: "NextGen AutoGPT Store",
+        alt: "AutoGPT Marketplace",
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "Marketplace - NextGen AutoGPT",
+    title: "Marketplace - AutoGPT Platform",
     description: "Find and use AI Agents created by our community",
     images: ["/images/store-twitter.png"],
   },

autogpt_platform/frontend/src/app/(platform)/profile/(user)/api_keys/page.tsx

@@ -1,5 +1,8 @@
+import { Metadata } from "next/types";
 import { APIKeysSection } from "@/components/agptui/composite/APIKeySection";
 
+export const metadata: Metadata = { title: "API Keys - AutoGPT Platform" };
+
 const ApiKeysPage = () => {
   return (
     <div className="w-full pr-4 pt-24 md:pt-0">

autogpt_platform/frontend/src/app/(platform)/profile/(user)/credits/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import useCredits from "@/hooks/useCredits";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";

autogpt_platform/frontend/src/app/(platform)/profile/(user)/page.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Metadata } from "next/types";
 import { ProfileInfoForm } from "@/components/agptui/ProfileInfoForm";
 import BackendAPI from "@/lib/autogpt-server-api";
 import { CreatorDetails } from "@/lib/autogpt-server-api/types";
@@ -17,6 +18,8 @@ async function getProfileData(api: BackendAPI) {
   }
 }
 
+export const metadata: Metadata = { title: "Profile - AutoGPT Platform" };
+
 export default async function Page({}: {}) {
   const api = new BackendAPI();
   const { profile } = await getProfileData(api);

autogpt_platform/frontend/src/app/(platform)/profile/(user)/settings/page.tsx

@@ -4,8 +4,9 @@ import SettingsForm from "@/components/profile/settings/SettingsForm";
 import getServerUser from "@/lib/supabase/getServerUser";
 import { redirect } from "next/navigation";
 import { getUserPreferences } from "./actions";
+
 export const metadata: Metadata = {
-  title: "Settings",
+  title: "Settings - AutoGPT Platform",
   description: "Manage your account settings and preferences.",
 };
 

autogpt_platform/frontend/src/app/layout.tsx

@@ -18,7 +18,7 @@ const poppins = Poppins({
 });
 
 export const metadata: Metadata = {
-  title: "NextGen AutoGPT",
+  title: "AutoGPT Platform",
   description: "Your one stop shop to creating AI Agents",
 };
 

autogpt_platform/frontend/src/components/Flow.tsx

@@ -149,6 +149,13 @@ const FlowEditor: React.FC<{
   // It stores the dimension of all nodes with position as well
   const [nodeDimensions, setNodeDimensions] = useState<NodeDimension>({});
 
+  // Set page title with or without graph name
+  useEffect(() => {
+    document.title = savedAgent
+      ? `${savedAgent.name} - Builder - AutoGPT Platform`
+      : `Builder - AutoGPT Platform`;
+  }, [savedAgent]);
+
   useEffect(() => {
     if (params.get("resetTutorial") === "true") {
       localStorage.removeItem(TUTORIAL_STORAGE_KEY);

autogpt_platform/frontend/src/tests/title.spec.ts

@@ -4,5 +4,5 @@ test("has title", async ({ page }) => {
   await page.goto("/");
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/NextGen AutoGPT/);
+  await expect(page).toHaveTitle(/AutoGPT Platform/);
 });