From 80b04dc505bf1c784a54c5d80d971310b05144cc Mon Sep 17 00:00:00 2001 From: Taylor Mullen Date: Tue, 22 Apr 2025 07:48:12 -0400 Subject: Update UI of tool messages - Bring tool messages in line with original envisioned UI of: https://screenshot.googleplex.com/9yZCX636LzpMrgc - In particular this represents more descriptive names. FWIW we already had this tech we just weren't passing around information correctly (`displayName` vs. `name`) - Add gray to our list of color pallete's and removed Background (unused) - Re-enabled representing canceled messages - Migrated back towards a cleaner tool message design of status symbols & border colors vs. overly verbose text. - Removed border from confirmation diffs. Fixes https://b.corp.google.com/issues/412598909 --- .../cli/src/ui/components/messages/ToolGroupMessage.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'packages/cli/src/ui/components/messages/ToolGroupMessage.tsx') diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 448ed4c5..0675411f 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -22,11 +22,18 @@ export const ToolGroupMessage: React.FC = ({ toolCalls, onSubmit, }) => { - const hasPending = toolCalls.some((t) => t.status === ToolCallStatus.Pending); - const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentBlue; + const hasPending = !toolCalls.every( + (t) => t.status === ToolCallStatus.Success, + ); + const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentCyan; return ( - + {toolCalls.map((tool) => (