From c44dea3597eb1cd4487c027bf4f3c516ece91fcb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 3 Aug 2026 21:07:42 -0700
Subject: [PATCH] [eric] chat: finished tool rows go neutral, accent only marks
 the row actually running

---
 .../pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx |  5 +++--
 .../AgentChat/tool-bubbles/DefaultToolBubble.tsx      | 11 +++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
index 3866dfe8..606ddbac 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
@@ -96,10 +96,11 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           {!hideVerbLabel && !isWebRow && (
             <Typography
               sx={{
-                color: c.accent.primary,
+                color: isPending ? c.accent.primary : c.text.secondary,
                 fontSize: '0.75rem',
-                fontWeight: 600,
+                fontWeight: isPending ? 600 : 500,
                 flexShrink: 0,
+                transition: 'color 0.25s ease',
               }}
             >
               {serviceLabel}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
index 14816add..1cf56ce7 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
@@ -115,21 +115,24 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
             '&:hover': canToggleDetails ? { bgcolor: 'rgba(0,0,0,0.02)' } : {},
           }}
         >
+          {/* Accent is a LIVE signal only: a finished row goes neutral so a 20-row group reads as calm history, not a wall of orange (open-webui's state language). */}
           {mcpInfo.isMcp && mcpInfo.service
             ? <GoogleServiceIcon service={mcpInfo.service} size={mcpCompact ? 14 : 15} />
             : (() => {
                 const n = toolName.toLowerCase();
+                const p_iconColor = isPending ? c.accent.primary : c.text.tertiary;
                 if (n.includes('search') || n === 'grep' || n === 'glob')
-                  return <SearchIcon sx={{ fontSize: mcpCompact ? 14 : 15, color: c.accent.primary, flexShrink: 0 }} />;
-                return <TerminalIcon sx={{ fontSize: mcpCompact ? 14 : 15, color: c.accent.primary, flexShrink: 0 }} />;
+                  return <SearchIcon sx={{ fontSize: mcpCompact ? 14 : 15, color: p_iconColor, flexShrink: 0 }} />;
+                return <TerminalIcon sx={{ fontSize: mcpCompact ? 14 : 15, color: p_iconColor, flexShrink: 0 }} />;
               })()
           }
           <Typography
             sx={{
-              color: c.accent.primary,
+              color: isPending ? c.accent.primary : c.text.secondary,
               fontSize: mcpCompact ? '0.78rem' : '0.8rem',
-              fontWeight: 600,
+              fontWeight: isPending ? 600 : 500,
               flexShrink: 0,
+              transition: 'color 0.25s ease',
             }}
           >
             {(() => {