feat(route): redesign /project-visualizer with Forge AI-inspired landing#4403
Open
anuragmishrainsights wants to merge 3 commits into
Open
feat(route): redesign /project-visualizer with Forge AI-inspired landing#4403anuragmishrainsights wants to merge 3 commits into
anuragmishrainsights wants to merge 3 commits into
Conversation
- forge.css: dark/technical design tokens (status chips, monospace metrics, bento) - forge/ primitives: StatusBadge, MetricChip, ForgeButton, BentoCard - ForgeFeaturePage: data-driven landing rendering all 5 routes from FEATURES_BY_SLUG - 5 thin wrapper pages (ResumeBuilderForge, ResumeRoastForge, GithubPortfolioForge, ProjectVisualizerForge, MockInterviewForge)
|
CodeAnt AI is reviewing your PR. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Contributor
|
Warning Review limit reached
Next review available in: 59 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
✨ Finishing Touches🧪 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 |
codeant-ai
Bot
added
the
size:XL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| import React from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
| import { FEATURES } from '../../data/featuresConfig'; | ||
| import '../styles/forge.css'; |
There was a problem hiding this comment.
Suggestion: The stylesheet import path is incorrect for this file’s directory depth, so the bundler resolves a non-existent components/styles/forge.css module and the page fails to compile/load. Update the import to point to src/styles/forge.css from components/landing. [import error]
Severity Level: Major ⚠️
- ❌ ForgeToolsSection landing fails to compile when first used.
- ⚠️ Future Forge-style home landing integration blocked by import error.Steps of Reproduction ✅
1. Inspect `frontend/src/components/landing/ForgeToolsSection.jsx` and note the stylesheet
import at line 4: `import '../styles/forge.css';` (verified via BulkRead output).
2. Confirm the actual stylesheet location is `frontend/src/styles/forge.css` (found by
Glob and read via BulkRead), and that no file exists at
`frontend/src/components/styles/forge.css`.
3. Observe existing landing section wiring in `frontend/src/pages/Home.jsx` lines 3–5,
where `OurToolsSection` from `../components/landing/OurToolsSection` is imported and
rendered. When `ForgeToolsSection` is eventually wired in a similar way (imported into a
page and rendered), it becomes part of the bundle.
4. Start the frontend dev server or build with `ForgeToolsSection` imported into a page.
The bundler resolves `../styles/forge.css` relative to `ForgeToolsSection.jsx`, looks for
`frontend/src/components/styles/forge.css`, fails to find it, and emits a “Module not
found: ../styles/forge.css” error, causing that page (and potentially the build) to fail.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/landing/ForgeToolsSection.jsx
**Line:** 4:4
**Comment:**
*Import Error: The stylesheet import path is incorrect for this file’s directory depth, so the bundler resolves a non-existent `components/styles/forge.css` module and the page fails to compile/load. Update the import to point to `src/styles/forge.css` from `components/landing`.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function ProjectVisualizerForge() { | ||
| return <ForgeFeaturePage slug="project-visualizer" />; |
There was a problem hiding this comment.
Suggestion: This replacement makes /project-visualizer render a generic marketing page instead of the previous analyzer entry flow; the old landing was the only UI that called the repo analysis API and routed to the dashboard. With this slug, CTA links resolve back to /project-visualizer itself, so users hit a dead-end and cannot start a new analysis from this route. Keep or reintroduce the analyze-entry behavior (or point CTA to a real analyzer-start route) for this page. [incomplete implementation]
Severity Level: Critical 🚨
- ❌ Project Visualizer users cannot start new repo analyses.
- ❌ Dashboard 'Back to Visualizer' returns to dead-end marketing page.
- ⚠️ Feature CTA loops to same route, confusing navigation.Steps of Reproduction ✅
1. Start the frontend and navigate to `/project-visualizer` in a browser; AppRoutes in
`frontend/src/App.jsx` wires this path as a public feature landing at lines 80–88 and
again at 62–67, where the route `<Route path="/project-visualizer"
element={...<ProjectVisualizerLanding />} />` is defined.
2. In the same file (`frontend/src/App.jsx` lines 26–33 from the imports block),
`ProjectVisualizerLanding` is imported from `./pages/features/ProjectVisualizerForge`, not
from the legacy analyzer entry component in `./pages/ProjectVisualizer/Landing.jsx`,
meaning `/project-visualizer` now renders the Forge landing wrapper instead of the
form-based analyzer UI.
3. `frontend/src/pages/features/ProjectVisualizerForge.jsx` lines 3–4 show that
`ProjectVisualizerForge` simply returns `<ForgeFeaturePage slug="project-visualizer" />`,
and `frontend/src/components/forge/ForgeFeaturePage.jsx` lines 50–58 compute `heroCtaLink`
and `ctaLink` from the `FEATURES_BY_SLUG[slug]` config, then use those links for the
primary hero CTA (line 86) and footer CTA button (line 157).
4. The config for slug `"project-visualizer"` in `frontend/src/data/featuresConfig.js`
lines 186–227 sets `primaryAction.to`, `hero.primaryCta.to`, and `cta.ctaTo` all to
`"/project-visualizer"`, so from the Forge landing, clicking the hero "Analyze a repo" CTA
or the bottom CTA button just routes back to `/project-visualizer` itself, reloading the
same marketing page with no form or API call; meanwhile, the only code that actually
starts an analysis (GitHub URL input and `projectVisualizerApi.analyze(url)` followed by
`navigate(\`/project-visualizer/dashboard/${result.sessionId}\`)` in
`frontend/src/pages/ProjectVisualizer/Landing.jsx` lines 52–72) is no longer connected to
any route (its lazy import `LegacyProjectVisualizerLanding` is unused), so users have no
accessible UI path from `/project-visualizer` to initiate a new analysis session.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/features/ProjectVisualizerForge.jsx
**Line:** 4:4
**Comment:**
*Incomplete Implementation: This replacement makes `/project-visualizer` render a generic marketing page instead of the previous analyzer entry flow; the old landing was the only UI that called the repo analysis API and routed to the dashboard. With this slug, CTA links resolve back to `/project-visualizer` itself, so users hit a dead-end and cannot start a new analysis from this route. Keep or reintroduce the analyze-entry behavior (or point CTA to a real analyzer-start route) for this page.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| import { useAuth } from '../../hooks/useAuth'; | ||
| import { FEATURES_BY_SLUG } from '../../data/featuresConfig'; | ||
| import Seo from '../../components/Seo'; | ||
| import '../styles/forge.css'; |
There was a problem hiding this comment.
Suggestion: The stylesheet path is wrong for this directory depth (components/forge), so this import points to components/styles/forge.css instead of src/styles/forge.css. Fix the relative path so the stylesheet can be resolved. [import error]
Severity Level: Critical 🚨
- ❌ Build fails resolving missing '../styles/forge.css' stylesheet module.
- ⚠️ Forge visual pages cannot apply intended design styling.Steps of Reproduction ✅
1. The `/project-visualizer` route in `frontend/src/App.jsx:260-265` loads
`ProjectVisualizerLanding`, which is lazily imported from
`./pages/features/ProjectVisualizerForge` as configured at `frontend/src/App.jsx:109`.
2. `frontend/src/pages/features/ProjectVisualizerForge.jsx:2-4` renders `ForgeFeaturePage`
from `../../components/forge/ForgeFeaturePage`, so hitting `/project-visualizer` executes
`ForgeFeaturePage`.
3. At `frontend/src/components/forge/ForgeFeaturePage.jsx:6`, the component imports a
stylesheet via `import '../styles/forge.css';` from within the
`frontend/src/components/forge` directory; similarly,
`frontend/src/components/landing/ForgeToolsSection.jsx:4` has the same import from
`frontend/src/components/landing`.
4. The relative `../styles/forge.css` path from these directories resolves to
`frontend/src/components/styles/forge.css`, and a repository-wide search shows no
`forge.css` file under `frontend/src/components/styles/` or anywhere under `frontend/src`
(Glob `frontend/src/**/forge.css` returned no matches), causing the bundler to raise a
module-not-found error for `../styles/forge.css` when compiling or loading the Forge
chunks and blocking the Forge-styled pages from applying their CSS.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 6:6
**Comment:**
*Import Error: The stylesheet path is wrong for this directory depth (`components/forge`), so this import points to `components/styles/forge.css` instead of `src/styles/forge.css`. Fix the relative path so the stylesheet can be resolved.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+7
to
+10
| import StatusBadge from './forge/StatusBadge'; | ||
| import MetricChip from './forge/MetricChip'; | ||
| import ForgeButton from './forge/ForgeButton'; | ||
| import BentoCard from './forge/BentoCard'; |
There was a problem hiding this comment.
Suggestion: The component import paths are incorrect because this file is already inside components/forge, so ./forge/... resolves to a non-existent nested directory. This will fail module resolution and prevent the page from loading. Update these imports to the local sibling paths. [import error]
Severity Level: Critical 🚨
- ❌ /project-visualizer route chunk fails due to import resolution.
- ⚠️ ForgeFeaturePage unusable until component imports are corrected.Steps of Reproduction ✅
1. In `frontend/src/App.jsx:109`, the `ProjectVisualizerLanding` component is lazy-loaded
from `./pages/features/ProjectVisualizerForge`, and the `/project-visualizer` route is
wired to `ProjectVisualizerLanding` at `frontend/src/App.jsx:260-265`.
2. `frontend/src/pages/features/ProjectVisualizerForge.jsx:2-4` imports `ForgeFeaturePage`
from `../../components/forge/ForgeFeaturePage` and renders it with
`slug="project-visualizer"`, so visiting `/project-visualizer` loads `ForgeFeaturePage`.
3. Inside `frontend/src/components/forge/ForgeFeaturePage.jsx:7-10`, the component imports
`StatusBadge`, `MetricChip`, `ForgeButton`, and `BentoCard` using `./forge/StatusBadge`,
`./forge/MetricChip`, `./forge/ForgeButton`, and `./forge/BentoCard`, even though the
actual component files are located directly in
`frontend/src/components/forge/StatusBadge.jsx`, `MetricChip.jsx`, `ForgeButton.jsx`, and
`BentoCard.jsx` and there is no nested `frontend/src/components/forge/forge/` directory
(confirmed by the absence of any files under `/frontend/src/components/forge/forge/*`).
4. When the `/project-visualizer` route chunk is built or loaded, the bundler attempts to
resolve these `./forge/...` imports, fails with `Module not found: Can't resolve
'./forge/StatusBadge'` (and similar errors), and prevents the Project Visualizer Forge
landing from rendering for users.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 7:10
**Comment:**
*Import Error: The component import paths are incorrect because this file is already inside `components/forge`, so `./forge/...` resolves to a non-existent nested directory. This will fail module resolution and prevent the page from loading. Update these imports to the local sibling paths.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix|
|
||
| function Icon({ name, size = 22, strokeWidth = 1.8 }) { | ||
| const d = ICONS[name]; | ||
| if (!d) return null; |
There was a problem hiding this comment.
Suggestion: The icon renderer silently returns nothing for unknown icon names, but featuresConfig contains many icons not defined in ICONS (for example Target, Share, Code, Star, MessageSquare, BookOpen, Search, ListTodo, Bell, Video). This causes missing showcase icons across multiple feature pages. Add the missing icon mappings or provide a fallback icon instead of returning null. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Project visualizer capabilities cards render without configured icons.
- ⚠️ ForgeFeaturePage showcase section appears visually incomplete, inconsistent.Steps of Reproduction ✅
1. Visiting `/project-visualizer` loads `ProjectVisualizerForge` from
`frontend/src/pages/features/ProjectVisualizerForge.jsx:2-4`, which renders
`ForgeFeaturePage` with `slug="project-visualizer"` and therefore pulls the corresponding
config from `frontend/src/data/featuresConfig.js:186-227`.
2. In that config, the `showcase.features` array at `featuresConfig.js:210-215` uses icon
names `Network`, `MessageSquare`, and `BookOpen`, and other feature configs in the same
file declare icons such as `Target`, `Share`, `Code`, `Star`, `Search`, `ListTodo`,
`Bell`, and `Video` in their respective `showcase.features` arrays.
3. `frontend/src/components/forge/ForgeFeaturePage.jsx:12-30` defines the `ICONS` object
with paths only for `FileText`, `Type`, `Github`, `Sparkles`, `BarChart`, `Layout`,
`Linkedin`, `Download`, `Mic`, `Briefcase`, `Flame`, `Network`, `Users`, `Palette`, `Zap`,
`Smartphone`, and `Globe`; when `Icon` is invoked at lines 32-40, it executes `const d =
ICONS[name]; if (!d) return null;`, so any icon name not present in `ICONS` leads to a
null render.
4. The `Capabilities` section of `ForgeFeaturePage` (lines 98-110) maps
`config.showcase.features` into `BentoCard` components using `icon={(p) => <Icon
name={f.icon} {...p} />}`, and `frontend/src/components/forge/BentoCard.jsx:13-18` only
shows the icon if the `Icon` prop returns content; for icons like `MessageSquare` and
`BookOpen`, `Icon` returns null, causing those cards to render without their configured
glyphs and leaving the showcase visually incomplete.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 34:34
**Comment:**
*Incomplete Implementation: The icon renderer silently returns nothing for unknown icon names, but `featuresConfig` contains many icons not defined in `ICONS` (for example `Target`, `Share`, `Code`, `Star`, `MessageSquare`, `BookOpen`, `Search`, `ListTodo`, `Bell`, `Video`). This causes missing showcase icons across multiple feature pages. Add the missing icon mappings or provide a fallback icon instead of returning null.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| </div> | ||
| <div className="forge-nav-actions"> | ||
| {!user && <ForgeButton href="/login" variant="ghost">Sign in</ForgeButton>} | ||
| <ForgeButton to={heroCtaLink} variant="primary">{user ? 'Dashboard' : 'Get started for free'}</ForgeButton> |
There was a problem hiding this comment.
Suggestion: For authenticated users, the primary nav button text is hardcoded to Dashboard but the destination comes from config.primaryAction.to; for project-visualizer that target is the same route (/project-visualizer), so the main CTA becomes a no-op and does not take users to a working dashboard flow. Use a feature-specific label/destination (or special-case this slug) so the action actually navigates somewhere meaningful. [logic error]
Severity Level: Major ⚠️
- ⚠️ Project visualizer nav CTA misdirects to same landing.
- ⚠️ Users lack clear path to visualizer analysis dashboard.Steps of Reproduction ✅
1. An authenticated user navigates to `/project-visualizer`, which is wired in
`frontend/src/App.jsx:260-265` to lazy-load `ProjectVisualizerLanding` from
`./pages/features/ProjectVisualizerForge.jsx` (see alias definition at
`frontend/src/App.jsx:109`).
2. `frontend/src/pages/features/ProjectVisualizerForge.jsx:2-4` renders `ForgeFeaturePage`
with `slug="project-visualizer"`, causing
`frontend/src/components/forge/ForgeFeaturePage.jsx` to read `config =
FEATURES_BY_SLUG[slug];` at line 52, using the entry for slug `project-visualizer` defined
in `frontend/src/data/featuresConfig.js:186-227`.
3. For that slug, the config sets `primaryAction.to` to `/project-visualizer` at line 193
and `hero.primaryCta.to` to `/project-visualizer` at line 205, so the computed
`heroCtaLink` in `ForgeFeaturePage` (line 56) always evaluates to `/project-visualizer`
for both authenticated and unauthenticated users.
4. The top-right nav button at `frontend/src/components/forge/ForgeFeaturePage.jsx:72-75`
renders `<ForgeButton to={heroCtaLink} variant="primary">{user ? 'Dashboard' : 'Get
started for free'}</ForgeButton>`, meaning a logged-in user sees a `Dashboard` label that
simply re-navigates to the same `/project-visualizer` landing instead of the actual
analysis dashboard route `/project-visualizer/dashboard/:sessionId` defined at
`frontend/src/App.jsx:274-281`, resulting in a misleading CTA that does not take users to
a meaningful dashboard or analysis flow.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 74:74
**Comment:**
*Logic Error: For authenticated users, the primary nav button text is hardcoded to `Dashboard` but the destination comes from `config.primaryAction.to`; for `project-visualizer` that target is the same route (`/project-visualizer`), so the main CTA becomes a no-op and does not take users to a working dashboard flow. Use a feature-specific label/destination (or special-case this slug) so the action actually navigates somewhere meaningful.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
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.
User description
What
Redesigns the /project-visualizer route with the Forge design system.
ProjectVisualizerForge(data-driven viaForgeFeaturePage).Depends on
forge/design-system.✅ No merge — raised for review only.
CodeAnt-AI Description
Redesign the feature landing pages with a Forge-style layout and switch /project-visualizer to it
What Changed
Impact
✅ New project visualizer landing experience✅ More consistent feature pages✅ Clearer calls to action on landing pages💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.