Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -40,6 +40,7 @@ type Annotation = {
   end: number;   // exclusive
   category: AnnotationCategory;
   comment?: string;
+  correction?: string;
   createdAt: number;
   updatedAt: number;
 };
@@ -102,6 +103,50 @@ const mockTasks: Task[] = [
 ];
 
 const Refinity: React.FC = () => {
+  // Check if we're in tutorial mode - use state to make it reactive
+  const [isTutorialMode, setIsTutorialMode] = React.useState<boolean>(() => {
+    try {
+      return localStorage.getItem('refinityMode') === 'tutorial';
+    } catch {
+      return false;
+    }
+  });
+
+  // Listen for changes to tutorial mode
+  React.useEffect(() => {
+    const checkTutorialMode = () => {
+      try {
+        setIsTutorialMode(localStorage.getItem('refinityMode') === 'tutorial');
+      } catch {
+        setIsTutorialMode(false);
+      }
+    };
+    // Check immediately
+    checkTutorialMode();
+    // Listen for storage events (when TutorialRefinity sets it)
+    window.addEventListener('storage', checkTutorialMode);
+    // Also poll periodically to catch changes from same window
+    const interval = setInterval(checkTutorialMode, 100);
+    return () => {
+      window.removeEventListener('storage', checkTutorialMode);
+      clearInterval(interval);
+    };
+  }, []);
+
+  const getApiBase = React.useCallback((endpoint: string) => {
+    // Use localhost when running locally, otherwise use api base
+    const isLocalhost = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname);
+    const base = isLocalhost ? 'http://localhost:5000' : (((api.defaults as any)?.baseURL as string || '').replace(/\/$/, ''));
+    // Check localStorage directly to ensure we always have the latest value
+    try {
+      const mode = localStorage.getItem('refinityMode');
+      if (mode === 'tutorial') {
+        return `${base}/api/tutorial-refinity${endpoint}`;
+      }
+    } catch {}
+    return `${base}/api/refinity${endpoint}`;
+  }, []);
+
   const [stage, setStage] = React.useState<Stage>(() => {
     try {
       const h = String(window.location.hash || '');
@@ -115,6 +160,16 @@ const Refinity: React.FC = () => {
   const [tasks, setTasks] = React.useState<Task[]>([]);
   const [selectedTaskId, setSelectedTaskId] = React.useState<string>(() => {
     try {
+      // Check if in tutorial mode and restore from localStorage
+      const isTutorial = localStorage.getItem('refinityMode') === 'tutorial';
+      if (isTutorial) {
+        const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+        if (weekNumber > 0) {
+          const saved = localStorage.getItem(`tutorial_selected_task_week_${weekNumber}`);
+          if (saved) return saved;
+        }
+      }
+      // Otherwise, try URL hash
       const h = String(window.location.hash || '');
       const q = h.includes('?') ? h.slice(h.indexOf('?') + 1) : '';
       const params = new URLSearchParams(q);
@@ -254,9 +309,25 @@ const Refinity: React.FC = () => {
   const task = React.useMemo(() => tasks.find(t => t.id === selectedTaskId) || tasks[0], [tasks, selectedTaskId]);
   const taskVersions = React.useMemo(() => versions.filter(v => v.taskId === (task?.id || '')), [versions, task?.id]);
   // Load tasks
-  // Simple session cache keys
-  const TASKS_CACHE_KEY = 'refinity_tasks_cache_v1';
-  const versionsCacheKey = React.useCallback((taskId: string) => `refinity_versions_cache_${taskId}_v1`, []);
+  // Simple session cache keys - use different keys for tutorial mode to avoid conflicts
+  // Check localStorage directly for tutorial mode
+  const getTutorialMode = React.useCallback(() => {
+    try {
+      return localStorage.getItem('refinityMode') === 'tutorial';
+    } catch {
+      return false;
+    }
+  }, []);
+  
+  const TASKS_CACHE_KEY = React.useMemo(() => {
+    const isTut = getTutorialMode();
+    return isTut ? 'tutorial_refinity_tasks_cache_v1' : 'refinity_tasks_cache_v1';
+  }, [getTutorialMode]);
+  
+  const versionsCacheKey = React.useCallback((taskId: string) => {
+    const isTut = getTutorialMode();
+    return isTut ? `tutorial_refinity_versions_cache_${taskId}_v1` : `refinity_versions_cache_${taskId}_v1`;
+  }, [getTutorialMode]);
 
   React.useEffect(() => {
     (async () => {
@@ -276,18 +347,62 @@ const Refinity: React.FC = () => {
             setTasks(cached);
             if (!selectedTaskId) {
               const initTaskId = initialRouteRef.current?.taskId;
+              const isTutorial = getTutorialMode();
               if (initTaskId && cached.some((t:any)=>t.id===initTaskId)) {
                 setSelectedTaskId(initTaskId);
-              } else {
-                setSelectedTaskId(cached[0].id);
+                if (isTutorial) {
+                  const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+                  if (weekNumber > 0) {
+                    localStorage.setItem(`tutorial_selected_task_week_${weekNumber}`, initTaskId);
+                  }
+                }
+              } else if (cached.length) {
+                if (isTutorial) {
+                  const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+                  if (weekNumber > 0) {
+                    const savedTaskId = localStorage.getItem(`tutorial_selected_task_week_${weekNumber}`);
+                    if (savedTaskId && cached.some((t:any)=>t.id===savedTaskId)) {
+                      setSelectedTaskId(savedTaskId);
+                    } else {
+                      setSelectedTaskId(cached[0].id);
+                      localStorage.setItem(`tutorial_selected_task_week_${weekNumber}`, cached[0].id);
+                    }
+                  } else {
+                    setSelectedTaskId(cached[0].id);
+                  }
+                } else {
+                  setSelectedTaskId(cached[0].id);
+                }
               }
             }
           }
         } catch {}
-        const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-        const resp = await fetch(`${base}/api/refinity/tasks`);
+        // In tutorial mode, include weekNumber in query
+        let tasksUrl = getApiBase('/tasks');
+        if (getTutorialMode()) {
+          const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+          if (weekNumber > 0) {
+            tasksUrl += `?weekNumber=${weekNumber}`;
+          }
+        }
+        const resp = await fetch(tasksUrl);
         const data: any[] = await resp.json().catch(()=>[]);
-        const normalized: Task[] = Array.isArray(data) ? data.map(d => ({ id: d._id, title: d.title, sourceText: d.sourceText, createdBy: d.createdBy })) : [];
+        // In tutorial mode, only show tasks created by admin
+        let normalized: Task[] = Array.isArray(data) ? data.map(d => ({ id: d._id, title: d.title, sourceText: d.sourceText, createdBy: d.createdBy })) : [];
+        const currentTutorialMode = getTutorialMode();
+        if (currentTutorialMode) {
+          // Filter to only show admin-created tasks
+          const user = JSON.parse(localStorage.getItem('user') || '{}');
+          const isAdmin = user.role === 'admin';
+          if (!isAdmin) {
+            // Non-admin users: only show tasks created by admin
+            normalized = normalized.filter(t => {
+              // Check if task was created by admin (createdBy should be admin user ID or email)
+              // For now, we'll show all tasks and let backend filter
+              return true;
+            });
+          }
+        }
         setTasks(normalized);
         try { sessionStorage.setItem(TASKS_CACHE_KEY, JSON.stringify(normalized)); } catch {}
         // Apply initial route task selection if available
@@ -295,13 +410,41 @@ const Refinity: React.FC = () => {
         if (normalized.length) {
           if (initTaskId && normalized.some(t => t.id === initTaskId)) {
             setSelectedTaskId(initTaskId);
+            if (currentTutorialMode) {
+              const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+              if (weekNumber > 0) {
+                localStorage.setItem(`tutorial_selected_task_week_${weekNumber}`, initTaskId);
+              }
+            }
           } else if (!selectedTaskId) {
-            setSelectedTaskId(normalized[0].id);
+            // In tutorial mode, try to restore from localStorage
+            if (currentTutorialMode) {
+              const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+              if (weekNumber > 0) {
+                const savedTaskId = localStorage.getItem(`tutorial_selected_task_week_${weekNumber}`);
+                if (savedTaskId && normalized.some(t => t.id === savedTaskId)) {
+                  setSelectedTaskId(savedTaskId);
+                } else {
+                  setSelectedTaskId(normalized[0].id);
+                  localStorage.setItem(`tutorial_selected_task_week_${weekNumber}`, normalized[0].id);
+                }
+              } else {
+                setSelectedTaskId(normalized[0].id);
+              }
+            } else {
+              setSelectedTaskId(normalized[0].id);
+            }
+          } else if (currentTutorialMode && selectedTaskId && normalized.some(t => t.id === selectedTaskId)) {
+            // Persist selected task in tutorial mode
+            const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+            if (weekNumber > 0) {
+              localStorage.setItem(`tutorial_selected_task_week_${weekNumber}`, selectedTaskId);
+            }
           }
         }
       } catch {}
     })();
-  }, []);
+  }, [getApiBase, TASKS_CACHE_KEY, selectedTaskId, tasks.length, getTutorialMode]);
 
   // Load versions when task changes
   React.useEffect(() => {
@@ -311,18 +454,37 @@ const Refinity: React.FC = () => {
         // Hydrate versions from cache for instant UI
         try {
           const cached = JSON.parse(sessionStorage.getItem(versionsCacheKey(task.id)) || '[]');
-          if (Array.isArray(cached) && cached.length) {
-            setVersions(cached);
+          // In tutorial mode, filter to only show current user's versions (unless admin)
+          let filteredCache = cached;
+          const currentTutorialMode = getTutorialMode();
+          if (currentTutorialMode && !isAdmin) {
+            filteredCache = cached.filter((v: any) => v.originalAuthor === username || v.revisedBy === username);
+          }
+          if (Array.isArray(filteredCache) && filteredCache.length) {
+            setVersions(filteredCache);
             // If versionId missing but stage requests editor, default to latest cached
             if (stage === 'editor' && !currentVersionId) {
-              setCurrentVersionId(cached[cached.length - 1]?.id || null);
+              setCurrentVersionId(filteredCache[filteredCache.length - 1]?.id || null);
             }
           }
         } catch {}
-        const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-        const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(task.id)}/versions`);
+        // Send user identification headers for backend filtering
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        const headers: any = {};
+        if (user.name) headers['x-user-name'] = user.name;
+        if (user.email) headers['x-user-email'] = user.email;
+        if (user.role === 'admin') {
+          headers['x-user-role'] = 'admin';
+          headers['user-role'] = 'admin';
+        }
+        const resp = await fetch(getApiBase(`/tasks/${encodeURIComponent(task.id)}/versions`), { headers });
         const data: any[] = await resp.json().catch(()=>[]);
-        const normalized: Version[] = Array.isArray(data) ? data.map(d => ({ id: d._id, taskId: d.taskId, originalAuthor: d.originalAuthor, revisedBy: d.revisedBy, versionNumber: d.versionNumber, content: d.content, parentVersionId: d.parentVersionId })) : [];
+        let normalized: Version[] = Array.isArray(data) ? data.map(d => ({ id: d._id, taskId: d.taskId, originalAuthor: d.originalAuthor, revisedBy: d.revisedBy, versionNumber: d.versionNumber, content: d.content, parentVersionId: d.parentVersionId })) : [];
+        // In tutorial mode, filter to only show current user's versions (unless admin)
+        const currentTutorialMode = getTutorialMode();
+        if (currentTutorialMode && !isAdmin) {
+          normalized = normalized.filter(v => v.originalAuthor === username || v.revisedBy === username);
+        }
         setVersions(normalized);
         try { sessionStorage.setItem(versionsCacheKey(task.id), JSON.stringify(normalized)); } catch {}
         // Restore stage/version from initial route if present
@@ -358,14 +520,13 @@ const Refinity: React.FC = () => {
         }
       } catch { setVersions([]); }
     })();
-  }, [task?.id]);
+  }, [task?.id, getApiBase, getTutorialMode, versionsCacheKey, isAdmin]);
 
   const deleteVersion = React.useCallback(async (versionId: string) => {
     try {
       const ok = window.confirm('Delete this version? This cannot be undone.');
       if (!ok) return;
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/versions/${encodeURIComponent(versionId)}`, {
+      const resp = await fetch(getApiBase(`/versions/${encodeURIComponent(versionId)}`), {
         method: 'DELETE',
         headers: { 'x-user-name': username, ...(isAdmin ? { 'x-user-role': 'admin' } : {}) }
       });
@@ -375,8 +536,7 @@ const Refinity: React.FC = () => {
   }, [isAdmin, username]);
 
   const saveEditedVersion = React.useCallback(async (versionId: string, newContent: string) => {
-    const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-    const resp = await fetch(`${base}/api/refinity/versions/${encodeURIComponent(versionId)}`, {
+    const resp = await fetch(getApiBase(`/versions/${encodeURIComponent(versionId)}`), {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json', 'x-user-name': username },
       body: JSON.stringify({ content: newContent })
@@ -400,10 +560,21 @@ const Refinity: React.FC = () => {
     if (!selectedTaskId) return;
     setSavingTaskEdit(true);
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(selectedTaskId)}`, {
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      const viewMode = (localStorage.getItem('viewMode') || 'auto');
+      const effectiveRole = viewMode === 'student' ? 'student' : (user.role || 'visitor');
+      
+      const headers: any = { 'Content-Type': 'application/json', 'x-user-name': username };
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+      }
+      headers['x-user-role'] = effectiveRole;
+      headers['user-role'] = effectiveRole;
+      
+      const resp = await fetch(getApiBase(`/tasks/${encodeURIComponent(selectedTaskId)}`), {
         method: 'PUT',
-        headers: { 'Content-Type': 'application/json', 'x-user-name': username },
+        headers,
         body: JSON.stringify({ title: editTaskTitle, sourceText: editTaskSource })
       });
       const updated = await resp.json().catch(()=>({}));
@@ -415,7 +586,7 @@ const Refinity: React.FC = () => {
     } finally {
       setSavingTaskEdit(false);
     }
-  }, [selectedTaskId, editTaskTitle, editTaskSource, username]);
+  }, [selectedTaskId, editTaskTitle, editTaskSource, username, getApiBase, isAdmin]);
 
   const [flowIndex, setFlowIndex] = React.useState<number>(0);
   // Keep URL hash in sync with primary navigation state
@@ -634,7 +805,8 @@ const Refinity: React.FC = () => {
       const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
       const form = new FormData();
       form.append('file', file);
-      const resp = await fetch(`${base}/api/refinity/parse`, { method: 'POST', body: form });
+      const parseEndpoint = getTutorialMode() ? '/api/tutorial-refinity/parse' : '/api/refinity/parse';
+      const resp = await fetch(`${base}${parseEndpoint}`, { method: 'POST', body: form });
       const data = await resp.json().catch(()=>({}));
       if (!resp.ok) throw new Error(data?.error || 'Failed to parse document');
       setNewTaskSource(String(data?.text || ''));
@@ -648,9 +820,26 @@ const Refinity: React.FC = () => {
     const src = newTaskSource.trim();
     if (!title || !src) return;
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
       const body = { title, sourceText: src, createdBy: username };
-      const resp = await fetch(`${base}/api/refinity/tasks`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (getTutorialMode()) {
+        // In tutorial mode, include week number
+        const weekNumber = parseInt(localStorage.getItem('tutorialWeekNumber') || '0');
+        (body as any).weekNumber = weekNumber;
+      }
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      const viewMode = (localStorage.getItem('viewMode') || 'auto');
+      const effectiveRole = viewMode === 'student' ? 'student' : (user.role || 'visitor');
+      
+      const headers: any = { 'Content-Type': 'application/json', 'x-user-name': username };
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+      }
+      // Always send role header
+      headers['x-user-role'] = effectiveRole;
+      headers['user-role'] = effectiveRole; // Also send without x- prefix for compatibility
+      
+      const resp = await fetch(getApiBase('/tasks'), { method: 'POST', headers, body: JSON.stringify(body) });
       const saved = await resp.json().catch(()=>({}));
       if (!resp.ok) throw new Error(saved?.error || 'Save failed');
       const t: Task = { id: saved._id, title: saved.title, sourceText: saved.sourceText, createdBy: saved.createdBy };
@@ -693,19 +882,41 @@ const Refinity: React.FC = () => {
 
   const submitPastedTranslation = async () => {
     const text = (pastedTranslation || '').trim();
-    if (!text) return;
+    if (!text || !task?.id) return;
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(task?.id || '')}/versions`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ originalAuthor: username, revisedBy: undefined, content: text }) });
+      const resp = await fetch(getApiBase(`/tasks/${encodeURIComponent(task.id)}/versions`), { 
+        method: 'POST', 
+        headers: { 'Content-Type': 'application/json' }, 
+        body: JSON.stringify({ originalAuthor: username, revisedBy: undefined, content: text }) 
+      });
       const saved = await resp.json().catch(()=>({}));
-      if (!resp.ok) throw new Error(saved?.error || 'Failed to save version');
-      const newVersion: Version = { id: saved._id, taskId: saved.taskId, originalAuthor: saved.originalAuthor, revisedBy: saved.revisedBy, versionNumber: saved.versionNumber, content: saved.content, parentVersionId: saved.parentVersionId };
+      if (!resp.ok) {
+        console.error('Failed to save version:', saved?.error || 'Unknown error', saved);
+        throw new Error(saved?.error || 'Failed to save version');
+      }
+      const newVersion: Version = { 
+        id: saved._id, 
+        taskId: saved.taskId, 
+        originalAuthor: saved.originalAuthor, 
+        revisedBy: saved.revisedBy, 
+        versionNumber: saved.versionNumber, 
+        content: saved.content, 
+        parentVersionId: saved.parentVersionId 
+      };
       setVersions(prev => [...prev, newVersion]);
-      setCurrentVersionId(newVersion.id);
+      // Update cache
+      try {
+        const cacheKey = versionsCacheKey(task.id);
+        const cached = JSON.parse(sessionStorage.getItem(cacheKey) || '[]');
+        const updated = [...cached, newVersion];
+        sessionStorage.setItem(cacheKey, JSON.stringify(updated));
+      } catch {}
       setPastedTranslation('');
-      setCurrentVersionId(null);
+      setCurrentVersionId(newVersion.id);
       setStage('flow');
-    } catch {}
+    } catch (e) {
+      console.error('Error saving draft translation:', e);
+    }
   };
 
   const selectManual = (id: string) => {
@@ -718,10 +929,9 @@ const Refinity: React.FC = () => {
       if (!task?.id) return;
       const ok = window.confirm('Delete this Deep Revision task and all its versions? This cannot be undone.');
       if (!ok) return;
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
       const headers: any = { 'x-user-name': username };
       if (isAdmin) headers['x-user-role'] = 'admin';
-      const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(task.id)}`, { method: 'DELETE', headers });
+      const resp = await fetch(getApiBase(`/tasks/${encodeURIComponent(task.id)}`), { method: 'DELETE', headers });
       if (!resp.ok) throw new Error('Delete failed');
       setTasks(prev => prev.filter(t => t.id !== task.id));
       setVersions([]);
@@ -734,11 +944,11 @@ const Refinity: React.FC = () => {
     } catch {}
   }, [isAdmin, task?.id, tasks, username]);
 
-  const handleSaveRevision = async (newContent: string) => {
+  const handleSaveRevision = React.useCallback(async (newContent: string) => {
     const parent = taskVersions.find(v => v.id === currentVersionId);
+    if (!task?.id) return;
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/tasks/${encodeURIComponent(task?.id || '')}/versions`, {
+      const resp = await fetch(getApiBase(`/tasks/${encodeURIComponent(task.id)}/versions`), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -749,7 +959,10 @@ const Refinity: React.FC = () => {
         })
       });
       const saved = await resp.json().catch(()=>({}));
-      if (!resp.ok) throw new Error(saved?.error || 'Save failed');
+      if (!resp.ok) {
+        console.error('Failed to save revision:', saved?.error || 'Unknown error', saved);
+        throw new Error(saved?.error || 'Save failed');
+      }
       const v: Version = {
         id: saved._id,
         taskId: saved.taskId,
@@ -760,13 +973,21 @@ const Refinity: React.FC = () => {
         parentVersionId: saved.parentVersionId,
       };
       setVersions(prev => [...prev, v]);
+      // Update cache
+      try {
+        const cacheKey = versionsCacheKey(task.id);
+        const cached = JSON.parse(sessionStorage.getItem(cacheKey) || '[]');
+        const updated = [...cached, v];
+        sessionStorage.setItem(cacheKey, JSON.stringify(updated));
+      } catch {}
       setCurrentVersionId(v.id);
       // Navigate to flow to view the new version without clearing selection
       setStage('flow');
-    } catch {
+    } catch (e) {
+      console.error('Error saving revision:', e);
       // no-op; keep user in editor if needed
     }
-  };
+  }, [task, taskVersions, currentVersionId, username, getApiBase, versionsCacheKey, getTutorialMode]);
 
   return (
     <div className={isFullscreen ? 'fixed inset-0 z-50 bg-white overflow-auto' : 'relative'}>
@@ -927,9 +1148,11 @@ const Refinity: React.FC = () => {
               <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
               <span className="relative z-10">Start</span>
             </button>
+            {(!getTutorialMode() || isAdmin) && (
             <button onClick={()=>setShowAddTask(v=>!v)} className="relative inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-violet-700 ring-1 ring-inset ring-violet-300 bg-white/20 backdrop-blur-md hover:bg-violet-50 active:translate-y-0.5 transition-all duration-200">
               <span className="relative z-10">New Task</span>
             </button>
+            )}
             {(isAdmin || String(username).toLowerCase()===String(tasks.find(t=>t.id===selectedTaskId)?.createdBy||'').toLowerCase()) && task?.id && (
               <div className="flex items-center gap-2">
                 <button onClick={openEditTask} className="relative inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-gray-800 ring-1 ring-inset ring-gray-300 bg-white/20 backdrop-blur-md hover:bg-gray-100 active:translate-y-0.5 transition-all duration-200">
@@ -1281,7 +1504,7 @@ const Refinity: React.FC = () => {
                     <div className="relative">
                       <button ref={compareBtnRef} onClick={(e)=>{ e.preventDefault(); const r=(e.currentTarget as HTMLElement).getBoundingClientRect(); setCompareMenuPos({ left: r.left, top: r.bottom + 8 }); setCompareDownloadOpen(v=>!v); }} disabled={!compareA || !compareB || compareA===compareB} className="px-3 py-2 text-sm rounded-md border border-gray-300 bg-white">Download ▾</button>
                       {compareDownloadOpen && compareMenuPos && createPortal(
-                        <div style={{ position: 'fixed', left: compareMenuPos.left, top: compareMenuPos.top, zIndex: 10000 }} className="w-44 rounded-md border border-gray-200 bg-white shadow-lg text-left">
+                        <div style={{ position: 'fixed', left: compareMenuPos.left, top: compareMenuPos.top, zIndex: 10000 }} className="w-52 rounded-md border border-gray-200 bg-white shadow-lg text-left">
                           <button onClick={async()=>{
                             setCompareDownloadOpen(false);
                             const a = taskVersions.find(v=>v.id===compareA);
@@ -1335,6 +1558,45 @@ const Refinity: React.FC = () => {
                               link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                             } catch {}
                           }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Tracked Changes</button>
+                          <button onClick={async()=>{
+                            setCompareDownloadOpen(false);
+                            const a = taskVersions.find(v=>v.id===compareA);
+                            const b = taskVersions.find(v=>v.id===compareB);
+                            if (!a || !b || a.id===b.id) return;
+                            try {
+                              const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/,'');
+                              const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                              const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                              const latestReviser = (newer.revisedBy || newer.originalAuthor || username || 'User');
+                              const A = older.versionNumber, B = newer.versionNumber;
+                              const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_CommentsSidebar_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
+                              const body: any = {
+                                prev: older.content || '',
+                                current: newer.content || '',
+                                filename,
+                                authorName: latestReviser,
+                                annotationVersionId: older.id,
+                              };
+                              let resp = await fetch(getApiBase('/compare-comments-with-corrections'), {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(body),
+                              });
+                              if (!resp.ok) {
+                                // Fallback to plain export of older text
+                                resp = await fetch(getApiBase('/export-plain'), {
+                                  method: 'POST',
+                                  headers: { 'Content-Type': 'application/json' },
+                                  body: JSON.stringify({ current: older.content || '', filename }),
+                                });
+                              }
+                              if (!resp.ok) throw new Error('Export failed');
+                              const blob = await resp.blob();
+                              const url = window.URL.createObjectURL(blob);
+                              const link = document.createElement('a');
+                              link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
+                            } catch {}
+                          }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Sidebar Comments</button>
                         </div>, document.body
                       )}
                     </div>
@@ -1379,7 +1641,7 @@ const Refinity: React.FC = () => {
             ` }} />
           </div>
           {compareModalOpen && (
-            <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" role="dialog" aria-modal="true" key="compare-modal">
               <div className="relative max-w-5xl w-full max-h-[85vh] rounded-2xl bg-white shadow-2xl ring-1 ring-gray-200 p-0 overflow-hidden">
                 <div className="flex items-center justify-between px-6 pt-5 pb-3 border-b sticky top-0 z-10 bg-white">
                   <div className="text-gray-800 font-medium">Diff</div>
@@ -1424,6 +1686,44 @@ const Refinity: React.FC = () => {
                         link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                       } catch {}
                     }} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Export (Tracked Changes)</button>
+                    <button onClick={async()=>{
+                      try {
+                        const a = taskVersions.find(v=>v.id===lastDiffIds.a || v.id===compareA);
+                        const b = taskVersions.find(v=>v.id===lastDiffIds.b || v.id===compareB);
+                        if (!a || !b || a.id===b.id) return;
+                        const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/,'');
+                        const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                        const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                        const latestReviser = (newer?.revisedBy || newer?.originalAuthor || username || 'User');
+                        const A = older.versionNumber, B = newer.versionNumber;
+                        const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_SidebarComments_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
+                        const body: any = {
+                          prev: older.content || '',
+                          current: newer.content || '',
+                          filename,
+                          authorName: latestReviser,
+                          annotationVersionId: older.id,
+                        };
+                        let resp = await fetch(getApiBase('/compare-comments-with-corrections'), {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify(body),
+                        });
+                        if (!resp.ok) {
+                          // Fallback to plain export of older text
+                          resp = await fetch(getApiBase('/export-plain'), {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ current: older.content || '', filename }),
+                          });
+                        }
+                        if (!resp.ok) throw new Error('Export failed');
+                        const blob = await resp.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
+                      } catch {}
+                    }} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Export (Sidebar Comments)</button>
                     <button onClick={()=>setCompareModalOpen(false)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Close</button>
                   </div>
                 </div>
@@ -1463,6 +1763,7 @@ const Refinity: React.FC = () => {
             <EditorPane
               source={task?.sourceText || ''}
               initialTranslation={currentVersion?.content || ''}
+              getApiBase={getApiBase}
               onBack={()=>setStage('flow')}
               onSave={handleSaveRevision}
               onSaveEdit={editingVersionId ? ((text)=>saveEditedVersion(editingVersionId, text)) : undefined}
@@ -1481,7 +1782,7 @@ const Refinity: React.FC = () => {
   );
 };
 
-const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void; onSaveEdit?: (text: string)=>void; taskTitle: string; username: string; nextVersionNumber: number; isFullscreen: boolean; onToggleFullscreen: ()=>void; versionId: string }>=({ source, initialTranslation, onBack, onSave, onSaveEdit, taskTitle, username, nextVersionNumber, isFullscreen, onToggleFullscreen, versionId })=>{
+const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void; onSaveEdit?: (text: string)=>void; taskTitle: string; username: string; nextVersionNumber: number; isFullscreen: boolean; onToggleFullscreen: ()=>void; versionId: string; getApiBase: (endpoint: string) => string }>=({ source, initialTranslation, onBack, onSave, onSaveEdit, taskTitle, username, nextVersionNumber, isFullscreen, onToggleFullscreen, versionId, getApiBase })=>{
   const [text, setText] = React.useState<string>(initialTranslation);
   const [saving, setSaving] = React.useState(false);
   // Sync text with incoming props when version/context changes (e.g., refresh -> data loads)
@@ -1492,7 +1793,10 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const [showDiff, setShowDiff] = React.useState<boolean>(false);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);
   const [revMenuPos, setRevMenuPos] = React.useState<{ left: number; top: number } | null>(null);
+  const [diffDownloadOpen, setDiffDownloadOpen] = React.useState<boolean>(false);
+  const [diffMenuPos, setDiffMenuPos] = React.useState<{ left: number; top: number } | null>(null);
   const revBtnRef = React.useRef<HTMLButtonElement | null>(null);
+  const diffBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const sourceRef = React.useRef<HTMLDivElement>(null);
   const [textareaHeight, setTextareaHeight] = React.useState('420px');
   const [commentsOpen, setCommentsOpen] = React.useState(false);
@@ -1501,16 +1805,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const taRef = React.useRef<HTMLTextAreaElement | null>(null);
   const overlayRef = React.useRef<HTMLDivElement | null>(null);
   const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+  const annotatedRef = React.useRef<HTMLDivElement | null>(null);
   // Annotation layer state (revision mode only)
   const [showAnnotations, setShowAnnotations] = React.useState<boolean>(true);
-  // Comment-first workflow state (per-version; persisted in sessionStorage)
-  const [commentsSaved, setCommentsSaved] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    try {
-      const v = sessionStorage.getItem(`refinity_comments_saved_${versionId}`) === '1';
-      setCommentsSaved(!!v);
-    } catch { setCommentsSaved(false); }
-  }, [versionId]);
   const [toastMsg, setToastMsg] = React.useState<string>('');
   const [dirty, setDirty] = React.useState<boolean>(false);
   React.useEffect(() => { setDirty(false); }, [versionId, initialTranslation]);
@@ -1522,35 +1819,6 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     return () => window.removeEventListener('beforeunload', handler);
   }, [dirty]);
   const showToast = (msg: string) => { setToastMsg(msg); setTimeout(()=>setToastMsg(''), 1800); };
-  const statusRef = React.useRef<HTMLDivElement | null>(null);
-  const [statusH, setStatusH] = React.useState<number>(0);
-  React.useLayoutEffect(() => {
-    const el = statusRef.current;
-    if (!el) { setStatusH(0); return; }
-    const compute = () => {
-      const h = el.offsetHeight || 0;
-      let mt = 0, mb = 0;
-      try {
-        const cs = window.getComputedStyle(el);
-        mt = parseFloat(cs.marginTop || '0') || 0;
-        mb = parseFloat(cs.marginBottom || '0') || 0;
-      } catch {}
-      setStatusH(h + mt + mb);
-    };
-    compute();
-    // Track dynamic changes without layout flicker
-    let ro: ResizeObserver | null = null;
-    try {
-      ro = new ResizeObserver(() => compute());
-      ro.observe(el);
-    } catch {}
-    const onResize = () => compute();
-    window.addEventListener('resize', onResize);
-    return () => {
-      window.removeEventListener('resize', onResize);
-      if (ro) try { ro.disconnect(); } catch {}
-    };
-  }, [commentsSaved]);
   const ANNO_STORE_KEY = 'refinity_annotations_v1';
   type Ann = Annotation;
   const loadAnnotations = React.useCallback((): Ann[] => {
@@ -1578,6 +1846,11 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const [editingAnn, setEditingAnn] = React.useState<Ann | null>(null);
   const [modalCategory, setModalCategory] = React.useState<AnnotationCategory>('distortion');
   const [modalComment, setModalComment] = React.useState('');
+  const [modalCorrection, setModalCorrection] = React.useState('');
+  const [modalIsDeletion, setModalIsDeletion] = React.useState(false);
+  const [modalSelectedText, setModalSelectedText] = React.useState('');
+  const [modalSourceSnippet, setModalSourceSnippet] = React.useState('');
+  const [showSourcePane, setShowSourcePane] = React.useState(false);
   const [popover, setPopover] = React.useState<{ left: number; top: number; start: number; end: number } | null>(null);
 
   function escapeHtml(s: string): string {
@@ -1588,61 +1861,117 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     (async () => {
       if (!versionId) return;
       try {
-        const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-        const resp = await fetch(`${base}/api/refinity/annotations?versionId=${encodeURIComponent(versionId)}`);
+        const resp = await fetch(getApiBase(`/annotations?versionId=${encodeURIComponent(versionId)}`));
         const rows = await resp.json().catch(()=>[]);
         if (Array.isArray(rows)) {
           setAnnotations(prev => {
             const others = prev.filter(a => a.versionId !== versionId);
-            const loaded = rows.map((r:any)=>({ id: r._id, versionId: r.versionId, start: r.start, end: r.end, category: r.category, comment: r.comment, createdAt: r.createdAt, updatedAt: r.updatedAt }));
+            const loaded = rows.map((r:any)=>{
+              const existing = prev.find(a => a.id === r._id);
+              return {
+                id: r._id,
+                versionId: r.versionId,
+                start: r.start,
+                end: r.end,
+                category: r.category,
+                comment: r.comment,
+                correction: existing?.correction,
+                createdAt: r.createdAt,
+                updatedAt: r.updatedAt,
+              } as Ann;
+            });
             return [...others, ...loaded];
           });
         }
       } catch {}
     })();
-  }, [versionId]);
+  }, [versionId, getApiBase]);
 
   // Persistence helpers
   const persistCreate = React.useCallback(async (a: Ann): Promise<Ann> => {
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const body = { versionId: a.versionId, start: a.start, end: a.end, category: a.category, comment: a.comment };
-      const resp = await fetch(`${base}/api/refinity/annotations`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      const body = { versionId: a.versionId, start: a.start, end: a.end, category: a.category, comment: a.comment, correction: a.correction };
+      const resp = await fetch(getApiBase('/annotations'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
       const row = await resp.json().catch(()=>({}));
       if (resp.ok && row && row._id) return { ...a, id: row._id };
     } catch {}
     return a;
-  }, []);
+  }, [getApiBase]);
   const persistUpdate = React.useCallback(async (a: Ann) => {
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const body = { start: a.start, end: a.end, category: a.category, comment: a.comment };
-      await fetch(`${base}/api/refinity/annotations/${encodeURIComponent(a.id)}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      const body = { start: a.start, end: a.end, category: a.category, comment: a.comment, correction: a.correction };
+      await fetch(getApiBase(`/annotations/${encodeURIComponent(a.id)}`), { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
     } catch {}
-  }, []);
+  }, [getApiBase]);
   const persistDelete = React.useCallback(async (id: string) => {
     try {
-      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      await fetch(`${base}/api/refinity/annotations/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      await fetch(getApiBase(`/annotations/${encodeURIComponent(id)}`), { method: 'DELETE' });
     } catch {}
-  }, []);
+  }, [getApiBase]);
   function renderAnnotatedHtml(textValue: string): string {
-    if (!showAnnotations) return escapeHtml(textValue);
+    // Always wrap text in spans with data-start/data-end for selection offset calculation
+    // even when annotations are disabled or empty
+    if (!showAnnotations || !versionAnnotations.length) {
+      return `<span data-start="0" data-end="${textValue.length}">${escapeHtml(textValue)}</span>`;
+    }
+    
     const list = versionAnnotations.slice().sort((a,b)=>a.start-b.start);
-    if (!list.length) return escapeHtml(textValue);
     let html = ''; let pos = 0;
     for (const a of list) {
       const start = Math.max(0, Math.min(a.start, textValue.length));
       const end = Math.max(start, Math.min(a.end, textValue.length));
-      if (pos < start) html += escapeHtml(textValue.slice(pos, start));
+      if (start > pos) {
+        const plain = textValue.slice(pos, start);
+        if (plain) {
+          html += `<span data-start="${pos}" data-end="${start}">${escapeHtml(plain)}</span>`;
+        }
+      }
       const cls = CATEGORY_CLASS[a.category] || 'bg-gray-100';
-      const span = escapeHtml(textValue.slice(start, end)) || '&nbsp;';
-      html += `<span data-anno-id="${a.id}" class="inline rounded-[4px] ${cls}" title="${a.category}${a.comment ? ': '+escapeHtml(a.comment) : ''}">${span}</span>`;
+      const spanText = escapeHtml(textValue.slice(start, end)) || '&nbsp;';
+      html += `<span data-anno-id="${a.id}" data-start="${start}" data-end="${end}" class="inline rounded-[4px] ${cls}" title="${a.category}${a.comment ? ': '+escapeHtml(a.comment) : ''}">${spanText}</span>`;
       pos = end;
     }
-    if (pos < textValue.length) html += escapeHtml(textValue.slice(pos));
+    if (pos < textValue.length) {
+      const tail = textValue.slice(pos);
+      if (tail) {
+        html += `<span data-start="${pos}" data-end="${textValue.length}">${escapeHtml(tail)}</span>`;
+      }
+    }
     return html;
   }
+
+  // Helper: find paragraph snippet in source text that roughly corresponds to the
+  // paragraph containing the given offset in the translation text.
+  function computeSourceSnippetForOffset(sourceText: string, translationText: string, offset: number): string {
+    if (!sourceText || !translationText) return '';
+    type Range = { start: number; end: number };
+    const makeRanges = (textValue: string): Range[] => {
+      const ranges: Range[] = [];
+      let start = 0;
+      const len = textValue.length;
+      for (let i = 0; i < len; i++) {
+        // Treat two or more consecutive newlines as a paragraph separator
+        if (textValue[i] === '\n' && textValue[i + 1] === '\n') {
+          ranges.push({ start, end: i });
+          // Skip all consecutive newlines
+          let j = i + 1;
+          while (j < len && textValue[j] === '\n') j++;
+          start = j;
+          i = j - 1;
+        } else if (i === len - 1) {
+          ranges.push({ start, end: len });
+        }
+      }
+      if (!ranges.length) ranges.push({ start: 0, end: len });
+      return ranges;
+    };
+    const trRanges = makeRanges(translationText);
+    const srcRanges = makeRanges(sourceText);
+    const idx = trRanges.findIndex(r => offset >= r.start && offset <= r.end);
+    const srcIdx = idx >= 0 ? Math.min(idx, srcRanges.length - 1) : 0;
+    const r = srcRanges[srcIdx];
+    return sourceText.slice(r.start, r.end).trim();
+  }
   // Adjust annotations when text changes so highlights track or are removed
   const adjustAnnotationsForEdit = React.useCallback((oldText: string, newText: string) => {
     if (oldText === newText) return;
@@ -1673,32 +2002,122 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       return [...others, ...adjusted];
     });
   }, [versionId, setAnnotations]);
-  function offsetsToClientRect(container: HTMLElement, start: number, end: number): DOMRect | null {
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
-    let charCount = 0;
-    let startNode: Text | null = null, endNode: Text | null = null;
-    let startOffset = 0, endOffset = 0;
-    while (walker.nextNode()) {
-      const node = walker.currentNode as Text;
-      const len = (node.nodeValue || '').length;
-      if (!startNode && charCount + len >= start) { startNode = node; startOffset = start - charCount; }
-      if (!endNode && charCount + len >= end) { endNode = node; endOffset = end - charCount; break; }
-      charCount += len;
+
+  // Map current selection within annotatedRef to plain-text offsets in `text`,
+  // using data-start/data-end spans emitted by renderAnnotatedHtml for exact mapping.
+  function getOffsetsFromSelection(): { start: number; end: number; rect: DOMRect | null } | null {
+    const container = annotatedRef.current;
+    if (!container) return null;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    const range = sel.getRangeAt(0);
+    if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return null;
+
+    const resolveOffset = (node: Node, offset: number): number | null => {
+      // Find the containing span with data-start attribute
+      let el: HTMLElement | null = (node.nodeType === Node.ELEMENT_NODE 
+        ? node as HTMLElement 
+        : node.parentElement as HTMLElement | null);
+      
+      while (el && el !== container && !el.hasAttribute('data-start')) {
+        el = el.parentElement;
+      }
+      
+      if (!el || !el.hasAttribute('data-start')) {
+        // Fallback: try to find any span with data-start in the container
+        const allSpans = container.querySelectorAll('[data-start]');
+        if (allSpans.length === 0) return null;
+        // Use first span as fallback
+        el = allSpans[0] as HTMLElement;
+      }
+      
+      const baseStart = Number(el.getAttribute('data-start') || '0') || 0;
+      
+      // Create a range from the start of this span to the target node/offset
+      const r = document.createRange();
+      try {
+        r.selectNodeContents(el);
+        r.setEnd(node, offset);
+      } catch (e) {
+        // If setting end fails, return baseStart as fallback
+        return baseStart;
+      }
+      
+      const localLen = r.toString().length;
+      return baseStart + localLen;
+    };
+
+    const start = resolveOffset(range.startContainer, range.startOffset);
+    const end = resolveOffset(range.endContainer, range.endOffset);
+    
+    if (start == null || end == null) {
+      // Fallback: walk text nodes to calculate offset
+      try {
+        const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+        let charCount = 0;
+        let startOffset = -1;
+        let endOffset = -1;
+        
+        while (walker.nextNode()) {
+          const node = walker.currentNode as Text;
+          const nodeText = node.nodeValue || '';
+          
+          if (node === range.startContainer) {
+            startOffset = charCount + range.startOffset;
+          }
+          if (node === range.endContainer) {
+            endOffset = charCount + range.endOffset;
+            break;
+          }
+          
+          charCount += nodeText.length;
+        }
+        
+        if (startOffset >= 0 && endOffset >= 0 && endOffset > startOffset) {
+          const rect = range.getBoundingClientRect();
+          return { start: startOffset, end: endOffset, rect };
+        }
+      } catch (e) {
+        console.debug('[getOffsetsFromSelection] fallback failed:', e);
+      }
+      return null;
     }
-    if (!startNode || !endNode) return null;
-    const r = document.createRange();
-    r.setStart(startNode, Math.max(0, Math.min(startOffset, (startNode.nodeValue||'').length)));
-    r.setEnd(endNode, Math.max(0, Math.min(endOffset, (endNode.nodeValue||'').length)));
-    const rect = r.getBoundingClientRect();
-    return rect;
+    
+    const rect = range.getBoundingClientRect();
+    return { start, end, rect };
   }
+
   const updateSelectionPopover = React.useCallback(() => {
-    const ta = taRef.current, ov = overlayRef.current, wrap = wrapperRef.current;
-    if (!ta || !ov || !wrap) { setPopover(null); return; }
-    const s = ta.selectionStart ?? 0, e = ta.selectionEnd ?? 0;
-    if (e - s <= 0) { setPopover(null); return; }
-    const rect = offsetsToClientRect(ov, s, e);
-    if (!rect) { setPopover(null); return; }
+    const wrap = wrapperRef.current;
+    const container = annotatedRef.current;
+    if (!wrap || !container) { 
+      setPopover(null); 
+      return; 
+    }
+    
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) { 
+      setPopover(null); 
+      return; 
+    }
+    
+    const res = getOffsetsFromSelection();
+    if (!res) { 
+      setPopover(null); 
+      return; 
+    }
+    
+    const { start, end, rect } = res;
+    if (!rect) { 
+      setPopover(null); 
+      return; 
+    }
+    
+    if (end <= start) { 
+      setPopover(null); 
+      return; 
+    }
+    
     const wrect = wrap.getBoundingClientRect();
     const btnW = 120, btnH = 30, padding = 6;
     // Center over the selection; clamp within container
@@ -1709,7 +2128,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     if (top < padding) {
       top = rect.bottom - wrect.top + padding;
     }
-    setPopover({ left, top, start: s, end: e });
+    
+    setPopover({ left, top, start, end });
   }, []);
 
   React.useEffect(() => {
@@ -1741,6 +2161,54 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     return () => window.removeEventListener('resize', onResize);
   }, []);
 
+  // Keep overlay aligned and font-synced with textarea across renders/toggles
+  React.useLayoutEffect(() => {
+    const ta = taRef.current;
+    const ov = overlayRef.current;
+    if (!ta || !ov) return;
+    // Scroll alignment
+    ov.style.transform = `translateY(-${ta.scrollTop}px)`;
+    // Font/layout alignment
+    try {
+      const cs = window.getComputedStyle(ta);
+      ov.style.fontFamily = cs.fontFamily;
+      ov.style.fontSize = cs.fontSize;
+      ov.style.lineHeight = cs.lineHeight;
+      ov.style.letterSpacing = cs.letterSpacing;
+      ov.style.whiteSpace = cs.whiteSpace;
+    } catch {}
+  }, [showAnnotations, text, textareaHeight, isFullscreen]);
+
+  // Build corrected text from original text and annotation corrections
+  const buildCorrectedText = React.useCallback((): string => {
+    const base = initialTranslation || '';
+    if (!versionAnnotations.length) return base;
+    const anns = versionAnnotations
+      .filter(a => typeof a.correction === 'string' && a.correction.trim().length > 0)
+      .slice()
+      .sort((a, b) => a.start - b.start || a.end - b.end);
+    if (!anns.length) return base;
+    let result = '';
+    let pos = 0;
+    for (const a of anns) {
+      const start = Math.max(0, Math.min(a.start, base.length));
+      const end = Math.max(start, Math.min(a.end, base.length));
+      if (start < pos) {
+        // overlapping or out-of-order; skip this annotation to avoid corrupting text
+        continue;
+      }
+      if (pos < start) {
+        result += base.slice(pos, start);
+      }
+      result += a.correction as string;
+      pos = end;
+    }
+    if (pos < base.length) {
+      result += base.slice(pos);
+    }
+    return result;
+  }, [initialTranslation, versionAnnotations]);
+
   // Keep overlay aligned with textarea scroll position across renders/toggles
   React.useLayoutEffect(() => {
     const ta = taRef.current;
@@ -1753,9 +2221,12 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     setSaving(true);
     try {
       if (onSaveEdit) {
+        // Editing mode: save the text as-is
         await onSaveEdit(text);
       } else {
-        onSave(text);
+        // Revision mode: apply all corrections from annotations before saving
+        const correctedText = buildCorrectedText();
+        onSave(correctedText);
       }
     } finally {
       setSaving(false);
@@ -1765,7 +2236,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const compareNow = async ()=>{
     try {
       const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/diff`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '' }) });
+      // Use corrected text for comparison if in revision mode (not editing mode)
+      const currentText = onSaveEdit ? text : buildCorrectedText();
+      const resp = await fetch(`${base}/api/refinity/diff`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: currentText || '' }) });
       const data = await resp.json().catch(()=>({}));
       if (!resp.ok) throw new Error(data?.error || 'Diff failed');
       // Ensure layout preserved if backend HTML lacks <br/>
@@ -1783,7 +2256,9 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       const userNameSafe = toSafeName(username || 'User');
       const vNum = `v${nextVersionNumber}`;
       const filename = `${taskNameSafe}_${vNum}_Clean_${yyyymmdd_hhmm()}_${userNameSafe}.docx`;
-      const resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '', filename, includeComments: false }) });
+      // Use corrected text if in revision mode
+      const currentText = onSaveEdit ? text : buildCorrectedText();
+      const resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: currentText || '', filename, includeComments: false }) });
       if (!resp.ok) throw new Error('Export failed');
       const blob = await resp.blob();
       const url = window.URL.createObjectURL(blob);
@@ -1803,9 +2278,18 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     <div>
       <div className="flex items-start gap-6">
         <div className="w-1/2">
-          <div className="mb-2 text-gray-700 text-sm">Source</div>
-          {/* Spacer to align with translation status bar (exact measured height) */}
-          <div style={{ height: Math.max(0, statusH) }} />
+          <div className="mb-2 text-gray-700 text-sm flex items-center justify-between">
+            <span>Source</span>
+            <div className="flex items-center gap-2">
+              {!isFullscreen && (
+                <button
+                  className="inline-flex items-center px-2 py-1 text-xs rounded-xl opacity-0 pointer-events-none"
+                >
+                  Full Screen
+                </button>
+              )}
+            </div>
+          </div>
           <div className="relative rounded-lg overflow-hidden">
             <div className="absolute inset-0 rounded-lg" style={{ background: 'radial-gradient(120%_120%_at_0%_0%, #dbeafe 0%, #ffffff 50%, #c7d2fe 100%)' }} />
             <div ref={sourceRef} className="relative rounded-lg bg-white/60 backdrop-blur-md ring-1 ring-inset ring-indigo-300 shadow p-4 min-h-[420px] whitespace-pre-wrap text-gray-900">
@@ -1817,10 +2301,6 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           <div className="mb-2 text-gray-700 text-sm flex items-center justify-between">
             <span>Translation</span>
             <div className="flex items-center gap-2">
-              <label className="hidden md:flex items-center gap-2 text-xs text-gray-800 ring-1 ring-gray-200 rounded-xl px-2 py-0.5 bg-white/50">
-                <input type="checkbox" checked={showAnnotations} onChange={(e)=>{ setShowAnnotations(e.target.checked); setPopover(null); }} />
-                <span>Show comments</span>
-              </label>
               {!isFullscreen && (
                 <button onClick={onToggleFullscreen} className="inline-flex items-center px-2 py-1 text-xs rounded-xl bg-white/60 ring-1 ring-gray-200 text-gray-800 hover:bg-white">
                   Full Screen
@@ -1828,63 +2308,87 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               )}
             </div>
           </div>
-          {/* Status bar */}
-          <div ref={statusRef} className="mb-2 text-xs">
-            {!commentsSaved ? (
-              <div className="rounded-md bg-amber-50 text-amber-900 ring-1 ring-amber-200 px-3 py-1">Step 1: Add comments. Save to continue to editing.</div>
+            <div ref={wrapperRef} className="relative overflow-hidden">
+            {/* Single-surface annotated view (exact alignment) */}
+            {onSaveEdit ? (
+              // Editing mode: use textarea for direct editing
+              <textarea
+                value={text}
+                onChange={(e) => {
+                  setText(e.target.value);
+                  setDirty(true);
+                }}
+                className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg bg-white text-base leading-relaxed font-sans tracking-normal whitespace-pre-wrap overflow-y-auto resize-none"
+                style={{
+                  minHeight: textareaHeight,
+                  height: textareaHeight,
+                  maxHeight: textareaHeight,
+                }}
+              />
             ) : (
-              <div className="rounded-md bg-emerald-50 text-emerald-900 ring-1 ring-emerald-200 px-3 py-1">Comments saved. Editing unlocked.</div>
+              // Revision mode: use annotated div
+              <div
+                ref={annotatedRef}
+                className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg bg-white text-base leading-relaxed font-sans tracking-normal whitespace-pre-wrap overflow-y-auto select-text"
+                style={{
+                  minHeight: textareaHeight,
+                  height: textareaHeight,
+                  maxHeight: textareaHeight,
+                  userSelect: 'text',
+                  WebkitUserSelect: 'text',
+                }}
+                onMouseDown={(e) => {
+                  // Don't clear popover on mousedown - let mouseup handle it
+                  // This allows selection to work properly
+                }}
+                onMouseUp={(e) => {
+                  // Use setTimeout to ensure selection is stable
+                  setTimeout(() => {
+                    const sel = window.getSelection();
+                    if (!sel || sel.rangeCount === 0) {
+                      setPopover(null);
+                      return;
+                    }
+                    
+                    const res = getOffsetsFromSelection();
+                    if (!res) { 
+                      setPopover(null); 
+                      return; 
+                    }
+                    
+                    const { start, end } = res;
+                    if (end - start <= 0) {
+                      // collapsed caret: if inside an existing annotation, open edit modal
+                      const hit = versionAnnotations.find(a => start >= a.start && start <= a.end);
+                      if (hit) {
+                        setEditingAnn(hit);
+                        setModalCategory(hit.category);
+                        setModalComment(hit.comment || '');
+                        const selected = text.slice(hit.start, hit.end);
+                        setModalSelectedText(selected);
+                        setModalCorrection(hit.correction ?? selected);
+                        setModalIsDeletion(false);
+                        setModalSourceSnippet(
+                          computeSourceSnippetForOffset(source, text, hit.start)
+                        );
+                        setShowSourcePane(false);
+                        setModalOpen(true);
+                        return;
+                      }
+                      setPopover(null);
+                      return;
+                    }
+                    updateSelectionPopover();
+                  }, 10);
+                }}
+                onKeyUp={()=>{
+                  setTimeout(() => {
+                    updateSelectionPopover();
+                  }, 10);
+                }}
+                dangerouslySetInnerHTML={{ __html: renderAnnotatedHtml(text) }}
+              />
             )}
-          </div>
-            <div ref={wrapperRef} className="relative overflow-hidden">
-            {/* Overlay highlights rendered above, but non-interactive; textarea handles selection */}
-            <div
-              ref={overlayRef}
-              className="pointer-events-none select-none absolute inset-0 rounded-lg px-4 py-3 whitespace-pre-wrap overflow-visible z-0 text-base leading-relaxed will-change-transform font-sans tracking-normal"
-              style={{ minHeight: textareaHeight, height: textareaHeight, maxHeight: textareaHeight, opacity: showAnnotations ? 1 : 0, color: 'transparent' }}
-              dangerouslySetInnerHTML={{ __html: renderAnnotatedHtml(text) }}
-            />
-            <textarea 
-              ref={taRef}
-              value={text} 
-              readOnly={!commentsSaved}
-              onChange={async (e)=>{
-                const val = e.target.value;
-                if (!commentsSaved) return; // locked
-                setDirty(true);
-                adjustAnnotationsForEdit(text, val);
-                setText(val);
-              }} 
-              onMouseUp={()=>{
-                updateSelectionPopover();
-                // If caret inside an existing annotation, open edit modal
-                const s = taRef.current?.selectionStart ?? 0;
-                const e = taRef.current?.selectionEnd ?? 0;
-                if (s === e) {
-                  const hit = versionAnnotations.find(a => s >= a.start && s <= a.end);
-                  if (hit) {
-                    setEditingAnn(hit);
-                    setModalCategory(hit.category);
-                    setModalComment(hit.comment || '');
-                    setModalOpen(true);
-                  }
-                }
-              }}
-              onScroll={(e)=>{ const el = e.currentTarget; if (overlayRef.current) { overlayRef.current.style.transform = `translateY(-${el.scrollTop}px)`; } }}
-              onKeyUp={updateSelectionPopover}
-              className="relative z-20 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-base leading-relaxed font-sans tracking-normal" 
-              style={{ 
-                minHeight: textareaHeight,
-                height: textareaHeight,
-                maxHeight: textareaHeight,
-                resize: 'none',
-                overflowY: 'auto',
-                background: 'transparent',
-                color: '#111827' as any,
-                caretColor: '#111827',
-                opacity: !commentsSaved ? 0.85 : 1
-              }} 
-            />
             {/* + Comment popover */}
             {popover && (
               <div className="absolute z-20" style={{ left: popover.left, top: popover.top }}>
@@ -1894,6 +2398,21 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                     setEditingAnn(null);
                     setModalCategory('distortion');
                     setModalComment('');
+                    if (popover) {
+                      const sel = text.slice(popover.start, popover.end);
+                      setModalSelectedText(sel);
+                      setModalCorrection(sel);
+                      setModalIsDeletion(false);
+                      setModalSourceSnippet(
+                        computeSourceSnippetForOffset(source, text, popover.start)
+                      );
+                    } else {
+                      setModalSelectedText('');
+                      setModalCorrection('');
+                      setModalIsDeletion(false);
+                      setModalSourceSnippet('');
+                    }
+                    setShowSourcePane(false);
                     setModalOpen(true);
                   }}
                   className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-emerald-700 active:translate-y-0.5 transition-all duration-200"
@@ -1907,21 +2426,13 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           </div>
           <div className="mt-4 flex gap-3 relative">
             <button
-              onClick={()=>{ 
-                setCommentsSaved(true); 
-                try { sessionStorage.setItem(`refinity_comments_saved_${versionId}`,'1'); } catch {}
-                showToast('Comments saved — you can now edit the text.');
-              }}
-              className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-emerald-600/80 hover:bg-emerald-700 active:translate-y-0.5 transition-all duration-200"
+              onClick={() => { setDirty(false); save(); showToast('Saved'); }}
+              disabled={saving}
+              className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 hover:bg-indigo-700 disabled:bg-gray-400 active:translate-y-0.5 transition-all duration-200"
             >
               <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
               <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
-              Save Comments
-            </button>
-            <button title={!commentsSaved ? 'Save comments to enable editing.' : undefined} onClick={() => { setDirty(false); save(); }} disabled={saving || !commentsSaved} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 hover:bg-indigo-700 disabled:bg-gray-400 active:translate-y-0.5 transition-all duration-200">
-              <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
-              <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
-              {saving? 'Saving…':'Save Version'}
+              {saving? 'Saving…':'Save'}
             </button>
             <div className="relative inline-block align-top">
               <button
@@ -1942,8 +2453,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               </button>
               {revDownloadOpen && revMenuPos && createPortal(
                 <div style={{ position: 'fixed', left: revMenuPos.left, top: revMenuPos.top, zIndex: 10000, maxHeight: '240px', overflowY: 'auto' }} className="w-56 rounded-md border border-gray-200 bg-white shadow-lg text-left">
-                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const body={ current: text||'', filename }; let resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { await saveTextFallback(text||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Without Annotations</button>
-                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_v${nextVersionNumber}_Annotated_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const list=versionAnnotations.map(a=>({ start:a.start, end:a.end, category:a.category, comment:a.comment })); const body={ current: text||'', filename, annotations: list }; let resp=await fetch(`${base}/api/refinity/export-plain-with-annotations`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok){ resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify({ current: text||'', filename }) }); } if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { await saveTextFallback(text||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">With Annotations</button>
+                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const currentText = onSaveEdit ? text : buildCorrectedText(); const body={ current: currentText||'', filename }; let resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { const currentText = onSaveEdit ? text : buildCorrectedText(); await saveTextFallback(currentText||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Without Annotations</button>
+                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_v${nextVersionNumber}_Annotated_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const currentText = onSaveEdit ? text : buildCorrectedText(); const list=versionAnnotations.map(a=>({ start:a.start, end:a.end, category:a.category, comment:a.comment })); const body={ current: currentText||'', filename, annotations: list }; let resp=await fetch(`${base}/api/refinity/export-plain-with-annotations`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok){ resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify({ current: currentText||'', filename }) }); } if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { const currentText = onSaveEdit ? text : buildCorrectedText(); await saveTextFallback(currentText||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">With Annotations</button>
                 </div>, document.body
               )}
             </div>
@@ -1952,12 +2463,106 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           </div>
           {/* Inline comments drawer removed */}
           {showDiff && (
-            <div className="mt-6 relative rounded-xl">
-              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
-              <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
-                <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
-                <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
-                <div className="relative text-gray-900 prose prose-sm max-w-none whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: diffHtml }} />
+            <div className="mt-6">
+              <div className="relative rounded-xl">
+                <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
+                <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
+                  <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                  <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                  <div className="relative text-gray-900 prose prose-sm max-w-none whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: diffHtml }} />
+                </div>
+              </div>
+              <div className="mt-4 flex justify-end">
+                <div className="relative inline-block">
+                  <button
+                    ref={diffBtnRef}
+                    onClick={(e)=>{
+                      e.preventDefault(); e.stopPropagation();
+                      const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                      const pad = 8, menuW = 200;
+                      let left = Math.min(Math.max(r.left, pad), window.innerWidth - menuW - pad);
+                      let top = r.bottom + pad;
+                      if (top + 150 > window.innerHeight - pad) top = r.top - 150 - pad;
+                      setDiffMenuPos({ left, top });
+                      setDiffDownloadOpen(o=>!o);
+                    }}
+                    className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200"
+                  >
+                    Download ▾
+                  </button>
+                  {diffDownloadOpen && diffMenuPos && createPortal(
+                    <div style={{ position: 'fixed', left: diffMenuPos.left, top: diffMenuPos.top, zIndex: 10000 }} className="w-52 rounded-md border border-gray-200 bg-white shadow-lg text-left">
+                      <button onClick={async()=>{
+                        setDiffDownloadOpen(false);
+                        try {
+                          const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+                          const correctedText = buildCorrectedText();
+                          const filename = `${toSafeName(taskTitle||'Task')}_Compare_Inline_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`;
+                          const body = { prev: initialTranslation||'', current: correctedText||'', filename, authorName: username||'User' };
+                          let resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                          if (!resp.ok) {
+                            resp = await fetch(`${base}/api/refinity/export-plain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current: correctedText||'', filename }) });
+                          }
+                          if (!resp.ok) throw new Error('Export failed');
+                          const blob = await resp.blob();
+                          const url = window.URL.createObjectURL(blob);
+                          const link = document.createElement('a');
+                          link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
+                        } catch {}
+                      }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Inline Changes</button>
+                      <button onClick={async()=>{
+                        setDiffDownloadOpen(false);
+                        try {
+                          const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+                          const correctedText = buildCorrectedText();
+                          const filename = `${toSafeName(taskTitle||'Task')}_Compare_Tracked_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`;
+                          const body = { prev: initialTranslation||'', current: correctedText||'', filename, authorName: username||'User', includeComments: false };
+                          let resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                          if (!resp.ok) {
+                            resp = await fetch(`${base}/api/refinity/export-plain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current: correctedText||'', filename }) });
+                          }
+                          if (!resp.ok) throw new Error('Export failed');
+                          const blob = await resp.blob();
+                          const url = window.URL.createObjectURL(blob);
+                          const link = document.createElement('a');
+                          link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
+                        } catch {}
+                      }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Tracked Changes</button>
+                      <button onClick={async()=>{
+                        setDiffDownloadOpen(false);
+                        try {
+                          const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/,'');
+                          const correctedText = buildCorrectedText();
+                          const filename = `${toSafeName(taskTitle||'Task')}_Compare_SidebarComments_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`;
+                          const body: any = {
+                            prev: initialTranslation || '',
+                            current: correctedText || '',
+                            filename,
+                            authorName: username || 'User',
+                            annotationVersionId: versionId,
+                          };
+                          let resp = await fetch(getApiBase('/compare-comments-with-corrections'), {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(body),
+                          });
+                          if (!resp.ok) {
+                            resp = await fetch(getApiBase('/export-plain'), {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ current: initialTranslation || '', filename }),
+                            });
+                          }
+                          if (!resp.ok) throw new Error('Export failed');
+                          const blob = await resp.blob();
+                          const url = window.URL.createObjectURL(blob);
+                          const link = document.createElement('a');
+                          link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
+                        } catch {}
+                      }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Sidebar Comments</button>
+                    </div>, document.body
+                  )}
+                </div>
               </div>
             </div>
           )}
@@ -1969,50 +2574,155 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       {/* Annotation modal */}
       {modalOpen && (
         <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black/40">
-          <div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">{editingAnn ? 'Edit annotation' : 'New annotation'}</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm text-gray-700 mb-1">Category <span className="text-red-500">*</span></label>
-                <select
-                  value={modalCategory}
-                  onChange={(e)=>setModalCategory(e.target.value as AnnotationCategory)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-sm"
+          <motion.div
+            initial={false}
+            animate={{ maxWidth: showSourcePane && modalSourceSnippet ? 900 : 480 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            className="bg-white rounded-xl shadow-xl w-full p-6"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">{editingAnn ? 'Edit annotation' : 'New annotation'}</h3>
+              {modalSourceSnippet && (
+                <button
+                  type="button"
+                  onClick={() => setShowSourcePane(v => !v)}
+                  className="text-xs text-indigo-700 hover:text-indigo-900 underline-offset-2 hover:underline"
                 >
-                  <option value="distortion">Distortion</option>
-                  <option value="omission">Unjustified omission</option>
-                  <option value="register">Inappropriate register</option>
-                  <option value="unidiomatic">Unidiomatic expression</option>
-                  <option value="grammar">Error of grammar, syntax</option>
-                  <option value="spelling">Error of spelling</option>
-                  <option value="punctuation">Error of punctuation</option>
-                  <option value="addition">Unjustified addition</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-sm text-gray-700 mb-1">Comment (optional)</label>
-                <textarea value={modalComment} onChange={(e)=>setModalComment(e.target.value)} rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-sm" placeholder="Enter the correction or context…" />
+                  {showSourcePane ? 'Hide source' : 'Show source'}
+                </button>
+              )}
+            </div>
+            <div className="space-y-4">
+              <div className="md:flex md:space-x-4 space-y-4 md:space-y-0 items-start">
+                <AnimatePresence initial={false}>
+                  {showSourcePane && modalSourceSnippet && (
+                    <motion.div
+                      key="source-pane"
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: -10 }}
+                      transition={{ duration: 0.2, ease: 'easeOut' }}
+                      className="md:w-2/5 w-full space-y-1"
+                    >
+                      <label className="block text-sm text-gray-700">
+                        Source paragraph
+                      </label>
+                      <div className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm text-gray-800 whitespace-pre-wrap overflow-auto max-h-64">
+                        {modalSourceSnippet}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <div className="flex-1 md:w-3/5 space-y-4">
+                  <div>
+                    <label className="block text-sm text-gray-700 mb-1">Selected text</label>
+                    <div className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm text-gray-800 whitespace-pre-wrap max-h-32 overflow-auto">
+                      {modalSelectedText || '(no selection)'}
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-sm text-gray-700 mb-1">Error type <span className="text-red-500">*</span></label>
+                    <select
+                      value={modalCategory}
+                      onChange={(e)=>setModalCategory(e.target.value as AnnotationCategory)}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-sm"
+                    >
+                      <option value="distortion">Distortion</option>
+                      <option value="omission">Unjustified omission</option>
+                      <option value="register">Inappropriate register</option>
+                      <option value="unidiomatic">Unidiomatic expression</option>
+                      <option value="grammar">Error of grammar, syntax</option>
+                      <option value="spelling">Error of spelling</option>
+                      <option value="punctuation">Error of punctuation</option>
+                      <option value="addition">Unjustified addition</option>
+                      <option value="other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <div className="mb-3">
+                      <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={modalIsDeletion}
+                          onChange={(e) => {
+                            setModalIsDeletion(e.target.checked);
+                            if (e.target.checked) {
+                              setModalCorrection(''); // Clear correction when marking as deletion
+                            }
+                          }}
+                          className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                        />
+                        <span>Delete this text</span>
+                      </label>
+                    </div>
+                    {!modalIsDeletion && (
+                      <>
+                        <label className="block text-sm text-gray-700 mb-1">Correction <span className="text-red-500">*</span></label>
+                        <textarea
+                          value={modalCorrection}
+                          onChange={(e)=>setModalCorrection(e.target.value)}
+                          rows={2}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-sm mb-3"
+                          placeholder="Enter the corrected wording for this span…"
+                        />
+                      </>
+                    )}
+                    {modalIsDeletion && (
+                      <div className="mb-3 p-3 bg-red-50 border border-red-200 rounded-md">
+                        <p className="text-sm text-red-700">This text will be deleted. The selected text will be removed from the final version.</p>
+                      </div>
+                    )}
+                    <label className="block text-sm text-gray-700 mb-1">Comment (optional)</label>
+                    <textarea
+                      value={modalComment}
+                      onChange={(e)=>setModalComment(e.target.value)}
+                      rows={3}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-sm"
+                      placeholder="Enter the explanation or feedback…"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
             <div className="mt-6 flex items-center justify-between">
               {editingAnn && (
-                <button onClick={async()=>{ await persistDelete(editingAnn.id); deleteAnnotationById(editingAnn.id); setModalOpen(false); setPopover(null); setEditingAnn(null); }} className="px-3 py-1.5 text-sm rounded-lg text-white bg-red-600 hover:bg-red-700">Delete</button>
+                <button onClick={async()=>{ await persistDelete(editingAnn.id); deleteAnnotationById(editingAnn.id); setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false); }} className="px-3 py-1.5 text-sm rounded-lg text-white bg-red-600 hover:bg-red-700">Delete</button>
               )}
               <div className="ml-auto flex gap-2">
-                <button onClick={()=>{ setModalOpen(false); setPopover(null); setEditingAnn(null); }} className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 text-gray-700 bg-white hover:bg-gray-50">Cancel</button>
+                <button onClick={()=>{ setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false); }} className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 text-gray-700 bg-white hover:bg-gray-50">Cancel</button>
                 <button
                   onClick={async ()=>{
+                    // Allow empty correction only if deletion is checked
+                    if (!modalIsDeletion && !modalCorrection.trim()) {
+                      alert('Please enter a correction for this highlighted text, or check "Delete this text" to mark it for deletion.');
+                      return;
+                    }
                     if (editingAnn) {
-                      const updated = { ...editingAnn, category: modalCategory, comment: modalComment, updatedAt: Date.now() };
+                      const updated = { 
+                        ...editingAnn, 
+                        category: modalCategory, 
+                        comment: modalComment, 
+                        correction: modalIsDeletion ? '' : modalCorrection, 
+                        updatedAt: Date.now() 
+                      };
                       updateAnnotation(updated);
                       await persistUpdate(updated);
                     } else if (popover) {
-                      const local = { id:`a_${Date.now()}_${Math.random().toString(36).slice(2,7)}`, versionId, start: popover.start, end: popover.end, category: modalCategory, comment: modalComment, createdAt: Date.now(), updatedAt: Date.now() };
+                      const local = {
+                        id:`a_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,
+                        versionId,
+                        start: popover.start,
+                        end: popover.end,
+                        category: modalCategory,
+                        comment: modalComment,
+                        correction: modalIsDeletion ? '' : modalCorrection,
+                        createdAt: Date.now(),
+                        updatedAt: Date.now()
+                      };
                       const saved = await persistCreate(local);
                       addAnnotation(saved);
                     }
-                    setModalOpen(false); setPopover(null); setEditingAnn(null);
+                    setModalOpen(false); setPopover(null); setEditingAnn(null); setModalIsDeletion(false);
                   }}
                   className="px-3 py-1.5 text-sm rounded-lg text-white bg-indigo-600 hover:bg-indigo-700"
                 >
@@ -2020,7 +2730,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
                 </button>
               </div>
             </div>
-          </div>
+          </motion.div>
         </div>
       )}
     </div>

client/src/components/TutorialRefinity.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Refinity from './Refinity';
+
+interface TutorialRefinityProps {
+  weekNumber: number;
+}
+
+/**
+ * Tutorial-specific wrapper for Deep Revision (Refinity)
+ * - Only admin can create/edit tasks
+ * - Users can only access admin-created tasks
+ * - Users cannot see other users' revisions (individual practice)
+ * - Uses separate backend storage for tutorial data
+ */
+const TutorialRefinity: React.FC<TutorialRefinityProps> = ({ weekNumber }) => {
+  // Set tutorial mode in localStorage synchronously BEFORE rendering Refinity
+  // This ensures Refinity detects tutorial mode on first render
+  React.useLayoutEffect(() => {
+    localStorage.setItem('refinityMode', 'tutorial');
+    localStorage.setItem('tutorialWeekNumber', weekNumber.toString());
+    return () => {
+      localStorage.removeItem('refinityMode');
+      localStorage.removeItem('tutorialWeekNumber');
+    };
+  }, [weekNumber]);
+
+  // Also set it synchronously on first render
+  if (typeof window !== 'undefined') {
+    try {
+      localStorage.setItem('refinityMode', 'tutorial');
+      localStorage.setItem('tutorialWeekNumber', weekNumber.toString());
+    } catch {}
+  }
+
+  return (
+    <div className="tutorial-refinity-container" style={{ minHeight: '600px' }}>
+      <Refinity />
+    </div>
+  );
+};
+
+export default TutorialRefinity;
+

client/src/pages/TutorialTasks.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../services/api';
+import TutorialRefinity from '../components/TutorialRefinity';
 import { 
   AcademicCapIcon, 
   DocumentTextIcon, 
@@ -566,6 +567,17 @@ const TutorialTasks: React.FC = () => {
   const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
   const [addingTask, setAddingTask] = useState<boolean>(false);
   const [addingImage, setAddingImage] = useState<boolean>(false);
+  const [addingRevision, setAddingRevision] = useState<boolean>(false);
+  const [revisionAdded, setRevisionAdded] = useState<boolean>(() => {
+    const saved = localStorage.getItem(`tutorial_revision_added_week_${selectedWeek}`);
+    return saved === 'true';
+  });
+  
+  // Update revisionAdded state when week changes
+  React.useEffect(() => {
+    const saved = localStorage.getItem(`tutorial_revision_added_week_${selectedWeek}`);
+    setRevisionAdded(saved === 'true');
+  }, [selectedWeek]);
   const [editForm, setEditForm] = useState<{
     content: string;
     translationBrief: string;
@@ -795,7 +807,6 @@ const TutorialTasks: React.FC = () => {
         const tasks = response.data;
         console.log('Fetched tasks:', tasks);
         console.log('Tasks with images:', tasks.filter((task: TutorialTask) => task.imageUrl));
-        
         // Debug: Log each task's fields
         tasks.forEach((task: any, index: number) => {
           console.log(`Task ${index} fields:`, {
@@ -1401,6 +1412,25 @@ const TutorialTasks: React.FC = () => {
     });
   };
 
+  const startAddingRevision = () => {
+    setAddingRevision(true);
+  };
+
+  const cancelAddingRevision = () => {
+    setAddingRevision(false);
+  };
+
+  const addRevision = () => {
+    setRevisionAdded(true);
+    setAddingRevision(false);
+    localStorage.setItem(`tutorial_revision_added_week_${selectedWeek}`, 'true');
+  };
+
+  const removeRevision = () => {
+    setRevisionAdded(false);
+    localStorage.removeItem(`tutorial_revision_added_week_${selectedWeek}`);
+  };
+
 
 
   const saveNewTask = async () => {
@@ -1525,14 +1555,13 @@ const TutorialTasks: React.FC = () => {
 
       if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks(false);
-
       } else {
         console.error('Failed to delete tutorial task:', response.data);
-        
       }
+
+      await fetchTutorialTasks(false);
     } catch (error) {
-      console.error('Failed to delete tutorial task:', error);
-      
+      console.error('Failed to delete task:', error);
     }
   };
 
@@ -2110,6 +2139,15 @@ const TutorialTasks: React.FC = () => {
                             <span className="font-medium">Add Image</span>
                           </button>
                         )}
+                        {selectedWeek >= 5 && (
+                          <button
+                            onClick={startAddingRevision}
+                            className="relative inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-sm font-medium text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] bg-purple-600/70"
+                          >
+                            <PlusIcon className="h-5 w-5" />
+                            <span className="font-medium">Add Revision</span>
+                          </button>
+                        )}
                       </div>
 
                     </div>
@@ -2120,7 +2158,62 @@ const TutorialTasks: React.FC = () => {
           )}
 
           <div ref={listRef} style={{ overflowAnchor: 'none' }}>
-          {tutorialTasks.length === 0 && !addingTask ? (
+          {addingRevision ? (
+            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 mb-8">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-purple-100 rounded-lg p-2">
+                    <PlusIcon className="h-5 w-5 text-purple-600" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900">Add Deep Revision</h3>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <button
+                    onClick={addRevision}
+                    className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                  >
+                    <CheckIcon className="h-4 w-4" />
+                    <span>Add</span>
+                  </button>
+                  <button
+                    onClick={cancelAddingRevision}
+                    className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                  >
+                    <XMarkIcon className="h-4 w-4" />
+                    <span>Cancel</span>
+                  </button>
+                </div>
+              </div>
+              <div className="border-t pt-4">
+                <TutorialRefinity weekNumber={selectedWeek} />
+              </div>
+            </div>
+          ) : null}
+          {revisionAdded ? (
+            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 mb-8 max-w-full overflow-x-hidden">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-purple-100 rounded-lg p-2">
+                    <PlusIcon className="h-5 w-5 text-purple-600" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900">Deep Revision</h3>
+                </div>
+                {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                  <button
+                    onClick={removeRevision}
+                    className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                  >
+                    <XMarkIcon className="h-4 w-4" />
+                    <span>Remove</span>
+                  </button>
+                )}
+              </div>
+              <div className="border-t pt-4 max-w-full overflow-x-hidden">
+                <TutorialRefinity weekNumber={selectedWeek} />
+              </div>
+            </div>
+          ) : null}
+          {tutorialTasks.length === 0 && !addingTask && !addingRevision && !revisionAdded ? (
             <div className="text-center py-12">
               <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
               <h3 className="text-lg font-medium text-gray-900 mb-2">
@@ -2153,7 +2246,8 @@ const TutorialTasks: React.FC = () => {
                         <DocumentTextIcon className="relative h-5 w-5 text-ui-text" />
                       </div>
                       <div>
-                        <h3 className="text-lg font-semibold text-gray-900 flex items-center">Source Text #{tutorialTasks.indexOf(task) + 1}
+                        <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+                          Source Text #{tutorialTasks.indexOf(task) + 1}
                           {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && selectedWeek >= 4 && (
                             <span className="ml-2 inline-flex items-center space-x-1">
                               <button

client/src/services/api.ts

@@ -7,7 +7,10 @@ const envUrlNoTrailingSlash = envUrlRaw.replace(/\/$/, '');
 const envBaseWithoutApi = envUrlNoTrailingSlash.replace(/\/api$/, '');
 // 2) Prefer localhost if the app runs on localhost
 const isLocalhost = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname);
-const localCandidates = isLocalhost ? ['http://localhost:7860', 'http://127.0.0.1:7860', 'http://localhost:5000', 'http://127.0.0.1:5000'] : [];
+// Prefer 5000 first when running locally; 7860 as secondary
+const localCandidates = isLocalhost
+  ? ['http://localhost:5000', 'http://127.0.0.1:5000', 'http://localhost:7860', 'http://127.0.0.1:7860']
+  : [];
 // 3) HF backend as final fallback
 const hfBackend = 'https://linguabot-transhub-backend.hf.space';
 // 4) Build candidate list (deduped, truthy)
@@ -57,11 +60,16 @@ async function probeBases() {
   }
   // nothing reachable - keep current activeBase (likely HF)
 }
-// Kick off probe without blocking module init
+// Kick off probe without blocking module init.
+// In development we skip the active probing to avoid dev-tool extensions turning
+// harmless network probe failures into hard errors during bundle evaluation.
 if (typeof window !== 'undefined') {
-  // initialize from stored or first candidate, then probe
+  // initialize from stored or first candidate
   setActiveBase(activeBase);
-  probeBases();
+  // Only auto-probe in production / deployed environments
+  if (process.env.NODE_ENV === 'production') {
+    probeBases();
+  }
 }
 
 // Debug: Log the API URL being used
@@ -141,7 +149,7 @@ api.interceptors.response.use(
         }
       }
     }
-
+    
     // Don't auto-redirect for admin operations - let the component handle it
     if (error.response?.status === 401 && !error.config?.url?.includes('/subtitles/update/')) {
       // Token expired or invalid - only redirect for non-admin operations