From 6972b2a9756302f731ebd19eee9db2c44aaf8e90 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 8 Mar 2025 18:17:37 -0800
Subject: [PATCH] Modify presentation of plan/act settings

---
 .../src/components/settings/SettingsView.tsx  | 87 +++++++++++--------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index ec5f20bffa..f025af47ce 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -161,47 +161,45 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					display: "flex",
 					flexDirection: "column",
 				}}>
-				<div style={{ marginBottom: 10 }}>
-					<VSCodeCheckbox
-						style={{ marginBottom: "5px" }}
-						checked={planActSeparateModelsSetting}
-						onChange={(e: any) => {
-							const checked = e.target.checked === true
-							setPlanActSeparateModelsSetting(checked)
-						}}>
-						Use different models for Plan & Act
-					</VSCodeCheckbox>
-				</div>
 				{/* Tabs container */}
-				{planActSeparateModelsSetting && (
+				{planActSeparateModelsSetting ? (
 					<div
 						style={{
-							display: "flex",
-							gap: "1px",
-							marginBottom: "10px",
-							marginTop: -8,
-							borderBottom: "1px solid var(--vscode-panel-border)",
+							border: "1px solid var(--vscode-panel-border)",
+							borderRadius: "4px",
+							padding: "10px",
+							marginBottom: "20px",
+							background: "var(--vscode-panel-background)",
 						}}>
-						<TabButton isActive={chatSettings.mode === "plan"} onClick={() => handleTabChange("plan")}>
-							Plan Mode
-						</TabButton>
-						<TabButton isActive={chatSettings.mode === "act"} onClick={() => handleTabChange("act")}>
-							Act Mode
-						</TabButton>
-					</div>
-				)}
+						<div
+							style={{
+								display: "flex",
+								gap: "1px",
+								marginBottom: "10px",
+								marginTop: -8,
+								borderBottom: "1px solid var(--vscode-panel-border)",
+							}}>
+							<TabButton isActive={chatSettings.mode === "plan"} onClick={() => handleTabChange("plan")}>
+								Plan Mode
+							</TabButton>
+							<TabButton isActive={chatSettings.mode === "act"} onClick={() => handleTabChange("act")}>
+								Act Mode
+							</TabButton>
+						</div>
 
-				{/* Content container */}
-				{chatSettings.mode === "act" ? (
-					<ApiOptions
-						key={"act"}
-						showModelOptions={true}
-						apiErrorMessage={apiErrorMessage}
-						modelIdErrorMessage={modelIdErrorMessage}
-					/>
+						{/* Content container */}
+						<div style={{ marginBottom: -12 }}>
+							<ApiOptions
+								key={chatSettings.mode}
+								showModelOptions={true}
+								apiErrorMessage={apiErrorMessage}
+								modelIdErrorMessage={modelIdErrorMessage}
+							/>
+						</div>
+					</div>
 				) : (
 					<ApiOptions
-						key={"plan"}
+						key={"single"}
 						showModelOptions={true}
 						apiErrorMessage={apiErrorMessage}
 						modelIdErrorMessage={modelIdErrorMessage}
@@ -228,6 +226,27 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</p>
 				</div>
 
+				<div style={{ marginBottom: 5 }}>
+					<VSCodeCheckbox
+						style={{ marginBottom: "5px" }}
+						checked={planActSeparateModelsSetting}
+						onChange={(e: any) => {
+							const checked = e.target.checked === true
+							setPlanActSeparateModelsSetting(checked)
+						}}>
+						Use different models for Plan and Act modes
+					</VSCodeCheckbox>
+					<p
+						style={{
+							fontSize: "12px",
+							marginTop: "5px",
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						Switching between Plan and Act mode will persist the API and model used in the previous mode. This may be
+						helpful e.g. when using a strong reasoning model to architect a plan for a cheaper coding model to act on.
+					</p>
+				</div>
+
 				<div style={{ marginBottom: 5 }}>
 					<VSCodeCheckbox
 						style={{ marginBottom: "5px" }}