fix(frontend/library): Improve agent I/O rendering (#9656)

- Related to #8784

### Changes 🏗️

- feat(frontend/library): Improve agent output styling & fix content
overflow issue
- fix(frontend/library): Fix overlap between content and inset button of
expandable input fields (#9650)
- fix(backend): Unbreak loading graph executions with missing inputs

![screenshot of restyled Output
section](https://github.com/user-attachments/assets/97836158-5735-4d01-94dd-16e3fb6999c6)

### 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:
- Run an agent with at least one input *not* filled out; view this run
in the Library
    - [x] -> page should load normally
    - [x] -> agent inputs should load and show normally
- Run an agent that generates long output; view this run in the Library
- [x] -> output should not overflow its container or stretch the page
layout
    - [x] -> visually check that the output section looks slick

autogpt_platform/backend/backend/data/graph.py

@@ -223,7 +223,7 @@ class GraphExecution(GraphExecutionMeta):
         inputs = {
             **{
                 # inputs from Agent Input Blocks
-                exec.input_data["name"]: exec.input_data["value"]
+                exec.input_data["name"]: exec.input_data.get("value")
                 for exec in node_executions
                 if exec.block_id == _INPUT_BLOCK_ID
             },
@@ -364,7 +364,6 @@ class GraphModel(Graph):
         user_id: str,
         graph_id_map: dict[str, str],
     ):
-
         # Reassign Graph ID
         if graph.id in graph_id_map:
             graph.id = graph_id_map[graph.id]

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

@@ -185,7 +185,9 @@ export default function AgentRunDetailsView({
                         {title || key}
                       </label>
                       {values.map((value, i) => (
-                        <pre key={i}>{value}</pre>
+                        <p className="text-sm text-neutral-700" key={i}>
+                          {value}
+                        </p>
                       ))}
                       {/* TODO: pretty type-dependent rendering */}
                     </div>

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

@@ -98,7 +98,7 @@ export default function AgentRunDraftView({
                       "default" in inputSubSchema ? inputSubSchema.default : ""
                     }
                     value={inputValues[key] ?? undefined}
-                    className="rounded-full"
+                    className="rounded-full pr-8"
                     onChange={(e) =>
                       setInputValues((obj) => ({
                         ...obj,