Remove mode chooser from settings

Author: mrubens

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

@@ -714,11 +714,15 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								value={mode}
 								disabled={textAreaDisabled}
 								onChange={(e) => {
-									const newMode = e.target.value as Mode
-									setMode(newMode)
+									const value = e.target.value
+									if (value === "prompts-action") {
+										window.postMessage({ type: "action", action: "promptsButtonClicked" })
+										return
+									}
+									setMode(value as Mode)
 									vscode.postMessage({
 										type: "mode",
-										text: newMode,
+										text: value,
 									})
 								}}
 								style={{
@@ -737,6 +741,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										{mode.name}
 									</option>
 								))}
+								<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
+									────
+								</option>
+								<option value="prompts-action">Edit...</option>
 							</select>
 							<div style={caretContainerStyle}>
 								<CaretIcon />
@@ -753,20 +761,25 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								overflow: "hidden",
 							}}>
 							<select
-								value={currentApiConfigName}
+								value={currentApiConfigName || ""}
 								disabled={textAreaDisabled}
-								onChange={(e) =>
+								onChange={(e) => {
+									const value = e.target.value
+									if (value === "settings-action") {
+										window.postMessage({ type: "action", action: "settingsButtonClicked" })
+										return
+									}
 									vscode.postMessage({
 										type: "loadApiConfiguration",
-										text: e.target.value,
+										text: value,
 									})
-								}
+								}}
 								style={{
 									...selectStyle,
 									width: "100%",
 									textOverflow: "ellipsis",
 								}}>
-								{(listApiConfigMeta || [])?.map((config) => (
+								{(listApiConfigMeta || []).map((config) => (
 									<option
 										key={config.name}
 										value={config.name}
@@ -777,6 +790,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										{config.name}
 									</option>
 								))}
+								<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
+									────
+								</option>
+								<option value="settings-action">Edit...</option>
 							</select>
 							<div style={caretContainerStyle}>
 								<CaretIcon />
@@ -806,14 +823,18 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									role="button"
 									aria-label="enhance prompt"
 									data-testid="enhance-prompt-button"
-									className={`input-icon-button ${textAreaDisabled ? "disabled" : ""} codicon codicon-sparkle`}
+									className={`input-icon-button ${
+										textAreaDisabled ? "disabled" : ""
+									} codicon codicon-sparkle`}
 									onClick={() => !textAreaDisabled && handleEnhancePrompt()}
 									style={{ fontSize: 16.5 }}
 								/>
 							)}
 						</div>
 						<span
-							className={`input-icon-button ${shouldDisableImages ? "disabled" : ""} codicon codicon-device-camera`}
+							className={`input-icon-button ${
+								shouldDisableImages ? "disabled" : ""
+							} codicon codicon-device-camera`}
 							onClick={() => !shouldDisableImages && onSelectImages()}
 							style={{ fontSize: 16.5 }}
 						/>

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

@@ -12,7 +12,6 @@ import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
 import McpEnabledToggle from "../mcp/McpEnabledToggle"
 import ApiConfigManager from "./ApiConfigManager"
-import { Mode } from "../../../../src/shared/modes"
 
 const IS_DEV = false // FIXME: use flags when packaging
 
@@ -65,8 +64,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setRequestDelaySeconds,
 		currentApiConfigName,
 		listApiConfigMeta,
-		mode,
-		setMode,
 		experimentalDiffStrategy,
 		setExperimentalDiffStrategy,
 	} = useExtensionState()
@@ -110,7 +107,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				text: currentApiConfigName,
 				apiConfiguration,
 			})
-			vscode.postMessage({ type: "mode", text: mode })
 			vscode.postMessage({ type: "experimentalDiffStrategy", bool: experimentalDiffStrategy })
 			onDone()
 		}
@@ -215,40 +211,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 							Agent Settings
 						</h3>
 
-						<div style={{ marginBottom: 15 }}>
-							<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Agent Mode</label>
-							<select
-								value={mode}
-								onChange={(e) => {
-									const value = e.target.value as Mode
-									setMode(value)
-									vscode.postMessage({ type: "mode", text: value })
-								}}
-								style={{
-									width: "100%",
-									padding: "4px 8px",
-									backgroundColor: "var(--vscode-input-background)",
-									color: "var(--vscode-input-foreground)",
-									border: "1px solid var(--vscode-input-border)",
-									borderRadius: "2px",
-									height: "28px",
-								}}>
-								<option value="code">Code</option>
-								<option value="architect">Architect</option>
-								<option value="ask">Ask</option>
-							</select>
-							<p
-								style={{
-									fontSize: "12px",
-									marginTop: "5px",
-									color: "var(--vscode-descriptionForeground)",
-								}}>
-								Select the mode that best fits your needs. Code mode focuses on implementation details,
-								Architect mode on high-level design, and Ask mode on asking questions about the
-								codebase.
-							</p>
-						</div>
-
 						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>
 							Preferred Language
 						</label>