Self-review

Author: EhabY

eslint.config.mjs

@@ -8,7 +8,6 @@ import { createTypeScriptImportResolver } from "eslint-import-resolver-typescrip
 import { flatConfigs as importXFlatConfigs } from "eslint-plugin-import-x";
 import packageJson from "eslint-plugin-package-json";
 import reactPlugin from "eslint-plugin-react";
-import reactCompilerPlugin from "eslint-plugin-react-compiler";
 import reactHooksPlugin from "eslint-plugin-react-hooks";
 import globals from "globals";
 
@@ -177,24 +176,31 @@ export default defineConfig(
 		},
 	},
 
-	// TSX files - React rules
+	// React hooks and compiler rules (covers .ts hook files too)
+	{
+		files: ["packages/**/*.{ts,tsx}"],
+		...reactHooksPlugin.configs.flat.recommended,
+		rules: {
+			...reactHooksPlugin.configs.flat.recommended.rules,
+			// React Compiler auto-memoizes; exhaustive-deps false-positives on useCallback
+			"react-hooks/exhaustive-deps": "off",
+		},
+	},
+
+	// TSX files - React JSX rules
 	{
 		files: ["**/*.tsx"],
 		plugins: {
 			react: reactPlugin,
-			"react-compiler": reactCompilerPlugin,
-			"react-hooks": reactHooksPlugin,
 		},
 		settings: {
 			react: {
 				version: "detect",
 			},
 		},
 		rules: {
-			...reactCompilerPlugin.configs.recommended.rules,
 			...reactPlugin.configs.recommended.rules,
 			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
-			...reactHooksPlugin.configs.recommended.rules,
 			"react/prop-types": "off", // Using TypeScript
 		},
 	},

package.json

@@ -489,6 +489,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",
 		"@eslint/markdown": "^7.5.1",
+		"@tanstack/react-query": "catalog:",
 		"@testing-library/react": "^16.3.2",
 		"@tsconfig/node20": "^20.1.8",
 		"@types/mocha": "^10.0.10",
@@ -520,8 +521,7 @@
 		"eslint-plugin-import-x": "^4.16.1",
 		"eslint-plugin-package-json": "^0.88.2",
 		"eslint-plugin-react": "^7.37.0",
-		"eslint-plugin-react-compiler": "catalog:",
-		"eslint-plugin-react-hooks": "^5.0.0",
+		"eslint-plugin-react-hooks": "catalog:",
 		"globals": "^17.0.0",
 		"jsdom": "^27.4.0",
 		"jsonc-eslint-parser": "^2.4.2",

packages/tasks/src/App.tsx

@@ -47,14 +47,14 @@ export default function App() {
 	const { onNotification } = useIpc();
 	useEffect(() => {
 		return onNotification(TasksApi.showCreateForm, () => setCreateOpen(true));
-	});
+	}, [onNotification, setCreateOpen]);
 
 	useEffect(() => {
 		persistUiState({
 			createExpanded: createOpen,
 			historyExpanded: historyOpen,
 		});
-	});
+	}, [createOpen, historyOpen, persistUiState]);
 
 	if (isLoading) {
 		return (

packages/tasks/src/components/ActionMenu.tsx

@@ -1,6 +1,5 @@
 // VscodeContextMenu is data-driven with { label, value, separator }[] and lacks
-// support for icons, per-item danger styling, loading spinners, and disabled
-// states. We keep a custom implementation.
+// support for icons, per-item danger styling, loading spinners, and disabled states.
 import {
 	VscodeIcon,
 	VscodeProgressRing,
@@ -10,7 +9,7 @@ import { useState, useRef, useEffect } from "react";
 interface ActionMenuAction {
 	separator?: false;
 	label: string;
-	icon?: string;
+	icon: string;
 	onClick: () => void;
 	disabled?: boolean;
 	danger?: boolean;
@@ -35,41 +34,38 @@ export function ActionMenu({ items }: ActionMenuProps) {
 	const menuRef = useRef<HTMLDivElement>(null);
 	const buttonRef = useRef<HTMLDivElement>(null);
 
-	const isOpen = position !== null;
-
-	function open() {
-		if (buttonRef.current) {
-			const rect = buttonRef.current.getBoundingClientRect();
-			setPosition({
-				top: rect.bottom + 4,
-				right: window.innerWidth - rect.right,
-			});
-		}
+	function toggle() {
+		setPosition((prev) => {
+			if (prev) {
+				return null;
+			}
+			const rect = buttonRef.current?.getBoundingClientRect();
+			if (!rect) {
+				return null;
+			}
+			return { top: rect.bottom, right: window.innerWidth - rect.right };
+		});
 	}
 
-	function close() {
-		setPosition(null);
-	}
+	const isOpen = position !== null;
 
 	useEffect(() => {
-		if (!isOpen) return undefined;
+		if (!isOpen) return;
+
+		const close = () => setPosition(null);
 
-		function handleClickOutside(event: MouseEvent) {
+		function onMouseDown(event: MouseEvent) {
 			if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
 				close();
 			}
 		}
 
-		function handleScroll() {
-			close();
-		}
-
-		document.addEventListener("mousedown", handleClickOutside);
-		window.addEventListener("scroll", handleScroll, true);
+		document.addEventListener("mousedown", onMouseDown);
+		window.addEventListener("scroll", close, true);
 
 		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			window.removeEventListener("scroll", handleScroll, true);
+			document.removeEventListener("mousedown", onMouseDown);
+			window.removeEventListener("scroll", close, true);
 		};
 	}, [isOpen]);
 
@@ -80,14 +76,11 @@ export function ActionMenu({ items }: ActionMenuProps) {
 					actionIcon
 					name="ellipsis"
 					label="More actions"
-					onClick={() => (isOpen ? close() : open())}
+					onClick={toggle}
 				/>
 			</div>
 			{position && (
-				<div
-					className="action-menu-dropdown"
-					style={{ top: position.top, right: position.right }}
-				>
+				<div className="action-menu-dropdown" style={position}>
 					{items.map((item, index) =>
 						item.separator ? (
 							<div
@@ -99,20 +92,24 @@ export function ActionMenu({ items }: ActionMenuProps) {
 							<button
 								key={`${item.label}-${index}`}
 								type="button"
-								className={`action-menu-item ${item.danger ? "danger" : ""} ${item.loading ? "loading" : ""}`}
+								className={[
+									"action-menu-item",
+									item.danger && "danger",
+									item.loading && "loading",
+								]
+									.filter(Boolean)
+									.join(" ")}
 								onClick={() => {
-									if (!item.loading) {
-										item.onClick();
-										close();
-									}
+									item.onClick();
+									setPosition(null);
 								}}
-								disabled={item.disabled ?? item.loading}
+								disabled={item.disabled === true || item.loading === true}
 							>
 								{item.loading ? (
 									<VscodeProgressRing className="action-menu-spinner" />
-								) : item.icon ? (
+								) : (
 									<VscodeIcon name={item.icon} className="action-menu-icon" />
-								) : null}
+								)}
 								<span>{item.label}</span>
 							</button>
 						),

packages/tasks/src/components/CreateTaskSection.tsx

@@ -1,14 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
 import {
 	VscodeIcon,
 	VscodeOption,
 	VscodeProgressRing,
 	VscodeSingleSelect,
 } from "@vscode-elements/react-elements";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { useTasksApi } from "../hooks/useTasksApi";
 
-import type { TaskTemplate } from "@repo/shared";
+import type { CreateTaskParams, TaskTemplate } from "@repo/shared";
 
 interface CreateTaskSectionProps {
 	templates: readonly TaskTemplate[];
@@ -19,61 +20,33 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 	const [prompt, setPrompt] = useState("");
 	const [templateId, setTemplateId] = useState(templates[0]?.id || "");
 	const [presetId, setPresetId] = useState("");
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [error, setError] = useState<string | null>(null);
+
+	const { mutate, isPending, error } = useMutation({
+		mutationFn: (vars: CreateTaskParams) => api.createTask(vars),
+		onSuccess: () => setPrompt(""),
+	});
 
 	const selectedTemplate = templates.find((t) => t.id === templateId);
 	const presets = selectedTemplate?.presets ?? [];
+	const canSubmit = prompt.trim().length > 0 && selectedTemplate && !isPending;
 
-	// Sync templateId when templates prop changes
-	useEffect(() => {
-		if (templates.length > 0 && !templates.find((t) => t.id === templateId)) {
-			setTemplateId(templates[0].id);
-			setPresetId("");
-		}
-	}, [templates, templateId]);
-
-	const handleTemplateChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement;
-		const newTemplateId = target.value;
-		setTemplateId(newTemplateId);
-		setPresetId("");
-	};
-
-	const handlePresetChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement;
-		setPresetId(target.value);
-	};
-
-	const handleSubmit = async () => {
-		if (!prompt.trim() || !selectedTemplate || isSubmitting) return;
-
-		setIsSubmitting(true);
-		setError(null);
-		try {
-			await api.createTask({
+	const handleSubmit = () => {
+		if (canSubmit) {
+			mutate({
 				templateVersionId: selectedTemplate.activeVersionId,
 				prompt: prompt.trim(),
 				presetId: presetId || undefined,
 			});
-			setPrompt("");
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "Failed to create task");
-		} finally {
-			setIsSubmitting(false);
 		}
 	};
 
 	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !isSubmitting) {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
 			e.preventDefault();
-			void handleSubmit();
+			handleSubmit();
 		}
 	};
 
-	const canSubmit =
-		prompt.trim().length > 0 && selectedTemplate && !isSubmitting;
-
 	return (
 		<div className="create-task-section">
 			<div className="prompt-input-container">
@@ -83,31 +56,34 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 					value={prompt}
 					onChange={(e) => setPrompt(e.target.value)}
 					onKeyDown={handleKeyDown}
-					disabled={isSubmitting}
+					disabled={isPending}
 				/>
 				<div className="prompt-send-button">
-					{isSubmitting ? (
+					{isPending ? (
 						<VscodeProgressRing />
 					) : (
 						<VscodeIcon
 							actionIcon
 							name="send"
 							label="Send"
-							onClick={canSubmit ? () => void handleSubmit() : undefined}
-							className={!canSubmit ? "disabled" : ""}
+							onClick={() => void handleSubmit()}
+							className={canSubmit ? "" : "disabled"}
 						/>
 					)}
 				</div>
 			</div>
-			{error && <div className="create-task-error">{error}</div>}
+			{error && <div className="create-task-error">{error.message}</div>}
 			<div className="create-task-options">
 				<div className="option-row">
 					<span className="option-label">Template:</span>
 					<VscodeSingleSelect
 						className="option-select"
 						value={templateId}
-						onChange={handleTemplateChange}
-						disabled={isSubmitting}
+						onChange={(e) => {
+							setTemplateId((e.target as HTMLSelectElement).value);
+							setPresetId("");
+						}}
+						disabled={isPending}
 					>
 						{templates.map((template) => (
 							<VscodeOption key={template.id} value={template.id}>
@@ -122,8 +98,10 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 						<VscodeSingleSelect
 							className="option-select"
 							value={presetId}
-							onChange={handlePresetChange}
-							disabled={isSubmitting}
+							onChange={(e) =>
+								setPresetId((e.target as HTMLSelectElement).value)
+							}
+							disabled={isPending}
 						>
 							<VscodeOption value="">No preset</VscodeOption>
 							{presets.map((preset) => (

packages/tasks/src/components/ErrorState.tsx

@@ -1,4 +1,4 @@
-import { VscodeButton } from "@vscode-elements/react-elements";
+import { VscodeButton, VscodeIcon } from "@vscode-elements/react-elements";
 
 import { StatePanel } from "./StatePanel";
 
@@ -11,7 +11,7 @@ export function ErrorState({ message, onRetry }: ErrorStateProps) {
 	return (
 		<StatePanel
 			className="error-state"
-			icon={<span className="codicon codicon-error error-icon" />}
+			icon={<VscodeIcon name="error" className="error-icon" />}
 			description={message}
 			action={<VscodeButton onClick={onRetry}>Retry</VscodeButton>}
 		/>

packages/tasks/src/components/NoTemplateState.tsx

@@ -9,12 +9,7 @@ export function NoTemplateState() {
 		<StatePanel
 			title="No Task template found"
 			action={
-				<a
-					href={DOCS_URL}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="text-link"
-				>
+				<a href={DOCS_URL} className="text-link">
 					Learn how to create a template <VscodeIcon name="link-external" />
 				</a>
 			}

packages/tasks/src/components/NotSupportedState.tsx

@@ -11,12 +11,7 @@ export function NotSupportedState() {
 			title="Tasks not available"
 			description="This Coder server does not support tasks."
 			action={
-				<a
-					href={DOCS_URL}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="text-link"
-				>
+				<a href={DOCS_URL} className="text-link">
 					Learn more <VscodeIcon name="link-external" />
 				</a>
 			}