# Composure – Persona Chat UI Design

## Core principle

Messages are not bubbles; they are framed speech plates.

Each message is a composition of layered shapes generated from a rectangular content frame. Layout remains simple and deterministic. Visual complexity is handled entirely in decoration.

## Message composition model

Each message is composed of:

1. **Content room** — rectangular frame assigned by parent, contains text and padding
2. **Primary plate** — main speech surface, irregular chamfered polygon
3. **Secondary plate** — offset backing layer for depth and edge complexity
4. **Accent strip** — narrow directional indicator along speaker edge
5. **Directional notch** — edge bite indicating speaker direction
6. **Identity attachment** — avatar with chamfered plate, not a circle

## Shape language

- Angular, not rounded
- Layered, not flat
- Directional, not symmetric
- Authored, not generic

### Shape primitives

| Primitive | Description |
|-----------|-------------|
| Chamfered plate | Rectangular base with clipped corners (M/L/Z, no curves) |
| Notched edge | Inset bite along one side |
| Accent strip | Narrow chamfered bar along speaker edge |
| Offset backing plate | Shifted duplicate shape for depth |
| Group rail | Linear bracket spanning grouped messages |

### Incoming vs outgoing

**Incoming (left):** Larger silhouette, organic asymmetry. Large chamfer top-left, backing offset down-left, accent strip on left edge.

**Outgoing (right):** Tighter, sharper. Large chamfer top-right, backing offset down-right, cleaner profile.

Each message gets a deterministic seed for slight variation in chamfer sizes and notch position.

## Content inset invariant

Text layout is stable regardless of shape. Content has consistent padding. Shape extends beyond content. No text wrapping based on shape.

## Group decoration

Consecutive messages from the same speaker are grouped. The parent group node uses `decorate()` to read child frames and draw a side rail (vertical bracket with terminal ticks) connecting messages. This is parent-owned decoration.

## Validation

This UI proves:
- Layout can remain simple and deterministic
- Visual complexity can be layered independently via SVG
- Decoration reads frames; it does not set frames
- DOM remains semantic (`<article>`, `<p>`, `<section role="log">`)
- Parent-owned layout holds under expressive, non-rectangular visuals