UI

Author: brunobergher

packages/types/src/global-settings.ts

@@ -203,6 +203,11 @@ export const globalSettingsSchema = z.object({
 	 * Used by the worktree feature to open the Roo Code sidebar in a new window.
 	 */
 	worktreeAutoOpenPath: z.string().optional(),
+	/**
+	 * Whether to show the worktree selector in the home screen.
+	 * @default true
+	 */
+	showWorktreesInHomeScreen: z.boolean().optional(),
 })
 
 export type GlobalSettings = z.infer<typeof globalSettingsSchema>

packages/types/src/vscode-extension-host.ts

@@ -107,6 +107,7 @@ export interface ExtensionMessage {
 		| "worktreeDefaults"
 		| "worktreeIncludeStatus"
 		| "branchWorktreeIncludeResult"
+		| "folderSelected"
 	text?: string
 	payload?: any // eslint-disable-line @typescript-eslint/no-explicit-any
 	checkpointWarning?: {
@@ -256,6 +257,8 @@ export interface ExtensionMessage {
 	copyProgressBytesCopied?: number
 	copyProgressTotalBytes?: number
 	copyProgressItemName?: string
+	// folderSelected
+	path?: string
 }
 
 export interface OpenAiCodexRateLimitsMessage {
@@ -331,6 +334,7 @@ export type ExtensionState = Pick<
 	| "includeCurrentCost"
 	| "maxGitStatusFiles"
 	| "requestDelaySeconds"
+	| "showWorktreesInHomeScreen"
 > & {
 	version: string
 	clineMessages: ClineMessage[]
@@ -599,6 +603,7 @@ export interface WebviewMessage {
 		| "checkBranchWorktreeInclude"
 		| "createWorktreeInclude"
 		| "checkoutBranch"
+		| "browseForWorktreePath"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"

src/core/webview/webviewMessageHandler.ts

@@ -3556,6 +3556,34 @@ export const webviewMessageHandler = async (
 			break
 		}
 
+		case "browseForWorktreePath": {
+			try {
+				const options: vscode.OpenDialogOptions = {
+					canSelectFiles: false,
+					canSelectFolders: true,
+					canSelectMany: false,
+					openLabel: t("worktrees:selectWorktreeLocation"),
+					title: t("worktrees:selectFolderForWorktree"),
+					defaultUri: vscode.workspace.workspaceFolders?.[0]?.uri
+						? vscode.Uri.joinPath(vscode.workspace.workspaceFolders[0].uri, "..")
+						: undefined,
+				}
+
+				const result = await vscode.window.showOpenDialog(options)
+				if (result && result[0]) {
+					await provider.postMessageToWebview({
+						type: "folderSelected",
+						path: result[0].fsPath,
+					})
+				}
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error opening folder picker: ${errorMessage}`)
+			}
+
+			break
+		}
+
 		default: {
 			// console.log(`Unhandled message type: ${message.type}`)
 			//

webview-ui/src/components/chat/ChatView.tsx

@@ -96,6 +96,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		cloudIsAuthenticated,
 		messageQueue = [],
 		isBrowserSessionActive,
+		showWorktreesInHomeScreen,
 	} = useExtensionState()
 
 	const messagesRef = useRef(messages)
@@ -1543,7 +1544,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				</div>
 			)}
 
-			{!task && <WorktreeSelector />}
+			{!task && showWorktreesInHomeScreen && <WorktreeSelector />}
 
 			{task && (
 				<>

webview-ui/src/components/chat/WorktreeSelector.tsx

@@ -77,7 +77,7 @@ export const WorktreeSelector = ({ disabled = false }: WorktreeSelectorProps) =>
 	}, [])
 
 	// Don't render if not a git repo or only one worktree
-	if (!isGitRepo) {
+	if (!isGitRepo || worktrees.length <= 1) {
 		return null
 	}
 
@@ -91,7 +91,7 @@ export const WorktreeSelector = ({ disabled = false }: WorktreeSelectorProps) =>
 					data-testid="worktree-selector-trigger"
 					className={cn(
 						"inline-flex gap-1 mx-2 mb-1 items-center relative whitespace-nowrap px-3 py-2",
-						"bg-transparent rounded-full text-vscode-foreground text-left",
+						"bg-transparent rounded-full text-vscode-foreground text-left text-sm",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled
 							? "opacity-50 cursor-not-allowed"

webview-ui/src/components/chat/__tests__/WorktreeSelector.spec.tsx

@@ -218,18 +218,7 @@ describe("WorktreeSelector", () => {
 		})
 	})
 
-	test("shows info icon with tooltip in footer", () => {
-		render(<WorktreeSelector />)
-
-		simulateWorktreeListMessage(mockWorktrees)
-
-		fireEvent.click(screen.getByTestId("worktree-selector-trigger"))
-
-		const infoIcon = document.querySelector(".codicon-info")
-		expect(infoIcon).toBeInTheDocument()
-	})
-
-	test("shows title in footer", () => {
+	test("shows title in header", () => {
 		render(<WorktreeSelector />)
 
 		simulateWorktreeListMessage(mockWorktrees)

webview-ui/src/components/settings/SettingsView.tsx

@@ -13,7 +13,6 @@ import {
 	CheckCheck,
 	SquareMousePointer,
 	GitBranch,
-	History,
 	Bell,
 	Database,
 	SquareTerminal,
@@ -29,6 +28,7 @@ import {
 	Server,
 	Users2,
 	ArrowLeft,
+	GitCommitVertical,
 } from "lucide-react"
 
 import {
@@ -518,15 +518,15 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "providers", icon: Plug },
 			{ id: "modes", icon: Users2 },
 			{ id: "mcp", icon: Server },
-			{ id: "worktrees", icon: GitBranch },
 			{ id: "autoApprove", icon: CheckCheck },
 			{ id: "slashCommands", icon: SquareSlash },
 			{ id: "browser", icon: SquareMousePointer },
-			{ id: "checkpoints", icon: History },
+			{ id: "checkpoints", icon: GitCommitVertical },
 			{ id: "notifications", icon: Bell },
 			{ id: "contextManagement", icon: Database },
 			{ id: "terminal", icon: SquareTerminal },
 			{ id: "prompts", icon: MessageSquare },
+			{ id: "worktrees", icon: GitBranch },
 			{ id: "ui", icon: Glasses },
 			{ id: "experimental", icon: FlaskConical },
 			{ id: "language", icon: Globe },

webview-ui/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 			<input
 				type={type}
 				className={cn(
-					"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border  bg-vscode-input-background rounded-xs px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
+					"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border  bg-vscode-input-background rounded-xs px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				ref={ref}

webview-ui/src/components/ui/toggle-switch.tsx

@@ -17,7 +17,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
 	"aria-label": ariaLabel,
 	"data-testid": dataTestId,
 }) => {
-	const dimensions = size === "small" ? { width: 16, height: 8, dotSize: 4 } : { width: 20, height: 10, dotSize: 6 }
+	const dimensions = size === "small" ? { width: 20, height: 10, dotSize: 8 } : { width: 26, height: 10, dotSize: 6 }
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter" || e.key === " ") {
@@ -40,20 +40,20 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
 				height: `${dimensions.height}px`,
 				backgroundColor: checked
 					? "var(--vscode-button-background)"
-					: "var(--vscode-titleBar-inactiveForeground)",
+					: "var(--vscode-button-secondaryBackground)",
 				borderRadius: `${dimensions.height / 2}px`,
 				position: "relative",
 				cursor: disabled ? "not-allowed" : "pointer",
 				transition: "background-color 0.2s",
-				opacity: disabled ? 0.4 : checked ? 0.8 : 0.6,
+				opacity: disabled ? 0.6 : 1,
 			}}
 			onClick={disabled ? undefined : onChange}
 			onKeyDown={handleKeyDown}>
 			<div
 				style={{
 					width: `${dimensions.dotSize}px`,
 					height: `${dimensions.dotSize}px`,
-					backgroundColor: "var(--vscode-titleBar-activeForeground)",
+					backgroundColor: "var(--vscode-foreground)",
 					borderRadius: "50%",
 					position: "absolute",
 					top: `${(dimensions.height - dimensions.dotSize) / 2}px`,

webview-ui/src/components/worktrees/CreateWorktreeModal.tsx

@@ -5,17 +5,9 @@ import type { WorktreeDefaultsResponse, BranchInfo, WorktreeIncludeStatus } from
 
 import { vscode } from "@/utils/vscode"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	Button,
-	Input,
-} from "@/components/ui"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Button, Input } from "@/components/ui"
 import { SearchableSelect, type SearchableSelectOption } from "@/components/ui/searchable-select"
+import { CornerDownRight, Folder, FolderSearch, Info } from "lucide-react"
 
 interface CreateWorktreeModalProps {
 	open: boolean
@@ -81,6 +73,12 @@ export const CreateWorktreeModal = ({
 					setIncludeStatus(message.worktreeIncludeStatus)
 					break
 				}
+				case "folderSelected": {
+					if (message.path) {
+						setWorktreePath(message.path)
+					}
+					break
+				}
 				case "worktreeCopyProgress": {
 					setCopyProgress({
 						bytesCopied: message.copyProgressBytesCopied ?? 0,
@@ -152,14 +150,13 @@ export const CreateWorktreeModal = ({
 			<DialogContent className="max-w-lg">
 				<DialogHeader>
 					<DialogTitle>{t("worktrees:createWorktree")}</DialogTitle>
-					<DialogDescription>{t("worktrees:createWorktreeDescription")}</DialogDescription>
 				</DialogHeader>
 
 				<div className="flex flex-col gap-3">
 					{/* No .worktreeinclude warning - shows when the current worktree doesn't have .worktreeinclude */}
 					{includeStatus?.exists === false && (
 						<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-vscode-inputValidation-warningBackground border border-vscode-inputValidation-warningBorder text-sm">
-							<span className="codicon codicon-warning text-vscode-charts-yellow flex-shrink-0" />
+							<Info />
 							<span className="text-vscode-foreground">
 								<span className="font-medium">{t("worktrees:noIncludeFileWarning")}</span>
 								{" — "}
@@ -170,17 +167,6 @@ export const CreateWorktreeModal = ({
 						</div>
 					)}
 
-					{/* Branch name */}
-					<div className="flex flex-col gap-1">
-						<label className="text-sm text-vscode-foreground">{t("worktrees:branchName")}</label>
-						<Input
-							value={branchName}
-							onChange={(e) => setBranchName(e.target.value)}
-							placeholder={defaults?.suggestedBranch || "worktree/feature-name"}
-							className="rounded-full"
-						/>
-					</div>
-
 					{/* Base branch selector */}
 					<div className="flex flex-col gap-1">
 						<label className="text-sm text-vscode-foreground">{t("worktrees:baseBranch")}</label>
@@ -201,16 +187,32 @@ export const CreateWorktreeModal = ({
 						)}
 					</div>
 
+					{/* Branch name */}
+					<div className="flex items-center gap-2">
+						<CornerDownRight className="size-4 ml-2 shrink-0" />
+						<label className="text-sm text-vscode-foreground shrink-0">{t("worktrees:branchName")}</label>
+						<Input
+							value={branchName}
+							onChange={(e) => setBranchName(e.target.value)}
+							placeholder={defaults?.suggestedBranch || "worktree/feature-name"}
+							className="rounded-full"
+						/>
+					</div>
+
 					{/* Worktree path */}
-					<div className="flex flex-col gap-1">
-						<label className="text-sm text-vscode-foreground">{t("worktrees:worktreePath")}</label>
+					<div className="flex items-center gap-2 relative">
+						<Folder className="size-4 ml-2 shrink-0" />
+						<label className="text-sm text-vscode-foreground shrink-0">{t("worktrees:worktreePath")}</label>
 						<Input
 							value={worktreePath}
 							onChange={(e) => setWorktreePath(e.target.value)}
 							placeholder={defaults?.suggestedPath || "/path/to/worktree"}
-							className="rounded-full"
+							className="rounded-full flex-1 pr-9"
+						/>
+						<FolderSearch
+							className="size-4 shrink-0 absolute right-3 cursor-pointer hover:opacity-75 transition-opacity"
+							onClick={() => vscode.postMessage({ type: "browseForWorktreePath" })}
 						/>
-						<p className="text-xs text-vscode-descriptionForeground">{t("worktrees:pathHint")}</p>
 					</div>
 
 					{/* Error message */}
@@ -244,7 +246,7 @@ export const CreateWorktreeModal = ({
 					<Button variant="secondary" onClick={onClose} disabled={isCreating}>
 						{t("worktrees:cancel")}
 					</Button>
-					<Button onClick={handleCreate} disabled={!isValid || isCreating}>
+					<Button variant="primary" onClick={handleCreate} disabled={!isValid || isCreating}>
 						{isCreating ? (
 							<>
 								<span className="codicon codicon-loading codicon-modifier-spin mr-2" />