refactor(frontend): agent runs view folder structure (#11475)

## Changes 🏗️

Re-arrange the folder structure of the new Library page sub-components
so they are grouped by location:

### Before

<img width="238" height="506" alt="Screenshot 2025-11-27 at 23 45 27"
src="https://github.com/user-attachments/assets/429fda6e-bf74-4d80-9306-028365789ca1"
/>

All components where on a single level, which works fine for simpler
pages without that many sub-components, but on this one which has so
much functionality it ends up messier...

### After 

<img width="226" height="517" alt="Screenshot 2025-11-27 at 23 45 46"
src="https://github.com/user-attachments/assets/99c098ea-ff11-4779-bad8-7d524bf91605"
/>


### Imports order

I edited some files, and the linter/formatter automatically sorted
import order as per the lint plugin.

### 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 new library agent page locally and click around

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/components/AgentOnboardingCredentials/AgentOnboardingCredentials.tsx

@@ -1,4 +1,4 @@
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { CredentialsMetaInput } from "@/app/api/__generated__/models/credentialsMetaInput";
 import { GraphMeta } from "@/app/api/__generated__/models/graphMeta";
 import { useState } from "react";

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentInputs/RunAgentInputs";
+import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentInputs/RunAgentInputs";
 import {
   Card,
   CardContent,

autogpt_platform/frontend/src/app/(no-navbar)/share/[token]/page.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import React from "react";
-import { useParams } from "next/navigation";
-import { RunOutputs } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/SelectedRunView/components/RunOutputs";
+import { RunOutputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunOutputs";
+import { useGetV1GetSharedExecution } from "@/app/api/__generated__/endpoints/default/default";
 import {
   Card,
   CardContent,
@@ -11,7 +10,7 @@ import {
 } from "@/components/__legacy__/ui/card";
 import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
 import { InfoIcon } from "lucide-react";
-import { useGetV1GetSharedExecution } from "@/app/api/__generated__/endpoints/default/default";
+import { useParams } from "next/navigation";
 
 export default function SharePage() {
   const params = useParams();

autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts

@@ -1,4 +1,4 @@
-import { OAuthPopupResultMessage } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
+import { OAuthPopupResultMessage } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { NextResponse } from "next/server";
 
 // This route is intended to be used as the callback for integration OAuth flows,

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx

@@ -1,9 +1,13 @@
+import { BlockUIType } from "@/app/(platform)/build/components/types";
+import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
+import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
+  globalRegistry,
+  OutputActions,
+  OutputItem,
+} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { Label } from "@/components/__legacy__/ui/label";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
 import {
   Sheet,
   SheetContent,
@@ -12,20 +16,16 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/__legacy__/ui/sheet";
-import { BuilderActionButton } from "../BuilderActionButton";
-import { BookOpenIcon } from "@phosphor-icons/react";
-import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
-import { useShallow } from "zustand/react/shallow";
-import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
-import { BlockUIType } from "@/app/(platform)/build/components/types";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { Label } from "@/components/__legacy__/ui/label";
-import { useMemo } from "react";
 import {
-  globalRegistry,
-  OutputItem,
-  OutputActions,
-} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { BookOpenIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { BuilderActionButton } from "../BuilderActionButton";
 
 export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
   const hasOutputs = useGraphStore(useShallow((state) => state.hasOutputs));

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/CronSchedulerDialog/CronSchedulerDialog.tsx

@@ -1,10 +1,10 @@
+import { CronScheduler } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/ScheduleAgentModal/components/CronScheduler/CronScheduler";
 import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
+import { Text } from "@/components/atoms/Text/Text";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { InfoIcon } from "lucide-react";
-import { CronScheduler } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/ScheduleAgentModal/components/CronScheduler/CronScheduler";
-import { Text } from "@/components/atoms/Text/Text";
 import { useCronSchedulerDialog } from "./useCronSchedulerDialog";
-import { Input } from "@/components/atoms/Input/Input";
 
 type CronSchedulerDialogProps = {
   open: boolean;

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
 
 export const TextRenderer: React.FC<{
   value: any;

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx

@@ -1,25 +1,25 @@
-import React, { FC } from "react";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import {
+  OutputActions,
+  OutputItem,
+} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
 import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { beautifyString } from "@/lib/utils";
 import {
   ArrowsOutSimpleIcon,
+  CheckIcon,
   CopyIcon,
   DownloadIcon,
-  CheckIcon,
 } from "@phosphor-icons/react";
-import { Text } from "@/components/atoms/Text/Text";
-import { beautifyString } from "@/lib/utils";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import {
-  OutputItem,
-  OutputActions,
-} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+import { FC } from "react";
 import { useNodeDataViewer } from "./useNodeDataViewer";
 
 interface NodeDataViewerProps {

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/useNodeDataViewer.ts

@@ -1,9 +1,9 @@
-import React, { useState, useMemo } from "react";
-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
-import { downloadOutputs } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers/utils/download";
+import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { downloadOutputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers/utils/download";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
 import { beautifyString } from "@/lib/utils";
+import React, { useMemo, useState } from "react";
 
 export const useNodeDataViewer = (
   data: any,

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx

@@ -1,27 +1,27 @@
+import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import {
+  globalRegistry,
+  OutputActions,
+  OutputItem,
+} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import { beautifyString } from "@/lib/utils";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { Clipboard, Maximize2 } from "lucide-react";
 import React, { FC, useMemo, useState } from "react";
 import { Button } from "../../../../../components/__legacy__/ui/button";
-import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
-import { beautifyString } from "@/lib/utils";
-import { Clipboard, Maximize2 } from "lucide-react";
-import { useToast } from "../../../../../components/molecules/Toast/use-toast";
-import { Switch } from "../../../../../components/atoms/Switch/Switch";
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
-  DialogTitle,
   DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from "../../../../../components/__legacy__/ui/dialog";
+import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
 import { ScrollArea } from "../../../../../components/__legacy__/ui/scroll-area";
 import { Separator } from "../../../../../components/__legacy__/ui/separator";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import {
-  globalRegistry,
-  OutputItem,
-  OutputActions,
-} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+import { Switch } from "../../../../../components/atoms/Switch/Switch";
+import { useToast } from "../../../../../components/molecules/Toast/use-toast";
 
 interface ExpandableOutputDialogProps {
   isOpen: boolean;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx

@@ -2,14 +2,33 @@ import {
   ConnectionData,
   CustomNodeData,
 } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
+import { Button } from "@/components/__legacy__/ui/button";
 import { Calendar } from "@/components/__legacy__/ui/calendar";
+import { LocalValuedInput } from "@/components/__legacy__/ui/input";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "@/components/__legacy__/ui/multiselect";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/__legacy__/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/__legacy__/ui/select";
+import { Switch } from "@/components/atoms/Switch/Switch";
 import { GoogleDrivePickerInput } from "@/components/contextual/GoogleDrivePicker/GoogleDrivePickerInput";
+import { NodeTableInput } from "@/components/node-table-input";
 import {
   BlockIOArraySubSchema,
   BlockIOBooleanSubSchema,
@@ -39,25 +58,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Button } from "@/components/__legacy__/ui/button";
-import { LocalValuedInput } from "@/components/__legacy__/ui/input";
-import {
-  MultiSelector,
-  MultiSelectorContent,
-  MultiSelectorInput,
-  MultiSelectorItem,
-  MultiSelectorList,
-  MultiSelectorTrigger,
-} from "@/components/__legacy__/ui/multiselect";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/__legacy__/ui/select";
-import { Switch } from "@/components/atoms/Switch/Switch";
-import { NodeTableInput } from "@/components/node-table-input";
 import NodeHandle from "./NodeHandle";
 
 type NodeObjectInputTreeProps = {

autogpt_platform/frontend/src/app/(platform)/chat/components/ChatCredentialsSetup/ChatCredentialsSetup.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef } from "react";
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Card } from "@/components/atoms/Card/Card";
 import { Text } from "@/components/atoms/Text/Text";
-import { KeyIcon, CheckIcon, WarningIcon } from "@phosphor-icons/react";
-import { cn } from "@/lib/utils";
-import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
 import type { BlockIOCredentialsSubSchema } from "@/lib/autogpt-server-api";
+import { cn } from "@/lib/utils";
+import { CheckIcon, KeyIcon, WarningIcon } from "@phosphor-icons/react";
+import { useEffect, useRef } from "react";
+import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
 
 export interface CredentialInfo {
   provider: string;

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

@@ -5,15 +5,15 @@ import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 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 { useAgentRunsView } from "./useAgentRunsView";
+import { RunAgentModal } from "./components/modals/RunAgentModal/RunAgentModal";
+import { AgentRunsLoading } from "./components/other/AgentRunsLoading";
+import { EmptyAgentRuns } from "./components/other/EmptyAgentRuns";
+import { SelectedRunView } from "./components/selected-views/SelectedRunView/SelectedRunView";
+import { SelectedScheduleView } from "./components/selected-views/SelectedScheduleView/SelectedScheduleView";
+import { AgentRunsLists } from "./components/sidebar/AgentRunsLists/AgentRunsLists";
+import { useNewAgentLibraryView } from "./useNewAgentLibraryView";
 
-export function AgentRunsView() {
+export function NewAgentLibraryView() {
   const {
     agent,
     hasAnyItems,
@@ -22,10 +22,11 @@ export function AgentRunsView() {
     error,
     agentId,
     selectedRun,
+    sidebarLoading,
     handleSelectRun,
     handleCountsChange,
     handleClearSelectedRun,
-  } = useAgentRunsView();
+  } = useNewAgentLibraryView();
 
   useEffect(() => {
     if (agent) {
@@ -73,7 +74,7 @@ export function AgentRunsView() {
           />
         </div>
 
-        <RunsSidebar
+        <AgentRunsLists
           agent={agent}
           selectedRunId={selectedRun}
           onSelectRun={handleSelectRun}
@@ -107,6 +108,9 @@ export function AgentRunsView() {
                 onClearSelectedRun={handleClearSelectedRun}
               />
             )
+          ) : sidebarLoading ? (
+            // Show loading state while sidebar is loading to prevent flash of empty state
+            <div className="text-gray-600">Loading runs...</div>
           ) : hasAnyItems ? (
             <div className="text-gray-600">
               Select a run to view its details

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

@@ -1,4 +1,3 @@
-import { Button } from "@/components/atoms/Button/Button";
 import {
   IconKey,
   IconKeyPlus,
@@ -12,6 +11,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/__legacy__/ui/select";
+import { Button } from "@/components/atoms/Button/Button";
+import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import useCredentials from "@/hooks/useCredentials";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import {
@@ -31,11 +32,10 @@ import {
   FaMedium,
   FaTwitter,
 } from "react-icons/fa";
-import { APIKeyCredentialsModal } from "../APIKeyCredentialsModal/APIKeyCredentialsModal";
-import { HostScopedCredentialsModal } from "../HotScopedCredentialsModal/HotScopedCredentialsModal";
-import { OAuthFlowWaitingModal } from "../OAuthWaitingModal/OAuthWaitingModal";
-import { PasswordCredentialsModal } from "../PasswordCredentialsModal/PasswordCredentialsModal";
-import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
+import { APIKeyCredentialsModal } from "./APIKeyCredentialsModal/APIKeyCredentialsModal";
+import { HostScopedCredentialsModal } from "./HotScopedCredentialsModal/HotScopedCredentialsModal";
+import { OAuthFlowWaitingModal } from "./OAuthWaitingModal/OAuthWaitingModal";
+import { PasswordCredentialsModal } from "./PasswordCredentialsModal/PasswordCredentialsModal";
 
 const fallbackIcon = FaKey;
 

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

@@ -1,21 +1,21 @@
 "use client";
 
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { Button } from "@/components/atoms/Button/Button";
-import { useState } from "react";
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { useAgentRunModal } from "./useAgentRunModal";
-import { ModalHeader } from "./components/ModalHeader/ModalHeader";
-import { AgentCostSection } from "./components/AgentCostSection/AgentCostSection";
-import { AgentSectionHeader } from "./components/AgentSectionHeader/AgentSectionHeader";
-import { ModalRunSection } from "./components/ModalRunSection/ModalRunSection";
-import { RunAgentModalContextProvider } from "./context";
-import { AgentDetails } from "./components/AgentDetails/AgentDetails";
-import { RunActions } from "./components/RunActions/RunActions";
-import { ScheduleAgentModal } from "../ScheduleAgentModal/ScheduleAgentModal";
-import { AlarmIcon } from "@phosphor-icons/react";
-import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
 import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { AlarmIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { ScheduleAgentModal } from "../ScheduleAgentModal/ScheduleAgentModal";
+import { AgentCostSection } from "./components/AgentCostSection/AgentCostSection";
+import { AgentDetails } from "./components/AgentDetails/AgentDetails";
+import { AgentSectionHeader } from "./components/AgentSectionHeader/AgentSectionHeader";
+import { ModalHeader } from "./components/ModalHeader/ModalHeader";
+import { ModalRunSection } from "./components/ModalRunSection/ModalRunSection";
+import { RunActions } from "./components/RunActions/RunActions";
+import { RunAgentModalContextProvider } from "./context";
+import { useAgentRunModal } from "./useAgentRunModal";
 
 interface Props {
   triggerSlot: React.ReactNode;

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

@@ -1,13 +1,13 @@
-import { WebhookTriggerBanner } from "../WebhookTriggerBanner/WebhookTriggerBanner";
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Input } from "@/components/atoms/Input/Input";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
-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 "@/providers/agent-credentials/helper";
-import { getCredentialTypeDisplayName } from "./helpers";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
+import { toDisplayName } from "@/providers/agent-credentials/helper";
+import { InfoIcon } from "@phosphor-icons/react";
+import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
+import { useRunAgentModalContext } from "../../context";
+import { WebhookTriggerBanner } from "../WebhookTriggerBanner/WebhookTriggerBanner";
+import { getCredentialTypeDisplayName } from "./helpers";
 
 export function ModalRunSection() {
   const {

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

@@ -1,10 +1,10 @@
-import { ShowMoreText } from "@/components/molecules/ShowMoreText/ShowMoreText";
-import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
-import { Text } from "@/components/atoms/Text/Text";
-import { RunAgentModal } from "../RunAgentModal/RunAgentModal";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { ShowMoreText } from "@/components/molecules/ShowMoreText/ShowMoreText";
 import { PlusIcon } from "@phosphor-icons/react";
+import { RunAgentModal } from "../modals/RunAgentModal/RunAgentModal";
+import { RunDetailCard } from "../selected-views/RunDetailCard/RunDetailCard";
 
 type Props = {
   agentName: string;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx

@@ -1,21 +1,20 @@
-import React from "react";
-import { RunStatusBadge } from "../SelectedRunView/components/RunStatusBadge";
-import { Text } from "@/components/atoms/Text/Text";
-import { Button } from "@/components/atoms/Button/Button";
-import {
-  TrashIcon,
-  StopIcon,
-  PlayIcon,
-  ArrowSquareOutIcon,
-} from "@phosphor-icons/react";
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import moment from "moment";
 import { GraphExecution } from "@/app/api/__generated__/models/graphExecution";
-import { useRunDetailHeader } from "./useRunDetailHeader";
-import { AgentActionsDropdown } from "../AgentActionsDropdown";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import {
+  ArrowSquareOutIcon,
+  PlayIcon,
+  StopIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import moment from "moment";
+import { AgentActionsDropdown } from "../AgentActionsDropdown";
+import { RunStatusBadge } from "../SelectedRunView/components/RunStatusBadge";
 import { ShareRunButton } from "../ShareRunButton/ShareRunButton";
+import { useRunDetailHeader } from "./useRunDetailHeader";
 
 type Props = {
   agent: LibraryAgent;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx

@@ -1,24 +1,24 @@
 "use client";
 
-import React, { useEffect } from "react";
+import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
+import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import {
   TabsLine,
   TabsLineContent,
   TabsLineList,
   TabsLineTrigger,
 } from "@/components/molecules/TabsLine/TabsLine";
-import { useSelectedRunView } from "./useSelectedRunView";
-import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
-import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
-import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { Skeleton } from "@/components/__legacy__/ui/skeleton";
-import { AgentInputsReadOnly } from "../AgentInputsReadOnly/AgentInputsReadOnly";
-import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
-import { RunOutputs } from "./components/RunOutputs";
 import { PendingReviewsList } from "@/components/organisms/PendingReviewsList/PendingReviewsList";
 import { usePendingReviewsForExecution } from "@/hooks/usePendingReviews";
 import { parseAsString, useQueryState } from "nuqs";
+import { useEffect } from "react";
+import { AgentInputsReadOnly } from "../../modals/AgentInputsReadOnly/AgentInputsReadOnly";
+import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
+import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
+import { RunOutputs } from "./components/RunOutputs";
+import { useSelectedRunView } from "./useSelectedRunView";
 
 interface Props {
   agent: LibraryAgent;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunOutputs.tsx

@@ -3,12 +3,12 @@
 import type {
   OutputMetadata,
   OutputRenderer,
-} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
 import {
   globalRegistry,
   OutputActions,
   OutputItem,
-} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
+} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
 import React, { useMemo } from "react";
 
 type OutputsRecord = Record<string, Array<unknown>>;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx

@@ -1,24 +1,23 @@
 "use client";
 
-import React from "react";
+import { useGetV1GetUserTimezone } from "@/app/api/__generated__/endpoints/auth/auth";
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { Text } from "@/components/atoms/Text/Text";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import {
   TabsLine,
   TabsLineContent,
   TabsLineList,
   TabsLineTrigger,
 } from "@/components/molecules/TabsLine/TabsLine";
-import { useSelectedScheduleView } from "./useSelectedScheduleView";
+import { humanizeCronExpression } from "@/lib/cron-expression-utils";
+import { formatInTimezone, getTimezoneDisplayName } from "@/lib/timezone-utils";
+import { AgentInputsReadOnly } from "../../modals/AgentInputsReadOnly/AgentInputsReadOnly";
 import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
 import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { useGetV1GetUserTimezone } from "@/app/api/__generated__/endpoints/auth/auth";
-import { formatInTimezone, getTimezoneDisplayName } from "@/lib/timezone-utils";
-import { Skeleton } from "@/components/__legacy__/ui/skeleton";
-import { AgentInputsReadOnly } from "../AgentInputsReadOnly/AgentInputsReadOnly";
 import { ScheduleActions } from "./components/ScheduleActions";
+import { useSelectedScheduleView } from "./useSelectedScheduleView";
 
 interface Props {
   agent: LibraryAgent;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/components/EditInputsModal/EditInputsModal.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import React from "react";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
-import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
-import { useEditInputsModal } from "./useEditInputsModal";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { PencilSimpleIcon } from "@phosphor-icons/react";
+import { RunAgentInputs } from "../../../../modals/RunAgentInputs/RunAgentInputs";
+import { useEditInputsModal } from "./useEditInputsModal";
 
 type Props = {
   agent: LibraryAgent;

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/components/EditScheduleModal/useEditScheduleModal.ts

@@ -1,15 +1,15 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGetV1ListExecutionSchedulesForAGraphQueryKey } from "@/app/api/__generated__/endpoints/schedules/schedules";
 import { getGetV1ListGraphExecutionsInfiniteQueryOptions } from "@/app/api/__generated__/endpoints/graphs/graphs";
+import { getGetV1ListExecutionSchedulesForAGraphQueryKey } from "@/app/api/__generated__/endpoints/schedules/schedules";
+import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
 import {
   parseCronToForm,
   validateSchedule,
-} from "../../../ScheduleAgentModal/components/ModalScheduleSection/helpers";
-import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { useToast } from "@/components/molecules/Toast/use-toast";
+} from "../../../../modals/ScheduleAgentModal/components/ModalScheduleSection/helpers";
 
 export function useEditScheduleModal(
   graphId: string,

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

@@ -1,22 +1,21 @@
 "use client";
 
-import React from "react";
+import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList";
 import {
   TabsLine,
+  TabsLineContent,
   TabsLineList,
   TabsLineTrigger,
-  TabsLineContent,
 } from "@/components/molecules/TabsLine/TabsLine";
-import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { useRunsSidebar } from "./useRunsSidebar";
 import { RunListItem } from "./components/RunListItem";
 import { ScheduleListItem } from "./components/ScheduleListItem";
-import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList";
-import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { Skeleton } from "@/components/__legacy__/ui/skeleton";
+import { useAgentRunsLists } from "./useAgentRunsLists";
 
-interface RunsSidebarProps {
+interface Props {
   agent: LibraryAgent;
   selectedRunId?: string;
   onSelectRun: (id: string) => void;
@@ -27,12 +26,12 @@ interface RunsSidebarProps {
   }) => void;
 }
 
-export function RunsSidebar({
+export function AgentRunsLists({
   agent,
   selectedRunId,
   onSelectRun,
   onCountsChange,
-}: RunsSidebarProps) {
+}: Props) {
   const {
     runs,
     schedules,
@@ -45,7 +44,7 @@ export function RunsSidebar({
     isFetchingMoreRuns,
     tabValue,
     setTabValue,
-  } = useRunsSidebar({
+  } = useAgentRunsLists({
     graphId: agent.graph_id,
     onSelectRun,
     onCountsChange,

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/useAgentRunsLists.ts

@@ -5,13 +5,13 @@ import { useEffect, useMemo, useState } from "react";
 import { useGetV1ListGraphExecutionsInfinite } from "@/app/api/__generated__/endpoints/graphs/graphs";
 import { useGetV1ListExecutionSchedulesForAGraph } from "@/app/api/__generated__/endpoints/schedules/schedules";
 import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { useSearchParams } from "next/navigation";
 import { okData } from "@/app/api/helpers";
+import { useSearchParams } from "next/navigation";
 import {
-  getRunsPollingInterval,
   computeRunsCount,
-  getNextRunsPageParam,
   extractRunsFromPages,
+  getNextRunsPageParam,
+  getRunsPollingInterval,
 } from "./helpers";
 
 type Args = {
@@ -24,7 +24,11 @@ type Args = {
   }) => void;
 };
 
-export function useRunsSidebar({ graphId, onSelectRun, onCountsChange }: Args) {
+export function useAgentRunsLists({
+  graphId,
+  onSelectRun,
+  onCountsChange,
+}: Args) {
   const params = useSearchParams();
   const existingRunId = params.get("executionId") as string | undefined;
   const [tabValue, setTabValue] = useState<"runs" | "scheduled">("runs");

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/useNewAgentLibraryView.ts

@@ -5,7 +5,7 @@ import { useParams } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
 import { useCallback, useMemo, useState } from "react";
 
-export function useAgentRunsView() {
+export function useNewAgentLibraryView() {
   const { id } = useParams();
   const agentId = id as string;
   const {
@@ -70,6 +70,7 @@ export function useAgentRunsView() {
     hasAnyItems,
     showSidebarLayout,
     selectedRun,
+    sidebarLoading,
     handleClearSelectedRun,
     handleCountsChange,
     handleSelectRun,

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx

@@ -12,6 +12,9 @@ import {
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentInputs/RunAgentInputs";
+import { ScheduleTaskDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
 import ActionButtonGroup from "@/components/__legacy__/action-button-group";
 import type { ButtonAction } from "@/components/__legacy__/types";
 import {
@@ -25,25 +28,21 @@ import {
   IconPlay,
   IconSave,
 } from "@/components/__legacy__/ui/icons";
-import { CalendarClockIcon, Trash2Icon } from "lucide-react";
-import { ClockIcon, InfoIcon } from "@phosphor-icons/react";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { ScheduleTaskDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
-import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentInputs/RunAgentInputs";
-import { cn, isEmpty } from "@/lib/utils";
-import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
-import { CopyIcon } from "@phosphor-icons/react";
-import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/__legacy__/ui/input";
+import { Button } from "@/components/atoms/Button/Button";
+import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import {
   useToast,
   useToastOnFail,
 } from "@/components/molecules/Toast/use-toast";
+import { humanizeCronExpression } from "@/lib/cron-expression-utils";
+import { cn, isEmpty } from "@/lib/utils";
+import { ClockIcon, CopyIcon, InfoIcon } from "@phosphor-icons/react";
+import { CalendarClockIcon, Trash2Icon } from "lucide-react";
 
-import { AgentStatus, AgentStatusChip } from "./agent-status-chip";
 import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
 import { analytics } from "@/services/analytics";
+import { AgentStatus, AgentStatusChip } from "./agent-status-chip";
 
 export function AgentRunDraftView({
   graph,

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-output-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useMemo } from "react";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import React, { useMemo } from "react";
 
 import {
   Card,
@@ -11,12 +11,12 @@ import {
 } from "@/components/__legacy__/ui/card";
 
 import LoadingBox from "@/components/__legacy__/ui/loading";
+import type { OutputMetadata } from "../../NewAgentLibraryView/components/selected-views/OutputRenderers";
 import {
   globalRegistry,
-  OutputItem,
   OutputActions,
-} from "../../AgentRunsView/components/OutputRenderers";
-import type { OutputMetadata } from "../../AgentRunsView/components/OutputRenderers";
+  OutputItem,
+} from "../../NewAgentLibraryView/components/selected-views/OutputRenderers";
 
 export function AgentRunOutputView({
   agentRunOutputs,

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

@@ -1,3 +1,3 @@
-import { AgentRunsLoading } from "./components/AgentRunsView/components/AgentRunsLoading";
+import { AgentRunsLoading } from "./components/NewAgentLibraryView/components/other/AgentRunsLoading";
 
 export default AgentRunsLoading;

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

@@ -1,10 +1,14 @@
 "use client";
 
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { AgentRunsView } from "./components/AgentRunsView/AgentRunsView";
+import { NewAgentLibraryView } from "./components/NewAgentLibraryView/NewAgentLibraryView";
 import { OldAgentLibraryView } from "./components/OldAgentLibraryView/OldAgentLibraryView";
 
 export default function AgentLibraryPage() {
   const isNewLibraryPageEnabled = useGetFlag(Flag.NEW_AGENT_RUNS);
-  return isNewLibraryPageEnabled ? <AgentRunsView /> : <OldAgentLibraryView />;
+  return isNewLibraryPageEnabled ? (
+    <NewAgentLibraryView />
+  ) : (
+    <OldAgentLibraryView />
+  );
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { providerIcons } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
+import { providerIcons } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { IconKey, IconUser } from "@/components/__legacy__/ui/icons";
 import LoadingBox from "@/components/__legacy__/ui/loading";
 import {

autogpt_platform/frontend/src/components/contextual/GoogleDrivePicker/GoogleDrivePicker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/CredentialsInputs/CredentialsInputs";
+import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Button } from "@/components/atoms/Button/Button";
 import { CircleNotchIcon, FolderOpenIcon } from "@phosphor-icons/react";
 import { Props, useGoogleDrivePicker } from "./useGoogleDrivePicker";