From ca0820503fda80a47b3ad211f37a11ef5a3808ab Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 14 Nov 2025 12:03:33 -0800
Subject: [PATCH 1/5] new button

---
 .../components/WorktreeList/WorktreeList.tsx  | 188 +------------
 .../components/NewTabButton/NewTabButton.tsx  | 163 +++++++++++
 .../components/NewTabButton/index.ts          |   2 +
 bun.lock                                      |   3 +
 packages/ui/package.json                      |   2 +
 packages/ui/src/components/dropdown-menu.tsx  | 255 ++++++++++++++++++
 6 files changed, 433 insertions(+), 180 deletions(-)
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/index.ts
 create mode 100644 packages/ui/src/components/dropdown-menu.tsx

diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx
index 470cc04938e..357de06c08e 100644
--- a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx
@@ -1,7 +1,6 @@
-import { ChevronDown, Monitor, Plus, SquareTerminal } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import type { Workspace, Worktree } from "shared/types";
 import { WorkspacePortIndicator } from "../WorkspacePortIndicator";
+import { NewTabButton } from "./components/NewTabButton";
 import { WorktreeItem } from "./components/WorktreeItem";
 
 interface WorktreeListProps {
@@ -29,43 +28,6 @@ export function WorktreeList({
 	selectedWorktreeId,
 	showWorkspaceHeader = false,
 }: WorktreeListProps) {
-	// Hooks must be called before any early returns
-	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const [defaultTabType, setDefaultTabType] = useState<"terminal" | "preview">(
-		() => {
-			// Load from localStorage or default to "terminal"
-			const saved = localStorage.getItem("newTabDefaultType");
-			return (saved === "preview" ? "preview" : "terminal") as
-				| "terminal"
-				| "preview";
-		},
-	);
-	const dropdownRef = useRef<HTMLDivElement>(null);
-	const buttonRef = useRef<HTMLButtonElement>(null);
-	const chevronRef = useRef<HTMLButtonElement>(null);
-
-	// Close dropdown when clicking outside
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				dropdownRef.current &&
-				buttonRef.current &&
-				chevronRef.current &&
-				!dropdownRef.current.contains(event.target as Node) &&
-				!buttonRef.current.contains(event.target as Node) &&
-				!chevronRef.current.contains(event.target as Node)
-			) {
-				setIsDropdownOpen(false);
-			}
-		};
-
-		if (isDropdownOpen) {
-			document.addEventListener("mousedown", handleClickOutside);
-			return () => {
-				document.removeEventListener("mousedown", handleClickOutside);
-			};
-		}
-	}, [isDropdownOpen]);
 
 	if (!currentWorkspace) {
 		return (
@@ -85,84 +47,6 @@ export function WorktreeList({
 	const hasPortForwarding =
 		currentWorkspace.ports && currentWorkspace.ports.length > 0;
 
-	const handleAddTerminal = async (updateDefault = false) => {
-		if (!currentWorkspace || !selectedWorktreeId) return;
-		setIsDropdownOpen(false);
-
-		if (updateDefault) {
-			setDefaultTabType("terminal");
-			localStorage.setItem("newTabDefaultType", "terminal");
-		}
-
-		try {
-			const result = await window.ipcRenderer.invoke("tab-create", {
-				workspaceId: currentWorkspace.id,
-				worktreeId: selectedWorktreeId,
-				name: "New Terminal",
-				type: "terminal",
-			});
-
-			if (result.success) {
-				const newTabId = result.tab?.id;
-				if (newTabId) {
-					onTabSelect(selectedWorktreeId, newTabId);
-				}
-				onReload();
-			}
-		} catch (error) {
-			console.error("Error creating terminal:", error);
-		}
-	};
-
-	const handleAddPreview = async (updateDefault = false) => {
-		if (!currentWorkspace || !selectedWorktreeId) return;
-		setIsDropdownOpen(false);
-
-		if (updateDefault) {
-			setDefaultTabType("preview");
-			localStorage.setItem("newTabDefaultType", "preview");
-		}
-
-		try {
-			const worktree = currentWorkspace.worktrees.find(
-				(wt) => wt.id === selectedWorktreeId,
-			);
-			const previewTabs =
-				worktree?.tabs?.filter((tab) => tab.type === "preview") || [];
-			const previewNumber = previewTabs.length + 1;
-
-			const result = await window.ipcRenderer.invoke("tab-create", {
-				workspaceId: currentWorkspace.id,
-				worktreeId: selectedWorktreeId,
-				name: `Preview ${previewNumber}`,
-				type: "preview",
-			});
-
-			if (result.success) {
-				const newTabId = result.tab?.id;
-				if (newTabId) {
-					onTabSelect(selectedWorktreeId, newTabId);
-				}
-				onReload();
-			}
-		} catch (error) {
-			console.error("Error creating preview:", error);
-		}
-	};
-
-	const handleCreateDefault = () => {
-		if (defaultTabType === "terminal") {
-			handleAddTerminal();
-		} else {
-			handleAddPreview();
-		}
-	};
-
-	const handleChevronClick = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		setIsDropdownOpen(!isDropdownOpen);
-	};
-
 	return (
 		<>
 			{/* Workspace Header - more minimal */}
@@ -190,69 +74,13 @@ export function WorktreeList({
 			))}
 
 			{/* Arc-style New Tab Button - styled like a tab at the bottom */}
-			{selectedWorktreeId && (
-				<div className="space-y-0.5 mt-2">
-					<div className="relative">
-						<button
-							ref={buttonRef}
-							type="button"
-							onClick={handleCreateDefault}
-							className={`group flex items-center gap-1.5 w-full h-7 px-2.5 text-xs rounded-md transition-all hover:bg-neutral-800/40 text-neutral-400 hover:text-neutral-300`}
-						>
-							<Plus size={12} className="shrink-0" />
-							<span className="truncate flex-1 text-left">
-								{defaultTabType === "terminal" ? "New Terminal" : "New Preview"}
-							</span>
-							<button
-								ref={chevronRef}
-								type="button"
-								onClick={handleChevronClick}
-								className="shrink-0 opacity-0 group-hover:opacity-60 hover:opacity-100 p-1 rounded transition-opacity"
-								onMouseDown={(e) => e.stopPropagation()}
-							>
-								<ChevronDown
-									size={14}
-									className={`transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
-								/>
-							</button>
-						</button>
-
-						{/* Dropdown Menu */}
-						{isDropdownOpen && (
-							<div
-								ref={dropdownRef}
-								className="absolute bottom-full left-0 right-0 mb-1 bg-neutral-800 border border-neutral-700 rounded-md shadow-lg z-50 overflow-hidden"
-							>
-								<button
-									type="button"
-									onClick={() =>
-										handleAddTerminal(defaultTabType !== "terminal")
-									}
-									className={`w-full px-3 py-2 text-left text-sm flex items-center gap-2 transition-colors ${defaultTabType === "terminal"
-										? "bg-neutral-700/50 text-neutral-200"
-										: "text-neutral-300 hover:bg-neutral-700/50"
-										}`}
-								>
-									<SquareTerminal size={14} className="text-neutral-400" />
-									<span>New Terminal</span>
-								</button>
-								<button
-									type="button"
-									onClick={() =>
-										handleAddPreview(defaultTabType !== "preview")
-									}
-									className={`w-full px-3 py-2 text-left text-sm flex items-center gap-2 transition-colors ${defaultTabType === "preview"
-										? "bg-neutral-700/50 text-neutral-200"
-										: "text-neutral-300 hover:bg-neutral-700/50"
-										}`}
-								>
-									<Monitor size={14} className="text-neutral-400" />
-									<span>New Preview</span>
-								</button>
-							</div>
-						)}
-					</div>
-				</div>
+			{selectedWorktreeId && currentWorkspace && (
+				<NewTabButton
+					currentWorkspace={currentWorkspace}
+					selectedWorktreeId={selectedWorktreeId}
+					onTabSelect={onTabSelect}
+					onReload={onReload}
+				/>
 			)}
 		</>
 	);
diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
new file mode 100644
index 00000000000..c34858799be
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
@@ -0,0 +1,163 @@
+import { ChevronDown, Monitor, Plus, SquareTerminal } from "lucide-react";
+import { useState } from "react";
+import type { Workspace } from "shared/types";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@superset/ui/dropdown-menu";
+
+interface NewTabButtonProps {
+	currentWorkspace: Workspace;
+	selectedWorktreeId: string;
+	onTabSelect: (worktreeId: string, tabId: string) => void;
+	onReload: () => void;
+}
+
+export function NewTabButton({
+	currentWorkspace,
+	selectedWorktreeId,
+	onTabSelect,
+	onReload,
+}: NewTabButtonProps) {
+	const [defaultTabType, setDefaultTabType] = useState<"terminal" | "preview">(
+		() => {
+			// Load from localStorage or default to "terminal"
+			const saved = localStorage.getItem("newTabDefaultType");
+			return (saved === "preview" ? "preview" : "terminal") as
+				| "terminal"
+				| "preview";
+		},
+	);
+
+	const handleAddTerminal = async (updateDefault = false) => {
+		if (!currentWorkspace || !selectedWorktreeId) return;
+
+		if (updateDefault) {
+			setDefaultTabType("terminal");
+			localStorage.setItem("newTabDefaultType", "terminal");
+		}
+
+		try {
+			const result = await window.ipcRenderer.invoke("tab-create", {
+				workspaceId: currentWorkspace.id,
+				worktreeId: selectedWorktreeId,
+				name: "New Terminal",
+				type: "terminal",
+			});
+
+			if (result.success) {
+				const newTabId = result.tab?.id;
+				if (newTabId) {
+					onTabSelect(selectedWorktreeId, newTabId);
+				}
+				onReload();
+			}
+		} catch (error) {
+			console.error("Error creating terminal:", error);
+		}
+	};
+
+	const handleAddPreview = async (updateDefault = false) => {
+		if (!currentWorkspace || !selectedWorktreeId) return;
+
+		if (updateDefault) {
+			setDefaultTabType("preview");
+			localStorage.setItem("newTabDefaultType", "preview");
+		}
+
+		try {
+			const worktree = currentWorkspace.worktrees.find(
+				(wt) => wt.id === selectedWorktreeId,
+			);
+			const previewTabs =
+				worktree?.tabs?.filter((tab) => tab.type === "preview") || [];
+			const previewNumber = previewTabs.length + 1;
+
+			const result = await window.ipcRenderer.invoke("tab-create", {
+				workspaceId: currentWorkspace.id,
+				worktreeId: selectedWorktreeId,
+				name: `Preview ${previewNumber}`,
+				type: "preview",
+			});
+
+			if (result.success) {
+				const newTabId = result.tab?.id;
+				if (newTabId) {
+					onTabSelect(selectedWorktreeId, newTabId);
+				}
+				onReload();
+			}
+		} catch (error) {
+			console.error("Error creating preview:", error);
+		}
+	};
+
+	const handleCreateDefault = () => {
+		if (defaultTabType === "terminal") {
+			handleAddTerminal();
+		} else {
+			handleAddPreview();
+		}
+	};
+
+	return (
+		<div className="space-y-0.5 mt-2">
+			<div className="relative group">
+				<button
+					type="button"
+					onClick={handleCreateDefault}
+					className="flex items-center gap-1.5 w-full h-7 px-2.5 text-xs rounded-md transition-all hover:bg-neutral-800/40 text-neutral-400 hover:text-neutral-300"
+				>
+					<Plus size={12} className="shrink-0" />
+					<span className="truncate flex-1 text-left">
+						{defaultTabType === "terminal" ? "New Terminal" : "New Preview"}
+					</span>
+				</button>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<button
+							type="button"
+							className="absolute right-1 top-1/2 -translate-y-1/2 shrink-0 opacity-0 group-hover:opacity-60 hover:opacity-100 p-1 rounded transition-opacity"
+							onMouseDown={(e) => e.stopPropagation()}
+						>
+							<ChevronDown size={14} />
+						</button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						align="start"
+						side="bottom"
+						className="w-[--radix-dropdown-menu-trigger-width] bg-neutral-800 border-neutral-700"
+					>
+						<DropdownMenuItem
+							onClick={() =>
+								handleAddTerminal(defaultTabType !== "terminal")
+							}
+							className={`cursor-pointer ${
+								defaultTabType === "terminal"
+									? "bg-neutral-700/50 text-neutral-200"
+									: "text-neutral-300"
+							}`}
+						>
+							<SquareTerminal size={14} className="text-neutral-400" />
+							<span>New Terminal</span>
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={() => handleAddPreview(defaultTabType !== "preview")}
+							className={`cursor-pointer ${
+								defaultTabType === "preview"
+									? "bg-neutral-700/50 text-neutral-200"
+									: "text-neutral-300"
+							}`}
+						>
+							<Monitor size={14} className="text-neutral-400" />
+							<span>New Preview</span>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</div>
+	);
+}
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/index.ts b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/index.ts
new file mode 100644
index 00000000000..fb7efae0fc0
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/index.ts
@@ -0,0 +1,2 @@
+export { NewTabButton } from "./NewTabButton";
+
diff --git a/bun.lock b/bun.lock
index 699c03c4a22..0078f7c349d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -247,6 +247,7 @@
       "dependencies": {
         "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
@@ -738,6 +739,8 @@
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e61ce74eb48..eb01e898a89 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,6 +14,7 @@
 		"./hover-card": "./src/components/hover-card.tsx",
 		"./dialog": "./src/components/dialog.tsx",
 		"./context-menu": "./src/components/context-menu.tsx",
+		"./dropdown-menu": "./src/components/dropdown-menu.tsx",
 		"./scroll-area": "./src/components/scroll-area.tsx",
 		"./resizable": "./src/components/resizable.tsx",
 		"./label": "./src/components/label.tsx",
@@ -29,6 +30,7 @@
 	"dependencies": {
 		"@radix-ui/react-context-menu": "^2.2.16",
 		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.15",
 		"@radix-ui/react-label": "^2.1.8",
 		"@radix-ui/react-scroll-area": "^1.2.10",
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
new file mode 100644
index 00000000000..bb0cba5015d
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

From b983cef4c9f9302c4de2905f8fbf4c9f6c36097e Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 14 Nov 2025 12:10:49 -0800
Subject: [PATCH 2/5] fix new modal button

---
 .../src/renderer/screens/main/MainScreen.tsx  |  2 +-
 .../components/NewTabButton/NewTabButton.tsx  | 23 ++---
 packages/ui/src/components/dialog.tsx         |  3 +-
 packages/ui/src/components/dropdown-menu.tsx  | 89 ++++++++++---------
 4 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/MainScreen.tsx b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
index 7cb26d4b699..b064e2d4286 100644
--- a/apps/desktop/src/renderer/screens/main/MainScreen.tsx
+++ b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
@@ -118,7 +118,7 @@ export function MainScreen() {
 			{!isSidebarOpen && (
 				<button
 					type="button"
-					className="fixed left-0 top-0 bottom-0 w-2 z-50"
+					className="fixed left-0 top-0 bottom-0 w-2 z-30"
 					onMouseEnter={() => setShowSidebarOverlay(true)}
 					aria-label="Show sidebar"
 				/>
diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
index c34858799be..07dc5d42558 100644
--- a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/components/NewTabButton/NewTabButton.tsx
@@ -1,12 +1,12 @@
-import { ChevronDown, Monitor, Plus, SquareTerminal } from "lucide-react";
-import { useState } from "react";
-import type { Workspace } from "shared/types";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@superset/ui/dropdown-menu";
+import { ChevronDown, Monitor, Plus, SquareTerminal } from "lucide-react";
+import { useState } from "react";
+import type { Workspace } from "shared/types";
 
 interface NewTabButtonProps {
 	currentWorkspace: Workspace;
@@ -131,25 +131,15 @@ export function NewTabButton({
 						className="w-[--radix-dropdown-menu-trigger-width] bg-neutral-800 border-neutral-700"
 					>
 						<DropdownMenuItem
-							onClick={() =>
-								handleAddTerminal(defaultTabType !== "terminal")
-							}
-							className={`cursor-pointer ${
-								defaultTabType === "terminal"
-									? "bg-neutral-700/50 text-neutral-200"
-									: "text-neutral-300"
-							}`}
+							onClick={() => handleAddTerminal(defaultTabType !== "terminal")}
+							className="text-neutral-300"
 						>
 							<SquareTerminal size={14} className="text-neutral-400" />
 							<span>New Terminal</span>
 						</DropdownMenuItem>
 						<DropdownMenuItem
 							onClick={() => handleAddPreview(defaultTabType !== "preview")}
-							className={`cursor-pointer ${
-								defaultTabType === "preview"
-									? "bg-neutral-700/50 text-neutral-200"
-									: "text-neutral-300"
-							}`}
+							className="text-neutral-300"
 						>
 							<Monitor size={14} className="text-neutral-400" />
 							<span>New Preview</span>
@@ -160,4 +150,3 @@ export function NewTabButton({
 		</div>
 	);
 }
-
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index ad8f008449b..20a846728c9 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -5,9 +5,10 @@ import type * as React from "react";
 import { cn } from "../lib/utils";
 
 function Dialog({
+	modal = false,
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+	return <DialogPrimitive.Root data-slot="dialog" modal={modal} {...props} />;
 }
 
 function DialogTrigger({
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index bb0cba5015d..9a1ea6a2752 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -1,13 +1,20 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "../lib/utils"
+import { cn } from "../lib/utils";
 
 function DropdownMenu({
+  modal = false,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return (
+    <DropdownMenuPrimitive.Root
+      data-slot="dropdown-menu"
+      modal={modal}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuPortal({
@@ -15,7 +22,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -26,7 +33,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -35,18 +42,16 @@ function DropdownMenuContent({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
+    <DropdownMenuPrimitive.Content
+      data-slot="dropdown-menu-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuGroup({
@@ -54,7 +59,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
@@ -63,8 +68,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -73,11 +78,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -91,7 +96,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -103,7 +108,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -114,7 +119,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -127,7 +132,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -138,7 +143,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -146,7 +151,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -154,11 +159,11 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -171,7 +176,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
@@ -183,17 +188,17 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -202,7 +207,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -210,14 +215,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -229,11 +234,11 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -252,4 +257,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

From a6d45c20b62fca7c72e4a0a74a2c729d85d9a165 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 14 Nov 2025 12:21:49 -0800
Subject: [PATCH 3/5] create task

---
 .../src/renderer/screens/main/MainScreen.tsx  |   4 +-
 .../main/components/Layout/AddTaskModal.tsx   | 631 ++++++++++++------
 .../main/components/Layout/NewLayoutMain.tsx  |   1 -
 .../renderer/screens/main/hooks/useTasks.ts   |  33 +-
 4 files changed, 435 insertions(+), 234 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/MainScreen.tsx b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
index b064e2d4286..02576320478 100644
--- a/apps/desktop/src/renderer/screens/main/MainScreen.tsx
+++ b/apps/desktop/src/renderer/screens/main/MainScreen.tsx
@@ -6,7 +6,6 @@ import { TaskTabs } from "./components/Layout/TaskTabs";
 import { MainContentArea } from "./components/MainContentArea";
 import { SidebarOverlay } from "./components/SidebarOverlay";
 import { WorkspaceSelectionModal } from "./components/WorkspaceSelectionModal";
-import { MOCK_TASKS } from "./constants";
 import {
 	useSidebar,
 	useTabs,
@@ -103,6 +102,7 @@ export function MainScreen() {
 		handleCloseAddTaskModal,
 		handleSelectTask,
 		handleCreateTask,
+		handleClearStatus,
 	} = useTasks({
 		currentWorkspace,
 		setSelectedWorktreeId,
@@ -204,7 +204,6 @@ export function MainScreen() {
 			<AddTaskModal
 				isOpen={isAddTaskModalOpen}
 				onClose={handleCloseAddTaskModal}
-				tasks={MOCK_TASKS}
 				openTasks={openTasks}
 				onSelectTask={handleSelectTask}
 				onCreateTask={handleCreateTask}
@@ -214,6 +213,7 @@ export function MainScreen() {
 				isCreating={isCreatingWorktree}
 				setupStatus={setupStatus}
 				setupOutput={setupOutput}
+				onClearStatus={handleClearStatus}
 			/>
 
 			{/* Workspace Selection Modal */}
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
index e8f60846428..e8ab5909f09 100644
--- a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
@@ -46,10 +46,31 @@ interface Task {
 	lastUpdated: string;
 }
 
+// API task response type
+interface APITask {
+	id: string;
+	slug: string;
+	title: string;
+	description: string | null;
+	status: TaskStatus;
+	branch: string | null;
+	createdAt: string;
+	updatedAt: string;
+	assignee: {
+		id: string;
+		name: string;
+		avatarUrl: string | null;
+	} | null;
+	creator: {
+		id: string;
+		name: string;
+		avatarUrl: string | null;
+	};
+}
+
 interface AddTaskModalProps {
 	isOpen: boolean;
 	onClose: () => void;
-	tasks: Task[];
 	openTasks: Task[];
 	onSelectTask: (task: Task) => void;
 	onCreateTask: (taskData: {
@@ -68,12 +89,44 @@ interface AddTaskModalProps {
 	isCreating?: boolean;
 	setupStatus?: string;
 	setupOutput?: string;
+	onClearStatus?: () => void;
+	// API configuration
+	apiBaseUrl?: string;
+}
+
+// Helper function to format relative time
+function formatRelativeTime(date: Date): string {
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / 60000);
+	const diffHours = Math.floor(diffMs / 3600000);
+	const diffDays = Math.floor(diffMs / 86400000);
+
+	if (diffMins < 1) return "just now";
+	if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
+	if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
+	if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
+	return date.toLocaleDateString();
+}
+
+// Transform API task to UI task
+function transformAPITaskToUITask(apiTask: APITask): Task {
+	return {
+		id: apiTask.id,
+		slug: apiTask.slug,
+		name: apiTask.title,
+		status: apiTask.status,
+		branch: apiTask.branch || "",
+		description: apiTask.description || "",
+		assignee: apiTask.assignee?.name || "Unassigned",
+		assigneeAvatarUrl: apiTask.assignee?.avatarUrl || "",
+		lastUpdated: formatRelativeTime(new Date(apiTask.updatedAt)),
+	};
 }
 
 export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 	isOpen,
 	onClose,
-	tasks,
 	openTasks,
 	onSelectTask,
 	onCreateTask,
@@ -83,10 +136,15 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 	isCreating = false,
 	setupStatus,
 	setupOutput,
+	onClearStatus,
+	apiBaseUrl = "http://localhost:3000",
 }) => {
 	const [mode, setMode] = useState<"list" | "new">(initialMode);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+	const [tasks, setTasks] = useState<Task[]>([]);
+	const [isLoadingTasks, setIsLoadingTasks] = useState(false);
+	const [tasksError, setTasksError] = useState<string | null>(null);
 
 	// New task form state
 	const [newTaskName, setNewTaskName] = useState("");
@@ -229,7 +287,75 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		}
 	}, [sourceBranch, worktrees]);
 
-	// Reset mode when modal opens/closes
+	// Fetch tasks when modal opens
+	useEffect(() => {
+		if (!isOpen || mode !== "list") return;
+
+		let cancelled = false;
+		setIsLoadingTasks(true);
+		setTasksError(null);
+
+		const fetchTasks = async () => {
+			try {
+				// Fetch tasks from tRPC endpoint
+				// tRPC uses format: /api/trpc/[procedure]?input={} for queries without input
+				const url = `${apiBaseUrl}/api/trpc/task.all?input=${encodeURIComponent("{}")}`;
+				const response = await fetch(url, {
+					method: "GET",
+					headers: {
+						"Content-Type": "application/json",
+					},
+				});
+
+				if (!response.ok) {
+					throw new Error(`Failed to fetch tasks: ${response.statusText}`);
+				}
+
+				// tRPC returns data in format: { result: { data: ... } }
+				const data = await response.json();
+
+				// Handle different possible response formats
+				let apiTasks: APITask[] = [];
+				if (data.result?.data) {
+					apiTasks = Array.isArray(data.result.data) ? data.result.data : [];
+				} else if (data.result?.json) {
+					apiTasks = Array.isArray(data.result.json) ? data.result.json : [];
+				} else if (Array.isArray(data)) {
+					apiTasks = data;
+				} else if (Array.isArray(data.result)) {
+					apiTasks = data.result;
+				}
+
+				if (!cancelled) {
+					const transformedTasks = apiTasks.map(transformAPITaskToUITask);
+					setTasks(transformedTasks);
+					setTasksError(null);
+				}
+			} catch (error) {
+				if (!cancelled) {
+					console.error("Failed to fetch tasks:", error);
+					setTasksError(
+						error instanceof Error
+							? error.message
+							: "Failed to load tasks. Please check if the API server is running.",
+					);
+					setTasks([]);
+				}
+			} finally {
+				if (!cancelled) {
+					setIsLoadingTasks(false);
+				}
+			}
+		};
+
+		void fetchTasks();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [isOpen, mode, apiBaseUrl]);
+
+	// Reset mode and form when modal opens/closes
 	useEffect(() => {
 		if (isOpen) {
 			setMode(initialMode);
@@ -238,10 +364,31 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 				setSourceBranch("");
 			}
 		} else {
+			// Reset form when modal closes
 			setMode("list");
+			setNewTaskName("");
+			setNewTaskDescription("");
+			setNewTaskStatus("planning");
+			setNewTaskAssignee("You");
+			setNewTaskBranch("");
+			setIsBranchManuallyEdited(false);
+			setSourceBranch("");
+			setCloneTabsFromWorktreeId("");
 		}
 	}, [isOpen, initialMode]);
 
+	// Automatically go back to list mode when creation completes
+	useEffect(() => {
+		if (!isCreating && setupStatus && mode === "new") {
+			// Small delay to show the result briefly before switching
+			const timer = setTimeout(() => {
+				setMode("list");
+				onClearStatus?.();
+			}, 1500);
+			return () => clearTimeout(timer);
+		}
+	}, [isCreating, setupStatus, mode, onClearStatus]);
+
 	// Handle opening a task
 	const handleOpenTask = useCallback(() => {
 		if (selectedTask) {
@@ -315,19 +462,8 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 			cloneTabsFromWorktreeId: cloneTabsFromWorktreeId || undefined,
 		});
 
-		// Don't close modal immediately - let parent handle closing after creation completes
-		// Reset form only if not creating (will be reset when modal closes)
-		if (!isCreating) {
-			setNewTaskName("");
-			setNewTaskDescription("");
-			setNewTaskStatus("planning");
-			setNewTaskAssignee("You");
-			setNewTaskBranch("");
-			setIsBranchManuallyEdited(false);
-			setSourceBranch("");
-			setCloneTabsFromWorktreeId("");
-			setMode("list");
-		}
+		// Don't reset form or switch mode - keep showing progress in "new" mode
+		// Form will be reset when modal closes
 	};
 
 	// Handle back to list
@@ -350,7 +486,10 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 			open={isOpen}
 			onOpenChange={(open) => !open && !isCreating && onClose()}
 		>
-			<DialogContent className="w-[90vw]! max-w-[1200px]! h-[85vh]! max-h-[800px]! p-0 gap-0 flex flex-col">
+			<DialogContent
+				className="w-[90vw]! max-w-[1200px]! h-[85vh]! max-h-[800px]! p-0 gap-0 flex flex-col"
+				showCloseButton={!isCreating}
+			>
 				{/* Header */}
 				<DialogHeader className="px-6 pt-6 pb-4 border-b border-neutral-800 shrink-0">
 					<div className="flex items-center justify-between pr-8">
@@ -422,9 +561,21 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 										{/* Task list */}
 										<ScrollArea className="flex-1 h-0">
 											<div className="p-2 space-y-0.5">
-												{filteredTasks.length === 0 ? (
+												{isLoadingTasks ? (
+													<div className="flex items-center justify-center py-8">
+														<Loader2 size={20} className="animate-spin text-neutral-500" />
+														<span className="ml-2 text-sm text-neutral-500">
+															Loading tasks...
+														</span>
+													</div>
+												) : tasksError ? (
+													<div className="text-center text-red-400 text-sm py-8 px-4">
+														<p className="font-medium mb-1">Failed to load tasks</p>
+														<p className="text-xs text-neutral-500">{tasksError}</p>
+													</div>
+												) : filteredTasks.length === 0 ? (
 													<div className="text-center text-neutral-500 text-sm py-8">
-														No tasks found
+														{searchQuery ? "No tasks match your search" : "No tasks found"}
 													</div>
 												) : (
 													filteredTasks.map((task) => (
@@ -454,13 +605,18 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 						{/* Footer */}
 						<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between shrink-0">
 							<div className="text-sm text-neutral-500">
-								{filteredTasks.length} of {tasks.length} tasks
+								{!isLoadingTasks && !tasksError
+									? `${filteredTasks.length} of ${tasks.length} tasks`
+									: ""}
 							</div>
 							<div className="flex gap-2">
 								<Button variant="ghost" onClick={onClose}>
 									Cancel
 								</Button>
-								<Button onClick={handleOpenTask} disabled={!selectedTask}>
+								<Button
+									onClick={handleOpenTask}
+									disabled={!selectedTask || isLoadingTasks}
+								>
 									{isSelectedTaskOpen ? "Switch to Task" : "Open Task"}
 								</Button>
 							</div>
@@ -473,222 +629,259 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 							onSubmit={handleCreateTask}
 							className="flex-1 flex flex-col min-h-0 overflow-hidden"
 						>
-							{/* Scrollable content area */}
-							<ScrollArea className="flex-1 min-h-0">
-								<div className="px-6 pt-6 space-y-4 pb-4">
-									{/* Title section */}
-									<div className="space-y-4">
-										<div className="space-y-2">
-											<Label htmlFor="task-name">Title</Label>
-											<Input
-												id="task-name"
-												placeholder="My new feature"
-												value={newTaskName}
-												onChange={(e) => setNewTaskName(e.target.value)}
-												autoFocus
-												required
-												disabled={isCreating}
-											/>
-										</div>
-										<div className="space-y-2">
-											<Label htmlFor="task-description">
-												Description{" "}
-												<span className="text-muted-foreground font-normal">
-													(Optional)
-												</span>
-											</Label>
-											<Textarea
-												id="task-description"
-												placeholder="What is the goal of this worktree?"
-												value={newTaskDescription}
-												onChange={(e) => setNewTaskDescription(e.target.value)}
-												disabled={isCreating}
-												rows={3}
-												className="resize-none"
-											/>
-										</div>
-									</div>
-
-									{/* Setup Progress Section */}
-									{isCreating && (
-										<div className="flex flex-col space-y-3 min-h-[200px] pt-4">
-											<div className="flex items-center gap-2 text-sm text-neutral-300">
-												<Loader2 size={16} className="animate-spin" />
-												<span>{setupStatus || "Creating worktree..."}</span>
-											</div>
+							{/* Show progress/result view when creating or when there's a status */}
+							{(isCreating || setupStatus) ? (
+								<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+									<ScrollArea className="flex-1 min-h-0">
+										<div className="px-6 pt-6 pb-4">
+											{/* Progress Section - shown while creating */}
+											{isCreating && (
+												<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
+													<div className="flex items-center gap-2 text-sm text-neutral-300">
+														<Loader2 size={16} className="animate-spin" />
+														<span>{setupStatus || "Creating worktree..."}</span>
+													</div>
 
-											{setupOutput && (
-												<div className="bg-neutral-900 rounded border border-neutral-700 overflow-hidden min-h-[200px]">
-													<TerminalOutput
-														output={setupOutput}
-														className="w-full h-full"
-													/>
+													{setupOutput && (
+														<div className="flex-1 bg-neutral-900 rounded border border-neutral-700 overflow-hidden min-h-[400px]">
+															<TerminalOutput
+																output={setupOutput}
+																className="w-full h-full"
+															/>
+														</div>
+													)}
 												</div>
 											)}
-										</div>
-									)}
-
-									{/* Error Display - shown when creation failed */}
-									{!isCreating &&
-										setupStatus &&
-										(setupStatus.toLowerCase().includes("failed") ||
-											setupStatus.toLowerCase().includes("error")) && (
-											<div className="flex flex-col space-y-3 min-h-[200px] pt-4">
-												<div className="flex items-center gap-2 text-sm text-red-400 font-medium">
-													<span>{setupStatus}</span>
-												</div>
 
-												{setupOutput && (
-													<div className="bg-red-500/10 rounded border border-red-500/30 p-3 overflow-auto min-h-[200px]">
-														<pre className="text-red-200 text-xs font-mono whitespace-pre-wrap">
-															{setupOutput}
-														</pre>
+											{/* Success Display - shown when creation succeeded */}
+											{!isCreating &&
+												setupStatus &&
+												!setupStatus.toLowerCase().includes("failed") &&
+												!setupStatus.toLowerCase().includes("error") &&
+												(setupStatus.toLowerCase().includes("success") ||
+													setupStatus.toLowerCase().includes("completed")) && (
+													<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
+														<div className="flex items-center gap-2 text-sm text-green-400 font-medium">
+															<span>{setupStatus}</span>
+														</div>
+
+														{setupOutput && (
+															<div className="flex-1 bg-green-500/10 rounded border border-green-500/30 p-3 overflow-auto min-h-[400px]">
+																<pre className="text-green-200 text-xs font-mono whitespace-pre-wrap">
+																	{setupOutput}
+																</pre>
+															</div>
+														)}
 													</div>
 												)}
-											</div>
-										)}
 
-									{/* Worktree creation options */}
-									{(branches.length > 0 || worktrees.length > 0) && (
-										<div className="space-y-3  pt-4">
-											{branches.length > 0 && (
+											{/* Error Display - shown when creation failed */}
+											{!isCreating &&
+												setupStatus &&
+												(setupStatus.toLowerCase().includes("failed") ||
+													setupStatus.toLowerCase().includes("error")) && (
+													<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
+														<div className="flex items-center gap-2 text-sm text-red-400 font-medium">
+															<span>{setupStatus}</span>
+														</div>
+
+														{setupOutput && (
+															<div className="flex-1 bg-red-500/10 rounded border border-red-500/30 p-3 overflow-auto min-h-[400px]">
+																<pre className="text-red-200 text-xs font-mono whitespace-pre-wrap">
+																	{setupOutput}
+																</pre>
+															</div>
+														)}
+													</div>
+												)}
+										</div>
+									</ScrollArea>
+									{/* Footer for progress view */}
+									<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-end gap-2 shrink-0">
+										<Button
+											type="button"
+											variant="ghost"
+											onClick={onClose}
+											disabled={isCreating}
+										>
+											{isCreating ? "Creating..." : "Close"}
+										</Button>
+									</div>
+								</div>
+							) : (
+								<>
+									{/* Form fields - hidden when creating */}
+									<ScrollArea className="flex-1 min-h-0">
+										<div className="px-6 pt-6 space-y-4 pb-4">
+											{/* Title section */}
+											<div className="space-y-4">
 												<div className="space-y-2">
-													<Label htmlFor="source-branch">
-														Create From Branch
-													</Label>
-													<select
-														id="source-branch"
-														value={sourceBranch}
-														onChange={(e) => setSourceBranch(e.target.value)}
-														disabled={isCreating}
-														className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
-													>
-														{branches.map((branch) => (
-															<option key={branch} value={branch}>
-																{branch}
-															</option>
-														))}
-													</select>
+													<Label htmlFor="task-name">Title</Label>
+													<Input
+														id="task-name"
+														placeholder="My new feature"
+														value={newTaskName}
+														onChange={(e) => setNewTaskName(e.target.value)}
+														autoFocus
+														required
+													/>
 												</div>
-											)}
-
-											{worktrees.length > 0 && (
 												<div className="space-y-2">
-													<Label htmlFor="clone-tabs">
-														Clone Tabs From
+													<Label htmlFor="task-description">
+														Description{" "}
+														<span className="text-muted-foreground font-normal">
+															(Optional)
+														</span>
 													</Label>
-													<select
-														id="clone-tabs"
-														value={cloneTabsFromWorktreeId}
-														onChange={(e) =>
-															setCloneTabsFromWorktreeId(e.target.value)
-														}
-														disabled={isCreating}
-														className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
-													>
-														<option value="">Don't clone tabs</option>
-														{worktrees.map((worktree) => (
-															<option key={worktree.id} value={worktree.id}>
-																{worktree.branch} ({worktree.tabs.length} tab
-																{worktree.tabs.length !== 1 ? "s" : ""})
-															</option>
-														))}
-													</select>
+													<Textarea
+														id="task-description"
+														placeholder="What is the goal of this worktree?"
+														value={newTaskDescription}
+														onChange={(e) => setNewTaskDescription(e.target.value)}
+														rows={3}
+														className="resize-none"
+													/>
+												</div>
+											</div>
+
+											{/* Worktree creation options */}
+											{(branches.length > 0 || worktrees.length > 0) && (
+												<div className="space-y-3 pt-4">
+													{branches.length > 0 && (
+														<div className="space-y-2">
+															<Label htmlFor="source-branch">
+																Create From Branch
+															</Label>
+															<select
+																id="source-branch"
+																value={sourceBranch}
+																onChange={(e) => setSourceBranch(e.target.value)}
+																className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+															>
+																{branches.map((branch) => (
+																	<option key={branch} value={branch}>
+																		{branch}
+																	</option>
+																))}
+															</select>
+														</div>
+													)}
+
+													{worktrees.length > 0 && (
+														<div className="space-y-2">
+															<Label htmlFor="clone-tabs">
+																Clone Tabs From
+															</Label>
+															<select
+																id="clone-tabs"
+																value={cloneTabsFromWorktreeId}
+																onChange={(e) =>
+																	setCloneTabsFromWorktreeId(e.target.value)
+																}
+																className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+															>
+																<option value="">Don't clone tabs</option>
+																{worktrees.map((worktree) => (
+																	<option key={worktree.id} value={worktree.id}>
+																		{worktree.branch} ({worktree.tabs.length} tab
+																		{worktree.tabs.length !== 1 ? "s" : ""})
+																	</option>
+																))}
+															</select>
+														</div>
+													)}
+
+													<div className="space-y-2">
+														<Label htmlFor="branch-name">
+															Branch Name
+														</Label>
+														<Input
+															id="branch-name"
+															type="text"
+															placeholder="Auto-generated from title"
+															value={newTaskBranch}
+															onChange={(e) => {
+																setNewTaskBranch(e.target.value);
+																setIsBranchManuallyEdited(true);
+															}}
+														/>
+													</div>
 												</div>
 											)}
 
-											<div className="space-y-2">
-												<Label htmlFor="branch-name">
-													Branch Name
-												</Label>
-												<Input
-													id="branch-name"
-													type="text"
-													placeholder="Auto-generated from title"
-													value={newTaskBranch}
-													onChange={(e) => {
-														setNewTaskBranch(e.target.value);
-														setIsBranchManuallyEdited(true);
-													}}
-													disabled={isCreating}
-												/>
+											{/* Metadata section */}
+											<div className="flex items-center gap-3">
+												{/* Status */}
+												<Select
+													value={newTaskStatus}
+													onValueChange={(value) =>
+														setNewTaskStatus(value as TaskStatus)
+													}
+												>
+													<SelectTrigger>
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectItem value="planning">Planning</SelectItem>
+														<SelectItem value="needs-feedback">
+															Needs Feedback
+														</SelectItem>
+														<SelectItem value="ready-to-merge">
+															Ready to Merge
+														</SelectItem>
+													</SelectContent>
+												</Select>
+
+												{/* Assignee */}
+												<Select
+													value={newTaskAssignee}
+													onValueChange={setNewTaskAssignee}
+												>
+													<SelectTrigger>
+														<SelectValue />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectItem value="You" className="px-3">
+															<div className="flex items-center gap-2">
+																<Avatar
+																	imageUrl="https://i.pravatar.cc/150?img=1"
+																	name="You"
+																	size={16}
+																/>
+																<span>You</span>
+															</div>
+														</SelectItem>
+														<SelectSeparator />
+														<SelectGroup>
+															<SelectLabel>Agents</SelectLabel>
+															<SelectItem value="Claude" className="px-3">
+																<div className="flex items-center gap-2">
+																	<Avatar
+																		imageUrl="https://upload.wikimedia.org/wikipedia/commons/b/b0/Claude_AI_symbol.svg"
+																		name="Claude"
+																		size={16}
+																	/>
+																	<span>Claude</span>
+																</div>
+															</SelectItem>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
 											</div>
 										</div>
-									)}
-
-									{/* Metadata section */}
-									<div className="flex items-center gap-3">
-										{/* Status */}
-										<Select
-											value={newTaskStatus}
-											onValueChange={(value) =>
-												setNewTaskStatus(value as TaskStatus)
-											}
-											disabled={isCreating}
-										>
-											<SelectTrigger>
-												<SelectValue />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectItem value="planning">Planning</SelectItem>
-												<SelectItem value="needs-feedback">
-													Needs Feedback
-												</SelectItem>
-												<SelectItem value="ready-to-merge">
-													Ready to Merge
-												</SelectItem>
-											</SelectContent>
-										</Select>
-
-										{/* Assignee */}
-										<Select
-											value={newTaskAssignee}
-											onValueChange={setNewTaskAssignee}
-											disabled={isCreating}
+									</ScrollArea>
+									{/* Footer for new task form */}
+									<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between gap-2 shrink-0">
+										<Button
+											type="submit"
+											disabled={!newTaskName.trim()}
+											className="ml-auto"
 										>
-											<SelectTrigger>
-												<SelectValue />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectItem value="You" className="px-3">
-													<div className="flex items-center gap-2">
-														<Avatar
-															imageUrl="https://i.pravatar.cc/150?img=1"
-															name="You"
-															size={16}
-														/>
-														<span>You</span>
-													</div>
-												</SelectItem>
-												<SelectSeparator />
-												<SelectGroup>
-													<SelectLabel>Agents</SelectLabel>
-													<SelectItem value="Claude" className="px-3">
-														<div className="flex items-center gap-2">
-															<Avatar
-																imageUrl="https://upload.wikimedia.org/wikipedia/commons/b/b0/Claude_AI_symbol.svg"
-																name="Claude"
-																size={16}
-															/>
-															<span>Claude</span>
-														</div>
-													</SelectItem>
-												</SelectGroup>
-											</SelectContent>
-										</Select>
+											Create task
+										</Button>
 									</div>
-								</div>
-							</ScrollArea>
-							{/* Footer for new task form */}
-							<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between gap-2 shrink-0">
-								<Button
-									type="submit"
-									disabled={!newTaskName.trim() || isCreating}
-									className="ml-auto"
-								>
-									{isCreating ? "Creating..." : "Create task"}
-								</Button>
-							</div>
+								</>
+							)}
 						</form>
 					</>
 				)}
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/NewLayoutMain.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/NewLayoutMain.tsx
index 74dcb8e19b0..39fb62cfbed 100644
--- a/apps/desktop/src/renderer/screens/main/components/Layout/NewLayoutMain.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/NewLayoutMain.tsx
@@ -1104,7 +1104,6 @@ export const MainLayout: React.FC = () => {
 			<AddTaskModal
 				isOpen={isAddTaskModalOpen}
 				onClose={handleCloseAddTaskModal}
-				tasks={MOCK_TASKS}
 				openTasks={openTasks}
 				onSelectTask={handleSelectTask}
 				onCreateTask={handleCreateTask}
diff --git a/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts b/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
index f0f468e483b..679745d5a04 100644
--- a/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
+++ b/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
@@ -59,6 +59,11 @@ export function useTasks({
 		setSetupOutput(undefined);
 	};
 
+	const handleClearStatus = () => {
+		setSetupStatus(undefined);
+		setSetupOutput(undefined);
+	};
+
 	const handleSelectTask = (task: UITask) => {
 		if (!currentWorkspace) return;
 
@@ -183,25 +188,28 @@ export function useTasks({
 							: "Setup completed with errors",
 					);
 					setSetupOutput(result.setupResult.output);
-
-					// Keep modal open for 1.5 seconds to show result
-					await new Promise((resolve) => setTimeout(resolve, 1500));
+				} else {
+					setSetupStatus("Task created successfully!");
 				}
 
-				// Reset modal state and close
-				setIsAddTaskModalOpen(false);
 				setIsCreatingWorktree(false);
-				setSetupStatus(undefined);
-				setSetupOutput(undefined);
 
 				// Reload workspace to get the new worktree
 				await handleWorktreeCreated();
 
-				// Switch to the new worktree if available
-				if (result.worktree) {
-					setSelectedWorktreeId(result.worktree.id);
-					if (result.worktree.tabs && result.worktree.tabs.length > 0) {
-						handleTabSelect(result.worktree.id, result.worktree.tabs[0].id);
+				// Only close modal and select worktree if modal is still open
+				if (isAddTaskModalOpen) {
+					// Close modal and reset state
+					setIsAddTaskModalOpen(false);
+					setSetupStatus(undefined);
+					setSetupOutput(undefined);
+
+					// Switch to the new worktree if available
+					if (result.worktree) {
+						setSelectedWorktreeId(result.worktree.id);
+						if (result.worktree.tabs && result.worktree.tabs.length > 0) {
+							handleTabSelect(result.worktree.id, result.worktree.tabs[0].id);
+						}
 					}
 				}
 			} else {
@@ -233,6 +241,7 @@ export function useTasks({
 		handleCloseAddTaskModal,
 		handleSelectTask,
 		handleCreateTask,
+		handleClearStatus,
 	};
 }
 

From a16a93e6f0596e1c078cbe67ca406194742e10f0 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 14 Nov 2025 12:53:47 -0800
Subject: [PATCH 4/5] creating task

---
 .../main/components/Layout/AddTaskModal.tsx   | 768 ++----------------
 .../Layout/AddTaskModal/CreatingView.tsx      | 100 +++
 .../Layout/AddTaskModal/TaskForm.tsx          | 211 +++++
 .../Layout/AddTaskModal/TaskList.tsx          | 149 ++++
 .../components/Layout/AddTaskModal/index.ts   |   6 +
 .../components/Layout/AddTaskModal/types.ts   |  60 ++
 .../Layout/AddTaskModal/useTaskData.ts        |  81 ++
 .../Layout/AddTaskModal/useTaskForm.ts        |  97 +++
 .../components/Layout/AddTaskModal/utils.ts   |  73 ++
 .../CreateWorktreeModal/TerminalOutput.tsx    |  23 +-
 10 files changed, 861 insertions(+), 707 deletions(-)
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/CreatingView.tsx
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskForm.tsx
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskList.tsx
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/index.ts
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/types.ts
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskData.ts
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskForm.ts
 create mode 100644 apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/utils.ts

diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
index e8ab5909f09..aaef40cc9df 100644
--- a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal.tsx
@@ -5,124 +5,15 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@superset/ui/dialog";
-import { Input } from "@superset/ui/input";
-import { Label } from "@superset/ui/label";
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from "@superset/ui/resizable";
-import { ScrollArea } from "@superset/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectSeparator,
-	SelectTrigger,
-	SelectValue,
-} from "@superset/ui/select";
-import { Textarea } from "@superset/ui/textarea";
-import { ArrowLeft, Loader2, Plus, Search, X } from "lucide-react";
+import { ArrowLeft, Plus } from "lucide-react";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { Worktree } from "shared/types";
-import { TerminalOutput } from "../Sidebar/components/CreateWorktreeModal/TerminalOutput";
-import { Avatar } from "./Avatar";
-import type { TaskStatus } from "./StatusIndicator";
-import { TaskListItem } from "./TaskListItem";
-import { TaskPreview } from "./TaskPreview";
-
-interface Task {
-	id: string;
-	slug: string;
-	name: string;
-	status: TaskStatus;
-	branch: string;
-	description: string;
-	assignee: string;
-	assigneeAvatarUrl: string;
-	lastUpdated: string;
-}
-
-// API task response type
-interface APITask {
-	id: string;
-	slug: string;
-	title: string;
-	description: string | null;
-	status: TaskStatus;
-	branch: string | null;
-	createdAt: string;
-	updatedAt: string;
-	assignee: {
-		id: string;
-		name: string;
-		avatarUrl: string | null;
-	} | null;
-	creator: {
-		id: string;
-		name: string;
-		avatarUrl: string | null;
-	};
-}
-
-interface AddTaskModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	openTasks: Task[];
-	onSelectTask: (task: Task) => void;
-	onCreateTask: (taskData: {
-		name: string;
-		description: string;
-		status: TaskStatus;
-		assignee: string;
-		branch: string;
-		sourceBranch?: string;
-		cloneTabsFromWorktreeId?: string;
-	}) => void;
-	initialMode?: "list" | "new";
-	// Worktree creation props
-	branches?: string[];
-	worktrees?: Worktree[];
-	isCreating?: boolean;
-	setupStatus?: string;
-	setupOutput?: string;
-	onClearStatus?: () => void;
-	// API configuration
-	apiBaseUrl?: string;
-}
-
-// Helper function to format relative time
-function formatRelativeTime(date: Date): string {
-	const now = new Date();
-	const diffMs = now.getTime() - date.getTime();
-	const diffMins = Math.floor(diffMs / 60000);
-	const diffHours = Math.floor(diffMs / 3600000);
-	const diffDays = Math.floor(diffMs / 86400000);
-
-	if (diffMins < 1) return "just now";
-	if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
-	if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
-	if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
-	return date.toLocaleDateString();
-}
-
-// Transform API task to UI task
-function transformAPITaskToUITask(apiTask: APITask): Task {
-	return {
-		id: apiTask.id,
-		slug: apiTask.slug,
-		name: apiTask.title,
-		status: apiTask.status,
-		branch: apiTask.branch || "",
-		description: apiTask.description || "",
-		assignee: apiTask.assignee?.name || "Unassigned",
-		assigneeAvatarUrl: apiTask.assignee?.avatarUrl || "",
-		lastUpdated: formatRelativeTime(new Date(apiTask.updatedAt)),
-	};
-}
+import { CreatingView } from "./AddTaskModal/CreatingView";
+import { TaskForm } from "./AddTaskModal/TaskForm";
+import { TaskList } from "./AddTaskModal/TaskList";
+import type { AddTaskModalProps } from "./AddTaskModal/types";
+import { useTaskData } from "./AddTaskModal/useTaskData";
+import { useTaskForm } from "./AddTaskModal/useTaskForm";
 
 export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 	isOpen,
@@ -142,18 +33,14 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 	const [mode, setMode] = useState<"list" | "new">(initialMode);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
-	const [tasks, setTasks] = useState<Task[]>([]);
-	const [isLoadingTasks, setIsLoadingTasks] = useState(false);
-	const [tasksError, setTasksError] = useState<string | null>(null);
 
-	// New task form state
-	const [newTaskName, setNewTaskName] = useState("");
-	const [newTaskDescription, setNewTaskDescription] = useState("");
-	const [newTaskStatus, setNewTaskStatus] = useState<TaskStatus>("planning");
-	const [newTaskAssignee, setNewTaskAssignee] = useState("You");
-	const [newTaskBranch, setNewTaskBranch] = useState("");
-	const [sourceBranch, setSourceBranch] = useState("");
-	const [cloneTabsFromWorktreeId, setCloneTabsFromWorktreeId] = useState("");
+	const { tasks, isLoadingTasks, tasksError } = useTaskData(
+		isOpen,
+		mode,
+		apiBaseUrl,
+	);
+
+	const formState = useTaskForm(isOpen, mode, branches, worktrees);
 
 	// Filter tasks based on search query
 	const filteredTasks = useMemo(() => {
@@ -176,7 +63,7 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		}
 	}, [filteredTasks, selectedTaskId]);
 
-	// Get currently selected task (from all tasks, not just filtered)
+	// Get currently selected task
 	const selectedTask = useMemo(
 		() => tasks.find((task) => task.id === selectedTaskId) || null,
 		[tasks, selectedTaskId],
@@ -189,198 +76,18 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		[selectedTask, openTasks],
 	);
 
-	// Track if branch name was manually edited
-	const [isBranchManuallyEdited, setIsBranchManuallyEdited] = useState(false);
-
-	// Generate branch name with collision avoidance (same logic as generateBranchName)
-	const generateBranchNameWithCollisionAvoidance = useCallback(
-		(title: string): string => {
-			// Convert to lowercase and replace spaces/special chars with hyphens
-			let slug = title
-				.toLowerCase()
-				.trim()
-				.replace(/[\s_]+/g, "-")
-				.replace(/[^a-z0-9-]/g, "")
-				.replace(/-+/g, "-")
-				.replace(/^-+|-+$/g, "");
-
-			// If slug is empty after sanitization, use a default
-			if (!slug) {
-				slug = "worktree";
-			}
-
-			// Generate random suffix (4 chars) for collision avoidance
-			const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
-			let randomSuffix = "";
-			for (let i = 0; i < 4; i++) {
-				randomSuffix += chars.charAt(
-					Math.floor(Math.random() * chars.length),
-				);
-			}
-
-			// Calculate available length (max 50 chars, reserve 5 for "-" + suffix)
-			const maxLength = 50;
-			const availableLength = maxLength - 4 - 1; // 45 chars for base slug
-
-			// Truncate slug if needed
-			if (slug.length > availableLength) {
-				const truncated = slug.substring(0, availableLength);
-				const lastHyphen = truncated.lastIndexOf("-");
-
-				if (lastHyphen > availableLength * 0.7) {
-					slug = truncated.substring(0, lastHyphen);
-				} else {
-					slug = truncated;
-				}
-
-				slug = slug.replace(/-+$/, "");
-			}
-
-			return `${slug}-${randomSuffix}`;
-		},
-		[],
-	);
-
-	// Auto-generate branch name from task name (only if not manually edited)
-	useEffect(() => {
-		if (!isBranchManuallyEdited && newTaskName) {
-			const branchName = generateBranchNameWithCollisionAvoidance(newTaskName);
-			setNewTaskBranch(branchName);
-		} else if (!newTaskName) {
-			setNewTaskBranch("");
-			setIsBranchManuallyEdited(false);
-		}
-	}, [newTaskName, isBranchManuallyEdited, generateBranchNameWithCollisionAvoidance]);
-
-	// Initialize source branch when modal opens or branches change
-	// Always try to default to "main" if available
-	useEffect(() => {
-		if (isOpen && mode === "new" && branches.length > 0) {
-			// Prefer "main" branch, fallback to "master", then first branch
-			const mainBranch = branches.find((b) => b.toLowerCase() === "main");
-			const masterBranch = branches.find((b) => b.toLowerCase() === "master");
-			const preferredBranch = mainBranch || masterBranch || branches[0];
-
-			// Only update if sourceBranch is empty or not in the branches list
-			// This ensures we default to "main" but don't override user selections
-			if (!sourceBranch || !branches.includes(sourceBranch)) {
-				setSourceBranch(preferredBranch);
-			}
-		}
-	}, [isOpen, mode, branches, sourceBranch]);
-
-	// Auto-select worktree to clone tabs from if it matches the source branch
-	useEffect(() => {
-		if (sourceBranch && worktrees.length > 0) {
-			// Find worktree with matching branch
-			const matchingWorktree = worktrees.find(
-				(wt) => wt.branch === sourceBranch,
-			);
-			if (matchingWorktree) {
-				setCloneTabsFromWorktreeId(matchingWorktree.id);
-			} else {
-				// Clear selection if no matching worktree
-				setCloneTabsFromWorktreeId("");
-			}
-		} else {
-			setCloneTabsFromWorktreeId("");
-		}
-	}, [sourceBranch, worktrees]);
-
-	// Fetch tasks when modal opens
-	useEffect(() => {
-		if (!isOpen || mode !== "list") return;
-
-		let cancelled = false;
-		setIsLoadingTasks(true);
-		setTasksError(null);
-
-		const fetchTasks = async () => {
-			try {
-				// Fetch tasks from tRPC endpoint
-				// tRPC uses format: /api/trpc/[procedure]?input={} for queries without input
-				const url = `${apiBaseUrl}/api/trpc/task.all?input=${encodeURIComponent("{}")}`;
-				const response = await fetch(url, {
-					method: "GET",
-					headers: {
-						"Content-Type": "application/json",
-					},
-				});
-
-				if (!response.ok) {
-					throw new Error(`Failed to fetch tasks: ${response.statusText}`);
-				}
-
-				// tRPC returns data in format: { result: { data: ... } }
-				const data = await response.json();
-
-				// Handle different possible response formats
-				let apiTasks: APITask[] = [];
-				if (data.result?.data) {
-					apiTasks = Array.isArray(data.result.data) ? data.result.data : [];
-				} else if (data.result?.json) {
-					apiTasks = Array.isArray(data.result.json) ? data.result.json : [];
-				} else if (Array.isArray(data)) {
-					apiTasks = data;
-				} else if (Array.isArray(data.result)) {
-					apiTasks = data.result;
-				}
-
-				if (!cancelled) {
-					const transformedTasks = apiTasks.map(transformAPITaskToUITask);
-					setTasks(transformedTasks);
-					setTasksError(null);
-				}
-			} catch (error) {
-				if (!cancelled) {
-					console.error("Failed to fetch tasks:", error);
-					setTasksError(
-						error instanceof Error
-							? error.message
-							: "Failed to load tasks. Please check if the API server is running.",
-					);
-					setTasks([]);
-				}
-			} finally {
-				if (!cancelled) {
-					setIsLoadingTasks(false);
-				}
-			}
-		};
-
-		void fetchTasks();
-
-		return () => {
-			cancelled = true;
-		};
-	}, [isOpen, mode, apiBaseUrl]);
-
-	// Reset mode and form when modal opens/closes
+	// Reset mode when modal opens/closes
 	useEffect(() => {
 		if (isOpen) {
 			setMode(initialMode);
-			// Reset sourceBranch when opening in new mode so it can be set to "main"
-			if (initialMode === "new") {
-				setSourceBranch("");
-			}
 		} else {
-			// Reset form when modal closes
 			setMode("list");
-			setNewTaskName("");
-			setNewTaskDescription("");
-			setNewTaskStatus("planning");
-			setNewTaskAssignee("You");
-			setNewTaskBranch("");
-			setIsBranchManuallyEdited(false);
-			setSourceBranch("");
-			setCloneTabsFromWorktreeId("");
 		}
 	}, [isOpen, initialMode]);
 
 	// Automatically go back to list mode when creation completes
 	useEffect(() => {
 		if (!isCreating && setupStatus && mode === "new") {
-			// Small delay to show the result briefly before switching
 			const timer = setTimeout(() => {
 				setMode("list");
 				onClearStatus?.();
@@ -394,7 +101,6 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		if (selectedTask) {
 			onSelectTask(selectedTask);
 			onClose();
-			// Reset state
 			setSearchQuery("");
 			setSelectedTaskId(null);
 		}
@@ -405,7 +111,6 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		if (!isOpen) return;
 
 		const handleKeyDown = (e: KeyboardEvent) => {
-			// Arrow up/down navigation
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
 				const currentIndex = filteredTasks.findIndex(
@@ -419,14 +124,12 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 				}
 			}
 
-			// Enter to open task
 			if (e.key === "Enter" && selectedTask) {
 				handleOpenTask();
 			}
 
-			// Escape to close (handled by Dialog, but we'll clear search too)
 			if (e.key === "Escape" && searchQuery) {
-				e.stopPropagation(); // Prevent closing dialog
+				e.stopPropagation();
 				setSearchQuery("");
 			}
 		};
@@ -442,43 +145,26 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 		handleOpenTask,
 	]);
 
-	// Clear search
-	const handleClearSearch = () => {
-		setSearchQuery("");
-	};
-
 	// Handle creating a new task
 	const handleCreateTask = (e: React.FormEvent) => {
 		e.preventDefault();
-		if (!newTaskName.trim() || isCreating) return;
+		if (!formState.newTaskName.trim() || isCreating) return;
 
 		onCreateTask({
-			name: newTaskName.trim(),
-			description: newTaskDescription.trim(),
-			status: newTaskStatus,
-			assignee: newTaskAssignee,
-			branch: newTaskBranch,
-			sourceBranch: sourceBranch || undefined,
-			cloneTabsFromWorktreeId: cloneTabsFromWorktreeId || undefined,
+			name: formState.newTaskName.trim(),
+			description: formState.newTaskDescription.trim(),
+			status: formState.newTaskStatus,
+			assignee: formState.newTaskAssignee,
+			branch: formState.newTaskBranch,
+			sourceBranch: formState.sourceBranch || undefined,
+			cloneTabsFromWorktreeId: formState.cloneTabsFromWorktreeId || undefined,
 		});
-
-		// Don't reset form or switch mode - keep showing progress in "new" mode
-		// Form will be reset when modal closes
 	};
 
 	// Handle back to list
 	const handleBackToList = () => {
-		if (isCreating) return; // Prevent going back while creating
+		if (isCreating) return;
 		setMode("list");
-		// Reset form
-		setNewTaskName("");
-		setNewTaskDescription("");
-		setNewTaskStatus("planning");
-		setNewTaskAssignee("You");
-		setNewTaskBranch("");
-		setIsBranchManuallyEdited(false);
-		setSourceBranch("");
-		setCloneTabsFromWorktreeId("");
 	};
 
 	return (
@@ -523,366 +209,52 @@ export const AddTaskModal: React.FC<AddTaskModalProps> = ({
 
 				{/* Content - switches between list and new task form */}
 				{mode === "list" ? (
-					<>
-						{/* Two-column layout */}
-						<div className="flex-1 overflow-hidden min-h-0">
-							<ResizablePanelGroup direction="horizontal" className="h-full">
-								{/* Left panel: Search + Task list */}
-								<ResizablePanel defaultSize={40} minSize={30} maxSize={50}>
-									<div className="flex flex-col h-full">
-										{/* Search bar */}
-										<div className="px-4 pt-4 pb-3 border-b border-neutral-800/50 shrink-0">
-											<div className="relative">
-												<Search
-													size={16}
-													className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
-												/>
-												<Input
-													type="text"
-													placeholder="Search tasks..."
-													value={searchQuery}
-													onChange={(e) => setSearchQuery(e.target.value)}
-													className="pl-9 pr-9 bg-neutral-900/50 border-neutral-700/50 focus-visible:border-neutral-600"
-													autoFocus
-												/>
-												{searchQuery && (
-													<Button
-														variant="ghost"
-														size="icon-sm"
-														onClick={handleClearSearch}
-														className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6"
-													>
-														<X size={14} />
-													</Button>
-												)}
-											</div>
-										</div>
-
-										{/* Task list */}
-										<ScrollArea className="flex-1 h-0">
-											<div className="p-2 space-y-0.5">
-												{isLoadingTasks ? (
-													<div className="flex items-center justify-center py-8">
-														<Loader2 size={20} className="animate-spin text-neutral-500" />
-														<span className="ml-2 text-sm text-neutral-500">
-															Loading tasks...
-														</span>
-													</div>
-												) : tasksError ? (
-													<div className="text-center text-red-400 text-sm py-8 px-4">
-														<p className="font-medium mb-1">Failed to load tasks</p>
-														<p className="text-xs text-neutral-500">{tasksError}</p>
-													</div>
-												) : filteredTasks.length === 0 ? (
-													<div className="text-center text-neutral-500 text-sm py-8">
-														{searchQuery ? "No tasks match your search" : "No tasks found"}
-													</div>
-												) : (
-													filteredTasks.map((task) => (
-														<TaskListItem
-															key={task.id}
-															task={task}
-															isSelected={task.id === selectedTaskId}
-															isOpen={openTasks.some((t) => t.id === task.id)}
-															onClick={() => setSelectedTaskId(task.id)}
-														/>
-													))
-												)}
-											</div>
-										</ScrollArea>
-									</div>
-								</ResizablePanel>
-
-								<ResizableHandle className="w-px bg-neutral-800" />
-
-								{/* Right panel: Task preview */}
-								<ResizablePanel defaultSize={60} minSize={50}>
-									<TaskPreview task={selectedTask} />
-								</ResizablePanel>
-							</ResizablePanelGroup>
-						</div>
-
-						{/* Footer */}
-						<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between shrink-0">
-							<div className="text-sm text-neutral-500">
-								{!isLoadingTasks && !tasksError
-									? `${filteredTasks.length} of ${tasks.length} tasks`
-									: ""}
-							</div>
-							<div className="flex gap-2">
-								<Button variant="ghost" onClick={onClose}>
-									Cancel
-								</Button>
-								<Button
-									onClick={handleOpenTask}
-									disabled={!selectedTask || isLoadingTasks}
-								>
-									{isSelectedTaskOpen ? "Switch to Task" : "Open Task"}
-								</Button>
-							</div>
-						</div>
-					</>
+					<TaskList
+						searchQuery={searchQuery}
+						onSearchChange={setSearchQuery}
+						tasks={tasks}
+						filteredTasks={filteredTasks}
+						isLoadingTasks={isLoadingTasks}
+						tasksError={tasksError}
+						selectedTaskId={selectedTaskId}
+						onTaskSelect={setSelectedTaskId}
+						openTasks={openTasks}
+						selectedTask={selectedTask}
+						onOpenTask={handleOpenTask}
+						isSelectedTaskOpen={isSelectedTaskOpen}
+						onClose={onClose}
+					/>
 				) : (
 					<>
-						{/* New task form - Description-focused layout */}
-						<form
-							onSubmit={handleCreateTask}
-							className="flex-1 flex flex-col min-h-0 overflow-hidden"
-						>
-							{/* Show progress/result view when creating or when there's a status */}
-							{(isCreating || setupStatus) ? (
-								<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-									<ScrollArea className="flex-1 min-h-0">
-										<div className="px-6 pt-6 pb-4">
-											{/* Progress Section - shown while creating */}
-											{isCreating && (
-												<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
-													<div className="flex items-center gap-2 text-sm text-neutral-300">
-														<Loader2 size={16} className="animate-spin" />
-														<span>{setupStatus || "Creating worktree..."}</span>
-													</div>
-
-													{setupOutput && (
-														<div className="flex-1 bg-neutral-900 rounded border border-neutral-700 overflow-hidden min-h-[400px]">
-															<TerminalOutput
-																output={setupOutput}
-																className="w-full h-full"
-															/>
-														</div>
-													)}
-												</div>
-											)}
-
-											{/* Success Display - shown when creation succeeded */}
-											{!isCreating &&
-												setupStatus &&
-												!setupStatus.toLowerCase().includes("failed") &&
-												!setupStatus.toLowerCase().includes("error") &&
-												(setupStatus.toLowerCase().includes("success") ||
-													setupStatus.toLowerCase().includes("completed")) && (
-													<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
-														<div className="flex items-center gap-2 text-sm text-green-400 font-medium">
-															<span>{setupStatus}</span>
-														</div>
-
-														{setupOutput && (
-															<div className="flex-1 bg-green-500/10 rounded border border-green-500/30 p-3 overflow-auto min-h-[400px]">
-																<pre className="text-green-200 text-xs font-mono whitespace-pre-wrap">
-																	{setupOutput}
-																</pre>
-															</div>
-														)}
-													</div>
-												)}
-
-											{/* Error Display - shown when creation failed */}
-											{!isCreating &&
-												setupStatus &&
-												(setupStatus.toLowerCase().includes("failed") ||
-													setupStatus.toLowerCase().includes("error")) && (
-													<div className="flex-1 flex flex-col space-y-3 overflow-hidden min-h-[200px]">
-														<div className="flex items-center gap-2 text-sm text-red-400 font-medium">
-															<span>{setupStatus}</span>
-														</div>
-
-														{setupOutput && (
-															<div className="flex-1 bg-red-500/10 rounded border border-red-500/30 p-3 overflow-auto min-h-[400px]">
-																<pre className="text-red-200 text-xs font-mono whitespace-pre-wrap">
-																	{setupOutput}
-																</pre>
-															</div>
-														)}
-													</div>
-												)}
-										</div>
-									</ScrollArea>
-									{/* Footer for progress view */}
-									<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-end gap-2 shrink-0">
-										<Button
-											type="button"
-											variant="ghost"
-											onClick={onClose}
-											disabled={isCreating}
-										>
-											{isCreating ? "Creating..." : "Close"}
-										</Button>
-									</div>
-								</div>
-							) : (
-								<>
-									{/* Form fields - hidden when creating */}
-									<ScrollArea className="flex-1 min-h-0">
-										<div className="px-6 pt-6 space-y-4 pb-4">
-											{/* Title section */}
-											<div className="space-y-4">
-												<div className="space-y-2">
-													<Label htmlFor="task-name">Title</Label>
-													<Input
-														id="task-name"
-														placeholder="My new feature"
-														value={newTaskName}
-														onChange={(e) => setNewTaskName(e.target.value)}
-														autoFocus
-														required
-													/>
-												</div>
-												<div className="space-y-2">
-													<Label htmlFor="task-description">
-														Description{" "}
-														<span className="text-muted-foreground font-normal">
-															(Optional)
-														</span>
-													</Label>
-													<Textarea
-														id="task-description"
-														placeholder="What is the goal of this worktree?"
-														value={newTaskDescription}
-														onChange={(e) => setNewTaskDescription(e.target.value)}
-														rows={3}
-														className="resize-none"
-													/>
-												</div>
-											</div>
-
-											{/* Worktree creation options */}
-											{(branches.length > 0 || worktrees.length > 0) && (
-												<div className="space-y-3 pt-4">
-													{branches.length > 0 && (
-														<div className="space-y-2">
-															<Label htmlFor="source-branch">
-																Create From Branch
-															</Label>
-															<select
-																id="source-branch"
-																value={sourceBranch}
-																onChange={(e) => setSourceBranch(e.target.value)}
-																className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
-															>
-																{branches.map((branch) => (
-																	<option key={branch} value={branch}>
-																		{branch}
-																	</option>
-																))}
-															</select>
-														</div>
-													)}
-
-													{worktrees.length > 0 && (
-														<div className="space-y-2">
-															<Label htmlFor="clone-tabs">
-																Clone Tabs From
-															</Label>
-															<select
-																id="clone-tabs"
-																value={cloneTabsFromWorktreeId}
-																onChange={(e) =>
-																	setCloneTabsFromWorktreeId(e.target.value)
-																}
-																className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
-															>
-																<option value="">Don't clone tabs</option>
-																{worktrees.map((worktree) => (
-																	<option key={worktree.id} value={worktree.id}>
-																		{worktree.branch} ({worktree.tabs.length} tab
-																		{worktree.tabs.length !== 1 ? "s" : ""})
-																	</option>
-																))}
-															</select>
-														</div>
-													)}
-
-													<div className="space-y-2">
-														<Label htmlFor="branch-name">
-															Branch Name
-														</Label>
-														<Input
-															id="branch-name"
-															type="text"
-															placeholder="Auto-generated from title"
-															value={newTaskBranch}
-															onChange={(e) => {
-																setNewTaskBranch(e.target.value);
-																setIsBranchManuallyEdited(true);
-															}}
-														/>
-													</div>
-												</div>
-											)}
-
-											{/* Metadata section */}
-											<div className="flex items-center gap-3">
-												{/* Status */}
-												<Select
-													value={newTaskStatus}
-													onValueChange={(value) =>
-														setNewTaskStatus(value as TaskStatus)
-													}
-												>
-													<SelectTrigger>
-														<SelectValue />
-													</SelectTrigger>
-													<SelectContent>
-														<SelectItem value="planning">Planning</SelectItem>
-														<SelectItem value="needs-feedback">
-															Needs Feedback
-														</SelectItem>
-														<SelectItem value="ready-to-merge">
-															Ready to Merge
-														</SelectItem>
-													</SelectContent>
-												</Select>
-
-												{/* Assignee */}
-												<Select
-													value={newTaskAssignee}
-													onValueChange={setNewTaskAssignee}
-												>
-													<SelectTrigger>
-														<SelectValue />
-													</SelectTrigger>
-													<SelectContent>
-														<SelectItem value="You" className="px-3">
-															<div className="flex items-center gap-2">
-																<Avatar
-																	imageUrl="https://i.pravatar.cc/150?img=1"
-																	name="You"
-																	size={16}
-																/>
-																<span>You</span>
-															</div>
-														</SelectItem>
-														<SelectSeparator />
-														<SelectGroup>
-															<SelectLabel>Agents</SelectLabel>
-															<SelectItem value="Claude" className="px-3">
-																<div className="flex items-center gap-2">
-																	<Avatar
-																		imageUrl="https://upload.wikimedia.org/wikipedia/commons/b/b0/Claude_AI_symbol.svg"
-																		name="Claude"
-																		size={16}
-																	/>
-																	<span>Claude</span>
-																</div>
-															</SelectItem>
-														</SelectGroup>
-													</SelectContent>
-												</Select>
-											</div>
-										</div>
-									</ScrollArea>
-									{/* Footer for new task form */}
-									<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between gap-2 shrink-0">
-										<Button
-											type="submit"
-											disabled={!newTaskName.trim()}
-											className="ml-auto"
-										>
-											Create task
-										</Button>
-									</div>
-								</>
-							)}
-						</form>
+						{/* Show creating view when creating or when there's a status */}
+						{(isCreating || setupStatus) ? (
+							<CreatingView
+								setupStatus={setupStatus}
+								setupOutput={setupOutput}
+								isCreating={isCreating}
+								onClose={onClose}
+							/>
+						) : (
+							<TaskForm
+								newTaskName={formState.newTaskName}
+								onTaskNameChange={formState.setNewTaskName}
+								newTaskDescription={formState.newTaskDescription}
+								onTaskDescriptionChange={formState.setNewTaskDescription}
+								newTaskStatus={formState.newTaskStatus}
+								onTaskStatusChange={formState.setNewTaskStatus}
+								newTaskAssignee={formState.newTaskAssignee}
+								onTaskAssigneeChange={formState.setNewTaskAssignee}
+								newTaskBranch={formState.newTaskBranch}
+								onTaskBranchChange={formState.setNewTaskBranch}
+								sourceBranch={formState.sourceBranch}
+								onSourceBranchChange={formState.setSourceBranch}
+								cloneTabsFromWorktreeId={formState.cloneTabsFromWorktreeId}
+								onCloneTabsFromWorktreeIdChange={formState.setCloneTabsFromWorktreeId}
+								branches={branches}
+								worktrees={worktrees}
+								onSubmit={handleCreateTask}
+							/>
+						)}
 					</>
 				)}
 			</DialogContent>
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/CreatingView.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/CreatingView.tsx
new file mode 100644
index 00000000000..851ba3e62a5
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/CreatingView.tsx
@@ -0,0 +1,100 @@
+import { Button } from "@superset/ui/button";
+import { Loader2 } from "lucide-react";
+import type React from "react";
+import { ScrollArea } from "@superset/ui/scroll-area";
+import { TerminalOutput } from "../../Sidebar/components/CreateWorktreeModal/TerminalOutput";
+
+interface CreatingViewProps {
+	setupStatus?: string;
+	setupOutput?: string;
+	isCreating: boolean;
+	onClose: () => void;
+}
+
+export const CreatingView: React.FC<CreatingViewProps> = ({
+	setupStatus,
+	setupOutput,
+	isCreating,
+	onClose,
+}) => {
+	const isError =
+		setupStatus &&
+		(setupStatus.toLowerCase().includes("failed") ||
+			setupStatus.toLowerCase().includes("error"));
+
+	const isSuccess =
+		setupStatus &&
+		!isError &&
+		(setupStatus.toLowerCase().includes("success") ||
+			setupStatus.toLowerCase().includes("completed"));
+
+	return (
+		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+			<ScrollArea className="flex-1 min-h-0">
+				<div className="px-6 pt-6 pb-4">
+					{isCreating && (
+						<div className="flex flex-col space-y-3">
+							<div className="flex items-center gap-2 text-sm text-neutral-300">
+								<Loader2 size={16} className="animate-spin" />
+								<span>{setupStatus || "Creating worktree..."}</span>
+							</div>
+
+							{setupOutput && (
+								<div className="bg-neutral-900 rounded border border-neutral-700 overflow-hidden h-[500px]">
+									<TerminalOutput
+										output={setupOutput}
+										className="w-full h-full"
+									/>
+								</div>
+							)}
+						</div>
+					)}
+
+					{isSuccess && (
+						<div className="flex flex-col space-y-3">
+							<div className="flex items-center gap-2 text-sm text-green-400 font-medium">
+								<span>{setupStatus}</span>
+							</div>
+
+							{setupOutput && (
+								<div className="bg-green-500/10 rounded border border-green-500/30 p-3 overflow-auto h-[500px]">
+									<pre className="text-green-200 text-xs font-mono whitespace-pre-wrap">
+										{setupOutput}
+									</pre>
+								</div>
+							)}
+						</div>
+					)}
+
+					{isError && (
+						<div className="flex flex-col space-y-3">
+							<div className="flex items-center gap-2 text-sm text-red-400 font-medium">
+								<span>{setupStatus}</span>
+							</div>
+
+							{setupOutput && (
+								<div className="bg-red-500/10 rounded border border-red-500/30 p-3 overflow-auto h-[500px]">
+									<pre className="text-red-200 text-xs font-mono whitespace-pre-wrap">
+										{setupOutput}
+									</pre>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+
+			<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-end gap-2 shrink-0">
+				<Button
+					type="button"
+					variant="ghost"
+					onClick={onClose}
+					disabled={isCreating}
+				>
+					{isCreating ? "Creating..." : "Close"}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskForm.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskForm.tsx
new file mode 100644
index 00000000000..07e46b6d640
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskForm.tsx
@@ -0,0 +1,211 @@
+import { Button } from "@superset/ui/button";
+import { Input } from "@superset/ui/input";
+import { Label } from "@superset/ui/label";
+import { ScrollArea } from "@superset/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+} from "@superset/ui/select";
+import { Textarea } from "@superset/ui/textarea";
+import type React from "react";
+import type { Worktree } from "shared/types";
+import { Avatar } from "../Avatar";
+import type { TaskStatus } from "../StatusIndicator";
+
+interface TaskFormProps {
+	newTaskName: string;
+	onTaskNameChange: (value: string) => void;
+	newTaskDescription: string;
+	onTaskDescriptionChange: (value: string) => void;
+	newTaskStatus: TaskStatus;
+	onTaskStatusChange: (value: TaskStatus) => void;
+	newTaskAssignee: string;
+	onTaskAssigneeChange: (value: string) => void;
+	newTaskBranch: string;
+	onTaskBranchChange: (value: string) => void;
+	sourceBranch: string;
+	onSourceBranchChange: (value: string) => void;
+	cloneTabsFromWorktreeId: string;
+	onCloneTabsFromWorktreeIdChange: (value: string) => void;
+	branches: string[];
+	worktrees: Worktree[];
+	onSubmit: (e: React.FormEvent) => void;
+}
+
+export const TaskForm: React.FC<TaskFormProps> = ({
+	newTaskName,
+	onTaskNameChange,
+	newTaskDescription,
+	onTaskDescriptionChange,
+	newTaskStatus,
+	onTaskStatusChange,
+	newTaskAssignee,
+	onTaskAssigneeChange,
+	newTaskBranch,
+	onTaskBranchChange,
+	sourceBranch,
+	onSourceBranchChange,
+	cloneTabsFromWorktreeId,
+	onCloneTabsFromWorktreeIdChange,
+	branches,
+	worktrees,
+	onSubmit,
+}) => {
+	return (
+		<form
+			onSubmit={onSubmit}
+			className="flex-1 flex flex-col min-h-0 overflow-hidden"
+		>
+			<ScrollArea className="flex-1 min-h-0">
+				<div className="px-6 pt-6 space-y-4 pb-4">
+					{/* Title section */}
+					<div className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="task-name">Title</Label>
+							<Input
+								id="task-name"
+								placeholder="My new feature"
+								value={newTaskName}
+								onChange={(e) => onTaskNameChange(e.target.value)}
+								autoFocus
+								required
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="task-description">
+								Description{" "}
+								<span className="text-muted-foreground font-normal">(Optional)</span>
+							</Label>
+							<Textarea
+								id="task-description"
+								placeholder="What is the goal of this worktree?"
+								value={newTaskDescription}
+								onChange={(e) => onTaskDescriptionChange(e.target.value)}
+								rows={3}
+								className="resize-none"
+							/>
+						</div>
+					</div>
+
+					{/* Worktree creation options */}
+					{(branches.length > 0 || worktrees.length > 0) && (
+						<div className="space-y-3 pt-4">
+							{branches.length > 0 && (
+								<div className="space-y-2">
+									<Label htmlFor="source-branch">Create From Branch</Label>
+									<select
+										id="source-branch"
+										value={sourceBranch}
+										onChange={(e) => onSourceBranchChange(e.target.value)}
+										className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+									>
+										{branches.map((branch) => (
+											<option key={branch} value={branch}>
+												{branch}
+											</option>
+										))}
+									</select>
+								</div>
+							)}
+
+							{worktrees.length > 0 && (
+								<div className="space-y-2">
+									<Label htmlFor="clone-tabs">Clone Tabs From</Label>
+									<select
+										id="clone-tabs"
+										value={cloneTabsFromWorktreeId}
+										onChange={(e) => onCloneTabsFromWorktreeIdChange(e.target.value)}
+										className="flex h-9 w-full rounded-md border border-neutral-700 bg-neutral-900/50 px-3 py-1 text-sm text-neutral-200 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+									>
+										<option value="">Don't clone tabs</option>
+										{worktrees.map((worktree) => (
+											<option key={worktree.id} value={worktree.id}>
+												{worktree.branch} ({worktree.tabs.length} tab
+												{worktree.tabs.length !== 1 ? "s" : ""})
+											</option>
+										))}
+									</select>
+								</div>
+							)}
+
+							<div className="space-y-2">
+								<Label htmlFor="branch-name">Branch Name</Label>
+								<Input
+									id="branch-name"
+									type="text"
+									placeholder="Auto-generated from title"
+									value={newTaskBranch}
+									onChange={(e) => onTaskBranchChange(e.target.value)}
+								/>
+							</div>
+						</div>
+					)}
+
+					{/* Metadata section */}
+					<div className="flex items-center gap-3">
+						{/* Status */}
+						<Select
+							value={newTaskStatus}
+							onValueChange={(value) => onTaskStatusChange(value as TaskStatus)}
+						>
+							<SelectTrigger>
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="planning">Planning</SelectItem>
+								<SelectItem value="needs-feedback">Needs Feedback</SelectItem>
+								<SelectItem value="ready-to-merge">Ready to Merge</SelectItem>
+							</SelectContent>
+						</Select>
+
+						{/* Assignee */}
+						<Select value={newTaskAssignee} onValueChange={onTaskAssigneeChange}>
+							<SelectTrigger>
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="You" className="px-3">
+									<div className="flex items-center gap-2">
+										<Avatar
+											imageUrl="https://i.pravatar.cc/150?img=1"
+											name="You"
+											size={16}
+										/>
+										<span>You</span>
+									</div>
+								</SelectItem>
+								<SelectSeparator />
+								<SelectGroup>
+									<SelectLabel>Agents</SelectLabel>
+									<SelectItem value="Claude" className="px-3">
+										<div className="flex items-center gap-2">
+											<Avatar
+												imageUrl="https://upload.wikimedia.org/wikipedia/commons/b/b0/Claude_AI_symbol.svg"
+												name="Claude"
+												size={16}
+											/>
+											<span>Claude</span>
+										</div>
+									</SelectItem>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			</ScrollArea>
+			{/* Footer for new task form */}
+			<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between gap-2 shrink-0">
+				<Button type="submit" disabled={!newTaskName.trim()} className="ml-auto">
+					Create task
+				</Button>
+			</div>
+		</form>
+	);
+};
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskList.tsx b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskList.tsx
new file mode 100644
index 00000000000..6b4681392df
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/TaskList.tsx
@@ -0,0 +1,149 @@
+import { Button } from "@superset/ui/button";
+import { Input } from "@superset/ui/input";
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@superset/ui/resizable";
+import { ScrollArea } from "@superset/ui/scroll-area";
+import { Loader2, Search, X } from "lucide-react";
+import type React from "react";
+import type { Task } from "./types";
+import { TaskListItem } from "../TaskListItem";
+import { TaskPreview } from "../TaskPreview";
+
+interface TaskListProps {
+	searchQuery: string;
+	onSearchChange: (query: string) => void;
+	tasks: Task[];
+	filteredTasks: Task[];
+	isLoadingTasks: boolean;
+	tasksError: string | null;
+	selectedTaskId: string | null;
+	onTaskSelect: (taskId: string) => void;
+	openTasks: Task[];
+	selectedTask: Task | null;
+	onOpenTask: () => void;
+	isSelectedTaskOpen: boolean;
+	onClose: () => void;
+}
+
+export const TaskList: React.FC<TaskListProps> = ({
+	searchQuery,
+	onSearchChange,
+	tasks,
+	filteredTasks,
+	isLoadingTasks,
+	tasksError,
+	selectedTaskId,
+	onTaskSelect,
+	openTasks,
+	selectedTask,
+	onOpenTask,
+	isSelectedTaskOpen,
+	onClose,
+}) => {
+	const handleClearSearch = () => {
+		onSearchChange("");
+	};
+
+	return (
+		<>
+			{/* Two-column layout */}
+			<div className="flex-1 overflow-hidden min-h-0">
+				<ResizablePanelGroup direction="horizontal" className="h-full">
+					{/* Left panel: Search + Task list */}
+					<ResizablePanel defaultSize={40} minSize={30} maxSize={50}>
+						<div className="flex flex-col h-full">
+							{/* Search bar */}
+							<div className="px-4 pt-4 pb-3 border-b border-neutral-800/50 shrink-0">
+								<div className="relative">
+									<Search
+										size={16}
+										className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
+									/>
+									<Input
+										type="text"
+										placeholder="Search tasks..."
+										value={searchQuery}
+										onChange={(e) => onSearchChange(e.target.value)}
+										className="pl-9 pr-9 bg-neutral-900/50 border-neutral-700/50 focus-visible:border-neutral-600"
+										autoFocus
+									/>
+									{searchQuery && (
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											onClick={handleClearSearch}
+											className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6"
+										>
+											<X size={14} />
+										</Button>
+									)}
+								</div>
+							</div>
+
+							{/* Task list */}
+							<ScrollArea className="flex-1 h-0">
+								<div className="p-2 space-y-0.5">
+									{isLoadingTasks ? (
+										<div className="flex items-center justify-center py-8">
+											<Loader2 size={20} className="animate-spin text-neutral-500" />
+											<span className="ml-2 text-sm text-neutral-500">
+												Loading tasks...
+											</span>
+										</div>
+									) : tasksError ? (
+										<div className="text-center text-red-400 text-sm py-8 px-4">
+											<p className="font-medium mb-1">Failed to load tasks</p>
+											<p className="text-xs text-neutral-500">{tasksError}</p>
+										</div>
+									) : filteredTasks.length === 0 ? (
+										<div className="text-center text-neutral-500 text-sm py-8">
+											{searchQuery ? "No tasks match your search" : "No tasks found"}
+										</div>
+									) : (
+										filteredTasks.map((task) => (
+											<TaskListItem
+												key={task.id}
+												task={task}
+												isSelected={task.id === selectedTaskId}
+												isOpen={openTasks.some((t) => t.id === task.id)}
+												onClick={() => onTaskSelect(task.id)}
+											/>
+										))
+									)}
+								</div>
+							</ScrollArea>
+						</div>
+					</ResizablePanel>
+
+					<ResizableHandle className="w-px bg-neutral-800" />
+
+					{/* Right panel: Task preview */}
+					<ResizablePanel defaultSize={60} minSize={50}>
+						<TaskPreview task={selectedTask} />
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</div>
+
+			{/* Footer */}
+			<div className="px-6 py-4 border-t border-neutral-800 flex items-center justify-between shrink-0">
+				<div className="text-sm text-neutral-500">
+					{!isLoadingTasks && !tasksError
+						? `${filteredTasks.length} of ${tasks.length} tasks`
+						: ""}
+				</div>
+				<div className="flex gap-2">
+					<Button variant="ghost" onClick={onClose}>
+						Cancel
+					</Button>
+					<Button onClick={onOpenTask} disabled={!selectedTask || isLoadingTasks}>
+						{isSelectedTaskOpen ? "Switch to Task" : "Open Task"}
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+};
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/index.ts b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/index.ts
new file mode 100644
index 00000000000..3343ffe5bbe
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/index.ts
@@ -0,0 +1,6 @@
+export { AddTaskModal } from "../AddTaskModal";
+export type { AddTaskModalProps, Task, APITask } from "./types";
+export { CreatingView } from "./CreatingView";
+export { TaskForm } from "./TaskForm";
+export { TaskList } from "./TaskList";
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/types.ts b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/types.ts
new file mode 100644
index 00000000000..a2a10b0399d
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/types.ts
@@ -0,0 +1,60 @@
+import type { TaskStatus } from "../StatusIndicator";
+import type { Worktree } from "shared/types";
+
+export interface Task {
+	id: string;
+	slug: string;
+	name: string;
+	status: TaskStatus;
+	branch: string;
+	description: string;
+	assignee: string;
+	assigneeAvatarUrl: string;
+	lastUpdated: string;
+}
+
+export interface APITask {
+	id: string;
+	slug: string;
+	title: string;
+	description: string | null;
+	status: TaskStatus;
+	branch: string | null;
+	createdAt: string;
+	updatedAt: string;
+	assignee: {
+		id: string;
+		name: string;
+		avatarUrl: string | null;
+	} | null;
+	creator: {
+		id: string;
+		name: string;
+		avatarUrl: string | null;
+	};
+}
+
+export interface AddTaskModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	openTasks: Task[];
+	onSelectTask: (task: Task) => void;
+	onCreateTask: (taskData: {
+		name: string;
+		description: string;
+		status: TaskStatus;
+		assignee: string;
+		branch: string;
+		sourceBranch?: string;
+		cloneTabsFromWorktreeId?: string;
+	}) => void;
+	initialMode?: "list" | "new";
+	branches?: string[];
+	worktrees?: Worktree[];
+	isCreating?: boolean;
+	setupStatus?: string;
+	setupOutput?: string;
+	onClearStatus?: () => void;
+	apiBaseUrl?: string;
+}
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskData.ts b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskData.ts
new file mode 100644
index 00000000000..1b32331e33b
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskData.ts
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import type { APITask, Task } from "./types";
+import { transformAPITaskToUITask } from "./utils";
+
+export function useTaskData(
+	isOpen: boolean,
+	mode: "list" | "new",
+	apiBaseUrl: string,
+) {
+	const [tasks, setTasks] = useState<Task[]>([]);
+	const [isLoadingTasks, setIsLoadingTasks] = useState(false);
+	const [tasksError, setTasksError] = useState<string | null>(null);
+
+	// Fetch tasks when modal opens
+	useEffect(() => {
+		if (!isOpen || mode !== "list") return;
+
+		let cancelled = false;
+		setIsLoadingTasks(true);
+		setTasksError(null);
+
+		const fetchTasks = async () => {
+			try {
+				const url = `${apiBaseUrl}/api/trpc/task.all?input=${encodeURIComponent("{}")}`;
+				const response = await fetch(url, {
+					method: "GET",
+					headers: {
+						"Content-Type": "application/json",
+					},
+				});
+
+				if (!response.ok) {
+					throw new Error(`Failed to fetch tasks: ${response.statusText}`);
+				}
+
+				const data = await response.json();
+
+				// Handle different possible response formats
+				let apiTasks: APITask[] = [];
+				if (data.result?.data) {
+					apiTasks = Array.isArray(data.result.data) ? data.result.data : [];
+				} else if (data.result?.json) {
+					apiTasks = Array.isArray(data.result.json) ? data.result.json : [];
+				} else if (Array.isArray(data)) {
+					apiTasks = data;
+				} else if (Array.isArray(data.result)) {
+					apiTasks = data.result;
+				}
+
+				if (!cancelled) {
+					const transformedTasks = apiTasks.map(transformAPITaskToUITask);
+					setTasks(transformedTasks);
+					setTasksError(null);
+				}
+			} catch (error) {
+				if (!cancelled) {
+					console.error("Failed to fetch tasks:", error);
+					setTasksError(
+						error instanceof Error
+							? error.message
+							: "Failed to load tasks. Please check if the API server is running.",
+					);
+					setTasks([]);
+				}
+			} finally {
+				if (!cancelled) {
+					setIsLoadingTasks(false);
+				}
+			}
+		};
+
+		void fetchTasks();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [isOpen, mode, apiBaseUrl]);
+
+	return { tasks, isLoadingTasks, tasksError };
+}
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskForm.ts b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskForm.ts
new file mode 100644
index 00000000000..4cfa07083a1
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/useTaskForm.ts
@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from "react";
+import type { TaskStatus } from "../StatusIndicator";
+import type { Worktree } from "shared/types";
+import { generateBranchNameWithCollisionAvoidance } from "./utils";
+
+export function useTaskForm(
+	isOpen: boolean,
+	mode: "list" | "new",
+	branches: string[],
+	worktrees: Worktree[],
+) {
+	const [newTaskName, setNewTaskName] = useState("");
+	const [newTaskDescription, setNewTaskDescription] = useState("");
+	const [newTaskStatus, setNewTaskStatus] = useState<TaskStatus>("planning");
+	const [newTaskAssignee, setNewTaskAssignee] = useState("You");
+	const [newTaskBranch, setNewTaskBranch] = useState("");
+	const [sourceBranch, setSourceBranch] = useState("");
+	const [cloneTabsFromWorktreeId, setCloneTabsFromWorktreeId] = useState("");
+	const [isBranchManuallyEdited, setIsBranchManuallyEdited] = useState(false);
+
+	// Auto-generate branch name from task name (only if not manually edited)
+	useEffect(() => {
+		if (!isBranchManuallyEdited && newTaskName) {
+			const branchName = generateBranchNameWithCollisionAvoidance(newTaskName);
+			setNewTaskBranch(branchName);
+		} else if (!newTaskName) {
+			setNewTaskBranch("");
+			setIsBranchManuallyEdited(false);
+		}
+	}, [newTaskName, isBranchManuallyEdited]);
+
+	// Initialize source branch when modal opens or branches change
+	useEffect(() => {
+		if (isOpen && mode === "new" && branches.length > 0) {
+			const mainBranch = branches.find((b) => b.toLowerCase() === "main");
+			const masterBranch = branches.find((b) => b.toLowerCase() === "master");
+			const preferredBranch = mainBranch || masterBranch || branches[0];
+
+			if (!sourceBranch || !branches.includes(sourceBranch)) {
+				setSourceBranch(preferredBranch);
+			}
+		}
+	}, [isOpen, mode, branches, sourceBranch]);
+
+	// Auto-select worktree to clone tabs from if it matches the source branch
+	useEffect(() => {
+		if (sourceBranch && worktrees.length > 0) {
+			const matchingWorktree = worktrees.find((wt) => wt.branch === sourceBranch);
+			if (matchingWorktree) {
+				setCloneTabsFromWorktreeId(matchingWorktree.id);
+			} else {
+				setCloneTabsFromWorktreeId("");
+			}
+		} else {
+			setCloneTabsFromWorktreeId("");
+		}
+	}, [sourceBranch, worktrees]);
+
+	// Reset form when modal closes
+	useEffect(() => {
+		if (!isOpen) {
+			setNewTaskName("");
+			setNewTaskDescription("");
+			setNewTaskStatus("planning");
+			setNewTaskAssignee("You");
+			setNewTaskBranch("");
+			setIsBranchManuallyEdited(false);
+			setSourceBranch("");
+			setCloneTabsFromWorktreeId("");
+		} else if (isOpen && mode === "new") {
+			setSourceBranch("");
+		}
+	}, [isOpen, mode]);
+
+	const handleTaskBranchChange = useCallback((value: string) => {
+		setNewTaskBranch(value);
+		setIsBranchManuallyEdited(true);
+	}, []);
+
+	return {
+		newTaskName,
+		setNewTaskName,
+		newTaskDescription,
+		setNewTaskDescription,
+		newTaskStatus,
+		setNewTaskStatus,
+		newTaskAssignee,
+		setNewTaskAssignee,
+		newTaskBranch,
+		setNewTaskBranch: handleTaskBranchChange,
+		sourceBranch,
+		setSourceBranch,
+		cloneTabsFromWorktreeId,
+		setCloneTabsFromWorktreeId,
+	};
+}
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/utils.ts b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/utils.ts
new file mode 100644
index 00000000000..92af8e38164
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/Layout/AddTaskModal/utils.ts
@@ -0,0 +1,73 @@
+import type { APITask, Task } from "./types";
+
+export function formatRelativeTime(date: Date): string {
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / 60000);
+	const diffHours = Math.floor(diffMs / 3600000);
+	const diffDays = Math.floor(diffMs / 86400000);
+
+	if (diffMins < 1) return "just now";
+	if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
+	if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
+	if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
+	return date.toLocaleDateString();
+}
+
+export function transformAPITaskToUITask(apiTask: APITask): Task {
+	return {
+		id: apiTask.id,
+		slug: apiTask.slug,
+		name: apiTask.title,
+		status: apiTask.status,
+		branch: apiTask.branch || "",
+		description: apiTask.description || "",
+		assignee: apiTask.assignee?.name || "Unassigned",
+		assigneeAvatarUrl: apiTask.assignee?.avatarUrl || "",
+		lastUpdated: formatRelativeTime(new Date(apiTask.updatedAt)),
+	};
+}
+
+export function generateBranchNameWithCollisionAvoidance(title: string): string {
+	// Convert to lowercase and replace spaces/special chars with hyphens
+	let slug = title
+		.toLowerCase()
+		.trim()
+		.replace(/[\s_]+/g, "-")
+		.replace(/[^a-z0-9-]/g, "")
+		.replace(/-+/g, "-")
+		.replace(/^-+|-+$/g, "");
+
+	// If slug is empty after sanitization, use a default
+	if (!slug) {
+		slug = "worktree";
+	}
+
+	// Generate random suffix (4 chars) for collision avoidance
+	const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+	let randomSuffix = "";
+	for (let i = 0; i < 4; i++) {
+		randomSuffix += chars.charAt(Math.floor(Math.random() * chars.length));
+	}
+
+	// Calculate available length (max 50 chars, reserve 5 for "-" + suffix)
+	const maxLength = 50;
+	const availableLength = maxLength - 4 - 1; // 45 chars for base slug
+
+	// Truncate slug if needed
+	if (slug.length > availableLength) {
+		const truncated = slug.substring(0, availableLength);
+		const lastHyphen = truncated.lastIndexOf("-");
+
+		if (lastHyphen > availableLength * 0.7) {
+			slug = truncated.substring(0, lastHyphen);
+		} else {
+			slug = truncated;
+		}
+
+		slug = slug.replace(/-+$/, "");
+	}
+
+	return `${slug}-${randomSuffix}`;
+}
+
diff --git a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/CreateWorktreeModal/TerminalOutput.tsx b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/CreateWorktreeModal/TerminalOutput.tsx
index 3a6df2cef47..8192a13fadf 100644
--- a/apps/desktop/src/renderer/screens/main/components/Sidebar/components/CreateWorktreeModal/TerminalOutput.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/Sidebar/components/CreateWorktreeModal/TerminalOutput.tsx
@@ -59,19 +59,24 @@ export function TerminalOutput({ output, className }: TerminalOutputProps) {
 		const terminal = xtermRef.current;
 		if (!terminal) return;
 
-		// Only write the new content that was added
-		if (output !== lastOutputRef.current) {
-			if (output.startsWith(lastOutputRef.current)) {
-				// Append only the new content
-				const newContent = output.slice(lastOutputRef.current.length);
+		// Only update if output changed
+		if (output === lastOutputRef.current) return;
+
+		// If output is an extension of previous output, append only new content
+		if (lastOutputRef.current && output.startsWith(lastOutputRef.current)) {
+			const newContent = output.slice(lastOutputRef.current.length);
+			if (newContent) {
 				terminal.write(newContent);
-			} else {
-				// Output changed completely, clear and rewrite
-				terminal.clear();
+			}
+		} else {
+			// Output changed completely or is new, clear and write everything
+			terminal.clear();
+			if (output) {
 				terminal.write(output);
 			}
-			lastOutputRef.current = output;
 		}
+
+		lastOutputRef.current = output;
 	}, [output]);
 
 	return (

From d891e874a0a023c0b90be1ac4f532f2aaccd9ed2 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 14 Nov 2025 12:54:58 -0800
Subject: [PATCH 5/5] creating task

---
 .../renderer/screens/main/hooks/useTasks.ts   | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts b/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
index 679745d5a04..b1d550785d1 100644
--- a/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
+++ b/apps/desktop/src/renderer/screens/main/hooks/useTasks.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Worktree } from "shared/types";
 import type { TaskStatus } from "../components/Layout/StatusIndicator";
 import type { UITask, PendingWorktree } from "../types";
@@ -29,6 +29,19 @@ export function useTasks({
 	const [pendingWorktrees, setPendingWorktrees] = useState<PendingWorktree[]>(
 		[],
 	);
+	const progressHandlerRef = useRef<((data: { status: string; output: string }) => void) | null>(null);
+	const isHandlingProgressRef = useRef(false);
+
+	// Cleanup IPC listener on unmount or when creation completes
+	useEffect(() => {
+		return () => {
+			if (progressHandlerRef.current) {
+				window.ipcRenderer.removeListener("worktree-setup-progress", progressHandlerRef.current);
+				progressHandlerRef.current = null;
+			}
+			isHandlingProgressRef.current = false;
+		};
+	}, []);
 
 	// Compute which tasks have worktrees (are "open")
 	const openTasks = MOCK_TASKS.filter((task) =>
@@ -152,13 +165,24 @@ export function useTasks({
 		setSetupStatus("Creating git worktree...");
 		setSetupOutput(undefined);
 
+		// Clean up any existing listener first
+		if (progressHandlerRef.current) {
+			window.ipcRenderer.removeListener("worktree-setup-progress", progressHandlerRef.current);
+		}
+
+		isHandlingProgressRef.current = true;
+
 		// Listen for setup progress events
 		const progressHandler = (data: { status: string; output: string }) => {
+			// Ignore events if we're no longer handling progress
+			if (!isHandlingProgressRef.current) return;
+			
 			if (data && data.status !== undefined && data.output !== undefined) {
 				setSetupStatus(data.status);
 				setSetupOutput(data.output);
 			}
 		};
+		progressHandlerRef.current = progressHandler;
 		window.ipcRenderer.on("worktree-setup-progress", progressHandler);
 
 		try {
@@ -177,8 +201,6 @@ export function useTasks({
 				}),
 			});
 
-			window.ipcRenderer.removeListener("worktree-setup-progress", progressHandler);
-
 			if (result.success) {
 				// Display setup result if available
 				if (result.setupResult) {
@@ -224,7 +246,17 @@ export function useTasks({
 			setSetupStatus("Error creating worktree");
 			setSetupOutput(String(error));
 			setIsCreatingWorktree(false);
-			window.ipcRenderer.removeListener("worktree-setup-progress", progressHandler);
+		} finally {
+			// Stop handling progress events
+			isHandlingProgressRef.current = false;
+			
+			// Wait a bit to ensure any queued events are processed, then remove listener
+			setTimeout(() => {
+				if (progressHandlerRef.current) {
+					window.ipcRenderer.removeListener("worktree-setup-progress", progressHandlerRef.current);
+					progressHandlerRef.current = null;
+				}
+			}, 100);
 		}
 	};