Refactor: Improve console error/log display in CLI (#486)

packages/cli/src/ui/components/DetailedMessagesDisplay.tsx

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { ConsoleMessageItem } from '../types.js';
+
+interface DetailedMessagesDisplayProps {
+  messages: ConsoleMessageItem[];
+  // debugMode is not needed here if App.tsx filters debug messages before passing them.
+  // If DetailedMessagesDisplay should handle filtering, add debugMode prop.
+}
+
+export const DetailedMessagesDisplay: React.FC<
+  DetailedMessagesDisplayProps
+> = ({ messages }) => {
+  if (messages.length === 0) {
+    return null; // Don't render anything if there are no messages
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      marginTop={1}
+      borderStyle="round"
+      borderColor={Colors.SubtleComment}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color={Colors.Foreground}>
+          Debug Console{' '}
+          <Text color={Colors.SubtleComment}>(CTRL-D to close)</Text>
+        </Text>
+      </Box>
+      {messages.map((msg, index) => {
+        let textColor = Colors.Foreground;
+        let icon = '\u2139'; // Information source (ℹ)
+
+        switch (msg.type) {
+          case 'warn':
+            textColor = Colors.AccentYellow;
+            icon = '\u26A0'; // Warning sign (⚠)
+            break;
+          case 'error':
+            textColor = Colors.AccentRed;
+            icon = '\u2716'; // Heavy multiplication x (✖)
+            break;
+          case 'debug':
+            textColor = Colors.SubtleComment; // Or Colors.Gray
+            icon = '\u1F50D'; // Left-pointing magnifying glass (????)
+            break;
+          case 'log':
+          default:
+            // Default textColor and icon are already set
+            break;
+        }
+
+        return (
+          <Box key={index} flexDirection="row">
+            <Text color={textColor}>{icon} </Text>
+            <Text color={textColor} wrap="wrap">
+              {msg.content}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};