From f1906c4f24b847cb0fd1db2091eae82837c02035 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 15 Jul 2025 18:40:36 -0400 Subject: [PATCH 1/2] Move less commonly used provider settings into an advanced dropdown --- .../src/components/settings/ApiOptions.tsx | 67 ++++++++++++------- .../settings/__tests__/ApiOptions.spec.tsx | 14 ++++ .../settings/__tests__/SettingsView.spec.tsx | 14 ++++ webview-ui/src/i18n/locales/ca/settings.json | 3 + webview-ui/src/i18n/locales/de/settings.json | 3 + webview-ui/src/i18n/locales/en/settings.json | 3 + webview-ui/src/i18n/locales/es/settings.json | 3 + webview-ui/src/i18n/locales/fr/settings.json | 3 + webview-ui/src/i18n/locales/hi/settings.json | 3 + webview-ui/src/i18n/locales/id/settings.json | 3 + webview-ui/src/i18n/locales/it/settings.json | 3 + webview-ui/src/i18n/locales/ja/settings.json | 3 + webview-ui/src/i18n/locales/ko/settings.json | 3 + webview-ui/src/i18n/locales/nl/settings.json | 3 + webview-ui/src/i18n/locales/pl/settings.json | 3 + .../src/i18n/locales/pt-BR/settings.json | 3 + webview-ui/src/i18n/locales/ru/settings.json | 3 + webview-ui/src/i18n/locales/tr/settings.json | 3 + webview-ui/src/i18n/locales/vi/settings.json | 3 + .../src/i18n/locales/zh-CN/settings.json | 3 + .../src/i18n/locales/zh-TW/settings.json | 3 + 21 files changed, 124 insertions(+), 25 deletions(-) diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index e3f5ae7a0d8..eb063ed517d 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -32,7 +32,17 @@ import { useRouterModels } from "@src/components/ui/hooks/useRouterModels" import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel" import { useExtensionState } from "@src/context/ExtensionStateContext" import { filterProviders, filterModels } from "./utils/organizationFilters" -import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SearchableSelect } from "@src/components/ui" +import { + Select, + SelectTrigger, + SelectValue, + SelectContent, + SelectItem, + SearchableSelect, + Collapsible, + CollapsibleTrigger, + CollapsibleContent, +} from "@src/components/ui" import { Anthropic, @@ -121,6 +131,7 @@ const ApiOptions = ({ ) const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false) + const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = useState(false) const handleInputChange = useCallback( ( @@ -534,30 +545,36 @@ const ApiOptions = ({ /> {!fromWelcomeView && ( - <> - setApiConfigurationField(field, value)} - /> - - setApiConfigurationField("rateLimitSeconds", value)} - /> - setApiConfigurationField("consecutiveMistakeLimit", value)} - /> - + + + + {t("settings:advancedSettings.title")} + + + setApiConfigurationField(field, value)} + /> + + setApiConfigurationField("rateLimitSeconds", value)} + /> + setApiConfigurationField("consecutiveMistakeLimit", value)} + /> + + )} ) diff --git a/webview-ui/src/components/settings/__tests__/ApiOptions.spec.tsx b/webview-ui/src/components/settings/__tests__/ApiOptions.spec.tsx index 07331b8e424..bf02840429d 100644 --- a/webview-ui/src/components/settings/__tests__/ApiOptions.spec.tsx +++ b/webview-ui/src/components/settings/__tests__/ApiOptions.spec.tsx @@ -100,6 +100,20 @@ vi.mock("@/components/ui", () => ({ ), + // Add Collapsible components + Collapsible: ({ children, open }: any) => ( +
+ {children} +
+ ), + CollapsibleTrigger: ({ children, className, onClick }: any) => ( +
+ {children} +
+ ), + CollapsibleContent: ({ children, className }: any) => ( +
{children}
+ ), })) vi.mock("../TemperatureControl", () => ({ diff --git a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx index 404b3a6883c..72d4598ea69 100644 --- a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx +++ b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx @@ -179,6 +179,20 @@ vi.mock("@/components/ui", () => ({ {children} ), + // Add Collapsible components + Collapsible: ({ children, open }: any) => ( +
+ {children} +
+ ), + CollapsibleTrigger: ({ children, className, onClick }: any) => ( +
+ {children} +
+ ), + CollapsibleContent: ({ children, className }: any) => ( +
{children}
+ ), })) // Mock window.postMessage to trigger state hydration diff --git a/webview-ui/src/i18n/locales/ca/settings.json b/webview-ui/src/i18n/locales/ca/settings.json index 503b8c36ed2..207fc88fd91 100644 --- a/webview-ui/src/i18n/locales/ca/settings.json +++ b/webview-ui/src/i18n/locales/ca/settings.json @@ -542,6 +542,9 @@ "description": "Quan està habilitat, el terminal hereta les variables d'entorn del procés pare de VSCode, com ara la configuració d'integració del shell definida al perfil d'usuari. Això commuta directament la configuració global de VSCode `terminal.integrated.inheritEnv`. <0>Més informació" } }, + "advancedSettings": { + "title": "Configuració avançada" + }, "advanced": { "diff": { "label": "Habilitar edició mitjançant diffs", diff --git a/webview-ui/src/i18n/locales/de/settings.json b/webview-ui/src/i18n/locales/de/settings.json index 48d0d41a417..68e9f8f97df 100644 --- a/webview-ui/src/i18n/locales/de/settings.json +++ b/webview-ui/src/i18n/locales/de/settings.json @@ -542,6 +542,9 @@ "description": "Wenn aktiviert, erbt das Terminal Umgebungsvariablen aus dem übergeordneten Prozess von VSCode, wie z.B. benutzerdefinierte Shell-Integrationseinstellungen. Dies schaltet direkt die globale VSCode-Einstellung `terminal.integrated.inheritEnv` um. <0>Mehr erfahren" } }, + "advancedSettings": { + "title": "Erweiterte Einstellungen" + }, "advanced": { "diff": { "label": "Bearbeitung durch Diffs aktivieren", diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json index 69ca01154d6..fa1fbab13cc 100644 --- a/webview-ui/src/i18n/locales/en/settings.json +++ b/webview-ui/src/i18n/locales/en/settings.json @@ -542,6 +542,9 @@ "description": "When enabled, the terminal will inherit environment variables from VSCode's parent process, such as user-profile-defined shell integration settings. This directly toggles VSCode global setting `terminal.integrated.inheritEnv`. <0>Learn more" } }, + "advancedSettings": { + "title": "Advanced settings" + }, "advanced": { "diff": { "label": "Enable editing through diffs", diff --git a/webview-ui/src/i18n/locales/es/settings.json b/webview-ui/src/i18n/locales/es/settings.json index 684949488ec..80de7042b09 100644 --- a/webview-ui/src/i18n/locales/es/settings.json +++ b/webview-ui/src/i18n/locales/es/settings.json @@ -542,6 +542,9 @@ "description": "Cuando está habilitado, el terminal hereda las variables de entorno del proceso padre de VSCode, como la configuración de integración del shell definida en el perfil del usuario. Esto alterna directamente la configuración global de VSCode `terminal.integrated.inheritEnv`. <0>Más información" } }, + "advancedSettings": { + "title": "Configuración avanzada" + }, "advanced": { "diff": { "label": "Habilitar edición a través de diffs", diff --git a/webview-ui/src/i18n/locales/fr/settings.json b/webview-ui/src/i18n/locales/fr/settings.json index 80801584463..e10b3ae35f9 100644 --- a/webview-ui/src/i18n/locales/fr/settings.json +++ b/webview-ui/src/i18n/locales/fr/settings.json @@ -542,6 +542,9 @@ "description": "Lorsqu'activé, le terminal hérite des variables d'environnement du processus parent VSCode, comme les paramètres d'intégration du shell définis dans le profil utilisateur. Cela bascule directement le paramètre global VSCode `terminal.integrated.inheritEnv`. <0>En savoir plus" } }, + "advancedSettings": { + "title": "Paramètres avancés" + }, "advanced": { "diff": { "label": "Activer l'édition via des diffs", diff --git a/webview-ui/src/i18n/locales/hi/settings.json b/webview-ui/src/i18n/locales/hi/settings.json index 30a34de4341..5b64359f8f9 100644 --- a/webview-ui/src/i18n/locales/hi/settings.json +++ b/webview-ui/src/i18n/locales/hi/settings.json @@ -542,6 +542,9 @@ "description": "सक्षम होने पर, टर्मिनल VSCode के मूल प्रक्रिया से पर्यावरण चर विरासत में लेता है, जैसे उपयोगकर्ता प्रोफ़ाइल में परिभाषित शेल एकीकरण सेटिंग्स। यह VSCode की वैश्विक सेटिंग `terminal.integrated.inheritEnv` को सीधे टॉगल करता है। <0>अधिक जानें" } }, + "advancedSettings": { + "title": "उन्नत सेटिंग्स" + }, "advanced": { "diff": { "label": "diffs के माध्यम से संपादन सक्षम करें", diff --git a/webview-ui/src/i18n/locales/id/settings.json b/webview-ui/src/i18n/locales/id/settings.json index 6089d5874e3..24404dec3d7 100644 --- a/webview-ui/src/i18n/locales/id/settings.json +++ b/webview-ui/src/i18n/locales/id/settings.json @@ -546,6 +546,9 @@ "description": "Ketika diaktifkan, terminal akan mewarisi variabel environment dari proses parent VSCode, seperti pengaturan integrasi shell yang didefinisikan user-profile. Ini secara langsung mengalihkan pengaturan global VSCode `terminal.integrated.inheritEnv`. <0>Pelajari lebih lanjut" } }, + "advancedSettings": { + "title": "Pengaturan lanjutan" + }, "advanced": { "diff": { "label": "Aktifkan editing melalui diff", diff --git a/webview-ui/src/i18n/locales/it/settings.json b/webview-ui/src/i18n/locales/it/settings.json index 189efe0bed9..bacf7a40ef3 100644 --- a/webview-ui/src/i18n/locales/it/settings.json +++ b/webview-ui/src/i18n/locales/it/settings.json @@ -542,6 +542,9 @@ "description": "Quando abilitato, il terminale eredita le variabili d'ambiente dal processo padre di VSCode, come le impostazioni di integrazione della shell definite nel profilo utente. Questo attiva direttamente l'impostazione globale di VSCode `terminal.integrated.inheritEnv`. <0>Scopri di più" } }, + "advancedSettings": { + "title": "Impostazioni avanzate" + }, "advanced": { "diff": { "label": "Abilita modifica tramite diff", diff --git a/webview-ui/src/i18n/locales/ja/settings.json b/webview-ui/src/i18n/locales/ja/settings.json index a63d0b68008..c588edead2d 100644 --- a/webview-ui/src/i18n/locales/ja/settings.json +++ b/webview-ui/src/i18n/locales/ja/settings.json @@ -542,6 +542,9 @@ "description": "有効にすると、ターミナルは VSCode の親プロセスから環境変数を継承します。ユーザープロファイルで定義されたシェル統合設定などが含まれます。これは VSCode のグローバル設定 `terminal.integrated.inheritEnv` を直接切り替えます。 <0>詳細情報" } }, + "advancedSettings": { + "title": "詳細設定" + }, "advanced": { "diff": { "label": "diff経由の編集を有効化", diff --git a/webview-ui/src/i18n/locales/ko/settings.json b/webview-ui/src/i18n/locales/ko/settings.json index c4da7c86022..84c329ffd71 100644 --- a/webview-ui/src/i18n/locales/ko/settings.json +++ b/webview-ui/src/i18n/locales/ko/settings.json @@ -542,6 +542,9 @@ "description": "활성화하면 터미널이 VSCode 부모 프로세스로부터 환경 변수를 상속받습니다. 사용자 프로필에 정의된 셸 통합 설정 등이 포함됩니다. 이는 VSCode 전역 설정 `terminal.integrated.inheritEnv`를 직접 전환합니다. <0>더 알아보기" } }, + "advancedSettings": { + "title": "고급 설정" + }, "advanced": { "diff": { "label": "diff를 통한 편집 활성화", diff --git a/webview-ui/src/i18n/locales/nl/settings.json b/webview-ui/src/i18n/locales/nl/settings.json index 535c462fe2f..343008ae510 100644 --- a/webview-ui/src/i18n/locales/nl/settings.json +++ b/webview-ui/src/i18n/locales/nl/settings.json @@ -542,6 +542,9 @@ "description": "Indien ingeschakeld, neemt de terminal omgevingsvariabelen over van het bovenliggende VSCode-proces, zoals shell-integratie-instellingen uit het gebruikersprofiel. Dit schakelt direct de VSCode-instelling `terminal.integrated.inheritEnv` om. <0>Meer informatie" } }, + "advancedSettings": { + "title": "Geavanceerde instellingen" + }, "advanced": { "diff": { "label": "Bewerken via diffs inschakelen", diff --git a/webview-ui/src/i18n/locales/pl/settings.json b/webview-ui/src/i18n/locales/pl/settings.json index f7d80cd1a6a..2f300384e45 100644 --- a/webview-ui/src/i18n/locales/pl/settings.json +++ b/webview-ui/src/i18n/locales/pl/settings.json @@ -542,6 +542,9 @@ "description": "Po włączeniu terminal dziedziczy zmienne środowiskowe z procesu nadrzędnego VSCode, takie jak ustawienia integracji powłoki zdefiniowane w profilu użytkownika. Przełącza to bezpośrednio globalne ustawienie VSCode `terminal.integrated.inheritEnv`. <0>Dowiedz się więcej" } }, + "advancedSettings": { + "title": "Ustawienia zaawansowane" + }, "advanced": { "diff": { "label": "Włącz edycję przez różnice", diff --git a/webview-ui/src/i18n/locales/pt-BR/settings.json b/webview-ui/src/i18n/locales/pt-BR/settings.json index a9ccd98838b..11e4d01aacf 100644 --- a/webview-ui/src/i18n/locales/pt-BR/settings.json +++ b/webview-ui/src/i18n/locales/pt-BR/settings.json @@ -542,6 +542,9 @@ "description": "Quando ativado, o terminal herda variáveis de ambiente do processo pai do VSCode, como configurações de integração do shell definidas no perfil do usuário. Isso alterna diretamente a configuração global do VSCode `terminal.integrated.inheritEnv`. <0>Saiba mais" } }, + "advancedSettings": { + "title": "Configurações avançadas" + }, "advanced": { "diff": { "label": "Ativar edição através de diffs", diff --git a/webview-ui/src/i18n/locales/ru/settings.json b/webview-ui/src/i18n/locales/ru/settings.json index 696c5ef641c..35eb9b19669 100644 --- a/webview-ui/src/i18n/locales/ru/settings.json +++ b/webview-ui/src/i18n/locales/ru/settings.json @@ -542,6 +542,9 @@ "description": "Если включено, терминал будет наследовать переменные среды от родительского процесса VSCode, такие как настройки интеграции оболочки, определённые в профиле пользователя. Напрямую переключает глобальную настройку VSCode `terminal.integrated.inheritEnv`. <0>Подробнее" } }, + "advancedSettings": { + "title": "Дополнительные настройки" + }, "advanced": { "diff": { "label": "Включить редактирование через диффы", diff --git a/webview-ui/src/i18n/locales/tr/settings.json b/webview-ui/src/i18n/locales/tr/settings.json index f81bfd98eaa..9b90c97fb32 100644 --- a/webview-ui/src/i18n/locales/tr/settings.json +++ b/webview-ui/src/i18n/locales/tr/settings.json @@ -542,6 +542,9 @@ "description": "Etkinleştirildiğinde, terminal VSCode üst işleminden ortam değişkenlerini devralır, örneğin kullanıcı profilinde tanımlanan kabuk entegrasyon ayarları gibi. Bu, VSCode'un global ayarı olan `terminal.integrated.inheritEnv` değerini doğrudan değiştirir. <0>Daha fazla bilgi" } }, + "advancedSettings": { + "title": "Gelişmiş ayarlar" + }, "advanced": { "diff": { "label": "Diff'ler aracılığıyla düzenlemeyi etkinleştir", diff --git a/webview-ui/src/i18n/locales/vi/settings.json b/webview-ui/src/i18n/locales/vi/settings.json index 97f24b47333..19b574af360 100644 --- a/webview-ui/src/i18n/locales/vi/settings.json +++ b/webview-ui/src/i18n/locales/vi/settings.json @@ -542,6 +542,9 @@ "description": "Khi được bật, terminal sẽ kế thừa các biến môi trường từ tiến trình cha của VSCode, như các cài đặt tích hợp shell được định nghĩa trong hồ sơ người dùng. Điều này trực tiếp chuyển đổi cài đặt toàn cục của VSCode `terminal.integrated.inheritEnv`. <0>Tìm hiểu thêm" } }, + "advancedSettings": { + "title": "Cài đặt nâng cao" + }, "advanced": { "diff": { "label": "Bật chỉnh sửa qua diff", diff --git a/webview-ui/src/i18n/locales/zh-CN/settings.json b/webview-ui/src/i18n/locales/zh-CN/settings.json index bbe85d0e84a..402de1e6836 100644 --- a/webview-ui/src/i18n/locales/zh-CN/settings.json +++ b/webview-ui/src/i18n/locales/zh-CN/settings.json @@ -542,6 +542,9 @@ "description": "启用后，终端将从 VSCode 父进程继承环境变量，如用户配置文件中定义的 shell 集成设置。这直接切换 VSCode 全局设置 `terminal.integrated.inheritEnv`。 <0>了解更多" } }, + "advancedSettings": { + "title": "高级设置" + }, "advanced": { "diff": { "label": "启用diff更新", diff --git a/webview-ui/src/i18n/locales/zh-TW/settings.json b/webview-ui/src/i18n/locales/zh-TW/settings.json index 4ca64bbc5c4..068e64d21f6 100644 --- a/webview-ui/src/i18n/locales/zh-TW/settings.json +++ b/webview-ui/src/i18n/locales/zh-TW/settings.json @@ -542,6 +542,9 @@ "description": "啟用後，終端機將從 VSCode 父程序繼承環境變數，如使用者設定檔中定義的 shell 整合設定。這直接切換 VSCode 全域設定 `terminal.integrated.inheritEnv`。 <0>瞭解更多" } }, + "advancedSettings": { + "title": "進階設定" + }, "advanced": { "diff": { "label": "透過差異比對編輯", From 9cfe085006ef79e3f795a6ccd0ab4f20e8fede31 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Tue, 15 Jul 2025 18:53:14 -0400 Subject: [PATCH 2/2] Move openrouter provider routing into advanced settings too --- .../src/components/settings/ApiOptions.tsx | 55 +++++++++++++++++++ .../settings/providers/OpenRouter.tsx | 50 ----------------- 2 files changed, 55 insertions(+), 50 deletions(-) diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index eb063ed517d..d0ec50abadc 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from "react" import { convertHeadersToObject } from "./utils/headers" import { useDebounce } from "react-use" import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { ExternalLinkIcon } from "@radix-ui/react-icons" import { type ProviderName, @@ -31,6 +32,10 @@ import { useAppTranslation } from "@src/i18n/TranslationContext" import { useRouterModels } from "@src/components/ui/hooks/useRouterModels" import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel" import { useExtensionState } from "@src/context/ExtensionStateContext" +import { + useOpenRouterModelProviders, + OPENROUTER_DEFAULT_PROVIDER_NAME, +} from "@src/components/ui/hooks/useOpenRouterModelProviders" import { filterProviders, filterModels } from "./utils/organizationFilters" import { Select, @@ -152,6 +157,14 @@ const ApiOptions = ({ const { data: routerModels, refetch: refetchRouterModels } = useRouterModels() + const { data: openRouterModelProviders } = useOpenRouterModelProviders(apiConfiguration?.openRouterModelId, { + enabled: + !!apiConfiguration?.openRouterModelId && + routerModels?.openrouter && + Object.keys(routerModels.openrouter).length > 1 && + apiConfiguration.openRouterModelId in routerModels.openrouter, + }) + // Update `apiModelId` whenever `selectedModelId` changes. useEffect(() => { if (selectedModelId) { @@ -573,6 +586,48 @@ const ApiOptions = ({ } onChange={(value) => setApiConfigurationField("consecutiveMistakeLimit", value)} /> + {selectedProvider === "openrouter" && + openRouterModelProviders && + Object.keys(openRouterModelProviders).length > 0 && ( +
+
+ + + + +
+ +
+ {t("settings:providers.openRouter.providerRouting.description")}{" "} + + {t("settings:providers.openRouter.providerRouting.learnMore")}. + +
+
+ )} )} diff --git a/webview-ui/src/components/settings/providers/OpenRouter.tsx b/webview-ui/src/components/settings/providers/OpenRouter.tsx index 9ef73d8b24c..f6cad36bf85 100644 --- a/webview-ui/src/components/settings/providers/OpenRouter.tsx +++ b/webview-ui/src/components/settings/providers/OpenRouter.tsx @@ -2,7 +2,6 @@ import { useCallback, useState } from "react" import { Trans } from "react-i18next" import { Checkbox } from "vscrui" import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react" -import { ExternalLinkIcon } from "@radix-ui/react-icons" import { type ProviderSettings, type OrganizationAllowList, openRouterDefaultModelId } from "@roo-code/types" @@ -10,12 +9,7 @@ import type { RouterModels } from "@roo/api" import { useAppTranslation } from "@src/i18n/TranslationContext" import { getOpenRouterAuthUrl } from "@src/oauth/urls" -import { - useOpenRouterModelProviders, - OPENROUTER_DEFAULT_PROVIDER_NAME, -} from "@src/components/ui/hooks/useOpenRouterModelProviders" import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink" -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui" import { inputEventTransform, noTransform } from "../transforms" @@ -37,7 +31,6 @@ export const OpenRouter = ({ apiConfiguration, setApiConfigurationField, routerModels, - selectedModelId, uriScheme, fromWelcomeView, organizationAllowList, @@ -58,14 +51,6 @@ export const OpenRouter = ({ [setApiConfigurationField], ) - const { data: openRouterModelProviders } = useOpenRouterModelProviders(apiConfiguration?.openRouterModelId, { - enabled: - !!apiConfiguration?.openRouterModelId && - routerModels?.openrouter && - Object.keys(routerModels.openrouter).length > 1 && - apiConfiguration.openRouterModelId in routerModels.openrouter, - }) - return ( <> - {openRouterModelProviders && Object.keys(openRouterModelProviders).length > 0 && ( -
-
- - - - -
- -
- {t("settings:providers.openRouter.providerRouting.description")}{" "} - - {t("settings:providers.openRouter.providerRouting.learnMore")}. - -
-
- )} ) }