fix(frontend): summary card layout (#11556)

## Changes 🏗️

- Make it less verbose and adapt the summary card to the new design

## 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] Run locally and see summary displaying well

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 type Props = {
   children: React.ReactNode;
   className?: string;
-  title?: string;
+  title?: React.ReactNode;
 };
 
 export function RunDetailCard({ children, className, title }: Props) {

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx

@@ -60,14 +60,6 @@ export function RunDetailHeader({ agent, run, scheduleRecurrence }: Props) {
                   </Text>
                 </>
               )}
-              {run.stats?.activity_status && (
-                <>
-                  <span className="mx-1 inline-block text-zinc-200">|</span>
-                  <Text variant="small" className="text-zinc-500">
-                    {String(run.stats.activity_status)}
-                  </Text>
-                </>
-              )}
             </div>
           ) : scheduleRecurrence ? (
             <Text variant="small" className="mt-1 !text-zinc-600">

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx

@@ -4,9 +4,16 @@ import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecut
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import { PendingReviewsList } from "@/components/organisms/PendingReviewsList/PendingReviewsList";
 import { usePendingReviewsForExecution } from "@/hooks/usePendingReviews";
+import { InfoIcon } from "@phosphor-icons/react";
 import { useEffect } from "react";
 import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers";
 import { AgentInputsReadOnly } from "../../modals/AgentInputsReadOnly/AgentInputsReadOnly";
@@ -120,7 +127,29 @@ export function SelectedRunView({
             {/* Summary Section */}
             {withSummary && (
               <div id="summary" className="scroll-mt-4">
-                <RunDetailCard title="Summary">
+                <RunDetailCard
+                  title={
+                    <div>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <InfoIcon
+                              size={8}
+                              className="cursor-help text-neutral-500 hover:text-neutral-700"
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p className="max-w-xs">
+                              This AI-generated summary describes how the agent
+                              handled your task. It&apos;s an experimental
+                              feature and may occasionally be inaccurate.
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  }
+                >
                   <RunSummary run={run} />
                 </RunDetailCard>
               </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunSummary.tsx

@@ -8,7 +8,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
-import { RunDetailCard } from "../../RunDetailCard/RunDetailCard";
 
 interface Props {
   run: GetV1GetExecutionDetails200;
@@ -20,81 +19,61 @@ export function RunSummary({ run }: Props) {
   const correctnessScore = run.stats.correctness_score;
 
   return (
-    <RunDetailCard>
+    <div className="space-y-4">
-      <div className="space-y-4">
+      <p className="text-sm leading-relaxed text-neutral-700">
-        <div className="flex items-center gap-2">
+        {run.stats.activity_status}
-          <h2 className="text-lg font-semibold">Task Summary</h2>
+      </p>
+
+      {typeof correctnessScore === "number" && (
+        <div className="flex items-center gap-3 rounded-lg bg-neutral-50 p-3">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-neutral-600">
+              Success Estimate:
+            </span>
+            <div className="flex items-center gap-2">
+              <div className="relative h-2 w-16 overflow-hidden rounded-full bg-neutral-200">
+                <div
+                  className={`h-full transition-all ${
+                    correctnessScore >= 0.8
+                      ? "bg-green-500"
+                      : correctnessScore >= 0.6
+                        ? "bg-yellow-500"
+                        : correctnessScore >= 0.4
+                          ? "bg-orange-500"
+                          : "bg-red-500"
+                  }`}
+                  style={{
+                    width: `${Math.round(correctnessScore * 100)}%`,
+                  }}
+                />
+              </div>
+              <span className="text-sm font-medium">
+                {Math.round(correctnessScore * 100)}%
+              </span>
+            </div>
+          </div>
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <IconCircleAlert className="size-4 cursor-help text-neutral-500 hover:text-neutral-700" />
+                <IconCircleAlert className="size-4 cursor-help text-neutral-400 hover:text-neutral-600" />
               </TooltipTrigger>
               <TooltipContent>
                 <p className="max-w-xs">
-                  This AI-generated summary describes how the agent handled your
+                  AI-generated estimate of how well this execution achieved its
-                  task. It&apos;s an experimental feature and may occasionally
+                  intended purpose. This score indicates
-                  be inaccurate.
+                  {correctnessScore >= 0.8
+                    ? " the agent was highly successful."
+                    : correctnessScore >= 0.6
+                      ? " the agent was mostly successful with minor issues."
+                      : correctnessScore >= 0.4
+                        ? " the agent was partially successful with some gaps."
+                        : " the agent had limited success with significant issues."}
                 </p>
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
         </div>
-
+      )}
-        <p className="text-sm leading-relaxed text-neutral-700">
+    </div>
-          {run.stats.activity_status}
-        </p>
-
-        {typeof correctnessScore === "number" && (
-          <div className="flex items-center gap-3 rounded-lg bg-neutral-50 p-3">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-neutral-600">
-                Success Estimate:
-              </span>
-              <div className="flex items-center gap-2">
-                <div className="relative h-2 w-16 overflow-hidden rounded-full bg-neutral-200">
-                  <div
-                    className={`h-full transition-all ${
-                      correctnessScore >= 0.8
-                        ? "bg-green-500"
-                        : correctnessScore >= 0.6
-                          ? "bg-yellow-500"
-                          : correctnessScore >= 0.4
-                            ? "bg-orange-500"
-                            : "bg-red-500"
-                    }`}
-                    style={{
-                      width: `${Math.round(correctnessScore * 100)}%`,
-                    }}
-                  />
-                </div>
-                <span className="text-sm font-medium">
-                  {Math.round(correctnessScore * 100)}%
-                </span>
-              </div>
-            </div>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <IconCircleAlert className="size-4 cursor-help text-neutral-400 hover:text-neutral-600" />
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p className="max-w-xs">
-                    AI-generated estimate of how well this execution achieved
-                    its intended purpose. This score indicates
-                    {correctnessScore >= 0.8
-                      ? " the agent was highly successful."
-                      : correctnessScore >= 0.6
-                        ? " the agent was mostly successful with minor issues."
-                        : correctnessScore >= 0.4
-                          ? " the agent was partially successful with some gaps."
-                          : " the agent had limited success with significant issues."}
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        )}
-      </div>
-    </RunDetailCard>
   );
 }