fix(platform): UI fixes; Fix block note UI displayed as normal block;Json-prettify execution output (#8169)

* fix(platform): UI fixes; Fix block note UI displayed as normal block; Json-prettify execution output

* fix(platform): UI fixes; Fix block note UI displayed as normal block; Json-prettify execution output

---------

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>

autogpt_platform/backend/backend/blocks/basic.py

@@ -4,13 +4,7 @@ from typing import Any, List
 from jinja2 import BaseLoader, Environment
 from pydantic import Field
 
-from backend.data.block import (
-    Block,
-    BlockCategory,
-    BlockOutput,
-    BlockSchema,
-    BlockUIType,
-)
+from backend.data.block import Block, BlockCategory, BlockOutput, BlockSchema, BlockType
 from backend.data.model import SchemaField
 from backend.util.mock import MockObject
 
@@ -196,7 +190,7 @@ class AgentInputBlock(Block):
                 ("result", "Hello, World!"),
             ],
             categories={BlockCategory.INPUT, BlockCategory.BASIC},
-            ui_type=BlockUIType.INPUT,
+            block_type=BlockType.INPUT,
         )
 
     def run(self, input_data: Input, **kwargs) -> BlockOutput:
@@ -272,7 +266,7 @@ class AgentOutputBlock(Block):
                 ("output", MockObject(value="!!", key="key")),
             ],
             categories={BlockCategory.OUTPUT, BlockCategory.BASIC},
-            ui_type=BlockUIType.OUTPUT,
+            block_type=BlockType.OUTPUT,
         )
 
     def run(self, input_data: Input, **kwargs) -> BlockOutput:
@@ -444,7 +438,7 @@ class NoteBlock(Block):
             test_output=[
                 ("output", "Hello, World!"),
             ],
-            ui_type=BlockUIType.NOTE,
+            block_type=BlockType.NOTE,
         )
 
     def run(self, input_data: Input, **kwargs) -> BlockOutput:

autogpt_platform/backend/backend/data/block.py

@@ -29,11 +29,7 @@ BlockOutput = Generator[BlockData, None, None]  # Output: 1 output pin produces
 CompletedBlockOutput = dict[str, list[Any]]  # Completed stream, collected as a dict.
 
 
-class BlockUIType(Enum):
-    """
-    The type of Node UI to be displayed in the builder for this block.
-    """
-
+class BlockType(Enum):
     STANDARD = "Standard"
     INPUT = "Input"
     OUTPUT = "Output"
@@ -200,7 +196,7 @@ class Block(ABC, Generic[BlockSchemaInputType, BlockSchemaOutputType]):
         test_credentials: Optional[Credentials] = None,
         disabled: bool = False,
         static_output: bool = False,
-        ui_type: BlockUIType = BlockUIType.STANDARD,
+        block_type: BlockType = BlockType.STANDARD,
     ):
         """
         Initialize the block with the given schema.
@@ -231,7 +227,7 @@ class Block(ABC, Generic[BlockSchemaInputType, BlockSchemaOutputType]):
         self.contributors = contributors or set()
         self.disabled = disabled
         self.static_output = static_output
-        self.ui_type = ui_type
+        self.block_type = block_type
 
     @abstractmethod
     def run(self, input_data: BlockSchemaInputType, **kwargs) -> BlockOutput:
@@ -262,7 +258,7 @@ class Block(ABC, Generic[BlockSchemaInputType, BlockSchemaOutputType]):
                 contributor.model_dump() for contributor in self.contributors
             ],
             "staticOutput": self.static_output,
-            "uiType": self.ui_type.value,
+            "uiType": self.block_type.value,
         }
 
     def execute(self, input_data: BlockInput, **kwargs) -> BlockOutput:

autogpt_platform/backend/backend/executor/manager.py

@@ -17,9 +17,8 @@ from pydantic import BaseModel
 if TYPE_CHECKING:
     from backend.server.rest_api import AgentServer
 
-from backend.blocks.basic import AgentInputBlock
 from backend.data import db
-from backend.data.block import Block, BlockData, BlockInput, get_block
+from backend.data.block import Block, BlockData, BlockInput, BlockType, get_block
 from backend.data.credit import get_user_credit_model
 from backend.data.execution import (
     ExecutionQueue,
@@ -737,7 +736,14 @@ class ExecutionManager(AppService):
         nodes_input = []
         for node in graph.starting_nodes:
             input_data = {}
-            if isinstance(get_block(node.block_id), AgentInputBlock):
+            block = get_block(node.block_id)
+
+            # Invalid block & Note block should never be executed.
+            if not block or block.block_type == BlockType.NOTE:
+                continue
+
+            # Extract request input data, and assign it to the input pin.
+            if block.block_type == BlockType.INPUT:
                 name = node.input_default.get("name")
                 if name and name in data:
                     input_data = {"value": data[name]}

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -540,7 +540,6 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
           value === inputValues[key] || (!value && !inputValues[key]),
       ),
     );
-  console.debug(`Block cost ${inputValues}|${data.blockCosts}=${blockCost}`);
 
   return (
     <div

autogpt_platform/frontend/src/components/DataTable.tsx

@@ -51,7 +51,7 @@ export default function DataTable({
                 {beautifyString(key)}
               </TableCell>
               <TableCell className="cursor-text">
-                <div className="flex min-h-9 items-center">
+                <div className="flex min-h-9 items-center whitespace-pre-wrap">
                   <Button
                     className="absolute right-1 top-auto m-1 hidden p-2 group-hover:block"
                     variant="outline"
@@ -62,7 +62,7 @@ export default function DataTable({
                         value
                           .map((i) =>
                             typeof i === "object"
-                              ? JSON.stringify(i)
+                              ? JSON.stringify(i, null, 2)
                               : String(i),
                           )
                           .join(", "),
@@ -75,7 +75,9 @@ export default function DataTable({
                   {value
                     .map((i) => {
                       const text =
-                        typeof i === "object" ? JSON.stringify(i) : String(i);
+                        typeof i === "object"
+                          ? JSON.stringify(i, null, 2)
+                          : String(i);
                       return truncateLongData && text.length > maxChars
                         ? text.slice(0, maxChars) + "..."
                         : text;

autogpt_platform/frontend/src/components/RunnerUIWrapper.tsx

@@ -8,7 +8,7 @@ import RunnerInputUI from "./runner-ui/RunnerInputUI";
 import RunnerOutputUI from "./runner-ui/RunnerOutputUI";
 import { Node } from "@xyflow/react";
 import { filterBlocksByType } from "@/lib/utils";
-import { BlockIORootSchema } from "@/lib/autogpt-server-api/types";
+import { BlockIORootSchema, BlockUIType } from "@/lib/autogpt-server-api/types";
 
 interface RunnerUIWrapperProps {
   nodes: Node[];
@@ -31,12 +31,12 @@ const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
     const getBlockInputsAndOutputs = useCallback(() => {
       const inputBlocks = filterBlocksByType(
         nodes,
-        (node) => node.data.block_id === "c0a8e994-ebf1-4a9c-a4d8-89d09c86741b",
+        (node) => node.data.uiType === BlockUIType.INPUT,
       );
 
       const outputBlocks = filterBlocksByType(
         nodes,
-        (node) => node.data.block_id === "363ae599-353e-4804-937e-b2ee3cef3da4",
+        (node) => node.data.uiType === BlockUIType.OUTPUT,
       );
 
       const inputs = inputBlocks.map((node) => ({

autogpt_platform/frontend/src/hooks/useAgentGraph.ts

@@ -152,6 +152,7 @@ export default function useAgentGraph(
               inputSchema: block.inputSchema,
               outputSchema: block.outputSchema,
               hardcodedValues: node.input_default,
+              uiType: block.uiType,
               connections: graph.links
                 .filter((l) => [l.source_id, l.sink_id].includes(node.id))
                 .map((link) => ({