From 7276ce00cfdfbc48c8c8cc21b9363e58464c0469 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Mon, 3 Nov 2025 14:31:12 +0000 Subject: [PATCH 1/4] feat: add new PR Reviewer page with alternative messaging - Created /pr-reviewer route with new page component - Implemented PRReviewerContent with edgier, more direct messaging - Focus on AI-generated code risks and security concerns - Uses same structure as /reviewer but with completely different copy - Emphasizes paranoid senior developer angle - Highlights specific issues: JWT bugs, regex backtracking, billing errors --- .../src/app/pr-reviewer/PRReviewerContent.tsx | 333 ++++++++++++++++++ .../web-roo-code/src/app/pr-reviewer/page.tsx | 65 ++++ 2 files changed, 398 insertions(+) create mode 100644 apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx create mode 100644 apps/web-roo-code/src/app/pr-reviewer/page.tsx diff --git a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx new file mode 100644 index 00000000000..f983069e8bd --- /dev/null +++ b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx @@ -0,0 +1,333 @@ +"use client" + +import { ArrowRight, AlertTriangle, Bot, Shield, Brain, Zap, CheckCircle2 } from "lucide-react" +import Image from "next/image" + +import { Button } from "@/components/ui" +import { AnimatedBackground } from "@/components/homepage" +import { AgentCarousel } from "@/components/reviewer/agent-carousel" +import { EXTERNAL_LINKS } from "@/lib/constants" +import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads" + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-reviewer.png" + +export function PRReviewerContent() { + return ( + <> + {/* Hero Section */} +
+ +
+
+
+
+

+ Your AI wrote the code. Roo made sure it's safe to ship. +

+
+

+ AI-generated commits are flooding PRs. Some are fine. Some disable JWT + verification. Roo PR Reviewer catches what slipped through before it hits prod. +

+
+ "Bold strategy: a trust-based JWT system. What could possibly go + wrong?" +
+
+
+ +
+
+
+
+ Example of a code review generated by Roo Code PR Reviewer +
+
+
+
+
+
+ + {/* The Problem Section */} +
+
+
+
+ +

The Problem

+
+
+

+ AI's writing more code than ever — and most of it looks right. But beneath + that green diff are: +

+
    +
  • + • + silent security holes +
    • +
  • + • + rounding bugs that eat customer money +
    • +
  • + • + regexes that backtrack until your weekend's gone +
    • +
+

+ Your team is reviewing more code than ever, but catching less. +

+
+
+
+
+ + {/* The Roo Fix Section */} +
+
+
+
+ +

The Roo Fix

+
+
+

+ Roo PR Reviewer fights AI chaos with AI + precision. +

+

+ It reads your PRs like a senior engineer — not a spellchecker. It flags the real + problems and skips the noise. +

+
+
+ + Detects logic and security issues (not just lint) +
+
+ + + Explains why the change is wrong, not just what + +
+
+ + Integrates directly in GitHub PRs +
+
+ + Bring-your-own-API-key — no token limits, no model throttling +
+
+
+
+
+
+ + {/* How It Feels Section */} +
+
+
+
+ +

How It Feels to Use Roo

+
+
+

You open a PR, and Roo leaves comments like:

+
+
+ "Great news: '1000' is now cheaper than '200'. Sort + numerically; keep values as numbers." +
+
+ "This regex can spend the weekend backtracking. Use a safe validator." +
+
+ "Rounding errors become billing errors. Use `Decimal` end-to-end." +
+
+

+ It's like having that one paranoid senior dev back on your team — but this one + never sleeps. +

+
+
+
+
+ + {/* Why Engineers Love It Section */} +
+
+
+
+ +

Why Engineers Love It

+
+
+
+
+ • +
+ Fewer false positives — + + Roo comments are focused, not fluffy. + +
+
+
+ • +
+ Understands your context — + + reads your repo, not a random snippet. + +
+
+
+ • +
+ Catches what humans miss — + + subtle bugs, security drift, AI hallucinations. + +
+
+
+

+ Engineers call it "the only AI review that doesn't make me dumber." +

+
+
+
+
+ + {/* Try It Section */} +
+
+
+
+ +

Try It on Your Next PR

+
+
+
    +
  1. + + 1 + + + Add Roo to your repo (takes 3 minutes). + +
    2. +
  2. + + 2 + + Push a PR — Roo reviews instantly. +
    3. +
  3. + + 3 + + + Watch it flag the stuff your AI or teammate didn't notice. + +
    4. +
+ +
+
+
+
+ + {/* Agent Team Section */} +
+
+
+

+ The first member of a whole new team +

+

+ Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} + almost everything we do today is mostly through our agents. Now we're bringing + them to you. +

+

+ Roo's PR Reviewer isn't yet another single-purpose tool to add to your already + complicated stack. It's the first member of your AI-powered development team. More + agents are shipping soon. +

+
+
+ +
+
+
+ + {/* Footer CTA */} +
+
+
+

+ AI is writing your code. Roo makes sure it's still safe to ship. +

+
+ +
+
+
+
+ + ) +} diff --git a/apps/web-roo-code/src/app/pr-reviewer/page.tsx b/apps/web-roo-code/src/app/pr-reviewer/page.tsx new file mode 100644 index 00000000000..fed06e9792a --- /dev/null +++ b/apps/web-roo-code/src/app/pr-reviewer/page.tsx @@ -0,0 +1,65 @@ +import type { Metadata } from "next" + +import { SEO } from "@/lib/seo" +import { ogImageUrl } from "@/lib/og" +import { PRReviewerContent } from "./PRReviewerContent" + +const TITLE = "PR Reviewer" +const DESCRIPTION = + "Your AI wrote the code. Roo made sure it's safe to ship. AI-generated commits are flooding PRs. Roo PR Reviewer catches what slipped through before it hits prod." +const OG_DESCRIPTION = "Your AI wrote the code. Roo made sure it's safe to ship." +const PATH = "/pr-reviewer" + +export const metadata: Metadata = { + title: TITLE, + description: DESCRIPTION, + alternates: { + canonical: `${SEO.url}${PATH}`, + }, + openGraph: { + title: TITLE, + description: DESCRIPTION, + url: `${SEO.url}${PATH}`, + siteName: SEO.name, + images: [ + { + url: ogImageUrl(TITLE, OG_DESCRIPTION), + width: 1200, + height: 630, + alt: TITLE, + }, + ], + locale: SEO.locale, + type: "website", + }, + twitter: { + card: SEO.twitterCard, + title: TITLE, + description: DESCRIPTION, + images: [ogImageUrl(TITLE, OG_DESCRIPTION)], + }, + keywords: [ + ...SEO.keywords, + "PR reviewer", + "code review", + "pull request review", + "AI code review", + "GitHub PR review", + "automated code review", + "AI-generated code", + "security review", + "JWT verification", + "regex security", + "billing errors", + "logic bugs", + "AI hallucinations", + "senior developer", + "paranoid code review", + "bring your own key", + "BYOK AI", + ], +} + +export default function PRReviewerPage() { + return +} From 8925a809f51f83bcc40b8f3f2c02842da3315e41 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Mon, 3 Nov 2025 16:21:12 +0000 Subject: [PATCH 2/4] refactor: improve PR reviewer page copy to match original tone and address real concerns --- .../src/app/pr-reviewer/PRReviewerContent.tsx | 394 ++++++++---------- .../web-roo-code/src/app/pr-reviewer/page.tsx | 22 +- 2 files changed, 183 insertions(+), 233 deletions(-) diff --git a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx index f983069e8bd..98d6c607311 100644 --- a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx +++ b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx @@ -1,6 +1,15 @@ "use client" -import { ArrowRight, AlertTriangle, Bot, Shield, Brain, Zap, CheckCircle2 } from "lucide-react" +import { + ArrowRight, + Blocks, + BookMarked, + ListChecks, + LucideIcon, + GitPullRequest, + Key, + MessageSquareCode, +} from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui" @@ -9,31 +18,89 @@ import { AgentCarousel } from "@/components/reviewer/agent-carousel" import { EXTERNAL_LINKS } from "@/lib/constants" import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads" +interface Feature { + icon: LucideIcon + title: string + description: string | React.ReactNode + logos?: string[] +} + +const workflowSteps: Feature[] = [ + { + icon: GitPullRequest, + title: "1. Connect Your Repository", + description: "Link your GitHub repository and configure which branches and pull requests should be reviewed.", + }, + { + icon: Key, + title: "2. Add Your API Key", + description: + "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", + }, + { + icon: MessageSquareCode, + title: "3. Get Review Comments", + description: + "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", + }, +] + +const howItWorks: Feature[] = [ + { + icon: Blocks, + title: "Bring your own key, get uncompromised reviews", + description: ( + <> +

+ Most AI review tools use fixed pricing, which means they skimp on tokens to protect their margins. + That leads to shallow analysis and missed issues. +

+

+ With Roo, you bring your own API key. We optimize prompts for depth, not cost-cutting, so reviews + focus on real problems like business logic, security vulnerabilities, and architectural issues. +

+ + ), + }, + { + icon: ListChecks, + title: "Advanced reasoning that understands what matters", + description: + "We leverage state-of-the-art reasoning models with sophisticated workflows: diff analysis, context gathering, impact mapping, and contract validation. This catches the subtle bugs that surface-level tools miss—misunderstood requirements, edge cases, and integration risks.", + }, + { + icon: BookMarked, + title: "Repository-aware, not snippet-aware", + description: + "Roo analyzes your entire codebase context—dependency graphs, code ownership, team conventions, and historical patterns. It understands how changes interact with existing systems, not just whether individual lines look correct.", + }, +] + // Workaround for next/image choking on these for some reason import hero from "/public/heroes/agent-reviewer.png" export function PRReviewerContent() { return ( <> - {/* Hero Section */}
-

- Your AI wrote the code. Roo made sure it's safe to ship. +

+ Code reviews that catch what other AI tools miss.

- AI-generated commits are flooding PRs. Some are fine. Some disable JWT - verification. Roo PR Reviewer catches what slipped through before it hits prod. + AI code review tools often catch syntax errors and style issues while missing + the bugs that actually matter: logic flaws, security vulnerabilities, and + misunderstood requirements. +

+

+ Roo Code's PR Reviewer uses advanced reasoning models and full repository + context to find the issues that slip through—before they reach production.

-
- "Bold strategy: a trust-based JWT system. What could possibly go - wrong?" -
@@ -47,10 +114,13 @@ export function PRReviewerContent() { rel="noopener noreferrer" onClick={trackGoogleAdsConversion} className="flex w-full items-center justify-center"> - Try Roo Reviewer Free + Start 14-day Free Trial + + (cancel anytime) +
@@ -70,244 +140,124 @@ export function PRReviewerContent() {
- {/* The Problem Section */} -
+ {/* How It Works Section */} +
-
-
- -

The Problem

-
-
-

- AI's writing more code than ever — and most of it looks right. But beneath - that green diff are: -

-
    -
  • - • - silent security holes -
    • -
  • - • - rounding bugs that eat customer money -
    • -
  • - • - regexes that backtrack until your weekend's gone -
    • -
-

- Your team is reviewing more code than ever, but catching less. -

+
+
+

How It Works

-
-
- {/* The Roo Fix Section */} -
-
-
-
- -

The Roo Fix

-
-
-

- Roo PR Reviewer fights AI chaos with AI - precision. -

-

- It reads your PRs like a senior engineer — not a spellchecker. It flags the real - problems and skips the noise. -

-
-
- - Detects logic and security issues (not just lint) -
-
- - - Explains why the change is wrong, not just what - -
-
- - Integrates directly in GitHub PRs -
-
- - Bring-your-own-API-key — no token limits, no model throttling -
-
-
+
+
    + {workflowSteps.map((step, index) => { + const Icon = step.icon + return ( +
  • + +

    + {step.title} +

    +
    + {step.description} +
    +
    • + ) + })} +
- {/* How It Feels Section */} -
+
-
-
- -

How It Feels to Use Roo

-
-
-

You open a PR, and Roo leaves comments like:

-
-
- "Great news: '1000' is now cheaper than '200'. Sort - numerically; keep values as numbers." -
-
- "This regex can spend the weekend backtracking. Use a safe validator." -
-
- "Rounding errors become billing errors. Use `Decimal` end-to-end." -
-
-

- It's like having that one paranoid senior dev back on your team — but this one - never sleeps. -

+
+
+

+ Why Roo's PR Reviewer is different +

-
-
- {/* Why Engineers Love It Section */} -
-
-
-
- -

Why Engineers Love It

-
-
-
-
- • -
- Fewer false positives — - - Roo comments are focused, not fluffy. - -
-
-
- • -
- Understands your context — - - reads your repo, not a random snippet. - -
-
-
- • -
- Catches what humans miss — - - subtle bugs, security drift, AI hallucinations. - -
-
-
-

- Engineers call it "the only AI review that doesn't make me dumber." -

-
-
-
-
- - {/* Try It Section */} -
-
-
-
- -

Try It on Your Next PR

-
-
-
    -
  1. - - 1 - - - Add Roo to your repo (takes 3 minutes). - -
    2. -
  2. - - 2 - - Push a PR — Roo reviews instantly. -
    3. -
  3. - - 3 - - - Watch it flag the stuff your AI or teammate didn't notice. - -
    4. -
- -
+
+
    + {howItWorks.map((feature, index) => { + const Icon = feature.icon + return ( +
  • + +

    + {feature.title} +

    +
    + {feature.description} +
    + {feature.logos && ( +
    + {feature.logos.map((logo) => ( + {`${logo} + ))} +
    + )} +
    • + ) + })} +
- {/* Agent Team Section */}
-

- The first member of a whole new team -

-

- Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} - almost everything we do today is mostly through our agents. Now we're bringing - them to you. -

-

- Roo's PR Reviewer isn't yet another single-purpose tool to add to your already - complicated stack. It's the first member of your AI-powered development team. More - agents are shipping soon. -

+
+

+ The first member of a whole new team +

+ +

+ Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} + almost everything we do today is mostly through our agents. Now we're + bringing them to you. +

+

+ Roo's PR Reviewer isn't yet another single-purpose tool to add to your already + complicated stack. +
+ It's the first member of your AI-powered development team. More agents are shipping + soon. +

+
+
- {/* Footer CTA */} + {/* CTA Section */}
-
-

- AI is writing your code. Roo makes sure it's still safe to ship. +

+

+ Ready for better code reviews? +

+

+ Start finding the issues that matter with AI-powered reviews built for depth, not + cost-cutting.

diff --git a/apps/web-roo-code/src/app/pr-reviewer/page.tsx b/apps/web-roo-code/src/app/pr-reviewer/page.tsx index fed06e9792a..decb338996e 100644 --- a/apps/web-roo-code/src/app/pr-reviewer/page.tsx +++ b/apps/web-roo-code/src/app/pr-reviewer/page.tsx @@ -6,8 +6,8 @@ import { PRReviewerContent } from "./PRReviewerContent" const TITLE = "PR Reviewer" const DESCRIPTION = - "Your AI wrote the code. Roo made sure it's safe to ship. AI-generated commits are flooding PRs. Roo PR Reviewer catches what slipped through before it hits prod." -const OG_DESCRIPTION = "Your AI wrote the code. Roo made sure it's safe to ship." + "Get AI-powered PR reviews that catch what other tools miss. Roo uses advanced reasoning models and full repository context to find logic bugs, security issues, and architectural problems—not just lint errors." +const OG_DESCRIPTION = "Code reviews that catch what other AI tools miss" const PATH = "/pr-reviewer" export const metadata: Metadata = { @@ -46,17 +46,17 @@ export const metadata: Metadata = { "AI code review", "GitHub PR review", "automated code review", - "AI-generated code", - "security review", - "JWT verification", - "regex security", - "billing errors", - "logic bugs", - "AI hallucinations", - "senior developer", - "paranoid code review", + "repository-aware review", "bring your own key", "BYOK AI", + "code quality", + "development workflow", + "cloud agents", + "AI development team", + "logic bugs", + "security vulnerabilities", + "business logic review", + "advanced reasoning", ], } From a5c35717600b039d58e84ebd6bef94165f5c5f4e Mon Sep 17 00:00:00 2001 From: Bruno Bergher Date: Tue, 4 Nov 2025 13:14:33 +0000 Subject: [PATCH 3/4] Working simplified A/B tst content mechanism for agent pages --- .../src/app/pr-fixer/content-a.tsx | 94 ++++++ apps/web-roo-code/src/app/pr-fixer/page.tsx | 13 +- .../src/app/pr-reviewer/PRReviewerContent.tsx | 283 ----------------- .../web-roo-code/src/app/pr-reviewer/page.tsx | 65 ---- .../src/app/reviewer/ReviewerContent.tsx | 296 ------------------ .../src/app/reviewer/content-b.ts | 92 ++++++ apps/web-roo-code/src/app/reviewer/content.ts | 93 ++++++ apps/web-roo-code/src/app/reviewer/page.tsx | 15 +- .../AgentLandingContent.tsx} | 205 ++++++------ .../src/app/shared/agent-page-content.ts | 78 +++++ .../src/app/shared/getContentVariant.ts | 36 +++ .../components/reviewer/agent-carousel.tsx | 121 ++++--- 12 files changed, 602 insertions(+), 789 deletions(-) create mode 100644 apps/web-roo-code/src/app/pr-fixer/content-a.tsx delete mode 100644 apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx delete mode 100644 apps/web-roo-code/src/app/pr-reviewer/page.tsx delete mode 100644 apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx create mode 100644 apps/web-roo-code/src/app/reviewer/content-b.ts create mode 100644 apps/web-roo-code/src/app/reviewer/content.ts rename apps/web-roo-code/src/app/{pr-fixer/PrFixerContent.tsx => shared/AgentLandingContent.tsx} (56%) create mode 100644 apps/web-roo-code/src/app/shared/agent-page-content.ts create mode 100644 apps/web-roo-code/src/app/shared/getContentVariant.ts diff --git a/apps/web-roo-code/src/app/pr-fixer/content-a.tsx b/apps/web-roo-code/src/app/pr-fixer/content-a.tsx new file mode 100644 index 00000000000..efe82386267 --- /dev/null +++ b/apps/web-roo-code/src/app/pr-fixer/content-a.tsx @@ -0,0 +1,94 @@ +import { type AgentPageContent } from "@/app/shared/agent-page-content" +import Link from "next/link" + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-pr-fixer.png" + +// Re-export for convenience +export type { AgentPageContent } + +export const content: AgentPageContent = { + agentName: "PR Fixer", + hero: { + icon: "Wrench", + heading: "State-of-the-art fixes for the comments on your PRs.", + paragraphs: [ + "Roo Code's PR Fixer applies high-quality changes to your PRs, right from GitHub. Invoke via a PR comment and it will read the entire comment history to understand context, agreements, and tradeoffs — then implement the right fix.", + "As always, you bring the model key; we orchestrate smart, efficient workflows.", + ], + image: { + src: hero, + width: 800, + height: 711, + alt: "Example of a PR Fixer applying changes from review comments", + }, + crossAgentLink: { + text: "Works great with", + links: [ + { + text: "PR Reviewer Agent", + href: "/reviewer", + icon: "GitPullRequest", + }, + ], + }, + cta: { + buttonText: "Start 14-day Free Trial", + disclaimer: "(cancel anytime)", + }, + }, + howItWorks: { + heading: "How It Works", + steps: [ + { + title: "1. Connect your GitHub repositories", + description: "Pick which repos the PR Fixer can work on by pushing to ongoing branches.", + icon: "GitPullRequest", + }, + { + title: "2. Invoke from a comment", + description: + 'Ask the agent to fix issues directly from GitHub PR comments (e.g. "@roomote: fix these review comments"). It\'s fully aware of the entire comment history and latest diffs and focuses on fixing them – not random changes to your code.', + icon: "MessageSquareCode", + }, + { + title: "3. Get clean scoped commits", + description: ( + <> + The agent proposes targeted changes and pushes concise commits or patch suggestions you (or{" "} + PR Reviewer) can review and merge quickly. + + ), + icon: "Wrench", + }, + ], + }, + whyBetter: { + heading: "Why Roo Code's PR Fixer is different", + features: [ + { + title: "Comment-history aware", + description: + "Understands the entire conversation on the PR – previous reviews, your replies, follow-ups – and uses that context to produce accurate fixes.", + icon: "History", + }, + { + title: "Bring your own key", + description: + "Use your preferred models at full strength. We optimize prompts and execution without capping your model to protect our margins.", + icon: "Key", + }, + { + title: "Repository- and diff-aware", + description: + "Analyzes the full repo context and the latest diff to ensure fixes align with project conventions and pass checks.", + icon: "GitPullRequest", + }, + ], + }, + cta: { + heading: "Ship fixes, not follow-ups.", + description: "Let Roo Code's PR Fixer turn your review feedback into clean, ready-to-merge commits.", + buttonText: "Start 14-day Free Trial", + }, +} diff --git a/apps/web-roo-code/src/app/pr-fixer/page.tsx b/apps/web-roo-code/src/app/pr-fixer/page.tsx index 3d6e1f865de..f2317161e0e 100644 --- a/apps/web-roo-code/src/app/pr-fixer/page.tsx +++ b/apps/web-roo-code/src/app/pr-fixer/page.tsx @@ -2,7 +2,9 @@ import type { Metadata } from "next" import { SEO } from "@/lib/seo" import { ogImageUrl } from "@/lib/og" -import { PrFixerContent } from "./PrFixerContent" +import { AgentLandingContent } from "@/app/shared/AgentLandingContent" +import { getContentVariant } from "@/app/shared/getContentVariant" +import { content as contentA } from "./content-a" const TITLE = "PR Fixer" const DESCRIPTION = @@ -55,6 +57,11 @@ export const metadata: Metadata = { ], } -export default function AgentPrFixerPage() { - return +export default async function AgentPrFixerPage({ searchParams }: { searchParams: Promise<{ v?: string }> }) { + const params = await searchParams + const content = getContentVariant(params, { + A: contentA, + }) + + return } diff --git a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx deleted file mode 100644 index 98d6c607311..00000000000 --- a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx +++ /dev/null @@ -1,283 +0,0 @@ -"use client" - -import { - ArrowRight, - Blocks, - BookMarked, - ListChecks, - LucideIcon, - GitPullRequest, - Key, - MessageSquareCode, -} from "lucide-react" -import Image from "next/image" - -import { Button } from "@/components/ui" -import { AnimatedBackground } from "@/components/homepage" -import { AgentCarousel } from "@/components/reviewer/agent-carousel" -import { EXTERNAL_LINKS } from "@/lib/constants" -import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads" - -interface Feature { - icon: LucideIcon - title: string - description: string | React.ReactNode - logos?: string[] -} - -const workflowSteps: Feature[] = [ - { - icon: GitPullRequest, - title: "1. Connect Your Repository", - description: "Link your GitHub repository and configure which branches and pull requests should be reviewed.", - }, - { - icon: Key, - title: "2. Add Your API Key", - description: - "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", - }, - { - icon: MessageSquareCode, - title: "3. Get Review Comments", - description: - "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", - }, -] - -const howItWorks: Feature[] = [ - { - icon: Blocks, - title: "Bring your own key, get uncompromised reviews", - description: ( - <> -

- Most AI review tools use fixed pricing, which means they skimp on tokens to protect their margins. - That leads to shallow analysis and missed issues. -

-

- With Roo, you bring your own API key. We optimize prompts for depth, not cost-cutting, so reviews - focus on real problems like business logic, security vulnerabilities, and architectural issues. -

- - ), - }, - { - icon: ListChecks, - title: "Advanced reasoning that understands what matters", - description: - "We leverage state-of-the-art reasoning models with sophisticated workflows: diff analysis, context gathering, impact mapping, and contract validation. This catches the subtle bugs that surface-level tools miss—misunderstood requirements, edge cases, and integration risks.", - }, - { - icon: BookMarked, - title: "Repository-aware, not snippet-aware", - description: - "Roo analyzes your entire codebase context—dependency graphs, code ownership, team conventions, and historical patterns. It understands how changes interact with existing systems, not just whether individual lines look correct.", - }, -] - -// Workaround for next/image choking on these for some reason -import hero from "/public/heroes/agent-reviewer.png" - -export function PRReviewerContent() { - return ( - <> -
- -
-
-
-
-

- Code reviews that catch what other AI tools miss. -

-
-

- AI code review tools often catch syntax errors and style issues while missing - the bugs that actually matter: logic flaws, security vulnerabilities, and - misunderstood requirements. -

-

- Roo Code's PR Reviewer uses advanced reasoning models and full repository - context to find the issues that slip through—before they reach production. -

-
-
-
- - - (cancel anytime) - -
-
-
-
-
- Example of a code review generated by Roo Code PR Reviewer -
-
-
-
-
-
- - {/* How It Works Section */} -
-
-
-
-

How It Works

-
-
- -
-
    - {workflowSteps.map((step, index) => { - const Icon = step.icon - return ( -
  • - -

    - {step.title} -

    -
    - {step.description} -
    -
    • - ) - })} -
-
-
-
- -
-
-
-
-

- Why Roo's PR Reviewer is different -

-
-
- -
-
    - {howItWorks.map((feature, index) => { - const Icon = feature.icon - return ( -
  • - -

    - {feature.title} -

    -
    - {feature.description} -
    - {feature.logos && ( -
    - {feature.logos.map((logo) => ( - {`${logo} - ))} -
    - )} -
    • - ) - })} -
-
-
-
- -
-
-
-
-

- The first member of a whole new team -

- -

- Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} - almost everything we do today is mostly through our agents. Now we're - bringing them to you. -

-

- Roo's PR Reviewer isn't yet another single-purpose tool to add to your already - complicated stack. -
- It's the first member of your AI-powered development team. More agents are shipping - soon. -

-
-
- -
- -
-
-
- - {/* CTA Section */} -
-
-
-

- Ready for better code reviews? -

-

- Start finding the issues that matter with AI-powered reviews built for depth, not - cost-cutting. -

- -
-
-
- - ) -} diff --git a/apps/web-roo-code/src/app/pr-reviewer/page.tsx b/apps/web-roo-code/src/app/pr-reviewer/page.tsx deleted file mode 100644 index decb338996e..00000000000 --- a/apps/web-roo-code/src/app/pr-reviewer/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import type { Metadata } from "next" - -import { SEO } from "@/lib/seo" -import { ogImageUrl } from "@/lib/og" -import { PRReviewerContent } from "./PRReviewerContent" - -const TITLE = "PR Reviewer" -const DESCRIPTION = - "Get AI-powered PR reviews that catch what other tools miss. Roo uses advanced reasoning models and full repository context to find logic bugs, security issues, and architectural problems—not just lint errors." -const OG_DESCRIPTION = "Code reviews that catch what other AI tools miss" -const PATH = "/pr-reviewer" - -export const metadata: Metadata = { - title: TITLE, - description: DESCRIPTION, - alternates: { - canonical: `${SEO.url}${PATH}`, - }, - openGraph: { - title: TITLE, - description: DESCRIPTION, - url: `${SEO.url}${PATH}`, - siteName: SEO.name, - images: [ - { - url: ogImageUrl(TITLE, OG_DESCRIPTION), - width: 1200, - height: 630, - alt: TITLE, - }, - ], - locale: SEO.locale, - type: "website", - }, - twitter: { - card: SEO.twitterCard, - title: TITLE, - description: DESCRIPTION, - images: [ogImageUrl(TITLE, OG_DESCRIPTION)], - }, - keywords: [ - ...SEO.keywords, - "PR reviewer", - "code review", - "pull request review", - "AI code review", - "GitHub PR review", - "automated code review", - "repository-aware review", - "bring your own key", - "BYOK AI", - "code quality", - "development workflow", - "cloud agents", - "AI development team", - "logic bugs", - "security vulnerabilities", - "business logic review", - "advanced reasoning", - ], -} - -export default function PRReviewerPage() { - return -} diff --git a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx deleted file mode 100644 index 3f5a1cf12a0..00000000000 --- a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx +++ /dev/null @@ -1,296 +0,0 @@ -"use client" - -import { - ArrowRight, - Blocks, - BookMarked, - ListChecks, - LucideIcon, - GitPullRequest, - Key, - MessageSquareCode, - Wrench, -} from "lucide-react" -import Image from "next/image" -import Link from "next/link" - -import { Button } from "@/components/ui" -import { AnimatedBackground } from "@/components/homepage" -import { AgentCarousel } from "@/components/reviewer/agent-carousel" -import { EXTERNAL_LINKS } from "@/lib/constants" -import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads" - -interface Feature { - icon: LucideIcon - title: string - description: string | React.ReactNode - logos?: string[] -} - -const workflowSteps: Feature[] = [ - { - icon: GitPullRequest, - title: "1. Connect Your Repository", - description: "Link your GitHub repository and configure which branches and pull requests should be reviewed.", - }, - { - icon: Key, - title: "2. Add Your API Key", - description: - "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", - }, - { - icon: MessageSquareCode, - title: "3. Get Review Comments", - description: - "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", - }, -] - -const howItWorks: Feature[] = [ - { - icon: Blocks, - title: "Our agents, your provider keys", - description: ( - <> -

- We orchestrate the review, optimize the hell out of the prompts, integrate with GitHub, keep you - properly posted. -

-

We're thoughtful about token usage, but not incentivized to skimp to grow our margins.

- - ), - }, - { - icon: ListChecks, - title: "Advanced reasoning and workflows", - description: - "We optimize for state-of-the-art reasoning models and leverage powerful workflows (Diff analysis → Context Gathering → Impact Mapping → Contract checks) to produce crisp, actionable comments at the right level.", - }, - { - icon: BookMarked, - title: "Fully repository-aware", - description: - "Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.", - }, -] - -// Workaround for next/image choking on these for some reason -import hero from "/public/heroes/agent-reviewer.png" - -export function ReviewerContent() { - return ( - <> -
- -
-
-
-
-

- - Get comprehensive code reviews that save you time, not tokens. -

- -
-

- Regular AI code review tools cap model usage to protect their margins from fixed - monthly prices. That leads to shallow prompts, limited context, and missed - issues. -

-

- Roo Code's PR Reviewer flips the script: you bring your own key and - leverage it to the max – to find real issues, increase code quality and keep - your pull request queue moving. -

-
- - {/* Cross-agent link */} -
- Works great with - - - PR Fixer Agent - - -
-
-
- - - (cancel anytime) - -
-
-
-
-
- Example of a code review generated by Roo Code PR Reviewer -
-
-
-
-
-
- - {/* How It Works Section */} -
-
-
-
-

How It Works

-
-
- -
-
    - {workflowSteps.map((step, index) => { - const Icon = step.icon - return ( -
  • - -

    - {step.title} -

    -
    - {step.description} -
    -
    • - ) - })} -
-
-
-
- -
-
-
-
-

- Why Roo's PR Reviewer is so much better -

-
-
- -
-
    - {howItWorks.map((feature, index) => { - const Icon = feature.icon - return ( -
  • - -

    - {feature.title} -

    -
    - {feature.description} -
    - {feature.logos && ( -
    - {feature.logos.map((logo) => ( - {`${logo} - ))} -
    - )} -
    • - ) - })} -
-
-
-
- -
-
-
-
-

- The first member of a whole new team -

- -

- Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} - almost everything we do today is mostly through our agents. Now we're - bringing them to you. -

-

- Roo's PR Reviewer isn't yet another single-purpose tool to add to your already - complicated stack. -
- It's the first member of your AI-powered development team. More agents are shipping - soon. -

-
-
- -
- -
-
-
- - {/* CTA Section */} -
-
-
-

Stop wasting time.

-

- Give Roo Code's PR Reviewer your model key and turn painful reviews into a tangible - quality advantage. -

- -
-
-
- - ) -} diff --git a/apps/web-roo-code/src/app/reviewer/content-b.ts b/apps/web-roo-code/src/app/reviewer/content-b.ts new file mode 100644 index 00000000000..7e2d8a1bb9a --- /dev/null +++ b/apps/web-roo-code/src/app/reviewer/content-b.ts @@ -0,0 +1,92 @@ +import { type AgentPageContent } from "@/app/shared/agent-page-content" + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-reviewer.png" + +// Re-export for convenience +export type { AgentPageContent } + +export const content: AgentPageContent = { + agentName: "PR Reviewer", + hero: { + icon: "GitPullRequest", + heading: "Code reviews that catch what other AI tools (and most humans) miss.", + paragraphs: [ + "Run-of-the-mill, token-saving AI code review tools will surely catch syntax errors and style issues, but they'll usually miss the bugs that actually matter: logic flaws, security vulnerabilities, and misunderstood requirements.", + "Roo Code's PR Reviewer uses advanced reasoning models and full repository context to find the issues that slip through—before they reach production.", + ], + image: { + src: hero, + width: 800, + height: 474, + alt: "Example of a code review generated by Roo Code PR Reviewer", + }, + crossAgentLink: { + text: "Works great with", + links: [ + { + text: "PR Fixer Agent", + href: "/pr-fixer", + icon: "Wrench", + }, + ], + }, + cta: { + buttonText: "Start 14-day Free Trial", + disclaimer: "(cancel anytime)", + }, + }, + howItWorks: { + heading: "How It Works", + steps: [ + { + title: "1. Connect Your Repository", + description: + "Link your GitHub repository and configure which branches and pull requests should be reviewed.", + icon: "GitPullRequest", + }, + { + title: "2. Add Your API Key", + description: + "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", + icon: "Key", + }, + { + title: "3. Get Review Comments", + description: + "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", + icon: "MessageSquareCode", + }, + ], + }, + whyBetter: { + heading: "Why Roo's PR Reviewer is different", + features: [ + { + title: "Bring your own key, get uncompromised reviews", + paragraphs: [ + "Most AI review tools use fixed pricing, which means they skimp on tokens to protect their margins. That leads to shallow analysis and missed issues.", + "With Roo, you bring your own API key. We optimize prompts for depth, not cost-cutting, so reviews focus on real problems like business logic, security vulnerabilities, and architectural issues.", + ], + icon: "Blocks", + }, + { + title: "Advanced reasoning that understands what matters", + description: + "We leverage state-of-the-art reasoning models with sophisticated workflows: diff analysis, context gathering, impact mapping, and contract validation. This catches the subtle bugs that surface-level tools miss—misunderstood requirements, edge cases, and integration risks.", + icon: "ListChecks", + }, + { + title: "Repository-aware, not snippet-aware", + description: + "Roo analyzes your entire codebase context—dependency graphs, code ownership, team conventions, and historical patterns. It understands how changes interact with existing systems, not just whether individual lines look correct.", + icon: "BookMarked", + }, + ], + }, + cta: { + heading: "Ready for better code reviews?", + description: "Start finding the issues that matter with AI-powered reviews built for depth, not cost-cutting.", + buttonText: "Start 14-day Free Trial", + }, +} diff --git a/apps/web-roo-code/src/app/reviewer/content.ts b/apps/web-roo-code/src/app/reviewer/content.ts new file mode 100644 index 00000000000..ca6507e5dba --- /dev/null +++ b/apps/web-roo-code/src/app/reviewer/content.ts @@ -0,0 +1,93 @@ +import { type AgentPageContent } from "@/app/shared/agent-page-content" + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-reviewer.png" + +// Re-export for convenience +export type { AgentPageContent } + +export const content: AgentPageContent = { + agentName: "PR Reviewer", + hero: { + icon: "GitPullRequest", + heading: "Get comprehensive code reviews that save you time, not tokens.", + paragraphs: [ + "Regular AI code review tools cap model usage to protect their margins from fixed monthly prices. That leads to shallow prompts, limited context, and missed issues.", + "Roo Code's PR Reviewer flips the script: you bring your own key and leverage it to the max – to find real issues, increase code quality and keep your pull request queue moving.", + ], + image: { + src: hero, + width: 800, + height: 474, + alt: "Example of a code review generated by Roo Code PR Reviewer", + }, + crossAgentLink: { + text: "Works great with", + links: [ + { + text: "PR Fixer Agent", + href: "/pr-fixer", + icon: "Wrench", + }, + ], + }, + cta: { + buttonText: "Start 14-day Free Trial", + disclaimer: "(cancel anytime)", + }, + }, + howItWorks: { + heading: "How It Works", + steps: [ + { + title: "1. Connect Your Repository", + description: + "Link your GitHub repository and configure which branches and pull requests should be reviewed.", + icon: "GitPullRequest", + }, + { + title: "2. Add Your API Key", + description: + "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", + icon: "Key", + }, + { + title: "3. Get Review Comments", + description: + "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", + icon: "MessageSquareCode", + }, + ], + }, + whyBetter: { + heading: "Why Roo's PR Reviewer is so much better", + features: [ + { + title: "Our agents, your provider keys", + paragraphs: [ + "We orchestrate the review, optimize the hell out of the prompts, integrate with GitHub, keep you properly posted.", + "We're thoughtful about token usage, but not incentivized to skimp to grow our margins.", + ], + icon: "Blocks", + }, + { + title: "Advanced reasoning and workflows", + description: + "We optimize for state-of-the-art reasoning models and leverage powerful workflows (Diff analysis → Context Gathering → Impact Mapping → Contract checks) to produce crisp, actionable comments at the right level.", + icon: "ListChecks", + }, + { + title: "Fully repository-aware", + description: + "Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.", + icon: "BookMarked", + }, + ], + }, + cta: { + heading: "Stop wasting time.", + description: + "Give Roo Code's PR Reviewer your model key and turn painful reviews into a tangible quality advantage.", + buttonText: "Start 14-day Free Trial", + }, +} diff --git a/apps/web-roo-code/src/app/reviewer/page.tsx b/apps/web-roo-code/src/app/reviewer/page.tsx index 7f7cce862a6..776ded6847f 100644 --- a/apps/web-roo-code/src/app/reviewer/page.tsx +++ b/apps/web-roo-code/src/app/reviewer/page.tsx @@ -2,7 +2,10 @@ import type { Metadata } from "next" import { SEO } from "@/lib/seo" import { ogImageUrl } from "@/lib/og" -import { ReviewerContent } from "./ReviewerContent" +import { AgentLandingContent } from "@/app/shared/AgentLandingContent" +import { getContentVariant } from "@/app/shared/getContentVariant" +import { content as contentA } from "./content" +import { content as contentB } from "./content-b" const TITLE = "PR Reviewer" const DESCRIPTION = @@ -56,6 +59,12 @@ export const metadata: Metadata = { ], } -export default function AgentReviewerPage() { - return +export default async function AgentReviewerPage({ searchParams }: { searchParams: Promise<{ v?: string }> }) { + const params = await searchParams + const content = getContentVariant(params, { + A: contentA, + B: contentB, + }) + + return } diff --git a/apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx similarity index 56% rename from apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx rename to apps/web-roo-code/src/app/shared/AgentLandingContent.tsx index 285a28e6f6e..36946d6848b 100644 --- a/apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx +++ b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx @@ -1,105 +1,90 @@ "use client" -import { ArrowRight, GitPullRequest, History, Key, MessageSquareCode, Wrench, type LucideIcon } from "lucide-react" +import { + ArrowRight, + GitPullRequest, + Wrench, + Key, + MessageSquareCode, + Blocks, + ListChecks, + BookMarked, + History, + LucideIcon, +} from "lucide-react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui" import { AnimatedBackground } from "@/components/homepage" +import { AgentCarousel } from "@/components/reviewer/agent-carousel" import { EXTERNAL_LINKS } from "@/lib/constants" import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads" - -// Workaround for next/image choking on these for some reason -import hero from "/public/heroes/agent-pr-fixer.png" - -interface Feature { - icon: LucideIcon - title: string - description: string | React.ReactNode - logos?: string[] +import { type AgentPageContent, type IconName } from "./agent-page-content" + +/** + * Maps icon names to actual Lucide icon components + */ +const iconMap: Record = { + GitPullRequest, + Wrench, + Key, + MessageSquareCode, + Blocks, + ListChecks, + BookMarked, + History, } -const workflowSteps: Feature[] = [ - { - icon: GitPullRequest, - title: "1. Connect your GitHub repositories", - description: "Pick which repos the PR Fixer can work on by pushing to ongoing branches.", - }, - { - icon: MessageSquareCode, - title: "2. Invoke from a comment", - description: - 'Ask the agent to fix issues directly from GitHub PR comments (e.g. "@roomote: fix these review comments"). It’s fully aware of the entire comment history and latest diffs and focuses on fixing them – not random changes to your code.', - }, - { - icon: Wrench, - title: "3. Get clean scoped commits", - description: ( - <> - The agent proposes targeted changes and pushes concise commits or patch suggestions you (or{" "} - PR Reviewer) can review and merge quickly. - - ), - }, -] - -const howItWorks: Feature[] = [ - { - icon: History, - title: "Comment-history aware", - description: - "Understands the entire conversation on the PR – previous reviews, your replies, follow-ups – and uses that context to produce accurate fixes.", - }, - { - icon: Key, - title: "Bring your own key", - description: - "Use your preferred models at full strength. We optimize prompts and execution without capping your model to protect our margins.", - }, - { - icon: GitPullRequest, - title: "Repository- and diff-aware", - description: - "Analyzes the full repo context and the latest diff to ensure fixes align with project conventions and pass checks.", - }, -] +/** + * Converts an icon name string to a Lucide icon component + */ +function getIcon(iconName?: IconName): LucideIcon | undefined { + return iconName ? iconMap[iconName] : undefined +} -export function PrFixerContent() { +export function AgentLandingContent({ content }: { content: AgentPageContent }) { return ( <> + {/* Hero Section */}
-

- - State-of-the-art fixes for the comments on your PRs. +

+ {content.hero.icon && + (() => { + const Icon = getIcon(content.hero.icon) + return Icon ? : null + })()} + {content.hero.heading}

-

- Roo Code{"'"}s PR Fixer applies high-quality changes to your PRs, right from - GitHub. Invoke via a PR comment and it will read the entire comment history to - understand context, agreements, and tradeoffs — then implement the right fix. -

-

- As always, you bring the model key; we orchestrate smart, efficient workflows. -

+ {content.hero.paragraphs.map((paragraph, index) => ( +

{paragraph}

+ ))}
{/* Cross-agent link */}
- Works great with - - - PR Reviewer Agent - - + {content.hero.crossAgentLink.text} + {content.hero.crossAgentLink.links.map((link, index) => { + const Icon = getIcon(link.icon) + return ( + + {Icon && } + {link.text} + + + ) + })}

@@ -114,29 +99,37 @@ export function PrFixerContent() { rel="noopener noreferrer" onClick={trackGoogleAdsConversion} className="flex w-full items-center justify-center"> - Start 14-day Free Trial + {content.hero.cta.buttonText} - (cancel anytime) + {content.hero.cta.disclaimer}
-
-
-
- Example of a PR Fixer applying changes from review comments + {content.hero.image && ( +
+
+
+ {content.hero.image.alt +
-
+ )}
@@ -146,19 +139,21 @@ export function PrFixerContent() {
-

How It Works

+

+ {content.howItWorks.heading} +

    - {workflowSteps.map((step, index) => { - const Icon = step.icon + {content.howItWorks.steps.map((step, index) => { + const Icon = getIcon(step.icon) return (
  • - + {Icon && }

    {step.title}

    @@ -173,30 +168,35 @@ export function PrFixerContent() {
+ {/* Why Better Section */}

- Why Roo Code{"'"}s PR Fixer is different + {content.whyBetter.heading}

    - {howItWorks.map((feature, index) => { - const Icon = feature.icon + {content.whyBetter.features.map((feature, index) => { + const Icon = getIcon(feature.icon) return (
  • - + {Icon && }

    {feature.title}

    - {feature.description} + {feature.description &&

    {feature.description}

    } + {feature.paragraphs && + feature.paragraphs.map((paragraph, pIndex) => ( +

    {paragraph}

    + ))}
    • ) @@ -206,15 +206,16 @@ export function PrFixerContent() {
+ {/* Agent Carousel */} + + {/* CTA Section */}
-

- Ship fixes, not follow-ups. -

+

{content.cta.heading}

- Let Roo Code{"'"}s PR Fixer turn your review feedback into clean, ready-to-merge commits. + {content.cta.description}

diff --git a/apps/web-roo-code/src/app/shared/agent-page-content.ts b/apps/web-roo-code/src/app/shared/agent-page-content.ts new file mode 100644 index 00000000000..ae09f10b5bd --- /dev/null +++ b/apps/web-roo-code/src/app/shared/agent-page-content.ts @@ -0,0 +1,78 @@ +import { StaticImageData } from "next/image" + +/** + * Supported icon names that can be used in agent page content. + * These strings are mapped to actual Lucide components in the client. + */ +export type IconName = + | "GitPullRequest" + | "Wrench" + | "Key" + | "MessageSquareCode" + | "Blocks" + | "ListChecks" + | "BookMarked" + | "History" + +/** + * Generic content structure for agent landing pages. + * This interface can be reused across different agent pages (PR Reviewer, PR Fixer, etc.) + * to maintain consistency and enable A/B testing capabilities. + * + * Note: Icons are referenced by string names (not components) to support + * serialization from Server Components to Client Components. + */ +export interface AgentPageContent { + /** The agent name used for the carousel display */ + agentName: string + hero: { + /** Optional icon name to display in the hero section */ + icon?: IconName + heading: string + paragraphs: string[] + image?: { + url?: string + src?: StaticImageData + width: number + height: number + alt?: string + } + crossAgentLink: { + text: string + links: Array<{ + text: string + href: string + icon?: IconName + }> + } + cta: { + buttonText: string + disclaimer: string + } + } + howItWorks: { + heading: string + steps: Array<{ + title: string + /** Supports rich text content including React components */ + description: string | React.ReactNode + icon?: IconName + }> + } + whyBetter: { + heading: string + features: Array<{ + title: string + /** Supports rich text content including React components */ + description?: string | React.ReactNode + /** Supports rich text content including React components */ + paragraphs?: Array + icon?: IconName + }> + } + cta: { + heading: string + description: string + buttonText: string + } +} diff --git a/apps/web-roo-code/src/app/shared/getContentVariant.ts b/apps/web-roo-code/src/app/shared/getContentVariant.ts new file mode 100644 index 00000000000..0d8fccdde45 --- /dev/null +++ b/apps/web-roo-code/src/app/shared/getContentVariant.ts @@ -0,0 +1,36 @@ +import type { AgentPageContent } from "./agent-page-content" + +/** + * Selects the appropriate content variant based on the query parameter. + * + * @param searchParams - The search parameters from the page props + * @param variants - A record mapping variant letters to content objects + * @returns The selected content variant, defaulting to variant 'A' if not found or invalid + * + * @example + * ```tsx + * const content = getContentVariant(searchParams, { + * A: contentA, + * B: contentB, + * C: contentC, + * }) + * ``` + */ +export function getContentVariant( + searchParams: { v?: string }, + variants: Record, +): AgentPageContent { + const variant = searchParams.v?.toUpperCase() + + // Return the specified variant if it exists, otherwise default to 'A' + if (variant && variants[variant]) { + return variants[variant] + } + + // Ensure 'A' variant always exists as fallback + if (!variants.A) { + throw new Error("Content variants must include variant 'A' as the default") + } + + return variants.A +} diff --git a/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx index c935db6e1c7..a0b05702c80 100644 --- a/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx +++ b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx @@ -4,15 +4,29 @@ import { useEffect } from "react" import { motion } from "framer-motion" import useEmblaCarousel from "embla-carousel-react" import AutoPlay from "embla-carousel-autoplay" -import { Bug, FileText, Gauge, Languages, Microscope, PocketKnife, TestTube, type LucideIcon } from "lucide-react" +import { + Bug, + FileText, + Gauge, + GitPullRequest, + Languages, + Microscope, + PocketKnife, + TestTube, + Wrench, + type LucideIcon, +} from "lucide-react" // AI Agent types for the carousel interface AIAgent { icon: LucideIcon name: string + page?: string } const aiAgents: AIAgent[] = [ + { icon: GitPullRequest, name: "PR Reviewer", page: "/reviewer" }, + { icon: Wrench, name: "PR Fixer", page: "/pr-fixer" }, { icon: PocketKnife, name: "Generalist" }, { icon: Bug, name: "Bug Fixer" }, { icon: TestTube, name: "Test Engineer" }, @@ -22,7 +36,7 @@ const aiAgents: AIAgent[] = [ { icon: Languages, name: "String Translator" }, ] -export function AgentCarousel() { +export function AgentCarousel({ currentAgent = "" }: { currentAgent?: string } = {}) { const [emblaRef, emblaApi] = useEmblaCarousel( { loop: true, @@ -82,44 +96,77 @@ export function AgentCarousel() { const displayAgents = [...aiAgents, ...aiAgents] return ( - - {/* Gradient Overlays */} -
-
+
+
+
+
+

+ The first members of a whole new team +

+

+ Architecture, coding, reviewing, testing, debugging, documenting, designing – almost + everything we do today is mostly through our agents. Now we're bringing them to you. +

+

+ Roo's {currentAgent} isn't yet another single-purpose tool to add to your already + complicated stack. It's the first member of your AI-powered development team. More + agents are shipping soon. +

+
+
+ +
+ + {/* Gradient Overlays */} +
+
- {/* Embla Carousel Container */} -
-
- {displayAgents.map((agent, index) => { - const Icon = agent.icon - return ( -
-
-
- -

- {agent.name} -

-
-
+ {/* Embla Carousel Container */} +
+
+ {displayAgents.map((agent, index) => { + const Icon = agent.icon + return ( +
+
+
+ +

+ {agent.page ? ( + + {agent.name} + + ) : ( + + {agent.name} + + )} +

+
+
+
+ ) + })}
- ) - })} +
+
- +
) } From 29b8942a2adc57948fae0327ee450630e3640c22 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Tue, 4 Nov 2025 14:15:04 +0000 Subject: [PATCH 4/4] fix: make hero.image.url required and remove unsafe non-null assertion --- apps/web-roo-code/src/app/pr-fixer/content-a.tsx | 2 +- apps/web-roo-code/src/app/reviewer/content-b.ts | 2 +- apps/web-roo-code/src/app/reviewer/content.ts | 2 +- apps/web-roo-code/src/app/shared/AgentLandingContent.tsx | 2 +- apps/web-roo-code/src/app/shared/agent-page-content.ts | 5 +---- 5 files changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/web-roo-code/src/app/pr-fixer/content-a.tsx b/apps/web-roo-code/src/app/pr-fixer/content-a.tsx index efe82386267..cce8ed24658 100644 --- a/apps/web-roo-code/src/app/pr-fixer/content-a.tsx +++ b/apps/web-roo-code/src/app/pr-fixer/content-a.tsx @@ -17,7 +17,7 @@ export const content: AgentPageContent = { "As always, you bring the model key; we orchestrate smart, efficient workflows.", ], image: { - src: hero, + url: hero.src, width: 800, height: 711, alt: "Example of a PR Fixer applying changes from review comments", diff --git a/apps/web-roo-code/src/app/reviewer/content-b.ts b/apps/web-roo-code/src/app/reviewer/content-b.ts index 7e2d8a1bb9a..988dee73a14 100644 --- a/apps/web-roo-code/src/app/reviewer/content-b.ts +++ b/apps/web-roo-code/src/app/reviewer/content-b.ts @@ -16,7 +16,7 @@ export const content: AgentPageContent = { "Roo Code's PR Reviewer uses advanced reasoning models and full repository context to find the issues that slip through—before they reach production.", ], image: { - src: hero, + url: hero.src, width: 800, height: 474, alt: "Example of a code review generated by Roo Code PR Reviewer", diff --git a/apps/web-roo-code/src/app/reviewer/content.ts b/apps/web-roo-code/src/app/reviewer/content.ts index ca6507e5dba..58c15dc2d0e 100644 --- a/apps/web-roo-code/src/app/reviewer/content.ts +++ b/apps/web-roo-code/src/app/reviewer/content.ts @@ -16,7 +16,7 @@ export const content: AgentPageContent = { "Roo Code's PR Reviewer flips the script: you bring your own key and leverage it to the max – to find real issues, increase code quality and keep your pull request queue moving.", ], image: { - src: hero, + url: hero.src, width: 800, height: 474, alt: "Example of a code review generated by Roo Code PR Reviewer", diff --git a/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx index 36946d6848b..70fb3cde328 100644 --- a/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx +++ b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx @@ -120,7 +120,7 @@ export function AgentLandingContent({ content }: { content: AgentPageContent }) }}>