feat: replace static API Request label with customizable animated indicator

- Add AnimatedStatusIndicator component with pulsing animation
- Support customizable status texts and emoji mode
- Add settings UI for configuring the animated indicator
- Include random mode to cycle through messages
- Add CSS animations for subtle pulse effect
- Integrate with ChatRow to replace static label

Implements #7523

Author: roomote

src/shared/WebviewMessage.ts

@@ -212,6 +212,7 @@ export interface WebviewMessage {
 		| "createCommand"
 		| "insertTextIntoTextarea"
 		| "showMdmAuthRequiredNotification"
+		| "apiStatusConfig"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+
+interface AnimatedStatusIndicatorProps {
+	isStreaming: boolean
+	cost?: number | null
+	cancelReason?: string | null
+	apiRequestFailedMessage?: string
+	streamingFailedMessage?: string
+}
+
+const DEFAULT_STATUS_TEXTS = ["Generating...", "Thinking...", "Working on it...", "Processing...", "Analyzing..."]
+
+const DEFAULT_EMOJIS = [
+	"🤔", // Thinking
+	"🧠", // Brainstorming
+	"⏳", // Loading
+	"✨", // Magic
+	"🔮", // Summoning
+	"💭", // Thought bubble
+	"⚡", // Lightning
+	"🎯", // Target
+]
+
+export const AnimatedStatusIndicator: React.FC<AnimatedStatusIndicatorProps> = ({
+	isStreaming,
+	cost,
+	cancelReason,
+	apiRequestFailedMessage,
+}) => {
+	const { t } = useTranslation()
+	const { apiStatusConfig = {} } = useExtensionState()
+
+	// Configuration with defaults
+	const config = useMemo(
+		() => ({
+			enabled: apiStatusConfig.enabled !== false,
+			statusTexts:
+				apiStatusConfig.customTexts && apiStatusConfig.customTexts.length > 0
+					? apiStatusConfig.customTexts
+					: DEFAULT_STATUS_TEXTS,
+			emojisEnabled: apiStatusConfig.emojisEnabled === true,
+			emojis:
+				apiStatusConfig.customEmojis && apiStatusConfig.customEmojis.length > 0
+					? apiStatusConfig.customEmojis
+					: DEFAULT_EMOJIS,
+			randomMode: apiStatusConfig.randomMode !== false,
+			cycleInterval: apiStatusConfig.cycleInterval || 5000, // 5 seconds default
+		}),
+		[apiStatusConfig],
+	)
+
+	const [currentTextIndex, setCurrentTextIndex] = useState(0)
+	const [currentEmojiIndex, setCurrentEmojiIndex] = useState(0)
+
+	// Cycle through status texts and emojis
+	useEffect(() => {
+		if (!config.enabled || !isStreaming || !config.randomMode) return
+
+		const interval = setInterval(() => {
+			setCurrentTextIndex((prev) => (prev + 1) % config.statusTexts.length)
+
+			if (config.emojisEnabled) {
+				setCurrentEmojiIndex((prev) => (prev + 1) % config.emojis.length)
+			}
+		}, config.cycleInterval)
+
+		return () => clearInterval(interval)
+	}, [config, isStreaming])
+
+	// Determine what text to show
+	const statusText = useMemo(() => {
+		if (cancelReason === "user_cancelled") {
+			return t("chat:apiRequest.cancelled")
+		}
+		if (cancelReason) {
+			return t("chat:apiRequest.streamingFailed")
+		}
+		if (cost !== null && cost !== undefined) {
+			return t("chat:apiRequest.title")
+		}
+		if (apiRequestFailedMessage) {
+			return t("chat:apiRequest.failed")
+		}
+		if (isStreaming && config.enabled) {
+			return config.statusTexts[currentTextIndex]
+		}
+		return t("chat:apiRequest.streaming")
+	}, [cancelReason, cost, apiRequestFailedMessage, isStreaming, config, currentTextIndex, t])
+
+	// Don't show animated indicator if request is complete or failed
+	if (!isStreaming || cost !== null || cancelReason || apiRequestFailedMessage) {
+		return null
+	}
+
+	// If animation is disabled, return null (ChatRow will show default)
+	if (!config.enabled) {
+		return null
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			{config.emojisEnabled && (
+				<span className="text-base animate-pulse-subtle">{config.emojis[currentEmojiIndex]}</span>
+			)}
+			<span
+				className="text-vscode-foreground animate-pulse-subtle"
+				style={{
+					fontWeight: "bold",
+					opacity: 0.9,
+				}}>
+				{statusText}
+			</span>
+		</div>
+	)
+}

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

@@ -35,6 +35,7 @@ import { FollowUpSuggest } from "./FollowUpSuggest"
 import { BatchFilePermission } from "./BatchFilePermission"
 import { BatchDiffApproval } from "./BatchDiffApproval"
 import { ProgressIndicator } from "./ProgressIndicator"
+import { AnimatedStatusIndicator } from "./AnimatedStatusIndicator"
 import { Markdown } from "./Markdown"
 import { CommandExecution } from "./CommandExecution"
 import { CommandExecutionError } from "./CommandExecutionError"
@@ -252,6 +253,14 @@ export const ChatRowContent = ({
 						<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:apiRequest.title")}</span>
 					) : apiRequestFailedMessage ? (
 						<span style={{ color: errorColor, fontWeight: "bold" }}>{t("chat:apiRequest.failed")}</span>
+					) : isStreaming ? (
+						<AnimatedStatusIndicator
+							isStreaming={true}
+							cost={cost}
+							cancelReason={apiReqCancelReason}
+							apiRequestFailedMessage={apiRequestFailedMessage}
+							streamingFailedMessage={apiReqStreamingFailedMessage}
+						/>
 					) : (
 						<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:apiRequest.streaming")}</span>
 					),
@@ -267,7 +276,18 @@ export const ChatRowContent = ({
 			default:
 				return [null, null]
 		}
-	}, [type, isCommandExecuting, message, isMcpServerResponding, apiReqCancelReason, cost, apiRequestFailedMessage, t])
+	}, [
+		type,
+		isCommandExecuting,
+		message,
+		isMcpServerResponding,
+		apiReqCancelReason,
+		cost,
+		apiRequestFailedMessage,
+		apiReqStreamingFailedMessage,
+		isStreaming,
+		t,
+	])
 
 	const headerStyle: React.CSSProperties = {
 		display: "flex",
@@ -968,6 +988,9 @@ export const ChatRowContent = ({
 						/>
 					)
 				case "api_req_started":
+					// Check if we should show the animated indicator
+					const showAnimated = isLast && !cost && !apiReqCancelReason && !apiRequestFailedMessage
+
 					return (
 						<>
 							<div
@@ -987,8 +1010,23 @@ export const ChatRowContent = ({
 								}}
 								onClick={handleToggleExpand}>
 								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
-									{icon}
-									{title}
+									{showAnimated ? (
+										<>
+											<ProgressIndicator />
+											<AnimatedStatusIndicator
+												isStreaming={true}
+												cost={cost}
+												cancelReason={apiReqCancelReason}
+												apiRequestFailedMessage={apiRequestFailedMessage}
+												streamingFailedMessage={apiReqStreamingFailedMessage}
+											/>
+										</>
+									) : (
+										<>
+											{icon}
+											{title}
+										</>
+									)}
 									<VSCodeBadge
 										style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}>
 										${Number(cost || 0)?.toFixed(4)}