Skip to content

feat(web): add /pr-fixer page and Cloud Agents footer #8996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 3, 2025
Merged

feat(web): add /pr-fixer page and Cloud Agents footer #8996

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e8c06cf
feat(web): add /pr-fixer page, cross-links between Reviewer and Fixer…
roomote Nov 3, 2025
0d5053b
Tweaks to PR Fixer page
brunobergher Nov 3, 2025
ab5697e
Update apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
brunobergher Nov 3, 2025
47e7520
Update apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
brunobergher Nov 3, 2025
ca636ff
Update apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
brunobergher Nov 3, 2025
0b01770
Update apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
brunobergher Nov 3, 2025
d5ef29c
Update apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
brunobergher Nov 3, 2025
10af9e0
Fix: add missing opening fragment tag in PrFixerContent.tsx
roomote Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added apps/web-roo-code/public/heroes/agent-pr-fixer.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
240 changes: 240 additions & 0 deletions apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
"use client"

import { ArrowRight, GitPullRequest, History, Key, MessageSquareCode, Wrench, type 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 { 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[]
}

const workflowSteps: Feature[] = [
{
icon: GitPullRequest,
title: "1. Connect your Github repositories",
description: "Pick in 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{" "}
<Link href="/pr-reviewer">PR Reviewer</Link>) 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.",
},
]

export function PrFixerContent() {
return (
<>
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
<AnimatedBackground />
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
<div>
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
<Wrench className="size-12 mb-4" />
State-of-the-art fixes for the comments on your PRs.
</h1>

<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
<p>
Roo Code{"'"}s PR Fixer applies high-quality changes to your PRs, right from
GitHub. Invoke via PR a comment and it will read the entire comment history to
understand context, agreements, and tradeoffs — then implement the right fix.
</p>
<p>
As always, you bring the model key; we orchestrate smart, efficient workflows.
</p>
</div>

{/* Cross-agent link */}
<div className="mt-6 flex flex-col md:flex-row md:items-center gap-2">
Works great with
<Link
href="/reviewer"
className="flex p-4 items-center rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-sm text-blue-600 backdrop-blur-sm transition-colors hover:bg-blue-500/20 dark:text-blue-400"
aria-label="Works great with PR Reviewer">
<GitPullRequest className="size-4 mr-2" />
PR Reviewer Agent
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>

<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
<Button
size="lg"
className="w-full sm:w-auto backdrop-blur-sm border hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-300"
asChild>
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
target="_blank"
rel="noopener noreferrer"
onClick={trackGoogleAdsConversion}
className="flex w-full items-center justify-center">
Start 14-day Free Trial
<ArrowRight className="ml-2" />
</a>
</Button>
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
(cancel anytime)
</span>
</div>
</div>

<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
<div className="md:w-[670px] md:h-[600px] relative overflow-clip">
<div className="block">
<Image
src={hero}
alt="Example of a PR Fixer applying changes from review comments"
className="max-w-full h-auto"
width={800}
height={711}
/>
</div>
</div>
</div>
</div>
</div>
</section>

{/* How It Works Section */}
<section className="relative overflow-hidden border-t border-border py-32">
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
<div>
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">How It Works</h2>
</div>
</div>

<div className="relative mx-auto md:max-w-[1200px]">
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-3 lg:gap-8">
{workflowSteps.map((step, index) => {
const Icon = step.icon
return (
<li
key={index}
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300 hover:shadow-lg">
<Icon className="size-6 text-foreground/80" />
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
{step.title}
</h3>
<div className="leading-relaxed font-light text-muted-foreground">
{step.description}
</div>
</li>
)
})}
</ul>
</div>
</div>
</section>

<section className="relative overflow-hidden border-t border-border py-32">
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
<div>
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
Why Roo Code{"'"}s PR Fixer is different
</h2>
</div>
</div>

<div className="relative mx-auto md:max-w-[1200px]">
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
{howItWorks.map((feature, index) => {
const Icon = feature.icon
return (
<li
key={index}
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
<Icon className="size-6 text-foreground/80" />
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
{feature.title}
</h3>
<div className="leading-relaxed font-light text-muted-foreground space-y-2">
{feature.description}
</div>
</li>
)
})}
</ul>
</div>
</div>
</section>

{/* CTA Section */}
<section className="py-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/20 dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black sm:p-12">
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
Ship fixes, not follow-ups.
</h2>
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
Let Roo Code{"'"}s PR Fixer turn your review feedback into clean, ready-to-merge commits.
</p>
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<Button
size="lg"
className="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
asChild>
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
target="_blank"
rel="noopener noreferrer"
onClick={trackGoogleAdsConversion}
className="flex items-center justify-center">
Start 14-day Free Trial
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
</div>
</div>
</section>
</>
)
}
60 changes: 60 additions & 0 deletions apps/web-roo-code/src/app/pr-fixer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import type { Metadata } from "next"

import { SEO } from "@/lib/seo"
import { ogImageUrl } from "@/lib/og"
import { PrFixerContent } from "./PrFixerContent"

const TITLE = "PR Fixer"
const DESCRIPTION =
"Automatically apply high-quality fixes to your pull requests with comment-aware, GitHub-native workflows."
const OG_DESCRIPTION = "Transform review feedback into clean commits"
const PATH = "/pr-fixer"

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 fixer",
"pull request fixes",
"code fixes",
"GitHub PR",
"automated code fixes",
"comment-aware agent",
"repository-aware fixes",
"bring your own key",
"BYOK AI",
"code quality",
"cloud agents",
"AI development team",
],
}

export default function AgentPrFixerPage() {
return <PrFixerContent />
}
17 changes: 17 additions & 0 deletions apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import {
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"
Expand Down Expand Up @@ -86,8 +88,10 @@ export function ReviewerContent() {
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
<div>
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
<GitPullRequest className="size-12 mb-4" />
Get comprehensive code reviews that save you time, not&nbsp;tokens.
</h1>

<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
<p>
Regular AI code review tools cap model usage to protect their margins from fixed
Expand All @@ -100,6 +104,19 @@ export function ReviewerContent() {
your pull request queue moving.
</p>
</div>

{/* Cross-agent link */}
<div className="mt-6 flex flex-col md:flex-row md:items-center gap-2">
Works great with
<Link
href="/pr-fixer"
className="flex p-4 items-center rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-sm text-blue-600 backdrop-blur-sm transition-colors hover:bg-blue-500/20 dark:text-blue-400"
aria-label="Works great with PR Fixer">
<Wrench className="size-4 mr-2" />
PR Fixer Agent
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
<Button
Expand Down
Loading