Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -223,9 +223,55 @@ const Refinity: React.FC = () => {
     if (idx >= 0) return idx;
     return Math.min(Math.max(taskVersions.length - 1, 0), flowIndex);
   }, [taskVersions, currentVersionId, flowIndex]);
+  const centerVersionId = React.useMemo(() => (taskVersions[flowIndex]?.id) || '', [taskVersions, flowIndex]);
 
   // Keyboard navigation disabled per request (use arrow buttons only)
 
+  // Non-visual overlay to guarantee Revise clickability on all platforms without changing layout
+  const reviseBtnRefs = React.useRef<Record<string, HTMLButtonElement | null>>({});
+  const [reviseOverlay, setReviseOverlay] = React.useState<{ left: number; top: number; width: number; height: number; vid: string } | null>(null);
+  const updateReviseOverlay = React.useCallback(() => {
+    try {
+      const v = taskVersions[flowIndex];
+      if (!v) { setReviseOverlay(null); return; }
+      const el = reviseBtnRefs.current[v.id || ''];
+      if (!el) { setReviseOverlay(null); return; }
+      const r = el.getBoundingClientRect();
+      if (r.width === 0 || r.height === 0) { setReviseOverlay(null); return; }
+      setReviseOverlay({ left: Math.max(0, r.left), top: Math.max(0, r.top), width: r.width, height: r.height, vid: v.id });
+    } catch { setReviseOverlay(null); }
+  }, [taskVersions, flowIndex]);
+  React.useLayoutEffect(() => { updateReviseOverlay(); }, [updateReviseOverlay, isFullscreen, compareUIOpen, revDownloadOpen]);
+  React.useEffect(() => {
+    // After slide changes, measure across a few frames and after a short delay
+    let raf1 = 0, raf2 = 0, raf3 = 0;
+    const tick = () => updateReviseOverlay();
+    raf1 = window.requestAnimationFrame(() => {
+      tick();
+      raf2 = window.requestAnimationFrame(() => {
+        tick();
+        raf3 = window.requestAnimationFrame(() => tick());
+      });
+    });
+    const t = window.setTimeout(tick, 260);
+    return () => {
+      window.cancelAnimationFrame(raf1);
+      window.cancelAnimationFrame(raf2);
+      window.cancelAnimationFrame(raf3);
+      window.clearTimeout(t);
+    };
+  }, [flowIndex, centerVersionId, updateReviseOverlay]);
+  React.useEffect(() => {
+    const onResize = () => updateReviseOverlay();
+    const onScroll = () => updateReviseOverlay();
+    window.addEventListener('resize', onResize, { passive: true } as any);
+    window.addEventListener('scroll', onScroll, { passive: true } as any);
+    return () => {
+      window.removeEventListener('resize', onResize as any);
+      window.removeEventListener('scroll', onScroll as any);
+    };
+  }, [updateReviseOverlay]);
+
   const uploadDocx = async (file: File) => {
     setUploading(true);
     try {
@@ -822,7 +868,27 @@ const Refinity: React.FC = () => {
                         <div className="pointer-events-none absolute text-gray-700" style={{ left: '1.5rem', bottom: '6rem', zIndex: 2000 }}>…</div>
                       )}
                       {isCenter && (
-                        <div className="action-row absolute left-6 right-6 bottom-6 swiper-no-swiping" data-version-number={v.versionNumber} style={{ pointerEvents: 'auto', transform: 'translateZ(0)', zIndex: 3000 }}>
+                        <div
+                          className="action-row absolute left-6 right-6 bottom-6 swiper-no-swiping"
+                          data-version-number={v.versionNumber}
+                          data-version-index={idx}
+                          data-version-id={v.id}
+                          data-owner={String(v.revisedBy || v.originalAuthor || '').toLowerCase() === String(username).toLowerCase() || !!isAdmin}
+                          onClickCapture={(e)=> {
+                            // Diagnostic: capture clicks within action row to ensure they are not swallowed by slide
+                            const t = e.target as HTMLElement;
+                            console.debug('[VF] action-row click(capture)', {
+                              idx,
+                              versionId: v.id,
+                              buttonData: t?.dataset || {},
+                              targetTag: t?.tagName,
+                              targetClasses: t?.className
+                            });
+                          }}
+                          onMouseEnter={()=>{ updateReviseOverlay(); }}
+                          onMouseMove={()=>{ updateReviseOverlay(); }}
+                          style={{ pointerEvents: 'auto', transform: 'translateZ(0)', zIndex: 3000 }}
+                        >
                           {/* Invisible first child to bypass first-child quirks while matching pill styles (kept in place) */}
                           <button
                             type="button"
@@ -834,12 +900,35 @@ const Refinity: React.FC = () => {
                           <div className="flex justify-center gap-3 w-full">
                             <button
                               type="button"
+                              data-btn="revise"
+                              ref={(el)=>{ reviseBtnRefs.current[v.id] = el; }}
+                              onClickCapture={(e)=>{ e.stopPropagation(); }}
+                              onPointerDown={(e)=>{ e.stopPropagation(); }}
+                              onPointerUp={(e)=>{ e.stopPropagation(); }}
                               onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
-                                console.log('Revise clicked for version:', v.versionNumber, 'id:', v.id);
+                                console.debug('[VF] Revise click', { idx, versionId: v.id, versionNumber: v.versionNumber });
                                 selectManual(v.id);
                               }}
+                              onMouseEnter={(e) => {
+                                // Diagnostic: inspect computed styles which could affect clickability
+                                try {
+                                  const el = e.currentTarget as HTMLElement;
+                                  const elCS = window.getComputedStyle(el);
+                                  const parent = el.parentElement;
+                                  const parentCS = parent ? window.getComputedStyle(parent) : null;
+                                  const row = el.closest('.action-row') as HTMLElement | null;
+                                  const rowCS = row ? window.getComputedStyle(row) : null;
+                                  console.debug('[VF] Revise hover styles', {
+                                    idx,
+                                    versionId: v.id,
+                                    el: { zIndex: elCS.zIndex, pointerEvents: elCS.pointerEvents, position: elCS.position },
+                                    parent: parentCS ? { zIndex: parentCS.zIndex, pointerEvents: parentCS.pointerEvents, position: parentCS.position } : null,
+                                    row: rowCS ? { zIndex: rowCS.zIndex, pointerEvents: rowCS.pointerEvents, position: rowCS.position } : null
+                                  });
+                                } catch {}
+                              }}
                               className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-1.5 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-violet-600/70 hover:bg-violet-700 active:translate-y-0.5 transition-all duration-200"
                               style={{ position: 'relative', zIndex: 3100, pointerEvents: 'auto', cursor: 'pointer', touchAction: 'manipulation' }}
                             >
@@ -850,7 +939,8 @@ const Refinity: React.FC = () => {
                           {(String(v.revisedBy || v.originalAuthor || '').toLowerCase() === String(username).toLowerCase() || isAdmin) && (
                             <button
                               type="button"
-                              onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); setCurrentVersionId(v.id); setEditingVersionId(v.id); setStage('editor'); }}
+                              data-btn="edit"
+                              onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); console.debug('[VF] Edit click', { idx, versionId: v.id }); setCurrentVersionId(v.id); setEditingVersionId(v.id); setStage('editor'); }}
                               className="relative inline-flex items-center justify-center gap-2 px-3 py-1.5 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"
                               style={{ position: 'relative', zIndex: 3100, pointerEvents: 'auto', cursor: 'pointer', touchAction: 'manipulation' }}
                             >
@@ -859,6 +949,7 @@ const Refinity: React.FC = () => {
                           )}
                             <button
                               type="button"
+                              data-btn="download"
                               onClick={(e)=>{
                                 e.preventDefault(); e.stopPropagation();
                                 // Export single version content as simple .docx (inline changes off)
@@ -883,7 +974,8 @@ const Refinity: React.FC = () => {
                             </button>
                             <button 
                               type="button"
-                              onClick={(e) => { e.preventDefault(); e.stopPropagation(); setCompareUIOpen(true); if (!compareA) setCompareA(v.id); }} 
+                              data-btn="compare"
+                              onClick={(e) => { e.preventDefault(); e.stopPropagation(); console.debug('[VF] Compare click', { idx, versionId: v.id }); setCompareUIOpen(true); if (!compareA) setCompareA(v.id); }} 
                               className="relative inline-flex items-center justify-center gap-2 px-3 py-1.5 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"
                               style={{ position: 'relative', zIndex: 3100, pointerEvents: 'auto', cursor: 'pointer', touchAction: 'manipulation' }}
                             >
@@ -892,7 +984,8 @@ const Refinity: React.FC = () => {
                             {(isAdmin || String(v.revisedBy || v.originalAuthor || '').toLowerCase() === String(username).toLowerCase()) && (
                               <button
                                 type="button"
-                                onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); deleteVersion(v.id); }}
+                                data-btn="delete"
+                                onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); console.debug('[VF] Delete click', { idx, versionId: v.id }); deleteVersion(v.id); }}
                                 className="relative inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium rounded-2xl text-red-700 ring-1 ring-inset ring-red-300 bg-white/20 backdrop-blur-md hover:bg-red-600 hover:text-white active:translate-y-0.5 transition-all duration-200"
                                 style={{ position: 'relative', zIndex: 3100, pointerEvents: 'auto', cursor: 'pointer', touchAction: 'manipulation' }}
                               >
@@ -907,6 +1000,28 @@ const Refinity: React.FC = () => {
                 );
               })}
             </SwiperRoot>
+            {reviseOverlay && createPortal(
+              <button
+                aria-label="Revise overlay"
+                style={{
+                  position: 'fixed',
+                  left: `${reviseOverlay.left}px`,
+                  top: `${reviseOverlay.top}px`,
+                  width: `${reviseOverlay.width}px`,
+                  height: `${reviseOverlay.height}px`,
+                  background: 'transparent',
+                  border: 'none',
+                  padding: 0,
+                  margin: 0,
+                  cursor: 'pointer',
+                  zIndex: 2147483000
+                }}
+                onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); selectManual(reviseOverlay.vid); }}
+                onPointerDown={(e)=>{ e.stopPropagation(); }}
+                onPointerUp={(e)=>{ e.stopPropagation(); }}
+              />,
+              document.body
+            )}
             
             {/* External V2 Revise Button removed per user request */}