Skip to content

ux: Improvements to the new, RCC Provider centric onboarding flow #9709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrubens merged 7 commits into from
Dec 1, 2025
Merged

ux: Improvements to the new, RCC Provider centric onboarding flow #9709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d8bd446
Visual an interaction improvements to the welcome view
brunobergher Nov 28, 2025
9ef5db5
Shows less model config options when in the welcome screen, as not to…
brunobergher Nov 28, 2025
2821afa
Visual tweak to cloud upsell for new users
brunobergher Dec 1, 2025
ea7ba6f
Connect-to-Cloud screen improvements
brunobergher Dec 1, 2025
d9cf089
i8n
brunobergher Dec 1, 2025
82791bc
Update webview-ui/src/components/chat/ChatView.tsx
brunobergher Dec 1, 2025
6d8a666
i18n
brunobergher Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions webview-ui/src/components/chat/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1373,10 +1373,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
{!cloudIsAuthenticated && taskHistory.length >= 6 && (
<DismissibleUpsell
upsellId="taskList2"
icon={<Cloud className="size-5 mt-0.5 shrink-0" />}
icon={<Cloud className="size-5 shrink-0" />}
onClick={() => openUpsell()}
dismissOnClick={false}
className="!bg-vscode-editor-background mt-6 border-border rounded-xl pl-4 pr-3 py-3 !text-base">
className="bg-none mt-6 border-border rounded-xl p-0 py-3 !text-base">
<Trans
i18nKey="cloud:upsell.taskList"
components={{
Expand Down
123 changes: 89 additions & 34 deletions webview-ui/src/components/settings/ApiOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ import { ConsecutiveMistakeLimitControl } from "./ConsecutiveMistakeLimitControl
import { BedrockCustomArn } from "./providers/BedrockCustomArn"
import { RooBalanceDisplay } from "./providers/RooBalanceDisplay"
import { buildDocLink } from "@src/utils/docLinks"
import { BookOpenText } from "lucide-react"

export interface ApiOptionsProps {
uriScheme: string | undefined
Expand Down Expand Up @@ -466,6 +467,12 @@ const ApiOptions = ({
const [rooOption] = options.splice(rooIndex, 1)
options.unshift(rooOption)
}
} else {
const openRouterIndex = options.findIndex((opt) => opt.value === "openrouter")
if (openRouterIndex > 0) {
const [openRouterOption] = options.splice(openRouterIndex, 1)
options.unshift(openRouterOption)
}
}

return options
Expand All @@ -475,16 +482,15 @@ const ApiOptions = ({
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-1 relative">
<div className="flex justify-between items-center">
<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
<label className="block font-medium">{t("settings:providers.apiProvider")}</label>
{selectedProvider === "roo" && cloudIsAuthenticated ? (
<RooBalanceDisplay />
) : (
docs && (
<div className="text-xs text-vscode-descriptionForeground">
<VSCodeLink href={docs.url} className="hover:text-vscode-foreground" target="_blank">
{t("settings:providers.providerDocumentation", { provider: docs.name })}
</VSCodeLink>
</div>
<VSCodeLink href={docs.url} target="_blank" className="flex gap-2">
{docs.name}
<BookOpenText className="size-4 inline ml-2" />
</VSCodeLink>
Comment on lines +490 to +493
Copy link
Collaborator

@mrubens mrubens Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is so much better

)
)}
</div>
Expand All @@ -509,7 +515,7 @@ const ApiOptions = ({
routerModels={routerModels}
selectedModelId={selectedModelId}
uriScheme={uriScheme}
fromWelcomeView={fromWelcomeView}
simplifySettings={fromWelcomeView}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
/>
Expand All @@ -524,6 +530,7 @@ const ApiOptions = ({
refetchRouterModels={refetchRouterModels}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -535,6 +542,7 @@ const ApiOptions = ({
uriScheme={uriScheme}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -545,6 +553,7 @@ const ApiOptions = ({
routerModels={routerModels}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -556,54 +565,73 @@ const ApiOptions = ({
refetchRouterModels={refetchRouterModels}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "anthropic" && (
<Anthropic apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<Anthropic
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "claude-code" && (
<ClaudeCode apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<ClaudeCode
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "openai-native" && (
<OpenAI
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
selectedModelInfo={selectedModelInfo}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "mistral" && (
<Mistral apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<Mistral
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "baseten" && (
<Baseten apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<Baseten
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "bedrock" && (
<Bedrock
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
selectedModelInfo={selectedModelInfo}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "vertex" && (
<Vertex
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
fromWelcomeView={fromWelcomeView}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "gemini" && (
<Gemini
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
fromWelcomeView={fromWelcomeView}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -613,27 +641,48 @@ const ApiOptions = ({
setApiConfigurationField={setApiConfigurationField}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "lmstudio" && (
<LMStudio apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<LMStudio
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "deepseek" && (
<DeepSeek apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<DeepSeek
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "doubao" && (
<Doubao apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<Doubao
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "qwen-code" && (
<QwenCode apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<QwenCode
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "moonshot" && (
<Moonshot apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
<Moonshot
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
simplifySettings={fromWelcomeView}
/>
)}

{selectedProvider === "minimax" && (
Expand Down Expand Up @@ -671,6 +720,7 @@ const ApiOptions = ({
routerModels={routerModels}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -680,6 +730,7 @@ const ApiOptions = ({
setApiConfigurationField={setApiConfigurationField}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -697,6 +748,7 @@ const ApiOptions = ({
setApiConfigurationField={setApiConfigurationField}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -707,6 +759,7 @@ const ApiOptions = ({
routerModels={routerModels}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand All @@ -733,6 +786,7 @@ const ApiOptions = ({
cloudIsAuthenticated={cloudIsAuthenticated}
organizationAllowList={organizationAllowList}
modelValidationError={modelValidationError}
simplifySettings={fromWelcomeView}
/>
)}

Expand Down Expand Up @@ -801,24 +855,25 @@ const ApiOptions = ({
</>
)}

{selectedProvider === "roo" ? (
<SimpleThinkingBudget
key={`${selectedProvider}-${selectedModelId}`}
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
modelInfo={selectedModelInfo}
/>
) : (
<ThinkingBudget
key={`${selectedProvider}-${selectedModelId}`}
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
modelInfo={selectedModelInfo}
/>
)}
{!fromWelcomeView &&
(selectedProvider === "roo" ? (
<SimpleThinkingBudget
key={`${selectedProvider}-${selectedModelId}`}
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
modelInfo={selectedModelInfo}
/>
) : (
<ThinkingBudget
key={`${selectedProvider}-${selectedModelId}`}
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
modelInfo={selectedModelInfo}
/>
))}

{/* Gate Verbosity UI by capability flag */}
{selectedModelInfo?.supportsVerbosity && (
{!fromWelcomeView && selectedModelInfo?.supportsVerbosity && (
<Verbosity
apiConfiguration={apiConfiguration}
setApiConfigurationField={setApiConfigurationField}
Expand Down
52 changes: 33 additions & 19 deletions webview-ui/src/components/settings/ModelPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useMemo, useState, useCallback, useEffect, useRef } from "react"
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
import { Trans } from "react-i18next"
import { ChevronsUpDown, Check, X } from "lucide-react"
import { ChevronsUpDown, Check, X, Info } from "lucide-react"

import type { ProviderSettings, ModelInfo, OrganizationAllowList } from "@roo-code/types"

Expand Down Expand Up @@ -54,6 +54,7 @@ interface ModelPickerProps {
) => void
organizationAllowList: OrganizationAllowList
errorMessage?: string
simplifySettings?: boolean
}

export const ModelPicker = ({
Expand All @@ -66,6 +67,7 @@ export const ModelPicker = ({
setApiConfigurationField,
organizationAllowList,
errorMessage,
simplifySettings,
}: ModelPickerProps) => {
const { t } = useAppTranslation()

Expand Down Expand Up @@ -246,25 +248,37 @@ export const ModelPicker = ({
{selectedModelInfo?.deprecated && (
<ApiErrorMessage errorMessage={t("settings:validation.modelDeprecated")} />
)}
{selectedModelId && selectedModelInfo && !selectedModelInfo.deprecated && (
<ModelInfoView
apiProvider={apiConfiguration.apiProvider}
selectedModelId={selectedModelId}
modelInfo={selectedModelInfo}
isDescriptionExpanded={isDescriptionExpanded}
setIsDescriptionExpanded={setIsDescriptionExpanded}
/>

{simplifySettings ? (
<p className="text-xs text-vscode-descriptionForeground m-0">
<Info className="size-3 inline mr-1" />
{t("settings:modelPicker.simplifiedExplanation")}
</p>
) : (
<div>
{selectedModelId && selectedModelInfo && !selectedModelInfo.deprecated && (
<ModelInfoView
apiProvider={apiConfiguration.apiProvider}
selectedModelId={selectedModelId}
modelInfo={selectedModelInfo}
isDescriptionExpanded={isDescriptionExpanded}
setIsDescriptionExpanded={setIsDescriptionExpanded}
/>
)}
<div className="text-sm text-vscode-descriptionForeground">
<Trans
i18nKey="settings:modelPicker.automaticFetch"
components={{
serviceLink: <VSCodeLink href={serviceUrl} className="text-sm" />,
defaultModelLink: (
<VSCodeLink onClick={() => onSelect(defaultModelId)} className="text-sm" />
),
}}
values={{ serviceName, defaultModelId }}
/>
</div>
</div>
)}
<div className="text-sm text-vscode-descriptionForeground">
<Trans
i18nKey="settings:modelPicker.automaticFetch"
components={{
serviceLink: <VSCodeLink href={serviceUrl} className="text-sm" />,
defaultModelLink: <VSCodeLink onClick={() => onSelect(defaultModelId)} className="text-sm" />,
}}
values={{ serviceName, defaultModelId }}
/>
</div>
</>
)
}
1 change: 1 addition & 0 deletions webview-ui/src/components/settings/providers/Anthropic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { inputEventTransform, noTransform } from "../transforms"
type AnthropicProps = {
apiConfiguration: ProviderSettings
setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
simplifySettings?: boolean
}

export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: AnthropicProps) => {
Expand Down
Loading
Loading