From 5029dd467ee2c15c5522beed26d4c16ba1c4569d Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 3 Aug 2026 13:20:39 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=82=EF=B8=8F=20fix:=20Truncate=20Overflow?=
 =?UTF-8?q?ing=20Activity=20and=20Intent=20Labels=20in=20Chat=20UI=20(#146?=
 =?UTF-8?q?07)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✂️ fix: Truncate Overflowing Activity and Intent Labels in Chat UI

* 🖍️ style: Use Middle Dot Separator in Tool Label Chrome

* ✂️ fix: Truncate Completed Web Search Label
---
 .../components/Chat/Messages/Content/Part.tsx |  2 +-
 .../Chat/Messages/Content/Parts/BashCall.tsx  |  2 +-
 .../Messages/Content/Parts/ExecuteCode.tsx    |  2 +-
 .../Content/Parts/FileAuthoringCall.tsx       |  2 +-
 .../Parts/OpenAIImageGen/ProgressText.tsx     |  2 +-
 .../Content/Parts/PendingSkillCall.tsx        |  6 ++---
 .../Messages/Content/Parts/ReadFileCall.tsx   |  2 +-
 .../Chat/Messages/Content/Parts/SkillCall.tsx |  2 +-
 .../Messages/Content/Parts/SubagentCall.tsx   |  4 +++-
 .../Chat/Messages/Content/ProgressText.tsx    | 22 ++++++++++---------
 .../Chat/Messages/Content/ToolCallGroup.tsx   |  7 ++++--
 .../Chat/Messages/Content/WebSearch.tsx       |  4 ++--
 .../Content/__tests__/ToolCallGroup.test.tsx  |  4 ++--
 13 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/Part.tsx b/client/src/components/Chat/Messages/Content/Part.tsx
index 86274c750a..076dfbc1cd 100644
--- a/client/src/components/Chat/Messages/Content/Part.tsx
+++ b/client/src/components/Chat/Messages/Content/Part.tsx
@@ -164,7 +164,7 @@ const Part = memo(function Part({
     const failed = part.status === 'failed' || part.status === 'partial';
     return (
       <div
-        className={`my-1 pl-1 text-sm italic ${failed ? 'text-amber-600 dark:text-amber-400' : 'text-text-secondary'}`}
+        className={`my-1 break-words pl-1 text-sm italic ${failed ? 'text-amber-600 dark:text-amber-400' : 'text-text-secondary'}`}
       >
         {display}
       </div>
diff --git a/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx b/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
index fa2f033fb8..97a045f449 100644
--- a/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
@@ -96,7 +96,7 @@ export default function BashCall({
 
   return (
     <>
-      <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={toggleCode}
diff --git a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
index 6821103422..ac45293089 100644
--- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
@@ -105,7 +105,7 @@ export default function ExecuteCode({
 
   return (
     <>
-      <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={toggleCode}
diff --git a/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx b/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
index e24febcf06..a74faed85f 100644
--- a/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
@@ -160,7 +160,7 @@ export default function FileAuthoringCall({
 
   return (
     <>
-      <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={toggleCode}
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
index 490539419b..6fcab36239 100644
--- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
@@ -83,7 +83,7 @@ export default function ProgressText({
   return (
     <span
       className={cn(
-        'progress-text-content tool-status-text whitespace-nowrap font-medium',
+        'progress-text-content tool-status-text min-w-0 truncate font-medium',
         progress < 1 && 'shimmer',
       )}
     >
diff --git a/client/src/components/Chat/Messages/Content/Parts/PendingSkillCall.tsx b/client/src/components/Chat/Messages/Content/Parts/PendingSkillCall.tsx
index 15b0d1f2a7..21f41a4557 100644
--- a/client/src/components/Chat/Messages/Content/Parts/PendingSkillCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/PendingSkillCall.tsx
@@ -33,10 +33,10 @@ export default function PendingSkillCall({
     : localize('com_ui_skill_running', { 0: skillName });
 
   return (
-    <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+    <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
       <div className="progress-text-wrapper text-token-text-secondary relative -mt-[0.75px] h-5 w-full leading-5">
         <div
-          className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
+          className="progress-text-content absolute left-0 top-0 max-w-full overflow-visible whitespace-nowrap"
           style={{ opacity: 1, transform: 'none' }}
         >
           <div className="inline-flex w-full items-center gap-2">
@@ -44,7 +44,7 @@ export default function PendingSkillCall({
               className={cn('size-4 shrink-0 text-text-secondary', !loaded && 'animate-pulse')}
               aria-hidden="true"
             />
-            <span className={cn(!loaded && 'shimmer', 'font-medium')}>{text}</span>
+            <span className={cn(!loaded && 'shimmer', 'min-w-0 truncate font-medium')}>{text}</span>
           </div>
         </div>
       </div>
diff --git a/client/src/components/Chat/Messages/Content/Parts/ReadFileCall.tsx b/client/src/components/Chat/Messages/Content/Parts/ReadFileCall.tsx
index 0519d51036..91c25cd816 100644
--- a/client/src/components/Chat/Messages/Content/Parts/ReadFileCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/ReadFileCall.tsx
@@ -92,7 +92,7 @@ export default function ReadFileCall({
 
   return (
     <>
-      <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={toggleCode}
diff --git a/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx b/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
index 7231d2a4c4..83aadd7464 100644
--- a/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
@@ -36,7 +36,7 @@ export default function SkillCall({
 
   return (
     <>
-      <div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-1.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={toggleCode}
diff --git a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
index fdeb4f0f22..81b4a0b84b 100644
--- a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
@@ -489,7 +489,9 @@ export default function SubagentCall({
               <Users size={14} />
             )}
           </div>
-          <span className="shrink-0">{headerText}</span>
+          <span className="min-w-0 truncate" title={headerText}>
+            {headerText}
+          </span>
           {subagentNameLabel ? (
             <span
               className="min-w-0 flex-1 truncate font-normal text-text-secondary"
diff --git a/client/src/components/Chat/Messages/Content/ProgressText.tsx b/client/src/components/Chat/Messages/Content/ProgressText.tsx
index 60a1e651ae..a2f074463b 100644
--- a/client/src/components/Chat/Messages/Content/ProgressText.tsx
+++ b/client/src/components/Chat/Messages/Content/ProgressText.tsx
@@ -6,15 +6,18 @@ import { cn } from '~/utils';
 const wrapperClass =
   'progress-text-wrapper text-token-text-secondary relative -mt-[0.75px] h-5 w-full leading-5';
 
+/** `max-w-full` caps the absolutely-positioned line at the message column;
+ *  the label span truncates itself, so overflow stays visible for the
+ *  button's focus ring. */
+const contentClass =
+  'progress-text-content absolute left-0 top-0 max-w-full overflow-visible whitespace-nowrap';
+
 const Wrapper = ({ popover, children }: { popover: boolean; children: React.ReactNode }) => {
   if (popover) {
     return (
       <div className={wrapperClass}>
         <Popover.Trigger asChild>
-          <div
-            className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
-            style={{ opacity: 1, transform: 'none' }}
-          >
+          <div className={contentClass} style={{ opacity: 1, transform: 'none' }}>
             {children}
           </div>
         </Popover.Trigger>
@@ -24,10 +27,7 @@ const Wrapper = ({ popover, children }: { popover: boolean; children: React.Reac
 
   return (
     <div className={wrapperClass}>
-      <div
-        className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
-        style={{ opacity: 1, transform: 'none' }}
-      >
+      <div className={contentClass} style={{ opacity: 1, transform: 'none' }}>
         {children}
       </div>
     </div>
@@ -98,10 +98,12 @@ export default function ProgressText({
         aria-expanded={hasInput ? isExpanded : undefined}
       >
         {icon}
-        <span className={cn(showShimmer ? 'shimmer' : '', 'font-medium')}>{text}</span>
+        <span className={cn(showShimmer ? 'shimmer' : '', 'min-w-0 truncate font-medium')}>
+          {text}
+        </span>
         {subtitle && <span className="font-normal text-text-secondary">{subtitle}</span>}
         {errorSuffix && (
-          <span className="font-normal text-red-600 dark:text-red-400">— {errorSuffix}</span>
+          <span className="font-normal text-red-600 dark:text-red-400">· {errorSuffix}</span>
         )}
         {hasInput && (
           <ChevronDown
diff --git a/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx b/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
index cc43f3a924..8550d37e23 100644
--- a/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
@@ -376,10 +376,11 @@ export default function ToolCallGroup({
         )}
         <span
           className={cn(
-            'tool-status-text font-medium',
+            'tool-status-text min-w-0 truncate font-medium',
             activityFailed && 'text-amber-600 dark:text-amber-400',
           )}
           role="status"
+          title={groupLabel}
         >
           {groupLabel}
         </span>
@@ -387,7 +388,9 @@ export default function ToolCallGroup({
          *   questions) — every entry deduplicates to the same token, which
          *   adds noise without info. Mixed groups keep the summary. */}
         {toolNameSummary && !allSubagents && !allAskQuestions && (
-          <span className="text-xs font-normal text-text-secondary">— {toolNameSummary}</span>
+          <span className="min-w-0 max-w-[40%] truncate text-xs font-normal text-text-secondary">
+            · {toolNameSummary}
+          </span>
         )}
         <ChevronDown
           className={cn(
diff --git a/client/src/components/Chat/Messages/Content/WebSearch.tsx b/client/src/components/Chat/Messages/Content/WebSearch.tsx
index 172a1b00db..d23f3fe438 100644
--- a/client/src/components/Chat/Messages/Content/WebSearch.tsx
+++ b/client/src/components/Chat/Messages/Content/WebSearch.tsx
@@ -238,7 +238,7 @@ export default function WebSearch({
           ) : (
             <Globe className="size-4 shrink-0 text-text-secondary" aria-hidden="true" />
           )}
-          <span className="font-medium">{completedText}</span>
+          <span className="min-w-0 truncate font-medium">{completedText}</span>
           {hasSourceData && (
             <ChevronDown
               className={cn(
@@ -289,7 +289,7 @@ export default function WebSearch({
       </span>
       {showSources && <StackedFavicons sources={streamingSources} start={-5} />}
       <Globe className="size-4 shrink-0 text-text-secondary" aria-hidden="true" />
-      <span className="tool-status-text shimmer font-medium text-text-secondary">
+      <span className="tool-status-text shimmer min-w-0 truncate font-medium text-text-secondary">
         {progressText}
       </span>
     </div>
diff --git a/client/src/components/Chat/Messages/Content/__tests__/ToolCallGroup.test.tsx b/client/src/components/Chat/Messages/Content/__tests__/ToolCallGroup.test.tsx
index f05631f0f6..38129e3428 100644
--- a/client/src/components/Chat/Messages/Content/__tests__/ToolCallGroup.test.tsx
+++ b/client/src/components/Chat/Messages/Content/__tests__/ToolCallGroup.test.tsx
@@ -507,7 +507,7 @@ describe('ToolCallGroup image hoisting', () => {
       ],
     });
 
-    expect(screen.getByText('— Code')).toBeInTheDocument();
+    expect(screen.getByText('· Code')).toBeInTheDocument();
     expect(screen.queryByText(/Code, bash_tool/)).not.toBeInTheDocument();
     expect(screen.getByTestId('stacked-icons')).toHaveAttribute(
       'data-tool-names',
@@ -530,7 +530,7 @@ describe('ToolCallGroup image hoisting', () => {
     expect(screen.queryByText('Used 2 tools')).not.toBeInTheDocument();
     expect(screen.getByTestId('question-icon')).toBeInTheDocument();
     expect(screen.queryByTestId('stacked-icons')).not.toBeInTheDocument();
-    expect(screen.queryByText(/— ask_user_question/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/· ask_user_question/)).not.toBeInTheDocument();
   });
 
   it('uses the present tense while a multi-question turn is still streaming', () => {