12 UI Layout

12 UI Layout

Source: docs/design/12-ui-layout.md

Visual style (D46)

Simple, flat, Grok Bot–inspired. Focus feedback where the user’s eyes are: composer, stream end, pending approval cards.

Three columns (D34)

Column	Content
Left	Conversation list, avatar menu, search / new
Center	Active chat / project shell
Right	Bot detail — DM only; project teams have no right rail

Project shell (D92)

Two-row top bar: project name + module tabs; overlapping avatar stack; settings button. Project detail opens in the content area. See 41-Project-Team, 33-Narrow-Layout.

Center chat

Message stream, status line (turn + in-progress tasks), task cards, inline setup/setting cards, composer with attachments / voice.

Interaction focus

1. Input area — send gates, recording capsule, attachments
2. Stream end — status line yields when a new message lands
3. Pending cards — approvals, settings, collaboration pause

Outside focus: quieter chrome. Toasts and narrow-layout rules in 33-Narrow-Layout.