# Markdown Rendering in Chat

As of this update, both the agent-controller web-app and control-plane chat interfaces now support full markdown rendering for chat messages.

## Supported Markdown Features

### Text Formatting

```markdown
**Bold text**
_Italic text_
~~Strikethrough~~ (via markdown)
```

### Headings

```markdown
# Heading 1

## Heading 2

### Heading 3
```

### Code

Inline: `inline code`

Code blocks:

```javascript
function example() {
  return "code block";
}
```

### Lists

**Unordered:**

```markdown
- Item 1
- Item 2
  - Nested item
```

**Ordered:**

```markdown
1. First
2. Second
3. Third
```

### Blockquotes

```markdown
> This is a quote
> It can span multiple lines
```

### Links

```markdown
[Link text](https://example.com)
```

## Styling

- **Agent messages** (assistant): Use adaptive palette tokens — `bg-background-200`, `text-foreground`, `border-neutral-200`
- **User messages**: Use indigo/primary theme — `bg-primary/25`, `text-foreground`, `border-primary/20`
- **Code blocks**: `bg-background-200` background, `text-primary-600` for inline code, `border-neutral-200` borders
- **All prose**: Semantic HTML with proper spacing and margins

## Implementation Details

### Files Modified

- `packages/agent-controller/web-app/src/pages/ChatPanel.tsx` - MessageBubble and ToolCallCard components
- `packages/control-plane/app/chat/page.tsx` - Chat message rendering

### Library Used

- `react-markdown@^9.0.1` - Parse and render markdown as React components
- Custom component renderers for each markdown element type

## Example Usage

**In chat, an assistant might respond with:**

````markdown
# Summary

Here's what I found:

## Key Points

1. **Data Processing** - The system uses the following pipeline:
   ```python
   data = load_data()
   processed = pipeline.transform(data)
   ```
````

2. **Results** - Key metrics:
   - Accuracy: 94.2%
   - Performance: 1000 req/s
   - Cost: $0.001/req

> Note: These are production benchmarks from last quarter

```

**This will render as formatted HTML** with proper heading sizes, bold text, code highlighting, lists, and quote styling instead of showing raw markdown syntax.
```
