feat: Add indexing status badge to chat view (#4429)

src/shared/ExtensionMessage.ts

@@ -18,6 +18,20 @@ import { Mode } from "./modes"
 import { RouterModels } from "./api"
 import { MarketplaceItem } from "../services/marketplace/types"
 
+// Indexing status types
+export interface IndexingStatus {
+	systemStatus: string
+	message?: string
+	processedItems: number
+	totalItems: number
+	currentItemUnit?: string
+}
+
+export interface IndexingStatusUpdateMessage {
+	type: "indexingStatusUpdate"
+	values: IndexingStatus
+}
+
 export interface LanguageModelChatSelector {
 	vendor?: string
 	family?: string

webview-ui/src/App.tsx

@@ -166,6 +166,10 @@ const App = () => {
 				isHidden={tab !== "chat"}
 				showAnnouncement={showAnnouncement}
 				hideAnnouncement={() => setShowAnnouncement(false)}
+				onNavigateToSettings={() => {
+					switchTab("settings")
+					setCurrentSection("experimental")
+				}}
 			/>
 			<HumanRelayDialog
 				isOpen={humanRelayDialogState.isOpen}

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -26,6 +26,7 @@ import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
 import { VolumeX, Pin, Check } from "lucide-react"
 import { IconButton } from "./IconButton"
+import { IndexingStatusDot } from "./IndexingStatusBadge"
 import { cn } from "@/lib/utils"
 import { usePromptHistory } from "./hooks/usePromptHistory"
 
@@ -44,6 +45,7 @@ interface ChatTextAreaProps {
 	mode: Mode
 	setMode: (value: Mode) => void
 	modeShortcutText: string
+	onNavigateToSettings?: () => void
 }
 
 const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
@@ -63,6 +65,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			mode,
 			setMode,
 			modeShortcutText,
+			onNavigateToSettings,
 		},
 		ref,
 	) => {
@@ -78,6 +81,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			togglePinnedApiConfig,
 			taskHistory,
 			clineMessages,
+			codebaseIndexConfig,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration
@@ -1171,6 +1175,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					</div>
 
 					<div className={cn("flex", "items-center", "gap-0.5", "shrink-0")}>
+						{codebaseIndexConfig?.codebaseIndexEnabled && (
+							<IndexingStatusDot onNavigateToSettings={onNavigateToSettings} />
+						)}
 						<IconButton
 							iconClass={isEnhancingPrompt ? "codicon-loading" : "codicon-sparkle"}
 							title={t("chat:enhancePrompt")}

webview-ui/src/components/chat/ChatView.tsx

@@ -46,6 +46,7 @@ export interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
 	hideAnnouncement: () => void
+	onNavigateToSettings?: () => void
 }
 
 export interface ChatViewRef {
@@ -57,7 +58,7 @@ export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
-	{ isHidden, showAnnouncement, hideAnnouncement },
+	{ isHidden, showAnnouncement, hideAnnouncement, onNavigateToSettings },
 	ref,
 ) => {
 	const isMountedRef = useRef(true)
@@ -1546,6 +1547,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				mode={mode}
 				setMode={setMode}
 				modeShortcutText={modeShortcutText}
+				onNavigateToSettings={onNavigateToSettings}
 			/>
 
 			{isProfileDisabled && (

webview-ui/src/components/chat/IndexingStatusBadge.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useMemo } from "react"
+import { cn } from "@src/lib/utils"
+import { vscode } from "@src/utils/vscode"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useTooltip } from "@/hooks/useTooltip"
+import type { IndexingStatus, IndexingStatusUpdateMessage } from "@roo/ExtensionMessage"
+
+interface IndexingStatusDotProps {
+	onNavigateToSettings?: () => void
+	className?: string
+}
+
+export const IndexingStatusDot: React.FC<IndexingStatusDotProps> = ({ onNavigateToSettings, className }) => {
+	const { t } = useAppTranslation()
+	const { showTooltip, handleMouseEnter, handleMouseLeave, cleanup } = useTooltip({ delay: 300 })
+	const [isHovered, setIsHovered] = useState(false)
+
+	const [indexingStatus, setIndexingStatus] = useState<IndexingStatus>({
+		systemStatus: "Standby",
+		processedItems: 0,
+		totalItems: 0,
+		currentItemUnit: "items",
+	})
+
+	useEffect(() => {
+		// Request initial indexing status
+		vscode.postMessage({ type: "requestIndexingStatus" })
+
+		// Set up message listener for status updates
+		const handleMessage = (event: MessageEvent<IndexingStatusUpdateMessage>) => {
+			if (event.data.type === "indexingStatusUpdate") {
+				const status = event.data.values
+				setIndexingStatus(status)
+			}
+		}
+
+		window.addEventListener("message", handleMessage)
+
+		return () => {
+			window.removeEventListener("message", handleMessage)
+			cleanup()
+		}
+	}, [cleanup])
+
+	// Calculate progress percentage with memoization
+	const progressPercentage = useMemo(
+		() =>
+			indexingStatus.totalItems > 0
+				? Math.round((indexingStatus.processedItems / indexingStatus.totalItems) * 100)
+				: 0,
+		[indexingStatus.processedItems, indexingStatus.totalItems],
+	)
+
+	// Get tooltip text with internationalization
+	const getTooltipText = () => {
+		switch (indexingStatus.systemStatus) {
+			case "Standby":
+				return t("chat:indexingStatus.ready")
+			case "Indexing":
+				return t("chat:indexingStatus.indexing", { percentage: progressPercentage })
+			case "Indexed":
+				return t("chat:indexingStatus.indexed")
+			case "Error":
+				return t("chat:indexingStatus.error")
+			default:
+				return t("chat:indexingStatus.status")
+		}
+	}
+
+	// Navigate to settings when clicked
+	const handleClick = () => {
+		if (onNavigateToSettings) {
+			onNavigateToSettings()
+		}
+	}
+
+	const handleMouseEnterButton = () => {
+		setIsHovered(true)
+		handleMouseEnter()
+	}
+
+	const handleMouseLeaveButton = () => {
+		setIsHovered(false)
+		handleMouseLeave()
+	}
+
+	return (
+		<div className={cn("relative inline-block", className)}>
+			<button
+				onClick={handleClick}
+				onMouseEnter={handleMouseEnterButton}
+				onMouseLeave={handleMouseLeaveButton}
+				className={cn(
+					"flex items-center justify-center w-7 h-7 rounded-md",
+					"bg-transparent hover:bg-vscode-list-hoverBackground",
+					"cursor-pointer transition-all duration-200",
+					"opacity-85 hover:opacity-100 relative",
+				)}
+				aria-label={getTooltipText()}>
+				{/* Status dot */}
+				<span
+					className={cn(
+						"inline-block w-2 h-2 rounded-full relative z-10 transition-colors duration-200",
+						// Default state - always show muted color
+						!isHovered && "bg-vscode-descriptionForeground/60",
+						// Hover states - show status colors
+						isHovered && indexingStatus.systemStatus === "Standby" && "bg-vscode-descriptionForeground/60",
+						isHovered && indexingStatus.systemStatus === "Indexing" && "bg-yellow-500 animate-pulse",
+						isHovered && indexingStatus.systemStatus === "Indexed" && "bg-green-500",
+						isHovered && indexingStatus.systemStatus === "Error" && "bg-red-500",
+					)}
+				/>
+			</button>
+			{showTooltip && (
+				<div
+					className={cn(
+						"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+						"px-2 py-1 text-xs font-medium text-vscode-foreground",
+						"bg-vscode-editor-background border border-vscode-panel-border",
+						"rounded shadow-lg whitespace-nowrap z-50",
+					)}
+					role="tooltip">
+					{getTooltipText()}
+					<div
+						className={cn(
+							"absolute top-full left-1/2 transform -translate-x-1/2",
+							"w-0 h-0 border-l-4 border-r-4 border-t-4",
+							"border-l-transparent border-r-transparent border-t-vscode-panel-border",
+						)}
+					/>
+				</div>
+			)}
+		</div>
+	)
+}

webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx

@@ -126,6 +126,9 @@ describe("ChatTextArea", () => {
 
 			render(<ChatTextArea {...defaultProps} inputValue="" />)
 
+			// Clear any calls from component initialization (e.g., IndexingStatusBadge)
+			mockPostMessage.mockClear()
+
 			const enhanceButton = getEnhancePromptButton()
 			fireEvent.click(enhanceButton)