From 1f379500ec8f689965e9f1d4bc3d2c0b4783aae2 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 28 Oct 2025 10:03:32 -0400 Subject: [PATCH 1/4] Add how it works section to reviewer landing page --- .../src/app/reviewer/ReviewerContent.tsx | 68 ++++++++++++++++++- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx index 7abcea5ce04f..6f66baa0bebf 100644 --- a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx +++ b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx @@ -1,6 +1,15 @@ "use client" -import { ArrowRight, Blocks, BookMarked, ListChecks, LucideIcon } 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" @@ -16,6 +25,26 @@ interface Feature { 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 Comprehensive Reviews", + description: + "Every pull request gets instant, detailed feedback from a Roo Code agent highlighting issues and suggesting improvements.", + }, +] + const howItWorks: Feature[] = [ { icon: Blocks, @@ -68,7 +97,7 @@ export function ReviewerContent() {

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 PR queue moving. + your pull request queue moving.

@@ -109,6 +138,41 @@ export function ReviewerContent() { + {/* How It Works Section */} +
+
+
+
+

How It Works

+

+ Get started with comprehensive code reviews in three simple steps +

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

    {step.title}

    +
    + {step.description} +
    +
    • + ) + })} +
+
+
+
+
From 5492cf3c5a2e47b9a67f70ac67a7f8970632e04b Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 28 Oct 2025 10:27:45 -0400 Subject: [PATCH 2/4] Copy tweaks --- apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx index 6f66baa0bebf..41fbe5c42c3f 100644 --- a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx +++ b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx @@ -41,7 +41,7 @@ const workflowSteps: Feature[] = [ icon: MessageSquareCode, title: "3. Get Comprehensive Reviews", description: - "Every pull request gets instant, detailed feedback from a Roo Code agent highlighting issues and suggesting improvements.", + "Every pull request gets detailed comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", }, ] @@ -145,7 +145,7 @@ export function ReviewerContent() {

How It Works

- Get started with comprehensive code reviews in three simple steps + Get started with AI code reviews in three simple steps

From 3af9f80cc73ba9059041dc904dcdf2e6b488d401 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 28 Oct 2025 10:31:07 -0400 Subject: [PATCH 3/4] Style tweaks --- .../src/app/reviewer/ReviewerContent.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx index 41fbe5c42c3f..ebfdf1a11efe 100644 --- a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx +++ b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx @@ -139,14 +139,11 @@ export function ReviewerContent() {
{/* How It Works Section */} -
+

How It Works

-

- Get started with AI code reviews in three simple steps -

@@ -158,10 +155,10 @@ export function ReviewerContent() {
  • -
    - -
    -

    {step.title}

    + +

    + {step.title} +

    {step.description}
    From 0282481e484df24424a16fadef494716fa87a457 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 28 Oct 2025 10:32:46 -0400 Subject: [PATCH 4/4] Language --- apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx index ebfdf1a11efe..f8ccb9abaffc 100644 --- a/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx +++ b/apps/web-roo-code/src/app/reviewer/ReviewerContent.tsx @@ -39,9 +39,9 @@ const workflowSteps: Feature[] = [ }, { icon: MessageSquareCode, - title: "3. Get Comprehensive Reviews", + title: "3. Get Review Comments", description: - "Every pull request gets detailed comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", + "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", }, ]