fix: dim bold reasoning (gpt5, codex, gemini, etc) (#9)

src/cli/components/InlineMarkdownRenderer.tsx

@@ -4,6 +4,7 @@ import { colors } from "./colors.js";
 
 interface InlineMarkdownProps {
   text: string;
+  dimColor?: boolean;
 }
 
 /**
@@ -11,7 +12,10 @@ interface InlineMarkdownProps {
  * Based on Gemini CLI's approach - NO ANSI codes!
  * Note: dimColor should be handled by parent Text component for proper wrapping
  */
-export const InlineMarkdown: React.FC<InlineMarkdownProps> = ({ text }) => {
+export const InlineMarkdown: React.FC<InlineMarkdownProps> = ({
+  text,
+  dimColor,
+}) => {
   // Early return for plain text without markdown (treat underscores as plain text)
   if (!/[*~`[]/.test(text)) {
     return <>{text}</>;
@@ -43,7 +47,7 @@ export const InlineMarkdown: React.FC<InlineMarkdownProps> = ({ text }) => {
     ) {
       // Bold
       nodes.push(
-        <Text key={key} bold>
+        <Text key={key} bold dimColor={dimColor}>
           {fullMatch.slice(2, -2)}
         </Text>,
       );
@@ -54,7 +58,7 @@ export const InlineMarkdown: React.FC<InlineMarkdownProps> = ({ text }) => {
     ) {
       // Italic
       nodes.push(
-        <Text key={key} italic>
+        <Text key={key} italic dimColor={dimColor}>
           {fullMatch.slice(1, -1)}
         </Text>,
       );
@@ -65,7 +69,7 @@ export const InlineMarkdown: React.FC<InlineMarkdownProps> = ({ text }) => {
     ) {
       // Strikethrough
       nodes.push(
-        <Text key={key} strikethrough>
+        <Text key={key} strikethrough dimColor={dimColor}>
           {fullMatch.slice(2, -2)}
         </Text>,
       );

src/cli/components/MarkdownDisplay.tsx

@@ -86,25 +86,25 @@ export const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({
       if (level === 1) {
         headerElement = (
           <Text bold color={colors.heading.primary}>
-            <InlineMarkdown text={content} />
+            <InlineMarkdown text={content} dimColor={dimColor} />
           </Text>
         );
       } else if (level === 2) {
         headerElement = (
           <Text bold color={colors.heading.secondary}>
-            <InlineMarkdown text={content} />
+            <InlineMarkdown text={content} dimColor={dimColor} />
           </Text>
         );
       } else if (level === 3) {
         headerElement = (
           <Text bold>
-            <InlineMarkdown text={content} />
+            <InlineMarkdown text={content} dimColor={dimColor} />
           </Text>
         );
       } else {
         headerElement = (
           <Text italic>
-            <InlineMarkdown text={content} />
+            <InlineMarkdown text={content} dimColor={dimColor} />
           </Text>
         );
       }
@@ -136,7 +136,7 @@ export const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({
           </Box>
           <Box flexGrow={1}>
             <Text wrap="wrap" dimColor={dimColor}>
-              <InlineMarkdown text={content} />
+              <InlineMarkdown text={content} dimColor={dimColor} />
             </Text>
           </Box>
         </Box>,
@@ -151,7 +151,7 @@ export const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({
         <Box key={key} paddingLeft={2}>
           <Text dimColor>│ </Text>
           <Text wrap="wrap" dimColor={dimColor}>
-            <InlineMarkdown text={blockquoteMatch[1]} />
+            <InlineMarkdown text={blockquoteMatch[1]} dimColor={dimColor} />
           </Text>
         </Box>,
       );
@@ -184,12 +184,12 @@ export const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({
             }
           >
             <Text wrap="wrap" dimColor={dimColor}>
-              <InlineMarkdown text={line} />
+              <InlineMarkdown text={line} dimColor={dimColor} />
             </Text>
           </Transform>
         ) : (
           <Text wrap="wrap" dimColor={dimColor}>
-            <InlineMarkdown text={line} />
+            <InlineMarkdown text={line} dimColor={dimColor} />
           </Text>
         )}
       </Box>,