ui: add MCP group checkboxes in tools settings and fix indeterminate checkbox colors (#31303)

MCP server groups in the settings Tools tab now get a group checkbox like the
built-in, server and browser groups, toggling the server-scoped tools key.
Indeterminate checkboxes now use the checked state colors.

Assisted-by: Claude (Opus 5.5 Medium)

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte

@@ -41,16 +41,21 @@
 						<ChevronRight class="h-3.5 w-3.5 shrink-0" />
 					{/if}
 
-					{@const isCategoryEnabled =
-						group.source !== ToolSource.MCP && toolsStore.isCategoryEnabled(group.source)}
+					{@const groupToggleKey =
+						group.source === ToolSource.MCP && group.serverId
+							? toolsStore.getMcpServerToolsKey(group.serverId)
+							: null}
 
-					{#if group.source !== ToolSource.MCP}
-						<Checkbox
-							checked={isCategoryEnabled}
-							onCheckedChange={() => toolsStore.toggleCategory(group.source)}
-							onclick={(e) => e.stopPropagation()}
-						/>
-					{/if}
+					<Checkbox
+						checked={groupToggleKey
+							? toolsStore.isToolEnabled(groupToggleKey)
+							: toolsStore.isCategoryEnabled(group.source)}
+						onCheckedChange={() =>
+							groupToggleKey
+								? toolsStore.toggleTool(groupToggleKey)
+								: toolsStore.toggleCategory(group.source)}
+						onclick={(e) => e.stopPropagation()}
+					/>
 
 					{@const faviconUrl = group.serverId ? mcpStore.getServerFavicon(group.serverId) : null}
 

tools/ui/src/lib/components/ui/checkbox/checkbox.svelte

@@ -18,7 +18,7 @@
 	bind:indeterminate
 	bind:ref
 	class={cn(
-		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary',
 		className
 	)}
 	data-slot="checkbox"