From 3e9aba777770a7dfe9754b68132078cba5ba4ef9 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Thu, 21 Aug 2025 15:04:50 +0000
Subject: [PATCH] feat: add notification indicator to version number for new
 announcements

---
 webview-ui/src/components/chat/ChatView.tsx           |  2 ++
 webview-ui/src/components/common/VersionIndicator.tsx | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 3b77bbdb7d..435ca32042 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -117,6 +117,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		soundEnabled,
 		soundVolume,
 		cloudIsAuthenticated,
+		shouldShowAnnouncement,
 	} = useExtensionState()
 
 	const messagesRef = useRef(messages)
@@ -1829,6 +1830,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						<VersionIndicator
 							onClick={() => setShowAnnouncementModal(true)}
 							className="absolute top-2 right-3 z-10"
+							showNotification={shouldShowAnnouncement}
 						/>
 
 						<RooHero />
diff --git a/webview-ui/src/components/common/VersionIndicator.tsx b/webview-ui/src/components/common/VersionIndicator.tsx
index 1776a2d39a..a91f3ec4c4 100644
--- a/webview-ui/src/components/common/VersionIndicator.tsx
+++ b/webview-ui/src/components/common/VersionIndicator.tsx
@@ -5,17 +5,24 @@ import { Package } from "@roo/package"
 interface VersionIndicatorProps {
 	onClick: () => void
 	className?: string
+	showNotification?: boolean
 }
 
-const VersionIndicator: React.FC<VersionIndicatorProps> = ({ onClick, className = "" }) => {
+const VersionIndicator: React.FC<VersionIndicatorProps> = ({ onClick, className = "", showNotification = false }) => {
 	const { t } = useTranslation()
 
 	return (
 		<button
 			onClick={onClick}
-			className={`text-xs text-vscode-descriptionForeground hover:text-vscode-foreground transition-colors cursor-pointer px-2 py-1 rounded border ${className}`}
+			className={`relative text-xs text-vscode-descriptionForeground hover:text-vscode-foreground transition-colors cursor-pointer px-2 py-1 rounded border ${className}`}
 			aria-label={t("chat:versionIndicator.ariaLabel", { version: Package.version })}>
 			v{Package.version}
+			{showNotification && (
+				<span
+					className="absolute -top-1 -right-1 w-2 h-2 bg-vscode-badge-background rounded-full animate-pulse"
+					aria-label={t("chat:versionIndicator.newAnnouncement")}
+				/>
+			)}
 		</button>
 	)
 }