fix(frontend): fix agent run details view (#10311)

## Changes 🏗️

Fixes the layout getting very wide if the output of an agent is very
long:


https://github.com/user-attachments/assets/e032f425-ed9a-4a13-925f-1bb444f84ef1

It also makes the library agent code a bit more defensive, I get full
page errors on certain agents in the library:

<img width="800" alt="Screenshot 2025-07-04 at 17 35 46"
src="https://github.com/user-attachments/assets/ff8ae461-3792-4e94-941e-9fdd2ead1c87"
/>



## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Login and go to agent in library
  - [x] It loads without errors
- [x] When the execution output is long, it doesn't make the page wider

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useParams, useRouter } from "next/navigation";
 import React, {
   useCallback,
   useEffect,
@@ -6,31 +7,31 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useParams, useRouter } from "next/navigation";
 
-import { exportAsJSONFile } from "@/lib/utils";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import {
+  Graph,
   GraphExecution,
   GraphExecutionID,
   GraphExecutionMeta,
-  Graph,
   GraphID,
   LibraryAgent,
   LibraryAgentID,
-  Schedule,
-  ScheduleID,
   LibraryAgentPreset,
   LibraryAgentPresetID,
+  Schedule,
+  ScheduleID,
 } from "@/lib/autogpt-server-api";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { exportAsJSONFile } from "@/lib/utils";
 
-import type { ButtonAction } from "@/components/agptui/types";
-import DeleteConfirmDialog from "@/components/agptui/delete-confirm-dialog";
-import AgentRunDraftView from "@/components/agents/agent-run-draft-view";
 import AgentRunDetailsView from "@/components/agents/agent-run-details-view";
+import AgentRunDraftView from "@/components/agents/agent-run-draft-view";
 import AgentRunsSelectorList from "@/components/agents/agent-runs-selector-list";
 import AgentScheduleDetailsView from "@/components/agents/agent-schedule-details-view";
+import DeleteConfirmDialog from "@/components/agptui/delete-confirm-dialog";
+import type { ButtonAction } from "@/components/agptui/types";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -39,9 +40,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import LoadingBox, { LoadingSpinner } from "@/components/ui/loading";
+import { useToast } from "@/components/ui/use-toast";
 
 export default function AgentRunsPage(): React.ReactElement {
   const { id: agentID }: { id: LibraryAgentID } = useParams();
@@ -434,6 +434,9 @@ export default function AgentRunsPage(): React.ReactElement {
     [agent, downloadGraph],
   );
 
+  const runGraph =
+    graphVersions.current[selectedRun?.graph_version ?? 0] ?? graph;
+
   const onCreateSchedule = useCallback(
     (schedule: Schedule) => {
       setSchedules((prev) => [...prev, schedule]);
@@ -496,16 +499,16 @@ export default function AgentRunsPage(): React.ReactElement {
 
         {/* Run / Schedule views */}
         {(selectedView.type == "run" && selectedView.id ? (
-          selectedRun && (
+          selectedRun && runGraph ? (
             <AgentRunDetailsView
               agent={agent}
-              graph={graphVersions.current[selectedRun.graph_version] ?? graph}
+              graph={runGraph}
               run={selectedRun}
               agentActions={agentActions}
               onRun={selectRun}
               deleteRun={() => setConfirmingDeleteAgentRun(selectedRun)}
             />
-          )
+          ) : null
         ) : selectedView.type == "run" ? (
           /* Draft new runs / Create new presets */
           <AgentRunDraftView
@@ -529,7 +532,8 @@ export default function AgentRunsPage(): React.ReactElement {
             agentActions={agentActions}
           />
         ) : selectedView.type == "schedule" ? (
-          selectedSchedule && (
+          selectedSchedule &&
+          graph && (
             <AgentScheduleDetailsView
               graph={graph}
               schedule={selectedSchedule}

autogpt_platform/frontend/src/components/agents/agent-run-details-view.tsx

@@ -242,7 +242,7 @@ export default function AgentRunDetailsView({
                       </label>
                       {values.map((value, i) => (
                         <p
-                          className="resize-none whitespace-pre-wrap break-words border-none text-sm text-neutral-700 disabled:cursor-not-allowed"
+                          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}