Commit Graph

306 Commits

Author SHA1 Message Date
Ubbe
2dd366172e feat(frontend): add dialog component (#10254)
## Changes 🏗️

### Overview

Introduces a new responsive `<Dialog />` component that automatically
adapts to screen size, providing optimal UX across devices.

<img width="800" alt="Screenshot 2025-06-27 at 16 00 01"
src="https://github.com/user-attachments/assets/d0c53b30-488f-4102-8100-c9318168d65b"
/>

<img width="300" alt="Screenshot 2025-06-27 at 16 00 12"
src="https://github.com/user-attachments/assets/f2105708-97d9-4a94-8e26-3c2d582ea8cd"
/>

### Key Features

#### 📱 **Responsive Behavior**
- **Desktop**: Modal dialog with overlay
- **Mobile**: Bottom drawer [Vaul](https://vaul.emilkowal.ski/) with
**swipe-to-dismiss** functionality

#### 🎯 **Multiple Interaction Methods**
- `ESC` key to close (both desktop & mobile)
- Click outside to dismiss
- Swipe down to dismiss (mobile drawer)
- Close button (X)

####  Why I did not use `shadcn/dialog` in this case as a base

While we already use the raw `shadcn/dialog` on the platform, it's
designed as a desktop-only solution and is not really
responsive-friendly. It lacks 📱 mobile-optimisation patterns like
_bottom drawers_, _swipe-to-dismiss gestures_ ( the new implementation
has it via [Vaul](https://vaul.emilkowal.ski/) ), and automatic
breakpoint adaptation according to screen size.

#### 🧩 **Compound Component Pattern**
```tsx
<Dialog title="Example">
  <Dialog.Trigger>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    Content goes here
  </Dialog.Content>
</Dialog>
```

#### ⚙️ **Flexible Control**
- **Uncontrolled**: Self-managed state via triggers
- **Controlled**: External state management
- **Force open**: rare but might be needed
- **Custom styling**: if needed

## Checklist 📋

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] **Desktop Modal**: Opens/closes via trigger, ESC key, click
outside, close button
- [x] **Mobile Drawer**: Automatically switches at `lg` breakpoint,
swipe-to-dismiss works
- [x] **Controlled Mode**: External state management functions correctly
  - [x] **Force Open**: Dialog stays open for preview purposes
  - [x] **Custom Styling**: CSS-in-JS overrides work as expected
- [x] **Footer Component**: Action buttons render and function properly
  - [x] **No Title Mode**: Dialog works without title prop
- [x] **Accessibility**: Tab navigation, screen reader announcements,
ARIA compliance
- [x] **Responsive Breakpoints**: Component switches modes at correct
screen sizes
  - [x] **Storybook**: All stories render and function correctly

---------

Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
2025-06-27 17:08:03 +00:00
Reinier van der Leer
5421ccf86a feat(platform/library): Scheduling UX (#10246)
Complete the implementation of the Agent Run Scheduling UX in the
Library.

Demo:


https://github.com/user-attachments/assets/701adc63-452c-4d37-aeea-51788b2774f2

### Changes 🏗️

Frontend:
- Add "Schedule" button + dialog + logic to `AgentRunDraftView`
  - Update corresponding logic on `AgentRunsPage`
  - Add schedule name field to `CronSchedulerDialog`
- Amend Builder components `useAgentGraph`, `FlowEditor`,
`RunnerUIWrapper` to also handle schedule name input
    - Split `CronScheduler` into `CronScheduler`+`CronSchedulerDialog`
- Make `AgentScheduleDetailsView` more fully functional
  - Add schedule description to info box
  - Add "Delete schedule" button
- Update schedule create/select/delete logic in `AgentRunsPage`
- Improve schedule UX in `AgentRunsSelectorList`
  - Switch tabs automatically when a run or schedule is selected
  - Remove now-redundant schedule filters
- Refactor `@/lib/monitor/cronExpressionManager` into
`@/lib/cron-expression-utils`

Backend + API:
- Add name and credentials to graph execution schedule job params
- Update schedule API
  - `POST /schedules` -> `POST /graphs/{graph_id}/schedules`
  - Add `GET /graphs/{graph_id}/schedules`
  - Add not found error handling to `DELETE /schedules/{schedule_id}`
  - Minor refactoring

Backend:
- Fix "`GraphModel`->`NodeModel` is not fully defined" error in
scheduler
- Add support for all exceptions defined in `backend.util.exceptions` to
RPC logic in `backend.util.service`
- Fix inconsistent log prefixing in `backend.executor.scheduler`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- Create a simple agent with inputs and blocks that require credentials;
go to this agent in the Library
- Fill out the inputs and click "Schedule"; make it run every minute
(for testing purposes)
  - [x] -> newly created schedule appears in the list
  - [x] -> scheduled runs are successful
  - Click "Delete schedule"
  - [x] -> schedule no longer in list
- [x] -> on deleting the last schedule, view switches back to the Runs
list
  - [x] -> no new runs occur from the deleted schedule
2025-06-27 15:31:44 +00:00
Zamil Majdy
2f12e8d731 feat(platform): Add Host-scoped credentials support for blocks HTTP requests (#10215)
Currently, we don't have a secure way to pass Authorization headers when
calling the `SendWebRequestBlock`.
This hinders the integration of third-party applications that do not yet
have native block support.

### Changes 🏗️

Add Host-scoped credentials support for the newly introduced
SendAuthenticatedWebRequestBlock.

<img width="1000" alt="image"
src="https://github.com/user-attachments/assets/0d3d577a-2b9b-4f0f-9377-0e00a069ba37"
/>
<img width="1000" alt="image"
src="https://github.com/user-attachments/assets/a59b9f16-c89c-453d-a628-1df0dfd60fb5"
/>

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
- [x] Uses `https://api.openai.com/v1/images/edits` through
SendWebRequestBlock by passing the api-key through host-scoped
credentials.
2025-06-26 19:09:27 +00:00
Abhimanyu Yadav
f66b8f9c74 refactor(frontend): update settings pages fetching using react query (#10248)
### Changes 🏗️
- We have implemented some backend changes, so I have added a new,
updated OpenAPI specification.
- We have updated the settings and API keys page to enable us to use
React Query for fetching data.

### Checklist 📋

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
    - [x] Settings and api keys page is working correctly
2025-06-26 15:13:20 +00:00
Ubbe
2af9d75dec feat(frontend): enforce auth through httpOnly cookies (#10201)
### Changes 🏗️

Implemented `httpOnly` cookies 🍪 for secure session management 💆🏽 

- 🙏🏽 **Moved all API requests to server-side execution** for maximum XSS
protection
- All authentication now happens server-side with `httpOnly` cookies (no
JWT tokens exposed to client)
- Created `proxyApiRequest()` and `proxyFileUpload()` server actions to
handle all communication with API
- Updated `BackendAPI._request()` to always use proxy approach for
consistent security

- 🚧 **Exception: WebSocket authentication** requires client-side token
exposure
- Added `getWebSocketToken()` server action to securely provide tokens
only for WebSocket connections
  - Maintains secure architecture while we keep the real-time features

- 🧹 **Abstracted implementation details** into reusable helper functions
  - Reduced proxy actions from 157 lines to 48 lines (70% reduction)
- Added flexible content-type support ( _JSON, form-urlencoded, custom_
)
  - Enhanced error handling for graceful logout scenarios
  
- 📙 **Renamed `/reset_password` page to `/reset-password`**
  - couldn't resist sorry... snake case URLs get me 

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Verify all API requests work through server-side proxy
  - [x] Confirm httpOnly cookies prevent client-side JWT access
  - [x] Test WebSocket connections work with server-provided tokens
  - [x] Verify logout scenarios don't throw authentication errors
  - [x] Check file uploads work securely through proxy
  - [x] Validate zero breaking changes for existing BackendAPI calls

---------

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
Co-authored-by: Nicholas Tindle <nicktindle@outlook.com>
Co-authored-by: Swifty <craigswift13@gmail.com>
2025-06-26 13:27:23 +00:00
Ubbe
0b37263092 feat(frontend): add Badge component (#10244)
## Changes 🏗️

<img width="800" alt="Screenshot 2025-06-25 at 20 34 38"
src="https://github.com/user-attachments/assets/bfc90504-85b6-4178-9ace-2aa4d14f16b0"
/>
<br /><br />

- To match what is on the AutoGPT design system
- Unit tests commented because they depend on:
https://github.com/Significant-Gravitas/AutoGPT/pull/10243

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook locally, Badge stories look good
2025-06-26 05:21:20 +00:00
Ubbe
203cb1c88c feat(frontend): add Link component (#10241)
## Changes 🏗️

<img width="1580" alt="Screenshot 2025-06-25 at 18 11 36"
src="https://github.com/user-attachments/assets/c8b136b6-5897-41fa-a03b-010582c4b879"
/>
<br /><br />

Add a new `<Link />` component that will be the standard when rendering
links on the platform.

It is a wrapper of `next/link` and has an `isExternal` prop; when
supplied `target="_blank"` and `rel="noopener noreferrer"` will be added
to it. It comes with the styles agreed on AutoGPT design system.

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook locally
  - [x] Tests pass and the component looks good
2025-06-25 14:37:22 +00:00
Ubbe
3e3db658c6 docs(frontend): document skeleton (#10240)
## Changes 🏗️

<img width="800" alt="Screenshot 2025-06-25 at 17 52 38"
src="https://github.com/user-attachments/assets/18f859cf-5008-4915-925c-1912ab9cf176"
/>

- Depends on #10235 so that we can test the new Chromatic workflow with
this
- Documents our Skeleton atom which is directly
[shadcn/skeleton](https://ui.shadcn.com/docs/components/skeleton)

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run storybook locally
  - [x] The Skeleton stories look good
2025-06-25 14:34:40 +00:00
Ubbe
1dcf0312f2 chore(frontend): setup chromatic (#10235)
## Changes 🏗️

<img width="800" alt="Screenshot 2025-06-25 at 13 43 06"
src="https://github.com/user-attachments/assets/13ffd32e-ffa1-482e-91a6-8363ad6b67df"
/>

<br /><br />

- Setup Chromatic ( install + `package.json` command )
- Make it run on the CI
- Remove a lot of old component in Storybook which were broken or need
deign review
  - for now we only keep on Storybook what has been  by design 
- Remove `test-storybook:ci` commands 
- I plan to run tests via Chromatic, but I want to look at that setup on
a separate PR and in a clean state


## 📋 Checklist

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] The `chromatic` job succeeds on the CI and the changes appear on
Chromatic's dashboard
2025-06-25 13:55:18 +00:00
Reinier van der Leer
1d29a64e35 fix(backend/library): Split & fix update_library_agent endpoint (#10220)
This PR makes several improvements to the `update_library_agent`
endpoint.

- Resolves #10216

### Changes 🏗️

- Add `DELETE /library/agents/{id}` endpoint
- Fix `PUT /library/agents/{id}` endpoint
  - Return updated library agent
  - Remove `is_deleted` parameter
  - Change method from `PUT` to `PATCH`

Also, a small DX improvement:
- Expose `BackendAPI` globally through `window.api` for local dev
purposes

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Deleting library agents works
2025-06-25 08:53:27 +00:00
Reinier van der Leer
c3ad260415 fix(frontend/builder): Fix agent block input value key (#10229)
- Follow-up fix to #9862
- Resolves #10097

In #9862, the `AgentExecutorBlock`'s nested input field was renamed from
`data` to `input`, but apparently the frontend also had a reference to
this field and was now broken.

### Changes 🏗️

- Update `getInputPropKey` in `CustomNode` to use `inputs.{key}` instead
of `data.{key}`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - Create an agent with at least one input
  - Use the agent with at least one input inside another agent
  - Set a default value on the input on the agent block
  - Save the graph
  - [x] -> default input value is saved
2025-06-24 21:31:48 +00:00
Zamil Majdy
1c6b829925 fix(blocks): Fix Image input on AIImageEditorBlock to accept relative path file media (#10210)
AIImageEditorBlock was not able to accept an image from AgentFileInput
or FileStore block.

### Changes 🏗️

* Add support for image loading for the image editor block:
<img width="1081" alt="Screenshot 2025-06-23 at 10 28 45 AM"
src="https://github.com/user-attachments/assets/ac3fea91-9503-4894-bbe3-2dc3c5649a39"
/>

* Avoid rendering a relative path image file.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Run AiImageEditor block using AgentFileInput or FileStore block.
2025-06-24 20:36:02 +00:00
Reinier van der Leer
efa4b6d2a0 feat(platform/library): Triggered-agent support (#10167)
This pull request adds support for setting up (webhook-)triggered agents
in the Library. It contains changes throughout the entire stack to make
everything work in the various phases of a triggered agent's lifecycle:
setup, execution, updates, deletion.

Setting up agents with webhook triggers was previously only possible in
the Builder, limiting their use to the agent's creator only. To make it
work in the Library, this change uses the previously introduced
`AgentPreset` to store information on, instead of on the graph's nodes
to which only a graph's creator has access.

- Initial ticket: #10111
- Builds on #9786

![screenshot of trigger setup screen in the
library](https://github.com/user-attachments/assets/525b4e94-d799-4328-b5fa-f05d6a3a206a)
![screenshot of trigger edit screen in the
library](https://github.com/user-attachments/assets/e67eb0bc-df70-4a75-bf95-1c31263ef0c9)

### Changes 🏗️

Frontend:
- Amend the Library's `AgentRunDraftView` to handle creating and editing
Presets
- Add `hideIfSingleCredentialAvailable` parameter to `CredentialsInput`
  - Add multi-select support to `TypeBasedInput`
- Add Presets section to `AgentRunsSelectorList`
  - Amend `AgentRunSummaryCard` for use for Presets
- Add `AgentStatusChip` to display general agent status (for now: Active
/ Inactive / Error)
- Add Preset loading logic and create/update/delete handlers logic to
`AgentRunsPage`
- Rename `IconClose` to `IconCross`

API:
- Add `LibraryAgent` properties `has_external_trigger`,
`trigger_setup_info`, `credentials_input_schema`
- Add `POST /library/agents/{library_agent_id}/setup_trigger` endpoint
- Remove redundant parameters from `POST
/library/presets/{preset_id}/execute` endpoint

Backend:
- Add `POST /library/agents/{library_agent_id}/setup_trigger` endpoint
- Extract non-node-related logic from `on_node_activate` into
`setup_webhook_for_block`
- Add webhook-related logic to `update_preset` and `delete_preset`
endpoints
- Amend webhook infrastructure to work with AgentPresets
  - Add preset trigger support to webhook ingress endpoint
- Amend executor stack to work with passed-in node input
(`nodes_input_masks`, generalized from `node_credentials_input_map`)
    - Amend graph validation to work with passed-in node input
  - Add `AgentPreset`->`IntegrationWebhook` relation
    - Add `WebhookWithRelations` model
- Change behavior of `BaseWebhooksManager.get_manual_webhook(..)` to
avoid unnecessary changes of the webhook URL: ignore `events` to find
matching webhook, and update `events` if necessary.
- Fix & improve `AgentPreset` API, models, and DB logic
  - Add `isDeleted` filter to get/list queries
  - Add `user_id` attribute to `LibraryAgentPreset` model
  - Add separate `credentials` property to `LibraryAgentPreset` model
- Fix `library_db.update_preset(..)` replacement of existing
`InputPresets`
- Make `library_db.update_preset(..)` more usage-friendly with separate
parameters for updateable properties
- Add `user_id` checks to various DB functions
- Fix error handling in various endpoints
- Fix cache race condition on `load_webhook_managers()`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - Test existing functionality
- [x] Auto-setup and -teardown of webhooks on save in the builder still
works
    - [x] Running an agent normally from the Library still works
  - Test new functionality
    - [x] Setting up a trigger in the Library
    - [x] Updating a trigger in the Library
    - [x] Disabling and re-enabling a trigger in the Library
    - [x] Deleting a trigger in the Library
- [x] Triggers set up in the Library result in a new run when the
webhook receives a payload
2025-06-24 20:28:20 +00:00
Zamil Majdy
91ea322887 fix(blocks): Fix broken Apollo Blocks (#10197)
Current Apollo blocks only work with keywords; the huge number of list
filter fields doesn't work because it's passing the wrong GET parameter
(missing `[]`).

### Changes 🏗️

Change the GET request to a POST request for Apollo.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Run SearchPeopleBlock with title filter
2025-06-20 05:15:46 +00:00
Ubbe
e183be08bd feat(frontend): Add cool Input component (#10196)
## Changes 🏗️

<img width="400" alt="Screenshot 2025-06-19 at 18 17 53"
src="https://github.com/user-attachments/assets/ad690d75-4ce0-4f50-9774-1f9d07cd5934"
/>

<img width="400" alt="Screenshot 2025-06-19 at 18 17 56"
src="https://github.com/user-attachments/assets/97d59e18-76c8-46d1-9b8f-87058bc1ab86"
/>

### 📙 Overview

- New Input component (`components/atoms/Input/`)
- Multiple input types with smart formatting:
  - `type="text"` → Basic text input with no filtering
  - `type="email"` → Email input (no character filtering)  
  - `type="password"` → Password input with masking
- `type="number"` → Number input with character filtering (digits,
decimal, minus)
- `type="amount"` → Formatted number input with comma separators and
decimal limiting
  - `type="tel"` → Phone input allowing only `+()[] ` and digits
  - `type="url"` → URL input (no character filtering)

### 📙 Smart formatting features

- Amount type: `1000` → `1,000`, `1234.567` → `1,234.56` (with
`decimalCount={2}`)
- Number type: `abc123def` → `123`, `12.34.56` → `12.3456`
- Phone type: `abc+1(555)def` → `+1(555)`

### 📙 Other

- Error state with `error` prop - shows red border and error message
below input
- Label control with `hideLabel` prop for accessibility
- Decimal precision control via `decimalCount` prop (amount type only,
default: 4)

### 📙 Architecture

- **Clean separation**: `Input.tsx` (render), `useInput.ts` (logic),
`helpers.ts` (utilities)
- **Comprehensive Storybook stories** with usage examples and
documentation

### 📙 Examples
```tsx
// Basic inputs
<Input type="text" label="Full Name" />
<Input type="email" label="Email" error="Invalid email" />

// Formatted inputs  
<Input type="amount" label="Price" decimalCount={2} />
<Input type="tel" label="Phone" placeholder="+1 (555) 123-4567" />

// Number input (unlimited decimals)
<Input type="number" label="Score" />
```

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:

**Test Plan:**
- [x] **Basic functionality**: Text input, label visibility, disabled
state, error display
- [x] **Number validation**: Character filtering (`abc123` → `123`),
decimal handling, negative numbers
- [x] **Amount formatting**: Comma insertion (`1000` → `1,000`), decimal
limiting with `decimalCount`
- [x] **Phone filtering**: Only allows `+()[] ` and digits (`abc555def`
→ `555`)
- [x] **Email/Password/URL**: No character filtering, proper input types
- [x] **Edge cases**: Starting with `.` or `-`, multiple decimals,
accessibility with hidden labels
- [x] **Storybook stories**: All variants documented with interactive
examples
```
2025-06-19 16:06:23 +00:00
Ubbe
fc4d0d4bb8 docs(frontend): new Button component + stories (#10192)
### Changes 🏗️

![Screenshot 2025-06-19 at 13 38
21](https://github.com/user-attachments/assets/8c3f8d27-6f4d-4d95-8d78-0b160ce51091)

- Adds a new `<Button>` component that mirrors 1:1 what we have in the
design system
- Documented the new component via stories
- Re-arranged the stories in the Storybook sidebar to show the legacy
ones at the end

Once this is merged, we can start updating buttons on the app to only
use this one, so we have a consistent UX 💆🏽

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook locally
  - [x] Button stories look good ( _in all variants_ )
2025-06-19 10:43:23 +00:00
Bently
d0beebcbff fix(frontend): Update Schedule Task's default value to "daily" (#10191)
### Changes 🏗️

Fixes: [Make the default scheduler frequency to daily instead of every
minute
#9985](https://github.com/Significant-Gravitas/AutoGPT/issues/9985)

This simply updates the Schedule Task's default from minute to daily at
09:00 as default time


![image](https://github.com/user-attachments/assets/673f5e75-a970-41d9-a7b6-531bce4a6d7b)


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
- [x] Open the Schedule Task UI and see the default is now daily at
09:00
2025-06-19 07:15:12 +00:00
Ubbe
93e611d609 docs(frontend): document new color tokens (#10186)
### Changes 🏗️

<img width="800" alt="Screenshot 2025-06-18 at 19 55 24"
src="https://github.com/user-attachments/assets/f3bd662e-cc64-4a32-a030-973b7cf89d8b"
/>

Document the new colour tokens agreed with the design team, and update
the Tailwind theme with them.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook locally
  - [x] Verify the colors story renders well and make sense
2025-06-19 05:36:59 +00:00
Ubbe
375777fe3c refactor(frontend): upgrade to Storybook 9 (#10179)
## Changes 🏗️

Migrate to [Storybook 9](https://storybook.js.org/docs/migration-guide),
changes are mostly from the migration tool:
``` basg
pnpm storybook@latest upgrade
```

On top of that:
- removed stories for [shadcn](https://ui.shadcn.com/) components
- to avoid confusion, shadcn in our base for the component library, and
is already documented on their website
- removed example stories
- regrouped existing `agpt-ui` stories under `Legacy`
- I need to review them and see if they still fit the expected designs
of the platform or not

<img width="600" alt="Screenshot 2025-06-17 at 13 43 57"
src="https://github.com/user-attachments/assets/ca3d9c1b-9dc4-4684-ac77-6259beeb3e1d"
/>


## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run `pn storybook` locally
  - [x] It works well, and the stories look good

---------

Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
2025-06-18 10:36:00 +00:00
Ubbe
86361fc1ae fix(frontend): fix all lint errors and add next/typescript (#10182)
## Changes 🏗️

### ESLint Config
1. **Disabled `react-hooks/exhaustive-deps`:** 
- to prevent unnecessary dependency proliferation and rely on code
review instead
2. **Added
[`next/typescript`](https://nextjs.org/docs/app/api-reference/config/eslint#with-typescript):**
- to the ESLint config to make sure we also have TS linting rules
3. **Added custom rule for `@typescript-eslint/no-unused-vars`:** 
- to allow underscore-prefixed variables (convention for intentionally
unused), in some cases helpful

From now on, whenever we have unused variables or imports, the `lint` CI
will fail 🔴 , thanks to `next/typescript` that adds
`typescript-eslint/no-unused-vars` 💆🏽

### Minor Fixes
- Replaced empty interfaces with type aliases to resolve
`@typescript-eslint/no-empty-object-type` warnings
- Fixed unsafe non-null assertions with proper null checks
- Removed `@ts-ignore` comments in favour of proper type casting ( _when
possible_ 🙏🏽 )

### Google Analytics Component
- Changed Next.js Script strategy from `beforeInteractive` to
`afterInteractive` to resolve Next.js warnings
- this make sure loading analytics does not block page render 🙏🏽 (
_better page load time_ )

### Are these changes safe?

As long as the Typescript compiler does not complain ( check the
`type-check` job ) we should be save. Most changes are removing unused
code, if that code would be used somewhere else the compiler should
catch it and tell us 🫶

I also typed some code when possible, or bypassed the linter when I
thought it was fair for now. I disabled a couple ESLint rules. Most
importantly the `no-explicity-any` one as we have loads of stuff untyped
yet ( _this should be improved once API types are generated for us_ ).

### DX

Added some settings on `.vscode` folder 📁 so that files will be
formatted on save and also ESLint will fix errors on save when able 💯

### 📈 **Result:**

-  All linting errors resolved
-  Improved TypeScript strict mode compliance  
-  Better developer experience with cleaner code

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x]  I have tested my changes according to the test plan:
  - [x] Lint CI job passes
- [x] There is not type errors ( _TS will catch issue related to these
changes_ )
2025-06-17 14:29:21 +00:00
Zamil Majdy
97e72cb485 feat(backend): Make execution engine async-first (#10138)
This change introduced async execution for blocks and the execution
engine. Paralellism will be achieved through a single process
asynchronous execution instead of process concurrency.

### Changes 🏗️

* Support async execution for the graph executor
* Removed process creation for node execution
* Update all blocks to support async executions

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Manual graph executions, tested many of the impacted blocks.
2025-06-17 09:38:24 +00:00
Nicholas Tindle
81d3eb7c34 feat(backend, frontend): make changes to use our security modules more effectively (#10123)
<!-- Clearly explain the need for these changes: -->
Doing the CASA Audit and this is something to check
### Changes 🏗️
- limits APIs to use their specific endpoints
- use expected trusted sources for each block and requests call
- Use cryptographically valid string comparisons
- Don't log secrets

<!-- Concisely describe all of the changes made in this pull request:
-->

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Testing in dev branch once merged

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
2025-06-16 15:22:08 +00:00
Toran Bruce Richards
1ff924e260 Fix(frontend): Update StoreCard component to use bg-background instead of hardcoded bg-white (#9963)
Fixes #9868

This pull request updates the `StoreCard` component in
`autogpt_platform/frontend/src/components/agptui/StoreCard.tsx` to
replace the hardcoded Tailwind CSS class `bg-white` with the more
flexible `bg-background` utility class. This change ensures better
consistency with the application's theming and makes it easier to adapt
to different color schemes, such as light and dark modes.

#### Changes:
- **Before:**  
  `className="... bg-white ... dark:bg-transparent ..."`
 

![image](https://github.com/user-attachments/assets/9eb2b595-8712-405b-ba7d-babd2361e344)

- **After:**  
  `className="... bg-background ... dark:bg-transparent ..."`
  

![image](https://github.com/user-attachments/assets/58affa1b-7160-4961-b9f2-5fdc15c2439e)


#### Motivation:
- Removes the white background on the cards, which weren't part of the
designs.

No functional or visual changes are expected except for improved support
for custom themes.

---
This PR was entirely generated by an AI Agent.
**Please review and let me know if additional changes are needed!**

Co-authored-by: itsababseh <36419647+itsababseh@users.noreply.github.com>
2025-06-16 08:00:16 +00:00
Ubbe
fb18ddf95d feat(frontend): handle cross-tab login/logout + auth architecture refactor (#10150)
## 🏗️ Changes 

### 🧢 Authentication improvements
- Updates for [CASA compliance](https://appdefensealliance.dev/casa)
  - implemented cross-tab login/logout
  - logout now triggers cross-device logout 
  - forgot password triggers cross-device logout
- we are already able to revoke sessions given Supabase stores sessions
🙌🏽

### 📙 Cross-tab login/logout implementation

I implemented some session validation debouncing ( _2-second cooldown_ )
to prevent excessive API calls when switching tabs fast ( _more of an
edge-case but could happen_ ). Cross tab implementation is done via
`localStorage` and `window.visibility` events.

### Refactor and cleanup

Smol things to improve our auth logic on the Frontend:
- created `helpers.ts` with utilities for protected page detection,
admin page routing, and cross-tab communication
- added `STORAGE_KEYS`, `PROTECTED_PAGES`, and `ADMIN_PAGES` constants
for better organization
- refactored server-side Supabase utilities and middleware
- updated import paths to use named exports

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Cross-tab logout synchronization works correctly
  - [x] Session validation debouncing prevents excessive API calls
  - [x] Protected page redirects function properly
  - [x] Authentication state persists correctly across tabs
  - [x] Role-based access controls work as expected
  - [x] Cross-device logout is performed after forgot password change

### Cross-tab login/logout 


https://github.com/user-attachments/assets/5dbdd204-faa2-419f-b989-e31f69ddabd6

### Cross-device logout


https://github.com/user-attachments/assets/aac9c97a-beec-4519-a391-f94f988dc7c8
2025-06-13 15:28:03 +00:00
Ubbe
6e253ecade docs(frontend): add design system overview page (#10157)
### Changes 🏗️

<img width="800" alt="Screenshot 2025-06-13 at 18 29 27"
src="https://github.com/user-attachments/assets/6a2f9c23-860f-4f92-8a7a-eeb7839940fd"
/>

- Add a nice overview page for the 👶🏽 baby AutoGPT design system
- Customise the logo on Storybook to show AutoGPT one

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook
  - [x] You see the Overview page which looks good
2025-06-13 15:10:32 +00:00
Zamil Majdy
c109b676b8 fix(block): Invalid block input error on falsy non-null value 2025-06-13 00:39:55 -07:00
Dmitry
a259eac9ff feat(blocks): Add AI/ML API support to LLM blocks (#9996)
Hi! Taking over this feature from the previous author in
[#9163](https://github.com/Significant-Gravitas/AutoGPT/pull/9163).
This PR continues the work to integrate AI/ML API support into LLM
blocks, addressing pending review comments and ensuring compatibility
with the current codebase.

I’ve reviewed and fixed the outstanding issues from the previous PR.
Kindly recheck the previous concerns — let me know if anything still
needs improvement.

Previous description:

> Changes 🏗️
> 
> - Added basic functionality to enable users to send requests to our
models.
> - Added instructions for users on how to use the AI/ML API in AutoGPT.
> 
> Checklist 📋
> For code changes:
> 
> - [x] I have clearly listed my changes in the PR description
> - [x] I have made a test plan
> - [x] I have tested my changes according to the test plan:
> - [x] The API key has been successfully added and saved to the user's
profile.
> - [x] Sending requests to each model provided by us, enabling users to
test them in a project with various max_tokens parameter values and
other configurations.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Ivan <waterstark97@yandex.ru>
Co-authored-by: waterstark <84220220+waterstark@users.noreply.github.com>
Co-authored-by: Aarushi <50577581+aarushik93@users.noreply.github.com>
Co-authored-by: Reinier van der Leer <github@pwuts.nl>
Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Krzysztof Czerwinski <34861343+kcze@users.noreply.github.com>
Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
Co-authored-by: Krzysztof Czerwinski <kpczerwinski@gmail.com>
Co-authored-by: Reinier van der Leer <pwuts@agpt.co>
Co-authored-by: Bently <tomnoon9@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ayush Mittal <130590402+Ayush-Mittal10@users.noreply.github.com>
Co-authored-by: Azraf Nahian <69325302+turboslapper@users.noreply.github.com>
Co-authored-by: Nicholas Tindle <nicktindle@outlook.com>
Co-authored-by: Swifty <craigswift13@gmail.com>
Co-authored-by: Mario Sacaj <mariosacaj@gmail.com>
Co-authored-by: Toran Bruce Richards <toran.richards@gmail.com>
Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Co-authored-by: Ritik Dutta <ritikduttagd@gmail.com>
Co-authored-by: Pratim Sadhu <pratimsadhu@icloud.com>
2025-06-11 17:46:44 +00:00
Ubbe
8028a766b1 fix(frontend): account menu still showing after logout (#10143)
### Changes 🏗️

<img width="800" alt="Screenshot 2025-06-10 at 14 21 48"
src="https://github.com/user-attachments/assets/d0dba02d-049d-446c-9a25-0f7cec9108bc"
/>

When logging out, I'm redirected to the `/login` page but the account
menu is still visible (however I'm not longer logged out). Refreshing
the page fixes it.

The problem was that `supabase.logOut()` is a client side action, and
`<Navbar />` is a RSC who fetchs the session on the server to display
the state and does not know on the client it was invalidated.
`router.refresh()` solves the issue by forcing RSC on the page to
refetch their state and update server side. Further reading
[here](https://nextjs.org/docs/app/deep-dive/caching#invalidation-1).

I also improved the UX awaiting the promise and displaying a spinner
while the log out action is happening. If logout fails ( _should be very
rare_ ) I'm displaying a toast to not let the user be hanging wondering
what happened.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Login
  - [x] Open account menu
  - [x] Click `Logout`
  - [x] I see a spinner while the action is happening
- [x] I'm redirected to `/login` and I no longer see the account menu
2025-06-11 04:49:56 +00:00
Ubbe
5385520c53 feat(frontend): document typography tokens + Text component (#10132)
### Changes 🏗️

<img width="700" alt="Screenshot 2025-06-09 at 17 01 59"
src="https://github.com/user-attachments/assets/f2b0a3a6-fdf1-4e3e-9caa-d2bf03543dab"
/>

<img width="700" alt="Screenshot 2025-06-09 at 17 02 06"
src="https://github.com/user-attachments/assets/36e27a0b-07f2-4074-8628-cb236d75e4c4"
/>

This PR introduces a comprehensive Typography System for our design
system with improved documentation and developer experience [matching
what we have on
Figma](https://www.figma.com/design/nO9NFynNuicLtkiwvOxrbz/AutoGPT-Design-System?m=dev).

#### **Typography System**

- Created `<Text />` component
- Enforce its usage to ensure consistent typographic styles across the
app
```tsx
<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="body">hello world</Text>
<Text variant="small">smol text</Text>
```
- Created `Typography.stories.tsx` on Storybook
- Complete typography overview with font showcases and usage guidelines

#### **Storybook Improvements**
- **Updated TypeScript docgen** configuration for better prop extraction
- **Cleaned up story rendering** to prevent MDX styling pollution
- **Split large story files** into focused, maintainable components

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  
**Test Plan:**
- [x] Typography stories render correctly in Storybook
- [x] All Text component variants display properly
- [x] Interactive playground controls function correctly
- [x] No TypeScript or linting errors

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
2025-06-10 14:57:13 +00:00
Zamil Majdy
7165958feb fix(frontend): Fix builder UI glitch (#10139)
There are a few UI bugs on the builder that this PR addresses.

<img width="554" alt="image"
src="https://github.com/user-attachments/assets/1be70197-de7e-40fe-ab11-405c145e763d"
/>

### Changes 🏗️

Fix these UI issues:
* (screenshot attached above) Key-value input width was unintentionally
maxed out due to a stale CSS rule.
* When multiple executions within the same node are running, we pick the
latest status, making one running and one completed execution displayed
as completed.
* No balance errors were executed, only displayed while at least one
node execution was triggered, while this can be done directly when the
execution request is triggered.
* Run & Stop button glitch: it's still showing as stopped when the graph
is still running, this is due to way the UI code tracks execution in the
node-level, instead of graph level.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Manual tests on the described behaviours.
2025-06-10 05:46:18 +00:00
Ubbe
014b276552 feat(platform): allow to signin with Google (#10117)
## Changes 🏗️

<img width="500" alt="Screenshot 2025-06-05 at 16 24 35"
src="https://github.com/user-attachments/assets/ccf51917-68fb-4538-bfd9-7ab8bc8ce33a"
/>
<br /><br />

- Allow users to sign in or sign up with Google (SSO), via Supabase
- Prevent password login or signup with `@agpt.co` emails
- Refactor/simplify the login/signup page logic by splitting rendering
and hook logic (
[explanation](https://github.com/Significant-Gravitas/AutoGPT/pull/10117#discussion_r2128793394)
)

### Moved the `createUser` logic to the callback 

`api.createUser()` was being called **before** the OAuth flow completes.
Here's what's happening. I moved `api.createUser()` from `providerLogin`
to the **callback handler** where the session is established to make
sure it happens once we get the OK from Google session wise.

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  - [ ] Run this PR on a preview
  - [ ] The "Login with Google" button is visible
  - [ ] Login/signup with Google works
- [ ] You can't login or signup with password using an `@agpt.co` email
2025-06-09 14:23:12 +00:00
Ubbe
36634b7ba2 fix(frontend): hydration warning (#10120)
We're encountering a hydration warning on the frontend due to a mismatch
in CSS module hashes. This happens because auto-generated classnames
from `next/font` and `geist` differ between server-side and client-side
rendering. The inconsistency triggers a warning when the client
rehydrates the server-rendered HTML.

![Screenshot 2025-06-05 at 17 20
06](https://github.com/user-attachments/assets/4270f94c-faab-4cad-9c8e-6fd0c27bd4d0)

### Changes 🏗️

Since the mismatch only affects the `<html>` tag and has no visible
impact on the UI, the most straightforward workaround is to suppress the
warning and still take advantage of `next/font` optimisations.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run the frontend locally
  - [x] Page loads without hydration warnings

---------

Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
2025-06-05 17:13:00 +00:00
Reinier van der Leer
781f138c09 feat(backend): Agent Presets backend improvements (#9786)
- Part of #9307

-  Blocks #9541

### Changes 🏗️

Backend:
- Fix+improve `GET /library/presets` (`list_presets`) endpoint
  - Fix pagination
  - Add `graph_id` filter parameter

- Allow partial preset updates: `PUT /presets/{preset_id}` -> `PATCH
/presets/{preset_id}`

- Allow creating preset from graph execution through `POST /presets`

- Clean up models & DB functions
  - Split `upsert_preset` into `create_preset` + `update_preset`
  - Add `LibraryAgentPresetUpdatable`
- Replace `CreateLibraryAgentPresetRequest` with
`LibraryAgentPresetCreatable`
- Use `LibraryAgentPresetCreatable` as base class for
`LibraryAgentPreset`
  - Remove redundant `set_is_deleted_for_library_agent(..)`
  - Improve log statements
  - Improve DB statements (e.g. by using unique keys where possible)

Frontend:
- Add timestamp parsing logic to library agent preset endpoints
- Brand `LibraryAgentPreset.id` + references

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] CI green
- Since these changes don't affect existing front-end functionality, no
additional testing is needed.
2025-06-05 16:11:37 +00:00
Zamil Majdy
2647417e9f feat(executor;frontend): Move output processing step from node executor to graph executor & simplify input beads calculation (#10066)
**Goal**: Allow parallel runs within a single node. Currently, we
prevent this to avoid unexpected ordering of the execution.

### Changes 🏗️

#### Executor changes

We decoupled the node execution output processing, which is responsible
for deciding the next executions from the node executor code.

Currently, `execute_node` does two big things:
* Runs the block’s execute(...) (which yields outputs).
* immediately enqueues the next nodes based on those outputs.

This PR makes:
* execute_node(node_exec) -> stream of (output_name, data). That purely
runs the block and yields each output as soon as it’s available.
* Move _enqueue_next_nodes into the graph executor. So the next
execution is handled serially by the graph executor to avoid concurrency
issues.

#### UI changes

The change on the executor also fixes the behavior of the execution
update to the UI We will report the execution output to the UI as soon
as it is available, not when the node execution is fully completed.
This, however, broke the bread calculation logic that assumes each
execution update will never overlap. So the change in this PR makes the
bead calculation take the overlap / duplicated execution update into
account, and simplify the overall calculation logic.


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Execute this agent and observe its concurrency ordering
  
<img width="1424" alt="image"
src="https://github.com/user-attachments/assets/0fe8259f-9091-4ecc-b824-ce8e8819c2d2"
/>
2025-06-05 16:10:50 +00:00
Ubbe
b900e86c49 fix(profile): account menu layout and alignment (#10113)
<!-- Clearly explain the need for these changes: -->

## Changes 🏗️

### Before

<img width="200" alt="image"
src="https://github.com/user-attachments/assets/8a8e1818-6b8c-4d86-a2b1-a474ba27a6de"
/>

### After

<img width="200" alt="Screenshot 2025-06-05 at 15 26 45"
src="https://github.com/user-attachments/assets/cc28eaeb-626b-46a8-a726-c157b2471ca9"
/>

### Adjustments

- Adjusted the padding account the menu
- Made username display on top of account name nicely
- Both username and account name will be trimmed if they are too long
`...`

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Login
  - [x] Open account menu ( top-right )
  - [x] The alignment of items is right
  - [x] Long usernames are handled nicely
  - [x] Username and display name don't overlap
2025-06-05 12:24:06 +00:00
Zamil Majdy
512ce6d473 fix(frontend): Hide native file input on agent node file input 2025-06-05 13:58:36 +07:00
Reinier van der Leer
47adab575b fix(frontend): Fix login/logout actions; update credentials cache on state change (#10017)
- Resolves #10008

### Changes 🏗️

- Update `useSupabase` hook to propagate auth state changes
- Refresh `CredentialsProvider` whenever the user login state changes
- Add `logOut` callback to `useSupabase` hook that handles (client-side)
logout
- Remove server-side `logout` action: the Supabase reference
implementation does it client-side, and doing both causes a race
condition

Refactorings to aid implementation of the above:
- Move `@/hooks/useSupabase` -> `@/lib/supabase/useSupabase`

Other improvements:
- Clean up `login` server action based on reference implementation
- Make `BackendAPI.isAuthenticated()` more efficient and faster
- Remove unused `ProfileDropdown` component
- Improve logic and debug logging in `tests/pages/login.page.ts`
- Improve playwright test output logging

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - Log out from account (A)
  - Log in to other account (B)
- Open builder, add a block for which account B has (multiple)
credentials
  - [x] Credentials for account B are shown
  - [x] Credentials for account A are *not* shown

  **Note: do not reload the page** while going through these steps
2025-06-04 22:42:31 +00:00
Reinier van der Leer
34009bc749 feat(frontend): Upgrade to Next.js v15 + update config (#10042)
- Resolves #10041

Upgrading to Next v15 isn't trivial, but still a good idea if not simply
necessary.

### Changes 🏗️

- Upgrade Next.js from `v14.2.26` to `v15.3.2`
- Fix usage of now-async APIs `params`, `searchParams`, `headers`
([docs](https://nextjs.org/docs/app/guides/upgrading/version-15#async-request-apis-breaking-change))

- Update Next+TypeScript configs
  - Set build target to ES2022 for better performance
  - Unignore TypeScript build errors
  - Set `hideSourceMaps: false` because OSS FTW :)
  - Remove obsolete `webpack.config.js`

- Fix existing warnings/errors
  - Fix Sentry missing navigation hook warning
- Fix `DYNAMIC_SERVER_USAGE` build error on `/profile` and
`/marketplace`
- Moved `getStoreData` to a proper server action `getMarketplaceData`
  - Fix breaking CSS syntax error in `customnode.css`

- Use Turbopack for faster dev+test build times
- Add separate build step to frontend CI workflow: this also fixes the
test timing out if the build takes too long

Other technical improvements:
- Wrap `handleSortChange` in `MarketplaceSearchPage` in `useCallback`
- Fix typing in `ProfileInfoForm`
- Improve output of frontend tests

> [!NOTE]
> Next prints this error (in dev mode):
> ```
> Error: Route "/marketplace" used `cookies().getAll()`. `cookies()`
should be awaited before using its value. Learn more:
https://nextjs.org/docs/messages/sync-dynamic-apis
>     at Object.getAll (src/lib/supabase/getServerSupabase.ts:16:31)
>     at getAll (../../src/cookies.ts:115:41)
> ...
> ```
> As far as I can see, this isn't breaking, and will become a warning in
prod. See also [the Next docs about this
issue](https://nextjs.org/docs/messages/sync-dynamic-apis)

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Follow the full release QA test script

#### For configuration changes:
- [x] I have included a list of my configuration changes in the PR
description (under **Changes**)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-06-04 15:38:08 +00:00
Ubbe
722c6bcc18 fix(storybook): make font load in Stories (#10081)
### Changes 🏗️

#### Before

<img width="800" alt="Screenshot 2025-06-03 at 16 54 36"
src="https://github.com/user-attachments/assets/2a69b69d-2b01-436e-aab3-8206485a001c"
/>

#### After

<img width="800" alt="Screenshot 2025-06-03 at 16 58 38"
src="https://github.com/user-attachments/assets/4daf41d4-42ce-4119-8e9f-b2b10b524cba"
/>



### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [ ] checkout this branch ( _we should have PR previews for the app and
Storybook_ )
  - [ ] `cd autogpt_platform/frontend`
  - [ ] `yarn storybook`
- [ ] the stories road with the right font ( Poppins ) not a serif one 😄

#### For configuration changes:
- [ ] ~~`.env.example` is updated or already compatible with my
changes~~
- [ ] ~~`docker-compose.yml` is updated or already compatible with my
changes~~
- [ ] ~~I have included a list of my configuration changes in the PR
description (under **Changes**)~~
2025-06-04 15:26:09 +00:00
Ubbe
73a3d980ca chore(frontend): move from yarn1 to pnpm (#10072)
## 🧢 Overview
This PR migrates the AutoGPT Platform frontend from [yarn
1](https://classic.yarnpkg.com/lang/en/) to [pnpm](https://pnpm.io/)
using **corepack** for automatic package manager management.

**yarn1** is not longer maintained and a bit old, moving to **pnpm** we
get:
-  Significantly faster install times,
- 💾 Better disk space efficiency,
- 🛠️ Better community support and maintenance,
- 💆🏽‍♂️  Config swap very easy

##  🏗️ Changes

### Package Management Migration

- updated [corepack](https://github.com/nodejs/corepack) to use
[pnpm](https://pnpm.io/)
- Deleted `yarn.lock` and generated new `pnpm-lock.yaml`
- Updated `.gitignore`

### Documentation Updates

- `frontend/README.md`: 
  - added comprehensive tech stack overview with links
  - updated all commands to use pnpm
  - added corepack setup instructions
  - and included migration disclaimer for yarn users
- `backend/README.md`: 
  - Updated installation instructions to use pnpm with corepack
- `AGENTS.md`: 
  - Updated testing commands from yarn to pnpm

### CI/CD & Infrastructure

- **GitHub Workflows** : 
  - updated all jobs to use pnpm with corepack enable
  - cleaned FE Playwright test workflow to avoid Sentry noise
- **Dockerfile**:
- updated to use pnpm with corepack, changed lock file reference, and
updated cache mount path

###  📋 Checklist

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  
  **Test Plan:**
  > assuming you are on the `frontend` folder 
- [x] Clean installation works: `rm -rf node_modules && corepack enable
&& pnpm install`
  - [x] Development server starts correctly: `pnpm dev`
  - [x] Build process works: `pnpm build`
  - [x] Linting and formatting work: `pnpm lint` and `pnpm format`
  - [x] Type checking works: `pnpm type-check`
  - [x] Tests run successfully: `pnpm test`
  - [x] Storybook starts correctly: `pnpm storybook`
  - [x] Docker build succeeds with new pnpm configuration
  - [x] GitHub Actions workflow passes with pnpm commands

#### For configuration changes:
- [x] `.env.example` is updated or already compatible with my changes
- [x] `docker-compose.yml` is updated or already compatible with my
changes
- [x] I have included a list of my configuration changes in the PR
description (under **Changes**)
2025-06-04 17:07:29 +04:00
Zamil Majdy
0f558876e2 feat(blocks;frontend): Add file multipart upload support for SendWebRequestBlock & Improve key-value input UI rendering (#10058)
Now, SendWebRequestBlock can upload files. To make this work, we also
need to improve the UI rendering on the key-value pair input so that it
can also render media/file upload.

### Changes 🏗️

* Add file multipart upload support for SendWebRequestBlock 
* Improve key-value input UI rendering to allow rendering any types as a
normal input block (it was only string & number).

<img width="381" alt="image"
src="https://github.com/user-attachments/assets/b41d778d-8f9d-4aec-95b6-0b32bef50e89"
/>


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Test running http request block, othe key-value pair input block
2025-06-03 07:55:12 +00:00
Nicholas Tindle
85e108a37a feat(frontend): require passwrods to be min length 12 (#10061)
<!-- Clearly explain the need for these changes: -->
We're doing CASA and this is a requirement

### Changes 🏗️
- Requires new passwords to be min length 12
<!-- Concisely describe all of the changes made in this pull request:
-->

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] test
2025-05-30 15:23:32 +00:00
Bently
692f32a350 fix(platform): Turnstile CAPTCHA reset after failed login attempts (#10056)
Users were unable to retry login attempts after a failed authentication
because the Turnstile CAPTCHA widget was not properly resetting. This
forced users to refresh the entire page to attempt login again, creating
a terrible user experience.

Root Cause: The useTurnstile hook had several critical issues:

- The reset() function only cleared state when shouldRender was true and
widget existed
- Widget ID tracking was unreliable due to intercepting
window.turnstile.render
- Token wasn't being cleared on verification failures
- State wasn't being reset consistently across error scenarios

Changes 🏗️

<!-- Concisely describe all of the changes made in this pull request:
-->

- Fixed useTurnstile hook reset logic: Modified the reset() function to
always clear all state (token, verified, verifying, error) regardless of
shouldRender condition
- Improved widget ID synchronization: Added setWidgetId prop to the
Turnstile component interface and hook for reliable widget tracking
between component and hook
- Enhanced error handling: Updated handleVerify, handleExpire, and
handleError to properly reset tokens on failures
- Updated all auth components: Added setWidgetId prop to all Turnstile
component usages in login, signup, and password reset pages
- Removed unreliable widget tracking: Eliminated the
window.turnstile.render interception approach in favor of explicit
prop-based communication

Checklist 📋
For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- <!-- Put your test plan here: -->
- [x] Test failed login attempt - CAPTCHA resets properly without page
refresh
- [x] Test failed signup attempt - CAPTCHA resets properly without page
refresh
	- [x] Test successful login flow - CAPTCHA works normally
	- [x] Test CAPTCHA expiration - State resets correctly
	- [x] Test CAPTCHA error scenarios - Error handling works properly
2025-05-28 15:21:27 +00:00
Krzysztof Czerwinski
9f2b9d08c9 feat(platform): Add Run 10 agents wallet task (#9937)
### Changes 🏗️

This PR adds `Run 10 agents` step to wallet tasks that can be done by
running any agents 10 times either from Library or Builder (onboarding
agent run also counts).

- Merge `Finish onboarding` and `See results` steps into one in the
wallet
- User is redirected directly to onboarding agent runs in Library after
congrats screen
- Add `RUN_AGENTS` step and `agentRuns` integer to schema and related
migration
- Running agent from Library and Builder increments `agentRuns`
- Open NPS survey popup when 10 agents are run
- Fix resuming onboarding on login when unfinished
- Remove no longer needed `get-results.mp4` tutorial video

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Onboarding can be completed and proper reward is awarded
  - [x] `Run 10 agents` can be completed and reward is awarded
    - [x] When unning different agents and the same agent
    - [x] Running from library and builder counts
  - [x] Onboarding is resumed to last finished step on login
2025-05-28 07:40:52 +00:00
itsababseh
3471781b98 fix(frontend/marketplace): require category selection (#10031)
## Summary
- require categories to be selected in PublishAgent popout

### Changes 🏗️
Makes it require the categories to be set before allowing an agent to be
uploaded
added popup notification to say its missing categories 

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
- [x] Try to upload a agent with out setting categories and it will
error and show message saying "Missing Required Fields, Please fill in:
Categories"
- [x] Now try to upload a agent with the categories set and it will work

Co-authored-by: Bently <Github@bentlybro.com>
2025-05-27 14:57:56 +00:00
Reinier van der Leer
45578136e3 feat(frontend): Page-specific titles (#9995)
- Resolves #8656

Instead of "NextGen AutoGPT", make page titles like "My Test Agent -
Library - AutoGPT Platform", "Settings - AutoGPT Platform", "Builder -
AutoGPT Platform".

### Changes 🏗️

- Add specific page titles to `/library`, `/library/agents/[id]`,
`/build`, `/profile`, `/profile/api_keys`
- Fix page titles on `/marketplace`, `/profile/settings`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Go to `/marketplace` and check the page title
  - [x] Go to `/library` and check the page title
  - [x] Go to `/library/agents/[id]` and check the page title
  - [x] Go to `/build` and check the page title
  - [x] Go to `/profile` and check the page title
  - [x] Go to `/profile/settings` and check the page title
  - [x] Go to `/profile/api_keys` and check the page title
  - [ ] ~~Go to `/profile/dashboard` and check the page title~~
  - [ ] ~~Go to `/profile/integrations` and check the page title~~
  - [ ] ~~Go to `/profile/credits` and check the page title~~
2025-05-25 05:52:51 +00:00
Reinier van der Leer
5518c2e9a2 fix(frontend): Fix global <body> styling and base fonts (#9574)
Base styling currently being fragmented between `layout.tsx` and
`globals.css` is causing some styling (e.g. application background
color) to be incorrectly overridden.

### Changes 🏗️

- Remove background color override from `<body>`
- Move `<body>` classes from `layout.tsx` to `globals.css`
- Remove background color from elements that shouldn't have their own
background color
- Remove `font-neue`, `font-inter`; replace by Geist (`font-sans`) where
necessary

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Effective background color of application is `#FAFAFA` like before
  - [x] Default font is Geist
  - [x] Everything looks okay
2025-05-24 15:25:26 +00:00
ograce1421
61643e6a47 fix(frontend): Top Agents header spacing (#10002)
Changed the section header for "Top Agents" to include a 24px margin. 
I have not tested this, an eng needs to test / look at this

## Summary
- set `margin` default to 24px in `AgentsSection`
- apply the bottom margin via an inline style

## Testing
- `npm test` *(fails: playwright not found)*
- `npm run lint` *(fails: next not found)*


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Test via deployment to the dev branch and verify by designer

---------

Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
2025-05-22 16:12:08 +00:00
Reinier van der Leer
21b4d272ce feat(frontend/library): Replace "Loading..." by loading spinners (#9993)
- Resolves #9992

### Changes 🏗️

- Use `<LoadingBox>` instead of "Loading..." on `/library/agents/[id]`

![2025-05-20 23 26
vivaldi](https://github.com/user-attachments/assets/6fe8ce60-c249-4e4c-b3f1-eea925b003d3)


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] Designer approves based on screencapture
2025-05-22 15:58:32 +00:00
Nicholas Tindle
f8965e530f ref(frontend/admin): fix location of spending page (#9991)
### Changes 🏗️
Moves the route path for spending
drops min

<!-- Concisely describe all of the changes made in this pull request:
-->

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] test locally

---------

Co-authored-by: Bently <Github@bentlybro.com>
2025-05-20 21:43:38 +00:00