free-coding-models 0.5.86 → 0.5.87

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

@@ -1,309 +0,0 @@
-/**
- * @file web/src/components/install/InstallEndpointsView.jsx
- * @description Install Endpoints wizard — 4-step modal: provider → tool → models → install.
- * 📖 M4: Full TUI parity for the install endpoints overlay.
- * 📖 Uses existing /api/install-endpoints/providers, /api/install-endpoints/catalog,
- * 📖 and /api/install-endpoints/wizard endpoints.
- */
-import { useState, useEffect, useCallback } from 'react'
-import {
-  IconPlug, IconChevronRight, IconChevronLeft, IconCheck,
-  IconLoader,
-} from '@tabler/icons-react'
-import styles from './InstallEndpointsView.module.css'
-
-const STEPS = ['Provider', 'Tool', 'Models', 'Install']
-
-export default function InstallEndpointsView({ onClose, onToast }) {
-  const [step, setStep] = useState(0)
-  const [providers, setProviders] = useState([])
-  const [selectedProvider, setSelectedProvider] = useState(null)
-  const [catalogModels, setCatalogModels] = useState([])
-  const [selectedTool, setSelectedTool] = useState(null)
-  const [selectedModels, setSelectedModels] = useState([])
-  const [scope, setScope] = useState('all')
-  const [installing, setInstalling] = useState(false)
-  const [installResult, setInstallResult] = useState(null)
-  const [loading, setLoading] = useState(true)
-
-  // 📖 Available install targets from ToolPicker's mode list
-  const TOOLS = [
-    { id: 'opencode', label: 'OpenCode CLI', emoji: '💻' },
-    { id: 'opencode-desktop', label: 'OpenCode Desktop', emoji: '🖥️' },
-    { id: 'openclaw', label: 'OpenClaw', emoji: '🦞' },
-    { id: 'crush', label: 'Crush', emoji: '💘' },
-    { id: 'goose', label: 'Goose', emoji: '🪿' },
-    { id: 'pi', label: 'Pi', emoji: 'π' },
-    { id: 'aider', label: 'Aider', emoji: '🛠' },
-    { id: 'qwen', label: 'Qwen', emoji: '🐉' },
-    { id: 'openhands', label: 'OpenHands', emoji: '🤲' },
-    { id: 'amp', label: 'Amp', emoji: '⚡' },
-    { id: 'forgecode', label: 'ForgeCode', emoji: '🔥' },
-    { id: 'zcode', label: 'ZCode', emoji: '🧊' },
-    { id: 'fcm_router', label: 'FCM Router', emoji: '🔄' },
-  ]
-
-  // Load providers on mount
-  useEffect(() => {
-    fetch('/api/install-endpoints/providers')
-      .then(r => r.json())
-      .then(data => {
-        setProviders(data.providers || [])
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
-  }, [])
-
-  // Load catalog when provider selected
-  useEffect(() => {
-    if (!selectedProvider) return
-    fetch(`/api/install-endpoints/catalog?provider=${selectedProvider.providerKey}`)
-      .then(r => r.json())
-      .then(data => setCatalogModels(data.models || []))
-      .catch(() => setCatalogModels([]))
-  }, [selectedProvider])
-
-  const toggleModel = useCallback((modelId) => {
-    setSelectedModels(prev =>
-      prev.includes(modelId)
-        ? prev.filter(id => id !== modelId)
-        : [...prev, modelId]
-    )
-  }, [])
-
-  const selectAll = useCallback(() => {
-    setSelectedModels(catalogModels.map(m => m.modelId))
-    setScope('all')
-  }, [catalogModels])
-
-  const selectNone = useCallback(() => {
-    setSelectedModels([])
-    setScope('selected')
-  }, [])
-
-  const canNext = () => {
-    if (step === 0) return !!selectedProvider
-    if (step === 1) return !!selectedTool
-    if (step === 2) return scope === 'all' || selectedModels.length > 0
-    return true
-  }
-
-  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',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          providerKey: selectedProvider.providerKey,
-          toolMode: selectedTool,
-          scope,
-          modelIds: scope === 'selected' ? selectedModels : [],
-        }),
-      })
-      const data = await resp.json()
-      if (data.success) {
-        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)
-    }
-  }
-
-  const handleNext = () => {
-    if (step === 2) {
-      handleInstall()
-      return
-    }
-    setStep(s => Math.min(s + 1, 3))
-  }
-
-  const handleBack = () => {
-    setStep(s => Math.max(s - 1, 0))
-  }
-
-  return (
-    <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
-      <div className={styles.modal}>
-        <div className={styles.header}>
-          <h2 className={styles.title}>
-            <IconPlug size={20} stroke={1.5} />
-            Install Endpoints
-          </h2>
-          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">✕</button>
-        </div>
-
-        {/* Step indicator */}
-        <div className={styles.steps}>
-          {STEPS.map((label, i) => (
-            <div key={i} className={`${styles.step} ${i === step ? styles.stepActive : i < step ? styles.stepDone : ''}`}>
-              <span className={styles.stepNum}>{i < step ? <IconCheck size={12} /> : i + 1}</span>
-              <span className={styles.stepLabel}>{label}</span>
-            </div>
-          ))}
-        </div>
-
-        <div className={styles.body}>
-          {/* Step 0: Select Provider */}
-          {step === 0 && (
-            <div className={styles.stepContent}>
-              <p className={styles.stepDesc}>Choose a provider with a configured API key.</p>
-              {loading && <div className={styles.loading}>Loading providers…</div>}
-              {!loading && providers.length === 0 && (
-                <div className={styles.empty}>No configured providers found. Add API keys in Settings first.</div>
-              )}
-              <div className={styles.grid}>
-                {providers.map((p) => (
-                  <button
-                    key={p.providerKey}
-                    className={`${styles.pickCard} ${selectedProvider?.providerKey === p.providerKey ? styles.pickActive : ''}`}
-                    onClick={() => { setSelectedProvider(p); setStep(1) }}
-                  >
-                    <span className={styles.pickLabel}>{p.label}</span>
-                    <span className={styles.pickMeta}>{p.modelCount} models</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Step 1: Select Tool */}
-          {step === 1 && (
-            <div className={styles.stepContent}>
-              <p className={styles.stepDesc}>
-                Install <strong>{selectedProvider?.label}</strong> models into which tool?
-              </p>
-              <div className={styles.grid}>
-                {TOOLS.map((tool) => (
-                  <button
-                    key={tool.id}
-                    className={`${styles.pickCard} ${selectedTool === tool.id ? styles.pickActive : ''}`}
-                    onClick={() => { setSelectedTool(tool.id); setStep(2) }}
-                  >
-                    <span className={styles.pickEmoji}>{tool.emoji}</span>
-                    <span className={styles.pickLabel}>{tool.label}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Step 2: Select Models */}
-          {step === 2 && (
-            <div className={styles.stepContent}>
-              <p className={styles.stepDesc}>
-                Choose models to install from <strong>{selectedProvider?.label}</strong> into <strong>{TOOLS.find(t => t.id === selectedTool)?.label}</strong>.
-              </p>
-              <div className={styles.scopeToggle}>
-                <button className={`${styles.scopeBtn} ${scope === 'all' ? styles.scopeActive : ''}`} onClick={() => { setScope('all'); selectAll() }}>All Models</button>
-                <button className={`${styles.scopeBtn} ${scope === 'selected' ? styles.scopeActive : ''}`} onClick={() => setScope('selected')}>Select Models</button>
-              </div>
-              {scope === 'selected' && (
-                <div className={styles.modelGrid}>
-                  {catalogModels.map((model) => (
-                    <button
-                      key={model.modelId}
-                      className={`${styles.modelCard} ${selectedModels.includes(model.modelId) ? styles.modelSelected : ''}`}
-                      onClick={() => toggleModel(model.modelId)}
-                    >
-                      <span className={styles.modelName}>{model.label}</span>
-                      <span className={styles.modelTier}>{model.tier}</span>
-                    </button>
-                  ))}
-                </div>
-              )}
-              {scope === 'all' && (
-                <div className={styles.allNotice}>
-                  All {catalogModels.length} models from {selectedProvider?.label} will be installed.
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Step 3: Installing → Done */}
-          {step === 3 && (
-            <div className={styles.stepContent}>
-              {installing && (
-                <div className={styles.installingState}>
-                  <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>
-              )}
-              {!installing && installResult && (
-                <div className={styles.doneState}>
-                  <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>
-
-        {/* Footer nav */}
-        <div className={styles.footer}>
-          {step > 0 && step < 3 && (
-            <button className={styles.backBtn} onClick={handleBack}>
-              <IconChevronLeft size={14} />
-              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 ? (
-                <>
-                  <IconPlug size={14} />
-                  Install
-                </>
-              ) : (
-                <>
-                  Next
-                  <IconChevronRight size={14} />
-                </>
-              )}
-            </button>
-          )}
-          {step === 3 && !installing && installResult && (
-            <button className={styles.doneBtn} onClick={onClose}>
-              <IconCheck size={14} />
-              Done
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}