free-coding-models 0.5.9 → 0.5.11

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

@@ -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

@@ -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 {

package/web/src/components/layout/Header.jsx

@@ -13,7 +13,7 @@ import {
   IconBolt, IconSearch, IconDownload, IconSettings, IconMoon, IconSun,
   IconPlayerPlay, IconCommand, IconLayoutDashboard, IconActivity,
   IconSparkles, IconRoute, IconDots, IconQuestionMark, IconHistory,
-  IconPlug, IconFolders, IconMenu2,
+  IconPlug, IconFolders, IconMenu2, IconMessageChatbot,
 } from '@tabler/icons-react'
 import ToolPicker from '../tools/ToolPicker.jsx'
 import styles from './Header.module.css'
@@ -27,6 +27,7 @@ const NAV_ITEMS = [
   { id: 'analytics',   label: 'Analytics',   icon: IconActivity },
   { id: 'recommend',   label: 'Recommend',   icon: IconSparkles },
   { id: 'router',      label: 'Router',      icon: IconRoute },
+  { id: 'playground',  label: 'Playground',  icon: IconMessageChatbot },
 ]
 
 // 📖 Overflow menu items — Help + Changelog shipped in M2; Install Endpoints

package/web/src/components/palette/CommandPalette.jsx

@@ -42,6 +42,7 @@ function buildWebEntries(deps) {
     // Pages (open as modals)
     { id: 'page.help', section: 'page', label: 'Open Help', keywords: ['help', 'shortcuts', 'reference'], run: () => deps.onOpenHelp?.() },
     { id: 'page.changelog', section: 'page', label: 'Open Changelog', keywords: ['changelog', 'release', 'history', 'version'], run: () => onOpenChangelog?.() },
+    { id: 'page.playground', section: 'page', label: 'Open Playground', keywords: ['playground', 'chat', 'try', 'prompt', 'router'], run: () => deps.onOpenPlayground?.() },
     { id: 'page.install-endpoints', section: 'page', label: 'Open Install Endpoints (M4)', keywords: ['install', 'endpoint', 'tool', 'configure'], disabled: true },
     { id: 'page.installed-models', section: 'page', label: 'Open Installed Models (M4)', keywords: ['installed', 'models', 'tools'], disabled: true },