Fix lettered items rendering for nested bullet lists

- Update detection to handle nested bullet lists (- a) format)
- Remove bullet markers from lettered list rendering
- Add manual indentation spaces for lettered items
- Add tests for real nested structure from agent output

Author: brandonkachen

bun.lock

@@ -33,20 +33,20 @@
   },
   "dependencies": {
     "@codebuff/sdk": "workspace:*",
-    "@opentui/core": "0.1.33",
-    "@opentui/react": "0.1.33",
+    "@opentui/core": "0.1.41",
+    "@opentui/react": "0.1.41",
     "@tanstack/react-query": "^5.62.8",
     "commander": "^14.0.1",
     "immer": "^10.1.3",
     "open": "^10.1.0",
     "pino": "9.4.0",
     "posthog-node": "4.17.2",
-    "string-width": "^7.2.0",
     "react": "^19.0.0",
     "react-reconciler": "^0.32.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
+    "string-width": "^7.2.0",
     "unified": "^11.0.0",
     "yoga-layout": "^3.2.1",
     "zod": "^3.24.1",

cli/package.json

@@ -10,8 +10,10 @@ import { useTheme } from '../hooks/use-theme'
 import { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
   renderMarkdown,
+  renderLetteredItemsWithBoxes,
   renderStreamingMarkdown,
   hasMarkdown,
+  hasLetteredItems,
   type MarkdownPalette,
 } from '../utils/markdown-renderer'
 import { BORDER_CHARS } from '../utils/ui-constants'

cli/src/components/message-block.tsx

@@ -6,7 +6,9 @@ import { MessageBlock } from './message-block'
 import { ModeDivider } from './mode-divider'
 import {
   renderMarkdown,
+  renderLetteredItemsWithBoxes,
   hasMarkdown,
+  hasLetteredItems,
   type MarkdownPalette,
 } from '../utils/markdown-renderer'
 import { getDescendantIds, getAncestorIds } from '../utils/message-tree-utils'
@@ -421,9 +423,18 @@ const AgentMessage = memo(
       codeBlockWidth: agentCodeBlockWidth,
       palette: agentPalette,
     }
-    const displayContent = hasMarkdown(rawDisplayContent)
-      ? renderMarkdown(rawDisplayContent, agentMarkdownOptions)
-      : rawDisplayContent
+    const displayContent = useMemo(() => {
+      if (!hasMarkdown(rawDisplayContent)) {
+        return rawDisplayContent
+      }
+
+      // Use box-based renderer for lettered items to get proper wrapping
+      if (hasLetteredItems(rawDisplayContent)) {
+        return renderLetteredItemsWithBoxes(rawDisplayContent, agentMarkdownOptions)
+      }
+
+      return renderMarkdown(rawDisplayContent, agentMarkdownOptions)
+    }, [rawDisplayContent, agentCodeBlockWidth, agentPalette])
 
     const handleTitleClick = (e: any): void => {
       if (e && e.stopPropagation) {
@@ -543,14 +554,19 @@ const AgentMessage = memo(
                   {finishedPreview}
                 </text>
               )}
-              {!isCollapsed && (
-                <text
-                  key={`agent-content-${message.id}`}
-                  style={{ wrapMode: 'word', fg: theme.foreground }}
-                >
-                  {displayContent}
-                </text>
-              )}
+              {!isCollapsed &&
+                (hasLetteredItems(rawDisplayContent) && hasMarkdown(rawDisplayContent) ? (
+                  // Lettered items use box-based rendering - render directly
+                  <box key={`agent-content-${message.id}`}>{displayContent}</box>
+                ) : (
+                  // Normal content - wrap in text
+                  <text
+                    key={`agent-content-${message.id}`}
+                    style={{ wrapMode: 'word', fg: theme.foreground }}
+                  >
+                    {displayContent}
+                  </text>
+                ))}
             </box>
           </box>
         </box>

cli/src/components/message-renderer.tsx

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