📜 chore: Bump deps, fix TOC navigation, add Click UI tooling, code splitting

.github/workflows/ci.yml

@@ -51,3 +51,4 @@ jobs:
         run: bun run test
         env:
           NODE_ENV: development
+          SESSION_SECRET: ci-test-secret-do-not-use-in-production

eslint.config.js

@@ -2,6 +2,7 @@ import tsParser from '@typescript-eslint/parser';
 import tsPlugin from '@typescript-eslint/eslint-plugin';
 import importPlugin from 'eslint-plugin-import-x';
 import tailwindCanonicalClasses from 'eslint-plugin-tailwind-canonical-classes';
+import clickUiPlugin from 'eslint-plugin-click-ui';
 
 export default [
   {
@@ -16,6 +17,7 @@ export default [
       '@typescript-eslint': tsPlugin,
       'import-x': importPlugin,
       'tailwind-canonical-classes': tailwindCanonicalClasses,
+      'click-ui': clickUiPlugin,
     },
     rules: {
       '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': false }],
@@ -48,6 +50,9 @@ export default [
         'warn',
         { cssPath: './src/styles.css' },
       ],
+      ...clickUiPlugin.configs.recommended.rules,
+      'click-ui/require-provider': 'off',
+      'click-ui/select-requires-options': 'off',
     },
   },
 ];

package.json

@@ -40,12 +40,13 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "input-otp": "^1.4.2",
     "js-yaml": "^4.1.1",
-    "librechat-data-provider": "^0.8.406",
+    "librechat-data-provider": "^0.8.407",
     "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-i18next": "^16.5.4",
     "react-movable": "^3.4.1",
+    "react-textarea-autosize": "^8.5.9",
     "styled-components": "^6.3.11",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.6"
@@ -67,6 +68,7 @@
     "@typescript-eslint/parser": "^8.57.1",
     "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^10.1.0",
+    "eslint-plugin-click-ui": "file:./tools/eslint-plugin-click-ui",
     "eslint-plugin-import-x": "^4.16.2",
     "eslint-plugin-tailwind-canonical-classes": "^1.3.1",
     "jsdom": "^27.0.0",

src/components/PasswordInput.tsx

@@ -41,6 +41,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
 
   return (
     <div ref={wrapperRef} className="password-field-a11y w-full">
+      {/* eslint-disable-next-line click-ui/form-controlled-components -- value/onChange passed via ...props */}
       <PasswordField ref={ref} {...props} />
     </div>
   );

src/components/access/GroupsTab.tsx

@@ -88,6 +88,7 @@ export function GroupsTab({ onCreateGroup }: t.GroupsTabProps) {
         <Button
           type="secondary"
           iconLeft="plus"
+          label={localize('com_access_create_group')}
           onClick={onCreateGroup}
           disabled={!canManage}
           aria-disabled={!canManage || undefined}
@@ -96,9 +97,7 @@ export function GroupsTab({ onCreateGroup }: t.GroupsTabProps) {
               ? localize('com_cap_no_permission', { cap: SystemCapabilities.MANAGE_GROUPS })
               : undefined
           }
-        >
-          {localize('com_access_create_group')}
-        </Button>
+        />
       </div>
 
       {groups.length === 0 ? (

src/components/access/RolesTab.tsx

@@ -77,6 +77,7 @@ export function RolesTab({ onCreateRole }: t.RolesTabProps) {
         <Button
           type="secondary"
           iconLeft="plus"
+          label={localize('com_access_create_role')}
           onClick={onCreateRole}
           disabled={!canManage}
           aria-disabled={!canManage || undefined}
@@ -85,9 +86,7 @@ export function RolesTab({ onCreateRole }: t.RolesTabProps) {
               ? localize('com_cap_no_permission', { cap: SystemCapabilities.MANAGE_ROLES })
               : undefined
           }
-        >
-          {localize('com_access_create_role')}
-        </Button>
+        />
       </div>
 
       {filtered.length === 0 ? (

src/components/configuration/ConfigPage.tsx

@@ -20,6 +20,7 @@ import {
   flattenObject,
   unflattenObject,
   serializeKVPairs,
+  deepSerializeKVPairs,
   cn,
   normalizeImportConfig,
   hasConfigCapability,
@@ -62,6 +63,7 @@ const profileMapOptions = (fieldPaths: string[]) =>
         (r: { profileMap: Record<string, string[]> }) => r.profileMap,
       ),
     enabled: fieldPaths.length > 0,
+    staleTime: 60_000,
   });
 
 function resolvedConfigOptions(scope: t.ScopeSelection) {
@@ -77,6 +79,7 @@ function resolvedConfigOptions(scope: t.ScopeSelection) {
         },
       }),
     enabled: principalType != null && principalId != null,
+    staleTime: 60_000,
   });
 }
 
@@ -267,7 +270,32 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
     return unflattenObject(scopeResolvedValues) as Record<string, t.ConfigValue>;
   }, [isEditingScope, scopeResolvedValues]);
 
-  const activeConfigValues = isEditingScope ? scopeConfigValues : configValues;
+  const baseActiveConfigValues = isEditingScope ? scopeConfigValues : configValues;
+
+  const activeConfigValues = useMemo(() => {
+    if (!baseActiveConfigValues) return baseActiveConfigValues;
+    const indexedEdits = Object.entries(editedValues).filter(([k]) => /\.\d+$/.test(k));
+    if (indexedEdits.length === 0) return baseActiveConfigValues;
+    const merged = { ...baseActiveConfigValues };
+    for (const [path, value] of indexedEdits) {
+      const segments = path.split('.');
+      const index = Number(segments.pop()!);
+      const arrayPath = segments;
+      let parent: Record<string, t.ConfigValue> = merged;
+      for (let i = 0; i < arrayPath.length - 1; i++) {
+        const seg = arrayPath[i];
+        if (parent[seg] && typeof parent[seg] === 'object' && !Array.isArray(parent[seg])) {
+          parent[seg] = { ...(parent[seg] as Record<string, t.ConfigValue>) };
+          parent = parent[seg] as Record<string, t.ConfigValue>;
+        } else break;
+      }
+      const lastSeg = arrayPath[arrayPath.length - 1];
+      const arr = Array.isArray(parent[lastSeg]) ? [...(parent[lastSeg] as t.ConfigValue[])] : [];
+      arr[index] = value;
+      parent[lastSeg] = arr;
+    }
+    return merged;
+  }, [baseActiveConfigValues, editedValues]);
 
   const scopeConfiguredPaths = useMemo(() => {
     if (!scopeChangedPaths) return new Set<string>();
@@ -354,7 +382,16 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
             delete next[path];
             return next;
           }
-          return { ...prev, [path]: value };
+          const next = { ...prev, [path]: value };
+          if (Array.isArray(value)) {
+            const prefix = `${path}.`;
+            for (const k of Object.keys(next)) {
+              if (k.startsWith(prefix) && /\.\d+$/.test(k)) delete next[k];
+            }
+          }
+          const indexMatch = /^(.+)\.\d+$/.exec(path);
+          if (indexMatch) delete next[indexMatch[1]];
+          return next;
         });
       });
     },
@@ -435,7 +472,10 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
 
     const saves = touched
       .filter((p) => editedValues[p] !== undefined)
-      .map((p) => ({ fieldPath: p, value: serializeKVPairs(editedValues[p]) }));
+      .map((p) => ({
+        fieldPath: p,
+        value: /\.\d+$/.test(p) ? deepSerializeKVPairs(editedValues[p]) : serializeKVPairs(editedValues[p]),
+      }));
     const resets = touched.filter((p) => editedValues[p] === undefined);
 
     setSaving(true);
@@ -504,11 +544,29 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
   const serializedEditedValues = useMemo(() => {
     const result: t.FlatConfigMap = {};
     for (const [k, v] of Object.entries(editedValues)) {
-      result[k] = serializeKVPairs(v);
+      result[k] = /\.\d+$/.test(k) ? deepSerializeKVPairs(v) : serializeKVPairs(v);
     }
     return result;
   }, [editedValues]);
 
+  const originalValuesForDialog = useMemo(() => {
+    const baseline = isEditingScope ? scopeBaseline : flatBaseline;
+    const result: t.FlatConfigMap = { ...baseline };
+    for (const path of Object.keys(editedValues)) {
+      if (path in result) continue;
+      const segments = path.split('.');
+      let current: t.ConfigValue = configValues;
+      for (const seg of segments) {
+        if (current == null || typeof current !== 'object') { current = undefined; break; }
+        current = Array.isArray(current)
+          ? (current as t.ConfigValue[])[Number(seg)]
+          : (current as Record<string, t.ConfigValue>)[seg];
+      }
+      if (current !== undefined) result[path] = current;
+    }
+    return result;
+  }, [editedValues, flatBaseline, isEditingScope, scopeBaseline, configValues]);
+
   const [importSuccessMessage, setImportSuccessMessage] = useState<string | null>(null);
 
   const showImportSuccess = useCallback((message?: string) => {
@@ -844,7 +902,7 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
       <ConfirmSaveDialog
         open={confirmSaveOpen}
         editedValues={serializedEditedValues}
-        originalValues={isEditingScope ? scopeBaseline : flatBaseline}
+        originalValues={originalValuesForDialog}
         saving={saving}
         error={saveError}
         onConfirm={handleConfirmSave}

src/components/configuration/ConfigTabContent.tsx

@@ -304,6 +304,8 @@ export function ConfigTabContent({
             {group.sections.map((section) => (
               <MultiAccordion.Item
                 key={section.id}
+                id={`section-${section.id}`}
+                data-section-id={`section-${section.id}`}
                 value={section.id}
                 title={localize(section.titleKey)}
               >

src/components/configuration/ConfigTableOfContents.tsx

@@ -98,14 +98,30 @@ export const ConfigTableOfContents = memo(function ConfigTableOfContents({
         return true;
       };
 
-      const cardExpanded = existing ? expandCard(existing) : false;
+      // Expand collapsed Radix accordion items (MultiAccordion.Item).
+      const expandAccordionItem = (el: HTMLElement): boolean => {
+        if (el.getAttribute('data-state') !== 'closed') return false;
+        const trigger = el.querySelector<HTMLElement>(':scope > button[data-state="closed"]');
+        if (trigger) {
+          trigger.click();
+          return true;
+        }
+        return false;
+      };
+
+      const cardExpanded = existing
+        ? expandCard(existing) || expandAccordionItem(existing)
+        : false;
       const needsSettle = parentExpanded || needsExpand || cardExpanded;
 
       if (needsSettle) {
         scrollTimerRef.current = setTimeout(() => {
           expandAncestors(id);
           const el = document.getElementById(id) ?? existing;
-          if (el) expandCard(el);
+          if (el) {
+            expandCard(el);
+            expandAccordionItem(el);
+          }
           setTimeout(() => {
             const target = document.getElementById(id) ?? existing;
             if (target) scrollToEl(target);

src/components/configuration/ConfirmSaveDialog.tsx

@@ -66,6 +66,16 @@ export function ConfirmSaveDialog({
   );
 }
 
+function resolvePathLabel(path: string, newValue: t.ConfigValue, oldValue: t.ConfigValue): string {
+  const match = /^(.+)\.(\d+)$/.exec(path);
+  if (!match) return path;
+  const val = (newValue ?? oldValue) as Record<string, t.ConfigValue> | undefined;
+  const name = val && typeof val === 'object' && !Array.isArray(val)
+    ? (val as Record<string, string>).name
+    : undefined;
+  return name ? `${match[1]}[${match[2]}] (${name})` : `${match[1]}[${match[2]}]`;
+}
+
 function ChangeCard({
   path,
   oldValue,
@@ -79,12 +89,13 @@ function ChangeCard({
   const notSet = localize('com_config_field_not_set');
   const isRemoval = newValue === undefined || newValue === null;
   const isAddition = oldValue === undefined || oldValue === null;
+  const displayPath = resolvePathLabel(path, newValue, oldValue);
 
   return (
     <div className="rounded-lg border border-(--cui-color-stroke-default) bg-(--cui-color-background-muted)">
       <div className="flex items-center gap-2 border-b border-(--cui-color-stroke-default) px-3 py-2">
         <span className="font-mono text-xs font-medium text-(--cui-color-text-default)">
-          {path}
+          {displayPath}
         </span>
         {isAddition && (
           <Badge text={localize('com_config_field_added')} state="success" size="sm" />

src/components/configuration/FieldRenderer.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@clickhouse/click-ui';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import type { ReactNode } from 'react';
 import type * as t from '@/types';
 import {
@@ -10,7 +10,7 @@ import {
   getControlType,
   getEnumOptions,
   hasDescendant,
-  inferKVType,
+  toKVPair,
   isStringLikeItemType,
   splitUnionTypes,
 } from './utils';
@@ -66,12 +66,18 @@ function ArrayObjectNestedGroup({
   const addTriggerRef = useRef<(() => void) | null>(null);
   const handleAdd = disabled ? undefined : () => addTriggerRef.current?.();
 
+  const handleEntryChange = useCallback(
+    (index: number, value: t.ConfigValue) => onChange(`${path}.${index}`, value),
+    [onChange, path],
+  );
+
   const arrayField = (
     <ArrayObjectField
       id={fieldId}
       value={currentValue}
       fields={field.children ?? []}
       onChange={(v) => onChange(path, v)}
+      onEntryChange={handleEntryChange}
       disabled={disabled}
       hideAddButton
       addTriggerRef={addTriggerRef}
@@ -413,11 +419,7 @@ export function SingleFieldRenderer({
           typeof currentValue === 'object' && currentValue !== null
             ? (currentValue as Record<string, t.ConfigValue>)
             : {},
-        ).map(([k, v]) => ({
-          key: k,
-          value: typeof v === 'string' ? v : JSON.stringify(v ?? ''),
-          valueType: inferKVType(v),
-        }));
+        ).map(([k, v]) => toKVPair(k, v));
 
     return (
       <ConfigRow
@@ -432,6 +434,7 @@ export function SingleFieldRenderer({
           pairs={pairs}
           onChange={(newPairs) => onChange(path, newPairs)}
           disabled={disabled}
+          valueTypes={field.recordValueKVTypes}
           aria-label={fieldLabel}
         />
       </ConfigRow>
@@ -1071,23 +1074,21 @@ export function renderInlineField(
   }
 
   if (controlType === 'record') {
-    const pairs: { key: string; value: string }[] = Array.isArray(fieldValue)
-      ? (fieldValue as { key: string; value: string }[])
+    const pairs: t.KeyValuePair[] = Array.isArray(fieldValue)
+      ? (fieldValue as t.KeyValuePair[])
       : Object.entries(
           typeof fieldValue === 'object' && fieldValue !== null
             ? (fieldValue as Record<string, t.ConfigValue>)
             : {},
-        ).map(([k, v]) => ({
-          key: k,
-          value: typeof v === 'string' ? v : JSON.stringify(v),
-        }));
+        ).map(([k, v]) => toKVPair(k, v));
     return (
       <InlineRow key={field.key} label={fieldLabel} fieldId={fieldId} required={required}>
         <KeyValueField
           id={fieldId}
           pairs={pairs}
           onChange={(p) => onChange(field.key, p)}
           disabled={disabled}
+          valueTypes={field.recordValueKVTypes}
           aria-label={fieldLabel}
         />
       </InlineRow>