From 7a8d8d2f86ec048d2cae5623f4307ed6a3cee83c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 28 Jan 2026 18:51:22 +1100
Subject: [PATCH] feat: add icon and description to `preset` dropdown (#21694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #20598

This pull-request implements a very basic change to also render the
`icon` of the `Preset` when we've specifically defined one within the
template. Furthermore, theres a `ⓘ` icon with a description.

### Preview

<img width="984" height="442" alt="CleanShot 2026-01-27 at 20 15 29@2x"
src="https://github.com/user-attachments/assets/d4ceebf9-a5fe-4df4-a8b2-a8355d6bb25e"
/>
---
 .../modules/tasks/TaskPrompt/TaskPrompt.tsx   | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
index 7580963eef..7f854dd831 100644
--- a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
+++ b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
@@ -27,7 +27,7 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useAuthenticated } from "hooks/useAuthenticated";
 import { useExternalAuth } from "hooks/useExternalAuth";
-import { ArrowUpIcon, RedoIcon, RotateCcwIcon } from "lucide-react";
+import { ArrowUpIcon, InfoIcon, RedoIcon, RotateCcwIcon } from "lucide-react";
 import { type FC, useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import TextareaAutosize, {
@@ -294,7 +294,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 							</div>
 						)}
 
-						<div>
+						<div className="flex-1 overflow-hidden min-w-0">
 							<label htmlFor="presetID" className="sr-only">
 								Preset
 							</label>
@@ -310,15 +310,43 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 										value={selectedPresetId}
 										onValueChange={setSelectedPresetId}
 									>
-										<PromptSelectTrigger id="presetID" tooltip="Preset">
+										<PromptSelectTrigger
+											id="presetID"
+											tooltip="Preset"
+											className="w-full max-w-full [&_span]:flex [&_span]:items-center [&_span]:gap-2 [&_span]:min-w-0 [&_span]:overflow-hidden [&_span>span]:truncate [&_svg[data-slot='preset-description']]:hidden"
+										>
 											<SelectValue placeholder="Select a preset" />
 										</PromptSelectTrigger>
 										<SelectContent>
 											{presets?.toSorted(sortByDefault).map((preset) => (
-												<SelectItem value={preset.ID} key={preset.ID}>
-													<span className="overflow-hidden text-ellipsis block">
+												<SelectItem
+													value={preset.ID}
+													key={preset.ID}
+													className="[&_span]:flex [&_span]:items-center [&_span]:gap-2"
+												>
+													{preset.Icon && (
+														<img
+															src={preset.Icon}
+															alt={preset.Name}
+															className="size-icon-sm flex-shrink-0"
+														/>
+													)}
+													<span>
 														{preset.Name} {preset.Default && "(Default)"}
 													</span>
+													{preset.Description && (
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<InfoIcon
+																	className="size-4"
+																	data-slot="preset-description"
+																/>
+															</TooltipTrigger>
+															<TooltipContent>
+																{preset.Description}
+															</TooltipContent>
+														</Tooltip>
+													)}
 												</SelectItem>
 											))}
 										</SelectContent>