Self-review

Author: EhabY

media/shorthand-logo.svg

@@ -17,15 +17,15 @@ export type { Preset, Task, TaskLogEntry, TaskState, TaskStatus, Template };
 export interface TaskTemplate {
 	id: string;
 	name: string;
-	displayName: string;
-	icon: string;
+	description: string;
 	activeVersionId: string;
 	presets: TaskPreset[];
 }
 
 export interface TaskPreset {
 	id: string;
 	name: string;
+	description: string;
 	isDefault: boolean;
 }
 

media/tasks-logo.svg

@@ -10,7 +10,7 @@ import { useTasksApi } from "../hooks/useTasksApi";
 
 import { PromptInput } from "./PromptInput";
 
-import type { CreateTaskParams, TaskTemplate } from "@repo/shared";
+import type { CreateTaskParams, TaskPreset, TaskTemplate } from "@repo/shared";
 
 interface CreateTaskSectionProps {
 	templates: readonly TaskTemplate[];
@@ -20,15 +20,16 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 	const api = useTasksApi();
 	const [prompt, setPrompt] = useState("");
 	const [templateId, setTemplateId] = useState(templates[0]?.id || "");
-	const [presetId, setPresetId] = useState("");
+	const selectedTemplate = templates.find((t) => t.id === templateId);
+	const [presetId, setPresetId] = useState(() =>
+		defaultPresetId(selectedTemplate?.presets ?? []),
+	);
 
 	const { mutate, isPending, error } = useMutation({
 		mutationFn: (params: CreateTaskParams) => api.createTask(params),
 		onSuccess: () => setPrompt(""),
 		onError: (err) => logger.error("Failed to create task", err),
 	});
-
-	const selectedTemplate = templates.find((t) => t.id === templateId);
 	const presets = selectedTemplate?.presets ?? [];
 	const canSubmit = prompt.trim().length > 0 && selectedTemplate && !isPending;
 
@@ -63,14 +64,20 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 						className="option-select"
 						value={templateId}
 						onChange={(e) => {
-							setTemplateId((e.target as HTMLSelectElement).value);
-							setPresetId("");
+							const newId = (e.target as HTMLSelectElement).value;
+							setTemplateId(newId);
+							const newTemplate = templates.find((t) => t.id === newId);
+							setPresetId(defaultPresetId(newTemplate?.presets ?? []));
 						}}
 						disabled={isPending}
 					>
 						{templates.map((template) => (
-							<VscodeOption key={template.id} value={template.id}>
-								{template.displayName}
+							<VscodeOption
+								key={template.id}
+								value={template.id}
+								description={template.description}
+							>
+								{template.name}
 							</VscodeOption>
 						))}
 					</VscodeSingleSelect>
@@ -86,9 +93,12 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 							}
 							disabled={isPending}
 						>
-							<VscodeOption value="">No preset</VscodeOption>
 							{presets.map((preset) => (
-								<VscodeOption key={preset.id} value={preset.id}>
+								<VscodeOption
+									key={preset.id}
+									value={preset.id}
+									description={preset.description}
+								>
 									{preset.name}
 									{preset.isDefault ? " (Default)" : ""}
 								</VscodeOption>
@@ -100,3 +110,10 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 		</div>
 	);
 }
+
+function defaultPresetId(presets: readonly TaskPreset[]): string {
+	if (presets.length === 0) {
+		return "";
+	}
+	return (presets.find((p) => p.isDefault) ?? presets[0]).id;
+}

packages/shared/src/tasks/types.ts

@@ -6,7 +6,7 @@ body {
 	margin: 0;
 	padding: 0;
 	font-family: var(--vscode-font-family);
-	font-size: calc(var(--vscode-font-size) * 0.9);
+	font-size: var(--vscode-font-size);
 	color: var(--vscode-foreground);
 	background: var(--vscode-sideBar-background);
 	overflow: hidden;
@@ -205,7 +205,8 @@ vscode-collapsible::part(body) {
 }
 
 .task-title,
-.task-subtitle {
+.task-subtitle,
+.task-detail-title {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -230,7 +231,8 @@ vscode-collapsible::part(body) {
 	opacity: 0.7;
 }
 
-.task-item-spinner {
+.task-item-spinner,
+.action-menu-spinner {
 	width: 1em;
 	height: 1em;
 }
@@ -251,7 +253,7 @@ vscode-collapsible::part(body) {
 	border-radius: 50%;
 	flex-shrink: 0;
 	background: var(--status-color);
-	box-shadow: 0 0 0 0.25em
+	box-shadow: 0 0 0 0.2em
 		color-mix(in srgb, var(--status-color) 25%, transparent);
 }
 
@@ -415,8 +417,6 @@ vscode-icon.disabled {
 }
 
 .action-menu-spinner {
-	width: 1em;
-	height: 1em;
 	margin-inline-end: 4px;
 }
 
@@ -440,19 +440,11 @@ vscode-icon.disabled {
 		var(--vscode-sideBarSectionHeader-border, var(--vscode-panel-border));
 }
 
-.task-detail-header .status-dot {
-	width: 0.7em;
-	height: 0.7em;
-}
-
 .task-detail-title {
 	flex: 1;
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	font-weight: 500;
-	font-size: 1.05em;
+	margin-inline-start: 0.25em;
 }
 
 .error-banner {
@@ -516,14 +508,17 @@ vscode-icon.disabled {
 	word-break: break-word;
 }
 
+.log-entry-input,
+.log-entry-output {
+	padding-inline-start: 6px;
+}
+
 .log-entry-input {
 	border-inline-start: 2px solid var(--vscode-textLink-foreground);
-	padding-inline-start: 6px;
 }
 
 .log-entry-output {
 	border-inline-start: 2px solid var(--vscode-descriptionForeground);
-	padding-inline-start: 6px;
 }
 
 .log-entry-role {

packages/tasks/src/components/CreateTaskSection.tsx

@@ -479,7 +479,9 @@ export class TasksPanelProvider
 		}
 
 		try {
-			const templates = await this.client.getTemplates({});
+			const templates = await this.client.getTemplates({
+				q: "has-ai-task:true",
+			});
 
 			return await Promise.all(
 				templates.map(async (template: Template): Promise<TaskTemplate> => {
@@ -495,13 +497,13 @@ export class TasksPanelProvider
 
 					return {
 						id: template.id,
-						name: template.name,
-						displayName: template.display_name || template.name,
-						icon: template.icon,
+						name: template.display_name || template.name,
+						description: template.description,
 						activeVersionId: template.active_version_id,
 						presets: presets.map((p) => ({
 							id: p.ID,
 							name: p.Name,
+							description: p.Description,
 							isDefault: p.Default,
 						})),
 					};

packages/tasks/src/index.css

@@ -167,9 +167,8 @@ export function taskTemplate(
 ): TaskTemplate {
 	return {
 		id: "template-1",
-		name: "test-template",
-		displayName: "Test Template",
-		icon: "/icon.svg",
+		name: "Test Template",
+		description: "A test template",
 		activeVersionId: "version-1",
 		presets: [],
 		...overrides,

src/webviews/tasks/tasksPanelProvider.ts

@@ -255,9 +255,22 @@ describe("TasksPanelProvider", () => {
 
 			const res = await h.request(TasksApi.getTemplates);
 
+			expect(h.client.getTemplates).toHaveBeenCalledWith({
+				q: "has-ai-task:true",
+			});
 			expect(res.data?.[0].presets).toEqual([
-				{ id: "p1", name: "Default", isDefault: true },
-				{ id: "p2", name: "Custom", isDefault: false },
+				{
+					id: "p1",
+					name: "Default",
+					description: "Test preset",
+					isDefault: true,
+				},
+				{
+					id: "p2",
+					name: "Custom",
+					description: "Test preset",
+					isDefault: false,
+				},
 			]);
 		});
 

test/mocks/tasks.ts

@@ -40,10 +40,10 @@ describe("CreateTaskSection", () => {
 		vi.clearAllMocks();
 	});
 
-	it("renders template options by displayName", () => {
+	it("renders template options by name", () => {
 		renderSection([
-			taskTemplate({ id: "t1", displayName: "First" }),
-			taskTemplate({ id: "t2", displayName: "Second" }),
+			taskTemplate({ id: "t1", name: "First" }),
+			taskTemplate({ id: "t2", name: "Second" }),
 		]);
 		expect(screen.queryByText("First")).toBeInTheDocument();
 		expect(screen.queryByText("Second")).toBeInTheDocument();
@@ -57,7 +57,14 @@ describe("CreateTaskSection", () => {
 	it("renders preset dropdown when template has presets", () => {
 		renderSection([
 			taskTemplate({
-				presets: [{ id: "p1", name: "Fast Mode", isDefault: false }],
+				presets: [
+					{
+						id: "p1",
+						name: "Fast Mode",
+						description: "A fast preset",
+						isDefault: false,
+					},
+				],
 			}),
 		]);
 		expect(screen.queryByText("Preset:")).toBeInTheDocument();
@@ -94,8 +101,8 @@ describe("CreateTaskSection", () => {
 	});
 
 	it("syncs templateId when templates change", () => {
-		const templates1 = [taskTemplate({ id: "t1", displayName: "Old" })];
-		const templates2 = [taskTemplate({ id: "t2", displayName: "New" })];
+		const templates1 = [taskTemplate({ id: "t1", name: "Old" })];
+		const templates2 = [taskTemplate({ id: "t2", name: "New" })];
 
 		const { rerender } = renderWithQuery(
 			<CreateTaskSection templates={templates1} />,