Add editable speaker names feature

- Make speaker tags clickable for inline editing
- Add input field styling for speaker name editing
- Preserve user-edited names over LLM detections
- Support titles, job roles, and custom speaker labels
- Enter/Escape key support for editing
- Click-outside-to-save functionality
- Update state management for user-edited speaker names

frontend/app.js

@@ -338,13 +338,13 @@ function renderTranscript() {
     const speakerTag = node.querySelector('.speaker-tag');
     if (typeof utt.speaker === 'number') {
       const speakerId = utt.speaker;
-      const speakerName = state.speakerNames[speakerId]?.name;
-      if (speakerName) {
-        speakerTag.textContent = speakerName;
-      } else {
-        speakerTag.textContent = `Speaker ${speakerId + 1}`;
-      }
+      const speakerInfo = state.speakerNames?.[speakerId];
+      const speakerName = speakerInfo?.name || `Speaker ${speakerId + 1}`;
+      speakerTag.textContent = speakerName;
       speakerTag.classList.remove('hidden');
+      speakerTag.classList.add('editable-speaker');
+      speakerTag.dataset.speakerId = speakerId;
+      speakerTag.title = 'Click to edit speaker name';
     }
 
     fragment.appendChild(node);
@@ -434,9 +434,15 @@ function initAudioInteractions() {
     const editButton = event.target.closest('.edit-btn');
     const saveButton = event.target.closest('.save-edit');
     const cancelButton = event.target.closest('.cancel-edit');
+    const speakerTag = event.target.closest('.editable-speaker');
 
     const index = Number(item.dataset.index);
 
+    if (speakerTag && !speakerTag.querySelector('input')) {
+      startSpeakerEdit(speakerTag);
+      return;
+    }
+
     if (editButton) {
       toggleEdit(item, true);
       return;
@@ -478,6 +484,58 @@ function toggleEdit(item, editing) {
   }
 }
 
+function startSpeakerEdit(speakerTag) {
+  const speakerId = Number(speakerTag.dataset.speakerId);
+  const currentName = speakerTag.textContent;
+
+  // Create input field
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'speaker-edit-input';
+  input.value = currentName;
+  input.dataset.speakerId = speakerId;
+
+  // Replace speaker tag content with input
+  speakerTag.innerHTML = '';
+  speakerTag.appendChild(input);
+  input.focus();
+  input.select();
+
+  // Handle input events
+  const finishEdit = (save = true) => {
+    const newName = input.value.trim();
+    if (save && newName) {
+      // Update state
+      if (!state.speakerNames) state.speakerNames = {};
+      state.speakerNames[speakerId] = {
+        name: newName,
+        confidence: 'user', // Mark as user-edited
+        reason: 'User edited'
+      };
+      speakerTag.textContent = newName;
+    } else {
+      // Restore original name
+      const originalName = state.speakerNames?.[speakerId]?.name || `Speaker ${speakerId + 1}`;
+      speakerTag.textContent = originalName;
+    }
+    speakerTag.classList.add('editable-speaker');
+  };
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      finishEdit(true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      finishEdit(false);
+    }
+  });
+
+  input.addEventListener('blur', () => {
+    finishEdit(true);
+  });
+}
+
 function seekToTime(timeInSeconds) {
   if (!Number.isFinite(timeInSeconds)) return;
   const audio = elements.audioPlayer;
@@ -576,7 +634,19 @@ async function handleSpeakerNameDetection() {
     if (!response.ok) throw new Error('Failed to detect speaker names');
 
     const speakerNames = await response.json();
-    state.speakerNames = speakerNames;
+    
+    // Merge detected names with existing user-edited names (preserve user edits)
+    const mergedNames = { ...speakerNames };
+    if (state.speakerNames) {
+      Object.entries(state.speakerNames).forEach(([speakerId, info]) => {
+        if (info.confidence === 'user') {
+          // Preserve user-edited names
+          mergedNames[speakerId] = info;
+        }
+      });
+    }
+    
+    state.speakerNames = mergedNames;
 
     // Re-render transcript to show detected names
     renderTranscript();

frontend/styles.css

@@ -367,6 +367,33 @@ button:hover {
   background: rgba(129, 140, 248, 0.2);
 }
 
+.editable-speaker {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.editable-speaker:hover {
+  background: rgba(129, 140, 248, 0.3);
+  border-color: rgba(129, 140, 248, 0.5);
+}
+
+.speaker-edit-input {
+  font-size: 0.75rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(30, 41, 59, 0.9);
+  border: 1px solid rgba(129, 140, 248, 0.8);
+  color: #e5e7eb;
+  width: 120px;
+  text-align: center;
+}
+
+.speaker-edit-input:focus {
+  outline: none;
+  border-color: rgba(129, 140, 248, 1);
+}
+
 .utterance-actions {
   margin-left: auto;
   display: flex;