Conversation
Deploying voltagent with
|
| Latest commit: |
8556fe9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3ba7babb.voltagent.pages.dev |
| Branch Preview URL: | https://add-pricing-page.voltagent.pages.dev |
This comment has been minimized.
This comment has been minimized.
|
📝 WalkthroughWalkthroughAdded a top-level "Pricing" nav link and mobile menu entry; fully rewrote the pricing page into a data-driven, dark-themed layout with tiered cards, comparison data, and FAQ; replaced comparison icons and migrated table markup to inline styles; updated the Pricing Calculator modal (ranges, costs, accessibility, styling). Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant PricingPage as Pricing Page
participant Navbar as Navbar
participant Modal as Pricing Calculator Modal
participant PricingLogic as Pricing Logic
User->>Navbar: click "Pricing" (or navigate)
Navbar->>PricingPage: route to /pricing
PricingPage->>User: render cards, comparison table, FAQ
User->>PricingPage: click "Open Calculator"
PricingPage->>Modal: mount modal
User->>Modal: select plan / adjust slider
Modal->>PricingLogic: compute breakdown (planConfig, traces)
PricingLogic->>Modal: return costs (base, included, overage, total)
Modal->>User: display updated cost breakdown
User->>Modal: close modal
Modal->>PricingPage: unmount modal
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 6 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="website/src/components/console/PricingCalculatorModal.tsx">
<violation number="1" location="website/src/components/console/PricingCalculatorModal.tsx:156">
P2: When switching plans, `traceCount` can remain above the new max (e.g., 500k on Pro → Core max 100k), so the slider position no longer matches the displayed usage/cost. Clamp `traceCount` on plan changes to keep the UI and cost calculation consistent.</violation>
</file>
<file name="website/src/pages/pricing.tsx">
<violation number="1" location="website/src/pages/pricing.tsx:466">
P2: `window.open` to external URLs should include `noopener,noreferrer` to prevent reverse‑tabnabbing.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
website/src/components/console/PricingCalculatorModal.tsx (1)
11-19:⚠️ Potential issue | 🟡 MinorClamp trace count when switching plans to avoid stale overage totals.
If a user switches from Pro to Core with a high trace count, the slider visually clamps but cost math still uses the stale value. Consider clamping
traceCountwhenselectedPlanchanges and reuse a sharedmaxTracesvalue.🛠️ Suggested fix
-import { useState } from "react"; +import { useEffect, useState } from "react"; const PricingCalculatorModal = ({ isOpen, onClose }: PricingCalculatorModalProps) => { const [traceCount, setTraceCount] = useState<number>(10000); const [selectedPlan, setSelectedPlan] = useState<"core" | "pro">("core"); + const maxTraces = selectedPlan === "core" ? 100000 : 500000; + + useEffect(() => { + setTraceCount((current) => Math.min(current, maxTraces)); + }, [maxTraces]); @@ - max={selectedPlan === "core" ? 100000 : 500000} + max={maxTraces} @@ - background: `linear-gradient(to right, `#ffffff` 0%, `#ffffff` ${ - (traceCount / (selectedPlan === "core" ? 100000 : 500000)) * 100 - }%, `#2b2d2f` ${(traceCount / (selectedPlan === "core" ? 100000 : 500000)) * 100}%, `#2b2d2f` 100%)`, + background: `linear-gradient(to right, `#ffffff` 0%, `#ffffff` ${ + (traceCount / maxTraces) * 100 + }%, `#2b2d2f` ${(traceCount / maxTraces) * 100}%, `#2b2d2f` 100%)`,Also applies to: 156-166
website/src/pages/pricing.tsx (1)
760-767:⚠️ Potential issue | 🟠 MajorFAQ headers are not keyboard-focusable.
The clickable FAQ header is a plain
divwithoutrole/tabIndex, so keyboard users can’t toggle it. Addrole="button",tabIndex={0},aria-expanded, and prevent default for Space.♿ Suggested fix
- <div + <div + role="button" + tabIndex={0} + aria-expanded={openFAQ === index} onClick={() => toggleFAQ(index)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); toggleFAQ(index); } }} className="w-full text-left p-6 landing-xs:p-3 landing-sm:p-5 flex items-center justify-between focus:outline-none focus:bg-zinc-800/30 hover:bg-zinc-800/30 transition-colors cursor-pointer" >
🤖 Fix all issues with AI agents
In `@website/docusaurus.config.ts`:
- Around line 668-672: The site has a new nav entry with to: "/pricing" and
label: "Pricing" but an existing redirect rule still maps "/pricing/" to "/"
which, with trailingSlash: true, will redirect users away from the new page;
locate the redirect that maps "/pricing/" -> "/" and either remove it or update
its target to the new pricing path (or normalize to "/pricing/" as appropriate)
so the nav item (to: "/pricing", label: "Pricing") is not overridden by the
redirect.
In `@website/src/components/console/PricingCalculatorModal.tsx`:
- Around line 108-138: The keyboard handlers for elements using role="button"
(e.g., the plan card handlers that call setSelectedPlan in the onKeyDown
callbacks) must call e.preventDefault() when the Space key is pressed to avoid
the page scrolling; update the onKeyDown callbacks for those plan divs (and any
other custom button divs like the close and action buttons) to check for e.key
=== " " or e.code === "Space" and call e.preventDefault() before invoking
setSelectedPlan or the respective action, ensuring keyboard activation still
occurs while preventing default scrolling behavior.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/pages/pricing.tsx (1)
768-785:⚠️ Potential issue | 🟠 MajorFAQ toggle is not keyboard-accessible: missing
roleandtabIndex.The FAQ toggle div has
onClickandonKeyDownhandlers but lacksrole="button"andtabIndex={0}. Without these, keyboard users cannot focus the element, making the FAQ section inaccessible via keyboard navigation.♿ Proposed fix
<div onClick={() => toggleFAQ(index)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); toggleFAQ(index); } }} + role="button" + tabIndex={0} className="w-full text-left p-6 landing-xs:p-3 landing-sm:p-5 flex items-center justify-between focus:outline-none focus:bg-zinc-800/30 hover:bg-zinc-800/30 transition-colors cursor-pointer" >
🤖 Fix all issues with AI agents
In `@website/src/pages/pricing.tsx`:
- Around line 462-486: The onClick handler in the button checks tier.name ===
"Enterprise" which is unreachable because pricingTiers does not include an
Enterprise entry (pricingTiers) and the Enterprise tier is rendered separately,
so the branch and its form URL are dead code; remove the conditional branch
inside the onClick in the button (the check of tier.name and the window.open to
"https://forms.gle/BrnyFF4unP9pZxAh7") and instead either use a URL property on
the tier (e.g., add/use tier.href) or always open the console URL
("https://console.voltagent.dev") from this button (update the onClick in the
component that renders the button), and if you must link to an Enterprise form
ensure it uses the correct form id ("nmXKC7RbYhouBs2A6") where appropriate.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/pages/pricing.tsx (1)
760-776:⚠️ Potential issue | 🟡 MinorAdd accessibility attributes to FAQ toggle.
The FAQ toggle
<div>hasonKeyDownhandling for Enter/Space but lacksrole="button"andtabIndex={0}. WithouttabIndex, the element cannot receive keyboard focus, making theonKeyDownhandler ineffective for keyboard-only users.♿ Proposed fix for accessibility
<div onClick={() => toggleFAQ(index)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { toggleFAQ(index); } }} + role="button" + tabIndex={0} className="w-full text-left p-6 landing-xs:p-3 landing-sm:p-5 flex items-center justify-between focus:outline-none focus:bg-zinc-800/30 hover:bg-zinc-800/30 transition-colors cursor-pointer" >
🧹 Nitpick comments (1)
website/src/pages/pricing.tsx (1)
55-134: Consider adding explicit TypeScript types for pricing data.The
pricingTiersarray uses a complex structure wherefeaturescan be strings or objects with different shapes. Adding explicit interfaces would improve type safety and developer experience.💡 Suggested type definitions
interface FeatureWithPayAsYouScale { text: string; hasPayAsYouScale: true; } interface FeatureWithSubtext { text: string; subtext: string; } type PricingFeature = string | FeatureWithPayAsYouScale | FeatureWithSubtext; interface PricingTier { name: string; price: string; period: string; description: string; trial: string | null; includesFrom?: string; features: PricingFeature[]; buttonText: string; buttonVariant: "primary" | "outline"; popular: boolean; hasCalculate: boolean; note: string | null; } const pricingTiers: PricingTier[] = [ // ...existing data ];
1 participant
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What is the current behavior?
What is the new behavior?
fixes (issue)
Notes for reviewers
Summary by cubic
Adds a new Pricing page with plan tiers, a usage calculator, a plan comparison table, and FAQ, and links it in the navbar. Updates pricing logic (Core 50k, Pro 250k included traces; Pro now $250) and refreshes related UI.
New Features
Refactors
Written for commit 8556fe9. Summary will update on new commits.
Summary by CodeRabbit
New Features
Style