🗂️ feat: Files & Storage and System Editors (Wave 2)

e2e/config-shell.spec.ts

@@ -233,7 +233,7 @@ test.describe('Configuration shell: profile scope and guard', () => {
     await expect(guard).toBeVisible();
     await guard.getByRole('button', { name: 'Cancel' }).click();
     await expect(page).toHaveURL(/configuration/);
-    await expect(page.locator('#balance-startBalance')).toHaveValue('424242');
+    await expect(page.locator('#balance-startBalance')).toHaveValue('424,242');
     await page.locator('aside a[href*="/access"]').first().click();
     await page.getByRole('dialog').getByRole('button', { name: 'Discard changes' }).click();
     await expect(page).toHaveURL(/access/);

e2e/config.spec.ts

@@ -62,7 +62,7 @@ test.describe('Configuration: Enter never edits another field', () => {
     await page.getByRole('button', { name: /^Review & save$/ }).click();
     const dialog = page.getByRole('dialog');
     await expect(dialog).toContainText('Save 1 change to the base configuration?');
-    await expect(dialog).toContainText('Start balance');
+    await expect(dialog).toContainText('Starting credits');
     await dialog.getByRole('button', { name: 'Cancel' }).click();
     await page.getByRole('button', { name: 'Discard' }).click();
   });

e2e/files-system.spec.ts

@@ -0,0 +1,102 @@
+import { test, expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { LIVE, LIVE_SKIP_REASON, openConfigTab } from './live';
+
+/**
+ * Files & storage and System journeys (WS14). They need a live LibreChat
+ * backend: run with E2E_LIVE=1 and E2E_BASE_URL. Each journey discards or
+ * reverts what it changes.
+ */
+const unsavedBar = (page: Page) => page.getByRole('region', { name: 'Unsaved changes' });
+
+async function discard(page: Page) {
+  await unsavedBar(page).getByRole('button', { name: 'Discard' }).click();
+  await expect(unsavedBar(page)).toHaveCount(0);
+}
+
+test.describe('Files & storage and System editors', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
+  test.describe.configure({ mode: 'serial', timeout: 120_000 });
+
+  test('switching the storage backend asks first and names what it needs', async ({ page }) => {
+    await openConfigTab(page, 'files');
+    const backend = page.getByLabel('Storage backend', { exact: true });
+    const before = await backend.inputValue();
+    await backend.selectOption('s3');
+    const dialog = page.getByRole('dialog', { name: 'Switch file storage to Amazon S3?' });
+    await expect(dialog).toContainText('AWS_BUCKET_NAME');
+    await expect(dialog).toContainText('Nothing is moved');
+    await dialog.getByRole('button', { name: 'Cancel' }).click();
+    await expect(backend).toHaveValue(before);
+    await expect(unsavedBar(page)).toHaveCount(0);
+
+    await backend.selectOption('s3');
+    await page.getByRole('button', { name: 'Switch to Amazon S3' }).click();
+    await expect(backend).toHaveValue('s3');
+    await discard(page);
+  });
+
+  test('a MIME list starts from the list in effect, so adding a type extends it', async ({
+    page,
+  }) => {
+    await openConfigTab(page, 'files');
+    await page.locator('button.settings-trigger', { hasText: 'OCR-eligible MIME types' }).click();
+    const list = page.locator('#fileConfig-ocr-supportedMimeTypes');
+    await expect(list).toContainText("Uses LibreChat's default list (8 patterns).");
+    await list.getByRole('button', { name: 'Customize' }).click();
+    await list.getByRole('button', { name: 'Add pattern' }).click();
+    await page.getByRole('textbox', { name: 'New MIME type pattern' }).fill('.*');
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('dialog', { name: 'Match every file type?' })).toBeVisible();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+
+    await list.getByRole('button', { name: 'Add pattern' }).click();
+    await page.getByRole('textbox', { name: 'New MIME type pattern' }).fill('^text\\/rtf$');
+    await page.keyboard.press('Enter');
+    await expect(list).toContainText('Custom list (9 patterns)');
+    await list.getByRole('textbox', { name: 'Test a MIME type' }).fill('text/rtf');
+    await expect(list).toContainText('text/rtf files are sent to OCR');
+    await discard(page);
+  });
+
+  test('an endpoint key outside the ones LibreChat looks up is refused', async ({ page }) => {
+    await openConfigTab(page, 'files');
+    const group = page.locator('[id="section-fileConfig.endpoints"]');
+    await group.getByRole('button', { name: 'Add endpoint' }).first().click();
+    const key = group.getByRole('combobox', { name: 'Key' });
+    await key.fill('Agents');
+    await key.press('Enter');
+    await expect(group.getByRole('alert')).toContainText('Did you mean agents?');
+    await group.getByRole('button', { name: 'Cancel' }).click();
+    await expect(unsavedBar(page)).toHaveCount(0);
+  });
+
+  test('emptying the allowed sign-up domains asks first', async ({ page }) => {
+    await openConfigTab(page, 'system');
+    const chips = page.locator('#registration-allowedDomains li');
+    const count = await chips.count();
+    test.skip(count === 0, 'librechat.yaml sets no allowed domains');
+    for (let i = 0; i < count; i++) {
+      await chips.first().getByRole('button').click();
+    }
+    await expect(page.getByRole('dialog', { name: 'Let anyone sign up?' })).toBeVisible();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    await discard(page);
+  });
+
+  test('starting credits read separators, and rate limits are a read-only table', async ({
+    page,
+  }) => {
+    await openConfigTab(page, 'system');
+    const start = page.getByLabel('Starting credits', { exact: true });
+    await start.fill('2,500,000');
+    await start.press('Tab');
+    await expect(start).toHaveValue('2,500,000');
+    await expect(page.getByText('Worth about $2.50 of model usage')).toBeVisible();
+    await discard(page);
+
+    const table = page.getByRole('table', { name: 'Rate limits' });
+    await expect(table.getByRole('row', { name: /File uploads/ })).toContainText('requests /');
+    await expect(table.getByRole('spinbutton')).toHaveCount(0);
+  });
+});

e2e/import.spec.ts

@@ -53,13 +53,13 @@ test('imports a snippet into Base, previewing exactly its keys', async ({ page }
   await page.getByRole('radio', { name: /^Base configuration/ }).click();
   const { dialog, apply } = await previewAndApply(page, /into Base configuration$/);
   await expect(dialog.getByRole('checkbox')).toHaveCount(1);
-  await expect(dialog.getByText('Start balance')).toBeVisible();
+  await expect(dialog.getByText('Starting credits')).toBeVisible();
   await expect(dialog.getByText(/Prompts: managed with role permissions/)).toBeVisible();
   await apply.click();
   await expect(
     page.getByText(/Imported 1 value into the base configuration/).first(),
   ).toBeVisible();
-  await expect(await startBalanceIn(page)).toHaveValue(String(value));
+  await expect(await startBalanceIn(page)).toHaveValue(value.toLocaleString('en-US'));
 });
 
 test('imports into an existing profile, comparing with its own values', async ({ page }) => {
@@ -73,7 +73,7 @@ test('imports into an existing profile, comparing with its own values', async ({
   const { apply } = await previewAndApply(page, /into Role: USER$/);
   await apply.click();
   await expect(page.getByText(/Imported 1 value into Role: USER/).first()).toBeVisible();
-  await expect(await startBalanceIn(page, 'role:USER')).toHaveValue(String(value));
+  await expect(await startBalanceIn(page, 'role:USER')).toHaveValue(value.toLocaleString('en-US'));
 });
 
 test('imports into a role that has no profile yet', async ({ page }) => {

e2e/profiles.spec.ts

@@ -62,7 +62,7 @@ test.describe('Configuration: profile lifecycle', () => {
     await page.getByRole('option', { name: new RegExp(`^${name}`) }).click();
     expect(dialogs).toEqual([]);
     await expect(unsavedBar(page)).toHaveCount(1);
-    await expect(startBalance).toHaveValue('4321');
+    await expect(startBalance).toHaveValue('4,321');
 
     await openSelector(page);
     const trash = page.getByRole('option', { name: new RegExp(`^Delete profile ${name}`) });

src/components/configuration/ConfigTabContent.tsx

@@ -2,13 +2,19 @@ import { useMemo, useContext } from 'react';
 import { Button } from '@clickhouse/click-ui';
 import type { KeyboardEvent, ReactNode } from 'react';
 import type * as t from '@/types';
+import {
+  SECTION_RENDERERS,
+  READ_ONLY_DETAIL_KEYS,
+  SECTION_GROUP_RENDERERS,
+  UNFOLDED_READ_ONLY_SECTIONS,
+  SELF_CONTAINED_SECTION_RENDERERS,
+} from './sections';
 import {
   countSection,
   hasPendingValueIn,
   countSectionOverrides,
   countEntrySectionOverrides,
 } from './counts';
-import { SECTION_RENDERERS, SELF_CONTAINED_SECTION_RENDERERS } from './sections';
 import { ConfigValuesProvider } from '@/contexts/ConfigValuesContext';
 import { RevealTargetContext } from '@/contexts/RevealTargetContext';
 import { FieldRenderer, SingleFieldRenderer } from './renderer';
@@ -17,7 +23,7 @@ import { deriveFieldValue, isSectionDisabled } from '@/utils';
 import { ReadOnlySection } from './ReadOnlySection';
 import { UnknownSettings } from './UnknownSettings';
 import { ConfigSection } from './ConfigSection';
-import { isPathInSection } from './configMeta';
+import { SECTION_META, isPathInSection } from './configMeta';
 import { CodeField } from './fields/CodeField';
 import { InfoBanner } from './InfoBanner';
 import { ScopeGate } from './ScopeGate';
@@ -238,18 +244,17 @@ export function ConfigTabContent({
     );
   }
 
-  const renderSectionContent = (section: t.ConfigSectionConfig) => {
+  const isSectionReadOnly = (section: t.ConfigSectionConfig): boolean =>
+    section.scopeGate != null ||
+    section.readOnlyReason != null ||
+    isSectionDisabled(!!fieldsDisabled, sectionPermissions, section.schemaKey ?? section.id);
+
+  const buildFieldRendererProps = (section: t.ConfigSectionConfig): t.FieldRendererProps => {
     const dataKey = section.schemaKey ?? section.id;
-    const sectionValue = configValues?.[dataKey];
-    const sectionDisabled =
-      section.scopeGate != null ||
-      section.readOnlyReason != null ||
-      isSectionDisabled(!!fieldsDisabled, sectionPermissions, dataKey);
-    const CustomSectionRenderer =
-      section.fields.length > 0 ? SECTION_RENDERERS[section.id] : undefined;
-    const fieldRendererProps: t.FieldRendererProps = {
+    const sectionDisabled = isSectionReadOnly(section);
+    return {
       fields: section.fields,
-      parentValue: sectionValue,
+      parentValue: configValues?.[dataKey],
       parentPath: dataKey,
       getValue,
       onChange: onFieldChange,
@@ -277,6 +282,15 @@ export function ConfigTabContent({
       onUnhideField: sectionDisabled ? undefined : onUnhideField,
       onRenameEntry,
     };
+  };
+
+  const renderSectionContent = (section: t.ConfigSectionConfig) => {
+    const dataKey = section.schemaKey ?? section.id;
+    const sectionValue = configValues?.[dataKey];
+    const sectionDisabled = isSectionReadOnly(section);
+    const CustomSectionRenderer =
+      section.fields.length > 0 ? SECTION_RENDERERS[section.id] : undefined;
+    const fieldRendererProps = buildFieldRendererProps(section);
     const content = (
       <>
         {section.bannerText && !section.readOnlyReason && !section.scopeGate && (
@@ -346,12 +360,18 @@ export function ConfigTabContent({
       );
     }
     if (!section.readOnlyReason) return content;
-    const isEmpty = countsById[section.id]?.configured === 0;
+    /** A single-field section is its row: nothing to fold. */
+    const isEmpty =
+      countsById[section.id]?.configured === 0 &&
+      !UNFOLDED_READ_ONLY_SECTIONS.has(section.id) &&
+      !isInlineSection(section);
+    const detailKey = READ_ONLY_DETAIL_KEYS[section.id];
     const reveal =
       revealTarget != null && (revealTarget === dataKey || revealTarget.startsWith(`${dataKey}.`));
     return (
       <ReadOnlySection
         reason={section.readOnlyReason}
+        detail={detailKey ? localize(detailKey) : undefined}
         isEmpty={isEmpty && !filterPaths}
         reveal={reveal}
       >
@@ -369,9 +389,21 @@ export function ConfigTabContent({
   type SectionGroup =
     | { kind: 'inline'; section: t.ConfigSectionConfig }
     | { kind: 'accordion'; sections: t.ConfigSectionConfig[] }
-    | { kind: 'flat'; section: t.ConfigSectionConfig };
+    | { kind: 'flat'; section: t.ConfigSectionConfig }
+    | { kind: 'group'; key: string; sections: t.ConfigSectionConfig[] };
 
   const groups = visibleSections.reduce<SectionGroup[]>((acc, section) => {
+    /** Sections sharing a `SectionMeta.group` with a group renderer render as one card (e.g. Storage). */
+    const groupKey = SECTION_META[section.id]?.group;
+    if (groupKey && SECTION_GROUP_RENDERERS[groupKey]) {
+      const existing = acc.find(
+        (g): g is Extract<SectionGroup, { kind: 'group' }> =>
+          g.kind === 'group' && g.key === groupKey,
+      );
+      if (existing) existing.sections.push(section);
+      else acc.push({ kind: 'group', key: groupKey, sections: [section] });
+      return acc;
+    }
     if (SELF_CONTAINED_SECTION_RENDERERS.has(section.id)) {
       acc.push({ kind: 'flat', section });
       return acc;
@@ -400,6 +432,20 @@ export function ConfigTabContent({
         >
           <button type="submit" disabled hidden aria-hidden="true" tabIndex={-1} />
           {groups.map((group) => {
+            if (group.kind === 'group') {
+              const GroupRenderer = SECTION_GROUP_RENDERERS[group.key];
+              if (!GroupRenderer) return null;
+              return (
+                <GroupRenderer
+                  key={group.key}
+                  sections={group.sections}
+                  propsFor={buildFieldRendererProps}
+                  renderSection={renderSectionContent}
+                  counts={countsById}
+                  showConfiguredOnly={showConfiguredOnly}
+                />
+              );
+            }
             if (group.kind === 'flat') {
               return (
                 <div key={group.section.id} id={`section-${group.section.id}`}>

src/components/configuration/__tests__/ImportYamlDialog.test.tsx

@@ -123,14 +123,16 @@ describe('ImportYamlDialog wizard', () => {
     );
     await toPreview();
     const dialog = screen.getByRole('dialog');
-    expect(within(dialog).getByText('Start balance')).toBeInTheDocument();
+    expect(within(dialog).getByText('Starting credits')).toBeInTheDocument();
     expect(within(dialog).getByText('1,000,000 (librechat.yaml)')).toBeInTheDocument();
     expect(within(dialog).queryByText('Enabled')).toBeNull();
     fireEvent.click(
       within(dialog).getByRole('button', { name: /Show 1 setting that is already set/ }),
     );
     expect(within(dialog).getByText(/Already set to this value/)).toBeInTheDocument();
-    expect(within(dialog).getByRole('checkbox', { name: 'Include Enabled' })).not.toBeChecked();
+    expect(
+      within(dialog).getByRole('checkbox', { name: 'Include Track balances' }),
+    ).not.toBeChecked();
     expect(within(dialog).getByText(/2 keys won't be imported/)).toBeInTheDocument();
     expect(within(dialog).getByText(/managed with role permissions/)).toBeInTheDocument();
     expect(within(dialog).getByText(/"us.anthropic.claude"/)).toBeInTheDocument();

src/components/configuration/configMeta.ts

@@ -114,15 +114,15 @@ export const SECTION_META: Record<string, t.SectionMeta> = {
   },
 
   fileStrategy: {
-    titleKey: 'com_config_section_file_strategy',
-    descriptionKey: 'com_config_section_file_strategy_desc',
+    titleKey: 'com_config_storage_title',
+    descriptionKey: 'com_config_storage_desc',
     tab: 'files',
     order: 10,
     group: 'storage',
   },
   fileStrategies: {
-    titleKey: 'com_config_section_fileStrategies',
-    descriptionKey: 'com_config_section_fileStrategies_desc',
+    titleKey: 'com_config_storage_per_type',
+    descriptionKey: 'com_config_storage_per_type_desc',
     tab: 'files',
     order: 20,
     group: 'storage',
@@ -136,7 +136,7 @@ export const SECTION_META: Record<string, t.SectionMeta> = {
   },
   fileConfig: {
     titleKey: 'com_config_section_file_config',
-    descriptionKey: 'com_config_section_file_config_desc',
+    descriptionKey: 'com_config_files_config_desc',
     tab: 'files',
     order: 40,
   },
@@ -185,20 +185,22 @@ export const SECTION_META: Record<string, t.SectionMeta> = {
     order: 10,
   },
   balance: {
-    titleKey: 'com_config_section_balance',
-    descriptionKey: 'com_config_section_balance_desc',
+    titleKey: 'com_config_credits_title',
+    descriptionKey: 'com_config_credits_desc',
     tab: 'system',
     order: 20,
+    group: 'credits',
   },
   transactions: {
     titleKey: 'com_config_section_transactions',
     descriptionKey: 'com_config_section_transactions_desc',
     tab: 'system',
     order: 30,
+    group: 'credits',
   },
   permissions: {
-    titleKey: 'com_config_section_permissions',
-    descriptionKey: 'com_config_section_permissions_desc',
+    titleKey: 'com_config_system_permissions_title',
+    descriptionKey: 'com_config_system_permissions_desc',
     tab: 'system',
     order: 40,
   },

src/components/configuration/controls.test.ts

@@ -187,11 +187,11 @@ describe('getFieldOptions / coerceEnumValue', () => {
 
   it('uses brand and format labels', () => {
     expect(labels('fileStrategy')).toEqual([
-      'Local',
-      'Firebase',
+      'Local filesystem',
+      'Firebase Storage',
       'Amazon S3',
       'Azure Blob Storage',
-      'Amazon CloudFront',
+      'Amazon CloudFront (S3)',
     ]);
     expect(labels('imageOutputType')).toEqual(['PNG', 'WebP', 'JPEG']);
     expect(labels('ocr.strategy')).toContain('Vertex AI Mistral OCR');

src/components/configuration/controls.ts

@@ -279,6 +279,7 @@ export function canRoundTrip(
     case 'array':
     case 'multi-enum':
     case 'domain-list':
+    case 'mime-list':
       return isStringList(value);
     case 'model-list':
       return Array.isArray(value) && value.every(isModelItem);
@@ -365,6 +366,7 @@ export function fallbackControl(
       return 'select';
     case 'multi-enum':
     case 'domain-list':
+    case 'mime-list':
       return 'array';
     case 'model-list':
       return value == null || isStringList(value) ? 'array' : 'code';