style: add language tag to fenced code block

Podman and podman-compose are not supported as they handle relative
paths differently than Docker, causing 'Dockerfile does not exist'
errors on Windows.

Closes #11358

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/types/images.d.ts

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

docs/platform/getting-started.md

@@ -218,6 +218,17 @@ If you initially installed Docker with Hyper-V, you **don’t need to reinstall*
 
 For more details, refer to [Docker's official documentation](https://docs.docker.com/desktop/windows/wsl/).
 
+### ⚠️ Podman Not Supported
+
+AutoGPT requires **Docker** (Docker Desktop or Docker Engine). **Podman and podman-compose are not supported** and may cause path resolution issues, particularly on Windows.
+
+If you see errors like:
+```text
+Error: the specified Containerfile or Dockerfile does not exist, ..\..\autogpt_platform\backend\Dockerfile
+```
+
+This indicates you're using Podman instead of Docker. Please install [Docker Desktop](https://docs.docker.com/desktop/) and use `docker compose` instead of `podman-compose`.
+
 
 ## Development