Merge branch 'dev' into swiftyos/sse-long-running-tasks

autogpt_platform/frontend/CLAUDE.md

@@ -0,0 +1,76 @@
+# CLAUDE.md - Frontend
+
+This file provides guidance to Claude Code when working with the frontend.
+
+## Essential Commands
+
+```bash
+# Install dependencies
+pnpm i
+
+# Generate API client from OpenAPI spec
+pnpm generate:api
+
+# Start development server
+pnpm dev
+
+# Run E2E tests
+pnpm test
+
+# Run Storybook for component development
+pnpm storybook
+
+# Build production
+pnpm build
+
+# Format and lint
+pnpm format
+
+# Type checking
+pnpm types
+```
+
+### Code Style
+
+- Fully capitalize acronyms in symbols, e.g. `graphID`, `useBackendAPI`
+- Use function declarations (not arrow functions) for components/handlers
+
+## Architecture
+
+- **Framework**: Next.js 15 App Router (client-first approach)
+- **Data Fetching**: Type-safe generated API hooks via Orval + React Query
+- **State Management**: React Query for server state, co-located UI state in components/hooks
+- **Component Structure**: Separate render logic (`.tsx`) from business logic (`use*.ts` hooks)
+- **Workflow Builder**: Visual graph editor using @xyflow/react
+- **UI Components**: shadcn/ui (Radix UI primitives) with Tailwind CSS styling
+- **Icons**: Phosphor Icons only
+- **Feature Flags**: LaunchDarkly integration
+- **Error Handling**: ErrorCard for render errors, toast for mutations, Sentry for exceptions
+- **Testing**: Playwright for E2E, Storybook for component development
+
+## Environment Configuration
+
+`.env.default` (defaults) → `.env` (user overrides)
+
+## Feature Development
+
+See @CONTRIBUTING.md for complete patterns. Quick reference:
+
+1. **Pages**: Create in `src/app/(platform)/feature-name/page.tsx`
+   - Extract component logic into custom hooks grouped by concern, not by component. Each hook should represent a cohesive domain of functionality (e.g., useSearch, useFilters, usePagination) rather than bundling all state into one useComponentState hook.
+     - Put each hook in its own `.ts` file
+   - Put sub-components in local `components/` folder
+   - Component props should be `type Props = { ... }` (not exported) unless it needs to be used outside the component
+2. **Components**: Structure as `ComponentName/ComponentName.tsx` + `useComponentName.ts` + `helpers.ts`
+   - Use design system components from `src/components/` (atoms, molecules, organisms)
+   - Never use `src/components/__legacy__/*`
+3. **Data fetching**: Use generated API hooks from `@/app/api/__generated__/endpoints/`
+   - Regenerate with `pnpm generate:api`
+   - Pattern: `use{Method}{Version}{OperationName}`
+4. **Styling**: Tailwind CSS only, use design tokens, Phosphor Icons only
+5. **Testing**: Add Storybook stories for new components, Playwright for E2E
+6. **Code conventions**:
+   - Use function declarations (not arrow functions) for components/handlers
+   - Do not use `useCallback` or `useMemo` unless asked to optimise a given function
+   - Do not type hook returns, let Typescript infer as much as possible
+   - Never type with `any` unless a variable/attribute can ACTUALLY be of any type

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx

@@ -57,6 +57,7 @@ export function ChatInput({
     isStreaming,
     value,
     baseHandleKeyDown,
+    inputId,
   });
 
   return (

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts

@@ -15,6 +15,7 @@ interface Args {
   isStreaming?: boolean;
   value: string;
   baseHandleKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  inputId?: string;
 }
 
 export function useVoiceRecording({
@@ -23,6 +24,7 @@ export function useVoiceRecording({
   isStreaming = false,
   value,
   baseHandleKeyDown,
+  inputId,
 }: Args) {
   const [isRecording, setIsRecording] = useState(false);
   const [isTranscribing, setIsTranscribing] = useState(false);
@@ -103,7 +105,7 @@ export function useVoiceRecording({
         setIsTranscribing(false);
       }
     },
-    [handleTranscription],
+    [handleTranscription, inputId],
   );
 
   const stopRecording = useCallback(() => {
@@ -201,6 +203,15 @@ export function useVoiceRecording({
     }
   }, [error, toast]);
 
+  useEffect(() => {
+    if (!isTranscribing && inputId) {
+      const inputElement = document.getElementById(inputId);
+      if (inputElement) {
+        inputElement.focus();
+      }
+    }
+  }, [isTranscribing, inputId]);
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
       if (event.key === " " && !value.trim() && !isTranscribing) {

autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts

@@ -516,7 +516,7 @@ export type GraphValidationErrorResponse = {
 
 /* *** LIBRARY *** */
 
-/* Mirror of backend/server/v2/library/model.py:LibraryAgent */
+/* Mirror of backend/api/features/library/model.py:LibraryAgent */
 export type LibraryAgent = {
   id: LibraryAgentID;
   graph_id: GraphID;
@@ -616,7 +616,7 @@ export enum LibraryAgentSortEnum {
 
 /* *** CREDENTIALS *** */
 
-/* Mirror of backend/server/integrations/router.py:CredentialsMetaResponse */
+/* Mirror of backend/api/features/integrations/router.py:CredentialsMetaResponse */
 export type CredentialsMetaResponse = {
   id: string;
   provider: CredentialsProviderName;
@@ -628,13 +628,13 @@ export type CredentialsMetaResponse = {
   is_system?: boolean;
 };
 
-/* Mirror of backend/server/integrations/router.py:CredentialsDeletionResponse */
+/* Mirror of backend/api/features/integrations/router.py:CredentialsDeletionResponse */
 export type CredentialsDeleteResponse = {
   deleted: true;
   revoked: boolean | null;
 };
 
-/* Mirror of backend/server/integrations/router.py:CredentialsDeletionNeedsConfirmationResponse */
+/* Mirror of backend/api/features/integrations/router.py:CredentialsDeletionNeedsConfirmationResponse */
 export type CredentialsDeleteNeedConfirmationResponse = {
   deleted: false;
   need_confirmation: true;
@@ -888,7 +888,7 @@ export type Schedule = {
 
 export type ScheduleID = Brand<string, "ScheduleID">;
 
-/* Mirror of backend/server/routers/v1.py:ScheduleCreationRequest */
+/* Mirror of backend/api/features/v1.py:ScheduleCreationRequest */
 export type ScheduleCreatable = {
   graph_id: GraphID;
   graph_version: number;

autogpt_platform/frontend/src/tests/library.spec.ts

@@ -59,12 +59,13 @@ test.describe("Library", () => {
   });
 
   test("pagination works correctly", async ({ page }, testInfo) => {
-    test.setTimeout(testInfo.timeout * 3); // Increase timeout for pagination operations
+    test.setTimeout(testInfo.timeout * 3);
     await page.goto("/library");
 
+    const PAGE_SIZE = 20;
     const paginationResult = await libraryPage.testPagination();
 
-    if (paginationResult.initialCount >= 10) {
+    if (paginationResult.initialCount >= PAGE_SIZE) {
       expect(paginationResult.finalCount).toBeGreaterThanOrEqual(
         paginationResult.initialCount,
       );
@@ -133,7 +134,10 @@ test.describe("Library", () => {
     test.expect(clearedSearchValue).toBe("");
   });
 
-  test("pagination while searching works correctly", async ({ page }) => {
+  test("pagination while searching works correctly", async ({
+    page,
+  }, testInfo) => {
+    test.setTimeout(testInfo.timeout * 3);
     await page.goto("/library");
 
     const allAgents = await libraryPage.getAgents();
@@ -152,9 +156,10 @@ test.describe("Library", () => {
     );
     expect(matchingResults.length).toEqual(initialSearchResults.length);
 
+    const PAGE_SIZE = 20;
     const searchPaginationResult = await libraryPage.testPagination();
 
-    if (searchPaginationResult.initialCount >= 10) {
+    if (searchPaginationResult.initialCount >= PAGE_SIZE) {
       expect(searchPaginationResult.finalCount).toBeGreaterThanOrEqual(
         searchPaginationResult.initialCount,
       );

autogpt_platform/frontend/src/tests/marketplace-creator.spec.ts

@@ -69,9 +69,12 @@ test.describe("Marketplace Creator Page – Basic Functionality", () => {
       await marketplacePage.getFirstCreatorProfile(page);
     await firstCreatorProfile.click();
     await page.waitForURL("**/marketplace/creator/**");
+    await page.waitForLoadState("networkidle").catch(() => {});
+
     const firstAgent = page
       .locator('[data-testid="store-card"]:visible')
       .first();
+    await firstAgent.waitFor({ state: "visible", timeout: 30000 });
 
     await firstAgent.click();
     await page.waitForURL("**/marketplace/agent/**");

autogpt_platform/frontend/src/tests/marketplace.spec.ts

@@ -77,7 +77,6 @@ test.describe("Marketplace – Basic Functionality", () => {
 
     const firstFeaturedAgent =
       await marketplacePage.getFirstFeaturedAgent(page);
-    await firstFeaturedAgent.waitFor({ state: "visible" });
     await firstFeaturedAgent.click();
     await page.waitForURL("**/marketplace/agent/**");
     await matchesUrl(page, /\/marketplace\/agent\/.+/);
@@ -116,7 +115,15 @@ test.describe("Marketplace – Basic Functionality", () => {
     const searchTerm = page.getByText("DummyInput").first();
     await isVisible(searchTerm);
 
-    await page.waitForTimeout(10000);
+    await page.waitForLoadState("networkidle").catch(() => {});
+
+    await page
+      .waitForFunction(
+        () =>
+          document.querySelectorAll('[data-testid="store-card"]').length > 0,
+        { timeout: 15000 },
+      )
+      .catch(() => console.log("No search results appeared within timeout"));
 
     const results = await marketplacePage.getSearchResultsCount(page);
     expect(results).toBeGreaterThan(0);

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

@@ -300,21 +300,27 @@ export class LibraryPage extends BasePage {
   async scrollToLoadMore(): Promise<void> {
     console.log(`scrolling to load more agents`);
 
-    // Get initial agent count
-    const initialCount = await this.getAgentCount();
-    console.log(`Initial agent count: ${initialCount}`);
+    const initialCount = await this.getAgentCountByListLength();
+    console.log(`Initial agent count (DOM cards): ${initialCount}`);
 
-    // Scroll down to trigger pagination
     await this.scrollToBottom();
 
-    // Wait for potential new agents to load
-    await this.page.waitForTimeout(2000);
+    await this.page
+      .waitForLoadState("networkidle", { timeout: 10000 })
+      .catch(() => console.log("Network idle timeout, continuing..."));
 
-    // Check if more agents loaded
-    const newCount = await this.getAgentCount();
-    console.log(`New agent count after scroll: ${newCount}`);
+    await this.page
+      .waitForFunction(
+        (prevCount) =>
+          document.querySelectorAll('[data-testid="library-agent-card"]')
+            .length > prevCount,
+        initialCount,
+        { timeout: 5000 },
+      )
+      .catch(() => {});
 
-    return;
+    const newCount = await this.getAgentCountByListLength();
+    console.log(`New agent count after scroll (DOM cards): ${newCount}`);
   }
 
   async testPagination(): Promise<{

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

@@ -9,6 +9,7 @@ export class MarketplacePage extends BasePage {
 
   async goto(page: Page) {
     await page.goto("/marketplace");
+    await page.waitForLoadState("networkidle").catch(() => {});
   }
 
   async getMarketplaceTitle(page: Page) {
@@ -109,16 +110,24 @@ export class MarketplacePage extends BasePage {
 
   async getFirstFeaturedAgent(page: Page) {
     const { getId } = getSelectors(page);
-    return getId("featured-store-card").first();
+    const card = getId("featured-store-card").first();
+    await card.waitFor({ state: "visible", timeout: 30000 });
+    return card;
   }
 
   async getFirstTopAgent() {
-    return this.page.locator('[data-testid="store-card"]:visible').first();
+    const card = this.page
+      .locator('[data-testid="store-card"]:visible')
+      .first();
+    await card.waitFor({ state: "visible", timeout: 30000 });
+    return card;
   }
 
   async getFirstCreatorProfile(page: Page) {
     const { getId } = getSelectors(page);
-    return getId("creator-card").first();
+    const card = getId("creator-card").first();
+    await card.waitFor({ state: "visible", timeout: 30000 });
+    return card;
   }
 
   async getSearchResultsCount(page: Page) {