Refactor: Replace MarkdownRenderer with MarkdownDisplay component

- This commit refactors the Markdown rendering logic within the CLI UI.
  The existing `MarkdownRenderer.tsx` class-based component has been
  replaced with a new functional component `MarkdownDisplay.tsx`.
- The `MarkdownDisplay` component is a React.memoized component for
  improved performance and maintains the same core Markdown parsing
  and rendering capabilities.

packages/cli/src/ui/components/messages/GeminiMessage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { Colors } from '../../colors.js';
 
 interface GeminiMessageProps {
@@ -16,7 +16,6 @@ interface GeminiMessageProps {
 export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
   const prefix = '✦ ';
   const prefixWidth = prefix.length;
-  const renderedBlocks = MarkdownRenderer.render(text);
 
   return (
     <Box flexDirection="row">
@@ -24,7 +23,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
         <Text color={Colors.AccentPurple}>{prefix}</Text>
       </Box>
       <Box flexGrow={1} flexDirection="column">
-        {renderedBlocks}
+        <MarkdownDisplay text={text} />
       </Box>
     </Box>
   );

packages/cli/src/ui/components/messages/GeminiMessageContent.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Box } from 'ink';
-import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 
 interface GeminiMessageContentProps {
   text: string;
@@ -23,11 +23,10 @@ export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
 }) => {
   const originalPrefix = '✦ ';
   const prefixWidth = originalPrefix.length;
-  const renderedBlocks = MarkdownRenderer.render(text);
 
   return (
     <Box flexDirection="column" paddingLeft={prefixWidth}>
-      {renderedBlocks}
+      <MarkdownDisplay text={text} />
     </Box>
   );
 };

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -10,7 +10,7 @@ import Spinner from 'ink-spinner';
 import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
 import { DiffRenderer } from './DiffRenderer.js';
 import { Colors } from '../../colors.js';
-import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 
 export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
   name,
@@ -60,7 +60,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
             {/* Use default text color (white) or gray instead of dimColor */}
             {typeof resultDisplay === 'string' && (
               <Box flexDirection="column">
-                {MarkdownRenderer.render(resultDisplay)}
+                <MarkdownDisplay text={resultDisplay} />
               </Box>
             )}
             {typeof resultDisplay === 'object' && (