feat: add spinning favicon during processing and implement rate limiting for Gemini API requests

- Introduced a new hook `useSpinningFavicon` to animate the favicon when processing is ongoing.
- Updated the `Header` component to utilize the new spinning favicon feature.
- Added a rate limit delay of 100ms between requests to the Gemini API in `GeminiAgent`.

src/services/worker/GeminiAgent.ts

@@ -264,6 +264,9 @@ export class GeminiAgent {
 
     const url = `${GEMINI_API_URL}/${model}:generateContent?key=${apiKey}`;
 
+    // Rate limit delay - Gemini API requires spacing between requests
+    await new Promise(resolve => setTimeout(resolve, 100));
+
     const response = await fetch(url, {
       method: 'POST',
       headers: {

src/ui/viewer/components/Header.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ThemeToggle } from './ThemeToggle';
 import { ThemePreference } from '../hooks/useTheme';
 import { GitHubStarsButton } from './GitHubStarsButton';
+import { useSpinningFavicon } from '../hooks/useSpinningFavicon';
 
 interface HeaderProps {
   isConnected: boolean;
@@ -26,6 +27,8 @@ export function Header({
   onThemeChange,
   onContextPreviewToggle
 }: HeaderProps) {
+  useSpinningFavicon(isProcessing);
+
   return (
     <div className="header">
       <h1>

src/ui/viewer/hooks/useSpinningFavicon.ts

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Hook that makes the browser tab favicon spin when isProcessing is true.
+ * Uses canvas to rotate the logo image and dynamically update the favicon.
+ */
+export function useSpinningFavicon(isProcessing: boolean) {
+  const animationRef = useRef<number | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const rotationRef = useRef(0);
+  const originalFaviconRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    // Create canvas once
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+      canvasRef.current.width = 32;
+      canvasRef.current.height = 32;
+    }
+
+    // Load image once
+    if (!imageRef.current) {
+      imageRef.current = new Image();
+      imageRef.current.src = 'claude-mem-logomark.webp';
+    }
+
+    // Store original favicon
+    if (!originalFaviconRef.current) {
+      const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      if (link) {
+        originalFaviconRef.current = link.href;
+      }
+    }
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const image = imageRef.current;
+
+    if (!ctx) return;
+
+    const updateFavicon = (dataUrl: string) => {
+      let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+      }
+      link.href = dataUrl;
+    };
+
+    const animate = () => {
+      if (!image.complete) {
+        animationRef.current = requestAnimationFrame(animate);
+        return;
+      }
+
+      // Rotate by ~4 degrees per frame (matches 1.5s for full rotation at 60fps)
+      rotationRef.current += (2 * Math.PI) / 90;
+
+      ctx.clearRect(0, 0, 32, 32);
+      ctx.save();
+      ctx.translate(16, 16);
+      ctx.rotate(rotationRef.current);
+      ctx.drawImage(image, -16, -16, 32, 32);
+      ctx.restore();
+
+      updateFavicon(canvas.toDataURL('image/png'));
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    if (isProcessing) {
+      rotationRef.current = 0;
+      animate();
+    } else {
+      // Stop animation and restore original favicon
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+      if (originalFaviconRef.current) {
+        updateFavicon(originalFaviconRef.current);
+      }
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, [isProcessing]);
+}