Frontend changes extracted from the hackathon/copilot branch for the
copilot feature development.
### Changes 🏗️
- New Chat system with contextual components (`Chat`, `ChatDrawer`,
`ChatContainer`, `ChatMessage`, etc.)
- Form renderer system with RJSF v6 integration and new input renderers
- Enhanced credentials management with improved OAuth flow and
credential selection
- New output renderers for various content types (Code, Image, JSON,
Markdown, Text, Video)
- Scrollable tabs component for better UI organization
- Marketplace update notifications and publishing workflow improvements
- Draft recovery feature with IndexedDB persistence
- Safe mode toggle functionality
- Various UI/UX improvements across the platform
### 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 new Chat components functionality
- [ ] Verify form renderer with various input types
- [ ] Test credential management flows
- [ ] Verify output renderers display correctly
- [ ] Test draft recovery feature
#### For configuration changes:
- [x] `.env.default` 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**)
---------
Co-authored-by: Lluis Agusti <hi@llu.lu>
## Changes 🏗️
### System credentials in Run Modal
We had the issue that "system" credentials were mixed with "user"
credentials in the run agent modal:
#### Before
<img width="400" height="466" alt="Screenshot 2026-01-14 at 19 05 56"
src="https://github.com/user-attachments/assets/9d1ee766-5004-491f-ae14-a0cf89a9118e"
/>
This created confusion among the users. This "system" credentials are
supplied by AutoGPT ( _most of the time_ ) and a user running an agent
should not bother with them ( _unless they want to change them_ ). For
example in this case, the credential that matters is the **Google** one
🙇🏽
### After
<img width="400" height="350" alt="Screenshot 2026-01-14 at 19 04 12"
src="https://github.com/user-attachments/assets/e2bbc015-ce4c-496c-a76f-293c01a11c6f"
/>
<img width="400" height="672" alt="Screenshot 2026-01-14 at 19 04 19"
src="https://github.com/user-attachments/assets/d704dae2-ecb2-4306-bd04-3d812fed4401"
/>
"System" credentials are collapsed by default, reducing noise in the
Task Credentials section. The user can still see and change them by
expanding the accordion.
<img width="400" height="190" alt="Screenshot 2026-01-14 at 19 04 27"
src="https://github.com/user-attachments/assets/edc69612-4588-48e4-981a-f59c26cfa390"
/>
If some "system" credentials are missing, there is a red label
indicating so, it wasn't that obvious with the previous implementation,
<img width="400" height="309" alt="Screenshot 2026-01-14 at 19 04 30"
src="https://github.com/user-attachments/assets/f27081c7-40ad-4757-97b3-f29636616fc2"
/>
### New endpoint
There is a new REST endpoint, `GET /providers/system`, to list system
credential providers so it is easy to access in the Front-end to group
them together vs user ones.
### Other improvements
#### `<CredentialsInput />` refinements
<img width="715" height="200" alt="Screenshot 2026-01-14 at 19 09 31"
src="https://github.com/user-attachments/assets/01b39b16-25f3-428d-a6c8-da608038a38b"
/>
Use a normal browser `<select>` for the Credentials Dropdown ( _when you
have more than 1 for a provider_ ). This simplifies the UI shennagians a
lot and provides a better UX in 📱 ( _eventually we should move all our
selects to the native ones as they are much better for mobile and touch
screens and less code to maintain our end_ ).
I also renamed some files for clarity and tidied up some of the existing
logic.
#### Other
- Fix **Open telemetry** warnings on the server console by making the
packages external
- Fix `require-in-the-middle` console warnings
- Prettier tidy ups
## 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 app locally and test the above
[OPEN-2743: Ability to Update Sub-Agents in Graph (Without
Re-Adding)](https://linear.app/autogpt/issue/OPEN-2743/ability-to-update-sub-agents-in-graph-without-re-adding)
Updating sub-graphs is a cumbersome experience at the moment, this
should help. :)
Demo in Builder v2:
https://github.com/user-attachments/assets/df564f32-4d1d-432c-bb91-fe9065068360https://github.com/user-attachments/assets/f169471a-1f22-46e9-a958-ddb72d3f65af
### Changes 🏗️
- Add sub-graph update banner with I/O incompatibility notification and
resolution mode
- Red visual indicators for broken inputs/outputs and edges
- Update bars and tooltips show compatibility details
- Sub-agent update UI with compatibility checks, incompatibility dialog,
and guided resolution workflow
- Resolution mode banner guiding users to remove incompatible
connections
- Visual controls to stage/apply updates and auto-apply when broken
connections are fixed
Technical:
- Builder v1: Add `CustomNode` > `IncompatibilityDialog` +
`SubAgentUpdateBar` sub-components
- Builder v2: Add `SubAgentUpdateFeature` + `ResolutionModeBar` +
`IncompatibleUpdateDialog` + `useSubAgentUpdateState` sub-components
- Add `useSubAgentUpdate` hook
- Related fixes in Builder v1:
- Fix static edges not rendering as such
- Fix edge styling not applying
- Related fixes in Builder v2:
- Fix excess spacing for nested node input fields
Other:
- "Retry" button in error view now reloads the page instead of
navigating to `/marketplace`
### 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:
- CI for existing frontend UX flows
- [x] Updating to a new sub-agent version with compatibility issues: UX
flow works
- [x] Updating to a new sub-agent version with *no* compatibility
issues: works
- [x] Designer approves of the look
---------
Co-authored-by: abhi1992002 <abhimanyu1992002@gmail.com>
Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
## Changes 🏗️
Adds the following improvements:
### Prevent credential row overflowing on mobile 📱
**Before**
<img width="300" height="469" alt="Screenshot 2025-12-15 at 16 42 05"
src="https://github.com/user-attachments/assets/0d27394c-cec9-45a4-be82-804827343212"
/>
**After**
<img width="300" height="446" alt="Screenshot 2025-12-15 at 16 44 22"
src="https://github.com/user-attachments/assets/0f19e220-500d-4488-955e-612d38704727"
/>
_Just hide the ****** on mobile..._
### Make touch targets bigger on 📱 on the mobile menu
**Before**
<img width="300" height="607" alt="Screenshot 2025-12-15 at 16 58 28"
src="https://github.com/user-attachments/assets/762b7d4e-5269-41a4-88d2-ea745c50324e"
/>
Touch targets were quite small on mobile, especially for people with big
fingers...
**After**
<img width="300" height="589" alt="Screenshot 2025-12-15 at 16 54 02"
src="https://github.com/user-attachments/assets/beede0c4-5439-47a9-8bec-143b44306c6b"
/>
### New `<OverflowText />` component
<img width="600" height="551" alt="Screenshot 2025-12-15 at 16 48 20"
src="https://github.com/user-attachments/assets/a969223f-dd6a-497a-857e-18483aea28d7"
/>
A component that will render text like `<Text />`, but automatically
displays `...` and the full text content on a tooltip if it detects
there is no space for the full text length. Pretty useful for the type
of dashboard we are building, where sometimes titles or user-generated
content can be quite long, making the UI look whack.
### Google Drive Picker
Only allow the removal of files if it is not in read-only mode.
## 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] Checkout branch locally
- [x] Test the above
<!-- Clearly explain the need for these changes: -->
In the File Widget, the upload button was incorrectly behaving like a
submit button. When users clicked it, the rjsf library immediately
triggered form validation and displayed validation errors, even though
the user was only trying to upload a file.
This happened because HTML buttons inside a form default to
`type="submit"`, which triggers form submission on click. By explicitly
setting `type="button"` on all file-related buttons, we prevent them
from submitting the form while still allowing them to trigger the file
input dialog.
### Changes 🏗️
<!-- Concisely describe all of the changes made in this pull request:
-->
- Added `type="button"` attribute to the clear button in the compact
variant
- Added `type="button"` attribute to the upload button in the compact
variant
- Added `type="button"` attribute to the "Browse File" button in the
default variant
This ensures that clicking any of these buttons only triggers the
intended file selection/upload action without causing unwanted form
validation or submission.
### 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] Tested clicking the upload button in a form with File Widget -
form should not submit or show validation errors
- [x] Tested clicking the clear button - should clear the file without
triggering form validation
- [x] Tested clicking the "Browse File" button - should open file dialog
without triggering form validation
- [x] Verified file upload functionality still works correctly after
selecting a file
## Changes 🏗️
### Adjust layout and styles on mobile 📱
<img width="448" height="843" alt="Screenshot 2025-12-09 at 22 53 14"
src="https://github.com/user-attachments/assets/159bdf4f-e6b2-42f5-8fdf-25f8a62c62d1"
/>
### Make the sidebar cards have contextual actions
<img width="486" height="243" alt="Screenshot 2025-12-09 at 22 53 27"
src="https://github.com/user-attachments/assets/2f530168-3217-47c4-b08d-feccbb9e9152"
/>
Depending on the card type, different type of actions are shown...
### Make buttons in "About agent" card do something
<img width="344" height="346" alt="Screenshot 2025-12-09 at 22 54 01"
src="https://github.com/user-attachments/assets/47181f80-1f68-4ef1-aecc-bbadc7cc9c44"
/>
### Other
- Hide `Schedule` button for agents with trigger run type
- Adjust secondary button background colour...
- Make drawer content scrollable on mobile
## 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 locally and test the above
Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
## Changes 🏗️
<img width="500" height="927" alt="Screenshot 2025-12-08 at 16 30 04"
src="https://github.com/user-attachments/assets/97170302-50ae-4750-99e1-275861ee9e08"
/>
<img width="500" height="897" alt="Screenshot 2025-12-08 at 16 30 10"
src="https://github.com/user-attachments/assets/0a7ac828-ebea-40de-a19e-fbf77b0c2eb7"
/>
Update the new **Run Agent Modal** as a new view. From now on, sections
( inputs, credentials, etc... ) are enclosed. Refactor all the existing
code to be more readable and [adhere to code
conventions](https://github.com/Significant-Gravitas/AutoGPT/blob/master/autogpt_platform/frontend/CONTRIBUTING.md).
### Other improvements
- Refactor `<CredentialInputs />`:
- to adhere to code conventions
- to show all existing credentials for a given provider
- to allow deletion of a given credential
- to allow to select/switch credentials for a given task
- Run Graph Errors:
- when the run fails, show the errors nicely on the toast and link to
the builder for further debugging
- Design System:
- secondary button colour has been updated
- labels size for form fields has been updated
## 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 app locally
- [x] Test the above updates running agents from the new library page
## Changes 🏗️
<img width="800" height="767" alt="Screenshot 2025-12-04 at 17 40 10"
src="https://github.com/user-attachments/assets/37036246-bcdb-46eb-832c-f91fddfd9014"
/>
<img width="800" height="492" alt="Screenshot 2025-12-04 at 17 40 16"
src="https://github.com/user-attachments/assets/ba547e54-016a-403c-9ab6-99465d01af6b"
/>
On the new Agent Library page:
- Implement the new actions sidebar ( main change... )
- Refactor the layout/components to accommodate that
- Implement the missing "Summary" functionality
- Update icon buttons in Design system with new designs
## 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 app locally and test it
<!-- Clearly explain the need for these changes: -->
This PR enhances the FileInput component to support multiple variants
and modes, and integrates it into the form renderer as a file widget.
The changes enable a more flexible file input experience with both
server upload and local base64 conversion capabilities.
### Compact one
<img width="354" height="91" alt="Screenshot 2025-12-03 at 8 05 51 PM"
src="https://github.com/user-attachments/assets/1295a34f-4d9f-4a65-89f2-4b6516f176ff"
/>
<img width="386" height="96" alt="Screenshot 2025-12-03 at 8 06 11 PM"
src="https://github.com/user-attachments/assets/3c10e350-8ddc-43ff-bf0a-68b23f8db394"
/>
## Default one
<img width="671" height="165" alt="Screenshot 2025-12-03 at 8 05 08 PM"
src="https://github.com/user-attachments/assets/bd17c5f1-8cdb-4818-9850-a9e61252d8c1"
/>
<img width="656" height="141" alt="Screenshot 2025-12-03 at 8 05 21 PM"
src="https://github.com/user-attachments/assets/1edf260f-6245-44b9-bd3e-dd962f497413"
/>
### Changes 🏗️
#### FileInput Component Enhancements
- **Added variant support**: Introduced `default` and `compact` variants
- `default`: Full-featured UI with drag & drop, progress bar, and
storage note
- `compact`: Minimal inline design suitable for tight spaces like node
inputs
- **Added mode support**: Introduced `upload` and `base64` modes
- `upload`: Uploads files to server (requires `onUploadFile` and
`uploadProgress`)
- `base64`: Converts files to base64 locally without server upload
- **Improved type safety**: Refactored props using discriminated unions
(`UploadModeProps | Base64ModeProps`) to ensure type-safe usage
- **Enhanced file handling**: Added `getFileLabelFromValue` helper to
extract file labels from base64 data URIs or file paths
- **Better UX**: Added `showStorageNote` prop to control visibility of
storage disclaimer
#### FileWidget Integration
- **Replaced legacy Input**: Migrated from legacy `Input` component to
new `FileInput` component
- **Smart variant selection**: Automatically selects `default` or
`compact` variant based on form context size
- **Base64 mode**: Uses base64 mode for form inputs, eliminating need
for server uploads in builder context
- **Improved accessibility**: Better disabled/readonly state handling
with visual feedback
#### Form Renderer Updates
- **Disabled validation**: Added `noValidate={true}` and
`liveValidate={false}` to prevent premature form validation
#### Storybook Updates
- **Expanded stories**: Added comprehensive stories for all variant/mode
combinations:
- `Default`: Default variant with upload mode
- `Compact`: Compact variant with base64 mode
- `CompactWithUpload`: Compact variant with upload mode
- `DefaultWithBase64`: Default variant with base64 mode
- **Improved documentation**: Updated component descriptions to clearly
explain variants and modes
### 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 FileInput component in Storybook with all variant/mode
combinations
- [x] Test file upload flow in default variant with upload mode
- [x] Test base64 conversion in compact variant with base64 mode
- [x] Test file widget in form renderer (node inputs)
- [x] Test file type validation (accept prop)
- [x] Test file size validation (maxFileSize prop)
- [x] Test error handling for invalid files
- [x] Test disabled and readonly states
- [x] Test file clearing/removal functionality
- [x] Verify compact variant renders correctly in tight spaces
- [x] Verify default variant shows storage note only in upload mode
- [x] Test drag & drop functionality in default variant
## Changes 🏗️
### Design updates
Design updates on the new Library page. New empty views with
illustration and overall changes on the sidebar and selected run
sections...
<img width="800" height="871" alt="Screenshot 2025-12-03 at 14 03 45"
src="https://github.com/user-attachments/assets/6970af99-dda8-4cd8-a9b5-97fe5ee2032e"
/>
<img width="800" height="844" alt="Screenshot 2025-12-03 at 14 03 52"
src="https://github.com/user-attachments/assets/92e6af79-db9f-4098-961f-9ae3b3300ffa"
/>
<img width="800" height="816" alt="Screenshot 2025-12-03 at 14 03 57"
src="https://github.com/user-attachments/assets/7e23e612-b446-4c53-8ea2-f0e2b1574ec3"
/>
<img width="800" height="862" alt="Screenshot 2025-12-03 at 14 04 07"
src="https://github.com/user-attachments/assets/e3398232-e74b-4a06-8702-30a96862dc00"
/>
### Architecture
- Make selected tabs/items synced with the URL via `?activeTab=` and
`?activeItem=`, so it is easy and predictable to change their state...
- Some minor updates on the design system I missed on previous PRs ...
## 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 app locally and check the new page ( still wip )
## Changes 🏗️
Update the new library agent page, empty view to look like:
<img width="900" height="1060" alt="Screenshot 2025-12-01 at 14 12 10"
src="https://github.com/user-attachments/assets/e6a22a4f-35f4-434e-bbb1-593390034b9a"
/>
Now we display an **About this agent** card on the left when the agent
is published on the marketplace. I expanded the:
```
/api/library/agents/{id}
```
endpoint to return as well the following:
```js
{
// ...
created_at: "timestamp",
marketplace_listing: {
creator: { name: "string", "slug": string, id: "string" },
name: "string",
slug: "string",
id: "string"
}
}
```
To be able to display this extra information on the card and link to the
creator and marketplace pages.
Also:
- design system updates regarding navbar and colors
## 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 locally and see the new page for an agent with no runs
## Changes 🏗️
Update tokens of the design system with new values 🖌️🎨
## 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] Storybook build passes, no type errors
## Changes 🏗️
Make sure we can login on preview deployments generated by Vercel to
test Front-end changes. As of now, the Cloudflare CAPTCHA verification
fails, we don't need to have it active there.
### Minor improvements
<img width="1599" height="755" alt="Screenshot 2025-11-06 at 16 18 10"
src="https://github.com/user-attachments/assets/0a3fb1f3-2d4d-49fe-885f-10f141dc0ce4"
/>
Prevent the following build error:
```
15:58:01.507
at j (.next/server/app/(no-navbar)/onboarding/reset/page.js:1:5125)
15:58:01.507
at <unknown> (.next/server/chunks/5826.js:2:14221)
15:58:01.507
at b.handleCallbackErrors (.next/server/chunks/5826.js:43:43068)
15:58:01.507
at <unknown> (.next/server/chunks/5826.js:2:14194) {
15:58:01.507
description: "Route /onboarding/reset couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error",
15:58:01.507
digest: 'DYNAMIC_SERVER_USAGE'
15:58:01.507
}
```
by making the reset onboarding route a client one. I made a new component, `<LoadingSpinner />`, and that page will show it while onboarding it's being reset.
## 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] You can login/signup on the app and use it in the preview URL generated by Vercel
## Changes 🏗️
<img width="800" height="800" alt="Screenshot 2025-11-04 at 23 05 22"
src="https://github.com/user-attachments/assets/ecb3f442-8f1b-4a80-a6c9-0c4b6d5e0427"
/>
New `<Button variant="link" />` for when you need to render an HTML
`<button>` but with our link styles.
## 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] Looks good
## Changes 🏗️
<img width="800" height="547" alt="Screenshot 2025-10-29 at 22 11 35"
src="https://github.com/user-attachments/assets/5c700ddc-d770-48ef-9847-7e652c5dedcb"
/>
<br /><br />
- Use
[`react-currency-input-field`](https://www.npmjs.com/package/react-currency-input-field)
for `<Input type="amount" />` under the hood
- so it formats numbers nicely with `,` and `.`
- Simplify form logic
- Make the popover cover the trigger button when open
- Re-organize imports
- Show a `$` prefix in front of the amount inputs
## 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 the wallet with credits enabled
- [x] Play with the inputs
---------
Co-authored-by: Swifty <craigswift13@gmail.com>
## Changes 🏗️
The onboarding `Run` button is disabled sometimes when an agent
requiring credentials is selected. We think this can be because the
credentials load _async_ by a sub-component ( `<CredentialsInputs />` ),
and there wasn't a way for the parent component to know whether they
loaded or not.
- Refactored **Step 5** of onboarding to adhere to our code conventions
- split concerns and colocated state
- used generated API hooks
- the UI will only render once API calls succeed
- Created a system where ``<CredentialsInputs />` notify the parent
component when they load
- Did minor adjustments here and there
## 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] I will know once I find an agent with credentials that I can
run....
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added visual agent selection card displaying agent details during
onboarding
* Introduced credentials input management for agent configuration
* Added onboarding guidance for initiating agent runs
* **Improvements**
* Enhanced onboarding flow with improved state management
* Refined login state handling
* Adjusted spacing in agent rating display
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Changes 🏗️
<img width="800" height="664" alt="Screenshot 2025-10-14 at 14 09 54"
src="https://github.com/user-attachments/assets/73f6277a-6bef-40f9-b208-31aba0cfc69f"
/>
<img width="600" height="773" alt="Screenshot 2025-10-14 at 14 10 05"
src="https://github.com/user-attachments/assets/c88cb22f-1597-4216-9688-09c19030df89"
/>
Allow to manage on the fly which search terms appear on the Marketplace
page via Launch Darkly dashboard. There is a new flag configured there:
`marketplace-search-terms`:
- **enabled** → `["Foo", "Bar"]` → the terms that will appear
- **disabled** → `[ "Marketing", "SEO", "Content Creation",
"Automation", "Fun"]` → the default ones show
### Small fix
Fix the following browser console warning about `onLoadingComplete`
being deprecated...
<img width="600" height="231" alt="Screenshot 2025-10-14 at 13 55 45"
src="https://github.com/user-attachments/assets/1b26e228-0902-4554-9f8c-4839f8d4ed83"
/>
## 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] Ran the flag locally and verified it shows the terms set on Launch
Darkly
### For configuration changes:
Launch Darkly new flag needs to be configured on all environments.
## Changes 🏗️
### Performance (Onboarding) 🐎
- Moved non-UI logic into `providers/onboarding/helpers.ts` to reduce
provider complexity.
- Memoized provider value and narrowed state updates to cut unnecessary
re-renders.
- Deferred non-critical effects until after mount to lower initial JS
work.
**Result:** faster initial render and smoother onboarding flows under
load.
### Layout and overflow fixes 📐
- Replaced `w-screen` with `w-full` in platform/admin/profile layouts
and marketplace wrappers to avoid 100vw scrollbar overflow.
- Adjusted mobile navbar position (`right-0` instead of `-right-4`) to
prevent off-viewport elements.
**Result:** removed horizontal scrolling on Marketplace, Library, and
Settings pages; Build remains unaffected.
### New Generic Error pages
- Standardized global error handling in `app/global-error.tsx` for
consistent display and user feedback.
- Added platform-scoped error page(s) under `app/(platform)/error` for
route-level failures with a consistent layout.
- Improved retry affordances using existing `ErrorCard`.
## 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] Verify onboarding flows render faster and re-render less (DevTools
flamegraph)
- [x] Confirm no horizontal scrolling on Marketplace, Library, Settings
at common widths
- [x] Validate mobile navbar stays within viewport
- [x] Trigger errors to confirm global and platform error pages render
consistently
### For configuration changes:
None
### Changes 🏗️
This PR introduces a new high-performance builder interface for the
AutoGPT platform, implementing a React Flow-based visual editor with
optimized state management and rendering.
#### Key Changes:
1. **New Flow Editor Implementation**
- Built on React Flow for efficient graph rendering and interaction
- Implements a node-based visual workflow builder with custom nodes and
edges
- Dynamic form generation using React JSON Schema Form (RJSF) for block
inputs
- Intelligent connection handling with visual feedback
2. **State Management Optimization**
- Added Zustand for lightweight, performant state management
- Separated node and edge stores for better data isolation
- Reduced unnecessary re-renders through granular state updates
3. **Dual Builder View (Temporary)**
- Added toggle between old and new builder implementations
- Allows A/B testing and gradual migration
- Feature flagged for controlled rollout
4. **Enhanced UI Components**
- Custom form widgets for various input types (date, time, file, etc.)
- Array and object editors with improved UX
- Connection handles with visual state indicators
- Advanced mode toggle for complex configurations
5. **Architecture Improvements**
- Modular component structure for better code organization
- Comprehensive documentation for the new system
- Type-safe implementation with TypeScript
#### Dependencies Added:
- `zustand` (v5.0.2) - State management
- `@rjsf/core` (v5.22.8) - JSON Schema Form core
- `@rjsf/utils` (v5.22.8) - RJSF utilities
- `@rjsf/validator-ajv8` (v5.22.8) - Schema validation
### Performance Improvements 🚀
- **Reduced Re-renders**: Zustand's shallow comparison and selective
subscriptions minimize unnecessary component updates
- **Optimized Graph Rendering**: React Flow provides efficient
canvas-based rendering for large workflows
- **Lazy Loading**: Components are loaded on-demand reducing initial
bundle size
- **Memoized Computations**: Heavy calculations are cached to avoid
redundant processing
### Test Plan 📋
#### 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 Checklist:
- [x] Create a new agent from scratch with at least 5 blocks
- [x] Connect blocks and verify connections render correctly
- [x] Switch between old and new builder views
- [x] Test all form input types (text, number, boolean, array, object)
- [x] Verify data persistence when switching views
- [x] Test advanced mode toggle functionality
- [x] Performance test with 50+ blocks to verify smooth interaction
### Migration Strategy
The implementation includes a temporary toggle to switch between the old
and new builder. This allows for:
- Gradual user migration
- A/B testing to measure performance improvements
- Fallback option if issues are discovered
- Collecting user feedback before full rollout
### Documentation
Comprehensive documentation has been added:
- `/components/FlowEditor/docs/README.md` - Architecture overview and
store management
- `/components/FlowEditor/docs/FORM_CREATOR.md` - Detailed form system
documentation
---------
Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
Co-authored-by: Claude <noreply@anthropic.com>
## Changes 🏗️
Moving non-design-system components ( old ) to a `components/__legacy__`
folder 📁 so like this is more obvious for developers that they should
not import them or use them on new features. What is now top-level in
`/components` is what it is actively maintained.
Document some existing components like `<Alert />`. More on this coming
on follow-up PRs.
## 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 and types pass on the CI
- [x] Run app locally, click around, looks good
### For configuration changes:
None
## Changes 🏗️
Following up my initial PR to tidy up the `components` folder
https://github.com/Significant-Gravitas/AutoGPT/pull/10940.
This is mostly moving files around and renaming some + documenting them
on the design system as needed. Should be pretty safe as long as types
on the CI pass.
## 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 app locally
- [x] Click around, looks ok
- [x] Test and types pass on the CI
### For configuration changes:
None
## Changes 🏗️
Implements all the following changes...
1. The margins between the runs, on the left hand side.. reduced them
around `6px` ?
2. Make agent inputs full width
3. Make "Schedule setup" section displayed in a second modal
4. When an agent is running, we should not show the "Delete agent"
button
5. Copy changes around the actions for agent/runs
6. Large button height should be `52px`
7. Fix margins between + New Run button and the runs & scheduled menu
8. Make border white on cards
Also...
- improve the naming of some components to reflect better their
context/usage
- show on the inputs section when an agent is using already API keys or
credentials
- fix runs/schedules not auto-selecting once created
## 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 app locally with the new agent runs page enabled
- [x] Test the above
### For configuration changes:
None
## Changes 🏗️
<img width="800" height="630" alt="Screenshot 2025-09-12 at 17 38 34"
src="https://github.com/user-attachments/assets/103d7e10-e924-4831-b0e7-b7df608a205f"
/>
<img width="800" height="524" alt="Screenshot 2025-09-12 at 17 38 30"
src="https://github.com/user-attachments/assets/aeec2ac7-4bea-4ec9-be0c-4491104733cb"
/>
<img width="800" height="750" alt="Screenshot 2025-09-12 at 17 38 26"
src="https://github.com/user-attachments/assets/e0b28097-8352-4431-ae4a-9dc3e3bcf9eb"
/>
- All the `Delete` actions on the new Agent Library Runs page should be
behind confirmation dialogs
- Re-arrange the file structure a bit 💆🏽
- Make the buttons min-width a bit more generous
## 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 app locally
- [x] Test the above
#### For configuration changes:
None
## Changes 🏗️
I think this helps `next/image` being more tolerant when optimising
images from certain origins according to Claude.
## 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] Deploy preview to dev
- [x] Verify avatar images load better
### For configuration changes:
None
## Changes 🏗️
<img width="800" height="648" alt="Screenshot 2025-09-10 at 22 00 01"
src="https://github.com/user-attachments/assets/eb396d62-01f2-45e5-9150-4e01dfcb71d0"
/><br />
Adds a new `<Avatar />` component and uses that across the app. Is a
copy of
[shadcn/avatar](https://duckduckgo.com/?q=shadcn+avatar&t=brave&ia=web)
with the following modifications:
- renders images with
[`next/image`](https://duckduckgo.com/?q=next+image&t=brave&ia=web) by
default
- this ensures avatars rendered on the app are optimised and resized ✔️
- it will work as long as all the domains are white-listed in
`nextjs.config.mjs`
- allows to bypass and use a normal `<img />` tag via an `as` prop if
needed
- sometimes we might need to render images from a dynamic cdn 🤷🏽♂️
## 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] ...
### For configuration changes:
None
## Changes 🏗️
<img width="400" height="821" alt="Screenshot 2025-08-28 at 23 57 41"
src="https://github.com/user-attachments/assets/f5f7c0a6-0b87-4c1f-b644-3ee2ddd1db95"
/>
<img width="400" height="822" alt="Screenshot 2025-08-28 at 23 57 47"
src="https://github.com/user-attachments/assets/120dbb60-d9e1-4a4a-a593-971badb4a97a"
/>
This is the final piece of work on the new **Run Agent Modal**... It is
all behind a feature flag so I'm relatively comfortable is safe. The
idea is to test with the team once it lands into dev to try different
combinations of agent inputs / credentials and schedules...
I have moved and tied a lot of the original logic around running agents.
Mostly importantly, I have made all the dynamic inputs adhere to the
design system.
### AI changes summary
- Allow to run schedules in the main modal body
- Integrate and tidy old logic around dynamic run agent inputs
- Integrate and tidy old logic around credentials inputs
- Refactor: `<TypeBasedInputs />` to use Design System components
(`atoms/Input`, `atoms/Select`, `molecules/MultiToggle`, and native
date/time picker via `<Input />` using the browser's date picker )
- Added support for `type="date"` and `type="datetime-local"` to `<Input
/>` ( _for the above_ )
- On the `<Select />` component:
- added `size` prop (`small` | `medium`).
- added rich items: `icon`, `disabled`, `separator`, `onSelect`, and
`renderItem` prop.
- stories updated/added for size variants, icons/separators, and custom
rendering.
- Added and documented to the design system:
- `molecules/TimePicker` + story.
- `atoms/FileInput`: added `accept` and `maxFileSize` props; story
documents constraints.
- `atoms/Progress` stories (Basic, CustomMax, Sizes, Live) with
fixed-width container.
- `atoms/Switch` stories (Basic, Disabled, WithLabel).
- `molecules/Dialog` story: Modal-over-Modal example.
## 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] Open Storybook and verify new/updated stories render correctly.
- [x] In app, validate modals open/close correctly using DS `Dialog`.
- [x] Validate DS Select rich items (icon, separator, disabled, action)
behave as expected.
- [x] Run lints and ensure no errors.
- [x] Manually test File upload constraints (type/size) and progress.
### For configuration changes:
None
## Changes 🏗️
<img width="600" height="624" alt="Screenshot 2025-08-25 at 23 22 24"
src="https://github.com/user-attachments/assets/a66b0a02-cb7a-47f3-8759-e955fb76f865"
/>
<img width="600" height="748" alt="Screenshot 2025-08-25 at 23 22 40"
src="https://github.com/user-attachments/assets/0357bd0b-9875-41a4-8752-d7dbc7a82ff6"
/>
The new **Agent Run Modal**, to be used when running agents. This is PR
1/2 ( _as I learned there is so much into running agents_ 🔮 ). The first
part sets up "the easy things":
- the run view
- the schedule run view
- the switch between them
- the agent details
On the next PR, I will add support for the current agent run inputs (
[and all their
types...](https://github.com/Significant-Gravitas/AutoGPT/blob/dev/autogpt_platform/frontend/src/components/type-based-input.tsx)
😆 ) + webhook triggers...
## 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] with the flag ON ( is now OFF in dev but ON local )
- [x] clicking `New Run` on the new library page shows the new modal
- [x] Details are shown on the modal header
- [x] Agent details are shown
- [x] You can schedule runs
### For configuration changes:
None
---------
Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
## Changes 🏗️
- Moved API call from `usePublishAgentModal` to `useAgentInfoStep` for
better encapsulation
- overall cleaner state management + [state
colocation](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster)
- Added loading states with a spinner to the submit button during API
call
- Removed redundant validation: now relies entirely on zod schema
validation
- All thumbnails now use 16:9 (`aspect-video`) aspect ratio for
consistency
- Highlight selected thumbnails with blue border
- Table alignment fixes
- Rename `Edit` action to `View` to better reflect the content of the
modal that appears when clicked...
## 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] API calls work with loading states in Agent Info Step
- [x] Image aspect ratios are consistent across all components
- [x] Form validation works through zod schema only
### For configuration changes:
None
## Changes 🏗️
### Why these changes
We have a high-priority bug where the publish agent modal wouldn't open
when clicking `Edit` on the Dashboard Creator page table. The create
form was also buggy.
When looking into the code, I noticed it was pretty messy. I went ahead
and refactored it:
- [x] separation of concerns ( _split render / hook logic_ )
- [x] split into sub-components ( `PublishAgentModal/components` )
- [x] colocated state ( moved state to the modal steps rather than
having everything top-level )
- [x] used the new Design System components
Overall, we end up with a cleaner and stable experience ✨
### E2E tests
I also added E2E tests 🤖 to make sure we catch regressions in the future
in this modal. For now, it tests the first 2 steps. It does not do image
upload and publish as that wasn't working locally ( _might iterate on
that later_ )
### Step 1 – Select Agent
<img width="1161" height="859" alt="Screenshot 2025-07-29 at 16 12 46"
src="https://github.com/user-attachments/assets/a4949fb0-1a44-4926-a374-51eefadef063"
/>
### Step 2 – Agent Info Form
<img width="1061" height="804" alt="Screenshot 2025-07-29 at 16 03 11"
src="https://github.com/user-attachments/assets/b9a45bda-18ea-4844-b52c-db499f45193e"
/>
### Step 3 – Agent Review
<img width="1480" height="867" alt="Screenshot 2025-07-29 at 16 11 07"
src="https://github.com/user-attachments/assets/248bdf58-886d-43f3-a37a-35fd1a83e566"
/>
## 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] open the modal through the Account menu → ( `Publish Agent` )
- [x] complete the form and check validation errors
- [x] add images and generate image
- [x] publish the agent
- [x] the agent shows up on the table
- [x] Open an agent under review in the table ( _click `Edit` on the
actions_ )
- [x] it opens the modal on the 3rd step ( _review step_ )
### For configuration changes:
None
---------
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
## Changes 🏗️
There is a bug where the agent activity dropdown bubble only shows up to
`6` even if there are `50 running agents`. We only display the last 6
runs in the dropdown, but the bubble badge count should show the correct
all running agents.
On top of that we added the option to search runs by agent name when you
have more than 6 recent runs:
https://github.com/user-attachments/assets/931e3db7-5715-48d1-b4df-22490fae9de0
- Also make the dropdown items a link ( `a` ) so that you can command
click them to open runs in new tabs.
- Keep up to `400` executions on the state ( worse case load test )
- Each execution object is relatively small (ID, status, timestamps,
agent info)
- 400 objects × ~`1KB` each = negligible memory footprint `400kb`
- Always display running agents at the top
- Only display runs from the last week on the dropdown
- the agent library page contains the historical runs, this is just to
show the recent ones
### Code changes
- **Added count tracking**
- the `NotificationState` interface now includes separate count fields
(`activeCount`, `recentCompletionsCount`, `recentFailuresCount`) to
track the actual numbers independent of display limits.
- **Dual array system:**
- the `categorizeExecutions` function now creates:
- unlimited arrays for counting all executions
- limited arrays (sliced to 6 items) for dropdown display
- Updated all helper functions to properly maintain both the display
arrays and the count fields.
- Component uses actual counts
- `<AgentActivityDropdown />` component now uses `activeCount` for the
badge and hover hint instead of `activeExecutions.length`
## 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 and navigate to library or build
- [x] Start running agents like there is no tomorrow
- [x] The badge shows the correct agent execution count ( .i.e 10 )
- [x] The dropdown only displays the 6 most recent
- [x] You can command click on the runs and they open in new tabs
### For configuration changes
None
## Changes 🏗️
<img width="800" alt="Screenshot 2025-07-07 at 13 16 44"
src="https://github.com/user-attachments/assets/0d404958-d4c9-454d-b71a-9dd677fe0fdc"
/>
<img width="800" alt="Screenshot 2025-07-07 at 13 17 08"
src="https://github.com/user-attachments/assets/1142f6d5-a6af-485d-b42e-98afd26de3ed"
/>
Update the UI of the logged-out pages ( _login, signup,
reset-password..._ ) using the new Design System components, so the app
starts to look a bit more cohesive 💆🏽
Some notes:
- I refactored the `<AuthCard />` components a bit to be easier to use
- I split the render from hook login on login/signup
- I added a couple of modals to improve the UX when logging in with
Google or using non-whitelisted emails
- _see below my comments for more context_
- When there are API errors, they are shown in a toast to prevent the
layout of the form from jumping
- When using the components in the UI, an issue with border-radius, see
comments for an explanation
## 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] Logout on the platform
- [x] Check the updated Login/Signup/Reset password pages
- [x] The UI looks good and is consistent
- [x] The forms work as expected
## Changes 🏗️
<img width="900" height="327" alt="Screenshot 2025-07-10 at 20 12 38"
src="https://github.com/user-attachments/assets/044f00ed-7e05-46b7-a821-ce1cb0ee9298"
/>
<br /><br />
Navbar updated to look pretty from the new designs:
- the logo is now centred instead of on the left
- menu items have been updated to a smaller font-size and less radius
- icons have been updated
I also generated the API files ( _sorry for the noise_ ). I had to do
some border-radius and button updates on the atoms/tokens for it to look
good.
## 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/logout
- [x] The new navbar looks good across screens
## For configuration changes
No config changes
## 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
## 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
## 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
### Changes 🏗️
- 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_ )
