fix(site): use ExternalImage for preset icons in task prompt (#23206)

site/src/api/queries/templates.ts

@@ -304,9 +304,15 @@ export const previousTemplateVersion = (
 	};
 };
 
+export const templateVersionPresetsKey = (versionId: string) => [
+	templateVersionRoot,
+	versionId,
+	"presets",
+];
+
 export const templateVersionPresets = (versionId: string) => {
 	return {
-		queryKey: [templateVersionRoot, versionId, "presets"],
+		queryKey: templateVersionPresetsKey(versionId),
 		queryFn: () => API.getTemplateVersionPresets(versionId),
 	};
 };

site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx

@@ -13,6 +13,7 @@ import {
 import { withAuthProvider, withToaster } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { API } from "api/api";
+import { templateVersionPresetsKey } from "api/queries/templates";
 import type { Task } from "api/typesGenerated";
 import { expect, spyOn, userEvent, waitFor, within } from "storybook/test";
 import type TasksPage from "../../../pages/TasksPage/TasksPage";
@@ -498,6 +499,50 @@ export const PresetSelectorFocused: Story = {
 	},
 };
 
+// Regression test for https://github.com/coder/coder/issues/22245
+// Dark monochrome icons (like GitHub or Tasks) were invisible on dark
+// backgrounds because icons used a plain <img> instead of
+// ExternalImage, which applies theme-aware CSS filters.
+export const IconContrast: Story = {
+	args: {
+		templates: [
+			{
+				...MockTemplate,
+				id: "github-template",
+				name: "github-template",
+				display_name: "GitHub",
+				icon: "/icon/github.svg",
+				active_version_id: MockTemplateVersion.id,
+			},
+			{
+				...MockTemplate,
+				id: "tasks-template",
+				name: "tasks-template",
+				display_name: "Tasks",
+				icon: "/icon/tasks.svg",
+				active_version_id: MockTemplateVersion.id,
+			},
+		],
+	},
+	parameters: {
+		queries: [
+			{
+				key: templateVersionPresetsKey(MockTemplateVersion.id),
+				data: [
+					{
+						...MockPresets[0],
+						Icon: "/icon/github.svg",
+					},
+					{
+						...MockPresets[1],
+						Icon: "/icon/tasks.svg",
+					},
+				],
+			},
+		],
+	},
+};
+
 export const CheckPresetsWhenChangingTemplate: Story = {
 	args: {
 		templates: [

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx

@@ -284,7 +284,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 											<SelectItem value={template.id} key={template.id}>
 												<div className="flex items-center gap-2">
 													{template.icon && (
-														<img
+														<ExternalImage
 															src={template.icon}
 															alt={template.name}
 															className="size-icon-sm flex-shrink-0"
@@ -343,7 +343,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 												<SelectItem value={preset.ID} key={preset.ID}>
 													<div className="flex items-center gap-2">
 														{preset.Icon && (
-															<img
+															<ExternalImage
 																data-slot="preset-icon"
 																src={preset.Icon}
 																alt={preset.Name}