From ce66d7e91fca4857dea56d64699a742a851539da Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 20 Jun 2026 16:14:47 +0200
Subject: [PATCH] refactor: tokenize Chat message content, tool output, and
 file UI colors

---
 client/src/components/Chat/Input/Files/Image.tsx              | 4 ++--
 client/src/components/Chat/Input/Files/Table/DataTable.tsx    | 2 +-
 client/src/components/Chat/Input/PromptsCommand.tsx           | 2 +-
 client/src/components/Chat/Input/SkillsCommand.tsx            | 2 +-
 .../components/Chat/Menus/Endpoints/components/GroupIcon.tsx  | 2 +-
 .../src/components/Chat/Messages/Content/MemoryArtifacts.tsx  | 2 +-
 .../src/components/Chat/Messages/Content/MessageContent.tsx   | 4 ++--
 .../src/components/Chat/Messages/Content/Parts/BashCall.tsx   | 2 +-
 .../src/components/Chat/Messages/Content/Parts/EmptyText.tsx  | 2 +-
 .../components/Chat/Messages/Content/Parts/ExecuteCode.tsx    | 2 +-
 .../Chat/Messages/Content/Parts/FileAuthoringCall.tsx         | 2 +-
 .../components/Chat/Messages/Content/Parts/SubagentCall.tsx   | 2 +-
 client/src/components/Chat/Messages/Content/ProgressText.tsx  | 2 +-
 .../Chat/Messages/Content/ToolOutput/OutputRenderer.tsx       | 4 ++--
 client/src/components/Chat/Messages/MinimalHoverButtons.tsx   | 2 +-
 15 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/Image.tsx b/client/src/components/Chat/Input/Files/Image.tsx
index 3b186822ce..0a2cfe9010 100644
--- a/client/src/components/Chat/Input/Files/Image.tsx
+++ b/client/src/components/Chat/Input/Files/Image.tsx
@@ -16,8 +16,8 @@ const Image = ({
   source?: FileSources;
 }) => {
   return (
-    <div className="group relative inline-block text-sm text-black/70 dark:text-white/90">
-      <div className="relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-600">
+    <div className="group relative inline-block text-sm text-text-secondary">
+      <div className="relative overflow-hidden rounded-2xl border border-border-medium">
         <ImagePreview source={source} imageBase64={imageBase64} url={url} progress={progress} />
       </div>
       <RemoveFile onRemove={onDelete} />
diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
index a7cf76a409..d09dbca6b7 100644
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@@ -110,7 +110,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           {isDeleting ? (
             <Spinner className="size-3.5 sm:size-4" />
           ) : (
-            <TrashIcon className="size-3.5 text-red-400 sm:size-4" />
+            <TrashIcon className="size-3.5 text-text-destructive sm:size-4" />
           )}
           {!isSmallScreen && <span className="ml-2">{localize('com_ui_delete')}</span>}
         </Button>
diff --git a/client/src/components/Chat/Input/PromptsCommand.tsx b/client/src/components/Chat/Input/PromptsCommand.tsx
index 4efa7a1a7f..cccb516a8e 100644
--- a/client/src/components/Chat/Input/PromptsCommand.tsx
+++ b/client/src/components/Chat/Input/PromptsCommand.tsx
@@ -209,7 +209,7 @@ function PromptsCommand({
           <input
             ref={initInputRef}
             placeholder={localize('com_ui_command_usage_placeholder')}
-            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200"
+            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm text-text-primary focus:outline-none"
             autoComplete="off"
             value={searchValue}
             onKeyDown={(e) => {
diff --git a/client/src/components/Chat/Input/SkillsCommand.tsx b/client/src/components/Chat/Input/SkillsCommand.tsx
index 9105c780a3..94f4a72a25 100644
--- a/client/src/components/Chat/Input/SkillsCommand.tsx
+++ b/client/src/components/Chat/Input/SkillsCommand.tsx
@@ -295,7 +295,7 @@ function SkillsCommandContent({
         <input
           ref={initInputRef}
           placeholder={localize('com_ui_skills_command_placeholder')}
-          className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200"
+          className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm text-text-primary focus:outline-none"
           autoComplete="off"
           value={searchValue}
           onKeyDown={(e) => {
diff --git a/client/src/components/Chat/Menus/Endpoints/components/GroupIcon.tsx b/client/src/components/Chat/Menus/Endpoints/components/GroupIcon.tsx
index 3c4cb840a4..67cc3d6bf2 100644
--- a/client/src/components/Chat/Menus/Endpoints/components/GroupIcon.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/components/GroupIcon.tsx
@@ -33,7 +33,7 @@ const GroupIcon: React.FC<GroupIconProps> = ({ iconURL, groupName }) => {
         </div>
         {imageError && iconURL && (
           <div
-            className="absolute flex items-center justify-center rounded-full bg-red-500"
+            className="absolute flex items-center justify-center rounded-full bg-surface-destructive"
             style={{ width: '14px', height: '14px', top: 0, right: 0 }}
           >
             <AlertCircle size={10} className="text-white" />
diff --git a/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx b/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx
index 6209414221..2166ed608b 100644
--- a/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx
+++ b/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx
@@ -89,7 +89,7 @@ export default function MemoryArtifacts({ attachments }: { attachments?: TAttach
             className={cn(
               'outline-hidden my-1 flex items-center gap-1 text-sm font-semibold transition-colors',
               hasErrors
-                ? 'text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500'
+                ? 'text-status-error'
                 : 'text-text-secondary-alt hover:text-text-primary',
             )}
             type="button"
diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx
index 014c1a486a..c2fe761577 100644
--- a/client/src/components/Chat/Messages/Content/MessageContent.tsx
+++ b/client/src/components/Chat/Messages/Content/MessageContent.tsx
@@ -28,7 +28,7 @@ const parseThinkingContent = (text: string) => {
 
 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="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
       <div className="absolute">
         <p className="submitting relative">
           <span className="result-thinking" />
@@ -49,7 +49,7 @@ const ErrorBox = ({
     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',
+      'rounded-xl border border-status-error-border bg-status-error-subtle px-3 py-2 text-sm text-text-secondary',
       className,
     )}
   >
diff --git a/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx b/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
index 7221a0f7f0..d5e28ed427 100644
--- a/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
@@ -106,7 +106,7 @@ export default function BashCall({
                 <pre
                   className={cn(
                     'max-h-[300px] overflow-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs',
-                    outputHasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    outputHasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   {output}
diff --git a/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx b/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
index 409461a058..a5be5dae22 100644
--- a/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
 const EmptyTextPart = memo(() => {
   return (
     <div className="text-message 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="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
         <div className="absolute">
           <p className="submitting relative">
             <span className="result-thinking" />
diff --git a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
index c2ab2d575e..da966b7bcd 100644
--- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
@@ -123,7 +123,7 @@ export default function ExecuteCode({
                 <div
                   className={cn(
                     'max-h-[200px] overflow-auto',
-                    outputHasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    outputHasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   <Stdout output={output} />
diff --git a/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx b/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
index ae8b6fe993..f21de77064 100644
--- a/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx
@@ -197,7 +197,7 @@ export default function FileAuthoringCall({
                 <pre
                   className={cn(
                     'max-h-[300px] overflow-auto whitespace-pre-wrap break-words border-t border-border-light px-3 py-2.5 font-mono text-xs',
-                    hasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    hasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   {output}
diff --git a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
index 23f5537e24..7925cd5086 100644
--- a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
@@ -658,7 +658,7 @@ function SubagentPrompt({
           expanded ? 'overflow-visible' : 'max-h-32 overflow-hidden',
         )}
       >
-        <div className="markdown prose prose-sm message-content light dark:prose-invert w-full max-w-none break-words text-text-primary dark:text-gray-100">
+        <div className="markdown prose prose-sm message-content light dark:prose-invert w-full max-w-none break-words text-text-primary">
           <MarkdownLite content={prompt} codeExecution={false} />
         </div>
         {!expanded && (
diff --git a/client/src/components/Chat/Messages/Content/ProgressText.tsx b/client/src/components/Chat/Messages/Content/ProgressText.tsx
index 60a1e651ae..e1e47e9e66 100644
--- a/client/src/components/Chat/Messages/Content/ProgressText.tsx
+++ b/client/src/components/Chat/Messages/Content/ProgressText.tsx
@@ -101,7 +101,7 @@ export default function ProgressText({
         <span className={cn(showShimmer ? 'shimmer' : '', '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-status-error">— {errorSuffix}</span>
         )}
         {hasInput && (
           <ChevronDown
diff --git a/client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx b/client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx
index 5b7130f38e..a057fb3fb8 100644
--- a/client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx
@@ -124,7 +124,7 @@ export default function OutputRenderer({ text }: OutputRendererProps) {
         <pre
           className={cn(
             'max-h-[300px] overflow-auto whitespace-pre-wrap break-words text-xs',
-            error && 'font-mono text-red-600 dark:text-red-400',
+            error && 'font-mono text-status-error',
             !error && structured && 'font-mono text-text-secondary',
             !error && !structured && 'font-sans text-sm text-text-primary',
           )}
@@ -159,7 +159,7 @@ export default function OutputRenderer({ text }: OutputRendererProps) {
         </button>
       )}
       {showErrorDetails && rawError && (
-        <pre className="mt-2 max-h-[200px] overflow-auto whitespace-pre-wrap break-words font-mono text-xs text-red-600 dark:text-red-400">
+        <pre className="mt-2 max-h-[200px] overflow-auto whitespace-pre-wrap break-words font-mono text-xs text-status-error">
           {rawError}
         </pre>
       )}
diff --git a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
index 4de428dc47..816da2575e 100644
--- a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
+++ b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
@@ -18,7 +18,7 @@ export default function MinimalHoverButtons({ message, searchResults }: THoverBu
   });
 
   return (
-    <div className="visible mt-1 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
+    <div className="visible mt-1 flex justify-center gap-1 self-end text-text-tertiary lg:justify-start">
       <button
         className="ml-0 flex items-center gap-1.5 rounded-lg p-1.5 text-xs 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 group-focus-within:opacity-100 group-hover:opacity-100 dark:focus-visible:ring-white [@media(hover:hover)]:opacity-0"
         onClick={() => copyToClipboard(setIsCopied)}