## Summary
• Redesigned Human-in-the-Loop review interface with yellow warning
scheme
• Implemented separate approved_data/rejected_data output pins for
human_in_the_loop block
• Added real-time execution status tracking to legacy flow for review
detection
• Fixed button loading states and improved UI consistency across flows
• Standardized Tailwind CSS usage removing custom values
<img width="1500" alt="image"
src="https://github.com/user-attachments/assets/4ca6dd98-f3c4-41c0-a06b-92b3bca22490"
/>
<img width="1500" alt="image"
src="https://github.com/user-attachments/assets/0afae211-09f0-465e-b477-c3949f13c876"
/>
<img width="1500" alt="image"
src="https://github.com/user-attachments/assets/05d9d1ed-cd40-4c73-92b8-0dab21713ca9"
/>
## Changes Made
### Backend Changes
- Modified `human_in_the_loop.py` block to output separate
`approved_data` and `rejected_data` pins instead of single reviewed_data
with status
- Updated block output schema to support better data flow in graph
builder
### Frontend UI Changes
- Redesigned PendingReviewsList with yellow warning color scheme
(replacing orange)
- Fixed button loading states to show spinner only on clicked button
- Improved FloatingReviewsPanel layout removing redundant headers
- Added real-time status tracking to legacy flow using useFlowRealtime
hook
- Fixed AgentActivityDropdown text overflow and layout issues
- Enhanced Safe Mode toggle positioning and toast timing
- Standardized all custom Tailwind values to use standard classes
### Design System Updates
- Added yellow design tokens (25, 150, 600) for warning states
- Unified REVIEW status handling across all components
- Improved component composition patterns
## Test Plan
- [x] Verify HITL blocks create separate output pins for
approved/rejected data
- [x] Test review flow works in both new and legacy flow builders
- [x] Confirm button loading states work correctly (only clicked button
shows spinner)
- [x] Validate AgentActivityDropdown properly displays review status
- [x] Check Safe Mode toggle positioning matches old flow
- [x] Ensure real-time status updates work in legacy flow
- [x] Verify yellow warning colors are consistent throughout
🤖 Generated with [Claude Code](https://claude.ai/code)
---------
Co-authored-by: Lluis Agusti <hi@llu.lu>
## 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 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 🏗️
<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-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
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.
### 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>
### 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**)~~
