mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-10-08 03:07:53 +00:00
feat(web): add /pr-fixer page and Cloud Agents footer (#8996)
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Matt Rubens <mrubens@users.noreply.github.com> Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Bruno Bergher <bruno@roocode.com> Co-authored-by: Bruno Bergher <me@brunobergher.com>
This commit is contained in:
roomote[bot]
GitHub
parent
7add32e203
commit
d59b815e98
5 changed files with 363 additions and 1 deletions
BIN
apps/web-roo-code/public/heroes/agent-pr-fixer.png
Normal file
BIN
apps/web-roo-code/public/heroes/agent-pr-fixer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
240
apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
Normal file
240
apps/web-roo-code/src/app/pr-fixer/PrFixerContent.tsx
Normal file
|
|
@ -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 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 a PR 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
apps/web-roo-code/src/app/pr-fixer/page.tsx
Normal file
60
apps/web-roo-code/src/app/pr-fixer/page.tsx
Normal file
|
|
@ -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 />
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
@ -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 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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -12,16 +12,22 @@ import { ScrollButton } from "@/components/ui"
|
|||
|
||||
export function Footer() {
|
||||
const [privacyDropdownOpen, setPrivacyDropdownOpen] = useState(false)
|
||||
const [cloudDropdownOpen, setCloudDropdownOpen] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
const cloudDropdownRef = useRef<HTMLDivElement>(null)
|
||||
const logoSrc = useLogoSrc()
|
||||
const { resolvedTheme } = useTheme()
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
const target = event.target as Node
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(target)) {
|
||||
setPrivacyDropdownOpen(false)
|
||||
}
|
||||
if (cloudDropdownRef.current && !cloudDropdownRef.current.contains(target)) {
|
||||
setCloudDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
|
|
@ -69,6 +75,45 @@ export function Footer() {
|
|||
Features
|
||||
</ScrollButton>
|
||||
</li>
|
||||
<li>
|
||||
<div className="relative z-10" ref={cloudDropdownRef}>
|
||||
<button
|
||||
onClick={() => setCloudDropdownOpen(!cloudDropdownOpen)}
|
||||
className="flex items-center text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground"
|
||||
aria-expanded={cloudDropdownOpen}
|
||||
aria-haspopup="true">
|
||||
<span>Cloud Agents</span>
|
||||
<ChevronDown
|
||||
className={`ml-1 h-4 w-4 transition-transform ${cloudDropdownOpen ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{cloudDropdownOpen && (
|
||||
<div className="absolute z-50 mt-2 w-44 origin-top-left scale-95 rounded-md border border-border bg-background shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-100 ease-out data-[state=open]:scale-100 max-xs:right-0 max-xs:origin-top-right xs:left-0">
|
||||
<div className="flex flex-col gap-1 p-2 text-sm text-muted-foreground">
|
||||
<Link
|
||||
href="/cloud"
|
||||
onClick={() => setCloudDropdownOpen(false)}
|
||||
className="rounded-md px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
|
||||
Cloud
|
||||
</Link>
|
||||
<Link
|
||||
href="/reviewer"
|
||||
onClick={() => setCloudDropdownOpen(false)}
|
||||
className="rounded-md px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
|
||||
PR Reviewer
|
||||
</Link>
|
||||
<Link
|
||||
href="/pr-fixer"
|
||||
onClick={() => setCloudDropdownOpen(false)}
|
||||
className="rounded-md px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
|
||||
PR Fixer
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DOCUMENTATION}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue