Make experimental settings more visually consistent (#3923)

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

@@ -140,23 +140,27 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
 
 	return (
 		<>
-			<VSCodeCheckbox
-				checked={codebaseIndexConfig?.codebaseIndexEnabled}
-				onChange={(e: any) =>
-					setCachedStateField("codebaseIndexConfig", {
-						...codebaseIndexConfig,
-						codebaseIndexEnabled: e.target.checked,
-					})
-				}>
-				⚠️ {t("settings:codeIndex.enableLabel")}
-			</VSCodeCheckbox>
-			<div className="text-vscode-descriptionForeground text-sm mt-1 pl-6">
-				{t("settings:codeIndex.enableDescription")}
+			<div>
+				<div className="flex items-center gap-2">
+					<VSCodeCheckbox
+						checked={codebaseIndexConfig?.codebaseIndexEnabled}
+						onChange={(e: any) =>
+							setCachedStateField("codebaseIndexConfig", {
+								...codebaseIndexConfig,
+								codebaseIndexEnabled: e.target.checked,
+							})
+						}>
+						<span className="font-medium">{t("settings:codeIndex.enableLabel")}</span>
+					</VSCodeCheckbox>
+				</div>
+				<p className="text-vscode-descriptionForeground text-sm mt-0">
+					{t("settings:codeIndex.enableDescription")}
+				</p>
 			</div>
 
 			{codebaseIndexConfig?.codebaseIndexEnabled && (
-				<div className="mt-4 space-y-4">
-					<div className="text-sm text-vscode-descriptionForeground mt-4">
+				<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
+					<div className="text-sm text-vscode-descriptionForeground">
 						<span
 							className={`
 								inline-block w-3 h-3 rounded-full mr-2
@@ -177,7 +181,7 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
 					</div>
 
 					{indexingStatus.systemStatus === "Indexing" && (
-						<div className="mt-4 space-y-1">
+						<div className="space-y-1">
 							<ProgressPrimitive.Root
 								className="relative h-2 w-full overflow-hidden rounded-full bg-secondary"
 								value={progressPercentage}>
@@ -191,76 +195,86 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
 						</div>
 					)}
 
-					<div style={{ fontWeight: "normal", marginBottom: "4px" }}>
-						{t("settings:codeIndex.providerLabel")}
+					<div className="flex items-center gap-4 font-bold">
+						<div>{t("settings:codeIndex.providerLabel")}</div>
 					</div>
-					<div className="flex items-center gap-2">
-						<Select
-							value={codebaseIndexConfig?.codebaseIndexEmbedderProvider || "openai"}
-							onValueChange={(value) => {
-								const newProvider = value as EmbedderProvider
-								const models = codebaseIndexModels?.[newProvider]
-								const modelIds = models ? Object.keys(models) : []
-								const defaultModelId = modelIds.length > 0 ? modelIds[0] : "" // Use empty string if no models
+					<div>
+						<div className="flex items-center gap-2">
+							<Select
+								value={codebaseIndexConfig?.codebaseIndexEmbedderProvider || "openai"}
+								onValueChange={(value) => {
+									const newProvider = value as EmbedderProvider
+									const models = codebaseIndexModels?.[newProvider]
+									const modelIds = models ? Object.keys(models) : []
+									const defaultModelId = modelIds.length > 0 ? modelIds[0] : "" // Use empty string if no models
 
-								if (codebaseIndexConfig) {
-									setCachedStateField("codebaseIndexConfig", {
-										...codebaseIndexConfig,
-										codebaseIndexEmbedderProvider: newProvider,
-										codebaseIndexEmbedderModelId: defaultModelId,
-									})
-								}
-							}}>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder={t("settings:codeIndex.selectProviderPlaceholder")} />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="openai">{t("settings:codeIndex.openaiProvider")}</SelectItem>
-								<SelectItem value="ollama">{t("settings:codeIndex.ollamaProvider")}</SelectItem>
-							</SelectContent>
-						</Select>
+									if (codebaseIndexConfig) {
+										setCachedStateField("codebaseIndexConfig", {
+											...codebaseIndexConfig,
+											codebaseIndexEmbedderProvider: newProvider,
+											codebaseIndexEmbedderModelId: defaultModelId,
+										})
+									}
+								}}>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder={t("settings:codeIndex.selectProviderPlaceholder")} />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="openai">{t("settings:codeIndex.openaiProvider")}</SelectItem>
+									<SelectItem value="ollama">{t("settings:codeIndex.ollamaProvider")}</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
 					</div>
 
 					{codebaseIndexConfig?.codebaseIndexEmbedderProvider === "openai" && (
-						<div className="space-y-2">
-							<VSCodeTextField
-								type="password"
-								value={apiConfiguration.codeIndexOpenAiKey || ""}
-								onInput={(e: any) => setApiConfigurationField("codeIndexOpenAiKey", e.target.value)}
-								style={{ width: "100%" }}>
-								{t("settings:codeIndex.openaiKeyLabel")}
-							</VSCodeTextField>
+						<div className="flex flex-col gap-3">
+							<div className="flex items-center gap-4 font-bold">
+								<div>{t("settings:codeIndex.openaiKeyLabel")}</div>
+							</div>
+							<div>
+								<VSCodeTextField
+									type="password"
+									value={apiConfiguration.codeIndexOpenAiKey || ""}
+									onInput={(e: any) => setApiConfigurationField("codeIndexOpenAiKey", e.target.value)}
+									style={{ width: "100%" }}></VSCodeTextField>
+							</div>
 						</div>
 					)}
 
-					<div style={{ fontWeight: "normal", marginBottom: "4px" }}>
-						{t("settings:codeIndex.modelLabel")}
+					<div className="flex items-center gap-4 font-bold">
+						<div>{t("settings:codeIndex.modelLabel")}</div>
 					</div>
-					<div className="flex items-center gap-2">
-						<Select
-							value={codebaseIndexConfig?.codebaseIndexEmbedderModelId || ""}
-							onValueChange={(value) =>
-								setCachedStateField("codebaseIndexConfig", {
-									...codebaseIndexConfig,
-									codebaseIndexEmbedderModelId: value,
-								})
-							}>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder={t("settings:codeIndex.selectModelPlaceholder")} />
-							</SelectTrigger>
-							<SelectContent>
-								{availableModelIds.map((modelId) => (
-									<SelectItem key={modelId} value={modelId}>
-										{modelId}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
+					<div>
+						<div className="flex items-center gap-2">
+							<Select
+								value={codebaseIndexConfig?.codebaseIndexEmbedderModelId || ""}
+								onValueChange={(value) =>
+									setCachedStateField("codebaseIndexConfig", {
+										...codebaseIndexConfig,
+										codebaseIndexEmbedderModelId: value,
+									})
+								}>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder={t("settings:codeIndex.selectModelPlaceholder")} />
+								</SelectTrigger>
+								<SelectContent>
+									{availableModelIds.map((modelId) => (
+										<SelectItem key={modelId} value={modelId}>
+											{modelId}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
 					</div>
 
 					{codebaseIndexConfig?.codebaseIndexEmbedderProvider === "ollama" && (
-						<>
-							<div className="space-y-2">
+						<div className="flex flex-col gap-3">
+							<div className="flex items-center gap-4 font-bold">
+								<div>{t("settings:codeIndex.ollamaUrlLabel")}</div>
+							</div>
+							<div>
 								<VSCodeTextField
 									value={codebaseIndexConfig.codebaseIndexEmbedderBaseUrl || ""}
 									onInput={(e: any) =>
@@ -269,38 +283,42 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
 											codebaseIndexEmbedderBaseUrl: e.target.value,
 										})
 									}
-									style={{ width: "100%" }}>
-									{t("settings:codeIndex.ollamaUrlLabel")}
-								</VSCodeTextField>
+									style={{ width: "100%" }}></VSCodeTextField>
 							</div>
-						</>
+						</div>
 					)}
 
-					<div className="space-y-2">
-						<VSCodeTextField
-							value={codebaseIndexConfig.codebaseIndexQdrantUrl}
-							onInput={(e: any) =>
-								setCachedStateField("codebaseIndexConfig", {
-									...codebaseIndexConfig,
-									codebaseIndexQdrantUrl: e.target.value,
-								})
-							}
-							style={{ width: "100%" }}>
-							{t("settings:codeIndex.qdrantUrlLabel")}
-						</VSCodeTextField>
+					<div className="flex flex-col gap-3">
+						<div className="flex items-center gap-4 font-bold">
+							<div>{t("settings:codeIndex.qdrantUrlLabel")}</div>
+						</div>
+						<div>
+							<VSCodeTextField
+								value={codebaseIndexConfig.codebaseIndexQdrantUrl}
+								onInput={(e: any) =>
+									setCachedStateField("codebaseIndexConfig", {
+										...codebaseIndexConfig,
+										codebaseIndexQdrantUrl: e.target.value,
+									})
+								}
+								style={{ width: "100%" }}></VSCodeTextField>
+						</div>
 					</div>
 
-					<div className="space-y-2">
-						<VSCodeTextField
-							type="password"
-							value={apiConfiguration.codeIndexQdrantApiKey}
-							onInput={(e: any) => setApiConfigurationField("codeIndexQdrantApiKey", e.target.value)}
-							style={{ width: "100%" }}>
-							{t("settings:codeIndex.qdrantKeyLabel")}
-						</VSCodeTextField>
+					<div className="flex flex-col gap-3">
+						<div className="flex items-center gap-4 font-bold">
+							<div>{t("settings:codeIndex.qdrantKeyLabel")}</div>
+						</div>
+						<div>
+							<VSCodeTextField
+								type="password"
+								value={apiConfiguration.codeIndexQdrantApiKey}
+								onInput={(e: any) => setApiConfigurationField("codeIndexQdrantApiKey", e.target.value)}
+								style={{ width: "100%" }}></VSCodeTextField>
+						</div>
 					</div>
 
-					<div className="flex gap-2 mt-4">
+					<div className="flex gap-2">
 						{(indexingStatus.systemStatus === "Error" || indexingStatus.systemStatus === "Standby") && (
 							<VSCodeButton
 								onClick={() => vscode.postMessage({ type: "startIndexing" })}

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

@@ -18,7 +18,6 @@ export const ExperimentalFeature = ({ enabled, onChange, experimentKey }: Experi
 	return (
 		<div>
 			<div className="flex items-center gap-2">
-				<span className="text-vscode-errorForeground">{t("settings:experimental.warning")}</span>
 				<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
 					<span className="font-medium">{t(nameKey)}</span>
 				</VSCodeCheckbox>

webview-ui/src/i18n/locales/ca/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "Llindar per activar la condensació intel·ligent de context",
 			"description": "Quan la finestra de context assoleix aquest llindar, Roo la condensarà automàticament."

webview-ui/src/i18n/locales/de/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "Schwellenwert für intelligente Kontextkomprimierung",
 			"description": "Wenn das Kontextfenster diesen Schwellenwert erreicht, wird Roo es automatisch komprimieren."

webview-ui/src/i18n/locales/en/settings.json

@@ -34,7 +34,7 @@
 	},
 	"codeIndex": {
 		"title": "Codebase Indexing",
-		"enableLabel": "Enable Codebase Indexing",
+		"enableLabel": "Enable codebase indexing",
 		"enableDescription": "Enabling this feature will index your codebase. This might consume system resources and take some time depending on the size of your project.",
 		"providerLabel": "Embeddings Provider",
 		"selectProviderPlaceholder": "Select provider",
@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "Threshold to trigger intelligent context condensing",
 			"description": "When the context window reaches this threshold, Roo will automatically condense it."

webview-ui/src/i18n/locales/es/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "Umbral para activar la condensación inteligente de contexto",
 			"description": "Cuando la ventana de contexto alcanza este umbral, Roo la condensará automáticamente."

webview-ui/src/i18n/locales/fr/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "Seuil pour déclencher la condensation intelligente du contexte",
 			"description": "Lorsque la fenêtre de contexte atteint ce seuil, Roo la condensera automatiquement."

webview-ui/src/i18n/locales/hi/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/it/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/ja/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "インテリジェントなコンテキスト圧縮をトリガーするしきい値",
 			"description": "コンテキストウィンドウがこのしきい値に達すると、Rooは自動的に圧縮します。"

webview-ui/src/i18n/locales/ko/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/nl/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/pl/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/ru/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/tr/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/vi/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",

webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"autoCondenseContextPercent": {
 			"label": "触发智能上下文压缩的阈值",
 			"description": "当上下文窗口达到此阈值时，Roo 将自动压缩它。"

webview-ui/src/i18n/locales/zh-TW/settings.json

@@ -429,7 +429,6 @@
 		}
 	},
 	"experimental": {
-		"warning": "⚠️",
 		"condensingApiConfiguration": {
 			"label": "API Configuration for Context Condensing",
 			"description": "Select which API configuration to use for context condensing operations. Leave unselected to use the current active configuration.",