Update test

autogpt_platform/backend/backend/api/features/builder/db.py

@@ -1,16 +1,17 @@
 import logging
 from dataclasses import dataclass
-from datetime import datetime, timedelta, timezone
 from difflib import SequenceMatcher
 from typing import Sequence
 
 import prisma
+from prisma.enums import ContentType
 
 import backend.api.features.library.db as library_db
 import backend.api.features.library.model as library_model
 import backend.api.features.store.db as store_db
 import backend.api.features.store.model as store_model
 import backend.data.block
+from backend.api.features.store.hybrid_search import unified_hybrid_search
 from backend.blocks import load_all_blocks
 from backend.blocks.llm import LlmModel
 from backend.data.block import AnyBlockSchema, BlockCategory, BlockInfo, BlockSchema
@@ -37,6 +38,16 @@ MAX_LIBRARY_AGENT_RESULTS = 100
 MAX_MARKETPLACE_AGENT_RESULTS = 100
 MIN_SCORE_FOR_FILTERED_RESULTS = 10.0
 
+# Boost blocks over marketplace agents in search results
+BLOCK_SCORE_BOOST = 50.0
+
+# Block IDs to exclude from search results
+EXCLUDED_BLOCK_IDS = frozenset(
+    {
+        "e189baac-8c20-45a1-94a7-55177ea42565",  # AgentExecutorBlock
+    }
+)
+
 SearchResultItem = BlockInfo | library_model.LibraryAgent | store_model.StoreAgent
 
 
@@ -59,8 +70,8 @@ def get_block_categories(category_blocks: int = 3) -> list[BlockCategoryResponse
 
     for block_type in load_all_blocks().values():
         block: AnyBlockSchema = block_type()
-        # Skip disabled blocks
-        if block.disabled:
+        # Skip disabled and excluded blocks
+        if block.disabled or block.id in EXCLUDED_BLOCK_IDS:
             continue
         # Skip blocks that don't have categories (all should have at least one)
         if not block.categories:
@@ -111,6 +122,9 @@ def get_blocks(
         # Skip disabled blocks
         if block.disabled:
             continue
+        # Skip excluded blocks
+        if block.id in EXCLUDED_BLOCK_IDS:
+            continue
         # Skip blocks that don't match the category
         if category and category not in {c.name.lower() for c in block.categories}:
             continue
@@ -250,14 +264,25 @@ async def _build_cached_search_results(
         "my_agents": 0,
     }
 
-    block_results, block_total, integration_total = _collect_block_results(
-        normalized_query=normalized_query,
-        include_blocks=include_blocks,
-        include_integrations=include_integrations,
-    )
-    scored_items.extend(block_results)
-    total_items["blocks"] = block_total
-    total_items["integrations"] = integration_total
+    # Use hybrid search when query is present, otherwise list all blocks
+    if (include_blocks or include_integrations) and normalized_query:
+        block_results, block_total, integration_total = await _hybrid_search_blocks(
+            query=search_query,
+            include_blocks=include_blocks,
+            include_integrations=include_integrations,
+        )
+        scored_items.extend(block_results)
+        total_items["blocks"] = block_total
+        total_items["integrations"] = integration_total
+    elif include_blocks or include_integrations:
+        # No query - list all blocks using in-memory approach
+        block_results, block_total, integration_total = _collect_block_results(
+            include_blocks=include_blocks,
+            include_integrations=include_integrations,
+        )
+        scored_items.extend(block_results)
+        total_items["blocks"] = block_total
+        total_items["integrations"] = integration_total
 
     if include_library_agents:
         library_response = await library_db.list_library_agents(
@@ -302,10 +327,14 @@ async def _build_cached_search_results(
 
 def _collect_block_results(
     *,
-    normalized_query: str,
     include_blocks: bool,
     include_integrations: bool,
 ) -> tuple[list[_ScoredItem], int, int]:
+    """
+    Collect all blocks for listing (no search query).
+
+    All blocks get BLOCK_SCORE_BOOST to prioritize them over marketplace agents.
+    """
     results: list[_ScoredItem] = []
     block_count = 0
     integration_count = 0
@@ -318,6 +347,10 @@ def _collect_block_results(
         if block.disabled:
             continue
 
+        # Skip excluded blocks
+        if block.id in EXCLUDED_BLOCK_IDS:
+            continue
+
         block_info = block.get_info()
         credentials = list(block.input_schema.get_credentials_fields().values())
         is_integration = len(credentials) > 0
@@ -327,10 +360,6 @@ def _collect_block_results(
         if not is_integration and not include_blocks:
             continue
 
-        score = _score_block(block, block_info, normalized_query)
-        if not _should_include_item(score, normalized_query):
-            continue
-
         filter_type: FilterType = "integrations" if is_integration else "blocks"
         if is_integration:
             integration_count += 1
@@ -341,8 +370,122 @@ def _collect_block_results(
             _ScoredItem(
                 item=block_info,
                 filter_type=filter_type,
-                score=score,
-                sort_key=_get_item_name(block_info),
+                score=BLOCK_SCORE_BOOST,
+                sort_key=block_info.name.lower(),
+            )
+        )
+
+    return results, block_count, integration_count
+
+
+async def _hybrid_search_blocks(
+    *,
+    query: str,
+    include_blocks: bool,
+    include_integrations: bool,
+) -> tuple[list[_ScoredItem], int, int]:
+    """
+    Search blocks using hybrid search with builder-specific filtering.
+
+    Uses unified_hybrid_search for semantic + lexical search, then applies
+    post-filtering for block/integration types and scoring adjustments.
+
+    Scoring:
+        - Base: hybrid relevance score (0-1) scaled to 0-100, plus BLOCK_SCORE_BOOST
+          to prioritize blocks over marketplace agents in combined results
+        - +30 for exact name match, +15 for prefix name match
+        - +20 if the block has an LlmModel field and the query matches an LLM model name
+
+    Args:
+        query: The search query string
+        include_blocks: Whether to include regular blocks
+        include_integrations: Whether to include integration blocks
+
+    Returns:
+        Tuple of (scored_items, block_count, integration_count)
+    """
+    results: list[_ScoredItem] = []
+    block_count = 0
+    integration_count = 0
+
+    if not include_blocks and not include_integrations:
+        return results, block_count, integration_count
+
+    normalized_query = query.strip().lower()
+
+    # Fetch more results to account for post-filtering
+    search_results, _ = await unified_hybrid_search(
+        query=query,
+        content_types=[ContentType.BLOCK],
+        page=1,
+        page_size=150,
+        min_score=0.10,
+    )
+
+    # Load all blocks for getting BlockInfo
+    all_blocks = load_all_blocks()
+
+    for result in search_results:
+        block_id = result["content_id"]
+
+        # Skip excluded blocks
+        if block_id in EXCLUDED_BLOCK_IDS:
+            continue
+
+        metadata = result.get("metadata", {})
+        hybrid_score = result.get("relevance", 0.0)
+
+        # Get the actual block class
+        if block_id not in all_blocks:
+            continue
+
+        block_cls = all_blocks[block_id]
+        block: AnyBlockSchema = block_cls()
+
+        if block.disabled:
+            continue
+
+        # Check block/integration filter using metadata
+        is_integration = metadata.get("is_integration", False)
+
+        if is_integration and not include_integrations:
+            continue
+        if not is_integration and not include_blocks:
+            continue
+
+        # Get block info
+        block_info = block.get_info()
+
+        # Calculate final score: scale hybrid score and add builder-specific bonuses
+        # Hybrid scores are 0-1, builder scores were 0-200+
+        # Add BLOCK_SCORE_BOOST to prioritize blocks over marketplace agents
+        final_score = hybrid_score * 100 + BLOCK_SCORE_BOOST
+
+        # Add LLM model match bonus
+        has_llm_field = metadata.get("has_llm_model_field", False)
+        if has_llm_field and _matches_llm_model(block.input_schema, normalized_query):
+            final_score += 20
+
+        # Add exact/prefix match bonus for deterministic tie-breaking
+        name = block_info.name.lower()
+        if name == normalized_query:
+            final_score += 30
+        elif name.startswith(normalized_query):
+            final_score += 15
+
+        # Track counts
+        filter_type: FilterType = "integrations" if is_integration else "blocks"
+        if is_integration:
+            integration_count += 1
+        else:
+            block_count += 1
+
+        results.append(
+            _ScoredItem(
+                item=block_info,
+                filter_type=filter_type,
+                score=final_score,
+                sort_key=name,
             )
         )
 
@@ -467,6 +610,8 @@ async def _get_static_counts():
         block: AnyBlockSchema = block_type()
         if block.disabled:
             continue
+        if block.id in EXCLUDED_BLOCK_IDS:
+            continue
 
         all_blocks += 1
 
@@ -502,38 +647,6 @@ def _matches_llm_model(schema_cls: type[BlockSchema], query: str) -> bool:
     return False
 
 
-def _score_block(
-    block: AnyBlockSchema,
-    block_info: BlockInfo,
-    normalized_query: str,
-) -> float:
-    if not normalized_query:
-        return 0.0
-
-    name = block_info.name.lower()
-    description = block_info.description.lower()
-    score = _score_primary_fields(name, description, normalized_query)
-
-    category_text = " ".join(
-        category.get("category", "").lower() for category in block_info.categories
-    )
-    score += _score_additional_field(category_text, normalized_query, 12, 6)
-
-    credentials_info = block.input_schema.get_credentials_fields_info().values()
-    provider_names = [
-        provider.value.lower()
-        for info in credentials_info
-        for provider in info.provider
-    ]
-    provider_text = " ".join(provider_names)
-    score += _score_additional_field(provider_text, normalized_query, 15, 6)
-
-    if _matches_llm_model(block.input_schema, normalized_query):
-        score += 20
-
-    return score
-
-
 def _score_library_agent(
     agent: library_model.LibraryAgent,
     normalized_query: str,
@@ -640,31 +753,21 @@ def _get_all_providers() -> dict[ProviderName, Provider]:
     return providers
 
 
-@cached(ttl_seconds=3600)
+@cached(ttl_seconds=3600, shared_cache=True)
 async def get_suggested_blocks(count: int = 5) -> list[BlockInfo]:
-    suggested_blocks = []
-    # Sum the number of executions for each block type
-    # Prisma cannot group by nested relations, so we do a raw query
-    # Calculate the cutoff timestamp
-    timestamp_threshold = datetime.now(timezone.utc) - timedelta(days=30)
-
+    # Query the materialized view for execution counts per block
+    # The view aggregates executions from the last 14 days and is refreshed hourly
     results = await query_raw_with_schema(
         """
-        SELECT
-            agent_node."agentBlockId" AS block_id,
-            COUNT(execution.id) AS execution_count
-        FROM {schema_prefix}"AgentNodeExecution" execution
-        JOIN {schema_prefix}"AgentNode" agent_node ON execution."agentNodeId" = agent_node.id
-        WHERE execution."endedTime" >= $1::timestamp
-        GROUP BY agent_node."agentBlockId"
-        ORDER BY execution_count DESC;
-        """,
-        timestamp_threshold,
+        SELECT block_id, execution_count
+        FROM {schema_prefix}"mv_suggested_blocks";
+        """
     )
 
     # Get the top blocks based on execution count
-    # But ignore Input and Output blocks
+    # But ignore Input, Output, Agent, and excluded blocks
     blocks: list[tuple[BlockInfo, int]] = []
+    execution_counts = {row["block_id"]: row["execution_count"] for row in results}
 
     for block_type in load_all_blocks().values():
         block: AnyBlockSchema = block_type()
@@ -674,11 +777,9 @@ async def get_suggested_blocks(count: int = 5) -> list[BlockInfo]:
             backend.data.block.BlockType.AGENT,
         ):
             continue
-        # Find the execution count for this block
-        execution_count = next(
-            (row["execution_count"] for row in results if row["block_id"] == block.id),
-            0,
-        )
+        if block.id in EXCLUDED_BLOCK_IDS:
+            continue
+        execution_count = execution_counts.get(block.id, 0)
         blocks.append((block.get_info(), execution_count))
     # Sort blocks by execution count
     blocks.sort(key=lambda x: x[1], reverse=True)

autogpt_platform/backend/backend/api/features/builder/model.py

@@ -27,7 +27,6 @@ class SearchEntry(BaseModel):
 
 # Suggestions
 class SuggestionsResponse(BaseModel):
-    otto_suggestions: list[str]
     recent_searches: list[SearchEntry]
     providers: list[ProviderName]
     top_blocks: list[BlockInfo]

autogpt_platform/backend/backend/api/features/builder/routes.py

@@ -1,5 +1,5 @@
 import logging
-from typing import Annotated, Sequence
+from typing import Annotated, Sequence, cast, get_args
 
 import fastapi
 from autogpt_libs.auth.dependencies import get_user_id, requires_user
@@ -10,6 +10,8 @@ from backend.util.models import Pagination
 from . import db as builder_db
 from . import model as builder_model
 
+VALID_FILTER_VALUES = get_args(builder_model.FilterType)
+
 logger = logging.getLogger(__name__)
 
 router = fastapi.APIRouter(
@@ -49,11 +51,6 @@ async def get_suggestions(
     Get all suggestions for the Blocks Menu.
     """
     return builder_model.SuggestionsResponse(
-        otto_suggestions=[
-            "What blocks do I need to get started?",
-            "Help me create a list",
-            "Help me feed my data to Google Maps",
-        ],
         recent_searches=await builder_db.get_recent_searches(user_id),
         providers=[
             ProviderName.TWITTER,
@@ -151,7 +148,7 @@ async def get_providers(
 async def search(
     user_id: Annotated[str, fastapi.Security(get_user_id)],
     search_query: Annotated[str | None, fastapi.Query()] = None,
-    filter: Annotated[list[builder_model.FilterType] | None, fastapi.Query()] = None,
+    filter: Annotated[str | None, fastapi.Query()] = None,
     search_id: Annotated[str | None, fastapi.Query()] = None,
     by_creator: Annotated[list[str] | None, fastapi.Query()] = None,
     page: Annotated[int, fastapi.Query()] = 1,
@@ -160,9 +157,20 @@ async def search(
     """
     Search for blocks (including integrations), marketplace agents, and user library agents.
     """
-    # If no filters are provided, then we will return all types
-    if not filter:
-        filter = [
+    # Parse and validate filter parameter
+    filters: list[builder_model.FilterType]
+    if filter:
+        filter_values = [f.strip() for f in filter.split(",")]
+        invalid_filters = [f for f in filter_values if f not in VALID_FILTER_VALUES]
+        if invalid_filters:
+            raise fastapi.HTTPException(
+                status_code=400,
+                detail=f"Invalid filter value(s): {', '.join(invalid_filters)}. "
+                f"Valid values are: {', '.join(VALID_FILTER_VALUES)}",
+            )
+        filters = cast(list[builder_model.FilterType], filter_values)
+    else:
+        filters = [
             "blocks",
             "integrations",
             "marketplace_agents",
@@ -174,7 +182,7 @@ async def search(
     cached_results = await builder_db.get_sorted_search_results(
         user_id=user_id,
         search_query=search_query,
-        filters=filter,
+        filters=filters,
         by_creator=by_creator,
     )
 
@@ -196,7 +204,7 @@ async def search(
         user_id,
         builder_model.SearchEntry(
             search_query=search_query,
-            filter=filter,
+            filter=filters,
             by_creator=by_creator,
             search_id=search_id,
         ),

autogpt_platform/backend/backend/api/features/store/content_handlers.py

@@ -183,60 +183,70 @@ class BlockHandler(ContentHandler):
         ]
 
         # Convert to ContentItem
+        from backend.blocks.llm import LlmModel
+
         items = []
         for block_id, block_cls in missing_blocks[:batch_size]:
             try:
                 block_instance = block_cls()
 
-                # Skip disabled blocks - they shouldn't be indexed
                 if block_instance.disabled:
                     continue
 
                 # Build searchable text from block metadata
                 parts = []
-                if hasattr(block_instance, "name") and block_instance.name:
+                if block_instance.name:
                     parts.append(block_instance.name)
-                if (
-                    hasattr(block_instance, "description")
-                    and block_instance.description
-                ):
+                if block_instance.description:
                     parts.append(block_instance.description)
-                if hasattr(block_instance, "categories") and block_instance.categories:
-                    # Convert BlockCategory enum to strings
+                if block_instance.categories:
                     parts.append(
                         " ".join(str(cat.value) for cat in block_instance.categories)
                     )
 
-                # Add input/output schema info
-                if hasattr(block_instance, "input_schema"):
-                    schema = block_instance.input_schema
-                    if hasattr(schema, "model_json_schema"):
-                        schema_dict = schema.model_json_schema()
-                        if "properties" in schema_dict:
-                            for prop_name, prop_info in schema_dict[
-                                "properties"
-                            ].items():
-                                if "description" in prop_info:
-                                    parts.append(
-                                        f"{prop_name}: {prop_info['description']}"
-                                    )
+                # Add input schema field descriptions
+                schema_dict = block_instance.input_schema.model_json_schema()
+                if "properties" in schema_dict:
+                    for prop_name, prop_info in schema_dict["properties"].items():
+                        if "description" in prop_info:
+                            parts.append(f"{prop_name}: {prop_info['description']}")
 
                 searchable_text = " ".join(parts)
 
-                # Convert categories set of enums to list of strings for JSON serialization
-                categories = getattr(block_instance, "categories", set())
                 categories_list = (
-                    [cat.value for cat in categories] if categories else []
+                    [cat.value for cat in block_instance.categories]
+                    if block_instance.categories
+                    else []
                 )
 
+                # Extract provider names from credentials fields
+                provider_names: list[str] = []
+                credentials_info = (
+                    block_instance.input_schema.get_credentials_fields_info()
+                )
+                is_integration = len(credentials_info) > 0
+                for info in credentials_info.values():
+                    for provider in info.provider:
+                        provider_names.append(provider.value.lower())
+
+                # Check if block has LlmModel field in input schema
+                has_llm_model_field = False
+                for field in block_instance.input_schema.model_fields.values():
+                    if field.annotation == LlmModel:
+                        has_llm_model_field = True
+                        break
+
                 items.append(
                     ContentItem(
                         content_id=block_id,
                         content_type=ContentType.BLOCK,
                         searchable_text=searchable_text,
                         metadata={
-                            "name": getattr(block_instance, "name", ""),
+                            "name": block_instance.name,
                             "categories": categories_list,
+                            "providers": provider_names,
+                            "has_llm_model_field": has_llm_model_field,
+                            "is_integration": is_integration,
                         },
                         user_id=None,  # Blocks are public
                     )

autogpt_platform/backend/backend/api/features/store/content_handlers_test.py

@@ -85,6 +85,8 @@ async def test_block_handler_get_missing_items(mocker):
     mock_block_instance.input_schema.model_json_schema.return_value = {
         "properties": {"expression": {"description": "Math expression to evaluate"}}
     }
+    mock_block_instance.input_schema.get_credentials_fields_info.return_value = {}
+    mock_block_instance.input_schema.model_fields = {}
     mock_block_class.return_value = mock_block_instance
 
     mock_blocks = {"block-uuid-1": mock_block_class}
@@ -309,19 +311,20 @@ async def test_content_handlers_registry():
 
 
 @pytest.mark.asyncio(loop_scope="session")
-async def test_block_handler_handles_missing_attributes():
-    """Test BlockHandler gracefully handles blocks with missing attributes."""
+async def test_block_handler_handles_empty_attributes():
+    """Test BlockHandler handles blocks with empty/falsy attribute values."""
     handler = BlockHandler()
 
-    # Mock block with minimal attributes
+    # Mock block with empty values (all attributes exist but are falsy)
     mock_block_class = MagicMock()
     mock_block_instance = MagicMock()
     mock_block_instance.name = "Minimal Block"
     mock_block_instance.disabled = False
-    # No description, categories, or schema
-    del mock_block_instance.description
-    del mock_block_instance.categories
-    del mock_block_instance.input_schema
+    mock_block_instance.description = ""
+    mock_block_instance.categories = set()
+    mock_block_instance.input_schema.model_json_schema.return_value = {}
+    mock_block_instance.input_schema.get_credentials_fields_info.return_value = {}
+    mock_block_instance.input_schema.model_fields = {}
     mock_block_class.return_value = mock_block_instance
 
     mock_blocks = {"block-minimal": mock_block_class}
@@ -352,6 +355,9 @@ async def test_block_handler_skips_failed_blocks():
     good_instance.description = "Works fine"
     good_instance.categories = []
     good_instance.disabled = False
+    good_instance.input_schema.model_json_schema.return_value = {}
+    good_instance.input_schema.get_credentials_fields_info.return_value = {}
+    good_instance.input_schema.model_fields = {}
     good_block.return_value = good_instance
 
     bad_block = MagicMock()

autogpt_platform/backend/migrations/20260129090000_add_suggested_blocks_materialized_view/migration.sql

@@ -0,0 +1,97 @@
+-- This migration creates a materialized view for suggested blocks based on execution counts
+-- The view aggregates execution counts per block for the last 14 days
+--
+-- IMPORTANT: For production environments, pg_cron is REQUIRED for automatic refresh
+-- Prerequisites for production:
+--   1. pg_cron extension must be installed: CREATE EXTENSION pg_cron;
+--   2. pg_cron must be configured in postgresql.conf:
+--      shared_preload_libraries = 'pg_cron'
+--      cron.database_name = 'your_database_name'
+--
+-- For development environments without pg_cron:
+--   The migration will succeed but you must manually refresh views with:
+--   SET search_path TO platform;
+--   SELECT refresh_suggested_blocks_view();
+
+-- Check if pg_cron extension is installed
+DO $$
+DECLARE
+    has_pg_cron BOOLEAN;
+BEGIN
+    SELECT EXISTS (SELECT 1 FROM pg_extension WHERE extname = 'pg_cron') INTO has_pg_cron;
+
+    IF NOT has_pg_cron THEN
+        RAISE WARNING 'pg_cron is not installed. Materialized view will be created but will NOT refresh automatically. For production, install pg_cron. For development, manually refresh with: SELECT refresh_suggested_blocks_view();';
+    END IF;
+END
+$$;
+
+-- Create materialized view for suggested blocks based on execution counts in last 14 days
+-- The 14-day threshold is hardcoded to ensure consistent behavior
+CREATE MATERIALIZED VIEW IF NOT EXISTS "mv_suggested_blocks" AS
+SELECT
+    agent_node."agentBlockId" AS block_id,
+    COUNT(execution.id) AS execution_count
+FROM "AgentNodeExecution" execution
+JOIN "AgentNode" agent_node ON execution."agentNodeId" = agent_node.id
+WHERE execution."endedTime" >= (NOW() - INTERVAL '14 days')
+GROUP BY agent_node."agentBlockId"
+ORDER BY execution_count DESC;
+
+-- Create unique index for concurrent refresh support
+CREATE UNIQUE INDEX IF NOT EXISTS "idx_mv_suggested_blocks_block_id" ON "mv_suggested_blocks"("block_id");
+
+-- Create refresh function
+CREATE OR REPLACE FUNCTION refresh_suggested_blocks_view()
+RETURNS void
+LANGUAGE plpgsql
+AS $$
+DECLARE
+    target_schema text := current_schema();
+BEGIN
+    -- Use CONCURRENTLY for better performance during refresh
+    REFRESH MATERIALIZED VIEW CONCURRENTLY "mv_suggested_blocks";
+    RAISE NOTICE 'Suggested blocks materialized view refreshed in schema % at %', target_schema, NOW();
+EXCEPTION
+    WHEN OTHERS THEN
+        -- Fallback to non-concurrent refresh if concurrent fails
+        REFRESH MATERIALIZED VIEW "mv_suggested_blocks";
+        RAISE NOTICE 'Suggested blocks materialized view refreshed (non-concurrent) in schema % at %. Concurrent refresh failed due to: %', target_schema, NOW(), SQLERRM;
+END;
+$$;
+
+-- Initial refresh of the materialized view
+SELECT refresh_suggested_blocks_view();
+
+-- Schedule automatic refresh every hour (only if pg_cron is available)
+DO $$
+DECLARE
+    has_pg_cron BOOLEAN;
+    current_schema_name text := current_schema();
+    job_name text;
+BEGIN
+    -- Check if pg_cron extension exists
+    SELECT EXISTS (SELECT 1 FROM pg_extension WHERE extname = 'pg_cron') INTO has_pg_cron;
+
+    IF has_pg_cron THEN
+        job_name := format('refresh-suggested-blocks_%s', current_schema_name);
+
+        -- Try to unschedule existing job (ignore errors if it doesn't exist)
+        BEGIN
+            PERFORM cron.unschedule(job_name);
+        EXCEPTION WHEN OTHERS THEN
+            NULL;
+        END;
+
+        -- Schedule the new job to run every hour
+        PERFORM cron.schedule(
+            job_name,
+            '0 * * * *',  -- Every hour at minute 0
+            format('SET search_path TO %I; SELECT refresh_suggested_blocks_view();', current_schema_name)
+        );
+        RAISE NOTICE 'Scheduled job %; runs every hour for schema %', job_name, current_schema_name;
+    ELSE
+        RAISE WARNING 'Automatic refresh NOT configured - pg_cron is not available. Manually refresh with: SELECT refresh_suggested_blocks_view();';
+    END IF;
+END;
+$$;

autogpt_platform/backend/schema.prisma

@@ -920,6 +920,17 @@ view mv_review_stats {
   // Refresh uses CONCURRENTLY to avoid blocking reads
 }
 
+// Note: This is actually a MATERIALIZED VIEW in the database
+// Refreshed automatically every hour via pg_cron (with fallback to manual refresh)
+view mv_suggested_blocks {
+  block_id        String @unique
+  execution_count Int
+
+  // Pre-aggregated execution counts per block for the last 14 days
+  // Used by builder suggestions for ordering blocks by popularity
+  // Refresh uses CONCURRENTLY to avoid blocking reads
+}
+
 model StoreListing {
   id        String   @id @default(uuid())
   createdAt DateTime @default(now())

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";

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>
+  );
+}

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,

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;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/Block.tsx

@@ -57,7 +57,10 @@ export const Block: BlockComponent = ({
     // preview when user drags it
     const dragPreview = document.createElement("div");
     dragPreview.style.cssText = blockDragPreviewStyle;
-    dragPreview.textContent = beautifyString(title || "");
+    dragPreview.textContent = beautifyString(title || "").replace(
+      / Block$/,
+      "",
+    );
 
     document.body.appendChild(dragPreview);
     e.dataTransfer.setDragImage(dragPreview, 0, 0);
@@ -90,7 +93,10 @@ export const Block: BlockComponent = ({
               "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
             )}
           >
-            {highlightText(beautifyString(title), highlightedText)}
+            {highlightText(
+              beautifyString(title).replace(/ Block$/, ""),
+              highlightedText,
+            )}
           </span>
         )}
         {description && (

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuFilters/BlockMenuFilters.tsx

@@ -2,7 +2,7 @@ import { useBlockMenuStore } from "@/app/(platform)/build/stores/blockMenuStore"
 import { FilterChip } from "../FilterChip";
 import { categories } from "./constants";
 import { FilterSheet } from "../FilterSheet/FilterSheet";
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+import { CategoryKey } from "./types";
 
 export const BlockMenuFilters = () => {
   const {
@@ -15,7 +15,7 @@ export const BlockMenuFilters = () => {
     removeCreator,
   } = useBlockMenuStore();
 
-  const handleFilterClick = (filter: GetV2BuilderSearchFilterAnyOfItem) => {
+  const handleFilterClick = (filter: CategoryKey) => {
     if (filters.includes(filter)) {
       removeFilter(filter);
     } else {

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuFilters/constants.ts

@@ -1,15 +1,8 @@
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
 import { CategoryKey } from "./types";
 
 export const categories: Array<{ key: CategoryKey; name: string }> = [
-  { key: GetV2BuilderSearchFilterAnyOfItem.blocks, name: "Blocks" },
-  {
-    key: GetV2BuilderSearchFilterAnyOfItem.integrations,
-    name: "Integrations",
-  },
-  {
-    key: GetV2BuilderSearchFilterAnyOfItem.marketplace_agents,
-    name: "Marketplace agents",
-  },
-  { key: GetV2BuilderSearchFilterAnyOfItem.my_agents, name: "My agents" },
+  { key: "blocks", name: "Blocks" },
+  { key: "integrations", name: "Integrations" },
+  { key: "marketplace_agents", name: "Marketplace agents" },
+  { key: "my_agents", name: "My agents" },
 ];

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuFilters/types.ts

@@ -1,5 +1,3 @@
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
-
 export type DefaultStateType =
   | "suggestion"
   | "all_blocks"
@@ -10,7 +8,11 @@ export type DefaultStateType =
   | "marketplace_agents"
   | "my_agents";
 
-export type CategoryKey = GetV2BuilderSearchFilterAnyOfItem;
+export type CategoryKey =
+  | "blocks"
+  | "integrations"
+  | "marketplace_agents"
+  | "my_agents";
 
 export interface Filters {
   categories: {

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSearchContent/useBlockMenuSearchContent.tsx

@@ -23,7 +23,7 @@ import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { getQueryClient } from "@/lib/react-query/queryClient";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import * as Sentry from "@sentry/nextjs";
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+import { CategoryCounts } from "../BlockMenuFilters/types";
 
 export const useBlockMenuSearchContent = () => {
   const {
@@ -67,7 +67,7 @@ export const useBlockMenuSearchContent = () => {
       page_size: 8,
       search_query: searchQuery,
       search_id: searchId,
-      filter: filters.length > 0 ? filters : undefined,
+      filter: filters.length > 0 ? filters.join(",") : undefined,
       by_creator: creators.length > 0 ? creators : undefined,
     },
     {
@@ -117,10 +117,7 @@ export const useBlockMenuSearchContent = () => {
     }
     const latestData = okData(searchQueryData.pages.at(-1));
     setCategoryCounts(
-      (latestData?.total_items as Record<
-        GetV2BuilderSearchFilterAnyOfItem,
-        number
-      >) || {
+      (latestData?.total_items as CategoryCounts) || {
         blocks: 0,
         integrations: 0,
         marketplace_agents: 0,

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/FilterSheet/useFilterSheet.ts

@@ -1,7 +1,7 @@
 import { useBlockMenuStore } from "@/app/(platform)/build/stores/blockMenuStore";
 import { useState } from "react";
 import { INITIAL_CREATORS_TO_SHOW } from "./constant";
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+import { CategoryKey } from "../BlockMenuFilters/types";
 
 export const useFilterSheet = () => {
   const { filters, creators_list, creators, setFilters, setCreators } =
@@ -9,15 +9,13 @@ export const useFilterSheet = () => {
 
   const [isOpen, setIsOpen] = useState(false);
   const [localCategories, setLocalCategories] =
-    useState<GetV2BuilderSearchFilterAnyOfItem[]>(filters);
+    useState<CategoryKey[]>(filters);
   const [localCreators, setLocalCreators] = useState<string[]>(creators);
   const [displayedCreatorsCount, setDisplayedCreatorsCount] = useState(
     INITIAL_CREATORS_TO_SHOW,
   );
 
-  const handleLocalCategoryChange = (
-    category: GetV2BuilderSearchFilterAnyOfItem,
-  ) => {
+  const handleLocalCategoryChange = (category: CategoryKey) => {
     setLocalCategories((prev) => {
       if (prev.includes(category)) {
         return prev.filter((c) => c !== category);

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/IntergrationBlock.tsx

@@ -61,7 +61,10 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
     // preview when user drags it
     const dragPreview = document.createElement("div");
     dragPreview.style.cssText = blockDragPreviewStyle;
-    dragPreview.textContent = beautifyString(title || "");
+    dragPreview.textContent = beautifyString(title || "").replace(
+      / Block$/,
+      "",
+    );
 
     document.body.appendChild(dragPreview);
     e.dataTransfer.setDragImage(dragPreview, 0, 0);
@@ -100,7 +103,10 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
               "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
             )}
           >
-            {highlightText(beautifyString(title), highlightedText)}
+            {highlightText(
+              beautifyString(title).replace(/ Block$/, ""),
+              highlightedText,
+            )}
           </span>
         )}
         {description && (

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/UGCAgentBlock.tsx

@@ -81,6 +81,14 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
           >
             Version {version}
           </span>
+
+          <span
+            className={cn(
+              "rounded-[0.75rem] bg-zinc-200 px-[0.5rem] font-sans text-xs leading-[1.25rem] text-zinc-500",
+            )}
+          >
+            Your Agent
+          </span>
         </div>
       </div>
       <div

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>
+  );
+};

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,

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";
 

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 />
   );
 }

autogpt_platform/frontend/src/app/(platform)/build/stores/blockMenuStore.ts

@@ -3,28 +3,29 @@ import { DefaultStateType } from "../components/NewControlPanel/NewBlockMenu/typ
 import { SearchResponseItemsItem } from "@/app/api/__generated__/models/searchResponseItemsItem";
 import { getSearchItemType } from "../components/NewControlPanel/NewBlockMenu/BlockMenuSearchContent/helper";
 import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
-import { GetV2BuilderSearchFilterAnyOfItem } from "@/app/api/__generated__/models/getV2BuilderSearchFilterAnyOfItem";
+import {
+  CategoryKey,
+  CategoryCounts,
+} from "../components/NewControlPanel/NewBlockMenu/BlockMenuFilters/types";
 
 type BlockMenuStore = {
   searchQuery: string;
   searchId: string | undefined;
   defaultState: DefaultStateType;
   integration: string | undefined;
-  filters: GetV2BuilderSearchFilterAnyOfItem[];
+  filters: CategoryKey[];
   creators: string[];
   creators_list: string[];
-  categoryCounts: Record<GetV2BuilderSearchFilterAnyOfItem, number>;
+  categoryCounts: CategoryCounts;
 
-  setCategoryCounts: (
-    counts: Record<GetV2BuilderSearchFilterAnyOfItem, number>,
-  ) => void;
+  setCategoryCounts: (counts: CategoryCounts) => void;
   setCreatorsList: (searchData: SearchResponseItemsItem[]) => void;
   addCreator: (creator: string) => void;
   setCreators: (creators: string[]) => void;
   removeCreator: (creator: string) => void;
-  addFilter: (filter: GetV2BuilderSearchFilterAnyOfItem) => void;
-  setFilters: (filters: GetV2BuilderSearchFilterAnyOfItem[]) => void;
-  removeFilter: (filter: GetV2BuilderSearchFilterAnyOfItem) => void;
+  addFilter: (filter: CategoryKey) => void;
+  setFilters: (filters: CategoryKey[]) => void;
+  removeFilter: (filter: CategoryKey) => void;
   setSearchQuery: (query: string) => void;
   setSearchId: (id: string | undefined) => void;
   setDefaultState: (state: DefaultStateType) => void;

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;
+}

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>
+  );
+}

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>
+  );
+}

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,

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>
+      )}
+    </>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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";

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>;

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 />;
+}

autogpt_platform/frontend/src/app/api/openapi.json

@@ -820,21 +820,7 @@
             "in": "query",
             "required": false,
             "schema": {
-              "anyOf": [
-                {
-                  "type": "array",
-                  "items": {
-                    "enum": [
-                      "blocks",
-                      "integrations",
-                      "marketplace_agents",
-                      "my_agents"
-                    ],
-                    "type": "string"
-                  }
-                },
-                { "type": "null" }
-              ],
+              "anyOf": [{ "type": "string" }, { "type": "null" }],
               "title": "Filter"
             }
           },
@@ -11384,11 +11370,6 @@
       },
       "SuggestionsResponse": {
         "properties": {
-          "otto_suggestions": {
-            "items": { "type": "string" },
-            "type": "array",
-            "title": "Otto Suggestions"
-          },
           "recent_searches": {
             "items": { "$ref": "#/components/schemas/SearchEntry" },
             "type": "array",
@@ -11409,12 +11390,7 @@
           }
         },
         "type": "object",
-        "required": [
-          "otto_suggestions",
-          "recent_searches",
-          "providers",
-          "top_blocks"
-        ],
+        "required": ["recent_searches", "providers", "top_blocks"],
         "title": "SuggestionsResponse"
       },
       "TimezoneResponse": {

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";

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,

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

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

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();
   }
 }