Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Swiper as SwiperRoot, SwiperSlide } from 'swiper/react';
+import { EffectCoverflow, Navigation, A11y } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/navigation';
 import { api } from '../services/api';
 
 type Stage = 'task' | 'flow' | 'preview' | 'editor';
@@ -233,15 +238,8 @@ const Refinity: React.FC = () => {
 
   return (
     <div className="relative">
-      {/* Indigo-tinted gradient underlay */}
-      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
-      {/* Glass card container */}
-      <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)]">
-        <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="pointer-events-none absolute inset-0 rounded-xl" style={{ background: 'radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%)' }} />
-        <div className="pointer-events-none absolute inset-0 rounded-xl bg-indigo-500/10 mix-blend-overlay opacity-30" />
-        <div className="relative p-6">
+      {/* Clean container (no purple gradient) */}
+      <div className="relative rounded-xl p-6 bg-transparent">
       {/* Stage 1: Task Creation / Selection */}
       {stage === 'task' && (
         <div>
@@ -351,13 +349,13 @@ const Refinity: React.FC = () => {
         </div>
       )}
 
-      {/* Stage 2: Version Flow - Framer Motion 3-card deck */}
+      {/* Stage 2: Version Flow - Swiper Coverflow */}
       {stage === 'flow' && (
         <div>
           <div className="flex items-center justify-between mb-4">
             <div>
               <h3 className="text-xl font-semibold text-black">Version Flow — {task?.title}</h3>
-              <div className="text-gray-700 text-sm">Use arrows or click cards. Center card is active.</div>
+              <div className="text-gray-700 text-sm">Swipe/click to browse. Center slide is active.</div>
             </div>
             <div className="flex gap-2">
               <button onClick={()=>setStage('task')} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">
@@ -367,62 +365,40 @@ const Refinity: React.FC = () => {
               </button>
             </div>
           </div>
-
-          <div className="relative h-[420px]">
-            <button aria-label="Previous" onClick={()=> setFlowIndex(i => Math.max(i-1, 0))} className="absolute left-2 top-1/2 -translate-y-1/2 z-10 px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">‹</button>
-            <button aria-label="Next" onClick={()=> setFlowIndex(i => Math.min(i+1, Math.max(taskVersions.length-1, 0)))} className="absolute right-2 top-1/2 -translate-y-1/2 z-10 px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">›</button>
-
-            {(() => {
-              const n = taskVersions.length;
-              if (n === 0) return (
-                <div className="h-full grid place-items-center text-gray-600">No versions yet.</div>
-              );
-              const center = Math.min(Math.max(flowIndex, 0), n - 1);
-              const ids: Array<{ pos: 'left'|'center'|'right'; idx: number }> = [];
-              if (center - 1 >= 0) ids.push({ pos: 'left', idx: center - 1 });
-              ids.push({ pos: 'center', idx: center });
-              if (center + 1 < n) ids.push({ pos: 'right', idx: center + 1 });
-
-              const variants = {
-                left: { x: '-32%', scale: 0.98, rotate: 0, opacity: 0.98, zIndex: 10 },
-                center: { x: '-50%', scale: 1.0, rotate: 0, opacity: 1, zIndex: 20 },
-                right: { x: '-68%', scale: 0.98, rotate: 0, opacity: 0.98, zIndex: 10 }
-              } as const;
-
-              return (
-                <AnimatePresence initial={false}>
-                  {ids.map(({ pos, idx }) => {
-                    const v = taskVersions[idx];
-                    const snippet = (v.content || '').slice(0, 220) + ((v.content || '').length > 220 ? '…' : '');
-                    const isCenter = pos === 'center';
-                    return (
-                      <motion.div
-                        key={v.id}
-                        className="absolute top-0 left-1/2 w-[560px]"
-                        initial={variants[pos]}
-                        animate={variants[pos]}
-                        exit={variants[pos]}
-                        transition={{ type: 'spring', stiffness: 300, damping: 28 }}
-                        onClick={() => { if (!isCenter) setFlowIndex(idx); }}
-                      >
-                        <div className="relative rounded-xl p-5 bg-white ring-1 ring-gray-200 shadow-lg text-base">
-                          <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
-                          <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
-                          <div className="text-gray-900 whitespace-pre-wrap break-words leading-relaxed">{snippet}</div>
-                          {isCenter && (
-                            <div className="mt-4 flex gap-3">
-                              <button onClick={()=>{ setPreviewVersionId(v.id); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">Full Text</button>
-                              <button onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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 active:translate-y-0.5 transition-all duration-200">Revise</button>
-                              <button onClick={()=>{ setPreviewVersionId(v.id); setShowPreviewDiff(true); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">Compare</button>
-                            </div>
-                          )}
+          <div className="relative">
+            <SwiperRoot
+              modules={[EffectCoverflow, Navigation, A11y]}
+              effect="coverflow"
+              onSlideChange={(s)=> setFlowIndex(s.activeIndex)}
+              onAfterInit={(s)=> setFlowIndex(s.activeIndex)}
+              navigation
+              centeredSlides
+              slidesPerView={1.2}
+              spaceBetween={24}
+              coverflowEffect={{ rotate: 0, stretch: 40, depth: 80, modifier: 1, slideShadows: false }}
+              className="!px-8"
+            >
+              {taskVersions.map((v, idx) => {
+                const snippet = (v.content || '').slice(0, 220) + ((v.content || '').length > 220 ? '…' : '');
+                const isCenter = idx === flowIndex;
+                return (
+                  <SwiperSlide key={v.id} style={{ width: 560 }}>
+                    <div className="relative rounded-xl p-5 bg-white ring-1 ring-gray-200 shadow-lg text-base">
+                      <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
+                      <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
+                      <div className="text-gray-900 whitespace-pre-wrap break-words leading-relaxed">{snippet}</div>
+                      {isCenter && (
+                        <div className="mt-4 flex gap-3">
+                          <button onClick={()=>{ setPreviewVersionId(v.id); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">Full Text</button>
+                          <button onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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 active:translate-y-0.5 transition-all duration-200">Revise</button>
+                          <button onClick={()=>{ setPreviewVersionId(v.id); setShowPreviewDiff(true); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 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">Compare</button>
                         </div>
-                      </motion.div>
-                    );
-                  })}
-                </AnimatePresence>
-              );
-            })()}
+                      )}
+                    </div>
+                  </SwiperSlide>
+                );
+              })}
+            </SwiperRoot>
           </div>
         </div>
       )}
@@ -449,7 +425,6 @@ const Refinity: React.FC = () => {
           nextVersionNumber={((versions.filter(v=>v.taskId===(task?.id||'')).slice(-1)[0]?.versionNumber) || 0) + 1}
         />
       )}
-        </div>
       </div>
     </div>
   );