npm - free-coding-models - Versions diffs - 0.5.9 → 0.5.10 - Mend

free-coding-models 0.5.9 → 0.5.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/web/dist/index.html CHANGED Viewed

@@ -48,8 +48,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/assets/index-27IYGKp2.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DKmmiDip.css">
+  <script type="module" crossorigin src="/assets/index-BwLMt0bw.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BrJgRhTA.css">
 </head>
 <body>
   <div id="root"></div>

package/web/src/components/install/InstallEndpointsView.jsx CHANGED Viewed

@@ -88,7 +88,10 @@ export default function InstallEndpointsView({ onClose, onToast }) {
   }
   const handleInstall = async () => {
+    // 📖 Avance au step 3 d'abord (animation "installing"), puis lance l'install
+    setStep(3)
     setInstalling(true)
+    setInstallResult(null)
     try {
       const resp = await fetch('/api/install-endpoints/wizard', {
         method: 'POST',
@@ -105,10 +108,15 @@ export default function InstallEndpointsView({ onClose, onToast }) {
         setInstallResult(data)
         onToast?.(`Installed ${data.modelCount} models for ${selectedProvider.label} into ${TOOLS.find(t => t.id === selectedTool)?.label || selectedTool}.`, 'success')
       } else {
+        setInstallResult(null)
         onToast?.(`Install failed: ${data.error || 'unknown'}`, 'error')
+        // 📖 Retour au step 2 si l'install échoue pour laisser réessayer
+        setStep(2)
       }
     } catch (err) {
+      setInstallResult(null)
       onToast?.(`Install error: ${err.message}`, 'error')
+      setStep(2)
     } finally {
       setInstalling(false)
     }
@@ -224,23 +232,35 @@ export default function InstallEndpointsView({ onClose, onToast }) {
             </div>
           )}
-          {/* Step 3: Installing / Done */}
+          {/* Step 3: Installing → Done */}
           {step === 3 && (
             <div className={styles.stepContent}>
               {installing && (
                 <div className={styles.installingState}>
-                  <IconLoader size={24} className={styles.spinner} />
-                  <span>Installing {scope === 'all' ? 'all' : selectedModels.length} models…</span>
+                  <IconLoader size={32} className={styles.spinner} />
+                  <span className={styles.installingLabel}>Installing {scope === 'all' ? 'all' : selectedModels.length} model{scope === 'all' && catalogModels.length !== 1 ? 's' : selectedModels.length !== 1 ? 's' : ''}…</span>
+                  <span className={styles.installingSub}>Writing config for {TOOLS.find(t => t.id === selectedTool)?.label}</span>
                 </div>
               )}
-              {installResult && (
+              {!installing && installResult && (
                 <div className={styles.doneState}>
-                  <IconCheck size={32} color="#00c864" />
-                  <h3>Installation Complete</h3>
-                  <p>{installResult.modelCount} models installed into {installResult.toolLabel}</p>
+                  <div className={styles.checkCircle}>
+                    <IconCheck size={36} />
+                  </div>
+                  <h3 className={styles.doneTitle}>Installed!</h3>
+                  <p className={styles.doneSub}>
+                    {installResult.modelCount} model{installResult.modelCount !== 1 ? 's' : ''} from <strong>{selectedProvider?.label}</strong> → <strong>{installResult.toolLabel}</strong>
+                  </p>
                   <code className={styles.installPath}>{installResult.path}</code>
                 </div>
               )}
+              {!installing && !installResult && (
+                <div className={styles.doneState}>
+                  <span className={styles.errorDot}>✕</span>
+                  <h3 className={styles.doneTitle}>Install failed</h3>
+                  <p className={styles.doneSub}>Check the toast for details. You can go back and retry.</p>
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -253,6 +273,13 @@ export default function InstallEndpointsView({ onClose, onToast }) {
               Back
             </button>
           )}
+          {/* Step 3 error: show Back to retry */}
+          {step === 3 && !installing && !installResult && (
+            <button className={styles.backBtn} onClick={() => setStep(2)}>
+              <IconChevronLeft size={14} />
+              Back
+            </button>
+          )}
           {step < 3 && (
             <button className={styles.nextBtn} onClick={handleNext} disabled={!canNext()}>
               {step === 2 ? (
@@ -268,8 +295,11 @@ export default function InstallEndpointsView({ onClose, onToast }) {
               )}
             </button>
           )}
-          {step === 3 && installResult && (
-            <button className={styles.doneBtn} onClick={onClose}>Done</button>
+          {step === 3 && !installing && installResult && (
+            <button className={styles.doneBtn} onClick={onClose}>
+              <IconCheck size={14} />
+              Done
+            </button>
           )}
         </div>
       </div>

package/web/src/components/install/InstallEndpointsView.module.css CHANGED Viewed

@@ -258,23 +258,77 @@
   align-items: center;
   justify-content: center;
   gap: 12px;
-  padding: 40px 0;
+  padding: 50px 0;
   color: var(--text-secondary, #aaa);
 }
+.installingLabel {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+.installingSub {
+  font-size: 12px;
+  color: var(--text-muted, #888);
+}
 .spinner {
-  animation: spin 1s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 .doneState {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 30px 0;
+  gap: 10px;
+  padding: 40px 0;
   text-align: center;
-  h3 { margin: 0; color: #00c864; font-size: 18px; }
-  p { margin: 0; color: var(--text-secondary, #aaa); font-size: 13px; }
+  animation: doneFadeIn 0.3s ease;
+}
+.doneTitle {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+}
+.doneSub {
+  margin: 0;
+  color: var(--text-secondary, #aaa);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.doneSub strong {
+  color: var(--text-primary, #e0e0e0);
+}
+/* 📖 Animated check circle — scales up with a satisfying bounce */
+.checkCircle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(0, 200, 100, 0.12);
+  color: #00c864;
+  animation: checkPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.errorDot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(220, 53, 69, 0.12);
+  color: #dc3545;
+  font-size: 28px;
+  font-weight: 700;
+  animation: checkPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .installPath {
@@ -288,6 +342,23 @@
   text-overflow: ellipsis;
 }
+@keyframes doneFadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes donePop {
+  0%   { transform: scale(0.5); opacity: 0; }
+  60%  { transform: scale(1.1); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes checkPop {
+  0%   { transform: scale(0); opacity: 0; }
+  50%  { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
+}
 /* Footer */
 .footer {
   display: flex;
@@ -328,16 +399,21 @@
 }
 .doneBtn {
-  padding: 8px 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 28px;
   background: #00c864;
   color: #000;
   border: none;
   border-radius: 8px;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   cursor: pointer;
   margin-left: auto;
-  &:hover { background: #00d874; }
+  transition: transform 0.15s ease, background 0.15s ease;
+  &:hover { background: #00d874; transform: scale(1.02); }
+  &:active { transform: scale(0.98); }
 }
 @keyframes fadeIn {