feat(frontend): Enhance RunAgent and ViewAgentOutput components

- Added `getAccordionMeta` function to `RunAgent/helpers.tsx` for improved output handling.
- Refactored `RunAgent.tsx` to utilize the new `getAccordionMeta` function, streamlining the component's logic.
- Introduced media rendering capabilities in `ViewAgentOutput.tsx` for workspace references, including support for images, audio, and video.
- Enhanced output display logic to handle various data types more effectively.

These changes improve the user experience by providing clearer status updates and better media handling in the application.

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx

@@ -1,16 +1,10 @@
 "use client";
 
 import type { ToolUIPart } from "ai";
-import Link from "next/link";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import {
-  ChatCredentialsSetup,
-  type CredentialInfo,
-} from "@/components/contextual/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup";
-import {
-  formatMaybeJson,
+  getAccordionMeta,
   getAnimationText,
   getRunAgentToolOutput,
   isRunAgentAgentDetailsOutput,
@@ -19,8 +13,11 @@ import {
   isRunAgentNeedLoginOutput,
   isRunAgentSetupRequirementsOutput,
   ToolIcon,
-  type RunAgentToolOutput,
 } from "./helpers";
+import { ExecutionStartedCard } from "./components/ExecutionStartedCard/ExecutionStartedCard";
+import { AgentDetailsCard } from "./components/AgentDetailsCard/AgentDetailsCard";
+import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
+import { ErrorCard } from "./components/ErrorCard/ErrorCard";
 
 export interface RunAgentToolPart {
   type: string;
@@ -34,177 +31,8 @@ interface Props {
   part: RunAgentToolPart;
 }
 
-function getAccordionMeta(output: RunAgentToolOutput): {
-  badgeText: string;
-  title: string;
-  description?: string;
-} {
-  if (isRunAgentExecutionStartedOutput(output)) {
-    const statusText =
-      typeof output.status === "string" && output.status.trim()
-        ? output.status.trim()
-        : "started";
-    return {
-      badgeText: "Run agent",
-      title: output.graph_name,
-      description: `Status: ${statusText}`,
-    };
-  }
-
-  if (isRunAgentAgentDetailsOutput(output)) {
-    return {
-      badgeText: "Run agent",
-      title: output.agent.name,
-      description: "Inputs required",
-    };
-  }
-
-  if (isRunAgentSetupRequirementsOutput(output)) {
-    const missingCredsCount = Object.keys(
-      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
-        string,
-        unknown
-      >,
-    ).length;
-    return {
-      badgeText: "Run agent",
-      title: output.setup_info.agent_name,
-      description:
-        missingCredsCount > 0
-          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
-          : output.message,
-    };
-  }
-
-  if (isRunAgentNeedLoginOutput(output)) {
-    return { badgeText: "Run agent", title: "Sign in required" };
-  }
-
-  return { badgeText: "Run agent", title: "Error" };
-}
-
-function coerceMissingCredentials(
-  rawMissingCredentials: unknown,
-): CredentialInfo[] {
-  const missing =
-    rawMissingCredentials && typeof rawMissingCredentials === "object"
-      ? (rawMissingCredentials as Record<string, unknown>)
-      : {};
-
-  const validTypes = new Set([
-    "api_key",
-    "oauth2",
-    "user_password",
-    "host_scoped",
-  ]);
-
-  const results: CredentialInfo[] = [];
-
-  Object.values(missing).forEach((value) => {
-    if (!value || typeof value !== "object") return;
-    const cred = value as Record<string, unknown>;
-
-    const provider =
-      typeof cred.provider === "string" ? cred.provider.trim() : "";
-    if (!provider) return;
-
-    const providerName =
-      typeof cred.provider_name === "string" && cred.provider_name.trim()
-        ? cred.provider_name.trim()
-        : provider.replace(/_/g, " ");
-
-    const title =
-      typeof cred.title === "string" && cred.title.trim()
-        ? cred.title.trim()
-        : providerName;
-
-    const types =
-      Array.isArray(cred.types) && cred.types.length > 0
-        ? cred.types
-        : typeof cred.type === "string"
-          ? [cred.type]
-          : [];
-
-    const credentialTypes = types
-      .map((t) => (typeof t === "string" ? t.trim() : ""))
-      .filter(
-        (t): t is "api_key" | "oauth2" | "user_password" | "host_scoped" =>
-          validTypes.has(t),
-      );
-
-    if (credentialTypes.length === 0) return;
-
-    const scopes = Array.isArray(cred.scopes)
-      ? cred.scopes.filter((s): s is string => typeof s === "string")
-      : undefined;
-
-    const item: CredentialInfo = {
-      provider,
-      providerName,
-      credentialTypes,
-      title,
-    };
-    if (scopes && scopes.length > 0) {
-      item.scopes = scopes;
-    }
-    results.push(item);
-  });
-
-  return results;
-}
-
-function coerceExpectedInputs(rawInputs: unknown): Array<{
-  name: string;
-  title: string;
-  type: string;
-  description?: string;
-  required: boolean;
-}> {
-  if (!Array.isArray(rawInputs)) return [];
-  const results: Array<{
-    name: string;
-    title: string;
-    type: string;
-    description?: string;
-    required: boolean;
-  }> = [];
-
-  rawInputs.forEach((value, index) => {
-    if (!value || typeof value !== "object") return;
-    const input = value as Record<string, unknown>;
-
-    const name =
-      typeof input.name === "string" && input.name.trim()
-        ? input.name.trim()
-        : `input-${index}`;
-    const title =
-      typeof input.title === "string" && input.title.trim()
-        ? input.title.trim()
-        : name;
-    const type = typeof input.type === "string" ? input.type : "unknown";
-    const description =
-      typeof input.description === "string" && input.description.trim()
-        ? input.description.trim()
-        : undefined;
-    const required = Boolean(input.required);
-
-    const item: {
-      name: string;
-      title: string;
-      type: string;
-      description?: string;
-      required: boolean;
-    } = { name, title, type, required };
-    if (description) item.description = description;
-    results.push(item);
-  });
-
-  return results;
-}
-
 export function RunAgentTool({ part }: Props) {
   const text = getAnimationText(part);
-  const { onSend } = useCopilotChatActions();
   const isStreaming =
     part.state === "input-streaming" || part.state === "input-available";
 
@@ -221,12 +49,6 @@ export function RunAgentTool({ part }: Props) {
       isRunAgentNeedLoginOutput(output) ||
       isRunAgentErrorOutput(output));
 
-  function handleAllCredentialsComplete() {
-    onSend(
-      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
-    );
-  }
-
   return (
     <div className="py-2">
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -246,130 +68,22 @@ export function RunAgentTool({ part }: Props) {
           }
         >
           {isRunAgentExecutionStartedOutput(output) && (
-            <div className="grid gap-2">
-              <div className="rounded-2xl border bg-background p-3">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium text-foreground">
-                      Execution started
-                    </p>
-                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                      {output.execution_id}
-                    </p>
-                    <p className="mt-2 text-xs text-muted-foreground">
-                      {output.message}
-                    </p>
-                  </div>
-                  {output.library_agent_link && (
-                    <Link
-                      href={output.library_agent_link}
-                      className="shrink-0 text-xs font-medium text-purple-600 hover:text-purple-700"
-                    >
-                      Open
-                    </Link>
-                  )}
-                </div>
-              </div>
-            </div>
+            <ExecutionStartedCard output={output} />
           )}
 
           {isRunAgentAgentDetailsOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {output.agent.description?.trim() && (
-                <p className="text-xs text-muted-foreground">
-                  {output.agent.description}
-                </p>
-              )}
-
-              <div className="rounded-2xl border bg-background p-3">
-                <p className="text-xs font-medium text-foreground">Inputs</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Provide required inputs in chat, or ask to run with defaults.
-                </p>
-                <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                  {formatMaybeJson(output.agent.inputs)}
-                </pre>
-              </div>
-            </div>
+            <AgentDetailsCard output={output} />
           )}
 
           {isRunAgentSetupRequirementsOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-
-              {coerceMissingCredentials(
-                output.setup_info.user_readiness?.missing_credentials,
-              ).length > 0 && (
-                <ChatCredentialsSetup
-                  credentials={coerceMissingCredentials(
-                    output.setup_info.user_readiness?.missing_credentials,
-                  )}
-                  agentName={output.setup_info.agent_name}
-                  message={output.message}
-                  onAllCredentialsComplete={handleAllCredentialsComplete}
-                  onCancel={() => {}}
-                />
-              )}
-
-              {coerceExpectedInputs(
-                (output.setup_info.requirements as Record<string, unknown>)
-                  ?.inputs,
-              ).length > 0 && (
-                <div className="rounded-2xl border bg-background p-3">
-                  <p className="text-xs font-medium text-foreground">
-                    Expected inputs
-                  </p>
-                  <div className="mt-2 grid gap-2">
-                    {coerceExpectedInputs(
-                      (
-                        output.setup_info.requirements as Record<
-                          string,
-                          unknown
-                        >
-                      )?.inputs,
-                    ).map((input) => (
-                      <div key={input.name} className="rounded-xl border p-2">
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="truncate text-xs font-medium text-foreground">
-                            {input.title}
-                          </p>
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {input.required ? "Required" : "Optional"}
-                          </span>
-                        </div>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {input.name} • {input.type}
-                          {input.description ? ` • ${input.description}` : ""}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
+            <SetupRequirementsCard output={output} />
           )}
 
           {isRunAgentNeedLoginOutput(output) && (
             <p className="text-sm text-foreground">{output.message}</p>
           )}
 
-          {isRunAgentErrorOutput(output) && (
-            <div className="grid gap-2">
-              <p className="text-sm text-foreground">{output.message}</p>
-              {output.error && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.error)}
-                </pre>
-              )}
-              {output.details && (
-                <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
-                  {formatMaybeJson(output.details)}
-                </pre>
-              )}
-            </div>
-          )}
+          {isRunAgentErrorOutput(output) && <ErrorCard output={output} />}
         </ToolAccordion>
       )}
     </div>

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@/components/atoms/Button/Button";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
+import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentDetailsResponse";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { buildInputSchema } from "./helpers";
+
+interface Props {
+  output: AgentDetailsResponse;
+}
+
+export function AgentDetailsCard({ output }: Props) {
+  const { onSend } = useCopilotChatActions();
+  const [showInputForm, setShowInputForm] = useState(false);
+  const [inputValues, setInputValues] = useState<Record<string, unknown>>({});
+
+  function handleRunWithExamples() {
+    onSend(
+      `Run the agent "${output.agent.name}" with placeholder/example values so I can test it.`,
+    );
+  }
+
+  function handleRunWithInputs() {
+    const nonEmpty = Object.fromEntries(
+      Object.entries(inputValues).filter(
+        ([, v]) => v !== undefined && v !== null && v !== "",
+      ),
+    );
+    onSend(
+      `Run the agent "${output.agent.name}" with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
+    );
+    setShowInputForm(false);
+    setInputValues({});
+  }
+
+  return (
+    <div className="grid gap-2">
+      <p className="text-sm text-foreground">
+        Run this agent with example values or your own inputs.
+      </p>
+
+      <div className="flex gap-2 pt-4">
+        <Button
+          variant="outline"
+          size="small"
+          className="w-fit"
+          onClick={handleRunWithExamples}
+        >
+          Run with example values
+        </Button>
+        <Button
+          variant="secondary"
+          size="small"
+          className="w-fit"
+          onClick={() => setShowInputForm((prev) => !prev)}
+        >
+          Run with my inputs
+        </Button>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {showInputForm && buildInputSchema(output.agent.inputs) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            transition={{
+              height: { type: "spring", bounce: 0.15, duration: 0.5 },
+              opacity: { duration: 0.25 },
+              filter: { duration: 0.2 },
+            }}
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
+              <p className="text-sm font-medium text-foreground">
+                Enter your inputs
+              </p>
+              <FormRenderer
+                jsonSchema={buildInputSchema(output.agent.inputs)!}
+                handleChange={(v) => setInputValues(v.formData ?? {})}
+                uiSchema={{
+                  "ui:submitButtonOptions": { norender: true },
+                }}
+                initialValues={inputValues}
+                formContext={{
+                  showHandles: false,
+                  size: "small",
+                }}
+              />
+              <div className="-mt-8 flex gap-2">
+                <Button
+                  variant="primary"
+                  size="small"
+                  className="w-fit"
+                  onClick={handleRunWithInputs}
+                >
+                  Run
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="small"
+                  className="w-fit"
+                  onClick={() => {
+                    setShowInputForm(false);
+                    setInputValues({});
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/AgentDetailsCard/helpers.ts

@@ -0,0 +1,8 @@
+import type { RJSFSchema } from "@rjsf/utils";
+
+export function buildInputSchema(inputs: unknown): RJSFSchema | null {
+  if (!inputs || typeof inputs !== "object") return null;
+  const properties = inputs as RJSFSchema["properties"];
+  if (!properties || Object.keys(properties).length === 0) return null;
+  return inputs as RJSFSchema;
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import { formatMaybeJson } from "../../helpers";
+
+interface Props {
+  output: ErrorResponse;
+}
+
+export function ErrorCard({ output }: Props) {
+  return (
+    <div className="grid gap-2">
+      <p className="text-sm text-foreground">{output.message}</p>
+      {output.error && (
+        <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
+          {formatMaybeJson(output.error)}
+        </pre>
+      )}
+      {output.details && (
+        <pre className="whitespace-pre-wrap rounded-2xl border bg-muted/30 p-3 text-xs text-muted-foreground">
+          {formatMaybeJson(output.details)}
+        </pre>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/ExecutionStartedCard/ExecutionStartedCard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/atoms/Button/Button";
+import type { ExecutionStartedResponse } from "@/app/api/__generated__/models/executionStartedResponse";
+
+interface Props {
+  output: ExecutionStartedResponse;
+}
+
+export function ExecutionStartedCard({ output }: Props) {
+  const router = useRouter();
+
+  return (
+    <div className="grid gap-2">
+      <div className="rounded-2xl border bg-background p-3">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground">
+            Execution started
+          </p>
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            {output.execution_id}
+          </p>
+          <p className="mt-2 text-xs text-muted-foreground">{output.message}</p>
+        </div>
+        {output.library_agent_link && (
+          <Button
+            variant="outline"
+            size="small"
+            className="mt-3 w-full"
+            onClick={() => router.push(output.library_agent_link!)}
+          >
+            View Execution
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import { Button } from "@/components/atoms/Button/Button";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { coerceCredentialFields, coerceExpectedInputs } from "./helpers";
+
+interface Props {
+  output: SetupRequirementsResponse;
+}
+
+export function SetupRequirementsCard({ output }: Props) {
+  const { onSend } = useCopilotChatActions();
+
+  const [inputCredentials, setInputCredentials] = useState<
+    Record<string, CredentialsMetaInput | undefined>
+  >({});
+  const [hasSent, setHasSent] = useState(false);
+
+  const { credentialFields, requiredCredentials } = coerceCredentialFields(
+    output.setup_info.user_readiness?.missing_credentials,
+  );
+
+  const expectedInputs = coerceExpectedInputs(
+    (output.setup_info.requirements as Record<string, unknown>)?.inputs,
+  );
+
+  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
+    setInputCredentials((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const isAllComplete =
+    credentialFields.length > 0 &&
+    [...requiredCredentials].every((key) => !!inputCredentials[key]);
+
+  function handleProceed() {
+    setHasSent(true);
+    onSend(
+      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
+    );
+  }
+
+  return (
+    <div className="grid gap-2">
+      <p className="text-sm text-foreground">{output.message}</p>
+
+      {credentialFields.length > 0 && (
+        <div className="rounded-2xl border bg-background p-3">
+          <CredentialsGroupedView
+            credentialFields={credentialFields}
+            requiredCredentials={requiredCredentials}
+            inputCredentials={inputCredentials}
+            inputValues={{}}
+            onCredentialChange={handleCredentialChange}
+          />
+          {isAllComplete && !hasSent && (
+            <Button
+              variant="primary"
+              size="small"
+              className="mt-3 w-full"
+              onClick={handleProceed}
+            >
+              Proceed
+            </Button>
+          )}
+        </div>
+      )}
+
+      {expectedInputs.length > 0 && (
+        <div className="rounded-2xl border bg-background p-3">
+          <p className="text-xs font-medium text-foreground">Expected inputs</p>
+          <div className="mt-2 grid gap-2">
+            {expectedInputs.map((input) => (
+              <div key={input.name} className="rounded-xl border p-2">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-xs font-medium text-foreground">
+                    {input.title}
+                  </p>
+                  <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+                    {input.required ? "Required" : "Optional"}
+                  </span>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {input.name} &bull; {input.type}
+                  {input.description ? ` \u2022 ${input.description}` : ""}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/components/SetupRequirementsCard/helpers.ts

@@ -0,0 +1,116 @@
+import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
+
+const VALID_CREDENTIAL_TYPES = new Set([
+  "api_key",
+  "oauth2",
+  "user_password",
+  "host_scoped",
+]);
+
+/**
+ * Transforms raw missing_credentials from SetupRequirementsResponse
+ * into CredentialField[] tuples compatible with CredentialsGroupedView.
+ *
+ * Each CredentialField is [key, schema] where schema matches
+ * BlockIOCredentialsSubSchema shape.
+ */
+export function coerceCredentialFields(rawMissingCredentials: unknown): {
+  credentialFields: CredentialField[];
+  requiredCredentials: Set<string>;
+} {
+  const missing =
+    rawMissingCredentials && typeof rawMissingCredentials === "object"
+      ? (rawMissingCredentials as Record<string, unknown>)
+      : {};
+
+  const credentialFields: CredentialField[] = [];
+  const requiredCredentials = new Set<string>();
+
+  Object.entries(missing).forEach(([key, value]) => {
+    if (!value || typeof value !== "object") return;
+    const cred = value as Record<string, unknown>;
+
+    const provider =
+      typeof cred.provider === "string" ? cred.provider.trim() : "";
+    if (!provider) return;
+
+    const types =
+      Array.isArray(cred.types) && cred.types.length > 0
+        ? cred.types
+        : typeof cred.type === "string"
+          ? [cred.type]
+          : [];
+
+    const credentialTypes = types
+      .map((t) => (typeof t === "string" ? t.trim() : ""))
+      .filter((t) => VALID_CREDENTIAL_TYPES.has(t));
+
+    if (credentialTypes.length === 0) return;
+
+    const scopes = Array.isArray(cred.scopes)
+      ? cred.scopes.filter((s): s is string => typeof s === "string")
+      : undefined;
+
+    const schema = {
+      type: "object" as const,
+      properties: {},
+      credentials_provider: [provider],
+      credentials_types: credentialTypes,
+      credentials_scopes: scopes,
+    };
+
+    credentialFields.push([key, schema]);
+    requiredCredentials.add(key);
+  });
+
+  return { credentialFields, requiredCredentials };
+}
+
+export function coerceExpectedInputs(rawInputs: unknown): Array<{
+  name: string;
+  title: string;
+  type: string;
+  description?: string;
+  required: boolean;
+}> {
+  if (!Array.isArray(rawInputs)) return [];
+  const results: Array<{
+    name: string;
+    title: string;
+    type: string;
+    description?: string;
+    required: boolean;
+  }> = [];
+
+  rawInputs.forEach((value, index) => {
+    if (!value || typeof value !== "object") return;
+    const input = value as Record<string, unknown>;
+
+    const name =
+      typeof input.name === "string" && input.name.trim()
+        ? input.name.trim()
+        : `input-${index}`;
+    const title =
+      typeof input.title === "string" && input.title.trim()
+        ? input.title.trim()
+        : name;
+    const type = typeof input.type === "string" ? input.type : "unknown";
+    const description =
+      typeof input.description === "string" && input.description.trim()
+        ? input.description.trim()
+        : undefined;
+    const required = Boolean(input.required);
+
+    const item: {
+      name: string;
+      title: string;
+      type: string;
+      description?: string;
+      required: boolean;
+    } = { name, title, type, required };
+    if (description) item.description = description;
+    results.push(item);
+  });
+
+  return results;
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/helpers.tsx

@@ -189,3 +189,53 @@ export function formatMaybeJson(value: unknown): string {
     return String(value);
   }
 }
+
+
+export function getAccordionMeta(output: RunAgentToolOutput): {
+  badgeText: string;
+  title: string;
+  description?: string;
+} {
+  if (isRunAgentExecutionStartedOutput(output)) {
+    const statusText =
+      typeof output.status === "string" && output.status.trim()
+        ? output.status.trim()
+        : "started";
+    return {
+      badgeText: "Run agent",
+      title: output.graph_name,
+      description: `Status: ${statusText}`,
+    };
+  }
+
+  if (isRunAgentAgentDetailsOutput(output)) {
+    return {
+      badgeText: "Run agent",
+      title: output.agent.name,
+      description: "Inputs required",
+    };
+  }
+
+  if (isRunAgentSetupRequirementsOutput(output)) {
+    const missingCredsCount = Object.keys(
+      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
+        string,
+        unknown
+      >,
+    ).length;
+    return {
+      badgeText: "Run agent",
+      title: output.setup_info.agent_name,
+      description:
+        missingCredsCount > 0
+          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
+          : output.message,
+    };
+  }
+
+  if (isRunAgentNeedLoginOutput(output)) {
+    return { badgeText: "Run agent", title: "Sign in required" };
+  }
+
+  return { badgeText: "Run agent", title: "Error" };
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/ViewAgentOutput/ViewAgentOutput.tsx

@@ -2,6 +2,8 @@
 
 import type { ToolUIPart } from "ai";
 import Link from "next/link";
+import React, { useState } from "react";
+import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
 import {
@@ -46,6 +48,87 @@ function getAccordionMeta(output: ViewAgentOutputToolOutput): {
   return { badgeText: "Agent output", title: "Error" };
 }
 
+function resolveWorkspaceUrl(src: string): string {
+  if (src.startsWith("workspace://")) {
+    const withoutPrefix = src.replace("workspace://", "");
+    const fileId = withoutPrefix.split("#")[0];
+    const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
+    return `/api/proxy${apiPath}`;
+  }
+  return src;
+}
+
+function getWorkspaceMimeHint(src: string): string | undefined {
+  const hashIndex = src.indexOf("#");
+  if (hashIndex === -1) return undefined;
+  return src.slice(hashIndex + 1) || undefined;
+}
+
+function WorkspaceMedia({ value }: { value: string }) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const resolvedUrl = resolveWorkspaceUrl(value);
+  const mime = getWorkspaceMimeHint(value);
+
+  if (mime?.startsWith("video/") || imgFailed) {
+    return (
+      <video
+        controls
+        className="mt-2 h-auto max-w-full rounded-md border border-zinc-200"
+        preload="metadata"
+      >
+        <source src={resolvedUrl} />
+      </video>
+    );
+  }
+
+  if (mime?.startsWith("audio/")) {
+    return <audio controls src={resolvedUrl} className="mt-2 w-full" />;
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={resolvedUrl}
+      alt="Output media"
+      className="mt-2 h-auto max-w-full rounded-md border border-zinc-200"
+      loading="lazy"
+      onError={() => setImgFailed(true)}
+    />
+  );
+}
+
+function isWorkspaceRef(value: unknown): value is string {
+  return typeof value === "string" && value.startsWith("workspace://");
+}
+
+function renderOutputValue(value: unknown): React.ReactNode {
+  if (isWorkspaceRef(value)) {
+    return <WorkspaceMedia value={value} />;
+  }
+  if (Array.isArray(value)) {
+    const workspaceItems = value.filter(isWorkspaceRef);
+    if (workspaceItems.length > 0) {
+      return (
+        <>
+          {value.map((item, i) =>
+            isWorkspaceRef(item) ? (
+              <WorkspaceMedia key={i} value={item} />
+            ) : (
+              <pre
+                key={i}
+                className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground"
+              >
+                {formatMaybeJson(item)}
+              </pre>
+            ),
+          )}
+        </>
+      );
+    }
+  }
+  return null;
+}
+
 export function ViewAgentOutputTool({ part }: Props) {
   const text = getAnimationText(part);
   const isStreaming =
@@ -113,24 +196,30 @@ export function ViewAgentOutputTool({ part }: Props) {
                   )}
 
                   {Object.entries(output.execution.outputs ?? {}).map(
-                    ([key, items]) => (
-                      <div
-                        key={key}
-                        className="rounded-2xl border bg-background p-3"
-                      >
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="truncate text-xs font-medium text-foreground">
-                            {key}
-                          </p>
-                          <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                            {items.length} item{items.length === 1 ? "" : "s"}
-                          </span>
+                    ([key, items]) => {
+                      const mediaContent = renderOutputValue(items);
+                      return (
+                        <div
+                          key={key}
+                          className="rounded-2xl border bg-background p-3"
+                        >
+                          <div className="flex items-center justify-between gap-2">
+                            <p className="truncate text-xs font-medium text-foreground">
+                              {key}
+                            </p>
+                            <span className="shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+                              {items.length} item
+                              {items.length === 1 ? "" : "s"}
+                            </span>
+                          </div>
+                          {mediaContent || (
+                            <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
+                              {formatMaybeJson(items.slice(0, 3))}
+                            </pre>
+                          )}
                         </div>
-                        <pre className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground">
-                          {formatMaybeJson(items.slice(0, 3))}
-                        </pre>
-                      </div>
-                    ),
+                      );
+                    },
                   )}
                 </div>
               ) : (

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

@@ -30,8 +30,6 @@ export const FormRenderer = ({
     return generateUiSchemaForCustomFields(preprocessedSchema, uiSchema);
   }, [preprocessedSchema, uiSchema]);
 
-  console.log("preprocessedSchema", preprocessedSchema);
-
   return (
     <div className={"mb-6 mt-4"} data-tutorial-id="input-handles">
       <Form