feat(cli): migrate Markdown rendering to remark/unified; remove legacy renderer and update dependencies

This replaces the old markdown renderer (marked/marked-terminal) with a remark/unified-based pipeline. It updates CLI dependencies (remark-parse/unified) and adjusts dev workflow to Bun-based watch mode.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

cli/bun.lock

@@ -0,0 +1,102 @@
+# CLI Package Knowledge
+
+## OpenTUI Text Rendering Constraints
+
+**CRITICAL**: OpenTUI has strict requirements for text rendering that must be followed:
+
+### Text Styling Components Must Be Wrapped in `<text>`
+
+All text styling components (`<strong>`, `<em>`, `<span>`, etc.) **MUST** be nested inside a `<text>` component. They cannot be returned directly from render functions.
+
+**INCORRECT** ❌:
+```tsx
+// This will cause a black screen!
+function renderMarkdown(content: string) {
+  return (
+    <>
+      <strong>Bold text</strong>
+      <em>Italic text</em>
+    </>
+  )
+}
+```
+
+**CORRECT** ✅:
+```tsx
+// All styling must be inside <text>
+function renderMarkdown(content: string) {
+  return (
+    <text wrap>
+      <strong>Bold text</strong>
+      <em>Italic text</em>
+    </text>
+  )
+}
+```
+
+### Why This Matters
+
+- Returning styling components without `<text>` wrapper causes the entire app to render as a black screen
+- No error messages are shown - the app just fails silently
+- This applies to ALL text styling: `<strong>`, `<em>`, `<span>`, `<u>`, etc.
+
+### Available OpenTUI Components
+
+**Core Components**:
+- `<text>` - The fundamental component for displaying all text content
+- `<box>` - Container for layout and grouping
+- `<input>` - Text input field
+- `<select>` - Selection dropdowns
+- `<scrollbox>` - Scrollable container
+- `<tab-select>` - Tab-based navigation
+- `<ascii-font>` - ASCII art text rendering
+
+**Text Modifiers** (must be inside `<text>`):
+- `<span>` - Generic inline styling
+- `<strong>` and `<b>` - Bold text
+- `<em>` and `<i>` - Italic text  
+- `<u>` - Underlined text
+- `<br>` - Line break
+
+### Markdown Rendering Implementation
+
+**SUCCESS**: Rich markdown rendering has been implemented using `unified` + `remark-parse` with OpenTUI components.
+
+**Key Insight**: OpenTUI does **not support nested `<text>` components**. Since `chat.tsx` already wraps content in a `<text>` component, the markdown renderer must return **inline JSX elements only** (no `<text>` wrappers).
+
+**Correct Implementation Pattern**:
+
+```tsx
+// ✅ CORRECT: Return inline elements that go INSIDE the parent <text>
+export function renderMarkdown(markdown: string): ReactNode {
+  const inlineElements = [
+    <strong>Bold text</strong>,
+    ' and ',
+    <em>italic text</em>
+  ]
+  return <>{inlineElements}</>
+}
+
+// In chat.tsx:
+<text wrap>
+  {renderMarkdown(message.content)}
+</text>
+```
+
+**Incorrect Pattern** (causes black screen):
+
+```tsx
+// ❌ WRONG: Returning <text> components creates nested <text>
+export function renderMarkdown(markdown: string): ReactNode {
+  return (
+    <text wrap>
+      <strong>Bold text</strong>
+    </text>
+  )
+}
+```
+
+The implementation uses:
+- `markdownToInline()`: Converts markdown AST to array of inline JSX elements
+- `renderInlineContent()`: Renders inline styling (`<strong>`, `<em>`, `<span>`)
+- Returns a fragment `<>{inlineElements}</>` that can be safely placed inside parent `<text>`

cli/knowledge.md

@@ -15,7 +15,7 @@
     }
   },
   "scripts": {
-    "dev": "bun run src/index.tsx",
+    "dev": "bun run --watch src/index.tsx",
     "build": "bun build src/index.tsx --outdir dist --target node --format esm",
     "start": "bun run dist/index.js",
     "typecheck": "tsc --noEmit -p ."
@@ -26,11 +26,13 @@
   },
   "dependencies": {
     "@opentui/react": "^0.1.25",
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "remark-parse": "^11.0.0",
+    "unified": "^11.0.0"
   },
   "devDependencies": {
-    "@types/node": "22",
     "@types/bun": "^1.2.11",
+    "@types/node": "22",
     "@types/react": "^18.3.12"
   }
 }

cli/package.json

@@ -6,6 +6,7 @@ import {
 } from '@opentui/core'
 import { render, useKeyboard, useRenderer } from '@opentui/react'
 import { MultilineInput } from './multiline-input'
+import { renderMarkdown, hasMarkdown } from './markdown-renderer'
 import {
   Fragment,
   useCallback,
@@ -389,7 +390,9 @@ This approach will improve _performance_ while maintaining **code clarity**.`
                     marginBottom: isAi ? 1 : 0,
                   }}
                 >
-                  {message.content}
+                  {isAi && hasMarkdown(message.content)
+                    ? renderMarkdown(message.content)
+                    : message.content}
                 </text>
               </box>
             </box>