fix(frontend/builder): handle discriminated unions and improve node layout

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

@@ -23,6 +23,12 @@ import { WebhookDisclaimer } from "./components/WebhookDisclaimer";
 import { SubAgentUpdateFeature } from "./components/SubAgentUpdate/SubAgentUpdateFeature";
 import { useCustomNode } from "./useCustomNode";
 
+function hasAdvancedFields(schema: RJSFSchema): boolean {
+  const properties = schema?.properties;
+  if (!properties) return false;
+  return Object.values(properties).some((prop: any) => prop.advanced === true);
+}
+
 export type CustomNodeData = {
   hardcodedValues: {
     [key: string]: any;
@@ -108,7 +114,11 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
             )}
             showHandles={showHandles}
           />
-          <NodeAdvancedToggle nodeId={nodeId} />
+          <NodeAdvancedToggle
+            nodeId={nodeId}
+            isLastSection={data.uiType === BlockUIType.OUTPUT}
+            hasAdvancedFields={hasAdvancedFields(inputSchema)}
+          />
           {data.uiType != BlockUIType.OUTPUT && (
             <OutputHandler
               uiType={data.uiType}

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

@@ -2,18 +2,33 @@ import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { CaretDownIcon } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
 
 type Props = {
   nodeId: string;
+  isLastSection?: boolean;
+  hasAdvancedFields?: boolean;
 };
 
-export function NodeAdvancedToggle({ nodeId }: Props) {
+export function NodeAdvancedToggle({
+  nodeId,
+  isLastSection,
+  hasAdvancedFields = true,
+}: Props) {
   const showAdvanced = useNodeStore(
     (state) => state.nodeAdvancedStates[nodeId] || false,
   );
   const setShowAdvanced = useNodeStore((state) => state.setShowAdvanced);
+
+  if (!hasAdvancedFields) return null;
+
   return (
-    <div className="flex items-center justify-start gap-2 bg-white px-5 pb-3.5">
+    <div
+      className={cn(
+        "flex items-center justify-start gap-2 bg-white px-5 pb-3.5",
+        isLastSection && "rounded-b-xlarge",
+      )}
+    >
       <Button
         variant="ghost"
         className="h-fit min-w-0 p-0 hover:border-transparent hover:bg-transparent"

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
-import { CaretDownIcon, InfoIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretRightIcon, InfoIcon } from "@phosphor-icons/react";
 import { RJSFSchema } from "@rjsf/utils";
 import { useState } from "react";
 
@@ -30,24 +30,62 @@ export const OutputHandler = ({
   const properties = outputSchema?.properties || {};
   const [isOutputVisible, setIsOutputVisible] = useState(true);
   const brokenOutputs = useBrokenOutputs(nodeId);
+  const [expandedObjects, setExpandedObjects] = useState<
+    Record<string, boolean>
+  >({});
 
   const showHandles = uiType !== BlockUIType.OUTPUT;
 
+  function toggleObjectExpanded(key: string) {
+    setExpandedObjects((prev) => ({ ...prev, [key]: !prev[key] }));
+  }
+
+  function hasConnectedOrBrokenDescendant(
+    schema: RJSFSchema,
+    keyPrefix: string,
+  ): boolean {
+    if (!schema) return false;
+    return Object.entries(schema).some(
+      ([key, fieldSchema]: [string, RJSFSchema]) => {
+        const fullKey = keyPrefix ? `${keyPrefix}_#_${key}` : key;
+        if (isOutputConnected(nodeId, fullKey) || brokenOutputs.has(fullKey))
+          return true;
+        if (fieldSchema?.properties)
+          return hasConnectedOrBrokenDescendant(fieldSchema.properties, fullKey);
+        return false;
+      },
+    );
+  }
+
   const renderOutputHandles = (
     schema: RJSFSchema,
     keyPrefix: string = "",
     titlePrefix: string = "",
+    connectedOnly: boolean = false,
   ): React.ReactNode[] => {
     return Object.entries(schema).map(
       ([key, fieldSchema]: [string, RJSFSchema]) => {
         const fullKey = keyPrefix ? `${keyPrefix}_#_${key}` : key;
         const fieldTitle = titlePrefix + (fieldSchema?.title || key);
 
         const isConnected = isOutputConnected(nodeId, fullKey);
-        const shouldShow = isConnected || isOutputVisible;
+        const isBroken = brokenOutputs.has(fullKey);
+        const hasNestedProperties = !!fieldSchema?.properties;
+        const selfIsRelevant = isConnected || isBroken;
+        const descendantIsRelevant =
+          hasNestedProperties &&
+          hasConnectedOrBrokenDescendant(fieldSchema.properties!, fullKey);
+
+        const shouldShow = connectedOnly
+          ? selfIsRelevant || descendantIsRelevant
+          : isOutputVisible || selfIsRelevant || descendantIsRelevant;
+
         const { displayType, colorClass, hexColor } =
           getTypeDisplayInfo(fieldSchema);
-        const isBroken = brokenOutputs.has(fullKey);
+        const isExpanded = expandedObjects[fullKey] ?? false;
+
+        // User expanded → show all children; auto-expanded → filter to connected only
+        const shouldRenderChildren = isExpanded || descendantIsRelevant;
 
         return shouldShow ? (
           <div
@@ -56,6 +94,19 @@ export const OutputHandler = ({
             data-tutorial-id={`output-handler-${nodeId}-${fieldTitle}`}
           >
             <div className="relative flex items-center gap-2">
+              {hasNestedProperties && (
+                <button
+                  onClick={() => toggleObjectExpanded(fullKey)}
+                  className="flex items-center text-slate-500 hover:text-slate-700"
+                  aria-label={isExpanded ? "Collapse" : "Expand"}
+                >
+                  {isExpanded ? (
+                    <CaretDownIcon size={12} weight="bold" />
+                  ) : (
+                    <CaretRightIcon size={12} weight="bold" />
+                  )}
+                </button>
+              )}
               {fieldSchema?.description && (
                 <TooltipProvider>
                   <Tooltip>
@@ -102,12 +153,14 @@ export const OutputHandler = ({
               )}
             </div>
 
-            {/* Recursively render nested properties */}
-            {fieldSchema?.properties &&
+            {/* Nested properties */}
+            {hasNestedProperties &&
+              shouldRenderChildren &&
               renderOutputHandles(
-                fieldSchema.properties,
+                fieldSchema.properties!,
                 fullKey,
-                `${fieldTitle}.`,
+                "",
+                !isExpanded,
               )}
           </div>
         ) : null;
@@ -136,7 +189,7 @@ export const OutputHandler = ({
       </Button>
 
       <div className="flex flex-col items-end gap-2">
-        {renderOutputHandles(properties)}
+        {renderOutputHandles(properties, "", "", !isOutputVisible)}
       </div>
     </div>
   );

autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx

@@ -34,10 +34,7 @@ export function FormRenderer({
   }, [preprocessedSchema, uiSchema]);
 
   return (
-    <div
-      className={cn("mb-6 mt-4", className)}
-      data-tutorial-id="input-handles"
-    >
+    <div className={cn("mt-4", className)} data-tutorial-id="input-handles">
       <Form
         formContext={formContext}
         idPrefix="agpt"

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/useAnyOfField.ts

@@ -63,7 +63,6 @@ export const useAnyOfField = (props: FieldProps) => {
     );
 
     const handlePrefix = cleanUpHandleId(field_id);
-    console.log("handlePrefix", handlePrefix);
     useEdgeStore
       .getState()
       .removeEdgesByHandlePrefix(registry.formContext.nodeId, handlePrefix);

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/base-registry.ts

@@ -4,6 +4,7 @@ import {
   TemplatesType,
 } from "@rjsf/utils";
 import { AnyOfField } from "./anyof/AnyOfField";
+import { OneOfField } from "./oneof/OneOfField";
 import {
   ArrayFieldItemTemplate,
   ArrayFieldTemplate,
@@ -32,6 +33,7 @@ const NoButton = () => null;
 export function generateBaseFields(): RegistryFieldsType {
   return {
     AnyOfField,
+    OneOfField,
     ArraySchemaField,
   };
 }