refactor(frontend): tidy up on components folder (#10940)

## Changes 🏗️

Re-organise the `components` folder, moving things which are not re-used
across screens or part of the design system out of it.

## 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 locally
  - [x] It works and test/types pass CI wise 

### For configuration changes:

None

autogpt_platform/frontend/src/app/(platform)/admin/marketplace/components/AdminAgentsDataTable.tsx

@@ -10,10 +10,10 @@ import {
   StoreSubmission,
   SubmissionStatus,
 } from "@/lib/autogpt-server-api/types";
-import { PaginationControls } from "../../ui/pagination-controls";
+import { PaginationControls } from "../../../../../components/ui/pagination-controls";
 import { getAdminListingsWithVersions } from "@/app/(platform)/admin/marketplace/actions";
-import { ExpandableRow } from "./expandable-row";
-import { SearchAndFilterAdminMarketplace } from "./search-filter-form";
+import { ExpandableRow } from "./ExpandleRow";
+import { SearchAndFilterAdminMarketplace } from "./SearchFilterForm";
 
 // Helper function to get the latest version by version number
 const getLatestVersionByNumber = (

autogpt_platform/frontend/src/app/(platform)/admin/marketplace/components/ExpandleRow.tsx

@@ -17,8 +17,8 @@ import {
   type StoreSubmission,
   SubmissionStatus,
 } from "@/lib/autogpt-server-api/types";
-import { ApproveRejectButtons } from "./approve-reject-buttons";
-import { DownloadAgentAdminButton } from "./download-agent-button";
+import { ApproveRejectButtons } from "./ApproveRejectButton";
+import { DownloadAgentAdminButton } from "./DownloadAgentButton";
 
 // Moved the getStatusBadge function into the client component
 const getStatusBadge = (status: SubmissionStatus) => {

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

@@ -1,7 +1,7 @@
 import { withRoleAccess } from "@/lib/withRoleAccess";
 import { Suspense } from "react";
 import type { SubmissionStatus } from "@/lib/autogpt-server-api/types";
-import { AdminAgentsDataTable } from "@/components/admin/marketplace/admin-agents-data-table";
+import { AdminAgentsDataTable } from "./components/AdminAgentsDataTable";
 
 type MarketplaceAdminPageSearchParams = {
   page?: string;

autogpt_platform/frontend/src/app/(platform)/admin/spending/components/AdminUserGrantHistory.tsx

@@ -7,10 +7,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { PaginationControls } from "../../ui/pagination-controls";
-import { SearchAndFilterAdminSpending } from "./search-filter-form";
+import { PaginationControls } from "../../../../../components/ui/pagination-controls";
+import { SearchAndFilterAdminSpending } from "./SearchAndFilterAdminSpending";
 import { getUsersTransactionHistory } from "@/app/(platform)/admin/spending/actions";
-import { AdminAddMoneyButton } from "./add-money-button";
+import { AdminAddMoneyButton } from "./AddMoneyButton";
 import { CreditTransactionType } from "@/lib/autogpt-server-api";
 
 export async function AdminUserGrantHistory({

autogpt_platform/frontend/src/app/(platform)/admin/spending/page.tsx

@@ -1,7 +1,7 @@
-import { AdminUserGrantHistory } from "@/components/admin/spending/admin-grant-history-data-table";
 import type { CreditTransactionType } from "@/lib/autogpt-server-api";
 import { withRoleAccess } from "@/lib/withRoleAccess";
 import { Suspense } from "react";
+import { AdminUserGrantHistory } from "./components/AdminUserGrantHistory";
 
 type SpendingDashboardPageSearchParams = {
   page?: string;

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

@@ -3,7 +3,7 @@
 import React from "react";
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
-import { toDisplayName } from "@/components/integrations/helper";
+import { toDisplayName } from "@/services/agent-credentials/helper";
 import {
   getAgentCredentialsFields,
   getAgentInputFields,

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

@@ -6,7 +6,7 @@ import { useRunAgentModalContext } from "../../context";
 import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
 import { InfoIcon } from "@phosphor-icons/react";
 import { Text } from "@/components/atoms/Text/Text";
-import { toDisplayName } from "@/components/integrations/helper";
+import { toDisplayName } from "@/services/agent-credentials/helper";
 import { getCredentialTypeDisplayName } from "./helpers";
 
 export function ModalRunSection() {

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowInfo.tsx

@@ -24,7 +24,6 @@ import {
 } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { exportAsJSONFile } from "@/lib/utils";
-import { FlowRunsStats } from "@/components/monitor/index";
 import {
   Dialog,
   DialogContent,
@@ -36,6 +35,7 @@ import {
 import useAgentGraph from "@/hooks/useAgentGraph";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { RunnerInputDialog } from "@/components/runner-ui/RunnerInputUI";
+import { FlowRunsStatus } from "./FlowRunsStatus";
 
 export const FlowInfo: React.FC<
   React.HTMLAttributes<HTMLDivElement> & {
@@ -184,7 +184,7 @@ export const FlowInfo: React.FC<
         </div>
       </CardHeader>
       <CardContent>
-        <FlowRunsStats
+        <FlowRunsStatus
           flows={[flow]}
           executions={executions.filter(
             (execution) =>

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx

@@ -6,8 +6,10 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { IconSquare } from "@/components/ui/icons";
 import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import moment from "moment/moment";
-import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
-import RunnerOutputUI, { OutputNodeInfo } from "../runner-ui/RunnerOutputUI";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+import RunnerOutputUI, {
+  OutputNodeInfo,
+} from "../../../../components/runner-ui/RunnerOutputUI";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 
 export const FlowRunInfo: React.FC<

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx

@@ -10,8 +10,8 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import moment from "moment/moment";
-import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
-import { TextRenderer } from "../ui/render";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+import { TextRenderer } from "../../../../components/ui/render";
 
 export const FlowRunsList: React.FC<{
   flows: LibraryAgent[];

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsStatus.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Calendar } from "@/components/ui/calendar";
-import { FlowRunsTimeline } from "@/components/monitor/FlowRunsTimeline";
+import { FlowRunsTimeline } from "@/app/(platform)/monitoring/components/FlowRunsTimeline";
 
 export const FlowRunsStatus: React.FC<{
   flows: LibraryAgent[];

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx

@@ -14,7 +14,7 @@ import moment from "moment/moment";
 import { Card } from "@/components/ui/card";
 import { cn, hashString } from "@/lib/utils";
 import React from "react";
-import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
 
 export const FlowRunsTimeline = ({
   flows,

autogpt_platform/frontend/src/app/(platform)/monitoring/components/SchedulesTable.tsx

@@ -35,9 +35,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { TextRenderer } from "../ui/render";
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
+import { TextRenderer } from "../../../../components/ui/render";
+import { Input } from "../../../../components/ui/input";
+import { Label } from "../../../../components/ui/label";
 
 interface SchedulesTableProps {
   schedules: GraphExecutionJobInfo[];

autogpt_platform/frontend/src/app/(platform)/monitoring/loading.tsx

@@ -1,7 +1,7 @@
-import AgentFlowListSkeleton from "@/components/monitor/skeletons/AgentFlowListSkeleton";
+import AgentFlowListSkeleton from "@/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton";
 import React from "react";
-import FlowRunsListSkeleton from "@/components/monitor/skeletons/FlowRunsListSkeleton";
-import FlowRunsStatusSkeleton from "@/components/monitor/skeletons/FlowRunsStatusSkeleton";
+import FlowRunsListSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton";
+import FlowRunsStatusSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton";
 
 export default function MonitorLoadingSkeleton() {
   return (

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

@@ -9,15 +9,13 @@ import {
 } from "@/app/api/__generated__/endpoints/schedules/schedules";
 
 import { Card } from "@/components/ui/card";
-import {
-  AgentFlowList,
-  FlowInfo,
-  FlowRunInfo,
-  FlowRunsList,
-  FlowRunsStats,
-} from "@/components/monitor";
-import { SchedulesTable } from "@/components/monitor/scheduleTable";
+import { SchedulesTable } from "@/app/(platform)/monitoring/components/SchedulesTable";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import AgentFlowList from "./components/AgentFlowList";
+import FlowRunsList from "./components/FlowRunsList";
+import FlowRunInfo from "./components/FlowRunInfo";
+import FlowInfo from "./components/FlowInfo";
+import FlowRunsStatus from "./components/FlowRunsStatus";
 
 const Monitor = () => {
   const [flows, setFlows] = useState<LibraryAgent[]>([]);
@@ -129,7 +127,7 @@ const Monitor = () => {
           />
         )) || (
           <Card className={`p-6 ${column3}`}>
-            <FlowRunsStats flows={flows} executions={executions} />
+            <FlowRunsStatus flows={flows} executions={executions} />
           </Card>
         )}
       <div className="col-span-full xl:col-span-6">

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

@@ -7,7 +7,7 @@ import { IconKey, IconUser } from "@/components/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 "@/components/integrations/credentials-provider";
+import { CredentialsProvidersContext } from "@/services/agent-credentials/credentials-provider";
 import {
   Table,
   TableBody,

autogpt_platform/frontend/src/app/layout.tsx

@@ -6,7 +6,7 @@ import "./globals.css";
 
 import { Providers } from "@/app/providers";
 import TallyPopupSimple from "@/components/TallyPopup";
-import { GoogleAnalytics } from "@/components/analytics/google-analytics";
+import { GoogleAnalytics } from "@/services/analytics/google-analytics";
 import { Toaster } from "@/components/molecules/Toast/toaster";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SpeedInsights } from "@vercel/speed-insights/next";

autogpt_platform/frontend/src/app/providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { LaunchDarklyProvider } from "@/services/feature-flags/feature-flag-provider";
-import CredentialsProvider from "@/components/integrations/credentials-provider";
+import CredentialsProvider from "@/services/agent-credentials/credentials-provider";
 import OnboardingProvider from "@/components/onboarding/onboarding-provider";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { BackendAPIProvider } from "@/lib/autogpt-server-api/context";

autogpt_platform/frontend/src/components/marketplace/AgentDetailContent.tsx

@@ -1,96 +0,0 @@
-// "use client";
-// import Link from "next/link";
-// import { ArrowLeft, Download, Calendar, Tag } from "lucide-react";
-// import { Button } from "@/components/ui/button";
-// import BackendAPI, { GraphCreatable } from "@/lib/autogpt-server-api";
-// import "@xyflow/react/dist/style.css";
-// import { useToast } from "../ui/use-toast";
-
-// function AgentDetailContent({ agent }: { agent: GraphCreatable }) {
-//   const { toast } = useToast();
-
-//   // const downloadAgent = async (id: string): Promise<void> => {
-//   //   const api = new MarketplaceAPI();
-//   //   try {
-//   //     const file = await api.downloadAgentFile(id);
-//   //     console.debug(`Agent file downloaded:`, file);
-
-//   //     // Create a Blob from the file content
-//   //     const blob = new Blob([file], { type: "application/json" });
-
-//   //     // Create a temporary URL for the Blob
-//   //     const url = window.URL.createObjectURL(blob);
-
-//   //     // Create a temporary anchor element
-//   //     const a = document.createElement("a");
-//   //     a.href = url;
-//   //     a.download = `agent_${id}.json`; // Set the filename
-
-//   //     // Append the anchor to the body, click it, and remove it
-//   //     document.body.appendChild(a);
-//   //     a.click();
-//   //     document.body.removeChild(a);
-
-//   //     // Revoke the temporary URL
-//   //     window.URL.revokeObjectURL(url);
-//   //   } catch (error) {
-//   //     console.error(`Error downloading agent:`, error);
-//   //     throw error;
-//   //   }
-//   // };
-
-//   return (
-//     <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
-//       <div className="mb-4 flex items-center justify-between">
-//         <Link
-//           href="/marketplace"
-//           className="inline-flex items-center text-indigo-600 hover:text-indigo-500"
-//         >
-//           <ArrowLeft className="mr-2" size={20} />
-//           Back to Marketplace
-//         </Link>
-//         <div className="flex space-x-4">
-//           <Button
-//             onClick={() => downloadAgent(agent.id)}
-//             className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-//           >
-//             <Download className="mr-2" size={16} />
-//             Download Agent
-//           </Button>
-//         </div>
-//       </div>
-//       <div className="overflow-hidden bg-white shadow sm:rounded-lg">
-//         <div className="px-4 py-5 sm:px-6">
-//           <h1 className="text-3xl font-bold text-gray-900">{agent.name}</h1>
-//           <p className="mt-1 max-w-2xl text-sm text-gray-500">
-//             {agent.description}
-//           </p>
-//         </div>
-//         <div className="border-t border-gray-300 px-4 py-5 sm:p-0">
-//           <dl className="sm:divide-y sm:divide-gray-200">
-//             <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-//               <dt className="flex items-center text-sm font-medium text-gray-500">
-//                 <Calendar className="mr-2" size={16} />
-//                 Last Updated
-//               </dt>
-//               <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-//                 {new Date(agent.updatedAt).toLocaleDateString()}
-//               </dd>
-//             </div>
-//             <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-//               <dt className="flex items-center text-sm font-medium text-gray-500">
-//                 <Tag className="mr-2" size={16} />
-//                 Categories
-//               </dt>
-//               <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-//                 {agent.categories.join(", ")}
-//               </dd>
-//             </div>
-//           </dl>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
-
-// export default AgentDetailContent;

autogpt_platform/frontend/src/components/marketplace/actions.ts

@@ -1,18 +0,0 @@
-// "use server";
-
-// import * as Sentry from "@sentry/nextjs";
-// import MarketplaceAPI, { AnalyticsEvent } from "@/lib/marketplace-api";
-// import { checkAuth } from "@/lib/supabase/server";
-
-// export async function makeAnalyticsEvent(event: AnalyticsEvent) {
-//   return await Sentry.withServerActionInstrumentation(
-//     "makeAnalyticsEvent",
-//     {},
-//     async () => {
-//       await checkAuth();
-//       const apiUrl = process.env.AGPT_SERVER_API_URL;
-//       const api = new MarketplaceAPI();
-//       await api.makeAnalyticsEvent(event);
-//     },
-//   );
-// }

autogpt_platform/frontend/src/components/monitor/index.ts

@@ -1,6 +0,0 @@
-export { default as AgentFlowList } from "./AgentFlowList";
-export { default as FlowRunsList } from "./FlowRunsList";
-export { default as FlowInfo } from "./FlowInfo";
-export { default as FlowRunInfo } from "./FlowRunInfo";
-export { default as FlowRunsStats } from "./FlowRunsStatus";
-export { default as FlowRunsTimeline } from "./FlowRunsTimeline";

autogpt_platform/frontend/src/components/tutorial.ts

@@ -1,6 +1,6 @@
 import Shepherd from "shepherd.js";
 import "shepherd.js/dist/css/shepherd.css";
-import { sendGAEvent } from "@/components/analytics/google-analytics";
+import { sendGAEvent } from "@/services/analytics/google-analytics";
 import { Key, storage } from "@/services/storage/local-storage";
 
 export const startTutorial = (

autogpt_platform/frontend/src/hooks/useCredentials.ts

@@ -4,7 +4,7 @@ import { getValue } from "@/lib/utils";
 import {
   CredentialsProviderData,
   CredentialsProvidersContext,
-} from "@/components/integrations/credentials-provider";
+} from "@/services/agent-credentials/credentials-provider";
 import {
   BlockIOCredentialsSubSchema,
   CredentialsProviderName,

autogpt_platform/frontend/src/services/agent-credentials/credentials-provider.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { useToastOnFail } from "@/components/molecules/Toast/use-toast";
-import { toDisplayName } from "@/components/integrations/helper";
+import { toDisplayName } from "@/services/agent-credentials/helper";
 
 type APIKeyCredentialsCreatable = Omit<
   APIKeyCredentials,