feat(frontend): fix tab titles (#11432)

## Changes 🏗️

Add some missing page titles, most importantly the missing one the new
runs page.

## 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] Run the app
  - [x] Page titles are there

Author: 0ubbe

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
 import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
+import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
 // import LoadingBox from "@/components/__legacy__/ui/loading";
 import { GraphID } from "@/lib/autogpt-server-api/types";
+import { ReactFlowProvider } from "@xyflow/react";
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import { Flow } from "./components/FlowEditor/Flow/Flow";
 import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
 import { useBuilderView } from "./components/BuilderViewTabs/useBuilderViewTabs";
-import { ReactFlowProvider } from "@xyflow/react";
+import { Flow } from "./components/FlowEditor/Flow/Flow";
 
 function BuilderContent() {
   const query = useSearchParams();

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

@@ -1,16 +1,17 @@
 "use client";
 
+import { Button } from "@/components/atoms/Button/Button";
 import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { useAgentRunsView } from "./useAgentRunsView";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useEffect } from "react";
 import { AgentRunsLoading } from "./components/AgentRunsLoading";
+import { EmptyAgentRuns } from "./components/EmptyAgentRuns/EmptyAgentRuns";
+import { RunAgentModal } from "./components/RunAgentModal/RunAgentModal";
 import { RunsSidebar } from "./components/RunsSidebar/RunsSidebar";
 import { SelectedRunView } from "./components/SelectedRunView/SelectedRunView";
 import { SelectedScheduleView } from "./components/SelectedScheduleView/SelectedScheduleView";
-import { EmptyAgentRuns } from "./components/EmptyAgentRuns/EmptyAgentRuns";
-import { Button } from "@/components/atoms/Button/Button";
-import { RunAgentModal } from "./components/RunAgentModal/RunAgentModal";
-import { PlusIcon } from "@phosphor-icons/react";
+import { useAgentRunsView } from "./useAgentRunsView";
 
 export function AgentRunsView() {
   const {
@@ -26,6 +27,12 @@ export function AgentRunsView() {
     handleClearSelectedRun,
   } = useAgentRunsView();
 
+  useEffect(() => {
+    if (agent) {
+      document.title = `${agent.name} - Library - AutoGPT Platform`;
+    }
+  }, [agent]);
+
   if (error) {
     return (
       <ErrorCard

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

@@ -1,22 +1,16 @@
 "use client";
 
-import { environment } from "@/services/environment";
 import { useEffect } from "react";
 import FavoritesSection from "./components/FavoritesSection/FavoritesSection";
 import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
 import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
 import { LibraryPageStateProvider } from "./components/state-provider";
 
-/**
- * LibraryPage Component
- * Main component that manages the library interface including agent listing and actions
- */
 export default function LibraryPage() {
   useEffect(() => {
-    const appEnv = environment.getAppEnv();
-    console.log("branch", process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV);
-    console.log("appEnv", appEnv);
+    document.title = "Library – AutoGPT Platform";
   }, []);
+
   return (
     <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
       <LibraryPageStateProvider>

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

@@ -1,7 +1,12 @@
 "use client";
 
+import { useEffect } from "react";
 import { MainDashboardPage } from "./components/MainDashboardPage/MainDashboardPage";
 
 export default function Page() {
+  useEffect(() => {
+    document.title = "Creator Dashboard – AutoGPT Platform";
+  }, []);
+
   return <MainDashboardPage />;
 }

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

@@ -1,13 +1,7 @@
 "use client";
-import { Button } from "@/components/atoms/Button/Button";
-import { useRouter } from "next/navigation";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { IconKey, IconUser } from "@/components/__legacy__/ui/icons";
-import { Trash2Icon } from "lucide-react";
-import { KeyIcon } from "@phosphor-icons/react/dist/ssr";
 import { providerIcons } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
-import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
+import { IconKey, IconUser } from "@/components/__legacy__/ui/icons";
+import LoadingBox from "@/components/__legacy__/ui/loading";
 import {
   Table,
   TableBody,
@@ -16,17 +10,27 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/__legacy__/ui/table";
-import { CredentialsProviderName } from "@/lib/autogpt-server-api";
+import { Button } from "@/components/atoms/Button/Button";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { CredentialsProviderName } from "@/lib/autogpt-server-api";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import LoadingBox from "@/components/__legacy__/ui/loading";
+import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
+import { KeyIcon } from "@phosphor-icons/react/dist/ssr";
+import { Trash2Icon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 export default function UserIntegrationsPage() {
   const { supabase, user, isUserLoading } = useSupabase();
   const router = useRouter();
   const providers = useContext(CredentialsProvidersContext);
   const { toast } = useToast();
 
+  useEffect(() => {
+    document.title = "Integrations – AutoGPT Platform";
+  }, []);
+
   const [confirmationDialogState, setConfirmationDialogState] = useState<
     | {
         open: true;

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

@@ -1,15 +1,15 @@
 "use client";
+import { SettingsForm } from "@/app/(platform)/profile/(user)/settings/components/SettingsForm/SettingsForm";
+import { useTimezoneDetection } from "@/app/(platform)/profile/(user)/settings/useTimezoneDetection";
 import {
   useGetV1GetNotificationPreferences,
   useGetV1GetUserTimezone,
 } from "@/app/api/__generated__/endpoints/auth/auth";
-import { SettingsForm } from "@/app/(platform)/profile/(user)/settings/components/SettingsForm/SettingsForm";
+import { Text } from "@/components/atoms/Text/Text";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useTimezoneDetection } from "@/app/(platform)/profile/(user)/settings/useTimezoneDetection";
-import * as React from "react";
-import SettingsLoading from "./loading";
 import { redirect } from "next/navigation";
-import { Text } from "@/components/atoms/Text/Text";
+import { useEffect } from "react";
+import SettingsLoading from "./loading";
 
 export default function SettingsPage() {
   const {
@@ -33,6 +33,10 @@ export default function SettingsPage() {
 
   const { user, isUserLoading } = useSupabase();
 
+  useEffect(() => {
+    document.title = "Settings – AutoGPT Platform";
+  }, []);
+
   if (preferencesLoading || isUserLoading || timezoneLoading) {
     return <SettingsLoading />;
   }