Skip to content

refactor(terminal): redesign profile settings UX — unified dropdown, consistent layout, and styling (#119)(#321) #533

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
edelauna merged 5 commits into from
Jun 11, 2026
Merged

refactor(terminal): redesign profile settings UX — unified dropdown, consistent layout, and styling (#119)(#321) #533

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
12c704a
refactor(terminal): redesign profile settings UI with unified dropdow…
F915 Jun 8, 2026
39b087b
docs: add terminal settings before/after screenshots
F915 Jun 8, 2026
956ba95
fix(terminal): restore lost refinements — button stretch, Terminal ic…
F915 Jun 8, 2026
301b6ac
fix(terminal): add isProfilesLoaded guard, harden sentinel, sync i18n…
F915 Jun 9, 2026
6745500
fix(terminal): correct data-testid placement, use nullish coalescing,…
F915 Jun 10, 2026
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
Binary file added docs/after1.png
View file
Open in desktop
Comment thread
F915 marked this conversation as resolved.
Outdated
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/after2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/before.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
188 changes: 76 additions & 112 deletions webview-ui/src/components/settings/TerminalSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { HTMLAttributes, useState, useCallback, useEffect, useId } from "react"
import { HTMLAttributes, useState, useCallback, useEffect } from "react"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { vscode } from "@/utils/vscode"
import { VSCodeCheckbox, VSCodeLink, VSCodeButton } from "@vscode/webview-ui-toolkit/react"
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
import { Trans } from "react-i18next"
import { buildDocLink } from "@src/utils/docLinks"
import { useEvent, useMount } from "react-use"
import { Terminal } from "lucide-react"

import { type ExtensionMessage, type TerminalOutputPreviewSize } from "@roo-code/types"

import { cn } from "@/lib/utils"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Button } from "@/components/ui"

import { SetCachedStateField } from "./types"
import { SectionHeader } from "./SectionHeader"
Expand Down Expand Up @@ -67,10 +68,6 @@ export const TerminalSettings = ({
const [inheritEnv, setInheritEnv] = useState<boolean>(true)
const [profileNames, setProfileNames] = useState<string[]>([])
const [isProfilesLoaded, setIsProfilesLoaded] = useState(false)
const profileModeId = useId()
const defaultProfileId = `${profileModeId}-default`
const overrideProfileId = `${profileModeId}-override`
const isProfileOverrideSelected = !!terminalProfile && (!isProfilesLoaded || profileNames.includes(terminalProfile))
const isVSCodeTerminalEnabled = terminalShellIntegrationDisabled === false

useMount(() => {
Expand Down Expand Up @@ -166,111 +163,7 @@ export const TerminalSettings = ({
</div>
</div>
<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
{/* Profile override — only applies when VS Code integrated terminal is active
(shell integration enabled). Hidden in Execa/inline mode since getProfileShell()
is not wired there. */}
{isVSCodeTerminalEnabled && (
<SearchableSetting
settingId="terminal-profile"
section="terminal"
label={t("settings:terminal.profile.label")}>
<label className="block font-medium mb-1">{t("settings:terminal.profile.label")}</label>

{/* Level 1: Default (recommended) */}
<div className="flex items-center gap-2 mb-2">
<input
type="radio"
id={defaultProfileId}
name={profileModeId}
checked={!isProfileOverrideSelected}
onChange={() => setCachedStateField("terminalProfile", undefined)}
data-testid="terminal-profile-default-radio"
/>
<label htmlFor={defaultProfileId} className="cursor-pointer">
{t("settings:terminal.profile.default")}
</label>
<VSCodeButton
appearance="secondary"
onClick={() => {
onTerminalProfilePickerOpened?.()
vscode.postMessage({ type: "openTerminalProfilePicker" })
}}
data-testid="terminal-profile-configure-button">
{t("settings:terminal.profile.configureButton")}
</VSCodeButton>
</div>

{/* Level 2: Override */}
<div className="flex items-center gap-2 mb-2">
<input
type="radio"
id={overrideProfileId}
name={profileModeId}
checked={isProfileOverrideSelected}
disabled={profileNames.length === 0}
onChange={() => {
if (!terminalProfile && profileNames.length > 0) {
setCachedStateField("terminalProfile", profileNames[0])
}
}}
data-testid="terminal-profile-override-radio"
/>
<label
htmlFor={overrideProfileId}
className={
profileNames.length === 0
? "cursor-not-allowed text-vscode-disabledForeground"
: "cursor-pointer"
}>
{t("settings:terminal.profile.overrideLabel")}
</label>
{profileNames.length === 0 && (
<span
className="text-vscode-descriptionForeground text-xs"
data-testid="terminal-profile-no-profiles-hint">
{t("settings:terminal.profile.noProfiles")}
</span>
)}
</div>

{isProfileOverrideSelected && profileNames.length > 0 && (
<Select
value={terminalProfile || DEFAULT_PROFILE_VALUE}
data-testid="terminal-profile-dropdown"
onValueChange={(value) =>
setCachedStateField(
"terminalProfile",
value === DEFAULT_PROFILE_VALUE ? undefined : value,
)
}>
<SelectTrigger className="w-full ml-6">
<SelectValue placeholder={t("settings:common.select")} />
</SelectTrigger>
<SelectContent>
{profileNames.map((name) => (
<SelectItem key={name} value={name}>
{name}
</SelectItem>
))}
</SelectContent>
</Select>
)}

<div className="text-vscode-descriptionForeground text-sm mt-1">
<Trans i18nKey="settings:terminal.profile.description">
<VSCodeLink
href={buildDocLink(
"features/shell-integration",
"settings_terminal_profile",
)}
style={{ display: "inline" }}>
{" "}
</VSCodeLink>
</Trans>
</div>
</SearchableSetting>
)}

{/* "Use Inline Terminal" checkbox — ALWAYS at the top */}
<SearchableSetting
settingId="terminal-shell-integration-disabled"
section="terminal"
Expand Down Expand Up @@ -300,6 +193,77 @@ export const TerminalSettings = ({

{isVSCodeTerminalEnabled && (
<>
{/* Profile override — unified dropdown, now below checkbox */}
<SearchableSetting
settingId="terminal-profile"
section="terminal"
label={t("settings:terminal.profile.label")}>
<label className="block font-medium mb-1">
{t("settings:terminal.profile.label")}
</label>

<Select
value={terminalProfile || DEFAULT_PROFILE_VALUE}
Comment thread
F915 marked this conversation as resolved.
Outdated
onValueChange={(value) =>
setCachedStateField(
"terminalProfile",
value === DEFAULT_PROFILE_VALUE ? undefined : value,
)
}
data-testid="terminal-profile-dropdown">
<SelectTrigger className="w-full">
Comment thread
F915 marked this conversation as resolved.
Outdated
<SelectValue placeholder={t("settings:common.select")} />
</SelectTrigger>
<SelectContent>
<SelectItem value={DEFAULT_PROFILE_VALUE}>
{t("settings:terminal.profile.followVscode")}
</SelectItem>
{profileNames.map((name) => (
<SelectItem key={name} value={name}>
{name}
</SelectItem>
))}
</SelectContent>
</Select>

{!terminalProfile && (
<div className="mt-2 flex flex-col">
<Button
variant="secondary"
className="py-1"
onClick={() => {
onTerminalProfilePickerOpened?.()
vscode.postMessage({ type: "openTerminalProfilePicker" })
}}
data-testid="terminal-profile-configure-button">
<Terminal />
{t("settings:terminal.profile.configureButton")}
</Button>
</div>
)}

{profileNames.length === 0 && (
<div
className="text-vscode-descriptionForeground text-xs mt-1"
data-testid="terminal-profile-no-profiles-hint">
{t("settings:terminal.profile.noProfiles")}
</div>
)}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

<div className="text-vscode-descriptionForeground text-sm mt-1">
<Trans i18nKey="settings:terminal.profile.description">
<VSCodeLink
href={buildDocLink(
"features/shell-integration",
"settings_terminal_profile",
)}
style={{ display: "inline" }}>
{" "}
</VSCodeLink>
</Trans>
</div>
</SearchableSetting>

<SearchableSetting
settingId="terminal-inherit-env"
section="terminal"
Expand Down
Loading
Loading