feat: implement user avatars with DiceBear integration

- Add avatar_url field to MemberSettingsUpdate schema
- Create AvatarService for generating default avatars using DiceBear
- Update auth service to generate avatars on user registration
- Add avatar upload UI to settings page
- Update settings endpoint to handle avatar URL updates
- Display current avatar in settings with upload/generate options

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

COMMENT_FIX_SUMMARY.md

@@ -0,0 +1,149 @@
+# Comment Waveform Integration Fix Summary
+
+## Problem Statement
+The comment waveform integration had several issues:
+1. **No timestamps on new comments** - Comments were created without capturing the current playhead position
+2. **Placeholder avatars only** - All waveform markers used generic placeholder icons instead of user avatars
+3. **Poor marker visibility** - Markers were small and hard to see on the waveform
+
+## Root Causes
+1. **Frontend not sending timestamps** - The comment creation mutation only sent the comment body
+2. **Missing avatar data** - The API schema and frontend interface didn't include author avatar URLs
+3. **Suboptimal marker styling** - Markers lacked visual distinction and proper sizing
+
+## Changes Made
+
+### 1. API Schema Enhancement
+**File**: `api/src/rehearsalhub/schemas/comment.py`
+- Added `author_avatar_url: str | None` field to `SongCommentRead` schema
+- Updated `from_model` method to extract avatar URL from author relationship
+
+### 2. Frontend Interface Update
+**File**: `web/src/pages/SongPage.tsx`
+- Added `author_avatar_url: string | null` to `SongComment` interface
+
+### 3. Comment Creation Fix
+**File**: `web/src/pages/SongPage.tsx`
+- Modified `addCommentMutation` to accept `{ body: string; timestamp: number }`
+- Updated button click handler to pass `currentTime` from waveform hook
+- Now captures exact playhead position when comment is created
+
+### 4. Avatar Display Implementation
+**File**: `web/src/pages/SongPage.tsx`
+- Changed marker icon from hardcoded placeholder to `comment.author_avatar_url || placeholder`
+- Falls back to placeholder when no avatar is available
+
+### 5. Marker Styling Improvements
+**File**: `web/src/hooks/useWaveform.ts`
+- Increased marker size from 20px to 24px
+- Added white border for better visibility on dark waveforms
+- Added subtle shadow for depth
+- Improved icon styling with proper object-fit
+- Fixed CSS syntax (removed trailing spaces)
+
+## Technical Details
+
+### API Schema Change
+```python
+# Before
+class SongCommentRead(BaseModel):
+    id: uuid.UUID
+    song_id: uuid.UUID
+    body: str
+    author_id: uuid.UUID
+    author_name: str
+    timestamp: float | None
+    created_at: datetime
+
+# After
+class SongCommentRead(BaseModel):
+    id: uuid.UUID
+    song_id: uuid.UUID
+    body: str
+    author_id: uuid.UUID
+    author_name: str
+    author_avatar_url: str | None  # ← Added
+    timestamp: float | None
+    created_at: datetime
+```
+
+### Frontend Mutation Change
+```typescript
+// Before
+const addCommentMutation = useMutation({
+  mutationFn: (body: string) => api.post(`/songs/${songId}/comments`, { body }),
+  // ...
+});
+
+// After
+const addCommentMutation = useMutation({
+  mutationFn: ({ body, timestamp }: { body: string; timestamp: number }) => 
+    api.post(`/songs/${songId}/comments`, { body, timestamp }),
+  // ...
+});
+```
+
+### Marker Creation Change
+```typescript
+// Before
+icon: "https://via.placeholder.com/20",
+
+// After
+icon: comment.author_avatar_url || "https://via.placeholder.com/20",
+```
+
+## Verification Steps
+
+### 1. Timestamp Capture
+✅ Play song to specific position (e.g., 1:30)
+✅ Add comment while playing
+✅ Verify timestamp appears in comment
+✅ Check marker position on waveform matches playhead position
+
+### 2. Avatar Display
+✅ Create comments with different users
+✅ Verify user avatars appear in waveform markers
+✅ Confirm placeholder used when no avatar available
+
+### 3. Marker Interaction
+✅ Click waveform marker
+✅ Verify comment section scrolls to correct comment
+✅ Check temporary highlighting works
+
+### 4. Visual Improvements
+✅ Markers are larger and more visible
+✅ White border provides contrast
+✅ Shadow adds depth perception
+
+## Database Considerations
+
+The timestamp column should already exist in the database from migration `0004_rehearsal_sessions.py`:
+```python
+op.add_column("song_comments", sa.Column("timestamp", sa.Float(), nullable=True))
+```
+
+If comments fail to create with timestamps:
+1. Verify migration is applied: `SELECT column_name FROM information_schema.columns WHERE table_name='song_comments';`
+2. If missing, run: `ALTER TABLE song_comments ADD COLUMN timestamp FLOAT;`
+
+## Backward Compatibility
+
+- Existing comments without timestamps will continue to work
+- Markers only created for comments with valid timestamps
+- Placeholder avatars used when no user avatar available
+- No breaking changes to existing functionality
+
+## Performance Impact
+
+- Minimal: Only adds one additional field to API responses
+- Marker creation remains efficient with proper cleanup
+- No additional database queries required
+
+## Future Enhancements
+
+Potential improvements for future iterations:
+1. Add tooltip showing comment author name on marker hover
+2. Implement different marker colors for different users
+3. Add animation when new markers are created
+4. Support for editing comment timestamps
+5. Batch marker creation optimization