feat: add tooltips to auto-approve icons in collapsed view

- Wrapped each icon in StandardTooltip component
- Tooltips display the label for each auto-approve option
- Added test to verify tooltips appear on hover
- Helps users identify icons more easily in collapsed state

Author: roomote

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

@@ -213,16 +213,25 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						}}>
 						{!effectiveAutoApprovalEnabled || !hasEnabledOptions
 							? t("chat:autoApprove.none")
-							: enabledIcons.map((icon, index) => (
-									<span
-										key={index}
-										className={`codicon codicon-${icon}`}
-										style={{
-											fontSize: "14px",
-											flexShrink: 0,
-										}}
-									/>
-								))}
+							: enabledIcons.map((icon, index) => {
+									// Find the config for this icon to get the label
+									const config = Object.values(autoApproveSettingsConfig).find(
+										(cfg) => cfg.icon === icon,
+									)
+									const tooltipContent = config ? t(config.labelKey) : ""
+
+									return (
+										<StandardTooltip key={index} content={tooltipContent}>
+											<span
+												className={`codicon codicon-${icon}`}
+												style={{
+													fontSize: "14px",
+													flexShrink: 0,
+												}}
+											/>
+										</StandardTooltip>
+									)
+								})}
 					</span>
 					<span
 						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}

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

@@ -2,6 +2,7 @@ import { render, fireEvent, screen, waitFor } from "@/utils/test-utils"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { vscode } from "@src/utils/vscode"
 import AutoApproveMenu from "../AutoApproveMenu"
+import userEvent from "@testing-library/user-event"
 
 // Mock vscode API
 vi.mock("@src/utils/vscode", () => ({
@@ -230,6 +231,37 @@ describe("AutoApproveMenu", () => {
 			expect(container?.querySelector(".codicon-terminal")).toBeInTheDocument() // Execute
 		})
 
+		it("should display tooltips on icons in collapsed view", async () => {
+			const user = userEvent.setup()
+
+			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
+				...defaultExtensionState,
+				autoApprovalEnabled: true,
+				alwaysAllowReadOnly: true,
+				alwaysAllowWrite: true,
+				alwaysAllowExecute: true,
+			})
+
+			render(<AutoApproveMenu />)
+
+			// Find the icons
+			const container = screen.getByText("Auto-approve").parentElement?.parentElement
+			const eyeIcon = container?.querySelector(".codicon-eye") as HTMLElement
+			const editIcon = container?.querySelector(".codicon-edit") as HTMLElement
+			const terminalIcon = container?.querySelector(".codicon-terminal") as HTMLElement
+
+			// Verify icons are present
+			expect(eyeIcon).toBeInTheDocument()
+			expect(editIcon).toBeInTheDocument()
+			expect(terminalIcon).toBeInTheDocument()
+
+			// Test read-only icon tooltip
+			await user.hover(eyeIcon)
+			await waitFor(() => {
+				expect(screen.getByRole("tooltip")).toHaveTextContent("Read-only operations")
+			})
+		})
+
 		it("should handle enabling first option when none selected", async () => {
 			const mockSetAutoApprovalEnabled = vi.fn()
 			const mockSetAlwaysAllowReadOnly = vi.fn()