chore: improvements

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx

@@ -4,7 +4,6 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import {
   BookOpenIcon,
-  CheckFatIcon,
   PencilSimpleIcon,
   WarningDiamondIcon,
 } from "@phosphor-icons/react";
@@ -24,6 +23,7 @@ import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
 } from "./components/ClarificationQuestionsCard";
+import sparklesImg from "./components/MiniGame/assets/sparkles.png";
 import { MiniGame } from "./components/MiniGame/MiniGame";
 import {
   AccordionIcon,
@@ -83,7 +83,8 @@ function getAccordionMeta(output: CreateAgentToolOutput) {
   ) {
     return {
       icon,
-      title: "Creating agent, this may take a few minutes. Sit back and relax.",
+      title:
+        "Creating agent, this may take a few minutes. Play while you wait.",
       expanded: true,
     };
   }
@@ -167,16 +168,22 @@ export function CreateAgentTool({ part }: Props) {
           {isAgentSavedOutput(output) && (
             <div className="rounded-xl border border-border/60 bg-card p-4 shadow-sm">
               <div className="flex items-baseline gap-2">
-                <CheckFatIcon
-                  size={18}
-                  weight="regular"
-                  className="relative top-1 text-green-500"
+                <img
+                  src={sparklesImg.src}
+                  alt="sparkles"
+                  width={24}
+                  height={24}
+                  className="relative top-1"
                 />
                 <Text
                   variant="body-medium"
                   className="text-blacks mb-2 text-[16px]"
                 >
-                  {output.message}
+                  Agent{" "}
+                  <span className="text-[rgb(124,58,237)]">
+                    {output.agent_name}
+                  </span>{" "}
+                  has been saved to your library!
                 </Text>
               </div>
               <div className="mt-3 flex flex-wrap gap-4">

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/MiniGame/MiniGame.tsx

@@ -2,20 +2,78 @@
 
 import { useMiniGame } from "./useMiniGame";
 
+function Key({ children }: { children: React.ReactNode }) {
+  return <strong>[{children}]</strong>;
+}
+
 export function MiniGame() {
-  const { canvasRef } = useMiniGame();
+  const {
+    canvasRef,
+    activeMode,
+    showOverlay,
+    score,
+    highScore,
+    onContinue,
+  } = useMiniGame();
+
+  const isRunActive =
+    activeMode === "run" || activeMode === "idle" || activeMode === "over";
+  const isBossActive =
+    activeMode === "boss" ||
+    activeMode === "boss-intro" ||
+    activeMode === "boss-defeated";
+
+  let overlayText: string | undefined;
+  let buttonLabel = "Continue";
+  if (activeMode === "idle") {
+    buttonLabel = "Start";
+  } else if (activeMode === "boss-intro") {
+    overlayText = "Face the bandit!";
+  } else if (activeMode === "boss-defeated") {
+    overlayText = "Great job, keep on going";
+  } else if (activeMode === "over") {
+    overlayText = `Score: ${score} / Record: ${highScore}`;
+    buttonLabel = "Retry";
+  }
 
   return (
-    <div
-      className="w-full overflow-hidden rounded-md bg-background text-foreground"
-      style={{ border: "1px solid #d17fff" }}
-    >
-      <canvas
-        ref={canvasRef}
-        tabIndex={0}
-        className="block w-full outline-none"
-        style={{ imageRendering: "pixelated" }}
-      />
+    <div className="flex flex-col gap-2">
+      <p className="text-sm font-medium text-purple-500">
+        {isBossActive ? (
+          <>
+            Duel mode: <Key>←→</Key> to move · <Key>Z</Key> to attack ·{" "}
+            <Key>X</Key> to block · <Key>Space</Key> to jump
+          </>
+        ) : (
+          <>
+            Run mode: <Key>Space</Key> to jump
+          </>
+        )}
+      </p>
+      <div
+        className="relative w-full overflow-hidden rounded-md bg-background text-foreground"
+        style={{ border: "1px solid #d17fff" }}
+      >
+        <canvas
+          ref={canvasRef}
+          tabIndex={0}
+          className="block w-full outline-none"
+        />
+        {showOverlay && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/40">
+            {overlayText && (
+              <p className="text-lg font-bold text-white">{overlayText}</p>
+            )}
+            <button
+              type="button"
+              onClick={onContinue}
+              className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-zinc-800 shadow-md transition-colors hover:bg-zinc-100"
+            >
+              {buttonLabel}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx

@@ -136,7 +136,7 @@ export function getAnimationText(part: {
       if (isOperationPendingOutput(output)) return "Agent creation in progress";
       if (isOperationInProgressOutput(output))
         return "Agent creation already in progress";
-      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
+      if (isAgentSavedOutput(output)) return `Saved ${output.agent_name}`;
       if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
       if (isClarificationNeededOutput(output)) return "Needs clarification";
       return "Error creating agent";

autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx

@@ -5,7 +5,6 @@ import type { ToolUIPart } from "ai";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
 import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
 import {
   ContentCardDescription,
   ContentCodeBlock,
@@ -15,7 +14,7 @@ import {
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
@@ -80,7 +79,12 @@ function getAccordionMeta(output: EditAgentToolOutput): {
     isOperationPendingOutput(output) ||
     isOperationInProgressOutput(output)
   ) {
-    return { icon: <OrbitLoader size={32} />, title: "Editing agent" };
+    return {
+      icon: <OrbitLoader size={32} />,
+      title:
+        "Editing agent, this may take a few minutes. Play while you wait.",
+      expanded: true,
+    };
   }
   return {
     icon: (
@@ -105,7 +109,6 @@ export function EditAgentTool({ part }: Props) {
     (isOperationStartedOutput(output) ||
       isOperationPendingOutput(output) ||
       isOperationInProgressOutput(output));
-  const progress = useAsymptoticProgress(isOperating);
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
@@ -149,9 +152,9 @@ export function EditAgentTool({ part }: Props) {
         <ToolAccordion {...getAccordionMeta(output)}>
           {isOperating && (
             <ContentGrid>
-              <ProgressBar value={progress} className="max-w-[280px]" />
+              <MiniGame />
               <ContentHint>
-                This could take a few minutes, grab a coffee ☕
+                This could take a few minutes — play while you wait!
               </ContentHint>
             </ContentGrid>
           )}

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

@@ -2,8 +2,14 @@
 
 import type { ToolUIPart } from "ai";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { ContentMessage } from "../../components/ToolAccordion/AccordionContent";
+import {
+  ContentGrid,
+  ContentHint,
+  ContentMessage,
+} from "../../components/ToolAccordion/AccordionContent";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   getAccordionMeta,
   getAnimationText,
@@ -60,6 +66,21 @@ export function RunAgentTool({ part }: Props) {
         />
       </div>
 
+      {isStreaming && !output && (
+        <ToolAccordion
+          icon={<OrbitLoader size={32} />}
+          title="Running agent, this may take a few minutes. Play while you wait."
+          expanded={true}
+        >
+          <ContentGrid>
+            <MiniGame />
+            <ContentHint>
+              This could take a few minutes — play while you wait!
+            </ContentHint>
+          </ContentGrid>
+        </ToolAccordion>
+      )}
+
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
           {isRunAgentExecutionStartedOutput(output) && (