Merge branch 'dev' into swiftyos/secrt-2005-pre-populate-copilotunderstanding-from-tally-form-on-signup

autogpt_platform/frontend/package.json

@@ -62,7 +62,6 @@
     "@rjsf/validator-ajv8": "6.1.2",
     "@sentry/nextjs": "10.27.0",
     "@streamdown/cjk": "1.0.1",
-    "@streamdown/code": "1.0.1",
     "@streamdown/math": "1.0.1",
     "@streamdown/mermaid": "1.0.1",
     "@supabase/ssr": "0.7.0",
@@ -116,6 +115,7 @@
     "remark-gfm": "4.0.1",
     "remark-math": "6.0.0",
     "shepherd.js": "14.5.1",
+    "shiki": "^3.21.0",
     "sonner": "2.0.7",
     "streamdown": "2.1.0",
     "tailwind-merge": "2.6.0",

autogpt_platform/frontend/pnpm-lock.yaml

@@ -108,9 +108,6 @@ importers:
       '@streamdown/cjk':
         specifier: 1.0.1
         version: 1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@18.3.1)(unified@11.0.5)
-      '@streamdown/code':
-        specifier: 1.0.1
-        version: 1.0.1(react@18.3.1)
       '@streamdown/math':
         specifier: 1.0.1
         version: 1.0.1(react@18.3.1)
@@ -270,6 +267,9 @@ importers:
       shepherd.js:
         specifier: 14.5.1
         version: 14.5.1
+      shiki:
+        specifier: ^3.21.0
+        version: 3.21.0
       sonner:
         specifier: 2.0.7
         version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3307,11 +3307,6 @@ packages:
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
 
-  '@streamdown/code@1.0.1':
-    resolution: {integrity: sha512-U9LITfQ28tZYAoY922jdtw1ryg4kgRBdURopqK9hph7G2fBUwPeHthjH7SvaV0fvFv7EqjqCzARJuWUljLe9Ag==}
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0
-
   '@streamdown/math@1.0.1':
     resolution: {integrity: sha512-R9WdHbpERiRU7WeO7oT1aIbnLJ/jraDr89F7X9x2OM//Y8G8UMATRnLD/RUwg4VLr8Nu7QSIJ0Pa8lXd2meM4Q==}
     peerDependencies:
@@ -11907,11 +11902,6 @@ snapshots:
       - micromark-util-types
       - unified
 
-  '@streamdown/code@1.0.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-      shiki: 3.21.0
-
   '@streamdown/math@1.0.1(react@18.3.1)':
     dependencies:
       katex: 0.16.28

autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx

@@ -1,10 +1,16 @@
 "use client";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/molecules/DropdownMenu/DropdownMenu";
 import { SidebarProvider } from "@/components/ui/sidebar";
-// TODO: Replace with modern Dialog component when available
-import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
+import { DotsThree } from "@phosphor-icons/react";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
+import { DeleteChatDialog } from "./components/DeleteChatDialog/DeleteChatDialog";
 import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
 import { MobileHeader } from "./components/MobileHeader/MobileHeader";
 import { ScaleLoader } from "./components/ScaleLoader/ScaleLoader";
@@ -56,19 +62,7 @@ export function CopilotPage() {
     >
       {!isMobile && <ChatSidebar />}
       <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
-        {isMobile && (
-          <MobileHeader
-            onOpenDrawer={handleOpenDrawer}
-            showDelete={!!sessionId}
-            isDeleting={isDeleting}
-            onDelete={() => {
-              const session = sessions.find((s) => s.id === sessionId);
-              if (session) {
-                handleDeleteClick(session.id, session.title);
-              }
-            }}
-          />
-        )}
+        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
         <div className="flex-1 overflow-hidden">
           <ChatContainer
             messages={messages}
@@ -80,6 +74,38 @@ export function CopilotPage() {
             onCreateSession={createSession}
             onSend={onSend}
             onStop={stop}
+            headerSlot={
+              isMobile && sessionId ? (
+                <div className="flex justify-end">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className="rounded p-1.5 hover:bg-neutral-100"
+                        aria-label="More actions"
+                      >
+                        <DotsThree className="h-5 w-5 text-neutral-600" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => {
+                          const session = sessions.find(
+                            (s) => s.id === sessionId,
+                          );
+                          if (session) {
+                            handleDeleteClick(session.id, session.title);
+                          }
+                        }}
+                        disabled={isDeleting}
+                        className="text-red-600 focus:bg-red-50 focus:text-red-600"
+                      >
+                        Delete chat
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              ) : undefined
+            }
           />
         </div>
       </div>
@@ -97,12 +123,11 @@ export function CopilotPage() {
       )}
       {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
       {isMobile && (
-        <DeleteConfirmDialog
-          entityType="chat"
-          entityName={sessionToDelete?.title || "Untitled chat"}
-          open={!!sessionToDelete}
-          onOpenChange={(open) => !open && handleCancelDelete()}
-          onDoDelete={handleConfirmDelete}
+        <DeleteChatDialog
+          session={sessionToDelete}
+          isDeleting={isDeleting}
+          onConfirm={handleConfirmDelete}
+          onCancel={handleCancelDelete}
         />
       )}
     </SidebarProvider>

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -2,6 +2,7 @@
 import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
 import { UIDataTypes, UIMessage, UITools } from "ai";
 import { LayoutGroup, motion } from "framer-motion";
+import { ReactNode } from "react";
 import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
 import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
 import { EmptySession } from "../EmptySession/EmptySession";
@@ -16,6 +17,7 @@ export interface ChatContainerProps {
   onCreateSession: () => void | Promise<string>;
   onSend: (message: string) => void | Promise<void>;
   onStop: () => void;
+  headerSlot?: ReactNode;
 }
 export const ChatContainer = ({
   messages,
@@ -27,6 +29,7 @@ export const ChatContainer = ({
   onCreateSession,
   onSend,
   onStop,
+  headerSlot,
 }: ChatContainerProps) => {
   const inputLayoutId = "copilot-2-chat-input";
 
@@ -41,6 +44,7 @@ export const ChatContainer = ({
                 status={status}
                 error={error}
                 isLoading={isLoadingSession}
+                headerSlot={headerSlot}
               />
               <motion.div
                 initial={{ opacity: 0 }}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -118,6 +118,7 @@ interface ChatMessagesContainerProps {
   status: string;
   error: Error | undefined;
   isLoading: boolean;
+  headerSlot?: React.ReactNode;
 }
 
 export const ChatMessagesContainer = ({
@@ -125,6 +126,7 @@ export const ChatMessagesContainer = ({
   status,
   error,
   isLoading,
+  headerSlot,
 }: ChatMessagesContainerProps) => {
   const [thinkingPhrase, setThinkingPhrase] = useState(getRandomPhrase);
   const lastToastTimeRef = useRef(0);
@@ -165,6 +167,7 @@ export const ChatMessagesContainer = ({
   return (
     <Conversation className="min-h-0 flex-1">
       <ConversationContent className="flex flex-1 flex-col gap-6 px-3 py-6">
+        {headerSlot}
         {isLoading && messages.length === 0 && (
           <div className="flex min-h-full flex-1 items-center justify-center">
             <LoadingSpinner className="text-neutral-600" />

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx

@@ -7,9 +7,13 @@ import {
 import { Button } from "@/components/atoms/Button/Button";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/molecules/DropdownMenu/DropdownMenu";
 import { toast } from "@/components/molecules/Toast/use-toast";
-// TODO: Replace with modern Dialog component when available
-import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
 import {
   Sidebar,
   SidebarContent,
@@ -19,11 +23,12 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
-import { PlusCircleIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { DotsThree, PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
-import { useState } from "react";
 import { parseAsString, useQueryState } from "nuqs";
+import { useState } from "react";
+import { DeleteChatDialog } from "../DeleteChatDialog/DeleteChatDialog";
 
 export function ChatSidebar() {
   const { state } = useSidebar();
@@ -92,6 +97,12 @@ export function ChatSidebar() {
     }
   }
 
+  function handleCancelDelete() {
+    if (!isDeleting) {
+      setSessionToDelete(null);
+    }
+  }
+
   function formatDate(dateString: string) {
     const date = new Date(dateString);
     const now = new Date();
@@ -220,16 +231,28 @@ export function ChatSidebar() {
                         </Text>
                       </div>
                     </button>
-                    <button
-                      onClick={(e) =>
-                        handleDeleteClick(e, session.id, session.title)
-                      }
-                      disabled={isDeleting}
-                      className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1.5 text-zinc-400 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 focus-visible:opacity-100 disabled:cursor-not-allowed disabled:opacity-50"
-                      aria-label="Delete chat"
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                    </button>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          onClick={(e) => e.stopPropagation()}
+                          className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1.5 text-zinc-600 transition-all hover:bg-neutral-100"
+                          aria-label="More actions"
+                        >
+                          <DotsThree className="h-4 w-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={(e) =>
+                            handleDeleteClick(e, session.id, session.title)
+                          }
+                          disabled={isDeleting}
+                          className="text-red-600 focus:bg-red-50 focus:text-red-600"
+                        >
+                          Delete chat
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </div>
                 ))
               )}
@@ -257,12 +280,11 @@ export function ChatSidebar() {
         )}
       </Sidebar>
 
-      <DeleteConfirmDialog
-        entityType="chat"
-        entityName={sessionToDelete?.title || "Untitled chat"}
-        open={!!sessionToDelete}
-        onOpenChange={(open) => !open && setSessionToDelete(null)}
-        onDoDelete={handleConfirmDelete}
+      <DeleteChatDialog
+        session={sessionToDelete}
+        isDeleting={isDeleting}
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
       />
     </>
   );

autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/DeleteChatDialog.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+
+interface Props {
+  session: { id: string; title: string | null | undefined } | null;
+  isDeleting: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function DeleteChatDialog({
+  session,
+  isDeleting,
+  onConfirm,
+  onCancel,
+}: Props) {
+  return (
+    <Dialog
+      title="Delete chat"
+      styling={{ maxWidth: "30rem", minWidth: "auto" }}
+      controlled={{
+        isOpen: !!session,
+        set: async (open) => {
+          if (!open && !isDeleting) {
+            onCancel();
+          }
+        },
+      }}
+      onClose={isDeleting ? undefined : onCancel}
+    >
+      <Dialog.Content>
+        <Text variant="body">
+          Are you sure you want to delete{" "}
+          <Text variant="body-medium" as="span">
+            &quot;{session?.title || "Untitled chat"}&quot;
+          </Text>
+          ? This action cannot be undone.
+        </Text>
+        <Dialog.Footer>
+          <Button variant="secondary" onClick={onCancel} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            loading={isDeleting}
+          >
+            Delete
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileHeader/MobileHeader.tsx

@@ -1,20 +1,12 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import { ListIcon, TrashIcon } from "@phosphor-icons/react";
+import { ListIcon } from "@phosphor-icons/react";
 
 interface Props {
   onOpenDrawer: () => void;
-  showDelete?: boolean;
-  isDeleting?: boolean;
-  onDelete?: () => void;
 }
 
-export function MobileHeader({
-  onOpenDrawer,
-  showDelete,
-  isDeleting,
-  onDelete,
-}: Props) {
+export function MobileHeader({ onOpenDrawer }: Props) {
   return (
     <div
       className="fixed z-50 flex gap-2"
@@ -29,18 +21,6 @@ export function MobileHeader({
       >
         <ListIcon width="1.25rem" height="1.25rem" />
       </Button>
-      {showDelete && onDelete && (
-        <Button
-          variant="icon"
-          size="icon"
-          aria-label="Delete current chat"
-          onClick={onDelete}
-          disabled={isDeleting}
-          className="bg-white text-red-500 shadow-md hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
-        >
-          <TrashIcon width="1.25rem" height="1.25rem" />
-        </Button>
-      )}
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -192,8 +192,10 @@ export function useCopilotPage() {
   }, [sessionToDelete, deleteSessionMutation]);
 
   const handleCancelDelete = useCallback(() => {
-    setSessionToDelete(null);
-  }, []);
+    if (!isDeleting) {
+      setSessionToDelete(null);
+    }
+  }, [isDeleting]);
 
   return {
     sessionId,

autogpt_platform/frontend/src/components/ai-elements/message.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
+import { code } from "@/lib/streamdown-code-plugin";
 import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
 import type { UIMessage } from "ai";

autogpt_platform/frontend/src/components/molecules/Dialog/components/BaseFooter.tsx

@@ -25,7 +25,7 @@ export function BaseFooter({
     </div>
   ) : (
     <div
-      className={`flex w-full items-end justify-between gap-4 pt-6 ${className}`}
+      className={`flex w-full items-end justify-end gap-4 pt-6 ${className}`}
       data-testid={testId}
     >
       {children}

autogpt_platform/frontend/src/lib/shiki-highlighter.ts

@@ -0,0 +1,70 @@
+import {
+  bundledLanguages,
+  bundledLanguagesInfo,
+  createHighlighter,
+  type BundledLanguage,
+  type BundledTheme,
+  type HighlighterGeneric,
+} from "shiki";
+
+export type { BundledLanguage, BundledTheme };
+
+const LANGUAGE_ALIASES: Record<string, string> = Object.fromEntries(
+  bundledLanguagesInfo.flatMap((lang) =>
+    (lang.aliases ?? []).map((alias) => [alias, lang.id]),
+  ),
+);
+
+const SUPPORTED_LANGUAGES = new Set(Object.keys(bundledLanguages));
+
+const PRELOAD_LANGUAGES: BundledLanguage[] = [
+  "javascript",
+  "typescript",
+  "python",
+  "json",
+  "bash",
+  "yaml",
+  "markdown",
+  "html",
+  "css",
+  "sql",
+  "tsx",
+  "jsx",
+];
+
+export const SHIKI_THEMES: [BundledTheme, BundledTheme] = [
+  "github-light",
+  "github-dark",
+];
+
+let highlighterPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+export function getShikiHighlighter(): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: SHIKI_THEMES,
+      langs: PRELOAD_LANGUAGES,
+    }).catch((err) => {
+      highlighterPromise = null;
+      throw err;
+    });
+  }
+  return highlighterPromise;
+}
+
+export function resolveLanguage(lang: string): string {
+  const normalized = lang.trim().toLowerCase();
+  return LANGUAGE_ALIASES[normalized] ?? normalized;
+}
+
+export function isLanguageSupported(lang: string): boolean {
+  return SUPPORTED_LANGUAGES.has(resolveLanguage(lang));
+}
+
+export function getSupportedLanguages(): BundledLanguage[] {
+  return Array.from(SUPPORTED_LANGUAGES) as BundledLanguage[];
+}

autogpt_platform/frontend/src/lib/streamdown-code-plugin.ts

@@ -0,0 +1,159 @@
+import type { CodeHighlighterPlugin } from "streamdown";
+
+import {
+  type BundledLanguage,
+  type BundledTheme,
+  getShikiHighlighter,
+  getSupportedLanguages,
+  isLanguageSupported,
+  resolveLanguage,
+  SHIKI_THEMES,
+} from "./shiki-highlighter";
+
+interface HighlightResult {
+  tokens: {
+    content: string;
+    color?: string;
+    htmlStyle?: Record<string, string>;
+  }[][];
+  fg?: string;
+  bg?: string;
+}
+
+type HighlightCallback = (result: HighlightResult) => void;
+
+const MAX_CACHE_SIZE = 500;
+const tokenCache = new Map<string, HighlightResult>();
+const pendingCallbacks = new Map<string, Set<HighlightCallback>>();
+const inFlightLanguageLoads = new Map<string, Promise<void>>();
+
+function simpleHash(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash.toString(36);
+}
+
+function getCacheKey(
+  code: string,
+  lang: string,
+  themes: readonly string[],
+): string {
+  return `${lang}:${themes.join(",")}:${simpleHash(code)}`;
+}
+
+function evictOldestIfNeeded(): void {
+  if (tokenCache.size > MAX_CACHE_SIZE) {
+    const oldestKey = tokenCache.keys().next().value;
+    if (oldestKey) {
+      tokenCache.delete(oldestKey);
+    }
+  }
+}
+
+export function createSingletonCodePlugin(): CodeHighlighterPlugin {
+  return {
+    name: "shiki",
+    type: "code-highlighter",
+
+    supportsLanguage(lang: BundledLanguage): boolean {
+      return isLanguageSupported(lang);
+    },
+
+    getSupportedLanguages(): BundledLanguage[] {
+      return getSupportedLanguages();
+    },
+
+    getThemes(): [BundledTheme, BundledTheme] {
+      return SHIKI_THEMES;
+    },
+
+    highlight({ code, language, themes }, callback) {
+      const lang = resolveLanguage(language);
+      const cacheKey = getCacheKey(code, lang, themes);
+
+      if (tokenCache.has(cacheKey)) {
+        return tokenCache.get(cacheKey)!;
+      }
+
+      if (callback) {
+        if (!pendingCallbacks.has(cacheKey)) {
+          pendingCallbacks.set(cacheKey, new Set());
+        }
+        pendingCallbacks.get(cacheKey)!.add(callback);
+      }
+
+      getShikiHighlighter()
+        .then(async (highlighter) => {
+          const loadedLanguages = highlighter.getLoadedLanguages();
+
+          if (!loadedLanguages.includes(lang) && isLanguageSupported(lang)) {
+            let loadPromise = inFlightLanguageLoads.get(lang);
+            if (!loadPromise) {
+              loadPromise = highlighter
+                .loadLanguage(lang as BundledLanguage)
+                .finally(() => {
+                  inFlightLanguageLoads.delete(lang);
+                });
+              inFlightLanguageLoads.set(lang, loadPromise);
+            }
+            await loadPromise;
+          }
+
+          const finalLang = (
+            highlighter.getLoadedLanguages().includes(lang) ? lang : "text"
+          ) as BundledLanguage;
+
+          const shikiResult = highlighter.codeToTokens(code, {
+            lang: finalLang,
+            themes: { light: themes[0], dark: themes[1] },
+          });
+
+          const result: HighlightResult = {
+            tokens: shikiResult.tokens.map((line) =>
+              line.map((token) => ({
+                content: token.content,
+                color: token.color,
+                htmlStyle: token.htmlStyle,
+              })),
+            ),
+            fg: shikiResult.fg,
+            bg: shikiResult.bg,
+          };
+
+          evictOldestIfNeeded();
+          tokenCache.set(cacheKey, result);
+
+          const callbacks = pendingCallbacks.get(cacheKey);
+          if (callbacks) {
+            callbacks.forEach((cb) => {
+              cb(result);
+            });
+            pendingCallbacks.delete(cacheKey);
+          }
+        })
+        .catch((error) => {
+          console.error("[Shiki] Failed to highlight code:", error);
+
+          const fallback: HighlightResult = {
+            tokens: code.split("\n").map((line) => [{ content: line }]),
+          };
+
+          const callbacks = pendingCallbacks.get(cacheKey);
+          if (callbacks) {
+            callbacks.forEach((cb) => {
+              cb(fallback);
+            });
+            pendingCallbacks.delete(cacheKey);
+          }
+        });
+
+      return null;
+    },
+  };
+}
+
+export const code = createSingletonCodePlugin();

autogpt_platform/frontend/src/tests/pages/library.page.ts

@@ -465,9 +465,13 @@ export async function navigateToAgentByName(
 export async function clickRunButton(page: Page): Promise<void> {
   const { getId } = getSelectors(page);
 
-  // Wait for page to stabilize and buttons to render
-  // The NewAgentLibraryView shows either "Setup your task" (empty state)
-  // or "New task" (with items) button
+  // Wait for sidebar loading to complete before detecting buttons.
+  // During sidebar loading, the "New task" button appears transiently
+  // even for agents with no items, then switches to "Setup your task"
+  // once loading finishes. Waiting for network idle ensures the page
+  // has settled into its final state.
+  await page.waitForLoadState("networkidle");
+
   const setupTaskButton = page.getByRole("button", {
     name: /Setup your task/i,
   });
@@ -475,8 +479,7 @@ export async function clickRunButton(page: Page): Promise<void> {
   const runButton = getId("agent-run-button");
   const runAgainButton = getId("run-again-button");
 
-  // Use Promise.race with waitFor to wait for any of the buttons to appear
-  // This handles the async rendering in CI environments
+  // Wait for any of the buttons to appear
   try {
     await Promise.race([
       setupTaskButton.waitFor({ state: "visible", timeout: 15000 }),
@@ -490,7 +493,7 @@ export async function clickRunButton(page: Page): Promise<void> {
     );
   }
 
-  // Now check which button is visible and click it
+  // Check which button is visible and click it
   if (await setupTaskButton.isVisible()) {
     await setupTaskButton.click();
     const startTaskButton = page
@@ -534,7 +537,9 @@ export async function runAgent(page: Page): Promise<void> {
 
 export async function waitForAgentPageLoad(page: Page): Promise<void> {
   await page.waitForURL(/.*\/library\/agents\/[^/]+/);
-  await page.getByTestId("Run actions").isVisible({ timeout: 10000 });
+  // Wait for sidebar data to finish loading so the page settles
+  // into its final state (empty view vs sidebar view)
+  await page.waitForLoadState("networkidle");
 }
 
 export async function getAgentName(page: Page): Promise<string> {