Improve review editing, evidence navigation, comments, and change history

app.py

@@ -230,7 +230,7 @@ def api_get_files():
         total_reviews = (
             db.session.query(Review)
             .join(Assignment)
-            .filter(Assignment.file_id == f.id, Review.status.in_(('accept', 'reject')))
+            .filter(Assignment.file_id == f.id, Review.status.in_(('complete', 'accept', 'reject')))
             .count()
         )
         total_assignees = Assignment.query.filter_by(file_id=f.id).count()
@@ -333,10 +333,9 @@ def api_submit_review():
     data = request.get_json()
     assignment_id = data.get('assignment_id')
     sample_index = data.get('sample_index')
-    status = data.get('status')  # 'accept' or 'reject'
-    comment = data.get('comment', '')
+    status = data.get('status')  # 'complete'; old accept/reject rows remain readable
 
-    if not assignment_id or sample_index is None or status not in ('accept', 'reject'):
+    if not assignment_id or sample_index is None or status != 'complete':
         return jsonify({'error': 'assignment_id, sample_index, and valid status required'}), 400
 
     assignment = Assignment.query.get(assignment_id)
@@ -351,14 +350,13 @@ def api_submit_review():
 
     if review:
         review.status = status
-        review.comment = comment
         review.reviewed_at = datetime.now(timezone.utc)
     else:
         review = Review(
             assignment_id=assignment_id,
             sample_index=sample_index,
             status=status,
-            comment=comment,
+            comment='',
         )
         db.session.add(review)
 
@@ -376,7 +374,7 @@ def api_save_annotations():
     sample_index = data.get('sample_index')
     annotations = data.get('annotations')  # dict: {emotion, distortions, empathy, case_formulation}
 
-    if not assignment_id or sample_index is None or annotations is None:
+    if not assignment_id or sample_index is None or not isinstance(annotations, dict):
         return jsonify({'error': 'assignment_id, sample_index, and annotations required'}), 400
 
     assignment = Assignment.query.get(assignment_id)
@@ -397,12 +395,11 @@ def api_save_annotations():
         except (TypeError, _json.JSONDecodeError):
             pass
 
-    # An already-open page using an older frontend may save without the new
-    # field. Do not silently erase a previously edited 5P formulation.
-    if (isinstance(annotations, dict) and 'case_formulation' not in annotations
-            and isinstance(previous_annotations, dict)
-            and 'case_formulation' in previous_annotations):
-        annotations['case_formulation'] = previous_annotations['case_formulation']
+    # Older open tabs may not know newer fields. Preserve existing edits.
+    if isinstance(previous_annotations, dict):
+        for field in ('case_formulation', 'review_notes'):
+            if field not in annotations and field in previous_annotations:
+                annotations[field] = previous_annotations[field]
     annotations_json = _json.dumps(
         annotations, ensure_ascii=False, sort_keys=True, separators=(',', ':')
     )
@@ -410,6 +407,8 @@ def api_save_annotations():
     if review:
         review.annotations_edit = annotations_json
         review.reviewed_at = datetime.now(timezone.utc)
+        if previous_annotations != annotations and review.status != 'pending':
+            review.status = 'pending'
     else:
         # Create a minimal review record to hold the annotation edits
         review = Review(
@@ -512,6 +511,7 @@ def api_export(assignment_id):
             'Distortions': anno.get('distortions'),
             'Empathy_Level': anno.get('empathy'),
             'Case_Formulation_5P': anno.get('case_formulation'),
+            'review_notes': anno.get('review_notes') or {},
             'review_status': review.status if review else 'pending',
             'review_comment': review.comment if review else '',
             'is_edited': bool(review and review.annotations_edit),
@@ -522,7 +522,7 @@ def api_export(assignment_id):
         writer = csv.writer(output)
         writer.writerow([
             'sample_id', 'sample_index', 'review_focus_rank', 'conversation_cut', 'emotion_type', 'problem_type',
-            'Emotion', 'Distortions', 'Empathy_Level', 'Case_Formulation_5P',
+            'Emotion', 'Distortions', 'Empathy_Level', 'Case_Formulation_5P', 'review_notes',
             'review_status', 'review_comment', 'is_edited'
         ])
         for r in export_rows:
@@ -532,6 +532,7 @@ def api_export(assignment_id):
                 _json.dumps(r['Distortions'], ensure_ascii=False) if r['Distortions'] else '',
                 _json.dumps(r['Empathy_Level'], ensure_ascii=False) if r['Empathy_Level'] else '',
                 _json.dumps(r['Case_Formulation_5P'], ensure_ascii=False) if r['Case_Formulation_5P'] else '',
+                _json.dumps(r['review_notes'], ensure_ascii=False) if r['review_notes'] else '',
                 r['review_status'], r['review_comment'], r['is_edited'],
             ])
         resp = app.response_class(

models.py

@@ -66,7 +66,7 @@ class Assignment(db.Model):
     def to_dict(self):
         reviewed_count = Review.query.filter(
             Review.assignment_id == self.id,
-            Review.status.in_(('accept', 'reject')),
+            Review.status.in_(('complete', 'accept', 'reject')),
         ).count()
         total = self.csv_file.total_samples if self.csv_file else 0
         return {
@@ -88,8 +88,8 @@ class Review(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     assignment_id = db.Column(db.Integer, db.ForeignKey('assignments.id'), nullable=False)
     sample_index = db.Column(db.Integer, nullable=False)
-    status = db.Column(db.String(20), nullable=False)  # 'pending', 'accept', or 'reject'
-    comment = db.Column(db.Text, default='')
+    status = db.Column(db.String(20), nullable=False)  # 'pending', 'complete'; legacy accept/reject remain readable
+    comment = db.Column(db.Text, default='')  # Legacy overall review comment
     # JSON string storing annotator-edited annotation data, including case formulation.
     annotations_edit = db.Column(db.Text, default=None)
     reviewed_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))

static/admin.css

@@ -275,49 +275,7 @@
 
 /* Review controls on review page */
 .review-card { border-color: rgba(88,166,255,.3); }
-.review-buttons {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.review-btn {
-  flex: 1;
-  padding: 10px;
-  border: 2px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  font-size: .85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all .15s;
-  font-family: inherit;
-}
-.accept-btn { color: var(--text-muted); }
-.accept-btn:hover, .accept-btn.active {
-  border-color: #34d399;
-  background: rgba(52,211,153,.1);
-  color: #34d399;
-}
-.reject-btn { color: var(--text-muted); }
-.reject-btn:hover, .reject-btn.active {
-  border-color: #f87171;
-  background: rgba(248,113,113,.1);
-  color: #f87171;
-}
-.review-comment {
-  width: 100%;
-  padding: 10px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-primary);
-  font-size: .8rem;
-  font-family: inherit;
-  resize: vertical;
-  outline: none;
-  margin-bottom: 10px;
-}
-.review-comment:focus { border-color: var(--accent); }
+.review-help { margin: 0 0 10px; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
 .submit-review-btn {
   width: 100%;
   padding: 10px;
@@ -340,8 +298,7 @@
   font-size: .72rem;
   font-weight: 700;
 }
-.review-status-accept { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
-.review-status-reject { background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
+.review-status-complete { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
 .review-status-pending { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
 
 /* Sample list review status dots */
@@ -351,8 +308,7 @@
   display: inline-block;
   margin-left: 4px;
 }
-.dot-accept { background: #34d399; }
-.dot-reject { background: #f87171; }
+.dot-complete { background: #34d399; }
 .dot-pending { background: var(--border); }
 
 /* ===== Edit Mode Styles ===== */
@@ -371,6 +327,19 @@
 }
 .edit-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
 .edit-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.1); }
+.edit-toggle-btn:disabled { opacity: .45; cursor: not-allowed; }
+.edit-cancel-btn {
+  padding: 3px 9px;
+  border: 1px solid rgba(248,113,113,.4);
+  border-radius: var(--radius-sm);
+  background: rgba(248,113,113,.08);
+  color: #f87171;
+  font-size: .72rem;
+  font-family: inherit;
+  cursor: pointer;
+}
+.edit-cancel-btn:hover { background: rgba(248,113,113,.18); }
+.edit-cancel-btn[hidden], .restore-field-btn[hidden] { display: none; }
 
 /* ===== Annotation History ===== */
 .history-modal {
@@ -463,6 +432,30 @@
 .history-field + .history-field { margin-top: 7px; }
 .history-field-label { color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
 .history-reasoning { margin-top: 3px; color: var(--text-secondary); white-space: pre-wrap; }
+.history-change-count { margin-bottom: 10px; color: #fbbf24; font-size: .76rem; font-weight: 700; }
+.history-change { padding: 9px 0; border-top: 1px solid var(--border); }
+.history-change-label { margin-bottom: 6px; color: var(--text-primary); font-size: .76rem; font-weight: 700; }
+.history-change-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
+.history-before, .history-after {
+  min-width: 0;
+  padding: 8px 9px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  background: var(--bg-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.history-before span, .history-after span {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--text-muted);
+  font-size: .63rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.history-before del { color: #fda4af; background: rgba(248,113,113,.2); }
+.history-after ins { color: #a7f3d0; background: rgba(52,211,153,.2); text-decoration: none; }
+.history-no-change { color: var(--text-muted); font-style: italic; }
 .history-json { margin-top: 8px; }
 .history-json summary { color: var(--text-muted); cursor: pointer; font-size: .7rem; }
 .history-json pre {
@@ -481,6 +474,7 @@
   .history-modal { padding: 10px; }
   .history-dialog { max-height: 94vh; }
   .history-content { padding: 14px; }
+  .history-change-values { grid-template-columns: 1fr; }
 }
 
 .edited-badge {
@@ -509,6 +503,24 @@
 input.edit-field { padding: 5px 9px; }
 textarea.edit-field { padding: 6px 9px; resize: vertical; }
 select.edit-field { padding: 5px 9px; }
+.restore-field-btn, .clear-field-btn {
+  padding: 3px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: .67rem;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.restore-field-btn { margin-top: 4px; }
+.edit-row .restore-field-btn { margin-top: 0; }
+.clear-field-btn { color: #fbbf24; border-color: rgba(251,191,36,.3); }
+.restore-field-btn:hover, .clear-field-btn:hover { border-color: var(--accent); color: var(--accent); }
+.edit-row .edit-field { min-width: 0; }
+.review-note-input { margin-top: 2px; }
+.review-summary-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
 
 .edit-row {
   display: flex; align-items: center; gap: 6px;

static/app.js

@@ -1,11 +1,17 @@
 // ===== State =====
 let allData=[], filteredData=[], currentIndex=0;
-let assignmentId=null, reviewsMap={}, currentReviewStatus=null;
+let assignmentId=null, reviewsMap={};
 let editMode={emotion:false, distortions:false, empathy:false, caseFormulation:false};
 let editData={emotion:null, distortions:null, empathy:null, caseFormulation:null}; // working copies
+let editNotes={emotion:null, distortions:null, empathy:null, caseFormulation:null};
+let editSummaryNotes={distortions:'',empathy:''};
+let editBaselines={emotion:null, distortions:null, empathy:null, caseFormulation:null};
+let editOrigins=new WeakMap(); // Saved field/comment values, keyed by each editable item
 let selectingEvidence=null; // {card, itemIdx}
+let evidenceStatusTimer=null;
 let annotationSaveInProgress=false;
 let focusOnly=false;
+let lastFilterQuery='';
 function currentSampleIndex(){return filteredData[currentIndex]?.sample_index ?? currentIndex;}
 function orderForReview(rows){
   return [...rows].sort((a,b)=>{
@@ -34,15 +40,16 @@ const DISTORTION_OPTS=[
 
 // ===== Helpers =====
 function safeJSON(s){try{return JSON.parse(s);}catch(e){return null;}}
-function escA(s){return (s||'').replace(/"/g,'"').replace(/'/g,''');}
-function escH(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+function escA(s){return String(s??'').replace(/"/g,'&quot;').replace(/'/g,'&#39;');}
+function escH(s){return String(s??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 function escAttr(s){return escA(escH(String(s||'')));}
 function parseAnno(row){
   return {
     emotion:safeJSON(row['Emotion']),
     distortions:safeJSON(row['Distortions']),
     empathy:safeJSON(row['Empathy_Level']),
-    case_formulation:safeJSON(row['Case_Formulation_5P'])
+    case_formulation:safeJSON(row['Case_Formulation_5P']),
+    review_notes:{}
   };
 }
 function getEffectiveAnno(row){
@@ -71,6 +78,120 @@ function displayEmotion(row){
 }
 function scoreColor(s,m=7){const r=s/m;return r>=.7?'#34d399':r>=.4?'#fbbf24':'#f87171';}
 function deepCopy(o){return JSON.parse(JSON.stringify(o));}
+function sameValue(a,b){
+  if(a===b)return true;
+  if(!a||!b||typeof a!=='object'||typeof b!=='object'||Array.isArray(a)!==Array.isArray(b))return false;
+  const ak=Object.keys(a),bk=Object.keys(b);
+  return ak.length===bk.length&&ak.every(key=>Object.hasOwn(b,key)&&sameValue(a[key],b[key]));
+}
+function isReviewed(review){return ['complete','accept','reject'].includes(review?.status);}
+function activeEditCard(){return Object.keys(editMode).find(card=>editMode[card])||null;}
+const EDIT_BUTTON_IDS={emotion:'editEmotionBtn',distortions:'editDistBtn',empathy:'editEmpBtn',caseFormulation:'editCaseFormulationBtn'};
+function syncEditButtons(){
+  const active=activeEditCard();
+  Object.entries(EDIT_BUTTON_IDS).forEach(([card,id])=>{
+    const button=document.getElementById(id);
+    const cancel=document.querySelector(`[data-cancel-card="${card}"]`);
+    button.classList.toggle('active',editMode[card]);
+    button.textContent=editMode[card]?'✓ Save':'✏️ Edit';
+    button.disabled=!filteredData.length||annotationSaveInProgress||Boolean(active&&active!==card);
+    cancel.hidden=!editMode[card];
+    cancel.disabled=annotationSaveInProgress;
+  });
+  const complete=document.getElementById('submitReviewBtn');
+  if(complete&&active)complete.disabled=true;
+}
+function confirmLeaveEdit(){
+  if(annotationSaveInProgress)return false;
+  const card=activeEditCard();
+  if(!card)return true;
+  const baseline=editBaselines[card];
+  if(baseline&&sameValue(editData[card],baseline.data)&&sameValue(editNotes[card],baseline.notes)
+     &&(baseline.summary??'')===(editSummaryNotes[card]??''))return true;
+  return window.confirm('Discard unsaved changes in the current edit?');
+}
+function noteFor(anno,card,key){
+  const value=anno.review_notes?.[card==='caseFormulation'?'case_formulation':card];
+  return key===undefined ? (typeof value==='string'?value:'') : (value?.[key]||'');
+}
+function noteHtml(note){
+  return note?`<div class="saved-review-note"><span>Reviewer comment</span>${escH(note)}</div>`:'';
+}
+function changeTag(changed){return changed?'<span class="change-tag">Changed</span>':'';}
+
+function rememberEditOrigins(card){
+  if(card==='emotion'){
+    editOrigins.set(editData.emotion,{value:deepCopy(editData.emotion),comment:editNotes.emotion});
+  }else if(card==='caseFormulation'){
+    CASE_5P_FACTORS.forEach(factor=>{
+      editData.caseFormulation[factor.key] ||= {};
+      const item=editData.caseFormulation[factor.key];
+      editOrigins.set(item,{value:deepCopy(item),comment:editNotes.caseFormulation[factor.key]||''});
+    });
+  }else{
+    editData[card].forEach((item,i)=>{
+      editOrigins.set(item,{value:deepCopy(item),comment:editNotes[card][i]||''});
+    });
+  }
+}
+function editObjectForInput(card,input){
+  if(card==='emotion')return editData.emotion;
+  if(card==='caseFormulation')return editData.caseFormulation?.[input.dataset.caseKey];
+  if(card==='distortions')return editData.distortions?.[Number(input.dataset.dIdx)];
+  return editData.empathy?.[Number(input.dataset.eIdx)];
+}
+function initialFieldValue(card,input){
+  if(input.dataset.reviewSummary)return editBaselines[card]?.summary??'';
+  const origin=editOrigins.get(editObjectForInput(card,input));
+  if(!origin)return undefined;
+  if(input.dataset.reviewNote)return origin.comment;
+  const field=card==='emotion'
+    ? {'ee-term':'specific_emotion_term','ee-compound':'compound_emotion',
+       'ee-std-reason':'standard_reasoning','ee-app-reason':'appraisal_reasoning'}[input.id]
+    : card==='distortions'
+      ? {name:'cognitive_distortion',quote:'evidence_quote',reason:'reasoning',
+         reframe:'reframe_response','reframe-reason':'reframe_reasoning'}[input.dataset.dField]
+      : card==='empathy'
+        ? {name:'dimension_name',quote:'evidence_quote',reason:'reasoning'}[input.dataset.eField]
+        : input.dataset.caseField;
+  if(!field)return undefined;
+  if(card==='emotion'&&field==='standard_reasoning')
+    return origin.value.standard_reasoning||origin.value.reasoning||'';
+  return origin.value[field]??'';
+}
+function addRestoreButtons(container,card){
+  container.querySelectorAll('input.edit-field:not([readonly]), textarea.edit-field').forEach(input=>{
+    const original=initialFieldValue(card,input);
+    if(original===undefined)return;
+    const button=document.createElement('button');
+    button.type='button';
+    button.className='restore-field-btn';
+    button.textContent='↶ Restore';
+    button.title='Restore the value saved before this edit';
+    const update=()=>{button.hidden=input.value===String(original);};
+    input.addEventListener('input',update);
+    button.addEventListener('click',()=>{
+      input.value=String(original);
+      input.dispatchEvent(new Event('input',{bubbles:true}));
+      input.focus();
+    });
+    input.insertAdjacentElement('afterend',button);
+    if(input.dataset.dField==='quote'||input.dataset.eField==='quote'||input.dataset.caseField==='evidence_quote'){
+      const clear=document.createElement('button');
+      clear.type='button';
+      clear.className='clear-field-btn';
+      clear.textContent='Clear';
+      clear.title='Clear the current evidence quote before selecting another';
+      clear.addEventListener('click',()=>{
+        input.value='';
+        input.dispatchEvent(new Event('input',{bubbles:true}));
+        input.focus();
+      });
+      input.insertAdjacentElement('afterend',clear);
+    }
+    update();
+  });
+}
 
 // ===== Conversation parsing & highlights =====
 function parseConv(s){
@@ -170,15 +291,53 @@ function buildQuotes(anno){
     if(dim.evidence_quote&&dim.evidence_quote!=='No evidence present')
       quotes.push({quote:dim.evidence_quote,cls:`emp-hl-${i%9}`,type:'emp',idx:i});
   });
+  CASE_5P_FACTORS.forEach((factor,i)=>{
+    const quote=anno.case_formulation?.[factor.key]?.evidence_quote;
+    if(quote&&quote!=='N/A'&&quote!=='No evidence present')
+      quotes.push({quote,cls:`case-hl-${i}`,type:'case',idx:factor.key});
+  });
   return quotes;
 }
-function scrollToEvidence(type,idx){
-  const m=document.querySelector(`.conversation-view mark.evidence-hl[data-type="${type}"][data-idx="${idx}"]`);
-  if(!m)return;
-  document.querySelectorAll('mark.evidence-pulse').forEach(x=>x.classList.remove('evidence-pulse'));
-  m.scrollIntoView({behavior:'smooth',block:'center'});
-  m.classList.add('evidence-pulse');
-  setTimeout(()=>m.classList.remove('evidence-pulse'),2000);
+function quoteCandidates(quote){
+  const clean=quote.replace(/^(listener|speaker):\s*/i,'').trim();
+  const fragments=clean.split(/\n+|\.{3,}|…|;|\|/).map(part=>part.trim())
+    .filter(part=>part.length>=12&&part.split(/\s+/).length>=3);
+  return [...new Set([clean,...fragments])].filter(Boolean);
+}
+function showEvidenceStatus(message){
+  const status=document.getElementById('evidenceStatus');
+  if(!status)return;
+  status.textContent=message;
+  status.hidden=!message;
+  clearTimeout(evidenceStatusTimer);
+  if(message)evidenceStatusTimer=setTimeout(()=>{status.hidden=true;},4500);
+}
+function scrollToEvidence(type,idx,quote=''){
+  let target=document.querySelector(`.conversation-view mark.evidence-hl[data-type="${type}"][data-idx="${idx}"]`);
+  if(!target&&quote){
+    const role= /^(listener|speaker):\s*/i.exec(quote)?.[1]?.toLowerCase();
+    const messages=parseConv(filteredData[currentIndex]?.conversation_cut||'');
+    const candidates=quoteCandidates(quote);
+    let messageIndex=-1,matched='';
+    for(const restrictRole of [true,false]){
+      for(const candidate of candidates){
+        messageIndex=messages.findIndex(msg=>(!restrictRole||!role||msg.role===role)&&findEvidenceRange(msg.text,candidate));
+        if(messageIndex!==-1){matched=candidate;break;}
+      }
+      if(messageIndex!==-1)break;
+    }
+    const bubble=document.querySelectorAll('.conversation-view .message-bubble')[messageIndex];
+    if(bubble){
+      target=[...bubble.querySelectorAll('mark.evidence-hl')]
+        .find(mark=>findEvidenceRange(mark.textContent,matched))||bubble;
+    }
+  }
+  if(!target){showEvidenceStatus('This evidence quote could not be located in the conversation.');return;}
+  showEvidenceStatus('');
+  document.querySelectorAll('.evidence-pulse').forEach(x=>x.classList.remove('evidence-pulse'));
+  target.scrollIntoView({behavior:'smooth',block:'center'});
+  target.classList.add('evidence-pulse');
+  setTimeout(()=>target.classList.remove('evidence-pulse'),2000);
 }
 
 // ===== Render: Conversation =====
@@ -203,9 +362,9 @@ function renderConvHeader(row){
     <span class="sample-id-badge" title="Stable sample ID">${escH(row.sample_id||'')}</span>
     ${row.review_focus_rank?`<span class="focus-review-badge" title="Reviewed in the previous CSV; annotations here are from the revised version">Re-review ${row.review_focus_rank}/${allData.filter(r=>r.review_focus_rank).length}</span>`:''}
     <span class="meta-badge ${emotionCls(en)}">${escH(en)}</span>
-    ${ei?`<span class="intensity-badge ${intCls}">${ei}</span>`:''}
-    ${row.problem_type?`<span class="problem-badge">${row.problem_type}</span>`:''}
-    ${row.experience_type?`<span class="experience-badge">${row.experience_type}</span>`:''}`;
+    ${ei?`<span class="intensity-badge ${intCls}">${escH(ei)}</span>`:''}
+    ${row.problem_type?`<span class="problem-badge">${escH(row.problem_type)}</span>`:''}
+    ${row.experience_type?`<span class="experience-badge">${escH(row.experience_type)}</span>`:''}`;
 }
 
 // ===== Tooltip =====
@@ -227,7 +386,7 @@ function showTooltip(mk,anno){
   } else if(type==='emp'){
     const i=itemIndex;
     const dim=(anno.empathy?.empathy_dimensions||[])[i];
-    if(dim){const c=EMP_COLORS[i%EMP_COLORS.length],sc=scoreColor(dim.score||0);html=`<div class="tooltip-title" style="color:${c}">💡 ${dim.dimension_name}</div><div class="tooltip-label">Score</div><span class="tooltip-score" style="background:${sc}22;color:${sc};border:1px solid ${sc}44">${dim.score}/7</span><div class="tooltip-label">Reasoning</div><div class="tooltip-text">${dim.reasoning||'—'}</div>`;}
+    if(dim){const c=EMP_COLORS[i%EMP_COLORS.length],sc=scoreColor(dim.score||0);html=`<div class="tooltip-title" style="color:${c}">💡 ${escH(dim.dimension_name||'Dimension')}</div><div class="tooltip-label">Score</div><span class="tooltip-score" style="background:${sc}22;color:${sc};border:1px solid ${sc}44">${escH(dim.score)}/7</span><div class="tooltip-label">Reasoning</div><div class="tooltip-text">${escH(dim.reasoning||'—')}</div>`;}
   }
   if(!html)return;
   const tip=document.getElementById('tooltip');
@@ -250,10 +409,8 @@ function renderEmotion(row){
   const emotionsMatch=predictedEmotion!=='—' &&
     predictedEmotion.trim().toLowerCase()===goldEmotion.trim().toLowerCase();
   const el=document.getElementById('emotionContent');
-  const hasEdit=!!(reviewsMap[row.sample_index]?.annotations_edit);
-  const btn=document.getElementById('editEmotionBtn');
-  btn.classList.toggle('active',editMode.emotion);
-  btn.textContent=editMode.emotion?'✓ Done':'✏️ Edit';
+  const originalEmotion=parseAnno(row).emotion||{};
+  const changed=!sameValue(e,parseAnno(row).emotion)||Boolean(noteFor(anno,'emotion'));
 
   if(editMode.emotion){
     const d=editData.emotion;
@@ -262,25 +419,26 @@ function renderEmotion(row){
     const appReason = d?.appraisal_reasoning || '';
     el.innerHTML=`
       <div class="edit-group"><div class="edit-label">Gold Emotion</div>
-        <input class="edit-field" value="${escA(goldEmotion)}" readonly/></div>
+        <input class="edit-field" value="${escAttr(goldEmotion)}" readonly/></div>
       <div class="edit-group"><div class="edit-label">LLM Predicted Emotion</div>
-        <input class="edit-field" value="${escA(predictedEmotion)}" readonly/></div>
+        <input class="edit-field" value="${escAttr(predictedEmotion)}" readonly/></div>
       <div class="edit-group"><div class="edit-label">Intensity</div>
         <select class="edit-field" id="ee-intensity">
           ${INTENSITY_OPTS.map(o=>`<option value="${o}"${(d?.intensity||'').toLowerCase()===o.toLowerCase()?' selected':''}>${o}</option>`).join('')}
         </select></div>
       <div class="edit-group"><div class="edit-label">Specific Term</div>
-        <input class="edit-field" id="ee-term" value="${escA(d?.specific_emotion_term||'')}"/></div>
+        <input class="edit-field" id="ee-term" value="${escAttr(d?.specific_emotion_term||'')}"/></div>
       <div class="edit-group"><div class="edit-label">Compound Emotion</div>
-        <input class="edit-field" id="ee-compound" value="${escA(d?.compound_emotion||'')}" placeholder="None"/></div>
+        <input class="edit-field" id="ee-compound" value="${escAttr(d?.compound_emotion||'')}" placeholder="None"/></div>
       <div class="edit-group"><div class="edit-label">Standard Reasoning</div>
         <textarea class="edit-field" id="ee-std-reason" rows="3">${escH(stdReason)}</textarea></div>
       <div class="edit-group"><div class="edit-label">Appraisal Reasoning</div>
-        <textarea class="edit-field" id="ee-app-reason" rows="5">${escH(appReason)}</textarea></div>`;
+        <textarea class="edit-field" id="ee-app-reason" rows="5">${escH(appReason)}</textarea></div>
+      <div class="edit-group"><div class="edit-label">Review comment (why this change?)</div>
+        <textarea class="edit-field review-note-input" data-review-note="emotion" rows="2" placeholder="Explain changes to the emotion annotation...">${escH(editNotes.emotion||'')}</textarea></div>`;
     ['ee-intensity','ee-term','ee-compound','ee-std-reason','ee-app-reason'].forEach(id=>{
       document.getElementById(id)?.addEventListener('input',()=>{
-        editData.emotion={
-          ...editData.emotion,
+        Object.assign(editData.emotion,{
           // Preserve the read-only LLM prediction when saving other emotion edits.
           primary_emotion:editData.emotion?.primary_emotion || d?.primary_emotion || '',
           intensity:document.getElementById('ee-intensity').value,
@@ -288,9 +446,13 @@ function renderEmotion(row){
           compound_emotion:document.getElementById('ee-compound').value,
           standard_reasoning:document.getElementById('ee-std-reason').value,
           appraisal_reasoning:document.getElementById('ee-app-reason').value,
-        };
+        });
       });
     });
+    el.querySelector('[data-review-note="emotion"]').addEventListener('input',event=>{
+      editNotes.emotion=event.target.value;
+    });
+    addRestoreButtons(el,'emotion');
   } else {
     if(!e){
       el.innerHTML=`<div class="emotion-comparison">
@@ -327,18 +489,19 @@ function renderEmotion(row){
           ${emotionsMatch?'✓ Match':'≠ Different'}
         </span>
         <span class="intensity-badge ${intCls}">${escH(e.intensity||'—')}</span>
-        ${hasEdit?'<span class="edited-badge">Edited</span>':''}
+        ${changeTag(changed)}
       </div>
-      ${e.specific_emotion_term?`<p class="specific-term">Term: <span>${escH(e.specific_emotion_term)}</span></p>`:''}
-      ${e.compound_emotion!==undefined?`<p class="compound-emotion">Compound emotion: <span>${escH(e.compound_emotion||'None')}</span></p>`:''}
-      ${stdR?`<div class="emotion-reasoning-block">
+      ${e.specific_emotion_term?`<p class="specific-term ${!sameValue(e.specific_emotion_term,originalEmotion.specific_emotion_term)?'changed-field':''}">Term: <span>${escH(e.specific_emotion_term)}</span></p>`:''}
+      ${e.compound_emotion!==undefined?`<p class="compound-emotion ${!sameValue(e.compound_emotion,originalEmotion.compound_emotion)?'changed-field':''}">Compound emotion: <span>${escH(e.compound_emotion||'None')}</span></p>`:''}
+      ${stdR?`<div class="emotion-reasoning-block ${!sameValue(stdR,originalEmotion.standard_reasoning||originalEmotion.reasoning||'')?'changed-field':''}">
         <div class="reasoning-label">Standard Reasoning</div>
         <p class="emotion-reasoning">${escH(stdR)}</p>
       </div>`:''}
-      ${appR?`<div class="emotion-reasoning-block" style="margin-top:8px">
+      ${appR?`<div class="emotion-reasoning-block ${!sameValue(appR,originalEmotion.appraisal_reasoning||'')?'changed-field':''}" style="margin-top:8px">
         <div class="reasoning-label">Appraisal Reasoning</div>
         <p class="emotion-reasoning" style="border-left-color:var(--accent)">${escH(appR)}</p>
-      </div>`:''}`;
+      </div>`:''}
+      ${noteHtml(noteFor(anno,'emotion'))}`;
   }
 }
 
@@ -347,10 +510,7 @@ function renderDistortions(row){
   const anno=getEffectiveAnno(row);
   const el=document.getElementById('distortionsContent');
   const dists=editMode.distortions ? editData.distortions : (anno.distortions?.distortions||[]);
-  const hasEdit=!!(reviewsMap[row.sample_index]?.annotations_edit);
-  const btn=document.getElementById('editDistBtn');
-  btn.classList.toggle('active',editMode.distortions);
-  btn.textContent=editMode.distortions?'✓ Done':'✏️ Edit';
+  const originalDists=parseAnno(row).distortions?.distortions||[];
 
   if(editMode.distortions){
     if(!dists.length){
@@ -364,13 +524,13 @@ function renderDistortions(row){
             <select class="edit-field" data-d-field="name" data-d-idx="${i}" style="flex:1">
               <option value="" disabled ${!d.cognitive_distortion?'selected':''}>Select Distortion...</option>
               ${DISTORTION_OPTS.map(o=>`<option value="${o}" ${d.cognitive_distortion===o?'selected':''}>${o}</option>`).join('')}
-              <option value="${escA(d.cognitive_distortion||'')}" ${!DISTORTION_OPTS.includes(d.cognitive_distortion||'')&&d.cognitive_distortion?'selected':''} hidden>${escA(d.cognitive_distortion||'Custom')}</option>
+              <option value="${escAttr(d.cognitive_distortion||'')}" ${!DISTORTION_OPTS.includes(d.cognitive_distortion||'')&&d.cognitive_distortion?'selected':''} hidden>${escH(d.cognitive_distortion||'Custom')}</option>
             </select>
             <button class="remove-item-btn" data-remove-dist="${i}">✕</button>
           </div>
           <div class="edit-label" style="margin-top:6px">Evidence Quote</div>
           <div class="edit-row">
-            <input class="edit-field" data-d-field="quote" data-d-idx="${i}" value="${escA(d.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
+            <input class="edit-field" data-d-field="quote" data-d-idx="${i}" value="${escAttr(d.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
             <button class="select-evidence-btn" data-sel-card="distortions" data-sel-idx="${i}">📌 Select</button>
           </div>
           <div class="edit-label" style="margin-top:6px">Reasoning</div>
@@ -379,10 +539,14 @@ function renderDistortions(row){
           <textarea class="edit-field" data-d-field="reframe" data-d-idx="${i}" rows="3" placeholder="A balanced, supportive alternative response...">${escH(d.reframe_response||'')}</textarea>
           <div class="edit-label" style="margin-top:6px">Reframe Reasoning</div>
           <textarea class="edit-field" data-d-field="reframe-reason" data-d-idx="${i}" rows="3" placeholder="Explain why this reframe is appropriate...">${escH(d.reframe_reasoning||'')}</textarea>
+          <div class="edit-label" style="margin-top:6px">Review comment (why this change?)</div>
+          <textarea class="edit-field review-note-input" data-review-note="distortions" data-d-idx="${i}" rows="2" placeholder="Explain changes to this distortion...">${escH(editNotes.distortions[i]||'')}</textarea>
         </div>`;
       }).join('');
     }
-    el.innerHTML+=`<button class="add-item-btn" id="addDistBtn">+ Add Distortion</button>`;
+    el.innerHTML+=`<button class="add-item-btn" id="addDistBtn">+ Add Distortion</button>
+      <div class="edit-group review-summary-group"><div class="edit-label">Overall comment (including added or removed distortions)</div>
+        <textarea class="edit-field review-note-input" data-review-summary="distortions" rows="2" placeholder="Explain any changes to the distortion set...">${escH(editSummaryNotes.distortions)}</textarea></div>`;
     // events
     el.querySelectorAll('[data-d-field]').forEach(inp=>{
       inp.addEventListener('input',()=>{
@@ -397,24 +561,37 @@ function renderDistortions(row){
     });
     el.querySelectorAll('[data-remove-dist]').forEach(btn=>{
       btn.addEventListener('click',()=>{
-        editData.distortions.splice(parseInt(btn.dataset.removeDist),1);
+        const index=parseInt(btn.dataset.removeDist);
+        editData.distortions.splice(index,1);
+        editNotes.distortions.splice(index,1);
         renderDistortions(row);
       });
     });
+    el.querySelectorAll('[data-review-note="distortions"]').forEach(input=>{
+      input.addEventListener('input',()=>{editNotes.distortions[Number(input.dataset.dIdx)]=input.value;});
+    });
     el.querySelectorAll('[data-sel-card]').forEach(btn=>{
       btn.addEventListener('click',()=>startSelectingEvidence(btn.dataset.selCard,parseInt(btn.dataset.selIdx),btn));
     });
     document.getElementById('addDistBtn')?.addEventListener('click',()=>{
-      editData.distortions.push({cognitive_distortion:'',evidence_quote:'',reasoning:'',reframe_response:'',reframe_reasoning:''});
+      const item={cognitive_distortion:'',evidence_quote:'',reasoning:'',reframe_response:'',reframe_reasoning:''};
+      editData.distortions.push(item);
+      editNotes.distortions.push('');
+      editOrigins.set(item,{value:deepCopy(item),comment:''});
       renderDistortions(row);
     });
+    el.querySelector('[data-review-summary="distortions"]').addEventListener('input',event=>{
+      editSummaryNotes.distortions=event.target.value;
+    });
+    addRestoreButtons(el,'distortions');
   } else {
-    if(!dists.length){el.innerHTML=`<div class="no-distortions"><span>No distortions detected</span></div>`;return;}
+    if(!dists.length){el.innerHTML=`<div class="no-distortions"><span>No distortions detected</span> ${changeTag(originalDists.length>0)}</div>${noteHtml(noteFor(anno,'distortions_summary'))}`;return;}
     el.innerHTML=dists.map((d,i)=>{
       const c=DIST_COLORS[i%DIST_COLORS.length];
       const q=(d.evidence_quote||'').replace(/^(listener|speaker):\s*/i,'');
-      return `<div class="distortion-item" data-dist-idx="${i}">
-        <div class="distortion-name"><span class="dist-color-dot" style="background:${c}"></span>${escH(d.cognitive_distortion||'—')} ${hasEdit&&i===0?'<span class="edited-badge">Edited</span>':''}</div>
+      const changed=!sameValue(d,originalDists[i])||Boolean(noteFor(anno,'distortions',i));
+      return `<div class="distortion-item ${changed?'changed-item':''}" data-dist-idx="${i}">
+        <div class="distortion-name"><span class="dist-color-dot" style="background:${c}"></span>${escH(d.cognitive_distortion||'—')} ${changeTag(changed)}</div>
         ${q?`<div class="distortion-quote" style="border-color:${c}">${escH(q)}</div>`:''}
         ${d.reasoning?`<div class="distortion-reasoning">${escH(d.reasoning)}</div>`:''}
         ${d.reframe_response||d.reframe_reasoning?`<div class="distortion-reframe">
@@ -424,10 +601,14 @@ function renderDistortions(row){
             <div>${d.reframe_reasoning?escH(d.reframe_reasoning):'<span class="distortion-reframe-empty">Not provided yet</span>'}</div>
           </div>
         </div>`:''}
+        ${noteHtml(noteFor(anno,'distortions',i))}
       </div>`;
-    }).join('');
+    }).join('')+noteHtml(noteFor(anno,'distortions_summary'));
     el.querySelectorAll('.distortion-item').forEach(item=>{
-      item.addEventListener('click',()=>scrollToEvidence('dist',parseInt(item.dataset.distIdx)));
+      item.addEventListener('click',()=>{
+        const index=parseInt(item.dataset.distIdx);
+        scrollToEvidence('dist',index,dists[index]?.evidence_quote||'');
+      });
     });
   }
 }
@@ -438,10 +619,7 @@ function renderEmpathy(row){
   const el=document.getElementById('empathyContent');
   const scoreEl=document.getElementById('overallScore');
   const dims=editMode.empathy ? editData.empathy : (anno.empathy?.empathy_dimensions||[]);
-  const hasEdit=!!(reviewsMap[row.sample_index]?.annotations_edit);
-  const btn=document.getElementById('editEmpBtn');
-  btn.classList.toggle('active',editMode.empathy);
-  btn.textContent=editMode.empathy?'✓ Done':'✏️ Edit';
+  const originalDims=parseAnno(row).empathy?.empathy_dimensions||[];
 
   if(!anno.empathy&&!editMode.empathy){el.innerHTML='<p style="color:var(--text-muted);font-size:.8rem">No annotation.</p>';scoreEl.textContent='';return;}
   const total=dims.reduce((s,d)=>s+(d.score||0),0);
@@ -454,7 +632,7 @@ function renderEmpathy(row){
       return `<div class="empathy-item editing" data-emp-idx="${i}">
         <div class="edit-row">
           <span class="emp-color-dot" style="background:${c}"></span>
-          <input class="edit-field" data-e-field="name" data-e-idx="${i}" value="${escA(dim.dimension_name||'')}" placeholder="Dimension name" style="flex:1"/>
+          <input class="edit-field" data-e-field="name" data-e-idx="${i}" value="${escAttr(dim.dimension_name||'')}" placeholder="Dimension name" style="flex:1"/>
           <button class="remove-item-btn" data-remove-emp="${i}">✕</button>
         </div>
         <div class="edit-label" style="margin-top:6px">Score (0–7)</div>
@@ -464,14 +642,18 @@ function renderEmpathy(row){
         </div>
         <div class="edit-label" style="margin-top:6px">Evidence Quote</div>
         <div class="edit-row">
-          <input class="edit-field" data-e-field="quote" data-e-idx="${i}" value="${escA(dim.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
+          <input class="edit-field" data-e-field="quote" data-e-idx="${i}" value="${escAttr(dim.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
           <button class="select-evidence-btn" data-sel-card="empathy" data-sel-idx="${i}">📌 Select</button>
         </div>
         <div class="edit-label" style="margin-top:6px">Reasoning</div>
-        <textarea class="edit-field" data-e-field="reason" data-e-idx="${i}" rows="2">${dim.reasoning||''}</textarea>
+        <textarea class="edit-field" data-e-field="reason" data-e-idx="${i}" rows="2">${escH(dim.reasoning||'')}</textarea>
+        <div class="edit-label" style="margin-top:6px">Review comment (why this change?)</div>
+        <textarea class="edit-field review-note-input" data-review-note="empathy" data-e-idx="${i}" rows="2" placeholder="Explain changes to this dimension...">${escH(editNotes.empathy[i]||'')}</textarea>
       </div>`;
     }).join('');
-    el.innerHTML+=`<button class="add-item-btn" id="addEmpBtn">+ Add Dimension</button>`;
+    el.innerHTML+=`<button class="add-item-btn" id="addEmpBtn">+ Add Dimension</button>
+      <div class="edit-group review-summary-group"><div class="edit-label">Overall comment (including added or removed dimensions)</div>
+        <textarea class="edit-field review-note-input" data-review-summary="empathy" rows="2" placeholder="Explain any changes to the empathy dimensions...">${escH(editSummaryNotes.empathy)}</textarea></div>`;
     // events
     el.querySelectorAll('[data-e-field]').forEach(inp=>{
       inp.addEventListener('input',()=>{
@@ -489,15 +671,30 @@ function renderEmpathy(row){
       });
     });
     el.querySelectorAll('[data-remove-emp]').forEach(btn=>{
-      btn.addEventListener('click',()=>{editData.empathy.splice(parseInt(btn.dataset.removeEmp),1);renderEmpathy(row);});
+      btn.addEventListener('click',()=>{
+        const index=parseInt(btn.dataset.removeEmp);
+        editData.empathy.splice(index,1);
+        editNotes.empathy.splice(index,1);
+        renderEmpathy(row);
+      });
+    });
+    el.querySelectorAll('[data-review-note="empathy"]').forEach(input=>{
+      input.addEventListener('input',()=>{editNotes.empathy[Number(input.dataset.eIdx)]=input.value;});
     });
     el.querySelectorAll('[data-sel-card]').forEach(btn=>{
       btn.addEventListener('click',()=>startSelectingEvidence(btn.dataset.selCard,parseInt(btn.dataset.selIdx),btn));
     });
     document.getElementById('addEmpBtn')?.addEventListener('click',()=>{
-      editData.empathy.push({dimension_name:'',score:0,evidence_quote:'',reasoning:''});
+      const item={dimension_name:'',score:0,evidence_quote:'',reasoning:''};
+      editData.empathy.push(item);
+      editNotes.empathy.push('');
+      editOrigins.set(item,{value:deepCopy(item),comment:''});
       renderEmpathy(row);
     });
+    el.querySelector('[data-review-summary="empathy"]').addEventListener('input',event=>{
+      editSummaryNotes.empathy=event.target.value;
+    });
+    addRestoreButtons(el,'empathy');
   } else {
     el.innerHTML=dims.map((dim,i)=>{
       const c=EMP_COLORS[i%EMP_COLORS.length];
@@ -505,23 +702,26 @@ function renderEmpathy(row){
       const pct=Math.min(100,(sc/7)*100);
       const sC=scoreColor(sc);
       const q=(dim.evidence_quote||'').replace(/^(listener|speaker):\s*/i,'');
-      return `<div class="empathy-item" data-emp-idx="${i}">
+      const changed=!sameValue(dim,originalDims[i])||Boolean(noteFor(anno,'empathy',i));
+      return `<div class="empathy-item ${changed?'changed-item':''}" data-emp-idx="${i}">
         <div class="empathy-item-header">
           <span class="emp-color-dot" style="background:${c}"></span>
-          <span class="empathy-name">${dim.dimension_name||'—'}</span>
+          <span class="empathy-name">${escH(dim.dimension_name||'—')} ${changeTag(changed)}</span>
           <div class="score-bar-container">
             <div class="score-bar"><div class="score-bar-fill" style="width:${pct}%;background:${sC}"></div></div>
             <span class="score-value" style="color:${sC}">${sc}</span>
           </div>
         </div>
-        ${q&&q!=='No evidence present'?`<div class="empathy-quote" style="border-color:${c}" title="${escA(q)}">"${q}"</div>`:''}
-        ${dim.reasoning?`<div class="empathy-reasoning">${dim.reasoning}</div>`:''}
+        ${q&&q!=='No evidence present'?`<div class="empathy-quote" style="border-color:${c}" title="${escAttr(q)}">"${escH(q)}"</div>`:''}
+        ${dim.reasoning?`<div class="empathy-reasoning">${escH(dim.reasoning)}</div>`:''}
+        ${noteHtml(noteFor(anno,'empathy',i))}
       </div>`;
-    }).join('');
+    }).join('')+noteHtml(noteFor(anno,'empathy_summary'));
     el.querySelectorAll('.empathy-item').forEach(item=>{
       item.addEventListener('click',()=>{
         item.classList.toggle('active');
-        scrollToEvidence('emp',parseInt(item.dataset.empIdx));
+        const index=parseInt(item.dataset.empIdx);
+        scrollToEvidence('emp',index,dims[index]?.evidence_quote||'');
       });
     });
   }
@@ -532,9 +732,8 @@ function renderCaseFormulation(row){
   const formulation=editMode.caseFormulation
     ? editData.caseFormulation : getEffectiveAnno(row).case_formulation;
   const el=document.getElementById('caseFormulationContent');
-  const btn=document.getElementById('editCaseFormulationBtn');
-  btn.classList.toggle('active',editMode.caseFormulation);
-  btn.textContent=editMode.caseFormulation?'✓ Done':'✏️ Edit';
+  const anno=getEffectiveAnno(row);
+  const originalFormulation=parseAnno(row).case_formulation||{};
   if(!formulation&&!editMode.caseFormulation){
     el.innerHTML='<div class="case5p-empty">No case formulation available</div>';
     return;
@@ -553,6 +752,8 @@ function renderCaseFormulation(row){
           </div></div>
         <div class="edit-group"><div class="edit-label">Reasoning</div>
           <textarea class="edit-field" data-case-key="${factor.key}" data-case-field="reasoning" rows="3">${escH(item.reasoning||'')}</textarea></div>
+        <div class="edit-group"><div class="edit-label">Review comment (why this change?)</div>
+          <textarea class="edit-field review-note-input" data-review-note="caseFormulation" data-case-key="${factor.key}" rows="2" placeholder="Explain changes to this 5P factor...">${escH(editNotes.caseFormulation[factor.key]||'')}</textarea></div>
       </section>`;
     }).join('');
     el.querySelectorAll('[data-case-field]').forEach(input=>{
@@ -565,23 +766,45 @@ function renderCaseFormulation(row){
     el.querySelectorAll('[data-sel-case]').forEach(button=>{
       button.addEventListener('click',()=>startSelectingEvidence('caseFormulation',button.dataset.selCase,button));
     });
+    el.querySelectorAll('[data-review-note="caseFormulation"]').forEach(input=>{
+      input.addEventListener('input',()=>{editNotes.caseFormulation[input.dataset.caseKey]=input.value;});
+    });
+    addRestoreButtons(el,'caseFormulation');
     return;
   }
   el.innerHTML=CASE_5P_FACTORS.map(factor=>{
     const item=formulation[factor.key];
     if(!item)return '';
     const quote=(item.evidence_quote||'').replace(/^(listener|speaker):\s*/i,'');
-    return `<section class="case5p-item" style="--case-color:${factor.color}">
-      <div class="case5p-title"><span class="case5p-dot"></span>${factor.label}</div>
+    const changed=!sameValue(item,originalFormulation[factor.key])||Boolean(noteFor(anno,'caseFormulation',factor.key));
+    return `<section class="case5p-item ${changed?'changed-item':''}" style="--case-color:${factor.color}">
+      <div class="case5p-title"><span class="case5p-dot"></span>${factor.label} ${changeTag(changed)}</div>
       ${item.identified_factors?`<div class="case5p-identified">${escH(item.identified_factors)}</div>`:''}
-      ${quote&&quote!=='N/A'?`<div class="case5p-evidence"><span>Evidence</span>“${escH(quote)}”</div>`:''}
+      ${quote&&quote!=='N/A'?`<button type="button" class="case5p-evidence" data-case-evidence="${factor.key}" title="Go to this quote in the conversation"><span>Evidence · click to locate</span>“${escH(quote)}”</button>`:''}
       ${item.reasoning?`<div class="case5p-reasoning"><span>Reasoning</span>${escH(item.reasoning)}</div>`:''}
+      ${noteHtml(noteFor(anno,'caseFormulation',factor.key))}
     </section>`;
   }).join('')||'<div class="case5p-empty">No case formulation available</div>';
+  el.querySelectorAll('[data-case-evidence]').forEach(button=>{
+    button.addEventListener('click',()=>{
+      const key=button.dataset.caseEvidence;
+      scrollToEvidence('case',key,formulation[key]?.evidence_quote||'');
+    });
+  });
 }
 
 // ===== Evidence Selection Mode =====
 function startSelectingEvidence(card, itemIdx, triggerBtn){
+  const input=card==='distortions'
+    ? document.querySelector(`[data-d-field="quote"][data-d-idx="${itemIdx}"]`)
+    : card==='empathy'
+      ? document.querySelector(`[data-e-field="quote"][data-e-idx="${itemIdx}"]`)
+      : document.querySelector(`[data-case-field="evidence_quote"][data-case-key="${itemIdx}"]`);
+  if(input?.value.trim()){
+    alert('Clear the Evidence Quote field before selecting a different quote. Restore will bring back the saved value.');
+    input.focus();
+    return;
+  }
   selectingEvidence={card, itemIdx};
   const panel=document.querySelector('.conversation-panel');
   panel.classList.add('selecting-mode');
@@ -624,20 +847,45 @@ function captureSelection(){
 }
 
 // ===== Save Annotations =====
-async function saveAnnotations(){
+async function saveAnnotations(card){
   const row=filteredData[currentIndex];
   const anno=getEffectiveAnno(row);
-  // Merge current editData into the annotation structure
+  const baseline=editBaselines[card];
+  if(baseline&&sameValue(editData[card],baseline.data)&&sameValue(editNotes[card],baseline.notes)
+     &&(baseline.summary??'')===(editSummaryNotes[card]??''))return true;
+  const notes=deepCopy(anno.review_notes||{});
+  const noteKey=card==='caseFormulation'?'case_formulation':card;
+  let cardNotes;
+  if(card==='emotion')cardNotes=(editNotes.emotion||'').trim();
+  else if(card==='caseFormulation'){
+    cardNotes=Object.fromEntries(Object.entries(editNotes.caseFormulation)
+      .map(([key,value])=>[key,value.trim()]).filter(([,value])=>value));
+  }else{
+    cardNotes=Object.fromEntries(editNotes[card]
+      .map((value,index)=>[index,(value||'').trim()]).filter(([,value])=>value));
+  }
+  if(cardNotes&&((typeof cardNotes==='string'&&cardNotes.length)||Object.keys(cardNotes).length))
+    notes[noteKey]=cardNotes;
+  else delete notes[noteKey];
+  if(card==='distortions'||card==='empathy'){
+    const summary=(editSummaryNotes[card]||'').trim();
+    if(summary)notes[`${card}_summary`]=summary;
+    else delete notes[`${card}_summary`];
+  }
+
+  // Save only the active card; unsaved edits in other cards must never leak in.
   const toSave={
-    emotion: editData.emotion || anno.emotion,
-    distortions: anno.distortions
-      ? {...anno.distortions, distortions: editData.distortions||anno.distortions?.distortions||[]}
-      : {distortions: editData.distortions||[]},
-    empathy: anno.empathy
-      ? {...anno.empathy, empathy_dimensions: editData.empathy||anno.empathy?.empathy_dimensions||[]}
-      : {empathy_dimensions: editData.empathy||[]},
-    case_formulation: editData.caseFormulation ?? anno.case_formulation
+    emotion: card==='emotion'?editData.emotion:anno.emotion,
+    distortions: card==='distortions'
+      ? {...(anno.distortions||{}),distortions:editData.distortions}
+      : anno.distortions,
+    empathy: card==='empathy'
+      ? {...(anno.empathy||{}),empathy_dimensions:editData.empathy}
+      : anno.empathy,
+    case_formulation: card==='caseFormulation'?editData.caseFormulation:anno.case_formulation,
+    review_notes:notes
   };
+  if(sameValue(toSave,{...anno,review_notes:anno.review_notes||{}}))return true;
   try {
     const res=await fetch('/api/reviews/annotations',{
       method:'PATCH',
@@ -660,55 +908,54 @@ async function toggleEdit(card){
   if(editMode[card]){
     if(annotationSaveInProgress)return;
     annotationSaveInProgress=true;
-    const ok=await saveAnnotations();
+    syncEditButtons();
+    const ok=await saveAnnotations(card);
     annotationSaveInProgress=false;
     if(ok){
-      editMode[card]=false;
-      stopSelectingEvidence();
+      renderSampleList();
       renderAll();
     } else {
       alert('Failed to save changes. Your edits are still available.');
+      syncEditButtons();
     }
   } else {
+    if(activeEditCard())return;
     // Entering edit mode — init editData from effective annotation
     if(card==='emotion') editData.emotion=deepCopy(anno.emotion||{primary_emotion:'',intensity:'',specific_emotion_term:'',reasoning:''});
     else if(card==='distortions') editData.distortions=deepCopy(anno.distortions?.distortions||[]);
     else if(card==='empathy') editData.empathy=deepCopy(anno.empathy?.empathy_dimensions||[]);
     else if(card==='caseFormulation') editData.caseFormulation=deepCopy(anno.case_formulation||{});
+    if(card==='emotion')editNotes.emotion=noteFor(anno,'emotion');
+    else if(card==='caseFormulation')editNotes.caseFormulation=Object.fromEntries(
+      CASE_5P_FACTORS.map(factor=>[factor.key,noteFor(anno,'caseFormulation',factor.key)]));
+    else editNotes[card]=editData[card].map((_,i)=>noteFor(anno,card,i));
+    if(card==='distortions'||card==='empathy')editSummaryNotes[card]=noteFor(anno,`${card}_summary`);
+    rememberEditOrigins(card);
+    editBaselines[card]={data:deepCopy(editData[card]),notes:deepCopy(editNotes[card]),summary:editSummaryNotes[card]||''};
     editMode[card]=true;
     if(card==='emotion') renderEmotion(row);
     else if(card==='distortions') renderDistortions(row);
     else if(card==='empathy') renderEmpathy(row);
     else if(card==='caseFormulation') renderCaseFormulation(row);
+    syncEditButtons();
   }
 }
+function cancelEdit(card){
+  if(!editMode[card]||annotationSaveInProgress)return;
+  renderAll();
+}
 
 // ===== Review State =====
 function renderReviewState(){
   const review=reviewsMap[currentSampleIndex()];
   const badge=document.getElementById('reviewStatusBadge');
-  const acceptBtn=document.getElementById('acceptBtn');
-  const rejectBtn=document.getElementById('rejectBtn');
-  const comment=document.getElementById('reviewComment');
   const submitBtn=document.getElementById('submitReviewBtn');
-  acceptBtn.classList.remove('active');
-  rejectBtn.classList.remove('active');
-  currentReviewStatus=null;
-  if(review){
-    badge.style.display='inline-block';
-    badge.textContent=review.status==='accept'?'✓ Accepted':review.status==='reject'?'✗ Rejected':'Edits saved · Pending review';
-    badge.className='review-status-badge '+(review.status==='accept'?'review-status-accept':review.status==='reject'?'review-status-reject':'review-status-pending');
-    currentReviewStatus=review.status==='pending'?null:review.status;
-    if(review.status==='accept') acceptBtn.classList.add('active');
-    else if(review.status==='reject') rejectBtn.classList.add('active');
-    comment.value=review.comment||'';
-    submitBtn.textContent=review.status==='pending'?'Submit Review':'Update Review';
-  } else {
-    badge.style.display='none';
-    comment.value='';
-    submitBtn.textContent='Submit Review';
-  }
-  submitBtn.disabled=false;
+  const done=isReviewed(review);
+  badge.style.display='inline-block';
+  badge.textContent=done?'✓ Completed':review?.annotations_edit?'Edits saved · Review pending':'Not reviewed';
+  badge.className='review-status-badge '+(done?'review-status-complete':'review-status-pending');
+  submitBtn.textContent=done?'✓ Review complete':'Complete review';
+  submitBtn.disabled=done;
 }
 
 // ===== Sample List =====
@@ -723,7 +970,7 @@ function renderSampleList(){
   filteredData.forEach((row,i)=>{
     const en=displayEmotion(row);
     const review=reviewsMap[row.sample_index];
-    const dotCls=review?.status==='accept'?'dot-accept':review?.status==='reject'?'dot-reject':'dot-pending';
+    const dotCls=isReviewed(review)?'dot-complete':'dot-pending';
     const hasEdit=!!(review?.annotations_edit);
     const item=document.createElement('div');
     item.className='sample-item'+(i===currentIndex?' active':'')+(row.review_focus_rank?' focus-review':'');
@@ -733,12 +980,18 @@ function renderSampleList(){
       <div class="sample-item-id">${escH(row.sample_id||'')}</div>
       <div class="sample-item-emotion" style="color:var(--emotion-color)">${escH(en)}</div>
       <div class="sample-item-problem">${escH(row.problem_type||'')}</div>`;
-    item.addEventListener('click',()=>{currentIndex=i;renderAll();});
+    item.addEventListener('click',()=>navigateTo(i));
     list.appendChild(item);
   });
 }
 
 // ===== Navigation =====
+function navigateTo(index){
+  if(index===currentIndex||index<0||index>=filteredData.length)return;
+  if(!confirmLeaveEdit())return;
+  currentIndex=index;
+  renderAll();
+}
 function updateNav(){
   document.getElementById('prevBtn').disabled=currentIndex<=0;
   document.getElementById('nextBtn').disabled=currentIndex>=filteredData.length-1;
@@ -751,12 +1004,13 @@ function updateNav(){
 // ===== Render All =====
 function renderAll(){
   if(!filteredData.length)return;
-  ['editEmotionBtn','editDistBtn','editEmpBtn','editCaseFormulationBtn'].forEach(id=>{
-    document.getElementById(id).disabled=false;
-  });
   // Exit edit modes on navigation
   editMode={emotion:false,distortions:false,empathy:false,caseFormulation:false};
   editData={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+  editNotes={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+  editSummaryNotes={distortions:'',empathy:''};
+  editBaselines={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+  editOrigins=new WeakMap();
   stopSelectingEvidence();
   const row=filteredData[currentIndex];
   renderConvHeader(row);
@@ -766,11 +1020,13 @@ function renderAll(){
   renderEmpathy(row);
   renderCaseFormulation(row);
   renderReviewState();
+  syncEditButtons();
   updateNav();
 }
 
 // ===== Filter =====
 function applyFilter(q){
+  lastFilterQuery=q;
   q=q.toLowerCase().trim();
   filteredData=orderForReview(allData.filter(row=>{
     if(focusOnly&&!row.review_focus_rank)return false;
@@ -785,6 +1041,10 @@ function applyFilter(q){
   } else {
     editMode={emotion:false,distortions:false,empathy:false,caseFormulation:false};
     editData={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+    editNotes={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+    editSummaryNotes={distortions:'',empathy:''};
+    editBaselines={emotion:null,distortions:null,empathy:null,caseFormulation:null};
+    editOrigins=new WeakMap();
     stopSelectingEvidence();
     document.getElementById('currentIdx').textContent='0';
     document.getElementById('totalSamples').textContent='0';
@@ -801,19 +1061,19 @@ function applyFilter(q){
     ['editEmotionBtn','editDistBtn','editEmpBtn','editCaseFormulationBtn'].forEach(id=>{
       document.getElementById(id).disabled=true;
     });
+    document.querySelectorAll('[data-cancel-card]').forEach(button=>{button.hidden=true;});
   }
 }
 
 // ===== Submit Review =====
 async function submitReview(){
-  if(!currentReviewStatus){alert('Please select Accept or Reject');return;}
-  const comment=document.getElementById('reviewComment').value.trim();
+  if(activeEditCard())return;
   const btn=document.getElementById('submitReviewBtn');
-  btn.disabled=true;btn.textContent='Submitting...';
+  btn.disabled=true;btn.textContent='Completing...';
   try{
     const res=await fetch('/api/reviews',{
       method:'POST',headers:{'Content-Type':'application/json'},
-      body:JSON.stringify({assignment_id:assignmentId,sample_index:currentSampleIndex(),status:currentReviewStatus,comment})
+      body:JSON.stringify({assignment_id:assignmentId,sample_index:currentSampleIndex(),status:'complete'})
     });
     const data=await res.json();
     if(res.ok){
@@ -821,12 +1081,12 @@ async function submitReview(){
       renderReviewState();renderSampleList();
       btn.textContent='✓ Saved!';
       setTimeout(()=>{
-        btn.textContent='Update Review';btn.disabled=false;
-        const next=filteredData.findIndex((row,i)=>i>currentIndex&&(!reviewsMap[row.sample_index]||reviewsMap[row.sample_index].status==='pending'));
-        if(next!==-1){currentIndex=next;renderAll();}
+        const next=filteredData.findIndex((row,i)=>i>currentIndex&&!isReviewed(reviewsMap[row.sample_index]));
+        if(next!==-1)navigateTo(next);
+        else renderReviewState();
       },800);
-    } else {alert(data.error||'Failed');btn.textContent='Submit Review';btn.disabled=false;}
-  } catch(e){alert('Network error');btn.textContent='Submit Review';btn.disabled=false;}
+    } else {alert(data.error||'Failed');renderReviewState();}
+  } catch(e){alert('Network error');renderReviewState();}
 }
 
 // ===== Annotation History =====
@@ -836,50 +1096,125 @@ function closeHistory(){
   modal.setAttribute('aria-hidden','true');
 }
 
-function historySnapshotHtml(entry,version,row){
-  const a=entry.annotations||{};
-  const emotion=a.emotion||{};
-  const distortions=a.distortions?.distortions||[];
-  const empathy=a.empathy?.empathy_dimensions||[];
-  const when=entry.created_at
-    ? new Date(entry.created_at).toLocaleString()
-    : 'Unknown time';
-  const emotionParts=[
-    displayEmotion(row),
-    emotion.specific_emotion_term,
-    emotion.compound_emotion && emotion.compound_emotion!=='None'
-      ? `Compound: ${emotion.compound_emotion}` : null,
-    emotion.intensity
-  ].filter(Boolean).map(v=>escH(String(v)));
-  const distortionNames=distortions
-    .map(d=>d.cognitive_distortion).filter(Boolean).map(v=>escH(String(v)));
-  const empathyNames=empathy.map(d=>{
-    const name=escH(String(d.dimension_name||'Dimension'));
-    return d.score===undefined||d.score===null ? name : `${name} (${escH(String(d.score))}/7)`;
-  });
-  const fullJson=escH(JSON.stringify(a,null,2));
-
+function normalizedSnapshot(row,edits){
+  const original=parseAnno(row),saved=edits||{};
+  return {
+    emotion:{...(original.emotion||{}),...(saved.emotion||{})},
+    distortions:saved.distortions??original.distortions,
+    empathy:saved.empathy??original.empathy,
+    case_formulation:saved.case_formulation??original.case_formulation,
+    review_notes:saved.review_notes||{}
+  };
+}
+function arrayMatchKey(item){
+  if(item&&typeof item==='object'){
+    if(item.cognitive_distortion)return `dist:${item.cognitive_distortion}`;
+    if(item.dimension_name)return `emp:${item.dimension_name}`;
+  }
+  return JSON.stringify(item);
+}
+function arrayMatches(before,after){
+  const n=before.length,m=after.length;
+  const oldKeys=before.map(arrayMatchKey),newKeys=after.map(arrayMatchKey);
+  const lengths=Array.from({length:n+1},()=>Array(m+1).fill(0));
+  for(let i=n-1;i>=0;i--)for(let j=m-1;j>=0;j--)
+    lengths[i][j]=oldKeys[i]===newKeys[j]
+      ? 1+lengths[i+1][j+1] : Math.max(lengths[i+1][j],lengths[i][j+1]);
+  const matches=[];
+  for(let i=0,j=0;i<n&&j<m;){
+    if(oldKeys[i]===newKeys[j]){matches.push([i,j]);i++;j++;}
+    else if(lengths[i+1][j]>=lengths[i][j+1])i++;
+    else j++;
+  }
+  return matches;
+}
+function collectChanges(before,after,path=[],result=[]){
+  if(sameValue(before,after))return result;
+  if(Array.isArray(before)||Array.isArray(after)){
+    const oldItems=Array.isArray(before)?before:[];
+    const newItems=Array.isArray(after)?after:[];
+    let oldStart=0,newStart=0;
+    for(const [oldEnd,newEnd] of [...arrayMatches(oldItems,newItems),[oldItems.length,newItems.length]]){
+      const paired=Math.min(oldEnd-oldStart,newEnd-newStart);
+      for(let offset=0;offset<paired;offset++)
+        collectChanges(oldItems[oldStart+offset],newItems[newStart+offset],
+          [...path,String(newStart+offset)],result);
+      for(let index=oldStart+paired;index<oldEnd;index++)
+        result.push({path:[...path,String(index)],before:oldItems[index],after:undefined});
+      for(let index=newStart+paired;index<newEnd;index++)
+        result.push({path:[...path,String(index)],before:undefined,after:newItems[index]});
+      if(oldEnd<oldItems.length)
+        collectChanges(oldItems[oldEnd],newItems[newEnd],[...path,String(newEnd)],result);
+      oldStart=oldEnd+1;
+      newStart=newEnd+1;
+    }
+  }else if((before&&typeof before==='object')||(after&&typeof after==='object')){
+    const oldFields=before&&typeof before==='object'?before:{};
+    const newFields=after&&typeof after==='object'?after:{};
+    const keys=[...new Set([...Object.keys(oldFields),...Object.keys(newFields)])].sort();
+    keys.forEach(key=>collectChanges(oldFields[key],newFields[key],[...path,key],result));
+  }else result.push({path,before,after});
+  return result;
+}
+const HISTORY_LABELS={
+  emotion:'Emotion',distortions:'Distortions',empathy:'Empathy',empathy_dimensions:'Dimensions',
+  case_formulation:'Case Formulation (5P)',review_notes:'Reviewer comments',
+  distortions_summary:'Distortions (added/removed)',empathy_summary:'Empathy (added/removed)',
+  presenting_problem:'Presenting Problem',predisposing_factors:'Predisposing Factors',
+  precipitating_factors:'Precipitating Factors',perpetuating_factors:'Perpetuating Factors',
+  protective_factors:'Protective Factors',cognitive_distortion:'Distortion type',
+  evidence_quote:'Evidence Quote',identified_factors:'Identified Factors',
+  reframe_response:'Reframe Response',reframe_reasoning:'Reframe Reasoning',
+  standard_reasoning:'Standard Reasoning',appraisal_reasoning:'Appraisal Reasoning',
+  specific_emotion_term:'Specific Term',compound_emotion:'Compound Emotion',
+  primary_emotion:'LLM Prediction',intensity:'Intensity',score:'Score',
+  dimension_name:'Dimension',reasoning:'Reasoning'
+};
+function historyPathLabel(path){
+  return path.filter((part,i)=>!(part==='distortions'&&path[i-1]==='distortions'))
+    .map(part=>/^\d+$/.test(part)?`#${Number(part)+1}`:(HISTORY_LABELS[part]||part.replace(/_/g,' ')))
+    .join(' › ');
+}
+function historyValue(value){
+  if(value===undefined||value===null||value==='')return '∅';
+  if(typeof value==='object')return JSON.stringify(value,null,2);
+  return String(value);
+}
+function highlightedChange(before,after,side){
+  const oldTokens=historyValue(before).match(/\s+|[^\s]+/g)||[];
+  const newTokens=historyValue(after).match(/\s+|[^\s]+/g)||[];
+  let start=0,end=0;
+  while(start<oldTokens.length&&start<newTokens.length&&oldTokens[start]===newTokens[start])start++;
+  while(end<oldTokens.length-start&&end<newTokens.length-start&&
+        oldTokens[oldTokens.length-1-end]===newTokens[newTokens.length-1-end])end++;
+  const tokens=side==='before'?oldTokens:newTokens;
+  const tag=side==='before'?'del':'ins';
+  const prefix=tokens.slice(0,start).join('');
+  const middle=tokens.slice(start,tokens.length-end).join('');
+  const suffix=end?tokens.slice(-end).join(''):'';
+  return `${escH(prefix)}<${tag}>${escH(middle)}</${tag}>${escH(suffix)}`;
+}
+function historySnapshotHtml(entry,previous,version,row){
+  const before=normalizedSnapshot(row,previous);
+  const after=normalizedSnapshot(row,entry.annotations);
+  const changes=collectChanges(before,after);
+  const when=entry.created_at?new Date(entry.created_at).toLocaleString():'Unknown time';
+  const changeHtml=changes.map(change=>`<div class="history-change">
+      <div class="history-change-label">${escH(historyPathLabel(change.path))}</div>
+      <div class="history-change-values">
+        <div class="history-before"><span>Before</span>${highlightedChange(change.before,change.after,'before')}</div>
+        <div class="history-after"><span>After</span>${highlightedChange(change.before,change.after,'after')}</div>
+      </div>
+    </div>`).join('');
   return `<article class="history-entry">
     <div class="history-entry-head">
       <span class="history-version">Version ${version}</span>
       <span class="history-meta">${escH(entry.edited_by||'unknown')} · ${escH(when)}</span>
     </div>
     <div class="history-summary">
-      <div class="history-field">
-        <div class="history-field-label">Emotion</div>
-        <div>${emotionParts.join(' · ')||'—'}</div>
-      </div>
-      ${emotion.standard_reasoning?`<div class="history-field"><div class="history-field-label">Standard Reasoning</div><div class="history-reasoning">${escH(emotion.standard_reasoning)}</div></div>`:''}
-      ${emotion.appraisal_reasoning?`<div class="history-field"><div class="history-field-label">Appraisal Reasoning</div><div class="history-reasoning">${escH(emotion.appraisal_reasoning)}</div></div>`:''}
-      <div class="history-field">
-        <div class="history-field-label">Distortions (${distortions.length})</div>
-        <div>${distortionNames.join(', ')||'None'}</div>
-      </div>
-      <div class="history-field">
-        <div class="history-field-label">Empathy dimensions (${empathy.length})</div>
-        <div>${empathyNames.join(', ')||'None'}</div>
-      </div>
-      <details class="history-json"><summary>View full snapshot</summary><pre>${fullJson}</pre></details>
+      <div class="history-change-count">${changes.length} changed field${changes.length===1?'':'s'}</div>
+      ${changeHtml||'<div class="history-no-change">No content changes in this saved version.</div>'}
+      <details class="history-json"><summary>View full snapshot</summary><pre>${escH(JSON.stringify(entry.annotations||{},null,2))}</pre></details>
     </div>
   </article>`;
 }
@@ -901,7 +1236,8 @@ async function openHistory(){
       content.innerHTML='<div class="history-empty">No edit history yet. A version will appear after an annotation is changed and saved.</div>';
       return;
     }
-    content.innerHTML=entries.map((entry,i)=>historySnapshotHtml(entry,entries.length-i,row)).join('');
+    content.innerHTML=entries.map((entry,i)=>
+      historySnapshotHtml(entry,entries[i+1]?.annotations,entries.length-i,row)).join('');
   }catch(err){
     content.innerHTML=`<div class="history-empty">${escH(err.message||'Failed to load history')}</div>`;
   }
@@ -941,17 +1277,22 @@ document.addEventListener('DOMContentLoaded',async()=>{
   assignmentId=parseInt(parts[parts.length-1]);
   if(isNaN(assignmentId))return;
   try{const m=await fetch('/api/me').then(r=>r.json());document.getElementById('userBadge').textContent=m.username;}catch(e){}
-  document.getElementById('logoutBtn').addEventListener('click',async()=>{await fetch('/api/logout',{method:'POST'});window.location.href='/login';});
-  document.getElementById('prevBtn').addEventListener('click',()=>{if(currentIndex>0){currentIndex--;renderAll();}});
-  document.getElementById('nextBtn').addEventListener('click',()=>{if(currentIndex<filteredData.length-1){currentIndex++;renderAll();}});
-  document.getElementById('searchInput').addEventListener('input',e=>applyFilter(e.target.value));
+  document.getElementById('logoutBtn').addEventListener('click',async()=>{
+    if(!confirmLeaveEdit())return;
+    await fetch('/api/logout',{method:'POST'});window.location.href='/login';
+  });
+  document.getElementById('prevBtn').addEventListener('click',()=>navigateTo(currentIndex-1));
+  document.getElementById('nextBtn').addEventListener('click',()=>navigateTo(currentIndex+1));
+  document.getElementById('searchInput').addEventListener('input',e=>{
+    if(!confirmLeaveEdit()){e.target.value=lastFilterQuery;return;}
+    applyFilter(e.target.value);
+  });
   document.getElementById('focusFilterBtn').addEventListener('click',e=>{
+    if(!confirmLeaveEdit())return;
     focusOnly=!focusOnly;
     e.currentTarget.setAttribute('aria-pressed',String(focusOnly));
     applyFilter(document.getElementById('searchInput').value);
   });
-  document.getElementById('acceptBtn').addEventListener('click',()=>{currentReviewStatus='accept';document.getElementById('acceptBtn').classList.add('active');document.getElementById('rejectBtn').classList.remove('active');});
-  document.getElementById('rejectBtn').addEventListener('click',()=>{currentReviewStatus='reject';document.getElementById('rejectBtn').classList.add('active');document.getElementById('acceptBtn').classList.remove('active');});
   document.getElementById('submitReviewBtn').addEventListener('click',submitReview);
   document.getElementById('historyBtn').addEventListener('click',openHistory);
   document.getElementById('historyCloseBtn').addEventListener('click',closeHistory);
@@ -965,6 +1306,9 @@ document.addEventListener('DOMContentLoaded',async()=>{
       toggleEdit(card);
     });
   });
+  document.querySelectorAll('[data-cancel-card]').forEach(button=>{
+    button.addEventListener('click',()=>cancelEdit(button.dataset.cancelCard));
+  });
   // Capture text selection from conversation
   document.getElementById('conversationView').addEventListener('mouseup',()=>{
     if(selectingEvidence) captureSelection();
@@ -977,8 +1321,16 @@ document.addEventListener('DOMContentLoaded',async()=>{
       return;
     }
     if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA'||e.target.tagName==='SELECT')return;
-    if(e.key==='ArrowLeft'&&currentIndex>0){currentIndex--;renderAll();}
-    if(e.key==='ArrowRight'&&currentIndex<filteredData.length-1){currentIndex++;renderAll();}
+    if(e.key==='ArrowLeft')navigateTo(currentIndex-1);
+    if(e.key==='ArrowRight')navigateTo(currentIndex+1);
+  });
+  window.addEventListener('beforeunload',event=>{
+    const card=activeEditCard(),baseline=editBaselines[card];
+    if(card&&baseline&&(!sameValue(editData[card],baseline.data)||!sameValue(editNotes[card],baseline.notes)
+       ||(baseline.summary??'')!==(editSummaryNotes[card]??''))){
+      event.preventDefault();
+      event.returnValue='';
+    }
   });
   await loadAssignmentData();
 });

static/style.css

@@ -411,6 +411,17 @@ mark.evidence-pulse {
   animation: evidence-glow 0.6s ease-in-out 3;
   border-radius: 4px;
 }
+.message-bubble.evidence-pulse { animation: evidence-glow 0.6s ease-in-out 3; }
+.evidence-status {
+  margin: 8px 12px;
+  padding: 7px 10px;
+  border: 1px solid rgba(251,191,36,.4);
+  border-radius: var(--radius-sm);
+  color: #fbbf24;
+  background: rgba(251,191,36,.1);
+  font-size: .75rem;
+}
+.evidence-status[hidden] { display: none; }
 @keyframes evidence-glow {
   0%, 100% { box-shadow: none; filter: brightness(1); }
   50% { box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.5); filter: brightness(1.5); }
@@ -432,6 +443,13 @@ mark.emp-hl-6 { background: var(--hl-empathy-feelings); border-bottom-color: #81
 mark.emp-hl-7 { background: var(--hl-empathy-acceptance); border-bottom-color: #2dd4bf; color: inherit; }
 mark.emp-hl-8 { background: var(--hl-empathy-responsiveness); border-bottom-color: #e879f9; color: inherit; }
 
+/* 5P evidence that does not overlap an existing annotation highlight. */
+mark.case-hl-0 { background: rgba(96,165,250,.22); border-bottom-color: #60a5fa; color: inherit; }
+mark.case-hl-1 { background: rgba(167,139,250,.22); border-bottom-color: #a78bfa; color: inherit; }
+mark.case-hl-2 { background: rgba(251,146,60,.22); border-bottom-color: #fb923c; color: inherit; }
+mark.case-hl-3 { background: rgba(248,113,113,.22); border-bottom-color: #f87171; color: inherit; }
+mark.case-hl-4 { background: rgba(52,211,153,.22); border-bottom-color: #34d399; color: inherit; }
+
 /* ===== Annotation Panel ===== */
 .annotation-panel {
   background: var(--bg-secondary);
@@ -518,13 +536,24 @@ mark.emp-hl-8 { background: var(--hl-empathy-responsiveness); border-bottom-colo
   line-height: 1.55;
 }
 .case5p-evidence {
+  display: block;
+  width: 100%;
+  border: 1px solid transparent;
+  text-align: left;
+  cursor: pointer;
   padding: 7px 9px;
   border-radius: 4px;
   background: rgba(255,255,255,0.04);
   color: var(--text-secondary);
   font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
   font-style: italic;
 }
+.case5p-evidence:hover, .case5p-evidence:focus-visible {
+  border-color: var(--case-color);
+  background: rgba(255,255,255,0.08);
+  outline: none;
+}
 .case5p-evidence span,
 .case5p-reasoning span {
   display: block;
@@ -547,6 +576,40 @@ mark.emp-hl-8 { background: var(--hl-empathy-responsiveness); border-bottom-colo
 .case5p-evidence-edit { align-items: flex-start; margin-bottom: 0; }
 .case5p-evidence-edit .edit-field { min-width: 0; }
 
+.changed-item { border-color: rgba(251,191,36,.55) !important; box-shadow: inset 3px 0 rgba(251,191,36,.6); }
+.changed-field { border-radius: 4px; background: rgba(251,191,36,.09); }
+.change-tag {
+  display: inline-block;
+  margin-left: 5px;
+  padding: 1px 6px;
+  border: 1px solid rgba(251,191,36,.35);
+  border-radius: 10px;
+  color: #fbbf24;
+  background: rgba(251,191,36,.12);
+  font-size: .62rem;
+  font-weight: 700;
+  vertical-align: middle;
+}
+.saved-review-note {
+  margin-top: 9px;
+  padding: 8px 10px;
+  border-left: 3px solid #fbbf24;
+  border-radius: 4px;
+  background: rgba(251,191,36,.08);
+  color: var(--text-secondary);
+  font-size: .76rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.saved-review-note span {
+  display: block;
+  margin-bottom: 3px;
+  color: #fbbf24;
+  font-size: .65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
 /* Emotion */
 .emotion-primary {
   display: flex; align-items: center; gap: 10px;

templates/review.html

@@ -7,8 +7,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com"/>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
-  <link rel="stylesheet" href="/static/style.css?v=20261002c"/>
-  <link rel="stylesheet" href="/static/admin.css?v=20261002b"/>
+  <link rel="stylesheet" href="/static/style.css?v=20261031a"/>
+  <link rel="stylesheet" href="/static/admin.css?v=20261031a"/>
 </head>
 <body>
   <!-- Header -->
@@ -80,7 +80,8 @@
           <span class="legend-item"><span class="legend-dot listener"></span>Listener</span>
         </div>
       </div>
-      <div class="selection-hint" id="selectionHint">✏️ Bôi đen đoạn text trong hội thoại để chọn evidence — nhấn <strong>Esc</strong> để huỷ</div>
+      <div class="selection-hint" id="selectionHint">Bôi đen đoạn text trong hội thoại để chọn evidence. Nếu muốn thay quote cũ, hãy xoá hết text trong ô Evidence Quote trước; nút Restore có thể khôi phục giá trị đã lưu. Nhấn <strong>Esc</strong> để huỷ chọn.</div>
+      <div class="evidence-status" id="evidenceStatus" role="status" aria-live="polite" hidden></div>
       <div class="conversation-view" id="conversationView"></div>
     </section>
 
@@ -96,6 +97,7 @@
           </div>
           <h3>Case Formulation (5P)</h3>
           <button class="edit-toggle-btn" id="editCaseFormulationBtn" data-card="caseFormulation">✏️ Edit</button>
+          <button class="edit-cancel-btn" data-cancel-card="caseFormulation" type="button" hidden>Cancel</button>
         </div>
         <div id="caseFormulationContent" class="anno-content"></div>
       </div>
@@ -109,6 +111,7 @@
           </div>
           <h3>Emotion</h3>
           <button class="edit-toggle-btn" id="editEmotionBtn" data-card="emotion">✏️ Edit</button>
+          <button class="edit-cancel-btn" data-cancel-card="emotion" type="button" hidden>Cancel</button>
         </div>
         <div id="emotionContent" class="anno-content"></div>
       </div>
@@ -122,6 +125,7 @@
           </div>
           <h3>Distortions</h3>
           <button class="edit-toggle-btn" id="editDistBtn" data-card="distortions">✏️ Edit</button>
+          <button class="edit-cancel-btn" data-cancel-card="distortions" type="button" hidden>Cancel</button>
         </div>
         <div id="distortionsContent" class="anno-content"></div>
       </div>
@@ -136,6 +140,7 @@
           <h3>Empathy</h3>
           <div class="overall-score" id="overallScore"></div>
           <button class="edit-toggle-btn" id="editEmpBtn" data-card="empathy">✏️ Edit</button>
+          <button class="edit-cancel-btn" data-cancel-card="empathy" type="button" hidden>Cancel</button>
         </div>
         <div id="empathyContent" class="anno-content"></div>
       </div>
@@ -147,17 +152,13 @@
               <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
             </svg>
           </div>
-          <h3>Your Review</h3>
+          <h3>Review Progress</h3>
           <div class="review-status-badge" id="reviewStatusBadge" style="display:none"></div>
           <button class="edit-toggle-btn" id="historyBtn" type="button">🕘 History</button>
         </div>
         <div class="anno-content">
-          <div class="review-buttons">
-            <button class="review-btn accept-btn" id="acceptBtn">✓ Accept</button>
-            <button class="review-btn reject-btn" id="rejectBtn">✗ Reject</button>
-          </div>
-          <textarea class="review-comment" id="reviewComment" placeholder="Add a comment (optional)..." rows="3"></textarea>
-          <button class="submit-review-btn" id="submitReviewBtn">Submit Review</button>
+          <p class="review-help">Add an explanation beside each annotation you change. Use Complete review even when no changes are needed.</p>
+          <button class="submit-review-btn" id="submitReviewBtn" type="button">Complete review</button>
         </div>
       </div>
     </aside>
@@ -192,6 +193,6 @@
     </button>
   </div>
 
-  <script src="/static/app.js?v=20261022a"></script>
+  <script src="/static/app.js?v=20261031a"></script>
 </body>
 </html>