Merge remote-tracking branch 'origin/main' into vscode-lm-provider

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

@@ -6,6 +6,7 @@ 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
 
@@ -58,6 +59,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setRequestDelaySeconds,
 		currentApiConfigName,
 		listApiConfigMeta,
+		mode,
+		setMode,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -99,7 +102,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				text: currentApiConfigName,
 				apiConfiguration
 			})
-
+			vscode.postMessage({ type: "mode", text: mode })
 			onDone()
 		}
 	}
@@ -203,6 +206,37 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<div style={{ marginBottom: 15 }}>
 						<h3 style={{ color: "var(--vscode-foreground)", margin: 0, marginBottom: 15 }}>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>
 						<select
 							value={preferredLanguage}
@@ -244,24 +278,26 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						</p>
 					</div>
 
-					<VSCodeTextArea
-						value={customInstructions ?? ""}
-						style={{ width: "100%" }}
-						rows={4}
-						placeholder={
-							'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'
-						}
-						onInput={(e: any) => setCustomInstructions(e.target?.value ?? "")}>
+					<div style={{ marginBottom: 15 }}>
 						<span style={{ fontWeight: "500" }}>Custom Instructions</span>
-					</VSCodeTextArea>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: "5px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						These instructions are added to the end of the system prompt sent with every request. Custom instructions set in .clinerules and .cursorrules in the working directory are also included.
-					</p>
+						<VSCodeTextArea
+							value={customInstructions ?? ""}
+							style={{ width: "100%" }}
+							rows={4}
+							placeholder={
+								'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'
+							}
+							onInput={(e: any) => setCustomInstructions(e.target?.value ?? "")}
+						/>
+						<p
+							style={{
+								fontSize: "12px",
+								marginTop: "5px",
+								color: "var(--vscode-descriptionForeground)",
+							}}>
+							These instructions are added to the end of the system prompt sent with every request. Custom instructions set in .clinerules in the working directory are also included. For mode-specific instructions, use the <span className="codicon codicon-notebook" style={{ fontSize: "10px" }}></span> Prompts tab in the top menu.
+						</p>
+					</div>
 
 					<McpEnabledToggle />
 				</div>
@@ -520,7 +556,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 													minWidth: '20px',
 													display: 'flex',
 													alignItems: 'center',
-													justifyContent: 'center'
+													justifyContent: 'center',
+													color: 'var(--vscode-button-foreground)',
 												}}
 												onClick={() => {
 													const newCommands = (allowedCommands ?? []).filter((_, i) => i !== index)
@@ -673,7 +710,10 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
 						If you have any questions or feedback, feel free to open an issue at{" "}
 						<VSCodeLink href="https://github.com/RooVetGit/Roo-Cline" style={{ display: "inline" }}>
-							https://github.com/RooVetGit/Roo-Cline
+							github.com/RooVetGit/Roo-Cline
+						</VSCodeLink> or join {" "}
+						<VSCodeLink href="https://www.reddit.com/r/roocline/" style={{ display: "inline" }}>
+							reddit.com/r/roocline
 						</VSCodeLink>
 					</p>
 					<p style={{ fontStyle: "italic", margin: "10px 0 0 0", padding: 0 }}>v{version}</p>