From 12c64a6eaed015189d464785010bd9cdbb482ba6 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 23 Sep 2026 17:00:26 +0200
Subject: [PATCH 1/6] feat: Group the model parameters and drop the ones that
 cannot act

The panel rendered a provider's parameter list in the order the definitions
happen to arrive in, so it asked about temperature, then reasoning, then
whether to resend files, with nothing to say which belonged together. The
keys are filed under six headings now, with a count beside each of what this
conversation has changed inside it, which is what the owner scans for before
reaching for Reset. A key this map has never heard of, which is what a
deployment's own customParams look like, keeps its place in the last section
instead of being guessed at or dropped.

Every parameter stays on screen. A settings panel is read as much as it is
edited, and a disclosure trades seeing the current state at a glance for
vertical space that costs nothing to find elsewhere: the headings are
captions rather than buttons, a control is measured against the row it sits
in rather than padded to a fixed block, and only free text takes the full
width. A number, a toggle or a choice says the same thing in half of a 300px
panel, so two sit side by side and the narrow ones in a section come first,
leaving one ragged edge at the bottom instead of a gap beside every
full-width field. Reset and Save As Preset share the closing row. Fifteen
parameters occupy 954px where the same fifteen took 1243px with four of the
six sections shut.

Grouping alone would still show controls that do nothing. A definition can
now declare what it rides along with: OpenAI's reasoning summary, mode and
context travel inside the reasoning object the Responses API takes and are
dropped by the server without it; a thinking budget is read only while
thinking is enabled; a cache lifetime only while the cache is being written.
Those five declare it, the panel judges each one on the companion's
effective value, and a section left with nothing live disappears rather than
standing empty. The rule lives on the definition rather than in the panel so
a deployment defining its own parameters can state one too.

The custom instructions field caps its own rows. It is sized by a shadow
copy of itself, measured as the panel mounts and before the sidebar has
settled on a width, and that measurement can come back as one word per line;
a CSS max-height was hiding the wrong answer rather than correcting it.

No parameter changes what it sends. This drops controls for values the
server was already discarding.
---
 .../SidePanel/Parameters/DynamicCheckbox.tsx  |   4 +-
 .../SidePanel/Parameters/DynamicCombobox.tsx  |   6 +-
 .../SidePanel/Parameters/DynamicDropdown.tsx  |   6 +-
 .../SidePanel/Parameters/DynamicInput.tsx     |   8 +-
 .../SidePanel/Parameters/DynamicSlider.tsx    |  12 +-
 .../SidePanel/Parameters/DynamicSwitch.tsx    |   8 +-
 .../SidePanel/Parameters/DynamicTags.tsx      |  10 +-
 .../SidePanel/Parameters/DynamicTextarea.tsx  |  12 +-
 .../components/SidePanel/Parameters/Panel.tsx | 108 ++++++---
 .../Parameters/__tests__/groups.spec.ts       | 216 +++++++++++++++++
 .../components/SidePanel/Parameters/groups.ts | 225 ++++++++++++++++++
 client/src/locales/en/translation.json        |   4 +
 packages/data-provider/src/generate.ts        |  19 ++
 .../data-provider/src/parameterSettings.ts    |   7 +
 14 files changed, 579 insertions(+), 66 deletions(-)
 create mode 100644 client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
 create mode 100644 client/src/components/SidePanel/Parameters/groups.ts

diff --git a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
index 4e04dec8544..b5720c9cf44 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
@@ -51,7 +51,7 @@ function DynamicCheckbox({
 
   return (
     <div
-      className={`flex flex-col items-center justify-start gap-6 ${
+      className={`flex h-full flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
@@ -64,7 +64,7 @@ function DynamicCheckbox({
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
-                <small className="opacity-40 high-contrast:opacity-100">
+                <small className="high-contrast:opacity-100 opacity-40">
                   ({localize('com_endpoint_default')}:{' '}
                   {defaultValue != null ? localize('com_ui_yes') : localize('com_ui_no')})
                 </small>
diff --git a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
index f708b44d181..1867636cc26 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
@@ -72,12 +72,12 @@ function DynamicCombobox({
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-start gap-6',
+        'flex h-full flex-col items-center justify-start gap-6',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           {showLabel === true && (
             <div className="flex w-full justify-between">
               <Label
@@ -86,7 +86,7 @@ function DynamicCombobox({
               >
                 {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
                 {showDefault && (
-                  <small className="opacity-40 high-contrast:opacity-100">
+                  <small className="high-contrast:opacity-100 opacity-40">
                     ({localize('com_endpoint_default')}: {defaultValue})
                   </small>
                 )}
diff --git a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
index 95325924f9e..510f7a1f4fe 100644
--- a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
@@ -66,12 +66,12 @@ function DynamicDropdown({
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-start gap-6',
+        'flex h-full flex-col items-center justify-start gap-6',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           {showLabel === true && (
             <div className="flex w-full justify-between">
               <Label
@@ -80,7 +80,7 @@ function DynamicDropdown({
               >
                 {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
                 {showDefault && (
-                  <small className="opacity-40 high-contrast:opacity-100">
+                  <small className="high-contrast:opacity-100 opacity-40">
                     ({localize('com_endpoint_default')}: {defaultValue})
                   </small>
                 )}
diff --git a/client/src/components/SidePanel/Parameters/DynamicInput.tsx b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
index 096c8a03133..c73448c1f4b 100644
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
@@ -165,12 +165,12 @@ function DynamicInput({
 
   return (
     <div
-      className={`flex flex-col items-center justify-start gap-6 ${
+      className={`flex h-full flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-input`}
@@ -178,7 +178,7 @@ function DynamicInput({
             >
               {labelCode ? localize(label as TranslationKeys) || label : label || settingKey}{' '}
               {showDefault && (
-                <small className="opacity-40 high-contrast:opacity-100">
+                <small className="high-contrast:opacity-100 opacity-40">
                   (
                   {typeof defaultValue === 'undefined' || !(defaultValue as string).length
                     ? localize('com_endpoint_default_blank')
@@ -197,7 +197,7 @@ function DynamicInput({
             onBlur={handleInputBlur}
             placeholder={placeholderText}
             className={cn(
-              'flex h-9 max-h-9 w-full resize-none rounded-lg border border-border-light bg-surface-secondary px-3 py-2',
+              'border-border-light bg-surface-secondary flex h-9 max-h-9 w-full resize-none rounded-lg border px-3 py-2',
             )}
           />
         </HoverCardTrigger>
diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
index d4979e04b48..4506a8a39dd 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
@@ -166,20 +166,20 @@ function DynamicSlider({
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-start gap-2',
+        'flex h-full flex-col items-center justify-start gap-2',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           <div className="flex w-full items-center justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-setting`}
-              className="break-words text-left text-xs font-medium"
+              className="text-left text-xs font-medium break-words"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
-                <small className="opacity-40 high-contrast:opacity-100">
+                <small className="high-contrast:opacity-100 opacity-40">
                   ({localize('com_endpoint_default')}: {getDefaultDisplayValue()})
                 </small>
               )}
@@ -202,7 +202,7 @@ function DynamicSlider({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 py-1 text-xs group-hover/temp:border-border-light',
+                    'reset-rc-number-input reset-rc-number-input-text-right group-hover/temp:border-border-light h-auto w-12 border-0 py-1 text-xs',
                   ),
                 )}
               />
@@ -217,7 +217,7 @@ function DynamicSlider({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input h-auto w-14 border-0 py-1 pl-1 text-center text-xs group-hover/temp:border-border-light',
+                    'reset-rc-number-input group-hover/temp:border-border-light h-auto w-14 border-0 py-1 pl-1 text-center text-xs',
                   ),
                 )}
               />
diff --git a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
index c9772dc20a9..203e4e11acb 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
@@ -46,20 +46,20 @@ function DynamicSwitch({
 
   return (
     <div
-      className={`flex flex-col items-center justify-start gap-6 ${
+      className={`flex h-full flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           <div className="flex justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-switch`}
-              className="break-words text-left text-xs font-medium"
+              className="text-left text-xs font-medium break-words"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
-                <small className="opacity-40 high-contrast:opacity-100">
+                <small className="high-contrast:opacity-100 opacity-40">
                   ({localize('com_endpoint_default')}:{' '}
                   {defaultValue != null ? localize('com_ui_on') : localize('com_ui_off')})
                 </small>
diff --git a/client/src/components/SidePanel/Parameters/DynamicTags.tsx b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
index d61ec18ee69..928e8f35184 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
@@ -101,12 +101,12 @@ function DynamicTags({
 
   return (
     <div
-      className={`flex flex-col items-center justify-start gap-6 ${
+      className={`flex h-full flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-input`}
@@ -114,7 +114,7 @@ function DynamicTags({
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
-                <small className="opacity-40 high-contrast:opacity-100">
+                <small className="high-contrast:opacity-100 opacity-40">
                   (
                   {typeof defaultValue === 'undefined' || !(defaultValue as string).length
                     ? localize('com_endpoint_default_blank')
@@ -125,7 +125,7 @@ function DynamicTags({
             </Label>
           </div>
           <div>
-            <div className="mb-2 flex flex-wrap break-all rounded-lg border border-border-light bg-surface-secondary">
+            <div className="border-border-light bg-surface-secondary flex flex-wrap rounded-lg border break-all">
               {currentTags && currentTags.length > 0 && (
                 <div className="flex w-full gap-1 p-1">
                   {currentTags.map((tag: string, index: number) => (
@@ -166,7 +166,7 @@ function DynamicTags({
                     ? (localize(placeholder as TranslationKeys) ?? placeholder)
                     : placeholder
                 }
-                className={cn('flex h-9 max-h-9 border-none bg-surface-secondary px-3 py-2')}
+                className={cn('bg-surface-secondary flex h-9 max-h-9 border-none px-3 py-2')}
               />
             </div>
           </div>
diff --git a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
index df54972adff..a01af8efd61 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
@@ -49,12 +49,12 @@ function DynamicTextarea({
 
   return (
     <div
-      className={`flex flex-col items-center justify-start gap-6 ${
+      className={`flex h-full flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
       <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
+        <HoverCardTrigger className="grid h-full w-full content-between items-center gap-2">
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-textarea`}
@@ -75,6 +75,12 @@ function DynamicTextarea({
           <TextareaAutosize
             focusOutline="hidden"
             id={`${settingKey}-dynamic-textarea`}
+            /** The field is measured by a shadow copy of itself, and the panel mounts
+             *  before the sidebar has settled on a width, so that measurement can come
+             *  back as one word per line. Capping the rows lets the library clamp its
+             *  own answer instead of leaving a CSS max-height to hide a wrong one. */
+            minRows={3}
+            maxRows={8}
             disabled={readonly}
             value={inputValue ?? ''}
             onChange={setInputValue}
@@ -88,7 +94,7 @@ function DynamicTextarea({
                 : placeholder
             }
             className={cn(
-              'border-border-light bg-surface-secondary flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg border px-3 py-2 text-sm',
+              'border-border-light bg-surface-secondary flex max-h-[220px] min-h-[76px] w-full resize-none rounded-lg border px-3 py-2 text-sm',
             )}
           />
         </HoverCardTrigger>
diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index a9b7b0cf6b7..420a4817c17 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useId, useMemo, useState, useEffect, useCallback } from 'react';
 import keyBy from 'lodash/keyBy';
 import { RotateCcw } from 'lucide-react';
 import { Button } from '@librechat/client';
@@ -14,6 +14,7 @@ import {
   resolveDropParamsUIKeys,
 } from 'librechat-data-provider';
 import type { TPreset } from 'librechat-data-provider';
+import { availableParameters, groupParameters, countModified, isWideParameter } from './groups';
 import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
 import { useChatContext, useLiveAnnouncer } from '~/Providers';
 import { SaveAsPresetDialog } from '~/components/Endpoints';
@@ -22,6 +23,7 @@ import { componentMapping } from './components';
 import { logger, cn } from '~/utils';
 
 export default function Parameters() {
+  const panelId = useId();
   const localize = useLocalize();
   const { data: startupConfig } = useGetStartupConfig();
   const { conversation, setConversation } = useChatContext();
@@ -164,6 +166,14 @@ export default function Parameters() {
     setResetCount((count) => count + 1);
   }, [setConversation, announcePolite, localize]);
 
+  /** Only what this conversation can act on: a parameter whose companion is off is
+   *  dropped before grouping, so a section that has nothing live disappears with it
+   *  rather than standing empty. */
+  const sections = useMemo(
+    () => groupParameters(availableParameters(visibleParameters, conversation)),
+    [visibleParameters, conversation],
+  );
+
   const openDialog = useCallback(() => {
     const newPreset = tConvoUpdateSchema.parse({
       ...conversation,
@@ -177,57 +187,83 @@ export default function Parameters() {
   }
 
   return (
-    <div className="h-auto max-w-full px-3 pb-3 pt-2">
-      <div className="grid grid-cols-2 gap-4">
-        {' '}
-        {/* This is the parent element containing all settings */}
-        {/* Below is an example of an applied dynamic setting, each be contained by a div with the column span specified */}
-        {visibleParameters.map((setting) => {
-          const Component = componentMapping[setting.component];
-          if (!Component) {
-            return null;
-          }
-          const { key, default: defaultValue, ...rest } = setting;
-
-          if (key === 'region' && bedrockRegions.length) {
-            rest.options = bedrockRegions;
-          }
-
-          return (
-            <Component
-              key={key}
-              settingKey={key}
-              defaultValue={defaultValue}
-              {...rest}
-              setOption={setOption}
-              conversation={conversation}
-            />
-          );
-        })}
-      </div>
-      <div className="mt-4 flex justify-center">
+    <div className="h-auto max-w-full px-3 pt-1 pb-3">
+      {/* Every parameter this model can act on is on screen. A disclosure would
+          trade the one thing a settings panel is for, seeing the current state at a
+          glance, for vertical space that pairing and quieter headings give back
+          anyway. */}
+      {sections.map((section) => {
+        const changed = countModified(section.settings, conversation);
+        const headingId = `${panelId}-${section.id}`;
+
+        return (
+          <section key={section.id} aria-labelledby={headingId} className="pt-4 first:pt-0">
+            <h3
+              id={headingId}
+              className="text-text-secondary mb-2 flex items-center gap-1.5 text-xs font-semibold tracking-wide uppercase"
+            >
+              <span className="truncate">{localize(section.label)}</span>
+              {/* Where this conversation's own answers are, which is what the owner
+                  scans for before reaching for Reset. */}
+              {changed > 0 && (
+                <span className="bg-surface-tertiary text-text-primary shrink-0 rounded-full px-1.5 text-xs font-normal tracking-normal normal-case tabular-nums">
+                  {changed}
+                </span>
+              )}
+            </h3>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-2.5">
+              {section.settings.map((setting) => {
+                const Component = componentMapping[setting.component];
+                if (!Component) {
+                  return null;
+                }
+                const { key, default: defaultValue, ...rest } = setting;
+
+                if (key === 'region' && bedrockRegions.length) {
+                  rest.options = bedrockRegions;
+                }
+
+                /** The cell owns the span, not the control. The definitions carry a
+                 *  columnSpan written for the four-column preset dialog, which says
+                 *  nothing about a panel this narrow. */
+                return (
+                  <div key={key} className={isWideParameter(setting) ? 'col-span-2' : 'col-span-1'}>
+                    <Component
+                      settingKey={key}
+                      defaultValue={defaultValue}
+                      {...rest}
+                      setOption={setOption}
+                      conversation={conversation}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        );
+      })}
+      <div className="mt-5 flex gap-2">
         <Button
           variant="outline"
           type="button"
           onClick={resetParameters}
-          className="flex w-full items-center justify-center gap-2 px-4 py-2 text-sm active:scale-[0.98] motion-reduce:transform-none"
+          aria-label={localize('com_ui_reset_var', { 0: localize('com_ui_model_parameters') })}
+          className="flex flex-1 items-center justify-center gap-2 px-4 py-2 text-sm active:scale-[0.98] motion-reduce:transform-none"
         >
           <RotateCcw
             key={resetCount}
             className={cn(
-              'h-4 w-4 motion-reduce:animate-none',
+              'h-4 w-4 shrink-0 motion-reduce:animate-none',
               resetCount > 0 && 'animate-reset-spin',
             )}
             aria-hidden="true"
           />
-          {localize('com_ui_reset_var', { 0: localize('com_ui_model_parameters') })}
+          {localize('com_ui_reset')}
         </Button>
-      </div>
-      <div className="mt-2 flex justify-center">
         <Button
           variant="default"
           onClick={openDialog}
-          className="flex w-full items-center justify-center px-4 py-2 font-semibold"
+          className="flex flex-[2] items-center justify-center px-4 py-2 font-semibold"
           type="button"
         >
           {localize('com_endpoint_save_as_preset')}
diff --git a/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
new file mode 100644
index 00000000000..9c0a7ce2ad0
--- /dev/null
+++ b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
@@ -0,0 +1,216 @@
+import type { SettingDefinition } from 'librechat-data-provider';
+import {
+  availableParameters,
+  countModified,
+  groupParameters,
+  isModified,
+  isWideParameter,
+} from '../groups';
+
+const setting = (key: string, over: Partial<SettingDefinition> = {}): SettingDefinition =>
+  ({ key, type: 'number', component: 'slider', ...over }) as SettingDefinition;
+
+describe('groupParameters', () => {
+  it('files each parameter under the question it answers', () => {
+    const sections = groupParameters([
+      setting('temperature'),
+      setting('promptPrefix'),
+      setting('web_search'),
+      setting('maxContextTokens'),
+    ]);
+
+    expect(sections.map((section) => section.id)).toEqual([
+      'identity',
+      'sampling',
+      'limits',
+      'context',
+    ]);
+  });
+
+  /** The panel is narrow and endpoints differ wildly: a heading for a section this
+   *  model has nothing in is a row of nothing. */
+  it('leaves out the sections this endpoint has no parameters for', () => {
+    const sections = groupParameters([setting('temperature')]);
+
+    expect(sections).toHaveLength(1);
+    expect(sections[0].settings.map((s) => s.key)).toEqual(['temperature']);
+  });
+
+  /** A deployment can define its own parameters through `customParams`. Filing them
+   *  under a guessed heading would misdescribe them; dropping them would hide a
+   *  control the operator deliberately added. */
+  it('keeps a parameter it has never heard of, in the last section', () => {
+    const sections = groupParameters([setting('temperature'), setting('house_style')]);
+
+    expect(sections.at(-1)).toMatchObject({ id: 'other' });
+    expect(sections.at(-1)?.settings.map((s) => s.key)).toEqual(['house_style']);
+  });
+
+  /** Two narrow controls share a row, so a full-width one in the middle would break
+   *  the pair on either side of it. */
+  it('packs the narrow parameters before the wide ones', () => {
+    const [limits] = groupParameters([
+      setting('maxContextTokens', { type: 'number', component: 'input' }),
+      setting('stop', { type: 'array', component: 'tags' }),
+      setting('fileTokenLimit', { type: 'number', component: 'input' }),
+    ]);
+
+    expect(limits.settings.map((s) => s.key)).toEqual([
+      'maxContextTokens',
+      'fileTokenLimit',
+      'stop',
+    ]);
+  });
+
+  it("keeps the provider's own order inside a section", () => {
+    const [sampling] = groupParameters([
+      setting('presence_penalty'),
+      setting('temperature'),
+      setting('top_p'),
+    ]);
+
+    expect(sampling.settings.map((s) => s.key)).toEqual([
+      'presence_penalty',
+      'temperature',
+      'top_p',
+    ]);
+  });
+
+  it('survives a null in the definitions', () => {
+    const sections = groupParameters([
+      setting('temperature'),
+      null as unknown as SettingDefinition,
+    ]);
+
+    expect(sections).toHaveLength(1);
+  });
+});
+
+describe('isModified', () => {
+  const temperature = setting('temperature', { default: 1 });
+
+  it('reads an absent value as untouched', () => {
+    expect(isModified(temperature, {})).toBe(false);
+    expect(isModified(temperature, null)).toBe(false);
+  });
+
+  /** The count tells the owner where their changes are, so a value that merely
+   *  restates the default is not one. */
+  it('reads a value equal to the default as untouched', () => {
+    expect(isModified(temperature, { temperature: 1 })).toBe(false);
+  });
+
+  it('counts a value that differs', () => {
+    expect(isModified(temperature, { temperature: 0.2 })).toBe(true);
+  });
+
+  it('treats an empty string and an empty list as nothing said', () => {
+    expect(isModified(setting('promptPrefix', { type: 'string' }), { promptPrefix: '' })).toBe(
+      false,
+    );
+    expect(isModified(setting('stop', { type: 'array', default: [] }), { stop: [] })).toBe(false);
+  });
+
+  it('compares a list by its contents', () => {
+    const stop = setting('stop', { type: 'array', default: [] });
+
+    expect(isModified(stop, { stop: ['###'] })).toBe(true);
+  });
+
+  it('counts only what changed', () => {
+    const settings = [temperature, setting('top_p', { default: 1 })];
+
+    expect(countModified(settings, { temperature: 0.2, top_p: 1 })).toBe(1);
+    expect(countModified(settings, {})).toBe(0);
+  });
+});
+
+describe('availableParameters', () => {
+  const useResponsesApi = setting('useResponsesApi', { type: 'boolean', default: false });
+  const reasoningSummary = setting('reasoning_summary', {
+    dependsOn: [{ key: 'useResponsesApi', equals: true }],
+  });
+
+  /** The server drops the reasoning object without the Responses API, so a control
+   *  for it is a control for nothing. */
+  it('hides a parameter whose companion is off', () => {
+    const live = availableParameters([useResponsesApi, reasoningSummary], {});
+
+    expect(live.map((s) => s.key)).toEqual(['useResponsesApi']);
+  });
+
+  it('shows it as soon as the companion is on', () => {
+    const live = availableParameters([useResponsesApi, reasoningSummary], {
+      useResponsesApi: true,
+    });
+
+    expect(live.map((s) => s.key)).toEqual(['useResponsesApi', 'reasoning_summary']);
+  });
+
+  /** A companion the conversation never mentions still has whatever value the
+   *  provider will use, which is the definition's default. */
+  it('judges the companion by its effective value, not only by what was set', () => {
+    const thinking = setting('thinking', { type: 'boolean', default: true });
+    const budget = setting('thinkingBudget', {
+      dependsOn: [{ key: 'thinking', equals: true }],
+    });
+
+    expect(availableParameters([thinking, budget], {}).map((s) => s.key)).toEqual([
+      'thinking',
+      'thinkingBudget',
+    ]);
+    expect(availableParameters([thinking, budget], { thinking: false }).map((s) => s.key)).toEqual([
+      'thinking',
+    ]);
+  });
+
+  /** An endpoint that drops the companion through `dropParams` leaves the dependent
+   *  parameter with nothing to attach to, and no way for the user to satisfy it. */
+  it('hides a parameter whose companion this endpoint does not offer', () => {
+    expect(availableParameters([reasoningSummary], { useResponsesApi: true })).toEqual([]);
+  });
+
+  it('leaves a parameter with no dependency alone', () => {
+    expect(availableParameters([setting('temperature')], {}).map((s) => s.key)).toEqual([
+      'temperature',
+    ]);
+  });
+
+  it('empties a section rather than leaving it standing', () => {
+    const sections = groupParameters(
+      availableParameters([setting('temperature'), reasoningSummary], {}),
+    );
+
+    expect(sections.map((section) => section.id)).toEqual(['sampling']);
+  });
+});
+
+describe('isWideParameter', () => {
+  /** A system prompt, a name and a stop list are read back as text, and half of a
+   *  300px panel is a peephole for any of them. */
+  it('gives the whole row to free text', () => {
+    expect(
+      isWideParameter(setting('promptPrefix', { type: 'string', component: 'textarea' })),
+    ).toBe(true);
+    expect(isWideParameter(setting('modelLabel', { type: 'string', component: 'input' }))).toBe(
+      true,
+    );
+    expect(isWideParameter(setting('stop', { type: 'array', component: 'tags' }))).toBe(true);
+  });
+
+  /** Pairing these is the whole reason the panel fits with nothing collapsed. */
+  it('keeps a number, a toggle and a choice in one column', () => {
+    expect(
+      isWideParameter(setting('maxContextTokens', { type: 'number', component: 'input' })),
+    ).toBe(false);
+    expect(isWideParameter(setting('resendFiles', { type: 'boolean', component: 'switch' }))).toBe(
+      false,
+    );
+    expect(isWideParameter(setting('temperature', { type: 'number', component: 'slider' }))).toBe(
+      false,
+    );
+    expect(
+      isWideParameter(setting('promptCacheTtl', { type: 'string', component: 'combobox' })),
+    ).toBe(false);
+  });
+});
diff --git a/client/src/components/SidePanel/Parameters/groups.ts b/client/src/components/SidePanel/Parameters/groups.ts
new file mode 100644
index 00000000000..86b45359d73
--- /dev/null
+++ b/client/src/components/SidePanel/Parameters/groups.ts
@@ -0,0 +1,225 @@
+import { ComponentTypes, SettingTypes } from 'librechat-data-provider';
+import type { SettingDefinition, TConversation, TPreset } from 'librechat-data-provider';
+import type { TranslationKeys } from '~/hooks';
+
+export interface ParameterSection {
+  id: string;
+  label: TranslationKeys;
+  settings: SettingDefinition[];
+}
+
+/**
+ * The panel's order of questions, rather than the order the definitions happen to
+ * arrive in.
+ *
+ * A provider hands over a flat list built for its API, so a panel that renders it
+ * as-is asks about temperature, then reasoning, then whether to resend files, with
+ * nothing to say which of those belong together. Grouping is the client's job
+ * because it is a reading order, not part of the contract: the same key means the
+ * same thing wherever it appears, so one map serves every endpoint.
+ *
+ * Keys are listed per section rather than matched by prefix. A provider is free to
+ * name a parameter anything, and a wrong guess would file it under a heading that
+ * misdescribes it; an unknown key falls to the last section instead, where it is
+ * still visible and still editable.
+ */
+const SECTIONS: ReadonlyArray<{ id: string; label: TranslationKeys; keys: readonly string[] }> = [
+  {
+    id: 'identity',
+    label: 'com_ui_params_identity',
+    keys: ['chatGptLabel', 'modelLabel', 'promptPrefix', 'system'],
+  },
+  {
+    id: 'sampling',
+    label: 'com_ui_params_sampling',
+    keys: ['temperature', 'topP', 'top_p', 'topK', 'frequency_penalty', 'presence_penalty'],
+  },
+  {
+    id: 'limits',
+    label: 'com_ui_params_limits',
+    keys: [
+      'maxContextTokens',
+      'max_tokens',
+      'maxOutputTokens',
+      'maxTokens',
+      'fileTokenLimit',
+      'stop',
+    ],
+  },
+  {
+    id: 'reasoning',
+    label: 'com_ui_params_reasoning',
+    keys: [
+      'effort',
+      'reasoning_effort',
+      'reasoning_mode',
+      'reasoning_summary',
+      'reasoning_context',
+      'thinking',
+      'thinkingBudget',
+      'thinkingDisplay',
+      'thinkingLevel',
+      'verbosity',
+    ],
+  },
+  {
+    id: 'context',
+    label: 'com_ui_context',
+    keys: [
+      'resendFiles',
+      'imageDetail',
+      'promptCache',
+      'promptCacheTtl',
+      'web_search',
+      'url_context',
+    ],
+  },
+  {
+    id: 'advanced',
+    label: 'com_ui_advanced',
+    keys: ['useResponsesApi', 'disableStreaming', 'region', 'model'],
+  },
+  /** Everything a deployment added that this map has never heard of. */
+  { id: 'other', label: 'com_ui_misc', keys: [] },
+];
+
+const SECTION_BY_KEY = new Map<string, string>(
+  SECTIONS.flatMap((section) => section.keys.map((key) => [key, section.id] as const)),
+);
+
+/**
+ * Whether a parameter needs the whole row rather than one of the two columns.
+ *
+ * Free text is the only thing in the panel that is read back as text: a system
+ * prompt, a custom name, a list of stop sequences. Half of a 300px panel turns
+ * those into a peephole. A number, a toggle or a choice says the same thing in a
+ * narrow column as in a wide one, so two of them cost one row instead of two,
+ * which is the whole reason the panel fits without hiding anything.
+ */
+export function isWideParameter(setting: SettingDefinition): boolean {
+  if (setting.component === ComponentTypes.Textarea || setting.component === ComponentTypes.Tags) {
+    return true;
+  }
+  return setting.component === ComponentTypes.Input && setting.type !== SettingTypes.Number;
+}
+
+/**
+ * Files the parameters under their headings, keeping each provider's own order
+ * inside a section and dropping the sections this endpoint has nothing for.
+ *
+ * Within a section the narrow parameters come first. They sit two to a row, so a
+ * full-width one landing between them breaks the pairs on either side and leaves a
+ * gap beside whatever follows it. Sending the wide ones to the end of their own
+ * section packs the columns and leaves a single ragged edge at the bottom.
+ */
+export function groupParameters(parameters: SettingDefinition[]): ParameterSection[] {
+  const bySection = new Map<string, SettingDefinition[]>();
+  for (const setting of parameters) {
+    if (setting == null) {
+      continue;
+    }
+    const id = SECTION_BY_KEY.get(setting.key) ?? 'other';
+    const existing = bySection.get(id);
+    if (existing) {
+      existing.push(setting);
+      continue;
+    }
+    bySection.set(id, [setting]);
+  }
+
+  const sections: ParameterSection[] = [];
+  for (const section of SECTIONS) {
+    const settings = bySection.get(section.id);
+    if (settings != null && settings.length > 0) {
+      sections.push({
+        id: section.id,
+        label: section.label,
+        settings: [
+          ...settings.filter((setting) => !isWideParameter(setting)),
+          ...settings.filter(isWideParameter),
+        ],
+      });
+    }
+  }
+  return sections;
+}
+
+/**
+ * Whether a parameter can currently do anything.
+ *
+ * A definition may say it only rides along with another one, and the server honours
+ * that whether or not the panel does: OpenAI's reasoning summary, mode and context
+ * are dropped unless the Responses API is on, a thinking budget is read only while
+ * thinking is enabled, a cache lifetime only while the cache is being written.
+ * Offering those controls regardless is what makes the panel feel arbitrary: half of
+ * it is inert, and nothing says which half.
+ *
+ * The condition is judged on the EFFECTIVE value, the conversation's if it has one
+ * and the definition's default otherwise, because a parameter left untouched is
+ * still whatever the provider will use.
+ */
+export function isAvailable(
+  setting: SettingDefinition,
+  conversation: Partial<TConversation> | Partial<TPreset> | null,
+  definitions: Map<string, SettingDefinition>,
+): boolean {
+  if (setting.dependsOn == null || setting.dependsOn.length === 0) {
+    return true;
+  }
+  return setting.dependsOn.every((dependency) => {
+    /** A dependency this endpoint does not offer cannot be satisfied by the panel,
+     *  so the parameter that needs it has nothing to attach to either. */
+    const target = definitions.get(dependency.key);
+    if (target == null) {
+      return false;
+    }
+    const raw = conversation?.[dependency.key as keyof typeof conversation];
+    const value = raw ?? target.default;
+    if (dependency.equals !== undefined) {
+      return value === dependency.equals;
+    }
+    return value != null && value !== false && value !== '';
+  });
+}
+
+/** The parameters this conversation can actually act on, in the order given. */
+export function availableParameters(
+  parameters: SettingDefinition[],
+  conversation: Partial<TConversation> | Partial<TPreset> | null,
+): SettingDefinition[] {
+  const definitions = new Map(
+    parameters.filter((setting) => setting != null).map((setting) => [setting.key, setting]),
+  );
+  return parameters.filter(
+    (setting) => setting != null && isAvailable(setting, conversation, definitions),
+  );
+}
+
+/**
+ * Whether this conversation says something about a parameter that its default does
+ * not already say. It is what the panel counts to tell the owner where their changes
+ * are, so an absent value and a value equal to the default both read as untouched.
+ */
+export function isModified(
+  setting: SettingDefinition,
+  conversation: Partial<TConversation> | Partial<TPreset> | null,
+): boolean {
+  const value = conversation?.[setting.key as keyof typeof conversation];
+  if (value == null || value === '') {
+    return false;
+  }
+  if (Array.isArray(value)) {
+    return value.length > 0 && JSON.stringify(value) !== JSON.stringify(setting.default);
+  }
+  return value !== setting.default;
+}
+
+export function countModified(
+  settings: SettingDefinition[],
+  conversation: Partial<TConversation> | Partial<TPreset> | null,
+): number {
+  return settings.reduce(
+    (count, setting) => (isModified(setting, conversation) ? count + 1 : count),
+    0,
+  );
+}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 6fcfc64aeea..f044120df93 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1993,6 +1993,10 @@
   "com_ui_output": "Output",
   "com_ui_page": "Page",
   "com_ui_parameters": "Parameters",
+  "com_ui_params_identity": "Identity",
+  "com_ui_params_limits": "Limits",
+  "com_ui_params_reasoning": "Reasoning",
+  "com_ui_params_sampling": "Sampling",
   "com_ui_passkey_add": "Add passkey",
   "com_ui_passkey_added": "Passkey added",
   "com_ui_passkey_added_on": "Added {{date}}",
diff --git a/packages/data-provider/src/generate.ts b/packages/data-provider/src/generate.ts
index e12934ee4e6..b387cc8d169 100644
--- a/packages/data-provider/src/generate.ts
+++ b/packages/data-provider/src/generate.ts
@@ -49,8 +49,27 @@ export enum OptionTypes {
   Model = 'model',
   Custom = 'custom',
 }
+/**
+ * A condition under which a parameter is worth offering at all.
+ *
+ * Some parameters only reach the provider alongside another one: OpenAI's reasoning
+ * summary, mode and context travel inside the `reasoning` object the Responses API
+ * takes and are dropped without it; Anthropic's thinking budget is read only while
+ * thinking is enabled. Stating that here rather than in a panel keeps the rule with
+ * the definition it belongs to, so a deployment defining its own parameters can
+ * declare one too.
+ */
+export interface SettingDependency {
+  /** The parameter this one rides along with. */
+  key: string;
+  /** The value it has to hold. Omitted, any value that is not nullish or false. */
+  equals?: number | boolean | string;
+}
+
 export interface SettingDefinition {
   key: string;
+  /** Conditions that must all hold, or this parameter does nothing and is not shown. */
+  dependsOn?: SettingDependency[];
   description?: string;
   type: 'number' | 'boolean' | 'string' | 'enum' | 'array';
   default?: number | boolean | string | string[];
diff --git a/packages/data-provider/src/parameterSettings.ts b/packages/data-provider/src/parameterSettings.ts
index ebc863eec59..4910a455c97 100644
--- a/packages/data-provider/src/parameterSettings.ts
+++ b/packages/data-provider/src/parameterSettings.ts
@@ -303,6 +303,7 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_summary: {
     key: 'reasoning_summary',
+    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_summary',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_summary',
@@ -327,6 +328,7 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_mode: {
     key: 'reasoning_mode',
+    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_mode',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_mode',
@@ -345,6 +347,7 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_context: {
     key: 'reasoning_context',
+    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_context',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_context',
@@ -468,6 +471,7 @@ const anthropic: Record<string, SettingDefinition> = {
   },
   promptCacheTtl: {
     key: 'promptCacheTtl',
+    dependsOn: [{ key: 'promptCache', equals: true }],
     label: 'com_endpoint_prompt_cache_ttl',
     labelCode: true,
     description: 'com_endpoint_anthropic_prompt_cache_ttl',
@@ -497,6 +501,7 @@ const anthropic: Record<string, SettingDefinition> = {
   },
   thinkingBudget: {
     key: 'thinkingBudget',
+    dependsOn: [{ key: 'thinking', equals: true }],
     label: 'com_endpoint_thinking_budget',
     labelCode: true,
     description: 'com_endpoint_anthropic_thinking_budget',
@@ -630,6 +635,7 @@ const bedrock: Record<string, SettingDefinition> = {
   },
   promptCacheTtl: {
     key: 'promptCacheTtl',
+    dependsOn: [{ key: 'promptCache', equals: true }],
     label: 'com_endpoint_prompt_cache_ttl',
     labelCode: true,
     description: 'com_endpoint_anthropic_prompt_cache_ttl',
@@ -780,6 +786,7 @@ const google: Record<string, SettingDefinition> = {
   },
   thinkingBudget: {
     key: 'thinkingBudget',
+    dependsOn: [{ key: 'thinking', equals: true }],
     label: 'com_endpoint_thinking_budget',
     labelCode: true,
     description: 'com_endpoint_google_thinking_budget',

From d9d6e1682b526e8f3f9977c852b3403dc830d1d2 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 27 Sep 2026 23:08:15 +0200
Subject: [PATCH 2/6] refactor: Keep every model parameter on screen and drop
 only empty controls

Hiding a parameter behind a companion toggle judged it by a rule the
client cannot see all of: a reasoningObject endpoint sends the reasoning
fields without the Responses API, adaptive-thinking Claude models ignore
the budget however thinking is set, and a deployment could not declare
the rule in librechat.yaml at all. The panel groups every parameter again
and leaves out only a choice with no options, such as Bedrock's region
when no regions are configured, so no section stands empty. Reset and
Save As Preset share a row while their labels fit and stack when a
translation is too long for the panel.
---
 .../components/SidePanel/Parameters/Panel.tsx | 33 +++++---
 .../Parameters/__tests__/groups.spec.ts       | 84 ++++++-------------
 .../components/SidePanel/Parameters/groups.ts | 54 ++----------
 packages/data-provider/src/generate.ts        | 19 -----
 .../data-provider/src/parameterSettings.ts    |  7 --
 5 files changed, 56 insertions(+), 141 deletions(-)

diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index 420a4817c17..e969ba38f9d 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -14,7 +14,7 @@ import {
   resolveDropParamsUIKeys,
 } from 'librechat-data-provider';
 import type { TPreset } from 'librechat-data-provider';
-import { availableParameters, groupParameters, countModified, isWideParameter } from './groups';
+import { groupParameters, countModified, hasControl, isWideParameter } from './groups';
 import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
 import { useChatContext, useLiveAnnouncer } from '~/Providers';
 import { SaveAsPresetDialog } from '~/components/Endpoints';
@@ -166,12 +166,21 @@ export default function Parameters() {
     setResetCount((count) => count + 1);
   }, [setConversation, announcePolite, localize]);
 
-  /** Only what this conversation can act on: a parameter whose companion is off is
-   *  dropped before grouping, so a section that has nothing live disappears with it
-   *  rather than standing empty. */
+  /** Region choices come from the deployment, so they are filled in before grouping,
+   *  and a control left with nothing to render is dropped there too: a section is
+   *  built only from controls that show something. */
   const sections = useMemo(
-    () => groupParameters(availableParameters(visibleParameters, conversation)),
-    [visibleParameters, conversation],
+    () =>
+      groupParameters(
+        visibleParameters
+          .map((setting) =>
+            setting.key === 'region' && bedrockRegions.length > 0
+              ? { ...setting, options: bedrockRegions }
+              : setting,
+          )
+          .filter((setting) => componentMapping[setting.component] != null && hasControl(setting)),
+      ),
+    [visibleParameters, bedrockRegions],
   );
 
   const openDialog = useCallback(() => {
@@ -219,10 +228,6 @@ export default function Parameters() {
                 }
                 const { key, default: defaultValue, ...rest } = setting;
 
-                if (key === 'region' && bedrockRegions.length) {
-                  rest.options = bedrockRegions;
-                }
-
                 /** The cell owns the span, not the control. The definitions carry a
                  *  columnSpan written for the four-column preset dialog, which says
                  *  nothing about a panel this narrow. */
@@ -242,13 +247,15 @@ export default function Parameters() {
           </section>
         );
       })}
-      <div className="mt-5 flex gap-2">
+      {/* The two share a row while their labels fit and stack when a translation is
+          too long for the panel. */}
+      <div className="mt-5 flex flex-wrap gap-2">
         <Button
           variant="outline"
           type="button"
           onClick={resetParameters}
           aria-label={localize('com_ui_reset_var', { 0: localize('com_ui_model_parameters') })}
-          className="flex flex-1 items-center justify-center gap-2 px-4 py-2 text-sm active:scale-[0.98] motion-reduce:transform-none"
+          className="flex flex-auto items-center justify-center gap-2 px-4 py-2 text-sm active:scale-[0.98] motion-reduce:transform-none"
         >
           <RotateCcw
             key={resetCount}
@@ -263,7 +270,7 @@ export default function Parameters() {
         <Button
           variant="default"
           onClick={openDialog}
-          className="flex flex-[2] items-center justify-center px-4 py-2 font-semibold"
+          className="flex flex-auto items-center justify-center px-4 py-2 font-semibold"
           type="button"
         >
           {localize('com_endpoint_save_as_preset')}
diff --git a/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
index 9c0a7ce2ad0..6bb3bdc0c05 100644
--- a/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
+++ b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
@@ -1,11 +1,6 @@
+import { ComponentTypes } from 'librechat-data-provider';
 import type { SettingDefinition } from 'librechat-data-provider';
-import {
-  availableParameters,
-  countModified,
-  groupParameters,
-  isModified,
-  isWideParameter,
-} from '../groups';
+import { countModified, groupParameters, hasControl, isModified, isWideParameter } from '../groups';
 
 const setting = (key: string, over: Partial<SettingDefinition> = {}): SettingDefinition =>
   ({ key, type: 'number', component: 'slider', ...over }) as SettingDefinition;
@@ -125,63 +120,38 @@ describe('isModified', () => {
   });
 });
 
-describe('availableParameters', () => {
-  const useResponsesApi = setting('useResponsesApi', { type: 'boolean', default: false });
-  const reasoningSummary = setting('reasoning_summary', {
-    dependsOn: [{ key: 'useResponsesApi', equals: true }],
-  });
-
-  /** The server drops the reasoning object without the Responses API, so a control
-   *  for it is a control for nothing. */
-  it('hides a parameter whose companion is off', () => {
-    const live = availableParameters([useResponsesApi, reasoningSummary], {});
-
-    expect(live.map((s) => s.key)).toEqual(['useResponsesApi']);
-  });
-
-  it('shows it as soon as the companion is on', () => {
-    const live = availableParameters([useResponsesApi, reasoningSummary], {
-      useResponsesApi: true,
-    });
-
-    expect(live.map((s) => s.key)).toEqual(['useResponsesApi', 'reasoning_summary']);
-  });
-
-  /** A companion the conversation never mentions still has whatever value the
-   *  provider will use, which is the definition's default. */
-  it('judges the companion by its effective value, not only by what was set', () => {
-    const thinking = setting('thinking', { type: 'boolean', default: true });
-    const budget = setting('thinkingBudget', {
-      dependsOn: [{ key: 'thinking', equals: true }],
-    });
-
-    expect(availableParameters([thinking, budget], {}).map((s) => s.key)).toEqual([
-      'thinking',
-      'thinkingBudget',
-    ]);
-    expect(availableParameters([thinking, budget], { thinking: false }).map((s) => s.key)).toEqual([
-      'thinking',
-    ]);
+describe('hasControl', () => {
+  it('keeps a choice with options to pick from', () => {
+    expect(
+      hasControl(setting('region', { component: ComponentTypes.Combobox, options: ['us-east-1'] })),
+    ).toBe(true);
+    expect(
+      hasControl(
+        setting('imageDetail', { component: ComponentTypes.Dropdown, options: ['auto', 'low'] }),
+      ),
+    ).toBe(true);
   });
 
-  /** An endpoint that drops the companion through `dropParams` leaves the dependent
-   *  parameter with nothing to attach to, and no way for the user to satisfy it. */
-  it('hides a parameter whose companion this endpoint does not offer', () => {
-    expect(availableParameters([reasoningSummary], { useResponsesApi: true })).toEqual([]);
+  /** Bedrock's region lists nothing of its own and takes the deployment's regions, so
+   *  with none configured its combobox renders nothing. */
+  it('drops a choice with nothing to choose', () => {
+    expect(hasControl(setting('region', { component: ComponentTypes.Combobox }))).toBe(false);
+    expect(
+      hasControl(setting('imageDetail', { component: ComponentTypes.Dropdown, options: [] })),
+    ).toBe(false);
   });
 
-  it('leaves a parameter with no dependency alone', () => {
-    expect(availableParameters([setting('temperature')], {}).map((s) => s.key)).toEqual([
-      'temperature',
-    ]);
+  it('keeps every other kind of control', () => {
+    expect(hasControl(setting('temperature', { component: ComponentTypes.Slider }))).toBe(true);
   });
 
-  it('empties a section rather than leaving it standing', () => {
-    const sections = groupParameters(
-      availableParameters([setting('temperature'), reasoningSummary], {}),
-    );
+  it('leaves no section standing around a dropped control', () => {
+    const settings = [
+      setting('temperature'),
+      setting('region', { component: ComponentTypes.Combobox }),
+    ].filter(hasControl);
 
-    expect(sections.map((section) => section.id)).toEqual(['sampling']);
+    expect(groupParameters(settings).map((section) => section.id)).toEqual(['sampling']);
   });
 });
 
diff --git a/client/src/components/SidePanel/Parameters/groups.ts b/client/src/components/SidePanel/Parameters/groups.ts
index 86b45359d73..1cfb1028903 100644
--- a/client/src/components/SidePanel/Parameters/groups.ts
+++ b/client/src/components/SidePanel/Parameters/groups.ts
@@ -145,54 +145,18 @@ export function groupParameters(parameters: SettingDefinition[]): ParameterSecti
 }
 
 /**
- * Whether a parameter can currently do anything.
- *
- * A definition may say it only rides along with another one, and the server honours
- * that whether or not the panel does: OpenAI's reasoning summary, mode and context
- * are dropped unless the Responses API is on, a thinking budget is read only while
- * thinking is enabled, a cache lifetime only while the cache is being written.
- * Offering those controls regardless is what makes the panel feel arbitrary: half of
- * it is inert, and nothing says which half.
- *
- * The condition is judged on the EFFECTIVE value, the conversation's if it has one
- * and the definition's default otherwise, because a parameter left untouched is
- * still whatever the provider will use.
+ * Whether a parameter's control has anything to show. A combobox or dropdown with no
+ * choices renders nothing, which Bedrock's region does when the deployment lists no
+ * regions; dropping it before grouping keeps a section from standing empty around it.
  */
-export function isAvailable(
-  setting: SettingDefinition,
-  conversation: Partial<TConversation> | Partial<TPreset> | null,
-  definitions: Map<string, SettingDefinition>,
-): boolean {
-  if (setting.dependsOn == null || setting.dependsOn.length === 0) {
+export function hasControl(setting: SettingDefinition): boolean {
+  if (
+    setting.component !== ComponentTypes.Combobox &&
+    setting.component !== ComponentTypes.Dropdown
+  ) {
     return true;
   }
-  return setting.dependsOn.every((dependency) => {
-    /** A dependency this endpoint does not offer cannot be satisfied by the panel,
-     *  so the parameter that needs it has nothing to attach to either. */
-    const target = definitions.get(dependency.key);
-    if (target == null) {
-      return false;
-    }
-    const raw = conversation?.[dependency.key as keyof typeof conversation];
-    const value = raw ?? target.default;
-    if (dependency.equals !== undefined) {
-      return value === dependency.equals;
-    }
-    return value != null && value !== false && value !== '';
-  });
-}
-
-/** The parameters this conversation can actually act on, in the order given. */
-export function availableParameters(
-  parameters: SettingDefinition[],
-  conversation: Partial<TConversation> | Partial<TPreset> | null,
-): SettingDefinition[] {
-  const definitions = new Map(
-    parameters.filter((setting) => setting != null).map((setting) => [setting.key, setting]),
-  );
-  return parameters.filter(
-    (setting) => setting != null && isAvailable(setting, conversation, definitions),
-  );
+  return (setting.items?.length ?? 0) > 0 || (setting.options?.length ?? 0) > 0;
 }
 
 /**
diff --git a/packages/data-provider/src/generate.ts b/packages/data-provider/src/generate.ts
index b387cc8d169..e12934ee4e6 100644
--- a/packages/data-provider/src/generate.ts
+++ b/packages/data-provider/src/generate.ts
@@ -49,27 +49,8 @@ export enum OptionTypes {
   Model = 'model',
   Custom = 'custom',
 }
-/**
- * A condition under which a parameter is worth offering at all.
- *
- * Some parameters only reach the provider alongside another one: OpenAI's reasoning
- * summary, mode and context travel inside the `reasoning` object the Responses API
- * takes and are dropped without it; Anthropic's thinking budget is read only while
- * thinking is enabled. Stating that here rather than in a panel keeps the rule with
- * the definition it belongs to, so a deployment defining its own parameters can
- * declare one too.
- */
-export interface SettingDependency {
-  /** The parameter this one rides along with. */
-  key: string;
-  /** The value it has to hold. Omitted, any value that is not nullish or false. */
-  equals?: number | boolean | string;
-}
-
 export interface SettingDefinition {
   key: string;
-  /** Conditions that must all hold, or this parameter does nothing and is not shown. */
-  dependsOn?: SettingDependency[];
   description?: string;
   type: 'number' | 'boolean' | 'string' | 'enum' | 'array';
   default?: number | boolean | string | string[];
diff --git a/packages/data-provider/src/parameterSettings.ts b/packages/data-provider/src/parameterSettings.ts
index 4910a455c97..ebc863eec59 100644
--- a/packages/data-provider/src/parameterSettings.ts
+++ b/packages/data-provider/src/parameterSettings.ts
@@ -303,7 +303,6 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_summary: {
     key: 'reasoning_summary',
-    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_summary',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_summary',
@@ -328,7 +327,6 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_mode: {
     key: 'reasoning_mode',
-    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_mode',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_mode',
@@ -347,7 +345,6 @@ const openAIParams: Record<string, SettingDefinition> = {
   },
   reasoning_context: {
     key: 'reasoning_context',
-    dependsOn: [{ key: 'useResponsesApi', equals: true }],
     label: 'com_endpoint_reasoning_context',
     labelCode: true,
     description: 'com_endpoint_openai_reasoning_context',
@@ -471,7 +468,6 @@ const anthropic: Record<string, SettingDefinition> = {
   },
   promptCacheTtl: {
     key: 'promptCacheTtl',
-    dependsOn: [{ key: 'promptCache', equals: true }],
     label: 'com_endpoint_prompt_cache_ttl',
     labelCode: true,
     description: 'com_endpoint_anthropic_prompt_cache_ttl',
@@ -501,7 +497,6 @@ const anthropic: Record<string, SettingDefinition> = {
   },
   thinkingBudget: {
     key: 'thinkingBudget',
-    dependsOn: [{ key: 'thinking', equals: true }],
     label: 'com_endpoint_thinking_budget',
     labelCode: true,
     description: 'com_endpoint_anthropic_thinking_budget',
@@ -635,7 +630,6 @@ const bedrock: Record<string, SettingDefinition> = {
   },
   promptCacheTtl: {
     key: 'promptCacheTtl',
-    dependsOn: [{ key: 'promptCache', equals: true }],
     label: 'com_endpoint_prompt_cache_ttl',
     labelCode: true,
     description: 'com_endpoint_anthropic_prompt_cache_ttl',
@@ -786,7 +780,6 @@ const google: Record<string, SettingDefinition> = {
   },
   thinkingBudget: {
     key: 'thinkingBudget',
-    dependsOn: [{ key: 'thinking', equals: true }],
     label: 'com_endpoint_thinking_budget',
     labelCode: true,
     description: 'com_endpoint_google_thinking_budget',

From 36561415553562cba4c757f8825b468d370d8f82 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 27 Sep 2026 23:09:40 +0200
Subject: [PATCH 3/6] test(e2e): Scenarios for the grouped model parameters
 panel

---
 .../scenarios/grouped-model-params.spec.ts    | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 e2e/specs/mock/scenarios/grouped-model-params.spec.ts

diff --git a/e2e/specs/mock/scenarios/grouped-model-params.spec.ts b/e2e/specs/mock/scenarios/grouped-model-params.spec.ts
new file mode 100644
index 00000000000..738c843ad7e
--- /dev/null
+++ b/e2e/specs/mock/scenarios/grouped-model-params.spec.ts
@@ -0,0 +1,91 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { MOCK_ENDPOINTS, NEW_CHAT_PATH, selectMockEndpoint } from '../helpers';
+import { openPanel } from './panels';
+
+/** Mock Provider A takes Anthropic's parameter set, which carries the thinking and
+ *  prompt cache controls this panel groups. */
+async function openParameters(page: Page): Promise<void> {
+  await page.goto(NEW_CHAT_PATH, { timeout: 10000 });
+  await selectMockEndpoint(page, MOCK_ENDPOINTS[0]);
+  await openPanel(page, 'parameters', 'Parameters');
+  await expect(page.getByRole('region', { name: 'Sampling' })).toBeVisible();
+}
+
+test.describe('grouped model parameters', () => {
+  test('the parameters are filed under headings that count what this chat changed @scenario:params-grouped-with-change-count', async ({
+    page,
+  }) => {
+    await openParameters(page);
+
+    const reasoning = page.getByRole('region', { name: 'Reasoning' });
+    await expect(reasoning).toBeVisible();
+    await expect(page.getByRole('region', { name: 'Context' })).toBeVisible();
+    await expect(reasoning.getByRole('switch', { name: /Thinking/ }).first()).toBeVisible();
+    await expect(reasoning.getByText(/^\d+$/)).toHaveCount(0);
+
+    await reasoning
+      .getByRole('switch', { name: /^Thinking/ })
+      .first()
+      .click();
+    await expect(reasoning.getByText(/^1$/)).toBeVisible();
+  });
+
+  test('a parameter stays on screen when the toggle it works with is off @scenario:params-stay-visible-when-companion-off', async ({
+    page,
+  }) => {
+    await openParameters(page);
+
+    const reasoning = page.getByRole('region', { name: 'Reasoning' });
+    const thinking = reasoning.getByRole('switch', { name: /^Thinking/ }).first();
+    await expect(thinking).toHaveAttribute('aria-checked', 'true');
+    await thinking.click();
+    await expect(thinking).toHaveAttribute('aria-checked', 'false');
+
+    await expect(reasoning.getByText('Thinking Budget')).toBeVisible();
+  });
+
+  test('Reset and Save As Preset stay inside the panel in a language with long labels @scenario:params-actions-fit-long-labels', async ({
+    page,
+  }) => {
+    /* The endpoint is chosen in English, where the model selector's label is known,
+     * and the chat keeps it across the reload into Spanish. */
+    await openParameters(page);
+    await page.evaluate(() => window.localStorage.setItem('lang', 'es-ES'));
+    await page.reload();
+    /* The shared sidebar helpers read English labels, so the Spanish shell is driven
+     * by its own. */
+    if ((page.viewportSize()?.width ?? 1280) < 768) {
+      await page.getByRole('button', { name: 'Abrir barra lateral' }).first().click();
+      await page.getByTestId('panel-switcher-button').click();
+      await page.getByRole('menuitemcheckbox', { name: 'Parámetros', exact: true }).click();
+    } else {
+      const trigger = page.getByTestId('nav-panel-parameters');
+      if ((await trigger.getAttribute('aria-pressed')) !== 'true') {
+        await trigger.click();
+      }
+    }
+    const save = page.getByRole('button', { name: 'Guardar como configuración preestablecida' });
+    await expect(save).toBeVisible();
+
+    /* The finding is the action row running past the panel, so the row and the
+     * button's own label are what is measured. */
+    const row = save.locator('xpath=..');
+    const measured = await row.evaluate((element) => {
+      const button = element.lastElementChild as HTMLElement;
+      const panel = element.parentElement as HTMLElement;
+      const rowBox = element.getBoundingClientRect();
+      const panelBox = panel.getBoundingClientRect();
+      return {
+        rowScroll: element.scrollWidth,
+        rowClient: element.clientWidth,
+        buttonScroll: button.scrollWidth,
+        buttonClient: button.clientWidth,
+        rowRight: rowBox.right,
+        panelRight: panelBox.right,
+      };
+    });
+    expect(measured.rowScroll, JSON.stringify(measured)).toBeLessThanOrEqual(measured.rowClient);
+    expect(measured.rowRight, JSON.stringify(measured)).toBeLessThanOrEqual(measured.panelRight);
+  });
+});

From 10b5ffd66cebcd414755c6c35d42e1b076ff81a2 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 27 Sep 2026 23:26:08 +0200
Subject: [PATCH 4/6] fix(client): Wrap a parameter action label longer than
 the panel

A Spanish Save As Preset label measures 338px on its own against a 282px
row, so stacking the two actions still ran it past the panel. The labels
now wrap inside their buttons.
---
 client/src/components/SidePanel/Parameters/Panel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index e969ba38f9d..aade0e3ff2c 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -247,15 +247,15 @@ export default function Parameters() {
           </section>
         );
       })}
-      {/* The two share a row while their labels fit and stack when a translation is
-          too long for the panel. */}
+      {/* The two share a row while their labels fit, stack when a translation is too
+          long for the panel, and a label longer than the panel itself wraps. */}
       <div className="mt-5 flex flex-wrap gap-2">
         <Button
           variant="outline"
           type="button"
           onClick={resetParameters}
           aria-label={localize('com_ui_reset_var', { 0: localize('com_ui_model_parameters') })}
-          className="flex flex-auto items-center justify-center gap-2 px-4 py-2 text-sm active:scale-[0.98] motion-reduce:transform-none"
+          className="flex h-auto min-h-9 flex-auto items-center justify-center gap-2 px-4 py-2 text-sm whitespace-normal active:scale-[0.98] motion-reduce:transform-none"
         >
           <RotateCcw
             key={resetCount}
@@ -270,7 +270,7 @@ export default function Parameters() {
         <Button
           variant="default"
           onClick={openDialog}
-          className="flex flex-auto items-center justify-center px-4 py-2 font-semibold"
+          className="flex h-auto min-h-9 flex-auto items-center justify-center px-4 py-2 font-semibold whitespace-normal"
           type="button"
         >
           {localize('com_endpoint_save_as_preset')}

From d4054065508da274c05d07b421fe07f19bdc2bfd Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 28 Sep 2026 00:29:37 +0200
Subject: [PATCH 5/6] fix(client): Scope stretched controls to the panel and
 say what its counts mean

The shared parameter controls stretched to their parent's height, which
the preset editors' tall columns turned into labels far above their
fields; the panel's cells now stretch their controls instead. The change
count beside a heading is read out as a number of changed settings, and
clearing a default a deployment configured counts as a change.
---
 .../SidePanel/Parameters/DynamicCheckbox.tsx  |  2 +-
 .../SidePanel/Parameters/DynamicCombobox.tsx  |  2 +-
 .../SidePanel/Parameters/DynamicDropdown.tsx  |  2 +-
 .../SidePanel/Parameters/DynamicInput.tsx     |  2 +-
 .../SidePanel/Parameters/DynamicSlider.tsx    |  2 +-
 .../SidePanel/Parameters/DynamicSwitch.tsx    |  2 +-
 .../SidePanel/Parameters/DynamicTags.tsx      |  2 +-
 .../SidePanel/Parameters/DynamicTextarea.tsx  |  2 +-
 .../SidePanel/Parameters/OptionHover.tsx      |  2 +-
 .../components/SidePanel/Parameters/Panel.tsx | 30 ++++++++++++++++---
 .../Parameters/__tests__/groups.spec.ts       | 17 +++++++++++
 .../components/SidePanel/Parameters/groups.ts | 14 +++++++--
 client/src/locales/en/translation.json        |  2 ++
 13 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
index b5720c9cf44..4af94f8e162 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
@@ -51,7 +51,7 @@ function DynamicCheckbox({
 
   return (
     <div
-      className={`flex h-full flex-col items-center justify-start gap-6 ${
+      className={`flex flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
index 1867636cc26..80d3d1833ac 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
@@ -72,7 +72,7 @@ function DynamicCombobox({
   return (
     <div
       className={cn(
-        'flex h-full flex-col items-center justify-start gap-6',
+        'flex flex-col items-center justify-start gap-6',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
index 510f7a1f4fe..c42108be52a 100644
--- a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
@@ -66,7 +66,7 @@ function DynamicDropdown({
   return (
     <div
       className={cn(
-        'flex h-full flex-col items-center justify-start gap-6',
+        'flex flex-col items-center justify-start gap-6',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicInput.tsx b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
index c73448c1f4b..88f4745f528 100644
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
@@ -165,7 +165,7 @@ function DynamicInput({
 
   return (
     <div
-      className={`flex h-full flex-col items-center justify-start gap-6 ${
+      className={`flex flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
index 4506a8a39dd..262811ab6cf 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
@@ -166,7 +166,7 @@ function DynamicSlider({
   return (
     <div
       className={cn(
-        'flex h-full flex-col items-center justify-start gap-2',
+        'flex flex-col items-center justify-start gap-2',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
index 203e4e11acb..be293094004 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
@@ -46,7 +46,7 @@ function DynamicSwitch({
 
   return (
     <div
-      className={`flex h-full flex-col items-center justify-start gap-6 ${
+      className={`flex flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicTags.tsx b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
index 928e8f35184..767483e6201 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
@@ -101,7 +101,7 @@ function DynamicTags({
 
   return (
     <div
-      className={`flex h-full flex-col items-center justify-start gap-6 ${
+      className={`flex flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
diff --git a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
index a01af8efd61..a673c9a0e00 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
@@ -49,7 +49,7 @@ function DynamicTextarea({
 
   return (
     <div
-      className={`flex h-full flex-col items-center justify-start gap-6 ${
+      className={`flex flex-col items-center justify-start gap-6 ${
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
       }`}
     >
diff --git a/client/src/components/SidePanel/Parameters/OptionHover.tsx b/client/src/components/SidePanel/Parameters/OptionHover.tsx
index be23d662971..d995ce6c887 100644
--- a/client/src/components/SidePanel/Parameters/OptionHover.tsx
+++ b/client/src/components/SidePanel/Parameters/OptionHover.tsx
@@ -29,7 +29,7 @@ function OptionHover({
     <HoverCardPortal>
       <HoverCardContent side={side} className={`z-[999] w-80 ${className}`} sideOffset={sideOffset}>
         <div className="space-y-2">
-          <p className="whitespace-pre-wrap text-sm text-text-secondary">{text}</p>
+          <p className="text-text-secondary text-sm whitespace-pre-wrap">{text}</p>
         </div>
       </HoverCardContent>
     </HoverCardPortal>
diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index aade0e3ff2c..2a0e98b27c8 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -215,9 +215,22 @@ export default function Parameters() {
               {/* Where this conversation's own answers are, which is what the owner
                   scans for before reaching for Reset. */}
               {changed > 0 && (
-                <span className="bg-surface-tertiary text-text-primary shrink-0 rounded-full px-1.5 text-xs font-normal tracking-normal normal-case tabular-nums">
-                  {changed}
-                </span>
+                <>
+                  <span
+                    aria-hidden="true"
+                    className="bg-surface-tertiary text-text-primary shrink-0 rounded-full px-1.5 text-xs font-normal tracking-normal normal-case tabular-nums"
+                  >
+                    {changed}
+                  </span>
+                  <span className="sr-only">
+                    {localize(
+                      changed === 1
+                        ? 'com_ui_params_changed_count_one'
+                        : 'com_ui_params_changed_count',
+                      { count: changed },
+                    )}
+                  </span>
+                </>
               )}
             </h3>
             <div className="grid grid-cols-2 gap-x-3 gap-y-2.5">
@@ -231,8 +244,17 @@ export default function Parameters() {
                 /** The cell owns the span, not the control. The definitions carry a
                  *  columnSpan written for the four-column preset dialog, which says
                  *  nothing about a panel this narrow. */
+                /** The cell stretches its control to the row, so a pair whose labels
+                 *  wrap differently still lines their inputs up. Applied here rather
+                 *  than in the shared controls, which the preset editors reuse. */
                 return (
-                  <div key={key} className={isWideParameter(setting) ? 'col-span-2' : 'col-span-1'}>
+                  <div
+                    key={key}
+                    className={cn(
+                      '*:h-full',
+                      isWideParameter(setting) ? 'col-span-2' : 'col-span-1',
+                    )}
+                  >
                     <Component
                       settingKey={key}
                       defaultValue={defaultValue}
diff --git a/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
index 6bb3bdc0c05..80ff81542a4 100644
--- a/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
+++ b/client/src/components/SidePanel/Parameters/__tests__/groups.spec.ts
@@ -120,6 +120,23 @@ describe('isModified', () => {
   });
 });
 
+describe('isModified with an operator default', () => {
+  /** A deployment can give a text or tags parameter its own default, and clearing it is
+   *  a change this conversation made. */
+  it('counts clearing a nonempty default as a change', () => {
+    expect(isModified(setting('promptPrefix', { default: 'Be brief' }), { promptPrefix: '' })).toBe(
+      true,
+    );
+    expect(isModified(setting('stop', { default: ['END'] }), { stop: [] })).toBe(true);
+  });
+
+  it('leaves an empty value untouched when the default is empty too', () => {
+    expect(isModified(setting('promptPrefix'), { promptPrefix: '' })).toBe(false);
+    expect(isModified(setting('stop', { default: [] }), { stop: [] })).toBe(false);
+    expect(isModified(setting('promptPrefix', { default: 'Be brief' }), {})).toBe(false);
+  });
+});
+
 describe('hasControl', () => {
   it('keeps a choice with options to pick from', () => {
     expect(
diff --git a/client/src/components/SidePanel/Parameters/groups.ts b/client/src/components/SidePanel/Parameters/groups.ts
index 1cfb1028903..71b8abf1016 100644
--- a/client/src/components/SidePanel/Parameters/groups.ts
+++ b/client/src/components/SidePanel/Parameters/groups.ts
@@ -169,13 +169,21 @@ export function isModified(
   conversation: Partial<TConversation> | Partial<TPreset> | null,
 ): boolean {
   const value = conversation?.[setting.key as keyof typeof conversation];
-  if (value == null || value === '') {
+  if (value == null) {
     return false;
   }
+  const fallback = setting.default;
+  /** Clearing a field reads as untouched only when there was nothing to clear. */
+  if (value === '') {
+    return fallback != null && fallback !== '';
+  }
   if (Array.isArray(value)) {
-    return value.length > 0 && JSON.stringify(value) !== JSON.stringify(setting.default);
+    if (value.length === 0) {
+      return Array.isArray(fallback) && fallback.length > 0;
+    }
+    return JSON.stringify(value) !== JSON.stringify(fallback);
   }
-  return value !== setting.default;
+  return value !== fallback;
 }
 
 export function countModified(
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index f044120df93..38d803a40d6 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1993,6 +1993,8 @@
   "com_ui_output": "Output",
   "com_ui_page": "Page",
   "com_ui_parameters": "Parameters",
+  "com_ui_params_changed_count": "{{count}} changed settings",
+  "com_ui_params_changed_count_one": "{{count}} changed setting",
   "com_ui_params_identity": "Identity",
   "com_ui_params_limits": "Limits",
   "com_ui_params_reasoning": "Reasoning",

From e6d7b228d600e5a9d01310f1aee7981a3a274022 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 28 Sep 2026 00:29:52 +0200
Subject: [PATCH 6/6] test(e2e): Scenario for the preset dialog's label spacing

---
 .../scenarios/grouped-model-params.spec.ts    | 80 ++++++++++++++++++-
 1 file changed, 78 insertions(+), 2 deletions(-)

diff --git a/e2e/specs/mock/scenarios/grouped-model-params.spec.ts b/e2e/specs/mock/scenarios/grouped-model-params.spec.ts
index 738c843ad7e..6a5e472f487 100644
--- a/e2e/specs/mock/scenarios/grouped-model-params.spec.ts
+++ b/e2e/specs/mock/scenarios/grouped-model-params.spec.ts
@@ -1,13 +1,19 @@
+import { randomUUID } from 'node:crypto';
 import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import { MOCK_ENDPOINTS, NEW_CHAT_PATH, selectMockEndpoint } from '../helpers';
+import type { MockEndpoint } from '../helpers';
 import { openPanel } from './panels';
+import { withMongo } from '../db';
 
 /** Mock Provider A takes Anthropic's parameter set, which carries the thinking and
  *  prompt cache controls this panel groups. */
-async function openParameters(page: Page): Promise<void> {
+async function openParameters(
+  page: Page,
+  endpoint: MockEndpoint = MOCK_ENDPOINTS[0],
+): Promise<void> {
   await page.goto(NEW_CHAT_PATH, { timeout: 10000 });
-  await selectMockEndpoint(page, MOCK_ENDPOINTS[0]);
+  await selectMockEndpoint(page, endpoint);
   await openPanel(page, 'parameters', 'Parameters');
   await expect(page.getByRole('region', { name: 'Sampling' })).toBeVisible();
 }
@@ -29,6 +35,8 @@ test.describe('grouped model parameters', () => {
       .first()
       .click();
     await expect(reasoning.getByText(/^1$/)).toBeVisible();
+    /* The numeral is decoration; the heading says what it counts. */
+    await expect(page.getByRole('region', { name: 'Reasoning 1 changed setting' })).toBeVisible();
   });
 
   test('a parameter stays on screen when the toggle it works with is off @scenario:params-stay-visible-when-companion-off', async ({
@@ -45,6 +53,74 @@ test.describe('grouped model parameters', () => {
     await expect(reasoning.getByText('Thinking Budget')).toBeVisible();
   });
 
+  test('the preset editor keeps each label beside its control @scenario:preset-dialog-controls-keep-labels-close', async ({
+    page,
+  }) => {
+    /* The harness defines model specs, which turn the presets menu off; the editor that
+     * reuses these controls sits behind it. */
+    await page.route(
+      (url) => url.pathname === '/api/config',
+      async (route) => {
+        const response = await route.fetch();
+        const body = await response.json();
+        await route.fulfill({
+          response,
+          json: { ...body, interface: { ...body.interface, presets: true, modelSelect: true } },
+        });
+      },
+    );
+    const title = `Params preset ${randomUUID().slice(0, 8)}`;
+    try {
+      /* Mock Provider B is a plain custom endpoint, so its preset editor is the OpenAI
+       * one, whose left column holds far fewer controls than its right. */
+      await openParameters(page, MOCK_ENDPOINTS[1]);
+      await page.getByRole('button', { name: 'Save As Preset' }).click();
+      const saveDialog = page.getByRole('dialog');
+      await saveDialog.getByRole('textbox').first().fill(title);
+      await saveDialog.getByRole('button', { name: 'Save' }).click();
+      await expect(saveDialog).toBeHidden();
+
+      /* On a phone the drawer holding the panel covers the header's presets button. */
+      if ((page.viewportSize()?.width ?? 1280) < 768) {
+        await page.getByTestId('close-sidebar-button').click();
+      }
+      await page.getByTestId('presets-button').first().click();
+      const presets = page.getByRole('dialog', { name: 'Presets' });
+      const item = presets.getByRole('button', { name: new RegExp(`^${title}`) });
+      /* Each run has its own database, so this preset is the only one listed. */
+      await item.hover();
+      await presets.getByRole('button', { name: 'Edit' }).first().click();
+      const editor = page.getByRole('dialog').filter({ has: page.getByRole('slider') });
+      await expect(editor.getByRole('slider').first()).toBeVisible();
+
+      /* A control stretched to its column's height would push its field far below its
+       * label. */
+      /* Each control's label and field share one hover card trigger; the field is its
+       * last child, whatever kind of control it is. */
+      const gaps = await editor.evaluate((element) =>
+        Array.from(element.querySelectorAll('label'))
+          .map((label) => {
+            const trigger = label.closest('[data-state]');
+            const field = trigger?.lastElementChild;
+            if (trigger == null || field == null || field.contains(label)) {
+              return null;
+            }
+            return {
+              label: label.textContent,
+              gap: field.getBoundingClientRect().top - label.getBoundingClientRect().bottom,
+            };
+          })
+          .filter((entry) => entry != null),
+      );
+      expect(gaps.length, JSON.stringify(gaps)).toBeGreaterThan(3);
+      for (const entry of gaps) {
+        expect(entry?.gap, JSON.stringify(entry)).toBeLessThan(48);
+      }
+    } finally {
+      await withMongo((db) => db.collection('presets').deleteMany({ title }));
+    }
+  });
+
   test('Reset and Save As Preset stay inside the panel in a language with long labels @scenario:params-actions-fit-long-labels', async ({
     page,
   }) => {