Polish tasks panel UI and filter task templates

package.json

@@ -188,7 +188,7 @@
 				{
 					"id": "coder",
 					"title": "Coder Remote",
-					"icon": "media/logo-white.svg"
+					"icon": "media/shorthand-logo.svg"
 				},
 				{
 					"id": "coderTasks",

packages/shared/src/tasks/types.ts

@@ -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;
 }
 

packages/shared/src/tasks/utils.ts

@@ -1,4 +1,4 @@
-import type { Task, TaskPermissions, TaskStatus } from "./types";
+import type { Task, TaskPermissions, TaskState, TaskStatus } from "./types";
 
 export function getTaskLabel(task: Task): string {
 	return task.display_name || task.name || task.id;
@@ -43,15 +43,20 @@ export function isTaskWorking(task: Task): boolean {
 
 /**
  * Task statuses where logs won't change (stable/terminal states).
- * "complete" is a TaskState (sub-state of active), checked separately.
  */
 const STABLE_STATUSES: readonly TaskStatus[] = ["error", "paused"];
 
+/**
+ * Task states where logs won't change (stable/terminal states).
+ */
+const STABLE_STATES: readonly TaskState[] = ["failed", "idle"];
+
 /** Whether a task is in a stable state where its logs won't change. */
 export function isStableTask(task: Task): boolean {
 	return (
 		STABLE_STATUSES.includes(task.status) ||
-		(task.current_state !== null && task.current_state.state !== "working")
+		(task.current_state !== null &&
+			STABLE_STATES.includes(task.current_state.state))
 	);
 }
 

packages/tasks/src/components/CreateTaskSection.tsx

@@ -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/tasks/src/index.css

@@ -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,6 +253,8 @@ vscode-collapsible::part(body) {
 	border-radius: 50%;
 	flex-shrink: 0;
 	background: var(--status-color);
+	box-shadow: 0 0 0 0.2em
+		color-mix(in srgb, var(--status-color) 25%, transparent);
 }
 
 .status-dot.active {
@@ -413,8 +417,6 @@ vscode-icon.disabled {
 }
 
 .action-menu-spinner {
-	width: 1em;
-	height: 1em;
 	margin-inline-end: 4px;
 }
 
@@ -438,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 {
@@ -514,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 {

src/webviews/tasks/tasksPanelProvider.ts

@@ -107,8 +107,8 @@ export class TasksPanelProvider
 		getTaskDetails: (p) => this.handleGetTaskDetails(p.taskId),
 		createTask: (p) => this.handleCreateTask(p),
 		deleteTask: (p) => this.handleDeleteTask(p.taskId, p.taskName),
-		pauseTask: (p) => this.handlePauseTask(p.taskId, p.taskName),
-		resumeTask: (p) => this.handleResumeTask(p.taskId, p.taskName),
+		pauseTask: (p) => this.handlePauseTask(p.taskId),
+		resumeTask: (p) => this.handleResumeTask(p.taskId),
 		downloadLogs: (p) => this.handleDownloadLogs(p.taskId),
 		sendTaskMessage: (p) => this.handleSendMessage(p.taskId, p.message),
 	});
@@ -285,10 +285,7 @@ export class TasksPanelProvider
 		);
 	}
 
-	private async handlePauseTask(
-		taskId: string,
-		taskName: string,
-	): Promise<void> {
+	private async handlePauseTask(taskId: string): Promise<void> {
 		const task = await this.client.getTask("me", taskId);
 		if (!task.workspace_id) {
 			throw new Error("Task has no workspace");
@@ -297,13 +294,9 @@ export class TasksPanelProvider
 		await this.client.stopWorkspace(task.workspace_id);
 
 		await this.refreshAndNotifyTask(taskId);
-		vscode.window.showInformationMessage(`Task "${taskName}" paused`);
 	}
 
-	private async handleResumeTask(
-		taskId: string,
-		taskName: string,
-	): Promise<void> {
+	private async handleResumeTask(taskId: string): Promise<void> {
 		const task = await this.client.getTask("me", taskId);
 		if (!task.workspace_id) {
 			throw new Error("Task has no workspace");
@@ -315,7 +308,6 @@ export class TasksPanelProvider
 		);
 
 		await this.refreshAndNotifyTask(taskId);
-		vscode.window.showInformationMessage(`Task "${taskName}" resumed`);
 	}
 
 	private async handleSendMessage(
@@ -343,9 +335,6 @@ export class TasksPanelProvider
 		}
 
 		await this.refreshAndNotifyTask(taskId);
-		vscode.window.showInformationMessage(
-			`Message sent to "${getTaskLabel(task)}"`,
-		);
 	}
 
 	private async handleViewInCoder(taskId: string): Promise<void> {
@@ -490,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> => {
@@ -506,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,
 						})),
 					};

test/mocks/tasks.ts

@@ -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,