From 5e4e7d395520833d9aef8729efa1d3ca419185b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Mon, 6 Apr 2026 23:13:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20soften=20error=20indicators=20in=20tool?=
 =?UTF-8?q?=20call=20groups=20=E2=80=94=20icon=20instead=20of=20red=20badg?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace "ERROR" text badge with material error icon (less visually jarring)
- Add "pending" icon when tool results haven't been matched yet
- Remove red border on error groups — all groups now use the same neutral border
- Single tool call ERROR badge also changed to icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 desktop/src/components/chat/ToolCallBlock.tsx |  4 +---
 desktop/src/components/chat/ToolCallGroup.tsx | 15 ++++++---------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/desktop/src/components/chat/ToolCallBlock.tsx b/desktop/src/components/chat/ToolCallBlock.tsx
index c826b2a0..0db2fe50 100644
--- a/desktop/src/components/chat/ToolCallBlock.tsx
+++ b/desktop/src/components/chat/ToolCallBlock.tsx
@@ -71,9 +71,7 @@ export function ToolCallBlock({ toolName, input, result, compact = false }: Prop
           </span>
         )}
         {result?.isError && (
-          <span className="shrink-0 rounded-full bg-[var(--color-error-container)] px-1.5 py-0.5 text-[9px] font-bold text-[var(--color-error)]">
-            ERROR
-          </span>
+          <span className="material-symbols-outlined shrink-0 text-[14px] text-[var(--color-error)]">error</span>
         )}
         {expandable && (
           <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">
diff --git a/desktop/src/components/chat/ToolCallGroup.tsx b/desktop/src/components/chat/ToolCallGroup.tsx
index e9fca8d3..f942b48d 100644
--- a/desktop/src/components/chat/ToolCallGroup.tsx
+++ b/desktop/src/components/chat/ToolCallGroup.tsx
@@ -75,11 +75,7 @@ function ToolCallGroupMulti({ toolCalls, resultMap, isStreaming }: Props) {
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className={`flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors ${
-          errorPresent
-            ? 'border border-[var(--color-error)]/20 bg-[var(--color-error-container)]/30 hover:bg-[var(--color-error-container)]/50'
-            : 'border border-[var(--color-border)]/40 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-container-high)]'
-        }`}
+        className="flex w-full items-center gap-2 rounded-lg border border-[var(--color-border)]/40 bg-[var(--color-surface-container-low)] px-3 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-container-high)]"
       >
         <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">
           {expanded ? 'expand_less' : 'expand_more'}
@@ -90,10 +86,11 @@ function ToolCallGroupMulti({ toolCalls, resultMap, isStreaming }: Props) {
         {!isStreaming && allComplete && !errorPresent && (
           <span className="material-symbols-outlined text-[14px] text-[var(--color-success)]">check_circle</span>
         )}
-        {errorPresent && (
-          <span className="rounded-full bg-[var(--color-error-container)] px-2 py-0.5 text-[9px] font-bold uppercase text-[var(--color-error)]">
-            ERROR
-          </span>
+        {!isStreaming && errorPresent && (
+          <span className="material-symbols-outlined text-[14px] text-[var(--color-error)]">error</span>
+        )}
+        {!isStreaming && !allComplete && !errorPresent && (
+          <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">pending</span>
         )}
         {isStreaming && (
           <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-brand)] animate-pulse-dot" />