diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx
index 0feafae15d..4f67cad914 100644
--- a/webview-ui/src/components/chat/AutoApproveMenu.tsx
+++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx
@@ -129,18 +129,12 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
setIsExpanded((prev) => !prev)
}, [])
- const enabledActionsList = Object.entries(toggles)
- .filter(([_key, value]) => !!value)
- .map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
- .join(", ")
-
- // Update displayed text logic
- const displayText = useMemo(() => {
- if (!effectiveAutoApprovalEnabled || !hasEnabledOptions) {
- return t("chat:autoApprove.none")
- }
- return enabledActionsList || t("chat:autoApprove.none")
- }, [effectiveAutoApprovalEnabled, hasEnabledOptions, enabledActionsList, t])
+ // Get enabled icons for display
+ const enabledIcons = useMemo(() => {
+ return Object.entries(toggles)
+ .filter(([_key, value]) => !!value)
+ .map(([key]) => autoApproveSettingsConfig[key as AutoApproveSetting].icon)
+ }, [toggles])
const handleOpenSettings = useCallback(
() =>
@@ -213,8 +207,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
whiteSpace: "nowrap",
flex: 1,
minWidth: 0,
+ display: "flex",
+ alignItems: "center",
+ gap: "6px",
}}>
- {displayText}
+ {!effectiveAutoApprovalEnabled || !hasEnabledOptions
+ ? t("chat:autoApprove.none")
+ : enabledIcons.map((icon, index) => (
+
+ ))}
{
render()
- // Check that the text shows the enabled option
- expect(screen.getByText("Read-only operations")).toBeInTheDocument()
+ // Check that the icon for read-only operations is shown
+ const container = screen.getByText("Auto-approve").parentElement?.parentElement
+ expect(container?.querySelector(".codicon-eye")).toBeInTheDocument()
})
it("should not allow toggling master checkbox when no options are selected", () => {
@@ -222,8 +223,11 @@ describe("AutoApproveMenu", () => {
render()
- // Should show all enabled options in the summary
- expect(screen.getByText("Read-only operations, Write operations, Execute operations")).toBeInTheDocument()
+ // Should show icons for all enabled options
+ const container = screen.getByText("Auto-approve").parentElement?.parentElement
+ expect(container?.querySelector(".codicon-eye")).toBeInTheDocument() // Read
+ expect(container?.querySelector(".codicon-edit")).toBeInTheDocument() // Write
+ expect(container?.querySelector(".codicon-terminal")).toBeInTheDocument() // Execute
})
it("should handle enabling first option when none selected", async () => {