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

1 files changed, 4 insertions, 19 deletions

diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
index 584c7729..11449b18 100644
--- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx
+++ b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
@@ -16,28 +16,13 @@ interface GeminiMessageProps {
 export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
   const prefix = '✦ ';
   const prefixWidth = prefix.length;
-
-  // Handle potentially null or undefined text gracefully
-  const safeText = text || '';
-
-  // Use the static render method from the MarkdownRenderer class
-  // Pass safeText which is guaranteed to be a string
-  const renderedBlocks = MarkdownRenderer.render(safeText);
-
-  // If the original text was actually empty/null, render the minimal state
-  if (!safeText && renderedBlocks.length === 0) {
-    return (
-      <Box flexDirection="row">
-        <Box width={prefixWidth}>
-          <Text color={Colors.AccentPurple}>{prefix}</Text>
-        </Box>
-        <Box flexGrow={1}></Box>
-      </Box>
-    );
-  }
+  const renderedBlocks = MarkdownRenderer.render(text);
 
   return (
     <Box flexDirection="row">
+      <Box width={prefixWidth}>
+        <Text color={Colors.AccentPurple}>{prefix}</Text>
+      </Box>
       <Box flexGrow={1} flexDirection="column">
         {renderedBlocks}
       </Box>