From 6d8906ced7722f9bfe461d239e9a9f64e80cd64d Mon Sep 17 00:00:00 2001 From: Ubbe Date: Thu, 4 Dec 2025 23:33:57 +0700 Subject: [PATCH] fix(frontend): summary card layout (#11556) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 --- .../RunDetailCard/RunDetailCard.tsx | 2 +- .../RunDetailHeader/RunDetailHeader.tsx | 8 -- .../SelectedRunView/SelectedRunView.tsx | 31 ++++- .../SelectedRunView/components/RunSummary.tsx | 111 +++++++----------- 4 files changed, 76 insertions(+), 76 deletions(-) diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx index 88f4f17756..d559faa654 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx +++ b/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) { diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx index ce6814094b..7c70b5e6aa 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx +++ b/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) { )} - {run.stats?.activity_status && ( - <> - | - - {String(run.stats.activity_status)} - - - )} ) : scheduleRecurrence ? ( diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx index 83e2a031d9..72144bc5bd 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx +++ b/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 && (
- + + + + + + + +

+ This AI-generated summary describes how the agent + handled your task. It's an experimental + feature and may occasionally be inaccurate. +

+ + + +
+ } + > diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunSummary.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunSummary.tsx index 7d8d28774b..aea9bae7f9 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunSummary.tsx +++ b/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 ( - -
-
-

Task Summary

+
+

+ {run.stats.activity_status} +

+ + {typeof correctnessScore === "number" && ( +
+
+ + Success Estimate: + +
+
+
= 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)}%`, + }} + /> +
+ + {Math.round(correctnessScore * 100)}% + +
+
- +

- This AI-generated summary describes how the agent handled your - task. It's an experimental feature and may occasionally - be inaccurate. + 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."}

- -

- {run.stats.activity_status} -

- - {typeof correctnessScore === "number" && ( -
-
- - Success Estimate: - -
-
-
= 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)}%`, - }} - /> -
- - {Math.round(correctnessScore * 100)}% - -
-
- - - - - - -

- 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."} -

- - - -
- )} -
- + )} +
); }