tweak: cleanup to markdown renderer

Author: brandonkachen

cli/src/components/message-block.tsx

@@ -97,6 +97,9 @@ interface ContentWithMarkdownProps {
   isStreaming: boolean
   codeBlockWidth: number
   palette: MarkdownPalette
+  textColor?: string
+  textAttributes?: TextAttributes
+  renderWrapper?: (node: ReactNode, info: { isLettered: boolean }) => ReactNode
 }
 
 const ContentWithMarkdown = memo(
@@ -105,15 +108,47 @@ const ContentWithMarkdown = memo(
     isStreaming,
     codeBlockWidth,
     palette,
+    textColor,
+    textAttributes,
+    renderWrapper,
   }: ContentWithMarkdownProps) => {
+    if (!content) {
+      return null
+    }
+
+    const wrap =
+      renderWrapper ??
+      ((node: ReactNode) => {
+        if (node === '' || node === null || node === undefined) {
+          return null
+        }
+        return node
+      })
+
+    const options = {
+      codeBlockWidth,
+      palette,
+      textColor,
+      textAttributes,
+    }
+
+    if (!isStreaming && hasLetteredItems(content)) {
+      return wrap(renderLetteredItemsWithBoxes(content, options), {
+        isLettered: true,
+      })
+    }
+
     if (!hasMarkdown(content)) {
-      return content
+      return wrap(content, { isLettered: false })
     }
-    const options = { codeBlockWidth, palette }
+
     if (isStreaming) {
-      return renderStreamingMarkdown(content, options)
+      return wrap(renderStreamingMarkdown(content, options), {
+        isLettered: false,
+      })
     }
-    return renderMarkdown(content, options)
+
+    return wrap(renderMarkdown(content, options), { isLettered: false })
   },
 )
 
@@ -150,12 +185,22 @@ const PlanBox = memo(
           paddingBottom: 1,
         }}
       >
-        <text style={{ wrapMode: 'word', fg: theme.foreground }}>
-          {renderMarkdown(planContent, {
-            codeBlockWidth: Math.max(10, availableWidth - 8),
-            palette: markdownPalette,
-          })}
-        </text>
+        <ContentWithMarkdown
+          content={planContent}
+          isStreaming={false}
+          codeBlockWidth={Math.max(10, availableWidth - 8)}
+          palette={markdownPalette}
+          textColor={theme.foreground}
+          renderWrapper={(node, { isLettered }) =>
+            isLettered ? (
+              <box style={{ width: '100%' }}>{node}</box>
+            ) : (
+              <text style={{ wrapMode: 'word', fg: theme.foreground }}>
+                {node}
+              </text>
+            )
+          }
+        />
         <BuildModeButtons
           theme={theme}
           onBuildFast={onBuildFast}
@@ -319,33 +364,35 @@ const ToolBranch = memo(
       },
     }
 
-    const displayContent = (
+    const textAttributes =
+      theme.messageTextAttributes && theme.messageTextAttributes !== 0
+        ? theme.messageTextAttributes
+        : undefined
+
+    const renderableDisplayContent = (
       <ContentWithMarkdown
         content={fullContent}
         isStreaming={false}
         codeBlockWidth={agentMarkdownOptions.codeBlockWidth}
         palette={agentMarkdownOptions.palette}
+        textColor={theme.foreground}
+        textAttributes={textAttributes}
+        renderWrapper={(node, { isLettered }) =>
+          isLettered ? (
+            <box style={{ width: '100%' }}>{node}</box>
+          ) : (
+            <text
+              fg={theme.foreground}
+              style={{ wrapMode: 'word' }}
+              attributes={textAttributes}
+            >
+              {node}
+            </text>
+          )
+        }
       />
     )
 
-    const renderableDisplayContent =
-      displayContent === null ||
-      displayContent === undefined ||
-      displayContent === false ||
-      displayContent === '' ? null : (
-        <text
-          fg={theme.foreground}
-          style={{ wrapMode: 'word' }}
-          attributes={
-            theme.messageTextAttributes && theme.messageTextAttributes !== 0
-              ? theme.messageTextAttributes
-              : undefined
-          }
-        >
-          {displayContent}
-        </text>
-      )
-
     const headerName = displayInfo.name
 
     const handleToggle = useCallback(() => {
@@ -539,24 +586,42 @@ const AgentBody = memo(
           const marginBottom = textBlock.marginBottom ?? 0
           const explicitColor = textBlock.color
           const nestedTextColor = explicitColor ?? theme.foreground
+          const marginLeft = Math.max(0, indentLevel * 2)
           nodes.push(
-            <text
+            <ContentWithMarkdown
               key={renderKey}
-              style={{
-                wrapMode: 'word',
-                fg: nestedTextColor,
-                marginLeft: Math.max(0, indentLevel * 2),
-                marginTop,
-                marginBottom,
-              }}
-            >
-              <ContentWithMarkdown
-                content={filteredNestedContent}
-                isStreaming={isNestedStreamingText}
-                codeBlockWidth={markdownOptionsForLevel.codeBlockWidth}
-                palette={markdownOptionsForLevel.palette}
-              />
-            </text>,
+              content={filteredNestedContent}
+              isStreaming={isNestedStreamingText}
+              codeBlockWidth={markdownOptionsForLevel.codeBlockWidth}
+              palette={markdownOptionsForLevel.palette}
+              textColor={nestedTextColor}
+              renderWrapper={(node, { isLettered }) =>
+                isLettered ? (
+                  <box
+                    style={{
+                      marginLeft,
+                      marginTop,
+                      marginBottom,
+                      width: '100%',
+                    }}
+                  >
+                    {node}
+                  </box>
+                ) : (
+                  <text
+                    style={{
+                      wrapMode: 'word',
+                      fg: nestedTextColor,
+                      marginLeft,
+                      marginTop,
+                      marginBottom,
+                    }}
+                  >
+                    {node}
+                  </text>
+                )
+              }
+            />,
           )
           nestedIdx++
           break
@@ -793,19 +858,30 @@ const SimpleContent = memo(
       ? trimTrailingNewlines(content)
       : content.trim()
 
+    const textAttributes = isUser ? TextAttributes.ITALIC : undefined
+
     return (
-      <text
+      <ContentWithMarkdown
         key={`message-content-${messageId}`}
-        style={{ wrapMode: 'word', fg: textColor }}
-        attributes={isUser ? TextAttributes.ITALIC : undefined}
-      >
-        <ContentWithMarkdown
-          content={normalizedContent}
-          isStreaming={isStreamingMessage}
-          codeBlockWidth={codeBlockWidth}
-          palette={palette}
-        />
-      </text>
+        content={normalizedContent}
+        isStreaming={isStreamingMessage}
+        codeBlockWidth={codeBlockWidth}
+        palette={palette}
+        textColor={textColor}
+        textAttributes={textAttributes}
+        renderWrapper={(node, { isLettered }) =>
+          isLettered ? (
+            <box style={{ width: '100%' }}>{node}</box>
+          ) : (
+            <text
+              style={{ wrapMode: 'word', fg: textColor }}
+              attributes={textAttributes}
+            >
+              {node}
+            </text>
+          )
+        }
+      />
     )
   },
 )
@@ -869,24 +945,42 @@ const SingleBlock = memo(
         const marginBottom = textBlock.marginBottom ?? 0
         const explicitColor = textBlock.color
         const blockTextColor = explicitColor ?? textColor
+        const textAttributes = isUser ? TextAttributes.ITALIC : undefined
         return (
-          <text
+          <ContentWithMarkdown
             key={renderKey}
-            style={{
-              wrapMode: 'word',
-              fg: blockTextColor,
-              marginTop,
-              marginBottom,
-            }}
-            attributes={isUser ? TextAttributes.ITALIC : undefined}
-          >
-            <ContentWithMarkdown
-              content={filteredContent}
-              isStreaming={isStreamingText}
-              codeBlockWidth={codeBlockWidth}
-              palette={markdownPalette}
-            />
-          </text>
+            content={filteredContent}
+            isStreaming={isStreamingText}
+            codeBlockWidth={codeBlockWidth}
+            palette={markdownPalette}
+            textColor={blockTextColor}
+            textAttributes={textAttributes}
+            renderWrapper={(node, { isLettered }) =>
+              isLettered ? (
+                <box
+                  style={{
+                    marginTop,
+                    marginBottom,
+                    width: '100%',
+                  }}
+                >
+                  {node}
+                </box>
+              ) : (
+                <text
+                  style={{
+                    wrapMode: 'word',
+                    fg: blockTextColor,
+                    marginTop,
+                    marginBottom,
+                  }}
+                  attributes={textAttributes}
+                >
+                  {node}
+                </text>
+              )
+            }
+          />
         )
       }
 

cli/src/components/message-renderer.tsx

@@ -422,6 +422,7 @@ const AgentMessage = memo(
     const agentMarkdownOptions = {
       codeBlockWidth: agentCodeBlockWidth,
       palette: agentPalette,
+      textColor: theme.foreground,
     }
     const displayContent = useMemo(() => {
       if (!hasMarkdown(rawDisplayContent)) {

cli/src/types/theme-system.ts

@@ -17,6 +17,7 @@ export interface MarkdownThemeOverrides {
   dividerFg?: string
   codeMonochrome?: boolean
   defaultOptionFg?: string
+  bodyTextFg?: string
 }
 
 /**

cli/src/utils/__tests__/markdown-renderer.test.tsx

@@ -957,4 +957,41 @@ c) Third option`
       expect(defaultSpans.length).toBeGreaterThanOrEqual(2)
     })
   })
+
+  describe('ordering and styling', () => {
+    test('keeps trailing paragraphs after lettered sections', () => {
+      const markdown = `1. Decide on rollout strategy:
+   - a) (DEFAULT) Gradual enablement with guardrails
+   - b) Dual-track rollout with feature flags
+
+Please confirm whether you want QA sign-off before deployment.`
+
+      const output = renderLetteredItemsWithBoxes(markdown)
+      const textContent = getAllTextContent(output)
+      expect(textContent).toContain('Please confirm whether you want QA sign-off before deployment.')
+      expect(textContent.indexOf('Please confirm whether you want QA sign-off before deployment.')).toBeGreaterThan(
+        textContent.indexOf('Dual-track rollout'),
+      )
+    })
+
+    test('applies custom text color and attributes', () => {
+      const markdown = `1. Pick next step:
+   - a) Move forward`
+
+      const output = renderLetteredItemsWithBoxes(markdown, {
+        textColor: '#ff0000',
+        textAttributes: TextAttributes.ITALIC,
+      })
+
+      const textElements = findAllElements(
+        output,
+        (el) => el.type === 'text' && el.props.style?.fg === '#ff0000',
+      )
+
+      expect(textElements.length).toBeGreaterThan(0)
+      textElements.forEach((el) => {
+        expect(el.props.attributes).toBe(TextAttributes.ITALIC)
+      })
+    })
+  })
 })