Upload folder using huggingface_hub

client/src/components/Layout.tsx

@@ -145,8 +145,8 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
   const handleLogout = () => {
     try {
-      localStorage.removeItem('token');
-      localStorage.removeItem('user');
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
     } catch {}
     window.location.href = '/login';
   };
@@ -201,9 +201,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           <Link to="/dashboard" className="text-[1.6rem] font-bold text-ui-text flex items-center -ml-4 hover:text-ui-text" style={{ fontFamily: 'Lobster, Inter, system-ui, sans-serif' }}>
             <img src="/favicon-512x512.png" alt="logo" className="h-8 w-8 mr-2" />
             TransHub
-          </Link>
+                </Link>
           <div />
-        </div>
+              </div>
       </header>
 
       {/* Shell: Sidebar + Content */}
@@ -211,43 +211,43 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         {/* Sidebar */}
         <aside className="hidden md:flex md:flex-col w-60 fixed top-14 left-0 bottom-0 border-r border-ui-border bg-ui-panel/80 backdrop-blur z-30 sidebar-shell">
           <nav className="p-4 space-y-2 flex-1 sidebar-nav">
-            {navigation.map((item) => {
-              const isActive = location.pathname === item.href;
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
+                {navigation.map((item) => {
+                  const isActive = location.pathname === item.href;
+                  return (
+                    <Link
+                      key={item.name}
+                      to={item.href}
                   className={`flex items-center px-3 py-2 rounded-lg text-[0.95rem] font-medium transition-colors ${
                     isActive ? 'text-ui-text' : 'text-ui-text/80 hover:text-ui-text'
-                  }`}
-                >
+                      }`}
+                    >
                   <img src={iconSrcFor(item.name)} alt="" className="h-6 w-6 mr-3" />
                   <span>{item.name}</span>
-                </Link>
-              );
-            })}
+                    </Link>
+                  );
+                })}
           </nav>
           <div className="p-3 border-t border-ui-border mt-auto sidebar-footer">
             {user ? (
               <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-text/80 hover:bg-ui-panel/60">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log Out
-              </button>
+                  </button>
             ) : (
               <Link to="/login" className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-text/80 hover:bg-ui-panel/60">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log In
               </Link>
             )}
-          </div>
+        </div>
         </aside>
 
-        {/* Main Content */}
+                        {/* Main Content */}
         <main className="flex-1 p-4 sm:p-6 lg:p-8 md:ml-60">
-          {!isTransitioning && children}
-        </main>
+                    {!isTransitioning && children}
+                  </main>
       </div>
-
+      
       {/* Transition Loading Indicator */}
       {isTransitioning && (
         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">

client/src/components/Refinity.tsx

@@ -22,6 +22,28 @@ type Version = {
   parentVersionId?: string; // lineage
 };
 
+type AnnotationCategory =
+  | 'distortion'
+  | 'omission'
+  | 'register'
+  | 'unidiomatic'
+  | 'grammar'
+  | 'spelling'
+  | 'punctuation'
+  | 'addition'
+  | 'other';
+
+type Annotation = {
+  id: string;
+  versionId: string;
+  start: number; // inclusive, char index in version.content
+  end: number;   // exclusive
+  category: AnnotationCategory;
+  comment?: string;
+  createdAt: number;
+  updatedAt: number;
+};
+
 type Task = {
   id: string;
   title: string;
@@ -53,6 +75,13 @@ const Refinity: React.FC = () => {
   const [compareMenuPos, setCompareMenuPos] = React.useState<{ left: number; top: number } | null>(null);
   const compareBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);
+  // Annotations (Version Flow)
+  const [showAnnotations, setShowAnnotations] = React.useState<boolean>(true);
+  const [annotationPopover, setAnnotationPopover] = React.useState<{ left: number; top: number; versionId: string; range: { start: number; end: number } } | null>(null);
+  const [annotationModalOpen, setAnnotationModalOpen] = React.useState<boolean>(false);
+  const [editingAnnotation, setEditingAnnotation] = React.useState<Annotation | null>(null);
+  const [modalCategory, setModalCategory] = React.useState<AnnotationCategory>('distortion');
+  const [modalComment, setModalComment] = React.useState<string>('');
   const [username] = React.useState<string>(() => {
     try {
       const u = localStorage.getItem('user');
@@ -233,6 +262,98 @@ const Refinity: React.FC = () => {
     }
   };
 
+  // ---------- Annotation helpers ----------
+  const ANNO_STORE_KEY = 'refinity_annotations_v1';
+  const loadAnnotations = React.useCallback((): Annotation[] => {
+    try {
+      const raw = localStorage.getItem(ANNO_STORE_KEY);
+      const arr = raw ? JSON.parse(raw) : [];
+      return Array.isArray(arr) ? arr : [];
+    } catch { return []; }
+  }, []);
+  const saveAnnotations = React.useCallback((list: Annotation[]) => {
+    try { localStorage.setItem(ANNO_STORE_KEY, JSON.stringify(list)); } catch {}
+  }, []);
+  const [annotations, setAnnotations] = React.useState<Annotation[]>(() => loadAnnotations());
+  React.useEffect(() => { saveAnnotations(annotations); }, [annotations, saveAnnotations]);
+  const annoForVersion = React.useCallback((versionId: string) => annotations.filter(a => a.versionId === versionId), [annotations]);
+  const addAnnotation = React.useCallback((a: Annotation) => setAnnotations(prev => [...prev, a]), []);
+  const updateAnnotation = React.useCallback((a: Annotation) => setAnnotations(prev => prev.map(x => x.id === a.id ? a : x)), []);
+  const deleteAnnotationById = React.useCallback((id: string) => setAnnotations(prev => prev.filter(a => a.id !== id)), []);
+
+  const CATEGORY_LABELS: Record<AnnotationCategory, string> = {
+    distortion: 'Distortion',
+    omission: 'Unjustified omission',
+    register: 'Inappropriate register',
+    unidiomatic: 'Unidiomatic expression',
+    grammar: 'Error of grammar, syntax',
+    spelling: 'Error of spelling',
+    punctuation: 'Error of punctuation',
+    addition: 'Unjustified addition',
+    other: 'Other',
+  };
+  const CATEGORY_CLASS: Record<AnnotationCategory, string> = {
+    distortion: 'bg-rose-100',
+    omission: 'bg-amber-100',
+    register: 'bg-indigo-100',
+    unidiomatic: 'bg-purple-100',
+    grammar: 'bg-blue-100',
+    spelling: 'bg-green-100',
+    punctuation: 'bg-teal-100',
+    addition: 'bg-pink-100',
+    other: 'bg-gray-100',
+  };
+  function escapeHtml(s: string): string {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+  function renderAnnotatedHtml(text: string, versionId: string, enabled: boolean): string {
+    if (!enabled) return escapeHtml(text);
+    const list = annoForVersion(versionId).slice().sort((a,b)=>a.start-b.start);
+    if (!list.length) return escapeHtml(text);
+    let html = '';
+    let pos = 0;
+    for (const a of list) {
+      const start = Math.max(0, Math.min(a.start, text.length));
+      const end = Math.max(start, Math.min(a.end, text.length));
+      if (pos < start) html += escapeHtml(text.slice(pos, start));
+      const label = CATEGORY_LABELS[a.category] || 'Note';
+      const cls = CATEGORY_CLASS[a.category] || 'bg-gray-100 ring-gray-200';
+      const span = escapeHtml(text.slice(start, end)) || '&nbsp;';
+      html += `<span data-anno-id="${a.id}" class="inline rounded-[6px] ring-1 ${cls} px-0.5" title="${label}${a.comment ? ': '+escapeHtml(a.comment) : ''}">${span}</span>`;
+      pos = end;
+    }
+    if (pos < text.length) html += escapeHtml(text.slice(pos));
+    return html;
+  }
+  function rangeToOffsets(container: HTMLElement, range: Range, fullText: string): { start: number; end: number } {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
+    let start = -1;
+    let end = -1;
+    let charCount = 0;
+    while (walker.nextNode()) {
+      const node = walker.currentNode as Text;
+      const text = node.nodeValue || '';
+      if (node === range.startContainer) start = charCount + range.startOffset;
+      if (node === range.endContainer) end = charCount + range.endOffset;
+      charCount += text.length;
+    }
+    if (start < 0 || end < 0) {
+      const sel = range.toString();
+      const idx = fullText.indexOf(sel);
+      if (idx >= 0) { start = idx; end = idx + sel.length; }
+    }
+    start = Math.max(0, Math.min(start, fullText.length));
+    end = Math.max(start, Math.min(end, fullText.length));
+    return { start, end };
+  }
+  function getSelectionPopoverPosition(range: Range, container: HTMLElement): { left: number; top: number } {
+    const rect = range.getBoundingClientRect();
+    const crect = container.getBoundingClientRect();
+    const left = Math.max(8, rect.right - crect.left + 8);
+    const top = Math.max(8, rect.top - crect.top - 8);
+    return { left, top };
+  }
+
   // Flow slide text overflow measurement for multi-line ellipsis indicator
   const textRefs = React.useRef<{ [id: string]: HTMLDivElement | null }>({});
   const [overflowMap, setOverflowMap] = React.useState<{ [id: string]: boolean }>({});
@@ -406,6 +527,84 @@ const Refinity: React.FC = () => {
           <button onClick={() => setIsFullscreen(false)} className="px-3 py-1.5 text-sm rounded-2xl border border-gray-200 bg-white">Exit Full Screen</button>
         </div>
       )}
+      {/* Annotation modal (Version Flow only) */}
+      {annotationModalOpen && annotationPopover && (
+        <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">{editingAnnotation ? '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"
+                >
+                  {(['distortion','omission','register','unidiomatic','grammar','spelling','punctuation','addition','other'] as AnnotationCategory[]).map(k=>(
+                    <option key={k} value={k}>{k==='unidiomatic' ? 'Unidiomatic expression' : k==='grammar' ? 'Error of grammar, syntax' : k==='spelling' ? 'Error of spelling' : k==='punctuation' ? 'Error of punctuation' : k==='addition' ? 'Unjustified addition' : k==='omission' ? 'Unjustified omission' : k.charAt(0).toUpperCase()+k.slice(1)}</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…"
+                />
+              </div>
+            </div>
+            <div className="mt-6 flex items-center justify-between">
+              {editingAnnotation && (
+                <button
+                  onClick={()=>{
+                    if (editingAnnotation) deleteAnnotationById(editingAnnotation.id);
+                    setAnnotationModalOpen(false);
+                    setAnnotationPopover(null);
+                    setEditingAnnotation(null);
+                  }}
+                  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={()=>{ setAnnotationModalOpen(false); setAnnotationPopover(null); setEditingAnnotation(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={()=>{
+                    const versionId = annotationPopover.versionId;
+                    if (editingAnnotation) {
+                      const updated: Annotation = { ...editingAnnotation, category: modalCategory, comment: modalComment, updatedAt: Date.now() };
+                      updateAnnotation(updated);
+                    } else {
+                      const range = annotationPopover.range;
+                      const a: Annotation = {
+                        id: `a_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,
+                        versionId,
+                        start: range.start,
+                        end: range.end,
+                        category: modalCategory,
+                        comment: modalComment,
+                        createdAt: Date.now(),
+                        updatedAt: Date.now(),
+                      };
+                      addAnnotation(a);
+                    }
+                    setAnnotationModalOpen(false);
+                    setAnnotationPopover(null);
+                    setEditingAnnotation(null);
+                  }}
+                  className="px-3 py-1.5 text-sm rounded-lg text-white bg-indigo-600 hover:bg-indigo-700"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       {/* Clean container (no purple gradient) */}
       <div className={isFullscreen ? 'relative mx-auto max-w-6xl p-6' : 'relative rounded-xl p-6 bg-transparent'}>
       {/* Stage 1: Task Creation / Selection */}
@@ -627,9 +826,65 @@ const Refinity: React.FC = () => {
                         ref={(el)=>{ textRefs.current[v.id]=el; }}
                         className={`text-gray-900 whitespace-pre-wrap break-words leading-relaxed flex-1 overflow-hidden pr-1 relative`}
                         style={{ maxHeight: 'calc(100% - 10.5rem)', paddingBottom: '0.25rem' }}
-                      >
-                        {v.content || ''}
-                      </div>
+                        onMouseUp={(e)=>{
+                          if (!showAnnotations) return;
+                          const el = textRefs.current[v.id];
+                          if (!el) return;
+                          const sel = window.getSelection();
+                          if (!sel || sel.rangeCount===0) return;
+                          const range = sel.getRangeAt(0);
+                          if (!el.contains(range.startContainer) || !el.contains(range.endContainer)) return;
+                          const text = v.content || '';
+                          const offsets = rangeToOffsets(el, range, text);
+                          if (offsets.end - offsets.start <= 0) {
+                            // caret: open if inside an existing annotation
+                            const inside = (annoForVersion(v.id) || []).find(a => offsets.start >= a.start && offsets.start <= a.end);
+                            if (inside) {
+                              setEditingAnnotation(inside);
+                              setModalCategory(inside.category);
+                              setModalComment(inside.comment || '');
+                              setAnnotationModalOpen(true);
+                            }
+                            setAnnotationPopover(null);
+                            return;
+                          }
+                          const pos = getSelectionPopoverPosition(range, el);
+                          setAnnotationPopover({ left: pos.left, top: pos.top, versionId: v.id, range: offsets });
+                        }}
+                        onClick={(e)=>{
+                          if (!showAnnotations) return;
+                          const target = e.target as HTMLElement;
+                          const id = target?.dataset?.annoId;
+                          if (id) {
+                            e.preventDefault(); e.stopPropagation();
+                            const found = (annoForVersion(v.id) || []).find(a => a.id === id);
+                            if (found) {
+                              setEditingAnnotation(found);
+                              setModalCategory(found.category);
+                              setModalComment(found.comment || '');
+                              setAnnotationModalOpen(true);
+                            }
+                          }
+                        }}
+                        dangerouslySetInnerHTML={{ __html: renderAnnotatedHtml(v.content || '', v.id, showAnnotations) }}
+                      />
+                      {annotationPopover && annotationPopover.versionId===v.id && (
+                        <div className="absolute z-[3500]" style={{ left: annotationPopover.left, top: annotationPopover.top }}>
+                          <button
+                            type="button"
+                            onClick={(e)=>{
+                              e.preventDefault(); e.stopPropagation();
+                              setEditingAnnotation(null);
+                              setModalCategory('distortion');
+                              setModalComment('');
+                              setAnnotationModalOpen(true);
+                            }}
+                            className="inline-flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-full text-white bg-emerald-600 hover:bg-emerald-700 shadow ring-1 ring-white/50"
+                          >
+                            + Comment
+                          </button>
+                        </div>
+                      )}
                       {overflowMap[v.id] && (
                         <div className="pointer-events-none absolute text-gray-700" style={{ left: '1.5rem', bottom: '6rem', zIndex: 2000 }}>…</div>
                       )}
@@ -914,6 +1169,7 @@ const Refinity: React.FC = () => {
           nextVersionNumber={((versions.filter(v=>v.taskId===(task?.id||'')).slice(-1)[0]?.versionNumber) || 0) + 1}
           isFullscreen={isFullscreen}
           onToggleFullscreen={()=>setIsFullscreen(v=>!v)}
+          versionId={currentVersionId || ''}
         />
       )}
       </div>
@@ -921,7 +1177,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 }>=({ source, initialTranslation, onBack, onSave, onSaveEdit, taskTitle, username, nextVersionNumber, isFullscreen, onToggleFullscreen })=>{
+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 [text, setText] = React.useState<string>(initialTranslation);
   const [saving, setSaving] = React.useState(false);
   const [diffHtml, setDiffHtml] = React.useState<string>('');
@@ -934,6 +1190,132 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const [commentsOpen, setCommentsOpen] = React.useState(false);
   const [newComment, setNewComment] = React.useState('');
   const [comments, setComments] = React.useState<Array<{ id: string; text: string; ts: number }>>([]);
+  const taRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const overlayRef = React.useRef<HTMLDivElement | null>(null);
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+  // Annotation layer state (revision mode only)
+  const [showAnnotations, setShowAnnotations] = React.useState<boolean>(true);
+  const ANNO_STORE_KEY = 'refinity_annotations_v1';
+  type Ann = Annotation;
+  const loadAnnotations = React.useCallback((): Ann[] => {
+    try { const raw = localStorage.getItem(ANNO_STORE_KEY); const arr = raw ? JSON.parse(raw) : []; return Array.isArray(arr) ? arr : []; } catch { return []; }
+  }, []);
+  const saveAnnotations = React.useCallback((list: Ann[]) => { try { localStorage.setItem(ANNO_STORE_KEY, JSON.stringify(list)); } catch {} }, []);
+  const [annotations, setAnnotations] = React.useState<Ann[]>(() => loadAnnotations());
+  React.useEffect(() => { saveAnnotations(annotations); }, [annotations, saveAnnotations]);
+  const versionAnnotations = React.useMemo(() => annotations.filter(a => a.versionId === versionId), [annotations, versionId]);
+  const addAnnotation = (a: Ann) => setAnnotations(prev => [...prev, a]);
+  const updateAnnotation = (a: Ann) => setAnnotations(prev => prev.map(x => x.id === a.id ? a : x));
+  const deleteAnnotationById = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
+  const CATEGORY_CLASS: Record<AnnotationCategory, string> = {
+    distortion: 'bg-rose-100 ring-rose-200',
+    omission: 'bg-amber-100 ring-amber-200',
+    register: 'bg-indigo-100 ring-indigo-200',
+    unidiomatic: 'bg-purple-100 ring-purple-200',
+    grammar: 'bg-blue-100 ring-blue-200',
+    spelling: 'bg-green-100 ring-green-200',
+    punctuation: 'bg-teal-100 ring-teal-200',
+    addition: 'bg-pink-100 ring-pink-200',
+    other: 'bg-gray-100 ring-gray-200',
+  };
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [editingAnn, setEditingAnn] = React.useState<Ann | null>(null);
+  const [modalCategory, setModalCategory] = React.useState<AnnotationCategory>('distortion');
+  const [modalComment, setModalComment] = React.useState('');
+  const [popover, setPopover] = React.useState<{ left: number; top: number; start: number; end: number } | null>(null);
+
+  function escapeHtml(s: string): string {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+  // Load persisted annotations for this version from backend
+  React.useEffect(() => {
+    (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 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 }));
+            return [...others, ...loaded];
+          });
+        }
+      } catch {}
+    })();
+  }, [versionId]);
+
+  // 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 row = await resp.json().catch(()=>({}));
+      if (resp.ok && row && row._id) return { ...a, id: row._id };
+    } catch {}
+    return a;
+  }, []);
+  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) });
+    } catch {}
+  }, []);
+  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' });
+    } catch {}
+  }, []);
+  function renderAnnotatedHtml(textValue: string): string {
+    if (!showAnnotations) return escapeHtml(textValue);
+    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));
+      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} pointer-events-auto cursor-pointer" title="${a.category}${a.comment ? ': '+escapeHtml(a.comment) : ''}">${span}</span>`;
+      pos = end;
+    }
+    if (pos < textValue.length) html += escapeHtml(textValue.slice(pos));
+    return html;
+  }
+  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;
+    }
+    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 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 wrect = wrap.getBoundingClientRect();
+    setPopover({ left: Math.max(8, rect.right - wrect.left + 8), top: Math.max(8, rect.top - wrect.top - 8), start: s, end: e });
+  }, [showAnnotations]);
 
   React.useEffect(() => {
     if (sourceRef.current) {
@@ -1026,48 +1408,94 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
         <div className="w-1/2">
           <div className="mb-2 text-gray-700 text-sm flex items-center justify-between">
             <span>Translation</span>
-            {!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
-              </button>
+            <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
+                </button>
+              )}
+            </div>
+          </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 absolute inset-0 rounded-lg px-4 py-3 whitespace-pre-wrap text-gray-900 overflow-hidden z-0 text-base leading-relaxed will-change-transform"
+              style={{ minHeight: textareaHeight, height: textareaHeight, maxHeight: textareaHeight, transform: 'translateY(0px)' }}
+              dangerouslySetInnerHTML={{ __html: renderAnnotatedHtml(text) }}
+            />
+            <textarea 
+              ref={taRef}
+              value={text} 
+              onChange={(e)=>setText(e.target.value)} 
+              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-10 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" 
+              style={{ 
+                minHeight: textareaHeight,
+                height: textareaHeight,
+                maxHeight: textareaHeight,
+                resize: 'none',
+                overflowY: 'auto',
+                background: 'transparent',
+                color: 'transparent' as any,
+                caretColor: '#111827'
+              }} 
+            />
+            {/* + Comment popover */}
+            {popover && (
+              <div className="absolute z-20" style={{ left: popover.left, top: popover.top }}>
+                <button
+                  type="button"
+                  onClick={()=>{
+                    setEditingAnn(null);
+                    setModalCategory('distortion');
+                    setModalComment('');
+                    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"
+                >
+                  <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" />
+                  <span className="relative z-10">+ Comment</span>
+                </button>
+              </div>
             )}
           </div>
-          <textarea 
-            value={text} 
-            onChange={(e)=>setText(e.target.value)} 
-            className="relative z-10 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" 
-            style={{ 
-              minHeight: textareaHeight,
-              height: textareaHeight,
-              maxHeight: textareaHeight,
-              resize: 'none',
-              overflowY: 'auto'
-            }} 
-          />
           <div className="mt-4 flex gap-3 relative">
             <button onClick={save} 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 disabled:bg-gray-400 active:translate-y-0.5 transition-all duration-200">{saving? 'Saving…':'Save'}</button>
             <div className="relative inline-block align-top">
-              <button ref={revBtnRef} onClick={async (e)=>{ e.preventDefault(); e.stopPropagation(); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${(taskTitle||'Task').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}_${(username||'User').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}.docx`; const body={ current: text||'', filename }; const 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(); 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="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>
+              <button ref={revBtnRef} onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); const r=(e.currentTarget as HTMLElement).getBoundingClientRect(); setRevMenuPos({ left: r.left, top: r.bottom + 8 }); setRevDownloadOpen(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>
+              {revDownloadOpen && revMenuPos && createPortal(
+                <div style={{ position: 'fixed', left: revMenuPos.left, top: revMenuPos.top, zIndex: 10000 }} 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=`${(taskTitle||'Task').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}_${(username||'User').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}.docx`; const body={ current: text||'', filename }; const 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(); 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">Without Annotations</button>
+                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${(taskTitle||'Task').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}_${(username||'User').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_')}_annotated.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 }; const resp=await fetch(`${base}/api/refinity/export-plain-with-annotations`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); 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">With Annotations</button>
+                </div>, document.body
+              )}
             </div>
-            <button onClick={()=>setCommentsOpen(o=>!o)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 hover:bg-white/50 transition-all duration-200">Comments</button>
+            {/* Comments button removed per request */}
             <button onClick={onBack} className="ml-auto 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">Back</button>
           </div>
-          {commentsOpen && (
-            <div className="mt-3 rounded-xl border border-gray-200 bg-white/60 p-3">
-              <div className="text-sm text-gray-800 mb-2">Add a brief comment (optional)</div>
-              <div className="flex gap-2">
-                <input value={newComment} onChange={(e)=>setNewComment(e.target.value)} className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm" placeholder="Your comment…" />
-                <button onClick={()=>{ const t=newComment.trim(); if(t){ setComments(prev=>[{ id: String(Date.now()), text: t, ts: Date.now() }, ...prev]); setNewComment(''); } }} className="px-3 py-2 text-xs rounded-xl bg-indigo-600/70 text-white hover:bg-indigo-700">Add</button>
-              </div>
-              {comments.length>0 && (
-                <div className="mt-3 space-y-2 max-h-40 overflow-auto">
-                  {comments.map(c=>(
-                    <div key={c.id} className="text-xs text-gray-700 bg-white rounded-lg border border-gray-200 p-2">{c.text}</div>
-                  ))}
-                </div>
-              )}
-            </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" />
@@ -1080,6 +1508,63 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
           )}
         </div>
       </div>
+      {/* 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"
+                >
+                  <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…" />
+              </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>
+              )}
+              <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={async ()=>{
+                    if (editingAnn) {
+                      const updated = { ...editingAnn, category: modalCategory, comment: modalComment, 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 saved = await persistCreate(local);
+                      addAnnotation(saved);
+                    }
+                    setModalOpen(false); setPopover(null); setEditingAnn(null);
+                  }}
+                  className="px-3 py-1.5 text-sm rounded-lg text-white bg-indigo-600 hover:bg-indigo-700"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

client/src/pages/Toolkit.tsx

@@ -374,9 +374,9 @@ const Toolkit: React.FC = () => {
             {tools.map(t => {
               const isActive = selectedTool === t.key;
               return (
-                <button
-                  key={t.key}
-                  onClick={() => handleToolChange(t.key)}
+              <button
+                key={t.key}
+                onClick={() => handleToolChange(t.key)}
                   className={`relative inline-flex items-center justify-center rounded-2xl px-4 py-1.5 whitespace-nowrap transition-all duration-300 ease-out ring-1 ring-inset ${isActive ? 'ring-white/50 backdrop-brightness-110 backdrop-saturate-150' : 'ring-white/30'} backdrop-blur-md isolate shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]`}
                   style={{ background: 'rgba(255,255,255,0.10)' }}
                 >
@@ -393,7 +393,7 @@ const Toolkit: React.FC = () => {
                   {/* Tint overlay: Indigo family to match Toolkit */}
                   <div className={`pointer-events-none absolute inset-0 rounded-2xl ${isActive ? 'bg-indigo-600/70 mix-blend-normal opacity-100' : 'bg-indigo-500/30 mix-blend-overlay opacity-35'}`} />
                   <span className={`relative z-10 text-sm font-medium ${isActive ? 'text-white' : 'text-black'}`}>{t.name}</span>
-                </button>
+              </button>
               );
             })}
           </div>

client/src/pages/TutorialTasks.tsx

@@ -957,8 +957,8 @@ const TutorialTasks: React.FC = () => {
             console.log('[Trace] ScrollPreserve:before', { taskId, topBefore });
           } catch {}
           React.startTransition(() => {
-            setTranslationText({ ...translationText, [taskId]: '' });
-            setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+        setTranslationText({ ...translationText, [taskId]: '' });
+        setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
           });
           if (!isSafari) {
             // Narrow refetch immediately for non-Safari
@@ -970,7 +970,7 @@ const TutorialTasks: React.FC = () => {
             }).catch(() => {
               requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
             });
-          } else {
+      } else {
             // Safari: delay refetch and keep locks until refetch completes
             pendingUnlocksRef.current.add(taskId);
             setTimeout(() => {
@@ -2468,8 +2468,8 @@ const TutorialTasks: React.FC = () => {
                       </button>
                     </div>
                     <div ref={(el) => { submissionsGridRefs.current[task._id] = el; }} className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 ${
-                      expandedSections[task._id]
-                        ? 'max-h-none overflow-visible'
+                      expandedSections[task._id] 
+                        ? 'max-h-none overflow-visible' 
                         : 'max-h-0 overflow-hidden'
                     }`} data-grid-id={task._id}>
                       {userSubmissions[task._id].map((submission, index) => (

client/src/pages/WeeklyPractice.tsx

@@ -1458,9 +1458,9 @@ const WeeklyPractice: React.FC = () => {
             {weeks.map((week) => {
               const isActive = selectedWeek === week;
               return (
-                <button
-                  key={week}
-                  onClick={() => handleWeekChange(week)}
+              <button
+                key={week}
+                onClick={() => handleWeekChange(week)}
                   className={`relative inline-flex items-center justify-center rounded-2xl px-4 py-1.5 whitespace-nowrap transition-all duration-300 ease-out ring-1 ring-inset ${isActive ? 'ring-white/50 backdrop-brightness-110 backdrop-saturate-150' : 'ring-white/30'} backdrop-blur-md isolate shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]`}
                   style={{ background: 'rgba(255,255,255,0.10)' }}
                 >
@@ -1477,7 +1477,7 @@ const WeeklyPractice: React.FC = () => {
                   {/* Pink tint overlay to match Weekly Practice identity */}
                   <div className={`pointer-events-none absolute inset-0 rounded-2xl ${isActive ? 'bg-pink-600/70 mix-blend-normal opacity-100' : 'bg-pink-500/30 mix-blend-overlay opacity-35'}`} />
                   <span className={`relative z-10 text-sm font-medium ${isActive ? 'text-white' : 'text-black'}`}>Week {week}</span>
-                </button>
+              </button>
               );
             })}
           </div>
@@ -1752,204 +1752,204 @@ const WeeklyPractice: React.FC = () => {
             </div>
             {((localStorage.getItem('viewMode')||'auto') !== 'student' && (JSON.parse(localStorage.getItem('user')||'{}').role === 'admin') && showSubmissions) && (
             <>
-             <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-                <div className="mb-4">
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
-                </div>
-                
-                {/* Video Player */}
-                <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
-                  <video
-                    className="w-full h-full"
-                    controls
-                    preload="metadata"
-                    id="nike-video"
-                    onError={(e) => console.error('Video loading error:', e)}
-                    onLoadStart={() => console.log('Video loading started')}
-                    onCanPlay={() => console.log('Video can play')}
-                  >
-                    <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
-                    Your browser does not support the video tag.
-                  </video>
-                  
-                  {/* On-screen subtitles */}
-                  {currentDisplayedSubtitle && (
-                    <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
-                      <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
-                        <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
-                          {formatSubtitleForDisplay(currentDisplayedSubtitle)}
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </div>
+            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+              <div className="mb-4">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
               </div>
- 
-              {/* Right Panel - Translation Workspace */}
-              <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-                <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
+              
+              {/* Video Player */}
+              <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
+                <video
+                  className="w-full h-full"
+                  controls
+                  preload="metadata"
+                  id="nike-video"
+                  onError={(e) => console.error('Video loading error:', e)}
+                  onLoadStart={() => console.log('Video loading started')}
+                  onCanPlay={() => console.log('Video can play')}
+                >
+                  <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
                 
-                {/* Segment Navigation Grid */}
-                {loadingSubtitles ? (
-                  <div className="grid grid-cols-9 gap-1 mb-6">
-                    {Array.from({ length: 26 }, (_, i) => (
-                      <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
-                        {i + 1}
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-9 gap-1 mb-6">
-                    {subtitleSegments.map((segment) => (
-                      <button
-                        key={segment.id}
-                        onClick={() => handleSegmentClick(segment.id)}
-                        className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
-                      >
-                        {segment.id}
-                      </button>
-                    ))}
+                {/* On-screen subtitles */}
+                {currentDisplayedSubtitle && (
+                  <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
+                    <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
+                      <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+                        {formatSubtitleForDisplay(currentDisplayedSubtitle)}
+                      </p>
+                    </div>
                   </div>
                 )}
-                
-                {/* Admin Time Code Editor */}
+              </div>
+            </div>
+
+            {/* Right Panel - Translation Workspace */}
+            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+              <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
+              
+              {/* Segment Navigation Grid */}
+              {loadingSubtitles ? (
+                <div className="grid grid-cols-9 gap-1 mb-6">
+                  {Array.from({ length: 26 }, (_, i) => (
+                    <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
+                      {i + 1}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="grid grid-cols-9 gap-1 mb-6">
+                  {subtitleSegments.map((segment) => (
+                    <button
+                      key={segment.id}
+                      onClick={() => handleSegmentClick(segment.id)}
+                      className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
+                    >
+                      {segment.id}
+                    </button>
+                  ))}
+                </div>
+              )}
+              
+              {/* Admin Time Code Editor */}
                 {editingSegment && (((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
-                  <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
-                    <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
-                    <div className="grid grid-cols-2 gap-2">
-                      <div>
-                        <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
-                        <input
-                          type="text"
-                          id="startTimeInput"
-                          defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
-                          className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                          placeholder="00:00:00,000"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-xs text-indigo-700 mb-1">End Time</label>
-                        <input
-                          type="text"
-                          id="endTimeInput"
-                          defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
-                          className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                          placeholder="00:00:00,000"
-                        />
-                      </div>
+                <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
+                  <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
+                      <input
+                        type="text"
+                        id="startTimeInput"
+                        defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
+                        className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                        placeholder="00:00:00,000"
+                      />
                     </div>
-                    <div className="flex space-x-2 mt-2">
-                      <button
-                        onClick={() => setEditingSegment(null)}
-                        className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        onClick={() => {
-                          const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
-                          const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
-                          if (startInput && endInput && startInput.value && endInput.value) {
-                            handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
-                          }
-                        }}
-                        className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
-                      >
-                        Save
-                      </button>
+                    <div>
+                      <label className="block text-xs text-indigo-700 mb-1">End Time</label>
+                      <input
+                        type="text"
+                        id="endTimeInput"
+                        defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
+                        className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                        placeholder="00:00:00,000"
+                      />
                     </div>
                   </div>
-                )}
-                
-                {/* Current Segment Details */}
-                <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
-                  <div className="flex items-center justify-between">
-                    <p className="text-gray-800">
-                      Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
-                    </p>
-                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                      <button
-                        onClick={() => handleEditTimeCode(currentSegment)}
-                        className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
-                        title="Edit time codes"
-                      >
-                        <PencilIcon className="w-3 h-3" />
-                        <span>Edit</span>
-                      </button>
-                    )}
+                  <div className="flex space-x-2 mt-2">
+                    <button
+                      onClick={() => setEditingSegment(null)}
+                      className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => {
+                        const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
+                        const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
+                        if (startInput && endInput && startInput.value && endInput.value) {
+                          handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
+                        }
+                      }}
+                      className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
+                    >
+                      Save
+                    </button>
                   </div>
                 </div>
-                
-                {/* Source Text */}
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
-                  <textarea
-                    value={subtitleText}
-                    readOnly
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
-                    rows={2}
-                  />
+              )}
+              
+              {/* Current Segment Details */}
+              <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
+                <div className="flex items-center justify-between">
+                  <p className="text-gray-800">
+                    Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
+                  </p>
+                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
+                    <button
+                      onClick={() => handleEditTimeCode(currentSegment)}
+                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
+                      title="Edit time codes"
+                    >
+                      <PencilIcon className="w-3 h-3" />
+                      <span>Edit</span>
+                    </button>
+                  )}
                 </div>
-                
-                {/* Target Text */}
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
-                  <textarea
-                    value={targetText}
-                    onChange={(e) => handleTargetTextChange(e.target.value)}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-                    rows={2}
-                    placeholder="Enter your translation..."
-                  />
-                  <div className="flex justify-between items-center mt-2">
-                    <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
-                    <span className="text-xs text-gray-600">{characterCount} characters</span>
-                  </div>
+              </div>
+              
+              {/* Source Text */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
+                <textarea
+                  value={subtitleText}
+                  readOnly
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
+                  rows={2}
+                />
+              </div>
+              
+              {/* Target Text */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
+                <textarea
+                  value={targetText}
+                  onChange={(e) => handleTargetTextChange(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                  rows={2}
+                  placeholder="Enter your translation..."
+                />
+                <div className="flex justify-between items-center mt-2">
+                  <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
+                  <span className="text-xs text-gray-600">{characterCount} characters</span>
                 </div>
-                
-                {/* Action Buttons */}
-                <div className="flex space-x-3 mb-4">
-                  <button
-                    onClick={handleSaveTranslation}
-                    className={`px-4 py-2 rounded-lg ${
-                      saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
-                      saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
-                      saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
-                      'bg-indigo-600 hover:bg-indigo-700'
-                    } text-white`}
-                  >
-                    {saveStatus}
-                  </button>
-                  <button
-                    onClick={handlePreviewTranslation}
-                    className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
-                      showTranslatedSubtitles 
-                        ? 'bg-green-500 hover:bg-green-600 text-white' 
-                        : 'bg-gray-500 hover:bg-gray-600 text-white'
-                    }`}
-                  >
-                    <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
-                  </button>
+              </div>
+              
+              {/* Action Buttons */}
+              <div className="flex space-x-3 mb-4">
+                <button
+                  onClick={handleSaveTranslation}
+                  className={`px-4 py-2 rounded-lg ${
+                    saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
+                    saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
+                    saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
+                    'bg-indigo-600 hover:bg-indigo-700'
+                  } text-white`}
+                >
+                  {saveStatus}
+                </button>
+                <button
+                  onClick={handlePreviewTranslation}
+                  className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
+                    showTranslatedSubtitles 
+                      ? 'bg-green-500 hover:bg-green-600 text-white' 
+                      : 'bg-gray-500 hover:bg-gray-600 text-white'
+                  }`}
+                >
+                  <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
+                </button>
+              </div>
+              
+              {/* Translation Progress */}
+              <div className="mb-4">
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-sm font-medium text-gray-700">Translation Progress</span>
+                  <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
                 </div>
-                
-                {/* Translation Progress */}
-                <div className="mb-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <span className="text-sm font-medium text-gray-700">Translation Progress</span>
-                    <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
-                  </div>
-                  <div className="w-full bg-gray-200 rounded-full h-2">
-                    <div 
-                      className="bg-green-500 h-2 rounded-full transition-all duration-300"
-                      style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
-                    ></div>
-                  </div>
+                <div className="w-full bg-gray-200 rounded-full h-2">
+                  <div 
+                    className="bg-green-500 h-2 rounded-full transition-all duration-300"
+                    style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
+                  ></div>
                 </div>
               </div>
-            </>
-            )}
-          </div>
-        )}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
         <div className="space-y-6">
           {/* Show Subtitling UI Button for Week 2 Admin */}
           {selectedWeek === 2 && (() => {
@@ -1959,8 +1959,8 @@ const WeeklyPractice: React.FC = () => {
           })() && (
             <div className="mb-4">
               <button onClick={() => setShowSubmissions(v=>!v)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">{showSubmissions ? 'Hide Subtitling UI' : 'Show Subtitling UI (Admin)'}</button>
-            </div>
-          )}
+              </div>
+            )}
           {/* Add Practice Button for Admin */}
           {(() => {
             const user = JSON.parse(localStorage.getItem('user') || '{}');
@@ -2592,9 +2592,9 @@ const WeeklyPractice: React.FC = () => {
                 )}
               </div>
             ))}
-            </>
-          )}
-        </div>
+        </>
+        )}
+      </div>
 
       {/* Edit Submission Modal */}
       {editingSubmission && (