style: black formatting

fix: skip binary file if stat fails to prevent OOM
If the stat command fails (file deleted, permissions issue, etc.), we now skip the file rather than proceeding to read it with an unknown size. This prevents potential OOM crashes from large files where size verification failed.
2026-02-12 15:55:03 -05:00 · 2026-02-12 12:46:20 +00:00 · 2026-02-12 12:32:13 +00:00 · 2026-02-12 12:25:29 +00:00 · 2026-02-12 12:02:45 +00:00 · 2026-02-12 11:58:35 +00:00
31 changed files with 2596 additions and 101 deletions
--- a/autogpt_platform/backend/backend/blocks/claude_code.py
+++ b/autogpt_platform/backend/backend/blocks/claude_code.py
@@ -1,4 +1,6 @@
+import base64
 import json
+import logging
 import shlex
 import uuid
 from typing import Literal, Optional
@@ -21,6 +23,11 @@ from backend.data.model import (
 )
 from backend.integrations.providers import ProviderName

+logger = logging.getLogger(__name__)
+
+# Maximum size for binary files to extract (50MB)
+MAX_BINARY_FILE_SIZE = 50 * 1024 * 1024
+

 class ClaudeCodeExecutionError(Exception):
    """Exception raised when Claude Code execution fails.
@@ -180,7 +187,9 @@ class ClaudeCodeBlock(Block):
        path: str
        relative_path: str  # Path relative to working directory (for GitHub, etc.)
        name: str
-        content: str
+        content: str  # Text content for text files, empty string for binary files
+        is_binary: bool = False  # True if this is a binary file
+        content_base64: Optional[str] = None  # Base64-encoded content for binary files

    class Output(BlockSchemaOutput):
        response: str = SchemaField(
@@ -188,8 +197,11 @@ class ClaudeCodeBlock(Block):
        )
        files: list["ClaudeCodeBlock.FileOutput"] = SchemaField(
            description=(
-                "List of text files created/modified by Claude Code during this execution. "
-                "Each file has 'path', 'relative_path', 'name', and 'content' fields."
+                "List of files created/modified by Claude Code during this execution. "
+                "Each file has 'path', 'relative_path', 'name', 'content', 'is_binary', "
+                "and 'content_base64' fields. For text files, 'content' contains the text "
+                "and 'is_binary' is False. For binary files (PDFs, images, etc.), "
+                "'is_binary' is True and 'content_base64' contains the base64-encoded data."
            )
        )
        conversation_history: str = SchemaField(
@@ -252,6 +264,8 @@ class ClaudeCodeBlock(Block):
                            "relative_path": "index.html",
                            "name": "index.html",
                            "content": "<html>Hello World</html>",
+                            "is_binary": False,
+                            "content_base64": None,
                        }
                    ],
                ),
@@ -272,6 +286,8 @@ class ClaudeCodeBlock(Block):
                            relative_path="index.html",
                            name="index.html",
                            content="<html>Hello World</html>",
+                            is_binary=False,
+                            content_base64=None,
                        )
                    ],  # files
                    "User: Create a hello world HTML file\n"
@@ -531,7 +547,6 @@ class ClaudeCodeBlock(Block):
            ".env",
            ".gitignore",
            ".dockerfile",
-            "Dockerfile",
            ".vue",
            ".svelte",
            ".astro",
@@ -540,6 +555,44 @@ class ClaudeCodeBlock(Block):
            ".tex",
            ".csv",
            ".log",
+            ".svg",  # SVG is XML-based text
+        }
+
+        # Binary file extensions we can read and base64-encode
+        binary_extensions = {
+            # Images
+            ".png",
+            ".jpg",
+            ".jpeg",
+            ".gif",
+            ".webp",
+            ".ico",
+            ".bmp",
+            ".tiff",
+            ".tif",
+            # Documents
+            ".pdf",
+            # Archives (useful for downloads)
+            ".zip",
+            ".tar",
+            ".gz",
+            ".7z",
+            # Audio/Video (if small enough)
+            ".mp3",
+            ".wav",
+            ".mp4",
+            ".webm",
+            # Other binary formats
+            ".woff",
+            ".woff2",
+            ".ttf",
+            ".otf",
+            ".eot",
+            ".bin",
+            ".exe",
+            ".dll",
+            ".so",
+            ".dylib",
        }

        try:
@@ -564,10 +617,26 @@ class ClaudeCodeBlock(Block):
                    if not file_path:
                        continue

-                    # Check if it's a text file we can read
+                    # Check if it's a text file we can read (case-insensitive)
+                    file_path_lower = file_path.lower()
                    is_text = any(
-                        file_path.endswith(ext) for ext in text_extensions
-                    ) or file_path.endswith("Dockerfile")
+                        file_path_lower.endswith(ext) for ext in text_extensions
+                    ) or file_path_lower.endswith("dockerfile")
+
+                    # Check if it's a binary file we should extract
+                    is_binary = any(
+                        file_path_lower.endswith(ext) for ext in binary_extensions
+                    )
+
+                    # Helper to extract filename and relative path
+                    def get_file_info(path: str, work_dir: str) -> tuple[str, str]:
+                        name = path.split("/")[-1]
+                        rel_path = path
+                        if path.startswith(work_dir):
+                            rel_path = path[len(work_dir) :]
+                            if rel_path.startswith("/"):
+                                rel_path = rel_path[1:]
+                        return name, rel_path

                    if is_text:
                        try:
@@ -576,32 +645,72 @@ class ClaudeCodeBlock(Block):
                            if isinstance(content, bytes):
                                content = content.decode("utf-8", errors="replace")

-                            # Extract filename from path
-                            file_name = file_path.split("/")[-1]
-
-                            # Calculate relative path by stripping working directory
-                            relative_path = file_path
-                            if file_path.startswith(working_directory):
-                                relative_path = file_path[len(working_directory) :]
-                                # Remove leading slash if present
-                                if relative_path.startswith("/"):
-                                    relative_path = relative_path[1:]
-
+                            file_name, relative_path = get_file_info(
+                                file_path, working_directory
+                            )
                            files.append(
                                ClaudeCodeBlock.FileOutput(
                                    path=file_path,
                                    relative_path=relative_path,
                                    name=file_name,
                                    content=content,
+                                    is_binary=False,
+                                    content_base64=None,
                                )
                            )
-                        except Exception:
-                            # Skip files that can't be read
-                            pass
+                        except Exception as e:
+                            logger.warning(f"Failed to read text file {file_path}: {e}")
+                    elif is_binary:
+                        try:
+                            # Check file size before reading to avoid OOM
+                            stat_result = await sandbox.commands.run(
+                                f"stat -c %s {shlex.quote(file_path)} 2>/dev/null"
+                            )
+                            if stat_result.exit_code != 0 or not stat_result.stdout:
+                                logger.warning(
+                                    f"Skipping binary file {file_path}: "
+                                    f"could not determine file size"
+                                )
+                                continue
+                            file_size = int(stat_result.stdout.strip())
+                            if file_size > MAX_BINARY_FILE_SIZE:
+                                logger.warning(
+                                    f"Skipping binary file {file_path}: "
+                                    f"size {file_size} exceeds limit "
+                                    f"{MAX_BINARY_FILE_SIZE}"
+                                )
+                                continue

-        except Exception:
-            # If file extraction fails, return empty results
-            pass
+                            # Read binary file as bytes using format="bytes"
+                            content_bytes = await sandbox.files.read(
+                                file_path, format="bytes"
+                            )
+
+                            # Base64 encode the binary content
+                            content_b64 = base64.b64encode(content_bytes).decode(
+                                "ascii"
+                            )
+
+                            file_name, relative_path = get_file_info(
+                                file_path, working_directory
+                            )
+                            files.append(
+                                ClaudeCodeBlock.FileOutput(
+                                    path=file_path,
+                                    relative_path=relative_path,
+                                    name=file_name,
+                                    content="",  # Empty for binary files
+                                    is_binary=True,
+                                    content_base64=content_b64,
+                                )
+                            )
+                        except Exception as e:
+                            logger.warning(
+                                f"Failed to read binary file {file_path}: {e}"
+                            )
+
+        except Exception as e:
+            logger.warning(f"File extraction failed: {e}")

        return files

--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts
@@ -4,7 +4,7 @@ import {
 } from "@/app/api/__generated__/endpoints/graphs/graphs";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
-import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
+import { GraphExecutionMeta } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/use-agent-runs";
 import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { useShallow } from "zustand/react/shallow";
 import { useEffect, useState } from "react";
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/__legacy__/ui/tabs";
+
+export type BuilderView = "old" | "new";
+
+export function BuilderViewTabs({
+  value,
+  onChange,
+}: {
+  value: BuilderView;
+  onChange: (value: BuilderView) => void;
+}) {
+  return (
+    <div className="pointer-events-auto fixed right-4 top-20 z-50">
+      <Tabs
+        value={value}
+        onValueChange={(v: string) => onChange(v as BuilderView)}
+      >
+        <TabsList className="w-fit bg-zinc-900">
+          <TabsTrigger value="old" className="text-gray-100">
+            Old
+          </TabsTrigger>
+          <TabsTrigger value="new" className="text-gray-100">
+            New
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
@@ -23,9 +23,6 @@ import { useCopyPaste } from "./useCopyPaste";
 import { useFlow } from "./useFlow";
 import { useFlowRealtime } from "./useFlowRealtime";

-import "@xyflow/react/dist/style.css";
-import "./flow.css";
-
 export const Flow = () => {
  const [{ flowID, flowExecutionID }] = useQueryStates({
    flowID: parseAsString,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css
@@ -1,9 +0,0 @@
-/* Reset default xyflow handle styles so custom Phosphor icon handles render correctly */
-.react-flow__handle {
-  background: transparent;
-  width: auto;
-  height: auto;
-  border: 0;
-  position: relative;
-  transform: none;
-}
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx
@@ -0,0 +1,83 @@
+import { useMemo } from "react";
+
+import { Link } from "@/app/api/__generated__/models/link";
+import { useEdgeStore } from "../stores/edgeStore";
+import { useNodeStore } from "../stores/nodeStore";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { customEdgeToLink } from "./helper";
+
+export const RightSidebar = () => {
+  const edges = useEdgeStore((s) => s.edges);
+  const nodes = useNodeStore((s) => s.nodes);
+
+  const backendLinks: Link[] = useMemo(
+    () => edges.map(customEdgeToLink),
+    [edges],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full flex-col border-l border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
+        scrollbarStyles,
+      )}
+    >
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+          Graph Debug Panel
+        </h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+          Nodes ({nodes.length})
+        </h3>
+        <div className="mb-6 space-y-3">
+          {nodes.map((n) => (
+            <div
+              key={n.id}
+              className="rounded border p-2 text-xs dark:border-slate-700"
+            >
+              <div className="mb-1 font-medium">
+                #{n.id} {n.data?.title ? `– ${n.data.title}` : ""}
+              </div>
+              <div className="text-slate-500 dark:text-slate-400">
+                hardcodedValues
+              </div>
+              <pre className="mt-1 max-h-40 overflow-auto rounded bg-slate-50 p-2 dark:bg-slate-800">
+                {JSON.stringify(n.data?.hardcodedValues ?? {}, null, 2)}
+              </pre>
+            </div>
+          ))}
+        </div>
+
+        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+          Links ({backendLinks.length})
+        </h3>
+        <div className="mb-6 space-y-3">
+          {backendLinks.map((l) => (
+            <div
+              key={l.id}
+              className="rounded border p-2 text-xs dark:border-slate-700"
+            >
+              <div className="font-medium">
+                {l.source_id}[{l.source_name}] → {l.sink_id}[{l.sink_name}]
+              </div>
+              <div className="mt-1 text-slate-500 dark:text-slate-400">
+                edge.id: {l.id}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <h4 className="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">
+          Backend Links JSON
+        </h4>
+        <pre className="max-h-64 overflow-auto rounded bg-slate-50 p-2 text-[11px] dark:bg-slate-800">
+          {JSON.stringify(backendLinks, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerInputUI.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerInputUI.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";

-import { AgentRunDraftView } from "@/app/(platform)/build/components/legacy-builder/agent-run-draft-view";
+import { AgentRunDraftView } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import type {
  CredentialsMetaInput,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/SaveControl.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/SaveControl.tsx
@@ -18,7 +18,7 @@ import {
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
 import { getGetV2ListMySubmissionsQueryKey } from "@/app/api/__generated__/endpoints/store/store";
-import { CronExpressionDialog } from "@/components/contextual/CronScheduler/cron-scheduler-dialog";
+import { CronExpressionDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
 import { humanizeCronExpression } from "@/lib/cron-expression-utils";
 import { CalendarClockIcon } from "lucide-react";

--- a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
@@ -1,13 +1,64 @@
 "use client";
-import { ReactFlowProvider } from "@xyflow/react";
-import { Flow } from "./components/FlowEditor/Flow/Flow";

-export default function BuilderPage() {
+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 { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
+import { Flow } from "./components/FlowEditor/Flow/Flow";
+import { useBuilderView } from "./useBuilderView";
+
+function BuilderContent() {
+  const query = useSearchParams();
+  const { completeStep } = useOnboarding();
+
+  useEffect(() => {
+    completeStep("BUILDER_OPEN");
+  }, [completeStep]);
+
+  const _graphVersion = query.get("flowVersion");
+  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
  return (
-    <div className="relative h-full w-full">
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </div>
+    <FlowEditor
+      className="flex h-full w-full"
+      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
+      flowVersion={graphVersion}
+    />
+  );
+}
+
+export default function BuilderPage() {
+  const {
+    isSwitchEnabled,
+    selectedView,
+    setSelectedView,
+    isNewFlowEditorEnabled,
+  } = useBuilderView();
+
+  // Switch is temporary, we will remove it once our new flow editor is ready
+  if (isSwitchEnabled) {
+    return (
+      <div className="relative h-full w-full">
+        <BuilderViewTabs value={selectedView} onChange={setSelectedView} />
+        {selectedView === "new" ? (
+          <ReactFlowProvider>
+            <Flow />
+          </ReactFlowProvider>
+        ) : (
+          <BuilderContent />
+        )}
+      </div>
+    );
+  }
+
+  return isNewFlowEditorEnabled ? (
+    <ReactFlowProvider>
+      <Flow />
+    </ReactFlowProvider>
+  ) : (
+    <BuilderContent />
  );
 }
--- a/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts
@@ -0,0 +1,44 @@
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+import { BuilderView } from "./components/BuilderViewTabs/BuilderViewTabs";
+
+export function useBuilderView() {
+  const isNewFlowEditorEnabled = useGetFlag(Flag.NEW_FLOW_EDITOR);
+  const isBuilderViewSwitchEnabled = useGetFlag(Flag.BUILDER_VIEW_SWITCH);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentView = searchParams.get("view");
+  const defaultView = "old";
+  const selectedView = useMemo<BuilderView>(() => {
+    if (currentView === "new" || currentView === "old") return currentView;
+    return defaultView;
+  }, [currentView, defaultView]);
+
+  useEffect(() => {
+    if (isBuilderViewSwitchEnabled === true) {
+      if (currentView !== "new" && currentView !== "old") {
+        const params = new URLSearchParams(searchParams);
+        params.set("view", defaultView);
+        router.replace(`${pathname}?${params.toString()}`);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isBuilderViewSwitchEnabled, defaultView, pathname, router, searchParams]);
+
+  const setSelectedView = (value: BuilderView) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("view", value);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return {
+    isSwitchEnabled: isBuilderViewSwitchEnabled === true,
+    selectedView,
+    setSelectedView,
+    isNewFlowEditorEnabled: Boolean(isNewFlowEditorEnabled),
+  } as const;
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/OldAgentLibraryView.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/OldAgentLibraryView.tsx
@@ -0,0 +1,631 @@
+"use client";
+import { useParams, useRouter } from "next/navigation";
+import { useQueryState } from "nuqs";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  Graph,
+  GraphExecution,
+  GraphExecutionID,
+  GraphExecutionMeta,
+  GraphID,
+  LibraryAgent,
+  LibraryAgentID,
+  LibraryAgentPreset,
+  LibraryAgentPresetID,
+  Schedule,
+  ScheduleID,
+} from "@/lib/autogpt-server-api";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { exportAsJSONFile } from "@/lib/utils";
+
+import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
+import type { ButtonAction } from "@/components/__legacy__/types";
+import { Button } from "@/components/__legacy__/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/__legacy__/ui/dialog";
+import LoadingBox, { LoadingSpinner } from "@/components/__legacy__/ui/loading";
+import {
+  useToast,
+  useToastOnFail,
+} from "@/components/molecules/Toast/use-toast";
+import { AgentRunDetailsView } from "./components/agent-run-details-view";
+import { AgentRunDraftView } from "./components/agent-run-draft-view";
+import { CreatePresetDialog } from "./components/create-preset-dialog";
+import { useAgentRunsInfinite } from "./use-agent-runs";
+import { AgentRunsSelectorList } from "./components/agent-runs-selector-list";
+import { AgentScheduleDetailsView } from "./components/agent-schedule-details-view";
+
+export function OldAgentLibraryView() {
+  const { id: agentID }: { id: LibraryAgentID } = useParams();
+  const [executionId, setExecutionId] = useQueryState("executionId");
+  const toastOnFail = useToastOnFail();
+  const { toast } = useToast();
+  const router = useRouter();
+  const api = useBackendAPI();
+
+  // ============================ STATE =============================
+
+  const [graph, setGraph] = useState<Graph | null>(null); // Graph version corresponding to LibraryAgent
+  const [agent, setAgent] = useState<LibraryAgent | null>(null);
+  const agentRunsQuery = useAgentRunsInfinite(graph?.id); // only runs once graph.id is known
+  const agentRuns = agentRunsQuery.agentRuns;
+  const [agentPresets, setAgentPresets] = useState<LibraryAgentPreset[]>([]);
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [selectedView, selectView] = useState<
+    | { type: "run"; id?: GraphExecutionID }
+    | { type: "preset"; id: LibraryAgentPresetID }
+    | { type: "schedule"; id: ScheduleID }
+  >({ type: "run" });
+  const [selectedRun, setSelectedRun] = useState<
+    GraphExecution | GraphExecutionMeta | null
+  >(null);
+  const selectedSchedule =
+    selectedView.type == "schedule"
+      ? schedules.find((s) => s.id == selectedView.id)
+      : null;
+  const [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);
+  const [agentDeleteDialogOpen, setAgentDeleteDialogOpen] =
+    useState<boolean>(false);
+  const [confirmingDeleteAgentRun, setConfirmingDeleteAgentRun] =
+    useState<GraphExecutionMeta | null>(null);
+  const [confirmingDeleteAgentPreset, setConfirmingDeleteAgentPreset] =
+    useState<LibraryAgentPresetID | null>(null);
+  const [copyAgentDialogOpen, setCopyAgentDialogOpen] = useState(false);
+  const [creatingPresetFromExecutionID, setCreatingPresetFromExecutionID] =
+    useState<GraphExecutionID | null>(null);
+
+  // Set page title with agent name
+  useEffect(() => {
+    if (agent) {
+      document.title = `${agent.name} - Library - AutoGPT Platform`;
+    }
+  }, [agent]);
+
+  const openRunDraftView = useCallback(() => {
+    selectView({ type: "run" });
+  }, []);
+
+  const selectRun = useCallback((id: GraphExecutionID) => {
+    selectView({ type: "run", id });
+  }, []);
+
+  const selectPreset = useCallback((id: LibraryAgentPresetID) => {
+    selectView({ type: "preset", id });
+  }, []);
+
+  const selectSchedule = useCallback((id: ScheduleID) => {
+    selectView({ type: "schedule", id });
+  }, []);
+
+  const graphVersions = useRef<Record<number, Graph>>({});
+  const loadingGraphVersions = useRef<Record<number, Promise<Graph>>>({});
+  const getGraphVersion = useCallback(
+    async (graphID: GraphID, version: number) => {
+      if (version in graphVersions.current)
+        return graphVersions.current[version];
+      if (version in loadingGraphVersions.current)
+        return loadingGraphVersions.current[version];
+
+      const pendingGraph = api.getGraph(graphID, version).then((graph) => {
+        graphVersions.current[version] = graph;
+        return graph;
+      });
+      // Cache promise as well to avoid duplicate requests
+      loadingGraphVersions.current[version] = pendingGraph;
+      return pendingGraph;
+    },
+    [api, graphVersions, loadingGraphVersions],
+  );
+
+  const lastRefresh = useRef<number>(0);
+  const refreshPageData = useCallback(() => {
+    if (Date.now() - lastRefresh.current < 2e3) return; // 2 second debounce
+    lastRefresh.current = Date.now();
+
+    api.getLibraryAgent(agentID).then((agent) => {
+      setAgent(agent);
+
+      getGraphVersion(agent.graph_id, agent.graph_version).then(
+        (_graph) =>
+          (graph && graph.version == _graph.version) || setGraph(_graph),
+      );
+      Promise.all([
+        agentRunsQuery.refetchRuns(),
+        api.listLibraryAgentPresets({
+          graph_id: agent.graph_id,
+          page_size: 100,
+        }),
+      ]).then(([runsQueryResult, presets]) => {
+        setAgentPresets(presets.presets);
+
+        const newestAgentRunsResponse = runsQueryResult.data?.pages[0];
+        if (!newestAgentRunsResponse || newestAgentRunsResponse.status != 200)
+          return;
+        const newestAgentRuns = newestAgentRunsResponse.data.executions;
+        // Preload the corresponding graph versions for the latest 10 runs
+        new Set(
+          newestAgentRuns.slice(0, 10).map((run) => run.graph_version),
+        ).forEach((version) => getGraphVersion(agent.graph_id, version));
+      });
+    });
+  }, [api, agentID, getGraphVersion, graph]);
+
+  // On first load: select the latest run
+  useEffect(() => {
+    // Only for first load or first execution
+    if (selectedView.id || !isFirstLoad) return;
+    if (agentRuns.length == 0 && agentPresets.length == 0) return;
+
+    setIsFirstLoad(false);
+    if (agentRuns.length > 0) {
+      // select latest run
+      const latestRun = agentRuns.reduce((latest, current) => {
+        if (!latest.started_at && !current.started_at) return latest;
+        if (!latest.started_at) return current;
+        if (!current.started_at) return latest;
+        return latest.started_at > current.started_at ? latest : current;
+      }, agentRuns[0]);
+      selectRun(latestRun.id as GraphExecutionID);
+    } else {
+      // select top preset
+      const latestPreset = agentPresets.toSorted(
+        (a, b) => b.updated_at.getTime() - a.updated_at.getTime(),
+      )[0];
+      selectPreset(latestPreset.id);
+    }
+  }, [
+    isFirstLoad,
+    selectedView.id,
+    agentRuns,
+    agentPresets,
+    selectRun,
+    selectPreset,
+  ]);
+
+  useEffect(() => {
+    if (executionId) {
+      selectRun(executionId as GraphExecutionID);
+      setExecutionId(null);
+    }
+  }, [executionId, selectRun, setExecutionId]);
+
+  // Initial load
+  useEffect(() => {
+    refreshPageData();
+
+    // Show a toast when the WebSocket connection disconnects
+    let connectionToast: ReturnType<typeof toast> | null = null;
+    const cancelDisconnectHandler = api.onWebSocketDisconnect(() => {
+      connectionToast ??= toast({
+        title: "Connection to server was lost",
+        variant: "destructive",
+        description: (
+          <div className="flex items-center">
+            Trying to reconnect...
+            <LoadingSpinner className="ml-1.5 size-3.5" />
+          </div>
+        ),
+        duration: Infinity,
+        dismissable: true,
+      });
+    });
+    const cancelConnectHandler = api.onWebSocketConnect(() => {
+      if (connectionToast)
+        connectionToast.update({
+          id: connectionToast.id,
+          title: "✅ Connection re-established",
+          variant: "default",
+          description: (
+            <div className="flex items-center">
+              Refreshing data...
+              <LoadingSpinner className="ml-1.5 size-3.5" />
+            </div>
+          ),
+          duration: 2000,
+          dismissable: true,
+        });
+      connectionToast = null;
+    });
+    return () => {
+      cancelDisconnectHandler();
+      cancelConnectHandler();
+    };
+  }, []);
+
+  // Subscribe to WebSocket updates for agent runs
+  useEffect(() => {
+    if (!agent?.graph_id) return;
+
+    return api.onWebSocketConnect(() => {
+      refreshPageData(); // Sync up on (re)connect
+
+      // Subscribe to all executions for this agent
+      api.subscribeToGraphExecutions(agent.graph_id);
+    });
+  }, [api, agent?.graph_id, refreshPageData]);
+
+  // Handle execution updates
+  useEffect(() => {
+    const detachExecUpdateHandler = api.onWebSocketMessage(
+      "graph_execution_event",
+      (data) => {
+        if (data.graph_id != agent?.graph_id) return;
+
+        agentRunsQuery.upsertAgentRun(data);
+        if (data.id === selectedView.id) {
+          // Update currently viewed run
+          setSelectedRun(data);
+        }
+      },
+    );
+
+    return () => {
+      detachExecUpdateHandler();
+    };
+  }, [api, agent?.graph_id, selectedView.id]);
+
+  // Pre-load selectedRun based on selectedView
+  useEffect(() => {
+    if (selectedView.type != "run" || !selectedView.id) return;
+
+    const newSelectedRun = agentRuns.find((run) => run.id == selectedView.id);
+    if (selectedView.id !== selectedRun?.id) {
+      // Pull partial data from "cache" while waiting for the rest to load
+      setSelectedRun((newSelectedRun as GraphExecutionMeta) ?? null);
+    }
+  }, [api, selectedView, agentRuns, selectedRun?.id]);
+
+  // Load selectedRun based on selectedView; refresh on agent refresh
+  useEffect(() => {
+    if (selectedView.type != "run" || !selectedView.id || !agent) return;
+
+    api
+      .getGraphExecutionInfo(agent.graph_id, selectedView.id)
+      .then(async (run) => {
+        // Ensure corresponding graph version is available before rendering I/O
+        await getGraphVersion(run.graph_id, run.graph_version);
+        setSelectedRun(run);
+      });
+  }, [api, selectedView, agent, getGraphVersion]);
+
+  const fetchSchedules = useCallback(async () => {
+    if (!agent) return;
+
+    setSchedules(await api.listGraphExecutionSchedules(agent.graph_id));
+  }, [api, agent?.graph_id]);
+
+  useEffect(() => {
+    fetchSchedules();
+  }, [fetchSchedules]);
+
+  // =========================== ACTIONS ============================
+
+  const deleteRun = useCallback(
+    async (run: GraphExecutionMeta) => {
+      if (run.status == "RUNNING" || run.status == "QUEUED") {
+        await api.stopGraphExecution(run.graph_id, run.id);
+      }
+      await api.deleteGraphExecution(run.id);
+
+      setConfirmingDeleteAgentRun(null);
+      if (selectedView.type == "run" && selectedView.id == run.id) {
+        openRunDraftView();
+      }
+      agentRunsQuery.removeAgentRun(run.id);
+    },
+    [api, selectedView, openRunDraftView],
+  );
+
+  const deletePreset = useCallback(
+    async (presetID: LibraryAgentPresetID) => {
+      await api.deleteLibraryAgentPreset(presetID);
+
+      setConfirmingDeleteAgentPreset(null);
+      if (selectedView.type == "preset" && selectedView.id == presetID) {
+        openRunDraftView();
+      }
+      setAgentPresets((presets) => presets.filter((p) => p.id !== presetID));
+    },
+    [api, selectedView, openRunDraftView],
+  );
+
+  const deleteSchedule = useCallback(
+    async (scheduleID: ScheduleID) => {
+      const removedSchedule =
+        await api.deleteGraphExecutionSchedule(scheduleID);
+
+      setSchedules((schedules) => {
+        const newSchedules = schedules.filter(
+          (s) => s.id !== removedSchedule.id,
+        );
+        if (
+          selectedView.type == "schedule" &&
+          selectedView.id == removedSchedule.id
+        ) {
+          if (newSchedules.length > 0) {
+            // Select next schedule if available
+            selectSchedule(newSchedules[0].id);
+          } else {
+            // Reset to draft view if current schedule was deleted
+            openRunDraftView();
+          }
+        }
+        return newSchedules;
+      });
+      openRunDraftView();
+    },
+    [schedules, api],
+  );
+
+  const handleCreatePresetFromRun = useCallback(
+    async (name: string, description: string) => {
+      if (!creatingPresetFromExecutionID) return;
+
+      await api
+        .createLibraryAgentPreset({
+          name,
+          description,
+          graph_execution_id: creatingPresetFromExecutionID,
+        })
+        .then((preset) => {
+          setAgentPresets((prev) => [...prev, preset]);
+          selectPreset(preset.id);
+          setCreatingPresetFromExecutionID(null);
+        })
+        .catch(toastOnFail("create a preset"));
+    },
+    [api, creatingPresetFromExecutionID, selectPreset, toast],
+  );
+
+  const downloadGraph = useCallback(
+    async () =>
+      agent &&
+      // Export sanitized graph from backend
+      api
+        .getGraph(agent.graph_id, agent.graph_version, true)
+        .then((graph) =>
+          exportAsJSONFile(graph, `${graph.name}_v${graph.version}.json`),
+        ),
+    [api, agent],
+  );
+
+  const copyAgent = useCallback(async () => {
+    setCopyAgentDialogOpen(false);
+    api
+      .forkLibraryAgent(agentID)
+      .then((newAgent) => {
+        router.push(`/library/agents/${newAgent.id}`);
+      })
+      .catch((error) => {
+        console.error("Error copying agent:", error);
+        toast({
+          title: "Error copying agent",
+          description: `An error occurred while copying the agent: ${error.message}`,
+          variant: "destructive",
+        });
+      });
+  }, [agentID, api, router, toast]);
+
+  const agentActions: ButtonAction[] = useMemo(
+    () => [
+      {
+        label: "Customize agent",
+        href: `/build?flowID=${agent?.graph_id}&flowVersion=${agent?.graph_version}`,
+        disabled: !agent?.can_access_graph,
+      },
+      { label: "Export agent to file", callback: downloadGraph },
+      ...(!agent?.can_access_graph
+        ? [
+            {
+              label: "Edit a copy",
+              callback: () => setCopyAgentDialogOpen(true),
+            },
+          ]
+        : []),
+      {
+        label: "Delete agent",
+        callback: () => setAgentDeleteDialogOpen(true),
+      },
+    ],
+    [agent, downloadGraph],
+  );
+
+  const runGraph =
+    graphVersions.current[selectedRun?.graph_version ?? 0] ?? graph;
+
+  const onCreateSchedule = useCallback(
+    (schedule: Schedule) => {
+      setSchedules((prev) => [...prev, schedule]);
+      selectSchedule(schedule.id);
+    },
+    [selectView],
+  );
+
+  const onCreatePreset = useCallback(
+    (preset: LibraryAgentPreset) => {
+      setAgentPresets((prev) => [...prev, preset]);
+      selectPreset(preset.id);
+    },
+    [selectPreset],
+  );
+
+  const onUpdatePreset = useCallback(
+    (updated: LibraryAgentPreset) => {
+      setAgentPresets((prev) =>
+        prev.map((p) => (p.id === updated.id ? updated : p)),
+      );
+      selectPreset(updated.id);
+    },
+    [selectPreset],
+  );
+
+  if (!agent || !graph) {
+    return <LoadingBox className="h-[90vh]" />;
+  }
+
+  return (
+    <div className="container justify-stretch p-0 pt-16 lg:flex">
+      {/* Sidebar w/ list of runs */}
+      {/* TODO: render this below header in sm and md layouts */}
+      <AgentRunsSelectorList
+        className="agpt-div w-full border-b pb-2 lg:w-auto lg:border-b-0 lg:border-r lg:pb-0"
+        agent={agent}
+        agentRunsQuery={agentRunsQuery}
+        agentPresets={agentPresets}
+        schedules={schedules}
+        selectedView={selectedView}
+        onSelectRun={selectRun}
+        onSelectPreset={selectPreset}
+        onSelectSchedule={selectSchedule}
+        onSelectDraftNewRun={openRunDraftView}
+        doDeleteRun={setConfirmingDeleteAgentRun}
+        doDeletePreset={setConfirmingDeleteAgentPreset}
+        doDeleteSchedule={deleteSchedule}
+        doCreatePresetFromRun={setCreatingPresetFromExecutionID}
+      />
+
+      <div className="flex-1">
+        {/* Header */}
+        <div className="agpt-div w-full border-b">
+          <h1
+            data-testid="agent-title"
+            className="font-poppins text-3xl font-medium"
+          >
+            {
+              agent.name /* TODO: use dynamic/custom run title - https://github.com/Significant-Gravitas/AutoGPT/issues/9184 */
+            }
+          </h1>
+        </div>
+
+        {/* Run / Schedule views */}
+        {(selectedView.type == "run" && selectedView.id ? (
+          selectedRun && runGraph ? (
+            <AgentRunDetailsView
+              agent={agent}
+              graph={runGraph}
+              run={selectedRun}
+              agentActions={agentActions}
+              onRun={selectRun}
+              doDeleteRun={() => setConfirmingDeleteAgentRun(selectedRun)}
+              doCreatePresetFromRun={() =>
+                setCreatingPresetFromExecutionID(selectedRun.id)
+              }
+            />
+          ) : null
+        ) : selectedView.type == "run" ? (
+          /* Draft new runs / Create new presets */
+          <AgentRunDraftView
+            graph={graph}
+            onRun={selectRun}
+            onCreateSchedule={onCreateSchedule}
+            onCreatePreset={onCreatePreset}
+            agentActions={agentActions}
+            recommendedScheduleCron={agent?.recommended_schedule_cron || null}
+          />
+        ) : selectedView.type == "preset" ? (
+          /* Edit & update presets */
+          <AgentRunDraftView
+            graph={graph}
+            agentPreset={
+              agentPresets.find((preset) => preset.id == selectedView.id)!
+            }
+            onRun={selectRun}
+            recommendedScheduleCron={agent?.recommended_schedule_cron || null}
+            onCreateSchedule={onCreateSchedule}
+            onUpdatePreset={onUpdatePreset}
+            doDeletePreset={setConfirmingDeleteAgentPreset}
+            agentActions={agentActions}
+          />
+        ) : selectedView.type == "schedule" ? (
+          selectedSchedule &&
+          graph && (
+            <AgentScheduleDetailsView
+              graph={graph}
+              schedule={selectedSchedule}
+              // agent={agent}
+              agentActions={agentActions}
+              onForcedRun={selectRun}
+              doDeleteSchedule={deleteSchedule}
+            />
+          )
+        ) : null) || <LoadingBox className="h-[70vh]" />}
+
+        <DeleteConfirmDialog
+          entityType="agent"
+          open={agentDeleteDialogOpen}
+          onOpenChange={setAgentDeleteDialogOpen}
+          onDoDelete={() =>
+            agent &&
+            api.deleteLibraryAgent(agent.id).then(() => router.push("/library"))
+          }
+        />
+
+        <DeleteConfirmDialog
+          entityType="agent run"
+          open={!!confirmingDeleteAgentRun}
+          onOpenChange={(open) => !open && setConfirmingDeleteAgentRun(null)}
+          onDoDelete={() =>
+            confirmingDeleteAgentRun && deleteRun(confirmingDeleteAgentRun)
+          }
+        />
+        <DeleteConfirmDialog
+          entityType={agent.has_external_trigger ? "trigger" : "agent preset"}
+          open={!!confirmingDeleteAgentPreset}
+          onOpenChange={(open) => !open && setConfirmingDeleteAgentPreset(null)}
+          onDoDelete={() =>
+            confirmingDeleteAgentPreset &&
+            deletePreset(confirmingDeleteAgentPreset)
+          }
+        />
+        {/* Copy agent confirmation dialog */}
+        <Dialog
+          onOpenChange={setCopyAgentDialogOpen}
+          open={copyAgentDialogOpen}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>You&apos;re making an editable copy</DialogTitle>
+              <DialogDescription className="pt-2">
+                The original Marketplace agent stays the same and cannot be
+                edited. We&apos;ll save a new version of this agent to your
+                Library. From there, you can customize it however you&apos;d
+                like by clicking &quot;Customize agent&quot; — this will open
+                the builder where you can see and modify the inner workings.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="justify-end">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setCopyAgentDialogOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="button" onClick={copyAgent}>
+                Continue
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+        <CreatePresetDialog
+          open={!!creatingPresetFromExecutionID}
+          onOpenChange={() => setCreatingPresetFromExecutionID(null)}
+          onConfirm={handleCreatePresetFromRun}
+        />
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx
@@ -0,0 +1,445 @@
+"use client";
+import { format, formatDistanceToNow, formatDistanceStrict } from "date-fns";
+import React, { useCallback, useMemo, useEffect } from "react";
+
+import {
+  Graph,
+  GraphExecution,
+  GraphExecutionID,
+  GraphExecutionMeta,
+  LibraryAgent,
+} from "@/lib/autogpt-server-api";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+
+import ActionButtonGroup from "@/components/__legacy__/action-button-group";
+import type { ButtonAction } from "@/components/__legacy__/types";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import {
+  IconRefresh,
+  IconSquare,
+  IconCircleAlert,
+} from "@/components/__legacy__/ui/icons";
+import { Input } from "@/components/__legacy__/ui/input";
+import LoadingBox from "@/components/__legacy__/ui/loading";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { useToastOnFail } from "@/components/molecules/Toast/use-toast";
+
+import { AgentRunStatus, agentRunStatusMap } from "./agent-run-status-chip";
+import useCredits from "@/hooks/useCredits";
+import { AgentRunOutputView } from "./agent-run-output-view";
+import { analytics } from "@/services/analytics";
+import { PendingReviewsList } from "@/components/organisms/PendingReviewsList/PendingReviewsList";
+import { usePendingReviewsForExecution } from "@/hooks/usePendingReviews";
+
+export function AgentRunDetailsView({
+  agent,
+  graph,
+  run,
+  agentActions,
+  onRun,
+  doDeleteRun,
+  doCreatePresetFromRun,
+}: {
+  agent: LibraryAgent;
+  graph: Graph;
+  run: GraphExecution | GraphExecutionMeta;
+  agentActions: ButtonAction[];
+  onRun: (runID: GraphExecutionID) => void;
+  doDeleteRun: () => void;
+  doCreatePresetFromRun: () => void;
+}): React.ReactNode {
+  const api = useBackendAPI();
+  const { formatCredits } = useCredits();
+
+  const runStatus: AgentRunStatus = useMemo(
+    () => agentRunStatusMap[run.status],
+    [run],
+  );
+
+  const {
+    pendingReviews,
+    isLoading: reviewsLoading,
+    refetch: refetchReviews,
+  } = usePendingReviewsForExecution(run.id);
+
+  const toastOnFail = useToastOnFail();
+
+  // Refetch pending reviews when execution status changes to REVIEW
+  useEffect(() => {
+    if (runStatus === "review" && run.id) {
+      refetchReviews();
+    }
+  }, [runStatus, run.id, refetchReviews]);
+
+  const infoStats: { label: string; value: React.ReactNode }[] = useMemo(() => {
+    if (!run) return [];
+    return [
+      {
+        label: "Status",
+        value: runStatus.charAt(0).toUpperCase() + runStatus.slice(1),
+      },
+      {
+        label: "Started",
+        value: run.started_at
+          ? `${formatDistanceToNow(run.started_at, { addSuffix: true })}, ${format(run.started_at, "HH:mm")}`
+          : "—",
+      },
+      ...(run.stats
+        ? [
+            {
+              label: "Duration",
+              value: formatDistanceStrict(0, run.stats.duration * 1000),
+            },
+            { label: "Steps", value: run.stats.node_exec_count },
+            { label: "Cost", value: formatCredits(run.stats.cost) },
+          ]
+        : []),
+    ];
+  }, [run, runStatus, formatCredits]);
+
+  const agentRunInputs:
+    | Record<
+        string,
+        {
+          title?: string;
+          /* type: BlockIOSubType; */
+          value: string | number | undefined;
+        }
+      >
+    | undefined = useMemo(() => {
+    if (!run.inputs) return undefined;
+    // TODO: show (link to) preset - https://github.com/Significant-Gravitas/AutoGPT/issues/9168
+
+    // Add type info from agent input schema
+    return Object.fromEntries(
+      Object.entries(run.inputs).map(([k, v]) => [
+        k,
+        {
+          title: graph.input_schema.properties[k]?.title,
+          // type: graph.input_schema.properties[k].type, // TODO: implement typed graph inputs
+          value: typeof v == "object" ? JSON.stringify(v, undefined, 2) : v,
+        },
+      ]),
+    );
+  }, [graph, run]);
+
+  const runAgain = useCallback(() => {
+    if (
+      !run.inputs ||
+      !(graph.credentials_input_schema?.required ?? []).every(
+        (k) => k in (run.credential_inputs ?? {}),
+      )
+    )
+      return;
+
+    if (run.preset_id) {
+      return api
+        .executeLibraryAgentPreset(
+          run.preset_id,
+          run.inputs!,
+          run.credential_inputs!,
+        )
+        .then(({ id }) => {
+          analytics.sendDatafastEvent("run_agent", {
+            name: graph.name,
+            id: graph.id,
+          });
+          onRun(id);
+        })
+        .catch(toastOnFail("execute agent preset"));
+    }
+
+    return api
+      .executeGraph(
+        graph.id,
+        graph.version,
+        run.inputs!,
+        run.credential_inputs!,
+        "library",
+      )
+      .then(({ id }) => {
+        analytics.sendDatafastEvent("run_agent", {
+          name: graph.name,
+          id: graph.id,
+        });
+        onRun(id);
+      })
+      .catch(toastOnFail("execute agent"));
+  }, [api, graph, run, onRun, toastOnFail]);
+
+  const stopRun = useCallback(
+    () => api.stopGraphExecution(graph.id, run.id),
+    [api, graph.id, run.id],
+  );
+
+  const agentRunOutputs:
+    | Record<
+        string,
+        {
+          title?: string;
+          /* type: BlockIOSubType; */
+          values: Array<React.ReactNode>;
+        }
+      >
+    | null
+    | undefined = useMemo(() => {
+    if (!("outputs" in run)) return undefined;
+    if (!["running", "success", "failed", "stopped"].includes(runStatus))
+      return null;
+
+    // Add type info from agent input schema
+    return Object.fromEntries(
+      Object.entries(run.outputs).map(([k, vv]) => [
+        k,
+        {
+          title: graph.output_schema.properties[k].title,
+          /* type: agent.output_schema.properties[k].type */
+          values: vv.map((v) =>
+            typeof v == "object" ? JSON.stringify(v, undefined, 2) : v,
+          ),
+        },
+      ]),
+    );
+  }, [graph, run, runStatus]);
+
+  const runActions: ButtonAction[] = useMemo(
+    () => [
+      ...(["running", "queued"].includes(runStatus)
+        ? ([
+            {
+              label: (
+                <>
+                  <IconSquare className="mr-2 size-4" />
+                  Stop run
+                </>
+              ),
+              variant: "secondary",
+              callback: stopRun,
+            },
+          ] satisfies ButtonAction[])
+        : []),
+      ...(["success", "failed", "stopped"].includes(runStatus) &&
+      !graph.has_external_trigger &&
+      (graph.credentials_input_schema?.required ?? []).every(
+        (k) => k in (run.credential_inputs ?? {}),
+      )
+        ? [
+            {
+              label: (
+                <>
+                  <IconRefresh className="mr-2 size-4" />
+                  Run again
+                </>
+              ),
+              callback: runAgain,
+              dataTestId: "run-again-button",
+            },
+          ]
+        : []),
+      ...(agent.can_access_graph
+        ? [
+            {
+              label: "Open run in builder",
+              href: `/build?flowID=${run.graph_id}&flowVersion=${run.graph_version}&flowExecutionID=${run.id}`,
+            },
+          ]
+        : []),
+      { label: "Create preset from run", callback: doCreatePresetFromRun },
+      { label: "Delete run", variant: "secondary", callback: doDeleteRun },
+    ],
+    [
+      runStatus,
+      runAgain,
+      stopRun,
+      doDeleteRun,
+      doCreatePresetFromRun,
+      graph.has_external_trigger,
+      graph.credentials_input_schema?.required,
+      agent.can_access_graph,
+      run.graph_id,
+      run.graph_version,
+      run.id,
+    ],
+  );
+
+  return (
+    <div className="agpt-div flex gap-6">
+      <div className="flex flex-1 flex-col gap-4">
+        <Card className="agpt-box">
+          <CardHeader>
+            <CardTitle className="font-poppins text-lg">Info</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <div className="flex justify-stretch gap-4">
+              {infoStats.map(({ label, value }) => (
+                <div key={label} className="flex-1">
+                  <p className="text-sm font-medium text-black">{label}</p>
+                  <p className="text-sm text-neutral-600">{value}</p>
+                </div>
+              ))}
+            </div>
+            {run.status === "FAILED" && (
+              <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
+                <p className="text-sm text-red-800 dark:text-red-200">
+                  <strong>Error:</strong>{" "}
+                  {run.stats?.error ||
+                    "The execution failed due to an internal error. You can re-run the agent to retry."}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Smart Agent Execution Summary */}
+        {run.stats?.activity_status && (
+          <Card className="agpt-box">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 font-poppins text-lg">
+                Task Summary
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <IconCircleAlert className="size-4 cursor-help text-neutral-500 hover:text-neutral-700" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="max-w-xs">
+                        This AI-generated summary describes how the agent
+                        handled your task. It’s an experimental feature and may
+                        occasionally be inaccurate.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-sm leading-relaxed text-neutral-700">
+                {run.stats.activity_status}
+              </p>
+
+              {/* Correctness Score */}
+              {typeof run.stats.correctness_score === "number" && (
+                <div className="flex items-center gap-3 rounded-lg bg-neutral-50 p-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-neutral-600">
+                      Success Estimate:
+                    </span>
+                    <div className="flex items-center gap-2">
+                      <div className="relative h-2 w-16 overflow-hidden rounded-full bg-neutral-200">
+                        <div
+                          className={`h-full transition-all ${
+                            run.stats.correctness_score >= 0.8
+                              ? "bg-green-500"
+                              : run.stats.correctness_score >= 0.6
+                                ? "bg-yellow-500"
+                                : run.stats.correctness_score >= 0.4
+                                  ? "bg-orange-500"
+                                  : "bg-red-500"
+                          }`}
+                          style={{
+                            width: `${Math.round(run.stats.correctness_score * 100)}%`,
+                          }}
+                        />
+                      </div>
+                      <span className="text-sm font-medium">
+                        {Math.round(run.stats.correctness_score * 100)}%
+                      </span>
+                    </div>
+                  </div>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <IconCircleAlert className="size-4 cursor-help text-neutral-400 hover:text-neutral-600" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p className="max-w-xs">
+                          AI-generated estimate of how well this execution
+                          achieved its intended purpose. This score indicates
+                          {run.stats.correctness_score >= 0.8
+                            ? " the agent was highly successful."
+                            : run.stats.correctness_score >= 0.6
+                              ? " the agent was mostly successful with minor issues."
+                              : run.stats.correctness_score >= 0.4
+                                ? " the agent was partially successful with some gaps."
+                                : " the agent had limited success with significant issues."}
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {agentRunOutputs !== null && (
+          <AgentRunOutputView agentRunOutputs={agentRunOutputs} />
+        )}
+
+        {/* Pending Reviews Section */}
+        {runStatus === "review" && (
+          <Card className="agpt-box">
+            <CardHeader>
+              <CardTitle className="font-poppins text-lg">
+                Pending Reviews ({pendingReviews.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {reviewsLoading ? (
+                <LoadingBox spinnerSize={12} className="h-24" />
+              ) : pendingReviews.length > 0 ? (
+                <PendingReviewsList
+                  reviews={pendingReviews}
+                  onReviewComplete={refetchReviews}
+                  emptyMessage="No pending reviews for this execution"
+                />
+              ) : (
+                <div className="py-4 text-neutral-600">
+                  No pending reviews for this execution
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card className="agpt-box">
+          <CardHeader>
+            <CardTitle className="font-poppins text-lg">Input</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            {agentRunInputs !== undefined ? (
+              Object.entries(agentRunInputs).map(([key, { title, value }]) => (
+                <div key={key} className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{title || key}</label>
+                  <Input value={value} className="rounded-full" disabled />
+                </div>
+              ))
+            ) : (
+              <LoadingBox spinnerSize={12} className="h-24" />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Run / Agent Actions */}
+      <aside className="w-48 xl:w-56">
+        <div className="flex flex-col gap-8">
+          <ActionButtonGroup title="Run actions" actions={runActions} />
+
+          <ActionButtonGroup title="Agent actions" actions={agentActions} />
+        </div>
+      </aside>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
@@ -20,7 +20,7 @@ import {
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";

 import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentInputs/RunAgentInputs";
-import { ScheduleTaskDialog } from "@/components/contextual/CronScheduler/cron-scheduler-dialog";
+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 {
@@ -53,10 +53,7 @@ import { ClockIcon, CopyIcon, InfoIcon } from "@phosphor-icons/react";
 import { CalendarClockIcon, Trash2Icon } from "lucide-react";

 import { analytics } from "@/services/analytics";
-import {
-  AgentStatus,
-  AgentStatusChip,
-} from "@/app/(platform)/build/components/legacy-builder/agent-status-chip";
+import { AgentStatus, AgentStatusChip } from "./agent-status-chip";

 export function AgentRunDraftView({
  graph,
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-output-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-output-view.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import React, { useMemo } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+
+import LoadingBox from "@/components/__legacy__/ui/loading";
+import type { OutputMetadata } from "../../../../../../../../components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputActions,
+  OutputItem,
+} from "../../../../../../../../components/contextual/OutputRenderers";
+
+export function AgentRunOutputView({
+  agentRunOutputs,
+}: {
+  agentRunOutputs:
+    | Record<
+        string,
+        {
+          title?: string;
+          /* type: BlockIOSubType; */
+          values: Array<React.ReactNode>;
+        }
+      >
+    | undefined;
+}) {
+  const enableEnhancedOutputHandling = useGetFlag(
+    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
+  );
+
+  // Prepare items for the renderer system
+  const outputItems = useMemo(() => {
+    if (!agentRunOutputs) return [];
+
+    const items: Array<{
+      key: string;
+      label: string;
+      value: unknown;
+      metadata?: OutputMetadata;
+      renderer: any;
+    }> = [];
+
+    Object.entries(agentRunOutputs).forEach(([key, { title, values }]) => {
+      values.forEach((value, index) => {
+        // Enhanced metadata extraction
+        const metadata: OutputMetadata = {};
+
+        // Type guard to safely access properties
+        if (
+          typeof value === "object" &&
+          value !== null &&
+          !React.isValidElement(value)
+        ) {
+          const objValue = value as any;
+          if (objValue.type) metadata.type = objValue.type;
+          if (objValue.mimeType) metadata.mimeType = objValue.mimeType;
+          if (objValue.filename) metadata.filename = objValue.filename;
+        }
+
+        const renderer = globalRegistry.getRenderer(value, metadata);
+        if (renderer) {
+          items.push({
+            key: `${key}-${index}`,
+            label: index === 0 ? title || key : "",
+            value,
+            metadata,
+            renderer,
+          });
+        } else {
+          const textRenderer = globalRegistry
+            .getAllRenderers()
+            .find((r) => r.name === "TextRenderer");
+          if (textRenderer) {
+            items.push({
+              key: `${key}-${index}`,
+              label: index === 0 ? title || key : "",
+              value: JSON.stringify(value, null, 2),
+              metadata,
+              renderer: textRenderer,
+            });
+          }
+        }
+      });
+    });
+
+    return items;
+  }, [agentRunOutputs]);
+
+  return (
+    <>
+      {enableEnhancedOutputHandling ? (
+        <Card className="agpt-box" style={{ maxWidth: "950px" }}>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="font-poppins text-lg">Output</CardTitle>
+              {outputItems.length > 0 && (
+                <OutputActions
+                  items={outputItems.map((item) => ({
+                    value: item.value,
+                    metadata: item.metadata,
+                    renderer: item.renderer,
+                  }))}
+                />
+              )}
+            </div>
+          </CardHeader>
+
+          <CardContent
+            className="flex flex-col gap-4"
+            style={{ maxWidth: "660px" }}
+          >
+            {agentRunOutputs !== undefined ? (
+              outputItems.length > 0 ? (
+                outputItems.map((item) => (
+                  <OutputItem
+                    key={item.key}
+                    value={item.value}
+                    metadata={item.metadata}
+                    renderer={item.renderer}
+                    label={item.label}
+                  />
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  No outputs to display
+                </p>
+              )
+            ) : (
+              <LoadingBox spinnerSize={12} className="h-24" />
+            )}
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="agpt-box" style={{ maxWidth: "950px" }}>
+          <CardHeader>
+            <CardTitle className="font-poppins text-lg">Output</CardTitle>
+          </CardHeader>
+
+          <CardContent
+            className="flex flex-col gap-4"
+            style={{ maxWidth: "660px" }}
+          >
+            {agentRunOutputs !== undefined ? (
+              Object.entries(agentRunOutputs).map(
+                ([key, { title, values }]) => (
+                  <div key={key} className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">
+                      {title || key}
+                    </label>
+                    {values.map((value, i) => (
+                      <p
+                        className="resize-none overflow-x-auto whitespace-pre-wrap break-words border-none text-sm text-neutral-700 disabled:cursor-not-allowed"
+                        key={i}
+                      >
+                        {value}
+                      </p>
+                    ))}
+                    {/* TODO: pretty type-dependent rendering */}
+                  </div>
+                ),
+              )
+            ) : (
+              <LoadingBox spinnerSize={12} className="h-24" />
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-status-chip.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-status-chip.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+import { Badge } from "@/components/__legacy__/ui/badge";
+
+import { GraphExecutionMeta } from "@/lib/autogpt-server-api/types";
+
+export type AgentRunStatus =
+  | "success"
+  | "failed"
+  | "queued"
+  | "running"
+  | "stopped"
+  | "scheduled"
+  | "draft"
+  | "review";
+
+export const agentRunStatusMap: Record<
+  GraphExecutionMeta["status"],
+  AgentRunStatus
+> = {
+  INCOMPLETE: "draft",
+  COMPLETED: "success",
+  FAILED: "failed",
+  QUEUED: "queued",
+  RUNNING: "running",
+  TERMINATED: "stopped",
+  REVIEW: "review",
+};
+
+const statusData: Record<
+  AgentRunStatus,
+  { label: string; variant: keyof typeof statusStyles }
+> = {
+  success: { label: "Success", variant: "success" },
+  running: { label: "Running", variant: "info" },
+  failed: { label: "Failed", variant: "destructive" },
+  queued: { label: "Queued", variant: "warning" },
+  draft: { label: "Draft", variant: "secondary" },
+  stopped: { label: "Stopped", variant: "secondary" },
+  scheduled: { label: "Scheduled", variant: "secondary" },
+  review: { label: "In Review", variant: "warning" },
+};
+
+const statusStyles = {
+  success:
+    "bg-green-100 text-green-800 hover:bg-green-100 hover:text-green-800",
+  destructive: "bg-red-100 text-red-800 hover:bg-red-100 hover:text-red-800",
+  warning:
+    "bg-yellow-100 text-yellow-800 hover:bg-yellow-100 hover:text-yellow-800",
+  info: "bg-blue-100 text-blue-800 hover:bg-blue-100 hover:text-blue-800",
+  secondary:
+    "bg-slate-100 text-slate-800 hover:bg-slate-100 hover:text-slate-800",
+};
+
+export function AgentRunStatusChip({
+  status,
+}: {
+  status: AgentRunStatus;
+}): React.ReactElement {
+  return (
+    <Badge
+      variant="secondary"
+      className={`text-xs font-medium ${statusStyles[statusData[status]?.variant]} rounded-[45px] px-[9px] py-[3px]`}
+    >
+      {statusData[status]?.label}
+    </Badge>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+import { formatDistanceToNow, isPast } from "date-fns";
+
+import { cn } from "@/lib/utils";
+
+import { Link2Icon, Link2OffIcon, MoreVertical } from "lucide-react";
+import { Card, CardContent } from "@/components/__legacy__/ui/card";
+import { Button } from "@/components/__legacy__/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/__legacy__/ui/dropdown-menu";
+
+import { AgentStatus, AgentStatusChip } from "./agent-status-chip";
+import { AgentRunStatus, AgentRunStatusChip } from "./agent-run-status-chip";
+import { PushPinSimpleIcon } from "@phosphor-icons/react";
+
+export type AgentRunSummaryProps = (
+  | {
+      type: "run";
+      status: AgentRunStatus;
+    }
+  | {
+      type: "preset";
+      status?: undefined;
+    }
+  | {
+      type: "preset.triggered";
+      status: AgentStatus;
+    }
+  | {
+      type: "schedule";
+      status: "scheduled";
+    }
+) & {
+  title: string;
+  timestamp?: number | Date;
+  selected?: boolean;
+  onClick?: () => void;
+  // onRename: () => void;
+  onDelete: () => void;
+  onPinAsPreset?: () => void;
+  className?: string;
+};
+
+export function AgentRunSummaryCard({
+  type,
+  status,
+  title,
+  timestamp,
+  selected = false,
+  onClick,
+  // onRename,
+  onDelete,
+  onPinAsPreset,
+  className,
+}: AgentRunSummaryProps): React.ReactElement {
+  return (
+    <Card
+      className={cn(
+        "agpt-rounded-card cursor-pointer border-zinc-300",
+        selected ? "agpt-card-selected" : "",
+        className,
+      )}
+      onClick={onClick}
+    >
+      <CardContent className="relative p-2.5 lg:p-4">
+        {(type == "run" || type == "schedule") && (
+          <AgentRunStatusChip status={status} />
+        )}
+        {type == "preset" && (
+          <div className="flex items-center text-sm font-medium text-neutral-700">
+            <PushPinSimpleIcon className="mr-1 size-4 text-foreground" /> Preset
+          </div>
+        )}
+        {type == "preset.triggered" && (
+          <div className="flex items-center justify-between">
+            <AgentStatusChip status={status} />
+
+            <div className="flex items-center text-sm font-medium text-neutral-700">
+              {status == "inactive" ? (
+                <Link2OffIcon className="mr-1 size-4 text-foreground" />
+              ) : (
+                <Link2Icon className="mr-1 size-4 text-foreground" />
+              )}{" "}
+              Trigger
+            </div>
+          </div>
+        )}
+
+        <div className="mt-5 flex items-center justify-between">
+          <h3 className="truncate pr-2 text-base font-medium text-neutral-900">
+            {title}
+          </h3>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-5 w-5 p-0">
+                <MoreVertical className="h-5 w-5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {onPinAsPreset && (
+                <DropdownMenuItem onClick={onPinAsPreset}>
+                  Pin as a preset
+                </DropdownMenuItem>
+              )}
+
+              {/* <DropdownMenuItem onClick={onRename}>Rename</DropdownMenuItem> */}
+
+              <DropdownMenuItem onClick={onDelete}>Delete</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {timestamp && (
+          <p
+            className="mt-1 text-sm font-normal text-neutral-500"
+            title={new Date(timestamp).toString()}
+          >
+            {isPast(timestamp) ? "Ran" : "Runs in"}{" "}
+            {formatDistanceToNow(timestamp, { addSuffix: true })}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-runs-selector-list.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-runs-selector-list.tsx
@@ -0,0 +1,237 @@
+"use client";
+import { Plus } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import {
+  GraphExecutionID,
+  GraphExecutionMeta,
+  LibraryAgent,
+  LibraryAgentPreset,
+  LibraryAgentPresetID,
+  Schedule,
+  ScheduleID,
+} from "@/lib/autogpt-server-api";
+import { cn } from "@/lib/utils";
+
+import { Badge } from "@/components/__legacy__/ui/badge";
+import { Button } from "@/components/atoms/Button/Button";
+import LoadingBox, { LoadingSpinner } from "@/components/__legacy__/ui/loading";
+import { Separator } from "@/components/__legacy__/ui/separator";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll";
+import { AgentRunsQuery } from "../use-agent-runs";
+import { agentRunStatusMap } from "./agent-run-status-chip";
+import { AgentRunSummaryCard } from "./agent-run-summary-card";
+
+interface AgentRunsSelectorListProps {
+  agent: LibraryAgent;
+  agentRunsQuery: AgentRunsQuery;
+  agentPresets: LibraryAgentPreset[];
+  schedules: Schedule[];
+  selectedView: { type: "run" | "preset" | "schedule"; id?: string };
+  allowDraftNewRun?: boolean;
+  onSelectRun: (id: GraphExecutionID) => void;
+  onSelectPreset: (preset: LibraryAgentPresetID) => void;
+  onSelectSchedule: (id: ScheduleID) => void;
+  onSelectDraftNewRun: () => void;
+  doDeleteRun: (id: GraphExecutionMeta) => void;
+  doDeletePreset: (id: LibraryAgentPresetID) => void;
+  doDeleteSchedule: (id: ScheduleID) => void;
+  doCreatePresetFromRun?: (id: GraphExecutionID) => void;
+  className?: string;
+}
+
+export function AgentRunsSelectorList({
+  agent,
+  agentRunsQuery: {
+    agentRuns,
+    agentRunCount,
+    agentRunsLoading,
+    hasMoreRuns,
+    fetchMoreRuns,
+    isFetchingMoreRuns,
+  },
+  agentPresets,
+  schedules,
+  selectedView,
+  allowDraftNewRun = true,
+  onSelectRun,
+  onSelectPreset,
+  onSelectSchedule,
+  onSelectDraftNewRun,
+  doDeleteRun,
+  doDeletePreset,
+  doDeleteSchedule,
+  doCreatePresetFromRun,
+  className,
+}: AgentRunsSelectorListProps): React.ReactElement {
+  const [activeListTab, setActiveListTab] = useState<"runs" | "scheduled">(
+    "runs",
+  );
+
+  useEffect(() => {
+    if (selectedView.type === "schedule") {
+      setActiveListTab("scheduled");
+    } else {
+      setActiveListTab("runs");
+    }
+  }, [selectedView]);
+
+  const listItemClasses = "h-28 w-72 lg:w-full lg:h-32";
+
+  return (
+    <aside className={cn("flex flex-col gap-4", className)}>
+      {allowDraftNewRun ? (
+        <Button
+          className={"mb-4 hidden lg:flex"}
+          onClick={onSelectDraftNewRun}
+          leftIcon={<Plus className="h-6 w-6" />}
+        >
+          New {agent.has_external_trigger ? "trigger" : "run"}
+        </Button>
+      ) : null}
+
+      <div className="flex gap-2">
+        <Badge
+          variant={activeListTab === "runs" ? "secondary" : "outline"}
+          className="cursor-pointer gap-2 rounded-full text-base"
+          onClick={() => setActiveListTab("runs")}
+        >
+          <span>Runs</span>
+          <span className="text-neutral-600">
+            {agentRunCount ?? <LoadingSpinner className="size-4" />}
+          </span>
+        </Badge>
+
+        <Badge
+          variant={activeListTab === "scheduled" ? "secondary" : "outline"}
+          className="cursor-pointer gap-2 rounded-full text-base"
+          onClick={() => setActiveListTab("scheduled")}
+        >
+          <span>Scheduled</span>
+          <span className="text-neutral-600">{schedules.length}</span>
+        </Badge>
+      </div>
+
+      {/* Runs / Schedules list */}
+      {agentRunsLoading && activeListTab === "runs" ? (
+        <LoadingBox className="h-28 w-full lg:h-[calc(100vh-300px)] lg:w-72 xl:w-80" />
+      ) : (
+        <ScrollArea
+          className="w-full lg:h-[calc(100vh-300px)] lg:w-72 xl:w-80"
+          orientation={window.innerWidth >= 1024 ? "vertical" : "horizontal"}
+        >
+          <InfiniteScroll
+            direction={window.innerWidth >= 1024 ? "vertical" : "horizontal"}
+            hasNextPage={hasMoreRuns}
+            fetchNextPage={fetchMoreRuns}
+            isFetchingNextPage={isFetchingMoreRuns}
+          >
+            <div className="flex items-center gap-2 lg:flex-col">
+              {/* New Run button - only in small layouts */}
+              {allowDraftNewRun && (
+                <Button
+                  size="large"
+                  className={
+                    "flex h-12 w-40 items-center gap-2 py-6 lg:hidden " +
+                    (selectedView.type == "run" && !selectedView.id
+                      ? "agpt-card-selected text-accent"
+                      : "")
+                  }
+                  onClick={onSelectDraftNewRun}
+                  leftIcon={<Plus className="h-6 w-6" />}
+                >
+                  New {agent.has_external_trigger ? "trigger" : "run"}
+                </Button>
+              )}
+
+              {activeListTab === "runs" ? (
+                <>
+                  {agentPresets
+                    .filter((preset) => preset.webhook) // Triggers
+                    .toSorted(
+                      (a, b) => b.updated_at.getTime() - a.updated_at.getTime(),
+                    )
+                    .map((preset) => (
+                      <AgentRunSummaryCard
+                        className={cn(listItemClasses, "lg:h-auto")}
+                        key={preset.id}
+                        type="preset.triggered"
+                        status={preset.is_active ? "active" : "inactive"}
+                        title={preset.name}
+                        // timestamp={preset.last_run_time} // TODO: implement this
+                        selected={selectedView.id === preset.id}
+                        onClick={() => onSelectPreset(preset.id)}
+                        onDelete={() => doDeletePreset(preset.id)}
+                      />
+                    ))}
+                  {agentPresets
+                    .filter((preset) => !preset.webhook) // Presets
+                    .toSorted(
+                      (a, b) => b.updated_at.getTime() - a.updated_at.getTime(),
+                    )
+                    .map((preset) => (
+                      <AgentRunSummaryCard
+                        className={cn(listItemClasses, "lg:h-auto")}
+                        key={preset.id}
+                        type="preset"
+                        title={preset.name}
+                        // timestamp={preset.last_run_time} // TODO: implement this
+                        selected={selectedView.id === preset.id}
+                        onClick={() => onSelectPreset(preset.id)}
+                        onDelete={() => doDeletePreset(preset.id)}
+                      />
+                    ))}
+                  {agentPresets.length > 0 && <Separator className="my-1" />}
+                  {agentRuns
+                    .toSorted((a, b) => {
+                      const aTime = a.started_at?.getTime() ?? 0;
+                      const bTime = b.started_at?.getTime() ?? 0;
+                      return bTime - aTime;
+                    })
+                    .map((run) => (
+                      <AgentRunSummaryCard
+                        className={listItemClasses}
+                        key={run.id}
+                        type="run"
+                        status={agentRunStatusMap[run.status]}
+                        title={
+                          (run.preset_id
+                            ? agentPresets.find((p) => p.id == run.preset_id)
+                                ?.name
+                            : null) ?? agent.name
+                        }
+                        timestamp={run.started_at ?? undefined}
+                        selected={selectedView.id === run.id}
+                        onClick={() => onSelectRun(run.id)}
+                        onDelete={() => doDeleteRun(run as GraphExecutionMeta)}
+                        onPinAsPreset={
+                          doCreatePresetFromRun
+                            ? () => doCreatePresetFromRun(run.id)
+                            : undefined
+                        }
+                      />
+                    ))}
+                </>
+              ) : (
+                schedules.map((schedule) => (
+                  <AgentRunSummaryCard
+                    className={listItemClasses}
+                    key={schedule.id}
+                    type="schedule"
+                    status="scheduled" // TODO: implement active/inactive status for schedules
+                    title={schedule.name}
+                    timestamp={schedule.next_run_time}
+                    selected={selectedView.id === schedule.id}
+                    onClick={() => onSelectSchedule(schedule.id)}
+                    onDelete={() => doDeleteSchedule(schedule.id)}
+                  />
+                ))
+              )}
+            </div>
+          </InfiniteScroll>
+        </ScrollArea>
+      )}
+    </aside>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx
@@ -0,0 +1,180 @@
+"use client";
+import React, { useCallback, useMemo } from "react";
+
+import {
+  Graph,
+  GraphExecutionID,
+  Schedule,
+  ScheduleID,
+} from "@/lib/autogpt-server-api";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+
+import ActionButtonGroup from "@/components/__legacy__/action-button-group";
+import type { ButtonAction } from "@/components/__legacy__/types";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import { IconCross } from "@/components/__legacy__/ui/icons";
+import { Input } from "@/components/__legacy__/ui/input";
+import LoadingBox from "@/components/__legacy__/ui/loading";
+import { useToastOnFail } from "@/components/molecules/Toast/use-toast";
+import { humanizeCronExpression } from "@/lib/cron-expression-utils";
+import { formatScheduleTime } from "@/lib/timezone-utils";
+import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
+import { PlayIcon } from "lucide-react";
+
+import { AgentRunStatus } from "./agent-run-status-chip";
+
+export function AgentScheduleDetailsView({
+  graph,
+  schedule,
+  agentActions,
+  onForcedRun,
+  doDeleteSchedule,
+}: {
+  graph: Graph;
+  schedule: Schedule;
+  agentActions: ButtonAction[];
+  onForcedRun: (runID: GraphExecutionID) => void;
+  doDeleteSchedule: (scheduleID: ScheduleID) => void;
+}): React.ReactNode {
+  const api = useBackendAPI();
+
+  const selectedRunStatus: AgentRunStatus = "scheduled";
+
+  const toastOnFail = useToastOnFail();
+
+  // Get user's timezone for displaying schedule times
+  const userTimezone = useUserTimezone();
+
+  const infoStats: { label: string; value: React.ReactNode }[] = useMemo(() => {
+    return [
+      {
+        label: "Status",
+        value:
+          selectedRunStatus.charAt(0).toUpperCase() +
+          selectedRunStatus.slice(1),
+      },
+      {
+        label: "Schedule",
+        value: humanizeCronExpression(schedule.cron),
+      },
+      {
+        label: "Next run",
+        value: formatScheduleTime(schedule.next_run_time, userTimezone),
+      },
+    ];
+  }, [schedule, selectedRunStatus, userTimezone]);
+
+  const agentRunInputs: Record<
+    string,
+    { title?: string; /* type: BlockIOSubType; */ value: any }
+  > = useMemo(() => {
+    // TODO: show (link to) preset - https://github.com/Significant-Gravitas/AutoGPT/issues/9168
+
+    // Add type info from agent input schema
+    return Object.fromEntries(
+      Object.entries(schedule.input_data).map(([k, v]) => [
+        k,
+        {
+          title: graph.input_schema.properties[k].title,
+          /* TODO: type: agent.input_schema.properties[k].type */
+          value: v,
+        },
+      ]),
+    );
+  }, [graph, schedule]);
+
+  const runNow = useCallback(
+    () =>
+      api
+        .executeGraph(
+          graph.id,
+          graph.version,
+          schedule.input_data,
+          schedule.input_credentials,
+          "library",
+        )
+        .then((run) => onForcedRun(run.id))
+        .catch(toastOnFail("execute agent")),
+    [api, graph, schedule, onForcedRun, toastOnFail],
+  );
+
+  const runActions: ButtonAction[] = useMemo(
+    () => [
+      {
+        label: (
+          <>
+            <PlayIcon className="mr-2 size-4" />
+            Run now
+          </>
+        ),
+        callback: runNow,
+      },
+      {
+        label: (
+          <>
+            <IconCross className="mr-2 size-4 px-0.5" />
+            Delete schedule
+          </>
+        ),
+        callback: () => doDeleteSchedule(schedule.id),
+        variant: "destructive",
+      },
+    ],
+    [runNow],
+  );
+
+  return (
+    <div className="agpt-div flex gap-6">
+      <div className="flex flex-1 flex-col gap-4">
+        <Card className="agpt-box">
+          <CardHeader>
+            <CardTitle className="font-poppins text-lg">Info</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <div className="flex justify-stretch gap-4">
+              {infoStats.map(({ label, value }) => (
+                <div key={label} className="flex-1">
+                  <p className="text-sm font-medium text-black">{label}</p>
+                  <p className="text-sm text-neutral-600">{value}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="agpt-box">
+          <CardHeader>
+            <CardTitle className="font-poppins text-lg">Input</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            {agentRunInputs !== undefined ? (
+              Object.entries(agentRunInputs).map(([key, { title, value }]) => (
+                <div key={key} className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{title || key}</label>
+                  <Input value={value} className="rounded-full" disabled />
+                </div>
+              ))
+            ) : (
+              <LoadingBox spinnerSize={12} className="h-24" />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Run / Agent Actions */}
+      <aside className="w-48 xl:w-56">
+        <div className="flex flex-col gap-8">
+          <ActionButtonGroup title="Run actions" actions={runActions} />
+
+          <ActionButtonGroup title="Agent actions" actions={agentActions} />
+        </div>
+      </aside>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-status-chip.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-status-chip.tsx
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/create-preset-dialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/create-preset-dialog.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/__legacy__/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/__legacy__/ui/dialog";
+import { Input } from "@/components/__legacy__/ui/input";
+import { Textarea } from "@/components/__legacy__/ui/textarea";
+
+interface CreatePresetDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (name: string, description: string) => Promise<void> | void;
+}
+
+export function CreatePresetDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+}: CreatePresetDialogProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleSubmit = async () => {
+    if (name.trim()) {
+      await onConfirm(name.trim(), description.trim());
+      setName("");
+      setDescription("");
+      onOpenChange(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setName("");
+    setDescription("");
+    onOpenChange(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create Preset</DialogTitle>
+          <DialogDescription>
+            Give your preset a name and description to help identify it later.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <label htmlFor="preset-name" className="text-sm font-medium">
+              Name *
+            </label>
+            <Input
+              id="preset-name"
+              placeholder="Enter preset name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={handleKeyDown}
+              autoFocus
+            />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="preset-description" className="text-sm font-medium">
+              Description
+            </label>
+            <Textarea
+              id="preset-description"
+              placeholder="Optional description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              onKeyDown={handleKeyDown}
+              rows={3}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!name.trim()}>
+            Create Preset
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/__legacy__/ui/button";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { CronScheduler } from "@/components/contextual/CronScheduler/cron-scheduler";
+import { CronScheduler } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { getTimezoneDisplayName } from "@/lib/timezone-utils";
 import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler.tsx
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/use-agent-runs.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/use-agent-runs.ts
@@ -0,0 +1,210 @@
+import {
+  GraphExecutionMeta as LegacyGraphExecutionMeta,
+  GraphID,
+  GraphExecutionID,
+} from "@/lib/autogpt-server-api";
+import { getQueryClient } from "@/lib/react-query/queryClient";
+import {
+  getPaginatedTotalCount,
+  getPaginationNextPageNumber,
+  unpaginate,
+} from "@/app/api/helpers";
+import {
+  getV1ListGraphExecutionsResponse,
+  getV1ListGraphExecutionsResponse200,
+  useGetV1ListGraphExecutionsInfinite,
+} from "@/app/api/__generated__/endpoints/graphs/graphs";
+import { GraphExecutionsPaginated } from "@/app/api/__generated__/models/graphExecutionsPaginated";
+import { GraphExecutionMeta as RawGraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
+
+export type GraphExecutionMeta = Omit<
+  RawGraphExecutionMeta,
+  "id" | "user_id" | "graph_id" | "preset_id" | "stats"
+> &
+  Pick<
+    LegacyGraphExecutionMeta,
+    "id" | "user_id" | "graph_id" | "preset_id" | "stats"
+  >;
+
+/** Hook to fetch runs for a specific graph, with support for infinite scroll.
+ *
+ * @param graphID - The ID of the graph to fetch agent runs for. This parameter is
+ *                  optional in the sense that the hook doesn't run unless it is passed.
+ *                  This way, it can be used in components where the graph ID is not
+ *                  immediately available.
+ */
+export const useAgentRunsInfinite = (graphID?: GraphID) => {
+  const queryClient = getQueryClient();
+  const {
+    data: queryResults,
+    refetch: refetchRuns,
+    isPending: agentRunsLoading,
+    isRefetching: agentRunsReloading,
+    hasNextPage: hasMoreRuns,
+    fetchNextPage: fetchMoreRuns,
+    isFetchingNextPage: isFetchingMoreRuns,
+    queryKey,
+  } = useGetV1ListGraphExecutionsInfinite(
+    graphID!,
+    { page: 1, page_size: 20 },
+    {
+      query: {
+        getNextPageParam: getPaginationNextPageNumber,
+
+        // Prevent query from running if graphID is not available (yet)
+        ...(!graphID
+          ? {
+              enabled: false,
+              queryFn: () =>
+                // Fake empty response if graphID is not available (yet)
+                Promise.resolve({
+                  status: 200,
+                  data: {
+                    executions: [],
+                    pagination: {
+                      current_page: 1,
+                      page_size: 20,
+                      total_items: 0,
+                      total_pages: 0,
+                    },
+                  },
+                  headers: new Headers(),
+                } satisfies getV1ListGraphExecutionsResponse),
+            }
+          : {}),
+      },
+    },
+    queryClient,
+  );
+
+  const agentRuns = queryResults ? unpaginate(queryResults, "executions") : [];
+  const agentRunCount = getPaginatedTotalCount(queryResults);
+
+  const upsertAgentRun = (newAgentRun: GraphExecutionMeta) => {
+    queryClient.setQueryData(
+      queryKey,
+      (currentQueryData: typeof queryResults) => {
+        if (!currentQueryData?.pages || agentRunCount === undefined)
+          return currentQueryData;
+
+        const exists = currentQueryData.pages.some((page) => {
+          if (page.status !== 200) return false;
+
+          const response = page.data;
+          return response.executions.some((run) => run.id === newAgentRun.id);
+        });
+        if (exists) {
+          // If the run already exists, we update it
+          return {
+            ...currentQueryData,
+            pages: currentQueryData.pages.map((page) => {
+              if (page.status !== 200) return page;
+              const response = page.data;
+              const executions = response.executions;
+
+              const index = executions.findIndex(
+                (run) => run.id === newAgentRun.id,
+              );
+              if (index === -1) return page;
+
+              const newExecutions = [...executions];
+              newExecutions[index] = newAgentRun;
+
+              return {
+                ...page,
+                data: {
+                  ...response,
+                  executions: newExecutions,
+                },
+              } satisfies getV1ListGraphExecutionsResponse;
+            }),
+          };
+        }
+
+        // If the run does not exist, we add it to the first page
+        const page = currentQueryData
+          .pages[0] as getV1ListGraphExecutionsResponse200 & {
+          headers: Headers;
+        };
+        const updatedExecutions = [newAgentRun, ...page.data.executions];
+        const updatedPage = {
+          ...page,
+          data: {
+            ...page.data,
+            executions: updatedExecutions,
+          },
+        } satisfies getV1ListGraphExecutionsResponse;
+        const updatedPages = [updatedPage, ...currentQueryData.pages.slice(1)];
+        return {
+          ...currentQueryData,
+          pages: updatedPages.map(
+            // Increment the total runs count in the pagination info of all pages
+            (page) =>
+              page.status === 200
+                ? {
+                    ...page,
+                    data: {
+                      ...page.data,
+                      pagination: {
+                        ...page.data.pagination,
+                        total_items: agentRunCount + 1,
+                      },
+                    },
+                  }
+                : page,
+          ),
+        };
+      },
+    );
+  };
+
+  const removeAgentRun = (runID: GraphExecutionID) => {
+    queryClient.setQueryData(
+      [queryKey, { page: 1, page_size: 20 }],
+      (currentQueryData: typeof queryResults) => {
+        if (!currentQueryData?.pages) return currentQueryData;
+
+        let found = false;
+        return {
+          ...currentQueryData,
+          pages: currentQueryData.pages.map((page) => {
+            const response = page.data as GraphExecutionsPaginated;
+            const filteredExecutions = response.executions.filter(
+              (run) => run.id !== runID,
+            );
+            if (filteredExecutions.length < response.executions.length) {
+              found = true;
+            }
+
+            return {
+              ...page,
+              data: {
+                ...response,
+                executions: filteredExecutions,
+                pagination: {
+                  ...response.pagination,
+                  total_items:
+                    response.pagination.total_items - (found ? 1 : 0),
+                },
+              },
+            };
+          }),
+        };
+      },
+    );
+  };
+
+  return {
+    agentRuns: agentRuns as GraphExecutionMeta[],
+    refetchRuns,
+    agentRunCount,
+    agentRunsLoading: agentRunsLoading || agentRunsReloading,
+    hasMoreRuns,
+    fetchMoreRuns,
+    isFetchingMoreRuns,
+    upsertAgentRun,
+    removeAgentRun,
+  };
+};
+
+export type AgentRunsQuery = ReturnType<typeof useAgentRunsInfinite>;
--- a/autogpt_platform/frontend/src/app/(platform)/library/legacy/[id]/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/legacy/[id]/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { OldAgentLibraryView } from "../../agents/[id]/components/OldAgentLibraryView/OldAgentLibraryView";
+
+export default function OldAgentLibraryPage() {
+  return <OldAgentLibraryView />;
+}
--- a/autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/AgentInfoStep/AgentInfoStep.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/AgentInfoStep/AgentInfoStep.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { CronExpressionDialog } from "@/components/contextual/CronScheduler/cron-scheduler-dialog";
+import { CronExpressionDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
 import { Form, FormField } from "@/components/__legacy__/ui/form";
 import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/atoms/Input/Input";
--- a/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts
+++ b/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts
@@ -7,8 +7,11 @@ import { useFlags } from "launchdarkly-react-client-sdk";
 export enum Flag {
  BETA_BLOCKS = "beta-blocks",
  NEW_BLOCK_MENU = "new-block-menu",
+  NEW_AGENT_RUNS = "new-agent-runs",
  GRAPH_SEARCH = "graph-search",
  ENABLE_ENHANCED_OUTPUT_HANDLING = "enable-enhanced-output-handling",
+  NEW_FLOW_EDITOR = "new-flow-editor",
+  BUILDER_VIEW_SWITCH = "builder-view-switch",
  SHARE_EXECUTION_RESULTS = "share-execution-results",
  AGENT_FAVORITING = "agent-favoriting",
  MARKETPLACE_SEARCH_TERMS = "marketplace-search-terms",
@@ -21,8 +24,11 @@ const isPwMockEnabled = process.env.NEXT_PUBLIC_PW_TEST === "true";
 const defaultFlags = {
  [Flag.BETA_BLOCKS]: [],
  [Flag.NEW_BLOCK_MENU]: false,
+  [Flag.NEW_AGENT_RUNS]: false,
  [Flag.GRAPH_SEARCH]: false,
  [Flag.ENABLE_ENHANCED_OUTPUT_HANDLING]: false,
+  [Flag.NEW_FLOW_EDITOR]: false,
+  [Flag.BUILDER_VIEW_SWITCH]: false,
  [Flag.SHARE_EXECUTION_RESULTS]: false,
  [Flag.AGENT_FAVORITING]: false,
  [Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,
--- a/autogpt_platform/frontend/src/tests/agent-activity.spec.ts
+++ b/autogpt_platform/frontend/src/tests/agent-activity.spec.ts
@@ -11,18 +11,24 @@ test.beforeEach(async ({ page }) => {
  const buildPage = new BuildPage(page);
  const testUser = await getTestUser();

+  const { getId } = getSelectors(page);
+
  await page.goto("/login");
  await loginPage.login(testUser.email, testUser.password);
  await hasUrl(page, "/marketplace");

  await page.goto("/build");
  await buildPage.closeTutorial();
+  await buildPage.openBlocksPanel();

  const [dictionaryBlock] = await buildPage.getFilteredBlocksFromAPI(
    (block) => block.name === "AddToDictionaryBlock",
  );

-  await buildPage.addBlock(dictionaryBlock);
+  const blockCard = getId(`block-name-${dictionaryBlock.id}`);
+  await blockCard.click();
+  const blockInEditor = getId(dictionaryBlock.id).first();
+  expect(blockInEditor).toBeAttached();

  await buildPage.saveAgent("Test Agent", "Test Description");
  await test
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -1,6 +1,3 @@
-// TODO: These tests were written for the old (legacy) builder.
-// They need to be updated to work with the new flow editor.
-
 // Note: all the comments with //(number)! are for the docs
 //ignore them when reading the code, but if you change something,
 //make sure to update the docs! Your autoformmater will break this page,
@@ -15,7 +12,7 @@ import { getTestUser } from "./utils/auth";

 // Reason Ignore: admonishment is in the wrong place visually with correct prettier rules
 // prettier-ignore
-test.describe.skip("Build", () => { //(1)!
+test.describe("Build", () => { //(1)!
  let buildPage: BuildPage; //(2)!

  // Reason Ignore: admonishment is in the wrong place visually with correct prettier rules
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -1,6 +1,7 @@
-import { Locator, Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 import { Block as APIBlock } from "../../lib/autogpt-server-api/types";
 import { beautifyString } from "../../lib/utils";
+import { isVisible } from "../utils/assertion";
 import { BasePage } from "./base.page";

 export interface Block {
@@ -26,39 +27,32 @@ export class BuildPage extends BasePage {
    try {
      await this.page
        .getByRole("button", { name: "Skip Tutorial", exact: true })
-        .click({ timeout: 3000 });
-    } catch (_error) {
-      console.info("Tutorial not shown or already dismissed");
+        .click();
+    } catch (error) {
+      console.info("Error closing tutorial:", error);
    }
  }

  async openBlocksPanel(): Promise<void> {
-    const popoverContent = this.page.locator(
-      '[data-id="blocks-control-popover-content"]',
-    );
-    const isPanelOpen = await popoverContent.isVisible();
+    const isPanelOpen = await this.page
+      .getByTestId("blocks-control-blocks-label")
+      .isVisible();

    if (!isPanelOpen) {
      await this.page.getByTestId("blocks-control-blocks-button").click();
-      await popoverContent.waitFor({ state: "visible", timeout: 5000 });
    }
  }

  async closeBlocksPanel(): Promise<void> {
-    const popoverContent = this.page.locator(
-      '[data-id="blocks-control-popover-content"]',
-    );
-    if (await popoverContent.isVisible()) {
-      await this.page.getByTestId("blocks-control-blocks-button").click();
-    }
+    await this.page.getByTestId("profile-popout-menu-trigger").click();
  }

  async saveAgent(
    name: string = "Test Agent",
    description: string = "",
  ): Promise<void> {
-    console.log(`Saving agent '${name}' with description '${description}'`);
-    await this.page.getByTestId("save-control-save-button").click();
+    console.log(`💾 Saving agent '${name}' with description '${description}'`);
+    await this.page.getByTestId("blocks-control-save-button").click();
    await this.page.getByTestId("save-control-name-input").fill(name);
    await this.page
      .getByTestId("save-control-description-input")
@@ -113,34 +107,32 @@ export class BuildPage extends BasePage {
    await this.openBlocksPanel();

    const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-bar"] input[type="text"]',
+      '[data-id="blocks-control-search-input"]',
    );

    const displayName = this.getDisplayName(block.name);
    await searchInput.clear();
    await searchInput.fill(displayName);

-    const blockCardId = block.id.replace(/[^a-zA-Z0-9]/g, "");
-    const blockCard = this.page.locator(
-      `[data-id="block-card-${blockCardId}"]`,
-    );
+    const blockCard = this.page.getByTestId(`block-name-${block.id}`);

    try {
      // Wait for the block card to be visible with a reasonable timeout
      await blockCard.waitFor({ state: "visible", timeout: 10000 });
      await blockCard.click();
+      const blockInEditor = this.page.getByTestId(block.id).first();
+      expect(blockInEditor).toBeAttached();
    } catch (error) {
      console.log(
-        `Block ${block.name} (display: ${displayName}) returned from the API but not found in block list`,
+        `❌ ❌  Block ${block.name} (display: ${displayName}) returned from the API but not found in block list`,
      );
      console.log(`Error: ${error}`);
    }
  }

-  async hasBlock(_block: Block) {
-    // In the new flow editor, verify a node exists on the canvas
-    const node = this.page.locator('[data-id^="custom-node-"]').first();
-    await node.isVisible();
+  async hasBlock(block: Block) {
+    const blockInEditor = this.page.getByTestId(block.id).first();
+    await blockInEditor.isVisible();
  }

  async getBlockInputs(blockId: string): Promise<string[]> {
@@ -167,7 +159,7 @@ export class BuildPage extends BasePage {

    // Clear any existing search to ensure we see all blocks in the category
    const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-bar"] input[type="text"]',
+      '[data-id="blocks-control-search-input"]',
    );
    await searchInput.clear();

@@ -399,13 +391,13 @@ export class BuildPage extends BasePage {

  async isRunButtonEnabled(): Promise<boolean> {
    console.log(`checking if run button is enabled`);
-    const runButton = this.page.locator('[data-id="run-graph-button"]');
+    const runButton = this.page.getByTestId("primary-action-run-agent");
    return await runButton.isEnabled();
  }

  async runAgent(): Promise<void> {
    console.log(`clicking run button`);
-    const runButton = this.page.locator('[data-id="run-graph-button"]');
+    const runButton = this.page.getByTestId("primary-action-run-agent");
    await runButton.click();
    await this.page.waitForTimeout(1000);
    await runButton.click();
@@ -432,7 +424,7 @@ export class BuildPage extends BasePage {
  async waitForSaveButton(): Promise<void> {
    console.log(`waiting for save button`);
    await this.page.waitForSelector(
-      '[data-testid="save-control-save-button"]:not([disabled])',
+      '[data-testid="blocks-control-save-button"]:not([disabled])',
    );
  }

@@ -534,22 +526,27 @@ export class BuildPage extends BasePage {
  async createDummyAgent() {
    await this.closeTutorial();
    await this.openBlocksPanel();
+    const dictionaryBlock = await this.getDictionaryBlockDetails();

    const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-bar"] input[type="text"]',
+      '[data-id="blocks-control-search-input"]',
    );

+    const displayName = this.getDisplayName(dictionaryBlock.name);
    await searchInput.clear();
-    await searchInput.fill("Add to Dictionary");

-    const blockCard = this.page.locator('[data-id^="block-card-"]').first();
-    try {
-      await blockCard.waitFor({ state: "visible", timeout: 10000 });
+    await isVisible(this.page.getByText("Output"));
+
+    await searchInput.fill(displayName);
+
+    const blockCard = this.page.getByTestId(`block-name-${dictionaryBlock.id}`);
+    if (await blockCard.isVisible()) {
      await blockCard.click();
-    } catch (error) {
-      console.log("Could not find Add to Dictionary block:", error);
+      const blockInEditor = this.page.getByTestId(dictionaryBlock.id).first();
+      expect(blockInEditor).toBeAttached();
    }

    await this.saveAgent("Test Agent", "Test Description");
+    await expect(this.isRunButtonEnabled()).resolves.toBeTruthy();
  }
 }
--- a/docs/integrations/block-integrations/claude_code.md
+++ b/docs/integrations/block-integrations/claude_code.md
@@ -16,7 +16,7 @@ When activated, the block:
   - Install dependencies (npm, pip, etc.)
   - Run terminal commands
   - Build and test applications
-5. Extracts all text files created/modified during execution
+5. Extracts all text and binary files created/modified during execution
 6. Returns the response and files, optionally keeping the sandbox alive for follow-up tasks

 The block supports conversation continuation through three mechanisms:
@@ -42,7 +42,7 @@ The block supports conversation continuation through three mechanisms:
 | Output | Description |
 |--------|-------------|
 | Response | The output/response from Claude Code execution |
-| Files | List of text files created/modified during execution. Each file includes path, relative_path, name, and content fields |
+| Files | List of files created/modified during execution. Each file includes path, relative_path, name, content, is_binary, and content_base64 fields. For text files, content contains the text and is_binary is False. For binary files (PDFs, images, etc.), is_binary is True and content_base64 contains the base64-encoded data |
 | Conversation History | Full conversation history including this turn. Use to restore context on a fresh sandbox |
 | Session ID | Session ID for this conversation. Pass back with sandbox_id to continue the conversation |
 | Sandbox ID | ID of the sandbox instance (null if disposed). Pass back with session_id to continue the conversation |
--- a/docs/integrations/block-integrations/llm.md
+++ b/docs/integrations/block-integrations/llm.md
@@ -535,7 +535,7 @@ When activated, the block:
 2. Installs the latest version of Claude Code in the sandbox
 3. Optionally runs setup commands to prepare the environment
 4. Executes your prompt using Claude Code, which can create/edit files, install dependencies, run terminal commands, and build applications
-5. Extracts all text files created/modified during execution
+5. Extracts all text and binary files created/modified during execution
 6. Returns the response and files, optionally keeping the sandbox alive for follow-up tasks

 The block supports conversation continuation through three mechanisms:
@@ -563,7 +563,7 @@ The block supports conversation continuation through three mechanisms:
 |--------|-------------|------|
 | error | Error message if execution failed | str |
 | response | The output/response from Claude Code execution | str |
-| files | List of text files created/modified by Claude Code during this execution. Each file has 'path', 'relative_path', 'name', and 'content' fields. | List[FileOutput] |
+| files | List of files created/modified by Claude Code during this execution. Each file has 'path', 'relative_path', 'name', 'content', 'is_binary', and 'content_base64' fields. For text files, 'content' contains the text and 'is_binary' is False. For binary files (PDFs, images, etc.), 'is_binary' is True and 'content_base64' contains the base64-encoded data. | List[FileOutput] |
 | conversation_history | Full conversation history including this turn. Pass this to conversation_history input to continue on a fresh sandbox if the previous sandbox timed out. | str |
 | session_id | Session ID for this conversation. Pass this back along with sandbox_id to continue the conversation. | str |
 | sandbox_id | ID of the sandbox instance. Pass this back along with session_id to continue the conversation. This is None if dispose_sandbox was True (sandbox was disposed). | str |
Author	SHA1	Message	Date
Bentlybro	0b2fb655bc	style: black formatting	2026-02-12 12:46:20 +00:00
Bentlybro	99f8bf5f0c	fix: skip binary file if stat fails to prevent OOM If the stat command fails (file deleted, permissions issue, etc.), we now skip the file rather than proceeding to read it with an unknown size. This prevents potential OOM crashes from large files where size verification failed.	2026-02-12 12:32:13 +00:00
Bentlybro	3f76f1318b	docs: Fix llm.md to match exact schema description	2026-02-12 12:25:29 +00:00
Bentlybro	b011289dd2	fix: Address code review feedback - Add 50MB size guard for binary files to prevent OOM - Extract helper function for path resolution (DRY) - Add logging for file extraction errors - Remove dead 'Dockerfile' entry from text_extensions	2026-02-12 12:02:45 +00:00
Bentlybro	49c2f578b4	docs: Update llm.md for binary file support in Claude Code block	2026-02-12 11:58:35 +00:00
Bentlybro	7150b7768d	fix: Make Dockerfile check case-insensitive	2026-02-12 11:53:57 +00:00
Bentlybro	8c95b03636	fix: Update tests and address code review feedback - Update test fixtures with is_binary and content_base64 fields - Move .svg to text_extensions (it's XML-based) - Make extension matching case-insensitive for both text and binary	2026-02-12 11:45:52 +00:00
Bentlybro	4a8368887f	fix: Use format='bytes' for reading binary files from E2B sandbox Fixes the critical bug where binary files would fail to read because files.read() defaults to text mode (UTF-8 decoding). Now explicitly uses format='bytes' which returns a bytearray.	2026-02-12 11:29:43 +00:00
Bentlybro	d46e5e6b6a	docs: Update claude_code.md for binary file support	2026-02-12 11:26:58 +00:00
Bentlybro	4e632bbd60	fix(backend): Extract binary files from ClaudeCodeBlock sandbox Add support for extracting binary files (PDFs, images, etc.) from the E2B sandbox in ClaudeCodeBlock. Changes: - Add binary_extensions set for common binary file types (.pdf, .png, .jpg, etc.) - Update FileOutput schema with is_binary and content_base64 fields - Binary files are read as bytes and base64-encoded before returning - Text files continue to work as before with is_binary=False Closes SECRT-1897	2026-02-12 11:23:05 +00:00