Add ThinkingSpinner component to webview

- Create ThinkingSpinner component for webview with animated Braille frames
- Update ProgressIndicator to support optional animated spinner display
- Integrate ThinkingSpinner into ChatRow for API requests, commands, and MCP server responses
- Add animated spinner to BrowserSessionRow when browsing
- Add comprehensive tests for ThinkingSpinner component

Amp-Thread-ID: https://ampcode.com/threads/T-134f70aa-d045-4045-9327-599c050b929b
Co-authored-by: Amp <amp@ampcode.com>

Author: Amp

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

@@ -235,10 +235,16 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 		? latestClickPosition || displayState.mousePosition
 		: displayState.mousePosition || defaultMousePosition
 
+	const { isStreaming } = props
+
 	const [browserSessionRow, { height: rowHeight }] = useSize(
 		<div style={{ padding: "10px 6px 10px 15px", marginBottom: -10 }}>
 			<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }}>
-				{isBrowsing ? <ProgressIndicator /> : <Pointer className="w-4" aria-label="Browser action indicator" />}
+				{isBrowsing ? (
+					<ProgressIndicator useSpinner={isStreaming} />
+				) : (
+					<Pointer className="w-4" aria-label="Browser action indicator" />
+				)}
 				<span style={{ fontWeight: "bold" }}>
 					<>{t("chat:browser.rooWantsToUse")}</>
 				</span>

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

@@ -267,7 +267,7 @@ export const ChatRowContent = ({
 			case "command":
 				return [
 					isCommandExecuting ? (
-						<ProgressIndicator />
+						<ProgressIndicator useSpinner={isStreaming} />
 					) : (
 						<TerminalSquare className="size-4" aria-label="Terminal icon" />
 					),
@@ -282,7 +282,7 @@ export const ChatRowContent = ({
 				}
 				return [
 					isMcpServerResponding ? (
-						<ProgressIndicator />
+						<ProgressIndicator useSpinner={isStreaming} />
 					) : (
 						<span
 							className="codicon codicon-server"
@@ -331,7 +331,7 @@ export const ChatRowContent = ({
 					) : apiRequestFailedMessage ? (
 						getIconSpan("error", errorColor)
 					) : (
-						<ProgressIndicator />
+						<ProgressIndicator useSpinner={isStreaming} />
 					),
 					apiReqCancelReason !== null && apiReqCancelReason !== undefined ? (
 						apiReqCancelReason === "user_cancelled" ? (

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

@@ -1,16 +1,31 @@
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import { ThinkingSpinner } from "./ThinkingSpinner"
 
-export const ProgressIndicator = () => (
-	<div
-		style={{
-			width: "16px",
-			height: "16px",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-		}}>
-		<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
-			<VSCodeProgressRing />
+interface ProgressIndicatorProps {
+	useSpinner?: boolean
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ useSpinner = false }) => {
+	if (useSpinner) {
+		return (
+			<div style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
+				<ThinkingSpinner className="text-vscode-foreground" />
+			</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/chat/ThinkingSpinner.tsx

@@ -0,0 +1,31 @@
+/**
+ * ThinkingSpinner - Animated spinner for the thinking state
+ * Shows an animated loading spinner with "Thinking..." text
+ */
+
+import React, { useEffect, useState } from "react"
+
+interface ThinkingSpinnerProps {
+	className?: string
+}
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+const ANIMATION_INTERVAL = 80 // ms per frame
+
+/**
+ * Displays an animated spinner with "Thinking..." text
+ * Uses Braille Unicode characters for smooth animation
+ */
+export const ThinkingSpinner: React.FC<ThinkingSpinnerProps> = ({ className = "" }) => {
+	const [frameIndex, setFrameIndex] = useState(0)
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setFrameIndex((prev) => (prev + 1) % SPINNER_FRAMES.length)
+		}, ANIMATION_INTERVAL)
+
+		return () => clearInterval(interval)
+	}, [])
+
+	return <span className={className}>{SPINNER_FRAMES[frameIndex]} Thinking...</span>
+}

webview-ui/src/components/chat/__tests__/ThinkingSpinner.spec.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { ThinkingSpinner } from "../ThinkingSpinner"
+
+describe("ThinkingSpinner", () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.runOnlyPendingTimers()
+		vi.useRealTimers()
+	})
+
+	it("renders with initial frame", () => {
+		render(<ThinkingSpinner />)
+		const element = screen.getByText(/Thinking/i)
+		expect(element).toBeInTheDocument()
+		expect(element.textContent).toContain("⠋ Thinking...")
+	})
+
+	it("animates through frames", () => {
+		render(<ThinkingSpinner />)
+		const element = screen.getByText(/Thinking/i)
+
+		// Initial frame should be ⠋
+		expect(element.textContent).toBe("⠋ Thinking...")
+
+		// Advance by one animation interval (80ms)
+		vi.advanceTimersByTime(80)
+		expect(element.textContent).toBe("⠙ Thinking...")
+
+		// Advance by another interval
+		vi.advanceTimersByTime(80)
+		expect(element.textContent).toBe("⠹ Thinking...")
+	})
+
+	it("cycles through all frames", () => {
+		render(<ThinkingSpinner />)
+		const element = screen.getByText(/Thinking/i)
+		const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+		// Advance through all frames
+		for (let i = 0; i < SPINNER_FRAMES.length; i++) {
+			expect(element.textContent).toContain(SPINNER_FRAMES[i])
+			if (i < SPINNER_FRAMES.length - 1) {
+				vi.advanceTimersByTime(80)
+			}
+		}
+
+		// Advance one more time to wrap around
+		vi.advanceTimersByTime(80)
+		expect(element.textContent).toContain(SPINNER_FRAMES[0])
+	})
+
+	it("accepts className prop", () => {
+		render(<ThinkingSpinner className="text-blue-500" />)
+		const element = screen.getByText(/Thinking/i)
+		expect(element).toHaveClass("text-blue-500")
+	})
+
+	it("cleans up interval on unmount", () => {
+		const clearIntervalSpy = vi.spyOn(global, "clearInterval")
+		const { unmount } = render(<ThinkingSpinner />)
+
+		unmount()
+
+		expect(clearIntervalSpy).toHaveBeenCalled()
+		clearIntervalSpy.mockRestore()
+	})
+})