feat: add Sandpack-based Mermaid diagram support

* fix: add OAuth flow back in to success state

* feat: disable server clicks during initialization to prevent spam

* fix: correct new tab behavior for OAuth between one-click and normal initialization flows

* fix: stop polling on error during oauth (was infinite popping toasts because we didn't clear interval)

* fix: cleanupServerState should be called after successful cancelOauth, not before

* fix: change from completeFlow to failFlow to avoid stale client IDs on OAuth after cancellation

* fix: add logic to differentiate between cancelled and failed flows when checking status for indicators (so error triangle indicator doesn't show up on cancellaiton)

.env.example

@@ -627,6 +627,15 @@ HELP_AND_FAQ_URL=https://librechat.ai
 # Redis connection limits
 # REDIS_MAX_LISTENERS=40
 
+# Redis ping interval in seconds (0 = disabled, >0 = enabled)
+# When set to a positive integer, Redis clients will ping the server at this interval to keep connections alive
+# When unset or 0, no pinging is performed (recommended for most use cases)
+# REDIS_PING_INTERVAL=300
+
+# Force specific cache namespaces to use in-memory storage even when Redis is enabled
+# Comma-separated list of CacheKeys (e.g., STATIC_CONFIG,ROLES,MESSAGES)
+# FORCED_IN_MEMORY_CACHE_NAMESPACES=STATIC_CONFIG,ROLES
+
 #==================================================#
 #                      Others                      #
 #==================================================#

.github/workflows/client.yml

@@ -1,6 +1,11 @@
 name: Publish `@librechat/client` to NPM
 
 on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/client/package.json'
   workflow_dispatch:
     inputs:
       reason:
@@ -17,16 +22,37 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
-          
-      - name: Check if client package exists
+          node-version: '20.x'
+        
+      - name: Install client dependencies
+        run: cd packages/client && npm ci
+        
+      - name: Build client
+        run: cd packages/client && npm run build
+        
+      - name: Set up npm authentication
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.PUBLISH_NPM_TOKEN }}" > ~/.npmrc
+        
+      - name: Check version change
+        id: check
+        working-directory: packages/client
         run: |
-          if [ -d "packages/client" ]; then
-            echo "Client package directory found"
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          PUBLISHED_VERSION=$(npm view @librechat/client version 2>/dev/null || echo "0.0.0")
+          if [ "$PACKAGE_VERSION" = "$PUBLISHED_VERSION" ]; then
+            echo "No version change, skipping publish"
+            echo "skip=true" >> $GITHUB_OUTPUT
           else
-            echo "Client package directory not found - workflow ready for future use"
-            exit 0
+            echo "Version changed, proceeding with publish"
+            echo "skip=false" >> $GITHUB_OUTPUT
           fi
-          
-      - name: Placeholder for future publishing
-        run: echo "Client package publishing workflow is ready" 
+            
+      - name: Pack package
+        if: steps.check.outputs.skip != 'true'
+        working-directory: packages/client
+        run: npm pack
+        
+      - name: Publish
+        if: steps.check.outputs.skip != 'true'
+        working-directory: packages/client
+        run: npm publish *.tgz --access public

.github/workflows/data-schemas.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           
       - name: Install dependencies
         run: cd packages/data-schemas && npm ci

.github/workflows/generate-release-changelog-pr.yml

@@ -1,95 +0,0 @@
-name: Generate Release Changelog PR
-
-on:
-  push:
-    tags:
-      - 'v*.*.*'
-  workflow_dispatch:
-
-jobs:
-  generate-release-changelog-pr:
-    permissions:
-      contents: write    # Needed for pushing commits and creating branches.
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      # 1. Checkout the repository (with full history).
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      # 2. Generate the release changelog using our custom configuration.
-      - name: Generate Release Changelog
-        id: generate_release
-        uses: mikepenz/release-changelog-builder-action@v5.1.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          configuration: ".github/configuration-release.json"
-          owner: ${{ github.repository_owner }}
-          repo: ${{ github.event.repository.name }}
-          outputFile: CHANGELOG-release.md
-
-      # 3. Update the main CHANGELOG.md:
-      #    - If it doesn't exist, create it with a basic header.
-      #    - Remove the "Unreleased" section (if present).
-      #    - Prepend the new release changelog above previous releases.
-      #    - Remove all temporary files before committing.
-      - name: Update CHANGELOG.md
-        run: |
-          # Determine the release tag, e.g. "v1.2.3"
-          TAG=${GITHUB_REF##*/}
-          echo "Using release tag: $TAG"
-          
-          # Ensure CHANGELOG.md exists; if not, create a basic header.
-          if [ ! -f CHANGELOG.md ]; then
-            echo "# Changelog" > CHANGELOG.md
-            echo "" >> CHANGELOG.md
-            echo "All notable changes to this project will be documented in this file." >> CHANGELOG.md
-            echo "" >> CHANGELOG.md
-          fi
-
-          echo "Updating CHANGELOG.md…"
-          
-          # Remove the "Unreleased" section (from "## [Unreleased]" until the first occurrence of '---') if it exists.
-          if grep -q "^## \[Unreleased\]" CHANGELOG.md; then
-            awk '/^## \[Unreleased\]/{flag=1} flag && /^---/{flag=0; next} !flag' CHANGELOG.md > CHANGELOG.cleaned
-          else
-            cp CHANGELOG.md CHANGELOG.cleaned
-          fi
-
-          # Split the cleaned file into:
-          #   - header.md: content before the first release header ("## [v...").
-          #   - tail.md: content from the first release header onward.
-          awk '/^## \[v/{exit} {print}' CHANGELOG.cleaned > header.md
-          awk 'f{print} /^## \[v/{f=1; print}' CHANGELOG.cleaned > tail.md
-
-          # Combine header, the new release changelog, and the tail.
-          echo "Combining updated changelog parts..."
-          cat header.md CHANGELOG-release.md > CHANGELOG.md.new
-          echo "" >> CHANGELOG.md.new
-          cat tail.md >> CHANGELOG.md.new
-
-          mv CHANGELOG.md.new CHANGELOG.md
-
-          # Remove temporary files.
-          rm -f CHANGELOG.cleaned header.md tail.md CHANGELOG-release.md
-
-          echo "Final CHANGELOG.md content:"
-          cat CHANGELOG.md
-
-      # 4. Create (or update) the Pull Request with the updated CHANGELOG.md.
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          sign-commits: true
-          commit-message: "chore: update CHANGELOG for release ${{ github.ref_name }}"
-          base: main
-          branch: "changelog/${{ github.ref_name }}"
-          reviewers: danny-avila
-          title: "📜 docs: Changelog for release ${{ github.ref_name }}"
-          body: |
-            **Description**:
-            - This PR updates the CHANGELOG.md by removing the "Unreleased" section and adding new release notes for release ${{ github.ref_name }} above previous releases.

.github/workflows/generate-unreleased-changelog-pr.yml

@@ -1,107 +0,0 @@
-name: Generate Unreleased Changelog PR
-
-on:
-  schedule:
-    - cron: "0 0 * * 1"  # Runs every Monday at 00:00 UTC
-  workflow_dispatch:
-
-jobs:
-  generate-unreleased-changelog-pr:
-    permissions:
-      contents: write    # Needed for pushing commits and creating branches.
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      # 1. Checkout the repository on main.
-      - name: Checkout Repository on Main
-        uses: actions/checkout@v4
-        with:
-          ref: main
-          fetch-depth: 0
-
-      # 4. Get the latest version tag.
-      - name: Get Latest Tag
-        id: get_latest_tag
-        run: |
-          LATEST_TAG=$(git describe --tags $(git rev-list --tags --max-count=1) || echo "none")
-          echo "Latest tag: $LATEST_TAG"
-          echo "tag=$LATEST_TAG" >> $GITHUB_OUTPUT
-
-      # 5. Generate the Unreleased changelog.
-      - name: Generate Unreleased Changelog
-        id: generate_unreleased
-        uses: mikepenz/release-changelog-builder-action@v5.1.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          configuration: ".github/configuration-unreleased.json"
-          owner: ${{ github.repository_owner }}
-          repo: ${{ github.event.repository.name }}
-          outputFile: CHANGELOG-unreleased.md
-          fromTag: ${{ steps.get_latest_tag.outputs.tag }}
-          toTag: main
-
-      # 7. Update CHANGELOG.md with the new Unreleased section.
-      - name: Update CHANGELOG.md
-        id: update_changelog
-        run: |
-          # Create CHANGELOG.md if it doesn't exist.
-          if [ ! -f CHANGELOG.md ]; then
-            echo "# Changelog" > CHANGELOG.md
-            echo "" >> CHANGELOG.md
-            echo "All notable changes to this project will be documented in this file." >> CHANGELOG.md
-            echo "" >> CHANGELOG.md
-          fi
-          
-          echo "Updating CHANGELOG.md…"
-          
-          # Extract content before the "## [Unreleased]" (or first version header if missing).
-          if grep -q "^## \[Unreleased\]" CHANGELOG.md; then
-            awk '/^## \[Unreleased\]/{exit} {print}' CHANGELOG.md > CHANGELOG_TMP.md
-          else
-            awk '/^## \[v/{exit} {print}' CHANGELOG.md > CHANGELOG_TMP.md
-          fi
-          
-          # Append the generated Unreleased changelog.
-          echo "" >> CHANGELOG_TMP.md
-          cat CHANGELOG-unreleased.md >> CHANGELOG_TMP.md
-          echo "" >> CHANGELOG_TMP.md
-          
-          # Append the remainder of the original changelog (starting from the first version header).
-          awk 'f{print} /^## \[v/{f=1; print}' CHANGELOG.md >> CHANGELOG_TMP.md
-          
-          # Replace the old file with the updated file.
-          mv CHANGELOG_TMP.md CHANGELOG.md
-          
-          # Remove the temporary generated file.
-          rm -f CHANGELOG-unreleased.md
-          
-          echo "Final CHANGELOG.md:"
-          cat CHANGELOG.md
-
-      # 8. Check if CHANGELOG.md has any updates.
-      - name: Check for CHANGELOG.md changes
-        id: changelog_changes
-        run: |
-          if git diff --quiet CHANGELOG.md; then
-            echo "has_changes=false" >> $GITHUB_OUTPUT
-          else
-            echo "has_changes=true" >> $GITHUB_OUTPUT
-          fi
-
-      # 9. Create (or update) the Pull Request only if there are changes.
-      - name: Create Pull Request
-        if: steps.changelog_changes.outputs.has_changes == 'true'
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          base: main
-          branch: "changelog/unreleased-update"
-          sign-commits: true
-          commit-message: "action: update Unreleased changelog"
-          title: "📜 docs: Unreleased Changelog"
-          body: |
-            **Description**:
-            - This PR updates the Unreleased section in CHANGELOG.md.
-            - It compares the current main branch with the latest version tag (determined as ${{ steps.get_latest_tag.outputs.tag }}),
-              regenerates the Unreleased changelog, removes any old Unreleased block, and inserts the new content.

.github/workflows/i18n-unused-keys.yml

@@ -6,6 +6,7 @@ on:
       - "client/src/**"
       - "api/**"
       - "packages/data-provider/src/**"
+      - "packages/client/**"
 
 jobs:
   detect-unused-i18n-keys:
@@ -23,7 +24,7 @@ jobs:
 
           # Define paths
           I18N_FILE="client/src/locales/en/translation.json"
-          SOURCE_DIRS=("client/src" "api" "packages/data-provider/src")
+          SOURCE_DIRS=("client/src" "api" "packages/data-provider/src" "packages/client")
 
           # Check if translation file exists
           if [[ ! -f "$I18N_FILE" ]]; then

.github/workflows/unused-packages.yml

@@ -7,6 +7,7 @@ on:
       - 'package-lock.json'
       - 'client/**'
       - 'api/**'
+      - 'packages/client/**'
 
 jobs:
   detect-unused-packages:
@@ -28,7 +29,7 @@ jobs:
 
       - name: Validate JSON files
         run: |
-          for FILE in package.json client/package.json api/package.json; do
+          for FILE in package.json client/package.json api/package.json packages/client/package.json; do
             if [[ -f "$FILE" ]]; then
               jq empty "$FILE" || (echo "::error title=Invalid JSON::$FILE is invalid" && exit 1)
             fi
@@ -63,12 +64,31 @@ jobs:
             local folder=$1
             local output_file=$2
             if [[ -d "$folder" ]]; then
-              grep -rEho "require\\(['\"]([a-zA-Z0-9@/._-]+)['\"]\\)" "$folder" --include=\*.{js,ts,mjs,cjs} | \
+              # Extract require() statements
+              grep -rEho "require\\(['\"]([a-zA-Z0-9@/._-]+)['\"]\\)" "$folder" --include=\*.{js,ts,tsx,jsx,mjs,cjs} | \
                 sed -E "s/require\\(['\"]([a-zA-Z0-9@/._-]+)['\"]\\)/\1/" > "$output_file"
           
-              grep -rEho "import .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]" "$folder" --include=\*.{js,ts,mjs,cjs} | \
+              # Extract ES6 imports - various patterns
+              # import x from 'module'
+              grep -rEho "import .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]" "$folder" --include=\*.{js,ts,tsx,jsx,mjs,cjs} | \
                 sed -E "s/import .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]/\1/" >> "$output_file"
+              
+              # import 'module' (side-effect imports)
+              grep -rEho "import ['\"]([a-zA-Z0-9@/._-]+)['\"]" "$folder" --include=\*.{js,ts,tsx,jsx,mjs,cjs} | \
+                sed -E "s/import ['\"]([a-zA-Z0-9@/._-]+)['\"]/\1/" >> "$output_file"
+              
+              # export { x } from 'module' or export * from 'module'
+              grep -rEho "export .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]" "$folder" --include=\*.{js,ts,tsx,jsx,mjs,cjs} | \
+                sed -E "s/export .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]/\1/" >> "$output_file"
+              
+              # import type { x } from 'module' (TypeScript)
+              grep -rEho "import type .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]" "$folder" --include=\*.{ts,tsx} | \
+                sed -E "s/import type .* from ['\"]([a-zA-Z0-9@/._-]+)['\"]/\1/" >> "$output_file"
           
+              # Remove subpath imports but keep the base package
+              # e.g., '@tanstack/react-query/devtools' becomes '@tanstack/react-query'
+              sed -i -E 's|^(@?[a-zA-Z0-9-]+(/[a-zA-Z0-9-]+)?)/.*|\1|' "$output_file"
+              
               sort -u "$output_file" -o "$output_file"
             else
               touch "$output_file"
@@ -78,13 +98,80 @@ jobs:
           extract_deps_from_code "." root_used_code.txt
           extract_deps_from_code "client" client_used_code.txt
           extract_deps_from_code "api" api_used_code.txt
+          
+          # Extract dependencies used by @librechat/client package
+          extract_deps_from_code "packages/client" packages_client_used_code.txt
+
+      - name: Get @librechat/client dependencies
+        id: get-librechat-client-deps
+        run: |
+          if [[ -f "packages/client/package.json" ]]; then
+            # Get all dependencies from @librechat/client (dependencies, devDependencies, and peerDependencies)
+            DEPS=$(jq -r '.dependencies // {} | keys[]' packages/client/package.json 2>/dev/null || echo "")
+            DEV_DEPS=$(jq -r '.devDependencies // {} | keys[]' packages/client/package.json 2>/dev/null || echo "")
+            PEER_DEPS=$(jq -r '.peerDependencies // {} | keys[]' packages/client/package.json 2>/dev/null || echo "")
+            
+            # Combine all dependencies
+            echo "$DEPS" > librechat_client_deps.txt
+            echo "$DEV_DEPS" >> librechat_client_deps.txt
+            echo "$PEER_DEPS" >> librechat_client_deps.txt
+            
+            # Also include dependencies that are imported in packages/client
+            cat packages_client_used_code.txt >> librechat_client_deps.txt
+            
+            # Remove empty lines and sort
+            grep -v '^$' librechat_client_deps.txt | sort -u > temp_deps.txt
+            mv temp_deps.txt librechat_client_deps.txt
+          else
+            touch librechat_client_deps.txt
+          fi
+
+      - name: Extract Workspace Dependencies
+        id: extract-workspace-deps
+        run: |
+          # Function to get dependencies from a workspace package that are used by another package
+          get_workspace_package_deps() {
+            local package_json=$1
+            local output_file=$2
+            
+            # Get all workspace dependencies (starting with @librechat/)
+            if [[ -f "$package_json" ]]; then
+              local workspace_deps=$(jq -r '.dependencies // {} | to_entries[] | select(.key | startswith("@librechat/")) | .key' "$package_json" 2>/dev/null || echo "")
+              
+              # For each workspace dependency, get its dependencies
+              for dep in $workspace_deps; do
+                # Convert @librechat/api to packages/api
+                local workspace_path=$(echo "$dep" | sed 's/@librechat\//packages\//')
+                local workspace_package_json="${workspace_path}/package.json"
+                
+                if [[ -f "$workspace_package_json" ]]; then
+                  # Extract all dependencies from the workspace package
+                  jq -r '.dependencies // {} | keys[]' "$workspace_package_json" 2>/dev/null >> "$output_file"
+                  # Also extract peerDependencies
+                  jq -r '.peerDependencies // {} | keys[]' "$workspace_package_json" 2>/dev/null >> "$output_file"
+                fi
+              done
+            fi
+            
+            if [[ -f "$output_file" ]]; then
+              sort -u "$output_file" -o "$output_file"
+            else
+              touch "$output_file"
+            fi
+          }
+          
+          # Get workspace dependencies for each package
+          get_workspace_package_deps "package.json" root_workspace_deps.txt
+          get_workspace_package_deps "client/package.json" client_workspace_deps.txt
+          get_workspace_package_deps "api/package.json" api_workspace_deps.txt
 
       - name: Run depcheck for root package.json
         id: check-root
         run: |
           if [[ -f "package.json" ]]; then
             UNUSED=$(depcheck --json | jq -r '.dependencies | join("\n")' || echo "")
-            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat root_used_deps.txt root_used_code.txt | sort) || echo "")
+            # Exclude dependencies used in scripts, code, and workspace packages
+            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat root_used_deps.txt root_used_code.txt root_workspace_deps.txt | sort) || echo "")
             echo "ROOT_UNUSED<<EOF" >> $GITHUB_ENV
             echo "$UNUSED" >> $GITHUB_ENV
             echo "EOF" >> $GITHUB_ENV
@@ -97,7 +184,8 @@ jobs:
             chmod -R 755 client
             cd client
             UNUSED=$(depcheck --json | jq -r '.dependencies | join("\n")' || echo "")
-            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat ../client_used_deps.txt ../client_used_code.txt | sort) || echo "")
+            # Exclude dependencies used in scripts, code, and workspace packages
+            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat ../client_used_deps.txt ../client_used_code.txt ../client_workspace_deps.txt | sort) || echo "")
             # Filter out false positives
             UNUSED=$(echo "$UNUSED" | grep -v "^micromark-extension-llm-math$" || echo "")
             echo "CLIENT_UNUSED<<EOF" >> $GITHUB_ENV
@@ -113,7 +201,8 @@ jobs:
             chmod -R 755 api
             cd api
             UNUSED=$(depcheck --json | jq -r '.dependencies | join("\n")' || echo "")
-            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat ../api_used_deps.txt ../api_used_code.txt | sort) || echo "")
+            # Exclude dependencies used in scripts, code, and workspace packages
+            UNUSED=$(comm -23 <(echo "$UNUSED" | sort) <(cat ../api_used_deps.txt ../api_used_code.txt ../api_workspace_deps.txt | sort) || echo "")
             echo "API_UNUSED<<EOF" >> $GITHUB_ENV
             echo "$UNUSED" >> $GITHUB_ENV
             echo "EOF" >> $GITHUB_ENV

.gitignore

@@ -134,3 +134,4 @@ helm/**/.values.yaml
 /.openai/
 /.tabnine/
 /.codeium
+CLAUDE.md

Dockerfile.multi

@@ -16,6 +16,7 @@ COPY package*.json ./
 COPY packages/data-provider/package*.json ./packages/data-provider/
 COPY packages/api/package*.json ./packages/api/
 COPY packages/data-schemas/package*.json ./packages/data-schemas/
+COPY packages/client/package*.json ./packages/client/
 COPY client/package*.json ./client/
 COPY api/package*.json ./api/
 
@@ -45,11 +46,19 @@ COPY --from=data-provider-build /app/packages/data-provider/dist /app/packages/d
 COPY --from=data-schemas-build /app/packages/data-schemas/dist /app/packages/data-schemas/dist
 RUN npm run build
 
+# Build `client` package
+FROM base AS client-package-build
+WORKDIR /app/packages/client
+COPY packages/client ./
+RUN npm run build
+
 # Client build
 FROM base AS client-build
 WORKDIR /app/client
 COPY client ./
 COPY --from=data-provider-build /app/packages/data-provider/dist /app/packages/data-provider/dist
+COPY --from=client-package-build /app/packages/client/dist /app/packages/client/dist
+COPY --from=client-package-build /app/packages/client/src /app/packages/client/src
 ENV NODE_OPTIONS="--max-old-space-size=2048"
 RUN npm run build
 

api/app/clients/tools/structured/DALLE3.js

@@ -3,8 +3,8 @@ const path = require('path');
 const OpenAI = require('openai');
 const fetch = require('node-fetch');
 const { v4: uuidv4 } = require('uuid');
+const { ProxyAgent } = require('undici');
 const { Tool } = require('@langchain/core/tools');
-const { HttpsProxyAgent } = require('https-proxy-agent');
 const { FileContext, ContentTypes } = require('librechat-data-provider');
 const { getImageBasename } = require('~/server/services/Files/images');
 const extractBaseURL = require('~/utils/extractBaseURL');
@@ -46,7 +46,10 @@ class DALLE3 extends Tool {
     }
 
     if (process.env.PROXY) {
-      config.httpAgent = new HttpsProxyAgent(process.env.PROXY);
+      const proxyAgent = new ProxyAgent(process.env.PROXY);
+      config.fetchOptions = {
+        dispatcher: proxyAgent,
+      };
     }
 
     /** @type {OpenAI} */
@@ -163,7 +166,8 @@ Error Message: ${error.message}`);
     if (this.isAgent) {
       let fetchOptions = {};
       if (process.env.PROXY) {
-        fetchOptions.agent = new HttpsProxyAgent(process.env.PROXY);
+        const proxyAgent = new ProxyAgent(process.env.PROXY);
+        fetchOptions.dispatcher = proxyAgent;
       }
       const imageResponse = await fetch(theImageUrl, fetchOptions);
       const arrayBuffer = await imageResponse.arrayBuffer();

api/app/clients/tools/structured/OpenAIImageTools.js

@@ -3,10 +3,10 @@ const axios = require('axios');
 const { v4 } = require('uuid');
 const OpenAI = require('openai');
 const FormData = require('form-data');
+const { ProxyAgent } = require('undici');
 const { tool } = require('@langchain/core/tools');
 const { logAxiosError } = require('@librechat/api');
 const { logger } = require('@librechat/data-schemas');
-const { HttpsProxyAgent } = require('https-proxy-agent');
 const { ContentTypes, EImageOutputType } = require('librechat-data-provider');
 const { getStrategyFunctions } = require('~/server/services/Files/strategies');
 const { extractBaseURL } = require('~/utils');
@@ -189,7 +189,10 @@ function createOpenAIImageTools(fields = {}) {
       }
       const clientConfig = { ...closureConfig };
       if (process.env.PROXY) {
-        clientConfig.httpAgent = new HttpsProxyAgent(process.env.PROXY);
+        const proxyAgent = new ProxyAgent(process.env.PROXY);
+        clientConfig.fetchOptions = {
+          dispatcher: proxyAgent,
+        };
       }
 
       /** @type {OpenAI} */
@@ -335,7 +338,10 @@ Error Message: ${error.message}`);
 
       const clientConfig = { ...closureConfig };
       if (process.env.PROXY) {
-        clientConfig.httpAgent = new HttpsProxyAgent(process.env.PROXY);
+        const proxyAgent = new ProxyAgent(process.env.PROXY);
+        clientConfig.fetchOptions = {
+          dispatcher: proxyAgent,
+        };
       }
 
       const formData = new FormData();
@@ -447,6 +453,19 @@ Error Message: ${error.message}`);
           baseURL,
         };
 
+        if (process.env.PROXY) {
+          try {
+            const url = new URL(process.env.PROXY);
+            axiosConfig.proxy = {
+              host: url.hostname.replace(/^\[|\]$/g, ''),
+              port: url.port ? parseInt(url.port, 10) : undefined,
+              protocol: url.protocol.replace(':', ''),
+            };
+          } catch (error) {
+            logger.error('Error parsing proxy URL:', error);
+          }
+        }
+
         if (process.env.IMAGE_GEN_OAI_AZURE_API_VERSION && process.env.IMAGE_GEN_OAI_BASEURL) {
           axiosConfig.params = {
             'api-version': process.env.IMAGE_GEN_OAI_AZURE_API_VERSION,

api/app/clients/tools/structured/specs/DALLE3-proxy.spec.js

@@ -0,0 +1,94 @@
+const DALLE3 = require('../DALLE3');
+const { ProxyAgent } = require('undici');
+
+const processFileURL = jest.fn();
+
+jest.mock('~/server/services/Files/images', () => ({
+  getImageBasename: jest.fn().mockImplementation((url) => {
+    const parts = url.split('/');
+    const lastPart = parts.pop();
+    const imageExtensionRegex = /\.(jpg|jpeg|png|gif|bmp|tiff|svg)$/i;
+    if (imageExtensionRegex.test(lastPart)) {
+      return lastPart;
+    }
+    return '';
+  }),
+}));
+
+jest.mock('fs', () => {
+  return {
+    existsSync: jest.fn(),
+    mkdirSync: jest.fn(),
+    promises: {
+      writeFile: jest.fn(),
+      readFile: jest.fn(),
+      unlink: jest.fn(),
+    },
+  };
+});
+
+jest.mock('path', () => {
+  return {
+    resolve: jest.fn(),
+    join: jest.fn(),
+    relative: jest.fn(),
+    extname: jest.fn().mockImplementation((filename) => {
+      return filename.slice(filename.lastIndexOf('.'));
+    }),
+  };
+});
+
+describe('DALLE3 Proxy Configuration', () => {
+  let originalEnv;
+
+  beforeAll(() => {
+    originalEnv = { ...process.env };
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...originalEnv };
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+  });
+
+  it('should configure ProxyAgent in fetchOptions.dispatcher when PROXY env is set', () => {
+    // Set proxy environment variable
+    process.env.PROXY = 'http://proxy.example.com:8080';
+    process.env.DALLE_API_KEY = 'test-api-key';
+
+    // Create instance
+    const dalleWithProxy = new DALLE3({ processFileURL });
+
+    // Check that the openai client exists
+    expect(dalleWithProxy.openai).toBeDefined();
+
+    // Check that _options exists and has fetchOptions with a dispatcher
+    expect(dalleWithProxy.openai._options).toBeDefined();
+    expect(dalleWithProxy.openai._options.fetchOptions).toBeDefined();
+    expect(dalleWithProxy.openai._options.fetchOptions.dispatcher).toBeDefined();
+    expect(dalleWithProxy.openai._options.fetchOptions.dispatcher).toBeInstanceOf(ProxyAgent);
+  });
+
+  it('should not configure ProxyAgent when PROXY env is not set', () => {
+    // Ensure PROXY is not set
+    delete process.env.PROXY;
+    process.env.DALLE_API_KEY = 'test-api-key';
+
+    // Create instance
+    const dalleWithoutProxy = new DALLE3({ processFileURL });
+
+    // Check that the openai client exists
+    expect(dalleWithoutProxy.openai).toBeDefined();
+
+    // Check that _options exists but fetchOptions either doesn't exist or doesn't have a dispatcher
+    expect(dalleWithoutProxy.openai._options).toBeDefined();
+
+    // fetchOptions should either not exist or not have a dispatcher
+    if (dalleWithoutProxy.openai._options.fetchOptions) {
+      expect(dalleWithoutProxy.openai._options.fetchOptions.dispatcher).toBeUndefined();
+    }
+  });
+});

api/cache/cacheConfig.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const { math, isEnabled } = require('@librechat/api');
+const { CacheKeys } = require('librechat-data-provider');
 
 // To ensure that different deployments do not interfere with each other's cache, we use a prefix for the Redis keys.
 // This prefix is usually the deployment ID, which is often passed to the container or pod as an env var.
@@ -15,7 +16,26 @@ if (USE_REDIS && !process.env.REDIS_URI) {
   throw new Error('USE_REDIS is enabled but REDIS_URI is not set.');
 }
 
+// Comma-separated list of cache namespaces that should be forced to use in-memory storage
+// even when Redis is enabled. This allows selective performance optimization for specific caches.
+const FORCED_IN_MEMORY_CACHE_NAMESPACES = process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES
+  ? process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES.split(',').map((key) => key.trim())
+  : [];
+
+// Validate against CacheKeys enum
+if (FORCED_IN_MEMORY_CACHE_NAMESPACES.length > 0) {
+  const validKeys = Object.values(CacheKeys);
+  const invalidKeys = FORCED_IN_MEMORY_CACHE_NAMESPACES.filter((key) => !validKeys.includes(key));
+
+  if (invalidKeys.length > 0) {
+    throw new Error(
+      `Invalid cache keys in FORCED_IN_MEMORY_CACHE_NAMESPACES: ${invalidKeys.join(', ')}. Valid keys: ${validKeys.join(', ')}`,
+    );
+  }
+}
+
 const cacheConfig = {
+  FORCED_IN_MEMORY_CACHE_NAMESPACES,
   USE_REDIS,
   REDIS_URI: process.env.REDIS_URI,
   REDIS_USERNAME: process.env.REDIS_USERNAME,
@@ -23,6 +43,15 @@ const cacheConfig = {
   REDIS_CA: process.env.REDIS_CA ? fs.readFileSync(process.env.REDIS_CA, 'utf8') : null,
   REDIS_KEY_PREFIX: process.env[REDIS_KEY_PREFIX_VAR] || REDIS_KEY_PREFIX || '',
   REDIS_MAX_LISTENERS: math(process.env.REDIS_MAX_LISTENERS, 40),
+  REDIS_PING_INTERVAL: math(process.env.REDIS_PING_INTERVAL, 0),
+  /** Max delay between reconnection attempts in ms */
+  REDIS_RETRY_MAX_DELAY: math(process.env.REDIS_RETRY_MAX_DELAY, 3000),
+  /** Max number of reconnection attempts (0 = infinite) */
+  REDIS_RETRY_MAX_ATTEMPTS: math(process.env.REDIS_RETRY_MAX_ATTEMPTS, 10),
+  /** Connection timeout in ms */
+  REDIS_CONNECT_TIMEOUT: math(process.env.REDIS_CONNECT_TIMEOUT, 10000),
+  /** Queue commands when disconnected */
+  REDIS_ENABLE_OFFLINE_QUEUE: isEnabled(process.env.REDIS_ENABLE_OFFLINE_QUEUE ?? 'true'),
 
   CI: isEnabled(process.env.CI),
   DEBUG_MEMORY_CACHE: isEnabled(process.env.DEBUG_MEMORY_CACHE),

api/cache/cacheConfig.spec.js

@@ -14,6 +14,8 @@ describe('cacheConfig', () => {
     delete process.env.REDIS_KEY_PREFIX_VAR;
     delete process.env.REDIS_KEY_PREFIX;
     delete process.env.USE_REDIS;
+    delete process.env.REDIS_PING_INTERVAL;
+    delete process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES;
 
     // Clear require cache
     jest.resetModules();
@@ -105,4 +107,51 @@ describe('cacheConfig', () => {
       expect(cacheConfig.REDIS_CA).toBeNull();
     });
   });
+
+  describe('REDIS_PING_INTERVAL configuration', () => {
+    test('should default to 0 when REDIS_PING_INTERVAL is not set', () => {
+      const { cacheConfig } = require('./cacheConfig');
+      expect(cacheConfig.REDIS_PING_INTERVAL).toBe(0);
+    });
+
+    test('should use provided REDIS_PING_INTERVAL value', () => {
+      process.env.REDIS_PING_INTERVAL = '300';
+
+      const { cacheConfig } = require('./cacheConfig');
+      expect(cacheConfig.REDIS_PING_INTERVAL).toBe(300);
+    });
+  });
+
+  describe('FORCED_IN_MEMORY_CACHE_NAMESPACES validation', () => {
+    test('should parse comma-separated cache keys correctly', () => {
+      process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES = ' ROLES, STATIC_CONFIG ,MESSAGES ';
+
+      const { cacheConfig } = require('./cacheConfig');
+      expect(cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES).toEqual([
+        'ROLES',
+        'STATIC_CONFIG',
+        'MESSAGES',
+      ]);
+    });
+
+    test('should throw error for invalid cache keys', () => {
+      process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES = 'INVALID_KEY,ROLES';
+
+      expect(() => {
+        require('./cacheConfig');
+      }).toThrow('Invalid cache keys in FORCED_IN_MEMORY_CACHE_NAMESPACES: INVALID_KEY');
+    });
+
+    test('should handle empty string gracefully', () => {
+      process.env.FORCED_IN_MEMORY_CACHE_NAMESPACES = '';
+
+      const { cacheConfig } = require('./cacheConfig');
+      expect(cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES).toEqual([]);
+    });
+
+    test('should handle undefined env var gracefully', () => {
+      const { cacheConfig } = require('./cacheConfig');
+      expect(cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES).toEqual([]);
+    });
+  });
 });

api/cache/cacheFactory.js

@@ -1,12 +1,13 @@
 const KeyvRedis = require('@keyv/redis').default;
 const { Keyv } = require('keyv');
-const { cacheConfig } = require('./cacheConfig');
-const { keyvRedisClient, ioredisClient, GLOBAL_PREFIX_SEPARATOR } = require('./redisClients');
+const { RedisStore } = require('rate-limit-redis');
 const { Time } = require('librechat-data-provider');
+const { logger } = require('@librechat/data-schemas');
 const { RedisStore: ConnectRedis } = require('connect-redis');
 const MemoryStore = require('memorystore')(require('express-session'));
+const { keyvRedisClient, ioredisClient, GLOBAL_PREFIX_SEPARATOR } = require('./redisClients');
+const { cacheConfig } = require('./cacheConfig');
 const { violationFile } = require('./keyvFiles');
-const { RedisStore } = require('rate-limit-redis');
 
 /**
  * Creates a cache instance using Redis or a fallback store. Suitable for general caching needs.
@@ -16,12 +17,25 @@ const { RedisStore } = require('rate-limit-redis');
  * @returns {Keyv} Cache instance.
  */
 const standardCache = (namespace, ttl = undefined, fallbackStore = undefined) => {
-  if (cacheConfig.USE_REDIS) {
-    const keyvRedis = new KeyvRedis(keyvRedisClient);
-    const cache = new Keyv(keyvRedis, { namespace, ttl });
-    keyvRedis.namespace = cacheConfig.REDIS_KEY_PREFIX;
-    keyvRedis.keyPrefixSeparator = GLOBAL_PREFIX_SEPARATOR;
-    return cache;
+  if (
+    cacheConfig.USE_REDIS &&
+    !cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES?.includes(namespace)
+  ) {
+    try {
+      const keyvRedis = new KeyvRedis(keyvRedisClient);
+      const cache = new Keyv(keyvRedis, { namespace, ttl });
+      keyvRedis.namespace = cacheConfig.REDIS_KEY_PREFIX;
+      keyvRedis.keyPrefixSeparator = GLOBAL_PREFIX_SEPARATOR;
+
+      cache.on('error', (err) => {
+        logger.error(`Cache error in namespace ${namespace}:`, err);
+      });
+
+      return cache;
+    } catch (err) {
+      logger.error(`Failed to create Redis cache for namespace ${namespace}:`, err);
+      throw err;
+    }
   }
   if (fallbackStore) return new Keyv({ store: fallbackStore, namespace, ttl });
   return new Keyv({ namespace, ttl });
@@ -47,7 +61,13 @@ const violationCache = (namespace, ttl = undefined) => {
 const sessionCache = (namespace, ttl = undefined) => {
   namespace = namespace.endsWith(':') ? namespace : `${namespace}:`;
   if (!cacheConfig.USE_REDIS) return new MemoryStore({ ttl, checkPeriod: Time.ONE_DAY });
-  return new ConnectRedis({ client: ioredisClient, ttl, prefix: namespace });
+  const store = new ConnectRedis({ client: ioredisClient, ttl, prefix: namespace });
+  if (ioredisClient) {
+    ioredisClient.on('error', (err) => {
+      logger.error(`Session store Redis error for namespace ${namespace}:`, err);
+    });
+  }
+  return store;
 };
 
 /**
@@ -59,8 +79,30 @@ const limiterCache = (prefix) => {
   if (!prefix) throw new Error('prefix is required');
   if (!cacheConfig.USE_REDIS) return undefined;
   prefix = prefix.endsWith(':') ? prefix : `${prefix}:`;
-  return new RedisStore({ sendCommand, prefix });
+
+  try {
+    if (!ioredisClient) {
+      logger.warn(`Redis client not available for rate limiter with prefix ${prefix}`);
+      return undefined;
+    }
+
+    return new RedisStore({ sendCommand, prefix });
+  } catch (err) {
+    logger.error(`Failed to create Redis rate limiter for prefix ${prefix}:`, err);
+    return undefined;
+  }
+};
+
+const sendCommand = (...args) => {
+  if (!ioredisClient) {
+    logger.warn('Redis client not available for command execution');
+    return Promise.reject(new Error('Redis client not available'));
+  }
+
+  return ioredisClient.call(...args).catch((err) => {
+    logger.error('Redis command execution failed:', err);
+    throw err;
+  });
 };
-const sendCommand = (...args) => ioredisClient?.call(...args);
 
 module.exports = { standardCache, sessionCache, violationCache, limiterCache };

api/cache/cacheFactory.spec.js

@@ -6,13 +6,17 @@ const mockKeyvRedis = {
   keyPrefixSeparator: '',
 };
 
-const mockKeyv = jest.fn().mockReturnValue({ mock: 'keyv' });
+const mockKeyv = jest.fn().mockReturnValue({
+  mock: 'keyv',
+  on: jest.fn(),
+});
 const mockConnectRedis = jest.fn().mockReturnValue({ mock: 'connectRedis' });
 const mockMemoryStore = jest.fn().mockReturnValue({ mock: 'memoryStore' });
 const mockRedisStore = jest.fn().mockReturnValue({ mock: 'redisStore' });
 
 const mockIoredisClient = {
   call: jest.fn(),
+  on: jest.fn(),
 };
 
 const mockKeyvRedisClient = {};
@@ -31,6 +35,7 @@ jest.mock('./cacheConfig', () => ({
   cacheConfig: {
     USE_REDIS: false,
     REDIS_KEY_PREFIX: 'test',
+    FORCED_IN_MEMORY_CACHE_NAMESPACES: [],
   },
 }));
 
@@ -52,6 +57,14 @@ jest.mock('rate-limit-redis', () => ({
   RedisStore: mockRedisStore,
 }));
 
+jest.mock('@librechat/data-schemas', () => ({
+  logger: {
+    error: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+  },
+}));
+
 // Import after mocking
 const { standardCache, sessionCache, violationCache, limiterCache } = require('./cacheFactory');
 const { cacheConfig } = require('./cacheConfig');
@@ -63,6 +76,7 @@ describe('cacheFactory', () => {
     // Reset cache config mock
     cacheConfig.USE_REDIS = false;
     cacheConfig.REDIS_KEY_PREFIX = 'test';
+    cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES = [];
   });
 
   describe('redisCache', () => {
@@ -116,6 +130,52 @@ describe('cacheFactory', () => {
 
       expect(mockKeyv).toHaveBeenCalledWith({ namespace: undefined, ttl: undefined });
     });
+
+    it('should use fallback when namespace is in FORCED_IN_MEMORY_CACHE_NAMESPACES', () => {
+      cacheConfig.USE_REDIS = true;
+      cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES = ['forced-memory'];
+      const namespace = 'forced-memory';
+      const ttl = 3600;
+
+      standardCache(namespace, ttl);
+
+      expect(require('@keyv/redis').default).not.toHaveBeenCalled();
+      expect(mockKeyv).toHaveBeenCalledWith({ namespace, ttl });
+    });
+
+    it('should use Redis when namespace is not in FORCED_IN_MEMORY_CACHE_NAMESPACES', () => {
+      cacheConfig.USE_REDIS = true;
+      cacheConfig.FORCED_IN_MEMORY_CACHE_NAMESPACES = ['other-namespace'];
+      const namespace = 'test-namespace';
+      const ttl = 3600;
+
+      standardCache(namespace, ttl);
+
+      expect(require('@keyv/redis').default).toHaveBeenCalledWith(mockKeyvRedisClient);
+      expect(mockKeyv).toHaveBeenCalledWith(mockKeyvRedis, { namespace, ttl });
+    });
+
+    it('should throw error when Redis cache creation fails', () => {
+      cacheConfig.USE_REDIS = true;
+      const namespace = 'test-namespace';
+      const ttl = 3600;
+      const testError = new Error('Redis connection failed');
+
+      const KeyvRedis = require('@keyv/redis').default;
+      KeyvRedis.mockImplementationOnce(() => {
+        throw testError;
+      });
+
+      expect(() => standardCache(namespace, ttl)).toThrow('Redis connection failed');
+
+      const { logger } = require('@librechat/data-schemas');
+      expect(logger.error).toHaveBeenCalledWith(
+        `Failed to create Redis cache for namespace ${namespace}:`,
+        testError,
+      );
+
+      expect(mockKeyv).not.toHaveBeenCalled();
+    });
   });
 
   describe('violationCache', () => {
@@ -207,6 +267,86 @@ describe('cacheFactory', () => {
         checkPeriod: Time.ONE_DAY,
       });
     });
+
+    it('should throw error when ConnectRedis constructor fails', () => {
+      cacheConfig.USE_REDIS = true;
+      const namespace = 'sessions';
+      const ttl = 86400;
+
+      // Mock ConnectRedis to throw an error during construction
+      const redisError = new Error('Redis connection failed');
+      mockConnectRedis.mockImplementationOnce(() => {
+        throw redisError;
+      });
+
+      // The error should propagate up, not be caught
+      expect(() => sessionCache(namespace, ttl)).toThrow('Redis connection failed');
+
+      // Verify that MemoryStore was NOT used as fallback
+      expect(mockMemoryStore).not.toHaveBeenCalled();
+    });
+
+    it('should register error handler but let errors propagate to Express', () => {
+      cacheConfig.USE_REDIS = true;
+      const namespace = 'sessions';
+
+      // Create a mock session store with middleware methods
+      const mockSessionStore = {
+        get: jest.fn(),
+        set: jest.fn(),
+        destroy: jest.fn(),
+      };
+      mockConnectRedis.mockReturnValue(mockSessionStore);
+
+      const store = sessionCache(namespace);
+
+      // Verify error handler was registered
+      expect(mockIoredisClient.on).toHaveBeenCalledWith('error', expect.any(Function));
+
+      // Get the error handler
+      const errorHandler = mockIoredisClient.on.mock.calls.find((call) => call[0] === 'error')[1];
+
+      // Simulate an error from Redis during a session operation
+      const redisError = new Error('Socket closed unexpectedly');
+
+      // The error handler should log but not swallow the error
+      const { logger } = require('@librechat/data-schemas');
+      errorHandler(redisError);
+
+      expect(logger.error).toHaveBeenCalledWith(
+        `Session store Redis error for namespace ${namespace}::`,
+        redisError,
+      );
+
+      // Now simulate what happens when session middleware tries to use the store
+      const callback = jest.fn();
+      mockSessionStore.get.mockImplementation((sid, cb) => {
+        cb(new Error('Redis connection lost'));
+      });
+
+      // Call the store's get method (as Express session would)
+      store.get('test-session-id', callback);
+
+      // The error should be passed to the callback, not swallowed
+      expect(callback).toHaveBeenCalledWith(new Error('Redis connection lost'));
+    });
+
+    it('should handle null ioredisClient gracefully', () => {
+      cacheConfig.USE_REDIS = true;
+      const namespace = 'sessions';
+
+      // Temporarily set ioredisClient to null (simulating connection not established)
+      const originalClient = require('./redisClients').ioredisClient;
+      require('./redisClients').ioredisClient = null;
+
+      // ConnectRedis might accept null client but would fail on first use
+      // The important thing is it doesn't throw uncaught exceptions during construction
+      const store = sessionCache(namespace);
+      expect(store).toBeDefined();
+
+      // Restore original client
+      require('./redisClients').ioredisClient = originalClient;
+    });
   });
 
   describe('limiterCache', () => {
@@ -248,8 +388,10 @@ describe('cacheFactory', () => {
       });
     });
 
-    it('should pass sendCommand function that calls ioredisClient.call', () => {
+    it('should pass sendCommand function that calls ioredisClient.call', async () => {
       cacheConfig.USE_REDIS = true;
+      mockIoredisClient.call.mockResolvedValue('test-value');
+
       limiterCache('rate-limit');
 
       const sendCommandCall = mockRedisStore.mock.calls[0][0];
@@ -257,9 +399,29 @@ describe('cacheFactory', () => {
 
       // Test that sendCommand properly delegates to ioredisClient.call
       const args = ['GET', 'test-key'];
-      sendCommand(...args);
+      const result = await sendCommand(...args);
 
       expect(mockIoredisClient.call).toHaveBeenCalledWith(...args);
+      expect(result).toBe('test-value');
+    });
+
+    it('should handle sendCommand errors properly', async () => {
+      cacheConfig.USE_REDIS = true;
+
+      // Mock the call method to reject with an error
+      const testError = new Error('Redis error');
+      mockIoredisClient.call.mockRejectedValue(testError);
+
+      limiterCache('rate-limit');
+
+      const sendCommandCall = mockRedisStore.mock.calls[0][0];
+      const sendCommand = sendCommandCall.sendCommand;
+
+      // Test that sendCommand properly handles errors
+      const args = ['GET', 'test-key'];
+
+      await expect(sendCommand(...args)).rejects.toThrow('Redis error');
+      expect(mockIoredisClient.call).toHaveBeenCalledWith(...args);
     });
 
     it('should handle undefined prefix', () => {

api/cache/getLogStores.js

@@ -33,6 +33,7 @@ const namespaces = {
   [CacheKeys.ROLES]: standardCache(CacheKeys.ROLES),
   [CacheKeys.MCP_TOOLS]: standardCache(CacheKeys.MCP_TOOLS),
   [CacheKeys.CONFIG_STORE]: standardCache(CacheKeys.CONFIG_STORE),
+  [CacheKeys.STATIC_CONFIG]: standardCache(CacheKeys.STATIC_CONFIG),
   [CacheKeys.PENDING_REQ]: standardCache(CacheKeys.PENDING_REQ),
   [CacheKeys.ENCODED_DOMAINS]: new Keyv({ store: keyvMongo, namespace: CacheKeys.ENCODED_DOMAINS }),
   [CacheKeys.ABORT_KEYS]: standardCache(CacheKeys.ABORT_KEYS, Time.TEN_MINUTES),

api/cache/redisClients.js

@@ -1,6 +1,7 @@
 const IoRedis = require('ioredis');
-const { cacheConfig } = require('./cacheConfig');
+const { logger } = require('@librechat/data-schemas');
 const { createClient, createCluster } = require('@keyv/redis');
+const { cacheConfig } = require('./cacheConfig');
 
 const GLOBAL_PREFIX_SEPARATOR = '::';
 
@@ -12,31 +13,136 @@ const ca = cacheConfig.REDIS_CA;
 /** @type {import('ioredis').Redis | import('ioredis').Cluster | null} */
 let ioredisClient = null;
 if (cacheConfig.USE_REDIS) {
+  /** @type {import('ioredis').RedisOptions | import('ioredis').ClusterOptions} */
   const redisOptions = {
     username: username,
     password: password,
     tls: ca ? { ca } : undefined,
     keyPrefix: `${cacheConfig.REDIS_KEY_PREFIX}${GLOBAL_PREFIX_SEPARATOR}`,
     maxListeners: cacheConfig.REDIS_MAX_LISTENERS,
+    retryStrategy: (times) => {
+      if (
+        cacheConfig.REDIS_RETRY_MAX_ATTEMPTS > 0 &&
+        times > cacheConfig.REDIS_RETRY_MAX_ATTEMPTS
+      ) {
+        logger.error(
+          `ioredis giving up after ${cacheConfig.REDIS_RETRY_MAX_ATTEMPTS} reconnection attempts`,
+        );
+        return null;
+      }
+      const delay = Math.min(times * 50, cacheConfig.REDIS_RETRY_MAX_DELAY);
+      logger.info(`ioredis reconnecting... attempt ${times}, delay ${delay}ms`);
+      return delay;
+    },
+    reconnectOnError: (err) => {
+      const targetError = 'READONLY';
+      if (err.message.includes(targetError)) {
+        logger.warn('ioredis reconnecting due to READONLY error');
+        return true;
+      }
+      return false;
+    },
+    enableOfflineQueue: cacheConfig.REDIS_ENABLE_OFFLINE_QUEUE,
+    connectTimeout: cacheConfig.REDIS_CONNECT_TIMEOUT,
+    maxRetriesPerRequest: 3,
   };
 
   ioredisClient =
     urls.length === 1
       ? new IoRedis(cacheConfig.REDIS_URI, redisOptions)
-      : new IoRedis.Cluster(cacheConfig.REDIS_URI, { redisOptions });
+      : new IoRedis.Cluster(cacheConfig.REDIS_URI, {
+          redisOptions,
+          clusterRetryStrategy: (times) => {
+            if (
+              cacheConfig.REDIS_RETRY_MAX_ATTEMPTS > 0 &&
+              times > cacheConfig.REDIS_RETRY_MAX_ATTEMPTS
+            ) {
+              logger.error(
+                `ioredis cluster giving up after ${cacheConfig.REDIS_RETRY_MAX_ATTEMPTS} reconnection attempts`,
+              );
+              return null;
+            }
+            const delay = Math.min(times * 100, cacheConfig.REDIS_RETRY_MAX_DELAY);
+            logger.info(`ioredis cluster reconnecting... attempt ${times}, delay ${delay}ms`);
+            return delay;
+          },
+          enableOfflineQueue: cacheConfig.REDIS_ENABLE_OFFLINE_QUEUE,
+        });
 
-  // Pinging the Redis server every 5 minutes to keep the connection alive
-  const pingInterval = setInterval(() => ioredisClient.ping(), 5 * 60 * 1000);
-  ioredisClient.on('close', () => clearInterval(pingInterval));
-  ioredisClient.on('end', () => clearInterval(pingInterval));
+  ioredisClient.on('error', (err) => {
+    logger.error('ioredis client error:', err);
+  });
+
+  ioredisClient.on('connect', () => {
+    logger.info('ioredis client connected');
+  });
+
+  ioredisClient.on('ready', () => {
+    logger.info('ioredis client ready');
+  });
+
+  ioredisClient.on('reconnecting', (delay) => {
+    logger.info(`ioredis client reconnecting in ${delay}ms`);
+  });
+
+  ioredisClient.on('close', () => {
+    logger.warn('ioredis client connection closed');
+  });
+
+  /** Ping Interval to keep the Redis server connection alive (if enabled) */
+  let pingInterval = null;
+  const clearPingInterval = () => {
+    if (pingInterval) {
+      clearInterval(pingInterval);
+      pingInterval = null;
+    }
+  };
+
+  if (cacheConfig.REDIS_PING_INTERVAL > 0) {
+    pingInterval = setInterval(() => {
+      if (ioredisClient && ioredisClient.status === 'ready') {
+        ioredisClient.ping().catch((err) => {
+          logger.error('ioredis ping failed:', err);
+        });
+      }
+    }, cacheConfig.REDIS_PING_INTERVAL * 1000);
+    ioredisClient.on('close', clearPingInterval);
+    ioredisClient.on('end', clearPingInterval);
+  }
 }
 
 /** @type {import('@keyv/redis').RedisClient | import('@keyv/redis').RedisCluster | null} */
 let keyvRedisClient = null;
 if (cacheConfig.USE_REDIS) {
-  // ** WARNING ** Keyv Redis client does not support Prefix like ioredis above.
-  // The prefix feature will be handled by the Keyv-Redis store in cacheFactory.js
-  const redisOptions = { username, password, socket: { tls: ca != null, ca } };
+  /**
+   * ** WARNING ** Keyv Redis client does not support Prefix like ioredis above.
+   * The prefix feature will be handled by the Keyv-Redis store in cacheFactory.js
+   * @type {import('@keyv/redis').RedisClientOptions | import('@keyv/redis').RedisClusterOptions}
+   */
+  const redisOptions = {
+    username,
+    password,
+    socket: {
+      tls: ca != null,
+      ca,
+      connectTimeout: cacheConfig.REDIS_CONNECT_TIMEOUT,
+      reconnectStrategy: (retries) => {
+        if (
+          cacheConfig.REDIS_RETRY_MAX_ATTEMPTS > 0 &&
+          retries > cacheConfig.REDIS_RETRY_MAX_ATTEMPTS
+        ) {
+          logger.error(
+            `@keyv/redis client giving up after ${cacheConfig.REDIS_RETRY_MAX_ATTEMPTS} reconnection attempts`,
+          );
+          return new Error('Max reconnection attempts reached');
+        }
+        const delay = Math.min(retries * 100, cacheConfig.REDIS_RETRY_MAX_DELAY);
+        logger.info(`@keyv/redis reconnecting... attempt ${retries}, delay ${delay}ms`);
+        return delay;
+      },
+    },
+    disableOfflineQueue: !cacheConfig.REDIS_ENABLE_OFFLINE_QUEUE,
+  };
 
   keyvRedisClient =
     urls.length === 1
@@ -48,10 +154,51 @@ if (cacheConfig.USE_REDIS) {
 
   keyvRedisClient.setMaxListeners(cacheConfig.REDIS_MAX_LISTENERS);
 
-  // Pinging the Redis server every 5 minutes to keep the connection alive
-  const keyvPingInterval = setInterval(() => keyvRedisClient.ping(), 5 * 60 * 1000);
-  keyvRedisClient.on('disconnect', () => clearInterval(keyvPingInterval));
-  keyvRedisClient.on('end', () => clearInterval(keyvPingInterval));
+  keyvRedisClient.on('error', (err) => {
+    logger.error('@keyv/redis client error:', err);
+  });
+
+  keyvRedisClient.on('connect', () => {
+    logger.info('@keyv/redis client connected');
+  });
+
+  keyvRedisClient.on('ready', () => {
+    logger.info('@keyv/redis client ready');
+  });
+
+  keyvRedisClient.on('reconnecting', () => {
+    logger.info('@keyv/redis client reconnecting...');
+  });
+
+  keyvRedisClient.on('disconnect', () => {
+    logger.warn('@keyv/redis client disconnected');
+  });
+
+  keyvRedisClient.connect().catch((err) => {
+    logger.error('@keyv/redis initial connection failed:', err);
+    throw err;
+  });
+
+  /** Ping Interval to keep the Redis server connection alive (if enabled) */
+  let pingInterval = null;
+  const clearPingInterval = () => {
+    if (pingInterval) {
+      clearInterval(pingInterval);
+      pingInterval = null;
+    }
+  };
+
+  if (cacheConfig.REDIS_PING_INTERVAL > 0) {
+    pingInterval = setInterval(() => {
+      if (keyvRedisClient && keyvRedisClient.isReady) {
+        keyvRedisClient.ping().catch((err) => {
+          logger.error('@keyv/redis ping failed:', err);
+        });
+      }
+    }, cacheConfig.REDIS_PING_INTERVAL * 1000);
+    keyvRedisClient.on('disconnect', clearPingInterval);
+    keyvRedisClient.on('end', clearPingInterval);
+  }
 }
 
 module.exports = { ioredisClient, keyvRedisClient, GLOBAL_PREFIX_SEPARATOR };

api/models/Conversation.js

@@ -1,6 +1,6 @@
 const { logger } = require('@librechat/data-schemas');
 const { createTempChatExpirationDate } = require('@librechat/api');
-const getCustomConfig = require('~/server/services/Config/getCustomConfig');
+const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
 const { getMessages, deleteMessages } = require('./Message');
 const { Conversation } = require('~/db/models');
 

api/models/Conversation.spec.js

@@ -0,0 +1,572 @@
+const mongoose = require('mongoose');
+const { v4: uuidv4 } = require('uuid');
+const { EModelEndpoint } = require('librechat-data-provider');
+const { MongoMemoryServer } = require('mongodb-memory-server');
+const {
+  deleteNullOrEmptyConversations,
+  searchConversation,
+  getConvosByCursor,
+  getConvosQueried,
+  getConvoFiles,
+  getConvoTitle,
+  deleteConvos,
+  saveConvo,
+  getConvo,
+} = require('./Conversation');
+jest.mock('~/server/services/Config/getCustomConfig');
+jest.mock('./Message');
+const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
+const { getMessages, deleteMessages } = require('./Message');
+
+const { Conversation } = require('~/db/models');
+
+describe('Conversation Operations', () => {
+  let mongoServer;
+  let mockReq;
+  let mockConversationData;
+
+  beforeAll(async () => {
+    mongoServer = await MongoMemoryServer.create();
+    const mongoUri = mongoServer.getUri();
+    await mongoose.connect(mongoUri);
+  });
+
+  afterAll(async () => {
+    await mongoose.disconnect();
+    await mongoServer.stop();
+  });
+
+  beforeEach(async () => {
+    // Clear database
+    await Conversation.deleteMany({});
+
+    // Reset mocks
+    jest.clearAllMocks();
+
+    // Default mock implementations
+    getMessages.mockResolvedValue([]);
+    deleteMessages.mockResolvedValue({ deletedCount: 0 });
+
+    mockReq = {
+      user: { id: 'user123' },
+      body: {},
+    };
+
+    mockConversationData = {
+      conversationId: uuidv4(),
+      title: 'Test Conversation',
+      endpoint: EModelEndpoint.openAI,
+    };
+  });
+
+  describe('saveConvo', () => {
+    it('should save a conversation for an authenticated user', async () => {
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.user).toBe('user123');
+      expect(result.title).toBe('Test Conversation');
+      expect(result.endpoint).toBe(EModelEndpoint.openAI);
+
+      // Verify the conversation was actually saved to the database
+      const savedConvo = await Conversation.findOne({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+      });
+      expect(savedConvo).toBeTruthy();
+      expect(savedConvo.title).toBe('Test Conversation');
+    });
+
+    it('should query messages when saving a conversation', async () => {
+      // Mock messages as ObjectIds
+      const mongoose = require('mongoose');
+      const mockMessages = [new mongoose.Types.ObjectId(), new mongoose.Types.ObjectId()];
+      getMessages.mockResolvedValue(mockMessages);
+
+      await saveConvo(mockReq, mockConversationData);
+
+      // Verify that getMessages was called with correct parameters
+      expect(getMessages).toHaveBeenCalledWith(
+        { conversationId: mockConversationData.conversationId },
+        '_id',
+      );
+    });
+
+    it('should handle newConversationId when provided', async () => {
+      const newConversationId = uuidv4();
+      const result = await saveConvo(mockReq, {
+        ...mockConversationData,
+        newConversationId,
+      });
+
+      expect(result.conversationId).toBe(newConversationId);
+    });
+
+    it('should handle unsetFields metadata', async () => {
+      const metadata = {
+        unsetFields: { someField: 1 },
+      };
+
+      await saveConvo(mockReq, mockConversationData, metadata);
+
+      const savedConvo = await Conversation.findOne({
+        conversationId: mockConversationData.conversationId,
+      });
+      expect(savedConvo.someField).toBeUndefined();
+    });
+  });
+
+  describe('isTemporary conversation handling', () => {
+    it('should save a conversation with expiredAt when isTemporary is true', async () => {
+      // Mock custom config with 24 hour retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 24,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveConvo(mockReq, mockConversationData);
+      const afterSave = new Date();
+
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.expiredAt).toBeDefined();
+      expect(result.expiredAt).toBeInstanceOf(Date);
+
+      // Verify expiredAt is approximately 24 hours in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 24 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        new Date(afterSave.getTime() + 24 * 60 * 60 * 1000 + 1000).getTime(),
+      );
+    });
+
+    it('should save a conversation without expiredAt when isTemporary is false', async () => {
+      mockReq.body = { isTemporary: false };
+
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should save a conversation without expiredAt when isTemporary is not provided', async () => {
+      // No isTemporary in body
+      mockReq.body = {};
+
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should use custom retention period from config', async () => {
+      // Mock custom config with 48 hour retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 48,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 48 hours in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 48 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle minimum retention period (1 hour)', async () => {
+      // Mock custom config with less than minimum retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 0.5, // Half hour - should be clamped to 1 hour
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 1 hour in the future (minimum)
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 1 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle maximum retention period (8760 hours)', async () => {
+      // Mock custom config with more than maximum retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 10000, // Should be clamped to 8760 hours
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 8760 hours (1 year) in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 8760 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle getCustomConfig errors gracefully', async () => {
+      // Mock getCustomConfig to throw an error
+      getCustomConfig.mockRejectedValue(new Error('Config service unavailable'));
+
+      mockReq.body = { isTemporary: true };
+
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      // Should still save the conversation but with expiredAt as null
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should use default retention when config is not provided', async () => {
+      // Mock getCustomConfig to return empty config
+      getCustomConfig.mockResolvedValue({});
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Default retention is 30 days (720 hours)
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 30 * 24 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should update expiredAt when saving existing temporary conversation', async () => {
+      // First save a temporary conversation
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 24,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+      const firstSave = await saveConvo(mockReq, mockConversationData);
+      const originalExpiredAt = firstSave.expiredAt;
+
+      // Wait a bit to ensure time difference
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Save again with same conversationId but different title
+      const updatedData = { ...mockConversationData, title: 'Updated Title' };
+      const secondSave = await saveConvo(mockReq, updatedData);
+
+      // Should update title and create new expiredAt
+      expect(secondSave.title).toBe('Updated Title');
+      expect(secondSave.expiredAt).toBeDefined();
+      expect(new Date(secondSave.expiredAt).getTime()).toBeGreaterThan(
+        new Date(originalExpiredAt).getTime(),
+      );
+    });
+
+    it('should not set expiredAt when updating non-temporary conversation', async () => {
+      // First save a non-temporary conversation
+      mockReq.body = { isTemporary: false };
+      const firstSave = await saveConvo(mockReq, mockConversationData);
+      expect(firstSave.expiredAt).toBeNull();
+
+      // Update without isTemporary flag
+      mockReq.body = {};
+      const updatedData = { ...mockConversationData, title: 'Updated Title' };
+      const secondSave = await saveConvo(mockReq, updatedData);
+
+      expect(secondSave.title).toBe('Updated Title');
+      expect(secondSave.expiredAt).toBeNull();
+    });
+
+    it('should filter out expired conversations in getConvosByCursor', async () => {
+      // Create some test conversations
+      const nonExpiredConvo = await Conversation.create({
+        conversationId: uuidv4(),
+        user: 'user123',
+        title: 'Non-expired',
+        endpoint: EModelEndpoint.openAI,
+        expiredAt: null,
+        updatedAt: new Date(),
+      });
+
+      await Conversation.create({
+        conversationId: uuidv4(),
+        user: 'user123',
+        title: 'Future expired',
+        endpoint: EModelEndpoint.openAI,
+        expiredAt: new Date(Date.now() + 24 * 60 * 60 * 1000), // 24 hours from now
+        updatedAt: new Date(),
+      });
+
+      // Mock Meili search
+      Conversation.meiliSearch = jest.fn().mockResolvedValue({ hits: [] });
+
+      const result = await getConvosByCursor('user123');
+
+      // Should only return conversations with null or non-existent expiredAt
+      expect(result.conversations).toHaveLength(1);
+      expect(result.conversations[0].conversationId).toBe(nonExpiredConvo.conversationId);
+    });
+
+    it('should filter out expired conversations in getConvosQueried', async () => {
+      // Create test conversations
+      const nonExpiredConvo = await Conversation.create({
+        conversationId: uuidv4(),
+        user: 'user123',
+        title: 'Non-expired',
+        endpoint: EModelEndpoint.openAI,
+        expiredAt: null,
+      });
+
+      const expiredConvo = await Conversation.create({
+        conversationId: uuidv4(),
+        user: 'user123',
+        title: 'Expired',
+        endpoint: EModelEndpoint.openAI,
+        expiredAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+      });
+
+      const convoIds = [
+        { conversationId: nonExpiredConvo.conversationId },
+        { conversationId: expiredConvo.conversationId },
+      ];
+
+      const result = await getConvosQueried('user123', convoIds);
+
+      // Should only return the non-expired conversation
+      expect(result.conversations).toHaveLength(1);
+      expect(result.conversations[0].conversationId).toBe(nonExpiredConvo.conversationId);
+      expect(result.convoMap[nonExpiredConvo.conversationId]).toBeDefined();
+      expect(result.convoMap[expiredConvo.conversationId]).toBeUndefined();
+    });
+  });
+
+  describe('searchConversation', () => {
+    it('should find a conversation by conversationId', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        title: 'Test',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      const result = await searchConversation(mockConversationData.conversationId);
+
+      expect(result).toBeTruthy();
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.user).toBe('user123');
+      expect(result.title).toBeUndefined(); // Only returns conversationId and user
+    });
+
+    it('should return null if conversation not found', async () => {
+      const result = await searchConversation('non-existent-id');
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('getConvo', () => {
+    it('should retrieve a conversation for a user', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        title: 'Test Conversation',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      const result = await getConvo('user123', mockConversationData.conversationId);
+
+      expect(result.conversationId).toBe(mockConversationData.conversationId);
+      expect(result.user).toBe('user123');
+      expect(result.title).toBe('Test Conversation');
+    });
+
+    it('should return null if conversation not found', async () => {
+      const result = await getConvo('user123', 'non-existent-id');
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('getConvoTitle', () => {
+    it('should return the conversation title', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        title: 'Test Title',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      const result = await getConvoTitle('user123', mockConversationData.conversationId);
+      expect(result).toBe('Test Title');
+    });
+
+    it('should return null if conversation has no title', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        title: null,
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      const result = await getConvoTitle('user123', mockConversationData.conversationId);
+      expect(result).toBeNull();
+    });
+
+    it('should return "New Chat" if conversation not found', async () => {
+      const result = await getConvoTitle('user123', 'non-existent-id');
+      expect(result).toBe('New Chat');
+    });
+  });
+
+  describe('getConvoFiles', () => {
+    it('should return conversation files', async () => {
+      const files = ['file1', 'file2'];
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        endpoint: EModelEndpoint.openAI,
+        files,
+      });
+
+      const result = await getConvoFiles(mockConversationData.conversationId);
+      expect(result).toEqual(files);
+    });
+
+    it('should return empty array if no files', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      const result = await getConvoFiles(mockConversationData.conversationId);
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array if conversation not found', async () => {
+      const result = await getConvoFiles('non-existent-id');
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('deleteConvos', () => {
+    it('should delete conversations and associated messages', async () => {
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user123',
+        title: 'To Delete',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      deleteMessages.mockResolvedValue({ deletedCount: 5 });
+
+      const result = await deleteConvos('user123', {
+        conversationId: mockConversationData.conversationId,
+      });
+
+      expect(result.deletedCount).toBe(1);
+      expect(result.messages.deletedCount).toBe(5);
+      expect(deleteMessages).toHaveBeenCalledWith({
+        conversationId: { $in: [mockConversationData.conversationId] },
+      });
+
+      // Verify conversation was deleted
+      const deletedConvo = await Conversation.findOne({
+        conversationId: mockConversationData.conversationId,
+      });
+      expect(deletedConvo).toBeNull();
+    });
+
+    it('should throw error if no conversations found', async () => {
+      await expect(deleteConvos('user123', { conversationId: 'non-existent' })).rejects.toThrow(
+        'Conversation not found or already deleted.',
+      );
+    });
+  });
+
+  describe('deleteNullOrEmptyConversations', () => {
+    it('should delete conversations with null, empty, or missing conversationIds', async () => {
+      // Since conversationId is required by the schema, we can't create documents with null/missing IDs
+      // This test should verify the function works when such documents exist (e.g., from data corruption)
+
+      // For this test, let's create a valid conversation and verify the function doesn't delete it
+      await Conversation.create({
+        conversationId: mockConversationData.conversationId,
+        user: 'user4',
+        endpoint: EModelEndpoint.openAI,
+      });
+
+      deleteMessages.mockResolvedValue({ deletedCount: 0 });
+
+      const result = await deleteNullOrEmptyConversations();
+
+      expect(result.conversations.deletedCount).toBe(0); // No invalid conversations to delete
+      expect(result.messages.deletedCount).toBe(0);
+
+      // Verify valid conversation remains
+      const remainingConvos = await Conversation.find({});
+      expect(remainingConvos).toHaveLength(1);
+      expect(remainingConvos[0].conversationId).toBe(mockConversationData.conversationId);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle database errors in saveConvo', async () => {
+      // Force a database error by disconnecting
+      await mongoose.disconnect();
+
+      const result = await saveConvo(mockReq, mockConversationData);
+
+      expect(result).toEqual({ message: 'Error saving conversation' });
+
+      // Reconnect for other tests
+      await mongoose.connect(mongoServer.getUri());
+    });
+  });
+});

api/models/Message.js

@@ -1,7 +1,7 @@
 const { z } = require('zod');
 const { logger } = require('@librechat/data-schemas');
 const { createTempChatExpirationDate } = require('@librechat/api');
-const getCustomConfig = require('~/server/services/Config/getCustomConfig');
+const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
 const { Message } = require('~/db/models');
 
 const idSchema = z.string().uuid();

api/models/Message.spec.js

@@ -1,17 +1,21 @@
 const mongoose = require('mongoose');
-const { MongoMemoryServer } = require('mongodb-memory-server');
 const { v4: uuidv4 } = require('uuid');
 const { messageSchema } = require('@librechat/data-schemas');
+const { MongoMemoryServer } = require('mongodb-memory-server');
 
 const {
   saveMessage,
   getMessages,
   updateMessage,
   deleteMessages,
+  bulkSaveMessages,
   updateMessageText,
   deleteMessagesSince,
 } = require('./Message');
 
+jest.mock('~/server/services/Config/getCustomConfig');
+const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
+
 /**
  * @type {import('mongoose').Model<import('@librechat/data-schemas').IMessage>}
  */
@@ -117,21 +121,21 @@ describe('Message Operations', () => {
       const conversationId = uuidv4();
 
       // Create multiple messages in the same conversation
-      const message1 = await saveMessage(mockReq, {
+      await saveMessage(mockReq, {
         messageId: 'msg1',
         conversationId,
         text: 'First message',
         user: 'user123',
       });
 
-      const message2 = await saveMessage(mockReq, {
+      await saveMessage(mockReq, {
         messageId: 'msg2',
         conversationId,
         text: 'Second message',
         user: 'user123',
       });
 
-      const message3 = await saveMessage(mockReq, {
+      await saveMessage(mockReq, {
         messageId: 'msg3',
         conversationId,
         text: 'Third message',
@@ -314,4 +318,265 @@ describe('Message Operations', () => {
       expect(messages[0].text).toBe('Victim message');
     });
   });
+
+  describe('isTemporary message handling', () => {
+    beforeEach(() => {
+      // Reset mocks before each test
+      jest.clearAllMocks();
+    });
+
+    it('should save a message with expiredAt when isTemporary is true', async () => {
+      // Mock custom config with 24 hour retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 24,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveMessage(mockReq, mockMessageData);
+      const afterSave = new Date();
+
+      expect(result.messageId).toBe('msg123');
+      expect(result.expiredAt).toBeDefined();
+      expect(result.expiredAt).toBeInstanceOf(Date);
+
+      // Verify expiredAt is approximately 24 hours in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 24 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        new Date(afterSave.getTime() + 24 * 60 * 60 * 1000 + 1000).getTime(),
+      );
+    });
+
+    it('should save a message without expiredAt when isTemporary is false', async () => {
+      mockReq.body = { isTemporary: false };
+
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.messageId).toBe('msg123');
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should save a message without expiredAt when isTemporary is not provided', async () => {
+      // No isTemporary in body
+      mockReq.body = {};
+
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.messageId).toBe('msg123');
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should use custom retention period from config', async () => {
+      // Mock custom config with 48 hour retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 48,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 48 hours in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 48 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle minimum retention period (1 hour)', async () => {
+      // Mock custom config with less than minimum retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 0.5, // Half hour - should be clamped to 1 hour
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 1 hour in the future (minimum)
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 1 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle maximum retention period (8760 hours)', async () => {
+      // Mock custom config with more than maximum retention
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 10000, // Should be clamped to 8760 hours
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Verify expiredAt is approximately 8760 hours (1 year) in the future
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 8760 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should handle getCustomConfig errors gracefully', async () => {
+      // Mock getCustomConfig to throw an error
+      getCustomConfig.mockRejectedValue(new Error('Config service unavailable'));
+
+      mockReq.body = { isTemporary: true };
+
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      // Should still save the message but with expiredAt as null
+      expect(result.messageId).toBe('msg123');
+      expect(result.expiredAt).toBeNull();
+    });
+
+    it('should use default retention when config is not provided', async () => {
+      // Mock getCustomConfig to return empty config
+      getCustomConfig.mockResolvedValue({});
+
+      mockReq.body = { isTemporary: true };
+
+      const beforeSave = new Date();
+      const result = await saveMessage(mockReq, mockMessageData);
+
+      expect(result.expiredAt).toBeDefined();
+
+      // Default retention is 30 days (720 hours)
+      const expectedExpirationTime = new Date(beforeSave.getTime() + 30 * 24 * 60 * 60 * 1000);
+      const actualExpirationTime = new Date(result.expiredAt);
+
+      expect(actualExpirationTime.getTime()).toBeGreaterThanOrEqual(
+        expectedExpirationTime.getTime() - 1000,
+      );
+      expect(actualExpirationTime.getTime()).toBeLessThanOrEqual(
+        expectedExpirationTime.getTime() + 1000,
+      );
+    });
+
+    it('should not update expiredAt on message update', async () => {
+      // First save a temporary message
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 24,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+      const savedMessage = await saveMessage(mockReq, mockMessageData);
+      const originalExpiredAt = savedMessage.expiredAt;
+
+      // Now update the message without isTemporary flag
+      mockReq.body = {};
+      const updatedMessage = await updateMessage(mockReq, {
+        messageId: 'msg123',
+        text: 'Updated text',
+      });
+
+      // expiredAt should not be in the returned updated message object
+      expect(updatedMessage.expiredAt).toBeUndefined();
+
+      // Verify in database that expiredAt wasn't changed
+      const dbMessage = await Message.findOne({ messageId: 'msg123', user: 'user123' });
+      expect(dbMessage.expiredAt).toEqual(originalExpiredAt);
+    });
+
+    it('should preserve expiredAt when saving existing temporary message', async () => {
+      // First save a temporary message
+      getCustomConfig.mockResolvedValue({
+        interface: {
+          temporaryChatRetention: 24,
+        },
+      });
+
+      mockReq.body = { isTemporary: true };
+      const firstSave = await saveMessage(mockReq, mockMessageData);
+      const originalExpiredAt = firstSave.expiredAt;
+
+      // Wait a bit to ensure time difference
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Save again with same messageId but different text
+      const updatedData = { ...mockMessageData, text: 'Updated text' };
+      const secondSave = await saveMessage(mockReq, updatedData);
+
+      // Should update text but create new expiredAt
+      expect(secondSave.text).toBe('Updated text');
+      expect(secondSave.expiredAt).toBeDefined();
+      expect(new Date(secondSave.expiredAt).getTime()).toBeGreaterThan(
+        new Date(originalExpiredAt).getTime(),
+      );
+    });
+
+    it('should handle bulk operations with temporary messages', async () => {
+      // This test verifies bulkSaveMessages doesn't interfere with expiredAt
+      const messages = [
+        {
+          messageId: 'bulk1',
+          conversationId: uuidv4(),
+          text: 'Bulk message 1',
+          user: 'user123',
+          expiredAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+        },
+        {
+          messageId: 'bulk2',
+          conversationId: uuidv4(),
+          text: 'Bulk message 2',
+          user: 'user123',
+          expiredAt: null,
+        },
+      ];
+
+      await bulkSaveMessages(messages);
+
+      const savedMessages = await Message.find({
+        messageId: { $in: ['bulk1', 'bulk2'] },
+      }).lean();
+
+      expect(savedMessages).toHaveLength(2);
+
+      const bulk1 = savedMessages.find((m) => m.messageId === 'bulk1');
+      const bulk2 = savedMessages.find((m) => m.messageId === 'bulk2');
+
+      expect(bulk1.expiredAt).toBeDefined();
+      expect(bulk2.expiredAt).toBeNull();
+    });
+  });
 });

api/package.json

@@ -49,10 +49,11 @@
     "@langchain/google-vertexai": "^0.2.13",
     "@langchain/openai": "^0.5.18",
     "@langchain/textsplitters": "^0.1.0",
-    "@librechat/agents": "^2.4.67",
+    "@librechat/agents": "^2.4.68",
     "@librechat/api": "*",
     "@librechat/data-schemas": "*",
-    "@node-saml/passport-saml": "^5.0.0",
+    "@modelcontextprotocol/sdk": "^1.17.0",
+    "@node-saml/passport-saml": "^5.1.0",
     "@waylaidwanderer/fetch-event-source": "^3.0.1",
     "axios": "^1.8.2",
     "bcryptjs": "^2.4.3",
@@ -119,7 +120,7 @@
   },
   "devDependencies": {
     "jest": "^29.7.0",
-    "mongodb-memory-server": "^10.1.3",
+    "mongodb-memory-server": "^10.1.4",
     "nodemon": "^3.0.3",
     "supertest": "^7.1.0"
   }

api/server/controllers/agents/client.js

@@ -1022,7 +1022,7 @@ class AgentClient extends BaseClient {
     /** @type {import('@librechat/agents').ClientOptions} */
     let clientOptions = {
       maxTokens: 75,
-      model: agent.model_parameters.model,
+      model: agent.model || agent.model_parameters.model,
     };
 
     let titleProviderConfig = await getProviderConfig(endpoint);

api/server/routes/config.js

@@ -1,10 +1,11 @@
 const express = require('express');
+const { isEnabled } = require('@librechat/api');
 const { logger } = require('@librechat/data-schemas');
 const { CacheKeys, defaultSocialLogins, Constants } = require('librechat-data-provider');
 const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
 const { getLdapConfig } = require('~/server/services/Config/ldap');
 const { getProjectByName } = require('~/models/Project');
-const { isEnabled } = require('~/server/utils');
+const { getMCPManager } = require('~/config');
 const { getLogStores } = require('~/cache');
 
 const router = express.Router();
@@ -102,10 +103,16 @@ router.get('/', async function (req, res) {
     payload.mcpServers = {};
     const config = await getCustomConfig();
     if (config?.mcpServers != null) {
+      const mcpManager = getMCPManager();
+      const oauthServers = mcpManager.getOAuthServers();
+
       for (const serverName in config.mcpServers) {
         const serverConfig = config.mcpServers[serverName];
         payload.mcpServers[serverName] = {
           customUserVars: serverConfig?.customUserVars || {},
+          chatMenu: serverConfig?.chatMenu,
+          isOAuth: oauthServers.has(serverName),
+          startup: serverConfig?.startup,
         };
       }
     }

api/server/routes/mcp.js

@@ -4,6 +4,7 @@ const { MCPOAuthHandler } = require('@librechat/api');
 const { CacheKeys, Constants } = require('librechat-data-provider');
 const { findToken, updateToken, createToken, deleteTokens } = require('~/models');
 const { setCachedTools, getCachedTools, loadCustomConfig } = require('~/server/services/Config');
+const { getMCPSetupData, getServerConnectionStatus } = require('~/server/services/MCP');
 const { getUserPluginAuthValue } = require('~/server/services/PluginService');
 const { getMCPManager, getFlowStateManager } = require('~/config');
 const { requireJwtAuth } = require('~/server/middleware');
@@ -92,7 +93,6 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
       return res.redirect('/oauth/error?error=missing_state');
     }
 
-    // Extract flow ID from state
     const flowId = state;
     logger.debug('[MCP OAuth] Using flow ID from state', { flowId });
 
@@ -115,22 +115,17 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
       hasCodeVerifier: !!flowState.codeVerifier,
     });
 
-    // Complete the OAuth flow
     logger.debug('[MCP OAuth] Completing OAuth flow');
     const tokens = await MCPOAuthHandler.completeOAuthFlow(flowId, code, flowManager);
     logger.info('[MCP OAuth] OAuth flow completed, tokens received in callback route');
 
-    // Try to establish the MCP connection with the new tokens
     try {
       const mcpManager = getMCPManager(flowState.userId);
       logger.debug(`[MCP OAuth] Attempting to reconnect ${serverName} with new OAuth tokens`);
 
-      // For user-level OAuth, try to establish the connection
       if (flowState.userId !== 'system') {
-        // We need to get the user object - in this case we'll need to reconstruct it
         const user = { id: flowState.userId };
 
-        // Try to establish connection with the new tokens
         const userConnection = await mcpManager.getUserConnection({
           user,
           serverName,
@@ -147,10 +142,8 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
           `[MCP OAuth] Successfully reconnected ${serverName} for user ${flowState.userId}`,
         );
 
-        // Fetch and cache tools now that we have a successful connection
         const userTools = (await getCachedTools({ userId: flowState.userId })) || {};
 
-        // Remove any old tools from this server in the user's cache
         const mcpDelimiter = Constants.mcp_delimiter;
         for (const key of Object.keys(userTools)) {
           if (key.endsWith(`${mcpDelimiter}${serverName}`)) {
@@ -158,7 +151,6 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
           }
         }
 
-        // Add the new tools from this server
         const tools = await userConnection.fetchTools();
         for (const tool of tools) {
           const name = `${tool.name}${Constants.mcp_delimiter}${serverName}`;
@@ -172,7 +164,6 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
           };
         }
 
-        // Save the updated user tool cache
         await setCachedTools(userTools, { userId: flowState.userId });
 
         logger.debug(
@@ -182,7 +173,6 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
         logger.debug(`[MCP OAuth] System-level OAuth completed for ${serverName}`);
       }
     } catch (error) {
-      // Don't fail the OAuth callback if reconnection fails - the tokens are still saved
       logger.warn(
         `[MCP OAuth] Failed to reconnect ${serverName} after OAuth, but tokens are saved:`,
         error,
@@ -218,7 +208,6 @@ router.get('/oauth/tokens/:flowId', requireJwtAuth, async (req, res) => {
       return res.status(401).json({ error: 'User not authenticated' });
     }
 
-    // Allow system flows or user-owned flows
     if (!flowId.startsWith(`${user.id}:`) && !flowId.startsWith('system:')) {
       return res.status(403).json({ error: 'Access denied' });
     }
@@ -286,11 +275,7 @@ router.post('/oauth/cancel/:serverName', requireJwtAuth, async (req, res) => {
 
     const flowsCache = getLogStores(CacheKeys.FLOWS);
     const flowManager = getFlowStateManager(flowsCache);
-
-    // Generate the flow ID for this user/server combination
     const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
-
-    // Check if flow exists
     const flowState = await flowManager.getFlowState(flowId, 'mcp_oauth');
 
     if (!flowState) {
@@ -301,8 +286,7 @@ router.post('/oauth/cancel/:serverName', requireJwtAuth, async (req, res) => {
       });
     }
 
-    // Cancel the flow by marking it as failed
-    await flowManager.completeFlow(flowId, 'mcp_oauth', null, 'User cancelled OAuth flow');
+    await flowManager.failFlow(flowId, 'mcp_oauth', 'User cancelled OAuth flow');
 
     logger.info(`[MCP OAuth Cancel] Successfully cancelled OAuth flow for ${serverName}`);
 
@@ -331,7 +315,8 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
 
     logger.info(`[MCP Reinitialize] Reinitializing server: ${serverName}`);
 
-    const config = await loadCustomConfig();
+    const printConfig = false;
+    const config = await loadCustomConfig(printConfig);
     if (!config || !config.mcpServers || !config.mcpServers[serverName]) {
       return res.status(404).json({
         error: `MCP server '${serverName}' not found in configuration`,
@@ -377,8 +362,7 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
           createToken,
           deleteTokens,
         },
-        returnOnOAuth: true, // Return immediately when OAuth is initiated
-        // Add OAuth handlers to capture the OAuth URL when needed
+        returnOnOAuth: true,
         oauthStart: async (authURL) => {
           logger.info(`[MCP Reinitialize] OAuth URL received: ${authURL}`);
           oauthUrl = authURL;
@@ -393,7 +377,6 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
         `[MCP Reinitialize] OAuth state - oauthRequired: ${oauthRequired}, oauthUrl: ${oauthUrl ? 'present' : 'null'}`,
       );
 
-      // Check if this is an OAuth error - if so, the flow state should be set up now
       const isOAuthError =
         err.message?.includes('OAuth') ||
         err.message?.includes('authentication') ||
@@ -406,7 +389,6 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
           `[MCP Reinitialize] OAuth required for ${serverName} (isOAuthError: ${isOAuthError}, oauthRequired: ${oauthRequired}, isOAuthFlowInitiated: ${isOAuthFlowInitiated})`,
         );
         oauthRequired = true;
-        // Don't return error - continue so frontend can handle OAuth
       } else {
         logger.error(
           `[MCP Reinitialize] Error initializing MCP server ${serverName} for user:`,
@@ -416,11 +398,9 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
       }
     }
 
-    // Only fetch and cache tools if we successfully connected (no OAuth required)
     if (userConnection && !oauthRequired) {
       const userTools = (await getCachedTools({ userId: user.id })) || {};
 
-      // Remove any old tools from this server in the user's cache
       const mcpDelimiter = Constants.mcp_delimiter;
       for (const key of Object.keys(userTools)) {
         if (key.endsWith(`${mcpDelimiter}${serverName}`)) {
@@ -428,7 +408,6 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
         }
       }
 
-      // Add the new tools from this server
       const tools = await userConnection.fetchTools();
       for (const tool of tools) {
         const name = `${tool.name}${Constants.mcp_delimiter}${serverName}`;
@@ -442,7 +421,6 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
         };
       }
 
-      // Save the updated user tool cache
       await setCachedTools(userTools, { userId: user.id });
     }
 
@@ -450,11 +428,19 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
       `[MCP Reinitialize] Sending response for ${serverName} - oauthRequired: ${oauthRequired}, oauthUrl: ${oauthUrl ? 'present' : 'null'}`,
     );
 
+    const getResponseMessage = () => {
+      if (oauthRequired) {
+        return `MCP server '${serverName}' ready for OAuth authentication`;
+      }
+      if (userConnection) {
+        return `MCP server '${serverName}' reinitialized successfully`;
+      }
+      return `Failed to reinitialize MCP server '${serverName}'`;
+    };
+
     res.json({
-      success: true,
-      message: oauthRequired
-        ? `MCP server '${serverName}' ready for OAuth authentication`
-        : `MCP server '${serverName}' reinitialized successfully`,
+      success: (userConnection && !oauthRequired) || (oauthRequired && oauthUrl),
+      message: getResponseMessage(),
       serverName,
       oauthRequired,
       oauthUrl,
@@ -467,7 +453,7 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
 
 /**
  * Get connection status for all MCP servers
- * This endpoint returns the actual connection status from MCPManager without disconnecting idle connections
+ * This endpoint returns all app level and user-scoped connection statuses from MCPManager without disconnecting idle connections
  */
 router.get('/connection/status', requireJwtAuth, async (req, res) => {
   try {
@@ -477,84 +463,19 @@ router.get('/connection/status', requireJwtAuth, async (req, res) => {
       return res.status(401).json({ error: 'User not authenticated' });
     }
 
-    const mcpManager = getMCPManager(user.id);
+    const { mcpConfig, appConnections, userConnections, oauthServers } = await getMCPSetupData(
+      user.id,
+    );
     const connectionStatus = {};
 
-    const printConfig = false;
-    const config = await loadCustomConfig(printConfig);
-    const mcpConfig = config?.mcpServers;
-
-    const appConnections = mcpManager.getAllConnections() || new Map();
-    const userConnections = mcpManager.getUserConnections(user.id) || new Map();
-    const oauthServers = mcpManager.getOAuthServers() || new Set();
-
-    if (!mcpConfig) {
-      return res.status(404).json({ error: 'MCP config not found' });
-    }
-
-    // Get flow manager to check for active/timed-out OAuth flows
-    const flowsCache = getLogStores(CacheKeys.FLOWS);
-    const flowManager = getFlowStateManager(flowsCache);
-
     for (const [serverName] of Object.entries(mcpConfig)) {
-      const getConnectionState = (serverName) =>
-        appConnections.get(serverName)?.connectionState ??
-        userConnections.get(serverName)?.connectionState ??
-        'disconnected';
-
-      const baseConnectionState = getConnectionState(serverName);
-
-      let hasActiveOAuthFlow = false;
-      let hasFailedOAuthFlow = false;
-
-      if (baseConnectionState === 'disconnected' && oauthServers.has(serverName)) {
-        try {
-          // Check for user-specific OAuth flows
-          const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
-          const flowState = await flowManager.getFlowState(flowId, 'mcp_oauth');
-          if (flowState) {
-            // Check if flow failed or timed out
-            const flowAge = Date.now() - flowState.createdAt;
-            const flowTTL = flowState.ttl || 180000; // Default 3 minutes
-
-            if (flowState.status === 'FAILED' || flowAge > flowTTL) {
-              hasFailedOAuthFlow = true;
-              logger.debug(`[MCP Connection Status] Found failed OAuth flow for ${serverName}`, {
-                flowId,
-                status: flowState.status,
-                flowAge,
-                flowTTL,
-                timedOut: flowAge > flowTTL,
-              });
-            } else if (flowState.status === 'PENDING') {
-              hasActiveOAuthFlow = true;
-              logger.debug(`[MCP Connection Status] Found active OAuth flow for ${serverName}`, {
-                flowId,
-                flowAge,
-                flowTTL,
-              });
-            }
-          }
-        } catch (error) {
-          logger.error(
-            `[MCP Connection Status] Error checking OAuth flows for ${serverName}:`,
-            error,
-          );
-        }
-      }
-
-      // Determine the final connection state
-      let finalConnectionState = baseConnectionState;
-      if (hasFailedOAuthFlow) {
-        finalConnectionState = 'error'; // Report as error if OAuth failed
-      } else if (hasActiveOAuthFlow && baseConnectionState === 'disconnected') {
-        finalConnectionState = 'connecting'; // Still waiting for OAuth
-      }
-
-      connectionStatus[serverName] = {
-        requiresOAuth: oauthServers.has(serverName),
-        connectionState: finalConnectionState,
-      };
+      connectionStatus[serverName] = await getServerConnectionStatus(
+        user.id,
+        serverName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
     }
 
     res.json({
@@ -562,11 +483,67 @@ router.get('/connection/status', requireJwtAuth, async (req, res) => {
       connectionStatus,
     });
   } catch (error) {
+    if (error.message === 'MCP config not found') {
+      return res.status(404).json({ error: error.message });
+    }
     logger.error('[MCP Connection Status] Failed to get connection status', error);
     res.status(500).json({ error: 'Failed to get connection status' });
   }
 });
 
+/**
+ * Get connection status for a single MCP server
+ * This endpoint returns the connection status for a specific server for a given user
+ */
+router.get('/connection/status/:serverName', requireJwtAuth, async (req, res) => {
+  try {
+    const user = req.user;
+    const { serverName } = req.params;
+
+    if (!user?.id) {
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
+    if (!serverName) {
+      return res.status(400).json({ error: 'Server name is required' });
+    }
+
+    const { mcpConfig, appConnections, userConnections, oauthServers } = await getMCPSetupData(
+      user.id,
+    );
+
+    if (!mcpConfig[serverName]) {
+      return res
+        .status(404)
+        .json({ error: `MCP server '${serverName}' not found in configuration` });
+    }
+
+    const serverStatus = await getServerConnectionStatus(
+      user.id,
+      serverName,
+      appConnections,
+      userConnections,
+      oauthServers,
+    );
+
+    res.json({
+      success: true,
+      serverName,
+      connectionStatus: serverStatus.connectionState,
+      requiresOAuth: serverStatus.requiresOAuth,
+    });
+  } catch (error) {
+    if (error.message === 'MCP config not found') {
+      return res.status(404).json({ error: error.message });
+    }
+    logger.error(
+      `[MCP Per-Server Status] Failed to get connection status for ${req.params.serverName}`,
+      error,
+    );
+    res.status(500).json({ error: 'Failed to get connection status' });
+  }
+});
+
 /**
  * Check which authentication values exist for a specific MCP server
  * This endpoint returns only boolean flags indicating if values are set, not the actual values
@@ -592,19 +569,16 @@ router.get('/:serverName/auth-values', requireJwtAuth, async (req, res) => {
     const pluginKey = `${Constants.mcp_prefix}${serverName}`;
     const authValueFlags = {};
 
-    // Check existence of saved values for each custom user variable (don't fetch actual values)
     if (serverConfig.customUserVars && typeof serverConfig.customUserVars === 'object') {
       for (const varName of Object.keys(serverConfig.customUserVars)) {
         try {
           const value = await getUserPluginAuthValue(user.id, varName, false, pluginKey);
-          // Only store boolean flag indicating if value exists
           authValueFlags[varName] = !!(value && value.length > 0);
         } catch (err) {
           logger.error(
             `[MCP Auth Value Flags] Error checking ${varName} for user ${user.id}:`,
             err,
           );
-          // Default to false if we can't check
           authValueFlags[varName] = false;
         }
       }

api/server/services/Config/getCustomConfig.js

@@ -3,7 +3,6 @@ const { isEnabled, getUserMCPAuthMap } = require('@librechat/api');
 const { CacheKeys, EModelEndpoint } = require('librechat-data-provider');
 const { normalizeEndpointName } = require('~/server/utils');
 const loadCustomConfig = require('./loadCustomConfig');
-const { getCachedTools } = require('./getCachedTools');
 const getLogStores = require('~/cache/getLogStores');
 
 /**
@@ -12,8 +11,8 @@ const getLogStores = require('~/cache/getLogStores');
  * @returns {Promise<TCustomConfig | null>}
  * */
 async function getCustomConfig() {
-  const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  return (await cache.get(CacheKeys.CUSTOM_CONFIG)) || (await loadCustomConfig());
+  const cache = getLogStores(CacheKeys.STATIC_CONFIG);
+  return (await cache.get(CacheKeys.LIBRECHAT_YAML_CONFIG)) || (await loadCustomConfig());
 }
 
 /**
@@ -66,13 +65,9 @@ async function getMCPAuthMap({ userId, tools, findPluginAuthsByKeys }) {
     if (!tools || tools.length === 0) {
       return;
     }
-    const appTools = await getCachedTools({
-      userId,
-    });
     return await getUserMCPAuthMap({
       tools,
       userId,
-      appTools,
       findPluginAuthsByKeys,
     });
   } catch (err) {

api/server/services/Config/loadCustomConfig.js

@@ -120,8 +120,8 @@ https://www.librechat.ai/docs/configuration/stt_tts`);
     .forEach((endpoint) => parseCustomParams(endpoint.name, endpoint.customParams));
 
   if (customConfig.cache) {
-    const cache = getLogStores(CacheKeys.CONFIG_STORE);
-    await cache.set(CacheKeys.CUSTOM_CONFIG, customConfig);
+    const cache = getLogStores(CacheKeys.STATIC_CONFIG);
+    await cache.set(CacheKeys.LIBRECHAT_YAML_CONFIG, customConfig);
   }
 
   if (result.data.modelSpecs) {

api/server/services/MCP.js

@@ -12,7 +12,7 @@ const {
 } = require('@librechat/api');
 const { findToken, createToken, updateToken } = require('~/models');
 const { getMCPManager, getFlowStateManager } = require('~/config');
-const { getCachedTools } = require('./Config');
+const { getCachedTools, loadCustomConfig } = require('./Config');
 const { getLogStores } = require('~/cache');
 
 /**
@@ -235,9 +235,139 @@ async function createMCPTool({ req, res, toolKey, provider: _provider }) {
     responseFormat: AgentConstants.CONTENT_AND_ARTIFACT,
   });
   toolInstance.mcp = true;
+  toolInstance.mcpRawServerName = serverName;
   return toolInstance;
 }
 
+/**
+ * Get MCP setup data including config, connections, and OAuth servers
+ * @param {string} userId - The user ID
+ * @returns {Object} Object containing mcpConfig, appConnections, userConnections, and oauthServers
+ */
+async function getMCPSetupData(userId) {
+  const printConfig = false;
+  const config = await loadCustomConfig(printConfig);
+  const mcpConfig = config?.mcpServers;
+
+  if (!mcpConfig) {
+    throw new Error('MCP config not found');
+  }
+
+  const mcpManager = getMCPManager(userId);
+  const appConnections = mcpManager.getAllConnections() || new Map();
+  const userConnections = mcpManager.getUserConnections(userId) || new Map();
+  const oauthServers = mcpManager.getOAuthServers() || new Set();
+
+  return {
+    mcpConfig,
+    appConnections,
+    userConnections,
+    oauthServers,
+  };
+}
+
+/**
+ * Check OAuth flow status for a user and server
+ * @param {string} userId - The user ID
+ * @param {string} serverName - The server name
+ * @returns {Object} Object containing hasActiveFlow and hasFailedFlow flags
+ */
+async function checkOAuthFlowStatus(userId, serverName) {
+  const flowsCache = getLogStores(CacheKeys.FLOWS);
+  const flowManager = getFlowStateManager(flowsCache);
+  const flowId = MCPOAuthHandler.generateFlowId(userId, serverName);
+
+  try {
+    const flowState = await flowManager.getFlowState(flowId, 'mcp_oauth');
+    if (!flowState) {
+      return { hasActiveFlow: false, hasFailedFlow: false };
+    }
+
+    const flowAge = Date.now() - flowState.createdAt;
+    const flowTTL = flowState.ttl || 180000; // Default 3 minutes
+
+    if (flowState.status === 'FAILED' || flowAge > flowTTL) {
+      const wasCancelled = flowState.error && flowState.error.includes('cancelled');
+
+      if (wasCancelled) {
+        logger.debug(`[MCP Connection Status] Found cancelled OAuth flow for ${serverName}`, {
+          flowId,
+          status: flowState.status,
+          error: flowState.error,
+        });
+        return { hasActiveFlow: false, hasFailedFlow: false };
+      } else {
+        logger.debug(`[MCP Connection Status] Found failed OAuth flow for ${serverName}`, {
+          flowId,
+          status: flowState.status,
+          flowAge,
+          flowTTL,
+          timedOut: flowAge > flowTTL,
+          error: flowState.error,
+        });
+        return { hasActiveFlow: false, hasFailedFlow: true };
+      }
+    }
+
+    if (flowState.status === 'PENDING') {
+      logger.debug(`[MCP Connection Status] Found active OAuth flow for ${serverName}`, {
+        flowId,
+        flowAge,
+        flowTTL,
+      });
+      return { hasActiveFlow: true, hasFailedFlow: false };
+    }
+
+    return { hasActiveFlow: false, hasFailedFlow: false };
+  } catch (error) {
+    logger.error(`[MCP Connection Status] Error checking OAuth flows for ${serverName}:`, error);
+    return { hasActiveFlow: false, hasFailedFlow: false };
+  }
+}
+
+/**
+ * Get connection status for a specific MCP server
+ * @param {string} userId - The user ID
+ * @param {string} serverName - The server name
+ * @param {Map} appConnections - App-level connections
+ * @param {Map} userConnections - User-level connections
+ * @param {Set} oauthServers - Set of OAuth servers
+ * @returns {Object} Object containing requiresOAuth and connectionState
+ */
+async function getServerConnectionStatus(
+  userId,
+  serverName,
+  appConnections,
+  userConnections,
+  oauthServers,
+) {
+  const getConnectionState = () =>
+    appConnections.get(serverName)?.connectionState ??
+    userConnections.get(serverName)?.connectionState ??
+    'disconnected';
+
+  const baseConnectionState = getConnectionState();
+  let finalConnectionState = baseConnectionState;
+
+  if (baseConnectionState === 'disconnected' && oauthServers.has(serverName)) {
+    const { hasActiveFlow, hasFailedFlow } = await checkOAuthFlowStatus(userId, serverName);
+
+    if (hasFailedFlow) {
+      finalConnectionState = 'error';
+    } else if (hasActiveFlow) {
+      finalConnectionState = 'connecting';
+    }
+  }
+
+  return {
+    requiresOAuth: oauthServers.has(serverName),
+    connectionState: finalConnectionState,
+  };
+}
+
 module.exports = {
   createMCPTool,
+  getMCPSetupData,
+  checkOAuthFlowStatus,
+  getServerConnectionStatus,
 };

api/server/services/MCP.spec.js

@@ -0,0 +1,510 @@
+const { logger } = require('@librechat/data-schemas');
+const { MCPOAuthHandler } = require('@librechat/api');
+const { CacheKeys } = require('librechat-data-provider');
+const { getMCPSetupData, checkOAuthFlowStatus, getServerConnectionStatus } = require('./MCP');
+
+// Mock all dependencies
+jest.mock('@librechat/data-schemas', () => ({
+  logger: {
+    debug: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@librechat/api', () => ({
+  MCPOAuthHandler: {
+    generateFlowId: jest.fn(),
+  },
+}));
+
+jest.mock('librechat-data-provider', () => ({
+  CacheKeys: {
+    FLOWS: 'flows',
+  },
+}));
+
+jest.mock('./Config', () => ({
+  loadCustomConfig: jest.fn(),
+}));
+
+jest.mock('~/config', () => ({
+  getMCPManager: jest.fn(),
+  getFlowStateManager: jest.fn(),
+}));
+
+jest.mock('~/cache', () => ({
+  getLogStores: jest.fn(),
+}));
+
+jest.mock('~/models', () => ({
+  findToken: jest.fn(),
+  createToken: jest.fn(),
+  updateToken: jest.fn(),
+}));
+
+describe('tests for the new helper functions used by the MCP connection status endpoints', () => {
+  let mockLoadCustomConfig;
+  let mockGetMCPManager;
+  let mockGetFlowStateManager;
+  let mockGetLogStores;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockLoadCustomConfig = require('./Config').loadCustomConfig;
+    mockGetMCPManager = require('~/config').getMCPManager;
+    mockGetFlowStateManager = require('~/config').getFlowStateManager;
+    mockGetLogStores = require('~/cache').getLogStores;
+  });
+
+  describe('getMCPSetupData', () => {
+    const mockUserId = 'user-123';
+    const mockConfig = {
+      mcpServers: {
+        server1: { type: 'stdio' },
+        server2: { type: 'http' },
+      },
+    };
+
+    beforeEach(() => {
+      mockGetMCPManager.mockReturnValue({
+        getAllConnections: jest.fn(() => new Map()),
+        getUserConnections: jest.fn(() => new Map()),
+        getOAuthServers: jest.fn(() => new Set()),
+      });
+    });
+
+    it('should successfully return MCP setup data', async () => {
+      mockLoadCustomConfig.mockResolvedValue(mockConfig);
+
+      const mockAppConnections = new Map([['server1', { status: 'connected' }]]);
+      const mockUserConnections = new Map([['server2', { status: 'disconnected' }]]);
+      const mockOAuthServers = new Set(['server2']);
+
+      const mockMCPManager = {
+        getAllConnections: jest.fn(() => mockAppConnections),
+        getUserConnections: jest.fn(() => mockUserConnections),
+        getOAuthServers: jest.fn(() => mockOAuthServers),
+      };
+      mockGetMCPManager.mockReturnValue(mockMCPManager);
+
+      const result = await getMCPSetupData(mockUserId);
+
+      expect(mockLoadCustomConfig).toHaveBeenCalledWith(false);
+      expect(mockGetMCPManager).toHaveBeenCalledWith(mockUserId);
+      expect(mockMCPManager.getAllConnections).toHaveBeenCalled();
+      expect(mockMCPManager.getUserConnections).toHaveBeenCalledWith(mockUserId);
+      expect(mockMCPManager.getOAuthServers).toHaveBeenCalled();
+
+      expect(result).toEqual({
+        mcpConfig: mockConfig.mcpServers,
+        appConnections: mockAppConnections,
+        userConnections: mockUserConnections,
+        oauthServers: mockOAuthServers,
+      });
+    });
+
+    it('should throw error when MCP config not found', async () => {
+      mockLoadCustomConfig.mockResolvedValue({});
+      await expect(getMCPSetupData(mockUserId)).rejects.toThrow('MCP config not found');
+    });
+
+    it('should handle null values from MCP manager gracefully', async () => {
+      mockLoadCustomConfig.mockResolvedValue(mockConfig);
+
+      const mockMCPManager = {
+        getAllConnections: jest.fn(() => null),
+        getUserConnections: jest.fn(() => null),
+        getOAuthServers: jest.fn(() => null),
+      };
+      mockGetMCPManager.mockReturnValue(mockMCPManager);
+
+      const result = await getMCPSetupData(mockUserId);
+
+      expect(result).toEqual({
+        mcpConfig: mockConfig.mcpServers,
+        appConnections: new Map(),
+        userConnections: new Map(),
+        oauthServers: new Set(),
+      });
+    });
+  });
+
+  describe('checkOAuthFlowStatus', () => {
+    const mockUserId = 'user-123';
+    const mockServerName = 'test-server';
+    const mockFlowId = 'flow-123';
+
+    beforeEach(() => {
+      const mockFlowsCache = {};
+      const mockFlowManager = {
+        getFlowState: jest.fn(),
+      };
+
+      mockGetLogStores.mockReturnValue(mockFlowsCache);
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      MCPOAuthHandler.generateFlowId.mockReturnValue(mockFlowId);
+    });
+
+    it('should return false flags when no flow state exists', async () => {
+      const mockFlowManager = { getFlowState: jest.fn(() => null) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(mockGetLogStores).toHaveBeenCalledWith(CacheKeys.FLOWS);
+      expect(MCPOAuthHandler.generateFlowId).toHaveBeenCalledWith(mockUserId, mockServerName);
+      expect(mockFlowManager.getFlowState).toHaveBeenCalledWith(mockFlowId, 'mcp_oauth');
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: false });
+    });
+
+    it('should detect failed flow when status is FAILED', async () => {
+      const mockFlowState = {
+        status: 'FAILED',
+        createdAt: Date.now() - 60000, // 1 minute ago
+        ttl: 180000,
+      };
+      const mockFlowManager = { getFlowState: jest.fn(() => mockFlowState) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: true });
+      expect(logger.debug).toHaveBeenCalledWith(
+        expect.stringContaining('Found failed OAuth flow'),
+        expect.objectContaining({
+          flowId: mockFlowId,
+          status: 'FAILED',
+        }),
+      );
+    });
+
+    it('should detect failed flow when flow has timed out', async () => {
+      const mockFlowState = {
+        status: 'PENDING',
+        createdAt: Date.now() - 200000, // 200 seconds ago (> 180s TTL)
+        ttl: 180000,
+      };
+      const mockFlowManager = { getFlowState: jest.fn(() => mockFlowState) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: true });
+      expect(logger.debug).toHaveBeenCalledWith(
+        expect.stringContaining('Found failed OAuth flow'),
+        expect.objectContaining({
+          timedOut: true,
+        }),
+      );
+    });
+
+    it('should detect failed flow when TTL not specified and flow exceeds default TTL', async () => {
+      const mockFlowState = {
+        status: 'PENDING',
+        createdAt: Date.now() - 200000, // 200 seconds ago (> 180s default TTL)
+        // ttl not specified, should use 180000 default
+      };
+      const mockFlowManager = { getFlowState: jest.fn(() => mockFlowState) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: true });
+    });
+
+    it('should detect active flow when status is PENDING and within TTL', async () => {
+      const mockFlowState = {
+        status: 'PENDING',
+        createdAt: Date.now() - 60000, // 1 minute ago (< 180s TTL)
+        ttl: 180000,
+      };
+      const mockFlowManager = { getFlowState: jest.fn(() => mockFlowState) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: true, hasFailedFlow: false });
+      expect(logger.debug).toHaveBeenCalledWith(
+        expect.stringContaining('Found active OAuth flow'),
+        expect.objectContaining({
+          flowId: mockFlowId,
+        }),
+      );
+    });
+
+    it('should return false flags for other statuses', async () => {
+      const mockFlowState = {
+        status: 'COMPLETED',
+        createdAt: Date.now() - 60000,
+        ttl: 180000,
+      };
+      const mockFlowManager = { getFlowState: jest.fn(() => mockFlowState) };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: false });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const mockError = new Error('Flow state error');
+      const mockFlowManager = {
+        getFlowState: jest.fn(() => {
+          throw mockError;
+        }),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+
+      const result = await checkOAuthFlowStatus(mockUserId, mockServerName);
+
+      expect(result).toEqual({ hasActiveFlow: false, hasFailedFlow: false });
+      expect(logger.error).toHaveBeenCalledWith(
+        expect.stringContaining('Error checking OAuth flows'),
+        mockError,
+      );
+    });
+  });
+
+  describe('getServerConnectionStatus', () => {
+    const mockUserId = 'user-123';
+    const mockServerName = 'test-server';
+
+    it('should return app connection state when available', async () => {
+      const appConnections = new Map([[mockServerName, { connectionState: 'connected' }]]);
+      const userConnections = new Map();
+      const oauthServers = new Set();
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: false,
+        connectionState: 'connected',
+      });
+    });
+
+    it('should fallback to user connection state when app connection not available', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map([[mockServerName, { connectionState: 'connecting' }]]);
+      const oauthServers = new Set();
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: false,
+        connectionState: 'connecting',
+      });
+    });
+
+    it('should default to disconnected when no connections exist', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set();
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: false,
+        connectionState: 'disconnected',
+      });
+    });
+
+    it('should prioritize app connection over user connection', async () => {
+      const appConnections = new Map([[mockServerName, { connectionState: 'connected' }]]);
+      const userConnections = new Map([[mockServerName, { connectionState: 'disconnected' }]]);
+      const oauthServers = new Set();
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: false,
+        connectionState: 'connected',
+      });
+    });
+
+    it('should indicate OAuth requirement when server is in OAuth servers set', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set([mockServerName]);
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result.requiresOAuth).toBe(true);
+    });
+
+    it('should handle OAuth flow status when disconnected and requires OAuth with failed flow', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set([mockServerName]);
+
+      // Mock flow state to return failed flow
+      const mockFlowManager = {
+        getFlowState: jest.fn(() => ({
+          status: 'FAILED',
+          createdAt: Date.now() - 60000,
+          ttl: 180000,
+        })),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      mockGetLogStores.mockReturnValue({});
+      MCPOAuthHandler.generateFlowId.mockReturnValue('test-flow-id');
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: true,
+        connectionState: 'error',
+      });
+    });
+
+    it('should handle OAuth flow status when disconnected and requires OAuth with active flow', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set([mockServerName]);
+
+      // Mock flow state to return active flow
+      const mockFlowManager = {
+        getFlowState: jest.fn(() => ({
+          status: 'PENDING',
+          createdAt: Date.now() - 60000, // 1 minute ago
+          ttl: 180000, // 3 minutes TTL
+        })),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      mockGetLogStores.mockReturnValue({});
+      MCPOAuthHandler.generateFlowId.mockReturnValue('test-flow-id');
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: true,
+        connectionState: 'connecting',
+      });
+    });
+
+    it('should handle OAuth flow status when disconnected and requires OAuth with no flow', async () => {
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set([mockServerName]);
+
+      // Mock flow state to return no flow
+      const mockFlowManager = {
+        getFlowState: jest.fn(() => null),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      mockGetLogStores.mockReturnValue({});
+      MCPOAuthHandler.generateFlowId.mockReturnValue('test-flow-id');
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: true,
+        connectionState: 'disconnected',
+      });
+    });
+
+    it('should not check OAuth flow status when server is connected', async () => {
+      const mockFlowManager = {
+        getFlowState: jest.fn(),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      mockGetLogStores.mockReturnValue({});
+
+      const appConnections = new Map([[mockServerName, { connectionState: 'connected' }]]);
+      const userConnections = new Map();
+      const oauthServers = new Set([mockServerName]);
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: true,
+        connectionState: 'connected',
+      });
+
+      // Should not call flow manager since server is connected
+      expect(mockFlowManager.getFlowState).not.toHaveBeenCalled();
+    });
+
+    it('should not check OAuth flow status when server does not require OAuth', async () => {
+      const mockFlowManager = {
+        getFlowState: jest.fn(),
+      };
+      mockGetFlowStateManager.mockReturnValue(mockFlowManager);
+      mockGetLogStores.mockReturnValue({});
+
+      const appConnections = new Map();
+      const userConnections = new Map();
+      const oauthServers = new Set(); // Server not in OAuth servers
+
+      const result = await getServerConnectionStatus(
+        mockUserId,
+        mockServerName,
+        appConnections,
+        userConnections,
+        oauthServers,
+      );
+
+      expect(result).toEqual({
+        requiresOAuth: false,
+        connectionState: 'disconnected',
+      });
+
+      // Should not call flow manager since server doesn't require OAuth
+      expect(mockFlowManager.getFlowState).not.toHaveBeenCalled();
+    });
+  });
+});

api/utils/tokens.js

@@ -196,6 +196,7 @@ const amazonModels = {
   'amazon.nova-micro-v1:0': 127000, // -1000 from max,
   'amazon.nova-lite-v1:0': 295000, // -5000 from max,
   'amazon.nova-pro-v1:0': 295000, // -5000 from max,
+  'amazon.nova-premier-v1:0': 995000, // -5000 from max,
 };
 
 const bedrockModels = {

client/package.json

@@ -34,6 +34,7 @@
     "@dicebear/collection": "^9.2.2",
     "@dicebear/core": "^9.2.2",
     "@headlessui/react": "^2.1.2",
+    "@librechat/client": "*",
     "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.2",
@@ -56,8 +57,8 @@
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-table": "^8.11.7",
-    "class-variance-authority": "^0.6.0",
-    "clsx": "^1.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
     "date-fns": "^3.3.1",
@@ -70,11 +71,12 @@
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.3",
     "input-otp": "^1.4.2",
+    "jotai": "^2.12.5",
     "js-cookie": "^3.0.5",
     "librechat-data-provider": "*",
     "lodash": "^4.17.21",
     "lucide-react": "^0.394.0",
-    "match-sorter": "^6.3.4",
+    "match-sorter": "^8.1.0",
     "micromark-extension-llm-math": "^3.1.0",
     "qrcode.react": "^4.2.0",
     "rc-input-number": "^7.4.2",

client/src/App.jsx

@@ -4,10 +4,10 @@ import { RouterProvider } from 'react-router-dom';
 import * as RadixToast from '@radix-ui/react-toast';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Toast, ThemeProvider, ToastProvider } from '@librechat/client';
 import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
-import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
-import { ToastProvider } from './Providers';
-import Toast from './components/ui/Toast';
+import { ScreenshotProvider, useApiErrorBoundary } from './hooks';
+import { getThemeFromEnv } from './utils/getThemeFromEnv';
 import { LiveAnnouncer } from '~/a11y';
 import { router } from './routes';
 
@@ -24,11 +24,23 @@ const App = () => {
     }),
   });
 
+  // Load theme from environment variables if available
+  const envTheme = getThemeFromEnv();
+
   return (
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <LiveAnnouncer>
-          <ThemeProvider>
+          <ThemeProvider
+            // Only pass initialTheme and themeRGB if environment theme exists
+            // This allows localStorage values to persist when no env theme is set
+            {...(envTheme && { initialTheme: 'system', themeRGB: envTheme })}
+          >
+            {/* The ThemeProvider will automatically:
+                1. Apply dark/light mode classes
+                2. Apply custom theme colors if envTheme is provided
+                3. Otherwise use stored theme preferences from localStorage
+                4. Fall back to default theme colors if nothing is stored */}
             <RadixToast.Provider>
               <ToastProvider>
                 <DndProvider backend={HTML5Backend}>

client/src/Providers/index.ts

@@ -1,11 +1,9 @@
 export { default as AssistantsProvider } from './AssistantsContext';
 export { default as AgentsProvider } from './AgentsContext';
-export { default as ToastProvider } from './ToastContext';
 export * from './ActivePanelContext';
 export * from './AgentPanelContext';
 export * from './ChatContext';
 export * from './ShareContext';
-export * from './ToastContext';
 export * from './FileMapContext';
 export * from './AddedChatContext';
 export * from './EditorContext';

client/src/a11y/LiveAnnouncer.tsx

@@ -1,8 +1,7 @@
-// client/src/a11y/LiveAnnouncer.tsx
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import type { AnnounceOptions } from '~/common';
 import AnnouncerContext from '~/Providers/AnnouncerContext';
-import useLocalize from '~/hooks/useLocalize';
+import { useLocalize } from '~/hooks';
 import Announcer from './Announcer';
 
 interface LiveAnnouncerProps {

client/src/common/menus.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export type RenderProp<
   P = React.HTMLAttributes<any> & {
     ref?: React.Ref<any>;

client/src/common/types.ts

@@ -206,7 +206,9 @@ export type AgentPanelProps = {
   setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
   setMcp: React.Dispatch<React.SetStateAction<t.MCP | undefined>>;
   setAction: React.Dispatch<React.SetStateAction<t.Action | undefined>>;
+  endpointsConfig?: t.TEndpointsConfig;
   setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  agentsConfig?: t.TAgentsEndpoint | null;
 };
 
 export type AgentPanelContextType = {
@@ -217,14 +219,12 @@ export type AgentPanelContextType = {
   mcps?: t.MCP[];
   setMcp: React.Dispatch<React.SetStateAction<t.MCP | undefined>>;
   setMcps: React.Dispatch<React.SetStateAction<t.MCP[] | undefined>>;
+  groupedTools: Record<string, t.AgentToolType & { tools?: t.AgentToolType[] }>;
   tools: t.AgentToolType[];
   activePanel?: string;
   setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
   setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  groupedTools?: Record<string, t.AgentToolType & { tools?: t.AgentToolType[] }>;
   agent_id?: string;
-  agentsConfig?: t.TAgentsEndpoint | null;
-  endpointsConfig?: t.TEndpointsConfig | null;
 };
 
 export type AgentModelPanelProps = {
@@ -336,16 +336,13 @@ export type TAskProps = {
 export type TOptions = {
   editedMessageId?: string | null;
   editedText?: string | null;
-  editedContent?: {
-    index: number;
-    text: string;
-    type: 'text' | 'think';
-  };
   isRegenerate?: boolean;
   isContinued?: boolean;
   isEdited?: boolean;
   overrideMessages?: t.TMessage[];
-  /** Currently only utilized when resubmitting user-created message, uses that message's currently attached files */
+  /** This value is only true when the user submits a message with "Save & Submit" for a user-created message */
+  isResubmission?: boolean;
+  /** Currently only utilized when `isResubmission === true`, uses that message's currently attached files */
   overrideFiles?: t.TMessage['files'];
 };
 

client/src/components/Artifacts/Artifacts.tsx

@@ -6,9 +6,9 @@ import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-re
 import useArtifacts from '~/hooks/Artifacts/useArtifacts';
 import DownloadArtifact from './DownloadArtifact';
 import { useEditorContext } from '~/Providers';
-import useLocalize from '~/hooks/useLocalize';
 import ArtifactTabs from './ArtifactTabs';
 import { CopyCodeButton } from './Code';
+import { useLocalize } from '~/hooks';
 import store from '~/store';
 
 export default function Artifacts() {

client/src/components/Artifacts/Code.tsx

@@ -1,12 +1,11 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
+import copy from 'copy-to-clipboard';
 import rehypeKatex from 'rehype-katex';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
-import copy from 'copy-to-clipboard';
+import { Clipboard, CheckMark } from '@librechat/client';
 import { handleDoubleClick, langSubset } from '~/utils';
-import Clipboard from '~/components/svg/Clipboard';
-import CheckMark from '~/components/svg/CheckMark';
-import useLocalize from '~/hooks/useLocalize';
+import { useLocalize } from '~/hooks';
 
 type TCodeProps = {
   inline: boolean;

client/src/components/Artifacts/DownloadArtifact.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Download } from 'lucide-react';
 import type { Artifact } from '~/common';
+import { CheckMark } from '@librechat/client';
 import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
 import { useEditorContext } from '~/Providers';
-import { CheckMark } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 
 const DownloadArtifact = ({

client/src/components/Artifacts/Mermaid.tsx

@@ -1,188 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import mermaid from 'mermaid';
-import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
-// import { Button } from '/components/ui/Button'; // Live component
-import { Button } from '~/components/ui/Button';
-import { ZoomIn, ZoomOut, RefreshCw } from 'lucide-react';
-
-interface MermaidDiagramProps {
-  content: string;
-}
-
-/** Note: this is just for testing purposes, don't actually use this component */
-const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
-  const mermaidRef = useRef<HTMLDivElement>(null);
-  const transformRef = useRef<ReactZoomPanPinchRef>(null);
-  const [isRendered, setIsRendered] = useState(false);
-
-  useEffect(() => {
-    mermaid.initialize({
-      startOnLoad: false,
-      theme: 'base',
-      securityLevel: 'sandbox',
-      themeVariables: {
-        background: '#282C34',
-        primaryColor: '#333842',
-        secondaryColor: '#333842',
-        tertiaryColor: '#333842',
-        primaryTextColor: '#ABB2BF',
-        secondaryTextColor: '#ABB2BF',
-        lineColor: '#636D83',
-        fontSize: '16px',
-        nodeBorder: '#636D83',
-        mainBkg: '#282C34',
-        altBackground: '#282C34',
-        textColor: '#ABB2BF',
-        edgeLabelBackground: '#282C34',
-        clusterBkg: '#282C34',
-        clusterBorder: '#636D83',
-        labelBoxBkgColor: '#333842',
-        labelBoxBorderColor: '#636D83',
-        labelTextColor: '#ABB2BF',
-      },
-      flowchart: {
-        curve: 'basis',
-        nodeSpacing: 50,
-        rankSpacing: 50,
-        diagramPadding: 8,
-        htmlLabels: true,
-        useMaxWidth: true,
-        padding: 15,
-        wrappingWidth: 200,
-      },
-    });
-
-    const renderDiagram = async () => {
-      if (mermaidRef.current) {
-        try {
-          const { svg } = await mermaid.render('mermaid-diagram', content);
-          mermaidRef.current.innerHTML = svg;
-
-          const svgElement = mermaidRef.current.querySelector('svg');
-          if (svgElement) {
-            svgElement.style.width = '100%';
-            svgElement.style.height = '100%';
-
-            const pathElements = svgElement.querySelectorAll('path');
-            pathElements.forEach((path) => {
-              path.style.strokeWidth = '1.5px';
-            });
-
-            const rectElements = svgElement.querySelectorAll('rect');
-            rectElements.forEach((rect) => {
-              const parent = rect.parentElement;
-              if (parent && parent.classList.contains('node')) {
-                rect.style.stroke = '#636D83';
-                rect.style.strokeWidth = '1px';
-              } else {
-                rect.style.stroke = 'none';
-              }
-            });
-          }
-          setIsRendered(true);
-        } catch (error) {
-          console.error('Mermaid rendering error:', error);
-          mermaidRef.current.innerHTML = 'Error rendering diagram';
-        }
-      }
-    };
-
-    renderDiagram();
-  }, [content]);
-
-  const centerAndFitDiagram = () => {
-    if (transformRef.current && mermaidRef.current) {
-      const { centerView, zoomToElement } = transformRef.current;
-      zoomToElement(mermaidRef.current as HTMLElement);
-      centerView(1, 0);
-    }
-  };
-
-  useEffect(() => {
-    if (isRendered) {
-      centerAndFitDiagram();
-    }
-  }, [isRendered]);
-
-  const handlePanning = () => {
-    if (transformRef.current) {
-      const { state, instance } = (transformRef.current as ReactZoomPanPinchRef | undefined) ?? {};
-      if (!state || !instance) {
-        return;
-      }
-      const { scale, positionX, positionY } = state;
-      const { wrapperComponent, contentComponent } = instance;
-
-      if (wrapperComponent && contentComponent) {
-        const wrapperRect = wrapperComponent.getBoundingClientRect();
-        const contentRect = contentComponent.getBoundingClientRect();
-        const maxX = wrapperRect.width - contentRect.width * scale;
-        const maxY = wrapperRect.height - contentRect.height * scale;
-
-        let newX = positionX;
-        let newY = positionY;
-
-        if (newX > 0) {
-          newX = 0;
-        }
-        if (newY > 0) {
-          newY = 0;
-        }
-        if (newX < maxX) {
-          newX = maxX;
-        }
-        if (newY < maxY) {
-          newY = maxY;
-        }
-
-        if (newX !== positionX || newY !== positionY) {
-          instance.setTransformState(scale, newX, newY);
-        }
-      }
-    }
-  };
-
-  return (
-    <div className="relative h-screen w-screen cursor-move bg-[#282C34] p-5">
-      <TransformWrapper
-        ref={transformRef}
-        initialScale={1}
-        minScale={0.1}
-        maxScale={4}
-        limitToBounds={false}
-        centerOnInit={true}
-        initialPositionY={0}
-        wheel={{ step: 0.1 }}
-        panning={{ velocityDisabled: true }}
-        alignmentAnimation={{ disabled: true }}
-        onPanning={handlePanning}
-      >
-        {({ zoomIn, zoomOut }) => (
-          <>
-            <TransformComponent
-              wrapperStyle={{ width: '100%', height: '100%', overflow: 'hidden' }}
-            >
-              <div
-                ref={mermaidRef}
-                style={{ width: 'auto', height: 'auto', minWidth: '100%', minHeight: '100%' }}
-              />
-            </TransformComponent>
-            <div className="absolute bottom-2 right-2 flex space-x-2">
-              <Button onClick={() => zoomIn(0.1)} variant="outline" size="icon">
-                <ZoomIn className="h-4 w-4" />
-              </Button>
-              <Button onClick={() => zoomOut(0.1)} variant="outline" size="icon">
-                <ZoomOut className="h-4 w-4" />
-              </Button>
-              <Button onClick={centerAndFitDiagram} variant="outline" size="icon">
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-          </>
-        )}
-      </TransformWrapper>
-    </div>
-  );
-};
-
-export default MermaidDiagram;

client/src/components/Audio/TTS.tsx

@@ -2,8 +2,8 @@
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessageAudio } from '~/common';
+import { VolumeIcon, VolumeMuteIcon, Spinner } from '@librechat/client';
 import { useLocalize, useTTSBrowser, useTTSExternal } from '~/hooks';
-import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components';
 import { logger } from '~/utils';
 import store from '~/store';
 

client/src/components/Audio/Voices.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
+import { Dropdown } from '@librechat/client';
 import type { Option } from '~/common';
 import { useLocalize, useTTSBrowser, useTTSExternal } from '~/hooks';
-import { Dropdown } from '~/components/ui';
 import { logger } from '~/utils';
 import store from '~/store';
 

client/src/components/Auth/AuthLayout.tsx

@@ -1,9 +1,9 @@
-import { TranslationKeys, useLocalize } from '~/hooks';
+import { ThemeSelector } from '@librechat/client';
 import { TStartupConfig } from 'librechat-data-provider';
 import { ErrorMessage } from '~/components/Auth/ErrorMessage';
+import { TranslationKeys, useLocalize } from '~/hooks';
 import SocialLoginRender from './SocialLoginRender';
 import { BlinkAnimation } from './BlinkAnimation';
-import { ThemeSelector } from '~/components';
 import { Banner } from '../Banners';
 import Footer from './Footer';
 

client/src/components/Auth/Login.tsx

@@ -1,10 +1,10 @@
 import { useOutletContext, useSearchParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { useAuthContext } from '~/hooks/AuthContext';
+import { OpenIDIcon } from '@librechat/client';
 import type { TLoginLayoutContext } from '~/common';
 import { ErrorMessage } from '~/components/Auth/ErrorMessage';
 import SocialButton from '~/components/Auth/SocialButton';
-import { OpenIDIcon } from '~/components';
+import { useAuthContext } from '~/hooks/AuthContext';
 import { getLoginError } from '~/utils';
 import { useLocalize } from '~/hooks';
 import LoginForm from './LoginForm';

client/src/components/Auth/LoginForm.tsx

@@ -1,11 +1,11 @@
-import { useForm } from 'react-hook-form';
 import React, { useState, useEffect, useContext } from 'react';
+import { useForm } from 'react-hook-form';
 import { Turnstile } from '@marsidev/react-turnstile';
+import { ThemeContext, Spinner, Button } from '@librechat/client';
 import type { TLoginUser, TStartupConfig } from 'librechat-data-provider';
 import type { TAuthContext } from '~/common';
 import { useResendVerificationEmail, useGetStartupConfig } from '~/data-provider';
-import { ThemeContext, useLocalize } from '~/hooks';
-import { Spinner, Button } from '~/components';
+import { useLocalize } from '~/hooks';
 
 type TLoginFormProps = {
   onSubmit: (data: TLoginUser) => void;

client/src/components/Auth/Registration.tsx

@@ -1,12 +1,12 @@
 import { useForm } from 'react-hook-form';
 import React, { useContext, useState } from 'react';
 import { Turnstile } from '@marsidev/react-turnstile';
+import { ThemeContext, Spinner, Button } from '@librechat/client';
 import { useNavigate, useOutletContext, useLocation } from 'react-router-dom';
 import { useRegisterUserMutation } from 'librechat-data-provider/react-query';
 import type { TRegisterUser, TError } from 'librechat-data-provider';
-import { useLocalize, TranslationKeys, ThemeContext } from '~/hooks';
 import type { TLoginLayoutContext } from '~/common';
-import { Spinner, Button } from '~/components';
+import { useLocalize, TranslationKeys } from '~/hooks';
 import { ErrorMessage } from './ErrorMessage';
 
 const Registration: React.FC = () => {

client/src/components/Auth/RequestPasswordReset.tsx

@@ -1,11 +1,11 @@
 import { useForm } from 'react-hook-form';
 import { useState, ReactNode } from 'react';
+import { Spinner, Button } from '@librechat/client';
 import { useOutletContext } from 'react-router-dom';
 import { useRequestPasswordResetMutation } from 'librechat-data-provider/react-query';
 import type { TRequestPasswordReset, TRequestPasswordResetResponse } from 'librechat-data-provider';
-import type { FC } from 'react';
 import type { TLoginLayoutContext } from '~/common';
-import { Spinner, Button } from '~/components';
+import type { FC } from 'react';
 import { useLocalize } from '~/hooks';
 
 const BodyTextWrapper: FC<{ children: ReactNode }> = ({ children }) => {

client/src/components/Auth/ResetPassword.tsx

@@ -1,10 +1,10 @@
 import { useForm } from 'react-hook-form';
+import { Spinner, Button } from '@librechat/client';
 import { useOutletContext } from 'react-router-dom';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useResetPasswordMutation } from 'librechat-data-provider/react-query';
 import type { TResetPassword } from 'librechat-data-provider';
 import type { TLoginLayoutContext } from '~/common';
-import { Spinner, Button } from '~/components';
 import { useLocalize } from '~/hooks';
 
 function ResetPassword() {

client/src/components/Auth/SocialLoginRender.tsx

@@ -6,7 +6,7 @@ import {
   DiscordIcon,
   AppleIcon,
   SamlIcon,
-} from '~/components';
+} from '@librechat/client';
 
 import SocialButton from './SocialButton';
 

client/src/components/Auth/TwoFactorScreen.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useToastContext } from '@librechat/client';
 import { useForm, Controller } from 'react-hook-form';
 import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label } from '~/components';
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label } from '@librechat/client';
 import { useVerifyTwoFactorTempMutation } from '~/data-provider';
-import { useToastContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 interface VerifyPayload {

client/src/components/Auth/VerifyEmail.tsx

@@ -1,8 +1,7 @@
-import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Spinner, ThemeSelector } from '@librechat/client';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useVerifyEmailMutation, useResendVerificationEmail } from '~/data-provider';
-import { ThemeSelector } from '~/components/ui';
-import { Spinner } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 
 function RequestPasswordReset() {

client/src/components/Bookmarks/BookmarkEditDialog.tsx

@@ -1,10 +1,8 @@
 import React, { useRef, Dispatch, SetStateAction } from 'react';
 import { TConversationTag } from 'librechat-data-provider';
-import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { OGDialogTemplate, OGDialog, Button, Spinner, useToastContext } from '@librechat/client';
 import { useConversationTagMutation } from '~/data-provider';
-import { OGDialog, Button, Spinner } from '~/components';
 import { NotificationSeverity } from '~/common';
-import { useToastContext } from '~/Providers';
 import BookmarkForm from './BookmarkForm';
 import { useLocalize } from '~/hooks';
 import { logger } from '~/utils';

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -2,11 +2,10 @@ import React, { useEffect } from 'react';
 import { QueryKeys } from 'librechat-data-provider';
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from '@tanstack/react-query';
+import { Checkbox, Label, TextareaAutosize, Input, useToastContext } from '@librechat/client';
 import type { TConversationTag, TConversationTagRequest } from 'librechat-data-provider';
-import { Checkbox, Label, TextareaAutosize, Input } from '~/components';
 import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import { useConversationTagMutation } from '~/data-provider';
-import { useToastContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 import { cn, logger } from '~/utils';
 

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
+import { Spinner } from '@librechat/client';
 import { MenuItem } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
 import type { FC } from 'react';
-import { Spinner } from '~/components/svg';
 
 type MenuItemProps = {
   tag: string | React.ReactNode;

client/src/components/Bookmarks/DeleteBookmarkButton.tsx

@@ -1,10 +1,17 @@
 import { useCallback, useState } from 'react';
+import {
+  Button,
+  TrashIcon,
+  Label,
+  OGDialog,
+  OGDialogTrigger,
+  TooltipAnchor,
+  OGDialogTemplate,
+  useToastContext,
+} from '@librechat/client';
 import type { FC } from 'react';
-import { Button, TrashIcon, Label, OGDialog, OGDialogTrigger, TooltipAnchor } from '~/components';
 import { useDeleteConversationTagMutation } from '~/data-provider';
-import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { NotificationSeverity } from '~/common';
-import { useToastContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 const DeleteBookmarkButton: FC<{

client/src/components/Bookmarks/EditBookmarkButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import type { FC } from 'react';
+import { TooltipAnchor, OGDialogTrigger, EditIcon, Button } from '@librechat/client';
 import type { TConversationTag } from 'librechat-data-provider';
-import { TooltipAnchor, OGDialogTrigger, EditIcon, Button } from '~/components';
+import type { FC } from 'react';
 import BookmarkEditDialog from './BookmarkEditDialog';
 import { useLocalize } from '~/hooks';
 

client/src/components/Chat/AddMultiConvo.tsx

@@ -1,8 +1,8 @@
 import { PlusCircle } from 'lucide-react';
+import { TooltipAnchor } from '@librechat/client';
 import { isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TConversation } from 'librechat-data-provider';
 import { useChatContext, useAddedChatContext } from '~/Providers';
-import { TooltipAnchor } from '~/components';
 import { mainTextareaId } from '~/common';
 import { useLocalize } from '~/hooks';
 

client/src/components/Chat/ChatView.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useForm } from 'react-hook-form';
+import { Spinner } from '@librechat/client';
 import { useParams } from 'react-router-dom';
 import { Constants } from 'librechat-data-provider';
 import type { TMessage } from 'librechat-data-provider';
@@ -10,7 +11,6 @@ import { useChatHelpers, useAddedResponse, useSSE } from '~/hooks';
 import ConversationStarters from './Input/ConversationStarters';
 import { useGetMessagesByConvoId } from '~/data-provider';
 import MessagesView from './Messages/MessagesView';
-import { Spinner } from '~/components/svg';
 import Presentation from './Presentation';
 import { buildTree, cn } from '~/utils';
 import ChatForm from './Input/ChatForm';

client/src/components/Chat/ExportAndShareMenu.tsx

@@ -2,11 +2,11 @@ import { useState, useId, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Ariakit from '@ariakit/react';
 import { Upload, Share2 } from 'lucide-react';
+import { DropdownPopup, TooltipAnchor, useMediaQuery } from '@librechat/client';
 import type * as t from '~/common';
 import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
 import { ShareButton } from '~/components/Conversations/ConvoOptions';
-import { DropdownPopup, TooltipAnchor } from '~/components/ui';
-import { useMediaQuery, useLocalize } from '~/hooks';
+import { useLocalize } from '~/hooks';
 import store from '~/store';
 
 export default function ExportAndShareMenu({

client/src/components/Chat/Header.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useMediaQuery } from '@librechat/client';
 import { useOutletContext } from 'react-router-dom';
 import { getConfigDefaults, PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { ContextType } from '~/common';
@@ -6,10 +7,10 @@ import ModelSelector from './Menus/Endpoints/ModelSelector';
 import { PresetsMenu, HeaderNewChat, OpenSidebar } from './Menus';
 import { useGetStartupConfig } from '~/data-provider';
 import ExportAndShareMenu from './ExportAndShareMenu';
-import { useMediaQuery, useHasAccess } from '~/hooks';
 import BookmarkMenu from './Menus/BookmarkMenu';
 import { TemporaryChat } from './TemporaryChat';
 import AddMultiConvo from './AddMultiConvo';
+import { useHasAccess } from '~/hooks';
 
 const defaultInterface = getConfigDefaults().interface;
 

client/src/components/Chat/Input/Artifacts.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useState, useCallback, useMemo } from 'react';
 import * as Ariakit from '@ariakit/react';
+import { CheckboxButton } from '@librechat/client';
 import { ArtifactModes } from 'librechat-data-provider';
 import { WandSparkles, ChevronDown } from 'lucide-react';
-import CheckboxButton from '~/components/ui/CheckboxButton';
 import { useBadgeRowContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';

client/src/components/Chat/Input/ArtifactsSubMenu.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import * as Ariakit from '@ariakit/react';
+import { PinIcon } from '@librechat/client';
 import { ChevronRight, WandSparkles } from 'lucide-react';
 import { ArtifactModes } from 'librechat-data-provider';
-import { PinIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
@@ -15,133 +15,142 @@ interface ArtifactsSubMenuProps {
   handleCustomToggle: () => void;
 }
 
-const ArtifactsSubMenu = ({
-  isArtifactsPinned,
-  setIsArtifactsPinned,
-  artifactsMode,
-  handleArtifactsToggle,
-  handleShadcnToggle,
-  handleCustomToggle,
-  ...props
-}: ArtifactsSubMenuProps) => {
-  const localize = useLocalize();
+const ArtifactsSubMenu = React.forwardRef<HTMLDivElement, ArtifactsSubMenuProps>(
+  (
+    {
+      isArtifactsPinned,
+      setIsArtifactsPinned,
+      artifactsMode,
+      handleArtifactsToggle,
+      handleShadcnToggle,
+      handleCustomToggle,
+      ...props
+    },
+    ref,
+  ) => {
+    const localize = useLocalize();
 
-  const menuStore = Ariakit.useMenuStore({
-    focusLoop: true,
-    showTimeout: 100,
-    placement: 'right',
-  });
+    const menuStore = Ariakit.useMenuStore({
+      focusLoop: true,
+      showTimeout: 100,
+      placement: 'right',
+    });
 
-  const isEnabled = artifactsMode !== '' && artifactsMode !== undefined;
-  const isShadcnEnabled = artifactsMode === ArtifactModes.SHADCNUI;
-  const isCustomEnabled = artifactsMode === ArtifactModes.CUSTOM;
+    const isEnabled = artifactsMode !== '' && artifactsMode !== undefined;
+    const isShadcnEnabled = artifactsMode === ArtifactModes.SHADCNUI;
+    const isCustomEnabled = artifactsMode === ArtifactModes.CUSTOM;
 
-  return (
-    <Ariakit.MenuProvider store={menuStore}>
-      <Ariakit.MenuItem
-        {...props}
-        hideOnClick={false}
-        render={
-          <Ariakit.MenuButton
-            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-              e.stopPropagation();
-              handleArtifactsToggle();
-            }}
-            onMouseEnter={() => {
-              if (isEnabled) {
-                menuStore.show();
-              }
-            }}
-            className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover"
-          />
-        }
-      >
-        <div className="flex items-center gap-2">
-          <WandSparkles className="icon-md" />
-          <span>{localize('com_ui_artifacts')}</span>
-          {isEnabled && <ChevronRight className="ml-auto h-3 w-3" />}
-        </div>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsArtifactsPinned(!isArtifactsPinned);
-          }}
-          className={cn(
-            'rounded p-1 transition-all duration-200',
-            'hover:bg-surface-tertiary hover:shadow-sm',
-            !isArtifactsPinned && 'text-text-secondary hover:text-text-primary',
-          )}
-          aria-label={isArtifactsPinned ? 'Unpin' : 'Pin'}
-        >
-          <div className="h-4 w-4">
-            <PinIcon unpin={isArtifactsPinned} />
-          </div>
-        </button>
-      </Ariakit.MenuItem>
-
-      {isEnabled && (
-        <Ariakit.Menu
-          portal={true}
-          unmountOnHide={true}
-          className={cn(
-            'animate-popover-left z-50 ml-3 flex min-w-[250px] flex-col rounded-xl',
-            'border border-border-light bg-surface-secondary px-1.5 py-1 shadow-lg',
-          )}
-        >
-          <div className="px-2 py-1.5">
-            <div className="mb-2 text-xs font-medium text-text-secondary">
-              {localize('com_ui_artifacts_options')}
+    return (
+      <div ref={ref}>
+        <Ariakit.MenuProvider store={menuStore}>
+          <Ariakit.MenuItem
+            {...props}
+            hideOnClick={false}
+            render={
+              <Ariakit.MenuButton
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation();
+                  handleArtifactsToggle();
+                }}
+                onMouseEnter={() => {
+                  if (isEnabled) {
+                    menuStore.show();
+                  }
+                }}
+                className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover"
+              />
+            }
+          >
+            <div className="flex items-center gap-2">
+              <WandSparkles className="icon-md" />
+              <span>{localize('com_ui_artifacts')}</span>
+              {isEnabled && <ChevronRight className="ml-auto h-3 w-3" />}
             </div>
-
-            {/* Include shadcn/ui Option */}
-            <Ariakit.MenuItem
-              hideOnClick={false}
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                handleShadcnToggle();
-              }}
-              disabled={isCustomEnabled}
-              className={cn(
-                'mb-1 flex items-center justify-between rounded-lg px-2 py-2',
-                'cursor-pointer text-text-primary outline-none transition-colors',
-                'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
-                isCustomEnabled && 'cursor-not-allowed opacity-50',
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <Ariakit.MenuItemCheck checked={isShadcnEnabled} />
-                <span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
-              </div>
-            </Ariakit.MenuItem>
-
-            {/* Custom Prompt Mode Option */}
-            <Ariakit.MenuItem
-              hideOnClick={false}
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                handleCustomToggle();
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsArtifactsPinned(!isArtifactsPinned);
               }}
               className={cn(
-                'flex items-center justify-between rounded-lg px-2 py-2',
-                'cursor-pointer text-text-primary outline-none transition-colors',
-                'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                'rounded p-1 transition-all duration-200',
+                'hover:bg-surface-tertiary hover:shadow-sm',
+                !isArtifactsPinned && 'text-text-secondary hover:text-text-primary',
+              )}
+              aria-label={isArtifactsPinned ? 'Unpin' : 'Pin'}
+            >
+              <div className="h-4 w-4">
+                <PinIcon unpin={isArtifactsPinned} />
+              </div>
+            </button>
+          </Ariakit.MenuItem>
+
+          {isEnabled && (
+            <Ariakit.Menu
+              portal={true}
+              unmountOnHide={true}
+              className={cn(
+                'animate-popover-left z-50 ml-3 flex min-w-[250px] flex-col rounded-xl',
+                'border border-border-light bg-surface-secondary px-1.5 py-1 shadow-lg',
               )}
             >
-              <div className="flex items-center gap-2">
-                <Ariakit.MenuItemCheck checked={isCustomEnabled} />
-                <span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
+              <div className="px-2 py-1.5">
+                <div className="mb-2 text-xs font-medium text-text-secondary">
+                  {localize('com_ui_artifacts_options')}
+                </div>
+
+                {/* Include shadcn/ui Option */}
+                <Ariakit.MenuItem
+                  hideOnClick={false}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleShadcnToggle();
+                  }}
+                  disabled={isCustomEnabled}
+                  className={cn(
+                    'mb-1 flex items-center justify-between rounded-lg px-2 py-2',
+                    'cursor-pointer text-text-primary outline-none transition-colors',
+                    'hover:bg-black/[0.075] dark:hover:bg-white/10',
+                    'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                    isCustomEnabled && 'cursor-not-allowed opacity-50',
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    <Ariakit.MenuItemCheck checked={isShadcnEnabled} />
+                    <span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
+                  </div>
+                </Ariakit.MenuItem>
+
+                {/* Custom Prompt Mode Option */}
+                <Ariakit.MenuItem
+                  hideOnClick={false}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleCustomToggle();
+                  }}
+                  className={cn(
+                    'flex items-center justify-between rounded-lg px-2 py-2',
+                    'cursor-pointer text-text-primary outline-none transition-colors',
+                    'hover:bg-black/[0.075] dark:hover:bg-white/10',
+                    'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    <Ariakit.MenuItemCheck checked={isCustomEnabled} />
+                    <span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
+                  </div>
+                </Ariakit.MenuItem>
               </div>
-            </Ariakit.MenuItem>
-          </div>
-        </Ariakit.Menu>
-      )}
-    </Ariakit.MenuProvider>
-  );
-};
+            </Ariakit.Menu>
+          )}
+        </Ariakit.MenuProvider>
+      </div>
+    );
+  },
+);
+
+ArtifactsSubMenu.displayName = 'ArtifactsSubMenu';
 
 export default React.memo(ArtifactsSubMenu);

client/src/components/Chat/Input/AudioRecorder.tsx

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
-import { useChatFormContext, useToastContext } from '~/Providers';
-import { ListeningIcon, Spinner } from '~/components/svg';
+import { useToastContext, TooltipAnchor, ListeningIcon, Spinner } from '@librechat/client';
 import { useLocalize, useSpeechToText } from '~/hooks';
-import { TooltipAnchor } from '~/components/ui';
+import { useChatFormContext } from '~/Providers';
 import { globalAudioId } from '~/common';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/BadgeRow.tsx

@@ -8,6 +8,7 @@ import React, {
   useReducer,
   useCallback,
 } from 'react';
+import { Badge } from '@librechat/client';
 import { useRecoilValue, useRecoilCallback } from 'recoil';
 import type { LucideIcon } from 'lucide-react';
 import CodeInterpreter from './CodeInterpreter';
@@ -15,7 +16,6 @@ import { BadgeRowProvider } from '~/Providers';
 import ToolsDropdown from './ToolsDropdown';
 import type { BadgeItem } from '~/common';
 import { useChatBadges } from '~/hooks';
-import { Badge } from '~/components/ui';
 import ToolDialogs from './ToolDialogs';
 import FileSearch from './FileSearch';
 import Artifacts from './Artifacts';

client/src/components/Chat/Input/ChatForm.tsx

@@ -1,5 +1,6 @@
 import { memo, useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
+import { TextareaAutosize } from '@librechat/client';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
 import {
@@ -20,7 +21,6 @@ import {
 import { mainTextareaId, BadgeItem } from '~/common';
 import AttachFileChat from './Files/AttachFileChat';
 import FileFormChat from './Files/FileFormChat';
-import { TextareaAutosize } from '~/components';
 import { cn, removeFocusRings } from '~/utils';
 import TextareaHeader from './TextareaHeader';
 import PromptsCommand from './PromptsCommand';

client/src/components/Chat/Input/CircleRender.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CircleIcon, CircleDotsIcon } from '~/components/svg';
 import { ECallState } from 'librechat-data-provider';
+import { CircleIcon, CircleDotsIcon } from '@librechat/client';
 
 const CircleRender = ({ rmsLevel, isCameraOn, state }) => {
   const getIconComponent = (state) => {

client/src/components/Chat/Input/CodeInterpreter.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { TerminalSquareIcon } from 'lucide-react';
+import { CheckboxButton } from '@librechat/client';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import CheckboxButton from '~/components/ui/CheckboxButton';
 import { useLocalize, useHasAccess } from '~/hooks';
 import { useBadgeRowContext } from '~/Providers';
 

client/src/components/Chat/Input/CollapseChat.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { TooltipAnchor } from '@librechat/client';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { TooltipAnchor } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/EditBadges.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { Edit3, Check, X } from 'lucide-react';
+import { Button, Badge } from '@librechat/client';
 import type { LucideIcon } from 'lucide-react';
 import type { BadgeItem } from '~/common';
 import { useChatBadges, useLocalize } from '~/hooks';
-import { Button, Badge } from '~/components/ui';
 
 interface EditBadgesProps {
   isEditingChatBadges: boolean;

client/src/components/Chat/Input/FileSearch.tsx

@@ -1,9 +1,8 @@
 import React, { memo } from 'react';
+import { CheckboxButton, VectorIcon } from '@librechat/client';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import CheckboxButton from '~/components/ui/CheckboxButton';
 import { useLocalize, useHasAccess } from '~/hooks';
 import { useBadgeRowContext } from '~/Providers';
-import { VectorIcon } from '~/components/svg';
 
 function FileSearch() {
   const localize = useLocalize();

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { FileUpload, TooltipAnchor, AttachmentIcon } from '~/components';
+import { FileUpload, TooltipAnchor, AttachmentIcon } from '@librechat/client';
 import { useLocalize, useFileHandling } from '~/hooks';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/Files/AttachFileMenu.tsx

@@ -1,11 +1,11 @@
-import { useSetRecoilState } from 'recoil';
-import * as Ariakit from '@ariakit/react';
 import React, { useRef, useState, useMemo } from 'react';
+import * as Ariakit from '@ariakit/react';
+import { useSetRecoilState } from 'recoil';
 import { FileSearch, ImageUpIcon, TerminalSquareIcon, FileType2Icon } from 'lucide-react';
+import { FileUpload, TooltipAnchor, DropdownPopup, AttachmentIcon } from '@librechat/client';
 import { EToolResources, EModelEndpoint, defaultAgentCapabilities } from 'librechat-data-provider';
 import type { EndpointFileConfig } from 'librechat-data-provider';
 import { useLocalize, useGetAgentsConfig, useFileHandling, useAgentCapabilities } from '~/hooks';
-import { FileUpload, TooltipAnchor, DropdownPopup, AttachmentIcon } from '~/components';
 import { ephemeralAgentByConvoId } from '~/store';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/Files/DragDropModal.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
+import { OGDialog, OGDialogTemplate } from '@librechat/client';
 import { ImageUpIcon, FileSearch, TerminalSquareIcon, FileType2Icon } from 'lucide-react';
 import { EToolResources, defaultAgentCapabilities } from 'librechat-data-provider';
 import { useLocalize, useGetAgentsConfig, useAgentCapabilities } from '~/hooks';
-import { OGDialog, OGDialogTemplate } from '~/components/ui';
 
 interface DragDropModalProps {
   onOptionSelect: (option: EToolResources | undefined) => void;

client/src/components/Chat/Input/Files/FilePreview.tsx

@@ -1,7 +1,7 @@
+import { Spinner } from '@librechat/client';
 import type { TFile } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
-import FileIcon from '~/components/svg/Files/FileIcon';
-import { Spinner } from '~/components';
+import { FileIcon } from '~/components/svg';
 import SourceIcon from './SourceIcon';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/Files/FileRow.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
+import { useToastContext } from '@librechat/client';
 import { EToolResources } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
 import { useDeleteFilesMutation } from '~/data-provider';
-import { useToastContext } from '~/Providers';
-import { useLocalize } from '~/hooks';
 import { useFileDeletion } from '~/hooks/Files';
 import FileContainer from './FileContainer';
+import { useLocalize } from '~/hooks';
 import { logger } from '~/utils';
 import Image from './Image';
 

client/src/components/Chat/Input/Files/FilesView.tsx

@@ -1,6 +1,6 @@
 import { FileSources, FileContext } from 'librechat-data-provider';
 import type { TFile } from 'librechat-data-provider';
-import { OGDialog, OGDialogContent, OGDialogHeader, OGDialogTitle } from '~/components';
+import { OGDialog, OGDialogContent, OGDialogHeader, OGDialogTitle } from '@librechat/client';
 import { useGetFiles } from '~/data-provider';
 import { DataTable, columns } from './Table';
 import { useLocalize } from '~/hooks';

client/src/components/Chat/Input/Files/ImagePreview.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Maximize2 } from 'lucide-react';
-import { OGDialog, OGDialogContent } from '~/components/ui';
 import { FileSources } from 'librechat-data-provider';
+import { OGDialog, OGDialogContent } from '@librechat/client';
 import ProgressCircle from './ProgressCircle';
 import SourceIcon from './SourceIcon';
 import { cn } from '~/utils';
@@ -93,9 +93,9 @@ const ImagePreview = ({
 
   const style: styleProps = imageUrl
     ? {
-      ...baseStyle,
-      backgroundImage: `url(${imageUrl})`,
-    }
+        ...baseStyle,
+        backgroundImage: `url(${imageUrl})`,
+      }
     : baseStyle;
 
   if (typeof style.backgroundImage !== 'string' || style.backgroundImage.length === 0) {

client/src/components/Chat/Input/Files/Table/Columns.tsx

@@ -1,14 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-
 import { ArrowUpDown, Database } from 'lucide-react';
 import { FileSources, FileContext } from 'librechat-data-provider';
+import {
+  Button,
+  Checkbox,
+  OpenAIMinimalIcon,
+  AzureMinimalIcon,
+  useMediaQuery,
+} from '@librechat/client';
 import type { ColumnDef } from '@tanstack/react-table';
 import type { TFile } from 'librechat-data-provider';
-import { Button, Checkbox, OpenAIMinimalIcon, AzureMinimalIcon } from '~/components';
 import ImagePreview from '~/components/Chat/Input/Files/ImagePreview';
 import FilePreview from '~/components/Chat/Input/Files/FilePreview';
+import { TranslationKeys, useLocalize } from '~/hooks';
 import { SortFilterHeader } from './SortFilterHeader';
-import { TranslationKeys, useLocalize, useMediaQuery } from '~/hooks';
 import { formatDate, getFileType } from '~/utils';
 
 const contextMap: Record<any, TranslationKeys> = {

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -16,8 +16,6 @@ import type {
   ColumnFiltersState,
 } from '@tanstack/react-table';
 import { FileContext } from 'librechat-data-provider';
-import type { AugmentedColumnDef } from '~/common';
-import type { TFile } from 'librechat-data-provider';
 import {
   Button,
   Input,
@@ -31,11 +29,14 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '~/components/ui';
+  TrashIcon,
+  Spinner,
+  useMediaQuery,
+} from '@librechat/client';
+import type { TFile } from 'librechat-data-provider';
+import type { AugmentedColumnDef } from '~/common';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
-import { TrashIcon, Spinner } from '~/components/svg';
-import useLocalize from '~/hooks/useLocalize';
-import { useMediaQuery } from '~/hooks';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
 

client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx

@@ -2,13 +2,13 @@ import { Column } from '@tanstack/react-table';
 import { ListFilter, FilterX } from 'lucide-react';
 import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon } from '@radix-ui/react-icons';
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/DropdownMenu';
-import { Button } from '~/components/ui/Button';
+} from '@librechat/client';
 import { useLocalize, TranslationKeys } from '~/hooks';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/Files/Table/TemplateTable.tsx

@@ -1,4 +1,4 @@
-import { DotsIcon, TrashIcon } from '~/components/svg';
+import { DotsIcon, TrashIcon } from '@librechat/client';
 
 export default function Template() {
   return (

client/src/components/Chat/Input/HeaderOptions.tsx

@@ -2,12 +2,12 @@ import { useRecoilState } from 'recoil';
 import { Settings2 } from 'lucide-react';
 import { useState, useEffect, useMemo } from 'react';
 import { Root, Anchor } from '@radix-ui/react-popover';
-import { EModelEndpoint, isParamEndpoint, tConvoUpdateSchema } from 'librechat-data-provider';
+import { PluginStoreDialog, TooltipAnchor } from '@librechat/client';
 import { useUserKeyQuery } from 'librechat-data-provider/react-query';
+import { EModelEndpoint, isParamEndpoint, tConvoUpdateSchema } from 'librechat-data-provider';
 import type { TPreset, TInterfaceConfig } from 'librechat-data-provider';
 import { EndpointSettings, SaveAsPresetDialog, AlternativeSettings } from '~/components/Endpoints';
-import { useSetIndexOptions, useMediaQuery, useLocalize } from '~/hooks';
-import { PluginStoreDialog, TooltipAnchor } from '~/components';
+import { useSetIndexOptions, useLocalize } from '~/hooks';
 import { useGetEndpointsQuery } from '~/data-provider';
 import OptionsPopover from './OptionsPopover';
 import PopoverButtons from './PopoverButtons';

client/src/components/Chat/Input/MCPConfigDialog.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Input, Label, OGDialog, OGDialogTemplate } from '@librechat/client';
+import { useLocalize } from '~/hooks';
+
+export interface ConfigFieldDetail {
+  title: string;
+  description: string;
+}
+
+interface MCPConfigDialogProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  fieldsSchema: Record<string, ConfigFieldDetail>;
+  initialValues: Record<string, string>;
+  onSave: (updatedValues: Record<string, string>) => void;
+  isSubmitting?: boolean;
+  onRevoke?: () => void;
+  serverName: string;
+}
+
+export default function MCPConfigDialog({
+  isOpen,
+  onOpenChange,
+  fieldsSchema,
+  initialValues,
+  onSave,
+  isSubmitting = false,
+  onRevoke,
+  serverName,
+}: MCPConfigDialogProps) {
+  const localize = useLocalize();
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, _ },
+  } = useForm<Record<string, string>>({
+    defaultValues: initialValues,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      reset(initialValues);
+    }
+  }, [isOpen, initialValues, reset]);
+
+  const onFormSubmit = (data: Record<string, string>) => {
+    onSave(data);
+  };
+
+  const handleRevoke = () => {
+    if (onRevoke) {
+      onRevoke();
+    }
+  };
+
+  const dialogTitle = localize('com_ui_configure_mcp_variables_for', { 0: serverName });
+  const dialogDescription = localize('com_ui_mcp_dialog_desc');
+
+  return (
+    <OGDialog open={isOpen} onOpenChange={onOpenChange}>
+      <OGDialogTemplate
+        className="sm:max-w-lg"
+        title={dialogTitle}
+        description={dialogDescription}
+        headerClassName="px-6 pt-6 pb-4"
+        main={
+          <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4 px-6 pb-2">
+            {Object.entries(fieldsSchema).map(([key, details]) => (
+              <div key={key} className="space-y-2">
+                <Label htmlFor={key} className="text-sm font-medium">
+                  {details.title}
+                </Label>
+                <Controller
+                  name={key}
+                  control={control}
+                  defaultValue={initialValues[key] || ''}
+                  render={({ field }) => (
+                    <Input
+                      id={key}
+                      type="text"
+                      {...field}
+                      placeholder={localize('com_ui_mcp_enter_var', { 0: details.title })}
+                      className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+                    />
+                  )}
+                />
+                {details.description && (
+                  <p
+                    className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
+                    dangerouslySetInnerHTML={{ __html: details.description }}
+                  />
+                )}
+                {errors[key] && <p className="text-xs text-red-500">{errors[key]?.message}</p>}
+              </div>
+            ))}
+          </form>
+        }
+        selection={{
+          selectHandler: handleSubmit(onFormSubmit),
+          selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
+          selectText: isSubmitting ? localize('com_ui_saving') : localize('com_ui_save'),
+        }}
+        buttons={
+          onRevoke && (
+            <Button
+              onClick={handleRevoke}
+              className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
+              disabled={isSubmitting}
+            >
+              {localize('com_ui_revoke')}
+            </Button>
+          )
+        }
+        footerClassName="flex justify-end gap-2 px-6 pb-6 pt-2"
+        showCancelButton={true}
+      />
+    </OGDialog>
+  );
+}

client/src/components/Chat/Input/MCPSelect.tsx

@@ -1,109 +1,21 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { Constants, QueryKeys } from 'librechat-data-provider';
-import type { TUpdateUserPlugins, TPlugin } from 'librechat-data-provider';
-import React, { memo, useCallback, useState, useMemo, useRef } from 'react';
-import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
-import MCPConfigDialog, { ConfigFieldDetail } from '~/components/ui/MCP/MCPConfigDialog';
-import { useMCPServerInitialization } from '~/hooks/MCP/useMCPServerInitialization';
-import MCPServerStatusIcon from '~/components/ui/MCP/MCPServerStatusIcon';
-import { useToastContext, useBadgeRowContext } from '~/Providers';
-import MultiSelect from '~/components/ui/MultiSelect';
-import { MCPIcon } from '~/components/svg';
-import { useLocalize } from '~/hooks';
+import React, { memo, useCallback } from 'react';
+import { MultiSelect, MCPIcon } from '@librechat/client';
+import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
+import { useMCPServerManager } from '~/hooks/MCP/useMCPServerManager';
+import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
 
 function MCPSelect() {
-  const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const { mcpSelect, startupConfig } = useBadgeRowContext();
-  const { mcpValues, setMCPValues, mcpToolDetails, isPinned } = mcpSelect;
-
-  // Get all configured MCP servers from config
-  const configuredServers = useMemo(() => {
-    return Object.keys(startupConfig?.mcpServers || {});
-  }, [startupConfig?.mcpServers]);
-
-  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
-  const [selectedToolForConfig, setSelectedToolForConfig] = useState<TPlugin | null>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
-
-  const queryClient = useQueryClient();
-
-  const updateUserPluginsMutation = useUpdateUserPluginsMutation({
-    onSuccess: async () => {
-      showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
-
-      // tools so we dont leave tools available for use in chat if we revoke and thus kill mcp server
-      // auth values so customUserVars flags are updated in customUserVarsSection
-      // connection status so connection indicators are updated in the dropdown
-      await Promise.all([
-        queryClient.refetchQueries([QueryKeys.tools]),
-        queryClient.refetchQueries([QueryKeys.mcpAuthValues]),
-        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
-      ]);
-    },
-    onError: (error: unknown) => {
-      console.error('Error updating MCP auth:', error);
-      showToast({
-        message: localize('com_nav_mcp_vars_update_error'),
-        status: 'error',
-      });
-    },
-  });
-
-  // Use the shared initialization hook
-  const { initializeServer, isInitializing, connectionStatus, cancelOAuthFlow, isCancellable } =
-    useMCPServerInitialization({
-      onSuccess: (serverName) => {
-        // Add to selected values after successful initialization
-        const currentValues = mcpValues ?? [];
-        if (!currentValues.includes(serverName)) {
-          setMCPValues([...currentValues, serverName]);
-        }
-      },
-      onError: (serverName) => {
-        // Find the tool/server configuration
-        const tool = mcpToolDetails?.find((t) => t.name === serverName);
-        const serverConfig = startupConfig?.mcpServers?.[serverName];
-        const serverStatus = connectionStatus[serverName];
-
-        // Check if this server would show a config button
-        const hasAuthConfig =
-          (tool?.authConfig && tool.authConfig.length > 0) ||
-          (serverConfig?.customUserVars && Object.keys(serverConfig.customUserVars).length > 0);
-
-        // Only open dialog if the server would have shown a config button
-        // (disconnected/error states always show button, connected only shows if hasAuthConfig)
-        const wouldShowButton =
-          !serverStatus ||
-          serverStatus.connectionState === 'disconnected' ||
-          serverStatus.connectionState === 'error' ||
-          (serverStatus.connectionState === 'connected' && hasAuthConfig);
-
-        if (!wouldShowButton) {
-          return; // Don't open dialog if no button would be shown
-        }
-
-        // Create tool object if it doesn't exist
-        const configTool = tool || {
-          name: serverName,
-          pluginKey: `${Constants.mcp_prefix}${serverName}`,
-          authConfig: serverConfig?.customUserVars
-            ? Object.entries(serverConfig.customUserVars).map(([key, config]) => ({
-                authField: key,
-                label: config.title,
-                description: config.description,
-              }))
-            : [],
-          authenticated: false,
-        };
-
-        previousFocusRef.current = document.activeElement as HTMLElement;
-
-        // Open the config dialog on error
-        setSelectedToolForConfig(configTool);
-        setIsConfigModalOpen(true);
-      },
-    });
+  const {
+    configuredServers,
+    mcpValues,
+    isPinned,
+    placeholderText,
+    batchToggleServers,
+    getServerStatusIconProps,
+    getConfigDialogProps,
+    isInitializing,
+    localize,
+  } = useMCPServerManager();
 
   const renderSelectedValues = useCallback(
     (values: string[], placeholder?: string) => {
@@ -118,166 +30,29 @@ function MCPSelect() {
     [localize],
   );
 
-  const handleConfigSave = useCallback(
-    (targetName: string, authData: Record<string, string>) => {
-      if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
-        // Use the pluginKey directly since it's already in the correct format
-        console.log(
-          `[MCP Select] Saving config for ${targetName}, pluginKey: ${`${Constants.mcp_prefix}${targetName}`}`,
-        );
-        const payload: TUpdateUserPlugins = {
-          pluginKey: `${Constants.mcp_prefix}${targetName}`,
-          action: 'install',
-          auth: authData,
-        };
-        updateUserPluginsMutation.mutate(payload);
-      }
-    },
-    [selectedToolForConfig, updateUserPluginsMutation],
-  );
-
-  const handleConfigRevoke = useCallback(
-    (targetName: string) => {
-      if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
-        // Use the pluginKey directly since it's already in the correct format
-        const payload: TUpdateUserPlugins = {
-          pluginKey: `${Constants.mcp_prefix}${targetName}`,
-          action: 'uninstall',
-          auth: {},
-        };
-        updateUserPluginsMutation.mutate(payload);
-
-        // Remove the server from selected values after revoke
-        const currentValues = mcpValues ?? [];
-        const filteredValues = currentValues.filter((name) => name !== targetName);
-        setMCPValues(filteredValues);
-      }
-    },
-    [selectedToolForConfig, updateUserPluginsMutation, mcpValues, setMCPValues],
-  );
-
-  const handleSave = useCallback(
-    (authData: Record<string, string>) => {
-      if (selectedToolForConfig) {
-        handleConfigSave(selectedToolForConfig.name, authData);
-      }
-    },
-    [selectedToolForConfig, handleConfigSave],
-  );
-
-  const handleRevoke = useCallback(() => {
-    if (selectedToolForConfig) {
-      handleConfigRevoke(selectedToolForConfig.name);
-    }
-  }, [selectedToolForConfig, handleConfigRevoke]);
-
-  const handleDialogOpenChange = useCallback((open: boolean) => {
-    setIsConfigModalOpen(open);
-
-    // Restore focus when dialog closes
-    if (!open && previousFocusRef.current) {
-      // Use setTimeout to ensure the dialog has fully closed before restoring focus
-      setTimeout(() => {
-        if (previousFocusRef.current && typeof previousFocusRef.current.focus === 'function') {
-          previousFocusRef.current.focus();
-        }
-        previousFocusRef.current = null;
-      }, 0);
-    }
-  }, []);
-
-  // Get connection status for all MCP servers (now from hook)
-  // Remove the duplicate useMCPConnectionStatusQuery since it's in the hook
-
-  // Modified setValue function that attempts to initialize disconnected servers
-  const filteredSetMCPValues = useCallback(
-    (values: string[]) => {
-      // Separate connected and disconnected servers
-      const connectedServers: string[] = [];
-      const disconnectedServers: string[] = [];
-
-      values.forEach((serverName) => {
-        const serverStatus = connectionStatus[serverName];
-        if (serverStatus?.connectionState === 'connected') {
-          connectedServers.push(serverName);
-        } else {
-          disconnectedServers.push(serverName);
-        }
-      });
-
-      // Only set connected servers as selected values
-      setMCPValues(connectedServers);
-
-      // Attempt to initialize each disconnected server (once)
-      disconnectedServers.forEach((serverName) => {
-        initializeServer(serverName);
-      });
-    },
-    [connectionStatus, setMCPValues, initializeServer],
-  );
-
   const renderItemContent = useCallback(
     (serverName: string, defaultContent: React.ReactNode) => {
-      const tool = mcpToolDetails?.find((t) => t.name === serverName);
-      const serverStatus = connectionStatus[serverName];
-      const serverConfig = startupConfig?.mcpServers?.[serverName];
+      const statusIconProps = getServerStatusIconProps(serverName);
+      const isServerInitializing = isInitializing(serverName);
 
-      const handleConfigClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-
-        previousFocusRef.current = document.activeElement as HTMLElement;
-
-        const configTool = tool || {
-          name: serverName,
-          pluginKey: `${Constants.mcp_prefix}${serverName}`,
-          authConfig: serverConfig?.customUserVars
-            ? Object.entries(serverConfig.customUserVars).map(([key, config]) => ({
-                authField: key,
-                label: config.title,
-                description: config.description,
-              }))
-            : [],
-          authenticated: false,
-        };
-        setSelectedToolForConfig(configTool);
-        setIsConfigModalOpen(true);
-      };
-
-      const handleCancelClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        cancelOAuthFlow(serverName);
-      };
-
-      // Common wrapper for the main content (check mark + text)
-      // Ensures Check & Text are adjacent and the group takes available space.
+      /**
+       Common wrapper for the main content (check mark + text).
+       Ensures Check & Text are adjacent and the group takes available space.
+        */
       const mainContentWrapper = (
         <button
           type="button"
-          className="flex flex-grow items-center rounded bg-transparent p-0 text-left transition-colors focus:outline-none"
+          className={`flex flex-grow items-center rounded bg-transparent p-0 text-left transition-colors focus:outline-none ${
+            isServerInitializing ? 'opacity-50' : ''
+          }`}
           tabIndex={0}
+          disabled={isServerInitializing}
         >
           {defaultContent}
         </button>
       );
 
-      // Check if this server has customUserVars to configure
-      const hasCustomUserVars =
-        serverConfig?.customUserVars && Object.keys(serverConfig.customUserVars).length > 0;
-
-      const statusIcon = (
-        <MCPServerStatusIcon
-          serverName={serverName}
-          serverStatus={serverStatus}
-          tool={tool}
-          onConfigClick={handleConfigClick}
-          isInitializing={isInitializing(serverName)}
-          canCancel={isCancellable(serverName)}
-          onCancel={handleCancelClick}
-          hasCustomUserVars={hasCustomUserVars}
-        />
-      );
+      const statusIcon = statusIconProps && <MCPServerStatusIcon {...statusIconProps} />;
 
       if (statusIcon) {
         return (
@@ -290,35 +65,25 @@ function MCPSelect() {
 
       return mainContentWrapper;
     },
-    [
-      isInitializing,
-      isCancellable,
-      mcpToolDetails,
-      cancelOAuthFlow,
-      connectionStatus,
-      startupConfig?.mcpServers,
-    ],
+    [getServerStatusIconProps, isInitializing],
   );
 
-  // Don't render if no servers are selected and not pinned
   if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
     return null;
   }
 
-  // Don't render if no MCP servers are configured
   if (!configuredServers || configuredServers.length === 0) {
     return null;
   }
 
-  const placeholderText =
-    startupConfig?.interface?.mcpServers?.placeholder || localize('com_ui_mcp_servers');
+  const configDialogProps = getConfigDialogProps();
+
   return (
     <>
       <MultiSelect
         items={configuredServers}
         selectedValues={mcpValues ?? []}
-        setSelectedValues={filteredSetMCPValues}
-        defaultSelectedValues={mcpValues ?? []}
+        setSelectedValues={batchToggleServers}
         renderSelectedValues={renderSelectedValues}
         renderItemContent={renderItemContent}
         placeholder={placeholderText}
@@ -328,39 +93,7 @@ function MCPSelect() {
         selectItemsClassName="border border-blue-600/50 bg-blue-500/10 hover:bg-blue-700/10"
         selectClassName="group relative inline-flex items-center justify-center md:justify-start gap-1.5 rounded-full border border-border-medium text-sm font-medium transition-all md:w-full size-9 p-2 md:p-3 bg-transparent shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner"
       />
-      {selectedToolForConfig && (
-        <MCPConfigDialog
-          serverName={selectedToolForConfig.name}
-          serverStatus={connectionStatus[selectedToolForConfig.name]}
-          isOpen={isConfigModalOpen}
-          onOpenChange={handleDialogOpenChange}
-          fieldsSchema={(() => {
-            const schema: Record<string, ConfigFieldDetail> = {};
-            if (selectedToolForConfig?.authConfig) {
-              selectedToolForConfig.authConfig.forEach((field) => {
-                schema[field.authField] = {
-                  title: field.label,
-                  description: field.description,
-                };
-              });
-            }
-            return schema;
-          })()}
-          initialValues={(() => {
-            const initial: Record<string, string> = {};
-            // Note: Actual initial values might need to be fetched if they are stored user-specifically
-            if (selectedToolForConfig?.authConfig) {
-              selectedToolForConfig.authConfig.forEach((field) => {
-                initial[field.authField] = ''; // Or fetched value
-              });
-            }
-            return initial;
-          })()}
-          onSave={handleSave}
-          onRevoke={handleRevoke}
-          isSubmitting={updateUserPluginsMutation.isLoading}
-        />
-      )}
+      {configDialogProps && <MCPConfigDialog {...configDialogProps} />}
     </>
   );
 }

client/src/components/Chat/Input/MCPSubMenu.tsx

@@ -1,103 +1,130 @@
 import React from 'react';
 import * as Ariakit from '@ariakit/react';
 import { ChevronRight } from 'lucide-react';
-import { PinIcon, MCPIcon } from '~/components/svg';
-import { useLocalize } from '~/hooks';
+import { PinIcon, MCPIcon } from '@librechat/client';
+import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
+import { useMCPServerManager } from '~/hooks/MCP/useMCPServerManager';
+import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
 import { cn } from '~/utils';
 
 interface MCPSubMenuProps {
-  isMCPPinned: boolean;
-  setIsMCPPinned: (value: boolean) => void;
-  mcpValues?: string[];
-  mcpServerNames: string[];
-  handleMCPToggle: (serverName: string) => void;
   placeholder?: string;
 }
 
-const MCPSubMenu = ({
-  mcpValues,
-  isMCPPinned,
-  mcpServerNames,
-  setIsMCPPinned,
-  handleMCPToggle,
-  placeholder,
-  ...props
-}: MCPSubMenuProps) => {
-  const localize = useLocalize();
+const MCPSubMenu = React.forwardRef<HTMLDivElement, MCPSubMenuProps>(
+  ({ placeholder, ...props }, ref) => {
+    const {
+      configuredServers,
+      mcpValues,
+      isPinned,
+      setIsPinned,
+      placeholderText,
+      toggleServerSelection,
+      getServerStatusIconProps,
+      getConfigDialogProps,
+      isInitializing,
+    } = useMCPServerManager();
 
-  const menuStore = Ariakit.useMenuStore({
-    focusLoop: true,
-    showTimeout: 100,
-    placement: 'right',
-  });
+    const menuStore = Ariakit.useMenuStore({
+      focusLoop: true,
+      showTimeout: 100,
+      placement: 'right',
+    });
 
-  return (
-    <Ariakit.MenuProvider store={menuStore}>
-      <Ariakit.MenuItem
-        {...props}
-        render={
-          <Ariakit.MenuButton
-            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-              e.stopPropagation();
-              menuStore.toggle();
-            }}
-            className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover"
-          />
-        }
-      >
-        <div className="flex items-center gap-2">
-          <MCPIcon className="icon-md" />
-          <span>{placeholder || localize('com_ui_mcp_servers')}</span>
-          <ChevronRight className="ml-auto h-3 w-3" />
-        </div>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsMCPPinned(!isMCPPinned);
-          }}
-          className={cn(
-            'rounded p-1 transition-all duration-200',
-            'hover:bg-surface-tertiary hover:shadow-sm',
-            !isMCPPinned && 'text-text-secondary hover:text-text-primary',
-          )}
-          aria-label={isMCPPinned ? 'Unpin' : 'Pin'}
-        >
-          <div className="h-4 w-4">
-            <PinIcon unpin={isMCPPinned} />
-          </div>
-        </button>
-      </Ariakit.MenuItem>
-      <Ariakit.Menu
-        portal={true}
-        unmountOnHide={true}
-        className={cn(
-          'animate-popover-left z-50 ml-3 flex min-w-[200px] flex-col rounded-xl',
-          'border border-border-light bg-surface-secondary p-1 shadow-lg',
-        )}
-      >
-        {mcpServerNames.map((serverName) => (
+    // Don't render if no MCP servers are configured
+    if (!configuredServers || configuredServers.length === 0) {
+      return null;
+    }
+
+    const configDialogProps = getConfigDialogProps();
+
+    return (
+      <div ref={ref}>
+        <Ariakit.MenuProvider store={menuStore}>
           <Ariakit.MenuItem
-            key={serverName}
-            onClick={(event) => {
-              event.preventDefault();
-              handleMCPToggle(serverName);
-            }}
+            {...props}
+            render={
+              <Ariakit.MenuButton
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation();
+                  menuStore.toggle();
+                }}
+                className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover"
+              />
+            }
+          >
+            <div className="flex items-center gap-2">
+              <MCPIcon className="icon-md" />
+              <span>{placeholder || placeholderText}</span>
+              <ChevronRight className="ml-auto h-3 w-3" />
+            </div>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsPinned(!isPinned);
+              }}
+              className={cn(
+                'rounded p-1 transition-all duration-200',
+                'hover:bg-surface-tertiary hover:shadow-sm',
+                !isPinned && 'text-text-secondary hover:text-text-primary',
+              )}
+              aria-label={isPinned ? 'Unpin' : 'Pin'}
+            >
+              <div className="h-4 w-4">
+                <PinIcon unpin={isPinned} />
+              </div>
+            </button>
+          </Ariakit.MenuItem>
+          <Ariakit.Menu
+            portal={true}
+            unmountOnHide={true}
             className={cn(
-              'flex items-center gap-2 rounded-lg px-2 py-1.5 text-text-primary hover:cursor-pointer',
-              'scroll-m-1 outline-none transition-colors',
-              'hover:bg-black/[0.075] dark:hover:bg-white/10',
-              'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
-              'w-full min-w-0 text-sm',
+              'animate-popover-left z-50 ml-3 flex min-w-[200px] flex-col rounded-xl',
+              'border border-border-light bg-surface-secondary p-1 shadow-lg',
             )}
           >
-            <Ariakit.MenuItemCheck checked={mcpValues?.includes(serverName) ?? false} />
-            <span>{serverName}</span>
-          </Ariakit.MenuItem>
-        ))}
-      </Ariakit.Menu>
-    </Ariakit.MenuProvider>
-  );
-};
+            {configuredServers.map((serverName) => {
+              const statusIconProps = getServerStatusIconProps(serverName);
+              const isSelected = mcpValues?.includes(serverName) ?? false;
+              const isServerInitializing = isInitializing(serverName);
+
+              const statusIcon = statusIconProps && <MCPServerStatusIcon {...statusIconProps} />;
+
+              return (
+                <Ariakit.MenuItem
+                  key={serverName}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    toggleServerSelection(serverName);
+                  }}
+                  disabled={isServerInitializing}
+                  className={cn(
+                    'flex items-center gap-2 rounded-lg px-2 py-1.5 text-text-primary hover:cursor-pointer',
+                    'scroll-m-1 outline-none transition-colors',
+                    'hover:bg-black/[0.075] dark:hover:bg-white/10',
+                    'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                    'w-full min-w-0 justify-between text-sm',
+                    isServerInitializing &&
+                      'opacity-50 hover:bg-transparent dark:hover:bg-transparent',
+                  )}
+                >
+                  <div className="flex flex-grow items-center gap-2">
+                    <Ariakit.MenuItemCheck checked={isSelected} />
+                    <span>{serverName}</span>
+                  </div>
+                  {statusIcon && <div className="ml-2 flex items-center">{statusIcon}</div>}
+                </Ariakit.MenuItem>
+              );
+            })}
+          </Ariakit.Menu>
+        </Ariakit.MenuProvider>
+        {configDialogProps && <MCPConfigDialog {...configDialogProps} />}
+      </div>
+    );
+  },
+);
+
+MCPSubMenu.displayName = 'MCPSubMenu';
 
 export default React.memo(MCPSubMenu);

client/src/components/Chat/Input/Mention.tsx

@@ -1,12 +1,13 @@
 import { useState, useRef, useEffect } from 'react';
+import { useCombobox } from '@librechat/client';
 import { AutoSizer, List } from 'react-virtualized';
 import { EModelEndpoint } from 'librechat-data-provider';
-import type { SetterOrUpdater } from 'recoil';
 import type { MentionOption, ConvoGenerator } from '~/common';
+import type { SetterOrUpdater } from 'recoil';
 import useSelectMention from '~/hooks/Input/useSelectMention';
+import { useLocalize, TranslationKeys } from '~/hooks';
 import { useAssistantsMapContext } from '~/Providers';
 import useMentions from '~/hooks/Input/useMentions';
-import { useLocalize, useCombobox, TranslationKeys } from '~/hooks';
 import { removeCharIfLast } from '~/utils';
 import MentionItem from './MentionItem';
 

client/src/components/Chat/Input/OptionsPopover.tsx

@@ -1,11 +1,10 @@
 import { useRef } from 'react';
 import { Save } from 'lucide-react';
 import { Portal, Content } from '@radix-ui/react-popover';
+import { Button, CrossIcon, useOnClickOutside } from '@librechat/client';
 import type { ReactNode } from 'react';
-import { useLocalize, useOnClickOutside } from '~/hooks';
 import { cn, removeFocusOutlines } from '~/utils';
-import { CrossIcon } from '~/components/svg';
-import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 
 type TOptionsPopoverProps = {
   children: ReactNode;

client/src/components/Chat/Input/PopoverButtons.tsx

@@ -1,9 +1,8 @@
 import { useRecoilState } from 'recoil';
 import { EModelEndpoint, SettingsViews } from 'librechat-data-provider';
+import { Button, MessagesSquared, GPTIcon, AssistantIcon, DataIcon } from '@librechat/client';
 import type { ReactNode } from 'react';
-import { MessagesSquared, GPTIcon, AssistantIcon, DataIcon } from '~/components/svg';
 import { useChatContext } from '~/Providers';
-import { Button } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils/';
 import store from '~/store';

client/src/components/Chat/Input/PromptsCommand.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useMemo, memo, useCallback } from 'react';
 import { AutoSizer, List } from 'react-virtualized';
+import { Spinner, useCombobox } from '@librechat/client';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { TPromptGroup } from 'librechat-data-provider';
@@ -7,9 +8,8 @@ import type { PromptOption } from '~/common';
 import { removeCharIfLast, mapPromptGroups, detectVariables } from '~/utils';
 import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
 import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
-import { useLocalize, useCombobox, useHasAccess } from '~/hooks';
+import { useLocalize, useHasAccess } from '~/hooks';
 import { useGetAllPromptGroups } from '~/data-provider';
-import { Spinner } from '~/components/svg';
 import MentionItem from './MentionItem';
 import store from '~/store';
 

client/src/components/Chat/Input/SendButton.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useWatch } from 'react-hook-form';
 import type { Control } from 'react-hook-form';
-import { TooltipAnchor } from '~/components/ui';
-import { SendIcon } from '~/components/svg';
+import { SendIcon, TooltipAnchor } from '@librechat/client';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/StopButton.tsx

@@ -1,4 +1,4 @@
-import { TooltipAnchor } from '~/components/ui';
+import { TooltipAnchor } from '@librechat/client';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { Globe, Settings, Settings2, TerminalSquareIcon } from 'lucide-react';
+import { TooltipAnchor, DropdownPopup, PinIcon, VectorIcon } from '@librechat/client';
 import type { MenuItemProps } from '~/common';
 import {
   AuthType,
@@ -9,11 +10,9 @@ import {
   PermissionTypes,
   defaultAgentCapabilities,
 } from 'librechat-data-provider';
-import { TooltipAnchor, DropdownPopup } from '~/components';
 import { useLocalize, useHasAccess, useAgentCapabilities } from '~/hooks';
 import ArtifactsSubMenu from '~/components/Chat/Input/ArtifactsSubMenu';
 import MCPSubMenu from '~/components/Chat/Input/MCPSubMenu';
-import { PinIcon, VectorIcon } from '~/components/svg';
 import { useBadgeRowContext } from '~/Providers';
 import { cn } from '~/utils';
 
@@ -55,12 +54,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   } = codeInterpreter;
   const { isPinned: isFileSearchPinned, setIsPinned: setIsFileSearchPinned } = fileSearch;
   const { isPinned: isArtifactsPinned, setIsPinned: setIsArtifactsPinned } = artifacts;
-  const {
-    mcpValues,
-    mcpServerNames,
-    isPinned: isMCPPinned,
-    setIsPinned: setIsMCPPinned,
-  } = mcpSelect;
+  const { mcpServerNames } = mcpSelect;
 
   const canUseWebSearch = useHasAccess({
     permissionType: PermissionTypes.WEB_SEARCH,
@@ -130,17 +124,6 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     }
   }, [artifacts]);
 
-  const handleMCPToggle = useCallback(
-    (serverName: string) => {
-      const currentValues = mcpSelect.mcpValues ?? [];
-      const newValues = currentValues.includes(serverName)
-        ? currentValues.filter((v) => v !== serverName)
-        : [...currentValues, serverName];
-      mcpSelect.setMCPValues(newValues);
-    },
-    [mcpSelect],
-  );
-
   const mcpPlaceholder = startupConfig?.interface?.mcpServers?.placeholder;
 
   const dropdownItems: MenuItemProps[] = [];
@@ -305,17 +288,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   if (mcpServerNames && mcpServerNames.length > 0) {
     dropdownItems.push({
       hideOnClick: false,
-      render: (props) => (
-        <MCPSubMenu
-          {...props}
-          mcpValues={mcpValues}
-          isMCPPinned={isMCPPinned}
-          placeholder={mcpPlaceholder}
-          mcpServerNames={mcpServerNames}
-          setIsMCPPinned={setIsMCPPinned}
-          handleMCPToggle={handleMCPToggle}
-        />
-      ),
+      render: (props) => <MCPSubMenu {...props} placeholder={mcpPlaceholder} />,
     });
   }
 
@@ -343,7 +316,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
 
   return (
     <DropdownPopup
-      itemClassName="flex w-full cursor-pointer items-center justify-between hover:bg-surface-hover gap-5"
+      itemClassName="flex w-full cursor-pointer rounded-lg items-center justify-between hover:bg-surface-hover gap-5"
       menuId="tools-dropdown-menu"
       isOpen={isPopoverActive}
       setIsOpen={setIsPopoverActive}

client/src/components/Chat/Input/WebSearch.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { Globe } from 'lucide-react';
+import { CheckboxButton } from '@librechat/client';
 import { Permissions, PermissionTypes } from 'librechat-data-provider';
-import CheckboxButton from '~/components/ui/CheckboxButton';
 import { useLocalize, useHasAccess } from '~/hooks';
 import { useBadgeRowContext } from '~/Providers';
 

client/src/components/Chat/Landing.tsx

@@ -1,9 +1,9 @@
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { easings } from '@react-spring/web';
 import { EModelEndpoint } from 'librechat-data-provider';
+import { BirthdayIcon, TooltipAnchor, SplitText } from '@librechat/client';
 import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
 import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
-import { BirthdayIcon, TooltipAnchor, SplitText } from '~/components';
 import ConvoIcon from '~/components/Endpoints/ConvoIcon';
 import { useLocalize, useAuthContext } from '~/hooks';
 import { getIconEndpoint, getEntity } from '~/utils';

client/src/components/Chat/Menus/BookmarkMenu.tsx

@@ -5,17 +5,15 @@ import { BookmarkPlusIcon } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
 import { Constants, QueryKeys } from 'librechat-data-provider';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
+import { DropdownPopup, TooltipAnchor, Spinner, useToastContext } from '@librechat/client';
 import type { TConversationTag } from 'librechat-data-provider';
 import type { FC } from 'react';
 import type * as t from '~/common';
 import { useConversationTagsQuery, useTagConversationMutation } from '~/data-provider';
-import { DropdownPopup, TooltipAnchor } from '~/components/ui';
 import { BookmarkContext } from '~/Providers/BookmarkContext';
 import { BookmarkEditDialog } from '~/components/Bookmarks';
 import { useBookmarkSuccess, useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
-import { useToastContext } from '~/Providers';
-import { Spinner } from '~/components';
 import { cn, logger } from '~/utils';
 import store from '~/store';
 

client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { BookmarkPlusIcon } from 'lucide-react';
+import { OGDialogTrigger } from '@librechat/client';
 import type { FC } from 'react';
 import { BookmarkEditDialog, BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
-import { OGDialogTrigger } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
 export const BookmarkMenuItems: FC<{

client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import { SettingsIcon } from 'lucide-react';
+import { TooltipAnchor, Spinner } from '@librechat/client';
 import { EModelEndpoint, isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { Endpoint } from '~/common';
 import { CustomMenu as Menu, CustomMenuItem as MenuItem } from '../CustomMenu';
 import { useModelSelectorContext } from '../ModelSelectorContext';
 import { renderEndpointModels } from './EndpointModelItem';
-import { TooltipAnchor, Spinner } from '~/components';
 import { filterModels } from '../utils';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';

client/src/components/Chat/Menus/HeaderNewChat.tsx

@@ -1,8 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { QueryKeys, Constants } from 'librechat-data-provider';
+import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
 import type { TMessage } from 'librechat-data-provider';
-import { TooltipAnchor, Button } from '~/components/ui';
-import { NewChatIcon } from '~/components/svg';
 import { useChatContext } from '~/Providers';
 import { useLocalize } from '~/hooks';