feat: add optional jumping roo animation for progress indicators

[roomote]

Summary

This PR attempts to address Issue #8747 by adding an optional jumping kangaroo animation that can replace the standard spinner for progress indicators throughout the application.

Changes

• ✨ Created new JumpingRoo component with CSS keyframes animation
• 🎛️ Added useJumpingRooAnimation setting to global settings
• 🔄 Updated ProgressIndicator to conditionally render based on setting
• ⚙️ Added toggle in Settings > UI panel
• 🌐 Added translation labels for the new setting
• 💾 Implemented backend state persistence for the setting

Features

• Default behavior unchanged: Standard spinner remains the default
• Persistent setting: User preference is saved across sessions
• Consistent size: Animation matches the existing 16px spinner size
• Smooth animation: Non-disruptive jumping animation with CSS keyframes
• Works across all themes: Compatible with light/dark themes

Testing

• ✅ Build succeeded with no errors
• ✅ All linting checks passed
• ✅ Type checking passed
• ✅ Existing tests continue to pass
• ✅ Manual testing confirms the animation works as expected

Screenshots

The jumping kangaroo animation replaces the standard spinner in 5 locations:

1. API requests
2. Command execution
3. MCP server operations
4. Context condensing
5. Browser session actions

References

Closes #8747

Note to Reviewers

This is my attempt at addressing this feature request. I see that @jmalmo also mentioned having a working version - feedback and collaboration are welcome to ensure we deliver the best implementation!

---

Important

Introduces an optional jumping kangaroo animation for progress indicators, configurable via a new UI setting and persisted across sessions.

• Behavior:
  • Adds JumpingRoo component for optional kangaroo animation in JumpingRoo.tsx.
  • Updates ProgressIndicator in ProgressIndicator.tsx to use JumpingRoo based on useJumpingRooAnimation setting.
  • Default spinner remains unless useJumpingRooAnimation is enabled.
• Settings:
  • Adds useJumpingRooAnimation to global settings in global-settings.ts.
  • Adds UI toggle for useJumpingRooAnimation in UISettings.tsx and SettingsView.tsx.
  • Persists useJumpingRooAnimation state in ExtensionStateContext.tsx.
• Translations:
  • Adds translation entries for jumpingRooAnimation in settings.json.
• Misc:
  • Adds setUseJumpingRooAnimation case in webviewMessageHandler.ts for state updates.

^{This description was created by for 88fc49d. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Review Summary

✅ No issues found - This PR is ready to merge!

I've completed a thorough review of all changes and found no issues. The implementation is clean, well-structured, and follows all project conventions.

What was reviewed:

• ✅ State management and persistence
• ✅ UI component implementation
• ✅ Type definitions and contracts
• ✅ Translation strings
• ✅ Code quality and patterns
• ✅ Security considerations
• ✅ Performance implications

Key strengths:

1. Proper state management: The useJumpingRooAnimation setting is correctly integrated into the global settings schema and persisted across sessions
2. Clean UI implementation: The JumpingRoo component uses pure CSS animations with no external dependencies
3. Consistent patterns: All changes follow existing codebase patterns for settings, state management, and UI components
4. Complete implementation: Backend persistence, frontend state management, UI toggle, and translations are all properly implemented
5. Non-breaking: Default behavior remains unchanged (standard spinner is default)

Great work on this feature! The jumping kangaroo animation is a fun addition that maintains the Roo Code brand identity while being completely optional for users who prefer the standard spinner.

[roomote]

No issues found.