37 lines
1.4 KiB
Markdown
37 lines
1.4 KiB
Markdown
# Pro-Grade UI Implementation Plan
|
|
|
|
## Goal
|
|
Eliminate the "Wall of Text" by introducing a Card/Bubble architecture. Messages should feel distinct, structured, and "Pro".
|
|
|
|
## User Review Required
|
|
> [!IMPORTANT]
|
|
> **Layout Change**: User messages will now align to the RIGHT. AI messages to the LEFT. This is standard in modern chat layouts but a departure from typical CLI tools.
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. New Component: `ChatBubble.mjs`
|
|
- **Location**: `bin/ui/components/ChatBubble.mjs`
|
|
- **Flex Logic**:
|
|
- `User`: `flexDirection: row-reverse`. Text aligns right. Box has Cyan border.
|
|
- `AI`: `flexDirection: row`. Text aligns left. Box has Gray/White border.
|
|
- `System`: Compact, centered or subtle left-border.
|
|
|
|
### 2. Integration: `ViewportMessage` Redesign
|
|
- **File**: `bin/opencode-ink.mjs`
|
|
- **Change**: Replace the current `ViewportMessage` implementation.
|
|
- **Logic**:
|
|
- Instead of `h(Text)`, use `h(ChatBubble, { role, content })`.
|
|
- Pass `width` effectively to ensure bubbles wrap correctly.
|
|
|
|
### 3. "The Ghost Box" (Thinking)
|
|
- **Status**: Already separated (previous task). We will give it a "Glass" look (dimmed, single border).
|
|
|
|
## Verification Plan
|
|
1. **Chat Flow**:
|
|
- Send "Hello". Verify it appears on the Right (Cyan).
|
|
- AI replies. Verify it appears on the Left.
|
|
- Error occurs. Verify it appears as a distinct Red Card.
|
|
2. **Responsiveness**:
|
|
- Resize window. Ensure bubbles resize and don't overlap.
|
|
|