OpenQode/implementation_plan_ui.md

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.