feat(frontend): redesign the sign-in screen for the agent workspace positioning - #5386
Conversation
dosubot
Bot
added
the
size:XXL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
📝 WalkthroughWalkthroughThe PR redesigns the authentication experience, remembers the last successful authentication method, promotes returning sign-in options, adds scoped auth styling and display-font configuration, and updates document titles. ChangesAuthentication redesign
Branding titles
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Visitor
participant AuthPage
participant Storage
participant AuthProvider
participant PostAuth
Visitor->>AuthPage: Open authentication page
AuthPage->>Storage: Read last authentication method
Storage-->>AuthPage: Return email or provider id
AuthPage->>AuthProvider: Render promoted authentication option
Visitor->>AuthProvider: Complete authentication
AuthProvider->>PostAuth: Submit authMethod
PostAuth->>Storage: Persist last authentication method
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
web/oss/src/components/pages/auth/RegionSelector/index.tsx (1)
50-50: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace static inline icon sizes with Tailwind utilities.
web/oss/src/components/pages/auth/RegionSelector/index.tsx#L50-L50: replacestyle={{fontSize: 14}}withclassName="text-sm".web/oss/src/components/pages/auth/SideBanner/index.tsx#L22-L22: replacestyle={{fontSize: 13}}withclassName="text-[13px]".As per coding guidelines, “Prefer Tailwind utility classes over CSS-in-JS, separate CSS files, inline styles,
react-jss, orstyled-components.”Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c91b865e-4ec2-49cf-83dc-00be5171d3c6
⛔ Files ignored due to path filters (14)
web/ee/public/assets/fonts/Fraunces-VF.woff2is excluded by!**/*.woff2web/ee/public/assets/logos/Agenta-logo-full-dark-accent.svgis excluded by!**/*.svgweb/ee/public/assets/logos/Agenta-logo-full-dark.svgis excluded by!**/*.svgweb/ee/public/assets/logos/Agenta-logo-full-light.svgis excluded by!**/*.svgweb/ee/public/assets/logos/Agenta-symbol-dark-accent.svgis excluded by!**/*.svgweb/ee/public/assets/logos/Agenta-symbol-dark.svgis excluded by!**/*.svgweb/ee/public/assets/logos/Agenta-symbol-light.svgis excluded by!**/*.svgweb/oss/public/assets/fonts/Fraunces-VF.woff2is excluded by!**/*.woff2web/oss/public/assets/logos/Agenta-logo-full-dark-accent.svgis excluded by!**/*.svgweb/oss/public/assets/logos/Agenta-logo-full-dark.svgis excluded by!**/*.svgweb/oss/public/assets/logos/Agenta-logo-full-light.svgis excluded by!**/*.svgweb/oss/public/assets/logos/Agenta-symbol-dark-accent.svgis excluded by!**/*.svgweb/oss/public/assets/logos/Agenta-symbol-dark.svgis excluded by!**/*.svgweb/oss/public/assets/logos/Agenta-symbol-light.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
web/ee/public/assets/fonts/OFL.txtweb/ee/src/components/Scripts/assets/CloudScripts.tsxweb/oss/public/assets/fonts/OFL.txtweb/oss/src/components/Scripts/GlobalScripts.tsxweb/oss/src/components/pages/auth/EmailFirst/index.tsxweb/oss/src/components/pages/auth/EmailPasswordAuth/index.tsxweb/oss/src/components/pages/auth/EmailPasswordSignIn/index.tsxweb/oss/src/components/pages/auth/RegionSelector/index.tsxweb/oss/src/components/pages/auth/SendOTP/index.tsxweb/oss/src/components/pages/auth/SideBanner/index.tsxweb/oss/src/components/pages/auth/SocialAuth/index.tsxweb/oss/src/components/pages/auth/assets/lastAuthMethod.test.tsweb/oss/src/components/pages/auth/assets/lastAuthMethod.tsweb/oss/src/components/pages/auth/assets/types.d.tsweb/oss/src/hooks/usePostAuthRedirect.tsweb/oss/src/pages/auth/[[...path]].tsxweb/oss/src/pages/auth/callback/[[...callback]].tsxweb/oss/src/styles/auth.cssweb/oss/src/styles/globals.css
Railway Preview Environment
Updated at 2026-07-20T14:51:05.042Z |
|
Updated per review: removed the vendored display font entirely (no decorative font ships in the repo). Headlines now render in Inter by default (weighted so they look intentional), and the display font is an optional deploy-time setting — set |
|
The first Comment image shows the prior light, split-panel sign-in page: “Welcome to Agenta AI” and Google/email controls on the left, plus “Build Robust AI Applications” with a product mockup on the right. The second Comment image shows the updated Inter-based design: a compact “Welcome to Agenta” form, yellow Continue button, and a bordered marketing panel with the “Open source · GitHub” chip, “Build agents that automate your work” headline, and three feature rows.
✅ Action performedReview finished.
|
There was a problem hiding this comment.
🧹 Nitpick comments (3)
web/oss/src/styles/auth.css (1)
12-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer Tailwind utility classes over separate CSS classes.
As per coding guidelines, prefer Tailwind utility classes over CSS-in-JS, separate CSS files, or inline styles. Consider migrating these typography styles directly to the React components using Tailwind utility classes (e.g.,
font-[...] text-[34px] leading-[40px] font-semibold).Source: Coding guidelines
web/oss/src/pages/auth/[[...path]].tsx (2)
439-445: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRender the
<style>content as children.React can safely handle string children inside
<style>tags. This approach clears the static analysis warning by avoidingdangerouslySetInnerHTML.♻️ Proposed refactor
- {displayFontUrl && ( - <style - dangerouslySetInnerHTML={{ - __html: `@font-face{font-family:"Agenta Display";src:url("${displayFontUrl}");font-weight:300;font-display:swap;}`, - }} - /> - )} + {displayFontUrl && ( + <style>{`@font-face{font-family:"Agenta Display";src:url("${displayFontUrl}");font-weight:300;font-display:swap;}`}</style> + )}Source: Linters/SAST tools
429-431: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCondense in-code comments to a single line.
As per coding guidelines, keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints. Please condense or remove these comments if the code is self-explanatory.
web/oss/src/pages/auth/[[...path]].tsx#L429-L431: Condense the entry screen logic comment.web/oss/src/lib/helpers/dynamicEnv.ts#L109-L110: Condense the display font URL comment.Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 81ebd0eb-b3e9-46c0-9069-05d296dc6571
📒 Files selected for processing (5)
web/entrypoint.shweb/oss/src/components/pages/auth/SideBanner/index.tsxweb/oss/src/lib/helpers/dynamicEnv.tsweb/oss/src/pages/auth/[[...path]].tsxweb/oss/src/styles/auth.css
🚧 Files skipped from review as they are similar to previous changes (1)
- web/oss/src/components/pages/auth/SideBanner/index.tsx
mmabrouk
left a comment
mmabrouk
left a comment
There was a problem hiding this comment.
lgtm. should go in the same release with the ui improvements
…e config, default to Inter
|
I really loved the design; it looks refreshing. However, I think it's designed for tech users; you know, the moment they see this they will understand, but what about the non-tech users?? I feel like the jargon will not click for non-tech users. "Build" is a tech word = something that you have to build, something like that Maybe something like this, here the points are still scoped for workspace, if we can go creative on a point that would be helpful. Creative, I mean, like workflow for maybe marketing or for finance people |
- EmailFirst: bind the Input directly to the named Form.Item so the form captures typed email (relative wrapper moved outside for the Last used tag) - auth page: gate the promoted-provider divider so it only renders when something follows - auth page: drop the undeclared icon prop from the SSO buttons and simplify the redundant ssoProvidersToShow copy - RegionSelector/SideBanner: inline font-size styles to Tailwind classes - auth page: font-face style via plain <style> child; condense comments Claude-Session: https://claude.ai/code/session_01LxYUNUysinF3egoKB1CH69
0820a5d to
df0e487
Compare
|
Addressed the CodeRabbit review in |
|
@ashrafchowdury thanks for the feedback. I think however our first ICP is actually technical / semi-technical. They need to understand what an agent it, what automation is, etc.. We might go in the long run to less technical audience, but for the moment we expect a minimum knownledge. This especially true for early adopters, which can't by definition be your lambda users who never used agents. The should ot the minimum have used claude or openai cowork and a parallel platform to be able to navigate ours. Especially since it is still unpolished to some degree, and has technical parts. Second, this is obviously the signup page. The user would have read the website / github readme copy before coming here, and hopefully they are not making the decision at this moment. Thanks again for the feedback, keep it coming. I like btw the copy |
2 participants
The problem
The sign-in / sign-up screen still pitched the old product. The heading said "Welcome to Agenta AI", the sub-line read "Your All-In-One LLM Development Platform. Collaborate on prompts, evaluate, and monitor LLM apps with confidence", the marketing panel talked about "Build Robust AI Applications", and the browser tab said "Agenta: The LLMOps platform." Everything a new or returning user saw first contradicted the new positioning: the open-source workspace for building and running agents.
This is a visual restyle plus one small client-side feature (remembering the last-used sign-in method). No auth behavior changed.
Before / after
The flow
States
The screen now serves new and returning users from one layout: auth form left, marketing panel right. Three states, driven entirely client-side by a remembered last-used method.
What changed
GlobalScriptsand the EECloudScriptstitle strings.localStorage.lastAuthMethod("email"for email flows, otherwise the OIDC provider id). Presence flips the screen into the "Welcome back" state and promotes the last-used method with a yellow keycap + "Last used" tag; absence is the first-visit state. Written through the single sharedhandleAuthSuccessfunnel (covers email password, OTP, and the OAuth callback, where the provider id is derived from the callback path). Generalizes to any configured provider, not just Google/GitHub. Small helper moduleassets/lastAuthMethod.tswith a unit test.shouldShowRegionSelector()) and clicking the other region navigates to the sibling host exactly as before. No "Last used" tag on the pills, and no new region state.Display font
Headlines render in Inter by default on every install — weighted (600) with slightly tighter tracking so they read as an intentional choice, not a fallback. Nothing decorative ships in the repo.
An optional display font is a deploy-time setting: point
NEXT_PUBLIC_AGENTA_DISPLAY_FONT_URL(samedynamicEnv/__env.jsroute as the other frontend config, wired throughentrypoint.sh) at a woff2 and the auth page injects an@font-facefor the"Agenta Display"family and switches the headlines to the lighter display treatment (weight 300). Unset, the family falls through to Inter and no font request is made. Proof that the injection path works, with a font served locally (not committed):Flows preserved unchanged (reskinned only)
Email-first discovery (
POST /auth/discover→ reveal password / OTP / SSO), SSO buttons + auto-redirect, invite flows + the invite-email-mismatch warning, theauth_error=upgrade_requiredalert + org switcher (social still shown, email hidden), Turnstile, and the passwordless-demo pre-sent-OTP jump. These change appearance where they surface, not behavior.QA
Verified live on the EE dev stack at 1440×900 in the default (Inter, no font URL) state:
data-display-font="serif", an@font-faceis injected, the woff2 loads (200), and the headlines compute to weight 300 in the display family. With it unset: no data attribute, no@font-face, no font request, no console error.localStorage.lastAuthMethod = "email"; after sign-out the screen showed the returning "Welcome back" + promoted-email state./auth/discover→ 200).Follow-ups / notes
lastAuthMethod, and its write path is the same sharedhandleAuthSuccessfunnel the email path uses (verified live).socialAvailableis false, leaving residency + email only).