fix: use valid Text variant 'small' instead of 'body-small'

- Fix copy: 'Click below' instead of 'Enter your email below' (email field not visible yet)
- Encode 'Missing verification code' error param for consistency

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

@@ -4,11 +4,11 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import {
   BookOpenIcon,
-  CheckFatIcon,
   PencilSimpleIcon,
   WarningDiamondIcon,
 } from "@phosphor-icons/react";
 import type { ToolUIPart } from "ai";
+import Image from "next/image";
 import NextLink from "next/link";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
@@ -24,6 +24,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 +84,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 +169,20 @@ 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"
+                <Image
+                  src={sparklesImg}
+                  alt="sparkles"
+                  width={24}
+                  height={24}
+                  className="relative top-1"
                 />
                 <Text
                   variant="body-medium"
-                  className="text-blacks mb-2 text-[16px]"
+                  className="mb-2 text-[16px] text-black"
                 >
-                  {output.message}
+                  Agent{" "}
+                  <span className="text-violet-600">{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,65 @@
 
 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";
+
+  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">
+        {isRunActive ? (
+          <>
+            Run mode: <Key>Space</Key> to jump
+          </>
+        ) : (
+          <>
+            Duel mode: <Key>←→</Key> to move · <Key>Z</Key> to attack ·{" "}
+            <Key>X</Key> to block · <Key>Space</Key> to jump
+          </>
+        )}
+      </p>
+      <div className="relative w-full overflow-hidden rounded-md border border-accent bg-background text-foreground">
+        <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,
@@ -54,6 +53,7 @@ function getAccordionMeta(output: EditAgentToolOutput): {
   title: string;
   titleClassName?: string;
   description?: string;
+  expanded?: boolean;
 } {
   const icon = <AccordionIcon />;
 
@@ -80,7 +80,11 @@ 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) && (

autogpt_platform/frontend/src/app/(platform)/reset-password/page.tsx

@@ -2,6 +2,7 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/atoms/Input/Input";
 import { AuthCard } from "@/components/auth/AuthCard";
+import { ExpiredLinkMessage } from "@/components/auth/ExpiredLinkMessage";
 import { Form, FormField } from "@/components/__legacy__/ui/form";
 import LoadingBox from "@/components/__legacy__/ui/loading";
 import { useToast } from "@/components/molecules/Toast/use-toast";
@@ -21,18 +22,42 @@ function ResetPasswordContent() {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
+  const [showExpiredMessage, setShowExpiredMessage] = useState(false);
 
   useEffect(() => {
     const error = searchParams.get("error");
-    if (error) {
-      toast({
-        title: "Password Reset Failed",
-        description: error,
-        variant: "destructive",
-      });
+    const errorCode = searchParams.get("error_code");
+    const errorDescription = searchParams.get("error_description");
 
+    if (error || errorCode) {
+      // Check if this is an expired/used link error
+      // Avoid broad checks like "invalid" which can match unrelated errors (e.g., PKCE errors)
+      const descLower = errorDescription?.toLowerCase() || "";
+      const isExpiredOrUsed =
+        error === "link_expired" ||
+        errorCode === "otp_expired" ||
+        descLower.includes("expired") ||
+        descLower.includes("already") ||
+        descLower.includes("used");
+
+      if (isExpiredOrUsed) {
+        setShowExpiredMessage(true);
+      } else {
+        // Show toast for other errors
+        const errorMessage =
+          errorDescription || error || "Password reset failed";
+        toast({
+          title: "Password Reset Failed",
+          description: errorMessage,
+          variant: "destructive",
+        });
+      }
+
+      // Clear all error params from URL
       const newUrl = new URL(window.location.href);
       newUrl.searchParams.delete("error");
+      newUrl.searchParams.delete("error_code");
+      newUrl.searchParams.delete("error_description");
       router.replace(newUrl.pathname + newUrl.search);
     }
   }, [searchParams, toast, router]);
@@ -82,6 +107,10 @@ function ResetPasswordContent() {
     [sendEmailForm, toast],
   );
 
+  function handleShowEmailForm() {
+    setShowExpiredMessage(false);
+  }
+
   const onChangePassword = useCallback(
     async (data: z.infer<typeof changePasswordFormSchema>) => {
       setIsLoading(true);
@@ -122,6 +151,17 @@ function ResetPasswordContent() {
     );
   }
 
+  // Show expired link message if detected
+  if (showExpiredMessage && !user) {
+    return (
+      <div className="flex h-full min-h-[85vh] w-full flex-col items-center justify-center">
+        <AuthCard title="Reset Password">
+          <ExpiredLinkMessage onRequestNewLink={handleShowEmailForm} />
+        </AuthCard>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full min-h-[85vh] w-full flex-col items-center justify-center">
       <AuthCard title="Reset Password">

autogpt_platform/frontend/src/app/api/auth/callback/reset-password/route.ts

@@ -10,7 +10,7 @@ export async function GET(request: NextRequest) {
 
   if (!code) {
     return NextResponse.redirect(
-      `${origin}/reset-password?error=Missing verification code`,
+      `${origin}/reset-password?error=${encodeURIComponent("Missing verification code")}`,
     );
   }
 
@@ -26,8 +26,21 @@ export async function GET(request: NextRequest) {
     const result = await exchangePasswordResetCode(supabase, code);
 
     if (!result.success) {
+      // Check for expired or used link errors
+      // Avoid broad checks like "invalid" which can match unrelated errors (e.g., PKCE errors)
+      const errorMessage = result.error?.toLowerCase() || "";
+      const isExpiredOrUsed =
+        errorMessage.includes("expired") ||
+        errorMessage.includes("otp_expired") ||
+        errorMessage.includes("already") ||
+        errorMessage.includes("used");
+
+      const errorParam = isExpiredOrUsed
+        ? "link_expired"
+        : encodeURIComponent(result.error || "Password reset failed");
+
       return NextResponse.redirect(
-        `${origin}/reset-password?error=${encodeURIComponent(result.error || "Password reset failed")}`,
+        `${origin}/reset-password?error=${errorParam}`,
       );
     }
 
@@ -35,7 +48,7 @@ export async function GET(request: NextRequest) {
   } catch (error) {
     console.error("Password reset callback error:", error);
     return NextResponse.redirect(
-      `${origin}/reset-password?error=Password reset failed`,
+      `${origin}/reset-password?error=${encodeURIComponent("Password reset failed")}`,
     );
   }
 }

autogpt_platform/frontend/src/components/auth/ExpiredLinkMessage.tsx

@@ -0,0 +1,31 @@
+import { Button } from "../atoms/Button/Button";
+import { Link } from "../atoms/Link/Link";
+import { Text } from "../atoms/Text/Text";
+
+interface Props {
+  onRequestNewLink: () => void;
+}
+
+export function ExpiredLinkMessage({ onRequestNewLink }: Props) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <Text variant="h3" className="text-center">
+        Your reset password link has expired or has already been used
+      </Text>
+      <Text variant="body-medium" className="text-center text-muted-foreground">
+        Click below to request a new password reset link.
+      </Text>
+      <Button variant="primary" onClick={onRequestNewLink} className="w-full">
+        Request a New Link
+      </Button>
+      <div className="flex items-center gap-1">
+        <Text variant="small" className="text-muted-foreground">
+          Already have access?
+        </Text>
+        <Link href="/login" variant="secondary">
+          Log in here
+        </Link>
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const content: import("next/image").StaticImageData;
+  export default content;
+}