feat: add optional Roo loading animation

packages/types/src/global-settings.ts

@@ -148,6 +148,7 @@ export const globalSettingsSchema = z.object({
 	includeTaskHistoryInEnhance: z.boolean().optional(),
 	historyPreviewCollapsed: z.boolean().optional(),
 	reasoningBlockCollapsed: z.boolean().optional(),
+	useKangarooAnimation: z.boolean().optional(),
 	profileThresholds: z.record(z.string(), z.number()).optional(),
 	hasOpenedModeSelector: z.boolean().optional(),
 	lastModeExportPath: z.string().optional(),

src/core/webview/ClineProvider.ts

@@ -1793,6 +1793,7 @@ export class ClineProvider
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
+			useKangarooAnimation,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,
@@ -1927,6 +1928,7 @@ export class ClineProvider
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
+			useKangarooAnimation: useKangarooAnimation ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
 			cloudOrganizations,
@@ -2142,6 +2144,7 @@ export class ClineProvider
 			maxConcurrentFileReads: stateValues.maxConcurrentFileReads ?? 5,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
+			useKangarooAnimation: stateValues.useKangarooAnimation ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,

src/core/webview/webviewMessageHandler.ts

@@ -1621,6 +1621,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("reasoningBlockCollapsed", message.bool ?? true)
 			// No need to call postStateToWebview here as the UI already updated optimistically
 			break
+		case "useKangarooAnimation":
+			await updateGlobalState("useKangarooAnimation", message.bool ?? false)
+			// No need to call postStateToWebview here as the UI already updated optimistically
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/shared/ExtensionMessage.ts

@@ -288,6 +288,7 @@ export type ExtensionState = Pick<
 	| "openRouterImageGenerationSelectedModel"
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
+	| "useKangarooAnimation"
 > & {
 	version: string
 	clineMessages: ClineMessage[]

src/shared/WebviewMessage.ts

@@ -195,6 +195,7 @@ export interface WebviewMessage {
 		| "profileThresholds"
 		| "setHistoryPreviewCollapsed"
 		| "setReasoningBlockCollapsed"
+		| "useKangarooAnimation"
 		| "openExternal"
 		| "filterMarketplaceItems"
 		| "marketplaceButtonClicked"

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

@@ -0,0 +1,70 @@
+import React from "react"
+
+interface KangarooLoaderProps {
+	className?: string
+	style?: React.CSSProperties
+}
+
+/**
+ * KangarooLoader - Animated kangaroo icon for progress indication
+ *
+ * The kangaroo icon is an inline SVG (embedded directly in the component).
+ * It uses a vector path definition to create the kangaroo silhouette.
+ *
+ * Size is fixed to match VSCodeProgressRing (16px) for consistent UI.
+ * Animation duration is 0.7s for a smooth, quick bounce effect.
+ */
+export const KangarooLoader: React.FC<KangarooLoaderProps> = ({ className = "", style }) => {
+	return (
+		<div
+			className={`inline-block ${className}`}
+			style={{
+				width: "16px",
+				height: "16px",
+				position: "relative",
+				...style,
+			}}>
+			<div
+				style={{
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					animation: "roo-jump 0.7s ease-in-out infinite",
+				}}>
+				<svg
+					width="106"
+					height="69"
+					viewBox="0 0 106 69"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					style={{
+						width: "100%",
+						height: "100%",
+						color: "currentColor",
+						filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))",
+					}}>
+					<path
+						d="M88.4719 2.87946L86.5306 9.89906C86.4278 10.2707 86.0399 10.4854 85.6704 10.3752L53.106 0.659112C52.8894 0.594492 52.6549 0.640312 52.4786 0.781722L20.2279 26.6445C20.1338 26.72 20.0214 26.7694 19.9021 26.7878L0.713159 29.745C0.357849 29.7998 0.10453 30.1187 0.13164 30.4772L0.21502 31.5798C0.24165 31.932 0.53052 32.2069 0.88359 32.216L23.1724 32.7922L23.4266 32.7993L39.8958 24.0019C40.1264 23.8788 40.4068 23.8968 40.6197 24.0486L52.2875 32.3659C52.4705 32.4963 52.5783 32.7078 52.5762 32.9325L52.4778 43.9686C52.4765 44.1114 52.5197 44.2511 52.6014 44.3683L69.0144 67.9188C69.1431 68.1034 69.354 68.2135 69.5791 68.2135H74.7748C75.2932 68.2135 75.6255 67.6623 75.3836 67.2039L63.6853 45.0427C63.5709 44.8259 63.5804 44.5647 63.7101 44.3568L69.8094 34.5861C69.8758 34.4797 69.97 34.3935 70.0819 34.3367L91.8879 23.2712C92.1095 23.1588 92.3744 23.1745 92.5812 23.3123L98.8125 27.4657C98.9256 27.5411 99.0584 27.5813 99.1943 27.5813H104.856C105.404 27.5813 105.732 26.9716 105.43 26.514L89.7099 2.6839C89.3844 2.19053 88.6294 2.30979 88.4719 2.87946Z"
+						fill="currentColor"
+					/>
+				</svg>
+			</div>
+			<style>{`
+				@keyframes roo-jump {
+					0%, 100% {
+						transform: translateY(0) rotate(0deg);
+					}
+					25% {
+						transform: translateY(-30%) rotate(-3deg);
+					}
+					50% {
+						transform: translateY(-40%) rotate(0deg);
+					}
+					75% {
+						transform: translateY(-30%) rotate(3deg);
+					}
+				}
+			`}</style>
+		</div>
+	)
+}

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

@@ -1,16 +1,37 @@
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { KangarooLoader } from "./KangarooLoader"
 
-export const ProgressIndicator = () => (
-	<div
-		style={{
-			width: "16px",
-			height: "16px",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-		}}>
-		<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
-			<VSCodeProgressRing />
+export const ProgressIndicator = () => {
+	const { useKangarooAnimation } = useExtensionState()
+
+	if (useKangarooAnimation) {
+		return (
+			<div
+				style={{
+					width: "16px",
+					height: "16px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}>
+				<KangarooLoader />
+			</div>
+		)
+	}
+
+	return (
+		<div
+			style={{
+				width: "16px",
+				height: "16px",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+			}}>
+			<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
+				<VSCodeProgressRing />
+			</div>
 		</div>
-	</div>
-)
+	)
+}

webview-ui/src/components/settings/SettingsView.tsx

@@ -195,6 +195,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		openRouterImageApiKey,
 		openRouterImageGenerationSelectedModel,
 		reasoningBlockCollapsed,
+		useKangarooAnimation,
 	} = cachedState
 
 	const apiConfiguration = useMemo(() => cachedState.apiConfiguration ?? {}, [cachedState.apiConfiguration])
@@ -384,6 +385,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "updateSupportPrompt", values: customSupportPrompts || {} })
 			vscode.postMessage({ type: "includeTaskHistoryInEnhance", bool: includeTaskHistoryInEnhance ?? true })
 			vscode.postMessage({ type: "setReasoningBlockCollapsed", bool: reasoningBlockCollapsed ?? true })
+			vscode.postMessage({ type: "useKangarooAnimation", bool: useKangarooAnimation ?? false })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
 			vscode.postMessage({ type: "profileThresholds", values: profileThresholds })
@@ -782,6 +784,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					{activeTab === "ui" && (
 						<UISettings
 							reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
+							useKangarooAnimation={useKangarooAnimation ?? false}
 							setCachedStateField={setCachedStateField}
 						/>
 					)}

webview-ui/src/components/settings/UISettings.tsx

@@ -11,10 +11,16 @@ import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 
 interface UISettingsProps extends HTMLAttributes<HTMLDivElement> {
 	reasoningBlockCollapsed: boolean
+	useKangarooAnimation?: boolean
 	setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType>
 }
 
-export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...props }: UISettingsProps) => {
+export const UISettings = ({
+	reasoningBlockCollapsed,
+	useKangarooAnimation = false,
+	setCachedStateField,
+	...props
+}: UISettingsProps) => {
 	const { t } = useAppTranslation()
 
 	const handleReasoningBlockCollapsedChange = (value: boolean) => {
@@ -26,6 +32,15 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 		})
 	}
 
+	const handleKangarooAnimationChange = (value: boolean) => {
+		setCachedStateField("useKangarooAnimation", value)
+
+		// Track telemetry event
+		telemetryClient.capture("ui_settings_kangaroo_animation_changed", {
+			enabled: value,
+		})
+	}
+
 	return (
 		<div {...props}>
 			<SectionHeader>
@@ -49,6 +64,19 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 							{t("settings:ui.collapseThinking.description")}
 						</div>
 					</div>
+
+					{/* Kangaroo Animation Setting */}
+					<div className="flex flex-col gap-1">
+						<VSCodeCheckbox
+							checked={useKangarooAnimation}
+							onChange={(e: any) => handleKangarooAnimationChange(e.target.checked)}
+							data-testid="kangaroo-animation-checkbox">
+							<span className="font-medium">{t("settings:ui.kangarooAnimation.label")}</span>
+						</VSCodeCheckbox>
+						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+							{t("settings:ui.kangarooAnimation.description")}
+						</div>
+					</div>
 				</div>
 			</Section>
 		</div>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -158,6 +158,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setMaxDiagnosticMessages: (value: number) => void
 	includeTaskHistoryInEnhance?: boolean
 	setIncludeTaskHistoryInEnhance: (value: boolean) => void
+	useKangarooAnimation: boolean
+	setUseKangarooAnimation: (value: boolean) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -285,6 +287,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		global: {},
 	})
 	const [includeTaskHistoryInEnhance, setIncludeTaskHistoryInEnhance] = useState(true)
+	const [useKangarooAnimation, setUseKangarooAnimation] = useState(false) // Default to false (use spinner)
 
 	const setListApiConfigMeta = useCallback(
 		(value: ProviderSettingsEntry[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),
@@ -322,6 +325,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					if ((newState as any).includeTaskHistoryInEnhance !== undefined) {
 						setIncludeTaskHistoryInEnhance((newState as any).includeTaskHistoryInEnhance)
 					}
+					// Update useKangarooAnimation if present in state message
+					if ((newState as any).useKangarooAnimation !== undefined) {
+						setUseKangarooAnimation((newState as any).useKangarooAnimation)
+					}
 					// Handle marketplace data if present in state message
 					if (newState.marketplaceItems !== undefined) {
 						setMarketplaceItems(newState.marketplaceItems)
@@ -559,6 +566,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		},
 		includeTaskHistoryInEnhance,
 		setIncludeTaskHistoryInEnhance,
+		useKangarooAnimation,
+		setUseKangarooAnimation,
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>

webview-ui/src/i18n/locales/en/settings.json

@@ -42,6 +42,10 @@
 		"collapseThinking": {
 			"label": "Collapse Thinking messages by default",
 			"description": "When enabled, thinking blocks will be collapsed by default until you interact with them"
+		},
+		"kangarooAnimation": {
+			"label": "Use jumping Roo animation",
+			"description": "Replace the default spinner with a jumping Roo animation for progress indicators"
 		}
 	},
 	"prompts": {