docs: add sunset notice for May 15 shutdown of Roo Code products

docs/index.mdx

@@ -13,6 +13,10 @@ keywords:
 
 # Roo Code Docs
 
+:::danger Sunsetting Roo Code on May 15, 2026
+**All Roo Code products (Extension, Cloud, and Router) will be shut down on May 15, 2026.** We will refund any unused balances. For alternatives, we recommend [Cline](https://github.com/cline/cline) (open-source extension) or [roomote.dev](https://roomote.dev) (our next project). For billing questions after May 15, contact [billing@roocode.com](mailto:billing@roocode.com). [Read the full details](/sunset).
+:::
+
 Roo Code is an AI-coding suite of products designed to take full advantage of the most advanced large-language models and change how you create software at a fundamental level. It's unapologetically powerful and customizable, and it costs more to run than the alternatives because it uses frontier models with actual file system access, terminal control, and multi-step workflows.
 
 Roo's approach is to trade tokens for quality. If you want the best and most effective AI coding experience available, this is it.

docs/sunset.md

@@ -0,0 +1,42 @@
+---
+sidebar_label: Sunsetting Roo Code
+sidebar_position: 0
+title: Sunsetting Roo Code (Extension, Cloud, and Router)
+description: Roo Code is sunsetting on May 15, 2026. Learn what this means for you, how to migrate, and where to find alternatives.
+keywords:
+  - Roo Code sunset
+  - Roo Code shutdown
+  - Roo Code end of life
+  - Roo Code migration
+  - Roo Code alternative
+---
+
+# Sunsetting Roo Code (Extension, Cloud, and Router)
+
+:::danger Important Notice
+**All Roo Code products will be shut down on May 15, 2026.** This includes the Roo Code VS Code Extension, Roo Code Cloud, and Roo Code Router.
+:::
+
+To our community: thank you. Your trust, contributions, and feedback helped us drive innovation in this space and pushed us past 3 million extension downloads. We don't take that lightly.
+
+That said, we don't believe IDEs are the future of coding. To keep pushing the future forward, we needed to make this difficult decision.
+
+## What this means for you
+
+- We will continue to support all existing Roo Code products through **May 15, 2026**.
+- On **May 15, 2026**, we will:
+  - Shut down **Roo Code Cloud**
+  - Shut down **Roo Code Router**
+  - **Refund any unused balances**
+  - Archive the **Roo Code Extension** repository
+- For billing questions after May 15, you can reach out to [billing@roocode.com](mailto:billing@roocode.com).
+
+## Looking for an alternative?
+
+### Open-source extension
+
+If you want a model-agnostic open-source extension, we recommend [Cline](https://github.com/cline/cline). They've incorporated much of what we built and are excited to welcome Roo Code users.
+
+### What we're building next
+
+If you're a fan of our cloud agents or curious about what we're building next, check out our new home at [roomote.dev](https://roomote.dev).

sidebars.ts

@@ -4,6 +4,7 @@ import modelProviders from "./docs/providers/index.json";
 const sidebars: SidebarsConfig = {
   tutorialSidebar: [
     "index",
+    "sunset",
     {
       type: "category",
       label: "Roo Code VSCode Extension",

src/components/AnnouncementBanner/index.tsx

@@ -1,52 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { VscGitPullRequest, VscClose } from 'react-icons/vsc';
+import React from 'react';
+import { VscWarning } from 'react-icons/vsc';
 import styles from './styles.module.css';
 
-// Change this key whenever you change the banner
-// to announce something new
-const BANNER_DISMISSED_KEY = 'reviewer-banner-dismissed';
-
 export function AnnouncementBanner() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    // Check if banner was previously dismissed
-    const isDismissed = localStorage.getItem(BANNER_DISMISSED_KEY);
-    if (!isDismissed) {
-      setIsVisible(true);
-    }
-  }, []);
-
-  const handleDismiss = () => {
-    setIsVisible(false);
-    localStorage.setItem(BANNER_DISMISSED_KEY, 'true');
-  };
-
-  if (!isVisible) {
-    return null;
-  }
-
   return (
-    <div className={styles.announcementBanner} role="complementary" aria-label="Product announcement">
+    <div className={styles.announcementBanner} role="alert" aria-label="Sunset notice">
       <div className={styles.bannerContent}>
-        <VscGitPullRequest size={20} color="#ffffff" />
+        <VscWarning size={20} color="#ffffff" />
         <span className={styles.bannerHeadline}>
-          Get comprehensive, actionable reviews directly in your PRs.
+          Roo Code (Extension, Cloud, and Router) is sunsetting on May 15, 2026.
         </span>
         <a
           className={styles.bannerLink}
-          href="https://roocode.com/reviewer?utm_source=docs&utm_medium=banner&utm_campaign=reviewer_promo"
-          target="_blank"
-          rel="noopener noreferrer">
-          Try Roo&apos;s PR Reviewer
+          href="/sunset">
+          Learn more
         </a>
-        <button
-          className={styles.dismissButton}
-          onClick={handleDismiss}
-          aria-label="Dismiss announcement"
-          type="button">
-          <VscClose size={18} />
-        </button>
       </div>
     </div>
   );

src/components/AnnouncementBanner/styles.module.css

@@ -1,9 +1,9 @@
 .announcementBanner {
   position: relative;
   width: 100%;
-  background: linear-gradient(90deg, #4f46e5, #2563eb);
-  border-bottom: 1px solid rgba(147, 197, 253, 0.5);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+  background: linear-gradient(90deg, #dc2626, #b91c1c);
+  border-bottom: 1px solid rgba(252, 165, 165, 0.5);
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
 }
 
 .bannerContent {
@@ -36,37 +36,11 @@
   text-decoration-color: rgba(255, 255, 255, 0.95);
 }
 
-.dismissButton {
-  position: absolute;
-  right: 1rem;
-  top: 1.5rem;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  padding: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-}
-
-.dismissButton:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.dismissButton:focus {
-  outline: 2px solid rgba(255, 255, 255, 0.5);
-  outline-offset: 2px;
-}
-
 @media (max-width: 768px) {
   .bannerContent {
     flex-direction: column;
     gap: 0.5rem;
-    padding: 1rem 3rem 1rem 1rem;
+    padding: 1rem;
     align-items: flex-start;
   }
 
@@ -77,8 +51,4 @@
   .bannerLink {
     font-size: 0.875rem;
   }
-
-  .dismissButton {
-    right: 0.5rem;
-  }
 }