feat: fix journal save, add session edit UI, journal @mentions, audio attachments

- Fix journal save bug: TipTap bundle reference was window.Chronicle._tiptapBundle
  (nonexistent) instead of window.TipTap, causing editor to always use fallback mode
- Add session edit modal with pre-populated fields (name, date, summary, status,
  recurrence) using existing PUT API endpoint
- Add @mentions to journal editor: MentionLink mark + MentionExtension lifecycle
  wiring for entity search and tooltip cards
- Sprint V-5: Audio attachments for journal notes
  - New note_attachments table (migration 000005)
  - AttachmentRepository + AttachmentService + REST handlers
  - Media service extended with audio MIME types and magic bytes validation
  - Journal UI: upload button, inline audio players, transcript editing

https://claude.ai/code/session_01JmHn8AGZVkKPAvHDgR67Hu

Author: claude

.ai/status.md

@@ -8,6 +8,15 @@
 <!-- ====================================================================== -->
 
 ## Last Updated
+2026-03-11 -- **Sprint V-5: Journal fixes, session edit, @mentions, audio attachments.**
+
+29. **Journal + Sessions + Audio Attachments sprint.** Four changes:
+    - **Journal save bug fix**: `journal.js` referenced `window.Chronicle._tiptapBundle` which doesn't exist — the TipTap bundle is `window.TipTap`. Fixed the reference so TipTap editor loads correctly and notes save.
+    - **Session edit UI**: Added edit button + modal on session detail page. Pre-populates all fields (name, date, summary, status, recurrence). Submits JSON PUT to existing `UpdateSessionAPI` endpoint. Visible to Scribe+ users.
+    - **Journal @mentions**: Added `MentionLink` mark and `MentionExtension` lifecycle wiring to journal's TipTap editor. Users can type `@` to search and link entities with tooltip cards, matching the main entity editor's behavior.
+    - **Audio attachments (Sprint V-5)**: New `note_attachments` table (migration 000005). Full backend: `AttachmentRepository` + `AttachmentService` + REST handlers (list/upload/delete/transcript). Media service extended with audio MIME types (mp3/ogg/wav/webm) and magic bytes validation, with `sanitizeImage()` guarded to skip audio files. Journal UI: microphone upload button, inline `<audio>` players, collapsible transcript textarea per attachment, delete support.
+
+### Previous Update
 2026-03-11 -- **Sprint W-0.5: Visual Customization + Admin DB Explorer (IN PROGRESS).**
 
 28. **Customization Hub & Features page bug fixes.** Five issues resolved:

.ai/todo.md

@@ -204,7 +204,7 @@ _Quick capture, backlinks, enhanced graph, editor power-ups. See `.ai/obsidian-n
 - [x] **Full-Page Journal & Category Nav Redesign** — Full-page journal view at `/campaigns/:id/journal` with two-panel Obsidian-like layout (note tree sidebar + TipTap editor, search, folder tabs, autosave). Journal link in sidebar nav (gated on notes addon). Notes FAB hidden on journal page to avoid sync conflicts. Removed "Session Journal" topbar button. Redesigned sidebar drill panel: merged header + action bar into compact clickable row (category name opens full page, replacing "View All"), count as pill badge, inline "+" button. Entity tree: folder/page icons, guide lines, smooth transitions, distinct reorder vs reparent D&D feedback.
 - [x] **Sprint V-3: Content Templates** — `content_templates` table, ContentTemplateService with CRUD + seeding, REST API, template picker on entity create form (loads by entity type), "Insert Template" slash command in editor, 4 default templates (Session Recap, NPC Profile, Location, Quest Log) seeded on campaign creation, Customization Hub "Content Templates" tab for management.
 - [ ] **Sprint V-4: Enhanced Graph View & Cover Images** — @mention links in graph, entity type/tag filtering, local graph (N hops), clustering, orphan detection. Cover/banner image layout block type for entity pages.
-- [ ] **Sprint V-5: Session Journal Audio Attachments** — Audio file upload support in Session Journal notes. Users can attach audio recordings (voice memos, session recordings, ambient tracks) to session notes. Privacy controls: share audio with session participants (public to group) or keep private (visible only to uploader). Media plugin integration for storage/serving. Allowed MIME types: audio/mpeg, audio/ogg, audio/wav, audio/webm. Inline audio player in note view. Migration for audio attachment metadata.
+- [x] **Sprint V-5: Session Journal Audio Attachments** — `note_attachments` table (migration 000005), `AttachmentRepository` + `AttachmentService` + REST handlers (list/upload/delete/transcript). Media service extended with audio MIME types (mp3/ogg/wav/webm) and magic bytes validation; `sanitizeImage()` guarded to skip audio. Journal UI: microphone upload button in toolbar, inline `<audio>` players per attachment, collapsible editable transcript textarea, delete support. Also fixed: journal save bug (`_tiptapBundle` → `window.TipTap`), added @mentions (MentionLink + MentionExtension) to journal editor, added session edit modal UI.
 
 ### Phase W: Polish, Ecosystem & Delight
 

db/migrations/000005_note_attachments.down.sql

@@ -0,0 +1 @@
+DROP TABLE IF EXISTS note_attachments;

db/migrations/000005_note_attachments.up.sql

@@ -0,0 +1,20 @@
+-- Note attachments for audio files and transcripts (Sprint V-5).
+CREATE TABLE IF NOT EXISTS note_attachments (
+    id            CHAR(26) NOT NULL,
+    note_id       CHAR(26) NOT NULL,
+    campaign_id   CHAR(26) NOT NULL,
+    file_path     VARCHAR(512) NOT NULL,
+    original_name VARCHAR(255) NOT NULL,
+    mime_type     VARCHAR(100) NOT NULL,
+    file_size     BIGINT NOT NULL DEFAULT 0,
+    duration_secs INT DEFAULT NULL,
+    transcript    LONGTEXT DEFAULT NULL,
+    created_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+
+    PRIMARY KEY (id),
+    INDEX idx_note_attachments_note (note_id),
+    INDEX idx_note_attachments_campaign (campaign_id),
+
+    CONSTRAINT fk_note_attachments_note FOREIGN KEY (note_id) REFERENCES notes(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

internal/app/routes.go

@@ -983,8 +983,11 @@ func (a *App) RegisterRoutes() {
 
 	// Notes widget: personal floating note-taking panel (Google Keep-style).
 	noteRepo := notes.NewNoteRepository(a.DB)
-	noteService := notes.NewNoteService(noteRepo)
-	noteHandler := notes.NewHandler(noteService)
+	attRepo := notes.NewAttachmentRepository(a.DB)
+	noteSvc := notes.NewNoteServiceWithAttachments(noteRepo, attRepo)
+	noteHandler := notes.NewHandler(noteSvc)
+	noteHandler.SetAttachmentService(noteSvc)
+	noteHandler.SetMediaUploader(&mediaUploadAdapter{svc: mediaService})
 	noteHandler.SetMemberLister(campaignService)
 	notes.RegisterRoutes(e, noteHandler, campaignService, authService)
 
@@ -1467,3 +1470,25 @@ func (a *App) RegisterRoutes() {
 	// REST API v1 is registered above via syncapi.RegisterAPIRoutes().
 	// Endpoints: /api/v1/campaigns/:id/{entity-types,entities,sync}
 }
+
+// mediaUploadAdapter adapts MediaService to the notes.MediaUploader interface.
+type mediaUploadAdapter struct {
+	svc media.MediaService
+}
+
+// UploadRaw stores a file via the media service and returns the relative path.
+func (a *mediaUploadAdapter) UploadRaw(ctx context.Context, campaignID, userID string, fileBytes []byte, originalName, mimeType string) (string, error) {
+	file, err := a.svc.Upload(ctx, media.UploadInput{
+		CampaignID:   campaignID,
+		UploadedBy:   userID,
+		OriginalName: originalName,
+		MimeType:     mimeType,
+		FileSize:     int64(len(fileBytes)),
+		UsageType:    "attachment",
+		FileBytes:    fileBytes,
+	})
+	if err != nil {
+		return "", err
+	}
+	return file.Filename, nil
+}

internal/plugins/media/model.go

@@ -56,6 +56,11 @@ var AllowedMimeTypes = map[string]bool{
 	"image/png":  true,
 	"image/webp": true,
 	"image/gif":  true,
+	// Audio types for note attachments.
+	"audio/mpeg": true,
+	"audio/ogg":  true,
+	"audio/wav":  true,
+	"audio/webm": true,
 }
 
 // MimeToExtension maps MIME types to file extensions.
@@ -64,6 +69,10 @@ var MimeToExtension = map[string]string{
 	"image/png":  ".png",
 	"image/webp": ".webp",
 	"image/gif":  ".gif",
+	"audio/mpeg": ".mp3",
+	"audio/ogg":  ".ogg",
+	"audio/wav":  ".wav",
+	"audio/webm": ".webm",
 }
 
 // IsImage returns true if the file is an image based on MIME type.

internal/plugins/media/service.go

@@ -13,6 +13,7 @@ import (
 	"log/slog"
 	"os"
 	"path/filepath"
+	"strings"
 	"sync"
 	"syscall"
 	"time"
@@ -176,16 +177,19 @@ func (s *mediaService) Upload(ctx context.Context, input UploadInput) (*MediaFil
 		return nil, apperror.NewBadRequest("file content does not match declared type")
 	}
 
-	// Re-encode the image to strip ALL metadata (EXIF, IPTC, XMP) and
+	// Re-encode images to strip ALL metadata (EXIF, IPTC, XMP) and
 	// destroy any polyglot payloads. The decode-then-encode pipeline
 	// produces a clean file containing only pixel data (CDR approach).
-	sanitizedBytes, effectiveMime, err := sanitizeImage(input.FileBytes, input.MimeType)
-	if err != nil {
-		return nil, apperror.NewBadRequest("image sanitization failed: " + err.Error())
+	// Audio files are stored as-is (no re-encoding needed).
+	if strings.HasPrefix(input.MimeType, "image/") {
+		sanitizedBytes, effectiveMime, err := sanitizeImage(input.FileBytes, input.MimeType)
+		if err != nil {
+			return nil, apperror.NewBadRequest("image sanitization failed: " + err.Error())
+		}
+		input.FileBytes = sanitizedBytes
+		input.FileSize = int64(len(sanitizedBytes))
+		input.MimeType = effectiveMime
 	}
-	input.FileBytes = sanitizedBytes
-	input.FileSize = int64(len(sanitizedBytes))
-	input.MimeType = effectiveMime
 
 	// Generate UUID filename in date-based directory.
 	id := generateUUID()
@@ -571,8 +575,7 @@ func (s *mediaService) generateThumbnail(data []byte, dir, id, ext string, maxDi
 }
 
 // validateMagicBytes checks that the file content's magic bytes match the
-// declared MIME type. Prevents uploading non-image files with a spoofed
-// Content-Type header.
+// declared MIME type. Prevents uploading files with a spoofed Content-Type header.
 func validateMagicBytes(data []byte, declaredMIME string) bool {
 	if len(data) < 4 {
 		return false
@@ -588,6 +591,17 @@ func validateMagicBytes(data []byte, declaredMIME string) bool {
 		return len(data) >= 6 && string(data[:3]) == "GIF"
 	case "image/webp":
 		return len(data) >= 12 && string(data[:4]) == "RIFF" && string(data[8:12]) == "WEBP"
+	// Audio formats.
+	case "audio/mpeg":
+		// MP3: starts with 0xFF 0xFB/0xF3/0xF2 (frame sync) or "ID3" (ID3 tag).
+		return (data[0] == 0xFF && (data[1]&0xE0) == 0xE0) || string(data[:3]) == "ID3"
+	case "audio/ogg":
+		return string(data[:4]) == "OggS"
+	case "audio/wav":
+		return len(data) >= 12 && string(data[:4]) == "RIFF" && string(data[8:12]) == "WAVE"
+	case "audio/webm":
+		// WebM uses Matroska container: starts with EBML header 0x1A45DFA3.
+		return len(data) >= 4 && data[0] == 0x1A && data[1] == 0x45 && data[2] == 0xDF && data[3] == 0xA3
 	default:
 		return false
 	}

internal/plugins/sessions/sessions.templ

@@ -238,6 +238,13 @@ templ SessionDetailPage(cc *campaigns.CampaignContext, session *Session, csrfTok
 				</div>
 				if isScribe {
 					<div class="flex items-center gap-2">
+						<button
+							type="button"
+							class="btn-secondary text-sm"
+							onclick="document.getElementById('edit-session-modal').showModal()"
+						>
+							<i class="fa-solid fa-pen mr-1"></i> Edit
+						</button>
 						if session.Status == StatusPlanned {
 							<button
 								type="button"
@@ -381,10 +388,148 @@ templ SessionDetailPage(cc *campaigns.CampaignContext, session *Session, csrfTok
 					}
 				</div>
 			</div>
+			if isScribe {
+				@editSessionModal(cc, session, csrfToken)
+			}
 		</div>
 	}
 }
 
+// editSessionModal renders the edit session dialog.
+templ editSessionModal(cc *campaigns.CampaignContext, session *Session, csrfToken string) {
+	<dialog id="edit-session-modal" class="rounded-lg shadow-xl bg-surface border border-edge p-0 w-full max-w-md backdrop:bg-black/50">
+		<div class="p-6">
+			<h2 class="text-lg font-semibold text-fg mb-4">Edit Session</h2>
+			<div class="space-y-4" x-data={ fmt.Sprintf("{ recurring: %t, recType: '%s' }", session.IsRecurring, derefStr(session.RecurrenceType)) }>
+				<div>
+					<label class="block text-sm font-medium text-fg-body mb-1">Session Name</label>
+					<input type="text" id="edit-session-name" class="input w-full" required value={ session.Name }/>
+				</div>
+				<div>
+					<label class="block text-sm font-medium text-fg-body mb-1">Scheduled Date</label>
+					<input type="date" id="edit-session-date" class="input w-full" value={ derefStr(session.ScheduledDate) }/>
+				</div>
+				<div>
+					<label class="block text-sm font-medium text-fg-body mb-1">Summary</label>
+					<textarea id="edit-session-summary" class="input w-full" rows="3">{ derefStr(session.Summary) }</textarea>
+				</div>
+				<div>
+					<label class="block text-sm font-medium text-fg-body mb-1">Status</label>
+					<select id="edit-session-status" class="input w-full text-sm" data-initial={ session.Status }>
+						<option value="planned">Planned</option>
+						<option value="completed">Completed</option>
+						<option value="cancelled">Cancelled</option>
+					</select>
+				</div>
+				<!-- Recurrence -->
+				<div>
+					<label class="flex items-center gap-2 text-sm font-medium text-fg-body cursor-pointer">
+						<input
+							type="checkbox"
+							id="edit-session-recurring"
+							x-model="recurring"
+							class="accent-accent"
+							if session.IsRecurring {
+								checked
+							}
+						/>
+						Repeating session
+					</label>
+				</div>
+				<div x-show="recurring" x-transition x-cloak class="space-y-3 pl-4 border-l-2 border-accent/30">
+					<div>
+						<label class="block text-xs font-medium text-fg-body mb-1">Frequency</label>
+						<select id="edit-session-recurrence-type" x-model="recType" class="input w-full text-sm">
+							<option value="">Select...</option>
+							<option value="weekly">Every week</option>
+							<option value="biweekly">Every 2 weeks</option>
+							<option value="monthly">Monthly</option>
+							<option value="custom">Custom interval</option>
+						</select>
+					</div>
+					<div x-show="recType === 'custom'" x-transition>
+						<label class="block text-xs font-medium text-fg-body mb-1">Every N weeks</label>
+						<input type="number" id="edit-session-recurrence-interval" min="1" max="52" class="input w-24 text-sm" value={ fmt.Sprintf("%d", session.RecurrenceInterval) }/>
+					</div>
+					<div>
+						<label class="block text-xs font-medium text-fg-body mb-1">End date (optional)</label>
+						<input type="date" id="edit-session-recurrence-end" class="input w-full text-sm" value={ derefStr(session.RecurrenceEndDate) }/>
+					</div>
+				</div>
+			</div>
+			<div class="flex items-center justify-end gap-2 mt-6">
+				<button type="button" class="btn-secondary text-sm" onclick="this.closest('dialog').close()">
+					Cancel
+				</button>
+				<button type="button" class="btn-primary text-sm" id="edit-session-save-btn">
+					<i class="fa-solid fa-check mr-1"></i> Save Changes
+				</button>
+			</div>
+		</div>
+		<script>
+			(function() {
+				// Set initial select value from data attribute.
+				var statusSelect = document.getElementById('edit-session-status');
+				if (statusSelect && statusSelect.dataset.initial) {
+					statusSelect.value = statusSelect.dataset.initial;
+				}
+				var btn = document.getElementById('edit-session-save-btn');
+				if (!btn) return;
+				btn.addEventListener('click', function() {
+					var name = document.getElementById('edit-session-name').value.trim();
+					if (!name) {
+						Chronicle.notify('Session name is required', 'error');
+						return;
+					}
+					var summary = document.getElementById('edit-session-summary').value;
+					var date = document.getElementById('edit-session-date').value;
+					var status = document.getElementById('edit-session-status').value;
+					var recurring = document.getElementById('edit-session-recurring').checked;
+					var recType = document.getElementById('edit-session-recurrence-type');
+					var recInterval = document.getElementById('edit-session-recurrence-interval');
+					var recEnd = document.getElementById('edit-session-recurrence-end');
+
+					var body = {
+						name: name,
+						summary: summary || null,
+						scheduled_date: date || null,
+						status: status,
+						is_recurring: recurring
+					};
+					if (recurring && recType) {
+						body.recurrence_type = recType.value || null;
+						body.recurrence_interval = recInterval ? parseInt(recInterval.value) || 0 : 0;
+						body.recurrence_end_date = recEnd ? (recEnd.value || null) : null;
+					}
+
+					btn.disabled = true;
+					btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-xs mr-1"></i> Saving...';
+
+					Chronicle.apiFetch(location.pathname, {
+						method: 'PUT',
+						body: body
+					}).then(function(res) {
+						if (res.ok) {
+							location.reload();
+						} else {
+							res.json().then(function(d) {
+								Chronicle.notify(d.error || 'Failed to update session', 'error');
+							}).catch(function() {
+								Chronicle.notify('Failed to update session', 'error');
+							});
+						}
+					}).catch(function() {
+						Chronicle.notify('Failed to update session', 'error');
+					}).finally(function() {
+						btn.disabled = false;
+						btn.innerHTML = '<i class="fa-solid fa-check mr-1"></i> Save Changes';
+					});
+				});
+			})();
+		</script>
+	</dialog>
+}
+
 // AttendeeList renders the RSVP attendee list with action buttons.
 templ AttendeeList(cc *campaigns.CampaignContext, sessionID string, attendees []Attendee, csrfToken string, currentUserID string) {
 	if len(attendees) == 0 {