[feat] Add a 404 page across oss, ee and mobile - #6360
Merged
Conversation
The app had no 404 of its own, so an unknown route fell through to Next's stock page — and signed out, the auth guard redirected it to sign-in before anyone saw anything at all. NotFoundScreen lives in @agenta/auth-ui beside AuthShell: it is the other surface a signed-out visitor lands on, and it is built from the same scoped auth.css tokens, so all three hosts render one page from thin route shells. The brand SVGs move into the package too (inline, because the mobile app's /m basePath breaks a bare public/ asset path), which lets mobile's AgentaLogo drop its duplicate copy of the path data. Two routing guards learn about /404, both keyed off Next's matched route rather than the parsed URL — the app's location snapshot only ever holds the literal address, so a bad path like /typo never reads as "/404": - Layout renders it bare, outside the app shell and ProtectedRoute. The check sits in the component on useRouter, not in layoutRouteFlagsAtom: that atom recomputes only when the URL snapshot changes, which leaves the flag stale on the hop off a 404 back into the app. - The signed-out redirect in state/url/auth.ts exempts it, so a bad link explains itself instead of bouncing to sign-in.
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (5)
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review. 📝 WalkthroughSummary by CodeRabbit
WalkthroughThe change adds a shared 404 screen and brand components to ChangesShared 404 experience
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: 🟡 Moderate · up to The PR adds branded 404 handling across the web and mobile apps, but it is not fully merge-ready while signed-out client-side navigation can still potentially send visitors to sign-in instead of the 404 page, and the new brand colors may bypass the shared theme palette and cause inconsistent styling. Sequence Diagram(s)sequenceDiagram
participant Browser
participant NextRouter
participant AuthState
participant Layout
participant NotFoundPage
participant NotFoundScreen
Browser->>NextRouter: request invalid route
NextRouter->>AuthState: expose matched pathname /404
AuthState->>AuthState: allow signed-out 404 rendering
NextRouter->>Layout: provide pathname /404
Layout->>NotFoundPage: render without app shell
NotFoundPage->>NotFoundScreen: pass failed path and back handler
NotFoundScreen-->>Browser: render 404 screen
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: cfeda633-06ca-4ba9-a417-1cda37ae21a8
📒 Files selected for processing (10)
web/ee/src/pages/404.tsxweb/mobile/src/components/AgentaLogo.tsxweb/mobile/src/pages/404.tsxweb/oss/src/components/Layout/Layout.tsxweb/oss/src/pages/404.tsxweb/oss/src/state/url/auth.tsweb/packages/agenta-auth-ui/src/AgentaBrand.tsxweb/packages/agenta-auth-ui/src/NotFoundScreen.tsxweb/packages/agenta-auth-ui/src/auth.cssweb/packages/agenta-auth-ui/src/index.ts
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.
Review pass: the repo caps in-code comments at one short line. The multi-line inline comments and the longer file docblocks added with the 404 page are cut back to the point each one was making.
Member
|
hhh love the design |
mmabrouk
approved these changes
Aug 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The app had no 404 page of its own. An unknown URL fell through to Next's stock page, which carries no branding and no way back.
Signed out it was worse. The auth guard in
state/url/auth.tsredirects any unmatched path to sign-in, so/typobecame/auth?redirectToPath=/typo. The visitor never learned the link was dead. They just got asked to log in.Changes
NotFoundScreenlives in@agenta/auth-ui, besideAuthShell. It is the other surface a signed-out visitor lands on, and it is built from the same scopedauth.csstokens (the page ground, the yellow keycap, the surface button), so it adds no colour of its own. All three hosts render it from thin route shells: oss, a two-line re-export for ee, and a<Head>wrapper for mobile.The brand SVGs move into the package as
AgentaBrand.tsx. They have to be inline because the mobile app's/mbasePath breaks a bare<img src="/assets/...">, and a package ships no assets of its own. That letsmobile/src/components/AgentaLogo.tsxdrop its duplicate copy of the path data and re-export the shared one.Two routing guards learn about
/404. Both read Next's matched route, not the parsed URL, because the app's location snapshot only ever holds the literal address.Before:
After:
Layoutrenders it bare, outside the app shell and outsideProtectedRoute.In
Layoutthe check sits in the component onuseRouter, not inlayoutRouteFlagsAtom. That atom recomputes only when the URL snapshot changes, andsyncAppLocationskips itsstore.setwhen the location signature is unchanged. Putting the check there left the flag stuck attrueon the hop off a 404 back into the app, which rendered real pages with no sidebar and noProtectedRoute.One more detail worth knowing: Next prerenders
/404, whereasPathis the literal string"/404"rather than the address the visitor asked for. The failed path in the footer therefore renders only after mount, or it hydrates against different text.Tests
types:checkand lint pass for@agenta/auth-ui,@agenta/oss,@agenta/eeand@agenta/mobile.:3001and on/mat:3000, both light and dark. No hydration warnings in the mobile console./404, a client-side push to/wwhile signed out still redirects to/auth./404) needs a local backend, which was not running. The fix is reactive by construction but untested against a real session.Demo
Captures exist from the running ee and mobile apps in both themes. They still need attaching to this PR.
What to QA
/nope. You get the 404 page, not the sign-in screen.Agenta-AI/agenta/issuesin the same tab./m/nopeon a phone viewport. Same page, and the "404" block fits without a horizontal scrollbar./w. You still get redirected to/auth.PReview