Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { api } from '../services/api';
 
 type Stage = 'task' | 'flow' | 'preview' | 'editor';
@@ -350,13 +351,13 @@ const Refinity: React.FC = () => {
         </div>
       )}
 
-      {/* Stage 2: Version Flow */}
+      {/* Stage 2: Version Flow - Framer Motion 3-card deck */}
       {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">Scroll to browse. Center card is focused.</div>
+              <div className="text-gray-700 text-sm">Use arrows or click cards. Center card 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,34 +368,61 @@ const Refinity: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative py-4">
-            <div className="absolute left-2 top-1/2 -translate-y-1/2 z-10">
-              <button onClick={()=> setFlowIndex((i)=> Math.max(i-1, 0))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">‹</button>
-            </div>
-            <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
-              <button onClick={()=> setFlowIndex((i)=> Math.min(i+1, Math.max(taskVersions.length-1, 0)))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">›</button>
-            </div>
-            <div className="overflow-x-auto px-16">
-              <div className="inline-flex gap-6 pb-2">
-                {taskVersions.map((v, idx) => {
-                  const snippet = (v.content || '').slice(0, 200) + ((v.content || '').length > 200 ? '…' : '');
-                  return (
-                    <div key={v.id} className="snap-center flex-shrink-0 w-[560px]">
-                      <div className="relative rounded-xl p-5 bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[0_20px_40px_rgba(0,0,0,0.08),inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] 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>
-                        <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 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: -2, opacity: 0.95, zIndex: 10 },
+                center: { x: '-50%', scale: 1.0, rotate: 0, opacity: 1, zIndex: 20 },
+                right: { x: '-68%', scale: 0.98, rotate: 2, opacity: 0.95, 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/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[0_20px_40px_rgba(0,0,0,0.08),inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] 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>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
+                      </motion.div>
+                    );
+                  })}
+                </AnimatePresence>
+              );
+            })()}
           </div>
         </div>
       )}