# Ticket 11.8 — RTL Text Support

**Phase**: 11 — UI/UX Polish
**Priority**: Low
**Depends on**: None

## Description

claude-relay sets `dir="auto"` on content elements for proper right-to-left language rendering (Arabic, Hebrew, etc.). conduit has no directional text support — RTL text renders incorrectly with left alignment and wrong punctuation placement.

Add `dir="auto"` to:
- User message text
- Assistant message text content
- Input textarea
- System messages
- Tool result content

This is a minimal change with broad international accessibility impact.

## Acceptance Criteria

### AC1: RTL text in user messages is right-aligned
```gherkin
Given the user sends a message containing Arabic or Hebrew text
When the message is rendered in the chat
Then the text is right-aligned within the message bubble
And punctuation marks appear on the correct (left) side of the text
```

### AC2: RTL text in assistant responses is right-aligned
```gherkin
Given the assistant responds with Arabic or Hebrew text
When the response is rendered in the chat
Then the text is right-aligned within the message container
And punctuation marks appear on the correct (left) side of the text
```

### AC3: The input textarea supports RTL input
```gherkin
Given the user is typing in the input textarea
When they enter Arabic or Hebrew characters
Then the text direction switches to right-to-left
And the cursor position follows RTL conventions
```

### AC4: Mixed LTR/RTL content renders correctly
```gherkin
Given a message contains both English and Arabic text in separate paragraphs
When the message is rendered
Then each paragraph's direction is auto-detected independently
And English paragraphs are left-aligned
And Arabic paragraphs are right-aligned
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| `dir="auto"` on user message container | E2E | UserMessage component's text container has `dir="auto"` attribute |
| `dir="auto"` on assistant message container | E2E | AssistantMessage component's text container has `dir="auto"` attribute |
| `dir="auto"` on input textarea | E2E | The input textarea element has `dir="auto"` attribute |
| RTL text alignment | E2E | Arabic test text renders with `direction: rtl` computed style |

## Reference

- claude-relay RTL: `../claude-relay/lib/public/app.js` (dir="auto" on content elements)
- UserMessage: `conduit/src/lib/public/components/chat/UserMessage.svelte`
- AssistantMessage: `conduit/src/lib/public/components/chat/AssistantMessage.svelte`
- InputArea: `conduit/src/lib/public/components/layout/InputArea.svelte`
