# Phase 17: Chat & Planning - Discussion Log

> **Audit trail only.** Do not use as input to planning, research, or execution agents.
> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.

**Date:** 2026-05-17
**Phase:** 17-chat-planning
**Areas discussed:** Chat bubble layout

---

## Chat Bubble Layout

### Bubble Width and Alignment

| Option | Description | Selected |
|--------|-------------|----------|
| Full-width, background only | Own message fills full container width but has a tinted background. Others white/neutral. Simpler layout, no max-width clipping. Matches Slack highlight style. | |
| Constrained bubble, right-aligned | Own message max-width ~70-75%, floated right. Others at full-width or left-constrained. Classic WhatsApp/iMessage style. Requires more CSS. | ✓ |

**User's choice:** Constrained bubble, right-aligned

---

### Bubble Background Colors

| Option | Description | Selected |
|--------|-------------|----------|
| Brand primary tint for own, surface-default for others | Own: var(--color-brand-primary) at low opacity. Others: var(--color-surface-default) (white). Consistent with token palette. | ✓ |
| Brand accent (blue) for own, neutral surface for others | Own: var(--color-brand-accent) (#3b82f6) tint. Others: var(--color-surface-muted). Blue accent, less "brand" than purple. | |

**User's choice:** Brand primary tint (purple) for own, surface-default for others

---

### Author Label and Timestamp Position

| Option | Description | Selected |
|--------|-------------|----------|
| Above bubble, mirrored | Author + timestamp sit above bubble text, aligned to match bubble side. Own: right-aligned meta. Others: left-aligned meta. | ✓ |
| Below bubble, timestamp only | No inline author label. Timestamp shown below bubble. Very compact. | |

**User's choice:** Above bubble, mirrored — author + timestamp above, aligned to bubble side

---

### CSS Approach

| Option | Description | Selected |
|--------|-------------|----------|
| New CSS classes in app.css using design tokens | Add .message-row, .message-own, .message-other, .message-bubble, .message-meta — all using var(--...) tokens. Consistent with Phase 13–16 pattern. | ✓ |
| Inline Tailwind classes in templ | Conditional Tailwind classes directly in DiscussionMessageRow. Simpler to write, but mixes presentation into template and uses hardcoded colors. | |

**User's choice:** New CSS classes in app.css with design tokens

---

## Areas NOT Selected

The user was presented with three gray areas and selected only "Chat bubble layout":
- **Composer + card integration** — not discussed; Claude's discretion (keep composer outside card, as currently)
- **Planning event row layout after date removal** — not discussed; Claude's discretion (row shows TimeRange → Title → TabloTitle + Location)

## Claude's Discretion

- Exact max-width value for own bubbles (70%)
- Border-radius on bubbles (asymmetric: own `0.75rem 0.75rem 0.25rem 0.75rem`, others `0.25rem 0.75rem 0.75rem 0.75rem`)
- Exact opacity for brand-primary tint (10-15%)
- Whether to keep `divide-y` inside the card or drop it now that bubbles have visual weight (recommend drop)
- Composer placement (keep outside card, unchanged)
- Planning day separator visual style (mirror discussion's `DiscussionDaySeparator` — gray strip, centered text)
- Empty state for planning (adopt `@ui.EmptyState(...)` consistent with Phase 16)
- Planning event row restructuring after removing DateLabel

## Deferred Ideas

- Hover-to-reveal timestamp (compact mode)
- Message edit or delete functionality
- Sidebar collapse toggle (JS interaction)
- Mobile-responsive kanban layout
