refactor: enhance UserAvatar component with improved image source handling and error state management

* refactor: Reasoning components with independent toggle buttons

- Refactored ThinkingButton to remove unnecessary state and props.
- Updated ContentParts to simplify content rendering and remove hover handling.
- Improved Reasoning component to include independent toggle functionality for each THINK part.
- Adjusted styles for better layout consistency and user experience.

* refactor: isolate hover effects for Reasoning

- Updated ThinkingButton to improve hover effects and layout consistency.
- Refactored Reasoning component to include a new wrapper class for better styling.
- Adjusted icon visibility and transitions for a smoother user experience.

* fix: Prevent rendering of empty messages in Chat component

- Added a check to skip rendering if the message text is only whitespace, improving the user interface by avoiding empty containers.

* chore: Replace div with fragment in Thinking component for cleaner markup

* chore: move Thinking component to Content Parts directory

* refactor: prevent rendering of whitespace-only text in Part component only for edge cases

.env.example

@@ -702,6 +702,16 @@ HELP_AND_FAQ_URL=https://librechat.ai
 # Comma-separated list of CacheKeys (e.g., ROLES,MESSAGES)
 # FORCED_IN_MEMORY_CACHE_NAMESPACES=ROLES,MESSAGES
 
+# Leader Election Configuration (for multi-instance deployments with Redis)
+# Duration in seconds that the leader lease is valid before it expires (default: 25)
+# LEADER_LEASE_DURATION=25
+# Interval in seconds at which the leader renews its lease (default: 10)
+# LEADER_RENEW_INTERVAL=10
+# Maximum number of retry attempts when renewing the lease fails (default: 3)
+# LEADER_RENEW_ATTEMPTS=3
+# Delay in seconds between retry attempts when renewing the lease (default: 0.5)
+# LEADER_RENEW_RETRY_DELAY=0.5
+
 #==================================================#
 #                      Others                      #
 #==================================================#

.github/workflows/cache-integration-tests.yml

@@ -8,12 +8,13 @@ on:
       - release/*
     paths:
       - 'packages/api/src/cache/**'
+      - 'packages/api/src/cluster/**'
       - 'redis-config/**'
       - '.github/workflows/cache-integration-tests.yml'
 
 jobs:
   cache_integration_tests:
-    name: Run Cache Integration Tests
+    name: Integration Tests that use actual Redis Cache
     timeout-minutes: 30
     runs-on: ubuntu-latest
 
@@ -66,7 +67,15 @@ jobs:
           USE_REDIS: true
           REDIS_URI: redis://127.0.0.1:6379
           REDIS_CLUSTER_URI: redis://127.0.0.1:7001,redis://127.0.0.1:7002,redis://127.0.0.1:7003
-        run: npm run test:cache:integration
+        run: npm run test:cache-integration:core
+
+      - name: Run cluster integration tests
+        working-directory: packages/api
+        env:
+          NODE_ENV: test
+          USE_REDIS: true
+          REDIS_URI: redis://127.0.0.1:6379
+        run: npm run test:cache-integration:cluster
 
       - name: Stop Redis Cluster
         if: always()

Dockerfile

@@ -1,4 +1,4 @@
-# v0.8.0
+# v0.8.1-rc1
 
 # Base node image
 FROM node:20-alpine AS node

Dockerfile.multi

@@ -1,5 +1,5 @@
 # Dockerfile.multi
-# v0.8.0
+# v0.8.1-rc1
 
 # Base for all builds
 FROM node:20-alpine AS base-min

api/app/clients/OllamaClient.js

@@ -2,7 +2,7 @@ const { z } = require('zod');
 const axios = require('axios');
 const { Ollama } = require('ollama');
 const { sleep } = require('@librechat/agents');
-const { logAxiosError } = require('@librechat/api');
+const { resolveHeaders } = require('@librechat/api');
 const { logger } = require('@librechat/data-schemas');
 const { Constants } = require('librechat-data-provider');
 const { deriveBaseURL } = require('~/utils');
@@ -44,6 +44,7 @@ class OllamaClient {
   constructor(options = {}) {
     const host = deriveBaseURL(options.baseURL ?? 'http://localhost:11434');
     this.streamRate = options.streamRate ?? Constants.DEFAULT_STREAM_RATE;
+    this.headers = options.headers ?? {};
     /** @type {Ollama} */
     this.client = new Ollama({ host });
   }
@@ -51,27 +52,32 @@ class OllamaClient {
   /**
    * Fetches Ollama models from the specified base API path.
    * @param {string} baseURL
+   * @param {Object} [options] - Optional configuration
+   * @param {Partial<IUser>} [options.user] - User object for header resolution
+   * @param {Record<string, string>} [options.headers] - Headers to include in the request
    * @returns {Promise<string[]>} The Ollama models.
+   * @throws {Error} Throws if the Ollama API request fails
    */
-  static async fetchModels(baseURL) {
-    let models = [];
+  static async fetchModels(baseURL, options = {}) {
     if (!baseURL) {
-      return models;
-    }
-    try {
-      const ollamaEndpoint = deriveBaseURL(baseURL);
-      /** @type {Promise<AxiosResponse<OllamaListResponse>>} */
-      const response = await axios.get(`${ollamaEndpoint}/api/tags`, {
-        timeout: 5000,
-      });
-      models = response.data.models.map((tag) => tag.name);
-      return models;
-    } catch (error) {
-      const logMessage =
-        "Failed to fetch models from Ollama API. If you are not using Ollama directly, and instead, through some aggregator or reverse proxy that handles fetching via OpenAI spec, ensure the name of the endpoint doesn't start with `ollama` (case-insensitive).";
-      logAxiosError({ message: logMessage, error });
       return [];
     }
+
+    const ollamaEndpoint = deriveBaseURL(baseURL);
+
+    const resolvedHeaders = resolveHeaders({
+      headers: options.headers,
+      user: options.user,
+    });
+
+    /** @type {Promise<AxiosResponse<OllamaListResponse>>} */
+    const response = await axios.get(`${ollamaEndpoint}/api/tags`, {
+      headers: resolvedHeaders,
+      timeout: 5000,
+    });
+
+    const models = response.data.models.map((tag) => tag.name);
+    return models;
   }
 
   /**

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

@@ -5,6 +5,7 @@ const FormData = require('form-data');
 const { ProxyAgent } = require('undici');
 const { tool } = require('@langchain/core/tools');
 const { logger } = require('@librechat/data-schemas');
+const { HttpsProxyAgent } = require('https-proxy-agent');
 const { logAxiosError, oaiToolkit } = require('@librechat/api');
 const { ContentTypes, EImageOutputType } = require('librechat-data-provider');
 const { getStrategyFunctions } = require('~/server/services/Files/strategies');
@@ -348,16 +349,7 @@ Error Message: ${error.message}`);
         };
 
         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);
-          }
+          axiosConfig.httpsAgent = new HttpsProxyAgent(process.env.PROXY);
         }
 
         if (process.env.IMAGE_GEN_OAI_AZURE_API_VERSION && process.env.IMAGE_GEN_OAI_BASEURL) {

api/app/clients/tools/util/handleTools.js

@@ -448,7 +448,7 @@ Current Date & Time: ${replaceSpecialVars({ text: '{{iso_datetime}}' })}
         }
         if (!availableTools) {
           try {
-            availableTools = await getMCPServerTools(serverName);
+            availableTools = await getMCPServerTools(safeUser.id, serverName);
           } catch (error) {
             logger.error(`Error fetching available tools for MCP server ${serverName}:`, error);
           }

api/models/Agent.js

@@ -62,25 +62,38 @@ const getAgents = async (searchParameter) => await Agent.find(searchParameter).l
  *
  * @param {Object} params
  * @param {ServerRequest} params.req
+ * @param {string} params.spec
  * @param {string} params.agent_id
  * @param {string} params.endpoint
  * @param {import('@librechat/agents').ClientOptions} [params.model_parameters]
  * @returns {Promise<Agent|null>} The agent document as a plain object, or null if not found.
  */
-const loadEphemeralAgent = async ({ req, agent_id, endpoint, model_parameters: _m }) => {
+const loadEphemeralAgent = async ({ req, spec, agent_id, endpoint, model_parameters: _m }) => {
   const { model, ...model_parameters } = _m;
+  const modelSpecs = req.config?.modelSpecs?.list;
+  /** @type {TModelSpec | null} */
+  let modelSpec = null;
+  if (spec != null && spec !== '') {
+    modelSpec = modelSpecs?.find((s) => s.name === spec) || null;
+  }
   /** @type {TEphemeralAgent | null} */
   const ephemeralAgent = req.body.ephemeralAgent;
   const mcpServers = new Set(ephemeralAgent?.mcp);
+  const userId = req.user?.id; // note: userId cannot be undefined at runtime
+  if (modelSpec?.mcpServers) {
+    for (const mcpServer of modelSpec.mcpServers) {
+      mcpServers.add(mcpServer);
+    }
+  }
   /** @type {string[]} */
   const tools = [];
-  if (ephemeralAgent?.execute_code === true) {
+  if (ephemeralAgent?.execute_code === true || modelSpec?.executeCode === true) {
     tools.push(Tools.execute_code);
   }
-  if (ephemeralAgent?.file_search === true) {
+  if (ephemeralAgent?.file_search === true || modelSpec?.fileSearch === true) {
     tools.push(Tools.file_search);
   }
-  if (ephemeralAgent?.web_search === true) {
+  if (ephemeralAgent?.web_search === true || modelSpec?.webSearch === true) {
     tools.push(Tools.web_search);
   }
 
@@ -90,7 +103,7 @@ const loadEphemeralAgent = async ({ req, agent_id, endpoint, model_parameters: _
       if (addedServers.has(mcpServer)) {
         continue;
       }
-      const serverTools = await getMCPServerTools(mcpServer);
+      const serverTools = await getMCPServerTools(userId, mcpServer);
       if (!serverTools) {
         tools.push(`${mcp_all}${mcp_delimiter}${mcpServer}`);
         addedServers.add(mcpServer);
@@ -122,17 +135,18 @@ const loadEphemeralAgent = async ({ req, agent_id, endpoint, model_parameters: _
  *
  * @param {Object} params
  * @param {ServerRequest} params.req
+ * @param {string} params.spec
  * @param {string} params.agent_id
  * @param {string} params.endpoint
  * @param {import('@librechat/agents').ClientOptions} [params.model_parameters]
  * @returns {Promise<Agent|null>} The agent document as a plain object, or null if not found.
  */
-const loadAgent = async ({ req, agent_id, endpoint, model_parameters }) => {
+const loadAgent = async ({ req, spec, agent_id, endpoint, model_parameters }) => {
   if (!agent_id) {
     return null;
   }
   if (agent_id === EPHEMERAL_AGENT_ID) {
-    return await loadEphemeralAgent({ req, agent_id, endpoint, model_parameters });
+    return await loadEphemeralAgent({ req, spec, agent_id, endpoint, model_parameters });
   }
   const agent = await getAgent({
     id: agent_id,

api/models/Agent.spec.js

@@ -1931,7 +1931,7 @@ describe('models/Agent', () => {
       });
 
       // Mock getMCPServerTools to return tools for each server
-      getMCPServerTools.mockImplementation(async (server) => {
+      getMCPServerTools.mockImplementation(async (_userId, server) => {
         if (server === 'server1') {
           return { tool1_mcp_server1: {} };
         } else if (server === 'server2') {
@@ -2125,7 +2125,7 @@ describe('models/Agent', () => {
         getCachedTools.mockResolvedValue(availableTools);
 
         // Mock getMCPServerTools to return all tools for server1
-        getMCPServerTools.mockImplementation(async (server) => {
+        getMCPServerTools.mockImplementation(async (_userId, server) => {
           if (server === 'server1') {
             return availableTools; // All 100 tools belong to server1
           }
@@ -2674,7 +2674,7 @@ describe('models/Agent', () => {
       });
 
       // Mock getMCPServerTools to return only tools matching the server
-      getMCPServerTools.mockImplementation(async (server) => {
+      getMCPServerTools.mockImplementation(async (_userId, server) => {
         if (server === 'server1') {
           // Only return tool that correctly matches server1 format
           return { tool_mcp_server1: {} };

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/backend",
-  "version": "v0.8.0",
+  "version": "v0.8.1-rc1",
   "description": "",
   "scripts": {
     "start": "echo 'please run this from the root directory'",
@@ -48,7 +48,7 @@
     "@langchain/google-genai": "^0.2.13",
     "@langchain/google-vertexai": "^0.2.13",
     "@langchain/textsplitters": "^0.1.0",
-    "@librechat/agents": "^2.4.86",
+    "@librechat/agents": "^2.4.90",
     "@librechat/api": "*",
     "@librechat/data-schemas": "*",
     "@microsoft/microsoft-graph-client": "^3.0.7",

api/server/controllers/agents/client.js

@@ -8,6 +8,7 @@ const {
   Tokenizer,
   checkAccess,
   logAxiosError,
+  sanitizeTitle,
   resolveHeaders,
   getBalanceConfig,
   memoryInstructions,
@@ -775,6 +776,7 @@ class AgentClient extends BaseClient {
       const agentsEConfig = appConfig.endpoints?.[EModelEndpoint.agents];
 
       config = {
+        runName: 'AgentRun',
         configurable: {
           thread_id: this.conversationId,
           last_agent_index: this.agentConfigs?.size ?? 0,
@@ -1233,6 +1235,10 @@ class AgentClient extends BaseClient {
               handleLLMEnd,
             },
           ],
+          configurable: {
+            thread_id: this.conversationId,
+            user_id: this.user ?? this.options.req.user?.id,
+          },
         },
       });
 
@@ -1270,7 +1276,7 @@ class AgentClient extends BaseClient {
         );
       });
 
-      return titleResult.title;
+      return sanitizeTitle(titleResult.title);
     } catch (err) {
       logger.error('[api/server/controllers/agents/client.js #titleConvo] Error', err);
       return;

api/server/controllers/agents/client.test.js

@@ -10,6 +10,10 @@ jest.mock('@librechat/agents', () => ({
   }),
 }));
 
+jest.mock('@librechat/api', () => ({
+  ...jest.requireActual('@librechat/api'),
+}));
+
 describe('AgentClient - titleConvo', () => {
   let client;
   let mockRun;
@@ -252,6 +256,38 @@ describe('AgentClient - titleConvo', () => {
       expect(result).toBe('Generated Title');
     });
 
+    it('should sanitize the generated title by removing think blocks', async () => {
+      const titleWithThinkBlock = '<think>reasoning about the title</think> User Hi Greeting';
+      mockRun.generateTitle.mockResolvedValue({
+        title: titleWithThinkBlock,
+      });
+
+      const text = 'Test conversation text';
+      const abortController = new AbortController();
+
+      const result = await client.titleConvo({ text, abortController });
+
+      // Should remove the <think> block and return only the clean title
+      expect(result).toBe('User Hi Greeting');
+      expect(result).not.toContain('<think>');
+      expect(result).not.toContain('</think>');
+    });
+
+    it('should return fallback title when sanitization results in empty string', async () => {
+      const titleOnlyThinkBlock = '<think>only reasoning no actual title</think>';
+      mockRun.generateTitle.mockResolvedValue({
+        title: titleOnlyThinkBlock,
+      });
+
+      const text = 'Test conversation text';
+      const abortController = new AbortController();
+
+      const result = await client.titleConvo({ text, abortController });
+
+      // Should return the fallback title since sanitization would result in empty string
+      expect(result).toBe('Untitled Conversation');
+    });
+
     it('should handle errors gracefully and return undefined', async () => {
       mockRun.generateTitle.mockRejectedValue(new Error('Title generation failed'));
 

api/server/controllers/mcp.js

@@ -32,7 +32,7 @@ const getMCPTools = async (req, res) => {
     const mcpServers = {};
 
     const cachePromises = configuredServers.map((serverName) =>
-      getMCPServerTools(serverName).then((tools) => ({ serverName, tools })),
+      getMCPServerTools(userId, serverName).then((tools) => ({ serverName, tools })),
     );
     const cacheResults = await Promise.all(cachePromises);
 
@@ -52,7 +52,7 @@ const getMCPTools = async (req, res) => {
 
       if (Object.keys(serverTools).length > 0) {
         // Cache asynchronously without blocking
-        cacheMCPServerTools({ serverName, serverTools }).catch((err) =>
+        cacheMCPServerTools({ userId, serverName, serverTools }).catch((err) =>
           logger.error(`[getMCPTools] Failed to cache tools for ${serverName}:`, err),
         );
       }

api/server/routes/__tests__/mcp.spec.js

@@ -47,6 +47,7 @@ jest.mock('~/models', () => ({
 jest.mock('~/server/services/Config', () => ({
   setCachedTools: jest.fn(),
   getCachedTools: jest.fn(),
+  getMCPServerTools: jest.fn(),
   loadCustomConfig: jest.fn(),
 }));
 

api/server/routes/mcp.js

@@ -205,6 +205,7 @@ router.get('/:serverName/oauth/callback', async (req, res) => {
 
         const tools = await userConnection.fetchTools();
         await updateMCPServerTools({
+          userId: flowState.userId,
           serverName,
           tools,
         });

api/server/services/Config/__tests__/getCachedTools.spec.js

@@ -0,0 +1,10 @@
+const { ToolCacheKeys } = require('../getCachedTools');
+
+describe('getCachedTools - Cache Isolation Security', () => {
+  describe('ToolCacheKeys.MCP_SERVER', () => {
+    it('should generate cache keys that include userId', () => {
+      const key = ToolCacheKeys.MCP_SERVER('user123', 'github');
+      expect(key).toBe('tools:mcp:user123:github');
+    });
+  });
+});

api/server/services/Config/getCachedTools.js

@@ -7,24 +7,25 @@ const getLogStores = require('~/cache/getLogStores');
 const ToolCacheKeys = {
   /** Global tools available to all users */
   GLOBAL: 'tools:global',
-  /** MCP tools cached by server name */
-  MCP_SERVER: (serverName) => `tools:mcp:${serverName}`,
+  /** MCP tools cached by user ID and server name */
+  MCP_SERVER: (userId, serverName) => `tools:mcp:${userId}:${serverName}`,
 };
 
 /**
  * Retrieves available tools from cache
  * @function getCachedTools
  * @param {Object} options - Options for retrieving tools
+ * @param {string} [options.userId] - User ID for user-specific MCP tools
  * @param {string} [options.serverName] - MCP server name to get cached tools for
  * @returns {Promise<LCAvailableTools|null>} The available tools object or null if not cached
  */
 async function getCachedTools(options = {}) {
   const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  const { serverName } = options;
+  const { userId, serverName } = options;
 
   // Return MCP server-specific tools if requested
-  if (serverName) {
-    return await cache.get(ToolCacheKeys.MCP_SERVER(serverName));
+  if (serverName && userId) {
+    return await cache.get(ToolCacheKeys.MCP_SERVER(userId, serverName));
   }
 
   // Default to global tools
@@ -36,17 +37,18 @@ async function getCachedTools(options = {}) {
  * @function setCachedTools
  * @param {Object} tools - The tools object to cache
  * @param {Object} options - Options for caching tools
+ * @param {string} [options.userId] - User ID for user-specific MCP tools
  * @param {string} [options.serverName] - MCP server name for server-specific tools
  * @param {number} [options.ttl] - Time to live in milliseconds
  * @returns {Promise<boolean>} Whether the operation was successful
  */
 async function setCachedTools(tools, options = {}) {
   const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  const { serverName, ttl } = options;
+  const { userId, serverName, ttl } = options;
 
-  // Cache by MCP server if specified
-  if (serverName) {
-    return await cache.set(ToolCacheKeys.MCP_SERVER(serverName), tools, ttl);
+  // Cache by MCP server if specified (requires userId)
+  if (serverName && userId) {
+    return await cache.set(ToolCacheKeys.MCP_SERVER(userId, serverName), tools, ttl);
   }
 
   // Default to global cache
@@ -57,13 +59,14 @@ async function setCachedTools(tools, options = {}) {
  * Invalidates cached tools
  * @function invalidateCachedTools
  * @param {Object} options - Options for invalidating tools
+ * @param {string} [options.userId] - User ID for user-specific MCP tools
  * @param {string} [options.serverName] - MCP server name to invalidate
  * @param {boolean} [options.invalidateGlobal=false] - Whether to invalidate global tools
  * @returns {Promise<void>}
  */
 async function invalidateCachedTools(options = {}) {
   const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  const { serverName, invalidateGlobal = false } = options;
+  const { userId, serverName, invalidateGlobal = false } = options;
 
   const keysToDelete = [];
 
@@ -71,22 +74,23 @@ async function invalidateCachedTools(options = {}) {
     keysToDelete.push(ToolCacheKeys.GLOBAL);
   }
 
-  if (serverName) {
-    keysToDelete.push(ToolCacheKeys.MCP_SERVER(serverName));
+  if (serverName && userId) {
+    keysToDelete.push(ToolCacheKeys.MCP_SERVER(userId, serverName));
   }
 
   await Promise.all(keysToDelete.map((key) => cache.delete(key)));
 }
 
 /**
- * Gets MCP tools for a specific server from cache or merges with global tools
+ * Gets MCP tools for a specific server from cache
  * @function getMCPServerTools
+ * @param {string} userId - The user ID
  * @param {string} serverName - The MCP server name
  * @returns {Promise<LCAvailableTools|null>} The available tools for the server
  */
-async function getMCPServerTools(serverName) {
+async function getMCPServerTools(userId, serverName) {
   const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  const serverTools = await cache.get(ToolCacheKeys.MCP_SERVER(serverName));
+  const serverTools = await cache.get(ToolCacheKeys.MCP_SERVER(userId, serverName));
 
   if (serverTools) {
     return serverTools;

api/server/services/Config/loadConfigModels.js

@@ -57,7 +57,7 @@ async function loadConfigModels(req) {
 
   for (let i = 0; i < customEndpoints.length; i++) {
     const endpoint = customEndpoints[i];
-    const { models, name: configName, baseURL, apiKey } = endpoint;
+    const { models, name: configName, baseURL, apiKey, headers: endpointHeaders } = endpoint;
     const name = normalizeEndpointName(configName);
     endpointsMap[name] = endpoint;
 
@@ -76,6 +76,8 @@ async function loadConfigModels(req) {
           apiKey: API_KEY,
           baseURL: BASE_URL,
           user: req.user.id,
+          userObject: req.user,
+          headers: endpointHeaders,
           direct: endpoint.directEndpoint,
           userIdQuery: models.userIdQuery,
         });

api/server/services/Config/mcp.js

@@ -6,11 +6,12 @@ const { getLogStores } = require('~/cache');
 /**
  * Updates MCP tools in the cache for a specific server
  * @param {Object} params - Parameters for updating MCP tools
+ * @param {string} params.userId - User ID for user-specific caching
  * @param {string} params.serverName - MCP server name
  * @param {Array} params.tools - Array of tool objects from MCP server
  * @returns {Promise<LCAvailableTools>}
  */
-async function updateMCPServerTools({ serverName, tools }) {
+async function updateMCPServerTools({ userId, serverName, tools }) {
   try {
     const serverTools = {};
     const mcpDelimiter = Constants.mcp_delimiter;
@@ -27,14 +28,16 @@ async function updateMCPServerTools({ serverName, tools }) {
       };
     }
 
-    await setCachedTools(serverTools, { serverName });
+    await setCachedTools(serverTools, { userId, serverName });
 
     const cache = getLogStores(CacheKeys.CONFIG_STORE);
     await cache.delete(CacheKeys.TOOLS);
-    logger.debug(`[MCP Cache] Updated ${tools.length} tools for server ${serverName}`);
+    logger.debug(
+      `[MCP Cache] Updated ${tools.length} tools for server ${serverName} (user: ${userId})`,
+    );
     return serverTools;
   } catch (error) {
-    logger.error(`[MCP Cache] Failed to update tools for ${serverName}:`, error);
+    logger.error(`[MCP Cache] Failed to update tools for ${serverName} (user: ${userId}):`, error);
     throw error;
   }
 }
@@ -65,21 +68,22 @@ async function mergeAppTools(appTools) {
 /**
  * Caches MCP server tools (no longer merges with global)
  * @param {object} params
+ * @param {string} params.userId - User ID for user-specific caching
  * @param {string} params.serverName
  * @param {import('@librechat/api').LCAvailableTools} params.serverTools
  * @returns {Promise<void>}
  */
-async function cacheMCPServerTools({ serverName, serverTools }) {
+async function cacheMCPServerTools({ userId, serverName, serverTools }) {
   try {
     const count = Object.keys(serverTools).length;
     if (!count) {
       return;
     }
     // Only cache server-specific tools, no merging with global
-    await setCachedTools(serverTools, { serverName });
-    logger.debug(`Cached ${count} MCP server tools for ${serverName}`);
+    await setCachedTools(serverTools, { userId, serverName });
+    logger.debug(`Cached ${count} MCP server tools for ${serverName} (user: ${userId})`);
   } catch (error) {
-    logger.error(`Failed to cache MCP server tools for ${serverName}:`, error);
+    logger.error(`Failed to cache MCP server tools for ${serverName} (user: ${userId}):`, error);
     throw error;
   }
 }

api/server/services/Endpoints/agents/agent.js

@@ -134,10 +134,10 @@ const initializeAgent = async ({
   });
 
   const tokensModel =
-    agent.provider === EModelEndpoint.azureOpenAI ? agent.model : modelOptions.model;
-  const maxTokens = optionalChainWithEmptyCheck(
-    modelOptions.maxOutputTokens,
-    modelOptions.maxTokens,
+    agent.provider === EModelEndpoint.azureOpenAI ? agent.model : options.llmConfig?.model;
+  const maxOutputTokens = optionalChainWithEmptyCheck(
+    options.llmConfig?.maxOutputTokens,
+    options.llmConfig?.maxTokens,
     0,
   );
   const agentMaxContextTokens = optionalChainWithEmptyCheck(
@@ -203,7 +203,7 @@ const initializeAgent = async ({
     userMCPAuthMap,
     toolContextMap,
     useLegacyContent: !!options.useLegacyContent,
-    maxContextTokens: Math.round((agentMaxContextTokens - maxTokens) * 0.9),
+    maxContextTokens: Math.round((agentMaxContextTokens - maxOutputTokens) * 0.9),
   };
 };
 

api/server/services/Endpoints/agents/build.js

@@ -3,9 +3,10 @@ const { isAgentsEndpoint, removeNullishValues, Constants } = require('librechat-
 const { loadAgent } = require('~/models/Agent');
 
 const buildOptions = (req, endpoint, parsedBody, endpointType) => {
-  const { spec, iconURL, agent_id, instructions, ...model_parameters } = parsedBody;
+  const { spec, iconURL, agent_id, ...model_parameters } = parsedBody;
   const agentPromise = loadAgent({
     req,
+    spec,
     agent_id: isAgentsEndpoint(endpoint) ? agent_id : Constants.EPHEMERAL_AGENT_ID,
     endpoint,
     model_parameters,
@@ -20,7 +21,6 @@ const buildOptions = (req, endpoint, parsedBody, endpointType) => {
     endpoint,
     agent_id,
     endpointType,
-    instructions,
     model_parameters,
     agent: agentPromise,
   });

api/server/services/Endpoints/custom/initialize.js

@@ -1,4 +1,3 @@
-const { Providers } = require('@librechat/agents');
 const {
   resolveHeaders,
   isUserProvided,
@@ -143,39 +142,27 @@ const initializeClient = async ({ req, res, endpointOption, optionsOnly, overrid
 
   if (optionsOnly) {
     const modelOptions = endpointOption?.model_parameters ?? {};
-    if (endpoint !== Providers.OLLAMA) {
-      clientOptions = Object.assign(
-        {
-          modelOptions,
-        },
-        clientOptions,
-      );
-      clientOptions.modelOptions.user = req.user.id;
-      const options = getOpenAIConfig(apiKey, clientOptions, endpoint);
-      if (options != null) {
-        options.useLegacyContent = true;
-        options.endpointTokenConfig = endpointTokenConfig;
-      }
-      if (!clientOptions.streamRate) {
-        return options;
-      }
-      options.llmConfig.callbacks = [
-        {
-          handleLLMNewToken: createHandleLLMNewToken(clientOptions.streamRate),
-        },
-      ];
+    clientOptions = Object.assign(
+      {
+        modelOptions,
+      },
+      clientOptions,
+    );
+    clientOptions.modelOptions.user = req.user.id;
+    const options = getOpenAIConfig(apiKey, clientOptions, endpoint);
+    if (options != null) {
+      options.useLegacyContent = true;
+      options.endpointTokenConfig = endpointTokenConfig;
+    }
+    if (!clientOptions.streamRate) {
       return options;
     }
-
-    if (clientOptions.reverseProxyUrl) {
-      modelOptions.baseUrl = clientOptions.reverseProxyUrl.split('/v1')[0];
-      delete clientOptions.reverseProxyUrl;
-    }
-
-    return {
-      useLegacyContent: true,
-      llmConfig: modelOptions,
-    };
+    options.llmConfig.callbacks = [
+      {
+        handleLLMNewToken: createHandleLLMNewToken(clientOptions.streamRate),
+      },
+    ];
+    return options;
   }
 
   const client = new OpenAIClient(apiKey, clientOptions);

api/server/services/Endpoints/openAI/initialize.js

@@ -143,7 +143,7 @@ const initializeClient = async ({
     modelOptions.model = modelName;
     clientOptions = Object.assign({ modelOptions }, clientOptions);
     clientOptions.modelOptions.user = req.user.id;
-    const options = getOpenAIConfig(apiKey, clientOptions);
+    const options = getOpenAIConfig(apiKey, clientOptions, endpoint);
     if (options != null && serverless === true) {
       options.useLegacyContent = true;
     }

api/server/services/Files/Audio/getCustomConfigSpeech.js

@@ -42,18 +42,26 @@ async function getCustomConfigSpeech(req, res) {
       settings.advancedMode = speechTab.advancedMode;
     }
 
-    if (speechTab.speechToText) {
-      for (const key in speechTab.speechToText) {
-        if (speechTab.speechToText[key] !== undefined) {
-          settings[key] = speechTab.speechToText[key];
+    if (speechTab.speechToText !== undefined) {
+      if (typeof speechTab.speechToText === 'boolean') {
+        settings.speechToText = speechTab.speechToText;
+      } else {
+        for (const key in speechTab.speechToText) {
+          if (speechTab.speechToText[key] !== undefined) {
+            settings[key] = speechTab.speechToText[key];
+          }
         }
       }
     }
 
-    if (speechTab.textToSpeech) {
-      for (const key in speechTab.textToSpeech) {
-        if (speechTab.textToSpeech[key] !== undefined) {
-          settings[key] = speechTab.textToSpeech[key];
+    if (speechTab.textToSpeech !== undefined) {
+      if (typeof speechTab.textToSpeech === 'boolean') {
+        settings.textToSpeech = speechTab.textToSpeech;
+      } else {
+        for (const key in speechTab.textToSpeech) {
+          if (speechTab.textToSpeech[key] !== undefined) {
+            settings[key] = speechTab.textToSpeech[key];
+          }
         }
       }
     }

api/server/services/GraphApiService.js

@@ -159,7 +159,7 @@ const searchEntraIdPrincipals = async (accessToken, sub, query, type = 'all', li
 
 /**
  * Get current user's Entra ID group memberships from Microsoft Graph
- * Uses /me/memberOf endpoint to get groups the user is a member of
+ * Uses /me/getMemberGroups endpoint to get transitive groups the user is a member of
  * @param {string} accessToken - OpenID Connect access token
  * @param {string} sub - Subject identifier
  * @returns {Promise<Array<string>>} Array of group ID strings (GUIDs)
@@ -167,10 +167,12 @@ const searchEntraIdPrincipals = async (accessToken, sub, query, type = 'all', li
 const getUserEntraGroups = async (accessToken, sub) => {
   try {
     const graphClient = await createGraphClient(accessToken, sub);
+    const response = await graphClient
+      .api('/me/getMemberGroups')
+      .post({ securityEnabledOnly: false });
 
-    const groupsResponse = await graphClient.api('/me/memberOf').select('id').get();
-
-    return (groupsResponse.value || []).map((group) => group.id);
+    const groupIds = Array.isArray(response?.value) ? response.value : [];
+    return [...new Set(groupIds.map((groupId) => String(groupId)))];
   } catch (error) {
     logger.error('[getUserEntraGroups] Error fetching user groups:', error);
     return [];
@@ -187,13 +189,22 @@ const getUserEntraGroups = async (accessToken, sub) => {
 const getUserOwnedEntraGroups = async (accessToken, sub) => {
   try {
     const graphClient = await createGraphClient(accessToken, sub);
+    const allGroupIds = [];
+    let nextLink = '/me/ownedObjects/microsoft.graph.group';
 
-    const groupsResponse = await graphClient
-      .api('/me/ownedObjects/microsoft.graph.group')
-      .select('id')
-      .get();
+    while (nextLink) {
+      const response = await graphClient.api(nextLink).select('id').top(999).get();
+      const groups = response?.value || [];
+      allGroupIds.push(...groups.map((group) => group.id));
 
-    return (groupsResponse.value || []).map((group) => group.id);
+      nextLink = response['@odata.nextLink']
+        ? response['@odata.nextLink']
+            .replace(/^https:\/\/graph\.microsoft\.com\/v1\.0/, '')
+            .trim() || null
+        : null;
+    }
+
+    return allGroupIds;
   } catch (error) {
     logger.error('[getUserOwnedEntraGroups] Error fetching user owned groups:', error);
     return [];
@@ -211,21 +222,27 @@ const getUserOwnedEntraGroups = async (accessToken, sub) => {
 const getGroupMembers = async (accessToken, sub, groupId) => {
   try {
     const graphClient = await createGraphClient(accessToken, sub);
-    const allMembers = [];
-    let nextLink = `/groups/${groupId}/members`;
+    const allMembers = new Set();
+    let nextLink = `/groups/${groupId}/transitiveMembers`;
 
     while (nextLink) {
       const membersResponse = await graphClient.api(nextLink).select('id').top(999).get();
 
-      const members = membersResponse.value || [];
-      allMembers.push(...members.map((member) => member.id));
+      const members = membersResponse?.value || [];
+      members.forEach((member) => {
+        if (typeof member?.id === 'string' && member['@odata.type'] === '#microsoft.graph.user') {
+          allMembers.add(member.id);
+        }
+      });
 
       nextLink = membersResponse['@odata.nextLink']
-        ? membersResponse['@odata.nextLink'].split('/v1.0')[1]
+        ? membersResponse['@odata.nextLink']
+            .replace(/^https:\/\/graph\.microsoft\.com\/v1\.0/, '')
+            .trim() || null
         : null;
     }
 
-    return allMembers;
+    return Array.from(allMembers);
   } catch (error) {
     logger.error('[getGroupMembers] Error fetching group members:', error);
     return [];

api/server/services/GraphApiService.spec.js

@@ -73,6 +73,7 @@ describe('GraphApiService', () => {
       header: jest.fn().mockReturnThis(),
       top: jest.fn().mockReturnThis(),
       get: jest.fn(),
+      post: jest.fn(),
     };
 
     Client.init.mockReturnValue(mockGraphClient);
@@ -514,31 +515,33 @@ describe('GraphApiService', () => {
   });
 
   describe('getUserEntraGroups', () => {
-    it('should fetch user groups from memberOf endpoint', async () => {
+    it('should fetch user groups using getMemberGroups endpoint', async () => {
       const mockGroupsResponse = {
-        value: [
-          {
-            id: 'group-1',
-          },
-          {
-            id: 'group-2',
-          },
-        ],
+        value: ['group-1', 'group-2'],
       };
 
-      mockGraphClient.get.mockResolvedValue(mockGroupsResponse);
+      mockGraphClient.post.mockResolvedValue(mockGroupsResponse);
 
       const result = await GraphApiService.getUserEntraGroups('token', 'user');
 
-      expect(mockGraphClient.api).toHaveBeenCalledWith('/me/memberOf');
-      expect(mockGraphClient.select).toHaveBeenCalledWith('id');
+      expect(mockGraphClient.api).toHaveBeenCalledWith('/me/getMemberGroups');
+      expect(mockGraphClient.post).toHaveBeenCalledWith({ securityEnabledOnly: false });
+
+      expect(result).toEqual(['group-1', 'group-2']);
+    });
+
+    it('should deduplicate returned group ids', async () => {
+      mockGraphClient.post.mockResolvedValue({
+        value: ['group-1', 'group-2', 'group-1'],
+      });
+
+      const result = await GraphApiService.getUserEntraGroups('token', 'user');
 
-      expect(result).toHaveLength(2);
       expect(result).toEqual(['group-1', 'group-2']);
     });
 
     it('should return empty array on error', async () => {
-      mockGraphClient.get.mockRejectedValue(new Error('API error'));
+      mockGraphClient.post.mockRejectedValue(new Error('API error'));
 
       const result = await GraphApiService.getUserEntraGroups('token', 'user');
 
@@ -550,7 +553,7 @@ describe('GraphApiService', () => {
         value: [],
       };
 
-      mockGraphClient.get.mockResolvedValue(mockGroupsResponse);
+      mockGraphClient.post.mockResolvedValue(mockGroupsResponse);
 
       const result = await GraphApiService.getUserEntraGroups('token', 'user');
 
@@ -558,7 +561,7 @@ describe('GraphApiService', () => {
     });
 
     it('should handle missing value property', async () => {
-      mockGraphClient.get.mockResolvedValue({});
+      mockGraphClient.post.mockResolvedValue({});
 
       const result = await GraphApiService.getUserEntraGroups('token', 'user');
 
@@ -566,6 +569,89 @@ describe('GraphApiService', () => {
     });
   });
 
+  describe('getUserOwnedEntraGroups', () => {
+    it('should fetch owned groups with pagination support', async () => {
+      const firstPage = {
+        value: [
+          {
+            id: 'owned-group-1',
+          },
+        ],
+        '@odata.nextLink':
+          'https://graph.microsoft.com/v1.0/me/ownedObjects/microsoft.graph.group?$skiptoken=xyz',
+      };
+
+      const secondPage = {
+        value: [
+          {
+            id: 'owned-group-2',
+          },
+        ],
+      };
+
+      mockGraphClient.get.mockResolvedValueOnce(firstPage).mockResolvedValueOnce(secondPage);
+
+      const result = await GraphApiService.getUserOwnedEntraGroups('token', 'user');
+
+      expect(mockGraphClient.api).toHaveBeenNthCalledWith(
+        1,
+        '/me/ownedObjects/microsoft.graph.group',
+      );
+      expect(mockGraphClient.api).toHaveBeenNthCalledWith(
+        2,
+        '/me/ownedObjects/microsoft.graph.group?$skiptoken=xyz',
+      );
+      expect(mockGraphClient.top).toHaveBeenCalledWith(999);
+      expect(mockGraphClient.get).toHaveBeenCalledTimes(2);
+
+      expect(result).toEqual(['owned-group-1', 'owned-group-2']);
+    });
+
+    it('should return empty array on error', async () => {
+      mockGraphClient.get.mockRejectedValue(new Error('API error'));
+
+      const result = await GraphApiService.getUserOwnedEntraGroups('token', 'user');
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('getGroupMembers', () => {
+    it('should fetch transitive members and include only users', async () => {
+      const firstPage = {
+        value: [
+          { id: 'user-1', '@odata.type': '#microsoft.graph.user' },
+          { id: 'child-group', '@odata.type': '#microsoft.graph.group' },
+        ],
+        '@odata.nextLink':
+          'https://graph.microsoft.com/v1.0/groups/group-id/transitiveMembers?$skiptoken=abc',
+      };
+      const secondPage = {
+        value: [{ id: 'user-2', '@odata.type': '#microsoft.graph.user' }],
+      };
+
+      mockGraphClient.get.mockResolvedValueOnce(firstPage).mockResolvedValueOnce(secondPage);
+
+      const result = await GraphApiService.getGroupMembers('token', 'user', 'group-id');
+
+      expect(mockGraphClient.api).toHaveBeenNthCalledWith(1, '/groups/group-id/transitiveMembers');
+      expect(mockGraphClient.api).toHaveBeenNthCalledWith(
+        2,
+        '/groups/group-id/transitiveMembers?$skiptoken=abc',
+      );
+      expect(mockGraphClient.top).toHaveBeenCalledWith(999);
+      expect(result).toEqual(['user-1', 'user-2']);
+    });
+
+    it('should return empty array on error', async () => {
+      mockGraphClient.get.mockRejectedValue(new Error('API error'));
+
+      const result = await GraphApiService.getGroupMembers('token', 'user', 'group-id');
+
+      expect(result).toEqual([]);
+    });
+  });
+
   describe('testGraphApiAccess', () => {
     beforeEach(() => {
       jest.clearAllMocks();

api/server/services/ModelService.js

@@ -39,6 +39,8 @@ const { openAIApiKey, userProvidedOpenAI } = require('./Config/EndpointService')
  * @param {boolean} [params.userIdQuery=false] - Whether to send the user ID as a query parameter.
  * @param {boolean} [params.createTokenConfig=true] - Whether to create a token configuration from the API response.
  * @param {string} [params.tokenKey] - The cache key to save the token configuration. Uses `name` if omitted.
+ * @param {Record<string, string>} [params.headers] - Optional headers for the request.
+ * @param {Partial<IUser>} [params.userObject] - Optional user object for header resolution.
  * @returns {Promise<string[]>} A promise that resolves to an array of model identifiers.
  * @async
  */
@@ -52,6 +54,8 @@ const fetchModels = async ({
   userIdQuery = false,
   createTokenConfig = true,
   tokenKey,
+  headers,
+  userObject,
 }) => {
   let models = [];
   const baseURL = direct ? extractBaseURL(_baseURL) : _baseURL;
@@ -65,7 +69,13 @@ const fetchModels = async ({
   }
 
   if (name && name.toLowerCase().startsWith(Providers.OLLAMA)) {
-    return await OllamaClient.fetchModels(baseURL);
+    try {
+      return await OllamaClient.fetchModels(baseURL, { headers, user: userObject });
+    } catch (ollamaError) {
+      const logMessage =
+        'Failed to fetch models from Ollama API. Attempting to fetch via OpenAI-compatible endpoint.';
+      logAxiosError({ message: logMessage, error: ollamaError });
+    }
   }
 
   try {

api/server/services/ModelService.spec.js

@@ -1,5 +1,5 @@
 const axios = require('axios');
-const { logger } = require('@librechat/data-schemas');
+const { logAxiosError, resolveHeaders } = require('@librechat/api');
 const { EModelEndpoint, defaultModels } = require('librechat-data-provider');
 
 const {
@@ -18,6 +18,8 @@ jest.mock('@librechat/api', () => {
     processModelData: jest.fn((...args) => {
       return originalUtils.processModelData(...args);
     }),
+    logAxiosError: jest.fn(),
+    resolveHeaders: jest.fn((options) => options?.headers || {}),
   };
 });
 
@@ -277,12 +279,51 @@ describe('fetchModels with Ollama specific logic', () => {
 
     expect(models).toEqual(['Ollama-Base', 'Ollama-Advanced']);
     expect(axios.get).toHaveBeenCalledWith('https://api.ollama.test.com/api/tags', {
+      headers: {},
       timeout: 5000,
     });
   });
 
-  it('should handle errors gracefully when fetching Ollama models fails', async () => {
-    axios.get.mockRejectedValue(new Error('Network error'));
+  it('should pass headers and user object to Ollama fetchModels', async () => {
+    const customHeaders = {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer custom-token',
+    };
+    const userObject = {
+      id: 'user789',
+      email: 'test@example.com',
+    };
+
+    resolveHeaders.mockReturnValueOnce(customHeaders);
+
+    const models = await fetchModels({
+      user: 'user789',
+      apiKey: 'testApiKey',
+      baseURL: 'https://api.ollama.test.com',
+      name: 'ollama',
+      headers: customHeaders,
+      userObject,
+    });
+
+    expect(models).toEqual(['Ollama-Base', 'Ollama-Advanced']);
+    expect(resolveHeaders).toHaveBeenCalledWith({
+      headers: customHeaders,
+      user: userObject,
+    });
+    expect(axios.get).toHaveBeenCalledWith('https://api.ollama.test.com/api/tags', {
+      headers: customHeaders,
+      timeout: 5000,
+    });
+  });
+
+  it('should handle errors gracefully when fetching Ollama models fails and fallback to OpenAI-compatible fetch', async () => {
+    axios.get.mockRejectedValueOnce(new Error('Ollama API error'));
+    axios.get.mockResolvedValueOnce({
+      data: {
+        data: [{ id: 'fallback-model-1' }, { id: 'fallback-model-2' }],
+      },
+    });
+
     const models = await fetchModels({
       user: 'user789',
       apiKey: 'testApiKey',
@@ -290,8 +331,13 @@ describe('fetchModels with Ollama specific logic', () => {
       name: 'OllamaAPI',
     });
 
-    expect(models).toEqual([]);
-    expect(logger.error).toHaveBeenCalled();
+    expect(models).toEqual(['fallback-model-1', 'fallback-model-2']);
+    expect(logAxiosError).toHaveBeenCalledWith({
+      message:
+        'Failed to fetch models from Ollama API. Attempting to fetch via OpenAI-compatible endpoint.',
+      error: expect.any(Error),
+    });
+    expect(axios.get).toHaveBeenCalledTimes(2);
   });
 
   it('should return an empty array if no baseURL is provided', async () => {

api/server/services/Tools/mcp.js

@@ -98,6 +98,7 @@ async function reinitMCPServer({
     if (connection && !oauthRequired) {
       tools = await connection.fetchTools();
       availableTools = await updateMCPServerTools({
+        userId: user.id,
         serverName,
         tools,
       });

api/strategies/openidStrategy.js

@@ -357,16 +357,18 @@ async function setupOpenId() {
           };
 
           const appConfig = await getAppConfig();
-          if (!isEmailDomainAllowed(userinfo.email, appConfig?.registration?.allowedDomains)) {
+          /** Azure AD sometimes doesn't return email, use preferred_username as fallback */
+          const email = userinfo.email || userinfo.preferred_username || userinfo.upn;
+          if (!isEmailDomainAllowed(email, appConfig?.registration?.allowedDomains)) {
             logger.error(
-              `[OpenID Strategy] Authentication blocked - email domain not allowed [Email: ${userinfo.email}]`,
+              `[OpenID Strategy] Authentication blocked - email domain not allowed [Email: ${email}]`,
             );
             return done(null, false, { message: 'Email domain not allowed' });
           }
 
           const result = await findOpenIDUser({
             findUser,
-            email: claims.email,
+            email: email,
             openidId: claims.sub,
             idOnTheSource: claims.oid,
             strategyName: 'openidStrategy',
@@ -433,7 +435,7 @@ async function setupOpenId() {
               provider: 'openid',
               openidId: userinfo.sub,
               username,
-              email: userinfo.email || '',
+              email: email || '',
               emailVerified: userinfo.email_verified || false,
               name: fullName,
               idOnTheSource: userinfo.oid,
@@ -447,8 +449,8 @@ async function setupOpenId() {
             user.username = username;
             user.name = fullName;
             user.idOnTheSource = userinfo.oid;
-            if (userinfo.email && userinfo.email !== user.email) {
-              user.email = userinfo.email;
+            if (email && email !== user.email) {
+              user.email = email;
               user.emailVerified = userinfo.email_verified || false;
             }
           }

client/jest.config.cjs

@@ -1,4 +1,4 @@
-/** v0.8.0 */
+/** v0.8.1-rc1 */
 module.exports = {
   roots: ['<rootDir>/src'],
   testEnvironment: 'jsdom',

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/frontend",
-  "version": "v0.8.0",
+  "version": "v0.8.1-rc1",
   "description": "",
   "type": "module",
   "scripts": {

client/src/Providers/AgentPanelContext.tsx

@@ -35,9 +35,7 @@ export function AgentPanelProvider({ children }: { children: React.ReactNode })
     enabled: !isEphemeralAgent(agent_id),
   });
 
-  const { data: regularTools } = useAvailableToolsQuery(EModelEndpoint.agents, {
-    enabled: !isEphemeralAgent(agent_id),
-  });
+  const { data: regularTools } = useAvailableToolsQuery(EModelEndpoint.agents);
 
   const { data: mcpData } = useMCPToolsQuery({
     enabled: !isEphemeralAgent(agent_id) && startupConfig?.mcpServers != null,

client/src/components/Agents/MarketplaceAdminSettings.tsx

@@ -58,6 +58,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
           checked={field.value}
           onCheckedChange={field.onChange}
           value={field.value.toString()}
+          aria-label={label}
         />
       )}
     />

client/src/components/Agents/tests/VirtualScrollingPerformance.test.tsx

@@ -194,7 +194,7 @@ describe('Virtual Scrolling Performance', () => {
 
     // Performance check: rendering should be fast
     const renderTime = endTime - startTime;
-    expect(renderTime).toBeLessThan(720);
+    expect(renderTime).toBeLessThan(740);
 
     console.log(`Rendered 1000 agents in ${renderTime.toFixed(2)}ms`);
     console.log(`Only ${renderedCards.length} DOM nodes created for 1000 agents`);

client/src/components/Artifacts/Thinking.tsx

@@ -1,89 +0,0 @@
-import { useState, useMemo, memo, useCallback } from 'react';
-import { useRecoilValue } from 'recoil';
-import { Atom, ChevronDown } from 'lucide-react';
-import type { MouseEvent, FC } from 'react';
-import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
-import store from '~/store';
-
-const BUTTON_STYLES = {
-  base: 'group mt-3 flex w-fit items-center justify-center rounded-xl bg-surface-tertiary px-3 py-2 text-xs leading-[18px] animate-thinking-appear',
-  icon: 'icon-sm ml-1.5 transform-gpu text-text-primary transition-transform duration-200',
-} as const;
-
-const CONTENT_STYLES = {
-  wrapper: 'relative pl-3 text-text-secondary',
-  border:
-    'absolute left-0 h-[calc(100%-10px)] border-l-2 border-border-medium dark:border-border-heavy',
-  partBorder:
-    'absolute left-0 h-[calc(100%)] border-l-2 border-border-medium dark:border-border-heavy',
-  text: 'whitespace-pre-wrap leading-[26px]',
-} as const;
-
-export const ThinkingContent: FC<{ children: React.ReactNode; isPart?: boolean }> = memo(
-  ({ isPart, children }) => (
-    <div className={CONTENT_STYLES.wrapper}>
-      <div className={isPart === true ? CONTENT_STYLES.partBorder : CONTENT_STYLES.border} />
-      <p className={CONTENT_STYLES.text}>{children}</p>
-    </div>
-  ),
-);
-
-export const ThinkingButton = memo(
-  ({
-    isExpanded,
-    onClick,
-    label,
-  }: {
-    isExpanded: boolean;
-    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-    label: string;
-  }) => (
-    <button type="button" onClick={onClick} className={BUTTON_STYLES.base}>
-      <Atom size={14} className="mr-1.5 text-text-secondary" />
-      {label}
-      <ChevronDown className={`${BUTTON_STYLES.icon} ${isExpanded ? 'rotate-180' : ''}`} />
-    </button>
-  ),
-);
-
-const Thinking: React.ElementType = memo(({ children }: { children: React.ReactNode }) => {
-  const localize = useLocalize();
-  const showThinking = useRecoilValue<boolean>(store.showThinking);
-  const [isExpanded, setIsExpanded] = useState(showThinking);
-
-  const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setIsExpanded((prev) => !prev);
-  }, []);
-
-  const label = useMemo(() => localize('com_ui_thoughts'), [localize]);
-
-  if (children == null) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="mb-5">
-        <ThinkingButton isExpanded={isExpanded} onClick={handleClick} label={label} />
-      </div>
-      <div
-        className={cn('grid transition-all duration-300 ease-out', isExpanded && 'mb-8')}
-        style={{
-          gridTemplateRows: isExpanded ? '1fr' : '0fr',
-        }}
-      >
-        <div className="overflow-hidden">
-          <ThinkingContent isPart={true}>{children}</ThinkingContent>
-        </div>
-      </div>
-    </>
-  );
-});
-
-ThinkingButton.displayName = 'ThinkingButton';
-ThinkingContent.displayName = 'ThinkingContent';
-Thinking.displayName = 'Thinking';
-
-export default memo(Thinking);

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -129,7 +129,11 @@ const BookmarkForm = ({
         </div>
 
         <div className="mt-4 grid w-full items-center gap-2">
-          <Label htmlFor="bookmark-description" className="text-left text-sm font-medium">
+          <Label
+            id="bookmark-description-label"
+            htmlFor="bookmark-description"
+            className="text-left text-sm font-medium"
+          >
             {localize('com_ui_bookmarks_description')}
           </Label>
           <TextareaAutosize
@@ -147,6 +151,7 @@ const BookmarkForm = ({
             className={cn(
               'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none',
             )}
+            aria-labelledby="bookmark-description-label"
           />
         </div>
         {conversationId != null && conversationId && (
@@ -161,6 +166,7 @@ const BookmarkForm = ({
                   onCheckedChange={field.onChange}
                   className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                   value={field.value?.toString()}
+                  aria-label={localize('com_ui_bookmarks_add_to_conversation')}
                 />
               )}
             />

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

@@ -12,6 +12,7 @@ import {
 import {
   useTextarea,
   useAutoSave,
+  useLocalize,
   useRequiresKey,
   useHandleKeyUp,
   useQueryParams,
@@ -38,6 +39,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const submitButtonRef = useRef<HTMLButtonElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   useFocusChatEffect(textAreaRef);
+  const localize = useLocalize();
 
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [, setIsScrollable] = useState(false);
@@ -220,6 +222,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
         <div className={cn('flex w-full items-center', isRTL && 'flex-row-reverse')}>
           {showPlusPopover && !isAssistantsEndpoint(endpoint) && (
             <Mention
+              conversation={conversation}
               setShowMentionPopover={setShowPlusPopover}
               newConversation={generateConversation}
               textAreaRef={textAreaRef}
@@ -230,6 +233,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
           )}
           {showMentionPopover && (
             <Mention
+              conversation={conversation}
               setShowMentionPopover={setShowMentionPopover}
               newConversation={newConversation}
               textAreaRef={textAreaRef}
@@ -277,6 +281,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                     setIsTextAreaFocused(true);
                   }}
                   onBlur={setIsTextAreaFocused.bind(null, false)}
+                  aria-label={localize('com_ui_message_input')}
                   onClick={handleFocusOrClick}
                   style={{ height: 44, overflowY: 'auto' }}
                   className={cn(

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

@@ -62,17 +62,28 @@ const FileUpload: React.FC<FileUploadProps> = ({
     statusText = invalidText ?? localize('com_ui_upload_invalid');
   }
 
+  const handleClick = () => {
+    const fileInput = document.getElementById(`file-upload-${id}`) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
   return (
-    <label
-      htmlFor={`file-upload-${id}`}
-      className={cn(
-        'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
-        statusColor,
-        containerClassName,
-      )}
-    >
-      <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
-      <span className="flex text-xs">{statusText}</span>
+    <>
+      <button
+        type="button"
+        onClick={handleClick}
+        className={cn(
+          'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
+          statusColor,
+          containerClassName,
+        )}
+        aria-label={statusText}
+      >
+        <FileUp className="mr-1 flex w-[22px] items-center stroke-1" aria-hidden="true" />
+        <span className="flex text-xs">{statusText}</span>
+      </button>
       <input
         id={`file-upload-${id}`}
         value=""
@@ -80,8 +91,9 @@ const FileUpload: React.FC<FileUploadProps> = ({
         className={cn('hidden', className)}
         accept=".json"
         onChange={handleFileChange}
+        tabIndex={-1}
       />
-    </label>
+    </>
   );
 };
 

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

@@ -122,7 +122,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}>
+            <Button
+              variant="outline"
+              aria-label={localize('com_files_filter_by')}
+              className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}
+            >
               <ListFilter className="size-3.5 sm:size-4" />
             </Button>
           </DropdownMenuTrigger>

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

@@ -2,6 +2,7 @@ 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 { TConversation } from 'librechat-data-provider';
 import type { MentionOption, ConvoGenerator } from '~/common';
 import type { SetterOrUpdater } from 'recoil';
 import useSelectMention from '~/hooks/Input/useSelectMention';
@@ -14,6 +15,7 @@ import MentionItem from './MentionItem';
 const ROW_HEIGHT = 40;
 
 export default function Mention({
+  conversation,
   setShowMentionPopover,
   newConversation,
   textAreaRef,
@@ -21,6 +23,7 @@ export default function Mention({
   placeholder = 'com_ui_mention',
   includeAssistants = true,
 }: {
+  conversation: TConversation | null;
   setShowMentionPopover: SetterOrUpdater<boolean>;
   newConversation: ConvoGenerator;
   textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
@@ -42,6 +45,7 @@ export default function Mention({
   const { onSelectMention } = useSelectMention({
     presets,
     modelSpecs,
+    conversation,
     assistantsMap,
     endpointsConfig,
     newConversation,

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import type { EModelEndpoint } from 'librechat-data-provider';
+import type { EModelEndpoint, TConversation } from 'librechat-data-provider';
 import { useChatContext } from '~/Providers/ChatContext';
 
 interface ModelSelectorChatContextValue {
@@ -8,6 +8,7 @@ interface ModelSelectorChatContextValue {
   spec?: string | null;
   agent_id?: string | null;
   assistant_id?: string | null;
+  conversation: TConversation | null;
   newConversation: ReturnType<typeof useChatContext>['newConversation'];
 }
 
@@ -26,16 +27,10 @@ export function ModelSelectorChatProvider({ children }: { children: React.ReactN
       spec: conversation?.spec,
       agent_id: conversation?.agent_id,
       assistant_id: conversation?.assistant_id,
+      conversation,
       newConversation,
     }),
-    [
-      conversation?.endpoint,
-      conversation?.model,
-      conversation?.spec,
-      conversation?.agent_id,
-      conversation?.assistant_id,
-      newConversation,
-    ],
+    [conversation, newConversation],
   );
 
   return (

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

@@ -57,7 +57,7 @@ export function ModelSelectorProvider({ children, startupConfig }: ModelSelector
   const agentsMap = useAgentsMapContext();
   const assistantsMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
-  const { endpoint, model, spec, agent_id, assistant_id, newConversation } =
+  const { endpoint, model, spec, agent_id, assistant_id, conversation, newConversation } =
     useModelSelectorChatContext();
   const modelSpecs = useMemo(() => {
     const specs = startupConfig?.modelSpecs?.list ?? [];
@@ -96,6 +96,7 @@ export function ModelSelectorProvider({ children, startupConfig }: ModelSelector
   const { onSelectEndpoint, onSelectSpec } = useSelectMention({
     // presets,
     modelSpecs,
+    conversation,
     assistantsMap,
     endpointsConfig,
     newConversation,

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -59,9 +59,10 @@ const PresetItems: FC<{
           </label>
           <Dialog>
             <DialogTrigger asChild>
-              <label
-                htmlFor="file-upload"
-                className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
+              <button
+                type="button"
+                className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
+                aria-label={localize('com_ui_clear') + ' ' + localize('com_ui_all')}
               >
                 <svg
                   width="24"
@@ -70,11 +71,12 @@ const PresetItems: FC<{
                   fill="currentColor"
                   xmlns="http://www.w3.org/2000/svg"
                   className="mr-1 flex w-[22px] items-center"
+                  aria-hidden="true"
                 >
                   <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708"></path>
                 </svg>
                 {localize('com_ui_clear')} {localize('com_ui_all')}
-              </label>
+              </button>
             </DialogTrigger>
             <DialogTemplate
               showCloseButton={false}

client/src/components/Chat/Messages/Content/ContentParts.tsx

@@ -1,5 +1,4 @@
-import { memo, useMemo, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { memo, useMemo } from 'react';
 import { ContentTypes } from 'librechat-data-provider';
 import type {
   TMessageContentParts,
@@ -7,14 +6,11 @@ import type {
   TAttachment,
   Agents,
 } from 'librechat-data-provider';
-import { ThinkingButton } from '~/components/Artifacts/Thinking';
 import { MessageContext, SearchContext } from '~/Providers';
 import MemoryArtifacts from './MemoryArtifacts';
 import Sources from '~/components/Web/Sources';
 import { mapAttachments } from '~/utils/map';
 import { EditTextPart } from './Parts';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
 import Part from './Part';
 
 type ContentPartsProps = {
@@ -52,32 +48,10 @@ const ContentParts = memo(
     siblingIdx,
     setSiblingIdx,
   }: ContentPartsProps) => {
-    const localize = useLocalize();
-    const [showThinking, setShowThinking] = useRecoilState<boolean>(store.showThinking);
-    const [isExpanded, setIsExpanded] = useState(showThinking);
     const attachmentMap = useMemo(() => mapAttachments(attachments ?? []), [attachments]);
 
     const effectiveIsSubmitting = isLatestMessage ? isSubmitting : false;
 
-    const hasReasoningParts = useMemo(() => {
-      const hasThinkPart = content?.some((part) => part?.type === ContentTypes.THINK) ?? false;
-      const allThinkPartsHaveContent =
-        content?.every((part) => {
-          if (part?.type !== ContentTypes.THINK) {
-            return true;
-          }
-
-          if (typeof part.think === 'string') {
-            const cleanedContent = part.think.replace(/<\/?think>/g, '').trim();
-            return cleanedContent.length > 0;
-          }
-
-          return false;
-        }) ?? false;
-
-      return hasThinkPart && allThinkPartsHaveContent;
-    }, [content]);
-
     if (!content) {
       return null;
     }
@@ -126,57 +100,40 @@ const ContentParts = memo(
         <SearchContext.Provider value={{ searchResults }}>
           <MemoryArtifacts attachments={attachments} />
           <Sources messageId={messageId} conversationId={conversationId || undefined} />
-          {hasReasoningParts && (
-            <div className="mb-5">
-              <ThinkingButton
-                isExpanded={isExpanded}
-                onClick={() =>
-                  setIsExpanded((prev) => {
-                    const val = !prev;
-                    setShowThinking(val);
-                    return val;
-                  })
-                }
-                label={
-                  effectiveIsSubmitting && isLast
-                    ? localize('com_ui_thinking')
-                    : localize('com_ui_thoughts')
-                }
-              />
-            </div>
-          )}
-          {content
-            .filter((part) => part)
-            .map((part, idx) => {
-              const toolCallId =
-                (part?.[ContentTypes.TOOL_CALL] as Agents.ToolCall | undefined)?.id ?? '';
-              const attachments = attachmentMap[toolCallId];
+          {content.map((part, idx) => {
+            if (!part) {
+              return null;
+            }
 
-              return (
-                <MessageContext.Provider
-                  key={`provider-${messageId}-${idx}`}
-                  value={{
-                    messageId,
-                    isExpanded,
-                    conversationId,
-                    partIndex: idx,
-                    nextType: content[idx + 1]?.type,
-                    isSubmitting: effectiveIsSubmitting,
-                    isLatestMessage,
-                  }}
-                >
-                  <Part
-                    part={part}
-                    attachments={attachments}
-                    isSubmitting={effectiveIsSubmitting}
-                    key={`part-${messageId}-${idx}`}
-                    isCreatedByUser={isCreatedByUser}
-                    isLast={idx === content.length - 1}
-                    showCursor={idx === content.length - 1 && isLast}
-                  />
-                </MessageContext.Provider>
-              );
-            })}
+            const toolCallId =
+              (part?.[ContentTypes.TOOL_CALL] as Agents.ToolCall | undefined)?.id ?? '';
+            const partAttachments = attachmentMap[toolCallId];
+
+            return (
+              <MessageContext.Provider
+                key={`provider-${messageId}-${idx}`}
+                value={{
+                  messageId,
+                  isExpanded: true,
+                  conversationId,
+                  partIndex: idx,
+                  nextType: content[idx + 1]?.type,
+                  isSubmitting: effectiveIsSubmitting,
+                  isLatestMessage,
+                }}
+              >
+                <Part
+                  part={part}
+                  attachments={partAttachments}
+                  isSubmitting={effectiveIsSubmitting}
+                  key={`part-${messageId}-${idx}`}
+                  isCreatedByUser={isCreatedByUser}
+                  isLast={idx === content.length - 1}
+                  showCursor={idx === content.length - 1 && isLast}
+                />
+              </MessageContext.Provider>
+            );
+          })}
         </SearchContext.Provider>
       </>
     );

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -151,7 +151,7 @@ const EditMessage = ({
 
   return (
     <Container message={message}>
-      <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+      <div className="bg-token-main-surface-primary relative mt-2 flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
         <TextareaAutosize
           {...registerProps}
           ref={(e) => {
@@ -168,6 +168,7 @@ const EditMessage = ({
             'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
             removeFocusRings,
           )}
+          aria-label={localize('com_ui_message_input')}
           dir={isRTL ? 'rtl' : 'ltr'}
         />
       </div>

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -4,67 +4,89 @@ import { DelayedRender } from '@librechat/client';
 import type { TMessage } from 'librechat-data-provider';
 import type { TMessageContentProps, TDisplayProps } from '~/common';
 import Error from '~/components/Messages/Content/Error';
-import Thinking from '~/components/Artifacts/Thinking';
 import { useMessageContext } from '~/Providers';
 import MarkdownLite from './MarkdownLite';
 import EditMessage from './EditMessage';
+import Thinking from './Parts/Thinking';
 import { useLocalize } from '~/hooks';
 import Container from './Container';
 import Markdown from './Markdown';
 import { cn } from '~/utils';
 import store from '~/store';
 
+const ERROR_CONNECTION_TEXT = 'Error connecting to server, try refreshing the page.';
+const DELAYED_ERROR_TIMEOUT = 5500;
+const UNFINISHED_DELAY = 250;
+
+const parseThinkingContent = (text: string) => {
+  const thinkingMatch = text.match(/:::thinking([\s\S]*?):::/);
+  return {
+    thinkingContent: thinkingMatch ? thinkingMatch[1].trim() : '',
+    regularContent: thinkingMatch ? text.replace(/:::thinking[\s\S]*?:::/, '').trim() : text,
+  };
+};
+
+const LoadingFallback = () => (
+  <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
+    <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
+      <div className="absolute">
+        <p className="submitting relative">
+          <span className="result-thinking" />
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const ErrorBox = ({
+  children,
+  className = '',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div
+    role="alert"
+    aria-live="assertive"
+    className={cn(
+      'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+const ConnectionError = ({ message }: { message?: TMessage }) => {
+  const localize = useLocalize();
+
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <DelayedRender delay={DELAYED_ERROR_TIMEOUT}>
+        <Container message={message}>
+          <div className="mt-2 rounded-xl border border-red-500/20 bg-red-50/50 px-4 py-3 text-sm text-red-700 shadow-sm transition-all dark:bg-red-950/30 dark:text-red-100">
+            {localize('com_ui_error_connection')}
+          </div>
+        </Container>
+      </DelayedRender>
+    </Suspense>
+  );
+};
+
 export const ErrorMessage = ({
   text,
   message,
   className = '',
-}: Pick<TDisplayProps, 'text' | 'className'> & {
-  message?: TMessage;
-}) => {
-  const localize = useLocalize();
-  if (text === 'Error connecting to server, try refreshing the page.') {
-    console.log('error message', message);
-    return (
-      <Suspense
-        fallback={
-          <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
-            <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
-              <div className="absolute">
-                <p className="submitting relative">
-                  <span className="result-thinking" />
-                </p>
-              </div>
-            </div>
-          </div>
-        }
-      >
-        <DelayedRender delay={5500}>
-          <Container message={message}>
-            <div
-              className={cn(
-                'rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
-                className,
-              )}
-            >
-              {localize('com_ui_error_connection')}
-            </div>
-          </Container>
-        </DelayedRender>
-      </Suspense>
-    );
+}: Pick<TDisplayProps, 'text' | 'className'> & { message?: TMessage }) => {
+  if (text === ERROR_CONNECTION_TEXT) {
+    return <ConnectionError message={message} />;
   }
+
   return (
     <Container message={message}>
-      <div
-        role="alert"
-        aria-live="assertive"
-        className={cn(
-          'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
-          className,
-        )}
-      >
+      <ErrorBox className={className}>
         <Error text={text} />
-      </div>
+      </ErrorBox>
     </Container>
   );
 };
@@ -72,27 +94,29 @@ export const ErrorMessage = ({
 const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => {
   const { isSubmitting = false, isLatestMessage = false } = useMessageContext();
   const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
+
   const showCursorState = useMemo(
     () => showCursor === true && isSubmitting,
     [showCursor, isSubmitting],
   );
 
-  let content: React.ReactElement;
-  if (!isCreatedByUser) {
-    content = <Markdown content={text} isLatestMessage={isLatestMessage} />;
-  } else if (enableUserMsgMarkdown) {
-    content = <MarkdownLite content={text} />;
-  } else {
-    content = <>{text}</>;
-  }
+  const content = useMemo(() => {
+    if (!isCreatedByUser) {
+      return <Markdown content={text} isLatestMessage={isLatestMessage} />;
+    }
+    if (enableUserMsgMarkdown) {
+      return <MarkdownLite content={text} />;
+    }
+    return <>{text}</>;
+  }, [isCreatedByUser, enableUserMsgMarkdown, text, isLatestMessage]);
 
   return (
     <Container message={message}>
       <div
         className={cn(
-          isSubmitting ? 'submitting' : '',
-          showCursorState && !!text.length ? 'result-streaming' : '',
           'markdown prose message-content dark:prose-invert light w-full break-words',
+          isSubmitting && 'submitting',
+          showCursorState && text.length > 0 && 'result-streaming',
           isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
           isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
         )}
@@ -103,7 +127,6 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
   );
 };
 
-// Unfinished Message Component
 export const UnfinishedMessage = ({ message }: { message: TMessage }) => (
   <ErrorMessage
     message={message}
@@ -123,21 +146,14 @@ const MessageContent = ({
   const { message } = props;
   const { messageId } = message;
 
-  const { thinkingContent, regularContent } = useMemo(() => {
-    const thinkingMatch = text.match(/:::thinking([\s\S]*?):::/);
-    return {
-      thinkingContent: thinkingMatch ? thinkingMatch[1].trim() : '',
-      regularContent: thinkingMatch ? text.replace(/:::thinking[\s\S]*?:::/, '').trim() : text,
-    };
-  }, [text]);
-
+  const { thinkingContent, regularContent } = useMemo(() => parseThinkingContent(text), [text]);
   const showRegularCursor = useMemo(() => isLast && isSubmitting, [isLast, isSubmitting]);
 
   const unfinishedMessage = useMemo(
     () =>
       !isSubmitting && unfinished ? (
         <Suspense>
-          <DelayedRender delay={250}>
+          <DelayedRender delay={UNFINISHED_DELAY}>
             <UnfinishedMessage message={message} />
           </DelayedRender>
         </Suspense>
@@ -146,8 +162,10 @@ const MessageContent = ({
   );
 
   if (error) {
-    return <ErrorMessage message={props.message} text={text} />;
-  } else if (edit) {
+    return <ErrorMessage message={message} text={text} />;
+  }
+
+  if (edit) {
     return <EditMessage text={text} isSubmitting={isSubmitting} {...props} />;
   }
 

client/src/components/Chat/Messages/Content/Part.tsx

@@ -65,6 +65,10 @@ const Part = memo(
       if (part.tool_call_ids != null && !text) {
         return null;
       }
+      /** Skip rendering if text is only whitespace to avoid empty Container */
+      if (!isLast && text.length > 0 && /^\s*$/.test(text)) {
+        return null;
+      }
       return (
         <Container>
           <Text text={text} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
@@ -75,7 +79,7 @@ const Part = memo(
       if (typeof reasoning !== 'string') {
         return null;
       }
-      return <Reasoning reasoning={reasoning} />;
+      return <Reasoning reasoning={reasoning} isLast={isLast ?? false} />;
     } else if (part.type === ContentTypes.TOOL_CALL) {
       const toolCall = part[ContentTypes.TOOL_CALL];
 

client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx

@@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form';
 import { TextareaAutosize } from '@librechat/client';
 import { ContentTypes } from 'librechat-data-provider';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { Lightbulb, MessageSquare } from 'lucide-react';
 import { useUpdateMessageContentMutation } from 'librechat-data-provider/react-query';
 import type { Agents } from 'librechat-data-provider';
 import type { TEditProps } from '~/common';
@@ -153,6 +154,22 @@ const EditTextPart = ({
 
   return (
     <Container message={message}>
+      {part.type === ContentTypes.THINK && (
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-text-secondary">
+          <span className="flex gap-2 rounded-lg bg-surface-tertiary px-1.5 py-1 font-medium">
+            <Lightbulb className="size-3.5" />
+            {localize('com_ui_thoughts')}
+          </span>
+        </div>
+      )}
+      {part.type !== ContentTypes.THINK && (
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-text-secondary">
+          <span className="flex gap-2 rounded-lg bg-surface-tertiary px-1.5 py-1 font-medium">
+            <MessageSquare className="size-3.5" />
+            {localize('com_ui_response')}
+          </span>
+        </div>
+      )}
       <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
         <TextareaAutosize
           {...registerProps}
@@ -170,6 +187,7 @@ const EditTextPart = ({
             'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
             removeFocusRings,
           )}
+          aria-label={localize('com_ui_editable_message')}
           dir={isRTL ? 'rtl' : 'ltr'}
         />
       </div>

client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx

@@ -1,15 +1,47 @@
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState, useCallback } from 'react';
+import { useAtom } from 'jotai';
+import type { MouseEvent } from 'react';
 import { ContentTypes } from 'librechat-data-provider';
-import { ThinkingContent } from '~/components/Artifacts/Thinking';
+import { ThinkingContent, ThinkingButton } from './Thinking';
+import { showThinkingAtom } from '~/store/showThinking';
 import { useMessageContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 type ReasoningProps = {
   reasoning: string;
+  isLast: boolean;
 };
 
-const Reasoning = memo(({ reasoning }: ReasoningProps) => {
-  const { isExpanded, nextType } = useMessageContext();
+/**
+ * Reasoning Component (MODERN SYSTEM)
+ *
+ * Used for structured content parts with ContentTypes.THINK type.
+ * This handles modern message format where content is an array of typed parts.
+ *
+ * Pattern: `{ content: [{ type: "think", think: "<think>content</think>" }, ...] }`
+ *
+ * Used by:
+ * - ContentParts.tsx → Part.tsx for structured messages
+ * - Agent/Assistant responses (OpenAI Assistants, custom agents)
+ * - O-series models (o1, o3) with reasoning capabilities
+ * - Modern Claude responses with thinking blocks
+ *
+ * Key differences from legacy Thinking.tsx:
+ * - Works with content parts array instead of plain text
+ * - Strips `<think>` tags instead of `:::thinking:::` markers
+ * - Each THINK part has its own independent toggle button
+ * - Can be interleaved with other content types
+ *
+ * For legacy text-based messages, see Thinking.tsx component.
+ */
+const Reasoning = memo(({ reasoning, isLast }: ReasoningProps) => {
+  const localize = useLocalize();
+  const [showThinking] = useAtom(showThinkingAtom);
+  const [isExpanded, setIsExpanded] = useState(showThinking);
+  const { isSubmitting, isLatestMessage, nextType } = useMessageContext();
+
+  // Strip <think> tags from the reasoning content (modern format)
   const reasoningText = useMemo(() => {
     return reasoning
       .replace(/^<think>\s*/, '')
@@ -17,22 +49,45 @@ const Reasoning = memo(({ reasoning }: ReasoningProps) => {
       .trim();
   }, [reasoning]);
 
+  const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const effectiveIsSubmitting = isLatestMessage ? isSubmitting : false;
+
+  const label = useMemo(
+    () =>
+      effectiveIsSubmitting && isLast ? localize('com_ui_thinking') : localize('com_ui_thoughts'),
+    [effectiveIsSubmitting, localize, isLast],
+  );
+
   if (!reasoningText) {
     return null;
   }
 
   return (
-    <div
-      className={cn(
-        'grid transition-all duration-300 ease-out',
-        nextType !== ContentTypes.THINK && isExpanded && 'mb-8',
-      )}
-      style={{
-        gridTemplateRows: isExpanded ? '1fr' : '0fr',
-      }}
-    >
-      <div className="overflow-hidden">
-        <ThinkingContent isPart={true}>{reasoningText}</ThinkingContent>
+    <div className="group/reasoning">
+      <div className="sticky top-0 z-10 mb-2 bg-surface-secondary pb-2 pt-2">
+        <ThinkingButton
+          isExpanded={isExpanded}
+          onClick={handleClick}
+          label={label}
+          content={reasoningText}
+        />
+      </div>
+      <div
+        className={cn(
+          'grid transition-all duration-300 ease-out',
+          nextType !== ContentTypes.THINK && isExpanded && 'mb-4',
+        )}
+        style={{
+          gridTemplateRows: isExpanded ? '1fr' : '0fr',
+        }}
+      >
+        <div className="overflow-hidden">
+          <ThinkingContent>{reasoningText}</ThinkingContent>
+        </div>
       </div>
     </div>
   );

client/src/components/Chat/Messages/Content/Parts/Thinking.tsx

@@ -0,0 +1,172 @@
+import { useState, useMemo, memo, useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import { Lightbulb, ChevronDown } from 'lucide-react';
+import { Clipboard, CheckMark } from '@librechat/client';
+import type { MouseEvent, FC } from 'react';
+import { showThinkingAtom } from '~/store/showThinking';
+import { fontSizeAtom } from '~/store/fontSize';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+/**
+ * ThinkingContent - Displays the actual thinking/reasoning content
+ * Used by both legacy text-based messages and modern content parts
+ */
+export const ThinkingContent: FC<{
+  children: React.ReactNode;
+}> = memo(({ children }) => {
+  const fontSize = useAtomValue(fontSizeAtom);
+
+  return (
+    <div className="relative rounded-3xl border border-border-medium bg-surface-tertiary p-4 text-text-secondary">
+      <p className={cn('whitespace-pre-wrap leading-[26px]', fontSize)}>{children}</p>
+    </div>
+  );
+});
+
+/**
+ * ThinkingButton - Toggle button for expanding/collapsing thinking content
+ * Shows lightbulb icon by default, chevron on hover
+ * Shared between legacy Thinking component and modern ContentParts
+ */
+export const ThinkingButton = memo(
+  ({
+    isExpanded,
+    onClick,
+    label,
+    content,
+  }: {
+    isExpanded: boolean;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    label: string;
+    content?: string;
+  }) => {
+    const localize = useLocalize();
+    const fontSize = useAtomValue(fontSizeAtom);
+
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = useCallback(
+      (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        if (content) {
+          navigator.clipboard.writeText(content);
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        }
+      },
+      [content],
+    );
+
+    return (
+      <div className="flex w-full items-center justify-between gap-2">
+        <button
+          type="button"
+          onClick={onClick}
+          className={cn(
+            'group/button flex flex-1 items-center justify-start rounded-lg leading-[18px]',
+            fontSize,
+          )}
+        >
+          <span className="relative mr-1.5 inline-flex h-[18px] w-[18px] items-center justify-center">
+            <Lightbulb className="icon-sm absolute text-text-secondary opacity-100 transition-opacity group-hover/button:opacity-0" />
+            <ChevronDown
+              className={cn(
+                'icon-sm absolute transform-gpu text-text-primary opacity-0 transition-all duration-300 group-hover/button:opacity-100',
+                isExpanded && 'rotate-180',
+              )}
+            />
+          </span>
+          {label}
+        </button>
+        {content && (
+          <button
+            type="button"
+            onClick={handleCopy}
+            title={
+              isCopied
+                ? localize('com_ui_copied_to_clipboard')
+                : localize('com_ui_copy_thoughts_to_clipboard')
+            }
+            className={cn(
+              'rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200',
+              'hover:bg-surface-hover hover:text-text-primary',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
+            )}
+          >
+            {isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard size="19" />}
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * Thinking Component (LEGACY SYSTEM)
+ *
+ * Used for simple text-based messages with `:::thinking:::` markers.
+ * This handles the old message format where text contains embedded thinking blocks.
+ *
+ * Pattern: `:::thinking\n{content}\n:::\n{response}`
+ *
+ * Used by:
+ * - MessageContent.tsx for plain text messages
+ * - Legacy message format compatibility
+ * - User messages when manually adding thinking content
+ *
+ * For modern structured content (agents/assistants), see Reasoning.tsx component.
+ */
+const Thinking: React.ElementType = memo(({ children }: { children: React.ReactNode }) => {
+  const localize = useLocalize();
+  const showThinking = useAtomValue(showThinkingAtom);
+  const [isExpanded, setIsExpanded] = useState(showThinking);
+
+  const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const label = useMemo(() => localize('com_ui_thoughts'), [localize]);
+
+  // Extract text content for copy functionality
+  const textContent = useMemo(() => {
+    if (typeof children === 'string') {
+      return children;
+    }
+    return '';
+  }, [children]);
+
+  if (children == null) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="sticky top-0 z-10 mb-4 bg-surface-primary pb-2 pt-2">
+        <ThinkingButton
+          isExpanded={isExpanded}
+          onClick={handleClick}
+          label={label}
+          content={textContent}
+        />
+      </div>
+      <div
+        className={cn('grid transition-all duration-300 ease-out', isExpanded && 'mb-8')}
+        style={{
+          gridTemplateRows: isExpanded ? '1fr' : '0fr',
+        }}
+      >
+        <div className="overflow-hidden">
+          <ThinkingContent>{children}</ThinkingContent>
+        </div>
+      </div>
+    </>
+  );
+});
+
+ThinkingButton.displayName = 'ThinkingButton';
+ThinkingContent.displayName = 'ThinkingContent';
+Thinking.displayName = 'Thinking';
+
+export default memo(Thinking);

client/src/components/Conversations/Conversations.tsx

@@ -201,7 +201,6 @@ const Conversations: FC<ConversationsProps> = ({
                 overscanRowCount={10}
                 className="outline-none"
                 style={{ outline: 'none' }}
-                role="list"
                 aria-label="Conversations"
                 onRowsRendered={handleRowsRendered}
                 tabIndex={-1}

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -82,7 +82,7 @@ export function DeleteConversationDialog({
       <OGDialogHeader>
         <OGDialogTitle>{localize('com_ui_delete_conversation')}</OGDialogTitle>
       </OGDialogHeader>
-      <div>
+      <div className="w-full truncate">
         {localize('com_ui_delete_confirm')} <strong>{title}</strong> ?
       </div>
       <div className="flex justify-end gap-4 pt-4">

client/src/components/Conversations/ConvoOptions/ShareButton.tsx

@@ -77,7 +77,13 @@ export default function ShareButton({
             <div className="relative items-center rounded-lg p-2">
               {showQR && (
                 <div className="mb-4 flex flex-col items-center">
-                  <QRCodeSVG value={sharedLink} size={200} marginSize={2} className="rounded-2xl" />
+                  <QRCodeSVG
+                    value={sharedLink}
+                    size={200}
+                    marginSize={2}
+                    className="rounded-2xl"
+                    title={localize('com_ui_share_qr_code_description')}
+                  />
                 </div>
               )}
 
@@ -87,6 +93,7 @@ export default function ShareButton({
                   <Button
                     size="sm"
                     variant="outline"
+                    aria-label={localize('com_ui_copy_link')}
                     onClick={() => {
                       if (isCopying) {
                         return;

client/src/components/Conversations/RenameForm.tsx

@@ -34,6 +34,8 @@ const RenameForm: React.FC<RenameFormProps> = ({
       case 'Enter':
         onSubmit(titleInput);
         break;
+      case 'Tab':
+        break;
     }
   };
 
@@ -50,22 +52,23 @@ const RenameForm: React.FC<RenameFormProps> = ({
         value={titleInput}
         onChange={(e) => setTitleInput(e.target.value)}
         onKeyDown={handleKeyDown}
-        onBlur={() => onSubmit(titleInput)}
         maxLength={100}
         aria-label={localize('com_ui_new_conversation_title')}
       />
       <div className="flex gap-1" role="toolbar">
         <button
           onClick={() => onCancel()}
-          className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
+          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           aria-label={localize('com_ui_cancel')}
+          type="button"
         >
           <X className="h-4 w-4" aria-hidden="true" />
         </button>
         <button
           onClick={() => onSubmit(titleInput)}
-          className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
+          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           aria-label={localize('com_ui_save')}
+          type="button"
         >
           <Check className="h-4 w-4" aria-hidden="true" />
         </button>

client/src/components/Endpoints/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { UserIcon, useAvatar } from '@librechat/client';
 import type { TUser } from 'librechat-data-provider';
 import type { IconProps } from '~/common';
@@ -15,26 +15,49 @@ type UserAvatarProps = {
   className?: string;
 };
 
+/**
+ * Default avatar component - memoized outside to prevent recreation on every render
+ */
+const DefaultAvatar = memo(() => (
+  <div
+    style={{
+      backgroundColor: 'rgb(121, 137, 255)',
+      width: '20px',
+      height: '20px',
+      boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
+    }}
+    className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
+  >
+    <UserIcon />
+  </div>
+));
+
+DefaultAvatar.displayName = 'DefaultAvatar';
+
 const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => {
   const [imageError, setImageError] = useState(false);
+  const imageLoadedRef = useRef(false);
 
-  const handleImageError = () => {
+  const imageSrc = useMemo(() => (user?.avatar ?? '') || avatarSrc, [user?.avatar, avatarSrc]);
+
+  /** Reset loaded state and error state if image source changes */
+  useEffect(() => {
+    imageLoadedRef.current = false;
+    setImageError(false);
+  }, [imageSrc]);
+
+  const handleImageError = useCallback(() => {
     setImageError(true);
-  };
+    imageLoadedRef.current = false;
+  }, []);
 
-  const renderDefaultAvatar = () => (
-    <div
-      style={{
-        backgroundColor: 'rgb(121, 137, 255)',
-        width: '20px',
-        height: '20px',
-        boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
-      }}
-      className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
-    >
-      <UserIcon />
-    </div>
-  );
+  const handleImageLoad = useCallback(() => {
+    imageLoadedRef.current = true;
+    setImageError(false);
+  }, []);
+
+  const hasAvatar = useMemo(() => imageSrc !== '', [imageSrc]);
+  const showImage = useMemo(() => hasAvatar && !imageError, [hasAvatar, imageError]);
 
   return (
     <div
@@ -45,14 +68,14 @@ const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAva
       }}
       className={cn('relative flex items-center justify-center', className ?? '')}
     >
-      {(!(user?.avatar ?? '') && (!(user?.username ?? '') || user?.username.trim() === '')) ||
-      imageError ? (
-        renderDefaultAvatar()
+      {!showImage ? (
+        <DefaultAvatar />
       ) : (
         <img
           className="rounded-full"
-          src={(user?.avatar ?? '') || avatarSrc}
+          src={imageSrc}
           alt="avatar"
+          onLoad={handleImageLoad}
           onError={handleImageError}
         />
       )}
@@ -69,8 +92,12 @@ const Icon: React.FC<IconProps> = memo((props) => {
   const avatarSrc = useAvatar(user);
   const localize = useLocalize();
 
+  const username = useMemo(
+    () => user?.name ?? user?.username ?? localize('com_nav_user'),
+    [user?.name, user?.username, localize],
+  );
+
   if (isCreatedByUser) {
-    const username = user?.name ?? user?.username ?? localize('com_nav_user');
     return (
       <UserAvatar
         size={size}

client/src/components/Endpoints/Settings/Advanced.tsx

@@ -151,6 +151,7 @@ export default function Settings({
               min={0}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="temp-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={optionEndpoint ?? ''} type="temp" side={ESide.Left} />
@@ -160,7 +161,9 @@ export default function Settings({
             <div className="flex justify-between">
               <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_top_p')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default')}: 1)</small>
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default_with_num', { 0: '1' })})
+                </small>
               </Label>
               <InputNumber
                 id="top-p-int"
@@ -189,6 +192,7 @@ export default function Settings({
               min={0}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="top-p-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={optionEndpoint ?? ''} type="topp" side={ESide.Left} />
@@ -199,7 +203,9 @@ export default function Settings({
             <div className="flex justify-between">
               <Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_frequency_penalty')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default_with_num', { 0: '0' })})
+                </small>
               </Label>
               <InputNumber
                 id="freq-penalty-int"
@@ -228,6 +234,7 @@ export default function Settings({
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="freq-penalty-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={optionEndpoint ?? ''} type="freq" side={ESide.Left} />
@@ -238,7 +245,9 @@ export default function Settings({
             <div className="flex justify-between">
               <Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_presence_penalty')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default_with_num', { 0: '0' })})
+                </small>
               </Label>
               <InputNumber
                 id="pres-penalty-int"
@@ -267,6 +276,7 @@ export default function Settings({
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="pres-penalty-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={optionEndpoint ?? ''} type="pres" side={ESide.Left} />
@@ -306,6 +316,7 @@ export default function Settings({
                   onCheckedChange={(checked: boolean) => setResendFiles(checked)}
                   disabled={readonly}
                   className="flex"
+                  aria-label={localize('com_endpoint_plug_resend_files')}
                 />
                 <OptionHover endpoint={optionEndpoint ?? ''} type="resend" side={ESide.Bottom} />
               </HoverCardTrigger>
@@ -323,6 +334,7 @@ export default function Settings({
                   max={2}
                   min={0}
                   step={1}
+                  aria-label={localize('com_endpoint_plug_image_detail')}
                 />
                 <OptionHover endpoint={optionEndpoint ?? ''} type="detail" side={ESide.Bottom} />
               </HoverCardTrigger>

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -53,7 +53,9 @@ export default function Settings({ conversation, setOption, models, readonly }:
             <div className="flex justify-between">
               <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_temperature')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default_with_num', { 0: '0' })})
+                </small>
               </Label>
               <InputNumber
                 id="temp-int"
@@ -82,6 +84,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               min={0}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="temp-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@@ -101,6 +104,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                 onCheckedChange={onCheckedChangeAgent}
                 disabled={readonly}
                 className="ml-4 mt-2"
+                aria-label={localize('com_endpoint_plug_use_functions')}
               />
             </HoverCardTrigger>
             <OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={ESide.Bottom} />
@@ -119,6 +123,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                 onCheckedChange={onCheckedChangeSkip}
                 disabled={readonly}
                 className="ml-4 mt-2"
+                aria-label={localize('com_endpoint_plug_skip_completion')}
               />
             </HoverCardTrigger>
             <OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={ESide.Bottom} />

client/src/components/Endpoints/Settings/Google.tsx

@@ -171,6 +171,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               min={google.temperature.min}
               step={google.temperature.step}
               className="flex h-4 w-full"
+              aria-labelledby="temp-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@@ -211,6 +212,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               min={google.topP.min}
               step={google.topP.step}
               className="flex h-4 w-full"
+              aria-labelledby="top-p-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
@@ -252,6 +254,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               min={google.topK.min}
               step={google.topK.step}
               className="flex h-4 w-full"
+              aria-labelledby="top-k-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
@@ -296,6 +299,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               min={google.maxOutputTokens.min}
               step={google.maxOutputTokens.step}
               className="flex h-4 w-full"
+              aria-labelledby="max-tokens-int"
             />
           </HoverCardTrigger>
           <OptionHover

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -256,6 +256,7 @@ export default function Settings({
               min={0}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="temp-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@@ -296,6 +297,7 @@ export default function Settings({
               min={0}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="top-p-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
@@ -337,6 +339,7 @@ export default function Settings({
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="freq-penalty-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
@@ -378,6 +381,7 @@ export default function Settings({
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
+              aria-labelledby="pres-penalty-int"
             />
           </HoverCardTrigger>
           <OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />

client/src/components/Nav/ExportConversation/ExportModal.tsx

@@ -124,13 +124,15 @@ export default function ExportModal({
                       disabled={!exportOptionsSupport}
                       checked={includeOptions}
                       onCheckedChange={setIncludeOptions}
+                      aria-labelledby="includeOptions-label"
                     />
                     <label
+                      id="includeOptions-label"
                       htmlFor="includeOptions"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                     >
                       {exportOptionsSupport
-                        ? localize('com_nav_enabled')
+                        ? localize('com_nav_export_include_endpoint_options')
                         : localize('com_nav_not_supported')}
                     </label>
                   </div>
@@ -146,13 +148,15 @@ export default function ExportModal({
                     disabled={!exportBranchesSupport}
                     checked={exportBranches}
                     onCheckedChange={setExportBranches}
+                    aria-labelledby="exportBranches-label"
                   />
                   <label
+                    id="exportBranches-label"
                     htmlFor="exportBranches"
                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                   >
                     {exportBranchesSupport
-                      ? localize('com_nav_enabled')
+                      ? localize('com_nav_export_all_message_branches')
                       : localize('com_nav_not_supported')}
                   </label>
                 </div>
@@ -163,8 +167,14 @@ export default function ExportModal({
                     {localize('com_nav_export_recursive_or_sequential')}
                   </Label>
                   <div className="flex h-[40px] w-full items-center space-x-3">
-                    <Checkbox id="recursive" checked={recursive} onCheckedChange={setRecursive} />
+                    <Checkbox
+                      id="recursive"
+                      checked={recursive}
+                      onCheckedChange={setRecursive}
+                      aria-labelledby="recursive-label"
+                    />
                     <label
+                      id="recursive-label"
                       htmlFor="recursive"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                     >

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { showThinkingAtom } from '~/store/showThinking';
 import FontSizeSelector from './FontSizeSelector';
 import { ForkSettings } from './ForkSettings';
 import ChatDirection from './ChatDirection';
@@ -28,7 +29,7 @@ const toggleSwitchConfigs = [
     key: 'centerFormOnLanding',
   },
   {
-    stateAtom: store.showThinking,
+    stateAtom: showThinkingAtom,
     localizationKey: 'com_nav_show_thinking',
     switchId: 'showThinking',
     hoverCardText: undefined,

client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx

@@ -30,6 +30,7 @@ export default function SaveBadgesState({
         onCheckedChange={handleCheckedChange}
         className="ml-4"
         data-testid="saveBadgesState"
+        aria-label={localize('com_nav_save_badges_state')}
       />
     </div>
   );

client/src/components/Nav/SettingsTabs/Chat/ShowThinking.tsx

@@ -1,18 +1,18 @@
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
 import { Switch, InfoHoverCard, ESide } from '@librechat/client';
+import { showThinkingAtom } from '~/store/showThinking';
 import { useLocalize } from '~/hooks';
-import store from '~/store';
 
 export default function SaveDraft({
   onCheckedChange,
 }: {
   onCheckedChange?: (value: boolean) => void;
 }) {
-  const [showThinking, setSaveDrafts] = useRecoilState<boolean>(store.showThinking);
+  const [showThinking, setShowThinking] = useAtom(showThinkingAtom);
   const localize = useLocalize();
 
   const handleCheckedChange = (value: boolean) => {
-    setSaveDrafts(value);
+    setShowThinking(value);
     if (onCheckedChange) {
       onCheckedChange(value);
     }
@@ -30,6 +30,7 @@ export default function SaveDraft({
         onCheckedChange={handleCheckedChange}
         className="ml-4"
         data-testid="showThinking"
+        aria-label={localize('com_nav_show_thinking')}
       />
     </div>
   );

client/src/components/Nav/SettingsTabs/Data/ImportConversations.tsx

@@ -9,12 +9,10 @@ import { useLocalize } from '~/hooks';
 import { cn, logger } from '~/utils';
 
 function ImportConversations() {
-  const queryClient = useQueryClient();
-  const startupConfig = queryClient.getQueryData<TStartupConfig>([QueryKeys.startupConfig]);
   const localize = useLocalize();
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
   const { showToast } = useToastContext();
-
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
 
   const handleSuccess = useCallback(() => {
@@ -53,7 +51,8 @@ function ImportConversations() {
   const handleFileUpload = useCallback(
     async (file: File) => {
       try {
-        const maxFileSize = (startupConfig as any)?.conversationImportMaxFileSize;
+        const startupConfig = queryClient.getQueryData<TStartupConfig>([QueryKeys.startupConfig]);
+        const maxFileSize = startupConfig?.conversationImportMaxFileSize;
         if (maxFileSize && file.size > maxFileSize) {
           const size = (maxFileSize / (1024 * 1024)).toFixed(2);
           showToast({
@@ -76,7 +75,7 @@ function ImportConversations() {
         });
       }
     },
-    [uploadFile, showToast, localize, startupConfig],
+    [uploadFile, showToast, localize, queryClient],
   );
 
   const handleFileChange = useCallback(

client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx

@@ -13,7 +13,6 @@ import {
   useMediaQuery,
   OGDialogHeader,
   OGDialogTitle,
-  TooltipAnchor,
   DataTable,
   Spinner,
   Button,
@@ -246,37 +245,27 @@ export default function SharedLinks() {
         },
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <TooltipAnchor
-              description={localize('com_ui_view_source')}
-              render={
-                <Button
-                  variant="ghost"
-                  className="h-8 w-8 p-0 hover:bg-surface-hover"
-                  onClick={() => {
-                    window.open(`/c/${row.original.conversationId}`, '_blank');
-                  }}
-                  title={localize('com_ui_view_source')}
-                >
-                  <MessageSquare className="size-4" />
-                </Button>
-              }
-            />
-            <TooltipAnchor
-              description={localize('com_ui_delete')}
-              render={
-                <Button
-                  variant="ghost"
-                  className="h-8 w-8 p-0 hover:bg-surface-hover"
-                  onClick={() => {
-                    setDeleteRow(row.original);
-                    setIsDeleteOpen(true);
-                  }}
-                  title={localize('com_ui_delete')}
-                >
-                  <TrashIcon className="size-4" />
-                </Button>
-              }
-            />
+            <Button
+              variant="ghost"
+              className="h-8 w-8 p-0 hover:bg-surface-hover"
+              onClick={() => {
+                window.open(`/c/${row.original.conversationId}`, '_blank');
+              }}
+              aria-label={`${localize('com_ui_view_source')} - ${row.original.title || localize('com_ui_untitled')}`}
+            >
+              <MessageSquare className="size-4" aria-hidden="true" />
+            </Button>
+            <Button
+              variant="ghost"
+              className="h-8 w-8 p-0 hover:bg-surface-hover"
+              onClick={() => {
+                setDeleteRow(row.original);
+                setIsDeleteOpen(true);
+              }}
+              aria-label={`${localize('com_ui_delete')} - ${row.original.title || localize('com_ui_untitled')}`}
+            >
+              <TrashIcon className="size-4" aria-hidden="true" />
+            </Button>
           </div>
         ),
       },

client/src/components/Nav/SettingsTabs/ToggleSwitch.tsx

@@ -1,3 +1,4 @@
+import { WritableAtom, useAtom } from 'jotai';
 import { RecoilState, useRecoilState } from 'recoil';
 import { Switch, InfoHoverCard, ESide } from '@librechat/client';
 import { useLocalize } from '~/hooks';
@@ -6,7 +7,7 @@ type LocalizeFn = ReturnType<typeof useLocalize>;
 type LocalizeKey = Parameters<LocalizeFn>[0];
 
 interface ToggleSwitchProps {
-  stateAtom: RecoilState<boolean>;
+  stateAtom: RecoilState<boolean> | WritableAtom<boolean, [boolean], void>;
   localizationKey: LocalizeKey;
   hoverCardText?: LocalizeKey;
   switchId: string;
@@ -16,13 +17,18 @@ interface ToggleSwitchProps {
   strongLabel?: boolean;
 }
 
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+function isRecoilState<T>(atom: unknown): atom is RecoilState<T> {
+  return atom != null && typeof atom === 'object' && 'key' in atom;
+}
+
+const RecoilToggle: React.FC<
+  Omit<ToggleSwitchProps, 'stateAtom'> & { stateAtom: RecoilState<boolean> }
+> = ({
   stateAtom,
   localizationKey,
   hoverCardText,
   switchId,
   onCheckedChange,
-  showSwitch = true,
   disabled = false,
   strongLabel = false,
 }) => {
@@ -36,9 +42,47 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
 
   const labelId = `${switchId}-label`;
 
-  if (!showSwitch) {
-    return null;
-  }
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div id={labelId}>
+          {strongLabel ? <strong>{localize(localizationKey)}</strong> : localize(localizationKey)}
+        </div>
+        {hoverCardText && <InfoHoverCard side={ESide.Bottom} text={localize(hoverCardText)} />}
+      </div>
+      <Switch
+        id={switchId}
+        checked={switchState}
+        onCheckedChange={handleCheckedChange}
+        disabled={disabled}
+        className="ml-4"
+        data-testid={switchId}
+        aria-labelledby={labelId}
+      />
+    </div>
+  );
+};
+
+const JotaiToggle: React.FC<
+  Omit<ToggleSwitchProps, 'stateAtom'> & { stateAtom: WritableAtom<boolean, [boolean], void> }
+> = ({
+  stateAtom,
+  localizationKey,
+  hoverCardText,
+  switchId,
+  onCheckedChange,
+  disabled = false,
+  strongLabel = false,
+}) => {
+  const [switchState, setSwitchState] = useAtom(stateAtom);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setSwitchState(value);
+    onCheckedChange?.(value);
+  };
+
+  const labelId = `${switchId}-label`;
 
   return (
     <div className="flex items-center justify-between">
@@ -52,13 +96,29 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
         id={switchId}
         checked={switchState}
         onCheckedChange={handleCheckedChange}
+        disabled={disabled}
         className="ml-4"
         data-testid={switchId}
         aria-labelledby={labelId}
-        disabled={disabled}
       />
     </div>
   );
 };
 
+const ToggleSwitch: React.FC<ToggleSwitchProps> = (props) => {
+  const { stateAtom, showSwitch = true } = props;
+
+  if (!showSwitch) {
+    return null;
+  }
+
+  const isRecoil = isRecoilState(stateAtom);
+
+  if (isRecoil) {
+    return <RecoilToggle {...props} stateAtom={stateAtom as RecoilState<boolean>} />;
+  }
+
+  return <JotaiToggle {...props} stateAtom={stateAtom as WritableAtom<boolean, [boolean], void>} />;
+};
+
 export default ToggleSwitch;

client/src/components/Prompts/AdminSettings.tsx

@@ -53,6 +53,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
             }
           }}
           value={field.value.toString()}
+          aria-label={label}
         />
       )}
     />
@@ -216,7 +217,12 @@ const AdminSettings = () => {
                 ))}
               </div>
               <div className="flex justify-end">
-                <Button type="submit" disabled={isSubmitting || isLoading} variant="submit">
+                <Button
+                  type="submit"
+                  disabled={isSubmitting || isLoading}
+                  variant="submit"
+                  aria-label={localize('com_ui_save')}
+                >
                   {localize('com_ui_save')}
                 </Button>
               </div>

client/src/components/Prompts/Groups/AlwaysMakeProd.tsx

@@ -28,7 +28,7 @@ export default function AlwaysMakeProd({
         checked={alwaysMakeProd}
         onCheckedChange={handleCheckedChange}
         data-testid="alwaysMakeProd"
-        aria-label="Always make prompt production"
+        aria-label={localize('com_nav_always_make_prod')}
       />
       <div>{localize('com_nav_always_make_prod')} </div>
     </div>

client/src/components/Prompts/Groups/AutoSendPrompt.tsx

@@ -30,7 +30,7 @@ export default function AutoSendPrompt({
     >
       <div> {localize('com_nav_auto_send_prompts')} </div>
       <Switch
-        aria-label="toggle-auto-send-prompts"
+        aria-label={localize('com_nav_auto_send_prompts')}
         id="autoSendPrompts"
         checked={autoSendPrompts}
         onCheckedChange={handleCheckedChange}

client/src/components/Prompts/Groups/ChatGroupItem.tsx

@@ -102,6 +102,9 @@ function ChatGroupItem({
                   e.stopPropagation();
                   setPreviewDialogOpen(true);
                 }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                }}
                 className="w-full cursor-pointer rounded-lg text-text-primary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
               >
                 <TextSearch className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
@@ -116,6 +119,9 @@ function ChatGroupItem({
                       e.stopPropagation();
                       onEditClick(e);
                     }}
+                    onKeyDown={(e) => {
+                      e.stopPropagation();
+                    }}
                   >
                     <EditIcon className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
                     <span>{localize('com_ui_edit')}</span>

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -151,6 +151,7 @@ const CreatePromptForm = ({
                       className="w-full rounded border border-border-medium px-2 py-1 focus:outline-none dark:bg-transparent dark:text-gray-200"
                       minRows={6}
                       tabIndex={0}
+                      aria-label={localize('com_ui_prompt_input_field')}
                     />
                     <div
                       className={`mt-1 text-sm text-red-500 ${

client/src/components/Prompts/Groups/List.tsx

@@ -34,6 +34,7 @@ export default function List({
             variant="outline"
             className={`w-full bg-transparent ${isChatRoute ? '' : 'mx-2'}`}
             onClick={() => navigate('/d/prompts/new')}
+            aria-label={localize('com_ui_create_prompt')}
           >
             <Plus className="size-4" aria-hidden />
             {localize('com_ui_create_prompt')}

client/src/components/Prompts/Groups/ListCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Label } from '@librechat/client';
 import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
+import { useLocalize } from '~/hooks';
 
 export default function ListCard({
   category,
@@ -15,6 +16,7 @@ export default function ListCard({
   onClick?: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
   children?: React.ReactNode;
 }) {
+  const localize = useLocalize();
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
@@ -31,7 +33,7 @@ export default function ListCard({
       tabIndex={0}
       aria-labelledby={`card-title-${name}`}
       aria-describedby={`card-snippet-${name}`}
-      aria-label={`Card for ${name}`}
+      aria-label={`${name} Prompt, ${category ? `${localize('com_ui_category')}: ${category}` : ''}`}
     >
       <div className="flex w-full justify-between gap-2">
         <div className="flex flex-row gap-2">

client/src/components/Prompts/Groups/NoPromptGroup.tsx

@@ -17,6 +17,7 @@ export default function NoPromptGroup() {
             onClick={() => {
               navigate('/d/prompts');
             }}
+            aria-label={localize('com_ui_back_to_prompts')}
           >
             {localize('com_ui_back_to_prompts')}
           </Button>

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -193,6 +193,7 @@ export default function VariableForm({
                       )}
                       placeholder={field.config.variable}
                       maxRows={8}
+                      aria-label={field.config.variable}
                     />
                   );
                 }}
@@ -201,7 +202,7 @@ export default function VariableForm({
           ))}
         </div>
         <div className="flex justify-end">
-          <Button type="submit" variant="submit">
+          <Button type="submit" variant="submit" aria-label={localize('com_ui_submit')}>
             {localize('com_ui_submit')}
           </Button>
         </div>

client/src/components/Prompts/PromptEditor.tsx

@@ -118,6 +118,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
                     setIsEditing(false);
                   }
                 }}
+                aria-label={localize('com_ui_prompt_input')}
               />
             ) : (
               <div

client/src/components/Sharing/GenericGrantAccessDialog.tsx

@@ -370,7 +370,11 @@ export default function GenericGrantAccessDialog({
             <div className="flex gap-2">
               <PeoplePickerAdminSettings />
               <OGDialogClose asChild>
-                <Button variant="outline" onClick={handleCancel}>
+                <Button
+                  variant="outline"
+                  onClick={handleCancel}
+                  aria-label={localize('com_ui_cancel')}
+                >
                   {localize('com_ui_cancel')}
                 </Button>
               </OGDialogClose>
@@ -382,6 +386,7 @@ export default function GenericGrantAccessDialog({
                   (hasChanges && !hasAtLeastOneOwner)
                 }
                 className="min-w-[120px]"
+                aria-label={localize('com_ui_save_changes')}
               >
                 {updatePermissionsMutation.isLoading ? (
                   <div className="flex items-center gap-2">

client/src/components/Sharing/PeoplePickerAdminSettings.tsx

@@ -60,6 +60,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
           checked={field.value}
           onCheckedChange={field.onChange}
           value={field.value.toString()}
+          aria-label={label}
         />
       )}
     />
@@ -158,6 +159,7 @@ const PeoplePickerAdminSettings = () => {
         <Button
           variant={'outline'}
           className="btn btn-neutral border-token-border-light relative gap-1 rounded-lg font-medium"
+          aria-label={localize('com_ui_admin_settings')}
         >
           <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
           {localize('com_ui_admin_settings')}

client/src/components/SidePanel/Agents/AdminSettings.tsx

@@ -56,6 +56,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
           checked={field.value}
           onCheckedChange={field.onChange}
           value={field.value.toString()}
+          aria-label={label}
         />
       )}
     />
@@ -152,6 +153,7 @@ const AdminSettings = () => {
           size={'sm'}
           variant={'outline'}
           className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+          aria-label={localize('com_ui_admin_settings')}
         >
           <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
           {localize('com_ui_admin_settings')}

client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx

@@ -17,6 +17,7 @@ const AdvancedButton: React.FC<AdvancedButtonProps> = ({ setActivePanel }) => {
       variant={'outline'}
       className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
       onClick={() => setActivePanel(Panel.advanced)}
+      aria-label={localize('com_ui_advanced')}
     >
       <Settings2 className="h-4 w-4 cursor-pointer" aria-hidden="true" />
       {localize('com_ui_advanced')}

client/src/components/SidePanel/Agents/Advanced/AdvancedPanel.tsx

@@ -31,6 +31,7 @@ export default function AdvancedPanel() {
             onClick={() => {
               setActivePanel(Panel.builder);
             }}
+            aria-label={localize('com_ui_back_to_builder')}
           >
             <div className="advanced-panel-content flex w-full items-center justify-center gap-2">
               <ChevronLeft />

client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx

@@ -146,6 +146,9 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
               <button
                 className="rounded-xl p-1 transition hover:bg-surface-hover"
                 onClick={() => removeAgentAt(idx)}
+                aria-label={localize('com_ui_remove_agent_from_chain', {
+                  0: getAgentDetails(agentId)?.name || localize('com_ui_agent'),
+                })}
               >
                 <X size={18} className="text-text-secondary" />
               </button>

client/src/components/SidePanel/Agents/AgentAvatar.tsx

@@ -186,7 +186,11 @@ function Avatar({
     <Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
       <div className="flex w-full items-center justify-center gap-4">
         <Popover.Trigger asChild>
-          <button type="button" className="h-20 w-20">
+          <button
+            type="button"
+            className="f h-20 w-20 focus:rounded-full focus:ring-2 focus:ring-ring"
+            aria-label={localize('com_ui_upload_agent_avatar_label')}
+          >
             {previewUrl ? <AgentAvatarRender url={previewUrl} progress={progress} /> : <NoImage />}
           </button>
         </Popover.Trigger>

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -420,9 +420,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
                       type="text"
                       placeholder={localize('com_ui_support_contact_name_placeholder')}
                       aria-label="Support contact name"
+                      aria-invalid={error ? 'true' : 'false'}
+                      aria-describedby={error ? 'support-contact-name-error' : undefined}
                     />
                     {error && (
-                      <span className="text-sm text-red-500 transition duration-300 ease-in-out">
+                      <span
+                        id="support-contact-name-error"
+                        className="text-sm text-red-500 transition duration-300 ease-in-out"
+                        role="alert"
+                        aria-live="polite"
+                      >
                         {error.message}
                       </span>
                     )}
@@ -455,9 +462,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
                       type="email"
                       placeholder={localize('com_ui_support_contact_email_placeholder')}
                       aria-label="Support contact email"
+                      aria-invalid={error ? 'true' : 'false'}
+                      aria-describedby={error ? 'support-contact-email-error' : undefined}
                     />
                     {error && (
-                      <span className="text-sm text-red-500 transition duration-300 ease-in-out">
+                      <span
+                        id="support-contact-email-error"
+                        className="text-sm text-red-500 transition duration-300 ease-in-out"
+                        role="alert"
+                        aria-live="polite"
+                      >
                         {error.message}
                       </span>
                     )}

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -283,6 +283,13 @@ export default function AgentPanel() {
                   setCurrentAgentId(undefined);
                 }}
                 disabled={agentQuery.isInitialLoading}
+                aria-label={
+                  localize('com_ui_create') +
+                  ' ' +
+                  localize('com_ui_new') +
+                  ' ' +
+                  localize('com_ui_agent')
+                }
               >
                 <Plus className="mr-1 h-4 w-4" />
                 {localize('com_ui_create') +

client/src/components/SidePanel/Agents/Artifacts.tsx

@@ -117,6 +117,7 @@ function SwitchItem({
           className="ml-4"
           data-testid={id}
           disabled={disabled}
+          aria-label={label}
         />
       </div>
     </HoverCard>

client/src/components/SidePanel/Agents/Code/Action.tsx

@@ -61,6 +61,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
                 disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
+                aria-label={localize('com_ui_run_code')}
               />
             )}
           />
@@ -81,7 +82,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
           </button>
           <div className="ml-2 flex gap-2">
             {isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
-              <button type="button" onClick={() => setIsDialogOpen(true)}>
+              <button
+                type="button"
+                onClick={() => setIsDialogOpen(true)}
+                aria-label={localize('com_ui_add_api_key')}
+              >
                 <KeyRoundIcon className="h-5 w-5 text-text-primary" />
               </button>
             )}

client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx

@@ -104,6 +104,7 @@ export default function ApiKeyDialog({
             <Button
               onClick={onRevoke}
               className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
+              aria-label={localize('com_ui_revoke')}
             >
               {localize('com_ui_revoke')}
             </Button>

client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx

@@ -32,6 +32,7 @@ function FileSearchCheckbox() {
                 onCheckedChange={field.onChange}
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
+                aria-label={localize('com_agents_enable_file_search')}
               />
             )}
           />

client/src/components/SidePanel/Agents/Images.tsx

@@ -104,15 +104,16 @@ export function AvatarMenu({
         className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-850 dark:text-white"
         sideOffset={5}
       >
-        <div
+        <button
+          type="button"
           role="menuitem"
           className="group m-1.5 flex cursor-pointer gap-2 rounded-lg p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
-          tabIndex={-1}
+          tabIndex={0}
           data-orientation="vertical"
           onClick={onItemClick}
         >
           {localize('com_ui_upload_image')}
-        </div>
+        </button>
         {/* <Popover.Close
           role="menuitem"
           className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"

client/src/components/SidePanel/Agents/MCPInput.tsx

@@ -210,10 +210,15 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
             control={control}
             rules={{ required: true }}
             render={({ field }) => (
-              <Checkbox id="trust" checked={field.value} onCheckedChange={field.onChange} />
+              <Checkbox
+                id="trust-checkbox"
+                checked={field.value}
+                onCheckedChange={field.onChange}
+                aria-labelledby="trust-label"
+              />
             )}
           />
-          <Label htmlFor="trust" className="flex flex-col">
+          <Label id="trust-label" htmlFor="trust-checkbox" className="flex flex-col">
             {localize('com_ui_trust_app')}
             <span className="text-xs text-text-secondary">
               {localize('com_agents_mcp_trust_subtext')}
@@ -269,6 +274,10 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
                   checked={selectedTools.includes(tool)}
                   onCheckedChange={() => handleToolToggle(tool)}
                   className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
+                  aria-label={tool
+                    .split('_')
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(' ')}
                 />
                 <span className="text-token-text-primary">
                   {tool

client/src/components/SidePanel/Agents/MCPTool.tsx

@@ -162,6 +162,12 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
                               }
                             }}
                             tabIndex={isExpanded ? 0 : -1}
+                            aria-label={
+                              selectedTools.length === serverInfo.tools?.length &&
+                              selectedTools.length > 0
+                                ? localize('com_ui_deselect_all')
+                                : localize('com_ui_select_all')
+                            }
                           />
                         </div>
 
@@ -252,6 +258,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
                     className={cn(
                       'relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
                     )}
+                    aria-label={subTool.metadata.name}
                   />
                   <span className="text-token-text-primary select-none">
                     {subTool.metadata.name}

client/src/components/SidePanel/Agents/ModelPanel.tsx

@@ -102,6 +102,7 @@ export default function ModelPanel({
             onClick={() => {
               setActivePanel(Panel.builder);
             }}
+            aria-label={localize('com_ui_back_to_builder')}
           >
             <div className="model-panel-content flex w-full items-center justify-center gap-2">
               <ChevronLeft />

client/src/components/SidePanel/Agents/Search/Action.tsx

@@ -69,6 +69,7 @@ export default function Action({
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
                 disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
+                aria-label={localize('com_ui_web_search')}
               />
             )}
           />

client/src/components/SidePanel/Agents/Search/ApiKeyDialog.tsx

@@ -250,7 +250,11 @@ export default function ApiKeyDialog({
         }}
         buttons={
           isToolAuthenticated && (
-            <Button onClick={onRevoke} className="bg-red-500 text-white hover:bg-red-600">
+            <Button
+              onClick={onRevoke}
+              className="bg-red-500 text-white hover:bg-red-600"
+              aria-label={localize('com_ui_revoke')}
+            >
               {localize('com_ui_revoke')}
             </Button>
           )

client/src/components/SidePanel/Agents/Version/VersionButton.tsx

@@ -16,6 +16,7 @@ const VersionButton = ({ setActivePanel }: VersionButtonProps) => {
       variant={'outline'}
       className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
       onClick={() => setActivePanel(Panel.version)}
+      aria-label={localize('com_ui_agent_version')}
     >
       <History className="h-4 w-4 cursor-pointer" aria-hidden="true" />
       {localize('com_ui_agent_version')}

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -112,6 +112,7 @@ const BookmarkTable = () => {
                   variant="outline"
                   size="sm"
                   className="w-full gap-2 text-sm"
+                  aria-label={localize('com_ui_bookmarks_new')}
                   onClick={() => setOpen(!open)}
                 >
                   <BookmarkPlusIcon className="size-4" />

client/src/components/SidePanel/Builder/AssistantAvatar.tsx

@@ -213,7 +213,11 @@ function Avatar({
     <Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
       <div className="flex w-full items-center justify-center gap-4">
         <Popover.Trigger asChild>
-          <button type="button" className="h-20 w-20">
+          <button
+            type="button"
+            className="h-20 w-20"
+            aria-label={localize('com_ui_upload_avatar_label')}
+          >
             {previewUrl ? <AssistantAvatar url={previewUrl} progress={progress} /> : <NoImage />}
           </button>
         </Popover.Trigger>

client/src/components/SidePanel/Builder/Code.tsx

@@ -31,6 +31,7 @@ export default function Code({ version }: { version: number | string }) {
                 onCheckedChange={field.onChange}
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
+                aria-labelledby={Capabilities.code_interpreter}
               />
             )}
           />
@@ -44,6 +45,7 @@ export default function Code({ version }: { version: number | string }) {
             }
           >
             <label
+              id={Capabilities.code_interpreter}
               className="form-check-label text-token-text-primary w-full cursor-pointer"
               htmlFor={Capabilities.code_interpreter}
             >