fix: RunBlock.tsx — The hasExpandableContent condition was missing isRunBlockDetailsOutput(output), preventing the accordion from rendering when the

backend returns a BlockDetailsResponse.

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx

@@ -3,6 +3,7 @@
 import type { ToolUIPart } from "ai";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { BlockDetailsCard } from "./components/BlockDetailsCard/BlockDetailsCard";
 import { BlockOutputCard } from "./components/BlockOutputCard/BlockOutputCard";
 import { ErrorCard } from "./components/ErrorCard/ErrorCard";
 import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
@@ -11,6 +12,7 @@ import {
   getAnimationText,
   getRunBlockToolOutput,
   isRunBlockBlockOutput,
+  isRunBlockDetailsOutput,
   isRunBlockErrorOutput,
   isRunBlockSetupRequirementsOutput,
   ToolIcon,
@@ -41,6 +43,7 @@ export function RunBlockTool({ part }: Props) {
     part.state === "output-available" &&
     !!output &&
     (isRunBlockBlockOutput(output) ||
+      isRunBlockDetailsOutput(output) ||
       isRunBlockSetupRequirementsOutput(output) ||
       isRunBlockErrorOutput(output));
 
@@ -58,6 +61,10 @@ export function RunBlockTool({ part }: Props) {
         <ToolAccordion {...getAccordionMeta(output)}>
           {isRunBlockBlockOutput(output) && <BlockOutputCard output={output} />}
 
+          {isRunBlockDetailsOutput(output) && (
+            <BlockDetailsCard output={output} />
+          )}
+
           {isRunBlockSetupRequirementsOutput(output) && (
             <SetupRequirementsCard output={output} />
           )}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockDetailsCard/BlockDetailsCard.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import type { BlockDetailsResponse } from "../../helpers";
+import { BlockDetailsCard } from "./BlockDetailsCard";
+
+const meta: Meta<typeof BlockDetailsCard> = {
+  title: "Copilot/RunBlock/BlockDetailsCard",
+  component: BlockDetailsCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 480 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const baseBlock: BlockDetailsResponse = {
+  type: ResponseType.block_details,
+  message: "Here are the details for the GetWeather block. Provide the required inputs to run it.",
+  session_id: "session-123",
+  user_authenticated: true,
+  block: {
+    id: "block-abc-123",
+    name: "GetWeather",
+    description: "Fetches current weather data for a given location.",
+    inputs: {
+      type: "object",
+      properties: {
+        location: {
+          title: "Location",
+          type: "string",
+          description: "City name or coordinates (e.g. 'London' or '51.5,-0.1')",
+        },
+        units: {
+          title: "Units",
+          type: "string",
+          description: "Temperature units: 'metric' or 'imperial'",
+        },
+      },
+      required: ["location"],
+    },
+    outputs: {
+      type: "object",
+      properties: {
+        temperature: {
+          title: "Temperature",
+          type: "number",
+          description: "Current temperature in the requested units",
+        },
+        condition: {
+          title: "Condition",
+          type: "string",
+          description: "Weather condition description (e.g. 'Sunny', 'Rain')",
+        },
+      },
+    },
+    credentials: [],
+  },
+};
+
+export const Default: Story = {
+  args: {
+    output: baseBlock,
+  },
+};
+
+export const InputsOnly: Story = {
+  args: {
+    output: {
+      ...baseBlock,
+      message: "This block requires inputs. No outputs are defined.",
+      block: {
+        ...baseBlock.block,
+        outputs: {},
+      },
+    },
+  },
+};
+
+export const OutputsOnly: Story = {
+  args: {
+    output: {
+      ...baseBlock,
+      message: "This block has no required inputs.",
+      block: {
+        ...baseBlock.block,
+        inputs: {},
+      },
+    },
+  },
+};
+
+export const ManyFields: Story = {
+  args: {
+    output: {
+      ...baseBlock,
+      message: "Block with many input and output fields.",
+      block: {
+        ...baseBlock.block,
+        name: "SendEmail",
+        description: "Sends an email via SMTP.",
+        inputs: {
+          type: "object",
+          properties: {
+            to: { title: "To", type: "string", description: "Recipient email address" },
+            subject: { title: "Subject", type: "string", description: "Email subject line" },
+            body: { title: "Body", type: "string", description: "Email body content" },
+            cc: { title: "CC", type: "string", description: "CC recipients (comma-separated)" },
+            bcc: { title: "BCC", type: "string", description: "BCC recipients (comma-separated)" },
+          },
+          required: ["to", "subject", "body"],
+        },
+        outputs: {
+          type: "object",
+          properties: {
+            message_id: { title: "Message ID", type: "string", description: "Unique ID of the sent email" },
+            status: { title: "Status", type: "string", description: "Delivery status" },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const NoFieldDescriptions: Story = {
+  args: {
+    output: {
+      ...baseBlock,
+      message: "Fields without descriptions.",
+      block: {
+        ...baseBlock.block,
+        name: "SimpleBlock",
+        inputs: {
+          type: "object",
+          properties: {
+            input_a: { title: "Input A", type: "string" },
+            input_b: { title: "Input B", type: "number" },
+          },
+          required: ["input_a"],
+        },
+        outputs: {
+          type: "object",
+          properties: {
+            result: { title: "Result", type: "string" },
+          },
+        },
+      },
+    },
+  },
+};

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockDetailsCard/BlockDetailsCard.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { BlockDetailsResponse } from "../../helpers";
+import {
+  ContentBadge,
+  ContentCard,
+  ContentCardDescription,
+  ContentCardTitle,
+  ContentGrid,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+
+interface Props {
+  output: BlockDetailsResponse;
+}
+
+function SchemaFieldList({
+  title,
+  properties,
+  required,
+}: {
+  title: string;
+  properties: Record<string, unknown>;
+  required?: string[];
+}) {
+  const entries = Object.entries(properties);
+  if (entries.length === 0) return null;
+
+  const requiredSet = new Set(required ?? []);
+
+  return (
+    <ContentCard>
+      <ContentCardTitle className="text-xs">{title}</ContentCardTitle>
+      <div className="mt-2 grid gap-2">
+        {entries.map(([name, schema]) => {
+          const field = schema as Record<string, unknown> | undefined;
+          const fieldTitle =
+            typeof field?.title === "string" ? field.title : name;
+          const fieldType =
+            typeof field?.type === "string" ? field.type : "unknown";
+          const description =
+            typeof field?.description === "string"
+              ? field.description
+              : undefined;
+
+          return (
+            <div key={name} className="rounded-xl border p-2">
+              <div className="flex items-center justify-between gap-2">
+                <ContentCardTitle className="text-xs">
+                  {fieldTitle}
+                </ContentCardTitle>
+                <div className="flex gap-1">
+                  <ContentBadge>{fieldType}</ContentBadge>
+                  {requiredSet.has(name) && (
+                    <ContentBadge>Required</ContentBadge>
+                  )}
+                </div>
+              </div>
+              {description && (
+                <ContentCardDescription className="mt-1 text-xs">
+                  {description}
+                </ContentCardDescription>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </ContentCard>
+  );
+}
+
+export function BlockDetailsCard({ output }: Props) {
+  const inputs = output.block.inputs as {
+    properties?: Record<string, unknown>;
+    required?: string[];
+  } | null;
+  const outputs = output.block.outputs as {
+    properties?: Record<string, unknown>;
+    required?: string[];
+  } | null;
+
+  return (
+    <ContentGrid>
+      <ContentMessage>{output.message}</ContentMessage>
+
+      {inputs?.properties && Object.keys(inputs.properties).length > 0 && (
+        <SchemaFieldList
+          title="Inputs"
+          properties={inputs.properties}
+          required={inputs.required}
+        />
+      )}
+
+      {outputs?.properties && Object.keys(outputs.properties).length > 0 && (
+        <SchemaFieldList
+          title="Outputs"
+          properties={outputs.properties}
+          required={outputs.required}
+        />
+      )}
+    </ContentGrid>
+  );
+}