3.6 KiB
3.6 KiB
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, others0.25rem 0.75rem 0.75rem 0.75rem) - Exact opacity for brand-primary tint (10-15%)
- Whether to keep
divide-yinside 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