Initial Release: OpenQode Public Alpha v1.3

implementation_plan_ui.md

@@ -0,0 +1,36 @@
+# 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.
+